es6

兼容性



es6_第1张图片

IE:可以看到IE6,IE7是完全不支持的。而IE8是只支持一些内容,参考引用4,IE9是大部分支持,支持度参考引用2。

Chrome:Chrome 23版本之后就是完全支持的了。19~22版本有不兼容的地方,参考引用1。

Firefox:Firefox 21版本之后就是完全支持的了。4~20版本有不兼容的地方,参考引用1。


我们利用npm来安装我们最想要的babel。

同样我们启动命令提示符窗口并且输入:npm install babel-core@5,然后回车,这里要稍等片刻:


es6_第2张图片

看到上面的界面就是表示你安装babel成功,你会在电脑盘中找到这样的目录:C:\Users\Administrator\node_modules\babel-core,打开后你会看到:


es6_第3张图片

在这个目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)。

然后我们将这个文件使用在我们的ES6.html中。

    <script src="browser.min.js">script>    <script type="text/babel">        const Name = '张三';//使用新增的关键字:const声明常量        alert(Name);    script>

我们把browser.min.js引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。










新特性

ES6新特性在Babel下的兼容性列表

ES6特性兼容性

箭头函数支持

类的声明和继承部分支持,IE8不支持

增强的对象字面量支持

字符串模板支持

解构支持,但注意使用方式

参数默认值,不定参数,拓展参数支持

let与const支持

for ofIE不支持

iterator, generator不支持

模块module、Proxies、Symbol不支持

Map,Set 和 WeakMap,WeakSet不支持

Promises、Math,Number,String,Object 的新API不支持

export & import支持

生成器函数不支持

数组拷贝支持

Let和const

Let作用域在最近一个大括号内,为局部变量,不影响外部内容

let name = 'zach'

while (true) {

    let name = 'obama'

    console.log(name)  //obama

    break

}

console.log(name)  //zach



Const声明常量,一旦声明,常量的值就不能改变。否则会报错


const Name = '张三';//使用新增的关键字:const声明常量

Name = "1"

alert(Name);




For of

For of用break;终止。解决了for 和 for...in 循环的不足之处,你可以随时停止或退出for...of 循环。

For in和 for of 的区别

let map = ['a','b','c','d']

for(i in map){

console.log(i)

}

for(i of map){

console.log(i)

}


es6_第4张图片

For in循环的是index下标

For of循环的是值



Set和Map


Set结构最大的特点是去重,Map结构最大的特点是kv结构。


Map 对象就是保存 key-value(键值) 对。对象和原始值可以用作 key(键)或 value(值)。Map 对象根据其插入方式迭代元素。换句话说, for...of 循环将为每次迭代返回一个 key-value(键值) 数组。

Map结构和对象非常类似,不过最大的区别在于,Map结构可以用其他类型作为key,例如数组、对象等。

const iterable = new Map([['one', 1], ['two', 2]]);

for (const [key, value] of iterable) {

console.log(`Key: ${key} and Value: ${value}`);

// Output:

// Key: one and Value: 1

// Key: two and Value: 2


Set(集合) 对象允许你存储任何类型的唯一值,这些值可以是原始值或对象。 Set(集合) 对象只是值的集合。 Set(集合) 元素的迭代基于其插入顺序。 Set(集合) 中的值只能发生一次。如果您创建一个具有多个相同元素的 Set(集合) ,那么它仍然被认为是单个元素。

Set和数组类似,可以存储元素,但是Set不能存储相同的值。

const iterable = new Set([1, 1, 2, 2, 1]);

for (const value of iterable) {

console.log(value);

}

// Output:

// 1

// 2

WeakMap,WeakSet

WeakSet的成员只能是对象

WeakMap只接受对象作为键名

解构

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

//JS

对象

var obj = {a:100,b:200}

.var a = obj.a

var b = obj.b

数组

var arr = ['xxx','yyy','zzz']

var x = arr[0]

//ES6

对象

const {a,c} = {a:10,b:20,c:30}

console.log(a)//10

console.log(c)//30

数组

const arr = ['xxx','yyy','zzz']

const [x,y,z] = arr

console.log(x)//‘xxx’

console.log(y)//‘yyy’

console.log(z)//‘zzz’

多行字符串/模板变量

模板字面量用倒引号 ( `` )(而不是单引号( '' ) 或双引号( "" ))表示,可以包含用${expression} 表示的占位符

//JS

var name =  'zhangsan', age = 20,html = '';

html += '

';

html += '

' + name + '

';

html += '

' + age + '

';

html += '

';

//ES6

const name = 'zhangsan',age = 20;

const html = `

                 

${name}

                 

${age}

             

`;

console.log(html);

箭头函数

function funcName(params) {

console.log(params + 2)

}

funcName(2)//4


var funcName = (params) => {

console.log(params + 2)

}

funcName(2)//4

var funcName = (params) => console.log(params + 2);//只有一个表达式可以省略花括号

funcName(2)//4

var funcName = params => console.log(params + 2);//只有参数可以省略括号

funcName(2)//4


省略了function

箭头函数this为父作用域的this,不是调用时的this

function Counter() {

  this.num = 0;

  this.timer = setInterval(() => {

this.num++;

    console.log(this.num);

  }, 1000);

}

var b = new Counter();

// 1

// 2

// 3

// ...

箭头函数不能作为构造函数,不能使用new

var B = () => {

value: 1;

}

var b = new B(); //TypeError: B is not a constructor

对象字面量增强

//ES5对象字面量

var type = 'rock';

var heat = '50%';

var music = {

type: type,

heat: heat

};

console.log(music); // Object {type: "rock", heat: "50%"}

//ES6对象字面量

var type = 'rock';

var heat = '50%';

var music = {

type,

heat

};

console.log(music); // Object {type: "rock", heat: "50%"}

类的声明和继承

class Parent {

    constructor(name,age) {

        this.name = name;

        this.age = age;

    }


    getName() {

        return this.name;

    }

}

typeof Parent; //function,类的数据类型就是函数,类本身就指向构造函数

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。



class Child extends Parent {

    constructor(sex) {

        super();

        this.sex = sex;


    }

}

var child = new Child('xiaoyu',12,'man');

在子类的构造函数中,如果显示声明了constructor,则必须要显示的调用super函数

只有调用super之后,才可以使用this关键字,否则会报错。

参数默认值,不定参数,拓展参数


参数默认值

function f(x, y = 12) {

  return x + y;

}


console.log(f(3));  //15

console.log(f(3,2));  //5


不定参数可以让我们更方便地获取不定参数(或者说剩余参数)

function demo(part1, ...part2) {

console.log(part1);

console.log(part2);

}


demo(1,2,3,4,5,6);

// 1

// [2,3,4,5,6]


扩展运算符可以将数组转换为连续的函数参数。

[if !supportLists](1)[endif]在函数中使用

function f(x, y, z) {

  return x + y + z;

}

// 传递数组的每个元素作为参数

f(...[1,2,3]); // 6

[if !supportLists](2)[endif]在数组中使用

var parts = ["1", "2"];

var lyrics = ["a", ...parts, "b"]; //["a", "1", "2", "b"]



我觉得拓展运算符合,不定参数刚好是反向转换

不定参数是将多个值转成数组

扩展运算符是将数组拆成多个值





数组拷贝

es5中通过变通的方式来实现深克隆

const a1 = [1, 2];

const a2 = a1.concat();

a2[0] = 2;

a1 // [1, 2]


Es6则是使用了拓展运算符

const a1 = [1, 2];

//写法一 const a2 = [...a1];

//写法二 const [...a2] = a1;


扩展运算符提供了数组合并的新写法

const arr1 = ['a', 'b'];

const arr2 = ['c'];

const arr3 = ['d', 'e'];

// ES5的合并数组

arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组

[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]


生成器函数

Generator的声明方式类似一般的函数声明,只是多了个*号,并且一般可以在函数内看到yield关键字

function* showWords() {

    yield 'one';

    yield 'two';

    return 'three';

}

var show = showWords();


show.next() // {done: false, value: "one"}

show.next() // {done: false, value: "two"}

show.next() // {done: true, value: "three"}

show.next() // {done: true, value: undefined}

调用next方法后,函数内执行第一条yield语句,输出当前的状态done(迭代器是否遍历完成)以及相应值(一般为yield关键字后面的运算结果)

每调用一次next,则执行一次yield语句,并在该处暂停,return完成之后,就退出了生成器函数,后续如果还有yield操作就不再执行了

yield和yield*

function* showWords() {

    yield 'one';

    yield showNumbers();

    return 'three';

}

function* showNumbers() {

    yield 10 + 1;

    yield 12;

}

var show = showWords();

show.next() // {done: false, value: "one"}

show.next() // {done: false, value: showNumbers}

show.next() // {done: true, value: "three"}

show.next() // {done: true, value: undefined}

因为yield只能原封不动地返回右边运算后值,但现在的showNumbers()不是一般的函数调用,返回的是迭代器对象

所以换个yield* 让它自动遍历进该对象

function* showWords() {

    yield 'one';

    yield* showNumbers();

    return 'three';

}

function* showNumbers() {

    yield 10 + 1;

    yield 12;

}

var show = showWords();

show.next() // {done: false, value: "one"}

show.next() // {done: false, value: 11}

show.next() // {done: false, value: 12}

show.next() // {done: true, value: "three"}

要注意的是,这yield和yield* 只能在generator函数内部使用,一般的函数内使用会报错

import 和 export

export将变量或方法暴露给外部

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;


1使用export{接口} 导出接口

export {firstName, lastName, year};

2我们可以使用XX as YY

export {firstName as first, lastName as last, year};

3使用export default导出;如果一个js模块文件就只有一个功能, 那么就可以使用export default导出;

export default "string";

4除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。


使用import 引入,script 注意type要改为module

后方的引用路径不可以是裸路径



function v1() { ... }

function v2() { ... }

export {

    v1 as streamV1,

    v2 as streamV2,

    v2 as streamLatestVersion

};

你可能感兴趣的:(es6)