let 鹉戚、const

let

1)鲜戒、let作用域只限于當(dāng)前代碼塊

{
    let a = 12;
}

console.log(a); //報(bào)錯，a不存在
2)抹凳、let聲明的變量作用域不會被提升

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

3）遏餐、在相同的作用域下不能聲明相同的變量

 {
   let a = 10;
   let a = 11;  //報(bào)錯    
 }

4）、for循環(huán)體現(xiàn)let的父子作用域

//使用var聲明赢底，需要用到“閉包”
var btns = document.querySelectorAll("button");
  for(var i=0;i<btns.length;i++){
  （function(i){
       btns[i].onclick= function (){
        alert("點(diǎn)擊了"+i+"個(gè)按鈕")
      }
  })(i);
}

//let聲明
 let btns = document.querySelectorAll("button");
  for(let i=0;i<btns.length;i++){
      btns[i].onclick= function (){
        alert("點(diǎn)擊了"+i+"個(gè)按鈕")
      }
  }

const

(1)失都、const作用域只限于當(dāng)前代碼塊
(2)、const聲明的變量作用域不會被提升
(3)幸冻、在相同的作用域下不能重復(fù)聲明
(4)粹庞、聲明的同時(shí)必須賦值，聲明后值無法改變

{   
    const b; //報(bào)錯
    
    const a = 123;
    a = 222; //報(bào)錯
    
} 
注意：針對"對象"就不一樣了洽损，如下：
{
    const obj = {
        name:"lisi"
     }
    console.log(obj.name); //lisi
    
    obj.name = "zhaoliu";
    console.log(obj.name);//zhaoliu
}
//在上面中定義的是一個(gè)常量對象庞溜，對象是儲存在內(nèi)存的“堆區(qū)”，通過一個(gè)地址描述出來碑定，在“棧區(qū)”關(guān)聯(lián)此地址流码。
所以又官，obj存儲的是地址，而不是值漫试，是可以做修改的六敬。

結(jié)構(gòu)賦值

ES6允許按照一定的模式從數(shù)組和對象中提取值，對變量進(jìn)行賦值商虐，這被稱為解構(gòu)觉阅。

（1）、基本用法

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

//新的定義方法
let  [name,age,sex] = ["李四",20,"女"]; //console.log(name)-->李四

(2)秘车、對象的解構(gòu)賦值

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

(3)典勇、嵌套數(shù)組的解構(gòu)賦值

//只要一一對應(yīng)就可以
let [a1,[a2,a3,[a4,a5]]] = [1,[2,3,[4,5]]];
console.log(a1,a2,a3,a4,a5);  //1，2叮趴，3割笙，4，5

4）眯亦、字符串的解構(gòu)賦值

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]

注意：因?yàn)樽址袠?gòu)造器妻率，所以可以解析出來乱顾。

數(shù)據(jù)集合: set

1 特點(diǎn)

① 類似于數(shù)組，但沒有重復(fù)的元素（唯一的）;
② 開發(fā)中用于去除重復(fù)數(shù)據(jù);
③ key和value都是相等的;

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

2 一個(gè)屬性

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

3 四個(gè)方法

① 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"]);
//直接將刪除的值傳進(jìn)去即可
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(); // 此時(shí)set為空了

數(shù)據(jù)集合：map

(1)宫静、特點(diǎn)

① 類似于對象走净，本質(zhì)上是鍵值對的集合;
② "鍵"不局限于字符串，各種類型的值（包括對象）都可以當(dāng)做鍵;
③ 對象"字符串——值",Map"值——值",是一種更完善的hash結(jié)構(gòu)實(shí)現(xiàn);

  //創(chuàng)建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"}

結(jié)果如圖所示：
[圖片上傳失敗...(image-87cc5f-1573571535373)]

(2)孤里、一個(gè)屬性

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

(3)伏伯、五個(gè)方法

① 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",'男']
]);
//因?yàn)閷ο蟠鎯υ诙褏^(qū)说搅，存在的地址是不同的，所以一下兩個(gè)都會被set進(jìn)map中虏等。
map.set({},"hehe");
map.set({},"qq");
console.log(map);

Symbol

(1)弄唧、應(yīng)用場景：

ES5的對象屬性名都是字符串，容易造成屬性名沖突博其；ES6 引入新的原始數(shù)據(jù)類型Symbol套才，表示獨(dú)一無二的值。

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

①字符串

②symbol類型（獨(dú)一無二，不會與其他屬性沖突）

    //定義一個(gè)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"}

7峰髓、class
（1）傻寂、ES6中新增的語法糖，作用在于讓對象原型的寫法更加清晰携兵，更像面向?qū)ο蟮木幊谭绞郊碴Ｒ彩菢?gòu)造函數(shù)的另一種寫法。

  //構(gòu)造函數(shù)寫法
  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面向?qū)ο?  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歲

8、模板字符串

模板字符串在Vue.js中使用的比較多的并级。使用 `` 符號拂檩，這樣可實(shí)現(xiàn)代買的格式化。

let str = "你好嘲碧！";
let className = "red";
let html = `<html>
              <head>今天天氣很好稻励！</head>
              <p class="${className}"> ${str} </p>   //這里使用${}的形式調(diào)用變量
           </html>`
console.log(html);

9、數(shù)組的擴(kuò)展
（1）愈涩、Array.from

let list = document.querySelectorAll("li")
   console.log(Array.isArray(list));  //false
   Array.from(list);  //將非數(shù)組list轉(zhuǎn)為數(shù)組
   console.log(Array.isArray(Array.from(list))); //true

（2）望抽、Array.of

 Array.of(1,2,3,4); //將零散元素轉(zhuǎn)為數(shù)組
 console.log(Array.isArray(Array.of(1, 2, 3, 4)));  //true

10、對象的擴(kuò)展
(1)履婉、

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

(2)煤篙、ES6中key和value一樣時(shí)，直接寫一個(gè)即可毁腿。

  //這種寫法等同于下面的方法辑奈，常用下面的方法
  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

主要用于數(shù)據(jù)傳遞和數(shù)組去重。

  let myArr = [1,2,10,"zhangsan",20,2,1];
  console.log(new Set(myArr));//根據(jù)set唯一性去重
  let newArr = [...new Set(myArr)]; //將set轉(zhuǎn)為array
  console.log(Array.isArray([...new Set(myArr)])); //true

10草戈、函數(shù)擴(kuò)展

（1）塌鸯、形參設(shè)置默認(rèn)值

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

（2）唐片、參數(shù)形式

 //在不清楚元個(gè)數(shù)時(shí)丙猬，使用延展操作符代替
 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