ES5 Array

forEach

1. 遍歷,循環(huán)铅祸。forEach方法中的function回調(diào)支持3個(gè)參數(shù)坑质,第1個(gè)是遍歷的數(shù)組內(nèi)容合武;第2個(gè)是對應(yīng)的數(shù)組索引,第3個(gè)是數(shù)組本身涡扼。

var sum = 0;
[1, 2, 3, 4].forEach(function (item, index, array) {
    console.log(array[index] == item); // true
    sum += item;
});
console.log(sum); // 10

2. forEach除了接受一個(gè)必須的回調(diào)函數(shù)參數(shù)稼跳,還可以接受一個(gè)可選的上下文參數(shù)(改變回調(diào)函數(shù)里面的this指向)

var database = {
    users: ["張含韻", "江一燕", "李小璐"],
    sendEmail: function (user) {
        if (this.isValidUser(user)) {
            console.log("你好," + user);
        } else {
            console.log("抱歉吃沪," + user + "汤善,你不是本家人");
        }
    },
    isValidUser: function (user) {
        return /^張/.test(user);
    }
};
// 給每個(gè)人法郵件
database.users.forEach(  // database.users中人遍歷
    database.sendEmail,    // 發(fā)送郵件
    database               // 使用database代替上面this
);

3. forEach 遍歷DOM元素

var eleDivs = document.getElementsByTagName("div");
Array.prototype.forEach.call(eleDivs, function (div) {
    console.log("該div類名是:" + (div.className || "空"));
});

map

1. map 映射 原數(shù)組被“映射”成對應(yīng)新數(shù)組 [].map()基本用法與forEach類似

var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
    return item * item;
});
console.log(arrayOfSquares); // 1, 4, 9, 16

2. 在實(shí)際使用的時(shí)候,我們可以利用map方法方便獲得對象數(shù)組中的特定屬性值們

var users = [
    { name: "張含韻", "email": "zhang@email.com" },
    { name: "江一燕", "email": "jiang@email.com" },
    { name: "李小璐", "email": "li@email.com" }
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

filter

1. 為“過濾”票彪、“篩選”之意红淡。返回?cái)?shù)組的一個(gè)子集,回調(diào)函數(shù)用于邏輯判斷是否返回降铸,返回true則把當(dāng)前元素加入到返回?cái)?shù)組中在旱,false則不加

var emailsZhang = users
    // 獲得郵件
    .map(function (user) { return user.email; })
    // 篩選出zhang開頭的郵件
    .filter(function (email) { return /^zhang/.test(email); });

console.log(emailsZhang.join(", ")); // zhang@email.com

some

指某些項(xiàng)符合條件

var scores = [5, 8, 3, 10];
var current = 7;

function higherThanCurrent(score) {
    return score > current;
}

if (scores.some(higherThanCurrent)) {
    console.log("朕準(zhǔn)了!");
}

every

指每一項(xiàng)均要符合條件

if (scores.every(higherThanCurrent)) {
    console.log("朕準(zhǔn)了推掸!");
} else {
    console.log("來人桶蝎,拖出去斬了!");
}

indexOf

indexOf 方法在字符串中就有 string.indexOf(searchString,position) (從某一位置開始查找某一字符所在位置) (未找到返回-1)在數(shù)組中用法類似

var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (從3號位開始搜索)

console.log(data.indexOf(4)); // -1 (未找到)
console.log(data.indexOf("5")); // -1 (未找到谅畅,因?yàn)? !== "5")

lastIndexOf

是從字符串的末尾開始查找登渣,而不是從開頭。還有一個(gè)不同就是fromIndex的默認(rèn)值是array.length - 1而不是0.

var data = [2, 5, 7, 3, 5];

console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (從后往前铃彰,索引值小于3的開始搜索)

console.log(data.lastIndexOf(4)); // -1 (未找到)

reduce

array.reduce(callback[,initialValue])

1. callback函數(shù)接受4個(gè)參數(shù):之前值绍豁、當(dāng)前值、索引值以及數(shù)組本身牙捉。initialValue參數(shù)可選竹揍,表示初始值。若指定邪铲,則當(dāng)作最初使用的previous值芬位;如果缺省,則使用數(shù)組的第一個(gè)元素作為previous初始值带到,同時(shí)current往后排一位昧碉,相比有initialValue值少一次迭代。

var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
    return previous + current;
}, 1);
console.log(sum); // 11     

2. 有了reduce揽惹,我們可以輕松實(shí)現(xiàn)二維數(shù)組的扁平化

var matrix = [
    [1, 2],
    [3, 4],
    [5, 6]
];
// 二維數(shù)組扁平化
var flatten = matrix.reduce(function (previous, current) {
    return previous.concat(current);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]

reduceRight

實(shí)現(xiàn)上差異在于reduceRight是從數(shù)組的末尾開始實(shí)現(xiàn)被饿。

var flatten = matrix.reduce(function (previous, current) {
    return previous.concat(current);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]
//reduceRight 實(shí)現(xiàn)上差異在于reduceRight是從數(shù)組的末尾開始實(shí)現(xiàn)。
var data = [1, 2, 3, 4];
var specialDiff = data.reduceRight(function (previous, current, index) {
    if (index == 0) {
        return previous + current;
    }
    return previous - current;
});
console.log(specialDiff); // 0

原作
測試demo-打開控制臺測試

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搪搏,一起剝皮案震驚了整個(gè)濱河市狭握,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌疯溺,老刑警劉巖论颅,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哎垦,死亡現(xiàn)場離奇詭異,居然都是意外死亡恃疯,警方通過查閱死者的電腦和手機(jī)漏设,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來今妄,“玉大人郑口,你說我怎么就攤上這事⊥芙保” “怎么了潘酗?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長雁仲。 經(jīng)常有香客問我,道長琐脏,這世上最難降的妖魔是什么攒砖? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮日裙,結(jié)果婚禮上吹艇,老公的妹妹穿的比我還像新娘。我一直安慰自己昂拂,他們只是感情好受神,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著格侯,像睡著了一般鼻听。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上联四,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天撑碴,我揣著相機(jī)與錄音,去河邊找鬼朝墩。 笑死醉拓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的收苏。 我是一名探鬼主播亿卤,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鹿霸!你這毒婦竟也來了排吴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤杜跷,失蹤者是張志新(化名)和其女友劉穎傍念,沒想到半個(gè)月后矫夷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡憋槐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年双藕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阳仔。...
    茶點(diǎn)故事閱讀 38,018評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡忧陪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出近范,到底是詐尸還是另有隱情嘶摊,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布评矩,位于F島的核電站叶堆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏斥杜。R本人自食惡果不足惜虱颗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蔗喂。 院中可真熱鬧忘渔,春花似錦、人聲如沸缰儿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乖阵。三九已至宣赔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間义起,已是汗流浹背拉背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留默终,地道東北人椅棺。 一個(gè)月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像齐蔽,于是被迫代替她去往敵國和親两疚。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評論 2 345

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

  • 數(shù)組創(chuàng)建 javascript中創(chuàng)建數(shù)組的方式有兩種: 第一種是 使用Array構(gòu)造函數(shù): 第二種是 使用數(shù)組字面...
    那年點(diǎn)夏閱讀 720評論 4 3
  • 構(gòu)造函數(shù) Array是JavaScript的內(nèi)置對象含滴,同時(shí)也是一個(gè)構(gòu)造函數(shù)诱渤,可以用它生成新的數(shù)組。Array構(gòu)造函...
    zjh111閱讀 754評論 0 0
  • 構(gòu)造函數(shù) Array是JavaScript的內(nèi)置對象谈况,同時(shí)也是一個(gè)構(gòu)造函數(shù)勺美,可以用它生成新的數(shù)組递胧。 上面代碼中,A...
    許先生__閱讀 311評論 0 1
  • 出外旅游時(shí)赡茸,游客未必清楚知道不同地方的傳統(tǒng)缎脾,出外消費(fèi)要否給予小費(fèi)、應(yīng)付多少占卧?以下就是一些港人的熱門旅行地點(diǎn)的小費(fèi)傳...
    港漂圈豆豆閱讀 319評論 0 1