Skip to content

Latest commit

 

History

History
208 lines (196 loc) · 6.07 KB

数组方法与小知识.md

File metadata and controls

208 lines (196 loc) · 6.07 KB

数组方法与小知识

个人常用数组方法

  1. concat:数组连接、合并:
[1].concat(1,2,3,4)
// (5) [1, 1, 2, 3, 4]
[1].concat([1,2,3])
// (4) [1, 1, 2, 3]
[1].concat([1,2,[1,2]])
// (4) [1, 1, 2, [1,2]]
  1. join:数组成员拼接:
[1,2,3,4].join()
// "1,2,3,4"
[1,2,3,4].join('-')
// "1-2-3-4"
  1. indexOf:查找元素某个元素的下标:
// 如果查找不到则返回-1
[1,2,3,4].indexOf(2)
// 1
// 当然如果只是为了查找是否存在的话我更推荐includes
[1,2,3,4].includes(1)
// true
  1. shift:删除数组第一个成员:
var arr = [1,2,3]
arr.shift()
// 会返回第一个成员:1
arr
// (2) [2, 3]
  1. unshift:给数组最前面插入一个成员:
var arr = [1,2,3]
// 怕搞混?这样想:unshift比shift长,所以它是增加,另一个是删除
arr.unshift('test')
arr
// (4) ["test", 1, 2, 3]
  1. fill:给数组填充数据/成员:
Array(4).fill('填')
// (4) ["填", "填", "填", "填"]
  1. push:给数组尾部增加一个成员
  2. pop:删除数组最后一个成员并返回其值
  3. slice:从某数组切片返回一段数组,不修改原数据:
var arr = ['name','demo','ted','huansheng']
// 两个参数,传入第一个参数时代表,从哪个下标作为切片起点,一直到数组尾部
arr.slice(0)
// (4) ["name", "demo", "ted", "huansheng"]
arr.slice(1)
// (3) ["demo", "ted", "huansheng"]

// 支持负数,代表从后数第几个作为切片起始点
arr.slice(-1)
// ["huansheng"]

// 第二个参数代表切片结束坐标,注意,是开闭区间,[),不包括结束坐标本成员
arr.slice(1,3)
// (2) ["demo", "ted"]

// 第二个参数同样支持负数
arr.slice(1,-1)
// (2) ["demo", "ted"]

// 如果第二个参数坐标小于第一个则返回空数组
arr.slice(1,-3)
// []

// 如果第二个参数超出数组长度也按最末算
arr.slice(1,999)
// (3) ["demo", "ted", "huansheng"]
  1. splice:删除数组的某些成员 或者 用新数据替换某些成员:
var arr = ['name','demo','ted','huansheng']
// 注意,第一个参数指 从哪个坐标开始,第二个参数指从起始坐标删除多少个成员
arr.splice(0,1)
// 返回删除了的成员数组:["name"]
arr
// (3) ["demo", "ted", "huansheng"]

// 如果只给定第一个起始坐标的话,那么其会从起始一直删到结尾
var arr = ['name','demo','ted','huansheng']
arr.splice(0)
// 全删除了: ["name", "demo", "ted", "huansheng"]
arr 
// []

// 同样支持倒序删除
var arr = ['name','demo','ted','huansheng']
arr.splice(-1)
// 删除了倒数第一个:["huansheng"]
arr
// (3) ["name", "demo", "ted"]

var arr = ['name','demo','ted','huansheng','llalal','asdsad']
arr.splice(2,3,'test','插入两个数据')
// (3) ["ted", "huansheng", "llalal"]
arr
// (5) ["name", "demo", "test", "插入两个数据", "asdsad"]

// 第二个参数配合的好,就不是删除了,因为删除0个,却增加一个,最终变成了 中间插入一个数据
var arr = ['name','demo','ted','huansheng']
// 在下标为2的地方插入一个数据
arr.splice(2,0,'test')
// []
arr
// (5) ["name", "demo", "test", "ted", "huansheng"]
  1. find:查找某个元素是否存在:
[{name:'ted'},2,3].includes({name:'ted'})
// false
[{name:'ted'},2,3].indexOf({name:'ted'})
// -1
// 之前的查找api有个问题,如果想查找一个对象是否存在,由于引用对象不好比较,你是没法直接判断它是否存在的,这时候用这个就更方便

// 通过判断name属性查找对象,并返回第一个符合结果的对象,没有的话返回undefined
[{name:'ted'},2,3].find(item=>item.name=='ted')
// {name: "ted"}
  1. findIndex:查找并返回符号某条件的第一个成员坐标:
[{name:'ted'},{name:'ted'},22,3].findIndex(item=>item.name=='ted')
// 0
[{name:'ted'},{name:'ted'},22,3].findIndex(item=>item.name=='ted1')
// -1
  1. sort:对数组成员进行排序:
// 可以发现个奇怪的事情:a是后一个元素,b是前一个元素
[1, 3, 2].sort((a, b) => {
    console.log(`a:${a},b:${b}`)
    // a - b 大于零时,位置交换,即 从小到大排
    // 如果写成 b - a 则是从大到小排
return a - b
});
    // a:3,b:1
    // a:2,b:3
    // a:2,b:1
    // (3) [1, 2, 3]

注意:排序会改变原数组哦,且以上结果仅代表chrome浏览器:JS 数组 API 再记

  1. map:数组转换:
var arr = [{name:1},{name:2},{name:3}]
// 返回数组每一项的name属性值组成的数组
arr.map(item=>item.name)
// (3) [1, 2, 3]
  1. forEach:数组循环:
[{name:1},{name:2},{name:3}].forEach(item=>console.log(item))
  1. filter:数组过滤筛选:
[1,2,3,4,5,6,6].filter(item=>item % 2)
// (3) [1, 3, 5]
  1. every:数组成员判断:
// 判断该数组是否每一个成员都符合某个条件
[1,2,3,4,5,6].every(item=>item % 2)
// false
[1,3,5,7].every(item=>item % 2)
// true
  1. some:数组成员判断:
// 数组是否某个成员符号条件
[1,3,5,7].some(item=>item % 2)
// true
  1. reduce:数组计算:
// 用得不多,个人没咋用,待定

扁平化数组:flat()

Array.prototype.flat()(预计将成为 ES2019 的一部分,并且已在主要浏览器中实现),如不支持,参考polyfill补丁代码:

var arr = [1,[2,3],[4,[5,6]]]
function flatten(arr) {
  const result = [];

  arr.forEach((i) => {
    if (Array.isArray(i))
      result.push(...flatten(i));
    else
      result.push(i);
  })
  
  return result;
}
flatten(arr)//[1, 2, 3, 4, 5, 6]

小知识

  1. includes 可以判断数组中是否包含 NaN,但是 indexOf 不行

参考文章