JavaScript数组方法总结

length属性方法

数组的length属性不单单是只读的,还可以写入
var color = [‘red’,’blue’,’black’];
Color.length = 1; // red
Color.length = 4
Console.log(color[2]) //undefined

检测数组方法

当有不同模块时,数组在不同模块的表现是不同的构造函数,这时候instanceof也会判断失误,这时候要用更精确的方法
Array.isArray(value)

转换方法

  • toString() -> 可以将一个数组转化成“,”分割的形式,如[1,2,3,4].toString() -> “1,2,3,4”
  • join()方法和toString()一样,只是join()里面可以添加参数,默认是逗号,如[1,2,3,4].join(‘-‘) -> “1-2-3-4”
  • 上面这个数组对于数组中嵌套这数组的情况,也能默认拆到底。如[1,2,3,[4,[5,6,[7,8]]]].toString() -> “1,2,3,4,5,6,7,8″

重排序方法

  • reverse()
  • sort() : 它的原理是先调用数组的toString()方法,之后再进行字符串的比较。所以应该这么写

    arr.sort((val1,val2) => val1-val2)

操作方法

  • Concat():concat()方法不会影响之前数组的值
  • Slice() : 如果是负值,则用数组的长度去和数值相加。e.g: 长度为5的数组 arr.slice(-2,-1) === arr.slice(3,4)。slice有个技巧,其实后面两个参数差的值就是数组里留的数量,比如[1,2,3,4,5].slice(1,4),截取出来的数组长度就是3。
  • Splice() : 返回的是被删除的项,如果没删除则返回空数组,而且之前的数组也被改变

位置方法

indexOf:可以检测变量,它的两个参数是第一个是要查找的值或变量,第二个是从哪开始找。
var person = {name:’andy’,age:25};
var a = [{name:’andy’,age:25}];
var b = [person];
console.log(a.indexOf(person)) // -1
console.log(b.indexOf(person)) //0

find()和findIndex():他们的参数必须为函数,可直接返回满足条件的值和序号,还可以结合Object.is(),辨别NAN的位置
[1,2,3,4].find((n) => n>2)

迭代方法

有5个迭代方法,每个方法都接收两个参数。第一个参数是一个函数第二个参数是函数的作用域对象(可选)-影响this值,其中第一个参数的函数又有三个参数(item,index,arrSelf)。这5个方法都不会改变数组本身。

方法一个普通标题一个普通标题
every()Boolean循环次数:碰到是flase的直接终止循环
some()Boolean循环次数:碰到是true的直接终止循环
forEach()无返回值和for循环迭代数组一样,没有返回值
map()返回每次函数调用的结果组成的数组适用于包含项与另一个数组一一对应的数组
filter()返回true所组成的数组查询符合条件的所有数组很有用

归并方法

reduce()和reduceRight (),这两个没区别就是一从头到尾,一个从尾到头。
他们的参数意义:
第一个参数:function (pre,cur,index,arrSelf)
第二个参数:pre的初始值,如果这个参数没有,那么pre的初始值就是数组的第0个元素,例子:

let arr2 = [1,2,3];
let arr2All = arr2.reduce((pre,cur,index,arr) => {
console.log('pre: '+ pre)
console.log('cur: '+ cur)
console.log('index: '+ index)
console.log('arr: '+ arr)
return cur + pre;
},5)

let arr2 = [1,2,3];
var arr2All = arr2.reduce((pre,cur,index,arr) => {
console.log('pre: '+ pre)
console.log('cur: '+ cur)
console.log('index: '+ index)
console.log('arr: '+ arr)
return cur + pre;
})

Es6中数组的方法

Array.from()和扩展运算符(…)

它可以将类数组(本质特点必须有一点,有length属性)和可遍历对象(连字符串都可以)都转化为数组e.g:
在实际应用中一般类数组对象都是获取的DOM的NodeList集合,如getElementByTagName()…

let arrLike = {
'0':'a',
'1':'b',
'2':'c',
length:3
}
str = [].slice.call('abc')
var arr = [].slice.call(arrLike) // [‘a’,’b’,’c’] -> es5的写法
var arr1 = Array.from(arrLike) // [‘a’,’b’,’c’]
var arr2 = […arrLike] //扩展运算符不能有这种效果
var arr3 = Array.from('arrLike’) // [‘a’,’r’,’r’,’L’,’i’,’k’,’e']

Includes()

和indexOf不同点:

  1. 他直接返回了true和false
  2. 语义化比较好
  3. 对于NAN的判断 indexOf内部使用严格相等,会导致NAN判断错误,而include使用的是不一样的判断方法,没有问题,[NaN].include(NaN) -> 0
    原文作者:andy00614
    原文地址: https://segmentfault.com/a/1190000015848738
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞