es6数组的扩展

时间:2022-09-07 20:38:48

数组扩展运算符 ...(三个点)

        const demoArr=[0,1,2,3,4]
console.log(...demoArr)
// 0 1 2 3 4 // 他把一个数组用逗号分隔了出来
// 求和 A
function sunA(one,two,three,four,five){
console.log(one+two+three+four+five)
}
// 求和 B
function sunB(array){
array.forEach(val => {
this.valSun+=val
});
console.log(this.valSun)
} sunA(...demoArr)
sunB(demoArr)

es6数组的扩展

数组是不能push数组的,但是用扩展运算符可以直接传入数组

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

es6数组的扩展

扩展符还可以让复制数组变得简单

es6数组的扩展

图上第一种方法为什么会  2,2  因为 数组是引用类型           a2=a1相当于是把a2指向了a1指向的堆

是改变了栈里边指针的值 所以  堆的数据变了  a1  a2都会变

第二种是用扩展符   是a3对a1的一个浅拷贝 相当于一个新的栈指向了一个新的堆

但是浅拷贝不会拷贝a1里边的子对象  比如

 var obj1 = ['zhangsan',
'18',
[1, [2, 3],
[4, 5]
]
] var obj2 = obj1; var obj3 = [...obj1]; obj2[0] = "lisi";
obj3[1] = "20"; obj2[2][1] = ["二", "三"];
obj3[2][2] = ["四", "五"]; console.log(obj1); console.log(obj2); console.log(obj3);

想全部不影响可以参考深拷贝  ,个人感觉就是递归拷贝

用扩展符 给数组赋值

es6数组的扩展

注意扩展符只能放在最后,放前边会报错

扩展符还可以用来转换Unicode  ,Unicode 是一个二进制编码

Unicode 它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。

扩展运算符 的目标是一个对象的话 需要是一个有Iterator的对象,不然会报错,如果没有的话 可以用Array.from()去转换

不过前提是  对象里边有length属性,没有的话是转换不成功的

es6数组的扩展

 const Obj4 ={
"0":"0",
"1":"1",
"2":"2",
"3":"3",
length:4
}
console.log(Array.from(Obj4))

Array.form还可以转换dom数组对象

es6数组的扩展

总结就是扩展运算符靠的是iterator(遍历器接口),from()依靠的是length属性

Array.from()还可以传入第二个和第三个参数,第二个参数类似于map方法  可以对第一个参数的值进行操作,拽个例子

第三个参数是用于第二个参数有this的时候绑定this的

function typesOf () {
return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']
Array.of()
这个函数不管传入什么几个参数,传入几个参数就转换成对应的数组,Array()的构造函数是大于两个参数的时候会转换为数组,一个参数的
时候是说的数组的长度 Array.of() 比Array()更有行为一致性
Array.of(3, 11, 8) // [3,11,8]

Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.copyWithin() 三个参数 第一个参数是必填的 表单从数组的某个值开始复制
第二个代表从数组的哪里开始复制
第三个标识从数组的哪里结束
如果只填第一个参数的话默认是复职整个数组
如果第二个和第三个参数是一个下标的话 数组不变 es6数组的扩展 find() 和 findIndex() find()一共有两个参数 一个回调函数 和一个this指向的值 回调函数里边有三个参数
分别是 当前的数值 当前的下标和当前的数组 es6数组的扩展 fill()方法
这个方法接收三个参数 和上边的copyWithin有些类似 他做的是覆盖
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

但是如果赋值的是引用类型   那么赋值的是指向同一个地址的对象,会关联其他的值

values() keys() entries()

这三个是用来遍历数组的  他们返回一个带有Iterator的数组

es6数组的扩展

这样就可以用for去循环遍历他

includes()这个方法就很常用了我之前经常用到  他是看数组里边有没有对应的值  如果有的话  就返回true如果没有就返回false

第二个参数是开始索引的位置 这个比indexOf()方法要方便一些 indexOf返回的下标  没有的话返回-1 includes()不用去比较-1



flat()  这个方法可以把一个二维数组转成一维数组默认展开一层 如果需要展开剁成数组的话  可以穿一个参数

flatMap() 这个方法传入两个参数  一个回调一个this指向    回调传入三个参数   第一个是对当前值的操作  且 会展开一层数组
第二个是从哪个下标开始操作 第三个是原数组 以上是对es6 数组的扩展的理解 如有不足或不对之处 希望批评指正
indexOf

es6数组的扩展的更多相关文章

  1. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  2. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

  3. ES6 数组的扩展

    1. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回. 下面是一个类数组 let arr = { '0':'a', '1':'b' ...

  4. ES6数组的扩展运算符

    一.基本使用 ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面. let fn = (a, ...value) => { console.log(a); c ...

  5. ES6数组扩展

    前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...

  6. ES6的新特性(8)——数组的扩展

    数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...

  7. ES6学习(三):数组的扩展

    chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...

  8. Es6学习笔记(7)----数组的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...

  9. ES6 数组、对象的扩展

    8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...

随机推荐

  1. UART RS232 的CTS与RTS

    目前较为常用的串口有9针串口(DB9)和25针串口(DB25),通信距离较近时(<12m),可以用电缆线直接连接标准RS232端口(RS422,RS485较远),若距离较远,需附加调制解调器(M ...

  2. 【解决ViewPager在大屏上滑动不流畅】 设置ViewPager滑动翻页距离

    在项目中做了一个ViewPager+Fragment滑动翻页的效果,在模拟器和小米手机上测试也比较正常.但是换到4.7以上屏幕测试的时候发现老是滑动失效. 因为系统默认的滑动策略是当用户滑动超过半屏之 ...

  3. kettle的HTTPPOST控件发送WSDL的webservice请求配置

    1.webservice请求的URL:http://pubservice.rjhn.com.cn/AppserviceTest/JsonWcfService.svc?WSDL 2.使用SOAPUI测试 ...

  4. 处理ASP&period;NET Core中的HTML5客户端路由回退

    在使用由Angular,React,Vue等应用程序框架构建的客户端应用程序时,您总是会处理HTML5客户端路由,它将完全在浏览器中处理到页面和组件的客户端路由.几乎完全在浏览器中... HTML5客 ...

  5. java线程池ThreadPoolExecutor 如何与 AsyncTask&lpar;&rpar; 组合使用

    简单说下Executors类,提供的一系列创建线程池的方法: 他们都有两个构造方法 1. --------newFixedThreadPool (创建一个定长线程池,可控制线程最大并发数,超出的线程会 ...

  6. (二)Servlet入门之HelloWorld

    在整个Servlet程序中最重要的就是Servlet接口,在此接口下定义了一个GenericServlet的子类,但是,一般不会直接继承此类,而是根据所使用的协议选择GenericServlet的子类 ...

  7. 【数据下载】利用wget命令批量下载ftp文件和文件夹

    这是一个“”数据大发现”的时代,大家都在创造数据,使用数据以及分享数据,首先一步我们就需要从数据库download我们需要的数据. Ftp是一种常见的在线数据库,今天介绍一种可以批量下载文件夹的方法, ...

  8. flink入门:01 构建简单运行程序

    1. mac平台安装flink(默认最新版) brew install apache-flink 安装结果: Version 1.7.1, commit ID: 89eafb4 2. jdk版本,我尝 ...

  9. 『编程题全队』Alpha 阶段冲刺博客Day2

    1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威:   确定了本阶段的团队目标   确定了个人所分配的任务(主要为客户端GUI模块) 孙慧君:    确定了自己的任务,并着手开始环境 ...

  10. 学习 TList 类的实现&lbrack;3&rsqb; - 不能回避的话题&colon; 内存分配

    在 Delphi 中, 几乎所有的类型都有对应的指针类型, 譬如: Char PChar Word PWORD Double PDouble TPoint PPoint 甚至一种类型对应这着几种指针类 ...