白也blog - es6
type: channel
link: http://www.baiyeovo.cn/index.php/tag/es6/
items: AJAX复习笔记
items: ES6中reduce的骚操作
items: ES6语法回顾
items: new Map()的基础用法(ES6)

AJAX复习笔记
type: item
date: 2022-04-11T19:22:00+08:00
description: 原生AJAX1.ajax技术:可以在网页不跳转的情况下 向服务器发送请求 应用:局部刷新 2.ajax语法:使用内置对象XMLHttpRequst 请求方法get和post区别： 传参方式不同 get请求： 直接在url后面拼接参数 * 参数在url中，安全性不高 post请求： 1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') * 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴 2.使用xhr的send方法发送参数： xhr.send('参数名=参数值'); * 注意：不要加前面的? get请求参数//(1)创建XMLHttpRequest对象(小黄人) const xhr = new XMLHttpRequest() //(2)设置请求方法和地址 xhr.open('get', 'https://autumnfish.cn/api/joke') //(3)发送请求 xhr.send() //(4)注册响应回调事件 /* 这个事件不是立即执行,而是过一会执行. 取决于很多因素:带宽 天气 服务器 网络运营商 */ xhr.onload = function () { console.log(xhr.responseText); }post请求//(1).实例化ajax对象 let xhr = new XMLHttpRequest() //(2).设置请求方法和地址 xhr.open('post', 'https://autumnfish.cn/api/user/register') //(3).设置请求头（post请求才需要设置） xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') //(4).发送请求 ： 参数格式 'key=value' xhr.send('key=value') //(5).注册回调函数 xhr.onload = function () { console.log(xhr.responseText) } ajax工作原理http协议 : 网络传输协议* 协议 : 规定网络数据传输格式 http协议组成 : 请求报文 + 响应报文* 浏览器发请求 必须是 ： 请求报文 * 服务器响应 必须是 ： 响应报文 请求报文 由三部分组成3.1 请求行 : 请求方法 + 请求地址 3.2 请求头 : 浏览器告诉服务器,我发送给你的数据是什么格式 (文本、json、图片、音视频等等) 3.3 请求体 : 请求参数 响应报文 由三部分组成4.1 响应行 : 服务器状态码、 服务器地址等2xx : 请求成功 200:成功 3xx : 重定向 302 服务端重定向(服务器主动修改浏览器网址) 4xx : 前端的问题 404 : url错误 400: 参数错误 403/402 : 没有权限 405：请求方法错误 5xx : 服务器的问题 500 服务器挂了(后台java代码像js一样爆红了)4.2 响应头 : 服务器告诉浏览器，我响应给你的数据是什么格式 (文本、json、图片、音视频等等) 4.3 响应体 : 服务器响应数据 5.ajax原理 ： 发送请求报文过程* 给服务器发请求，其实发的就是请求报文 从网页输入url到呈现过程 1.DNS解析 : 把域名解析成ip地址 2.TCP连接三次握手 : 建立 安全可靠的传输协议 2.1 什么是TCP : 一种 传输控制协议 2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的） 2.3 TCP三次握手 : 第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送) 第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送) 第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收) 3.HTTP请求 : 网络传输协议 3.1 浏览器发送请求 3.2 服务器处理请求 3.3 服务器响应请求 4.服务器响应数据之后,渲染引擎开始渲染页面 4.1 解析html生成：dom树 4.2 解析css生成：样式树 4.3 dom树 与 样式树 合并得到 渲染树 4.4 呈现页面 AXIOS框架axios语法 : axios .get('url') .then( res=>{ //请求成功 } ) .catch( err=>{ //请求错误} ) .then( ()=>{ //请求完成 } )axios基本使用//基本使用 document.que…

ES6中reduce的骚操作
type: item
date: 2022-04-09T00:02:00+08:00
description: reduce方法是JavaScript中一个比较强大的方法，可能在平时开发中，有人根本没用过，通过下面的8个例子，学会reduce的用法以及它的常用场景。reduce方法是一个数组的迭代方法，和map、filter不同，reduce方法可缓存一个变量，迭代时我们可以操作这个变量，然后返回它。这是我大白话的解释，可能还是不容易理解，下面看例子吧1. 数组累加数组累加是项目经常遇到的，比如计算商品总价等，使用reduce就可以一行代码搞定，而且不用定义外部变量，reduce是完全无副作用的函数。// 累加[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i);// 输出：36// 累加，默认一个初始值[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i, 5);// 输出：41// 累乘[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a * i);// 输出：403202. 找出数组最大值在数组每次的迭代中，我们使用Math.max获取最大值并返回，最后我们将得到数组所有项目的最大值。[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));当然如果数组每项都是数字我们可以使用...展开运算符和Math.max配合。Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);3. 处理不规则数组通过map和reduce配合使用，返回每个子数组拼接好的结果。let data = [ ["红色","128g", "苹果手机"], ["南北","两室一厅","128㎡","洋房住宅"], ["小米","白色","智能运动手表","心率血压血氧","来电信息提醒"], ["官方发售","2020年秋季","篮球","球鞋","品牌直邮"]]let dataConcat = data.map(item=>item.reduce((a,i)=>${a} ${i}))// 输出结果：["红色 128g 苹果手机""南北 两室一厅 128㎡ 洋房住宅""小米 白色 智能运动手表 心率血压血氧 来电信息提醒""官方发售 2020年秋季 篮球 球鞋 品牌直邮"]4. 删除数据重复项检查当前迭代项是否存在，如果不存在添加到数组中。let array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'];array.reduce((noDupes, curVal) => { if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) } return noDupes}, [])// 输出：[1, 2, 3, 'a', 'b', 'c']5. 验证括号是否合法这是一个很巧妙的用法，我在dev.to上看到的用法。如果结果等于0说明，括号数量是合法的。[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);// 输出：0// 使用循环方式let status=0for (let i of [..."(())()(()())"]) { if(i === "(")status = status + 1else if(i === ")")status = status - 1if (status < 0) {break;}}6. 按属性分组按照指定key将数据进行分组，这里我用国家字段分组，在每次迭代过程中检查当前国家是否存在，如果不存在创建一个数组，将数据插入到数组中。并返回数组。let obj = [ {name: '张三', job: '数据分析师', country: '中国'}, {name: '艾斯', job: '科学家', country: '中国'}, {name: '雷尔', job: '科学家', country: '美国'}, {name: '鲍勃', job: '软件工程师', country: '印度'},]obj.reduce((group, curP) => { let newkey = curP['country'] if(!group[newkey]){group[newkey]=[]} group[newkey].push(curP) return group}, [])// 输出：[ 中国: [{…}, {…}] 印度: [{…}] 美国: [{…}] ]7. 数组扁平化这里展示的数组只有一级深度，如果数组是多级可以使用递归来进行处理[[3, 4, 5], [2, …

ES6语法回顾
type: item
date: 2022-03-28T12:47:00+08:00
description: map是映射,forEach是遍历map有返回值,返回的是一个新数组,forEach没有returnlet和const声明变量关键字 1. ES5声明变量 var 1.1 有变量预解析 1.2 没有块级作用域 2.ES6声明变量 let const 1.1 没有变量预解析 1.2 有块级作用域 3. let与const区别 let : 变量。 可以修改 const : 常量。 不可以修改 * 实际开发中, 只要不修改的变量都用const,需要改的时候用let 1. ES5声明变量 var 1.1 预解析 : 变量的声明会提升到当前作用域最顶端 console.log(num) var num = 10 var num console.log( num ) num = 10 1.2 没有块级作用域 : for (var i = 1; i <= 5; i++) {} console.log(i) 对象解构赋值解构赋值 ： 变量赋值的简写(解构精髓：当变量名 和 对象属性值一致的时候，只需要写一个) 1. 取出对象的属性 赋值 给 变量 let { name,age,sex } = obj 2. 取出变量的属性 赋值 给 对象 let obj = { name,// name : name age, sex } let obj = { name:'张三', age:20, sex:'男' } 1. 取出对象的属性 赋值 给 变量 ES5 let name = obj.name let age = obj.age let sex = obj.sex let score = obj.score ES6 let {name,age,sex,score} = obj console.log(name,age,sex,score)//'张三',20,'男',undefined 2. 取出变量的属性 赋值 给 对象 let username = 'admin' let password = '123456' ES5 let p = { username:username, password:password } ES6 let p = { username,// username:username password, say(){ console.log(111) }//say:function(){} } console.log(p) p.say() 数组解构数组解构 1.取出数组元素 赋值给变量 2.取出变量的值 赋值给数组元素 let arr = [10, 20, 30] //ES5 // let n1 = arr[0] // let n2 = arr[1] // let n3 = arr[2] // let n4 = arr[3] //ES6 let [n1, n2, n3, n4] = arr console.log(n1, n2, n3, n4) //10 20 30 undefined //取出变量的值 赋值给数组 let num1 = 1 let num2 = 2 let arr1 = [num1, num2] let newArr = [1, 2, 3, 4, 5, 6, 7, 8] let [a, b, c, d, e, f, g] = newArr console.log(a, b, c, d, e, f, g);函数参数解构函数参数解构: 当函数参数是对象类型,就可以对形参进行解构 */ //传参本质： 实参给形参赋值 function fn(obj){// let obj = {name:'张三',age:20,sex:'男'} console.log( obj ) //对函数形参进行解构 let {name,sex,age} = obj console.log( name,sex,age ) } function fn1( {name,sex,age} ){// let {name,sex,age} = {name:'张三',age:20,sex:'男'} console.log( name,sex,age ) } fn( {name:'张三',age:20,sex:'男'} ) fn1( {name:'张三',age:20,sex:'男'} ) 箭头函数1.箭头函数 : 相当于 function函数的简写 (1)去掉function,改成 箭头 => (2)形参小括号写到箭头左边 2.箭头函数语法注意点 2.1 如果箭头函数只有一个形参,则可以省略小括号(在原型链和构造函数上不能使用箭头函数) 2.2 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return） 3.箭头函数this : …

new Map()的基础用法(ES6)
type: item
date: 2022-02-19T23:17:00+08:00
description: 1、Map是什么Map类型是键值对的有序列表，而键和值都可以是任意类型Map与Set的区别Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构集合-----是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合字典-----是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同Set集合是以[值，值]的形式存储元素，且值不能重复Map字典是以[键，值]的形式存储2、增删改查2.1sizesize属性返回 Map 结构的成员总数。const map = new Map(); map.set('foo', true); map.set('bar', false); map.size // 22.2 set()设置键名key对应的键值为value，然后返回整个 Map 结构如果key已经有值，则键值会被更新，否则就新生成该键同时返回的是当前Map对象，可采用链式写法const m = new Map(); let fn = function(){} m.set('edition', 6) // 键是字符串 m.set(fn, 'standard') // 键是函数 m.set(undefined, 'nah') // 键是 undefined m.set(1, 'a').set(2, 'b').set(3, 'c') // 链式操作 2.3 get()get方法读取key对应的键值，如果找不到key，返回undefinedconst m = new Map(); const hello = function() {console.log('hello');}; m.set(hello, 'Hello ES6!') // 键是函数 m.get(hello) // Hello ES6!2.4 has()has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中const m = new Map(); m.set('edition', 6); m.set(262, 'standard'); m.set(undefined, 'nah'); m.has('edition') // true m.has('years') // false m.has(undefined) // true2.4 delete()delete方法删除某个键，返回true。如果删除失败，返回falseconst m = new Map(); m.set(undefined, 'nah'); m.has(undefined) // true m.delete(undefined) m.has(undefined) // false2.5 clear()clear方法清除所有成员，没有返回值let map = new Map(); map.set('foo', true); map.set('bar', false); map.size // 2 map.clear() map.size // 03、遍历keys()：返回键名的遍历器values()：返回键值的遍历器entries()：返回所有成员的遍历器forEach()：遍历 Map 的所有成员const map = new Map([ ['F', 'no'], ['T', 'yes'], ]); //keys() for (let key of map.keys()) { console.log(key); // "F" "T" } //values() for (let value of map.values()) { console.log(value); // "no" "yes" } // entries() for (let item of map.entries()) { console.log(item[0], item[1]); } // "F" "no" 、"T" "yes" // 或者 for (let [key, value] of map.entries()) { console.log(key, value); } // "F" "no" 、"T" "yes" // 等同于使用map.entries() for (let [key, value] of map) { console.log(key, value); } // "F" "no" 、 "T" "yes" map.forEach(function(value, key, map) { console.log(key, value); // "F" "no" 、 "T" "yes" });