ES6新特性的学习和使用

本文是基于Windows 10系统环境，进行ES6新特性的学习和使用

Windows 10
React

一、ES6的新语法

(1) let和const

ES6之后尽量少使用var来声明变量，会产生跨越作用域的风险

let 声明一个变量
在某一个大括号里面声明的let变量，作用域只在大括号里面
const 声明一个常量

(2) 字符串扩展

includes(param)：返回布尔值，表示是否找到了param参数字符串
startsWith(param)：返回布尔值，表示param参数字符串是否在原字符串头部
endsWith(param)：返回布尔值，表示param参数字符串是否在原字符串尾部

(3) 数组解构

let arr = [1, 2, 3]
const [a, b, c] = arr
console.log(a) // a= 1
console.log(b) // b= 2
console.log(c) // c= 3

(4) 对象解构

const person = { 
    name:'xu',
    age:20,
}
const {  name:newName, age:newAge } = person
console.log(newName) // newName= xu
console.log(newAge ) // newAge = 20

(5) 函数参数默认值

function add(a, b=1){ 
    return a+b;
}

(6) 箭头函数

函数只有一个参数

function show(a){
```
console.log(a);
```
}
==>
const show2 = a => console.log(a);
函数有多个参数

function add(a,b){
```
console.log(a+b);
```
}
==>
const add2 = (a,b) => console.log(a+b);
函数有多个参数，且多行代码

function add(a,b){
```
let c = a + b
return c;
```
}
==>
const add2 = (a,b) =>{
```
let c = a+b;
return c;
```
}

(7) 箭头函数结合解构表达式

const person = { 
    name:'xu',
    age:20,
}
const hello2 = ( { name} ) => console.log(name);

(8) map函数

map函数接收一个函数，然后返回处理后的数组

let arr = [1, 2, 3]
let newArr = arr.map(item => return item+1);
// 返回 [2, 3, 4]

(9) reduce函数

reduce函数接收一个函数和一个初始值（可选），然后返回处理后的一个数值

let arr = [1, 2, 3]
let newArr = arr.reduce((a,b)=>return a+b);
// 返回6

(10) 扩展运算符

扩展运算符是…，将数组或者对象转为用逗号分隔开的参数序列

console.log(…[1, 2, 3]) // 1,2,3

//数组合并
let arr = […[1, 2, 3],…[4,5,6]]
console.log(arr) // 1,2,3,4,5,6

//与解构表达式结合
const [first, …rest] = [1,2,3]
console.log(rest) // 2,3

(11) 异步函数Promise

扩展运算符是…，将数组或者对象转为用逗号分隔开的参数序列

const p = new Promise((resolve, reject)=>{

setTimeout(()=>{ 
    let num = Math.random();
    if(num<0.5){ 
        resolve('success' + num);
    } else{ 
        reject('error' + num);
    }
});

});

p.then(value=>{

console.log(value);

}).catch(error=>{

console.log(error);

})

一、新集合Set

Set类似于数组，但是成员的值都是唯一的，没有重复的值，可以类比于C++中的集合Set

(1) 初始化Set

const s = new Set([1,2,3,4,4,2]);
console.log(s); // Set(4) {1, 2, 3, 4}

(2) Set转化成Array

const items = new Set([1,9,4,6]);
const array = Array.from(items);
console.log(array); // [1,9,4,6]

(3) 打印Set的大小

const s = new Set([1,2,3,4,4,2]);
console.log(s.size); // 4

(4) Set是否含有某个元素

const s = new Set();
s.add(6).add(8).add(8);
console.log(s.size); // 2
console.log(s.has(6)); // true
console.log(s.has(7)); // false
console.log(s.has(8)); // true

(5) Set删除某一个元素

const s = new Set();
s.add(6).add(8).add(8);
console.log(s); // Set(2) {6, 8}
s.delete(6);
console.log(s); // Set(2) {8}

(6) Set获取某一个元素

const set = new Set([1, 2, 3, 4, 4]);
const result = [...set][1];
console.log(result);

(7) Set添加某一个元素

const result= new Set();
result.add(1)
console.log(result);

(8) Set清除所有元素

const result= new Set([2,1,5]);
result.clear()
console.log(result);

(7) Set应用—数组去重

function dedupe(array) { 
  return Array.from(new Set(array));
}
dedupe([1,1,2,3]); // [1,2,3]

(8) 遍历Set

// Set中的键=值
let set = new Set(['aaa', 'bbb', 'ccc']);
// 遍历Set中所有的键
for(let item of set.keys()) { 
  console.log(item);  // aaa bbb ccc
}
// 遍历Set中所有的值
for(let item of set.values()) { 
  console.log(item);  // aaa bbb ccc
}
// 遍历Set中所有的键值对
for(let item of set.entries()){ 
  console.log(item);  // ["aaa", "aaa"],["bbb", "bbb"],["ccc", "ccc"]
}
// 使用 for of 遍历Set中所有的值
for (let item of set) { 
    console.log(item); // aaa bbb ccc
}
// 调用forEach()方法
set.forEach((value, key) => { 
    console.log(key + ' : ' + value)
});
// aaa:aaa bbb:bbb ccc:ccc
let s = new Set([6,7,8]);
// map 将原数组映射成新数组
s = new Set([...s].map(x => x * 2));
console.log(s); // [12,14,16]
// filter返回过滤后的新数组
s = new Set([...s].filter(x => (x % 3) ==0));
console.log(s); //[6]
// 实现并集、交集、差集
let s1 = new Set([6,7,8]);
let s2 = new Set([4,7,6]);
let union = new Set([...s1, ...s2]);
console.log(union);
let intersect = new Set([...s1].filter(x => s2.has(x)));
console.log(intersect);
let difference = new Set([...s1].filter(x => !s2.has(x)));
console.log(difference);
// 利用原Set结构映射出一个新的结构，然后赋值给原来的Set结构
let s1 = new Set([1,2,3]);
s1 = new Set([...s1].map(val => val *2));
console.log(s1);
// 利用Array.from
let s2 = new Set([1,2,3]);
s2 = new Set(Array.from(s2, val => val * 2));
console.log(s2);