JavaScript数组常用方法

1、join()

数组转字符串,方法只接收一个参数

const arr = [1, 2, 3, 4]
console.log(arr.join());  //  1,2,3,4
console.log(arr.join(''));  //  1234
console.log(arr.join(' '));   //  1 2 3 4
console.log(arr.join('?'));  //  1?2?3?4

实现重复字符串

const  repeatStr = (str, num) => {
    // str 需要重复的字符串  num 需要重复的次数
    return new Array(num + 1).join(str)
}
console.log(repeatStr("哈", 5))  //  哈哈哈哈哈

2、shift() 和 unshift()

shift:方法用于把数组的第一个元素从其中删除,并返回第一个元素的值,会改变原数组。
unshift:方法可向数组的开头添加一个或更多元素,并返回新的长度,会改变原数组。

let arr = [1, 2, 3, 4]
console.log(arr.shift(), arr)  //  1  [2, 3, 4]
console.log(arr.unshift('a'), arr)  //  4  ['a', 2, 3, 4]

3、push()和pop()

push:方法可向数组的末尾添加一个或多个元素,并返回新的长度,会改变原数组。
pop:方法用于删除并返回数组的最后一个元素,会改变原数组。

4、sort()

方法用于对数组的元素进行排序,会改变原数组。

const arr = [5, 3, 6, 1 ,0]
console.log(arr.sort(),arr)  //  [0, 1, 3, 5, 6]   [0, 1, 3, 5, 6]

arr.sort((a, b) => {
    return a - b  //  [0, 1, 3, 5, 6]  升序  默认正序
    //  return b - a   //  [6, 5, 3, 1, 0]  降序
})

5、reverse() (反转数组)

方法用于颠倒数组中元素的顺序,会改变原数组。

const arr = [5, 3, 6, 1 ,0]
console.log(arr.reverse(), arr)  //  [0, 1, 6, 3, 5]  [0, 1, 6, 3, 5]

6、splice()

splice() 方法向/从数组中添加/删除元素,然后返回被删除的元素,会改变原数组。

arr.splice(index , length, item1,.....,itemX)
index:必需。整数,规定添加/删除元素的位置,使用负数可从数组结尾处规定位置。
length:必需。要删除的元素数量。如果设置为 0,则不会删除项目。
item1, ..., itemX:可选。向数组添加的新元素。
返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。

const arr = [5, 3, 6, 1 ,0]
// console.log(arr.splice(2, 1), arr)  // 删除一个 [6]  [5, 3, 1 ,0]
// console.log(arr.splice(2, 2), arr)  // 删除两个 [6, 1]  [5, 3 ,0]
// console.log(arr.splice(2, 1, 0), arr)  // 替换一个 [6]  [5, 3, 0, 1 ,0]
// console.log(arr.splice(2, 1, 0, 0), arr)  // 一个替换两个 [6]  [5, 3, 0, 0, 1 ,0]
// console.log(arr.splice(1, 2, 0,), arr)  // 两个替换一个 [3, 6]  [5, 0, 1 ,0]
console.log(arr.splice(2, 0, 0, 0), arr)  // 添加两个 []  [5, 3, 0, 0, 6, 1 ,0]

7、slice()

方法从数组中截取元素,然后返回截取到的元素组成的数组,不会改变原数组。

arr.slice(start , end);
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arr 中的元素。

const arr = [5, 3, 6, 1 ,0]
// console.log(arr.slice(0, 2))  // [5, 3]
// console.log(arr.slice(1))  // [3, 6, 1 ,0]
// console.log(arr.slice(-1))  // [0]
// console.log(arr.slice(-5, 3))  // [5, 3, 6]
console.log(arr.slice(-5, -3))  // [5, 3]
console.log(arr)  // [5, 3, 6, 1 ,0]

8、concat

方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

const arr = [5, 3, 6, 1 ,0]
const brr = [0, 1, 2]
console.log(arr.concat(brr))  // [5, 3, 6, 1, 0, 0, 1, 2]
console.log(brr.concat(arr))  // [0, 1, 2, 5, 3, 6, 1, 0]
console.log(arr.concat())  // [5, 3, 6, 1, 0]
console.log(arr)  // [5, 3, 6, 1, 0]
console.log(brr)  // [0, 1, 2]

ES5新增

9、indexOf()和 lastIndexOf()

方法都返回要查找的元素在数组中首次出现的位置,在没找到的情况下返回-1。

indexOf()--------array.indexOf(item,start) (从数组的开头(位置 0)开始向后查找)
item: 必须。查找的元素。
start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从0开始检索。
lastIndexOf()--------array.lastIndexOf(item,start) (从数组的末尾开始向前查找)
item: 必须。查找的元素。
start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从 array.length-1开始检索。

const arr = [5, 6,  3, 6, 1 ,0]
console.log(arr.indexOf(6))  // 1
console.log(arr.indexOf(6, 2))  // 3
console.log(arr.lastIndexOf(6))  // 3
console.log(arr.lastIndexOf(6, 2))  // 1

10、迭代方法:forEach()、map()、filter()、some()、every()

forEach()
对数组进行遍历循环,这个方法没有返回值。

array.forEach((cur , index , arr) => {}, thisValue)
cur : 必需。当前元素
index: 可选。当前元素的索引值。
arr : 可选。当前元素所属的数组对象。
thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值

const arr = [1, 2, 3]
arr.forEach((cur, index, arr) => {
    console.log(cur, index, arr)
})

1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

map()
指“映射”,方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

array.map((cur , index , arr) => {}, thisValue)
参数含义同forEach()

const arr = [1, 2, 3]
const newArr = arr.map((cur, index) => {
    return cur * index
 })
console.log(newArr)  //  [0, 2, 6]

filter()
见 JavaScript数组常用方法---filter

some()
判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

array.some((cur , index , arr) => {}, thisValue)
参数含义同forEach()

const arr = [1, 2, 3]
const res1 = arr.some(cur => cur > 3)  //  false
const res2 = arr.some(cur => cur > 2)  //  true

every()
判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

array.every((cur , index , arr) => {}, thisValue)
参数含义同forEach()

const arr = [1, 2, 3]
const res1 = arr.every(cur => cur > 2)  // false
const res2 = arr.every(cur => cur > 0)  // true

11、两个归并方法reduce()、reduceRight()

见 JavaScript数组常用方法---reduce

注意:
reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

ES6新增

12、Array.from()

方法是用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。

const obj = {
    0: 'lin',
    1: 'chen',
    2: 'wei',
    length: 3
}
console.log(Array.from(obj))  // ["lin", "chen", "wei"]

13、Array.of()

方法是将一组值转变为数组,参数不分类型,只分数量,数量为0返回空数组。

console.log(Array.of(1,3,5))  // [1, 3, 5]
console.log(Array.of([1,3,5]))  // [[1, 3, 5]]
console.log(Array.of("a",3,"5"))  // ["a", 3, "5"]
console.log(Array.of(undefined))  // [undefined]
console.log(Array.of())  // []

14、find()

方法返回通过测试(函数内判断)的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

Array.find((cur, index, arr) => {})
参数含义同forEach()

const arr = [1, 2, 3]
const res1 = arr.find(cur => cur > 3)  // undefined
const res2 = arr.find(cur => cur > 0)  // 1

使用
根据id获取数组中的对象

const arr = [
    {
        id: 1,
        name: 'lin'
    },
    {
        id: 2,
        name: 'lin'
    },
    {
        id: 3,
        name: 'lin'
    },
]
const obj = arr.find(cur => cur.id === 1)
console.log(obj)  // {id: 1, name: 'lin'}

15、findIndex ()

findIndex和find差不多,不过默认返回的是索引,如果没有符合条件的元素返回 -1。

const arr = [
    {
        id: 1,
        name: 'lin'
    },
    {
        id: 2,
        name: 'lin'
    },
    {
        id: 3,
        name: 'lin'
    },
]
const index1 = arr.findIndex (cur => cur.id === 1)  // 0
const index2 = arr.findIndex (cur => cur.id === 4)  // -1

16、fill()

方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。会改变原数组。

array.fill(value, start, end)
value:必需。填充的值。
start:可选。开始填充位置。如果这个参数是负数,那么它规定的是从数组尾部开始算起。
end:可选。停止填充位置 (默认为 array.length)。如果这个参数是负数,那么它规定的是从数组尾部开始算起。

const arr = [1, 2, 3, 4, 5]
 // console.log(arr.fill(0), arr)  // [0, 0, 0, 0, 0]  [0, 0, 0, 0, 0]
// console.log(arr.fill(0, 1)) // [1, 0, 0, 0, 0]
// console.log(arr.fill(0, 1, 3))  // [1, 0, 0, 4, 5]
// console.log(arr.fill(0, -3))  // [1, 2, 0, 0, 0]
console.log(arr.fill(0, -3, -1))  // [1, 2, 0, 0, 5]

17、遍历数组方法 keys()、values()、entries()

这三个方法都是返回一个遍历器对象,可用for...of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。
keys()

const arr = ["a", "b", "c"]
for(let item of arr.keys()){
    console.log(item)
}

打印结果:
0
1
2

values()

const arr = ["a", "b", "c"]
for(let item of arr.values()){
    console.log(item)
}

打印结果:
a
b
c

entries()

const arr = ["a", "b", "c"]
for(let item of arr.entries()){
    console.log(item)
}

打印结果:
[0, "a"]
[1, "b"]
[2, "c"]

const arr = ["a", "b", "c"]
for(let [index, item] of arr.entries()){
    console.log(index +": " + item)
}

打印结果:
0: a
1: b
2: c

18、includes()

方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

arr.includes(item, start)
item: 必须。需要查找的元素。
start:可选。从该索引处开始查找 item。如果为负值,则按升序从 array.length + start的索引开始搜索。默认为 0。

const arr = [1, 2, 3, 4, 5, 2]
console.log(arr.includes(2))  // true
console.log(arr.includes(2, 3))  // true
console.log(arr.includes(3, 3))  // false
console.log(arr.includes(2, -3))  // true
console.log(arr.includes(3, -3))  // false

19、copyWithin()

方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员。

array.copyWithin(target , start , end)
target :必需。从该位置开始替换数据。
start :可选。从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
end: 可选。到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

const arr = [1, 2, 3, 4, 5]
// console.log(arr.copyWithin(0), arr)  // [1, 2, 3, 4, 5]
// console.log(arr.copyWithin(0, 2, 4), arr)  // [3, 4, 3, 4, 5]  [3, 4, 3, 4, 5]
console.log(arr.copyWithin(0, -4, -2))  // [2, 3, 3, 4, 5]

你可能感兴趣的:(JavaScript数组常用方法)