首页 1 2 3 4 5 6 7

ECMAScript2015

一.什么是es6

es6 是js语言的下一代标准，15年6月发布，也就是ECMAScript（2015）

ECMAScript就是JavaScript的国际标准，js是es的实现

es的历史：

1996年11月，网景公司把js语言提交给国际标准组织ECMA，希望能成为国际标准推广，1997年，ECMA发布ECMAScript 1.0

兼容的不是很好，但是写起来方便也多了很多新的好玩的东西

编译的话咱们就暂时先用咱们react使引入的哪个browser.js + type=‘text/bable’

不用的话也可能能用，但是有的地方就体现不出来了，还是编译的好

为什么要有es6呢？自己想一下去吧..

编译es6的方式：

1.浏览器编译

2.gulp

二.let 和 const命令

1.let：声明变量，声明的是局部变量

用途及区别：ES6新增了let命令，用来声明变量，类似于var ，但是声明的变量只在let所在的代码块的内部有效

let不存在变量提升，这个要注意哟

暂时性的死区：

只要块级作用域里存在let命令，它所声明的变量就绑定这个区域，不在受外部的影响

不允许重复声明

内部的数据有了let声明过之后不允许重复声明

2.块级作用域

为什么需要块级作用域：

es5只有全局作用域和函数作用域，这样会造成一些不合理的地方

1>.内部数据覆盖外部数据的情况

2>.用来计数的循环变量泄露成全局变量

虽然没有专业的定义词语来创建块级作用域，但是只要内部用了let，就说明一个块级作用域存在了，也就是说let命令为es6增加了块级作用域

在以往我们为了让变量执行完成后就销毁不要浪费内存，会把大段的代码放到立即执行函数里，而现在，我们只需要一个块级作用域就好了

3.const ：

声明只读常量一旦声明就不能进行更改，使用起来和var，let定义的的变量一样，也是属于块级的定义方式，和let相似，也是不可重复声明的

但是对象呀，数组呀都是可以改这个对象或者数组的东西的，因为真正保存的是地址，数组多个元素少个元素又不会改变地址

const person=Object.freeze({});
var cat=Object.freeze({});

赋值的时候可以用Object.freeze来冻结一个对象，使其内部的属性和方法不能更改

4.全局对象属性

全局对象是最顶层的对象，在浏览器环境指的是window对象，在node。js指的是global对象，在js语言里，所有变量都是全局对象的属性，

es6规定，var 和function声明的全局变量不属于全局对象的属性，let、const、class声明的全局变量不属于全局对象的属性

二.对象的解构赋值

destructuring es6允许按照一定模式，从数组和对象里提取值，对变量进行赋值，这被成为解构赋值

1.数组的解构赋值

指定默认值注意：es6内部使用严格相等运算符（===）判断一个位置上是否有值，所以如果一个数组成员不严格等于undefined，默认值是不会生效的

注意数组对应的如果不是数组的话就会报错

2.对象的解构赋值

解构不仅可以用于数组，还可以用于对象对象的属性没有次序，变量必须与属性同名，才能取到正确的值

默认值生效的条件是，对象的属性值严格等于undefined

3.函数参数的解构赋值

在以前的时候，当用户传入数组或者对象的时候，需要在函数内部对这个数组或者对象进行解构并且赋值、设置默认值 es6可以直接在函数的形参部分进行解构赋值和设置默认值

三：模板字符串

1.es6提供了又一种变量连接字符串的方法：

var food='蛋糕';
             var drink='可乐';             
             var str=`今天的早餐是${food}和${drink}`;

2.es6觉得可以用一个函数来搞一搞这个字符串：

利用kitchen函数来操作拼接字符串的过程，注意的是这个函数的返回值就是最终的字符串它接受两个参数，第一个是一个数组，前几位元素都是没有拼接变量时的每一个小的部分，并且这个数组有个属性叫raw，里面也会存放所有的元素第二个参数可以用...的方式来接受所有的要拼接的变量

```
         let food='蛋糕';
         let drink='可乐';

         let str=kitchen`今天的早餐是${food}和${drink}`;
         function kitchen (strings,...values) { console.log(strings.raw) console.log(values) return ... } console.log(str) ```

3.es6为字符串提供的几个小方法

let str='今天是hige好日子，心想的事儿都能成'
 //1.判断是否是以...开头
 console.log(str.startsWith('今天'))//true //2.判断是否是以...结尾 console.log(str.endsWith('能成'))//true //3.判断是否包含... console.log(str.includes('心'))//true

四：函数相关

1.设置函数参数的默认值

function fn (x=1,y=2) {
            return [x,y]
        }
        console.log(fn())

2.es6里面的... 叫法有两个

4.es6新增了箭头函数这样的定义函数的方式，箭头前面的是函数的参数，多个参数可以用()包裹，没有参数也要写（），箭头后面的是函数的返回值，如果写成{}包裹的话,就是函数体，需要返回值的时候要return

五：变量添加属性和方法

es6 觉得如果一个对象想拥有和一个变量的名字一样的键名，并且值为这个变量的值的属性的话，可以直接在键值对里直接写一个变量名就好，如果想设置一个方法，可以直接写方法名（）{}

let name='allen',
    age=

六：es6中对象的属性名可以用变量的值去表示

let person={};

person.name='xiuxiu';

person.firstName='zhao';

person['second name']='wang'; let myname='third name' person[myname]='gao'; console.log(person)

七：几个Object的方法

1. Object.is方法，可以做神奇的相等比较，类似为安格拉小姐

2.Object.assign。可以用来把某一个对象里面的属性复制另一个属性里，同名会覆盖，按照顺序

var person={};
Object.assign(person,
    {name:'zhaoxiu'},
    {name:'wangxiu'},
    {age:

3.Object.prototype相关

var a= Object.create(b)//把b作为原型来创建一个对象a
Object.getPrototypeOf(a)//获取a的原型 Object.setPrototypeOf(a,c);把a的原型设置为c var wang={ getName(){ return '王' } } var li={ getName(){ return '李' } } var xiu=Object.create(wang); console.log(xiu.getName())//王 console.log(Object.getPrototypeOf(xiu)==wang)//true Object.setPrototypeOf(xiu,li); console.log(xiu.getName())//李 console.log(Object.getPrototypeOf(xiu)==li)//true

通过{}.prototype可以来设置原型，但是输出出来的却是__proto__,es6觉得，那就直接设置__proto__吧

var wang={
    getName(){
        return '王'
    }
}
var li={
    getName(){
        return '李' } } var xiu={ __proto__:wang } console.log(xiu.getName())//王 console.log(Object.getPrototypeOf(xiu)==wang)//true xiu.__proto__=li console.log(xiu.getName())//李 console.log(Object.getPrototypeOf(xiu)==li)//true

在对象的方法里可以使用它原型的方法和属性，这个时候在方法里用super来代表自己的原型

var wang={
    getName(){
        return '王'
    }
}
var xiu={
    __proto__:wang, getFname(){ console.log(super.getName()) } } console.log(xiu) xiu.getFname()

八：class类

es6里引入了类的概念，可以通过class关键字来创建一个类，里面的contructor方法可以用来接受实例化时传入的参数，还可以在class里写一些自定义的方法,不需要加，哦

class person  {
constructor(name){
    this.name=name
}

say(){
    console.log(this.name) } } var xiu=new person('xiu') console.log(xiu) //..... person name:"xiu" __proto__:Object constructor:person(name) say:say() __proto__:Object //............ xiu.say()///xiu

es6觉得获取属性和设置属性的这些操作可以专门用set和get关键字来定义

class person  {
    constructor(name){
        this.name=name;
        this.hobby=[]; } get gethobby(){ return this.hobby; } set sethobby(hobby){ return this.hobby.push(hobby); } } var xiu=new person('xiu') console.log(xiu.hobby) //[] console.log(xiu.gethobby) //[] console.log(xiu.sethobby='sing') //sing console.log(xiu.hobby) // ['sing'] console.log(xiu.gethobby)// ['sing']

static 可以设置一个这个类自己的静态方法，只有类可以调用，实例不可以调用

class person  {
    constructor(name){
        this.name=name; } say(word){ console.log(word) } static superSay(word){ console.log(word) } } var xiu=new person('xiu'); xiu.say('hello') //person.say('hello')//error //xiu.superSay('hello')//error person.superSay('hello')

es6的class里，可以用extentds来进行继承class Student extends Person{ }，但是如果父类通过constructor接受了参数，并且之类需要接受更多的参数，那么需要在子类的constructor里用super来给父类contructor传递参数，剩下的再自己使用

class Person {
    constructor(name,age){
        this.name=name; this.age=age; } say(){ console.log(`${this.name},${this.age}`) } } new Person('xiu',

九：集合类型

1.es6新增了Set这个集合类型，类似与数组，但是还是有不少区别，比如，Set里不能有重复元素，重复元素不报错但是也不会添加进去

通过new Set（）来创建。初始参数是字符串其他的要报错，会把字符串拆开了作为元素

var _set=new Set('123')
      console.log(_set)//Set {"1", "2", "3"}

Set里不能有重复元素，重复元素不报错但是也不会添加进去

var _set2=new Set('1223')
     console.log(_set2)//Set {"1", "2", "3"}

通过add方法来添加新元素并且新添加是什么类型就是什么类型

var _set3=new Set('123')
_set3.add(

通过size来获取元素个数

        var _set4=new Set('123')
        console.log(_set4.size)//3 通过delete来删除元素 var _set5=new Set('123') _set5.delete('3') console.log(_set5)//Set {"1", "2"} 通过has来判断有没有这个元素 var _set6=new Set('123') console.log(_set6.has('3'))//true 可以通过forEach来遍历 var _set7=new Set('123') _set7.forEach((x,i)=>{ console.log(`${x},${i}`) }) // 1,1 // 2,2 // 3,3 通过clear来清除元素 var _set8=new Set('123') _set8.clear(); console.log(_set8)//Set {}

2.map，es6新增了map这样的类型，和{}的区别就是可以用任何数据类型作为键值

let map=new Map(); //获取一个map

        let [obj,fn,str]=[{},function () {},'hello']; map.set(obj,'obj') //设置map的键值对 map.set(fn,'fn') map.set(str,'str') console.log(map) console.log(map.size)//获取map的键值对个数 console.log(map.get(obj)) //获取map的键对应的值 console.log(map.delete(fn)); //删除某一个键值对 console.log(map.has(fn)) //检测是否包含某个键名 console.log(map.has(obj)) map.forEach((value,key)=>{ //可以用forEach来遍历map console.log(value) console.log(key) }) map.clear(); //清空map的键值对 console.log(map)

10.模块系统

在es6里引入了模块的概念

export function square(x) {
    return x * x;
}

import square from 'lib';
square(

export function square(x) {
    return x * x;
}
export function diag(x, y) { return sqrt(square(x) + square(y)); }

import { square, diag } from 'lib';
console.log(square(

转载于:https://www.cnblogs.com/Ari1c/p/8068176.html