目錄

一、概念

二、宣告變數 let var const 的區別

2.1 let 關鍵字宣告變數

2.2、const關鍵字宣告變數

2.3 宣告變數的總結

三、解構賦值

3.1陣列解構

3.2物件解構

四、箭頭函式

五、Array的擴展運算子

5.1、擴張運算子可以運用于合并陣列

5.2、將偽陣列或可遍歷物件轉換為真正的陣列

5.3、find()方法

5.4、findIndex()方法

5.5、includes方法

六、模版字串

七、內置物件擴展

八、新的資料結構Set

一、概念

ES的全稱是ECMAScript,它是由ECMA國際標準化組織，制定的一項腳本語言的標準化規范；新增的好用的語法規范

為什么要使用ES6呢？

以前的JavaScript：

• 變數提升特性增加了程式運行時的不可預測性
• 語法過于松散，實作相同的功能，不同的人可能會寫出不同的代碼

二、宣告變數 let var const 的區別

2.1 let 關鍵字宣告變數

使用let宣告的變數：變數只能在大括號中進行訪問，在大括號的外部是訪問不到的；ES6中新增的用于宣告變數的關鍵字

• let宣告的變數只在所處于的塊級有效
• 塊級作用域實際上就是大括號產生的作用域
• 在大括號里，使用let關鍵字宣告的變數才具有塊級作用域，使用var宣告的變數不具備塊級作用域特性
• let好處：防止回圈 變數變成全域變數（i）
• 不存在變數提升，只能先宣告再使用
• 暫時性死區，也就是說在塊級作用域中變數會被整體系結在整個塊級區域，不再受外部代碼影響，雖然兩個變數名相同但是里面的變數跟外面的變數是沒有關系的

案例：

a是沒有定義的，也就是說在外面是不可以訪問到a的

if(true) {
     let a =10;
}
log(a) //a是沒有定義的，也就是說在外面是不可以訪問到a的

let沒有變數提升 ，所以不能這樣先使用后宣告：

//let沒有變數提升 ，所以不能這樣先使用后宣告：
console.log(a)   //a is not defined
let a =20;

大括號里面的tmp變數不會受外部tem變數的影響

//大括號里面的tmp變數不會受外部tem變數的影響
var tmp = 123;
if(true) {
   tmp ='abc'; //會報錯，報變數沒有定義的錯
   let tmp;
}

2.2、const關鍵字宣告變數

作用：用于宣告常量，常量就是值（記憶體地址)不能變化的量
特點：

• 具有塊級作用域------作用在大括號里面
• 宣告常量時必須賦初始值
• 常量賦值后，值不能更改，比如簡單資料型別：數值、字串不能更改；復雜資料型別時：不能重新賦值，也就是常量里面的對應的記憶體地址不可以更改，但是可以修改資料結構中的值比如陣列或者物件，里面的值是可以更改的

案例

const ary =[100,200];
ary[0]='a';
ary[1]='b';
ary['a','b']; //是正確的
ary=['a','b']; //但是這種是錯誤的 不能重新賦值

2.3 宣告變數的總結

使用var宣告的變數，其作用域為該陳述句所在的函式內，且存在變數提升現象--函式作用域 值可更改
使用let宣告的變數，其作用域為該陳述句所在的塊級內，不存在變數提升--塊級作用域 值可更改
使用const宣告的是常量，在后面出現的代碼中不能再修改該常量的值--塊級作用域 值不可以更改

函式的定義、派值、存盤的資料不需要變化、數學公式中不變的值，const比let的效率高

三、解構賦值

很容易的從陣列和物件中取值；ES6中允許從陣列中提取值，按照對應位置，對應量賦值，物件也可以實作解構

3.1陣列解構

陣列解構的基本形式

形式一：變數與陣列的值的個數相同

等號左邊代表的是解構不是代表的陣列是變數；與陣列中的值是一一對應的關系

let ary = [1,2,3];
let [a,b,c] = ary;
console.log(a) //a=1
console.log(b) //b=2
console.log(c) //c=3

形式二：變數與陣列中的值的個數不相同 不對等的值是undefined的

let ary = [1,2,3];
let[a,b,c,d,e]=ary;
 //d和e的值是undefined

3.2物件解構

實際上是屬性的匹配如果匹配成功就將對應的值賦給變數

寫法一：

let person ={name:'章三'，age:20};
let {name,age} =person ; //左邊相當于解構
console.log(name) //章三
console.log(age)  //20

寫法二：變數的名字和物件里面的屬性名不一樣

myName 和 myAge 屬于別名；屬性名匹配就將右側name的值賦值給myName 和 myAge

let person ={name:'章三'，age:20};
let{name:myName,age:myAge} = person;
console.log(myName); //章三
console.log(myAge);  //20

剩余引數 (...args)表示接受所有的實參

剩余引數語法允許我們將一個不定數量的引數表示為一個陣列；就是當實參大于形參的時候，將剩余的引數放入到一個陣列中

        const sum = (...args) => {
            let total = 0;
            args.forEach(item => total += item); //item是箭頭函式的引數   
            return total;
        };
        console.log(sum(10, 20));;
        console.log(sum(10, 20, 30));;

剩余引數和解構搭配使用

        let arr =['里斯','斯','里'];
        let[s1,...s2] =arr;
        console.log(s1); //里斯
        console.log(s2); //[斯，里]

四、箭頭函式

語法：（）=> { }

const fn = () =>{ }

呼叫函式 fn()

通常給函式定一個變數，函式名字就是變數名字，呼叫函式就是呼叫變數名字就可以了 常量fn的值就等于箭頭函式

特點：

1. 函式體只有一句代碼，且代碼的執行結構就是回傳值，可以省略大括號 const sum=（num1,num2）=>num1+num；相當于回傳num1+num2的值給sum
2. 如果形參只有一個，可以省略小括號，const fn = v =>v;回傳值是將v的值回傳給fn，輸出就直接呼叫fn(20)

五、Array的擴展運算子

擴展運算子可以將陣列或者物件轉為用逗號分割的引數序列

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

5.1、擴張運算子可以運用于合并陣列

方法一：
let ary1 = [1,2,3]
let ary2 = [4,5,6]
let ary3 =[...ary1 , ...ary2];

方法二：

let ary1 = [1,2,3]
let ary2 = [4,5,6]
let arr1.push(...ary2) 可以將多個引數追加到arr1陣列中

5.2、將偽陣列或可遍歷物件轉換為真正的陣列

方法一：

將偽陣列轉換為真正的陣列 oDivs = [...oDivs];

好處：就是可以呼叫陣列下面的方法

let oDivs =document.getElemnetsByTagName("div");
oDivs = [...oDivs]; 

方法二：

建構式方法 Array.from()
將偽陣列或可遍歷物件轉換為真正的陣列

let arr1 ={
      '0':'a',
      '1':'b',
      '2':'c',
      length:3  
  }
let arr2 =Array.from(arr1)  //['a','b','c']

此方法還可以接受第二個引數，作用類似于陣列的each方法，用來對每個元素進行處理，將處理后的值放入回傳的陣列
Array.from(arr1,(item)=>{}) 函式里面的形參item就是當前要處理的值

let arr1 ={
      '0':20,
      '1':21,
      '2':22,
      length:3  
  }
let newary =Array.from(arr1 , item=>item *2)  //函式是將陣列中的每個值都乘以2

5.3、find()方法

用于找出第一個符合條件的陣列成員，如果沒有找到回傳undefined 回傳值就是你要查找的那個元素

let  ary =[{
      id:1,
      name:'張三'
},
{
      id:2,
      name:'李三'
}
]；
let target =ary.find((item,index)=>item.id ==2)

5.4、findIndex()方法

用于查找處第一個符合條件的陣列成員的位置，如果沒有找到回傳-1

let ary =[1,2,3,4,5,9];
let index = ary.findIndex((value,index) => value>4);
console.log(index) //  4
//注意查找的第一個符合的值 是5 所以回傳5的索引號是4

5.5、includes方法

表示某個陣列是否包含給定的值，回傳布林值

[1,2,3].includes(2) //true
[1,2,3].includes(4) //false

六、模版字串

創建字串的方式，使用反引號定義
let name = `張三`

特點

• 模版字串中可以決議變數

let name='張三'
let sayHello = `hello,my name is ${name}`; 就不要用加號拼接字串了

• 模版字串中可以換行

    <script>
        let result = {
            name: 'zhangsan',
            age: 20,
            sex: '男'
        }
        let html = `
            <div>
            <span>${result.age}</span>
            <span>${result.age}</span>
            <span>${result.sex}</span>
            </div>`
        console.log(html);
    </script>

• 模版字串中可以呼叫函式

        const sayHello = function () {
            return '哈哈哈 追不到我吧 我就是這么強大';
        }
        let greet = `${sayHello()}哈哈哈`;
        console.log(greet);

七、內置物件擴展

八、新的資料結構Set

新的資料結構類似于陣列，但是成員的值都是唯一的，沒有重復的值，一般用于搜索，記錄搜索歷史，過濾掉重復陳述句

創建：

Set它本身是一個建構式，用來生成Set資料結構

const s = new Set()

Set函式可以接受一個陣列作為引數，用來初始化

const set = new Set([1,2,3,4,4])

console.log(s.size) //可以回傳s資料結構里面資料的數量

利用它的特點可以實作陣列去重

const set =new Set([‘a','a','b','b']) 輸出的資料的數量是2它會把重復的值去掉
const arr = [...set];
console.log(arr)  //['a','b']

實體方法：

• add(value) :添加某個值，回傳Set結構本身
• delete(value) :洗掉某個值，回傳一個布林值，表示洗掉是否成功
• has(value) :回傳一個布林值，表示該值是否為Set的成員
• clear() :清楚所有成員，沒有回傳值

const s = new Set();
s.add(1).add(2).add(3) //向set結構中添加值 鏈式呼叫

s.delete(2) //洗掉set結構中的2值
s.has(1)    //表示set結構中是否有1這個值
s.clear()   //清楚set結構中的所有值

遍歷

Set結構的實體與陣列一樣，也擁有forEach方法，用于對每個成員執行某種操作，沒有回傳值

const s =new Set([‘a','a','b','b']);
s.forEach(value => console.log(value));