ES6笔记总结（1）

ECMAScript 的历史

ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

• 1997 年 ECMAScript 1.0 诞生。
• 1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
• 1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
• 2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
• 2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
• 2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

PART 01

ES6概述：

ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

PART 02

let与const关键字：

let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var：

 let是块级作用域（在一对大{} 里面起作用）

{

    let a = 15;

 console.log(a);

}

let声明变量不会变量提升

{

    console.log(a);

     let a = 15;

}

不能重复声明

{

    let c = 22;

    let c = 25;

}

const声明变量:

 通常用来声明常量的 建议大写

const PI = 3.1415926;

console.log(PI);   

声明必须赋值

const FREEZON

声明后不能修改*(复杂数据可以修改 数组)

const ARR = 15;

ARR = 22; //报错

小结：

（1）let 关键词声明的变量不具备变量提升（hoisting）特性

（2）let 和 const 声明只在最靠近的一个块中（花括号内）有效

（3）当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING

（4）const 在声明时必须被赋值

PART  03

解构：解构就是把数组或者对象拆分为单个的变量

交换变量

    var a = 15;

    var b = 88;

    [a, b] = [b, a];

    console.log("a:",a);

    console.log("b:",b);

不定参（剩余值）与跳过

     var arr = [1, 3, 9, 24, 74, 98, 202];

    [c, ,d, ...rest] = arr;

    console.log("c:",c);

    console.log("d:",d);

    console.log("rest:",rest);

变量名必须和对象键名一致

let o = {p:42, q:true};

let {p,q} = o;

console.log(p,q);

PART  04

字符串--检测

includes：包含。

startsWith：以...开头。

endWith：以...结尾。

字符串-重复与填充

repeat

let str = "我爱你！";

console.log(str.repeat(3));

padStart / padEnd

console.log('1'.padStart(4,'0'));

console.log('1'.padEnd(2,'0'))

PART  05

函数

1、ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：

var getPrice = function() {

  return 4.55;

};

var getPrice = () => 4.55;

=> 前面是函数参数   =>后面是返回值也是执行语句

2. 多个参数 或者没有 都用括号包起来

var arr3 = ["ganggang","zhangs","张三"];
arr3.forEach(

        (item,index,self) => console.log(item,index,self)

    )

3 执行语句有多个的时候 用{}包括起来

var arr4 = [70,33,52,89,14,80,87];
var arr5 = arr4.filter(

        item => {

            if(item>=70){return true}

            else{return false}

        }

    )

4 箭头函数this 指的是函数上一层的this

var obj = {

            age:16,

            grow:function(){

                setTimeout(()=>{

                    this.age++;

                    console.log("我的年纪是"+this.age)

                })

            }

        }

obj.grow();

PART  06

对象

对象简写

let color="白色";

let name = "Kitty";

let cat = {color,name};

console.log(cat)

函数简写与动态属性值

var obj = {

name:"木木",

["nick"+"name"]:"小木木",

say(){alert(this.name)}

}

super方法

var parent = {

  foo() {

    console.log("Hello from the Parent");

  }

}

var child = {

  foo() {

    super.foo();

    console.log("Hello from the Child");

  }

}

Object.setPrototypeOf(child, parent);

child.foo();

总结

var，let，const

const 与let 局部作用域 ，不能重复声明，不能变量提升，const声明常量

解构与拓展

...rest

字符串

` `字符串模板，includes repeat pad