ES6方法合集

​一、解构赋值

ES6允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现赋值。

1、​数组解构

数组解构：允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量。数组变量和值分为两种情况

（1）数组中变量和值数量一致

let  ary = [1,2,3];
let [a,b,c] = ary;     //等号左边中括号就表示从数组中提取值
console.log(a)    //1
console.log(b)    //2
console.log(c)   //3

（2）数组中变量和值数量不一致

let  ary = [1,2,3];
let [a,b,c,d,e] = ary;     
console.log(a)    
console.log(b)   
console.log(c)   
console.log(d) 
console.log(e) 

2、对象解构

对象解构：允许我们使用对象的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量。以下有两种写法：

let person = {name:'anni',age:30,sex:'女'}；
let {name,age,sex} = person;
console.log(name)
console.log(age)
console.log(sex)

   let person = {name:'anni',age:18,sex:'女'};
   let {name: myname} = person;  //冒号左边只用于属性匹配，冒号右边的是真正的变量
   let {age: myage} = person;
   let {sex: sex} = person;
   console.log(myname);
   console.log(myage);
   console.log(sex);

二、扩展运算符

1、扩展运算符可以将数组拆分为以逗号分隔的参数序列。

let ary = ["a","b","c"]
//...ary   //"a","b","c"
console.log(...ary)    //a,b,c 
console.log("a","b","c")   //a,b,c  

2、扩展运算符可以应用合并数组

   //第一种方法
   let ary1 = [1,2,3];
   let ary2 = [3,4,5];
   let ary3 = [...ary1,...ary2];
   console.log(ary3);
  //第二种方法
   let ary1 = [1,2,3];
   let ary2 = [3,4,5];
   ary1.push(...ary2);
   console.log(ary1);

3.给函数传递参数

var arr1=[10,20,13,56,67]                     
var max = Math.max(...arr1)    //可以看作var max = Math.max（10,20,13,56,67）
console.log(max)    //结果为67                  

4.用来复制对象（注意书写的顺序问题）

var obj = {name:'Jack',age:18}
console.log(obj) // {name: 'Jack', age: 18}
var obj2 = {
  gender:'男',
  name:'Rose',
  ...obj    //注意：展开书写的顺序问题，在有相同成员的时候
}
 console.log(obj2)
//结果为  {gender: '男', name: 'Jack', age: 18}

三、箭头函数

1、箭头函数的写法

为什么叫箭头函数( Arrow Function )？因为它的写法，看上去就是一个箭头：（=>）

        const doubleValue = function(value){
            return value * 2;
        }

上述这个函数表达式，如何改写成箭头函数那？
第一步：去掉function；
第二步：在value值后面加上胖括号(=>)

 const doubleValue = (value)=>{
            return value * 2;
       } 
       console.log(doubleValue(3));       //结果为 6

结果正确表示改写成功啦！

2、箭头函数注意点

• 如果形参只有一个，则小括号可以省略；
• 函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果；
• 箭头函数 this 指向声明时所在作用域下 this 的值；
• 箭头函数不能作为构造函数实例化；
• 不能使用 arguments；

const greeting = ()=>{
	console.log('hi~');
}
greeting();   //结果为 hi~

const hi = (name)=>{
     return "hello" + name;
     }
     console.log(hi("Anni"))      //结果为 helloAnni

const nums = (a,b)=>{
  return a+b;
}
console.log(nums(1,2));    //结果为3
//单行函数体的简单写法
const greeting = ()=> console.log('hi~');
	greeting();       结果为 hi~

const hi = name=> "hello" + name;  
    console.log(hi("Anni"))      //结果为 helloAnni

const nums = (a,b)=> a+b;
	console.log(nums(1,2));    //结果为3

//多行函数是不能去掉中括号和return 的，
//简化前
const age = [15,17,18];
       const res = age.filter(function(age){
           const nextAge = age + 1;
           return nextAge > 18;
       })
       console.log(res);  //结果为 [18]
//简化后
  const age = [15,17,18];
       const res = age.filter(age=>{
           const nextAge = age + 1;
           return nextAge > 18;
       })
       console.log(res);   //结果为 [18]

3、箭头函数的不适用

看下面这个例子：

const btn = document.getElementById(‘Button');
btn.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

这里是会有问题的，因为 this 指向了 window，而不是调用它的 btn .

解析：当为一个 DOM 事件绑定回调函数后，触发回调函数时的 this，需要指向当前发生事件的 DOM 节点，也就是这里的 btn。当回调发生时，浏览器会用 btn 的上下文去调用处理函数。箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值，所以最后的 this.innerHTML 等价于 window.innerHTML，那么问题就在这里了。

解决办法：用函数表达式代替箭头函数。像这样：

btn.addEventListener('click', function() {
    console.log(this === btn); // => true
    this.innerHTML = 'Clicked button';
});

这样this 便指向了调用它的 btn 。结果就能正常啦！

四、模板字符串

板字符串是ES6中非常重要的一个新特性。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号（ `` ），而不是单引号或双引号。

const name = 'Anni'
const age = 14
console.log(`大家好，我是${name}，今年${age}岁了`)    //大家好，我是Anni，今年14岁了
// 等价于
console.log("大家好，我是" + name +"，今年" + age + "岁了") 

五、Set 和 Map

1、Set含义和基本用法

新数据结构Set。类似于数组，但是成员的值都是唯一的。所以可以用于数组去重。

 const s = new Set();
    s.add(1);
    s.add(2);
    s.add(3);
    s.add(1);
    console.log(s);

打印结果中表现出set 去重的作用。

1）Set 实例的属性：

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

2）Set 实例的方法

主要分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。

操作方法：

• Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
• Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
• Set.prototype.clear()：清除所有成员，没有返回值。

  const s = new Set();
   s.add(1);
   s.add(2);
   s.add(3);
   s.add(1);
   s.add(3);
   console.log(s);        //{1,2,3}
   s.delete(3)        //true        
   s.has(3);      //false
   s.clear(s);      //无返回值

3）Set 遍历方法：

• Set.prototype.keys()：返回键名的遍历器（由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。）

• Set.prototype.values()：返回键值的遍历器

• Set.prototype.entries()：返回键值对的遍历器

• Set.prototype.forEach()：使用回调函数遍历每个成员

注意：Set的遍历顺序是插入顺序。比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。

Array.from方法可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

这就提供了去除数组重复成员的另一种方法。

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

2、Map含义和基本用法

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

1)Map 结构的实例有以下属性和操作方法。

• size 属性 ：size属性返回 Map 结构的成员总数。
• Map.prototype.set(key, value)：set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
  set方法返回的是当前的Map对象，因此可以采用链式写法。
• Map.prototype.get(key)：get方法读取key对应的键值，如果找不到key，返回undefined。
• Map.prototype.has(key)：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
  -Map.prototype.delete(key)：delete方法删除某个键，返回true。如果删除失败，返回false。
• Map.prototype.clear()：clear方法清除所有成员，没有返回值。

const person = new Map();
person.set('name','Anni');
person.set('age',18);
person.set('gender','女')
console.log(person);   // {'name' => 'Anni', 'age' => 18, 'gender' => '女'}
person.get("name");   //'Anni'
person.get('age'); 	  //18
person.size;		//3
person.has('age');	//true
person.set('age',23);   //{'name' => 'Anni', 'age' => 23, 'gender' => '女'}   map会更新新的值
person.delete('age');    //true

2)遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

• Map.prototype.keys()：返回键名的遍历器。
• Map.prototype.values()：返回键值的遍历器。
• Map.prototype.entries()：返回所有成员的遍历器。
• Map.prototype.forEach()：遍历 Map 的所有成员。

需要特别注意的是，Map 的遍历顺序就是插入顺序。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

上面代码最后的那个例子，表示 Map 结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。

map[Symbol.iterator] === map.entries
// true

3、与其他数据结构的互相转换

1）Map 转为数组

const map = new Map()
  .set(num, 7)
  .set({a: 3}, ['abc']);
  [...myMap]
// [ [ num, 7 ], [ { a: 3 }, [ 'abc' ] ] ]

2）数组 转为 Map

将数组传入 Map 构造函数，就可以转为 Map。

new Map([
  [num, 7],
  [{a: 3},['abc']]
])
// Map {
//   num => 7,
//   Object {a: 3} => ['abc']
// }

六、字符串方法

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

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

let s = 'Hello Anni!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('n') // true

这三个方法都支持第二个参数，表示开始搜索的位置(从0开始)。

let s = 'Hello Anni!';
s.startsWith('Anni', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
s.includes('Hello', 0) // true

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。