定场诗 大将生来胆气豪,腰横秋水雁翎刀。 风吹鼍鼓山河动,电闪旌旗日月高。 天上麒麟原有种,穴中蝼蚁岂能逃。 太平待诏归来日,朕与先生解战袍。
此处应该有掌声...
前言读《学习JavaScript数据结构与算法》- 第3章 数组,本节将为各位小伙伴分享数组的相关知识:概念、创建方式、常见方法以及ES6数组的新功能。
数组数组是最简单的内存数据结构,用于存储一系列同一种数据类型的值。
注:虽然数组支持存储不同类型的值,但建议遵守最佳实践。
一、数组基础 创建和初始化数组
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 ...
数组尾部添加元素
将值赋值在数组的最后一个空位上的元素即可
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类似,将数组作为字符串返回
数组合并