ES6数组 - 新增的数组接口方法

caikeal 发布于2019-08-26 10:30 / 2754人阅读

摘要：一返回符合条件的第一个元素方法接收个参数，第一个参数为一个回调函数，第二个参数指定回调函数里的。其中，回调函数本身接受三个参数元素的值，元素的下标，数组本身回调函数的功能逻辑是想要寻找的元素应当满足的某种条件。

一：find() 返回符合条件的第一个元素
find方法接收2个参数，第一个参数为一个回调函数，第二个参数指定回调函数里的this。大概如下：find(function(value, index, thisArray){}, this)。
其中，回调函数本身接受三个参数：元素的值，元素的下标，数组本身；回调函数的功能逻辑是想要寻找的元素应当满足的某种条件。一旦某个元素满足这个条件，则立即返回当前元素，不再查找。这就意味着，find()方法会返回满足条件的第一个元素。我们来看一下具体示例：

let obj = {level: 3};
let array = [1, 2, 3, 4, 5];
let foundItem = array.find(function (value, index, array) {
    return value > this.level;
}, obj);
console.log(foundItem); // 4

我们通过find()方法的第二个参数传入obj，这时候回调函数里面的this.level就是obj.level为3，我们找到array里第一个大于3的元素，所以得到4.

这里有一点需要注意的是，如果你要指定find()的第二个参数，那么回调函数不能用箭头函数。我们都知道箭头函数的this在其定义的时候就确定，不能给其指定一个新的this，这样是不起作用的。

二：findIndex() 返回符合条件的第一个元素下标
findIndex()和find()的参数一样，唯一的区别是findIndex()返回的是第一个满足条件的元素的下标：

let obj = {name: "a"};
let array = ["a", "b", "a"];
let foundIndex = array.findIndex(function (value, index, array) {
    return value === this.name;
}, obj);
console.log(foundIndex); // 0

返回第一个满足条件的元素的下标：0。

三：fill()
fill()方法用某个值填充数组，它接受三个参数, fill(value, startIndex, endIndex)：

1: value用来填充的数值
2: startIndex 填充的开始坐标
3: endIndex 填充结束的坐标，不包含此坐标

我们来看看具体的示例：

1: 三个参数都齐全的情况

let array = [0, 1, 2, 3];
array.fill("a", 0, 2);
console.log(array); //["a", "a", 2, 3]

2: 不传startIndex和endIndex的情况

let array = [0, 1, 2, 3];
array.fill("a");
console.log(array); //["a", "a", "a", "a"]

这种情况即是用第一个参数填充整个数组。

3: 不传endIndex的情况

let array = [0, 1, 2, 3];
array.fill("a", 1);
console.log(array);//[0, "a", "a", "a"]

这种情况即是用第一个参数从startIndex一直填充到数组结尾。

四：copyWithin()
copyWithin()方法，顾名思义是拷贝数组自身的某些数据来填充数组本身。它也接受三个参数，copyWithin(pastedStartIndex, copyStartIndex, copyEndIndex):

1: pastedStartIndex 开始黏贴数据的坐标
2: copyStartIndex copy开始的坐标
3: copyEndIndex copy结束的坐标，但是不包括此坐标

来看看代码示例：

1: 三个参数都齐全的情况

let array = [0, 1, 2, "D", "E", "F", "G", "H", "I"];
array.copyWithin(3, 0, 5);
console.log(array); // [0, 1, 2, 0, 1, 2, "D", "E", "I"]

我们来分析一下结果的由来：
1: copyStartIndex = 0，copyEndIndex = 5，那么被copy的元素是： 0, 1, 2, "D", "E" 。
2: pastedStartIndex = 3，那就是从原本的"D"元素所在的坐标开始一一对应地用0, 1, 2, "D", "E"覆盖原本的元素，其他位置上的元素不变。
3: 所以得到结果：[0, 1, 2, 0, 1, 2, "D", "E", "I"]

2: 没有copyStartIndex和copyEndIndex的情况

let array = [0, 1, 2, "D", "E", "F", "G", "H", "I"];
array.copyWithin(3);
console.log(array); // [0, 1, 2, 0, 1, 2, "D", "E", "F"]

copyStartIndex的默认值为0，copyEndIndex = array.length;所以当不给以上参数时，表示拷贝整个数组。

3: 没有copyEndIndex的情况

其实上面第二点已经说了，copyEndIndex默认值为array.length。所以copyEndIndex没有传的情况，就表示从copyStartIndex开始copy到整个数组结尾：

let array = [0, 1, 2, "D", "E", "F", "G", "H", "I"];
array.copyWithin(3, 4);
console.log(array); //[0, 1, 2, "E", "F", "G", "H", "I", "I"]

以上就是关于ES6给Array新增的接口方法。

云服务器 GPU云服务器 java数组新增方法判断数组的方法定义数组的方法 php操纵数组的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106282.html

Javascript内置对象新增接口列表

网上很少有提供不同版本接口对比的文章，所以自己总结一下。 Array Method Description Modify Version concat 连接多个数组，返回数组副本，参数可以为值或数组否 ES3 join 把数组元素组合为字符串否 ES3 pop 删除并返回最后一个元素是 ES3 push 向数组末尾添加一个或多个值，返回数组长度是 ES3 reve...

xuhong 2019-08-21 17:02 评论0 收藏0
工作中常用es6+特性

摘要：结合工作中使用情况，简单对进行一些复习总结，包括常用的语法，等，以及短时间内要上手需要重点学习的知识点不同工作环境可能有一些差别，主要参考链接是阮一峰的博客以及外文博客阮老师大部分文章是直接翻译的这个博客简介先说一下，是一个标准化组织，他们结合工作中使用情况，简单对es6进行一些复习总结，包括常用的语法，api等，以及短时间内要上手需要重点学习的知识点（不同工作环境可能有一些差别），...

xcold 2019-08-23 18:39 评论0 收藏0
es6 promise面试

摘要：执行函数会返回一个遍历器对象，每一次函数里面的都相当一次遍历器对象的方法，并且可以通过方法传入自定义的来改变函数的行为。函数可以通过配合函数更轻松更优雅的实现异步编程和控制流管理。它和构造函数的不同点类的内部定义的所有方法，都是不可枚举的。 let const的命令在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是因为ES5里面没有块级作用域是很不合...

timger 2019-08-23 18:38 评论0 收藏0
JavaScript 语言核心笔记（持续更新）

摘要：在同一个块内，不允许用重复声明变量。中为新增了块级作用域。自带遍历器的对象有数组字符串类数组对象对象的对象等和结构对象。返回一个遍历器，使遍历数组的键值对键名键值。目录 1.语法 2.类型、值和变量 3.表达式和运算符 4.语句 5.数组 6.对象 7.函数 8.全局属性和方法 9.词法作用域、作用域链、闭包 10.原型链、继承机制 11.this的理解 12.ES5新特性 13.E...

suosuopuo 2019-08-20 18:20 评论0 收藏0
JavaScript 设计模式（五）：迭代器模式

摘要：文章内容分两部分前半部分为迭代器模式概念后半部分为中迭代器上半部分开始迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。下半部分开始的迭代器迭代器等同于遍历器。执行该函数，会返回一个遍历器对象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章内容分两部分：前半部分为迭...

zhou_you 2019-08-23 18:26 评论0 收藏0