JavaScript 数组

定义

数组（Array）是一种可以按顺序保存数据的数据类型，每个数组是Array的实例对象，所以能直接调用其方法

创建数组有三种方法：构造函数、Array静态方法、字面量

// 字面量
const arr = [1, 2, 3, 4, 5]

// 构造函数
const arr = new Array (1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]
const arr = new Array (5) // 长度为5的空数组

// Array 静态方法
const arr = Array.of(1, 2, 3) // [1, 2, 3]

多维数组定义

// 使用 fill + map，实现多维数组初始化
const arr = new Array(6).fill([]).map(() => [])
// 字面量定义多维数组
const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [[10, 11, 12], 13, 14]
]
// 多维数组取值
const subarray = arr[3] // [[10, 11, 12], 13, 14]
const nestedSubarray = arr[3][0] // [10, 11, 12]
const element = arr[3][0][1] // 11

数组遍历

JavaScript 遍历数组的方法有很多，以下为常用的方法：

• for循环

const array = [1, 2, 3, 4, 5]
for (let i = 0; i < array.length; i++) {
  console.log(array[i])
}

• for...in循环

const array = [1, 2, 3, 4, 5]
for (let key in array) {
  console.log(array[key])
}

• for...of循环

const array = [1, 2, 3, 4, 5]
for (let item of array) {
  console.log(item)
}

• forEach()

const array = [1, 2, 3, 4, 5]
array.forEach(function(item) {
  console.log(item)
})

六大核心

• push(ele1, ele2, ...)：将一个或多个元素添加到数组的末尾，返回该数组的新长度（修改原数组）

• unshift(ele1, ele2, ...)：将一个或多个元素添加到数组的开头，返回该数组的新长度（修改原数组）

• pop()：从数组中删除最后一个元素，返回删除的元素（修改原数组）

• shift()：从数组中删除第一个元素，返回删除的元素（修改原数组）

• splice()：删除指定元素，也可以添加指定元素（修改原数组）

// arr.splice(起始位置, 删除几个元素)
arr.splice(start, deleteCount)

// arr.splice(起始位置, 删除几个元素, 替换删除的元素)
arr.splice(start, deleteCount, item1, item2)

• sort()：对原数组进行排序，改变原数组

const arr = [88, 78, 100, 34, 99]
// 不写参数, 会把数组元素当做字符串来排, 按ASCII码进行排序
arr.sort() // [100, 34, 78, 88, 99]

// 升序排序
arr.sort(function (a, b) {
  return a - b
})
console.log(arr)  // [34, 78, 88, 99, 100]

// 降序排序
arr.sort(function (a, b) {
  return b - a
})
console.log(arr)  // [100, 99, 88, 78, 34]

静态方法

• Array.of()：创建数组

const arr = Array.of(1, 2, 3) // [1, 2, 3]

• Array.from()：类数组转换为数组，类数组指包含 length 属性或可迭代的对象

let str = 'hello'
Array.from(str) // [ 'h', 'e', 'l', 'l', 'o' ]

const arr = {
  0: 'hello',
  '1': 'world',
  length: 2
}
Array.from(arr) // [ 'hello', 'world' ]

• Array.isArray()：检测变量是否为数组类型

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

实例方法

• map()：数组重新映射，返回渲染后的新数组
• filter：数组过滤，返回过滤后的新数组
• reduce：数组元素迭代变化（可累加、可保留上一层遍历的结果），自定义返回值
• slice：数组截取，取值可为负数，返回截取后的新数组
• concat：数组合并 (连接)，返回新数组

迭代器方法

• keys()：通过迭代对象获取索引，返回迭代器对象

const array = [1, 2, 3, 4, 5]
for (let key of array.keys()) {
  console.log(array[key])
}

• values()：通过迭代对象获取值，返回迭代器对象

const array = [1, 2, 3, 4, 5]
for (let value of array.values()) {
  console.log(value)
}

• entries()：返回数组所有键值对，返回迭代器对象

const array = [1, 2, 3, 4, 5]
for (let [index, item] of array.entries()) {
  console.log(item)
}

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

• 赋值运算符左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

• 变量的顺序对应数组单元值的位置，依次进行赋值操作

let [first, second] = ['hello', 'world']
console.log(first, second) // 'hello' 'world'

// 可以使用逗号分隔符，来获取任意一个想要的值
const [a, b, , , c] = [1, 2, 3, 4, 5, 6]
console.log(a, b, c) // 1 2 5

• 使用展开运算符 (...) 解构

const [a, b, ...arr] = [1, 2, 3, 4, 5, 7]
console.log(a, b) // 1 2
console.log(arr) // [3, 4, 5, 7]

//省略前面两参数
const [, , ...arr] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr) // [3, 4, 5, 6, 7, 8, 9, 10]

• 可以利用这一特性来交换变量

let a = 5, b = 8;
[a, b] = [b, a];

JS中两个特殊情况需要加分号：

• 小括号开头

;(function(){})()
;(function(){})()

• 中括号开头

let a = 5, b = 8; // 此处必须加分号
[a, b] = [b, a]

分号加到上一行的末尾或者本行的开头均可