欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6中新增关于Array的方法

程序员文章站 2024-02-14 17:15:04
...

在javascript中,Array()经常用到,利用ES6中的一些新特性会让数组的处理更加方便快捷

1.迭代空数组

直接创建一个数组

const arr=new Array(4);
//Output:[undefined,undefined,undefined,undefined]

利用map方法,转化成新的数组,企图得到 [0,1,2,3] 数组

const arr=new Array(4);
arr.map((ele,index) => index);
//Output:[undefined,undefined,undefined,undefined]

解决这个问题可以在创建数组时用到Array.apply

apply与call类似,都是用来继承父类的方法的,不同之处是:

  • call() 方法分别接受参数。person.fullName.apply(person1, ["Oslo", "Norway"]);

  • apply() 方法接受数组形式的参数.person.fullName.call(person1, "Oslo", "Norway");

如果要使用数组而不是参数列表,则 apply() 方法非常方便。

const arr = Array.apply(null, new Array(4));
arr.map((ele,index) => index);
//Output:[0,1,2,3]

由此,我们可以创建一个指定最大值、最小值、或者长度生成指定数列的方法

/**
     * 生成自定义的连续数列
     * @param{Number}min
     * @param{Number}max
     * @param{Number}len
     */
    function newArr({min = null, max = null, len = null} = {}) {
        let newArray=[], skip = min
        if (len == null) {len = max - min + 1}
        if (min == null) {skip = -max}
        const arr = Array.apply(null, new Array(len));
        newArray = arr.map((ele, index) => {
            if (index + skip>0) {return 0}
            return Math.abs(index + skip)
        }).sort((a, b) => a - b)//数组排序指定的方法
        newArray = [...new Set(newArray)]//数组去重,return 0那里会有重复的0
    }

    newArr({max: 10, len:200})

  1. JS最为合理的设置多个默认值的方法,CSDN上Jonithan_具体讲解
function third({x = 1 ,y = 2} = {}) {
    return x+y
    }
  1. 数组排序方法sort(sortby)sortby 可选。规定排序顺序,必须是函数
function sortNumber(a,b){return a - b}
let arr=[3,1,6,7,9,2,0]
arr.sort(sortNumber)
//Output [0,1,2,3,6,7,9]
  1. 箭头函数,Arrow function,=>
x => x * x
 //上面的箭头函数相当于:
 function (x) {
     return x * x;
 }

2. 给方法传一个空参数

如果调用一个方法,并不填其中一个参数,会报错

function test(a,b,c) {console.log("do something")}
test(1,,3)
//Output Uncaught SyntaxError: Unexpected token

解决办法之一就是,改为传nullundefined

test(1,null,3)
//Output do something

利用ES6中新增的展开语法, 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

test(...[1,,3])
//Output do something

展开语法还可以用来做数组或对象的合并

arr1=[1,2,3]
arr2=[4,5,6]
obj1={name:"fintinger",age:19,gender:"male"}
obj2={realName:"李栓蛋",hobby:"unknown",gender:"confidential"}

[...arr1,...arr2];
//Output [ 1, 2, 3, 4, 5, 6 ]

{...obj1,...obj2}
//Output {name: 'fintinger', age: 19,gender: 'confidential',realName: '李栓蛋',hobby:'unknown'}
//对象合并的过程中,相同key,后面value会覆盖前面value

还可以用来将数组转为对象

arr1=[1,2,3]
{...arr1}
//Output { '0': 1, '1': 2, '2': 3 }

由此,可以得到数组去重的新方法

const arr = [...new Set([1, 2, 3, 3])]
//Output [1,2,3]

或者,下面代码也可以达到数组去重的效果,用到Array.from()方法

const arr=Array.from(new Set([1, 2, 3, 3]))
//Output [1,2,3]

3.数组扁平化

对于一个数组arr = [1, [2, [3, 4]]],将其转化为[1,2,3,4],可以用到reduce,ES6中提供了更为简单的方法,flat(depth),参数depth,代表展开嵌套数组的深度,默认是1

  • reduce(function(total, currentValue, currentIndex, arr), initialValue)
let arr= [1, [2, [3, 4]]]
function flatten(arr) {
  return arr.reduce(function (prev, next) {
    return prev.concat(Array.isArray(next) ? flatten(next) : next);
  }, []);
}
flatten(arrO)
//Output [1,2,3,4]
  • flat(depth)

    let arr= [1, [2, [3, 4]]]
    arr.flat(3);
    //Output [1,2,3,4]
    

4.截断数组

修改数组长度为某一固定值

let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);

//Output: [0, 1, 2];

5.获取数组最后一项

let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1]
//Output: 5;

或者,利用slice

const last = arr.slice(-1)[0]
//Output: 5;
相关标签: js ES6