Web全栈笔记之ES6
一、简介
ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
标准的制定者有计划，以后每年发布一次标准，使用年份作为版本。因为ES6的第一个版本是在2015年发布的，所以又称ECMAScript 2015（简称ES2015）。
2016年6月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布。由于变动非常小（只新增了数组实例的includes方法和指数运算符），因此 ES2016 与 ES2015 基本上是同一个标准，都被看作是 ES6。根据计划，2017年6月将发布 ES2017。
二、概述
除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
设立”严格模式”的目的，主要有以下几个：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
三、演示
将"use strict"放在脚本文件的第一行，则整个脚本都将以"严格模式"运行。如果这行语句不在第一行，
则无效，整个脚本以"正常模式"运行。如果不同模式的代码文件合并成一个文件，这一点需要特别注意。1.创设eval作用域
"use strict"//严谨模式
var i = 1;
var str=" var i = 5;";
eval(str);
console.log();//在严谨模式下 只会输出第一定义i的变量,不会被str所影响2.禁止this关键字指向全局对象
function f(){
"use strict";
console.log(this);//这个指向obj
function time(){
this.name="obj";
console.log(this);//window在严格模式下就是undefined 报错
}
time();
}
var obj ={};
obj.f = f;
obj.f();3.全局变量显式声明
"use strict"
var num = 2;//严格模式下 定义变量必须加var 不加var 不给你用
function show(){
"use strict"
var num = 1;//严格模式下 禁止 函数内的变量变成全局
console.log(num)
}
show();
console.log(num)4.ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
{
let a = 10;//a只属于这个块({})里面外面不可以用
var b = 1;
}
console.log(a)//undefined 报错
console.log(b)//1for循环的计数器，就很合适使用let命令。
// for循环的计数器，就很合适使用let命令。
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i)
};
}
arr[2]();
//let 块作用域 for循环相当于 独立的一块
arr[1] = function () {
console.log(i)
};
arr[2] = function () {
console.log(i)
};
arr[3] = function () {
console.log(i)
};
arr[4] = function () {
console.log(i)
};5.不存在变量提升
console.log(foo);
console.log(bar);
var foo = 2;//提升变量后 输出的时候没有赋值 所以 是undefined
let bar = 2;//let 不存在变量提升6.暂时性死区
var tmp = 123;
if (true) {
//tmp = 'abc';//报错 死区
let tmp;// let 必须在对顶部
tmp = 'abc';
console.log(tmp);//输出abc
}
console.log(tmp);//输出1237.不允许重复声明 let不允许在相同作用域内，重复声明同一个变量
(function () {
let a = 10;//let 不能重复定义 只能有一个
var a = 1;//定义报错
console.log(a);
})()8.ES6的块级作用域
// let实际上为JavaScript新增了块级作用域。
function f1() {
let n = 5;
if (true) {
let n = 10;//let限定在if这一块里面 其他无妨无效
}
console.log(n);
}
f1()//输出59.const命令
//const声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = [];//设置常量 无法修改
//PI = 3;//修改报错
PI[0]=123;
console.log(PI)10.数组的解构赋值
// ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
let [a, b, c] = [1, 2, 3];//数组方法 定义变量
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
let [var1, ...var2] = [1, 2, 3, 4];//...var2代表多个
console.log(var1);
console.log(var2);
-------------------------------------------------------------------
let [x = 1, y = x] = [];
console.log(x,y)//输出1 1
let [x = 1, y = x] = [2];
console.log(x,y)//输出2 2 定义了x=2
let [x = 1, y = x] = [1, 2];
console.log(x,y)//输出1 2
let [x = y, y = 1] = [];//报错
console.log(x,y)//因为x = y 的时候y还没有赋值11.对象的解构赋值
// 解构不仅可以用于数组，还可以用于对象
var { bar,foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
console.log(foo,bar);
var obj={
name:"abc",
arr:[1,2,3,4],
json:{
name:"json",
}
}
var {name,arr,json} = obj;
console.log(name,arr,json);
var [a,b,c,d] = obj.arr//a,b,c,d 相当于obj里面数组的1,2,3,4
console.log(a,b,c,d)12.函数参数的默认值
// 在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。
function show (a,b){
var b=b||0;
console.log(a+b);
}
show(5,6);
// ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。
function show (a=2,b=1){
console.log(a+b);
}
show(5);13.与解构赋值默认值结合使用
// 参数默认值可以与解构赋值的默认值，结合起来使用。
function show([a,b,c]){//相当于把数组里面的值传进去
console.log(a+b+c);
}
var arr = [1,2,3]
show(arr);
var arr=[5,6,21,8,7,1,5];//...arr等于arr数组里面的5,6,21,8,7,1,5 抽出来
console.log(Math.max(...arr));14.作用域
一个需要注意的地方是，如果参数默认值是一个变量，则该变量所处的作用域，
与其他变量的作用域规则是一样的，即先是当前函数的作用域，然后才是全局作用域。
var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2)//传2 x=2
-----------------------------------
let x = 1;
//x等于1 y=x
function f(y = x) {
let x = 2;
//y=1
console.log(y);
}
f();15.rest参数
ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。
rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
var arr=[5,6,21,8,7,1,5];//...arr等于arr数组里面的5,6,21,8,7,1,5 抽出来
console.log(Math.max(...arr));
// 替代数组的apply方法
// 由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。
console.log(Math.max(...arr))
// ES5的合并数组
var arr =[1,2,3];
var arr2=[4,5,6];
var arr3=[7,8,9];
var all=arr.concat(arr2,arr3);
console.log(all);
// ES6的合并数组
var all = [...arr,...arr2,...arr3];
console.log(all);16.箭头函数
// ES6允许使用“箭头”（=>）定义函数。=>等于return
var a = 5;
fn = a => a;
console.log(fn(a))
//正常函数写法
function fn(a){
return a;
}
console.log(fn(a))
--------------------------------------------------
fn = (a,b) => {
let c = a+b;
return c;
};
console.log(fn(3,6))
//正常函数写法
function fn(a,b){
var c = a+b;
return c;
}
console.log(fn(3,6))
/* 使用注意点
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
*/
function Person(){
//输出传进来的数据 arguments 传进来的全部参数
console.log(arguments)
var sum = 0;
for(var value of arguments){
sum += value;
}
console.log(sum)
}
Person(2,3,5,4,5,6)
//箭头函数不可使用arguments
Person = (...arr) => {
var sum = 0;
for(var value of arr){
sum += value;
}
console.log(sum)
}
//指向window
Person(2,3,5,4,5,6)
var obj = {
name:"obj",
show:()=>{
setTimeout(()=>{
console.log(this)//指向window
})
}
}
obj.show()
//=>函数体内的this对象 不能指向本身
var obj = {
name:"obj",
show:()=>{
setTimeout(()=>{
console.log(this)//指向window
})
}
}
obj.show()
//function指向本身
var obj = {
name:"obj",
show:function(){
setTimeout(()=>{
console.log(this)//指向当前的this
})
}
}
obj.show()
17.字符串转换
var a ="hello";
var b ="冒泡";
//ES5字符串拼接
var str = a+""+b;
//ES6字符串拼接
var str=`${a}${b}`;
var str =`<a href="">${b}a>`;
console.log(str);18.对象calss
//ES5构造函数
//定义类
function Person(name){
this.name=name;
}
//创建原型
Person.prototype.show =function(){
console.log(this.name);
}
var obj =new Person("abc");
obj.show();//调用obj原型 show
//继承
function Son(name,age){
this.age = age
// Person.apply(this,arguments)
Person.call(this,name)
}
Son.prototype = new Person();
var s = new Son("son",18);
s.show()
console.log(s.age)
//ES6构造函数
//1.Class基本语法
class Person{
//构造方法
constructor(name){
this.name = name;
}
//原型方法
show(){
console.log(this.name);
}
}
var obj = new Person("es6");
obj.show()
// 2.Class的继承----------------------------
// Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。
class Son extends Person{
constructor(name,age){
super(name);
this.age = age;
// this.name = "abc";
}
show(){
console.log(this.name,this.age)
}
}
var s = new Son("kkk",18);
s.show();Babel
Babel 是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。下面是一个例子。
进行Babel转码。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。
另一方面，这样做也无法支持不同项目使用不同版本的Babel。
一个解决办法是将 babel-cli 安装在项目之中。
$ sudo cnpm install babel-cli -g//先安装全局
$ sudo cnpm install babel-preset-es2015//再安装es2015标准
基本用法如下。
# 转码结果输出到标准输出
$ babel text.js//接着输出标准
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js //转换文件
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
配置文件 .babelrc
Babel的配置文件是 .babelrc ，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下
{
"presets": ["es2015"],
"plugins": []
}
ES6新特性在Babel下的兼容性列表
ES6特性 兼容性
箭头函数 支持
类的声明和继承 部分支持，IE8不支持
增强的对象字面量 支持
字符串模板 支持
解构 支持，但注意使用方式
参数默认值，不定参数，拓展参数 支持
let与const 支持
for of IE不支持
iterator, generator 不支持
模块 module、Proxies、Symbol 不支持
Map，Set 和 WeakMap，WeakSet 不支持
Promises、Math，Number，String，Object 的新API 不支持
export & import 支持
生成器函数 不支持
数组拷贝 支持