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

简介: 读《学习JavaScript数据结构与算法》- 第3章 数组,本节将为各位小伙伴分享数组的相关知识:概念、创建方式、常见方法以及ES6数组的新功能。

数组


数组是最简单的内存数据结构,用于存储一系列同一种数据类型的值。


注:虽然数组支持存储不同类型的值,但建议遵守最佳实践。


一、数组基础


创建和初始化数组


  1. new Array()


// 空数组
let heros = new Array()
// 指定长度的数组 - 默认每个索引位置的值为undefined
heros = new Array(7)
// 直接将数组元素以参数的形式传入数组构造器
heros = new Array('钟馗', '张良', '虞姬', '亚瑟', '荆轲')


  1. 字面量语法:[]


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)


二、数组元素操作


添加元素


数组尾部添加元素


  1. 将值赋值在数组的最后一个空位上的元素即可


let heros = ['猪八戒', '嫦娥', '孙策']
heros[heros.length] = ['苏烈']


  1. 使用push方法


heros.push('黄忠')
console.log(heros) // [ '猪八戒', '嫦娥', '孙策', '黄忠' ]


数组开头插入元素


  1. 自定义实现数组开头插入元素的方法


实现逻辑思考:在数组的开头插入一个元素,需要空出数组第一个元素的位置,将所有的元素都向右移动一位


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) // [ '周瑜', '猪八戒', '嫦娥', '孙策', '黄忠' ]


  1. 使用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


  1. 使用for循环倒序拼接


let str = 'abcdef'
let newStr = ''
for (let i = str.length - 1; i >= 0; i--) {
  newStr += str[i]
}
console.log(newStr) // fedcba


  1. 借助数组函数reversejoin与字符串函数split


let str = 'abcdef'
let newStr = str.split('').reverse().join('')
console.log(newStr) // fedcba


相关文章
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
7月前
|
算法 数据可视化 开发者
为什么要学习数据结构与算法
今天,我向大家介绍一门非常重要的课程——《数据结构与算法》。这门课不仅是计算机学科的核心,更是每一位开发者从“小白”迈向“高手”的必经之路。
为什么要学习数据结构与算法
|
5月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
188 0
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
存储 监控 算法
关于员工上网监控系统中 PHP 关联数组算法的学术解析
在当代企业管理中,员工上网监控系统是维护信息安全和提升工作效率的关键工具。PHP 中的关联数组凭借其灵活的键值对存储方式,在记录员工网络活动、管理访问规则及分析上网行为等方面发挥重要作用。通过关联数组,系统能高效记录每位员工的上网历史,设定网站访问权限,并统计不同类型的网站访问频率,帮助企业洞察员工上网模式,发现潜在问题并采取相应管理措施,从而保障信息安全和提高工作效率。
105 7
|
8月前
|
存储 人工智能 算法
C 408—《数据结构》算法题基础篇—数组(通俗易懂)
408考研——《数据结构》算法题基础篇之数组。(408算法题的入门)
335 23
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
存储 算法 安全
2024重生之回溯数据结构与算法系列学习之串(12)【无论是王道考研人还是IKUN都能包会的;不然别给我家鸽鸽丟脸好嘛?】
数据结构与算法系列学习之串的定义和基本操作、串的储存结构、基本操作的实现、朴素模式匹配算法、KMP算法等代码举例及图解说明;【含常见的报错问题及其对应的解决方法】你个小黑子;这都学不会;能不能不要给我家鸽鸽丢脸啊~除了会黑我家鸽鸽还会干嘛?!!!
2024重生之回溯数据结构与算法系列学习之串(12)【无论是王道考研人还是IKUN都能包会的;不然别给我家鸽鸽丟脸好嘛?】

热门文章

最新文章