ES6的相關語法

1.ES6的兼容性

經常使用的是babel(也叫作browser.js);

用法： 直接在script中引用,把相應的script裏面的type設置爲text/babel

2.箭頭函數

   注意：1.若是隻有一個參數，能夠省略(); 

 let show = x =>console.log(x*2); show(2);    //4

             2.若是隻有一個return，能夠省略{};

 let arr = [1,2,578798,5656]; arr.sort((n1,n2)=>n1-n2); console.log(arr);   //  1,2,5656,578798

3.函數擴展

(1) 收集剩餘參數, 參數擴展（展開） ...

做用： 1. 是剩餘參數,收集全部剩餘的參數，可是隻能在最後一個參數；

            2.展開數組

 1.   ...Array (...是剩餘參數,收集全部剩餘的參數)；

function show5 (a,b,...args){
  console.log(a);  //2
  console.log(b); //3
  console.log(args); //5,65,45
}
show5(2,3,5,65,45);

注意:剩餘參數只能在最後一個參數；

.2.展開數組
   使用...展開數組的效果就跟把數組的內容寫在這兒同樣

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

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2]; //等同於 let arr3 = [1,2,3,4,5,6];
console.log(arr3);  //1,2,3,4,5,6


function a6 (...args) {  //js內部認爲這參數就是一個數組
  fn2(...args);  //直接展開數組，等同於fn2(12,5);
}
function fn2(x,y) {
 console.log(x+y); 
}
a6(12,5);  //17

（2）默認參數 (相似於java的構造函數同樣)

沒有就給默認的,傳就給傳的

function b (a,b=5,c=12){
 console.log(a,b,c);
}
b(99,19);//99 19 12

 4.解構賦值

   注意三點：1）左右兩邊解構必須一致

                     2）右邊必須是個東西（合法）

                     3）聲明和賦值不能分開

let [b,f,g] = [1,2,3];
console.log(b,f,g); //1 2 3  左右兩邊都是數組

let {m1,n1} = {m1:12,n1:13};
console.log(m1,n1); //12 13 左右兩邊都是json

//複雜的解構賦值
let [{a1,b1},[num1,num2],num,str] = [{a1:12,b1:14},[23,13],12,'chen'];
console.log(a1,b1,num1,num2,num,str);  //12 14 23 13 12 "chen"


let [json,arr,nums,strs] = [{k1:12,k2:13},[3,4],23,'chen'];
console.log(json,arr,nums,strs);//{k1: 12, k2: 13} (2) [3, 4] 23 "chen"

//錯誤示範
let [a,b] ={a:2,b:3}； //左右兩邊不一致
let [u,p] = {2,3};  //右邊不是合法的東西
let [a,b,c];
[a,b,c] =[1,2,3]  //聲明和賦值分開

 5.數組

   1）map  映射 一對一 （給你幾個返回幾個）

    2）reduce 彙總 （多個進一個出）

    3）filter  過濾器

    4）forEach  循環（幾個循環的對比）沒有返回值

  map的應用

let arr = [12,33,34];
let result = arr.map(function(item){
  return item*2
})
console.log(result);  //[24, 66, 68]

let arr = [12,33,34];
let result = arr.map(item=>item*2)
console.log(result);  //[24, 66, 68]

let arr = [23,98,97,90];
let result = arr.map(item=>item>=60?'及格':'不及格');
console.log(result);   //不及格，及格，及格，及格

   filter的應用 (根據true和false來進行篩選)

let arr4 = [12,56,58];
let result4 = arr4.filter(function(item){
   return item%3==0;
})
console.log(result4); //12

let people =[
{
  name: 'uknow',
  age:25
},
{
  name:'hero',
  age:25
},
{
  name:'micky',
  age:24
},
{
  name:'xiah',
  age:24
},
{
  name:'max',
  age:22
}
];
let age = people.filter(item=>item.age>24);
console.log(age); //[{age: 25,name: "uknow"}, {age: 25,name: "hero"}]

 forEach的應用

let arr = [2,5,12];
arr.forEach((item,index)=>{
    console.log(item)  //2 5 12
})

一、for...in循環：能夠把一個對象的全部屬性依次循環出來。

var o ={
     name:"jack",
     age:20,
     city:"beijing"
};
for (var key in o){
      alert(key)  //"name","age","city"
}

因爲Array也是對象，而它的每一個元素的索引被視爲對象的屬性，所以，forj...in循環能夠直接循環出Array的索引。

var a =["A","B","C"];
for (var i in a){
    alert(i);       //"0","1","2"
    alert(a[i]);   //"A","B","C"
}

總結：for...in循環的是對象的屬性；因此便利數組獲得的是索引而不是值；因此要遍歷數組，能夠採用下標循環。

        for...in對Array的循環獲得的是String而不是Number。

二、for...of循環：ES6標準引入了新的iterable類型，Array、Map和Set都屬於iterable類型；

                      具備iterable類型的集合能夠經過for...of循環來遍歷;

                      只循環集合自己的元素。

用for...of循環遍歷集合，用法以下：

var a = ["A","B","C"];
var s = new Set(["A","B","C"]);
var m = new Map([[1,"x"],[2,"y"],[3,"z"]]);
for (var x of a){
     alert(x); A B C
}
for (var x of s){
     alert(x); A B C
}
for (var x of m){
     alert(x[0]+"="+x[1]); 1=X 2=Y 3=Z
}

 

6.字符串

   1）startsWith  （以什麼開頭）

   2）endsWith   （以什麼結尾）

   3）模板字符串