创建

<script>javascript">// 方式 1let a = []a[0] = '1'a[1] = '2'a[2] = '3'console.log(a)// 方式 2let b = new Array()b[0] = '1'b[1] = '2'b[2] = '3'console.log(b)// 方式 3let c = ['1', '2', '3']console.log(c)// 方式 4let d = new Array('1', '2', '3')console.log(d)// 方式 5 构造参数为一个数字时, 代表申请数组长度let e = new Array(3)console.log(e)
</script>

访问

<script>javascript">let d = ['1', '2', '3']console.log(d[0])console.log(d[1])console.log(d[2])
</script>

常用属性和相关方法

1. length 长度属性

返回数组长度

<script>javascript">let arr = [1, 2, 3, 4, 5];console.log(arr.length) // 结果: 5
</script>

2. push() 新增元素 - 末尾添加

将一个或多个元素添加到数组的末尾, 并返回添加后的长度

<script>javascript">let arr = [1, 2, 3, 4, 5];console.log(arr.push(6, 7)) // 结果: 7console.log(arr) // 结果: [1, 2, 3, 4, 5, 6, 7]
</script>

3. unshift() 新增元素 - 开头添加

将一个或多个元素添加到数组的开头, 原元素自动后移, 并返回添加后的长度

<script>javascript">let arr = [1, 2, 3, 4, 5];console.log(arr.unshift(6, 7)) // 结果: 7console.log(arr) // 结果: [6, 7, 1, 2, 3, 4, 5]
</script>

4. pop() 移除元素 - 末尾删除

删除数组中最后一个元素, 并返回被删除的元素值

<script>javascript">let arr = ['a', 'b', 'c', 'd', 'e'];console.log(arr.pop()) // 结果: econsole.log(arr) // 结果: ['a', 'b', 'c', 'd']
</script>

5. shift() 移除元素 - 开头删除

删除数组中第一个元素, 并返回被删除的元素值

<script>javascript">let arr = ['a', 'b', 'c', 'd', 'e'];console.log(arr.shift()) // 结果: aconsole.log(arr) // 结果: ['b', 'c', 'd', 'e']
</script>

6. concat() 复制数组后新增

复制原来数组, 并在新数组中添加元素，不会影响原数组

<script>javascript">let arr = ['a', 'b', 'c', 'd', 'e'];let arr2 = arr.concat('f', 'g')console.log(arr) // 结果: ['a', 'b', 'c', 'd', 'e']console.log(arr2) // 结果: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
</script>

7. slice() 复制数组

根据起始位置和结束位置复制一份数组, 不会影响原数组

<script>javascript">let arr = ['a', 'b', 'c', 'd', 'e'];let arr2 = arr.slice(1)let arr3 = arr.slice(1, 4)console.log(arr) // 结果: ['a', 'b', 'c', 'd', 'e']console.log(arr2) // 结果: ['b', 'c', 'd', 'e']console.log(arr3) // 结果: ['b', 'c', 'd']// 经典案例: 伪数组转真数组function func() {console.log(Array.isArray(arguments)) // falseconsole.log(Array.isArray([].slice.call(arguments))) // true}func()
</script>

8. splice() 增删改

splice( 索引, 要删除的个数, 新元素1, 新元素2…)

很强大的方法, 可以对数组进行增删改, splice() 方法的返回值是被删除的数组元素。

<script>javascript">// 增let arr = ['a', 'b', 'c', 'd', 'e'];// 从索引 0 开始, 不删除, 插入 f 和 gconsole.log(arr.splice(1, 0, 'f', 'g')) // 结果：被删除元素为 []console.log(arr) // 结果：["a", "f", "g", "b", "c", "d", "e"]// 删let arr2 = ['a', 'b', 'c', 'd', 'e'];// 从索引 1 开始, 删除两个console.log(arr2.splice(1, 2)) // 结果：被删除元素为 ["b", "c"]console.log(arr2) // 结果：["a", "d", "e"]// 改let arr3 = ['a', 'b', 'c', 'd', 'e'];// 从索引 1 开始, 删除两个, 然后插入 f 和 gconsole.log(arr3.splice(1, 2, 'f', 'g')) // 结果：被删除元素为 ["b", "c"]console.log(arr3) // 结果： ["a", "f", "g", "d", "e"]
</script>

9. toString() 转字符串

调用数组内各个元素的 toString() 方法, 并把每个元素的 toString() 结果用逗号相连

<script>javascript">let arr = ['a', 'b', 'c', 'd', 'e'];console.log(arr.toString()) // 结果：a,b,c,d,e// 重写对象的 toString()let arr2 = [{name: 'a',toString: function () {return this.name;}},{name: 'b',toString: function () {return this.name;}},{name: 'c',toString: function () {return this.name;}}]console.log(arr2.toString()) // 结果：a,b,c
</script>

10. join() 转字符串并以指定符号连接

调用数组内各个元素的 toString() 方法, 并把每个元素的 toString() 结果用连接符相连

<script>javascript">let arr = ['a', 'b', 'c', 'd', 'e'];console.log(arr.join('-')) // 结果：a-b-c-d-e// 重写对象的 toString()let arr2 = [{name: 'a',toString: function () {return this.name;}},{name: 'b',toString: function () {return this.name;}},{name: 'c',toString: function () {return this.name;}}]console.log(arr2.join('-')) // 结果：a-b-c
</script>

11. isArray() 判断是否为数组

判断变量是否是数组类型, true: 数组 false: 非数组

<script>javascript">let num = 1;console.log(Array.isArray(num)) // 结果：falselet arr = ['a', 'b', 'c', 'd', 'e'];console.log(Array.isArray(arr)) // 结果：true
</script>

12. forEach() 遍历数组

遍历数组, 回调函数的参数都是可选的, 但是必须保证参数列表顺序

<script>javascript">// 语法:// forEach(function (当前元素, 当前下标, 数组本身) {// })let arr = ['a', 'b', 'c', 'd', 'e'];arr.forEach(function (item, index, array) {console.log('第' + index + '个索引位置的数据是' + item)if (index === arr.length - 1) {console.log('数组对象:' + array)}})
</script>

13. map() 遍历并返回新数组

遍历数组, 每一次遍历都必须有一个返回值(默认返回 undefined), 最后根据每一次的返回值返回一个新的数组

回调函数的参数都是可选的, 但是必须保证参数列表顺序

<script>javascript">// 语法:// map(function (当前元素, 当前下标, 数组本身) {// return item// })let arr = ['a', 'b', 'c', 'd', 'e'];let arr2 = arr.map(function (item, index, array) {return item += '1'})console.log(arr2) // 结果：["a1", "b1", "c1", "d1", "e1"]
</script>

14. filter() 遍历并过滤后返回新数组

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 最后把所有返回 true 的元素, 筛选成一个新的数组

<script>javascript">// 语法:// filter(function (当前元素, 当前下标, 数组本身) {// return true;// })let arr = ['a', 'b', 'c', 'd', 'e'];let arr2 = arr.filter(function (item, index, array) {return item === 'a' || item === 'e'})console.log(arr2) // 结果：["a", "e"]
</script>

15. some() 任意命中

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 只要有一次返回了 true, 那么 some() 的返回值就为 true

<script>javascript">// 语法:// some(function (当前元素, 当前下标, 数组本身) {// return true;// })let arr = ['a', 'b', 'c', 'd', 'e'];console.log(arr.some(function (item, index, array) {return item === 'a'})) // 结果: trueconsole.log(arr.some(function (item, index, array) {return item === 'z'})) // 结果: false
</script>

16. every() 全部命中

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 当所有的返回都为 true, 那么 every() 的返回值就为 true

<script>javascript">// 语法:// every(function (当前元素, 当前下标, 数组本身) {// return true;// })let arr = ['a', 'b', 'c', 'd', 'e'];console.log(arr.every(function (item, index, array) {return item.length > 0})) // 结果: trueconsole.log(arr.every(function (item, index, array) {return !item === 'e'})) // 结果: false
</script>

17. find() 查找

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 当碰见返回 true 的元素时, 停止遍历, 并返回该元素。

和 filter() 不同的是, filter() 会遍历完整个数组, 而 find() 只要碰见一次 true，就会直接停止遍历。

<script>javascript">// 语法:// find(function (当前元素, 当前下标, 数组本身) {// return true;// })let arr = ['a', 'b', 'c', 'd', 'e'];let arr2 = arr.find(function (item, index, array) {return item === 'a'}) // 结果：a// 这个地方如果用 filter() 遍历, 会返回 ['a', 'e'], 但是用 find() 遍历只会返回 'a'// 因为 find() 遍历时, 只要有一次返回 true, 就会停止遍历// 第一次遍历 item === 'a' 这个结果返回 true, 所以遍历直接结束了let arr3 = arr.find(function (item, index, array) {return item === 'a' || item === 'e'})console.log(arr2) // 结果：a
</script>

18. reduce() 归并方法

作用：

遍历数组。 每一次遍历, 都会把上一次遍历的结果，当作参数传入，当是第一次遍历时, 因为没有上一次的结果, 所以需要指定一个初始值, 来代替上一次遍历结果

语法结构：

javascript">reduce(function (prev, item, index, array) {return result
}, init))

参数解释：

• prev: 上一次遍历的结果
• item: 当前元素
• index: 当前索引
• array: 数组
• init: 初始值。 用来代替第一次遍历时, 没有上一次结果的情况。第一次遍历时 init 赋值给 prev
  
  

使用案例：

<script>javascript">// 累计求和let arr = [1, 2, 3, 4, 5]console.log(arr.reduce(function (prev, item, index, array) {return prev + item;}, 0)) // 结果：15// 求最大值console.log(arr.reduce(function (prev, item, index, array) {return Math.max(prev, item)}, 0)) // 结果：5
</script>

案例分析：

(1) 累计求和 - 共遍历五次：
第一次: prev = init = 0, item = 1, index = 0, array = 数组, 返回值 = 0 + 1
第二次: prev = 1, item = 2, index = 1, array = 数组, 返回值 = 1 + 2
第三次: prev = 3, item = 3, index = 2, array = 数组, 返回值 = 3 + 3
第四次: prev = 6, item = 4, index = 3, array = 数组, 返回值 = 6 + 4
第五次: prev = 10, item = 5, index = 4, array = 数组, 返回值 = 10 +

(2) 求最大值 - 共五次遍历
第一次: prev = init = 0, item = 1, index = 0, array = 数组, 返回值 = Math.max(0, 1)
第二次: prev = 1, item = 2, index = 1, array = 数组, 返回值 = Math.max(1, 2)
第三次: prev = 2, item = 3, index = 2, array = 数组, 返回值 = Math.max(2, 3)
第四次: prev = 3, item = 4, index = 3, array = 数组, 返回值 = Math.max(3, 4)
第五次: prev = 4, item = 5, index = 4, array = 数组, 返回值 = Math.max(4, 5)