簡單說說ES6新特性

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標准，已經在 2015 年 6 月正式發布了。 它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

ECMAScript和JS的關系 ECMAScript是標准,JS是實現

• 類似於HTML5是標准,IE，chrome是實現    例如國家定了醫用口罩標准（需要過濾XX，等等各種參數），咱們買的正規口罩是實現
• 目前ECMAScript除了JS還沒別的實現，所以ECMAScript==JS也說得過去
• ES6發布於2015年發布,所以也可以叫es2015 去年的ES2021 是ES12 但是主要的改變是在es6,這幾年的東西都增加的不多，所以把ES6以及以后的版本統稱為es6也合理，ES2022也也即將推出

今天對我目前所知的並且常用的一些做一個總結，適合處於新手村和即將走出新手村的兄弟觀看學習，同時也歡迎各位大佬補充

1、聲明變量

　　首先說說在沒有es6之前存在的問題，也就是var的問題

1. 可以重復定義
2. 無法限制修改，有些東西不會變化，沒常量
3. 沒有塊級作用域，只有函數作用域
4. 變量提示帶來的混亂

　　es6新增了兩個聲明變量關鍵字，let和const    這兩個關鍵字就是為了解決es5存在的問題

　　let

　　（1）let 聲明變量時只在其塊級作用域中有效

{
  let a = 10;
  var b = 1;
}
console.log(a); //出錯 not defined
console.log(b); //1

　　在es5中如果要實現塊級作用域，通常借助立即執行匿名函數來實現

(function(){
  var a = 1;
}());
console.log(a); //出錯，not defined

　　但是有了let之后，就可以解決這么問題

　　（2）沒有變量提升

　　也正是如此，變量必須在聲明后使用，否則就會報錯，這里對比var經典的變量提升

//let
console.log(a); //出錯， not defined
let a = 1; 

//var
console.log(a); //undefined
var a =1;

　　（3）不可以在相同作用域內重復聲明同一個變量，也包括不能和var，const變量名重復

let a = 1;
let a = 1; //出錯 let不可重復聲明

var b = 1;
let b = 1; //出錯 let不可重復聲明

const c = 1;
let c = 1; //出錯 let不可重復聲明

　　（4）在塊級作用域內，若存在用let命令聲明的變量，則所在區塊對該變量形成封閉作用域，也就是該變量無視外部的同名變量。而又因為不存在變量提升，所以在該區塊中，不能在聲明前使用該變量。

var a  = 1;
if(true){
  a = 2; //出錯 not defined
  let a; 
}

var a = 1;
if(true){
  a = 2; //var允許重復聲明，而且變量提升，故a=2正常賦值
var a;
}

　　const 

　　const和let的區別在於const聲明的變量不能修改，let聲明的變量可以修改

　　　　　const name = "🐻";
        //name = '2' //報錯
        
        
        //但是也不是都不能變
        const person = {
            name:"🐻"
        }
        person.name="🐕";

        console.log(person)

//const實際上保證的，並不是變量的值不得改動，而是變量指向的那個內存地址所保存的數據不得改動。
//對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，因此等同於常量。
//但對於復合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指向實際數據的指針，
//const只能保證這個指針是固定的（即總是指向另一個固定的地址），
//至於它指向的數據結構是不是可變的，就完全不能控制了。因此，將一個對象聲明為常量必須非常小心。

學會之后推薦聲明變量時使用let，可以避免很多不必要的麻煩，const看個人需求

2、Symbol

ES6新增了一個基本數據類型：Symbol，至此ECMAScript的基本數據類型就有了6種： 字符串，數字，布爾，null，undefined,Symbol。

//Symbol 的定義不能使用new   他使用Symbol()函數生成
let a = Symbol();

typeof a   // "symbol"

//Symbol創建時可以傳一個參數，表示對Symbol的描述

let s1 = Symbol('a');
let s2 = Symbol('b');

s1 // Symbol(a)
s2 // Symbol(b)

Symbol表示獨一無二的值

let s1 = Symbol('a');
let s2 = Symbol('a');

//s1===s2  false;
//既然Symbol的值都不相等  那么可以利用他的特性解決對象里同名覆蓋的問題

let obj = {
  [Symbol()]: 1
};
//或者
let s = Symbol();
let obj = {
  [s]: 1
};

Symbol.for()       有時，我們希望重新使用同一個 Symbol 值，Symbol.for()方法可以做到這一點。 它接受一個字符串作為參數，然后搜索有沒有以該參數作為名稱的 Symbol 值。 如果有，就返回這個 Symbol 值，否則就新建一個以該字符串為名稱的 Symbol 值，並將其注冊到全局。

let s1 = Symbol.for('a');
let s2 = Symbol.for('a');

s1 === s2 // true

//兩種寫法區別
Symbol.for("a") === Symbol.for("a") // true

Symbol("a") === Symbol("a") //false

3、解構賦值（常用）

   let [a,b,c] = [1,2,3]
    var [a,,c]=[1,2,3];
     console.log(a+' | '+c);  //1 | 3
    var [a,...b]=[1,2,3];
    console.log(a+' | '+b);//1 | 2,3
    console.log(b);//[2, 3]
    //   ...將右側多余的值以數組的形式賦值給左側變量    rest
    
    //設置默認值
    var [a,b,c='default',d='default']=[1,2,3];
     console.log(a+' | '+b+' | '+c+' | '+d);//1 | 2 | 3 | default
     
     //找不到的會被賦值為undefined
     var [a,b,c]=[1,2];
     console.log(a+' | '+b+' | '+c);//1 | 2 | undefined

對象的解構賦值

//對象的解構賦值

      let obj={
            a:1,
            b:2
        }
        let {a,b}=obj;
        console.log(a+" | "+b);//1 | 2

      //重命名，把obj.a重命名為A
       let obj={
            a:1,
            b:2
        }
        let {a:A,b}=obj;
        console.log(A+" | "+b);//1 | 2
        console.log(a);//Uncaught ReferenceError: a is not defined
        
        //設置默認值
        
        let {a=1,b=2}={a:10};
         console.log(a+" | "+b);//10 | 2
         
         //字符串也可以解構
         
         var [a,b,c,d,e]='nihao';
            console.log(a);//

4、函數默認值

    //es5寫法
    function sum(a,b){
            b= b||0;
            console.log(a+b)
        }
        
        sum(1) 

//es6
    function sum(a,b=0){
        console.log(a+b)
    }
    sum(1) 
    function sum(a=2,b=0){
        console.log(a+b)
    }
    
    sum() 

5、箭頭函數（常用）

箭頭函數都是匿名函數

    function show(num){
        return num*num
    }
    var show = function(num){
        
        return num*num
    }
    
    //如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分。  提個參數可以去掉括號
    var show =(num)=>{
        return num*num
    }
    //如果只有一條return語句，可以省略大括號和return   隱式返回
    
    var show =num=>num*num;
    
    
    
    //箭頭函數的this繼承自他的父作用域
    //而且與我們原來普通函數不同，原來的函數this是調用時動態指定的，
    //而箭頭函數是詞法作用域，他里的this是定義時就指定的 而且不會隨着調用方式不同而改變  
    
    //如下例子
    var log_this = ()=>{
        
        console.log(this)
    }
    var log_this = function(){
        
        console.log(this)
    }
    
    var obj = {
        hobbies:['code','run','paly game'],
        logHobbies:log_this
    }
    
    
    obj.logHobbies()
    
    
    log_this()

　　有幾點需要注意

1. 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

2. 不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

3. 不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。

4. 不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。

• 上面四點中，第一點尤其值得注意。this對象的指向是可變的，但是在箭頭函數中，它是固定的。

6、模板字符串（常用）

原來寫字符串比較痛苦 特別是拼接變量時

const name="小🐻";
const age = 2;

 console.log('ta的名字是'+name+',它今年'+age+'了');
  console.log('<div data-age="'+age+'">'+name+'</div>');//這種更難受
 console.log(`ta的名字是${name},它今年${age}了`)
 console.log(`<div data-age="${age}">${name}
 </div>`)

模板字符串可以嵌套

var arr = [{
            name:"蘋果",
            price:11
        },{
            name:"香蕉",
            price:12
        }];
        
        
        var template = `
        <ul>
        ${arr.map(v=>`
        <li>${v.name}
        <span>${v.price}</span>
        </li>
        `).join('')}
        </ul>
        `
        
        console.log(template)
        
        document.body.innerHTML = template;

7、數組

spread 展開運算符也是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列。

const a = [1, 2, 3];
const b = [4,5,6];
const c = [...a] // [1,2,3]
//輕松拼接兩個數組
const d = [...a,...b] // [1,2,3,4,5,6]


//類數組對象變成數組
var list=document.getElementsByTagName('a');
var arr=[...list];

其實不單單是參數可以展開，對於對象和字符串同樣可以展開

const obj1 = { a: 111, b: 222 };
const obj2 = { c: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }
//或者這樣
const others = {third: 3, fourth: 4, fifth: 5}
const items = { first:1, second:1, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }


//展開字符串

const str = 'hello'
const array_str_ = [...str] // 

• Array.from

//Array.from方法用於將兩類對象轉為真正的數組
 var args = Array.from(arguments);
 var list = Array.from(document.querySelectAll('li'));

• Array.of()

//這個方法的主要目的，是彌補數組構造函數Array()的不足。因為參數個數的不同，會導致Array()的行為有差異。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

8、for of 循環

  看一下咱們會的循環方法
  for 無法循環對象
  for in  存在問題 他會遍歷所有可遍歷屬性  如果為原型加了一些屬性，那也會遍歷出來
  forEach 循環數組 無法終止
  
  最終es6為了統一，也借鑒了c++,java,python語言引入了for of循環 作為遍歷所有數據結構的統一的方法。
for...of循環可以使用的范圍包括數組、Set 和 Map 結構、
某些類似數組的對象（比如arguments對象、DOM NodeList 對象）、
后文的 Generator 對象，以及字符串。
-- 對象不能使用for of

for(let v of [1,2,3]) {
  console.log(v); // 1 2 3
}
let p = document.querySelectorAll("p");
for (let x of p) {
    console.log(x);
  }

9、set

//ES6 提供了新的數據結構 Set。它類似於數組，但是成員的值都是唯一的，沒有重復的值。

const set = new Set([1, 2, 2, 4, 4]);
  [...set]
  //用Set 去重非常方便 ，數組去重面試常考題
  
  [...new Set(arr)]

今天先寫這么多，剩下的面向對象、promise、模塊化和map等以后有機會再補充，公司又有新需求了，我得去寫代碼了（表示是被迫停下來，不是故意留一些不寫的），后邊的這些都是個人感覺都是重點，等我代碼寫完再來補充，同時有哪些問題歡迎各位大佬提醒，畢竟我也還只是一只菜鳥，只是對自己的理解做一下總結