【JS代码优化二】ES6 数组和对象篇
创始人
2024-05-30 02:13:55
0

Vue3 + Vite + VueRouter + Pinia + Axios + Element Plus + 项目实战(持续更新中…)

序:如何让代码看起来更优雅?代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息(状态)、表达相关的情绪(函数),所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的,就是带着大家如何实现更有效、更优雅的编程。笔记涵盖:运算符、流程语句、设计模式、ES6 新增方法等多个方面。

我们都知道 ES6+ 新增了很多新特性,它们使得在很多场景的应用上变得更加健壮(如:let、const关键字的出现),更像一门面向对象语言(如:类,继承这些关键字的出现),处理起数据更加的简洁和方便(如:数组 map、filter、from等方法的出现)等等,一切都是为了让程序变得更有可读性、可维护性。这里我们就来讲一下数组中新增函数的应用场景。

1. Array.from()

这个方法用于将类数组对象(NodeList 节点列表、String 字符串、arguments 参数对象、HTMLCollection 元素列表等具有 length 属性的对象)转为真正的数组。
在这个方法之前,我们都是使用 apply 或 call 方法实现。

1.1 对象

apply 方式

let result = Array.apply(null, { length: 10 }).map((_, index) => {return {id: index,value: index + 1}
})

Array.from 方式

let result = Array.from({length: 99})

在这里插入图片描述

1.2 String 字符串

call 方式

let str = "Hello World"
let result = [].slice.call(str)

Array.from方式

let result = Array.from(str)

在这里插入图片描述

HTMLCollection 元素列表、NodeList 节点列表、Arguments 参数列表这些伪数组处理方式相同。参数求和、页面DOM排序等应用场景。

1.3 Array.from 第二个参数

Array.from 第二个参数类似 “Array.prototype.map” 可以用于处理数据,这样看来就比 apply 功能更加强大。

let numStr = "123456789"
let result = Array.from(numStr, v => v * 2)

在这里插入图片描述

2. Array.of

初学者在学习 Array 内置数组对象的时候,都感觉创建对象时,有一个很神奇的地方,就是你给 Array 传递不同的参数,得到不同的结果。
传递一个数字:得到的是一个长度为指定数字长度的空数组

let arr = new Array(10)

在这里插入图片描述
传递一个非数字:长度为1,元素就是当前这个参数

let arr = new Array(true)
let arr1 = new Array("Hello")
let arr2 = new Array(new Date())
let arr3 = new Array({a:1,b:2})
let arr4 = new Array([10,20,30])

在这里插入图片描述

传递两个以上数字类型或混合类型:得到的是以两个值为数组元素,长度为 2 的数组

let arr = new Array(10, 20)

在这里插入图片描述
Array.of 的出现弥补了 Array 的不足,使得我们创建数组对象时,传入的任何类型参数,都是数组元素

let arr = Array.of(10)

在这里插入图片描述

let arr = Array.of(10,20)
let arr1 = Array.of("Hello")
let arr2 = Array.of("Hello", true, {a:1, b:2})

在这里插入图片描述

3. Array.prototype.at

通常情况下,访问数组后面几个元素的做法是访问 length 并将其减去从末端开始的相对索引(因为中括号的方式不支持负索引)。例如,array[array.length - 1]。
而 at 方法的出现允许使用相对索引(支持负索引),因此上面的示例可以简化为 array.at(-1)。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let ele1 = arr[0]; // 1
let e1 = arr.at(0); // 1
let elelast = arr[arr.length - 1]; // 9
let elast = arr.at(arr.length - 1); // 9
let el = arr.at(-1); // 9
let elel = arr[-1]; // undefined
let ef = arr.at(); // 1 不传参默认取第一个元素
let els = arr.at(-2); // 8

4. Array.prototype.includes

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
可以用其来做逻辑或运算的简化操作
逻辑或运算

let type = 1
if (type === 1 || type === 5 || type === 12) {console.log(type * 10)
}

includes 实现

if ([1, 5, 12].includes(type)) {console.log(type * 10)
}

利用 Set 去重

数组去重大家很熟悉,网上搜索出来的有 N 多种实现方案,大多数传统方案都是采用数组遍历的方式实现,像下面这样:

var arr=[1,2,3,4,5,3,7,8];
function noRepeat(arr){var newArr = [];for(var i = 0; i < arr.length; i++){if(newArr.indexOf(arr[i]) == -1){newArr.push(arr[i]);}}return newArr;
}
var result = noRepeat(arr);

Set对象是值的集合,你可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次,即 Set 中的元素是唯一的。

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]
console.log([...new Set(numbers)])
// [2, 3, 4, 5, 6, 7, 32]

简单吧!

应用示例演示一:求和函数

arguments 对象 + for 循环

function sum () {let res = 0for (let i = 0; i < arguments.length; i++) {res += arguments[i]}return res
}
sum(10)
sum(10, 20)
sum(10, 20, 30)

arguments 对象 + Array.from(或者 apply、call)+ reduce

function sum () {return Array.from(arguments).reduce((t,n) => t + n, 0)
}
sum(10)
sum(10, 20)
sum(10, 20, 30)

es6有arguments,但箭头函数是不识别arguments的,所以用rest(剩余参数)来取代arguments;剩余参数直接就固定到数组里了,而arguments是类数组(本质是个对象),还需要转换。剩余参数语法允许将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。

… 不定参数

let sum = (...args) => {console.log(args)let res = 0;for (let i = 0; i < args.length; i++) {res += args[i]}return res
}
sum(10)
sum(10, 20)
sum(10, 20, 30)

… 拓展运算符 + reduce 求和

let sum = (...args) => {return args.reduce((t,n) => t + n, 0)
}
sum(10)
sum(10, 20)
sum(10, 20, 30)

相关内容

热门资讯

安卓系统怎么调语言设置,And... 你有没有发现,手机里的文字突然变得陌生起来?是不是觉得安卓系统的语言设置有点让人摸不着头脑?别急,今...
安卓怎么换新系统,体验全新功能 亲爱的安卓用户们,是不是觉得你的手机越来越卡,功能也越来越跟不上潮流了呢?别急,今天就来教你怎么给安...
杂牌安卓平板电脑刷系统,解锁无... 你有没有想过,那些杂牌安卓平板电脑,虽然价格亲民,但有时候系统更新慢,功能也受限?别急,今天就来教你...
塞班系统游戏移植安卓,畅享新体... 你有没有想过,那些曾经陪伴我们度过无数欢乐时光的塞班系统游戏,现在竟然可以在安卓手机上继续畅玩?没错...
安卓只有一个系统,揭秘安卓系统... 你知道吗?在手机江湖里,安卓系统可是独树一帜的存在呢!它就像一位武林高手,凭借一己之力,在众多操作系...
软件包安卓系统,软件包的奥秘与... 你有没有发现,手机里的那些应用,就像是魔法一样,让我们的生活变得如此便捷?而这背后,离不开一个强大的...
怎么卸载安卓原生系统,安卓原生... 手机用久了,是不是觉得安卓原生系统有点卡?或者是想尝试一下全新的操作系统?别急,今天就来手把手教你如...
安卓办公系统推荐知乎,知乎推荐... 你有没有想过,在手机上办公也能这么高效?现在,我就要给你安利几个安卓办公系统,让你的手机变成一个小型...
安卓版本商超收银系统,高效管理... 你有没有想过,那些每天在商超里忙碌的收银员,他们手中的安卓版本收银系统,竟然是如此神奇的存在?今天,...
旧手机刷安卓tv系统,轻松打造... 你那台旧手机是不是已经闲置在角落里了?别让它默默无闻地度过余生,今天就来教你怎么给它来个华丽转身,让...
锁屏壁纸推荐安卓系统,安卓系统... 亲爱的手机控们,你是不是也和我一样,对锁屏壁纸有着超乎寻常的热爱?每天醒来,第一眼看到的便是那块小小...
安卓系统不使用sd卡,安卓系统... 你知道吗?最近在手机圈子里,有一个话题可是引起了不小的讨论呢!那就是安卓系统的新趋势——不再使用SD...
平板系统安卓版有哪些,功能丰富... 你有没有发现,现在的生活越来越离不开平板电脑了?无论是工作还是娱乐,平板电脑都成了我们生活中不可或缺...
安卓系统呼吸灯作用,探索安卓系... 你知道吗?你的安卓手机里有个神奇的小功能,它就像你的私人小秘书,时刻关注着你的生活节奏。没错,说的就...
安卓系统的设置停止,自动生成文... 亲爱的手机控们,你是否也有过这样的经历:手机里装了各种应用,可就是觉得运行速度越来越慢,有时候甚至卡...
魅动app安卓系统,安卓系统下... 你有没有发现,最近手机上多了一个叫“魅动app”的小家伙?它可是安卓系统里的一股清流,让人爱不释手。...
安卓怎么玩电脑系统,跨平台操作... 你是不是也和我一样,对安卓系统爱得深沉,但又想体验一下电脑系统的强大呢?别急,今天就来手把手教你如何...
安卓系统买什么品牌好用,盘点几... 你最近是不是在为选择一款好用的安卓手机而烦恼呢?市面上品牌繁多,让人眼花缭乱。别急,今天我就来给你详...
安卓系统怎样不卡顿,尽享丝滑体... 手机用久了是不是感觉越来越卡?别急,今天就来跟你聊聊安卓系统怎样不卡顿,让你的手机焕发新生!一、清理...
vidaa3是安卓系统,安卓系... 你有没有听说过Vidaa3这款智能电视?它可是最近在市场上掀起了一股热潮呢!你知道吗,Vidaa3搭...