ES6必知必會 (三)—— 數組和對象的拓展

數組的擴展

1.拓展運算符('...'),它相當于rest參數的逆運算,用于將一個數組轉換為用逗號分隔的參數序列;

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

2.如果擴展運算符后面是一個空數組,則不產生任何效果;

[...[], 1]
// [1]

3.常見的拓展運算符的應用:

//合并數組

let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [5,6];

let newArr = [...arr1 , ...arr2 , ...arr3];  //等同于ES5 [].concat( arr1 , arr2 , arr3 )
// [1,2,3,4,5,6]


//與解構賦值結合(用于生成數組)

const [ val , ...rest] = [1, 2, 3, 4, 5];
val // 1
rest  // [2, 3, 4, 5]


//將字符串轉為真正的數組

let str = 'mine';
[...str]  // ["m","i","n","e"]



//可以將類數組轉化成正真的數組

 let arrayLike = {
    0 : 'div.class1' ,
    1 : 'div.class2' ,
    2 : 'div.class3' ,
    length : 3
}
console.log([...arrayLike])  // ["div.class1","div.class2","div.class3"]

4.新增 Array.from 方法,可以將類似數組的對象(array-like object)和可遍歷(iterable)的對象轉化成真正的數組;該方法還可以接受第二個參數,作用類似于數組的map方法,用來對每個元素進行處理,將處理后的值放入返回的數組;

let arr = [ 1 , 2 , 3];

arr.map( x => x * x);
// [ 1 , 4 , 9 ]

Array.from(arr, (x) => x * x)
// [ 1 , 4 , 9 ]

5.新增 Array.of 方法 ,用于將一組值,轉換為數組(該方法基本上可以用來替代Array()或new Array(),避免出現參數不同而導致的重載);

//傳統Array
   
Array() // []
Array(3) // [, , ,]
Array(1, 2, 3) // [1, 2, 3]

//Array.of

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

6.數組實例方法 find() 用于找出第一個符合條件的數組成員,該方法的參數是一個回調函數,該回調函數可以接收三個參數,依次是當前元素,當前元素索引,數組本身;如果查找成功,返回符合條件的第一個成員,如果沒有符合條件的成員,則返回undefined;

var arr = [1, 2, 4, 5];
var r = arr.find(function( element , index , self ){
    return element % 2 == 0;
})
r  // 2

7.數組實例方法 findIndex() , 該方法的參數與 find() 一樣 , 不同的是該方法 返回的是第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1;

var arr = [1, 2, 4, 5];
var r = arr.find(function( element , index , self ){
    return element % 2 == 0;
})
r  // 1

ps:find() 和 findIndex() 這兩個方法都可以發現NaN,彌補了數組的IndexOf方法的不足。

8.數組實例方法 includes() , 方法返回一個布爾值,表示某個數組是否包含給定的值,與字符串的includes方法類似;該方法接收兩個參數,第一個參數是要查找的成員,第二個參數表示搜索的起始位置(如果為負數,則表示倒數的位置,如果大于數組長度,則會重置為從0開始)

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

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

對象的拓展

1.ES6 允許直接寫入變量和函數,作為對象的屬性和方法(在對象中,直接寫變量時,屬性名為變量名, 屬性值為變量的值)

//屬性簡寫
var foo = 'bar';
var obj = {foo};
obj // { foo : "bar" }

//變量簡寫
var mine = {
    foo , 
    method(){
        //to do
    }
}

2.ES6 允許字面量定義對象時,用表達式作為對象的屬性名或者方法名,即把表達式放在方括號內;

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123,
  ['s' + 'ay'](){
    console.log('hello world')
  }
}
obj // {"foo":true,"abc":123}
obj.say()  // 'hello world'

3.新增 Object.is() 方法,用來比較兩個值是否嚴格相等,與嚴格比較運算符(===)的行為基本一致,不同之處在于一是+0不等于-0,二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

4.新增 Object.assign 方法用于對象的合并,將源對象(source)的所有可枚舉屬性,復制到目標對象(target),第一個參數是目標對象,后面的參數都是源對象;

var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

ps:如果目標對象與源對象有同名屬性,或多個源對象有同名屬性,則后面的屬性會覆蓋前面的屬性。

var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

該方法不能用于目標對象是 undefined 和 null 上, 會報錯;

5.Object.assign 方法實行的是淺拷貝,而不是深拷貝。如果源對象某個屬性的值是對象,那么目標對象拷貝得到的是這個對象的引用,修改會對原對象造成影響;

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b     // 2

6.Object.assign 方法常用于以下幾個方面

  • 為對象添加屬性
    <pre>
    var _this = {};
    Object.assign( _this , { name : 'mine' } );
    _this // { name : 'mine' }
    </pre>

  • 為對象添加方法
    <pre>
    var _this = {};
    Object.assign( _this , { func(){ console.log('hello world') } } );
    _this.func() // hello world
    </pre>

  • 克隆對象
    <pre>
    var _this = { name : 'mine' };
    Object.assign( {} , _this );
    </pre>

  • 合并多個對象
    <pre>
    var _this = {};
    var source1 = { name : 'mine' };
    var source2 = { mail : 'your' };
    Object.assign( _this , source1 , source2 );
    _this // {"name":"mine","mail":"your"}
    </pre>

  • 為屬性指定默認值
    <pre>
    var default = { name : 'mine' , mail : 'your' }
    function processContent(options) {
    options = Object.assign({}, default , options);
    // to do
    }
    </pre>
    7.Object.setPrototypeOf方法的作用與_proto_相同,用來設置一個對象的prototype對象,返回參數對象本身。它是 ES6 正式推薦的設置原型對象的方法。
    <pre>
    let proto = {};
    let obj = { x: 10 };
    Object.setPrototypeOf(obj, proto);

    proto.y = 20;
    proto.z = 40;

    obj.x // 10
    obj.y // 20
    obj.z // 40
    </pre>

8.Object.getPrototypeOf()方法,該方法與Object.setPrototypeOf方法配套,用于讀取一個對象的原型對象。

9.Object.keys(),Object.values(),Object.entries() 除第一個外,后面兩個是ES6新增的方法,用于遍歷對象,返回都是數組,成員是參數對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵、值和鍵值對數組。

let obj = { a : 1 , b : 'hello' }

Object.keys( obj );     // ["a","b"]
Object.values( obj );   // [1,"hello"]
Object.entries( obj );  // [["a",1],["b","hello"]]
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,501評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,673評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,610評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,939評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,668評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,004評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,001評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,173評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,705評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,426評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,656評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,139評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,833評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,247評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,580評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,371評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,621評論 2 380

推薦閱讀更多精彩內容

  • 1.屬性的簡潔表示法 允許直接寫入變量和函數 上面代碼表明,ES6 允許在對象之中,直接寫變量。這時,屬性名為變量...
    雨飛飛雨閱讀 1,146評論 0 3
  • 三,字符串擴展 3.1 Unicode表示法 ES6 做出了改進,只要將碼點放入大括號,就能正確解讀該字符。有了這...
    eastbaby閱讀 1,561評論 0 8
  • 國家電網公司企業標準(Q/GDW)- 面向對象的用電信息數據交換協議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,077評論 6 13
  • 背景音是mondialito,法語音,不知道具體在唱些什么。只是好像悲傷和絕望太久了,今天翻出它來,拯救自己。 忘...
    滴答伊始閱讀 364評論 0 1
  • 輕輕走過云的地毯, 我是夢的一葉小舟, 湘西的云啊, 松樹傲立山間, 高山深澗擋不住你的背影, 索道路迢迢, 走不...
    碩果蕾蕾閱讀 310評論 0 1