JavaScript ES6ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，

基本介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

我们从node开始，会大量用到ES6中的一些新语法，因此在学习node之前需要先学习一下es6中提供的新语法

ECMAScript与Javascript的关系

ECMAScript，简称ES，是由Ecma国际（欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）按照标准制定的一种脚本语言规范。

JavaScript是按ECMAScript规范实现的一种脚本语言，JavaScript除了实现了ECMAScript规范，还提供了BOM和DOM的操作。

ECMAScript版本历史

ES1.0, 1997年06月发布
ES2.0, 1998年06月发布
ES3.0, 1999年12月发布
ES4.0, 由于关于语言的复杂性出现了分歧。放弃发布
ES5.0, 2009年12月发布，增加了严格模式，增加了少量语法，为ES6铺路
ES6.0, 2015年6月发布，增加了大量的新概念和语法特性
- 第六版的名字，可以叫做ECMAScript6.0(ES), 也可以叫做ECMAScript 2015（ES2015）
- ECMA组织决定以后每年6月份都会发布一版新的语法标准，比如ES7(ECMAScript 2016)
- 通过我们说的ES6泛指ES5之后的下一代标准，涵盖了ES6, ES7, ES8....

ES5-数组的新方法

forEach

forEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环.

应用场景：为一些相同的元素，绑定事件处理器！

需求：遍历数组["张飞","关羽","赵云","马超"]

var arr = ["张飞","关羽","赵云","马超"];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
arr.forEach(function(element, index, array){
  console.log(element, index, array);
});

forEach对比for的好处

1、放置变量的泄露

2、可以结合箭头函数使用arr.forEach（item=>sum+=item）

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]

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]

some

some用于遍历数组，如果有至少一个满足条件，就返回true，否则返回false。

需求：遍历数组，判断数组是否包含奇数，[2,4,6,8,10,9]

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

every

every用于遍历数组，只有当所有的元素返回true，才返回true，否则返回false。

需求：遍历数组，判断数组是否都是偶数，[2,4,6,8,10,9]

  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 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
块级作用域（全局作用域，局部作用域）

var age = 20 if(age>180){ let money = 500 console.log(money)//外部无法使用money变量 } console.log(money)//报错，无法找到该变量

const的使用

const声明一个只读的常量。常量：值不可以改变的量

const声明的量不可以改变

const PI = 3.1415; PI = 3; //报错
const声明的变量必须赋值

const num;
如果const声明了一个对象，仅仅保证地址不变

const obj = {name:'zs'}; obj.age = 18;//正确 obj = {};//报错
其他用法和let一样
1. 只能在当前代码块中使用
2. 不会提升
3. 不能重复声明

let与const的使用场景

1. 如果声明的变量不需要改变，那么使用const
2. 如果声明的变量需要改变，那么用let
3. 学了const和let之后，尽量别用var
3. 复杂数据类型都需要使用const

解构赋值

可以从对象或者数组中解构出值，赋值给变量。

数组解构

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];
consoel.log(a,b,c);
//不需要前面的元素可以使用，
let [, b, c] = [1, 2, 3];
consoel.log(b,c);

解构默认值

let [a = 0, b, c] = [1, 2, 3];

对象解构

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

如果变量名与属性名不一致，可以使用：

定义变量与对象中属性不一样的名字

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

解构时需要指定默认值，可以使用=

默认值：是值对象中没有该属性的值，使用默认值，如果有值使用对象中的属性值

const obj = {
    name:"zs",
    age:18
}
const {name,age,desc = "不错"}=obj

函数参数的解构

函数的参数也可以使用解构赋值。

function fn({name,age},money){
  console.log(name,age,money)
}
const obj ={
    name:"zs",
    age:18
}
fn(obj,100)

字符串

模版字符串

传统的 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!
`);

字符串模版的优点

允许换行
可以使用插值 ${变量名}

字符串方法

es5新增方法

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

数组

find

find是ES6新增的语法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);

findIndex

findIndex是ES6新增的语法

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

// 获取第一个大于10的下标
var array1 = [5, 12, 8, 130, 44];

function findFirstLargeNumber(element) {
  return element > 13;
}

console.log(array1.findIndex(findFirstLargeNumber));

函数-箭头函数

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],请对数组进行排序
有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组

箭头函数的注意点

this指向

箭头函数内部没有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

对象

简写

属性简写

const user = 'zs'
const age = 18
const obj = {
	name: username,
	age
}

方法简写

const obj = {
	name: username,
	age,
    sayHi(){
        console.log("hi")
    }
}

展开运算符

数组

展开运算符可以展开一个数组或者对象

const arr = [1,2,3,4,5]
console.log(...arr)=>console.log(1,2,3,4,5)

展开一个数组，用于数组拼接

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const newArr=[...arr1,..arr2]

求数组最大值

const arr=[1,2,3]
const max=Math.max(...arr)

对象

展开一个对象，用于对象拼接

const obj1={
    car:"老师来说"
}
const obj2={
    name:"牛牛"
}
const newObj={
    ...obj1,
    ...obj2
}

set集合

用于数组去重

const arr = [1,2,2,3,4,4,5,99,99]
//去除重复
const s = new Set(arr)
//将重复项转换为数组
const arr = [...s]

综合大练习

给定一个数组

let list = [
  // wu: 武力    zhi:智力
  { id: 1, name: '张飞', wu: 97, zhi: 10 },
  { id: 2, name: '诸葛亮', wu: 55, zhi: 99 },
  { id: 3, name: '赵云', wu: 97, zhi: 66 },
  { id: 4, name: '周瑜', wu: 80, zhi: 98 },
  { id: 5, name: '吕布', wu: 100, zhi: 8 },
  { id: 6, name: '司马懿', wu: 30, zhi: 98 }
]

求数组中所有英雄的武力平均值
得到一个新数组，只保留英雄的名字， ['张飞', '诸葛亮', '赵云', '周瑜', '吕布', '司马懿']
得到一个新数组，新数组中只保留武力值超过90的英雄
删除数组中名字为周瑜的英雄
判断数组中所有英雄的武力是否都超过60，最终打印结果：全是猛将还有弱鸡使用两种方式实现
删除数组中名字叫所有智力低于60的英雄

找到数组中id为2的英雄，求他的武力+智力的综合

  const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
    { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
    { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
    { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
    { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
    { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
  ];

  要求1：筛选出生日期在16世纪（1500-1599年）的发明家。
  要求2：列出发明家的名和姓的数组。
  要求3：根据发明家的出生日期，按照从大到小的顺序进行排序。
  要求4：所有的发明家一共活了多少岁。
  要求5：按照发明家的年龄大小排序