ES6学习(三):数组的扩展
chapter08 数组的扩展
8.1 扩展运算符
8.1.1 扩展运算符的含义
...
如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列。
console.log(...[1, 2, 3]) // 1, 2, 3
// 用于函数调用
function add (x, y) {
return x + y;
}
add(...[1, 2]); // 3
8.1.2 代替数组的apply方法
apply方法可以将数组转为函数的参数
// ES5的写法
function f (x, y ,z) {
// todo
}
let args = [1, 2, 3];
f.apply(null, args);
// ES6的写法
function f (x, y ,z) {
// todo
}
let args = [1, 2, 3];
f(...args);
8.1.3 扩展运算符的应用
合并数组
// ES5
[1, 2].concat(more);
// ES6
[1, 2, ...more]
与解构赋值相结合
// ES5
a = list[0]
rest = list.slice(1);
// ES6
[a, ...rest] = list; const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4 ,5]
注意:如果扩展运算符用于解构赋值,只能将其放置在参数的最后一位
处理函数的返回值
函数返回了一个可枚举的数据类型,则可以对其使用扩展运算符处理。
字符串
[...'hello'] // ['h', 'e', 'l', 'l', 'o']
这种写法的好处是可以正确识别32位的Unicode
function length (str) {
return ...str.length;
}
以上函数可以正确返回字符串的长度
Iterator接口
扩展运算符可以作用在任何实现了Iterator接口的数据类型上(Map, Set, Generator等)。
8.2 Array.from()
Array.from()用于将两类对象转换为真正的数组:类似数组的对象和可遍历的对象(包括ES6新增的Set和Map)。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike);
常见的类数组对象:DOM操作返回的NodeList对象和arguments对象。
所谓类数组,本质特征只有一点:必须具有length属性。任何有有length属性的对象,都可以通过Array.from方法转为数组。
...
扩展运算符也可以将某些数据结构转换成数组,但是其原理是通过Iterator接口转换。
Array.from({ length: 2});
// [undefined, undefined]
Array.from()还可以接受第二个参数,作用类似于数组的map方法,用于对每一个数组元素进行处理,并且将处理后的值放入返回的数组。
如果map函数里面用到了this,还可以指定第三个参数用来绑定this。
Array.from({ length: 2 }, () => 'jack');
// ['jack', 'jack']
function countSymbol (string) {
return Array.from(string).length;
}
8.3 Array.of()
将一组值转换为一个数组,主要是用来解决Array构造函数的怪异。
8.4 数组实例.copyWithin()
在数组内部进行复制,参数(target, start, end)
- target (可选)开始进行复制的下标
- start (可选)开始被复制的下标
- end (可选)要被复制的范围,不包括
8.5 Array.find() & Array.findIndex()
作用就和名称一致。
参数:
fn (value, index, arr) {}
筛选函数,最多接受三个参数
this
筛选函数的this对象
8.6 Array.fill()
填充数组
扩展版本:Array.fill(str2Fill, start, end)
指定填充的区间 [ start, end )
8.7 数组实例的enties() keys() values()
分别返回三种迭代器,可以使用 for/of 或者 next() 方法进行迭代。
8.8 数组实例的includes() 方法
见名知义
includes()和find()方法可以找到NaN
8.9 数组的空位
ES6将空位视为undefined
空位处理的规则并不统一,所以建议尽量不要出现空位。
ES6学习(三):数组的扩展的更多相关文章
- ES6 学习6 数组的扩展
本章学习要点: 扩展运算符 Array.from() Array.of() 数组实例的 copyWithin() 数组实例的 find() 和 findIndex() 数组实例的 fill() 数组实 ...
- ES6中对数组的扩展
hello,大家好,我又来了. 前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白 ...
- js-ES6学习笔记-数组的扩展
1.Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map). 实际应用中 ...
- ES6-11学习笔记--数组的扩展
类数组 / 伪数组 Array.from() Array.of() copyWithin() fill() includes() 类数组.伪数组例子: let divs = document.ge ...
- ES6学习之数组扩展
扩展运算符(...将数组分割为用逗号分割的参数序列) console.log(...[1,2,3]) //1 2 3 可替换数组的apply写法: function test(x,y,z){ cons ...
- ES6中的数组方法扩展
上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
- ES6学习笔记(二)——字符串扩展
相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...
- ES6学习历程(字符串的扩展)
字符串的扩展 在看这一节的时候前半部分写的都是关于unicode的内容,我个人感觉这部分在实际的开发中用的很少,所以不打算在做记录,等届时用到再有针对性的看,所以就将在ES6里面关于字符串操作的一些新 ...
- JavaScript学习笔记--ES6学习(四) 字符串的扩展
ES6对字符串进行了一些扩展,主要表现在对Unicode 大于\uFFFF的字符的处理上. 1. ES6中字符的Unicode表示方法 在ES5中,字符串的Unicode表示方法: \uxxxx . ...
随机推荐
- jQuery源代码学习_工具函数_type
jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...
- 构建web应用
一.web服务器示例 var http = require('http'); http.createServer(function(req, res){ res.writeHeader(200, {C ...
- intellijidea课程 intellijidea神器使用技巧2-1 无处不在的跳转
idea快捷键(基于windows平台) 1 书签跳转 Ctrl alt [ ] ==> 项目之间的跳转 Ctrl shift E ==> 文件之间的跳转(最近编辑的文件) Ctrl ...
- JavaScript比较和逻辑运算符
JavaScript比较和逻辑运算符 JavaScript比较和逻辑运算符 比较和逻辑运算符用于测试true或者false. 比较运算符 比较运算符在逻辑语句中使用,以测定变量或值是否相等 例如设定x ...
- Java —类和对象
类和对象 类是对象的类型,是具有相同的属性和方法的一组对象的集合. 定义类 访问修饰符 class 类名 { 数据类型 属性名: 访问修饰符 返回值类型 方法名 {} } 创建对象:类名 对象名 = ...
- sharepoint 查阅项SPFieldLookup 赋值 .
在项目中,经常会涉及列表或者文档库之间的相互引用,而这个时候我们用的更多的就是查阅项(lookup),以前没有去关注取值或者赋值的问题,今天正好碰到一个Case,就顺道总结一下.我们知道链接和图片的字 ...
- WebRTC协议
webrtc协议介绍 MDN webrtc协议 ICE 交互式连接建立Interactive Connectivity Establishment (ICE) 是一个允许你的浏览器和对端浏览器建立连接 ...
- Spring Boot入门程序-STS
使用Eclipse EE 中的 Spring Tool插件,完成 第一个Spring Boot应用程序的创建. 一.安装Spirng Tool插件 在 Eclipse EE Oxygen版本,安装“S ...
- Linux目录配置——Linux目录配置标准:FHS
事实上,FHS针对目录树架构仅定义出三层目录下应该放置哪些数据,分别是下面三个目录: 一./(根目录):与开机系统有关 根目录(/)所在分区应该越小越好,且应用程序所安装的软件最好不要与根目录放在同一 ...
- Suggestion: use tools:overrideLibrary="android.support.v17.leanback" to force usage
Android Studio下修改方法: 在manifest中添加<uses-sdk tools:overrideLibrary="android.support.v17.leanba ...