ES6+好用的小技巧,让你的代码更干净,短巧,易读模板字符串let name = ‘siri’, age = 18, job = ‘front-end engineer’let oldStr = ‘Hi, ’ + name + ‘, I'm ’ + age + ’ and work as a ’ + job + ‘.’;let newStr = Hi, ${ name }, I'm ${ age } and work as a ${ job }.;扩展操作符… 操作符,有两个主要用处:复制一个新的数组或对象把多个参数赋值给一个数组变量把一个数组变量赋值给多个参数let a = [1, 2, 3]let b = […a] // b是一个新的数组,内容和a一样let c = […a, 4, 5, 6]let car = { type: ‘vehicle ‘, wheels: 4};let newCar = {…car}console.log(newCar); // { type: ‘vehicle ‘, wheels: 4}// 合并对象属性,后边的属性会覆盖前边的,可用于修改对象的某个属性值let car2 = {…car, type: ‘vehicle2’, wheels: 2} // {type: “vehicle2”, wheels: 2}function foo(…args) { console.log(args); } foo( ‘car’, 54, ’tree’); // console.log 输出 [ ‘car’, 54, ’tree’ ] 默认参数// 给方法添加默认参数值function foo( a = 5, b = 10) { console.log( a + b);} foo(); // 15foo( 7, 12 ); // 19foo( undefined, 8 ); // 13foo( 8 ); // 18foo( null ); // 10 as null is coerced to 0// 默认参数值也可以是表达式或者函数function foo( a ) { return a * 4; }// y = x + 4, z = foo(x)function bar( x = 2, y = x + 4, z = foo(x)) { console.log([ x, y, z ]);}bar(); // [ 2, 6, 8 ]bar( 1, 2, 3 ); //[ 1, 2, 3 ] bar( 10, undefined, 3 ); // [ 10, 14, 3 ]// 对象参数默认值,如果参数为空,则会抛出异常function show({ title = “title”, width = 100, height = 200 }) { console.log( ${title} ${width} ${height} );}show() // Cannot destructure property title of ‘undefined’ or ’null’.show({}) // title 100 200// 解决办法:function show({ title = “title”, width = 100, height = 200 } = {}) { console.log( ${title} ${width} ${height} );}show(); // title 100 200show({width: 200}) // title 200 200解析赋值// key变量重命名, first –> firstNameconst person = { first: ‘foo’, last: ’tom’,};const { first: firstName } = person;console.log(firstName); // foo// 默认值const settings = { speed: 150}const { speed = 750, width = 500 } = settings;console.log(speed); // 150 console.log(width); // 500// 可能不存在的keyconst { middle: middleName = ‘midname’ } = person;console.log(middleName); // ‘midname’// 嵌套赋值const user = { id: 339, name: ‘Fred’, age: 42, education: { degree: ‘Masters’ }};const {education: {degree}} = user;console.log(degree); //prints: Masters// 如果嵌套的属性不存在const user = { id: 339, name: ‘Fred’, age: 42};const {education: {degree}} = user; // TypeError: Cannot match against ‘undefined’ or ’null’.// 解决办法:const user = { id: 339, name: ‘Fred’, age: 42};const {education: {degree} = {}} = user;console.log(degree); //prints: undefined利用数组生成一个数字序列const numRange = (start, end) => { return Array(end - start + 1).fill().map((item, index) => start + index);};const numbers = numRange(0, 5); // [0, 1, 2, 3, 4, 5]const numbers2 = numRange(1, 5); // [1, 2, 3, 4, 5]利用Set给数组去重const years = [2016, 2017, 2017, 2018, 2018, 2019]// set构造函数的参数是一个arrayconst distinctYears = […new Set(years)] // [2016, 2017, 2018, 2019]生成唯一随机字符串,可以指定长度function generateRandom(length) { let radom13chars = function () { return Math.random().toString(16).substring(2, 15) } let loops = Math.ceil(length / 13) return new Array(loops).fill(radom13chars).reduce((string, func) => { return string + func() }, ‘’).substring(0, length)}generateRandom(8) // “03836a49”