资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组（一）

重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组（一）

iKcamp / 1322人阅读

摘要：此处应该有掌声前言读学习数据结构与算法第章数组，本节将为各位小伙伴分享数组的相关知识概念创建方式常见方法以及数组的新功能。数组数组是最简单的内存数据结构，用于存储一系列同一种数据类型的值。

定场诗 
大将生来胆气豪，腰横秋水雁翎刀。
风吹鼍鼓山河动，电闪旌旗日月高。
天上麒麟原有种，穴中蝼蚁岂能逃。
太平待诏归来日，朕与先生解战袍。
此处应该有掌声...
前言

读《学习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 ...
// 求斐波那契数列前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

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！

混合云 云服务器 javascript高级程序设计第三版 汇编语言第三版 人工智能第三版 webrtc权威指南第三版

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106743.html

相关文章

  • 重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组（二）

    摘要：定场诗守法朝朝忧闷，强梁夜夜欢歌损人利己骑马骡，正值公平挨饿修桥补路瞎眼，杀人放火儿多我到西天问我佛，佛说我也没辙前言读学习数据结构与算法第章数组，本小节将继续为各位小伙伴分享数组的相关知识数组的新功能。 定场诗 守法朝朝忧闷，强梁夜夜欢歌； 损人利己骑马骡，正值公平挨饿； 修桥补路瞎眼，杀人放火儿多； 我到西天问我佛，佛说：我也没辙！ 前言 读《学习JavaScript数据结构与算法...

    William_Sang 评论0 收藏0

  • 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScr

    摘要：第二种接口的概念和面向对象编程相关接口视为一份合约，在合约里可以定义这份合约的类或接口的行为接口告诉类，它需要实现一个叫做的方法，并且该方法接收一个参数。 定场诗 八月中秋白露，路上行人凄凉； 小桥流水桂花香，日夜千思万想。 心中不得宁静，清早览罢文章， 十年寒苦在书房，方显才高志广。 前言 洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份...

    TZLLOG 评论0 收藏0

  • 重读《学习JavaScript数据结构与算法-第三版》- 第6章 链表（一）

    摘要：前言本章为重读学习数据结构与算法的系列文章，该章节主要讲述数据结构链表，以及实现链表的过程和原理。链表，是存储有序的元素集合。链表中的元素在内存中并不是连续放置的，每个元素由一个存储自身的元素节点和一个指向下一个元素的引用指针或链接组成。 定场诗 伤情最是晚凉天，憔悴厮人不堪言； 邀酒摧肠三杯醉.寻香惊梦五更寒。 钗头凤斜卿有泪，荼蘼花了我无缘； 小楼寂寞新雨月.也难如钩也难圆。 前言...

    lmxdawn 评论0 收藏0

  • 重读《学习JavaScript数据结构与算法-第三版》- 第5章 队列

    摘要：定场诗马瘦毛长蹄子肥，儿子偷爹不算贼，瞎大爷娶个瞎大奶奶，老两口过了多半辈，谁也没看见谁前言本章为重读学习数据结构与算法第三版的系列文章，主要讲述队列数据结构双端队列数据结构以及队列相关应用。 定场诗 马瘦毛长蹄子肥，儿子偷爹不算贼，瞎大爷娶个瞎大奶奶，老两口过了多半辈，谁也没看见谁！ 前言 本章为重读《学习JavaScript数据结构与算法-第三版》的系列文章，主要讲述队列数据结构、...

    charles_paul 评论0 收藏0

  • JavaScript书籍测评

    摘要：前言今天和大家一起聊聊的推荐书籍，每一本都是精选，做前端开发的朋友们如果没读过，可以尝试一下。如果怕麻烦，也可以关注晓舟报告，发送获取书籍，四个字，就可以得到电子书的提取码。 前言 今天和大家一起聊聊JavaScript的推荐书籍，每一本都是精选，做前端开发的朋友们如果没读过，可以尝试一下。下面给大家简单介绍了书的内容，还有读书的方法，希望可以帮大家提升读书效率。 一、《JavaScr...

    X1nFLY 评论0 收藏0

发表评论

登陆后可评论

0条评论

iKcamp

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<