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(总和)...

点击查看剩余70%