常使用到的JS方法

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

成都创新互联公司专业为企业提供界首网站建设、界首做网站、界首网站设计、界首网站制作等企业网站建设、网页设计与制作、界首企业网站模板建站服务,10多年界首做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

数组中的方法

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

标题名称:常使用到的JS方法
转载源于:http://scyanting.com/article/dsojhei.html