ES6 新語法 01

hogen發表於2018-01-17
變數/賦值
  • var 可以重複定義、不能限制修改、沒有塊級作用域
  • let 不能重複定義、變數、塊級作用域
  • const 不能重複定義、常量、塊級作用域
解構賦值：

  • 左右兩邊必須一樣；右邊得是個東西

  • 必須定義和賦值同步完成

    let [a,b]={a: 12, b: 5};
    let {a,b}={12,5};
    let [x,{a:{b,c},d},y] = [12,{a:{b:1,c:2},d:3},88];
    console.log(`a的值是${a},b的值是${b},c的值是${c},d的值是${d}`);
    複製程式碼
箭頭函式
function (引數,引數){
  函式體
}
(引數,引數)=>{
  函式體
}
複製程式碼
  • 如果有且僅有1個引數，()可以省
  • 如果函式體只有一句話，而且是return，{}可以省
let arr = [2,10,5,99];
let sort_arr = arr.sort((n1,n2)=>n1-n2);// 函式體只有一句 return
alert(sort_arr);
複製程式碼
預設引數

ES5 預設賦值的寫法

function show(a, b, c){
  b=b||5;
  c=c||12;// 呼叫方法如果 c 的值為空，此處賦值12
  console.log(a,b,c);
}
show(12, 37);
複製程式碼

ES6 預設賦值新寫法

function show(a=1, b=2, c=3){
  console.log(a,b,c);// 12 37 3
}
show(12, 37);
複製程式碼

引數展開(剩餘引數、陣列展開)

let arr=[12,5,8,99];
//...arr    <=>    12,5,8,99
let arr2=[...arr, arr];
let arr3=[...arr,...arr];
let [a,b,c,d] = arr;
console.log(arr2);// [12, 5, 8, 99, Array(4)]
console.log(arr3);// [12, 5, 8, 99, 12, 5, 8, 99]
console.log(`a的值是${a},b的值是${b},c的值是${c},d的值是${d}`);// a的值是12,b的值是5,c的值是8,d的值是99
複製程式碼

“三個點”的第1個用途：接收剩餘引數

 function show(a, b, ...args) //  剩餘引數必須在引數列表的最後
複製程式碼

“三個點”的第2個用途：展開一個陣列

function show(a, b, ...args){
  console.log(a,b,args);// 12 37 Array(4)
}
show(12, 37, 88, 99, 123, 56);
複製程式碼
陣列(新增5種方法)

forEeach 遍歷：

let arr = [1,2,3,4];
arr.forEach(function(element,index,arr){
    alert(arguments.length);//forEach有3個引數，箭頭函式不適應arguments
    console.log(a+','+b+','+c);
    console.log(`第${index}個元素是${element},最後一個元素是${arr}`);//0 1 (4) [1, 2, 3, 4]
});
複製程式碼

利用 forEeach 方法求和

let sum = 0;
arr.forEach(element=>sum+=element);
alert(sum);
複製程式碼

map 對映：

arr.map(function(element,index,arr){
    alert(arguments.length);//map有3個引數，箭頭函式不適應arguments
    console.log(a+','+b+','+c);
    console.log(`第${index}個元素是${element},最後一個元素是${arr}`);
});
複製程式碼

map 方法求分數是否及格

let score = [100,20,30,70,50];
let result = score.map(element=>element>60?"及格":"不及格");
alert(result);
複製程式碼

reduce 彙總：

let arr = [1,2,3,4,5];
arr.reduce(function(tmp,element,index,arr){
    // alert(arguments.length);//reduce 有4個引數
    // console.log(a+','+b+','+c+','+d);
    console.log(`首個引數是${tmp},第${index}次相加的元素是${element},最後一個元素是${arr}`);
});
複製程式碼

reduce 求平均數

let avg = arr.reduce((tmp,element,index)=>{
    if (index!=arr.length-1) {
        return tmp+element;
    }else{
        return (tmp+element)/arr.length;
    }
});
alert(avg);
複製程式碼

filter 過濾：

let arr = [1,3,4,5];
arr.filter(function(element,index,arr){
    alert(arguments.length);//filter函式有3個引數
    console.log(`第${index}個元素是${element},最後一個元素是${arr}`);
});
複製程式碼

filter 過濾出陣列中能被2整除的數

let result = arr.filter(function(element){
    if (element%2==0) {
        return true;
    }else{
        return false;
    }
});
//上述可簡寫成：
let result = arr.filter(item=>item%2==0);/
alert(result);
複製程式碼

Array.from：處理 array-like 型資料

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
    </style>
    <script>
    window.onload=function (){
      let aDiv=document.getElementsByTagName('div');//aDiv並不是一個真正意義上的陣列
      Array.from(aDiv).forEach(div=>{
        div.style.background='yellow';
      });
    };
    </script>
  </head>
  <body>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </body>
</html>
複製程式碼
json

  • 簡寫：名字和值一樣的，可以省

    let a=12;
    let b=5;
    let json={a, b};
    console.log(json);//{a: 12, b: 5}
    複製程式碼

  • function可以不寫

    let json={
       a: 12,
       b: 5,
       show(){
        alert(this.a+this.b);
      }
    /*show: function (){
        alert(this.a+this.b);
      }*/
    };
    json.show();
    複製程式碼
字串
  • 字串模板：植入變數、任意折行 a變數的值是：${a}
  • startsWith 方法
  • endsWith 方法
物件導向

傳統 Js 物件導向的民間寫法(非官方，不統一)

function Person(name, age){
  this.name=name;
  this.age=age;
}
Person.prototype.showName=function (){
  alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
  alert('我'+this.age+'歲');
};
let p=new Person('blue', 18);
p.showName();
p.showAge();
//傳統 js 繼承寫法-------------------------
function Worker(name, age, job){
  Person.call(this, name, age);
  this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
  alert('我是做：'+this.job);
};
let w=new Worker('blue', 18, '打雜的');
w.showName();
w.showAge();
w.showJob();
複製程式碼

ES6 物件導向的官方新寫法

class Person{
  constructor(name, age){
    this.name=name;
    this.age=age;
  }
  showName(){
    alert('我叫'+this.name);
  }
  showAge(){
    alert('我'+this.age+'歲');
  }
}
let p=new Person('blue', 18);
p.showName();
p.showAge();
//ES6 繼承新寫法-------------------------
class Worker extends Person{
  constructor(name, age, job){
    //super-超類(父類)
    super(name, age);
    this.job=job;
  }
  showJob(){
    alert('我是做：'+this.job);
  }
}
let w=new Worker('blue', 18, '打雜的');
w.showName();
w.showAge();
w.showJob();
複製程式碼

相關文章