ES6基础回顾 {callout color="#27d3b6"}ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现{/callout}{alert type="info"}解构赋值{callout color="#4572f7"}等号的右边必须是数组、对象、Set、Map等可遍历的数据结构(具备Iterator接口){/callout}数组的解构赋值let [a, b, c] = new Set([1, 2]); let [a, b,c] = [1, 2]; // a = 1 b = 2 c = undefined let [a, b, c = 8] = new Set([1, 2]); // a = 1 b = 2 c = 8 对象的结构赋值{callout color="#eabe80"}解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象.对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量。真正被赋值的是后者，而不是前者.{/callout}let { a = 0, b, c = 4, d: v ,e} = { a: 1, b: 2, d: 5 }; // a = 1 b = 2 c = 4 v = 5 e = undefined字符串的扩展{callout color="#b4c43b"}ES6加强了对Unicode的支持，并且扩展了字符串对象 JavaScript允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点 但是，这种表示法只限于码点在\uOOOO-\uFFFF之间的字符。超出这个范围的字符，必须用2个双字节的形式表达\uD842\uDFB7 示例双字节异体字，此文字unicode码是20BB7，如果使用\u20BB7,JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟一个7{/callout}codePointAt()[示例双字节异体字]这个字UniCode码为20BB7,如果使用charCodeAt()函数，可获取十进制Unicode码，但是此函数只能获取到第一个字节的十进制Unicode码55362，即十六进制D842;如果存在第二个UniCode码想获取需要使用charCodAt(1),成功则返回十进制Unicode码，否则返回NaN.codePointAt函数返回完整的十进制Unicode码，可通过toString(16)转换为16进制Unicode码'\uD842\uDFB7' === '\u{20BB7}' // true 大括号表示法与四字节的UTF-16编码是等价的。codePointAt方法是测试一个字符是由2个字节还是4个字节组成的最简单方法。// 判断是否四字节 function is32Bit(v) { return v.codePointAt(0) > 0XFFFF; } // Unicode转码解码函数 $.extend({ encodeUnicode: function (v) { var ascii = ''; for (var i = 0; i < v.length; i++) { var code = Number(v[i].charCodeAt(0)); if (code > 47) { var charAscii = code.toString(16); charAscii = new String('0000').substring(charAscii.length, 4) + charAscii; ascii += '\\u' + charAscii; } else { ascii += v[i]; } } return ascii; }, //解码 Unicode-->字符 decodeUnicode: function (v) { debugger; var r = v.match(/\u[0-9a-fA-F]{4}/g); if (r == null) { return v; } for (var i = 0; i < r.length; i++) { v = v.replace(r[i], unescape(r[i].replace('\\u', '%u'))); } return v; }, });String.fromCodePoint(){callout color="#89e6b1"}ES5提供了String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（Unicode编号大于OxFFFF）。{/callout}at(){callout color="#f7c073"}ES5对字符串对象提供了charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于OxFFFF的字符。{/callout}标签模板{callout color="#63d6f2"}模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。{/callout}其他方法inclues() : 返回布尔值，表示是否找到了参数字符串。startsWith() : 返回布尔值，表示参数字符串是否在源字符串的头部。endsWith() : 返回布尔值，表示参数字符串是否在源字符串的尾部。padStart() : 用于头部补全padEnd() : 用于尾部补全数值扩展进制转换0X1E.toString(8); // 36 --> 十六进制转换为八进制 let sum = 455; sum.toString(16) // 1C7 --> 十进制转换为十六进制Number.isFinite():判断值是否为有限Number.isFinite(0); // true Number.isFinite(NaN); // false Number.isFinite(true); // false Number.isFinite(Infinity); // false Number.isFinite(-Infinity); // falseNumber.isNaN():判断是否NaNNumber.isNaN(true); // false Number.isNaN(Number('1')); // true Number.isNaN(Number('E')); // falseNumber.parseInt()、Number.parseFloat()与全局方法使用一致Number.islnteger():判断一个数是否是整数Number.isInteger(true); // false Number.isInteger(25.0); // true Number.isInteger("25"); // falseNumber.isSafelnteger()JavaScript能够准确表示的整数范围在－2^53到2^53之间（不含两个端点），超过这个范围就无法精确表示。Number.isSafeInteger(Math.pow(2,52)); // true Number.isSafeInteger(Math.pow(2,53)); // falseMath对象扩展函数Math.trunc():去除一个数的小数部分，返回整数部分Math.trunc(23.89); // 23Math.sign():判断－个数到底是正数、负数，还是零参数为正数，返回＋l;参数为负数，返回－1参数为0，返回0参数为-0，返回-0其他值，返回NaNMath.sign(0); // 0 Math.sign('2'); // 1 Math.sign('E'); // NaNMath.fround():返回一个数的单精度浮点数形式Math.fround(1.337); // 1.3370000123977661指数运算符(**)2**3; // 8 即2的3次方函数的扩展函数默认值与解构赋值配合function SubEvent({ name = '', age: year = 12,color = 'blue' },attribute = true) { // 得到 name='test' ; year=18 ; color='blue'; attribute=true ....... } SubEvent({ name: 'test', age: 18 });rest参数function SubEvent(...params) { console.log(params); // [{ name: 'test', age: 18 }] } SubEvent({ name: 'test', age: 18 });箭头函数{callout color="#4def68"}函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象箭头函数不可以当作构造函数。也就是说，不可以使用new命令，否则会抛出一个错误且不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替{/callout}let parm = () => 4; let parm2 = () => ({ a: 1, b: 2 }); let parm3 = () => { return Math.trunc(23.78); }; [1, 2, 3].map((res) => res * 2); [1, 2, 3].filter((res) => res > 2);数组的扩展扩展运算待(...){callout color="#4def68"}将一个数组转为用逗号分隔的参数序列{/callout}let params = [2, 3, 4]; console.log(...params); function EsEvent([a, b, c]) { //解构赋值 console.log(a, b, c); // 2 3 4 } function EsEvent2(...parm) { // rest参数 console.log(parm); // [2,3,4] } EsEvent(...params); EsEvent2(...params);// 数组合并 let a = [2, 3]; console.log([0, 1, ...a]); // [0,1,2,3] // 对象合并 let b = { c: 3, d: 4 }; console.log({ a: 1, b: 2, ...b }); // {a:1,b:2,c:3,d:4} // 伪数组转换为数组 [...document.querySelectorAll('._value')]; // HTMLCollection集合转换为数组 [...new Set([...a, 4, 5, ...[2, 4]])]; // Set转为数组格式 去重 [2,3,4,5]// 函数返回值(数组) function GetParams() { let a = [2, 3, 4]; return [...a]; } const [aa, bb, cc = 9] = GetParams(); console.log(aa, bb, cc); // 2 3 4 // 函数返回值(对象) function GetParams2() { let as = { m: 1, n: 2 }; return { ...as }; } const { m, n = 3 } = GetParams2(); console.log(m, n); // 1 2Array.from():将两类对象转为真正的数组{callout color="#68ef4d"}类似数组的对象和可遍历(iterable)对象(包括ES6新增的数据结构Set和Map){/callout}Array.from(new Set([1,2,3])); 效果等同于 [...new Set[1,2,3]];Array.of():将一组值转换为数组。Array.of(3, 11, 8); // [3,11,8]Array.Prototype.find():找出第一个符合条件的数组成员[2,3,4,5].find((value,index)=>{return index>1}) // 4 [2,3,4,5].filter((value,index)=>{return index>1}) // [4,5]数组的空位Array(3); // length属性为3 [ , , ]对象的扩展Object.keys()、Object.values()、Object.entries()let aa = { a: 1, b: 2 }; let bb="c"; // Object.keys() Object.keys(aa); // ['a','b'] // Object.values() Object.values(aa); // [1,2] // Object.entries()方法 Object.entries(aa).forEach(([key, value]) => { console.log(key, value); }); //变量名做属性 { ["d"+"d"]:4, foo:false, [bb]:3, }Object.is():比较两个值是否相等(严格相等)Object.is(fasle,false); // true Object.is('2',2); //fasleObject.assign():将源对象(source)的所有可枚举属性复制到目标对象{callout color="#a2fd81"}Object.assign方法实行的是浅复制，而不是深复制。也就是说，如果源对象某个属性的值是对象，那么目标对象复制得到的是这个对象的引用。{/callout}let a1={a:1,b:{c:1}}; let a2=Object.assign({},a1); a1.b.d=2; console.log(a2); // {a:1.b:{c:1,d:2}} // 克隆对象 let vs = { a: 1, b: 2 }; Object.assign(Object.create(Object.getPrototypeOf(vs)), vs);属性的可枚举性{callout color="#f0ad4e"}对象的每一个属性都具有一个描述对象(Descriptor),用于控制该属性的行为.一旦把属性的 configurable 设置为 false，就不能再把它变回可配置了。此时，再调用 Object.defineProperty()方法修改除 writable 之外的特性，都会导致错误。{/callout}let os = { a: 1, b: 2 }; Object.getOwnPropertyDescriptor(os, 'a'); // 描述对象 { // 可配置 configurable: true, // 可枚举 enumerable: true, // 值 value: 1, // 可写 writable: true } Object.getOwnPropertyDescriptors(os);// 获取所有属性的描述对象 { "a": { "value": 1, "writable": true, "enumerable": true, "configurable": true }, "b": { "value": 2, "writable": true, "enumerable": true, "configurable": true } }属性的遍历for...in循环：遍历对象自身和继承的可枚举属性(不包含Symbol属性)Object.keys(): 遍历对象自身的所有可枚举属性(不包含Symbol属性)Reflect.OwnKeys(): 遍历对象自身的所有属性,不管是否可枚举和属性名是SymbolObject.getOwnPropertyNames():遍历对象自身所有(不包含Symbol属性)属性，不管是否可以枚举Object.getOwnPropertySymbols():遍历对象自身的所有Symbol属性__proto__属性{callout color="#6dee9a"}__proto__属性（前后各两个下画线）用来读取或设置当前对象的prototype对象。{/callout}Object.prototype.attrs=123; let os = new Object(); os.__proto__ == Object.getPrototypeOf(os); // true Object.is(os.__proto__,Object.getPrototypeOf(os)); // trueObject.setPrototypeOf(){callout color="#f0ad4e"}Object.setPrototypeOf方法的作用与proto相同，用来设置一个对象的prototype对象，返回参数对象本身。它是ES6正式推荐的设置原型对象的方法。{/callout}Object.getPrototypeOf()let os = { a: 1, b: 2 }; Object.getPrototypeOf(os);Object.keys()、Object.values()、Object.entries()let os = { a: 1, b: 2 }; Object.keys(os); // ['a','b'] Object.values(os); // [1,2] Object.entries(os); // [ ['a',1],['b',2]] Object.entries(os).forEach(([key, value]) => { console.log(key, value); });对象的扩展运算待let { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 }; // a=1 b=2 z={ c: 3, d: 4} let c = { c: 5, ...z }; // { c: 3, d: 4 } let d = { ...c, ...z }; // { c: 3, d: 4 }传导运算符let os = { a: 1, b: {c:3,d:4} }; os?.a; // 1 os?.['a']; // 1 Set Map{callout color="#f0ad4e"}遍历方法:map.keys();map.values();map.entries();forEach();{/callout}Set{callout color="#f0ad4e"}成员唯一，属于伪数组{/callout}add(param):添加元素clear():清空Setdelete(): 清除某个元素has(): 判断是否存在元素size属性：元素个数ler set = new Set([1,2,3,3]); //set.size = 3 Array.from(new Set([1,2,3,3])); length=3 等同于 [...new Set([1,2,3,3])]; // length = 3 Maplet map = new Map(); map.set('a',1); map.get('a'); // 1 ReflectReflect.has(): 判断对象内是否存在指定属性let os = { a: 1, b: 2 }; Reflect.has(os, 'a'); 'a' in osReflect.deleteProperty(): 删除对象某一属性let os = { a: 1, b: 2 }; Reflect.deleteProperty(os, 'a'); delete os.a;Reflect.getPrototypeOf(): 获取对象原型let os = { a: 1, b: 2 }; Reflect.getPrototypeOf(os); // 读取对象的__proto__属性Reflect.setPrototypeOf(): 设置原型let os = { a: 1, b: 2 }; Reflect.setPrototypeOf(os, null);Reflect.defineProperty(): 与Object.defineProperty作用相同let os = { a: 1, b: 2 }; Object.defineProperty(os, 'a', { value: 3, // 值 enumerable: true, // 可枚举性 writable: true, // 可写性 configurable: false, // 可配置性 });Reflect.getOwnPrope时yDescriptor(): 获取对象的可描述对象与Object.getOwnPrope时yDescriptor()一致let os = { a: 1, b: 2 }; Reflect.getOwnPropertyDescriptor(os, 'a'); { "value": 1, "writable": true, "enumerable": true, "configurable": true }Reflect.isExtensible()：对象是否可扩展 与Object.isExtensible()一致Object.isExtensible(os); // trueReflect.ownKeys(): 遍历对象的自身所有属性，不管是否可枚举和是否Symbol属性Promiselet data = new Promise((resolve, reject) => { $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos/1', dataType: 'json', async: false, success(res) { resolve(res); }, }); }) .then((result) => { return new Promise((resolve, reject) => { $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos/1', dataType: 'json', async: false, success(res) { resolve({ result, res }); }, }); }); }) .catch((error) => { console.log(error); }); let data2 = Promise.resolve({ a: 1, b: 2 });async函数{callout color="#4def6d"}async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。{/callout}async function GetData() { let res1 = await data; let res2 = await data2; return { res1, res2 }; } GetData().then((res) => { console.log(res); });{/alert}