Javascript数组常见的方法

分为两种:原型(实例)方法和静态函数

第一类:原型方法:

栈方法(后进先出)
push
参数:任意个
作用:将任意数量的参数逐个添加到数组尾部
返回值: 新数组的长度
影响:破坏了原数组

pop
参数:无
作用:删除数组最后一项
返回值:删除的项
影响:破坏了原数组

队列方法(先进先出)
unshift
参数:任意个
作用:将任意个参数逐个添加到数组前端
返回值:新数组的长度
影响:破坏了原数组

shift
参数:无
作用:删除数组第一项
返回值:删除的项
影响:破坏了原数组

重排序方法
reverse
参数:无
作用:反转数组
返回值:排序后的数组
影响:破坏了原数组

sort
1)不推荐使用默认排序方法
2)接受一个比较函数作为参数,
3)比较函数接受两个参数,如果第一个参数位于第二个参数之前则返回一个负数,如两个参数相等则返回0,若第一个参数位于第二个参数之后则返回一个正数
4)比较数值数组的比较函数

function ascendingCompare(num1, num2) {
    return num1 - num2;
}

function descendingCompare(num1, num2) {
    return num2 - num1;
}
   

var arr = [1 , 2, 3];
console.log(arr.sort(ascendingCompare) // [1,2,3]
console.log(arr.sort(descendingCompare) // [3,2,1]

5)根据对象数组里的对象的某个指定属性的比较函数(闭包)

function compare(propertyName) {
    return function (object1, object2) {
        return object1[propertyName] - object2[propertyName]
    }
}

var arr [{name: '子虚', age: 12}, {name: '乌有', age: 13}]
console.log(arr.sort(compare(age)) // {name: '子虚', age: 12}, {name: '乌有', age: 13}]

6)返回值:排序后的数组
7)影响:破坏了原数组

操作方法
concat
1)先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的尾部,最后返回这个副本
2)如果参数是一个或多个数组,这该方法会将这些数组中的每一项都添加到结果数组中
3)如果参数不是数组,这些值会被简单的添加到结果数组的末尾
4)如果不传参数,它只是复制数组并返回副本(可用于复制数组)
5)不会破坏原数组

join
1) 将数组中的所有元素拼接成一个字符串并返回
2)可以在join传递一个字符串作为参数,该参数表示连接的方式
3)不会破坏原数组

slice
1)从当前数组中取出一个或多个指定的连续的元素创建数组并返回
2)当只有一个参数时,该方法从该参数位置开始到当前数组的所有项
3)当有两个参数时,该方法返回起始和结束位置之间的项,但不包括结束位置的项
4)当参数中有负数的时候,用数组长度加上该数来确定相应的位置
5)不会破坏原数组

splice
1)删除数组中的指定的连续的元素,也可向数组的中部插入项
2)删除:提供两个参数:删除第一项的起始位置,删除的个数
3)插入:提供三个参数:起始位置,0(删除的项数),要插入的项
4)编辑:提供三个参数:起始位置,删除的项数,要添加的项(删除的项数不一定要等于添加的项数)
5)返回从原始数组删除的项组成的数组
6)破坏了原数组

以下为es6新增

位置方法
indexOflastIndexOf
1)这两个方法都接受两个参数:要查找的项和(可选的)起始位置,
2)indexOf从数组开头向后查找,lastIndexOf从数组末尾向前查找
3)返回查找的项在数组中的位置,或者在没找到的情况下返回-1
4)使用全等操作符 (NaN不等于NaN)

遍历
forEach
1)对数组每一项运行给定函数作为参数
2)该函数分别接受三个参数:数组元素,数组索引(可选),数组本身(可选)
3)无返回值
4)缺点:无法像for循环那样用break语句提前终止遍历

映射
map
1)对数组每一项运行给定函数,返回每次函数调用的结果组成的数组
2)该函数分别接受三个参数:数组元素,数组索引(可选),数组本身(可选)

过滤
filter
1)对数组每一项运行给定函数,返回该函数会返回true的项组成的数组
2)该函数分别接受三个参数:数组元素,数组索引(可选),数组本身(可选)

检测
everysome
1)它们对数组元素应用指定的函数进行判定,返回true或false
2)every就像数学中的“针对所有”的量词∀,当前仅当数组中的每一项调用指定函数都返回true,它才返回true
3)some就像数学中的“存在”的量词ョ,只要数组中有一项调用指定函数返回true,它就返回true
4)一旦every和some确认返回值就会停止遍历
5)根据数学上的惯例,空数组调用every返回true,some返回false

归纳
reducereduceRight
1)使用指定的函数对数组元素进行组合,生成单个值,这在函数式编程中是常见操作,也可成为“注入”和“折叠”
2)reduce第一个参数是执行简化操作的化简函数,化简函数的任务是用某种方法把两个值组合或化简为一个值,并返回化简后的值,第二个参数(可选)是作为化简函数的第一个参数的初始值,如果不传就取数组的第一项
3)化简函数的第一个参数是到目前为止的化简操作累计的结果,第2-4个参数分别是数组元素、数组索引和数组本身
4)reduceRight类似于reduce,不同的是它是从右往左处理

const a = [1,2,3,4,5]
const sum = a.reduce(function(x,y){return x+y}, 0) // 数组求和
const max = a.reduce(function(x,y){return (x>y)?x:y}) // 数组求最大值

includes
1)参数:要检测的元素
2)作用:检测某个数组是否包含给定的元素
3)返回值:布尔值
4)使用不一样的判断算法

[NaN].includes(NaN) // true

fill
1)参数:参数1用来填充数组的元素,参数2填充数组的起始位置(可选),参数3填充数组的结束位置(可选,不包括结束位置)

['a', 'b', 'c'].fill(7, 1) // ['a', 7, 7]

2)返回值:新数组
3)破坏了原数组
4)如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象

let arr = new Array(3).fill({name: "Mike"});
// [{name: "Mike"}, {name: "Mike"}, {name: "Mike"}]
arr[0].name = "Ben";
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

findfindIndex
1)find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数(参数依次为当前的值、当前的位置和原数组),所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
2)findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
3)这两个方法都可以接受第二个参数,用来绑定回调函数的this对象
4)这两个方法都可以发现NaN,弥补了数组的indexOf方法的不足

[NaN].indexOf(NaN) // -1
[NaN].findIndex(y => Object.is(NaN, y)) // 0

第二类:静态函数:

Array.of()
1)诞生原因:Array()构造器有一个总所周知的陷阱,就是只传一个参数,且这个参数是数字的话,那么不会构造出一个值为这个数字的单元素的数组,而是一个空数组,其length属性为这个数字;
2)Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

Array.from()
1)用于将两类对象转为真正的数组:类似数组的对象(arguments, nodelist)和可遍历(iterable)的对象(Set ,Map, 字符串)

var arrLike = {
    length: 4,
    2: "foo",
}
Array.from(arrLike) // [undefined, undefined, "foo", undefined]

2)第一个参数是要转换的数据,第二个是可选参数,是一个映射回调函数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组,还可以传第三个可选参数,用于指定第二个参数回调函数的this

var arrLike = {
    length: 4,
    2: "foo",
}
Array.from(arrLike, item => item || 0)  // [0, 0 , "foo", 0]

参考资料:《黄皮书》《红皮书第三版》《犀牛书》《阮大神es6》

    原文作者:Cris
    原文地址: https://segmentfault.com/a/1190000015242125
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞