ES6等默认字符串、变量穿透技术点说明

let const var

let:变量，并且能够防止变量穿透 const: 常量，不可修改

JavaScript 之前都用var,无法区分变量常量，而且无法防止变量穿透var name = "xiaobo";var PI = Math.PI;---现在使用 let 和 constlet name = "xiaobo";const PI = Math.PI;//不可修改

变量穿透

JavaScript //使用var 无法防止变量穿透 for(var i = 0;i<5;i++){ console.log(i); } //0,1,2,3,4 console.log(i); //5 不希望的结果 //使用let 可以 for(let i = 0;i<5;i++){ console.log(i); } //0,1,2,3,4 console.log(i);//报错，i is not defined

模板字符串

使用两个反括号包裹起来 `` 即可

JavaScript var person = { name:"xiaocainiao", address:"dalian" } let address = "我是"+person.name+",在"+person.address;//我是xiaocainiao,在dalian let address2 = `我是${person.name},在${person.address}`;//我是xiaocainiao,在dalian console.log(address); console.log(address2);

默认参数

函数的参数，没有赋值的时候是undefined，多个参数，没有全部传值就会计算出错。 现在可以使用默认参数

JavaScript function sum(a,b){ return a+b; } var res = sum(70); console.log(res); //结果为 NaN------------ function sum(a=100,b=100){ return a+b; } var res = sum(70); console.log(res);//结果为 170

箭头函数

1.去掉function,加上箭头 2.如果方法中只有一句return，没有别的逻辑，可以去掉大括号和return 3.如果参数只有一个，可以取消参数的括号

JavaScript var sum = function(a,b){ return a+b; } //变体1 var sum2 =(a,b)=>{ return a+b; } //变体3 var sum3 = (a,b)=>a+b; //4 如果只有一个参数，可以省略括号 var twobei = a=>a*2; console.log(twobei(100));//结果为200

对象初始化简写

变量名和对象的key一致,对象内部可以简写 对象内的：function可以省略，只剩下括号

JavaScript let name="xiaocainiao"; let phone=12345678901; let info = { name:name, phone:phone, go:function(){ console.log("go!go!go!"); }} //可以简写为以下，前提是变量名和对象的key一致。 let name="xiaocainiao"; let phone=12345678901; let info = { name, phone, //：function可以省略，只剩下括号 go(){ console.log("go!go!go!"); } }

对象解构

对于对象取出属性或者执行对象的方法，有两种方式 1.obj.x obj.y() 2.obj[“x”], obj“y” 现在新添一种，var{x,y} = obj;也就是快速取出了

JavaScript let name="xiaocainiao"; let phone=12345678901; let info = { name, phone, //：function可以省略，只剩下括号 go(){ console.log("go!go!go!"); } } for(var x in info){ console.log(x); console.log(info.x); //undefined //这是用 `.`方式的缺点，它不回去寻找x背后的值是name或者phone, //而是就直接寻找info.x，没有就undefined了 console.log(info[x]);//可以查出 } //新增方式 //但是这种，应该要求解构出来的变量名需要与对象属性名一致，这样就不能用对象构造时候的简写了。 //否则新定义的变量就与上面的变量冲突了 //所以似乎没啥用 let {name,phone,go} = info; console.log(name); console.log(phone); go();

传播操作符

...obj 解构之后的对象，可以拿到除了解构出的属性，剩余的所有属性 具体见代码

JavaScript let info = { name:"cainiao", phone:123456, address:"DLUT", go(){ console.log("go!go!go!"); } } let {name,phone,...info2} = info; console.log(name); console.log(phone); console.log(info2);//这里会拿到除了name和phone的所有属性。 //cainiao //123456 //Object { address: "DLUT", go: go()}

数组Map

假设有一个需求，要对数组所有内容*2,之前只能使用for循环的方式，现在可以用map迅速搞定

JavaScript let arr1 = [1,2,3,4,5]; let arr2=[]; for(let i = 0;i<arr1.length;i++){ arr2.push(arr1[i]*2); } //map方式 let arr1 = [1,2,3,4,5];let arr2 = arr1.map(function(val){ return val*2; }); //当然也可以改进简写 let arr1 = [1,2,3,4,5];let arr2 = arr1.map(val=> val*2);

原理是什么？arr.map的时候，实际上是产生了新的数组，然后取出原数组的每个字，计算后，return进行回填到对应位置 v1为数组的第i个元素， v2为第i-1个元素，第一次循环时为0 v3为数组本身 最多三个，v4就not defined

JavaScript //更复杂的形式 let arr1 = [1,2,3,4,5]; let arr2 = arr1.map(function(v1,v2,v3){ console.log(v1); console.log(v2); console.log(v3); return v1+v2+v3; }); //v1为数组的第i个元素，v2为第i-1个元素，第一次循环时为0 //v3为数组本身 //最多三个，v4就not defined //v1和v2是值相加，接着再加对象，变成了字符串拼接，结果为 /*Array(5) [ "11,2,3,4,5", "31,2,3,4,5", "51,2,3,4,5", "71,2,3,4,5", "91,2,3,4,5" ] */

数组reduce

v1是循环计算位，第一次就是数组的第一个数 接着每次都是计算后的结果暂存 v2是第i+1位 v3是第i位（好复杂。。。） v4 和map的v3一样，是数组本身 v5 not defined

JavaScript let arr1 = [1,2,3,4,5]; let arr3 = arr1.reduce(function(v1,v2,v3){ console.log(v1);//1 4 9 16 console.log(v2);//2 3 4 5 console.log(v3);//1 2 3 4 return v1+v2+v3; }); console.log(arr3);//25