摘要:中對字符串函數(shù)對象數(shù)組等都進(jìn)行了擴(kuò)展,感覺目的呢就是完善一下所為外行人詬病的一些偽其實(shí)個(gè)人覺得不完美的才是真的美,什么東西都無懈可擊了就顯得不夠有趣了。
ES6中對字符串、函數(shù)、對象、數(shù)組等都進(jìn)行了擴(kuò)展,感覺目的呢就是完善一下JS所為外行人詬病的一些偽bug.其實(shí)個(gè)人覺得不完美的JS才是真的美,什么東西都無懈可擊了就顯得不夠有趣了。好了,接下來又要開始拾人牙慧了...
主要講解:
擴(kuò)展運(yùn)算符...
Array.from()
Array.of()
Array.prototype.find() 和 Array.prototype.findIndex() --常用
1.擴(kuò)展運(yùn)算符... 用于將數(shù)組轉(zhuǎn)為逗號分隔的參數(shù)序列如: ...[1,2,3] => 1,2,3 --只限一維轉(zhuǎn)換,這種轉(zhuǎn)換只有放進(jìn)函數(shù)中調(diào)用才有意義,不能多帶帶存在
</>復(fù)制代碼
基礎(chǔ)用法:
function plus(x,y){
return x+y;
}
plus(...[3,7]);
//10
plus(3,...[7])
plus(...[3],7)
//可以靈活的置于函數(shù)參數(shù)中任意位置,只要根據(jù)傳進(jìn)的數(shù)據(jù)進(jìn)行解析即可。
//Array原生push方法(可向數(shù)組末尾添加一個(gè)或多個(gè)元素,順序添加,且不創(chuàng)建新數(shù)組,直接修改原數(shù)組)
let arr = [1,2,3];
arr.push(4,5); //直接傳參
arr // [1,2,3,4,5]
//使用擴(kuò)展的方式:傳入一個(gè)數(shù)組,進(jìn)行拼接
arr.push(...[6,7,8]);
arr //[1,2,3,4,5,6,7,8]
</>復(fù)制代碼
應(yīng)用:
i.數(shù)組的淺拷貝
let arr = [12,34,56];
let arr2 = [...arr];
let [...arr3] = arr;
arr2 // [12,34,56]
arr3 // [12,34,56]
arr2 == arr
//false
ii.合并數(shù)組
[...arr,...arr2,...arr3]
//[12, 34, 56, 12, 34, 56, 12, 34, 56]
iii.結(jié)合解構(gòu)賦值,生成剩余數(shù)組 -- 擴(kuò)展運(yùn)算符只能置于參數(shù)最后
let [one,...rest] = [1,2,3,4,5];
one // 1
rest // [2,3,4,5]
iv. 擴(kuò)展字符串成數(shù)組 --感覺這個(gè)好像沒啥用,"babe".split("")也可以
[..."babe"]
//["b", "a", "b", "e"]
//不過阮老師的書上說擴(kuò)展運(yùn)算符的寫法可以識(shí)別四個(gè)字節(jié)的Unicode字符
//有相關(guān)需求可以使用這種方式解剖字符串
v. 實(shí)現(xiàn)了Iterator接口的對象均可以使用擴(kuò)展運(yùn)算符轉(zhuǎn)化成真正的數(shù)組(關(guān)于Iterator下次再寫)
function convert2Arr(){
return [...arguments];
}
let result = convert2Arr(1,2,3,4,5);
result // [1,2,3,4,5]
2.Array.from()
用于將類數(shù)組對象、可遍歷的對象轉(zhuǎn)為真正的數(shù)組(類數(shù)組對象特征:屬性為非負(fù)整數(shù)、存在length屬性、length>=0)
</>復(fù)制代碼
//類數(shù)組對象
let obj = {
0:"hello",
1:"world",
4:"outof bounds data",
length:3 //因?yàn)閘ength不能動(dòng)態(tài)改變,隨意賦值,最后得到的數(shù)組長度就是其值
}
Array.from(obj);
// ["hello", "world", undefined]
//根據(jù)屬性名對應(yīng)到數(shù)組的index,超過length部分舍棄。沒有對應(yīng)的屬性,置為undefined
</>復(fù)制代碼
//實(shí)現(xiàn)了Iterator接口的數(shù)據(jù)結(jié)構(gòu)
let str = "babe";
Array.from(str);
// ["b", "a", "b", "e"]
[...str]
// ["b", "a", "b", "e"]
//嗯,感覺現(xiàn)在JavaScript向著更幸福的方向發(fā)展了,條條大路通羅馬。
</>復(fù)制代碼
注意:
Array.from()是一個(gè)很不嚴(yán)謹(jǐn)?shù)慕巧灰獙ο蠛衛(wèi)ength屬性,且值為正整數(shù)就能轉(zhuǎn)
不保證轉(zhuǎn)出來的東西質(zhì)量是否符合要求。
Array.from({user:"babe",length:5})
// [undefined, undefined, undefined, undefined, undefined]
Array.from()可接收第二個(gè)參數(shù),用于對數(shù)組的每一項(xiàng)進(jìn)行處理并返回
Array.from([1,2,3],x=>x*x)
// [1, 4, 9]
Array.from([1,2,3],x=>{x*x})
//[undefined, undefined, undefined] --切記處理函數(shù)中一定要返回
Array.from()還可接收第三個(gè)參數(shù),這樣在處理函數(shù)中就可以使用傳進(jìn)去的對象域中的值
let that = {
user:"babe"
}
let obj = {
0:"babe",
1:"zhangsan",
2:"lisi",
length:3
}
let result = Array.from(obj,(user) =>{
if(user == that.user){
return user;
}
return 0;
},that);
result //["babe", 0, 0]
3.Array.of()
用于將一組值轉(zhuǎn)換為數(shù)組,存在的意義是替代以構(gòu)造函數(shù)的形式創(chuàng)建數(shù)組,修復(fù)數(shù)組創(chuàng)建因參數(shù)不一致導(dǎo)致表現(xiàn)形式不同的偽bug.
</>復(fù)制代碼
//原始方式
new Array()
// []
new Array(2)
// [empty × 2]
new Array(1,2,3,4,5)
// [1, 2, 3, 4, 5]
//先進(jìn)改良方式
Array.of();
// []
Array.of(2);
// [2]
Array.of(1,2,3,4,5);
// [1, 2, 3, 4, 5]
4.Array.prototype.find() 和 Array.prototype.findIndex()方法 --常用
find方法用于查找第一條符合要求的數(shù)據(jù),找到返回該數(shù)據(jù),否則返回undefined; findIndex則用于找到第一條符合要求的數(shù)組位置,找到返回index,否則返回-1;----這兩個(gè)方法都可以使用indexOf替代,只是比indexOf更精細(xì)(可以查找NaN所在位置)
</>復(fù)制代碼
let result = [
{extractId:1,sec:"Fi900"},
{extractId:2,sec:"Fi901"},
{extractId:3,sec:"Fi902"},
{extractId:4,sec:"Fj900"},
{extractId:5,sec:"Fj901"}
];
result.find(obj => obj.sec == "Fi902")
// {extractId: 3, sec: "Fi902"}
result.findIndex(obj => obj.sec == "Fi902")
// 2
//這個(gè)還要記住一個(gè)處理函數(shù)的接收參數(shù)順序,依次為:當(dāng)前值、當(dāng)前位置、原始數(shù)組
result.find((val,index,arr)=>{...});
result.findIndex((val,index,arr)=>{});
//此兩個(gè)方法均可接收第二個(gè)參數(shù),傳進(jìn)去一個(gè)作用域?qū)ο?然后在處理函數(shù)中可以使用傳入的對象
let scope = {extractId:2};
result.findIndex(item=>item.extractId == scope.extractId,scope);
// 1
今天就先寫到這里了(每次都有點(diǎn)虎頭蛇尾,介紹的也只是我感興趣的點(diǎn),以后盡量全,然后有側(cè)重點(diǎn)),如果bug請指正Thanks?(?ω?)?
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94815.html
摘要:它的參數(shù)是一個(gè)回調(diào)函數(shù),所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù),直到找出第一個(gè)返回值為的成員,然后返回該成員。上面代碼中,方法的回調(diào)函數(shù)可以接受三個(gè)參數(shù),依次為當(dāng)前的值當(dāng)前的位置和原數(shù)組。 數(shù)組的擴(kuò)展 展開運(yùn)算符 展開運(yùn)算符(用三個(gè)連續(xù)的點(diǎn) ( ... ) 表示)是 ES6 中的新概念,使你能夠?qū)⒆置媪繉ο笳归_為多個(gè)元素。 合并數(shù)組 展開運(yùn)算符的一個(gè)用途是結(jié)合數(shù)組。 如果你需要結(jié)合多個(gè)數(shù)組,在...
摘要:循環(huán)遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個(gè)數(shù)組,包含對象自身的所有屬性的鍵名。目前,只有對象方法的簡寫法可以讓引擎確認(rèn),定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法 在ES6中 允許直接寫入變量和函數(shù),作為對象的屬性和方法,使得代碼的書寫更為簡潔。...
摘要:屬性的簡潔表示法在中允許直接寫入變量和函數(shù),作為對象的屬性和方法,使得代碼的書寫更為簡潔。循環(huán)遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個(gè)數(shù)組,包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法 在ES6中 允許直接寫入變量...
摘要:它是一個(gè)通用標(biāo)準(zhǔn),奠定了的基本語法。年月發(fā)布了的第一個(gè)版本,正式名稱就是標(biāo)準(zhǔn)簡稱。結(jié)語的基本擴(kuò)展還有一些沒有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了,但是,好像還沒有完全走進(jìn)我們的日常開發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手,逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的,該公司1996年11月將JavaSc...
showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用來解決在ES5中 兩種相等運(yùn)算符的缺點(diǎn)。用來比較兩個(gè)值是否嚴(yán)格相等,行為和(===)基本一致。 在ES5中判斷兩個(gè)值是否相等,只能用(==)相等運(yùn)算符和(===)嚴(yán)格相等運(yùn)算符,但是這兩貨都有缺點(diǎn),前者 兩邊的值都會(huì)轉(zhuǎn)換數(shù)據(jù)類型,...
閱讀 1247·2021-11-24 09:39
閱讀 390·2019-08-30 14:12
閱讀 2603·2019-08-30 13:10
閱讀 2447·2019-08-30 12:44
閱讀 972·2019-08-29 16:31
閱讀 856·2019-08-29 13:10
閱讀 2451·2019-08-27 10:57
閱讀 3164·2019-08-26 13:57