重读《学习JavaScript数据结构与算法-第三版》

2024-04-10 13:08
文章标签 java 算法 学习 数据结构 script 第三版 重读

本文主要是介绍重读《学习JavaScript数据结构与算法-第三版》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言
读《学习JavaScript数据结构与算法》- 第3章 数组，本小节将继续为各位小伙伴分享数组的相关知识：ES6数组的新功能。

一、ES6数组新功能
ES5和ES6数组新方法
方法 描述
@@iterator 返回一个包含数组键值对的迭代器对象，可以通过同步调用得到数组元素的键值对
copyWithin 复制数组中一系列元素到同一数组指定的起始位置
entries 返回包含数组所有键值对的@@iterator
includes 如果数组中存在某个元素则返回true，否则返回false
find 根据回调函数给定的条件从数组中查找元素，如果找到返回该元素
findIndex 根据回调函数给定的条件从数组中查找元素，如果找到则返回该元素在数组中的索引
fill 用静态值填充数组
from 根据已有数组创建一个新数组
keys 返回包含数组所有索引的@@iterator
of 根据传入的参数创建新数组
value 返回包含数组所有值得@@iterator
除了以上新方法外，增加了for…of循环迭代数组以及从数组实例得到迭代器对象

for…of

迭代数组

let roles = [‘宋江’, ‘吴用’, ‘卢俊义’]
for (let v of roles) {
console.log(v)
}
@@iterator

需要通过Symbol.iterator来访问

let iterator = rolesSymbol.iterator
// .next()读取一次，依次迭代即可; 当迭代结束时，iterator.next().value返回undefined
console.log(iterator.next().value)

// 迭代
for (let v of iterator) {
console.log(v)
}
entries

返回包含键值对的@@iterator

let rolesEntries = roles.entries()
console.log(rolesEntries.next().value) // [ 0, ‘宋江’ ]

for (v of rolesEntries) {
console.log(v)
}
keys

返回包含数组索引的@@iterator

let rolesKeys = roles.keys()
console.log(rolesKeys)

for (v of rolesKeys) {
console.log(v)
}
values

返回包含数组值的@@iterator

let rolesValues = roles.values()
console.log(rolesValues)

for (v of rolesValues) {
console.log(v)
}
Array.from

根据已有数组创建新数组

let newRoles = Array.from(roles)
console.log(newRoles) // [‘宋江’, ‘吴用’, ‘卢俊义’]
Array.of

根据传入的参数创建一个新数组

let roles = Array.of(‘宋江’, ‘李顺’, ‘阮小七’)
console.log(roles) // [ ‘宋江’, ‘李顺’, ‘阮小七’ ]
Array.fill

使用静态值填充

let numbers = new Array(6)
numbers = Array.fill(1)
console.log(numbers) // [ 1, 1, 1, 1, 1, 1 ]
copyWithin

复制数组的一系列元素到同一数组指定的起始位置

let numbers = [1, 2, 3, 4, 5, 6]
// 将索引3到索引5位置之间的数据，复制到索引1位置
numbers.copyWithin(1, 3, 5)
console.log(numbers) // [ 1, 4, 5, 4, 5, 6 ]
数组排序
rerverse

反转数组元素

let numbers = [1, 2, 3]
numbers.reverse()
console.log(numbers) // [ 3, 2, 1 ]
sort

按照字母顺序对数组进行排序，支持传入指定排序算法的函数作为参数

let arr = [‘a’, ‘b’, ‘d’, ‘c’, ‘f’, ‘e’]
arr.sort()
console.log(arr) // [ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’ ]
那么问题来了！下面的代码console.log()输出什么?

let numbers = [1, 2, 3, 10, 11, 12, 13]
numbers.sort()
console.log(numbers) // ??? 思考10秒钟…
答案：[ 1, 10, 11, 12, 13, 2, 3 ] 手动疑问.gif

解析：sort()方法在进行数组元素排序时，把元素默认成字符串进行相互比较。

那如何解决实际问题，得到我们想要的结果呢？

let numbers = [1, 2, 3, 10, 11, 12, 13]
numbers.sort((a, b) => a - b)
console.log(numbers) // [ 1, 2, 3, 10, 11, 12, 13 ]
思考升级：字符串比较-大小写比较

let users = [‘Ana’, ‘ana’, ‘John’, ‘john’]
users.sort()
console.log(users) // ???
答案：[ ‘Ana’, ‘John’, ‘ana’, ‘john’ ] 手动疑问.gif

解析：JS中做字符串比较时，根据字符对应的ASCII码值来进行比较。A、J、a、j的ASCII码对应的是：65、74、97、106

解决问题

let users = [‘Ana’, ‘ana’, ‘John’, ‘john’]
users.sort((a, b) => {
if (a.toLocaleLowerCase() > b.toLocaleLowerCase()) {
return 1
}
if (a.toLocaleLowerCase() < b.toLocaleLowerCase()) {
return -1
}
return 0
})
console.log(users) // [ ‘Ana’, ‘ana’, ‘John’, ‘john’ ]
如果想要实现小写字母排序在前，可使用localCompare方法
users.sort((a, b) => a.localeCompare(b))

实际业务场景：一系列数据排序：如按年龄、级别等

let users = [
{
name: ‘王二狗’,
age: 20
},
{
name: ‘张三炮’,
age: 30
},
{
name: ‘李四’,
age: 15
}
]
users.sort((a, b) => a.age > b.age)
console.log(users) // [ { name: ‘李四’, age: 15 }, { name: ‘王二狗’, age: 20 }, { name: ‘张三炮’, age: 30 } ]
数组搜索
ES5中为我们提供了indexOf()和lastIndexOf()方法查找元素，但是该二者方法只能查询字符串数据，如查询对象数组中的某个元素就力有不逮了。

业务场景： 购物车添加商品操作

当我们向购物车中添加一件商品时，要考虑该商品是否已经在购物车中存在了。

已存在，则购买数量+1；否则为新增购物车操作。

原先处理方式：遍历购物车数组myCart，判断待添加购物车商品tmpGoods的id和已有商品的id进行比对，若相同，则获取当前元素索引，执行操作

拥抱ES6的新变化吧！- findIndex

// 已有购物车商品信息
let myCart = [
{
id: 1001,
name: ‘xxx-范冰冰版’,
num: 1
},
{
id: 1002,
name: ‘xxx-志玲姐姐版’,
num: 2
},
{
id: 1003,
name: ‘xxx-小岳岳版’,
num: 1
}
]

// 待加入购物车的商品
let tmpGoods = {
id: 1003,
name: ‘xxx-小岳岳版’,
num: 1
}

// 检测该商品是否已经存在于购物车
let index = myCart.findIndex(item => item.id === tmpGoods.id)
console.log(index)
if (index !== -1) {
myCart[index].num += tmpGoods.num
} else {
myCart.push(tmpGoods)
}
console.log(myCart)
findIndex 支持传入指定的函数作为筛选条件，返回第一个匹配元素的索引位置，如果不存在则返回-1

find 支持传入指定的函数作为条件，返回第一个匹配元素的值

ES7 - includes

includes 方法会根据条件查询数组中是否有匹配元素，如果存在则返回true；否则返回false

let roles = [‘诸葛亮’, ‘荆轲’, ‘虞姬’, ‘亚瑟’]
console.log(roles.includes(‘荆轲’)) // true
console.log(roles.includes(‘哪吒’)) // false
输出数组为字符串
toString()和join()方法

toString

将数组所有元素输出为字符串

let numbers = [1, 2, 3, 4]
console.log(numbers.toString()) // 1,2,3,4
join

将数组元素使用指定的字符进行拼接，默认使用,

let numbers = [1, 2, 3, 4]
console.log(numbers.join(’-’)) // 1-2-3-4

东莞网站建设www.zg886.cn

这篇关于重读《学习JavaScript数据结构与算法-第三版》的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/891146。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
Java中Redisson 的原理深度解析

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，
阅读更多...
Java HashMap的底层实现原理深度解析

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述：HashMap的宏观结构二、核心数据结构解析1. 数组（桶数组）2. 链表节点（Node
阅读更多...
Java AOP面向切面编程的概念和实现方式

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点（如日志、事务）与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么？二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关
阅读更多...
详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
Java中的.close()举例详解

Java中的.close()举例详解

《Java中的.close()举例详解》.close()方法只适用于通过window.open()打开的弹出窗口,对于浏览器的主窗口,如果没有得到用户允许是不能关闭的,：本文主要介绍Java中的.... 目录当你遇到以下三种情况时，一定要记得使用 .close()：用法作用举例如何判断代码中的 input
阅读更多...
深入理解Mysql OnlineDDL的算法

深入理解Mysql OnlineDDL的算法

《深入理解MysqlOnlineDDL的算法》本文主要介绍了讲解MysqlOnlineDDL的算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小... 目录一、Online DDL 是什么？二、Online DDL 的三种主要算法2.1COPY（复制法）
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2