数组
数组是最简单的内存数据结构，用于存储一系列同一种数据类型的值。
注：虽然数组支持存储不同类型的值，但建议遵守最佳实践。
一、数组基础
创建和初始化数组
- new Array()
// 空数组 let heros = new Array() // 指定长度的数组 - 默认每个索引位置的值为undefined heros = new Array(7) // 直接将数组元素以参数的形式传入数组构造器 heros = new Array('钟馗', '张良', '虞姬', '亚瑟', '荆轲')
- 字面量语法：[]
let heros = ['鲁班', '吕布', '王昭君', '蔡文姬', '孙悟空']
推荐使用[]定义数组
数组索引
- 数组的索引从0开始，依次累加；
- 数组索引的最大值为数组的长度-1;
- 每个数组的值都对应了一个数组的索引。
索引亦可称之为下标或键
数组长度
数组的.length属性可获取元素的长度
let heros = ['鲁班', '吕布', '王昭君', '蔡文姬', '孙悟空'] console.log('数组students的长度为：' + heros.length)
数组取值
使用 数组名[索引]的形式获取数组的值
let heros = ['凯', '兰陵王', '瑶', '云中君', '典韦'] console.log('第一位英雄：' + heros[0]) // 凯
迭代数组
此处我们使用高大上的名词
迭代，拒绝低调的遍历，不要问我为什么！
数组的迭代我们可以选择最简单的循环结构
for (let i = 0; i < heros.length; i++) { console.log(heros[i]) }
常见面试题：斐波那契数列
斐波那契数列概念：第一项为1，第二项为1，从第三项开始，值为前两项之和; 如 1, 1, 2, 3, 5, 8, 13 ...
// 求斐波那契数列前20个数 let fibonacci = [] fibonacci[0] = 1 fibonacci[1] = 1 for (let i = 2; i < 20; i++) { fibonacci[i] = fibonacci[i - 1] + fibonacci[i - 2] } // 输出 console.log(fibonacci)
二、数组元素操作
添加元素
数组尾部添加元素
- 将值赋值在数组的最后一个空位上的元素即可
let heros = ['猪八戒', '嫦娥', '孙策'] heros[heros.length] = ['苏烈']
- 使用push方法
heros.push('黄忠') console.log(heros) // [ '猪八戒', '嫦娥', '孙策', '黄忠' ]
数组开头插入元素
- 自定义实现数组开头插入元素的方法
实现逻辑思考：在数组的开头插入一个元素，需要空出数组第一个元素的位置，将所有的元素都向右移动一位
Array.prototype.insertFirstPosition = function (value) { for (let i = this.length; i >= 0; i--) { this[i] = this[i - 1] } this[0] = value } heros.insertFirstPosition('周瑜') console.log(heros) // [ '周瑜', '猪八戒', '嫦娥', '孙策', '黄忠' ]
- 使用unshift方法
heros.unshift('元歌')
此方法背后的逻辑和insertFirstPosition方法的行为是一样的。
常见面试问题：
思考：如果有一个存储了大量数据的数组，在执行插入操作时，将值插入到指定的位置会发生什么情况？
答：从当前插入值的位置开始，后面所有数组元素都要向右移动一位。
追问：性能会好吗？
答：肯定是不好的！ 如包含1000个元素的数组，在数组索引0位置插入一个元素，需要移动1000个元素，性能肯定不好
追问：如何优化呢？
答：采用JS的链表结构 --- 啥是链表结构呢，请看持续关注公众号文中呦...
删除元素
数组尾部删除元素
heros.pop()
数组开头删除元素
heros.shift()
在任意位置添加或删除元素 -- splice
// array.splice(index[, number][, newValue1][, newValue2...]) // 从指定索引位置开始，执行删除相应数量的元素，并添加执行的元素 let heros = ['周瑜', '猪八戒', '嫦娥', '孙策', '黄忠'] heros.splice(2, 1, '孙悟空') console.log(heros) // [ '周瑜', '猪八戒', '孙悟空', '孙策', '黄忠' ]
二维数组与多维数组
// 二维数组 let heros = [ ['甄姬', '女娲', '安琪拉', '貂蝉'], ['典韦', '亚瑟', '曹操', '夏侯惇'] ] // 二维数组取值 console.log(heros[0][1]) // 女娲 // 多维数组 heros = [ [ ['甄姬', '安琪拉'] ], [ ['操作', '夏侯惇'] ] ] // 多维数组取值 console.log(heros[0][0][1]) // 安琪拉
无论是几维的数组，只要按照索引去取值就好
三、数组常见方法
在JS中，数组是改进过的对象。这意味着创建的每一个数组都有一些可用的方法。
核心方法一览表
| 方法 | 描述 |
| concat | 连接2个或多个数组，返回结果 |
| every | 对数组中的每个元素运行给定函数，如果该函数对每个元素都返回true，则返回true |
| filter | 对数组中的每个元素运行给定函数，返回该函数会返回true的元素组成的数组 |
| forEach | 对数组中的每个元素运行给定函数，这个方法没有返回值 |
| join | 将所有的数组元素连接成一个字符串 |
| indexOf | 返回第一个与给定参数相等的数组元素的索引，没有找到返回-1 |
| lastIndexOf | 返回数组中搜索到的与给定参数相等的元素的索引里最大的值 |
| map | 对数组中的每个元素运行给定函数，返回每次函数调用的结果组成的数组 |
| reverse | 颠倒数组中元素的顺序，反转 |
| reduce | 接收一个函数作为累加器，返回一个最终计算的值 |
| slice | 传入索引值，将数组里对应索引范围内的元素作为新数组返回 |
| some | 对数组中的每个元素运行给定函数，如果任意元素返回true，则返回true |
| sort | 按照字母顺序进行排序，支持传入指定排序方法的函数作为参数 |
| toString | 将数组作为字符串返回 |
| valueOf | 和toString类似，将数组作为字符串返回 |
数组合并
concat方法可以向一个数组传递数组、对象或元素，数组会按照该方法传入的参数顺序连接指定的数组
let hz = '黄忠' let partOfHeros = ['孙悟空', '孙斌', '李白'] let heros = ['钟馗'] let herosList = heros.concat(hz, partOfHeros) console.log(heroList) // [ '钟馗', '黄忠', '孙悟空', '孙斌', '李白' ]
迭代器函数
一定要说
迭代，不要说遍历，不要问我为什么！
every
every会迭代数组中的每个元素，直到返回false
// 判断数组中是否全部是偶数 let arr = [1, 2, 3, 4] let res = arr.every(v => v % 2 === 0) conso.e.log(res) // false
some
some会迭代数组中的每个元素，直到返回true
// 判断数组中是否有偶数 let arr = [1, 2, 3] let res = arr.some(v => v % 2 === 0) console.log(res) // true
forEach
迭代数组每一个元素
let arr = ['张良', '姜子牙', '露娜', '凯']
map
map会迭代数组的每个元素，对每个元素运行给定的方法，返回每次的结果
// 计算数组元素的乘方结果 let arr = [1, 2, 3] let newArr = arr.map(v => v ** 2) console.log(newArr) // [ 1, 4, 9 ]
filter
filter会迭代数组的每个元素，对每个元素运行给定的方法，返回的新数组由返回true的元素组成
// 返回数组中所有的女性英雄 let heros = [ { name: '甄姬', sex: '女' }, { name: '亚瑟', sex: '男' }, { name: '貂蝉', sex: '女' } ] let nvHeros = heros.filter(hero => hero.sex === '女') console.log(nvHeros) // [ { name: '甄姬', sex: '女' }, { name: '貂蝉', sex: '女' } ]
reduce
接收一个函数作为累加器，最后返回一个计算的值
// 计算数组元素的和 let arr = [1, 2, 3, 4, 5, 6] let sum = arr.reduce((previous, current) => previous + current) console.log(sum) // 21
常见面试题-反转字符串
如字符串
abcdef输出为fedcba
- 使用for循环倒序拼接
let str = 'abcdef' let newStr = '' for (let i = str.length - 1; i >= 0; i--) { newStr += str[i] } console.log(newStr) // fedcba
- 借助数组函数
reverse、join与字符串函数split
let str = 'abcdef' let newStr = str.split('').reverse().join('') console.log(newStr) // fedcba
