来自 https://www.cnblogs.com/lhl66/p/9555903.html 侵删
来自 https://www.cnblogs.com/lhl66/p/8862106.html 侵删
1. let, const 都是块级作用域, 其有效范围仅在代码块中。 //es5 if (a == 1) { var b = 'xxx'; } console.log(b); //xxx //es6 if (a == 1) { let b = 'xxx'; } console.log(b); //undefined -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- const sum = { num1: 1, num2: 2 }; sum.num2 = 6; console.log(sum); //{num1:1,num2:6} 常量只是指向了对象的指针, 对象本身的内容却依然可以被修改 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 2. 模板字符串 //es5 $('#mark').append( '出售中 <span>' + obj.num + '</span> ' + '剩下的, ' + '<span>' + obj.showNum + '</span> 卖完了!'); //es6 //在es6中,内容模板,可以定义在 `` 包起来的字符串中,其中的内容会保持原有格式 //另外可以在字符串中直接使用模板语言进行变量填充,优雅而简洁 $('#mark').append(` 出售 <span>${obj.num}</span> 剩下 <span>${obj.showNum}</span>`); -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 3. 字符串遍历输出, 补全 for (let item of 'str') { console.log(item); } //s //t //r -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - //参数1:[number] 目标字符串长度 //参数2:[string] 进行补全的字符串 '123'.padStart(5, '0') //00123 - 字符串不足5位,在头部补充不足长度的目标字符串 '345'.padEnd(5, '0') //34500 - 在尾部进行字符串补全 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 4. 数组扩展 let a = [1, 2]; let b = [2, 3]; let c = [...a, ...b]; //[1, 2, 2, 3] 所有内容合并,但并不会去除重复 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - Array.of(3, 4, 5) //快速转换为数组 [3,4,5] -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - .keys() - 获得数组中所有元素的键名( 实际上就是下标索引号) .values() - 获得数组中所有元素的数据 .entries() - 获得数组中所有数据的键名和数据 for (let i of['x', 'y'].keys()) { console.log(i); //0 1 } -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - for (let elem of['x', 'y'].values()) { console.log(elem); //x y } -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - for (let [index, elem] of['x', 'y'].entries()) { console.log(index, elem); // 0 "x" 1 "y" } -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 5. 对象扩展 //直接使用变量/常量的名称个为对象属性的名称 let a = 'abc'; let b = { a }; //{a: 'abc'} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 判断对象是否为数组 if (Object.isArray(obj)) {} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 对象内容合并 Object.keys() - 获得对象中所有的键名, 以数组的形式返回 var obj = { a: 1, b: 2 }; var names = Object.keys(obj); //['a', 'b'] -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - Object.values() - 获得对象中所有的值内容, 以数组的形式返回 var obj = { a: 1, b: 2 }; var values = Object.values(obj); //[1, 2] -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - Object.entries() - 获得对象中所有的成员数据, 以数组的形式返回, 成员的内容也是数组形式 var obj = { a: 1, b: 2 }; var values = Object.entries(obj); //[['a',1], ['b',2]] -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 解构赋值 let [a, …b] = [1, 2, 3]; //这里 b 的值为[2,3],这样可以快速使用剩余的数据赋值给变量, let [a, b, c] = [1, 2, 3]; //定义了三个变量,并对应赋了值;如果值的个数与变量名个数不匹配,没有对应上的变量值为 undefinedlet obj = {a: 1, b: 2}; let { a, b } = obj; //a=1,b=2 使用变量的方式进行结构赋值, 需要严格匹配名称, 数组的模式是严格匹配下标 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 6. 模块化 //app.js let act = { a: 1, b: 2, c: 3 }; export default act; //index.js import act from 'app.js'; //假设 app.js 与index.js 同在一个目录中 console.log(act.a); //1 //--------------------------------------------------------------------分割 //ES6字符串扩展方法,三个方法都支持第二个参数,表示开始搜索的位置; let str = 'Hello world!'; console.log(str.includes('o')) // true ----表示是否找到了参数字符串;类似ES5 indexOf() console.log(str.startsWith('Hello')) // true ----表示参数字符串是否在原字符串的头部; console.log(str.endsWith('!')) // true ----表示参数字符串是否在原字符串的尾部; //ES6字符串扩展方法----模板字符串 let hello = '你好'; let str1 = `${hello},这节课学习字符串模板`; console.log(str1); //你好,这节课学习字符串模板,省去拼接的烦恼; alert `123` // 等同于 alert(123) //ES6解构赋值 let res = { id: 1, status: "OK", list: [{ name: 'bob', age: 20 }] } let { id, status, list } = res; console.log(id, status, list); // 1, "OK", [{name: 'bob',age: 20}] //const 声明常量 === var a = 1, b = 2, c = 3;or const a = 1;const b = 2;const c = 3; const [a, b, c] = [1, 2, 3]; console.log(a, 'aaaaa'); //1 "aaaaa" console.log(b, 'bbbbb'); //2 "bbbbb" console.log(c, 'ccccc'); //3 "ccccc" //使用扩展运算符(...)拷贝数组 let test = [1, 2, 3, 4, 5] let [...test1] = test test[2] = 5 console.log(test, '原数组') //[1, 2, 5, 4, 5] "原数组" console.log(test1, '深拷贝的数组') //[1, 2, 3, 4, 5] "深拷贝的数组" //不要在模块输入中使用通配符。因为这样可以确保你的模块之中,有一个默认输出(export default)。 // bad //import * as myObject from './importModule'; // good //import myObject from './importModule'; //reset参数---rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中 function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } console.log(add(2, 5, 3)) // 10 //箭头函数 var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; }; console.log(sum(1, 4), '求和') //5 "求和" //如果只有单个参数 var fun = age => age; //or var fun = (age) => age; // 等同于 var fun = function(age) { return age; }; console.log(fun(20), '箭头函数单个参数') //20 "箭头函数单个参数" //扩展运算符加箭头函数 const sumList = (...num) => num; console.log(sumList(1, 2, 3, 4, 5), '扩展运算符运用场景一') // [1, 2, 3, 4, 5] "扩展运算符运用场景一" const getList = (name, ...obj) => [name, obj]; console.log(getList(1, 2, 3, 4, 5), '扩展运算符运用场景二') // [1,[2,3,4,5]] "扩展运算符运用场景二" //ES6数组扩展******将一个数组添加到另一个数组的尾部 // ES5的 写法 var test2 = [0, 1, 2]; var test3 = [3, 4, 5]; //console.log(test2.push(test3),'push直接跟数组')// 4 "push直接跟数组" push方法的参数不能是数组; Array.prototype.push.apply(test2, test3); console.log(test2, '没用...前') //[0, 1, 2, 3, 4, 5] "没用...前" // ES6 的写法 let test4 = [0, 1, 2]; let test5 = [3, 4, 5]; test4.push(...test5); console.log(test4, '使用...后') //[0, 1, 2, 3, 4, 5] "使用...后" //ES6将类数组转为数组的方法;dom类似除了document.getElementById()之外的找到的dom都为类数组;另外有length属性的; let toList = { '0': 'bob', '1': '20', '2': 'man', length: 3 }; // ES5的写法 var newArr = [].slice.call(toList); console.log(newArr, '[].slice.call的方法') //["bob", "20", "man"] "[].slice.call的方法" // ES6的写法 let newArr1 = Array.from(toList); console.log(newArr1, 'Array.from方法') //["bob", "20", "man"] "Array.from方法" //find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组;如果没有符合条件的成员,则返回undefined。 let numList = [1, 5, 15, 20, 25]; let newNumList = numList.find((value, index, arr) => { return value > 20; }) console.log(newNumList, '数组find方法') //25 "数组find方法" //findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。 let numLogs = [5, 10, 15, 20]; let newNumLogs = numLogs.findIndex((value, index, arr) => { return value > 10 }) console.log(newNumLogs, '数组findIndex方法') //2 "数组findIndex方法" //ES6数组的 includes() 第一个参数是否包含一个指定的值,第二个参数表示搜索的起始位置,默认为0; //如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始; //没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值; console.log([1, 2, 3].includes(4), 'includes一个参数') //false "includes一个参数" console.log([1, 2, 3].includes(3, -1), 'includes两个参数') //true "includes两个参数" //ES6对象的结构和扩展运算符的运用*****...扩展运算符 解构赋值必须是最后一个参数(数组和对象都是一样) 解构赋值的拷贝是浅拷贝; let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x, '对象的第一个值'); //1 "对象的第一个值" console.log(y, '对象的第二个值'); //2 "对象的第二个值" console.log(z, '对象的第三个值'); //{a: 3, b: 4} "对象的第三个值" let obj = { name: 'bob', age: 20 } let obj1 = { sex: 'sex', cash: 22 } let newObj = {...obj, ...obj1 }; //等同于 let newObj = Object.assign({}, obj,obj1); console.log(newObj, '扩展运算符合并对象') //{name: "bob", age: 20, sex: "sex", cash: 22} "扩展运算符合并对象" //ES6 async 函数 await 是顺序执行的,Promise.all() 是并行的; function fun1() { console.log('第一') //第一 } function fun2() { console.log('第二') //第二 } function fun3() { console.log('第三') //第三 } async function testasync() { try { await fun1() await fun2() await fun3() } catch (error) { console.log(error) } } testasync(); //let [res1, res2, res3] = await Promise.all([fun1(), fun2(),fun3()]) //async 函数中 return 的结果将作为回调的参数; async function testCallback() { return 'this is a test async function' } testCallback().then( userName => console.log(userName) ) // this is a test async function