首页 > 分享 > ES6新特性精讲

ES6新特性精讲

花匠小妙招
2024-12-19 08:00

箭头函数、this

ES6中可以使用 => 作为函数表达形式，极简风格，参数＋ => ＋函数体。

var foo = function(){return 1;}; //等价于 let foo = () => 1; let nums = [1,2,3,5,10]; let fives = []; nums.forEach(v => { if (v % 5 === 0) fives.push(v); }); console.log(fives); //[5,10]123456789101112

箭头函数中的 this 指的不是window，是对象本身。

function aa(){ this.bb = 1; setTimeout(() => { this.bb++; //this指向aa console.log(this.bb); },500); } aa(); //2123456789 let、const ES6 推荐在函数中使用 let 定义变量const 用来声明一个常量，但也并非一成不变的let 和 const 只在最近的一个块中（花括号中）有效

var a = 1; { let a = 2; console.log(a); //2 } console.log(a); //1 const A = [1,2]; A.push = 3; console.log(A); //[1,2,3] A = 10; //Error1234567891011 Classes

ES6中增加了类的概念，其实ES5中已经可以实现类的功能了，只不过使用Class实现可以更加清晰，更像面向对象的写法。

class Animal { constructor(){ console.log('我是一个动物'); } } class Person extends Animal { constructor(){ super(); console.log('我是一个程序员'); } } let aa = new Person(); //我是一个动物 //我是一个程序员

12345678910111213141516 解构

解构赋值是ES6中推出的一种高效、简洁的赋值方法

//通常情况下 var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; //解构赋值 let [first, second, third] = someArray; //比上面简洁多了吧 //还有下面例子 let [,,third] = [1,2,3]; console.log(third); //3 let [first,...last] = [1,2,3]; console.log(last); //[2,3] //对象解构 let {name,age} = {name: "lisi", age: "20"}; console.log(name); //lisi console.log(age); //20 let {ept} = {}; console.log(ept); //undefined

12345678910111213141516171819202122 Rest + Spread

“…”

//Rest function f(x, ...y) { return x * y.length; } f(3, "hello", true) == 6 //Spread function f(x, y, z) { return x + y + z; } f(...[1,2,3]) == 61234567891011 对象字面量扩展可以在对象字面量里面定义原型定义方法可以不用function关键字直接调用父类方法

//通过对象字面量创建对象 var human = { breathe() { console.log('breathing...'); } }; var worker = { __proto__: human, //设置此对象的原型为human,相当于继承human company: 'freelancer', work() { console.log('working...'); } }; human.breathe();//输出 ‘breathing...’ //调用继承来的breathe方法 worker.breathe();//输出 ‘breathing...’

123456789101112131415161718 模版字符串

ES6中提供了用反引号｀来创建字符串，里面可包含${…}等

`This is a pretty little template string.` `In ES5 this is not legal.` let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`1234567 Iterators（迭代器）

ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，直到状态为true退出。

ES6中非常受关注的的一个功能，能够在函数中间暂停，一次或者多次，并且之后恢复执行，在它暂停的期间允许其他代码执行，并可以用其实现异步。

Run-Stop-Run…

function *foo(x) { var y = 2 * (yield (x + 1)); var z = yield (y / 3); return (x + y + z); } var it = foo( 5 ); console.log( it.next() ); // { value:6, done:false } console.log( it.next( 12 ) ); // { value:8, done:false } console.log( it.next( 13 ) ); // { value:42, done:true }1234567891011

generator能实现好多功能，如配合for…of使用，实现异步等等。

for…of && for…in

for…of 遍历（数组）

let arr = [1,2,3]; for (let itr of arr) { console.log(itr); //1 2 3 }1234

for…in 遍历对象中的属性

let arr = [1,2,3]; arr.aa = 'bb'; for (let itr in arr) { console.log(itr); //0 1 2 aa }12345 Map + Set + WeakMap + WeakSet Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型WeakSet是一种弱引用，同理WeakMap

// Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true; // Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34; // Weak Maps var wm = new WeakMap(); wm.set(s, { extra: 42 }); wm.size === undefined // Weak Sets var ws = new WeakSet(); ws.add({ data: 42 });

1234567891011121314151617181920 Proxies

Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。

//定义被侦听的目标对象 var engineer = { name: 'Joe Sixpack', salary: 50 }; //定义处理程序 var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to', value); receiver[property] = value; } }; //创建代理以进行侦听 engineer = Proxy(engineer, interceptor); //做一些改动来触发代理 engineer.salary = 60; //控制台输出：salary is changed to 60

12345678910111213141516 Symbols

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符.

var sym = Symbol( "Symbol" ); console.log(typeof sym); // symbol12

如果要获取对象 symbol 属性，需要使用Object.getOwnPropertySymbols(o)

Promises ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者 rejectedPromises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的 deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式

原文参考：http://www.cnblogs.com/liubn/p/5694902.html