基本介绍 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言.
ES5-数组方法回顾
forEach
forEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环. 应用场景：为一些相同的元素，绑定事件处理器！ 需求：遍历数组["张飞","关羽","赵云","马超"]
var arr = ["张飞","关羽","赵云","马超"];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
arr.forEach(function(element, index, array){
console.log(element, index, array);
});
some
some() 方法遍历数组 用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素： 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 需求：遍历数组，判断数组是否包含奇数，[2,4,6,8,10,9] 查找数组中是否有满足我们条件的元素,有返回turn,没有返回false
var arr = [2,4,6,8,10,21];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：布尔类型的值，只要有一个回调函数返回true，就返回true
var flag = arr.some(function(element, index, array){
console.log(element, index, array);
if(element %2 == 1){
return true;
}else {
return false;
}
});
console.log(flag);//true
filter
filter用于过滤掉“不合格”的元素 遍历数组 返回一个新数组,新数组元素是符合我们指定条件的所有元素 返回一个新数组，如果在回调函数中返回true，那么就留下来，如果返回false，就扔掉 需求：遍历数组，将数组中工资超过5000的值删除[1000, 5000, 20000, 3000, 10000, 800, 1500]
var arr = [1000, 5000, 20000, 3000, 10000, 800, 1500];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，存储了所有返回true的元素
var newArray = arr.filter(function(element, index, array){
if(element > 5000) {
return false;
}else {
return true;
}
});
console.log(newArray);//[1000, 5000, 3000, 800, 1500]
map
map() 方法循环遍历 返回一个新数组，新数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 注意： map() 不会对空数组进行检测。 注意： map() 不会改变原始数组。
需求：遍历数组，求每一项的平方存在于一个数组中 场景:操作每一项数据 不考虑过滤
var arr = [1,2,3,4,5]; // 1 4 9 16 25
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，每个元素都是回调函数的结果。
var newArray = arr.map(function(element, index, array){
return element * element;
});
console.log(newArray);//[1,4,9,16,25]
every
every() 方法循环遍历数组 用于检测数组所有元素是否都符合指定条件（通过函数提供）。 every() 方法使用指定函数检测数组中的所有元素： 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。 如果所有元素都满足条件，则返回 true。
var arr = [2,4,6,8,10,21];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：布尔类型的值，只有当所有的元素返回true，才返回true，否则返回false。
var flag = arr.every(function(element, index, array){
console.log(element, index, array);
if(element %2 == 0){
return true;
}else {
return false;
}
});
console.log(flag);//false
ES6
变量
ES6中提供了两个声明变量的关键字：const和let let的使用 ES6 新增了let命令，用来声明变量。它的用法类似于var。 let声明的变量只有在当前作用域可以访问 在一个大括号中 使用let关键字声明的变量才具有块级作用域
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
不存在变量提升
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
不允许重复声明
let a = 10;
let a = 1;//报错 Identifier 'a' has already been declared
const的使用 const声明一个只读的常量。常量：值不可以改变的量 const声明变量不可以重新赋值
const PI = 3.1415;
PI = 3; //报错
const声明的变量必须赋值 const num;
如果const声明了一个对象，仅仅保证地址不变
const obj = {name:'zs'};
obj.age = 18;//正确
obj = {};//报错
其他用法和let一样
- 只能在当前代码块中使用
- 不会提升
- 不能重复
let、const、var 的区别
使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
解构赋值
数组解构 以前，为变量赋值，只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
解构默认值
let [a = 0, b, c] = [1, 2, 3];
对象解构
解构不仅可以用于数组，还可以用于对象。保证属性名一样 顺序没关系
let person = { name: 'zhangsan', age: 20 };
用name变量名去匹配person对象name属性,如果有name属性,就将属性值赋值给name变量
let { name, age } = person;
console.log(name); // 'zhangsan'
console.log(age); // 20
用name属性去匹配person对象name属性,并将值赋值给myName变量
let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
模版字符串
传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
字符串模版的优点
允许换行
可以使用插值 ${}
字符串方法
- includes()：返回布尔值，表示是否找到了指定字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
数组方法
find
用于找出第一个符合条件的数组元素，如果没有找到返回undefined 和some区别 some返回true或者false find直接返回这个元素
// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
findIndex()
用于找出第一个符合条件的数组元素的位置，如果没有找到返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
includes() 数组去重可以使用
判断某个数组是否包含给定的值，返回布尔值。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
函数-箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。 为什么叫Arrow Function？因为它的定义用的就是一个箭头：
基本使用
var fn = function(x, y) {
console.log(x + y);
}
相当于
//语法： (参数列表) => {函数体}
var fn = (x, y) => {
console.log(x + y);
}
参数详解
如果没有参数列表，使用()表示参数列表
var sum = () => {
console.log('哈哈')
};
// 等同于：
var sum = function() {
console.log('哈哈')
};
如果只有一个参数，可以省略()
// 等同于：
var sum = function(n1) {
console.log('哈哈')
};
var sum = n1 => {
console.log('哈哈')
};
如果有多个参数，需要使用()把参数列表括起来
var sum = function(n1, n2) {
console.log('哈哈')
};
var sum = (n1, n2) => {
console.log('哈哈')
};
返回值详解 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来
var sum = function(n1) {
console.log('哈哈')
};
var sum = n1 => {
console.log('哈哈')
};
如果函数体只有一行一句，那么可以省略{}和return
var fn = function(n1, n2) {
return n1 + n2;
}
var fn = (n1, n2) => n1 + n2;
案例 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
var arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10];
arr.sort((a, b) => b - a)
console.log(arr)
有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
let array = ['a', 'ccc', 'bb', 'dddd'];
array.sort(function (a, b) {
return a.length - b.length
})
console.log(array);
有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组
var arr = [57, 88, 99, 100, 33, 77];
var newArr = arr.filter((item) => {
return item > 60;
})
console.log(newArr);
箭头函数的注意点
- 箭头函数内部没有this，因此箭头函数内部的this指向了外部的this
- 箭头函数不能作为构造函数，因为箭头函数没有this
默认参数
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
rest参数
function add(...values) {
}
add(2, 5, 3) // 10
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数
function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
扩展运算符（展开语法 属于浅拷贝）
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3,相当于下面的代码
console.log(1,2,3);
扩展运算符可以应用于合并数组
// 方法一
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];
// 方法二
ary1.push(...ary2);
将伪数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];
Array.from()
将伪数组或可遍历对象转换为真正的数组
//定义一个集合
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
let arrayLike = {
"0": 1,
"1": 2,
"length": 2
}
let newAry = Array.from(arrayLike, item => item *2)//[2,4]
注意：如果是对象，那么属性需要写对应的索引
Set 数据结构(可以用作数组去重)
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成 Set 数据结构 const s = new Set();
Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}
for of循环
ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
for of支持遍历数组、类对象（例如DOM NodeList对象，也称伪数组）、字符串、Map对象、Set对象； for of不支持遍历普通对象，可通过参考下面的Object.keys()搭配使用遍历
entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
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"
forEach、for in 、for of三者的区别
for循环
for循环中可以使用return、break等来中断循环。
var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
console.log(arr[i])
}
// 输出结果
1，2，3，4
forEach 对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组。
let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, index, arr) {
// val是当前元素，index当前元素索引，arr是当前数组
console.log(val + ', index = ' + idx);
console.log(arr);
});
// 输出结果
a, index = 0
["a", "b", "c", "d"]
b, index = 1
["a", "b", "c", "d"]
c, index = 2
["a", "b", "c", "d"]
d, index = 3
["a", "b", "c", "d"]
for…in 循环遍历的值都是数据结构的键（key）值。适合遍历对象。
// 遍历对象
let obj = {a: '1', b: '2', c: '3', d: '4'};
for (let o in obj) {
console.log(o); //遍历的实际上是对象的属性名称 a，b，c，d
console.log(obj[o]); //这个才是属性对应的值1，2，3，4
}
// 遍历数组
let arr = ['a', 'b', 'c', 'd'];
for (let o in arr) {
console.log(o); //遍历的实际上是数组的索引 0，1，2，3
console.log(arr[o]); //这个才是对应的值 a，b，c，d
}
for…of ES6中新增加的语法，用来循环获取一对键值对中的值。不能对对象使用。
// 遍历数组
let arr = ['China', 'America', 'Korea'];
for (let o of arr) {
console.log(o);
}
// 输出结果
China, America, Korea
// 遍历对象
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
console.log(o); //Uncaught TypeError: obj is not iterable
}
// 遍历字符串
let str = 'love';
for (let o of str) {
console.log(o); // l,o,v,e
}
reduce
作用：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的 参数： (fn, initialValue) fn 为计算函数 fn的参数： total currentValue currentIndex arr 初始值, 或者计算结束后的返回值 当前元素 前元素的索引 当前元素所属的数组对象 initialValue 是初始值 返回值: 返回计算结果
let arr = [1, 2, 3, 4]
let res = arr.reduce(function(prev, cur, index, arr) {
return prev + cur;
})
console.log(arr, res); // [1, 2, 3, 4] 10
数组去重并统计元素出现次数
const list = [
{ name: "left", width: 20 },
{ name: "left", width: 20 },
{ name: "right", width: 10 },
{ name: "center", width: 70 },
{ name: "right", width: 10 },
{ name: "right", width: 10 },
];
let obj = {};
let res = list.reduce((previous, current) => {
if (obj[current.name]) {
obj[current.name]++;
return previous;
}
obj[current.name] = 1;
return [...previous, current];
}, []);
console.log(obj);//{ left: 2, right: 3, center: 1 }
console.log(res);//[ { name: 'left', width: 20 }, { name: 'right', width: 10 }, { name: 'center', width: 70 }
]
