ES6之主要知识点(六)数组
引自http://es6.ruanyifeng.com/#docs/array
1.扩展运算符(...)
扩展运算符(spread)是三个点(...
)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
该运算符主要用于函数调用。
function push(array, ...items) {
array.push(...items);
} function add(x, y) {
return x + y;
} var numbers = [, ];
add(...numbers) //
替代数组的 apply 方法
由于扩展运算符可以展开数组,所以不再需要apply
方法,将数组转为函数的参数了。
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [, , ];
f.apply(null, args); // ES6的写法
function f(x, y, z) {
// ...
}
var args = [, , ];
f(...args);
扩展运算符的应用
(1)合并数组
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
(2)与解构赋值结合'
// ES5
a = list[], rest = list.slice()
// ES6
[a, ...rest] = list
(3)字符串
正确识别32位的Unicode字符。
'x\uD83D\uDE80y'.length //
[...'x\uD83D\uDE80y'].length //
(4)Map 和 Set 结构,Generator 函数
let map = new Map([
[, 'one'],
[, 'two'],
[, 'three'],
]); let arr = [...map.keys()]; // [1, 2, 3]
var go = function*(){
yield ;
yield ;
yield ;
}; [...go()] // [1, 2, 3]
2.Array.from()
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和
可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
let arrayLike = {
'': 'a',
'': 'b',
'': 'c',
length:
}; // ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from
还可以接受第二个参数,作用类似于数组的map
方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x); Array.from([, , ], (x) => x * x)
3.Array.of()
Array.of
方法用于将一组值,转换为数组。
Array.of(, , ) // [3,11,8]
Array.of() // [3]
Array.of().length //
Array.of
基本上可以用来替代Array()
或new Array()
,并且不存在由于参数不同而导致的重载。它的行为非常统一。
4.数组实例的 copyWithin()
Array.prototype.copyWithin(target, start = , end = this.length)
它接受三个参数。
- target(必需):从该位置开始替换数据。
- start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
[, , , , ].copyWithin(, )
// [4, 5, 3, 4, 5]
5.数组实例的 find() 和 findIndex()
数组实例的find
方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,
直到找出第一个返回值为true
的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
数组实例的findIndex
方法的用法与find
方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
。
6.数组实例的fill()
fill
方法使用给定值,填充一个数组。
['a', 'b', 'c'].fill()
// [7, 7, 7] new Array().fill()
// [7, 7, 7]
7.数组实例的 entries(),keys() 和 values()
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b' for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
8.数组实例的 includes()
Array.prototype.includes
方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes
方法类似
[, , ].includes() // true
[, , ].includes() // false
[, , NaN].includes(NaN) // true
该方法的第二个参数表示搜索的起始位置,默认为0
。如果第二个参数为负数,则表示倒数的位置、
indexOf
方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1
,表达起来不够直观。
二是,它内部使用严格相等运算符(===
)进行判断,这会导致对NaN
的误判。[NaN].indexOf(NaN)
ES6之主要知识点(六)数组的更多相关文章
- Java阶段性测试--知识点:数组,面向对象,集合、线程,IO流
#Java基础测试 涉及知识点:数组,面向对象,重载,重写,继承,集合,排序,线程,文件流 一.多项选择题(可能是单选,也可能是多选) 1.下列标识符命名不合法的是( D ). A.$_Name ...
- es6的一些知识点
es6的一些知识点 前言:es6(ECMAscript2015)标准 let.const.var的一些区别 let.const 块级作用域.全局作用域.函数作用域 var 全局作用域.函数作用域 变量 ...
- ES6复习干货知识点汇总
一.问:ES6是什么,为什么要学习它,不学习ES6会怎么样? 答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优 ...
- ES6之主要知识点(二) 变量的解构赋值。默认值
引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2 ...
- ES6学习笔记(六)数组的扩展
1.扩展运算符 1.1含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // ...
- ES6学习笔记(六)-数组扩展
- 细说php(六) 数组
一.数组概述 1.1 数组是复合类型 1.2 数组中能够存储随意长度的数据, 也能够存储随意类型的数据 二.数组的类型 2.1 索引数组: 下标是顺序整数作为索引 <?php $user[0] ...
- es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...
- ES6/ES2015常用知识点和概念
越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日, ...
随机推荐
- 8.spark Core 进阶1
(e.g. standalone manager, Mesos, YARN) In "cluster" mode, the framework launches the ...
- thinkphp 模块化设计
一个完整的ThinkPHP应用基于模块/控制器/操作设计,并且,如果有需要的话,可以支持多入口文件和多级控制器. ThinkPHP3.2采用模块化的架构设计思想,对目录结构规范做了调整,可以支持多模块 ...
- H5 小代码(实时更新)
:before { content: ''; display: inline-block; vertical-align: middle; height: %; } ↑ 自适应垂直居中 .clear ...
- dart中extends、 implements、with的用法与区别
一.概述 继承(关键字 extends) 混入 mixins (关键字 with) 接口实现(关键字 implements) 这三种关系可以同时存在,但是有前后顺序: extends -> m ...
- text-html 转译
var HtmlUtil = { 2 /*1.用浏览器内部转换器实现html编码(转义)*/ 3 htmlEncode:function (html){ 4 //1.首先动态创建一个容器标签元素,如D ...
- linxu(centos)安装nginx
安装make: yum -y install gcc automake autoconf libtool make 安装g++: yum install gcc gcc-c++ 下面正式开始 ---- ...
- 多线程--GIL锁
GIL 即全局解释器锁,是一个互斥锁,防止多个线程在同一时间执行python代码,因为在一个python进程中,不仅有主线程而且还有该主线程开启的子线程,还有解释器开启的垃圾回收机等解释器级别的线程. ...
- Vue学习笔记——Vue-router
转载:https://blog.csdn.net/guanxiaoyu002/article/details/81116616 第1节:Vue-router入门 .解读router/index.js文 ...
- 第二十篇:记下第一个mysql触发器
项目背景:给一个服务限制访问次数,当用户访问这个服务的次数达到这个值的时候,关闭他的访问权限首先访问信息存在一张表中,记录用户的ip:visitor_ip,服务的id:service_id,访问次数: ...
- Echarts——更改仪表盘方向和颜色
做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...