ES6的內(nèi)置對象擴(kuò)展實現(xiàn)示例
更新時間：2022年07月04日 11:32:19 作者：一條咸魚o*v*o
本文主要介紹了ES6的內(nèi)置對象擴(kuò)展實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、Array的擴(kuò)展方法
1.擴(kuò)展運(yùn)算符（展開語法）
擴(kuò)展運(yùn)算符可以將數(shù)組或者對象轉(zhuǎn)換為逗號分隔的參數(shù)序列
let ary = [1,2,3]; ...ary //1,2,3 console.log(...ary); //1 2 3 //console.log方法可以接收以","分隔的參數(shù)，一次輸出多個內(nèi)容 //為啥輸出的結(jié)果沒有逗號了，因為參數(shù)序列里的逗號被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()方法可以接收多個值，每個值之間用“,”分隔
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ù)組或可遍歷對象轉(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>
3.構(gòu)造函數(shù)方法：Array.from()
將類數(shù)組或可遍歷對象轉(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);
方法還可以接收第二個參數(shù)，作用類似于數(shù)組的map方法，用來對每個元素進(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.實例方法 ：find()
用于找出第一個符合條件的數(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>
5.findIndex()
用于找出第一個符合條件的數(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()
表示某個數(shù)組是否包含給定的值，返回布爾值
[1,2,3].includes(2); //true [1,2,3].includes(4); //false
到此這篇關(guān)于ES6的內(nèi)置對象擴(kuò)展實現(xiàn)示例的文章就介紹到這了,更多相關(guān)ES6 內(nèi)置對象擴(kuò)展內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇原生JS實現(xiàn)ajax與ajax的跨域請求實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
javascript創(chuàng)建createXmlHttpRequest對象示例代碼
這篇文章主要介紹了javascript創(chuàng)建createXmlHttpRequest對象的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了JS實現(xiàn)的簡單表單驗證功能,結(jié)合完整實例形式分析了javascript基于字符串長度判定、數(shù)據(jù)類型判定及正則判斷等操作進(jìn)行表單驗證的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
失去焦點時關(guān)閉層實現(xiàn)代碼。大家可以參考下。2009-05-05
這篇文章主要為大家詳細(xì)介紹了JS+DIV實現(xiàn)拖動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
javascript的漸進(jìn)增強(qiáng)與平穩(wěn)退化淺談
2013-11-11
這篇文章主要介紹了百度地圖給map添加右鍵菜單（判斷是否為marker） 的相關(guān)資料,需要的朋友可以參考下2016-03-03
js中定義函數(shù)的方式有多種，函數(shù)直接量就是其中一種。如var fun = function(){},這里function如果不賦值給fun那么它就是一個匿名函數(shù)。2009-06-06
本文給大家分享一段超級全面的二代身份證號碼驗證程序，由JS編寫而成，可以校驗身份證的地址碼、出生日期碼、順序碼和數(shù)字校驗碼。是身份證去偽存真的一大利器。2014-11-11
這篇文章主要介紹了微信小程序中this.setData的使用和注意事項,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08