ES6基础语法
1.解构
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。
1.数组解构 等号左边的变量放到中括号内部，匹配右侧数组中的元素。 1.let [a,b,c]=[1,2,3]; console.log(a,b,c); 2.let [a,b,c,d,e]=[1,2,3,[4,5],6]; console.log(a,b,c,d,e); 3.不完全解构 let [a,b,c,[d],e]=[1,2,3,[4,5,6],7]; console.log(a,b,c,d,e); 4.集合解构 ...扩展运算符 let [a,...b]=[1,2,3,4,5]; console.log(a,b); 5.默认值解构（当匹配值严格等于undefined时，默认值生效） let [a=1,b=2,c=3]=[4,5,6]; console.log(a,b,c); let [a=1,b=2,c=3]=[]; console.log(a,b,c); 6.默认值也可以是函数 function test(){console.log('hello')} let [a=test()]=[1]; console.log(a); let [a=test()]=[]; console.log(a); 7.let arr=[1,2,3,4]; let [...a]=arr; console.log(a===arr);//false
2.对象解构 等号左边的变量放到大括号内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值 1.let {foo,bar}={foo:'hello',bar:"world"}; console.log(foo,bar); 2.如果变量名和属性名不一致，需要重命名 let {foo:baz}={foo:"hello",bar:"world"}; baz:hello 3.对象的解构赋值是下面形式的简写 前面属性名后边变量名 let {foo:foo,bar:bar}={foo:'hello',bar:"world"}; 4.嵌套结构 let obj={p:['hello',{y:"world"}]}; let {p:[a,{y:b}]}=obj; console.log(a,b);hello world 5.默认值结构 let {x:y=3}={}; console.log(y);3 经典面试题: const [a, b, c, ...d] = [1, 2, 3, 11, 999]; const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 }; console.log(a, b, c, d, e, f1, g, h);
3.字符串解构 1.可以使用对象解构或者是数组解构，使用数组结构可以获取指定字符；使用对象结构可以获取实例属性方法; let [a,b,c]='hello'; console.log(a,b,c);h e l 2.也可以将string字符串转换为数组 let [...arr]='hello'; console.log(arr); 3.使用对象解构 let {toString,valueOf,length}='hello';//相当于把‘hello’当成String基本包装器类型 console.log(toString,valueOf,length)
4.数值解构 可以获取到数值包装器构造函数原型中指定的方法。 let {toString,valueOf}=10; console.log(toString,valueOf) 5.布尔值解构 let {toString,valueOf}=true; console.log(toString,valueOf);
2.对象
ES6中对于Object的拓展主要是静态方法的拓展。
1.对象简写 ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值。对象简写在未来的使用频率极其高。 let name='larry'; let age=12; let obj={ name, age, //es5 sayName:function(){} // sayName(){ // console.log(this.name) --按照这种形式写this依然指向调用者 // }, // sayName:()=>{ // console.log(this) // } sayName(){ //this-->obj return ()=>{ console.log(this) } } } obj.sayName()(); ---------------------------------------------------------- let name='larry'; let age=12; let sayName=()=>{ console.log(this) } let obj={ name, age, //es5 sayName:function(){} // sayName(){ // console.log(this.name) // }, // sayName:()=>{ // console.log(this) // } sayName(){ return sayName } } // obj.sayName()() //箭头函数没有自己的this，内部this指向声明箭头函数时外部作用域中的this。 obj.sayName()()
2.箭头函数 es5函数内部属性有this和arguments,箭头函数内arguments不再保存实参,如果想接受实参，可以使用rest参数 let test=(a,...b)=>{ //console.log(this,arguments); console.log(a,b);a--1 b--[2,3,4,5] } test(1,2,3,4,5)
3.扩展运算符 使用拓展运算符可以解构数组和对象，并返回解构后的新数组或者新对象 //...用到左侧是聚合 用到右侧是展开 let arr=[1,2,3,4,5] let [...a]=arr; console.log(a); console.log(a===arr);//false let obj={name:'zhangsan',age:12}; let {...b}=obj; console.log(b); console.log(b===obj);//false
4.函数参数解构 1.函数参数对象解构 function test({name,age,...a}){ ...a解构剩余对象中的属性并返回一个新对象 console.log(name,age,a) } test({name:"zhangsan",age:12,gender:1}) 2.函数参数对象默认值解构 function test({name,age=1,...a}){ console.log(name,age,a) } test({name:"zhangsan",gender:1}) 3.函数参数数组解构 function test([a,b,c,d]){ console.log(a,b,c,d) } test([1,2,3,4]) ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。通常情况下，定义了默认值的参数，应该是函数的尾参数，函数的length属性，将返回没有指定默认值的参数个数 function log(x, y = 'World',d) { console.log(x, y); } // log(1,2) console.log(log.length)
5.对象API拓展j 1.Object.is(a,b); 判断a和b的值是否相等 例子1: console.log(1===1);//true console.log(Object.is(1,1));//true console.log(Object.is(1,2));//false console.log(+0===-0)//true console.log(Object.is(+0,-0));//false console.log(NaN===NaN);//false console.log(Object.is(NaN,NaN));//true 2.Object.assign(o,obj); 两个参数实现对象复制、拷贝 第一个参数是目标对象 1.let o={}; let obj={ name:"zhangsan", age:12, } let result=Object.assign(o,obj);把obj中的内容复制到o对象当中并返回o对象 console.log(o) console.log(result) console.log(o===result) 2.Object.assign(o,obj,obj1); 三个参数代表的是合并对象obj,obj1到o当中并返回o对象 let o={} let obj={ name:"zhangsan", age:12 } let obj1={ name:"lisi" gender:1 } let result=Object.assign(o,obj,obj1); console.log(o) console.log(result) 3.获取原型对象中的方法 Object.getPrototypeOf() let obj={ name:"", age:1 } console.log(obj.__proto__); console.log(obj.constructor.prototype) console.log(Object.getPrototypeOf(obj)) 4.设置原型对象中的方法 Object.setPrototypeOf(obj,obj1) 设置obj的原型对象为obj1 Object.setPrototypeOf(obj,obj1); console.log(obj.__proto__); console.log(obj.constructor.prototype) console.log(Object.getPrototypeOf(obj)); 5.Object.keys() Object.values() Object.entries() let obj={ name:'terry', age:12 } // 获取所有属性名组成的数组 console.log(Object.keys(obj)); // 获取所有属性值组成的数组 console.log(Object.values(obj)); // 获取键值对组成的数组 console.log(Object.entries(obj)); 6.Object.fromEntries()用于把键值对还原成对象结构。 console.log(Object.fromEntries(Object.entries(obj)));
3.数组
数组在静态方法与实例方法中都有所拓展
1.Array.from();//将类数组对象转换为数组 //NodeList //es5 Array.prototype.slice.call('类数组对象',0) 2.Array.of();//参数是数组元素，为了解决new Array(10)传递一个数组,创建length let a=Array.of(10,'hello') console.log(a) 3.Array.prototype.find((item)=>{}) find方法返回第一个满足条件的元素或者undefined 参数回调函数 let arr=[1,2,3,2,3]; let result=arr.find((item)=>{ return item>2 }) console.log(result) 4.Array.prototype.findIndex();//参数回调函数 findIndex返回第一个满足条件的元素的索引或者-1 let arr=[1,2,3,2,3]; let result=arr.findIndex((item)=>{ return item>2 }) console.log(result) 5.Array.prototype.includes(); includes是否包含某个元素，返回true/false console.log(arr.includes(300)); 6.Array.prototype.fill() 用来填充数组,修改原数组 arr.fill(8); console.log(arr) //参数 返回值 修改原数组 7.Array.prototype.keys() 8.Array.prototype.values() 9.Array.prototype.entries() //keys,values,entries变量当前是迭代器对象 let arr = [2, 3, 4, 5, 6, 2]; let keys=arr.keys(); let values = arr.values(); let entries = arr.entries(); console.log(keys, values, entries); // 迭代器实现了Iterator接口，只要有实现了Iterator接口就可以for-of遍历 10.Array.prototype.flat() 把数组展平是Array原型给我们带来的新特性，通过传入层级深度参数（默认为1），来为下层数组提升层级。如果想提升所有层级可以写一个比较大的数字甚至是Infinity，当然不推荐这么做。 [1, 2, [3, 4]].flat(); // [ 1, 2, 3, 4 ] [1, 2, [3, 4, [5, 6]]].flat(2); // [ 1, 2, 3, 4, 5, 6 ] 11.Array.prototype.flatMap() 它是 Array.prototype.map() 和Array.prototype.flat()的组合，通过对map调整后的数据尝试展平操作。 [1, 2, [3, 4]].flatMap(v => { if (typeof v === 'number') { return v * 2 } else { return v.map(v => v * 2) } }) // [2, 4, 6, 8]
String.prototype.trimStart()/String.prototype.trimEnd()
在接收用户输入的文本，我们经常会把头尾的空格文本去掉，来规避展示的不受控情况。自ES5来，String.prototype.trim() 被用于去除头尾上的空格、换行符等，现在通过 trimStart()，trimEnd() 来头和尾进行单独控制。trimLeft()、trimRight() 是他们的别名。
let str=' hello world! '; console.log(str+'2'); let res=str.trimStart(); // let res=str.trimEnd(); console.log(res+'2');
String.prototype.padStart() / String.prototype.padEnd()
这两个函数的作用是在头尾添加字符串，它们接收两个参数 str.padStart(targetLength [, padString])，其中 targetLength 表示填充完的字符串长度，padString 表示填充的字符串，默认空格
'es8'.padStart(4); // ' es8'，默认填入空格 'es8'.padEnd(4, '0'); // 'es80'，填充自定义字符串 'es8'.padStart(2); // 'es8'，如果长度小于原字符串，返回原字符串 'es8'.padStart(6, 'abcd'); // 'abces8'，如果填充字符串+原字符串长度大于给定长度，则从填充字符串左边开始截取 'es8'.padEnd(6, 'abcd'); // 'es8abc'，padEnd也是从填充字符串左边开始截取 'es8'.padStart(7, 'abc'); // 'abcaes8'，如果填充字符串+原字符串长度小于给定长度，则从填充字符串重复填充
Function.prototype.toString() 重新修订
从ES2019开始，Function.prototype.toString()将从头到尾返回源代码中的实际文本片段。这意味着还将返回注释、空格和语法详细信息。
function /* a comment */ foo() {} 之前，Function.prototype.toString()只会返回了函数的主体，但没有注释和空格。 foo.toString(); // 'function foo() {}' 但现在，函数返回的结果与编写的一致。 foo.toString(); // 'function /* a comment */ foo () {}'
