我爱编程es6 JavaScript

es6--let const 生成器 yield Symbol

2018-04-16  本文已影响312人  小宝薯
  • let and const
  • Destructuring 解构赋值
  • Spread and Reset SpreadJS扩展语句
  • Arrow Functions 箭头函数
  • Template Literals 模板字符串 ``
  • Classes 类 继承
  • Symbols es6第七种数据类型
  • Iterators 迭代器
  • Generators 生成器
  • Promises
  • Map 与Object对比
  • WeakMaps
  • Sets
  • WeakSets
  • Proxy 代理讲解+实例
es6

es6英文网站：https://nodejs.org/en/docs/es6/

babel英文网站 (将es6转换为es5) https://babeljs.io/

一、 let 、 const

const

二、SpreadJS 扩展语句

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

let arr = [1,2,3,4];
console.log(...arr);   //1，2，3，4

```
var meats = ['bacon','ham'];
var food = ['apple',...meats,'kiwi','rice'];
console.log(food)  //[ 'apple', 'backon', 'ham', 'kiwi', 'rice' ]
```

```
function addNum(a,b,c) {
    console.log(a+b+c);
}
var num = [1,2,3];
addNum(num[0],num[1],num[2]);
addNum(...num);  //6
```

三、箭头函数 Arrow Function

四、模板字符串直接输出变量 ${变量名}

let name ='apple';
 console.log(`我最爱的水果是 ${name}因为酸甜`);
 
 
 console.log("我最爱的水果是："+ name +'因为' +
    '好吃');                 //输出不会换行，拼接字符串空格折叠
    //我最爱的水果是苹果因为好吃
 console.log(`我最爱的是 ${name}因
     为好吃`);                     //输出会换行
     //我最爱的是apple因      
     //为好吃

五、class类--constructor、 super 、 extends

 class Person {           //父类 
    constructor(name, age, weight) {
        this.name = name;
        this.age = age;
        this.weight = weight;
    }
    displayName() {
        console.log(this.name);
    }
    displayAge() {
        console.log(this.age);
    }
    displayWeight() {
        console.log(this.weight);
    }
}

class Programmer extends Person{   //继承父类
    constructor(name, age, weight,language) {
      super(name,age,weight);   //constructor里会先继承父类的super
      this.language = language; 
    }
    displayLanguage() {
        console.log(this.language);
    }
}
let sally = new Person('sally',21,49);
sally.displayName();
sally.displayAge();
sally.displayWeight();
console.log('---------------');
let bucky = new Programmer('bucky roberts',87,987,'javascript');
bucky.displayName();
bucky.displayAge();
bucky.displayLanguage();   //Programmer子类特有的，Person没有

六、Symbol

```
let sym = Symbol('foo');
console.log(sym);   //Symbol(foo)
console.log(typeof sym);   //symbol
console.log(Symbol('foo') ===Symbol('foo'));  //false
console.log(Number(3) ===Number(3));  //true
```

七、JavaScript迭代器 函数生成器

有几个特点：

八、Yield

function* simpleGenerator(){
    yield 'apples';  //到这一步，停一次
    yield 'bacon';  //再停一次
    console.log('ok,this is the line after the bacon');
    yield 'corn';   //再停一次
}
let simple = simpleGenerator();
console.log(simple.next());    //{ value: 'apples', done: false }
console.log(simple.next().value);  //bacon .value只要值，
console.log(simple.next().value);  //ok,this is the line after the bacon +// corn
console.log(simple.next().value);  //结束了，没有了，再想有next就是undefined

function* getNextId(){
    let id = 0;
    while(id < 3) {
        yield id++;                 //pauses
    }
}
let createUser = getNextId();  
console.log(createUser.next().value);   //0
console.log(createUser.next().value);   //1
console.log(createUser.next().value);  //2
console.log('hello world');    
console.log(createUser.next().value);   //undefined

九、Map

十、WeakMap

Map和WeakMap的区别：

var myMap = new Map();
var myWeakMap = new WeakMap();

var obj1 = {'foo':'bar'};
var obj2 = {'bar':'baz'};
myMap.set(obj1,'hello');
myWeakMap.set(obj2,'hello');
console.log(myMap.get(obj1));  //hello
console.log(myWeakMap.get(obj2));  //hello
//存储键值对和获取的方法一致
Map WeakMap
key可以是任何数据类型 key键值是弱引用，所以必须是Object类型(除了null)；值任意
Map有.size获取元素数量 没有.size属性获取数量
可用.forEach()方法遍历 没有 .foreach()方法
键值对不会自动销毁 如果WeakMap里的key被删除了，对应的值也会被立马销毁垃圾回收 

obj1 = null;
obj2 = null;
//map里元素不能主动删除释放
myMap.forEach(function (val,index) {
    console.log(index,val);   //{ foo: 'bar' } 'hello'
});

// myMap.forEach(function (val,index) {  //报错，没有该方法
//     console.log(index,val);
// });

console.log(myWeakMap.get(obj2));  //undefined  已经垃圾回收了，


myMap.delete(obj1);
myMap.forEach(function (val,index) {
    console.log(index,val);   //{ foo: 'bar' } 'hello'
});

console.log(myMap.size);   //1
console.log(myWeakMap.size);  //undefined ，没有该方法

十一、Set

十二、WeakSet

Weakset以及与Set区别

十三、Proxy

计算机术语中，什么是Proxy代理：

在计算术语中，代理位于你和你正在通信的事物之间。这个术语通常应用于代理服务器，它是一个介于web浏览器（Chrome、Firefox、Safari、Edge等）和web服务器（Apache、Nginx、IIS等）之间的设备。代理服务器可以修改请求和响应。例如，它可以通过缓存定期访问属性并将其提供给多个用户来提高效率。
在ES6中proxies就是位于你的代码和object之间。它允许你执行元编程操作，比如：拦截一个呼叫来检查或变更对象的属性。

Proxy的traps方法类型：

construct(target, argList) 当使用new构建新对象时
get(target, property) 该方法必须返回属性value值
set(target, property, value) 该方法用于拦截设置属性值的操作，成功时返回时true；严格模式下返回false的时候会抛出一个TypeError异常
deleteProperty(target,property) 删除对象中的属性 ，返回的必须是true或false
apply(target,thisArg,argList) has(target,property)
has(target,property) 可以看作时针对in操作的钩子， 返回值必须是true或false
ownKeys(target) 访问Object.getOwnPropertyNames()， 必须返回一个可枚举的对象
getPrototypeOf(target) 当地去代理对象的原型时调用，必须返回原型的对象或者null
setPrototypeOf(target,prototype) 设置原型对象，没有返回值
isExtensible(target) 访问Object.isExtensible()，它决定了一个对象是否能有新添加的属性，不稀罕会true或false
perventExtensions(target) 防止新属性添加到对象中，必须返回true或false
getOwnPropertyDescriptor(target,property) 它返回undefined或属性的描述：value,writable,get,set,configurable,enumerable
defineProperty(target,property,descriptor) 定义或修改对象属性，必须返回true或false。当target属性成功定义返回true，否则返回false

eg1: 创建剖析代理

eg2:双向绑定

目前Proxy的力量不一定是那么显而易见，但是它们提供了强大的元编程机会，JavaScript的创造者--Brendan Eich就认为，Proxy很赞！
上一篇下一篇

猜你喜欢

热点阅读