【ES6入门05】：数组扩展

Lionad-Morotar 发布于2019-08-23 12:27 / 2164人阅读

摘要：数组扩展把一组数据转换成数组把伪数组集合转换成真正的数组把集合转换成数组类似映射的功能接收两个参数，。

数组扩展 Array.of()

{
    // 把一组数据(number/string/boolean...)转换成数组
    let arr = Array.of(3, "abc", true, {a:"a"}, 11);
    console.log(arr); // [3, "abc", true, {a: "a"}, 11]
    let empty = Array.of();
    console.log(empty); // []
}

Array.from()

{
    // 把伪数组、集合转换成真正的数组
    // hello
    // beautiful
    // girl!
    let p = document.querySelectorAll("p");
    let pArr = Array.from(p); // 把集合转换成数组
    pArr.forEach(function (item) {
        console.log(item.textContent);
    });
    // hello
    // beautiful
    // girl!

    // 类似map映射的功能
    // from接收两个参数，Array.from(arr, fn)。fn的返回值组成了最终的数组
    console.log(Array.from([1, 3, 5], item => item * 2)); // [2, 6, 10]
}

Array.fill()

{
    // fill把数组元素都变为指定的值，有三个参数 arr.fill(value, start, end)
    // value：填充值
    // start：填充起始位置，可以省略
    // end：填充结束位置，可以省略，实际结束位置是end-1
    console.log([1, "a", undefined].fill(7)); // [7, 7, 7]
    console.log(["a", "b", "c", "d"].fill(7, 1, 3)); // ["a", 7, 7, "d"]
}

Array.copyWithin()

{
    // copyWithin数组元素拷贝
    // 有三个参数 arr.copyWithin(target, start, end)
    // target：目的起始位置
    // start：复制源的起始位置，可以省略，可以是负数
    // end：复制源的结束位置，可以省略，可以是负数，实际结束位置是end-1
    console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 2, 4)); // [1, 3, 4, 4, 5, 6]
}

数组的遍历

{
    // ES6引入了for...of循环，作为遍历所有数据结构的统一方法
    let arr = [1, "aha", "why"];
    // 数组的keys方法，返回数组所有下标的集合
    for (let index of arr.keys()) {
        console.log("keys", index); // 0 1 2
    }
    // 数组的values方法，返回数组所有元素的集合
    for (let value of arr.values()) {
        console.log("values", value); // 1 "aha" "why"
    }
    // 数组的entries方法，返回数组的下标和元素的集合
    for (let [index, value] of arr.entries()) {
        console.log("entries", index, value); // 0 1  1 "aha"  2 "why"
    }
    // 以下写法功能类似于values
    for (let value of arr) {
        console.log("value", value); // 1 "aha" "why"
    }
}

Array.find() 和 Array.findIndex()

{
    // find找出第一个满足条件的值，就不往后找了
    console.log([1, 2, 3, 4, 5, 6].find(item => item > 3)); // 4
    console.log([1, 2, 3, 4, 5, 6].find(item => item > 8)); // undefined
    // findIndex找出第一个满足条件的值的下标，就不往后找了
    console.log([1, 2, 3, 4, 5, 6].findIndex(item => item > 3)); // 3
    console.log([1, 2, 3, 4, 5, 6].findIndex(item => item > 8)); // -1
}

Array.includes()

{
    // 数组是否包含某个元素
    console.log([1, 2, NaN].includes(1)); // true
    console.log([1, 2, NaN].includes(NaN)); // true
}

GPU云服务器云服务器 es6字符串扩展 ES6入门 05vps mai05

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

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

ES6入门之对象的扩展

摘要：循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。目前，只有对象方法的简写法可以让引擎确认，定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法在ES6中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。...

RiverLi 2019-05-23 11:58 评论0 收藏0
ES6入门之对象的扩展

摘要：属性的简洁表示法在中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法在ES6中允许直接写入变量...

AWang 2019-08-26 13:53 评论0 收藏0
ES6入门之对象的新增方法

showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用来解决在ES5中两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者两边的值都会转换数据类型，...

zhou_you 2019-05-22 19:25 评论0 收藏0
带你入门 JavaScript ES6 (二)

摘要：上一篇学习下一代语法一，我们学习了关于块作用域变量或常量声明和语法新的字符串拼接语法模版字面量数组元素或对象元素的解构赋值和对象字面量简写的相关知识。这便是扩展运算符的用途之一。本文同步带你入门 JavaScript ES6 (二)，转载请注明出处。上一篇学习下一代 JavaScript 语法: ES6 (一)，我们学习了关于块作用域变量或常量声明 let 和 const 语法、...

chanthuang 2019-08-21 18:26 评论0 收藏0