Javascript数组常见的方法

Cris

第一类:原型方法:

栈方法(后进先出)

push

作用:将任意数量的参数逐个添加到数组尾部
影响:破坏了原数组
参数:任意个
返回值: 新数组的长度

pop

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

队列方法(先进先出)

unshift

作用:将任意个参数逐个添加到数组前端
影响:破坏了原数组
参数:任意个
返回值:新数组的长度

shift

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

重排序方法

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)不会破坏原数组
String.prototype.split是Array.prototype.join的反方法

slice

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

splice

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

以下为es5新增

位置方法

indexOf/lastIndexOf

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

遍历

forEach

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

映射

map

1)对数组每一项运行遍历函数作为第一个参数,第二个参数是绑定遍历函数的this
2)返回每次遍历函数调用的结果组成的数组
3)该遍历函数分别接受三个参数:数组元素,数组索引(可选),数组本身(可选)

过滤

filter

1)对数组每一项运行遍历函数作为第一个参数,第二个参数是绑定遍历函数的this
2)返回该函数会返回true的项组成的数组
3)该遍历函数分别接受三个参数:数组元素,数组索引(可选),数组本身(可选)

检测

every/some

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

归纳

reduce/reduceRight

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}) // 数组求最大值

以下为es6新增

copyWithin

1)作用:在当前数组内部,将指定位置的成员复制到其他位置
2)参数:cpyWithin(pasteStart, copyStart, copyEnd)
pasteStart:从该位置开始替换元素, 如果为负值,表示从末尾开始计算;
copyStart:从该位置开始读取数据,默认为 0,如果为负值,表示从末尾开始计算;
copyEnd:到该位置前停止读取数据,不包括该位置,默认值为数组的长度,如果为负值,表示从末尾开始计算
3)返回值:当前数组
4)破坏了原数组

find/findIndex

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

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"}]

keys/values/entries

ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历。唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

includes

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

[NaN].includes(NaN) // true

flat/flatMap

flat
1)用于将嵌套的数组“拉平”,变成一维的数组。
2)参数是想要拉平的层数,默认值为1,如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。
3)该方法返回一个新数组.
4)对原数组没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

flatMap
1)对原数组的每个成员执行一个遍历函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。
2)只能拉平一层。
3)第一个参数是一个遍历函数,这个遍历函数有三个参数,分别是当前数组的成员,当前索引,和当前数组,第二个参数是绑定遍历函数的this。
4)返回一个新数组。
5)不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
//只能拉平一层 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

第二类:静态方法:

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》

阅读 2.6k
36 声望
0 粉丝
0 条评论
36 声望
0 粉丝
文章目录
宣传栏