ES6(ECMAscript6)最全学习笔记总结（一）

前言

做好笔记，便于复习。

一、ECMA相关介绍

1.1 什么是ECMA

ECMA是欧洲计算机制造商协会，这个组织的目标是估评，开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际。
ecma标准官网ecma-international.org中有各个版本的更新详情。
ECMA从2015年的第六版起，每年都会更新一次版本，目前到ES11.

1.5.谁在维护ECMA-262

TC39 ( Technical Committee 39)是推进ECMAScript 发展的委员会。其会员都是公司(其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等)。TC39定期召开会议，会议由会员公司的代表与特邀专家出席

1.6.为什么要学习ES6

●ES6 的版本变动内容最多，具有里程碑意义

●ES6加入许多新的语法特性，编程实现更简单、高效

●ES6 是前端发展趋势，就业必备技能I

1.7. ES6兼容性

http://kangax.github.io/compat-table/es6/可查看兼容性

注意兼容性，因为浏览器不同，所以对各个版本的兼容是不一样的。

二、ES6的相关特性

★let 声明变量

1.变量不能重复声明
let star = '黄晓明'; let star = 'baby';
当我们在vscode中输入以上代码，浏览器会报错。

而当我们使用var 声明变量时，则没有报错。

2.块级作用域

{
  let star = '黄晓明';
}
console.log(star);
//当我们输入这段代码时候，回报错，因为star是局部变量

3.不存在变量提升

console.log(song);
let song = '小苹果';

如果我们先输出结果，再定义变量，在es6之前浏览器会进行变量提升，会将变量定义放在前面。此时这样做会报错。

4.不影响作用域链

在这里，我们简述一下作用域和作用域链的概念：
1. 作用域
作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。

执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。

全局执行环境是最外围的一个执行环境。根据 ECMAScript 实现所在的宿主环境不同，表示的执行环境的对象也不一样。

在 Web 浏览器中，全局执行环境被认为是 window 对象，因此所有全局变量和函数都是作为 window 对象的属性和方法创建的。
在 NODE 环境中，全局执行环境是 global 对象。

某个执行环境中所有的代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出时，如关闭浏览器或网页，才会被销毁）

每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将被环境弹出，把控制权返回给之前的执行环境。ECMAScript 程序中的执行流正是由这个方便的机制控制着。
概括来说：
作用域就是代码执行开辟栈内存

私有作用域 ----> 函数执行都会形成一个私有作用域
全局作用域 ----> 页面一打开就会形成一个全局的作用域
私有变量 ---->在私有作用域里边形成的变量 (通过 var 声明； 形参)
全局变量 ----> 在全局作用域形成的变量（var a = 12 或者函数内没有声明，直接赋值的变量）

2. 作用域链
当代码在一个环境中执行时，会创建变量对象的一个作用域链（作用域形成的链条）。
作用域链中的下一个对象来自于外部环境，而在下一个变量对象则来自下一个外部环境，一直到全局执行环境全局执行环境的变量对象始终都是作用域链上的最后一个对象内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数。

var n = 10;
function outer(){
  function inner(){
    function center(){
      console.log(n);
    }
    center();
  }
  inner();
  var n = 15;
}
outer(); //=> undefined

如函数的执行，形成一个私有作用域，形参和当前私有作用域中声明的变量都是私有变量，保存在内部的一个变量对象中，其下一个外部环境可能是函数，也就包含了函数的内部变量对象，直到全局作用域。

当在内部函数中，需要访问一个变量的时候，首先会访问函数本身的变量对象，是否有这个变量，如果没有，那么会继续沿作用域链往上查找，直到全局作用域。如果在某个变量对象中找到则使用该变量对象中的变量值。

由于变量的查找是沿着作用域链来实现的，所以也称作用域链为变量查找的机制。

★const 声明常量

1.一定要赋初始值

举例，在代码中输入如下两行，浏览器反应情况：

const A;   //Missing initializer in const declaration
const name = 'xiaoming'; //right

2.一般常量使用大写(潜规则)

const A = 1000;

3.常量的值不能修改
如果对常量进行赋值修改，则会报错：

4.块级作用域

5.对于数组和对象元素修改，不算做对常量的修改，不报错

//常量声明
const RNG = ['uzi','mxlg','Ming','ketme','gala'];
RNG.push('Meiko');

虽然我们修改了数组中的元素，但浏览器并没有报错，因此，在实际开发中，我们常用常量来定义数组，避免某些错误操作使得元素发生改变。

★变量的结构赋值

1.定义

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

2.数组的解构

const F3 = ['鲨鱼','包子','不求人'];
let [sha, bao, qiu] = F3;
console.log(sha);
console.log(bao);
console.log(qiu);

浏览器输出如下，但数组的解构赋值用的较少。

3.对象的解构

const zhao = {
      name : '赵本山',
      age: '不知道',
      xiaoPin: function(){
          console.log('我会演小品');
         }
      };
      let {xiaoPin} = zhao;
      xiaoPin(); 

在这段代码中，如果我们没有最后两行，要去调用zhao中的xiaoPin方法，就需要写 zhao.xiaoPin(); 会出现很多的‘zhao’，非常麻烦。

新特性的产生都是为了代码的更加简洁，使开发者减少冗余代码。

★模板字符串

1.声明

let str  = `我也是一个字符串`;
console.log(str ,typeof str);//可以借助typeof检查是否为字符串

2.内容中可以直接出现换行符

let str = `<ul>
           <li>aa</li>
           <li>bb</li>
           <li>cc</li>
           </ul>`;

这样的写法不会报错，而如果使用let str = ' example '会出错。

3.变量拼接

let lovest = '张云仔';
let out = `${lovest}是我心中最美的人`;
console.log(out);

输出结果如下，注意${lovest}为固定模板。

★简化对象写法

简化后:

let name = 'csdn';
let change = function () {
     console.log('我们可以改变你！');
}
const sclool = {
     name,
     change,
     improve(){
        console.log('我们可以提高你的技能!');
        }
}

而简化前的对象写法：

const sclool = {
     name:name,
     change:change,
     improve: function (){
        console.log('我们可以提高你的技能!');
        }
}

可以看到非常的冗余。ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样的写法更简洁。

★箭头函数

ES6允许使用【箭头】 => 定义函数

1.声明一个函数

let fn = function() {} //传统
let fn (a ,b ) => {
    return a + b ;
}                     //箭头函数

2.调用一个函数

let result = fn(1,2);
console.log(reslut);

3.this是静态的

this始终指向函数声明时所在作用域下的this的值

function getName(){
    console.log(this.name);
}
let getName2 = () =>{
    console.log(this.name);
}
//设置window 对象的 name 值
window.name = 'mark';
const scool = {
      name : 'MK'
}

我们先采用直接调用：

getName();   --->mark
getName2();  --->mark

我们知道call（）方法可以改变函数内部this指向的值，再使用call调用：

getName.call(scool);   --->Mk
getName2.call(scool);  --->mark

观察到this的值，在箭头函数下始终没有变化，指向函数声明时所在作用域下的值。

4.不能作为构造函数的实例化对象

let Person = (name,age) => {
          this.name = name; 
          this.age = age;
}
let me = new Person('xiao' ,30);
consolo.log(me);//浏览器会报错

5.不能使用arguments变量

6.箭头函数的简写
1).省略小括号，当形参只有一个的时候。

let add = n => {
        return n + n;
}

2).省略花括号，当代码体只要一条语句时候，此时return必须省略，而且语句的执行结果就是函数的返回值。

let pow = n => n *n;

总结

这是ES6第一部分，后面的会继续总结，还有ES6-ES11的部分新特性。