数组es6合并 es6数组函数

转载

技术领航博主 2024-04-04 15:23:24

文章标签 数组es6合并 es6 前端 javascript 数组 文章分类 架构后端开发

ES6知识总结------第2篇

一、数组

1、数组方法

1-1、Array.form()
1-2、Array.of()
1-3、copyWithin()
1-4、find()和findIndex()
1-5、fill()
1-6、includes()
1-7、flat()
1-8、flatMap()

二、函数

1、函数参数默认值
2、length
3、name属性
4、箭头函数

三、rest运算符（扩展运算符）

1、作用

1-1、把非数组变成数组
1-2、把数组变成一堆数据**
1-3、复制数组
1-4、合并数组
1-5、配合解构赋值
1-6、复制对象
1-7、合并对象

四、对象

一、数组

1、数组方法

1-1、Array.form()

两类对象转为真正的数组：类似数组的对象和可遍历的对象；
类数组有两类arguments，通过获取元素得到的类数组，本质特征只有一点，必须有length和下标

function show(){
        Array.from(arguments);//通过Array.from()将arguments转为数组
        console.log(arguments);
    }
    show(1,2,3,4)

没有下标时

let json = {
        a: 1, b: 2, length: 2
    }
    console.log(Array.from(json));//[undefined, undefined]

有下标

let json = {
        "0": "1", "1": "2", length: 2
    }
    console.log(Array.from(json));//['1', '2']

1-2、Array.of()

用于将一组值，转换为数组

console.log(Array.of(1, 2, 3));
    console.log(Array.of(10));
    console.log(new Array(1, 2, 3, 4, 5));
    console.log(new Array(7));

数组es6合并 es6数组函数_数组es6合并

Array.of(10)和new Array(10)的区别：前者创建的是有一个元素值为10的数组，后者创建的是长度length为10的空数组

1-3、copyWithin()

（会覆盖原有成员），然后返回当前数组，即使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target,start=0,end=this.length)

target（必需）：从该位置开始替换数组。如果为负数，表示倒数
start（可选）：从该位置开始读取数据，默认为0。如果为负数，表示从末尾开始计算。
end（可选）：到该位置前停止读取数据，默认等于数组的长度。如果为负数，表示从末尾开始计算。

console.log([1, 2, 3, 4, 5, 6].copyWithin(2));//[1, 2, 1, 2, 3, 4]
    console.log([1, 2, 3, 4, 5, 6].copyWithin(2,3));//[1, 2, 4, 5, 6, 6]
    console.log([1, 2, 3, 4, 5, 6, 7, 8, 9].copyWithin(2, 4, 7));//[1, 2, 5, 6, 7, 6, 7, 8, 9]

1-4、find()和findIndex()

value：数组元素
index：数组元素下标
arr：被查找的数组

find(回调函数)：查找满足条件的实际数组项，找到就返回该元素，只返回符合条件的第一个元素，找不到就返回undefined

let a=[3.67, 3, 7, 2].find(function (value,index,arr) {
        console.log(value);
        console.log(index);
        console.log(arr);
        return value>5;//返回大于5的数组项
    })
    console.log(a);//7

findIndex(回调函数)：查找满足条件的实际数组项，找到就返回该元素的下标，只返回符合条件的第一个元素的下标，找不到就返回-1

let b=[2,4,6,8].findIndex(function (value,index,arr){
        return value>4
    })
    console.log(b);//2

1-5、fill()

参数1：替换的内容**（必需）**
参数2：替换开始的位置
参数3：替换结束的位置

console.log([1, 3, 5].fill(6));//[6, 6, 6]
    console.log([1, 3, 5].fill(6, 1));//[1, 6, 6]
    console.log([1, 3, 5, 3, 7, 2, 5].fill(6, 1, 5));//[1, 6, 6, 6, 6, 2, 5]

1-6、includes()

查看数组是否含有这个元素，有返回true，没有则返回false

console.log([1, 4, 7, 5].includes(2));//false
    console.log([1, 4, 7, 5].includes(7));//true

1-7、flat()

该方法返回的是一个新数组，对原数组没有影响，不知道是几维数组时，可以传Infinity（无穷的）

console.log(['这是第一层',1, 2, ['这是第二层', 8, 3]].flat());//['这是第一层', 1, 2, '这是第二层', 8, 3]
    console.log(['这是第一层',1, 2, ['这是第二层', 8, 3, ['这是第三层', 2, 6, 2]]].flat(2));//['这是第一层', 1, 2, '这是第二层', 8, 3, '这是第三层', 2, 6, 2]
    console.log(['这是第一层',1, 2, ['这是第二层', 8, 3, ['这是第三层', 2, 6,['这是第四层', 2, 6, 2]]]].flat(Infinity));//['这是第一层', 1, 2, '这是第二层', 8, 3, '这是第三层', 2, 6, '这是第四层', 2, 6, 2]

1-8、flatMap()

flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map()，然后对返回值组成的数组执行flat()方法。返回一个新数组，不改变原数组。flatMap()只能展开一层数组。

二、函数

1、函数参数默认值

可用于设置函数参数的默认值，这样即使没有传实参或者少传实参时，也不会报错

function show(a = 1, b = 4) {
        return a + b
    }

    console.log(show(7));//11

2、length

参数指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数，即指定了默认值后，length属性将失真。只返回设置了参数默认值之前的length，之后的都会失真，不管之后的有没有设置默认值

function show(a,b,c,d=2,e){

    }
    show(1,2,3,5,4)
    alert(show.length);//3

3、name属性

函数的name属性，返回该函数的属性名

function show(a,b){

    }
    show();
    console.log(show.name)//show

4、箭头函数

箭头函数的简写：

1、如果只有一个参数，括号可以不写,没有参数或多个参数必须加括号

let show=a=>{
        alert(a)
    }
    show(2)

2、如果函数体里面只有一句话，可以不用加{}，return省略

let sum = (a, b) => a + b
    alert(sum(1, 2))//3

箭头函数注意事项：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

//普通函数
   document.onclick = function () {
        function show() {
            alert(this);//window
        }
        show();
    }
//箭头函数
    document.onclick = function () {
        let show=()=>alert(this);//[object HTMLDocument]
        show();
    }

不可以当做构造函数，即不可以使用new命令，否则会抛出一个错误
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替
不可以使用yield命令。因此箭头函数不能用作Generator函数

三、rest运算符（扩展运算符）

又叫做…运算符，剩余参数运算符，扩展运算符

1、作用

1-1、把非数组变成数组

function show(...args){
        console.log(args);//[1, 2, 3]
    }
    show(1,2,3)

把剩余参数转换为数组

function show(a, b, ...args) {
        console.log(args);//[3, 4, 6, 8]
    }
    show(1, 2, 3, 4, 6, 8);

箭头函数没有arguments，可以用…代替

let  show=(...arguments)=>{
        console.log(arguments);//[1, 3, 52]
    }
    show(1,3,52)

1-2、把数组变成一堆数据**

let arr=[3,5,7]
    console.log(arr);//[3, 5, 7]
    console.log(...arr);//3 5 7

1-3、复制数组

let arr=[1,23,4];
    let arr2=[...arr];
    console.log(arr2);//[1, 23, 4]

1-4、合并数组

let arr=[1,2,3];
    let arr2=[7,8,9];
    console.log([...arr, ...arr2]);//[1, 2, 3, 7, 8, 9]

1-5、配合解构赋值

let [a,...arr]=[1,5,8,4];
console.log(a, arr);//1 ,[5,8,4]

1-6、复制对象

let json={a:1,b:2};
    let json2={...json}
    console.log(json2);//{a: 1, b: 2}

1-7、合并对象

let json={a:1,b:2};
    let json2={c:5,d:6};
    console.log({...json,...json2});//{a: 1, b: 2, c: 5, d: 6}

四、对象

ES6中允许在{}内，直接写变量和函数，作为对象的属性和方法

let b = 1
    let json = {
        a: 1,
        b,//b:b
        show() {
            alert('3')
        }
    }

Object.assign()

对象合并。重名的属性，后面的会覆盖前面的。Object.assign（）拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也补考不不可枚举的属性；

let json1={a:1};
    let json2={b:2};
    console.log(Object.assign(json1, json2));//{a: 1, b: 2}
    console.log(json1, json2);//{a: 1, b: 2},{b: 2}

Object.assign（）可以用来处理数组，但是会把数组视为对象

let arr1=[1,2,3,7];
   let arr2=[4,5,6,8,9,10];
   console.log(Object.assign(arr1, arr2));//[4, 5, 6, 8, 9, 10]

Object.is()

判断两个东西是否相等

console.log(Object.is({}, {}));//false
    console.log(+0 == -0);//true
    console.log(Object.is(+0, -0));//false
    console.log(NaN == NaN);//false
    console.log(Object.is(NaN == NaN));//false

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。