想來想去還是把ES6的一些筆記挑選了開發(fā)中基礎(chǔ)，簡單又最常用的知識點拿出來作為鋪墊。其他知識顶捷，比如Promise，Generator函數(shù)屎篱，async函數(shù)修飾器等自行查看資料服赎，后面有時間整理dva這個框架會在介紹這些深入的知識葵蒂。個人覺得學(xué)習(xí)ES6看阮一峰大神的那本書是個不錯的選擇，現(xiàn)在已經(jīng)更新到第三版了重虑。入口在這ES6入門践付。
本章源碼地址在最下方有鏈接。
先來看看這一章的思維導(dǎo)圖：
1.變量和常量
{
// let 和 const
// 用let代替var來聲明變量缺厉，const用來聲明常量永高，常量一旦初始化則不可在修改(基本數(shù)據(jù)類型)。但是對object和數(shù)組是可以改變值得提针。
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 的區(qū)別在于命爬，用var聲明的變量屬于全局變量，let則是屬于離他最近的塊級作用域辐脖，最典型的就是for循環(huán)
for(var va = 0;va<10;va++){}
for(let le = 0;le<10;le++){}
console.log(va);// 11
// console.log(le);// undefined,let創(chuàng)建的le變量只在for循環(huán)的塊內(nèi)有效饲宛。
}
2.解構(gòu)賦值
數(shù)組解構(gòu)賦值：
{
//解構(gòu)賦值: 按照一定的模式久锥，從數(shù)組中或?qū)ο笾刑崛≈蹈督o變量家淤，被稱為解構(gòu)賦值。
// 數(shù)組的解構(gòu)賦值
let arr = [1,2,4,3,5];
// 現(xiàn)在需要把數(shù)組的每個值分別付給不同的變量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]
// 左邊變量和右邊數(shù)組值根據(jù)位置相互對應(yīng)絮重，不對應(yīng)的則會被賦值成undefined，其中 ...三個小點是擴(kuò)展運算符
}
對象解構(gòu)賦值
{
// 對象解構(gòu)賦值
// 對象解構(gòu)賦值也比較簡單错妖，左邊變量名和右邊對象的屬性名相同則會把右邊的屬性名對應(yīng)的值賦值給左邊的變量绿鸣。與數(shù)組相比左邊的變量沒有順序要求
let { name , age } = {name:"Jim",age:16};
console.log(name,age);
const baseObj = {name:'Car',age:33,country:'china'};
const { country } = baseObj;// 對象的解構(gòu)賦值在React中非常常用
console.log(country);
}
3.字符串
{
//字符串方法
//模板字符串。react中也是非常的常用暂氯。
let name = '字符串模板';
let age = 21;
console.log("我的名字是："+name+" 潮模，年齡："+age);// 平時拼接字符串方式
console.log(`我的名字是：${name} , 年齡：${age}`);// 使用模板字符串，符號單撇號“ ` ”痴施，解析的值放進(jìn)${}中即可
// 遍歷字符串 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.箭頭函數(shù)
箭頭函數(shù)屬于ES6函數(shù)擴(kuò)展中的知識动遭，詳細(xì)的可以看上面提供的ES6入門。
{
// 箭頭函數(shù)
let fun2 = () => {
console.log('fun2')
}
// 等同于
function fun1() {
console.log('fun1');
}
fun1();
fun2();
// 帶有參數(shù)
let fun3 = (op1,op2,op3) => {
console.log(op1,op2,op3);
}
fun3('op1','op2','op3');
}
5.對象擴(kuò)展
仔細(xì)看神得，把代碼貼到test.js中運行一下看看也是很不錯的厘惦。
{
//根據(jù)解構(gòu)賦值，對象就有簡潔的表示法
let price = 9;
let car = {
name:'五菱宏光S',
price,// 等同于 price: price,這種寫法哩簿，既屬性名即變量名宵蕉，屬性值即變量值酝静。
}
console.log(car);// {name: "五菱宏光S", price: 9}
// Object.assign()方法，常用合并多個對象的屬性于一個對象羡玛。第一個參數(shù)為目標(biāo)參數(shù)别智，后面的參數(shù)的屬性會添加到目標(biāo)參數(shù)中，且如果目標(biāo)參數(shù)中
// 具有與源參數(shù)相同的屬性時稼稿，則會以源參數(shù)的值為準(zhǔn)——即后面的會覆蓋前面的薄榛。
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"}
// 對象屬性的遍歷，這個也是經(jīng)常用到方法让歼，這里介紹兩個for...in和Object.keys
for(let key in s){
console.log(`key=${key},value=${s[key]}`);
}
console.log(Object.keys(s))// 數(shù)組敞恋，返回所有屬性名
Object.keys(s).forEach(key => {
console.log(`key=${key},value=${s[key]}`);
})
// 對象的擴(kuò)展運算符：... 三個小點。ES8中引入的谋右，ES7只是一個提案耳舅。但放心babel都已經(jīng)支持。功能和數(shù)組的基本一致
let s2 = {...s};// 把對象s屬性全部展開到{}中倚评，該行操作相當(dāng)于一個淺拷貝。
s2.age = 999;
s2.childs[0] = 999;
console.log(s);// 打印值證明淺拷貝馏予，其中的數(shù)組對象值被改變了天梧。
let { name, age, ...other } = s;// 對象使用擴(kuò)展運算符進(jìn)行結(jié)構(gòu)賦值，除了name,age的值被賦到name和age變量霞丧，剩余屬性全部放到other變量中
console.log(name);
console.log(age);
console.log(other);
}
6.數(shù)組擴(kuò)展
這里就介紹5個方法：
(1). find(function(value,index,arr){}):查找數(shù)組中符合特定條件（自己設(shè)定的條件）第一個元素呢岗，如果沒有則返回undefined。
參數(shù)是一個函數(shù)蛹尝，該函數(shù)有三個參數(shù)
value：數(shù)組元素值后豫；index：數(shù)組對應(yīng)元素值的下標(biāo)；arr：數(shù)組本身突那。
函數(shù)根據(jù)是否滿足設(shè)定的條件返回一個布爾值挫酿，如果返回true，則find立刻返回符合規(guī)則的value值愕难。
(2). findIndex(function(value,index,arr){}):查找數(shù)組中符合特定條件（自己設(shè)定的條件）第一個元素下標(biāo)早龟，如果沒有則返回undefined。
(3). entrise():返回一個Iterator對象猫缭，與for of一起使用可以遍歷數(shù)組的鍵值對
(4). values():返回一個Iterator對象葱弟，與for of一起使用可以遍歷數(shù)組的值
(5). keys()：返回一個Iterator對象，與for of一起使用可以遍歷數(shù)組鍵值
{
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注意的兩點
說小補(bǔ)jsx語法猜丹，不如說是需要注意的兩個地方芝加。注釋和布爾類型值
注釋必須放在{}內(nèi)，{}內(nèi)他如果是布爾值射窒，是不會顯示的藏杖。
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>
)
}
}
結(jié)語：這里面的每一段代碼我都跑過了将塑，木有問題。這幾個知識點雖然有筆記制市，一氣一條條在寫出來并且用代碼跑一遍還是有點小累啊抬旺。希望大家多多支持，有問題歡迎評論留言祥楣。下一張我們進(jìn)入react开财！
源碼地址：點擊源碼.
