ES6学习笔记1
/** let: 变量 1.同一作用域下不能重复声明 2.作用域: 全局作用域 和 块级作用域 {} 3.不进行预解析 const:常量 1.声明必须赋值 2.声明object类型 不能改的是引用地址 块级作用域 {} 解构赋值:(可迭代对象) 1.怎么快速交换a,b的值 let a = 0; let b = 1; [a, b] = [b, a]; 2.字符串的解构赋值 let str = "abc"; let [e, f] = str; // a c 3.数字的解构赋值 let num = 123; let [c, d] = num; // 报错 num is not iterable 展开运算符: 1. let arr1 = [1, 2, 3, 4] let arr2 = ["a", "b", ...arr1, "c", "d"] // ["a", "b", 1, 2, 3, 4, "c", "d"] 2.剩余参数 let [a, b, ...c] = arr1; console.log(a, b, c) // 1, 2, [3, 4] 3.避免对象修改的是同一引用地址 let obj = {a:1} let obj2 = {...obj} Set对象 构造函数 用来构建某一类型的对象 对象的实例化 let arr = [1, 2, 3, 4, 1, 2, "a"] let s = new Set(arr) // 参数:数组 or 类数组, 去重 arr = [...s] s.size() // 数值的个数 ==> length s.clear() // 清空 s.delete("a") // 删除某一项 s.add(6).add('b') // 添加某一项,返回set对象,支持链式 s.has("a") // 是否包含某一项 Map对象 let arr = [ ["a", 1], ["b", 10], ["c", 100] ] let m = new Map(arr) m.get(key); //取值 m.set(key, value); // 添加 函数的扩展 1.箭头函数 2.不定参数 arguments function fn() { console.log(arguments) } fn(1,2) const fn1 = () => { console.log(arguments) // 报错,箭头函数没有不定参数,解决方法:rest参数 } const fn1 = (...arg) => { console.log(arg) // rest参数 } 3.this问题 箭头函数本身没有this,调用箭头函数的this时,指向的是其声明时所在的作用域的this 4.参数默认值 数组的新增方法: 1.构造函数下的方法 1.1 Array.form() 把一个类数组转换成真正的数组,接收三个参数:类数组、遍历回调函数、this指向 { let lis = document.querySelectorAll("#list li"); let arr = []; lis = Array.form(lis, function(item, index) { console.log(item, index, this); return index; }, arr); console.log(lis) } 1.2 Array.of() 将参数转成一个数组 { Array.of(1, 2, "a", "b") // [1, 2, "a", "b"] } 1.3 Array.isArray() 检测数据是否是个数组 2.数组对象本身的方法 let arr = new Array(); 2.1 arr.find() // 查找数组中满足要求的第一个元素, 返回具体的值 参数1:回调函数 参数2:回调函数的this指向 { let arr = ["a", "b", "c"] let arr = [1, 2, 3, 4] let val = arr.find((item, index) => { if(item >= 3) { return true } }); console.log(val) // 3 } 2.2 arr.findIndex() // 返回索引 2.3 arr.flat() // 扁平化多维数组。传参:层级,或者Infinity,不传默认一层 { const arr =[ ["小明", 18], [["ew","ewrwer"], [343, 34324]] ] arr.flat() } 2.4 arr.flatMap() //与深度为1的flat作用几乎相同 { let arr = [ ["小明", "34"] ["xiaohua", "12"] ] let newArr = arr.flatMap((item, index) => { console.log(item, index) return item; }) console.log(newArr) } 2.5 arr.fill() // 填充 { let arr = [0, 1, 2, 3, 4] arr.fill("a", 1, 3) // 从索引1开始填充,索引3截止 [0, "a", "a", 3, 4], 默认值是arr.length } 2.6 arr.includes() { let arr = ["a", "b", "c"] arr.includes("c", 2) // true 从索引2开始检索 } 字符串新增的方法 1.includes 2.startsWith('ab', 2) // 从索引2开始查找ab开始的字符串,返回布尔值 3.endsWith() // 以xx结束 4.repeat() // 传入数字,重复n次 5.模板字符串 对象新增的方法 1.简洁表示法 let a = 2; let b = 232; let obj = { a, b, c() { // ... } } 2.属性名表达式(给属性名赋值) let name = '小明'; let obj = { [name]: 111 } console.log(obj) // let obj = { // '小明': 111 // } 3. Object.assign() 4. Object.is(value1, value2) // 判断两个值是否是相同的值 console.log(+0 === -0) // true console.log(Object.is(+0, -0)) // false console.log(Object.is(1, "1")) // false console.log(Object.is(NaN, NaN)) // true 两个值都是 undefined 两个值都是 null 或者都是 false 两个值是 由相同个数的字符 按照相同的顺序 组成的字符串 两个值指向同一个对象 两个值都是 数字 并且 都是 +0 都是 -0 都是 NaN babel 迭代器 1.迭代协议:规定了迭代与实现的逻辑 2.迭代器:具体的迭代实现逻辑 3.迭代对象:可被迭代的对象-实现了[Symbol.iterator]方法 4.迭代语句 for ... in: 以原始插入的顺序迭代对象的可枚举属性 for ... of: 根据迭代对象的迭代器具体实现迭代对象数据 5.迭代器实现原理 5.1 obj[Symbol.iterator] = function() { return { next() { return { value: '11', // 循环过程中的值 done: false // true循环结束 false循环未完成 } } } } 5.2 for...in 遍历数组,拿到的是下标 let arr = ["a", "b", "c"] for(let attr in arr) { console.log(attr) // 0 1 2 } 5.3 for...of 遍历数组,拿到的是value let arr = ["a", "b", "c"] for(let attr of arr) { console.log(attr) // a b c } 5.4 for...in 遍历对象,拿到的是属性名 let obj = { a: '2323', b: 'wewr', } for(let attr in obj) { console.log(attr) // a b } 5.5 for...of 遍历对象,报错 let obj = { a: '2323', b: 'wewr', } for(let attr of obj) { console.log(attr) // Uncaught TypeError: obj is not iterable } 可迭代对象不可迭代对象,区别在于是否定义了迭代器 Symbol.iterator let obj = { a: 1, b: 2, c: 3, } for(let val of obj) { // 迭代协议(条件) let values = Object.values(obj); let index = 0; obj[Symbol.iterator] = function() { return { next() { if(index >= values.length) { return { done: ture // true循环结束 } } else { return { done: false, value: values[index++] } } } } } } // 撸一下,手动模拟过程(for...of相当于把此过程执行了一遍,不停的调用next方法) let values = obj[Symbol.iterator](); values.next() // {done: false, value: 1} values.next() // {done: false, value: 2} values.next() // {done: false, value: 3} values.next() // {done: true} Generator 函数 在形式上,Generator是一个普通函数,但是有两个特征。 一是,function命令与函数名之间有一个星号 二是,函数体内部使用yield语句,定义遍历器的每个成员,即不同的内部状态 function*fn() { yield 1; yield 2; yield 3; } let f = fn(); // console.log(f); // 返回一个Generator函数 // f.next(); // {value: 1, done: false} for(let val of f) { console.log(val) // 1 2 3 } // 改写 function*fn() { yield new Promise((resolve, reject) => { setTimeout(() => { console.log(1); resolve("第一个yeild执行完毕"); }, 200); }); yield new Promise((resolve, reject) => { setTimeout(() => { console.log(1); resolve(); }, 200); }); yield new Promise((resolve, reject) => { setTimeout(() => { console.log(1); resolve(); }, 200); }); } co(fn); function co(fn) { let f = fn(); next(); function next() { let result = f.next(); if(!result.done) { // 上一个异步走完了,再执行下一个异步 result.value.then((info) => { console.log(info) next(); }) } } }