ES6學習(下)

ES6中新增的數組知識

JSON數組格式轉換

• JSON的數組格式就是爲了前端快速的把JSON轉換成數組的一種格式

let  json = {
    '0': 'jspang',
    '1': '技術胖',
    '2': '大胖逼逼叨',
    length:3
}
let arr=Array.from(json);
console.log(arr)

• Array.from(xxx)能夠將相似數組結構的代碼轉換成數組，好比json數據結構與set數據結構等，同時用擴展操做符好比[...set數據結構]也能將set數據結構轉化成數組

Array.of()方法

• 能夠把一堆文本或者變量轉換成數組

let arr =Array.of(3,4,5,6);
console.log(arr);

let arr =Array.of('技術胖','jspang','大胖逼逼叨');
console.log(arr);

find( )實例方法:

• 這個方法就是從數組中查找到符合條件的項，返回不是數組，而filter返回時數組
• (ES6-map、filter、find、findIndex講解)[http://www.cnblogs.com/studyshufei/p/7910384.html]

fill( )實例方法：

• fill()也是一個實例方法，它的做用是把數組進行填充，它接收三個參數，第一個參數是填充的變量，第二個是開始填充的位置，第三個是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr)

數組的遍歷:for…of循環

• ES6新增的數組遍歷

let arr=['jspang','技術胖','大胖逼逼叨']
for (let item of arr){
    console.log(item);
}

箭頭函數

• (箭頭函數)[http://www.cnblogs.com/huansky/p/5684867.html]

ES6中的函數和數組補漏

對象的函數解構

• 咱們在先後端分離時，後端常常返回來JSON格式的數據，前端的美好願望是直接把這個JSON格式數據看成參數，傳遞到函數內部進行處理。ES6就爲咱們提供了這樣的解構賦值。

let json = {
    a:'jspang',
    b:'技術胖'
}
function fun({a,b='jspang'}){
    console.log(a,b);
}
fun(json);

數組的函數解構

• 函數能解構JSON，那解構咱們的數組就更不在話下了，咱們看下邊的代碼。咱們聲明一個數組，而後寫一個方法，最後用…進行解構賦值。

let arr = ['jspang','技術胖','免費教程'];
function fun(a,b,c){
    console.log(a,b,c);
}
fun(...arr);

• ...arr這裏用到了擴展操做符，由於擴展操做符內默認執行for...of...循環將擴展操做符是把數組擴展成單獨的參數,以後才能解構賦值。（由於解構賦值必須解構結構要統一，否則會報錯）

in的用法

• 能夠用來檢測某個對象中是否有存在某個值

let obj={
    a:'jspang',
    b:'技術胖'
}
console.log('a' in obj);  //true

• 若是檢測某個數組中是否存在某個值，能夠用indexOf方法判斷或者用includes方法判斷

新的基本數據類型Symbol

• Symbol就是用來產生一個獨一無二的值，能夠防止屬性名的衝突

聲明Symbol

var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object; 
var f= Symbol();
console.log(typeof(d));//Symbol

• 聲明Symbol前不能加new

Symbol在對象中的應用

• 看一下如何用Symbol構建對象的Key，並調用和賦值

var jspang = Symbol();
var obj={
    [jspang]:'技術胖'
}
console.log(obj[jspang]);//技術胖
obj[jspang]='web';
console.log(obj[jspang]);//web

• (Symbol)[https://www.jianshu.com/p/174f88d189c6]

ES6中對象

Object.is( ) 對象比較

• 對象的比較方法,之前進行對象值的比較，常常使用===來判斷，好比下面的代碼

var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true

• 那ES6爲咱們提供了is方法進行對比。

var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(Object.is(obj1.name,obj2.name)); //true

• 區分=== 和 is方法的區別是什麼，看下面的代碼輸出結果。

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

• 這太詭異了，我要怎麼記憶，那技術胖在這裏告訴你一個小妙招，===爲同值相等，is()爲嚴格相等。

Object.assign( )合併對象

• 做數組時咱們常常使用數組合並，那對象也有合併方法，那就是assgin( )。看一下啊具體的用法。

var a={a:'jspang'};
var b={b:'技術胖'};
var c={c:'web'};
let d=Object.assign(a,b,c)
console.log(d);

Set和WeakSet數據結構

(Set和WeakSet數據結構)[http://jspang.com/2016/06/14/es6001/]

map數據結構

• (Map數據結構)[http://www.javashuo.com/article/p-wiynkcmo-ep.html]

promise的基本用法

let state=1;
function step1(resolve,reject){
    console.log('1.開始-洗菜作飯');
    if(state==1){
        resolve('洗菜作飯--完成');
    }else{
        reject('洗菜作飯--出錯');
    }
}
function step2(resolve,reject){
    console.log('2.開始-坐下來吃飯');
    if(state==1){
        resolve('坐下來吃飯--完成');
    }else{
        reject('坐下來吃飯--出錯');
    }
}
function step3(resolve,reject){
    console.log('3.開始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出錯');
    }
}
new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);
 
}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});

class類的使用

類的聲明與使用

class Coder{
    name(val){
        console.log(val);
    }
}
let jspang= new Coder;
jspang.name('jspang');

類的多方法聲明

class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('jspang')+':'+'Skill:'+val);
    }
}
let jspang= new Coder;
jspang.name('jspang');
jspang.skill('web');

• 這裏須要注意的是兩個方法中間不要寫逗號了，還有這裏的this指類自己，還有要注意return 的用法。

類的傳參

• 在類的參數傳遞中咱們用constructor( )進行傳參。傳遞參數後能夠直接使用this.xxx進行調用。

class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('jspang')+':'+'Skill:'+val);
    }
    constructor(a,b){
        this.a=a;
        this.b=b;
    }
    add(){
        return this.a+this.b;
    }
}
let jspang=new Coder(1,2);
console.log(jspang.add());

• 咱們用constructor來約定了傳遞參數，而後用做了一個add方法，把參數相加。這和之前咱們的傳遞方法有些不同，因此須要小夥伴們多注意下。

class的繼承

class htmler extends Coder{
 
}
 
let pang=new htmler;
pang.name('技術胖');

• 聲明一個htmler的新類並繼承Coder類，htmler新類裏邊爲空，這時候咱們實例化新類，並調用裏邊的name方法。結果也是能夠調用到的。