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的强大功能还须一些时日, ...
随机推荐
- 数据库MySQL--修改数据表
创建数据库::create database 数据库名: 如果数据不存在则创建,存在不创建:Create database if not exists 数据库名 ; 删除数据库::drop datab ...
- npm ERR! Failed at the gff@1.0.0 start script.
code ELIFECYCLE npm ERR! errno 1 npm ERR! gff@1.0.0 start: `node build/dev-server.js` npm ERR! Exit ...
- CSIC_716_20191107【深拷贝、文件的编码解码、文件的打开模式】
深拷贝和浅拷贝 列表的拷贝,用copy方法浅拷贝,新列表和被拷贝列表的id是不一样的. list1 = [1, 'ss', (5, 6), ['p', 'w','M'], {'key1': 'valu ...
- CSIC_716_20191105【数字、字符串、列表】
python数据类型及其内置方法 一.整型:主要用于数学运算 其他进制----->转十进制 """ 其他进制转换为十进制 通过int('x进制数',x)实现 &qu ...
- Windows 开启win32 控制台
{ AllocConsole(); FILE *Journal = NULL; freopen_s(&Journal, "CONOUT$", &qu ...
- 代码执行批量Excel数据导入Oracle数据库
由于基于Oracle数据库上做开发,因此常常会需要把大量的Excel数据导入到Oracle数据库中,其实如果从事SqlServer数据库的开发,那么思路也是一样的,本文主要介绍如何导入Excel数据进 ...
- python queue, pipe, manage
线程中的Queue import time import threading import queue import random def putMessage(): for i in "H ...
- expect离线安装
expect5.45.4.tar.gz和tcl8.4.11-src.tar.gz压缩包请前往以下链接下载: https://download.csdn.net/download/gangzi221/1 ...
- PHP实现对短信验证码发送次数的限制
http://www.jb51.net/article/94878.htm 对用户获取短信验证码的手机号.ip.和浏览器(使用唯一标识)进行限制.本文介绍的方法是对用户每天只能通过同一浏览器或同一ip ...
- POJ 2932 平面扫描 /// 判断圆的包含关系
题目大意: 平面上有n个两两不相交的圆,给定圆的圆心(x,y)和半径 r 求所有最外层的 即 不包含于其他圆内部的圆 挑战258页 平面扫描 记录所有圆的左端和右端 排序后 逐一扫描 将到当前圆为止的 ...