es6+最佳入门实践(3)
3.数组扩展
3.1.扩展运算符
扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下:
let arr = [1, 2, 3];
console.log(...arr); //打印结果 1 2 3
//等价于
console.log(1,2,3);
从上面代码中,我们可以看出...arr展开后的形式是这样的 1,2,3,用逗号隔开的参数序列
在函数调用的时候,可以用这个扩展运算符把数组里面的元素展开,分别传给函数的形参
let arr = [4, 5, 6];
function Fn(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
return a + b + c;
}
result = Fn(...arr);
console.log(result);
扩展云算符可以和正常参数结合起来使用,非常的灵活
let arr = [4, 5, 6];
function Fn(a, b, c, d, e, f) {
console.log(a);
console.log(b);
console.log(c);
console.log(d, e, f)
}
Fn(1,...arr, 2, 3); //注意一一对应关系:1->a;...arr->b,c,d;2->e; 3->f
总结: 掌握扩展运算符在传参应用中的关键是抓住他们的一一对应关系
扩展运算符应用
1.复制数组
如果把一个数组直接赋值给另一个数组,那么会产生引用,相互影响,在es5中,只能通过变通的方式复制数组,但在es6中,我们可以通过扩展运算符来实现数组复制
//直接赋值 产生引用
let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr) // [1, 2, 3, 4]
//es5 中复制数组
let arr3 = arr.concat();
console.log(arr3)
//es6中复制数组
let arr4 = [...arr];
arr4.push(5);
console.log("arr4",arr4); //[1,2,3,5]
console.log("arr",arr) //[1,2,3] 和arr4并不会相互影响
2.合并数组
let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr,...arr2]) // [1, 2, 3, 4, 5, 6]
3.和解构赋值结合,用于生成数组
let [a, b, ...rest] = [1, 2, 4, 5, 6, 7]
console.log(rest); //[4, 5, 6, 7]
3.2.Array.from
Array.from可以把类数组转成真正的数组
<ul>
<li>nodeing_1</li>
<li>nodeing_2</li>
<li>nodeing_3</li>
<li>nodeing_4</li>
<li>nodeing_5</li>
<li>nodeing_6</li>
</ul>
<script>
let aLi = document.getElementsByTagName('li')
for(let i in aLi){
aLi[i].style.color = "red" //执行报错
}
</script>
上面报错原因是因为aLi是类数组,除了下标外还有其他属性,例如length属性, aLi[length].style.color,这样就会报错
let aLi = document.getElementsByTagName('li')
for(let i in Array.from(aLi)){
aLi[i].style.color = "red"
}
3.3.Array.of
这个方法可以将一组数值转换成数组
let arr = Array.of(1, 2, 3,4)
console.log(arr) // [1,2,3,4]
这个方法的主要应用就是弥补Array的不足,基本上看可以取代Array()和new Array,当Array传入一个参数的时候,表示给数组设置长度,传入的参数大于等于2的时候,才返回数组,因此,参数的不同导致行为的差异
//Array的行为不统一,根据参数的不同返回的结果不一样
let arr = Array(4)
let arr2 = Array(1, 3)
let arr3 = Array(1,3,4,5);
console.log(arr, arr2, arr3) // [empty × 4] 、[1, 3]、 [1, 3, 4, 5]
Array.of不管传入多少参数,返回的都是数组
let arr = Array.of(4)
let arr2 = Array.of(1, 3)
let arr3 = Array.of(1,3,4,5)
console.log(arr, arr2, arr3) // [4] [1, 3] [1, 3, 4, 5]
3.4.copyWithin
将数组内部指定位置的元素复制到指定的目标位置
let arr = [1, 2, 3, 4, 5]
//第一个参数为目标起始位置 第二个参数为被复制元素的开始位置,第三个参数为被复制元素的结束位置
//将下标3到4的元素 复制到下标为1的位置 原来位置的元素被覆盖
arr.copyWithin(0, 3, 4) //[4,2,3,4,5]
console.log(arr)
3.5.find和findIndex
find方法用来查找数组中符合条件的第一个元素,接收一个回调函数
let arr = [1, 2, 3, 4, 5]
arr.find(function (v,i,a) {
//第一个参数是每个数组元素,第二个参数是对应数组元素到索引,第三个参数是当前的数组
console.log(v,i,a);
})
let arr = [1, 2, 3, 4, 5]
let num = arr.find(function (v,i,a) {
return v > 3
})
console.log(num) //4
findIndex的用法和find类似,返回的是索引位置,而不是具体的值
let arr = [1, 2, 3, 4, 5]
let num = arr.findIndex(function (v,i,a) {
return v > 3
})
console.log(num) //3
3.6.fill
fill方法用于填充数组
let arr = [1,2,8,8,8]
arr.fill(1)
console.log("arr",arr)
3.7.entries、keys和values
这几个方法应用在遍历数组中
let arr = [1, 2, 3, 4, 5];
//遍历键名
for(let index of arr.keys()){
console.log(index)
}
//遍历值
for(let v of arr.values()){
console.log(v)
}
//遍历键/值对
let arr = [1, 2, 3, 4, 5];
for(let index of arr.keys()){
console.log(index)
}
3.8.includes
includes方法的作用是查看某个数组是否包含给定的值,返回一个布尔值,true表示包含,false表示没有这个值
let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(7)) //false
console.log(arr.includes(1)) //true
视频教程地址:http://edu.nodeing.com/course/50
es6+最佳入门实践(3)的更多相关文章
- es6+最佳入门实践(14)
14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...
- es6+最佳入门实践(12)
12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...
- es6+最佳入门实践(10)
10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...
- es6+最佳入门实践(9)
9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...
- es6+最佳入门实践(8)
8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...
- es6+最佳入门实践(7)
7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...
- es6+最佳入门实践(6)
6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...
- es6+最佳入门实践(5)
5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...
- es6+最佳入门实践(4)
4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...
随机推荐
- MyFirstDay(附6篇python亲历面试题)
一直以来都是在看别人写的内容,学习前辈们的经验,总感觉自己好像没有什么值得拿出来分享和交流的知识,最近在准备换工作(python后端开发),坐标上海,2019年3月,半个月面了6家(感觉效率是真不高. ...
- Web性能测试问题,mysql分析之一
在做性能测试执行中,发现性能很慢,顺藤摸瓜找一下是什么问题? 并发40个用XXX场景 1.运行过程中监控mysql数据库的CPU过高,达到65%: %CPU %Mem %Disk %Net ...
- CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南
在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布 ...
- vlc 编译
一.有用的网址: https://forum.videolan.org/search.php 二.只编译Java apk部分: source env.shmake distcleanmake -e 编 ...
- linux 广播
广播是一台主机向局域网内的所有主机发送数据.这时,同一网段的所有主机都能接收到数据.发送广播包的步骤大致如下: (1)确定一个发送广播的接口,如eth0 (2)确定广播的地址,通过ioctl函数,请求 ...
- 常见排序算法题(java版)
常见排序算法题(java版) //插入排序: package org.rut.util.algorithm.support; import org.rut.util.algorithm.Sor ...
- 剑指Offer - 九度1513 - 二进制中1的个数
剑指Offer - 九度1513 - 二进制中1的个数2013-11-29 23:35 题目描述: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 输入: 输入可能包含多个测试样例. ...
- 《Cracking the Coding Interview》——第3章:栈和队列——题目5
2014-03-18 05:33 题目:用两个栈来实现一个队列. 解法:栈是反的,队列是正的,反了再反就正过来了.所以,请看代码.操作中时间复杂度有O(1)的,有O(n)的,但均摊下来时间符合O(1) ...
- Pascal小游戏 井字棋
一个很经典的井字棋游戏 Pascal源码Chaobs奉上 注意:1.有的FP版本不支持汉语,将会出现乱码.2.别想赢电脑了,平手不错了. 井字过三关: program TicTacToe; uses ...
- Git——1.简介
关于版本控制 Git基础 安装Git 初始运行Git前的配置 获取帮助 关于版本控制 版本控制(VCS)是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 本地版本控制系统 大多都 ...