ES6基本語法

ES6基本語法

一、let

（1）、let做用域只限於當前代碼塊

{
    let a = 12;
}
console.log(a);   //報錯，a不存在

(2)、let聲明的變量做用域不會被提高

{
    console.log(a);  //報錯
    let a = 12;
}

（3）、在相同的做用域下不能聲明相同的變量

{
   let a = 10;
   let a = 11;  //報錯    
 }

（4）、for循環體現let的父子做用域

//使用var聲明，須要用到「閉包」
    var btns = document.querySelectorAll("button");
      for(var i=0;i<btns.length;i++){
      （function(i){
           btns[i].onclick= function (){
            alert("點擊了"+i+"個按鈕")
          }
      })(i);
    }
    
    //let聲明
     let btns = document.querySelectorAll("button");
      for(let i=0;i<btns.length;i++){
          btns[i].onclick= function (){
            alert("點擊了"+i+"個按鈕")
          }
      }

二、const
(1)、const做用域只限於當前代碼塊
(2)、const聲明的變量做用域不會被提高
(3)、在相同的做用域下不能重複聲明
(4)、聲明的同時必須賦值，聲明後值沒法改變

{   
    const b; //報錯
    
    const a = 123;
    a = 222; //報錯
    
}

注意：針對"對象"就不同了，以下：

{
    const obj = {
        name:"lisi"
     }
    console.log(obj.name); //lisi
    
    obj.name = "zhaoliu";
    console.log(obj.name);//zhaoliu
}
//在上面中定義的是一個常量對象，對象是儲存在內存的「堆區」，經過一個地址描述出來，在「棧區」關聯此地址。因此，obj存儲的是地址，而不是值，是能夠作修改的。

三、解構賦值

ES6容許按照必定的模式從數組和對象中提取值，對變量進行賦值，這被稱爲解構。

（1）、基本用法

//新的定義方法
let  [name,age,sex] = ["李四",20,"女"];

//之前的定義方法
let name = "李四";
let age = 20;
let sex = "女"

(2)、對象的解構賦值

//前面的key值和後面的key值相對應的
  let {name,age,friends} = {name:"zhangsan",age:12,friends:["lulu","女"]};
  console.log(name); //zhangsan

(3)、嵌套數組的解構賦值

//只要一一對應就能夠
let [a1,[a2,a3,[a4,a5]]] = [1,[2,3,[4,5]]];
console.log(a1,a2,a3,a4,a5);  //1，2，3，4，5

（4）、字符串的解構賦值

let [a,b,c,d,e] = "我是中國人";
console.log(a);   //我
console.log(b);   //是
console.log(c);   //中
console.log(d);   //國
console.log(e);   //人

（5）、空缺變量

let [a,b,,e]=['a','b',[1,2],4]

(6)、多餘變量

let [a,b,,e,f]=['a','b',[3,4],5]

注意：由於字符串有構造器，因此能夠解析出來。

四、數據集合: set

（1）、特色

① 相似於數組，但沒有重複的元素（惟一的）;
② 開發中用於去除重複數據;
③ key和value都是相等的;

let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
    console.log(set);  // zhangsan ,lisi ,wangwu

（2）、一個屬性

let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
console.log(set.size);   // 3

（3）、四個方法

① add方法：

vlet set = new Set(["zhangsan","lisi"]);
console.log(set); // {"zhangsan", "lisi"}
set.add("wangwu");
console.log(set); // {"zhangsan", "lisi", "wangwu"}

②delete方法：

let set = new Set(["zhangsan","lisi"]);
//直接將刪除的值傳進去便可
set.delete("lisi");
console.log(set); //{"zhangsan"}

③has方法：

let set = new Set(["zhangsan","lisi"]);
console.log(set.has("lisi"));  //true

④clear方法：

let set = new Set(["zhangsan","lisi"]);
set.clear(); // 此時set爲空了

五、數據集合：map

(1)、特色

① 相似於對象，本質上是鍵值對的集合;
② "鍵"不侷限於字符串，各類類型的值（包括對象）均可以當作鍵;
③ 對象"字符串——值",Map"值——值",是一種更完善的hash結構實現;

//建立map
  let obj1 = {a:1}, obj2 ={b:2};
  const map = new Map([
    ['name','張雪'],
    ["age",21],
    ["sex",'男'],
    [obj1,"haha"],
    [obj2,'wowo']
  ]);
  console.log(map);   //{"name" => "張雪", "age" => 21, "sex" => "男", Object => "haha",Object => "wowo"}

結果如圖所示：

(2)、一個屬性

const map = new Map([
    ['name','張雪'],
    ["age",21],
    ["age",21],
    ["sex",'男']
]);
console.log(map.size); //3

(3)、五個方法

① get/set方法：

const map = new Map([
        ['name','張雪'],
        ["age",21],
        ["age",21],
        ["sex",'男']
    ]);
    console.log(map.get("name")); // "張雪"
    map.set("A","aa");
    console.log(map.get("A")); // aa

② delete方法：

map.delete("age");
    console.log(map); // {"name" => "張雪", "sex" => "男", "A" => "aa"}

③ has方法：

console.log(map.has("sex"));  //true

④clear方法：

map.clear();
    console.log(map); //map爲空

⑤keys、values、entries

map.keys();  //  {"name", "age", "sex"}
    map.values();  //  {"張雪", 21, "男"}
    map.entries();  // {"name" => "張雪", "age" => 21, "sex" => "男"}

⑥遍歷

map.forEach(function(value,key){
      console.log(key +":"+value);
    });//name:張雪   age:21   sex:男

注意：

const map = new Map([
    ['name','張雪'],
    ["age",21],
    ["age",21],
    ["sex",'男']
]);
//由於對象存儲在堆區，存在的地址是不一樣的，因此一下兩個都會被set進map中。
map.set({},"hehe");
map.set({},"qq");
console.log(map); // {"name" => "張雪", "age" => 21, "sex" => "男", Object => "hehe", Object => "qq"}

六、Symbol

(1)、應用場景：

ES5的對象屬性名都是字符串，容易形成屬性名衝突；ES6 引入新的原始數據類型Symbol，表示獨一無二的值。

（2）、對象的屬性名兩種形式

①字符串

②symbol類型（獨一無二，不會與其餘屬性衝突）

//定義一個symbol
    let str1 = Symbol();
    let str2 = Symbol();
    console.log(str1 === str2); //false
    console.log(typeof(str1)); //Symbol
    
    
    //symbol主要用於對象屬性的定義，且定義的屬性是惟一的
    const obj = {};
    obj[Symbol("name")]="zhangsan";
    obj[Symbol("name")]="lisi"
    console.log(obj);//{Symbol(name): "zhangsan", Symbol(name): "lisi"}

七、class
（1）、ES6中新增的語法糖，做用在於讓對象原型的寫法更加清晰，更像面向對象的編程方式。也是構造函數的另外一種寫法。

//構造函數寫法
  function Person(name,age){
    this.name = name;
    this.age = age;

  }
  Person.prototype = {
    constructor:Person,
    print(){
      console.log("我叫"+this.name+",今年"+this.age+"歲")
    }
  }
  let person = new Person("張三",12);
  person.print(); //我叫張三，今年12歲
  
  
  
  // class面向對象
  class Person{
    constructor(name,age){
      this.name = name;
      this.age = age;
    }
    print(){
      console.log("我叫"+this.name+",今年"+this.age+"歲")
    }
  }
  let person = new Person("張三",12);
  person.print();//我叫張三，今年12歲

八、模板字符串

模板字符串在Vue.js中使用的比較多的。使用 `` 符號，這樣可實現代買的格式化。

let str = "你好！";
let className = "red";
let html = `<html>
              <head>今每天氣很好！</head>
              <p class="${className}"> ${str} </p>   //這裏使用${}的形式調用變量
           </html>`
console.log(html);

九、數組的擴展
（1）、Array.from

let list = document.querySelectorAll("li")
   console.log(Array.isArray(list));  //false
   Array.from(list);  //將非數組list轉爲數組
   console.log(Array.isArray(Array.from(list))); //true

（2）、Array.of

Array.of(1,2,3,4); //將零散元素轉爲數組
 console.log(Array.isArray(Array.of(1, 2, 3, 4)));  //true

十、對象的擴展
(1)、

let obj = {
    "name":"lisi",
    "age":12
  }
  console.log(obj);  //{name: "lisi", age: 12}

(2)、ES6中key和value同樣時，直接寫一個便可。

//這種寫法等同於下面的方法，經常使用下面的方法
  let name = "zhangsan"
  let age = 12
  let obj = {
    "name":name,
    "age":age
  }
  console.log(obj);

  //方法同上 
  let name = "zhangsan"
  let age = 12
  let obj = {
    name,
    age
  }
  console.log(obj);

(3)、assign用法：

let obj1 = {name:"lisi"};
    let obj2 ={age:21};
    let obj = {};
    Object.assign(obj,obj1,obj2);//將obj1,obj2合併到obj上。
    console.log(obj);//{name: "lisi", age: 21}

(4)、延展操做符

let str = "張三";
  let strArr =[...str];
  console.log(Array.isArray(strArr));  //true

主要用於數據傳遞和數組去重。

let myArr = [1,2,10,"zhangsan",20,2,1];
  console.log(new Set(myArr));//根據set惟一性去重
  let newArr = [...new Set(myArr); //將set轉爲array
  console.log(Array.isArray([...new Set(myArr)])); //true

十、函數擴展

（1）、形參設置默認值

//ES6中，直接將的形參設置默值
   function sum(num1 = 10,num2 = 10){
     console.log(num1 + num2);
   }
   sum();   //20
   sum(1,3);  //4

（2）、參數形式

//在不清楚元個數時，使用延展操做符代替
 function sum(name,...nums){
   console.log(name)
   let result = 0;
   for(let value of nums){
     result += value
   }
   return result;
 }

console.log(sum("李四",1,45,3,2)); // 李四  51