ES6之数组的扩展知识点总结(五)

news/2024/7/11 1:34:56 标签: ES6, 数组的扩展

ES6的学习,主要是跟着阮一峰大神的ES6第三版这本书学的,所以我在这里主要是把知识梳理一遍,方便自己的理解记忆以及日后的再学习使用,如果想要了解更多的建议到http://es6.ruanyifeng.com/#docs/array看详细版的

扩展运算符(spread):是三个点(...)

扩展运算符的作用:

将一个数组转为用逗号分隔的参数序列。

任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。

扩展运算符还可以将字符串转为真正的数组。

var arr = [1,2,3,4,3,2,3];
 var newArr = [];
 newArr.push(...arr);
 console.log(newArr);
上面的实例,使用扩展运算符,将数组变为一个参数序列
    let str = "Donna";
    console.log([...str]);//["D","o","n","n","a"]
const set = new Set([1,2,3,4,3,2,4,56]);
console.log([...set]);//[1,2,3,4,56]
const map = new Map([["a",12],["boo",true],[123,345]]);
console.log([...map]);//[["a",12],["boo",true],[123,345]]
上面的实例,将字符串和Map数据结构和Set数据结构转为数组。
扩展运算符的应用:
替代函数的apply()
const arr = [1,2,3];
function sum(x,y,z){
    console.log(x+y+z);
}
sum.apply(null,arr);//6 ES5的做法
sum(...arr);//6 ES6使用扩展运算符将数组转为参数序列
求一个数组最大元素的做法
const arr = [1,2,3,45,23,34];
console.log(Math.max.apply(null,arr));//45
console.log(Math.max(...arr));//45

上面的两个实例显示:由于扩展运算符可以展开数组,将数组转为函数的参数,所以不再需要apply()方法

克隆数组
const arr1 = [1,2,3];
const arr2 = arr1.concat();//链接一个空数组,避免直接赋值,arr1和arr2之间相互影响

const arr3 = [...arr1];//Es6用扩展运算符直接复制
const [...arr4] = arr1;//这两种方法都可以达到我们想要的效果
解构赋值
const arr1 = [1,2,3];
const str = "aa";
const [x,y,z] = [5,...arr1];
console.log(x);
console.log(z);

const [...rest] = [1,2];
console.log(rest);//[1,2]
    const [leo,...donna] = [1,2,3];
    console.log(donna);//[2,3]
const [...le,don] = []1,23,4;//报错:Uncaught SyntaxError: Rest element must be last element
从上面的例子中说明, 扩展运算符可以与解构赋值结合起来,用于生成数组。同时从最后一个报错来看:如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
Array.from方法:用于将两类对象转为真正的数组:1、类似数组的对象2、可遍历的对象(字符串、数组、类数组、Map、Set...)
let likeArr = {
    "0":123,
    "1":true,
    "2":"lalal",
    length:3
}
const arr = Array.from(likeArr);
console.log(arr);//[123, true, "lalal"]

聊聊什么是类数组吧:我们把符合以下条件的对象称为类数组

1、具有length属性

2、按照索引方式存储数据

3、不具有数组的push,pop等方法

常见的类数组有arguments,NodeList

只要部署了Iterator接口的数据结构(可遍历对象),Array都能将其转为数组。

const set = new Set([2,3,4,5,23]);
const arr = Array.from(set);
console.log(arr);//[2,3,4,5,23]

注意:如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。

如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。

Array.from()还可以接收第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

    let likeArr = {
        "0":123,
        "1":true,
        "2":"lalal",
        length:3
    }
    const arr = Array.from(likeArr,function(x){
        return x*x;
    });
    console.log(arr);//[15129, 1, NaN]

Array.of()方法:用于将一组值,转为数组。它总是返回参数值组成的数组。如果没有参数就返回一个空数组。这个方法的主要目的是为了弥补数组构造函数Array()的不足,因为参数个数的不同,会导致Array()的行为有差异

const arr1  = Array.of();
const arr2 = Array.of(1);
const arr3  = Array.of(1,2,3);
const arr4  = Array();
const arr5  = Array(3);
const arr6  = Array(1,2,3);
console.log(arr1);//[]
console.log(arr2);//[1]
console.log(arr3);//[1, 2, 3]
console.log(arr4);//[]
console.log(arr5);//[,,]
console.log(arr6);//[1, 2, 3]
从上面的实例中我们可以发现:

Array()方法没有参数、一个参数、多个参数时,返回结果都不一样。因为只有当参数个数不少于2个时,Array()才会返回有参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度

Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载,它的行为非常统一。

copyWithin方法:在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接收三个参数

target(必需):从该位置开始替换数据。如果为负值,表示倒数。

start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。

end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

这三个参数都应该是数值,如果不是,会自动转为数值。

const arr = [1,2,3,4,2];
arr.copyWithin(0,2,4);
console.log(arr);//[3, 4, 3, 4, 2]
const arr = [1,2,3,4,2];
arr.copyWithin(-1,-2,4);
console.log(arr);// [1, 2, 3, 4, 4]

find()方法:用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

const arr = [1,2,3,4,2];
 const a = arr.find(function(x){
    return x<3;
});

console.log(a);//1

findIndex():用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

const arr = [1,2,3,4,2];
 const a = arr.findIndex(function(x){
    return x<3;
});

console.log(a);//0

这两个方法都可以接受第二参数,用来绑定回调函数的this对象

另外。这两个方法都可以发现NaN,弥补了数组的indexof方法的不足。

indexof方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到

const arr = [1,2,3,4,2,NaN];
 const a = arr.findIndex(function(x){
    return Object.is(NaN,x);
});
 const b = arr.indexOf(NaN);
console.log(a);//5
console.log(b);//-1

fill():使用给定值,填充一个数组,如果只有一个参数,那么数组中已有的元素,会被全部替换成这个参数,当然,fill方法还可以接收第二个和第三个参数,用于指定填充的起始位置和结束位置

const arr = [1,2,3,4,2,NaN];
arr.fill(2);
console.log(arr);//[2,2,2,2,2,2]
    arr.fill(4,2,5);
    console.log(arr);//[2, 2, 4, 4, 4, 2]

注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。

const arr = [1,2];
arr.fill({"donna":111});
console.log(arr);[{"donna":999},{"donna":999}]
arr[0].donna = 999;
console.log(arr);//[{"donna":999},{"donna":999}]

keys()、values()、entries()

ES6提供的三个新方法,用于遍历数组,他们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历,values()是对键值的遍历,entries()是对键值对的遍历。

const arr = [1,2];
for(let i of arr.keys()){
    console.log(i);
}//0,1
for(let elem of arr.values()){
    console.log(elem);
}//1,2
for(let [index,elem] of arr.entries()){
    console.log(index,elem);
}//0,1
   // 1,2

includes()方法:返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似,该方法的第二个参数表示搜索的起始位置,默认为0,如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如数组的长度为3,但是第二个参数为-4),则会重置从0开始。

const arr = [1,2,3,4];
console.log(arr.includes(3,1));//true
    console.log(arr.includes(2,-5));//true
没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。

没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。

indexOf有两个缺点:1、不够语义化,它的含义是找到参数值的第一个出现的位置,所以要去比较是否不等于-1,表达起来不够直观,二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN误判。

includes()方法就没事

const arr = [1,2,3,4,NaN];
console.log(arr.includes(NaN,1));//true

另外,Map和Set数据结构有一个has方法,需要注意与includes区分。

Map结构的has方法,是用来查找键名的

Set结构的has方法,是用来查找键值的。

const set = new Set([1,2,3,4,5]);
console.log(set.has(1));//true
const map = new Map([[1,4],[2,3]]);
console.log(map.has(1));//true











http://www.niftyadmin.cn/n/952091.html

相关文章

sqlserve 热备用状态更新_华为交换机配置教程 16.如何打补丁以及查看补丁状态...

关于华为交换机配置教程搜集整理了一下&#xff0c;从基础组网&#xff0c;对接防火墙、多种方式的设备登录开始&#xff0c;一直到安全认证、故障处理&#xff0c;内容比较全面细致。近期更新一下&#xff0c;更新完了之后做一个汇总。有需要的可以关注一下。这篇文章我们来介…

简单的信息采集程序示例(小偷程序) (转)

简单的信息采集程序示例(小偷程序) 最近正准备做一个信息采集的程序&#xff0c;下面是一个简单的采集程序&#xff0c;提供给初学者入门参考。aspx页面代码<asp:TextBox ID"Txt_Url"runat"server"Width"441px"></asp:TextBox><b…

ES6之函数的扩展知识点总结(六)

本人学习ES6看的是阮一峰老师的书&#xff0c;写在博客里是因为&#xff0c;只看不动手总结&#xff0c;很多东西理解的不透彻&#xff0c;也容易忽略掉一些知识点&#xff0c;我也只是把我自己理解并且认为重要的总结在一起&#xff0c;如果想要对这一节有准确而深入的理解&am…

vspython版本控制_git进行版本控制心得详谈

小编在学习可视化的时候&#xff0c;接触到git&#xff0c;所以这里写一下关于GitHub的有关知识&#xff0c;写这个的目的还是巩固自己的学习&#xff0c;一方面可以提高自己&#xff0c;另一方面回头看一下&#xff0c;有什么更深层次的东西还可以再记录。首先说一下版本控制软…

scipy学习

常量 from scipy import constants print(dir(constants))# [Avogadro, Boltzmann, Btu, Btu_IT, Btu_th, ConstantWarning, G, Julian_year, N_A, Planck, R, Rydberg, Stefan_Boltzmann, Wien, __all__, __builtins__, __cached__, __doc__, __file__, __loader__, __name__…

[翻译]简单谈谈事件与委托 (转)

Posted on 2007-04-08 12:56 Cruise 阅读(430) 评论(6) 编辑 收藏 所属分类: .net/CLR 、外文翻译 原文地址&#xff1a;http://www.codeproject.com/csharp/events.asp源代码下载&#xff1a;/Files/edgar-sun/events_src.zip演示文件下载&#xff1a;/Files/edgar-sun/even…

原生js+css实现带预览图片的幻灯片效果实例

先总结一下&#xff0c;里面的用到的关键知识点 CSS中用到的知识点有&#xff1a; 过渡效果&#xff1a;transition&#xff0c;下面是语法&#xff0c;用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的地方是opacity和right transition: property duration timing-f…

计算机使用经验分享_论文免费查重网站的使用经验分享

许多同学们的论文完成之后&#xff0c;都会去论文免费查重网站进行查重&#xff0c;以预估自己论文的查重比例如何&#xff0c;提前做好相应的修改&#xff0c;那么利用论文免费查重网站查重要注意些什么呢&#xff1f;下面一起来看看大家的经验分享吧&#xff01;论文免费查重…