ES6 (Es2015)新特性

ES6 (Es2015)新特性

ES6, 全称ECMAScript 6.0, 是JaveScript的下一个版本标准, 2015.06发版.
ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现

一、变量与常量

<script>
  var a = 10;
  var a = 15;
  
  var b = 20;
      b = 16;


  //有三个按钮绑定点击事件点击，依次弹出1,2,3
  window.onload = function(){
      var oBtn = document.getElementsByTagName('button');
      for(var i =0; i < oBtn.length;i++){
          oBtn[i].addEventListener('click',function(){
              alert(i); // 3,3,3
          })
      }
  }
  //解决办法: 加立即执行函数
  window.onload = function () {
      var oBtn = document.getElementsByTagName('button');
      for (var i = 0; i < oBtn.length; i++) {
          (function (i) {
              oBtn[i].addEventListener('click', function () {
                  alert(i); //0,1,2
              })
          })(i);
      }
  }
</script>

<script>
  let a = 10;
  let a = 15;//error
  
  let b = 11;
      b = 22;//22
  
  const c = 20;
  const c = 25; //error
  
  const d = 30;
        d = 35; //16
  


  window.onload = function(){
      var oBtn = document.getElementsByTagName('button');
      for(let i =0; i < oBtn.length;i++){
          oBtn[i].addEventListener('click',function(){
              alert(i); // 0,1,2
          })
      }
  }
</script>

var 可以重复声明,无限次修改,没有作用域
let 不能重复声明,变量可以修改值,有作用域
const 不能重复声明,常量不可以修改值,有作用域

二、解构赋值

<script>
  let [a,b] = [1,2]; 
    console.log(a,b); //1,2
    
    let [a,b];
    [a,b] = [1,2]; //error 
    
    let {name,age,job} = {name:"bobocode",age:23,job:'web'}
    console.log(name,age,job);  // bobocode 23 web
    
    let [{a,b},[arr]] = [{a:'testa',b:'testb'},[1,2,3]];
    console.log(a,b,arr); // testa testb [1, 2, 3]
    
    let arr1 = [1,2,3];
    let arr2 = [5,6,7];
    let newArr = [...arr1,...arr2];
    console.log(newArr); //[1, 2, 3, 5, 6, 7]
</script>

解构赋值声明和赋值不能分开写
解构赋值等号左右两边的结构必须相同
解构赋值右边必须是有意义的结构(arr,json等)

三、数组新方法

<script>
 //map(映射)
  [1,2,3,4].map(function(item){
      console.log(item*2); //1,4,9,16 
  });
  
 //reduce(总和)
 [1,2,3,4].reduce(function(temp,value,index){
  return temp+ value; //10 
 })
​
 //fliter(过滤)
 [1,2,4,8,9].filter(function(item){
   return item % 2 == 0; // 2,4,8
 })
​
 //forEach(迭代)
 [3,51,34,53].forEach(function(item,index){
   console.log(item+","+index);//3,0  51,1 34,2 53,3
})
</script>

四、箭头函数

<script>
  function Test(a,b){
      return a + b;
  }
  
  function Test(c){
      return c*c;
  }
</script>

<script>
  (a,b)=>{a+b}
  
  c=>{c*c}
</script>

函数只有一个参数,() 可以省略
函数返回语句只有一个,{} 可以省略

五、模板字符串

<script>
  //字符串拼装
  var text = 'hello';
  var div = '<div><ul>\
    <li>'+text+'</li>\
    </ul></div>';
</script>

<script>
  //字符串模板
    let text = 'hello';
    let div =`<div>
    <ul>
    <li>${text}</li>
    </ul>
    </div>`
    
   //字符串新的方法
   //startWith()   "http://www.baidu.com".startsWith('http'); //true
   //endsWith()    "js/index.js".endsWith('.js'); //true
</script>

六、面向对象class

<script>
var Person = function(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.showInfo = function(){
    console.log(this.name + ","+ this.age);
}
var p = new Person('bb',12)
p.showInfo() //bb,12
​
// es5 继承的写法
var Student = function(name,age,score){
    Person.call(this,name,age);
    this.score = score;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype.showScore= function(){
    console.log(this.name + ","+ this.age +","+ this.score);
}
var s = new Student('bb',12,98);
s.showScore() //bb,12,98
</script>

es6写法

<script>
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    showInfo(){
        console.log(this.name + ","+ this.age);
    }
}
var p = new Person('bb',12)
p.showInfo() //bb,12
​
// es6继承的写法
​
class Student extends Person{
constructor(name,age,score){
    super(name,age,score);
        this.score = score;
    }
    showScore(){
        console.log(this.name + ","+ this.age +","+ this.score);
    }
}
var s = new Student('bb',12,98);
s.showScore() //
bb,12,98
</script>

七、Promise

<script>
//发送一个ajax请求（jquery3版本之前的写法，版本3ajax内嵌promise语法）
var p = new Promise(function(resolve,reject){
    $ajax({
        url: '',
        dataType: 'json',
        success(){
            resolve();
        },
        error(){
            reject();
        }
    });
});
​
let result = p.then(function(data){
    console.log('success'+data);
},function(err){
    console.log('error'+err);


//Promise.all 的使用
function createPromise(urls){
    reutrn new Promise(function(resolve,reject){
        $ajax({
            urls //key 和 value 相同,可以省略
            dataType: 'json',
            success(){
                resolve();
            },
            error(){
                reject();
            }
        });
    });
}
​
Promise.all([
    createPromise('data/test.txt'),
    createPromise('data/test2.txt')
]).then(function(arr){
    let [res1,res2] = arr;
    console.log('success'+res1);
    console.log(''+res2);
},function(err){
    console.log('error'+err);
})
</script>

八、generator

<script>
//标准的生成器写法
let a = 'a';
let b = 'b';
function *test(){
    console.log(a);
    yield;
    console.log(b);
}
​
let res = test();
res.next(); // 'a'
res.next(); // 'b'
​
-----------------------------------

//yeild 带参数的
let a = 'a';
let b = 'b';
function *test(){
    console.log(a);
    b = yield;
    console.log(b);
}
​
let res = test();
res.next(11); //a
res.next(3);  //3
//{value: undefined, done: true} 没返回值 
​
-----------------------------------
//yeild 带返回值的
let a = 'a';
let b = 'b';
let c = 'c';
function *test(){
    console.log(a);
    b = yield;
    console.log(b);
    c = yield;
    console.log(c);
    return 5;
}
​
let res = test();
res.next(11); //a
res.next(3);  //3
res.next(2); //2
//{value: 5, done: true} 返回值是5
</script>