ES6语法糖
长文警告！！！
模板字符串（增强字符串）
- 增强字符串：
var str = `aaa`; //此处是``,非单引号双引号 - 在字符串中添加变量（表达式、甚至是方法、嵌套使用）：
var tan = {
age:18,
height:180,
name:jw
}
var {age, name, height} = tan;
var str = 'name:' + name + ' age: ' + age; // 传统字符串拼接
var newStr = `name: ${name} age: ${age}`; //模板字符串拼接，与上述效果相同，不信你输出
标签模板
实质：函数调用的特殊形式
将方法名后紧跟一个模板字符串，例：
function print(str){
console.log(str);
}
print("name")与print`name`相同，只是函数的调用形式不同，不同的是后者输出的是一个数组；
两者的结合：
举例：
var name = 'tan';
var where = "TJ";
function show(){
console.log(arguments);
}
show`hello ${name} welcome to ${where}`;
输出如图所示：输出的argument类数组第一位①是增强字符串里面的字符串，后几位②是增强字符串的变量值；而①又细分了数组，即③是增强字符串变量两边的字符串值，
相当于我们这样传了参数：show(['hello',' welcome to ',''],name,where]);
那么它有什么应用呢？？ 过滤HTML字符串（防注入XSS攻击、SQL攻击）：
// 举例：
// 有一输入框，要求用户输入名字，但用户却输入了一段脚本：name = '';
var name = '';
safeHTML `hello ${name}`;
function safeHTML(data){
var str = data[0];
for(let i = 1;i/g,'>');
str += data[i];
}
return str;
}
四、函数的扩展
- 函数参数的默认值
function Person(name,age){
var age = age || 18; //传统默认值写法
console.log(name,age);
}
看一下这么写有什么问题
Person("tan"); // 18
Person("tan",0); // 18
Person("tan",1); // 1
Person("tan",2); // 2
Person("tan",null); // 18
Person("tan",false); // 18
Person("tan",true); // true
Person("tan",undefined); // 18
Person("tan",NaN); // 18
// 如何解决呢？
function Person(name,age){
if(typeof age == 'undefined'){
var age = 18;
}
console.log(name,age);
}
Person("tan"); // 18
Person("tan",0); // 0
Person("tan",1); // 1
Person("tan",2); // 2
Person("tan",null); // null
Person("tan",false); // false
Person("tan",true); // true
Person("tan",undefined); // 18
Person("tan",NaN); // NaN
// 那么，es6的写法:
function Person(name,age = 18){
console.log(name,age);
}
- 函数参数的默认值与解构赋值
function fn({x,y=5}){
console.log(x,y);
}
fn({}); // undefined 5
fn({x:1}); // 1 5
fn({x:1,y:2}); // 1 2
fn(); // 报错
function fn1({x=0,y=0} = {}){ //解构赋值默认值形式
console.log(x,y);
}
function fn2({x,y} = {x:0,y:0}){ //参数的解构赋值过程，非默认值，调用方法时，传的参数在 {x:0,y:0}处
console.log(x,y);
}
fn1(); // 0 0
fn2(); // 0 0
fn1({x:1,y:2}); // 1 2
fn2({x:1,y:2}); // 1 2
fn1({x:1}); // 1 0
fn2({x:1}); // 1 undefined
- 参数作用域及注意事项
function fn1(x = 5){let x = 10;} //报错，x已被定义
function fn2(x){let x = 10;} //报错，x已被定义
function fn1(x ,x){} //不报错 相当于function(var x,var x){}
function fn2(x,x,y = 10){} //报错 相当于function(let x,let x,let y =10){} 因为默认值是ES6的写法，所以是let x;
REST参数（数组扩展运算符）…
获取函数中多余的参数，类似arguments
function fn(...arg){
console.log(arg);
}
fn(1,2,3,4,5); // 数组[1,2,3,4,5]
fn(...[1,2,3,4,5]); // 数组[1,2,3,4,5]
//不规范的写法： arg = [1,2,3,4,5] ...arg = 1,2,3,4,5
//相当于...把数组拆开了
fn.call(null,...[1,2,3]); //数组[1,2,3]
fn.apply(null,[1,2,3]); //数组[1,2,3]
并且…还可用于字符串：var strArr = [..."tan"];,因为字符串有包装类String,会隐式的调用转换成一个类数组，然后…将其转化为数组，相当于：var strArr = [...String("tan")];
箭头函数
基本写法：var fn = (参数1,参数2)=>{函数体}
例如：var f = num =>num等价于：var f = function(num){return num;}如果需要返回一个对象则var f = () => ({name:123})
箭头函数中没有this对象，如果出现则是父级的this
箭头函数中也没有arguments，可以通过…获得参数列表
箭头函数也可以嵌套使用：如
function fn(str){
return function(){
return str.split("");
}
}
//用箭头函数表示：
var fn1 = str => () => str.split(""); //正确
var fn2 = (str) => {() => {str.split("")}}; //错误
五、数组的扩展
- Array.from() :类数组转换为数组
var arr = Array.from("string"); //此处同样有隐式的包装类类型转换
而且，Array.from还可以有一个回调函数：
var arr = Array.from("string",function(item,index){ //回调函数用来处理类数组中的每一位，并返回一个新数组。
return item+index;
}); // arr = ["s0", "t1", "r2", "i3", "n4", "g5"]
使用map也可实现此功能(类似，不完全一样)：
var arr1 = Array.from(obj).map((item,index) => item+index);
值得注意的是，此方法是返回一个新的数组，因此[1,2,3] != Array.from([1,2,3]);
接着，我们封装一个函数，用于判断参数类型：function typesof(){ return Array.from( arguments, item => typeof item); }
- Array.of()
先说一下new Array();
当参数是一位时，表示新建一个具有这位数字长度的空数组，
当参数是多位时，表示新建一个数组，值时参数。
那么我只想要新建一个数组长度为1，并且有值的数组呢？
Array.of()解决了此问题！
// 模拟实现Array.of()
function arrayof1(){
return Array.from(arguments);
}
function arrayof2(){
return Array.prototype.slice.call(arguments);
}
- 数组实例方法copyWithin() 按照一定的格式重写
// Array.prototype.copyWithin(target,start = 0, end= this.length); //参数说明：target 从什么地方开始被覆盖，后两个是覆盖的值
//举两个例子
var arr = [1,2,3,4,5];
arr.copyWithin(0,3); //表示从下表为3的元素开始复制往后所有元素，并从元素下标为0的位置开始覆盖。
// 结果为[4,5,3,4,5] 会返回一个数组，并且改变原数组 后两位可以是负数
var arr = [1,2,3,4,5,6,7,8];
arr.copyWithin(0,3); // 结果为 [4, 5, 6, 7, 8, 6, 7, 8]
- 数组实例方法fill() entries() keys() values()
- fill() :按照一定的规则进行填充
举例：
var arr = new Aray(5);
arr.fill(7); // arr = [7,7,7,7,7]
并且也具有三个参数，第二位表示从什么地方开始填充，第三位表示填充到什么地方。
- entries() keys() values() 对数组进行遍历，返回一个迭代器对象。
var arr = [1,2,3,4,5];
返回的迭代器使用for( [item,index] of arr.entries() ){}遍历循环
或者使用for( item of arr.keys() ){}遍历循环
手动取值使用arr.keys().next().value; //arr.keys().next()返回的是一个对象
- 数组实例的方法includes() find() findIndex()
- find() ：找到满足条件的第一个数 ,没找到就返回undefined
- findIndex()：找到满足条件的第一个数的下标，没找到就返回-1
- includes()：如果有此值，就返回true,否则false
- indexOf()：返回下标，如果没有就返回-1
例子：
var arr = [1,2,3,4,5,6,7];
var num = arr.find(item => item>2); // num = 3
var num = arr.findIndex(item => item>2); // num = 2
var num = arr.includes(2); // true
值得注意的是：
var arr = [NaN];
arr.includes(NaN) // true
arr.indexOf(NaN) // -1
六、对象的扩展
- 属性的简洁表示法、以及属性名表达式
属性的简洁表示法:
var foo = "tan";
var obj = {foo :foo} // 此处属性名并不是个变量，而属性值是个变量
属性名和值相同时，就可以简写为var obj = {foo};
甚至在对象中添加方法时 obj = { fn(){retutrn 1;} }
属性名表达式:
var obj = {};
obj.name = "tan";
obj["age"] = 18;
ES6可简写为：
var name = "name";
var obj = {[name] : "tan"}; //此处通过[]取到变量的值
- 属性的可枚举性、以及属性的遍历
Object.getOwnPropertyDescriptor 能获取该属性描述的对象
例：
var obj = {name:"tan",age:18};
Object.getOwnPropertyDescriptor(obj,"age");
遍历的方法有：for in 和 Object.keys
- Object.is() 、Object.assign()、Object.keys()、Object.values()、object.entries()
- Object.is()
Object.is() 在绝大数情况下等于 ===
举例：
Object.is('foo', 'foo'); //true
但只有两种情况： 就是能判断出加减符号和NaN
Object.is(NaN, NaN); //true
NaN === NaN //false
Object.is(+0, -0); //false
+0 === -0 //true
- Object.assign()
Object.assign()：将多个目标对象的可枚举属性（属性、方法）复制到一个对象中
例：
var obj = {}
var obj1 = {name :111}
var obj2 = {age :111}
var newobj = Object.assign(obj,obj1,obj2);
此时，obj和newobj都具有obj1和obj2的属性，并且newobj === obj // true
当obj原来有属性时，会保留，若原有属性与新增的相同，会被覆盖掉；
当第一个参数不是对象时，会先隐式的转为相应的对象，然后再进行assign方法
应用：将多个对象合并成一个对象的方法let merge = (...sources) => Object.assign({},...sources)
- Object.keys()、Object.values()、object.entries()与数组的类似
不同的是，对象的这些方法返回的是数组。
- 对象的扩展运算符…
与数组的类似，