es6新增语法-项目中常用

1、flat() 数组扁平化

const arr = [1,[2,3],[4,[5,[6]],7]];
 
// 不传参数时，默认“拉平”一层
arr.flat() 
// [1,2,3,4,[5,[6]],7];
 
// 传入一个整数参数，整数即“拉平”的层数
arr.flat(2) 
// [1,2,3,4,5,[6],7];
 
// Infinity 关键字作为参数时，无论多少层嵌套，都会转为一维数组
arr.flat(Infinity);
// [1,2,3,4,5,6,7];
 
// 传入 <=0 的整数将返回原数组，不“拉平”
arr.flat(0);
// [1,[2,3],[4,[5,[6]],7]]
arr.flat(-6);
// [1,[2,3],[4,[5,[6]],7]]
 
// 如果原数组有空位，flat()方法会跳过空位
[1,2,3,4,5,6,,].flat();
// [1,2,3,4,5,6]

2、Object.keys/Object.values 遍历对象

let person = {name:{aaa: "小王"},age:{bbb:222},address:{ccc:"深圳"}}
Object.keys(person).forEach(key=> console.log(key)) 
//返回 ["name","age","address"]


Object.values(person).forEach(value => console.log(value));
//{aaa: "小王"} {bbb:222} {ccc:"深圳"}

3、new Map()

const person = new Map([ ['name', '秋風落葉'], ['age', 27], ['sex', '男'] ])
person.get('name') // 秋風落葉
person.set('name', '小风') //小风
person.delete('sex') // [['name', '秋風落葉'], ['age', 27]]
person.clear()  //清空
person.has('name')  //true

const brandMap = new Map(); //重新组装对象
res.forEach(data => {
   const { id, brandName, carLineName } = data;
   const brandNameObj = brandMap.get(brandName);
   if (!brandNameObj) {
       brandMap.set(brandName, {
         id,
         value: brandName,
         label: brandName,
         children: []
       });
    }
   brandMap.get(brandName).children.push({ value: id, label: carLineName });
});
let arr = [ ...brandMap.values() ];

4、includes() 数组是否包含

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3)); //返回true
console.log(numbers.includes(6)); //返回false

5、class继承

class User {
  constructor(name) { 
    this.name = name; //设置初始值
  }
  get name() {
    return this.name; //获取
  }
  set name(name) {
    this.name = "小风"; //设置
  }
  static changeName(name){
      this.name = "小兰"  //静态方法
  }
}

const user = new User('前端小智');
console.log(user.name) //前端小智
user instanceof User; // => true  //检查对象的类型

class ContentWriter extends User {  //继承
  posts = [];
  constructor(name, posts) {
    super(name);  //子类中调用父构造函数
    this.posts = posts;
  }
}

const writer = new ContentWriter('前端小智', ['Why I like JS']);
writer.name; // => '前端小智'
writer.posts // => ['Why I like JS']

6、bind/call/apply

call/apply/bind 都是用来改变函数中的 this 指向，只不过 call 传参是个序列， apply 是个数组，call/apply都会执行函数，而 bind 不会执行，会返回改变 this 指向后的函数。call/apply/bind 可以理解就是一个能够借用他人方法的工具，充当“借”的功能。

使用场景

var obj = {0:'a',1:'b',2:'c',length:3}
var arr = Array.prototype.slice.call(obj, 0)
// Array.prototype.slice.call(obj, 0) 相当于 obj.slice(0)，但 obj 属于对象类型，对象是没有该方法的，所以直接这样使用会报错，这时就得使用 call 等来借用数组的方法。
console.log(arr) // ['a','b','c']

7、reduce()

reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)

reduce()方法对每一个数组的每一个元素按序执行一个由您提供的reduce函数。每一次运行reduce会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

previousValue:上一次调用callbackFn时的返回值，在一次调用时，若指定初始值initialValue，其值为initalvalue，否则为数组索引为0的元素array[0]
currentValue：数组中正在处理的元素，在第一次调用时，若指定初始值initalValue，其值则为数组索引为0的元素array[0],否则为array[1]
currentIndex：数组中正在处理的元素索引，若指定了初始值initvalue，则起始索引号，否则从索引1起的。
array：用于遍历的数组

const people = [
    { name: "Alice", age: 21 },
    { name: "Max", age: 20 },
    { name: "Jane", age: 20 }
];
const ages = people.reduce((pre, cur) => pre + cur.age, 0);
console.log(ages); // 61

8、new set()数组去重

const array1 = [1, 2, 3];
const array2 = [3, 4, 5];

const combinedArray = [...new Set([...array1, ...array2])];