Skip to content

js 数组的常用属性与方法

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

属性

length 长度

js
[1, 2, 3].length            // 3

方法

at() 访问元素

js
let arr = ['python', 'abc', 'xyz']
arr.at(0)                   // 'python'
arr.at(-1)                  // 'xyz'
arr.at(3)                   // undefined
arr.at(-4)                  // undefined
  • [] 几乎一致
  • at 支持负数下标,而 [] 不支持
  • 负数下标从 -1 开始
  • 下标超出范围会返回 undefined

concat() 合并多个数组

js
let arr1 = ['a', 'b', 'c']
let arr2 = ['x', 'y', 'z']
let arr3 = ['1', '2', '3']

arr1.concat(arr2)           // ['a', 'b', 'c', 'x', 'y', 'z']
arr1.concat(arr2, arr3)     // ['a', 'b', 'c', 'x', 'y', 'z', '1', '2', '3']
arr1.concat()               // ['a', 'b', 'c']
  • 返回新数组,原数组不变
  • 省略参数时,返回原数组的浅拷贝

every() 所有元素为真则真

js
let arr = ['python', 'abc', 'xyz']

// 判断所有元素长度是否大于等于 3;下述返回 true
arr.every(function(element, index, array) {
  return element.length >= 3
})
  • 返回值为布尔值(true/false
  • 每个元素均调用一次测试函数,测试函数返回 truefalse
  • 只要有一个元素返回 false 则立即停止遍历,同时 every() 方法立即返回 false
  • 所有元素测试返回 trueevery() 方法才会返回 true
  • 对于空数组,它只返回 true

some() 有一个元素为真则真

js
let arr = ['python', 'abc', 'xyz']

// 判断是否有元素长度大于等于 5;下述返回 true
arr.every(function(element, index, array) {
  return element.length >= 5
})
  • every() 方法类似,不同点:
    • 只要有一个返回 true 则立即停止遍历,同时方法立即返回 true
    • 所有元素测试返回 false 时,方法才返回 false
    • 对于空数组,它只返回 false

forEach() 遍历并执行函数

js
let arr = ['python', 'abc', 'xyz']

// 打印所有元素的长度,输出 6 3 3
arr.forEach((element) => console.log(element.length))

// 在循环体内使用 this
array.forEach(function countEntry(entry) {
  this.sum += entry;
  ++this.count;
}, this);
  • 除非抛出异常,否则没有办法停止或中断 forEach() 循环
  • 所以不要在 forEach() 中使用 breakreturn 等循环控制语句
  • 使用 this 时,不能使用箭头函数表达式

includes() 判断是否包含

js
let arr = ['python', 'abc', 'xyz']
arr.includes('abc')         // true
arr.includes('abcd')        // false
arr.includes('abc', 3)      // false

indexOf() 查找元素

js
let arr = ['python', 'abc', 'xyz']
arr.indexOf('abc')          // 1
arr.indexOf('abcd')         // -1
arr.indexOf('abc', 3)       // -1
  • 与字符串的 indexOf() 方法一样
  • 未找到返回 -1;找到返回索引下标

join() 拼接成字符串

js
let arr = ['python', 'abc', 'xyz']
arr.join('.')               // 'python.abc.xyz'
arr.join('00')              // 'python00abc00xyz'
  • 默认以英文逗号拼接

filter() 过滤元素

js
let arr = ['python', 'abc', 'xyz']
arr.filter((item) => item.length >= 6)  // ['python']

map() 为每个元素执行相同的函数调用,返回新数组

js
let arr = [1, 2, 3]
arr.map((x) => x * 2)       // [2, 4, 6]

reduce() 为每个元素执行相同的函数调用,返回合并值

js
let arr = [1, 2, 3]
arr.reduce((a, b) => a + b) // 6
  • 回调函数的返回值会作为下一次此函数的第一个参数
  • 最后一次调用时,回调函数的返回值就是 reduce() 的返回值

pop() 弹出最后一个元素

js
let arr = ['python', 'abc', 'xyz']
arr.pop()                   // 'xyz'
arr.pop()                   // 'abc'
arr                         // ['python']
  • 会修改原数组,删除并返回数组最后一个元素
  • 如果数组为空,则返回 undefined

shift() 删除第一个元素

js
let arr = ['python', 'abc', 'xyz']
arr.shift()                 // 'python'
arr.shift()                 // 'abc'
arr                         // ['xyz']
  • 会修改原数组,删除并返回数组第一个元素
  • 如果数组为空,则返回 undefined

push() 追加元素

js
let arr = ['python', 'abc', 'xyz']
arr.push('123')             // 4
arr                         // ['python', 'abc', 'xyz', '123']
arr.push('aoe', 'iuv')      // 6
arr                         // ['python', 'abc', 'xyz', '123', 'aoe', 'iuv']
  • 直接改变原数组,新元素会加到原数组末尾
  • 返回值为数组的新的长度

unshift() 在开头添加元素

js
let arr = ['python', 'abc', 'xyz']
arr.unshift('123')          // 4
arr                         // ['123', 'python', 'abc', 'xyz']
arr.unshift('aoe', 'iuv')   // 6
arr                         // ['aoe', 'iuv', '123', 'python', 'abc', 'xyz']
  • 直接改变原数组,新元素会加到原数组开头
  • 返回值为数组的新的长度

slice() 切片

js
let arr = ['python', 'abc', 'xyz']
arr.slice(0, 2)             // ['python', 'abc']
arr.slice(-1)               // ['xyz']
  • 与字符串的 slice() 方法几乎一样
  • 左闭右开区间
  • 索引下标可以是负数,从 -1 开始

sort() 就地排序

js
let arr = ['python', 'abc', 'xyz']
arr.sort()                  // ['abc', 'python', 'xyz']

// 要比较数字而非字符串,比较函数可以简单的用 a 减 b
function compareNumbers(a, b) {
  return a - b;
}
  • 就地排序,直接改变原数组
  • 如果不想改变原数组,可以使用 toSorted() 方法,其用法与 sort() 一致;只是返回新数组
  • 默认是所有元素会转为字符串进行比较排序
  • 可选参数:比较函数 compareFn(a, b) ,此函数应返回 -1 / 0 / 1

reverse() 就地反转、逆序

js
let arr = ['python', 'abc', 'xyz']
arr.reverse()               // ['xyz', 'abc', 'python']
  • 就地反转,直接改变原数组
  • 无参数
  • 对应的复制版本:toReversed() 方法,用法一致,但返回新数组,原数组不变

splice() 指定位置添加或删除元素

js
let arr = ['a', 'b', 'c', 'd', 'e', 'f']

// 删除下标 4 以及之后的所有元素
arr.splice(4)               // ['e', 'f']
arr                         // ['a', 'b', 'c', 'd']

// 删除下标 2 的元素
arr.splice(2, 1)            // ['c']
arr                         // ['a', 'b', 'd']

// 在下标 1 处插入 1,2,3 三个元素
arr.splice(1, 0, 1, 2, 3)   // []
arr                         // ['a', 1, 2, 3, 'b', 'd']

// 在下标 0 处删除两个元素,然后接着插入 x,y 两个元素
arr.splice(0, 2, 'x', 'y')  // ['a', 1]
arr                         // ['x', 'y', 2, 3, 'b', 'd']
  • 返回值为删除的元素组成的数组,未删除则为空数组
  • 会直接改变原数组
  • 也有对应不改变原数组的方法:toSpliced()

toString() 转为字符串

js
let arr = ['python', 'abc', 'xyz']
arr.toString()              // 'python,abc,xyz'
  • 内部是调用了 join() 方法,使用英文逗号分隔
  • 如果 join() 方法不可用或者不是函数,则会使用 Object.prototype.toString 来代替,并返回 [object Array]

Array.isArray() 判断是否是数组

js
Array.isArray([1, 2, 3])    // true
Array.isArray('abc')        // false

遍历

forEach 方法

js
let arr = ['a', 'b', 'c']

arr.forEach(function (item) {
  console.log(item)         // a b c
})

for 语句

js
let arr = ['a', 'b', 'c']

for (let i=0; i<arr.length; i++) {
  console.log(i, arr[i])    // 0 a 1 b 2 c
}

for...of 语句

推荐

js
let arr = ['a', 'b', 'c']

for (let v of arr) {
  console.log(v)            // a b c
}