• ES6中数组新增的方法


    新增的静态方法

    数组新增的静态方法有如下:

    Array.from()

    基本使用

    • Array.from()可以将类数组或者ES6新增的SetMap转换为数组对象。
    const arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3
    }
    
    console.log(Array.from(arrLike));
    // [ 'a', 'b', 'c' ]
    
    • 同时,Array.from()还可以接收第二个回调函数参数,用以对每个元素进行预处理。
    Array.from([1, 2, 3], (x) => x * x)
    // [1, 4, 9]
    

    简单实现

    function MyArray() {}
    
    MyArray.form = function(arrLike, cb) {
        var res = [];
        for (var i = 0; i < arrLike.length; i++) {
            res.push(arrLike[i]);
        }
    
        return cb ? res.map(cb) : res;
    }
    
    const arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3
    }
    
    console.log(MyArray.form(arrLike));
    // [ 'a', 'b', 'c' ]
    
    console.log(MyArray.form(arrLike, (item) => item.toUpperCase()));
    // [ 'A', 'B', 'C' ]
    

    Array.of()

    用于将一组值,转换为数组,没有参数的时候,返回一个空数组

    基本使用

    console.log(Array.of(1, 2, 3));
    // [ 1, 2, 3 ]
    console.log(Array.of());
    // []
    

    简单实现

    MyArray.of = function() {
        return MyArray.form(arguments);
    }
    
    console.log(MyArray.of(1, 2, 3));
    // [ 1, 2, 3 ]
    console.log(MyArray.of());
    // []
    

    实例对象新增的方法

    关于数组实例对象新增的方法有如下:

    • copyWithin()
    • find()
    • findIndex()
    • fill()
    • entries()
    • keys()
    • values()
    • includes()
    • flat()
    • flatMap()

    copyWithin()

    将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,不会修改数组的长度

    参数:

    • target目标位置,必需
    • start被复制内容的起始位置,可选,默认为0
    • end被复制内容的结束位置,可选,默认为数组长度

    基本使用

    console.log([1, 2, 3, 4, 5].copyWithin(0, 3));
    // 将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了原来的 1 和 2
    // [4, 5, 3, 4, 5] 
    

    简单实现

    Array.prototype.copyWithinDemo = function(target, start, end) {
        target = target > this.length - 1 ? this.length - 1 : target;
        start = start || 0;
        end = end ? end > this.length ? this.length : end : this.length;
    
        for (var i = start; i < end; i++) {
            this[target] = this[i];
            ++target;
        }
        return this;
    }
    
    console.log([1, 2, 3, 4, 5].copyWithinDemo(0, 3));
    // [4, 5, 3, 4, 5] 
    

    find()

    • find()用于找出第一个符合条件的数组成员,接收一个回调函数作为参数

    基本使用

    console.log([1, 2, 3].find((item) => item < 2));
    // 1
    

    简单实现

    Array.prototype.findDemo = function(cb) {
        for (var i = 0; i < this.length; i++) {
            if (cb(this[i], i, this)) {
                return this[i];
            }
        }
    }
    console.log([1, 2, 3].findDemo((item) => item < 2));
    // 1
    

    findIndex()

    • findIndex()find()的使用方式 相同,不过返回值为第一个符合条件的数组成员的索引值
    console.log([1, 2, 3].findIndex((item) => item < 2));
    // 0
    

    fill()

    • fill()可以填充一个数组

    基本使用

    console.log(new Array(3).fill(6));
    // [ 6, 6, 6 ]
    console.log(['a', 'a', 'a'].fill(6));
    // [ 6, 6, 6 ]
    
    • 还可以通过第二个start和第三个参数end限制填充的范围
    console.log(['a', 'a', 'a'].fill(6, 1, 2));
    // [ 'a', 6, 'a' ]
    

    如果填充的类型是引用数据类型,则是浅拷贝

    简单实现

    Array.prototype.fillDemo = function(val, start, end) {
        start = start || 0;
        end = end ? end > this.length ? this.length : end : this.length;
    
        for (var i = start; i < end; i++) {
            this[i] = val;
        }
        return this;
    }
    
    console.log(new Array(3).fillDemo(6));
    // [ 6, 6, 6 ]
    console.log(['a', 'a', 'a'].fillDemo(6));
    // [ 6, 6, 6 ]
    console.log(['a', 'a', 'a'].fillDemo(6, 1, 2));
    // [ 'a', 6, 'a' ]
    

    entries()keys()values()

    • 这三个方法返回的都是ES6新增的迭代器对象Iterator
    • entries()返回的每个元素都是一个包含索引值和元素值的数组
    • keys()返回的每个元素是所操作数组的索引值
    • values()返回的每个元素是所操作数组的元素值

    基本使用

    for (const key of [1, 2, 3].keys()) {
        console.log(key);
    }
    // 0 1 2
    
    for (const val of [1, 2, 3].values()) {
        console.log(val);
    }
    // 1 2 3
    
    for (const [key, val] of [1, 2, 3].entries()) {
        console.log(key, val);
    }
    // 0 1
    // 1 2
    // 2 3
    

    简单实现

    Array.prototype.keysDemo = function * () {
        for (let i = 0; i < this.length; i++) {
            yield i;
        }
    }
    
    Array.prototype.valuesDemo = function * () {
        yield * this;
    }
    
    Array.prototype.entriesDemo = function * () {
        for (let i = 0; i < this.length; i++) {
            yield [i, this[i]];
        }
    }
    
    for (const key of [1, 2, 3].keysDemo()) {
        console.log(key);
    }
    // 0 1 2
    
    for (const val of [1, 2, 3].valuesDemo()) {
        console.log(val);
    }
    // 1 2 3
    
    for (const [key, val] of [1, 2, 3].entriesDemo()) {
        console.log(key, val);
    }
    // 0 1
    // 1 2
    // 2 3
    

    includes()

    基本使用

    • 用于判断数组是否包含给定的值
    console.log([1, 2, NaN].includes(1));
    // true
    console.log([1, 2, NaN].includes(3));
    // false
    console.log([1, 2, NaN].includes(NaN));
    // true
    
    • 第二个参数表示搜索的起始位置,默认为0
    console.log([1, 2, NaN].includes(1, 1));
    // false
    

    简单实现

    Array.prototype.includesDemo = function(val, start) {
        start = start || 0;
    
        for (var i = start; i < this.length; i++) {
            if(Object.is(val, this[i])) {
                return true;
            }
        }
        return false;
    }
    
    console.log([1, 2, NaN].includesDemo(1));
    // true
    console.log([1, 2, NaN].includesDemo(3));
    // false
    console.log([1, 2, NaN].includesDemo(NaN));
    // true
    console.log([1, 2, NaN].includesDemo(1, 1));
    // false
    

    flat()

    数组打平,返回一个新数组,对原数据没有影响。flat()默认只会打平一层,可以传递一个整数参数,表示打平的层次。如果想全部打平,传递Infinity即可。

    基本使用

    console.log([1, [2, [3, [4, [5]]]]].flat(Infinity));
    // [ 1, 2, 3, 4, 5 ]
    

    简单实现

    Array.prototype.flatDemo = function (depth) {
        depth = depth || 1;
        let res = this;
        for (let i = 0; i < depth; i++) {
            res = res.reduce((a, b) => a.concat(b), []);
            if (!res.some(function(item) {
                return Array.isArray(item);
            })) break;
        }
        return res;
    }
    
    console.log([1, [2, [3, [4, [5]]]], 6].flatDemo());
    // [ 1, 2, [ 3, [ 4, [5] ] ], 6 ]
    console.log([1, [2, [3, [4, [5]]]], 6].flatDemo(2));
    // [ 1, 2, 3, [ 4, [ 5 ] ], 6 ]
    console.log([1, [2, [3, [4, [5]]]], 6].flatDemo(Infinity));
    // [ 1, 2, 3, 4, 5, 6 ]
    

    flatMap()

    • flatMap()方法对原数组的每个成员执行一次map()方法,然后对返回值组成的数组执行flat()方法(只打平一个层次)。

    基本使用

    console.log([1, 2, 3, 4].flatMap(x => [x * 2]));
    // [2, 4, 6, 8]
    
    // 先map
    // [[2], [4], [6], [8]]
    // 再打平
    // [2, 4, 6, 8]
    

    简单实现

    Array.prototype.flatMapDemo = function (cb) {
        return this.map(cb).flatDemo();
    }
    console.log([1, 2, 3, 4].flatMapDemo(x => [x * 2]));
    // [2, 4, 6, 8]
    
  • 相关阅读:
    一种预测城市未来发展和趋势的方法(关联分析和灰色系统预测)
    适宜性分析评价
    《现代城市规划》读书笔记之一
    外国建筑史的学习资料
    《城市建筑美学》读书笔记
    规划方案的评价(生态环境景观方面)
    地形分析与城市规划
    《建筑与城市规划导论》读书笔记之城市规划部分
    ajax与webGIS[转载]
    景观生态学概述[转载]
  • 原文地址:https://www.cnblogs.com/hycstar/p/14601419.html
Copyright © 2020-2023  润新知