深度解析 ES6 第一篇
ECMAScript 6 简称 “ES6”，ES6 包含了很多新的语言功能，且这些语言功能使得 JavaScript 更加强大更富有表现力。下面我将会一步步介绍
ES6 新增的那些功能。PS：请轻拍，理解不到位的地方请指出，谢谢！
欢迎来到深度解析
ES6！在这个新的周系列里，我们将探索 ECMAScript 6。这是一种 JavaScript 语言即将到来的新版本。ES6 包含了很多新的语言功能，且这些语言功能使得 JS 更加强大更富有表现力。在接下来的几周时间里，我们将会一个一个地了解这些新功能。但是在我们了解细节的东西之前，我们值得花一点时间来讨论一下什么是 ES6 以及你期望能得到什么。
JavaScript 编程语言是由 ECMAScript 名下的 ECMA 进行标准化制定的( ECMA 是和 W3C 一样的标准化组织 )。除此之外，ECMAScript 可如下定义：
语法－解析规则，关键字，语句，声明，操作等等。类型－布尔型，数字，字符串，对象等等。原型和继承。内置对象和函数的标准库 - JSON ，数学( Math )， 数组方法( Array methods )，对象内省的方法( Object introspection methods )等等。
其没有定义与 HTML 、CSS 或者 Web API 交互的内容，比如 DOM ( 文档对象模型 )。那些都是在单独的标准中定义的。 ECMAScript 不仅在浏览器环境中的涵盖了 JS 的所有方面，其在非浏览器环境中也涵盖了 JS ，例如 node.js 。
上周， ECMAScript 语言规范的最终草案，第 6 版，被提交给 ECMA 大会进行审查。这意味着什么呢？
这意味着这个夏天，。
这是一个大新闻。新的 JS 语言不是每天都可能出现的。 上一个版本，ES5，可以追溯到 2009 年。从那时起，ES 标准委员会就一直致力于 ES6 的制定直至今日。
ES6 是语言的一次重大的升级。同时，你的 JS 代码也可以继续工作。ES6 被设计为可以最大程度兼容现有的代码。事实上，很多浏览器已经支持丰富的 ES6 的功能，同时实现工作也正在进行中。这就意味着你所有的 JS 代码已经可以在那些实现一些 ES6 功能的浏览器里面运行！如果你到现在还没有看到任何兼容性问题，你可能永远也不会碰到这些问题了。
ECMAScript 标准的先前的版本分别编号为 1，2，3 和 5。
第四版本发生了什么？第 4 版的 ECMAScript 曾是在计划之中的，并且事实上大量的工作也已经完成了。但由于它过于的繁琐，其最终被废弃了。 ( 例如，它在静态类型系统中对泛型和类型推断有一个复杂的选择。)
ES4 是有争议的。当标准委员会最终停止继续制定时，该委员会成员同意出版一个相对温和的 ES5 ，然后继续工作以制定更多的有较大幅度改进的新功能。这个直接通过谈判达成的协议被称为“和谐（Harmony）”，这也是为什么 ES5 规范包含这两句话：
ECMAScript 是一个充满活力的语言且其语言的演化还不完整。在未来的 ECMAScript 的版本中将有较大提升的技术的声明。
这种说法也可以被看作是委员会给出的一个承诺。
ES5 在 2009 年对语言进行了更新，其介绍了 Object.create( ), Object.defineProperty( ), getter 和 setter 方法，strict 模式和 JSON 对象。我已经使用了所有的这些功能，而且我喜欢 ES5 对语言做出的贡献。但是， 这些功能中的任何一种都没有对我写 JS 代码的方式产生巨大的影响。对我来说其最重要的创新，很可能是新的数组方法：.MAP，filter 等等。
然而，ES6 是决然不同的。它是多年和谐工作的产物。 同时，它是新的语言和库功能的宝库，其是迄今为止 JS 的最实质性的升级。 其新功能涵盖面很广，从那些很受欢迎的能带来便利的功能（如箭头的功能和简单的字符串插值），到能带来头脑风暴的概念（如代理和生成器）。
ES6 将改变你写 JS 代码的方式。
本系列旨在向你展示 ES6 如何通过检查其新功能来给JavaScript程序员提供新的写代码体验。
我们将以一个典型的“功能缺失”作为开始。“功能缺失”是我在过去的十年的时间内一直渴望能从 JavaScript 那看到的。所以，让我们一起去探索 ES6 迭代器和新的 for－of 循环。
英文材料参考链接 https://hacks.mozilla.org/author/jorendorffmozillacom/
托管地址：
持续更新ing...........
文章推荐：标准只是一个简单的标准，想要真正了解 ES6 还需要了解 JS ，
ES6详解六：赋值语法糖 destructing & spread
ES6部分方法点评（一）
js filter() es6 方法总结
没有更多推荐了，浅谈ES6新增的数组方法和对象
转载 &更新时间：日 08:05:47 & 投稿：jingxian
下面小编就为大家带来一篇浅谈ES6新增的数组方法和对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map
let arr=[1,2,3,4,3,2,1,2];
遍历数组最简洁直接的方法
for (let value of arr) {
console.log(value);//输出1,2,3,4,3,2,1,2
1. 数组.map()
返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map
let arr=[1,2,3,4,3,2,1,2];
let newArr=arr.map((value,index,arr)=&value)
console.log(newArr)//输出[1,2,3,4],当然里面也可以返回下标的数组
console.log(newArr==arr)//输出false
2. 数组.filter()
过滤,返回为真的值,
let arr=[1,2,3,4,3,2,1,2];
let newArr1=arr.filter((value,index,arr)=&value&=3)
console.log(newArr1);//输出[3,4,3]
3. 数组.reduce()
每个参数的意思previousValue上次回调的返回值或者初始值,currentValue正在处理的数组值,currentIndex正在处理函数的下标
//以前找最大值,最小值我们是用的2层循环来找的,现在直接一行代码搞定,是不是很爽
let arr=[1,2,3,4,3,2,1,2];
let newArr2=arr.reduce((pre,cur,curIndex,arr)=&pre&cur?pre:cur)
//pre=1不大于cur=2,返回2;
//pre接收返回值2;pre=2不大于cur=3,返回3
//一直找到4并且返回4;
//pre接收4,pre=4大于pre=3然后就一直返回的都是4,这样就会找到最大值
console.log(newArr2)//输出4,找到最大值,如果想找最小值只需要pre&cur?pre:cur
es6提供的一种新的数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值(包括NaN),但是set内部对象是不相等的
Set不是数组,自然就没有length属性,它有size属性,set.size,就是返回它的成员数量;
let set=new Set([1,2,3,4,3,2,1]);//这里必须传入的是数组
console.log(set)//输出set {1,2,3,4}
console.log(set.add(2))//依然输出set {1,2,3,4}
console.log(set.add(5))//输出 set {1,2,3,4,5}
console.log(set.delete(1))//输出true,表示删除成功
console.log(set.has(2))//输出true,表示存在这个值
console.log(set.clear())//输出undefined,这个方法知识删除所有值,并没有返回值
console.log(set)//这时候set已经清空了,所以输出为 set {}
Array.from()方法从一个类似数组或可以迭代的对象中创建一个新的数组实例
let set=new Set([1,2,3,4,3,2,1]);
console.log(Array.from(set))//用这个方法就可以把set对象转换我数组,输出为[1,2,3,4,3,2,1]
console.log(Array.from('hello'))//输出为['h','e','l','l','o']
利用set 和 from达到数组去重
let arr1=[1,2,2,1,1,3,5,2]
console.log(Array.from(new Set(arr1)))//输出[1,2,3,5],以后别人问你怎么数组去重,你可以装下逼了
写到这里突然想到es6的...方法
console.log([...new Set(arr1)])
Set的遍历方法
for (let value of set.keys()) {
console.log(value)//输出键
for (let value of set.values()) {
console.log(value)//输出值
for (let value of set.entries()) {
console.log(value)//输出键值对
es6提供了Map数据结构,它类似于对象,也是键值对的集合,但是它的强大在于键的范围可以任何类型的数据;
let map=new Map([["name","张三"],[[1,2,3],18],[{},"男"]])
console.log(map)
console.log(map.set("name","李四"))//输出 Map { 'name' =& '张三', [ 1, 2, 3 ] =& 18, {} =& '男' }如果没有这个键,就会添加新的键值对到后面
console.log(map.get("name"))//输出李四
console.log(map.delete("name"))//输出true
console.log(map.clear())//删除所有键值对
以上这篇浅谈ES6新增的数组方法和对象就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JavaScript学习笔记：ES6数组方法_ES6, JavaScript, JavaScript学习笔记, Array, 数组 教程_w3cplusES6对数组的扩展 - 简书
ES6对数组的扩展
Array.from()
Array.from方法用于将“类数组”对象和“可迭代”对象转为真正的数组。
类数组对象
下面这个对象就是类数组对象，只不过很罕见，它的唯一特征就是必须有length属性。同时它一般应该由类似于数组下标的键名，但不是必须。
let arrayLike = {
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
常见的类数组对象是NodeList，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
let ps = document.querySelectorAll('p');
Array.from(ps); // 真正的数组
// arguments对象
function foo() {
var args = Array.from(arguments); // 真正的数组
可迭代对象
只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
上面代码中，字符串和 Set 结构都具有 Iterator 接口，因此可以被Array.from转为真正的数组。
克隆新数组
Array.from([1, [2,3], 4])
跟扩展运算符（...）的对比
扩展运算符的介绍详见。
相同点，都可以将部署了 Iterator 接口的数据结构转为数组。
不同点，...不能将类数组对象转化为真正数组；Array.from()可以。
Array.from()可以将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug。
function countSymbols(string) {
return Array.from(string).
Array.of()
Array.of方法用于将一组值，转换为数组。
先来看Array()方法的缺陷，参数只有1个的时候，返回的数组并不是我们想要的，Array()方法把一个参数理解为数组的长度，然后建立了3个空元素的数组，通常这没什么用。
Array() // []
Array(3) // [, , ,]
Array(3, 11) // [3, 11]
Array(3, 11, 8) // [3, 11, 8]
如果采用Array.of方法，行为就统一了。
Array.of() // []
Array.of(3) // [3]
Array.of(3, 11) // [3, 11]
Array.of(3, 11, 8) // [3, 11, 8]
copyWithin方法
copyWithin方法顾名思义是内部元素复制，就是用内部一部分元素，来替换内部另一部分元素。
.copyWithin(target, start = 0, end = this.length)
它接受三个参数。
target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
举例描述最清楚了：
[1, 2, 3, 4, 5].copyWithin(0, 3)
// 0表示从0位开始替换数据
// 3表示从3位开始拷贝数组，一直拷贝到末尾，所以拷贝了4,5
// 将4,5放到0位和1位，最后就是 [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 2, 4)
// 0表示从0位开始替换数据
// 2表示从2位开始拷贝数组，一直拷贝到4位前，所以拷贝了3,4
// 将3,4放到0位、1位，最后就是 [3,4, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-1, 2, 4)
// -1表示从右数1位，也就是最后1位开始替换数据也就是说，数字5将被替换
// 2表示从2位开始拷贝数组，一直拷贝到4位前，所以拷贝了3,4
// 将3,4放到右数1位，最后就是 [1,2,3,4,3]
[1, 2, 3, 4, 5].copyWithin(-2, -4, -2)
// -1表示从右数2位开始替换数据，也就是说，4,5将被替换
// -4表示从右数4位，也就是左数1位开始拷贝数组，
// 一直拷贝到-2位前，也就是拷贝到数字4前面，也就是包含3，所以拷贝了2,3
// 将2,3放到右数2位，替换掉4,5，最后就是 [1,2,3,2,3]
find方法和findIndex方法
find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
find方法与filter方法的对比
find方法只返回遇到的第一个符合条件的数组成员，filter方法会返回符合条件的所有成员组成的新数组。
findIndex方法
findIndex方法的用法与find方法非常类似，唯一区别是findIndex方法返回的是位置，而不是成员值。
findIndex方法与indexOf方法的对比
不同点：findIndex方法以回调函数为参数，可以进行复杂的条件筛选，indexOf方法不接受回调函数，只接受搜索值，只有全等于，才算符合条件。
相同点：都是返回index位置。
fill方法是使用给定值，无脑填充一个数组，无论数组原来是什么样子，元素一律全替换成定值。
fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2) // fill方法从 1 号位开始，向原数组填充 7，到 2 号位之前结束
// ['a', 7, 'c']
新的遍历方法：entries()，keys()和values()
ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个迭代器对象，注意，这里返回的迭代器对象并不是数组。
keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
其中，values()在chrome和Firefox中还没有实现，暂时不举例了，道理都一样。
let a = [1,3,5].keys();
a; // 一个迭代器对象
a.next(); // {value: 0, done: false}
a.next(); // {value: 1, done: false}
a.next(); // {value: 2, done: false}
a.next(); // {value: undefined, done: true}
for (let index of ['a', 'b'].keys()) {
console.log(index);
let b = [1,3,5].entries();
b; // 一个迭代器对象
b.next(); // {value: Array(2), done: false}
b.next(); // {value: Array(2), done: false}
b.next(); // {value: Array(2), done: false}
b.next(); // {value: undefined, done: true}
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
includes方法
includes方法返回一个布尔值，表示某个数组是否包含给定的值，是ES7引入的新方法。
includes方法跟find方法、indexOf方法的区别
find方法是返回满足条件的第一个元素，使用回调函数判断。
indexOf方法是返回全等条件的第一个元素的位置值，是一个整数，而且不使用回调函数。
includes方法是如果有全等的元素，就返回true，否则返回false。
所以，在流程语句中，应当优先使用includes方法。
indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
[NaN].indexOf(NaN)
[NaN].includes(NaN)
1.Array.from Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。`es5：中类似数组的对象转化成真正的数组： 常见的类似数组的对...
pdf下载地址：Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 1. 面向对象都有哪些特性以及你对这些特性的理解 21 2. 访问权限修饰符public、private、protected, 以及不写（默认）时的区别(201...
总结 1. Array.from() : 将类数组对象和可遍历对象转化为真正的数组 2. Array.of() ： 将一组值转化为数组 3. Int32Array() 4. find()找出数组中复合某个条件的元素。如果没有，返回undefined 5. findIndex...
Part3 数组的扩展 3.1 扩展运算符和数组的解构赋值 （1）扩展运算符是三个点 ...，扩展运算符主要用于函数调用，它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 合并数组 arr.push(...arr1); 我们想把[4, 5, 6]数组通过...
数组的扩展 1.Array.from() 用于将两类对象转换为真正的数组：类似数组的对象和可遍历的对象（包括es6新增的数据类型Set和Map） 如果参数是一个真正的数组，array.from会返回一个一模一样的数组 扩展运算符（...）也可以将数据结构转为数组，调用的是遍...
还有你未来的蓝图。
而我，只想待在一个 小城，安静的度过余生。 的时候去拼一拼未来。 我看见你的蓝图，哪里没有我的身影，所 有的繁华过后，只剩下满目荒唐。我们不一 样，所以我们在一起并不快乐。 ，可是我只想每天安静的生活，就像我轻 轻的来，最后轻轻的离开，不带走一片云 彩...
这个暑假，因为有AIESEC，我度过了一个特别棒的暑假。 7月8号的飞机，带我飞到了一个神奇的国度——俄罗斯。虽然我听到很多有关于这个国家的消息，但是从未去过，也没有计划到这个国家旅行。对于我来说，这是一个既熟悉又陌生的国家。然而，这个暑假，通过AIESEC的志愿者项目，我...
用100天给自己一个惊喜 180 龚少90990 作者
16:14 打开App
01 大道理懂得很多，但依然过不好这一生———这是很多人的感受。 道理这东西，说再多也没有用，貌似理解了却实际上左耳进右耳出是最普遍的现象。践...ES6学习笔记（ES6新增的数组方法）
1、Array.from()方法
Array.from()方法是用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。
比如，使用Array.from()方法，可以轻松将JSON数组格式转为数组。
let json ={
'0':'hello',
'1':'123',
'2':'panda',
let arr = Array.from(json);
console.log(arr);
控制台打印结果：["hello", "123", "panda"]
2、使用Array.of()方法
Array.of()方法是将一组值转变为数组。
let arr0 = Array.of(1,2,33,5);
console.log(arr0);//[1,2,33,5]
let arr1 = Array.of('你好','hello');
console.log(arr1);//["你好", "hello"]
3、find（）方法
数组实例的find方法用于找出第一个符合条件的数组成员。参数是个回调函数，所有数组成员依次执行该回调函数，直到找到第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，就返回undefined；
如：回调函数可以接收3个参数，依次为当前的值（value）、当前的位置（index）、原数组（arr）
let arr2 = [1,2,3,5,7];
console.log(arr2.find(function(value,index,arr2){
return value & 5;
控制台打印结果：7
4、fill（）方法
使用fill（）方法给定值填充数组。
fill方法用于空数组的初始化很方便：new Array(3).fill(7);//[7,7,7]
fill方法还可以接收第二个和第三个参数，用于指定填充的起始位置和结束位置：
let arr3 = [0,1,2,3,4,5,6,7];
arr3.fill('error',2,3);
console.log(arr3);
5、遍历数组的方法：entries()、values()、keys()
这三个方法都是返回一个遍历器对象，可用for...of循环遍历，唯一区别：keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。
for(let item of ['a','b'].keys()){
consloe.log(item);
for(let item of ['a','b'].values()){
consloe.log(item);
let arr4 = [0,1];
for(let item of arr4.entries()){
console.log(item);
for(let [index,item] of arr4.entries()){
console.log(index+':'+item);
如果不用for...of进行遍历，可用使用next()方法手动跳到下一个值。
let arr5 =['a','b','c']
let entries = arr5.entries()
console.log(entries.next().value)
console.log(entries.next().value)
console.log(entries.next().value)
console.log(entries.next().value)
ES6数组新增的几个方法
ES6---数组array新增方法
没有更多推荐了，