深入理解ES6笔记（十）增强的数组功能

pekonchan 发布于2019-08-23 11:28 / 2194人阅读

摘要：在可迭代对象上使用所有数组上的新方法与方法与方法均接受两个参数一个回调函数一个可选值用于指定回调函数内部的。回调函数可接收三个参数数组的某个元素该元素对应的索引位置以及该数组自身。

主要知识点：创建数组、数组上的新方法、类型化数组

《深入理解ES6》笔记目录

创建数组

ES5中创建数组的方式：数组字面量、new一个数组。

const arr1 = [] //数组字面量
const arr2 = new Array() //new构建

ES6创建数组：Array.of()、Array.from()

Array.of() 方法

调用 new Array() 构造器时，根据传入参数的类型与数量的不同，实际上会导致一些不同的结果：

let items = new Array(2);
console.log(items.length); // 2
console.log(items[0]); // undefined
console.log(items[1]); // undefined
items = new Array("2");
console.log(items.length); // 1
console.log(items[0]); // "2"
items = new Array(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = new Array(3, "2");
console.log(items.length); // 2
console.log(items[0]); // 3
console.log(items[1]); // "2"

ES6 引入了 Array.of() 方法来解决这个怪异问题：
Array.of() 方法创建一个包含所有传入参数的数组，而不管参数的数量与类型：

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2
items = Array.of("2");
console.log(items.length); // 1
console.log(items[0]); // "2"

Array.from() 方法

Array.from()是将类数组转换成数组。
ES5 中，将非数组对象转换为真正的数组需要编写一个函数，类似下面这样：

function makeArray(arrayLike) {
    var result = [];
    for (var i = 0, len = arrayLike.length; i < len; i++) {
        result.push(arrayLike[i]);
    }
    return result;
}
function doSomething() {
    var args = makeArray(arguments);
    // 使用 args
}

也可以调用数组原生的 slice() 方法来减少代码量，就像这样：

function makeArray(arrayLike) {
    return Array.prototype.slice.call(arrayLike);
}
function doSomething() {
    var args = makeArray(arguments);
    // 使用 args
}

Array.from()是将类数组转换成数组：

function doSomething() {
    var args = Array.from(arguments);
    // 使用 args
}

映射转换

Array.from(arg1, arg2)，我们可以给该方法提供2个参数，第二个参数作为第一个参数的转换：

function translate() {
    return Array.from(arguments, (value) => value + 1);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4

Array.from还可以设置第三个参数，指定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

在可迭代对象上使用

let numbers = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};
let numbers2 = Array.from(numbers, (value) => value + 1);
console.log(numbers2); // 2,3,4

所有数组上的新方法 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() 方法

用新元素替换掉数组内的元素，可以指定替换下标范围：arr.fill(value, start, end)

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

copyWithin() 方法

选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围：

let numbers = [1, 2, 3, 4];
// 从索引 2 的位置开始粘贴
// 从数组索引 0 的位置开始复制数据
numbers.copyWithin(2, 0);
console.log(numbers.toString()); // 1,2,1,2

let numbers = [1, 2, 3, 4];
// 从索引 2 的位置开始粘贴
// 从数组索引 0 的位置开始复制数据
// 在遇到索引 1 时停止复制
numbers.copyWithin(2, 0, 1);
console.log(numbers.toString()); // 1,2,1,4

超融合服务器私有云深入理解系列深入理解linux 深入理解webrtc 深入理解python

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

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

《深入理解ES6》笔记——扩展对象的功能性（4）

摘要：将对象的属性拷贝到了对象，合并成一个新的对象。而这种行为也是新增的标准。总结本章讲解了对象字面量语法拓展，新增方法，允许重复的对象字面量属性，自有枚举属性排序，增强对象原型，明确了方法的定义。但是，就算把全部新增的功能记住也不是难事。变量功能被加强了、函数功能被加强了，那么作为JavaScript中最普遍的对象，不加强对得起观众吗？对象类别在ES6中，对象分为下面几种叫法。（不需...

baihe 2019-08-20 18:05 评论0 收藏0
《深入理解ES6》笔记——扩展对象的功能性（4）

摘要：将对象的属性拷贝到了对象，合并成一个新的对象。而这种行为也是新增的标准。总结本章讲解了对象字面量语法拓展，新增方法，允许重复的对象字面量属性，自有枚举属性排序，增强对象原型，明确了方法的定义。但是，就算把全部新增的功能记住也不是难事。变量功能被加强了、函数功能被加强了，那么作为JavaScript中最普遍的对象，不加强对得起观众吗？对象类别在ES6中，对象分为下面几种叫法。（不需...

Amos 2019-08-05 11:39 评论0 收藏0
《深入理解ES6》笔记—— 改进数组的功能（10）

摘要：创建数组中创建数组的方式数组字面量一个数组。传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。用新元素替换掉数组内的元素，可以指定替换下标范围。 ES5提供的数组已经很强大，但是ES6中继续改进了一些，主要是增加了新的数组方法，所以这章的知识非常少。创建数组 ES5中创建数组的方式：数组字面量、new一个数组。 const arr1 = [] //数组字...

inapt 2019-08-20 18:25 评论0 收藏0
《深入理解ES6》笔记—— 改进数组的功能（10）

摘要：创建数组中创建数组的方式数组字面量一个数组。传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。用新元素替换掉数组内的元素，可以指定替换下标范围。 ES5提供的数组已经很强大，但是ES6中继续改进了一些，主要是增加了新的数组方法，所以这章的知识非常少。创建数组 ES5中创建数组的方式：数组字面量、new一个数组。 const arr1 = [] //数组字...

张率功 2019-08-05 11:46 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 评论0 收藏0