常使用到的JS方法

描述: 本篇文章为了记录日常生活中或者项目中经常使用到的JS方法，会长期记录...

数组中的方法

1.map和forEach方法

• map
  参数为回调函数，得到一个新数组
• forEach
  修改原数组，不会产生新数组

2.pop和push方法（栈结构）

• push
  向数组末尾添加一个元素或者多个元素，会改变原数组
• pop
  从数组尾部删除一个元素，会返回被删除的元素,原数组被修改

3.shift和unshift方法（队列结构）

• shift
  删除数组的一个元素，并且会返回删除元素，改变原数组
• unshift
  从数组起始位置开始添加元素，返回数组长度，修改原数组

4.concat方法
链接多个数组，产生新数组，不影响原数组（注意：如果数组不是基础数据，含有复杂类型数据，该方法为浅拷贝，会影响原数组）

/* 基础数据 */
const arr = [1,2,3]
const arr1 = [1,2,3].concat(arr1) //[1, 2, 3, 1, 2, 3]

/* 复杂数据 */
const arr3 = [1,2,{name:'zz',age:12}]
const arr4 = [1,3,4].concat(arr3) //[1,2,{name:'zz',age:12},1,3,4]
arr4[4].age = 99 // 此时arr3的数据也修改了 

5.filter方法
过滤数据，传入一个回调函数,方法返回一个符合回调函数条件的新数组,不会修改原数组

const arr = [1,2,4,6,8]
arr.filter((item,index) => item === 2**index) // [1, 2, 4] 此处**为es7新语法 幂运算

6.sort和reverse方法

• sort
  该方法可以对数组进行升序或降序排列，默认为按字母升序排列，如果是数组，需要通过函数指定排序方式。该会改变原数组，不会产生新数组

const sortArr = [1,2,3,0,-1,-4]
sortArr.sort((a,b) => {return a-b}) //升序排列 [-4, -1, 0, 1, 2, 3]
sortArr.sort((a,b) => {return b-a}) //降序排列 [3, 2, 1, 0, -1, -4]

• reverse
  数组反转，前后颠倒顺序,不会产生新数组，原数组会改变

7.splice和slice方法

• splice
  splice(start,count,item...) 删除数组中的数据或者为数组添加数据，第一个参数为起始位置，第二个为删除位数，后面的item参数为替换数据.当删除个数为0时，数组会从起始位置插入item数据，会改变原数组，返回删除的数据

const arr = [1,2,3,4]
arr.splice(0,1,'string') // 返回 1 arr变为 ['string',2,3,4]

arr.splice(1,0,'string2') // 返回[] arr变为['string','string2',3,4]

• slice
  slice(start,end)方法对数组进行从起始位置到结束位置的部分截取，也可以截取字符串,会返回一个新数组，不会改变原数组

const arr = [1,2,3,4,5]
arr.slice(0,3) // 返回[1,2,3] arr未改变

8.join方法
将数组中的项通过指定方式生成一个字符串,不改变原数组，生成新的字符串

9.reduce方法
reduce(callback(),[initialValue]) 该方法第一个参数是回调函数，函数有四个参数、preValue - 前一个数据或者初始值,curValue - 当前数据，index - 当前数据坐标，arr - 当前操作的数组。高级用法：数组去重、计算元素出现的次数、将多维数组扁平化、数组对象归类

// 1.数组去重
const arr = [1,2,4,2,5,22,77,33,4,2,1]
const a = arr.reduce((pre,cur,index) => {
  return pre.includes(cur)?pre:[...pre,cur]
},[])

// 2.数组对象中属性值相同的项归类在一起
const arr4 = [
  {
    county:'1-1',
    child:[{name:'张三',age:12},{name:'李斯',age:12}]
  },
  {
    county:'1-2',
    child:[{name:'张三',age:12},{name:'李斯',age:12}]
  },
  {
    county:'1-1',
    child:[{name:'王五',age:33},{name:'麻子',age:21}]
  }
]

const arr5 = arr4.reduce((pre,cur,item)=>{
  if(!pre[cur.county]){
    pre[cur.county] = []
  }
  for(let i = 0;i<cur.child.length;i++){
    pre[cur.county].push(cur.child[i])
  }
  return pre
},{})

console.log(arr5)
/*
结果为：
 {
  '1-1': [
    { name: '张三', age: 12 },
    { name: '李斯', age: 12 },
    { name: '王五', age: 33 },
    { name: '麻子', age: 21 }
  ],
  '1-2': [ { name: '张三', age: 12 }, { name: '李斯', age: 12 } ]
}*/

本文来自博客园，作者：竺墨，转载请注明原文链接：https://www.cnblogs.com/kinan/p/16021814.html