想來想去還是把ES6的一些筆記挑選了開發中基礎，簡單又最常用的知識點拿出來作為鋪墊。其他知識，比如Promise，Generator函式，async函式修飾器等自行檢視資料，後面有時間整理dva這個框架會在介紹這些深入的知識。個人覺得學習ES6看阮一峰大神的那本書是個不錯的選擇，現在已經更新到第三版了。入口在這ES6入門。 本章原始碼地址在最下方有連結。 先來看看這一章的思維導圖：

1.變數和常量

{
// let 和 const
// 用let代替var來宣告變數，const用來宣告常量，常量一旦初始化則不可在修改(基本資料型別)。但是對object和陣列是可以改變值得。
let a = 10;
const  b = 12;
const obj = {name:"常量"};
// b = 34;// 編輯器都報錯了
obj.name = "改變值可以哦";
a = 12;
console.log(a);// 12
console.log(b);// 12
console.log(obj);// obj

// let 和 var 的區別在於，用var宣告的變數屬於全域性變數，let則是屬於離他最近的塊級作用域，最典型的就是for迴圈
for(var va = 0;va<10;va++){}
for(let le = 0;le<10;le++){}
console.log(va);// 11
// console.log(le);// undefined,let建立的le變數只在for迴圈的塊內有效。
}
 

這裡包括下面的程式碼都可以完全貼到上一章中test.js檔案中進行執行。多說一句為什麼物件和陣列型別的被宣告常量還是能改變值，因為引用。obj改變name屬性值得實惠並沒有改變記憶體指向。用圖說話：

2.解構賦值

陣列解構賦值：

  {
//解構賦值: 按照一定的模式，從陣列中或物件中提取值付給變數，被稱為解構賦值。
// 陣列的解構賦值
let arr = [1,2,4,3,5];
// 現在需要把陣列的每個值分別付給不同的變數a,b,c,d,e;普通方式則是a = arr[0];......
let [a,b,c,d,e] = arr;
console.log(a,b,c,d,e);// 1 2 4 3 5
// 我只要前兩個值，後面的都放在一個變數中
let [one,two,...arr2] = arr;
console.log(one,two,arr2);// 1 2 [4,3,5]
// 左邊變數和右邊陣列值根據位置相互對應，不對應的則會被賦值成undefined，其中 ...三個小點是擴充套件運算子
}
 

物件解構賦值

{
// 物件解構賦值
// 物件解構賦值也比較簡單，左邊變數名和右邊物件的屬性名相同則會把右邊的屬性名對應的值賦值給左邊的變數。與陣列相比左邊的變數沒有順序要求
let { name , age } = {name:"Jim",age:16};
console.log(name,age);
const baseObj = {name:'Car',age:33,country:'china'};
const { country } = baseObj;// 物件的解構賦值在React中非常常用
console.log(country);
}

3.字串

{
//字串方法
//模板字串。react中也是非常的常用。

let name = '字串模板';
let age = 21;
console.log("我的名字是："+name+" ，年齡："+age);// 平時拼接字串方式
console.log(`我的名字是：${name} , 年齡：${age}`);// 使用模板字串，符號單撇號“ ` ”，解析的值放進${}中即可


// 遍歷字串 let ... of 
let str = 'string';
for(let char of str){
    console.log(char);
}

//includes(str,num):從第num開始是否包含str字元或者字串。
//startsWith(str,num):從第num開始是否包含str字元或者字串。
//endsWith(str,num):從第num開始之前的字元是否包含str字元或者字串。
console.log(str.includes('g',4));// true
console.log(str.startsWith('str'))// true
console.log(str.endsWith('r',2));// false
}
 

4.箭頭函式

箭頭函式屬於ES6函式擴充套件中的知識，詳細的可以看上面提供的ES6入門。

{
// 箭頭函式
let fun2 = () => {
    console.log('fun2')
}
// 等同於
function fun1() {
    console.log('fun1');
}
fun1();
fun2();
// 帶有引數
let fun3 = (op1,op2,op3) => {
    console.log(op1,op2,op3);
}
fun3('op1','op2','op3');
}

5.物件擴充套件

仔細看，把程式碼貼到test.js中執行一下看看也是很不錯的。

{
//根據解構賦值，物件就有簡潔的表示法
let price = 9;
let car = {
    name:'五菱巨集光S',
    price,// 等同於 price: price,這種寫法，既屬性名即變數名，屬性值即變數值。
}
console.log(car);// {name: "五菱巨集光S", price: 9}

// Object.assign()方法，常用合併多個物件的屬性於一個物件。第一個引數為目標引數，後面的引數的屬性會新增到目標引數中，且如果目標引數中
// 具有與源引數相同的屬性時，則會以源引數的值為準——即後面的會覆蓋前面的。
let s = {name:'小剛',age:12,like:'book',country:'China',childs:[2,3]};
let a = {name:'小明'};
let b = {age:23};
let c = {like:'LOL'};
let o = Object.assign({},a,b,c);
let o2 = Object.assign(s,a,b,c);
console.log(o);// {name: "小明", age: 23, like: "LOL"}
console.log(o2);// {name: "小明", age: 23, like: "LOL", country: "China"}

// 物件屬性的遍歷，這個也是經常用到方法，這裡介紹兩個for...in和Object.keys
for(let key in s){
    console.log(`key=${key},value=${s[key]}`);
}

console.log(Object.keys(s))// 陣列，返回所有屬性名
Object.keys(s).forEach(key => {
    console.log(`key=${key},value=${s[key]}`);
})

// 物件的擴充套件運算子：... 三個小點。ES8中引入的，ES7只是一個提案。但放心babel都已經支援。功能和陣列的基本一致
let s2 = {...s};// 把物件s屬性全部展開到{}中，該行操作相當於一個淺拷貝。
s2.age = 999;
s2.childs[0] = 999;
console.log(s);// 列印值證明淺拷貝，其中的陣列物件值被改變了。

let { name, age, ...other } = s;// 物件使用擴充套件運算子進行結構賦值，除了name,age的值被賦到name和age變數，剩餘屬性全部放到other變數中
console.log(name);
console.log(age);
console.log(other);

}

6.陣列擴充套件

這裡就介紹5個方法： (1). find(function(value,index,arr){}):查詢陣列中符合特定條件（自己設定的條件）第一個元素，如果沒有則返回undefined。 引數是一個函式，該函式有三個引數 value：陣列元素值；index：陣列對應元素值的下標；arr：陣列本身。 函式根據是否滿足設定的條件返回一個布林值，如果返回true，則find立刻返回符合規則的value值。 (2). findIndex(function(value,index,arr){}):查詢陣列中符合特定條件（自己設定的條件）第一個元素下標，如果沒有則返回undefined。 (3). entrise():返回一個Iterator物件，與for of一起使用可以遍歷陣列的鍵值對 (4). values():返回一個Iterator物件，與for of一起使用可以遍歷陣列的值 (5). keys()：返回一個Iterator物件，與for of一起使用可以遍歷陣列鍵值

{

let array = ['a','v','r','t','f','dfdfdf'];
console.log(array.entries());
console.log(array.values());
console.log(array.keys());

for(let [index,value] of array.entries()){
    console.log(`array[${index}]=${value}`);
}
for(let value of array.values()){
    console.log(value);
}

for(let index of array.keys()){
    console.log(index);
}
}

7.jsx注意的兩點

說小補jsx語法，不如說是需要注意的兩個地方。註釋和布林型別值 註釋必須放在{}內，{}內他如果是布林值，是不會顯示的。

class Test extends Component{
constructor(props){
    super(props);
}

render(){

    return(
        <div className='mainStyle'>
            {
                /*這裡是jsx的註釋,下面的值並不會顯示*/
                // 這個也不會顯示
            }
            {false}
            {true}
            <h1 className='titleColor'>Hello React!</h1>
            <h1>Hello React!</h1>
        </div>
    )
}
}

結語：這裡面的每一段程式碼我都跑過了，木有問題。這幾個知識點雖然有筆記，一氣一條條在寫出來並且用程式碼跑一遍還是有點小累啊。希望大家多多支援，有問題歡迎評論留言。下一張我們進入react！ 原始碼地址：點選原始碼.