专栏首页胡哥有话说重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组(一)​

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

定场诗

大将生来胆气豪,腰横秋水雁翎刀。
风吹鼍鼓山河动,电闪旌旗日月高。
天上麒麟原有种,穴中蝼蚁岂能逃。
太平待诏归来日,朕与先生解战袍。

此处应该有掌声...

前言

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

数组

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

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

一、数组基础

创建和初始化数组

  1. new Array() // 空数组 let heros = new Array() // 指定长度的数组 - 默认每个索引位置的值为undefined heros = new Array(7) // 直接将数组元素以参数的形式传入数组构造器 heros = new Array('钟馗', '张良', '虞姬', '亚瑟', '荆轲')
  2. 字面量语法:[] 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] = ['苏烈']
  2. 使用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) // [ '周瑜', '猪八戒', '嫦娥', '孙策', '黄忠' ]
  2. 使用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
  2. 借助数组函数reversejoin与字符串函数split let str = 'abcdef' let newStr = str.split('').reverse().join('') console.log(newStr) // fedcba

本文分享自微信公众号 - 胡哥有话说(hugeyouhuashuo)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 爬虫学习开篇

    在这个大数据时代,尤其是人工浪潮兴起的时代,不论是工程领域还是研究领域,数据已经成为必不可少的一部分,而数据的获取很大程度上依赖于爬虫的爬取,所以爬虫也逐渐变得...

    stormwen
  • Confluence 6 图片文件

    当你对一个页面进行编辑的时候,选择一个图片,将会显示图片属性面板。这个面板允许你设置显示大小,添加边控和特效和链接这个图片到其他页面。

    HoneyMoose
  • rabbitMQ系列高级整合应用Spring AMQP

    在Rabbit基础的API中,声明一个exchange、声明一个绑定、声明一个队列都是通过channel创建出来的。如下图:

    凯哥Java
  • 提升10倍生产力:IDEA远程一键部署SpringBoot到Docker

    IDEA是Java开发利器,springboot是Java生态中最流行的微服务框架,docker是时下最火的容器技术,那么它们结合在一起会产生什么化学反应呢?

    Java团长
  • 聊聊sharding-jdbc的MasterSlaveRouter

    incubator-shardingsphere-4.0.0-RC1/sharding-core/sharding-core-route/src/main/ja...

    codecraft
  • 性能分析之激情的过程无奈的结局

    我也没见过说负载高,cpu使用率不高的。因为load average本来就是cpu队列,cpu使用率不高就出现队列,也不是没可能,要是同步对象争用什么的。也应该...

    高楼Zee
  • js基础-关于call,apply,bind的一切

    函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比...

    OBKoro1
  • 《快学BigData》--Hadoop总结(G)(40)

    Hadoop总结 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 210

    小徐
  • 匹马行天下——没有无缘无故的爱和恨,没有无缘无故的编程

    想这世间,没有无缘无故的爱,也没有无缘无故的恨,一切都有有原因的,我想编程亦是如此,技术时常更新,程序员时常学习,随着时间的推移,程序员发际线的增高,生活无处不...

    泰斗贤若如
  • 使用Flask部署ML模型

    https://github.com/schmidtbri/using-ml-model-abc?source=post_page---------------...

    代码医生工作室

扫码关注云+社区

领取腾讯云代金券