ES6数组操作新特性,拓展运算符

数组新特性

1. 拓展运算符 …

在讨论拓展运算符之前,还是先来一起看一下深浅拷贝的老话题,在ES5阶段,我们就已经学习了深浅拷贝。
浅拷贝拷贝地址,也就是我们说的拷贝指针,不论原对象还是拷贝对象发生变化,那么内容也会肯定发生变化。
深拷贝拷贝内容,说白了就是拷贝对象重新申请了一块内存来进行存储内容,我们的拓展运算符在这里就可以有运用了。具体来看下代码

浅拷贝:

   let arr10 = [1, 2, 3]
    let arr20 = arr10 //浅拷贝
    arr20[1] = 10
    console.log(arr10);//[1,10,3]

这个是一个典型的浅拷贝,我们只是拷贝了指针。再来看下深拷贝

深拷贝:

最笨的方法 使用for循环,来push到一个新数组里面

 let arr30 = []
    for (let i = 0; i < arr10.length; i++) {
        arr30.push(arr10[i])
    }
    console.log(arr30);

使用concat

let arr2 = [].concat(arr)

这个够简单,但是还不够简单

我们再来看一下ES6给我们提供的新方法

let arr2 = [...arr]

就这样,我们就可以直接拷贝到arr的值

拓展运算符的作用就是将数组分割,并将个项作为分离的参数传给函数

这样我们就可以知道,拓展运算符还可以做一些好玩的事情

合并数组

let e = [...a,...b,...c]//这样就可以把abc三个数组直接连接起来

解析字符串

let arr = [...'hello']//['h','e','l','l','o']

类数组转换为数组

let ps = doucment.getElementByTagName('p')
let arr = [...ps]//可以拿到每一个<p></p>

2.Array 构造函数新增方法
1.Array.from()将类数组对象转换为数组对象

2.Array.of(a,b,c)相当于创建了一个新数组
这里要注意的是,Array.of(3)!=new Array(3)
前者表示的是数值为3,后者表示数组长度为3

3.Array.isArray(arr) 判断arr是否是一个数组,返回布尔值

3.数组新增对象的方法

1.find() 返回数组中第一个满足条件的元素
2.findIndex()返回数组中第一个满足条件的元素的索引

3.entries()帮助数组遍历每一个key值和value值
4.keys() 帮助数组遍历所有key值

5.includes()数组中存在某个值,返回布尔值,和indexOf用法相同

6.filter() 过滤数组单元,将满足条件的元素过滤
7.map() 对数组进行遍历,将计算后的值返回数组

8.some()只要有一个满足条件,返回ture
9.every()只要有一个不满足条件,则返回false
10.reduce((x,y)=>x+y)做累加

数组的新增方法的使用在这里整理一张思维导图
在这里插入图片描述

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值