项目中常用的ES6语法总结

数组的方法

1. fill() : 数组填充
   Array.fill(value) : 会对数组填充数组成员, 填充长度等于数组长度
   Array.fill(value, start, end) : 可以使用指定的元素填充数组
   它接受三个参数：
   • value：填充值。
   • start：填充起始位置，可以省略。
   • end：填充结束位置，可以省略，实际结束位置是end-1。

   const fillData = (data) =>{
     const len = data.length;
     const i = data[0].length;
     const j = data[len-1].length;
     if(j < i){
       const f = data[0][0].length;
       const arr = Array(f).fill(""); //用f个""去填充数组
       const arr1 = Array(i-j).fill(arr); //用i-j个arr去填充数组
       data[len-1] = [...data[len-1], ...arr1]; //合并数组
     }
     return data;
   }
   

   ['a', 'b', 'c'].fill(7) // [7, 7, 7]
   new Array(3).fill(7)  // [7, 7, 7]
   ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
   

2. includes()：数组包含
   Array.includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。对NaN一样有效。

   const arr1 = ['a', 'b', 'c', 'd', NaN]
   console.log('%s', arr1.includes('c')) //true
   console.log('%s', arr1.includes('z'))  //false
   console.log('%s', arr1.includes(NaN))  //true
   

3. from()：数组转换

• 将类数组对象转换为数组
  所谓类数组对象，即必须包含length属性，且元素属性名必须是数值或者可以转换成数值的字符。

  let array = {
      0: 'name', 
      1: 'age',
      2: 'sex',
      3: ['user1','user2','user3'],
      'length': 4
  }
  let arr = Array.from(array )
  console.log(arr) // ['name','age','sex',['user1','user2','user3']]
  

  如果类数组对象属性名的值有缺省：

  let array = {
      0: 'name', 
      1: 'age',
      3: ['user1','user2','user3'],
      'length': 4
  }
  let arr = Array.from(array )
  console.log(arr)  // ['name','age',undefined,['user1','user2','user3']]
  

  如果类数组对象的属性名不是数字类型的：

  let array = {
      'name': 'name', 
      'age': 'age',
      'sex': 'sex',
      'user': ['user1','user2','user3'],
      'length': 4
  }
  let arr = Array.from(array )
  console.log(arr)  // [ undefined, undefined, undefined, undefined ]
  

  如果类数组对象不带length属性，则返回空数组。

  let array = {
      0: 'name', 
      1: 'age',
      3: ['user1','user2','user3']
  }
  let arr = Array.from(array) 
  console.log(arr)  //[]
  

• 将字符串转换成数组

  let  str = 'hello';
  console.log(Array.from(str)) // ["h", "e", "l", "l", "o"]
  

• 将map结构转换成数组，推荐使用扩运算符(...)。

  const map = new Map();
  map.set('k1', 1);
  console.log(map) // Map(1) {"k1" => 1}
  console.log(Array.from(map)) //["k1", 1]
  

• 将set对象的元素转换成数组

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

Array.from 可以接受三个参数：Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike: 要转换的对象
• map: 类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
• context: 绑定map中用到的this

• 两个参数

Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
// 等同于
Array.from([1,2,3].map(x => x * x))

• 三个参数——可以将被处理的数据和处理对象分离

let obj= {
  handle: function(x){
    return x*x
  }
}
console.log(Array.from(
  [1, 2, 3], 
  function (x){
    return this.handle(x)
  }, 
  obj)
 )  // [1, 4, 9]

4. copyWithin()：数组覆盖
   Array.prototype.copyWithin(target, start = 0, end = this.length)
   它接受三个参数：
   • target (必需)：从该位置开始替换数据。
   • start (可选)：从该位置开始读取数据，默认为 0 。如果是负数，start 将从末尾开始计算。
   • end (可选)：到该位置前停止读取数据，默认等于数组长度。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。

   console.log([1, 2, 3, 4, 5].copyWithin(0, 1, 2));  // [2,2,3,4,5]
   console.log([1, 2, 3, 4, 5].copyWithin(0, 1, 3));  // [2,3,3,4,5]
   console.log([1, 2, 3, 4, 5].copyWithin(0, 1, 4));  // [2,3,4,4,5]
   

字符串方法

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

const s = 'zfpx';
s.startsWith('z') // true
s.endsWith('x') // true
s.includes('p') // true

第二个参数，表示开始搜索的位置。（起始值为0）

const s = 'zfpx';
console.log(s.startsWith('p',2)); // true
console.log(s.endsWith('f',2)); // true
console.log(s.includes('f',2)); // false

注意：endsWith的行为与其他两个方法有所不同，它针对前n个字符。而其他两个方法针对从第n个位置直到字符串结束。

• repeat()：返回一个新字符串，表示将原字符串重复n次。

console.log("abc".repeat(3))     //abcabcabc
console.log("abc".repeat("3"))     //abcabcabc

模板字符串

模版字符串，用`（反引号）标识，用${}将变量括起来。

$("#result").append(
  "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
);

等价于

$("#result").append(
 `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
);

可以定义变量：

const name = 'lux'
console.log(`hello ${name}`) //hello lux

箭头函数

inputs=>output

比如之前写一个函数：

function(){
  console.log('hello')
}

写成箭头函数表示：

() => console.log('Hello')

箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。 正是因为它没有this，从而避免了this指向的问题。

const person = {
 name:'zfpx',
 getName:function(){
// setTimeout(function(){console.log(this);},1000); //在浏览器执行的话this指向 window
// setTimeout(() => console.log(this),1000);//在浏览器执行的话this指向 person
 }
}
person.getName();

解构赋值

解构赋值的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值。

• 数组

const color = ['red', 'blue']；

//传统赋值方式
var first = color[0];
var second = color[1];

//解构赋值方式
const [first, second] = color；

console.log(first)； //'red'
console.log(second)； //'blue'

• 对象

const people = {
  name: 'lux',
  age: 20，
  education: {
    degree: 'Masters'
  }
}
const { name} = people；
console.log(name)； //lux

const { name, age } = people；
console.log(`${name}--${age}`) ；//lux--20

const {education: {degree}} = user;
console.log(degree); //  Masters

扩展运算符

• 对象的赋值：（如果有重复的属性名，等号右边会覆盖等号左边）

  const obj = { a: 1, b: 2}
  const obj2 = { ...obj } // => { a: 1, b: 2 }
  
  const obj = { a: 1, b: 2}
  const obj2 = { ...obj, b: 3, c: 4} // => { a: 1, b: 3, c: 4 }，覆盖了 b，新增了 c
  

• 数组的深拷贝

  const arr2 = arr;
  const arr3 = [...arr];
  console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组
  console.log(arr===arr3); //false, 说明arr3和arr指向不同数组
  

• 合并数组：[...arr1, ...arr2, ...arr3]

  const arr1 = [1,2];
  const arr2 = [3,4];
  const arr3 = [5,6];
  console.log([...arr1, ...arr2, ...arr3]); //[1, 2, 3, 4, 5, 6]
  

• 将一个数组变成参数序列：（代替了apply）

  console.log(Math.max(...[654, 233, 727]))//相当于
  console.log(Math.max(654, 233, 727))
  

• 将字符串转换为数组：

  [...'hello']  // [ "h", "e", "l", "l", "o" ] 
  

• map结构：

  const map = new Map();
  map.set('k1', 1);
  console.log(map) // Map(1) {"k1" => 1}
  console.log(...map) //["k1", 1]
  

  let map = new Map([  
    [1, 'one'],  
    [2, 'two'],  
    [3, 'three'],  
  ]);  
  let arr = [...map]; 
  console.log(...map.keys()); // [1, 2, 3]