ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用

發(fā)布時(shí)間：2022-07-04 13:49:19 來(lái)源：億速云閱讀：102 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用”吧!

Array的擴(kuò)展方法

1.擴(kuò)展運(yùn)算符（展開語(yǔ)法）

擴(kuò)展運(yùn)算符可以將數(shù)組或者對(duì)象轉(zhuǎn)換為逗號(hào)分隔的參數(shù)序列

let ary = [1,2,3];
...ary //1,2,3
console.log(...ary);  //1 2 3  
//console.log方法可以接收以","分隔的參數(shù)，一次輸出多個(gè)內(nèi)容 
//為啥輸出的結(jié)果沒有逗號(hào)了，因?yàn)閰?shù)序列里的逗號(hào)被console.log當(dāng)成參數(shù)分隔符了

<script type="text/javascript">
		let arr = ['a', 'b', 'c'];
		console.log(...arr); //a b c
		console.log('a', 'b', 'c'); //a b c
	</script>

2、擴(kuò)展運(yùn)算符的應(yīng)用

1.合并數(shù)組

擴(kuò)展運(yùn)算符可以用于合并數(shù)組

//方法一
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...ary2];
console.log(ary3);  //[1,2,3,4,5,6]

//方法二
ary1.push(...ary2);

注意：push()方法可以接收多個(gè)值，每個(gè)值之間用“,”分隔

let ary1 = [1, 2, 3];
		let ary2 = [4, 5, 6];
		ary2.push(...ary1);
		console.log(ary2); //[4,5,6,1,2,3]

2. 將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組

將類數(shù)組或可遍歷對(duì)象轉(zhuǎn)換為真正的數(shù)組

let oDivs = document.getElementByTagName('div');
oDivs = [...oDivs];

<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<script type="text/javascript">
		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs);
		var ary = [...oDivs];
		console.log(ary);
	</script>
</body>

ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用

3.構(gòu)造函數(shù)方法：Array.from()

將類數(shù)組或可遍歷對(duì)象轉(zhuǎn)換為真正的數(shù)組

let arrayLike = {
    '0': 'a',
    '1'：'b',
    '2': 'c',
    length: 3  //必須要有這一句
};
console.log(arrayLike);
let arr2 = Array.from(arrayLike); // ['a','b','c']
console.log(arr2);

ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用

方法還可以接收第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來(lái)對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組

let arrayLike = {
    "0":1,
    "1":2,
    "length":2
}
let newAry = Array.from(arrLike,item=> item*2);

var arrayLike = {
			"0": "1",
			"1": "2",
			"length": 2
		}
 
		var ary = Array.from(arrayLike, item => item * 2)  //數(shù)組里有多少元素 這一句就執(zhí)行多少次
		console.log(ary)  //[2,4]

4.實(shí)例方法：find()

用于找出第一個(gè)符合條件的數(shù)組成員，如果沒有找到返回undefined

let ary = [{
    id :1,
    name:'張三'
    },{
     id:2,
     name:'李四'
    }
];
let target = ary.find((item,index) => item.id==2 )

<script type="text/javascript">
		var ary = [{
			id: 1,
			name: '張三'
		}, {
			id: 2,
			name: '李四'
		}];
		let target = ary.find((item) => {
			return item.id == 1;
		});
		console.log(target);
	</script>

ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用

5.findIndex()

用于找出第一個(gè)符合條件的數(shù)組成員的位置，如果沒有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value,index) => value>9);
console.log(index); //2

<script type="text/javascript">
		let ary = [10, 20, 50];
		let index = ary.findIndex((item) => {
			return item > 15;
		});
		console.log(index);  //1
	</script>

6.includes()

表示某個(gè)數(shù)組是否包含給定的值，返回布爾值

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

到此，相信大家對(duì)“ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

ES6的內(nèi)置對(duì)象擴(kuò)展方法怎么用

Array的擴(kuò)展方法

1.擴(kuò)展運(yùn)算符（展開語(yǔ)法）

2、擴(kuò)展運(yùn)算符的應(yīng)用

1.合并數(shù)組

2. 將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組

3.構(gòu)造函數(shù)方法：Array.from()

4.實(shí)例方法 ：find()

5.findIndex()

6.includes()

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

2、擴(kuò)展運(yùn)算符的應(yīng)用

4.實(shí)例方法：find()