ES6的內(nèi)置對(duì)象擴(kuò)展實(shí)現(xiàn)示例
一、Array的擴(kuò)展方法
1.擴(kuò)展運(yùn)算符(展開(kāi)語(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é)果沒(méi)有逗號(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ù)組
將類(lèi)數(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>
3.構(gòu)造函數(shù)方法:Array.from()
將類(lèi)數(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);
方法還可以接收第二個(gè)參數(shù),作用類(lèi)似于數(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ù)組成員,如果沒(méi)有找到返回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()
用于找出第一個(gè)符合條件的數(shù)組成員的位置,如果沒(méi)有找到返回-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
到此這篇關(guān)于ES6的內(nèi)置對(duì)象擴(kuò)展實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)ES6 內(nèi)置對(duì)象擴(kuò)展內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端如何用post的方式進(jìn)行eventSource請(qǐng)求
這篇文章主要給大家介紹了關(guān)于前端如何用post的方式進(jìn)行eventSource請(qǐng)求的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04Bootstrap頁(yè)面標(biāo)題Page Header的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap頁(yè)面標(biāo)題Page Header的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JS localStorage實(shí)現(xiàn)本地緩存的方法
JS localStorage實(shí)現(xiàn)本地緩存的方法,需要的朋友可以參考一下2013-06-06一文帶你掌握掌握J(rèn)avaScript中不同屬性類(lèi)型的細(xì)節(jié)
JavaScript是一種功能強(qiáng)大的編程語(yǔ)言,支持面向?qū)ο蟮木幊谭妒?,本文將介紹JavaScript中面向?qū)ο缶幊痰幕靖拍?,包括?duì)象、屬性類(lèi)型、定義多個(gè)屬性和讀取屬性的特性2023-06-06bootstrap日期插件daterangepicker使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap日期插件daterangepicker的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10JavaScript通過(guò)事件代理高亮顯示表格行的方法
這篇文章主要介紹了JavaScript通過(guò)事件代理高亮顯示表格行的方法,涉及javascript事件代理及頁(yè)面元素的操作技巧,需要的朋友可以參考下2015-05-05javascript用rem來(lái)做響應(yīng)式開(kāi)發(fā)
這篇文章主要介紹了javascript用rem來(lái)做響應(yīng)式開(kāi)發(fā),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01