快捷導(dǎo)航

ES6基礎(chǔ)之?dāng)?shù)組和對(duì)象的拓展實(shí)例詳解

更新時(shí)間：2019年08月22日 10:47:29 作者：Cryptic

這篇文章主要介紹了ES6基礎(chǔ)之?dāng)?shù)組和對(duì)象的拓展,結(jié)合實(shí)例形式詳細(xì)分析了ES6數(shù)組和對(duì)象拓展運(yùn)算符、拓展方法的使用及相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了ES6基礎(chǔ)之?dāng)?shù)組和對(duì)象的拓展。分享給大家供大家參考，具體如下：

數(shù)組的擴(kuò)展

1.拓展運(yùn)算符（'...'），它相當(dāng)于rest參數(shù)的逆運(yùn)算，用于將一個(gè)數(shù)組轉(zhuǎn)換為用逗號(hào)分隔的參數(shù)序列；

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

2.如果擴(kuò)展運(yùn)算符后面是一個(gè)空數(shù)組，則不產(chǎn)生任何效果；

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

3.常見的拓展運(yùn)算符的應(yīng)用：

//合并數(shù)組
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]
//與解構(gòu)賦值結(jié)合（用于生成數(shù)組）
const [ val , ...rest] = [1, 2, 3, 4, 5];
val // 1
rest // [2, 3, 4, 5]
//將字符串轉(zhuǎn)為真正的數(shù)組
let str = 'mine';
[...str] // ["m","i","n","e"]
//可以將類數(shù)組轉(zhuǎn)化成正真的數(shù)組
 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 方法，可以將類似數(shù)組的對(duì)象（array-like object）和可遍歷（iterable）的對(duì)象轉(zhuǎn)化成真正的數(shù)組；該方法還可以接受第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組；

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 方法，用于將一組值，轉(zhuǎn)換為數(shù)組（該方法基本上可以用來替代Array()或new Array()，避免出現(xiàn)參數(shù)不同而導(dǎo)致的重載）；

//傳統(tǒng)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.數(shù)組實(shí)例方法 find() 用于找出第一個(gè)符合條件的數(shù)組成員，該方法的參數(shù)是一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)可以接收三個(gè)參數(shù)，依次是當(dāng)前元素，當(dāng)前元素索引，數(shù)組本身；如果查找成功，返回符合條件的第一個(gè)成員，如果沒有符合條件的成員，則返回undefined；

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

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

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

ps：find() 和 findIndex() 這兩個(gè)方法都可以發(fā)現(xiàn)NaN，彌補(bǔ)了數(shù)組的IndexOf方法的不足。

8.數(shù)組實(shí)例方法 includes() , 方法返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值，與字符串的includes方法類似;該方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是要查找的成員，第二個(gè)參數(shù)表示搜索的起始位置（如果為負(fù)數(shù)，則表示倒數(shù)的位置，如果大于數(shù)組長(zhǎng)度，則會(huì)重置為從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

對(duì)象的拓展

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

//屬性簡(jiǎn)寫
var foo = 'bar';
var obj = {foo};
obj // { foo : "bar" }
//變量簡(jiǎn)寫
var mine = {
  foo ,
  method(){
    //to do
  }
}

2.ES6 允許字面量定義對(duì)象時(shí)，用表達(dá)式作為對(duì)象的屬性名或者方法名，即把表達(dá)式放在方括號(hào)內(nèi);

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() 方法，用來比較兩個(gè)值是否嚴(yán)格相等，與嚴(yán)格比較運(yùn)算符（===）的行為基本一致，不同之處在于一是+0不等于-0，二是NaN等于自身。

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

4.新增 Object.assign 方法用于對(duì)象的合并，將源對(duì)象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（target），第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象；

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:如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

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}

該方法不能用于目標(biāo)對(duì)象是 undefined 和 null 上，會(huì)報(bào)錯(cuò)；

5.Object.assign 方法實(shí)行的是淺拷貝，而不是深拷貝。如果源對(duì)象某個(gè)屬性的值是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用，修改會(huì)對(duì)原對(duì)象造成影響；

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

6.Object.assign 方法常用于以下幾個(gè)方面

為對(duì)象添加屬性

var _this = {};
Object.assign( _this , { name : 'mine' } );
_this // { name : 'mine' }

為對(duì)象添加方法

var _this = {};
Object.assign( _this , { func(){ console.log('hello world') } } );
_this.func() // hello world

克隆對(duì)象

var _this = { name : 'mine' };
Object.assign( {} , _this );

合并多個(gè)對(duì)象

var _this = {};
var source1 = { name : 'mine' };
var source2 = { mail : 'your' };
Object.assign( _this , source1 , source2 );
_this // {"name":"mine","mail":"your"}

為屬性指定默認(rèn)值

var default = { name : 'mine' , mail : 'your' }
function processContent(options) {
options = Object.assign({}, default , options);
// to do
}

7.Object.setPrototypeOf方法的作用與_proto_相同，用來設(shè)置一個(gè)對(duì)象的prototype對(duì)象，返回參數(shù)對(duì)象本身。它是 ES6 正式推薦的設(shè)置原型對(duì)象的方法。

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

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

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

let obj = { a : 1 , b : 'hello' }
Object.keys( obj );   // ["a","b"]
Object.values( obj );  // [1,"hello"]
Object.entries( obj ); // [["a",1],["b","hello"]]

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: