ES6新标准下关于数组的几个实用改进功能介绍

embedded/2024/10/18 19:28:02/

ES5中对数组的操作方法还不完善,对于一些其他语言较常见的功能还需要用间接的方法去实现,因而在ES6有力的进行了改进,主要有以下几个方面:

一、创建数组上的改进

在ES5及以前,创建数组的方式有两种,一种是调用Array构造函数,另一种是用数组字面量方式。这两种方法,均需列举数组中的元素,功能受限。例如想将一个类数组对象转换为数组,可选的方法有限,需要编写额外的代码。但在ES6中,这种转换将非常方便。

(一)Array.of()方法

1.ES5的构造函数方法会造成模糊结果

let item1=new Array(2);//当只传入一个数字时,会被当作是数组长度,而不会当作元素,除非传入的是"2"字符

console.log(item1.length);//输出结果:2

console.log(item1[0]);//输出结果:undefined

console.log(item1[1]);//输出结果:undefined

let item2=new Array(“2”);//当只传入字符“2”时,则会当作元素

console.log(item2.length);//输出结果:1

console.log(item2[0]);//输出结果:2

console.log(item2[1]);//输出结果:undefined

let item3=new Array(2,3);//而当只传入两个以上数字或字符时,则会被当作元素

console.log(item3.length);//输出结果:2

console.log(item3[0]);//输出结果:2

console.log(item3[1]);//输出结果:3

2.Array.of()方法用于解决构造函数造成模糊问题

Array.of()方法,不管传入什么参数,都自动当作元素,没有单一数值当作定义数组长度问题

let items= Array.of(2)

console.log(items.length);//输出结果:1

console.log(items[0]);//输出结果:2

console.log(items[1]);//输出结果:undefined

(二)Array.from()方法

Array.from()用于将非数组对象和可迭代对象转换为数组。

1. Array.from()方法将非数组对象转换为数组

如函数的arguments就是一种类数组对象,在ES5中要将其转换为数组,要采用间接方法得到,方法如下:

function makeArray(arrayLike){//间接方法得取得数组,再将数组返回进行复制

       var result=[];

       for(var i=0;i<arrayLike.length;i++){

              result.push(arrayLike[i]);

       }

       return result;

}

function doSomeThing(par1,par2,par3){//通过调用间接方法,得到该函数的参数数组

       var args=makeArray(arguments);

       console.log(args);

}

doSomeThing(34,45,23);//输出结果:[34,45,23]

而在ES6中,只需要Array.from()方一条语句即可实现:

function doSomeThing(par1,par2,par3){//通过一条语句,得到该函数的参数数组

       var args=Array.from(arguments);

       console.log(args);

}

doSomeThing(34,45,23);//输出结果:[34,45,23]

2.Array.from()方法的映射转换

Array.from()还可以对转换的数组进行进一步运算加工,其方法是提供一个映射函数作为Array.from()方法的第二个参数。

function translate(){

       return Array.from(arguments,value=>value+1);

}

let numbers=translate(1,2,3);

console.log(numbers);//输出结果:[2,3,4]

如果用映射函数处理对象加工,也可以给Array.form()方法传入第三个参数,表示映射函数的this值,如下。

let helper={

       diff:1,

       add(value){

              return value+this.diff;

       }

};

function translate(){

       return Array.from(arguments,helper.add,helper);

}

let numbers=translate(1,2,3);

console.log(numbers);//输出结果:[2,3,4]

2.Array.from()方法将可迭代对象转换为数组

let numbers={

       *[Symbol.iterator](){//创建可迭代对象

              yield 1;

              yield 2;

              yield 3;

       }

};

let number2=Array.from(numbers,value=>value+1);

console.log(number2);//输出结果:[2,3,4]

二、为数组添加的新方法

主要有四个新方法,find()方法和findIndex()方法可以用于在数组中查找任意值,解决了ES5中只能通过遍历来查找序号及值;fill()方法和copyWithin()方法主要用来对数组进行分解式的复制。

(一) find()方法和findIndex()方法

find()方法和findIndex()方法这两个方法是对ES5中的indexOf()和lastIndexOf()两个方法,进行了扩展,加入了回调函数功能,可以实现更为复杂的查找功能。indexOf()和lastIndexOf()虽然可以查找特定的值,但每次只能查找一个值相等式匹配,对于有复杂的条件匹配,如查找大于35的偶数值,就无法用一条语句实现,还需要编写更多赋值判断代码才完成。而ES6中的find()方法和findIndex()方法则可轻松实现。

find()方法和findIndex()方法都接受两个参数,一个是回调函数,另一个是可选参数,用于指定回调函数中的this值。两者的区别是,find()方法返回查找到的值,findIndex()方法返回的是值的索引。这四个搜索函数都一样,当查找到第一个匹配条件时,立即停止搜索剩余部分。

    let numbers=[25,30,35,40,45];

       console.log(numbers.find(n=>n>33));//输出结果:35

       console.log(numbers.findIndex(n=>n>33));//输出结果:2

 (二) fill()方法和copyWithin()方法

1.fill()方法

fill()方法用于向数组中填充指定的值,当传入一个值时,它会重写数组中所有的值。

let numbers=[25,30,35,40,45];

numbers.fill(0);

console.log(numbers);//输出结果:[0,0,0,0,0]

如果只想改变某一部分的值,可以传入开始索引和不包含结束索引(不包括结束索引当前值)这两个参数,如下:

let numbers=[1,2,3,4];

numbers.fill(1,2);//从第2序号开始后所有元素传入1进行覆盖

console.log(numbers);//输出结果:[1,2,1,1]

let numbers1=[1,2,3,4];

numbers1.fill(0,1,3);//从第1序号开始到3序号(不包含3序号)传入0进行覆盖

console.log(numbers1);//输出结果:[1,0,0,4]

2.copyWithin()方法

copyWithin()方法用于从数组中复制元素的值,并粘贴到该数值指定位置进行覆盖。它有两个参数,一个是开始填充值的索引位置,另一个是开始复制值的索引位置。

    let numbers=[1,2,3,4];

       numbers.copyWithin(2,0);//从数组的0序号开始复制值,到2序号开始进行粘贴覆盖

       console.log(numbers);//输出结果:[1,2,1,2]

       let numbers1=[1,2,3,4];

       numbers1.copyWithin(2,0,1);//从数组0序号开始复制值,到1序号停止复制值,然后粘贴到2序号开始进行覆盖

       console.log(numbers1);//输出结果:[1,2,1,4]


http://www.ppmy.cn/embedded/123731.html

相关文章

harbor https配置

安装docker compose curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum -y install docker-compose docker-compose version生成自建CA证书 生成CA私钥&#xff1a; openssl genrsa -out /path/ca/ca.key 4096生成ca的自签名证书: open…

学习笔记 | Golang基础,Go语言快速入门!

本文将介绍 Go 语言的基础语法&#xff0c;包括环境配置、数据类型、流程控制、函数、结构体、接口、异常、文本处理、并发编程、网络编程等。本文是对多个 Go 入门视频的总结&#xff0c;并结合个人理解对内容进行了简化。由于水平有限&#xff0c;文中可能存在些许错误&#…

小程序-全局数据共享

目录 1.什么是全局数据共享 2. 小程序中的全局数据共享方案 MboX 1. 安装 MobX 相关的包 2. 创建 MobX 的 Store 实例 3. 将 Store 中的成员绑定到页面中 4. 在页面上使用 Store 中的成员 5. 将 Store 中的成员绑定到组件中 6. 在组件中使用 Store 中的成员 1.什么是全…

Android OTA升级

针对Android系统OTA升级&#xff0c;MTK平台有相关介绍文档&#xff1a;https://online.mediatek.com/apps/faq/detail?faqidFAQ27117&listSW 概念一&#xff1a;OTA包的构建 AOSP full build&#xff1a;Android原生提供的全量包的构建&#xff0c;意思就是可以从任何一…

【Mac】和【安卓手机】 通过有线方式实现投屏

Mac 和 安卓手机 实现投屏&#xff08;有线&#xff09; 1.下载HomeBrew /bin/bash -c "$(curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/install/master/install.sh)"2.安装Scrcpy brew install scrcpy3.安装adb brew install android-platfor…

网站可疑问题

目标站点 Google hack 页面访问 抓包 POST /admin.php?actionlogin HTTP/2 Host: www.xjy.edu.cn Cookie: xkm_sidA6x4Cgw2zx User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0 Accept: text/html,application/xhtmlxml,appl…

MATLAB数据文件读写:2.矩阵数据读取

矩阵数据读取 写入文件–save函数 保存变量到文件中&#xff0c;用于以后使用。 save(fielname) 将当前工作区中所有变量保存到matlab格式的二进制文件filename中。: .mat save(filename, ‘var’,fmt) 将当前工作区中var指定的结构体数组的变量或字段保存到matlab格式的…

Java--IO高级流

缓冲流 缓冲流,也叫高效流&#xff0c;是对4个基本的FileXxx 流的增强&#xff0c;所以也是4个流&#xff0c;按照数据类型分类&#xff1a; 字节缓冲流&#xff1a;BufferedInputStream&#xff0c;BufferedOutputStream 字符缓冲流&#xff1a;BufferedReader&#xff0c;Buf…