ES6數(shù)組常用方法

經(jīng)歷了幾天并不開心的日子,應(yīng)試教育的無奈又一次擺在我眼前钾虐。哦,對了笋庄,我還是個(gè)非985&211大學(xué)的學(xué)生禾唁。
廢話不應(yīng)該那么多?

還是說一說ES6的數(shù)組吧...

無奈

首先我們應(yīng)該了解一下擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符...无切,可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列荡短。

console.log(...[1, 2, 3]); // 1 2 3
  • 將函數(shù)轉(zhuǎn)換為參數(shù)
function test(a,b,c) {
    console.log(a+b+c);
}
var arr = [1,2,3];

/*es5中*/
test.apply(this,arr);

/*es6中*/
test(...arr);
  • 合并數(shù)組
  • 數(shù)組賦值
    擴(kuò)展運(yùn)算符用于數(shù)組賦值,只能放在參數(shù)的最后一位哆键,否則會(huì)報(bào)錯(cuò)
var [...arr, arr1] = [1, 2, 3, 4, 5];//報(bào)錯(cuò)
var [arr, ...arr1] = [1, 2, 3, 4, 5];
console.log(arr) // 1
console.log(arr1) // [2, 3, 4, 5]

var [arr, ...arr1] = [];
console.log(arr) // undefined
console.log(arr1) // []

var [arr, ...arr1] = ["foo"];
console.log(arr) // foo
console.log(arr1)   // []
  • 將字符串轉(zhuǎn)換為數(shù)組
console.log([...'hello']);// [ "h", "e", "l", "l", "o" ]

Array.from()方法

用于將類數(shù)組和可遍歷的對象轉(zhuǎn)換為真正的數(shù)組

  • 類數(shù)組:就是類似數(shù)組的對象掘托,本質(zhì)上要有l(wèi)ength屬性,說到底籍嘹,任何擁有l(wèi)ength屬性的對象闪盔,都可以通過Array.from()方法轉(zhuǎn)換為數(shù)組弯院。
    可遍歷的對象:ES6新增的數(shù)據(jù)結(jié)構(gòu)set和map。
let myArray = {'0':'a','1':'b','2':'c'};
let arr = Array.from(myArray);
console.log(arr);   //[]由于沒有l(wèi)ength屬性打印結(jié)果為一個(gè)空數(shù)組
let myArray = {'0':'a','1':'b','2':'c',length:3};
let arr = Array.from(myArray);
console.log(arr);  //["a", "b", "c"]
console.log(Array.from({length:2}));  //[undefined, undefined]
  • 如果參數(shù)是一個(gè)真正的數(shù)組泪掀,Array.from()會(huì)返回一個(gè)一模一樣的新數(shù)組
var arr = [1,2,3];
var myArr = Array.from(arr);
console.log(myArr);  //[1, 2, 3]
myArr[0] = 4;
console.log(myArr); //[4, 2, 3]
  • Array.from()可以接受第二個(gè)參數(shù)听绳,用來對每個(gè)元素進(jìn)行處理然后放入返回的數(shù)組之中
var obj = {0:1,1:2,2:3,length:3};
var arr = Array.from(obj,x => x*x);
console.log(arr);
  • Array.from()的另一個(gè)應(yīng)用是,將字符串轉(zhuǎn)化成數(shù)組异赫,然后返回字符串的長度
    因?yàn)樗軌蛘_處理各種Unicode字符椅挣,可以避JavaScript將大于\uFFFF的Unicode字符算成兩個(gè)字符的bug
function countSymbols(string) {
  return Array.from(string).length;
}

Array.of()方法

用于將一組值,轉(zhuǎn)換為數(shù)組

console.log(Array.of(1,2,3)); //[1, 2, 3]
console.log(Array.of(undefined)); //[undefined]
console.log(Array.of()); //[]沒有參數(shù)時(shí)塔拳,返回一個(gè)空數(shù)組鼠证。
  • 這個(gè)方法的主要目的是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足
    在數(shù)組的構(gòu)造函數(shù)中,如果只有一個(gè)值靠抑,那么這個(gè)值被認(rèn)作為是數(shù)組的長度而不是數(shù)組的第一個(gè)值量九。
console.log(Array.of(2));
console.log(Array(2));
結(jié)果如圖

copyWithin()方法

將指定位置的成員復(fù)制到其他位置(會(huì)覆蓋原有成員),然后返回該數(shù)組

  • 它接受三個(gè)參數(shù):
    target(必填):從該位置開始替換數(shù)據(jù)颂碧。
    start(可選):從該位置開始讀取數(shù)據(jù)荠列,默認(rèn)為0。如果是負(fù)值载城,表示倒數(shù)弯予。
    end(可選):到該位置前停止讀取數(shù)據(jù),默認(rèn)等于數(shù)組長度个曙。如果為負(fù)值,表示倒數(shù)受楼。
  • 舉個(gè)??大家就明白了
var arr = [1,2,3,4,5,6,7,8,9];
arr.copyWithin(0,3,6);
console.log(arr); //[4, 5, 6, 4, 5, 6, 7, 8, 9]

find()和findIndex()方法

  • find()用于找出第一個(gè)符合條件的數(shù)組成員,返回該成員垦搬。如果沒有符合條件的成員,返回undefined
var arr = [1,5,10,15];
var num = arr.find(function(value) {
    return value > 9;
});
console.log(num); //10
var arr = [1,5];
var num = arr.find(function(value) {
    return value > 9;
});
console.log(num); //undefined
  • findIndex()返回第一個(gè)符合條件的數(shù)組成員的位置艳汽,如果所有成員都不符合條件猴贰,則返回-1
var arr = [1,5];
var num = arr.findIndex(function(value) {
    return value > 9;
});
console.log(num); //-1

回調(diào)函數(shù)可以接受三個(gè)參數(shù),以此為當(dāng)前的值河狐、當(dāng)前的位置和原數(shù)組米绕。


fill()方法

  • 填充一個(gè)數(shù)組,一般用于數(shù)組的初始化
var arr = ['a','b','c'];
console.log(arr.fill(1)); // [1, 1, 1]
  • 可以接受第二個(gè)和第三個(gè)參數(shù)馋艺,用于指定填充的起始位置和結(jié)束位置
var arr = ['a','b','c'];
console.log(arr.fill(1,1,2)); // ["a", 1, "c"]

keys()栅干,valueOf(),entries()方法

  • keys()遍歷出所有的索引值
for (let index of ['a', 'b'].keys()) {
    console.log(index);
}  //0  1
  • valueOf()遍歷所有的值
for (let index of ['a', 'b'].valueOf()) {
    console.log(index);
}  //a  b
  • entries()遍歷值和索引
for (let index of ['a', 'b'].entries()) {
    console.log(index);
}  //[0, "a"] [1, "b"]

include()方法

判斷數(shù)組是否包含給定的值捐祠,有返回true碱鳞,沒有返回false,第二個(gè)參數(shù)表示搜索的起始位置

var arr = [1,2,3];
console.log(arr.includes(1)); //true
console.log(arr.includes(1,1)); //false
  • includes不是利用嚴(yán)格等于判斷踱蛀,所以可判斷是否有NaN
var arr = [1,2,3,NaN];
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(NaN));//-1
console.log(arr.includes(NaN));//true
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末窿给,一起剝皮案震驚了整個(gè)濱河市贵白,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌崩泡,老刑警劉巖禁荒,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異角撞,居然都是意外死亡呛伴,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進(jìn)店門靴寂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來磷蜀,“玉大人,你說我怎么就攤上這事百炬『致。” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵剖踊,是天一觀的道長庶弃。 經(jīng)常有香客問我,道長德澈,這世上最難降的妖魔是什么歇攻? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮梆造,結(jié)果婚禮上缴守,老公的妹妹穿的比我還像新娘。我一直安慰自己镇辉,他們只是感情好屡穗,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著忽肛,像睡著了一般村砂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屹逛,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天础废,我揣著相機(jī)與錄音,去河邊找鬼罕模。 笑死评腺,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的淑掌。 我是一名探鬼主播歇僧,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了诈悍?” 一聲冷哼從身側(cè)響起祸轮,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎侥钳,沒想到半個(gè)月后适袜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡舷夺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年苦酱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片给猾。...
    茶點(diǎn)故事閱讀 38,569評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡疫萤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出敢伸,到底是詐尸還是另有隱情扯饶,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布池颈,位于F島的核電站尾序,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏躯砰。R本人自食惡果不足惜每币,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琢歇。 院中可真熱鬧兰怠,春花似錦、人聲如沸李茫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涌矢。三九已至,卻和暖如春快骗,著一層夾襖步出監(jiān)牢的瞬間娜庇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工方篮, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留名秀,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓藕溅,卻偏偏與公主長得像匕得,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,216評論 0 4
  • 三汁掠,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn)略吨,只要將碼點(diǎn)放入大括號,就能正確解讀該字符考阱。有了這...
    eastbaby閱讀 1,518評論 0 8
  • 主題:你在班級的角色是什么翠忠?這一百天有什么期待? 同學(xué)發(fā)言匯總: 1.開心虎 用跑步來保持積極的心乞榨,讓做事充滿激情...
    雨竹_5826閱讀 533評論 2 4
  • 下次再見你秽之,我希望我是一條魚,對你只有七秒的記憶吃既。 下次再見你考榨,我希望我是一陣風(fēng),對你了無痕跡毫無記憶鹦倚。 下次再見...
    Mr_白眼閱讀 200評論 0 0
  • 今天在醫(yī)務(wù)室吊水河质,看著好幾個(gè)新生可能是中暑吧,在那里掛吊水申鱼。大家不是睡覺就是玩手機(jī)愤诱,我倒是很無聊,看看大家...
    Rachel曹閱讀 195評論 0 2