定场诗

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

此处应该有掌声...

前言

读《学习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

后记

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

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

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

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

  1. 重读《学习JavaScript数据结构与算法-第三版》- 第4章 栈

    定场诗 金山竹影几千秋,云索高飞水自流: 万里长江飘玉带,一轮银月滚金球. 远自湖北三千里,近到江南十六州: 美景一时观不透,天缘有分画中游. 前言 本章是重读<学习JavaScript数据结构 ...

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

    定场诗 马瘦毛长蹄子肥,儿子偷爹不算贼,瞎大爷娶个瞎大奶奶,老两口过了多半辈,谁也没看见谁! 前言 本章为重读<学习JavaScript数据结构与算法-第三版>的系列文章,主要讲述队列数据 ...

  3. 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    定场诗 八月中秋白露,路上行人凄凉: 小桥流水桂花香,日夜千思万想. 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广. 前言 洛伊安妮·格罗纳女士所著的<学习JavaScript数据 ...

  4. 重读《学习JavaScript数据结构与算法-第三版》- 第6章 链表(一)

    定场诗 伤情最是晚凉天,憔悴厮人不堪言: 邀酒摧肠三杯醉.寻香惊梦五更寒. 钗头凤斜卿有泪,荼蘼花了我无缘: 小楼寂寞新雨月.也难如钩也难圆. 前言 本章为重读<学习JavaScript数据结构 ...

  5. 学习JavaScript数据结构与算法 (二)

    学习JavaScript数据结构与算法 的笔记 包含第四章队列, 第五章链表 本人所有文章首发在博客园: http://www.cnblogs.com/zhangrunhao/ 04队列 实现基本队列 ...

  6. 学习JavaScript数据结构与算法 (一)

    学习JavaScript数据结构与算法 的笔记, 包含一二三章 01基础 循环 斐波那契数列 var fibonaci = [1,1] for (var i = 2; i< 20;i++) { ...

  7. 学习JavaScript数据结构与算法---前端进阶系列

    学习建议 1.视频学习---认知 建议:在中国慕课上找"数据结构"相关的视频教程.中国大学MOOC 推荐清华大学.北京大学.浙江大学的教程,可先试看,然后根据自身的情况选择视频进行 ...

  8. 学习Javascript数据结构与算法(第2版)笔记(1)

    第 1 章 JavaScript简介 使用 Node.js 搭建 Web 服务器 npm install http-server -g http-server JavaScript 的类型有数字.字符 ...

  9. 学习JavaScript数据结构与算法 2/15

    第一章 JavaScript简介 js不同于C/C++,C#,JAVA,不是强类型语言. 通常,代码质量可以用全局变量和函数的数量来考量(数量越多越糟).因此,尽可能避免使用全局变量. JS数据类型 ...

随机推荐

  1. kuangbin专题 专题一 简单搜索 迷宫问题 POJ - 3984

    题目链接:https://vjudge.net/problem/POJ-3984 这个题目,emm,上代码,看的估计应该是刚开始接触搜索的,我带点注释,你能慢慢理解. #include <ios ...

  2. PLT与GOT

    0x01  什么是PLT和GOT 名称: PLT : 程序链接表(PLT,Procedure Link Table) GOT : 重局偏移表(GOT, Global Offset Table) 缘由: ...

  3. PostgreSQL 窗口函数 ( Window Functions ) 如何使用?

    一.为什么要有窗口函数 我们直接用例子来说明,这里有一张学生考试成绩表testScore: 现在有个需求,需要查询的时候多出一列subject_avg_score,为此科目所有人的平均成绩,好跟每个人 ...

  4. 树链剖分 [JLOI2014]松鼠的新家

    [JLOI2014]松鼠的新家 时间限制: 1 Sec  内存限制: 128 MB 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达, ...

  5. android_sdcard读写(一)

    现在的android手机其实就是一个小小的掌上电脑,平时电脑有的硬件它估计也有了.这次本人研究下了其中充当手机硬盘的角色,就是sdcard.这是一个保存应用程序的好地方. 老规矩,上代码,学习代码才是 ...

  6. linux应用程序设计--GCC程序编译

    GCC程序编译 linux系统下的GCC(GNU C Compiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作之一.GCC可以在多种硬件平台上编译出可执行程序,其执行效率与一 ...

  7. 无法在<fastCGI>应用程序配置中找到<handler> scriptProcessor

    在打开php文件的时候发现iis7.5报错了 每次在切换php版本的时候不知道为什么会出现这个错误,有的时候就又不会报错直接可以正常使用,然而php版本确定已经下载好,才可能的打开这个页面,那么就是i ...

  8. Hamcrest的简单应用

    import org.junit.Before; import org.junit.Ignore; import org.junit.Test; import java.util.ArrayList; ...

  9. 文件传输——TCP/IP协议介绍总结

    一.链路层 数据链路层的工作特性: 1.为IP模块发送和接收IP数据报2.为ARP模块发送ARP请求和接收ARP应答(ARP:地址解析协议,将IP地址转换成MAC地址)3.为RARP发送RARP请求和 ...

  10. Eclipse中Cannot nest src folder解决方法

    错误示例: : Java Model Status [Cannot nest output folder 'xxx/bin/main' inside output folder 'xxx/bin'] ...