es6使用整理

本文中所有实例都是摘自微信公众号大佬们的文章

…剩余操作符

基础用法1：展开

  const list = [2,3,4]
  const expandList = [1,...list,5]
  console.log(expandList)  //打印得到[1,2,3,4,5]

基础用法2：收集

  function foo1(a,b,...c){
    console.log(a,b,c);
  }
  foo1(1,2,3,4,5)  //打印得到1,2,[3,4,5]

基础用法3：将类数组转为数组
此处用Set为例，字符串、Map都可执行此操作，可自行体验

let list = [1,2,3,4,1,2,3]
  console.log([...new Set(list)]);  //打印[1,2,3,4]et为例，***字符串、Map都可执行此操作，可自行体验***

let list = [1,2,3,4,1,2,3]
  console.log([...new Set(list)]);  //打印[1,2,3,4]

基础用法3：合并数组或对象
以此可知，对象和数组的深拷贝也可用剩余操作符操作

//对象
const obj1 = {a:1,b:2}
const obj2 = {c:3,d:4}
const mergeObj = {...obj1,...obj2}    //{a:1,b:2,c:3,d:4}
//数组
const list1 = [1,2]
const list2 = [3,4]
const mergeList = [...list1,...list2]    // [1,2,3,4]

------------------------------------------------------------------------------------------------------------------------------------
进阶用法1：数组或对象的深拷贝
虽然上面写了，这里再啰嗦一下

//对象
const obj = {a:1,b:2}
const copyObj = {...obj1}
obj .a = 3
console.log(copyObj)     // 打印{a:1,b:2}

//数组
const list = [1,2]
const copyList = [...list1,...list2]
list[0]+=100
console.log(copyList )     // 打印[1,2]

进阶用法2：添加默认属性(important)
有时候从我们会遇到这样的情况，一个对象，大部分属性是相似的，只有小部分是不不同的，这时候我们就可以设置一个基础对象，具备基础属性，其他的对象可以通过扩展这个对象来得到。

 const obj = {
    name: 'Squirtle',
    type: 'Water',
    id:666
  }
  // 通过剩余操作符,可以获取对象中被解构对象取剩余的属性
  const {name,...rest} = obj
  console.log(name); //打印Squirtle
  console.log(rest); //打印{type: "Water", id: 666}

// 如果有批量数据处理,这样也很方便
const objList = [
  {
    name: 'Charmander',
    type: 'Fire'
  },
  { name: 'Squirtle', type: 'Water', abilities: ['Torrent', 'Rain Dish'] },
  {
    name: 'Bulbasur',
    type: 'Plant'
  }
];

function setNewObj(obj){
  const{abilities = [],...rest} = obj
  return {...rest,abilities}
}
const newObj = objList.map(item=>setNewObj(item))
//打印[ { name: 'Charmander', type: 'Fire', abilities: [] },   { name: 'Squirtle', type: 'Water', abilities: [ 'Torrent', 'Rain Dish' ] }, { name: 'Bulbasur', type: 'Plant', abilities: [] } ]
console.log(newObj); 

es6属性增强

属性交换在排序中很好用，之前在排序的时候，值的交换都是

let	a = 1
let	b = 2
let	tmp

tmp = b
b = a
a = tmp	

若是利用属性增强。则可以这样写,一行搞定，写的时候注意要在最后加上分号，不然会编译错误

[a,b] = [b,a];

reduce高阶用法

这个api基本上没看过都不会用得很熟练，但是微信公众号上面的《25个你不得不知道的数组reduce高级用法》之后，发现这个api是个精简代码的利器
相关概念
1、reduce的精华所在是将累计器逐个作用于数组成员上，「把上一次输出的值作为下一次输入的值」
2、reduce()函数相关概念
（1）定义：对数组中的每个元素执行一个自定义的累计器，将其结果汇总为单个返回值
（2）形式：array.reduce((t, v, i, a) => {}, initValue);如果没有传initValue，则第一项是initValue（arr[0]）
（3）参数：「callback」：回调函数(必选) ；「initValue」：初始值(可选)
（4）回调函数的参数
「total」(t)：累计器完成计算的返回值(必选)
「value」(v)：当前元素(必选)
「index」(i)：当前元素的索引(可选)
「array」(a)：当前元素所属的数组对象(可选)
（5）过程
以t作为累计结果的初始值，不设置t则以数组第一个元素为初始值
开始遍历，使用累计器处理v，将v的映射结果累计到t上，结束此次循环，返回t
进入下一次循环，重复上述操作，直至数组最后一个元素
结束遍历，返回最终的t

用例（25个只选择了几个作为示例）

用法1：累加累乘
最基础的

function add(...vals){
    return vals.reduce((t,v)=>t+v,0)
}
function multiplication(...vals){
    return vals.reduce((t,v)=>t*v,1)
}
console.log('add',add(1,2,3)) //add 6
console.log('multiplication',multiplication(1,2,3))  //multiplication 6

用法2：数组去重
大厂面试中有让数组去重但是不给用Set的题，这个也算是一个解决方案

function uniqArr(arr){
    return arr.reduce((t,v)=>(!t.includes(v)&&t.push(v),t),[])
}
var uniqFuncArr = [1,4,1,4,1,2]
console.log('数组去重',uniqArr(uniqFuncArr))   //数组去重 [1, 4, 2]

用法3：数组成员个数统计

function arrCount(arr){
    return arr.reduce((t,v)=>(t[v]?t[v]++:t[v]=1,t),{})
}
const countArr = [1,2,5,1,3,5,2]
console.log('数组成员个数统计',arrCount(countArr))  //数组成员个数统计 {1: 2, 2: 2, 3: 1, 5: 2}

用法4：数组成员位置记录
刷力扣的时候排序会发现会需要找到指定元素在数组中所有索引，但是使用现成的api都很麻烦

function arrPosition(arr,key){
    return arr.reduce((t,v,i)=>(v==key&&t.push(i),t),[])
}
const positionArr = [2,5,5,1,2,6,3]
console.log('数组成员位置记录',arrPosition(positionArr,2))   //数组成员位置记录  [0, 4]

用法5：力扣第120题 (三角形最小路径和)

var minimumTotal = function(triangle) {
    return triangle.reduceRight((curr,arr)=>{   //从三角形最下面开始寻找路径
        return arr.map((item,index)=>{
            return item+=Math.min(curr[index],curr[index+1])
        })
    })
};

至于filter()、map()等其他api，都比较简单，自己去查下用法就行