ES6常用语法

es6允许为函数的参数设置默认值，及直接写在参数定义的后面。

function log(x,y="world"){
    return x + y;
}
console.log(log("hello")); //print "hello world"
console.log(log("hello","china")); //print "hello china"

注意参数变量x或y是默认声明的，在函数体中不能用let或者const再次声明，否则会报错。

function log(x,y="world"){
    let y ="world22" //error
    y="world22" //exactly
    return x + y;
}
console.log(log("hello")); //print "hello world22"
console.log(log("hello","china")); //print "hello china22"

与解构赋值默认值联合起来使用

const {x,y=5}={x:5};
console.log(x) //5
console.log(y) //5

function foo({x,y=5}){
    console.log(x + y)
}
foo({x:1}) //6
foo({x:2,y:10}) //12

//注意传的参数必须是一个对象

函数的length属性

函数的length属性将返回没有指定默认值的参数的个数，即给参数指定了默认值之后，length属性将失真。

rest参数（剩余参数）

用于函数的参数，rest参数之后不能有其他的参数（即rest参数只能是最后一个参数）

function score(name,...scores){
    let sumScore=0;
    for(let val of scores){
        sumScore+=val;
    }
    return name + ":" + sumScore;
}
console.log(score("fuyu",100,100,100));
console.log(score("song",100,95))

//此时...arguments视为一个“参数”数组

扩展运算符

rest参数的形式是“. . .变量名”：rest搭配的变量是一个数组，该变量将多余的参数放入其中

扩展运算符的形式是“. . .”,后面跟数组或者对象，将数组转为参数序列，例如：

let arr =[1,2,3,4,5,6];
console.log(...arr); //output 1 2 3 4 5 6

let obj ={name:"song",age:20,grade:12};
let obj2 ={id:1,...obj}

console.log(...obj) //error
console.log(obj2);  //output { id: 1, name: 'song', age: 20, grade: 12 }

扩展运算符的应用

1. 合并数组

let arr1=[1,2];
let arr2=[3,4];
//es5合并数组 concat方法
console.log(arr1.concat(arr2));
//est合并数组
console.log([...arr1,...arr2])

2. 与解构赋值结合
   与解构赋值结合用于生成新的数组

let arr = [1,2,3,4,5,6,7,8,9,10];
//es5
let first=arr[0];
let rest=arr.slice(1);
console.log(first);
console.log(rest)

//es6
let  [first , ...rest] = arr;
console.log(first);
console.log(rest);

3. 将字符串转为真正的数组

console.log(..."hello"); //output h e l l o

let arr = [..."hello"];
console.log(arr.length) //output5

4. 总结

// ...被当做剩余参数使用
let [first,...rest]=[1,2,3,4,5,6];
console.log(first); //1
console.log(rest);  //[2,3,4,5]

//...被当做拓展运算符
let arr = [1,2,3,4,5];
console.log(...arr);  //1 2 3 4 5
console.log([...arr]) //[1,2,3,4,5]

let obj={name:"song",age:20,grade:12};
// console.log(...obj) //error
console.log({...obj}); //{ name: 'song', age: 20, grade: 12 }
console.log({sex:"m",...obj}) //{ sex: 'm', name: 'song', age: 20, grade: 12 }

箭头函数

如果箭头函数不需要参数或者需要多个参数时，就使用圆括号代表参数部分;当只有一个参数时，可以不用写括号。

如果箭头函数的代码块多于一条语句，就要使用大括号将其括起来，并使用return语句返回。

let f =v=>v

let f = ()=>5;

//等同于
let f =function(){
    return 5;
}
console.log(f());

let sum = (a,b)=>a + b;
console.log(sum(1,2))
//等同于
let sum=function(a,b){
    return a + b;
}
console.log(sum(1,2)

注意：

1.箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。

2.箭头函数不能用作Generator函数

es6遍历对象属性的方法

（1）for … in …

let obj={
    name:"song",
    age:20,
    grade:10
}
for(let key in obj){
    console.log(key);//打印出属性
    console.log(obj[key]) //打印出对应的属性值
}

(2)Object.keys(obj)

将所有的属性当成一个数组返回

let obj={
    name:"song",
    age:20,
    grade:10
}

console.log(Object.keys()) //[ 'name', 'age', 'grade' ]

数组的Array.from()方法

Array.from()方法用于将两类对象转为真正的数组：

• 类似数组的对象

let obj={
    "0":"song",
    "1":20,
    "2":10,
    length:3
}
console.log(Array.from(obj));
//output [ 'song', 20, 10 ]

• 可遍历的对象（字符串、set结构、map结构）

将字符串变为数组

let str="hello"

console.log(Array.from(str));

//output [ 'h', 'e', 'l', 'l', 'o' ]

将set结构变为数组

let set = new Set([1,1,2,2,3,3,4,5])
console.log(Array.from(set));

//or

console.log([...set])

//output [ 1, 2, 3, 4, 5 ]

set数据结构

Set数据结构是es6提供的新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。

• set实例的属性

（1）Set.prototype.constructor:构造函数，即Set函数。Set函数可以接受一个数组（或类似数组的对象）作为参数，用于初始化。例如

let set = new Set([1,1,2,2,3,3,4,5])

console.log(set) //Set { 1, 2, 3, 4, 5 }
console.log([...set]) //[ 1, 2, 3, 4, 5 ]

//可以将set结构解构没有重复值的数组

(2)set.prototype.size:返回set实例的成员总数

let set = new Set([1,1,2,2,3,3,4,5])
console.log(set);
console.log(set.size);

//output Set { 1, 2, 3, 4, 5 } size:5

• set实例的方法

（1）add(value):添加某个值，返回Set结构本身

（2）delete（value）:删除某个值，返回一个布尔值，表示删除是否成功。

（3）has(value):判断参数是否是set的成员，返回值为一个布尔值

（4）clear():清除所有成员，没有返回值

let set = new Set();
set.add("a");
set.add("b");
set.add("a");
console.log(set); //Set { 'a', 'b' }
console.log(set.size); //2
console.log(set.has("c")); //false
console.log(set.has("a")); //true
set.delete("b"); //返回boolean ,表示是否删除成功
console.log(set); //Set { 'a' }

set.clear(); //清除所有成员
console.log(set);//Set {}