【javascript】ES6 特性 菜鸟学习笔记

       本文根据此文学习，附上原文链接点击

首先上几个链接

        

            ES6在线编辑器

           要查看ES6的支持情况请点此

           

1)首先说箭头操作符 =》

       知道c#的同学都知道lambda表达式，所以=》 也差不多可以代替function  可以使用 input =》output 这样来写 上demo

      

    var a =[12,13,14];    a.forEach( (v) => console.log(v)); //12,13,14

2)class  class本来就是保留词汇  在es6中被实现啦 可以更好地实现继承了

       //父类

       class Person {            constructor(name){                 this.name=name;            }            say(){                alert(this.name);            }       }       //子类       class  me extends Person {            constructor(name){                super(name);            }       }              var a = new me("adc");       a.say();//output  abc

3)  在ES6中写函数再也不用写function啦

   

var a ={    say(){      alert("a");    }} ;var b ={    __proto__ : a,    ha(){      alert("444");    }}b.ha();//444b.say();//aa.say();//a

4）* 字符串模板 实用哦 

只要使用反引号建立字符串就可以使用字符串模板和c#类似

var r=  Math.random();var string = `hello ${r}`;alert(string); //hello 2.246523425

5） 解构 

其实很好理解 自动分解对象或者数组的值 例：

var [x,y,z] =[ 1,2,3];console.log(x,y,z); // 1 2 3var [a,,b]=getVal();function getVal(){   return ["qq","ww","ee"]}console.log(a,b) //qq,ee

6) 参数的改变 也是一种实用的特性 

             1. 默认参数

                        以后再也不用在function里面判断参数的值  如 if(a==0){ a=1 }   var name =name||"abc"  例子例：

                               

function aa(name = "123"){  console.log(name)}aa(); //123aa(5555); //555

              2. 不定参数

                        其实以前也可以通过argument这个属性来获取参数列表 但是我们现在有新的做法啦 ... 使用三个点来代替多参数比如

function aa(...num){  console.log( num.reduce( (m,n)=>m+n)  )}aa(1,2,3,4) //10function bb(string,...num){  console.log( num.reduce( (m,n)=> m+string+n)  )}bb("-",1,2,3,4) //1-2-3-4 

               3.拓展参数  一般和不定参数一起使用 会变得非常方便  不用再使用apply了 例

 还是刚刚的例子

function aa(...num){  console.log( num.reduce( (m,n)=>m+n)  )}var array= [1,2,3,4];aa(...array); //10aa.apply(null,array);  //10  和上面的一样

7） let 与 const  

                    let  和 var作用基本一样但是let限定了 变量的作用域  const就比较简单 常量 例

以前 

for(let i =0;i<3;i++){}console.log(i);//3

for (let i=0;i<2;i++)console.log(i);//输出: 0,1console.log(i);//输出：undefined,严格模式下会报错

8)     for of （new）  for in  注意 for in返回array的index for of返回 例

var a = [1,87,3,4]; for(var b of a){ //ES6    console.log(b); //1,87,3,4  }for(var v in a){   console.log(v) //0,1,2,3}

9)iterator, generator

 这一部分的内容有点生涩，详情可以参见这里。以下是些基本概念。

• iterator:它是这么一个对象，拥有一个next方法，这个方法返回一个对象{done,value}，这个对象包含两个属性，一个布尔类型的done和包含任意值的value
• iterable: 这是这么一个对象，拥有一个obj[@@iterator]方法，这个方法返回一个iterator
• generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数（generator function）。generator同时拥有一个throw方法
• generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的
• yield 关键字：它可以暂停函数的执行，随后可以再进进入函数继续执行

10） 模块               

在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。

将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。下面的例子来自tutsplus:

// point.jsmodule "point" {    export class Point {        constructor (x, y) {            public x = x;            public y = y;        }    }} // myapp.js//声明引用的模块module point from "/point.js";//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入import Point from "point"; var origin = new Point(0, 0);console.log(origin);

11）Map，Set 和 WeakMap，WeakSet

这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的get，set 方法。

// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;

有时候我们会把对象作为一个对象的键用来存放属性值，普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收，有造成内存泄漏的危险。而WeakMap,WeakSet则更加安全些，这些作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉，具体还看下面的例子。

正文代码来自es6feature

// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined// Weak Setsvar ws = new WeakSet();ws.add({ data: 42 });//因为添加到ws的这个临时对象没有其他变量引用它，所以ws不会保存它的值，也就是说这次添加其实没有意思

12）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

上面代码我已加了注释，这里进一步解释。对于处理程序，是在被侦听的对象身上发生了相应事件之后，处理程序里面的方法就会被调用，上面例子中我们设置了set的处理函数，表明，如果我们侦听的对象的属性被更改，也就是被set了，那这个处理程序就会被调用，同时通过参数能够得知是哪个属性被更改，更改为了什么值。

13）Symbols

我们知道对象其实是键值对的集合，而键通常来说是字符串。而现在除了字符串外，我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型，像数字，字符串还有布尔一样，它不是一个对象。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。

以下例子来自es6features

(function() {  // 创建symbol  var key = Symbol("key");  function MyClass(privateData) {    this[key] = privateData;  }  MyClass.prototype = {    doStuff: function() {      this.key = "test";    }  };})();var c = new MyClass("hello")c["key"] === undefined//无法访问该属性，因为是私有的

14)Math，Number，String，Object 的新API

对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features，对这些新API进行了简单展示。

Number.EPSILONNumber.isInteger(Infinity) // falseNumber.isNaN("NaN") // falseMath.acosh(3) // 1.762747174039086Math.hypot(3, 4) // 5Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2"abcde".contains("cd") // true"abc".repeat(3) // "abcabcabc"Array.from(document.querySelectorAll('*')) // Returns a real ArrayArray.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior[0, 0, 0].fill(7, 1) // [0,7,7][1,2,3].findIndex(x => x == 2) // 1["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]["a", "b", "c"].keys() // iterator 0, 1, 2["a", "b", "c"].values() // iterator "a", "b", "c"Object.assign(Point, { origin: new Point(0,0) })

15）Promises

Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。

//创建promisevar promise = new Promise(function(resolve, reject) {    // 进行一些异步或耗时操作    if ( /*如果成功 */ ) {        resolve("Stuff worked!");    } else {        reject(Error("It broke"));    }});//绑定处理程序promise.then(function(result) {//promise成功的话会执行这里    console.log(result); // "Stuff worked!"}, function(err) {//promise失败会执行这里    console.log(err); // Error: "It broke"});

16）迭代器

迭代器是特殊的函数，它能帮助我们在一个自定义对象中进行迭代。它们也被称为发生器，因为当它们单独使用时，它们可以生成内容（例如斐波那契数列或者随机数）。前面提到的values()和keys()是图的迭代器。基本上来说，你可以像定义一个函数一样定义一个迭代器，但是在函数名和function关键字之间有一个*号：

function *fibonacci(){    let [ current, next ] = [ 0, 1 ];    for(;;){//无限循环        [ current, next ]= [ next, current + next ];        yield current;       }}

var fib = fibonacci();console.log(fib.next()); //1console.log(fib.next()); //2for (var v of fib){    if(v > 100) break;    console.log(v); //3,5,8...}

总结

总结就是一句话，前后端差异越来越小了。