js 数组的常用属性与方法

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

属性

length 长度

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

方法

at() 访问元素

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() 合并多个数组

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() 所有元素为真则真

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

// 判断所有元素长度是否大于等于 3；下述返回 true
arr.every(function(element, index, array) {
  return element.length >= 3
})

• 返回值为布尔值（true/false）
• 每个元素均调用一次测试函数，测试函数返回 true 或 false
• 只要有一个元素返回 false 则立即停止遍历，同时 every() 方法立即返回 false
• 所有元素测试返回 true，every() 方法才会返回 true
• 对于空数组，它只返回 true

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

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

// 判断是否有元素长度大于等于 5；下述返回 true
arr.every(function(element, index, array) {
  return element.length >= 5
})

• 与 every() 方法类似，不同点：
  • 只要有一个返回 true 则立即停止遍历，同时方法立即返回 true
  • 所有元素测试返回 false 时，方法才返回 false
  • 对于空数组，它只返回 false

forEach() 遍历并执行函数

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() 中使用 break ，return 等循环控制语句
• 使用 this 时，不能使用箭头函数表达式

includes() 判断是否包含

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

• 与字符串的 includes() 方法一样

indexOf() 查找元素

let arr = ['python', 'abc', 'xyz']
arr.indexOf('abc')          // 1
arr.indexOf('abcd')         // -1
arr.indexOf('abc', 3)       // -1

• 与字符串的 indexOf() 方法一样
• 未找到返回 -1；找到返回索引下标

join() 拼接成字符串

let arr = ['python', 'abc', 'xyz']
arr.join('.')               // 'python.abc.xyz'
arr.join('00')              // 'python00abc00xyz'

• 默认以英文逗号拼接

filter() 过滤元素

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

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

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

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

let arr = [1, 2, 3]
arr.reduce((a, b) => a + b) // 6

• 回调函数的返回值会作为下一次此函数的第一个参数
• 最后一次调用时，回调函数的返回值就是 reduce() 的返回值

pop() 弹出最后一个元素

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

• 会修改原数组，删除并返回数组最后一个元素
• 如果数组为空，则返回 undefined

shift() 删除第一个元素

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

• 会修改原数组，删除并返回数组第一个元素
• 如果数组为空，则返回 undefined

push() 追加元素

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() 在开头添加元素

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() 切片

let arr = ['python', 'abc', 'xyz']
arr.slice(0, 2)             // ['python', 'abc']
arr.slice(-1)               // ['xyz']

• 与字符串的 slice() 方法几乎一样
• 左闭右开区间
• 索引下标可以是负数，从 -1 开始

sort() 就地排序

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() 就地反转、逆序

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

• 就地反转，直接改变原数组
• 无参数
• 对应的复制版本：toReversed() 方法，用法一致，但返回新数组，原数组不变

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

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() 转为字符串

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

• 内部是调用了 join() 方法，使用英文逗号分隔
• 如果 join() 方法不可用或者不是函数，则会使用 Object.prototype.toString 来代替，并返回 [object Array]

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

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

遍历

forEach 方法

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

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

for 语句

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 语句

推荐

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

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