引自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之主要知识点(六)数组的更多相关文章

  1. Java阶段性测试--知识点:数组,面向对象,集合、线程,IO流

    #Java基础测试 涉及知识点:数组,面向对象,重载,重写,继承,集合,排序,线程,文件流 一.多项选择题(可能是单选,也可能是多选) 1.下列标识符命名不合法的是(   D  ). A.$_Name ...

  2. es6的一些知识点

    es6的一些知识点 前言:es6(ECMAscript2015)标准 let.const.var的一些区别 let.const 块级作用域.全局作用域.函数作用域 var 全局作用域.函数作用域 变量 ...

  3. ES6复习干货知识点汇总

    一.问:ES6是什么,为什么要学习它,不学习ES6会怎么样? 答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优 ...

  4. ES6之主要知识点(二) 变量的解构赋值。默认值

    引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2 ...

  5. ES6学习笔记(六)数组的扩展

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

  6. ES6学习笔记(六)-数组扩展

  7. 细说php(六) 数组

    一.数组概述 1.1 数组是复合类型 1.2 数组中能够存储随意长度的数据, 也能够存储随意类型的数据 二.数组的类型 2.1 索引数组: 下标是顺序整数作为索引 <?php $user[0] ...

  8. es6学习笔记--字符串&数值&数组&函数&对象的扩展

    这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...

  9. ES6/ES2015常用知识点和概念

    越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日, ...

随机推荐

  1. 8.spark Core 进阶1

        (e.g. standalone manager, Mesos, YARN)   In "cluster" mode, the framework launches the ...

  2. thinkphp 模块化设计

    一个完整的ThinkPHP应用基于模块/控制器/操作设计,并且,如果有需要的话,可以支持多入口文件和多级控制器. ThinkPHP3.2采用模块化的架构设计思想,对目录结构规范做了调整,可以支持多模块 ...

  3. H5 小代码(实时更新)

    :before { content: ''; display: inline-block; vertical-align: middle; height: %; } ↑  自适应垂直居中 .clear ...

  4. dart中extends、 implements、with的用法与区别

    一.概述 继承(关键字 extends) 混入  mixins (关键字 with) 接口实现(关键字 implements) 这三种关系可以同时存在,但是有前后顺序: extends -> m ...

  5. text-html 转译

    var HtmlUtil = { 2 /*1.用浏览器内部转换器实现html编码(转义)*/ 3 htmlEncode:function (html){ 4 //1.首先动态创建一个容器标签元素,如D ...

  6. linxu(centos)安装nginx

    安装make: yum -y install gcc automake autoconf libtool make 安装g++: yum install gcc gcc-c++ 下面正式开始 ---- ...

  7. 多线程--GIL锁

    GIL 即全局解释器锁,是一个互斥锁,防止多个线程在同一时间执行python代码,因为在一个python进程中,不仅有主线程而且还有该主线程开启的子线程,还有解释器开启的垃圾回收机等解释器级别的线程. ...

  8. Vue学习笔记——Vue-router

    转载:https://blog.csdn.net/guanxiaoyu002/article/details/81116616 第1节:Vue-router入门 .解读router/index.js文 ...

  9. 第二十篇:记下第一个mysql触发器

    项目背景:给一个服务限制访问次数,当用户访问这个服务的次数达到这个值的时候,关闭他的访问权限首先访问信息存在一张表中,记录用户的ip:visitor_ip,服务的id:service_id,访问次数: ...

  10. Echarts——更改仪表盘方向和颜色

    做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...