JavaScript學習之數組(下)

Labradors 發布于2019-08-23 12:14 / 3375人閱讀

摘要：數組篇方法函數可以將函數作為參數傳入，并將數組中每個元素代入函數進行處理返回，返回一個新的數組可以看出可以傳入兩個參數，第一個參數中函數可以填入三個參數，數組的元素，數組的索引，數組本身第二個參數用來綁定回調函數內部的注意點當元素為空位，，

數組篇 map()方法

map函數可以將函數作為參數傳入，并將數組中每個元素代入函數進行處理返回，返回一個新的數組

arr.map(function (elem, index, arr) {...}, arg)

可以看出map可以傳入兩個參數，第一個參數中函數可以填入三個參數，elem：數組的元素，index：數組的索引，arr：數組本身
第二個參數用來綁定回調函數內部的this

var arr = [1, 2, 3, 4, 5, 6, 7];
var obj = {a : 3};
var new_arr = arr.map(function (elem) {
    if (this.a < elem) {
        return elem * 2;
    }
    else{
        return this.a;
    }
    
},obj);

console.log(new_arr);  //?[3, 3, 3, 8, 10, 12, 14]

注意點：當元素為空位，undefined，null時map的表現

var count = 0;
var f = function (elem, index) {
    count ++；
};
[1, , 3].map(f);          //count 2
[1, null,3 ].map(f);      //count 3
[1, undefined, 3].map(f); //count 3

當元素是空位時map會跳過，undefined,null不會跳過

forEach()方法

forEach函數與map類似，也是遍歷數組，代入函數，沒有返回值；可以理解成只是將數組元素進行一些操作處理
個人覺得forEach能實現的，map也能實現

var arr = [];
[1, 2, 3].forEach(function (elem) {
    arr.push(elem * 2);
})

同理當元素是空位時forEach會跳過，undefined,null不會跳過

filter()方法

filter函數是過濾一些元素，當返回值為true時，保留元素，false時，舍去元素

var arr = [1, 2, 3].filter(function (elem) {
    if(elem > 2) {
        return 1;
    }
        return 0;
}); 
arr; //[3]

同理當元素是空位時forEach會跳過，undefined,null不會跳過

some(),every()方法

兩個方法函數的都是布爾值
some函數，將數組遍歷代入函數中，依次執行當一個滿足條件就返回布爾值true，否則遍歷完都不滿足返回false
every函數，將數組遍歷代入函數中，依次執行當一個不滿足條件就返回布爾值false，否則遍歷完都滿足返回true

var count = 0
var bool = ["1", 2, 4].every(function (elem) {
    count ++;
    
    return (typeof elem === "number");
});
console.log(count, bool);    //1 false

var count = 0
var bool = [1, "2", "4"].some(function (elem) {
    count ++;
    
    return (typeof elem === "number");
});
console.log(count, bool);    //1 true

對于空位，null，undefined的執行
every()與some()一樣:空位時會跳過，undefined,null不會跳過
當為空數組時([],[,])：
some()返回false，個人方便理解，遍歷時一直在跳過，都不滿足最后只好返回false
every()返回true，個人方便理解，遍歷時一直在跳過，都滿足最后只好返回true;

reduce()與reduceRight()

reduce函數的實現效果有點像斐波那契數列的味道

arr.reduce(function (prev, cur, index, arr) {}, arg)

reduce函數可以接受兩個參數
第一個參數是函數，prev：累計變量，也就是上一次的執行結果；cur：當前變量；index：當前變量的索引；arr：操作的數組本身
第二個參數用來指定初始值，可以用于處理空數組

var f = function (prev, cur) {
    return prev + cur;
};
[].reduce(f, 1);     //1
[1, 2].reduce(f, 1); //4
[].reduce(f);        //報錯Reduce of empty array with no initial value

有一個有趣的應用：查找數組中length最長的，利用參數prev的累計功能

var f = function (prev, cur) {
    return prev.length < cur.length ? cur : prev;
};
var lon = ["123", "11113","23","4322"].reduce(f);
console.log(lon);

reduceRight函數與reduce函數一樣，只不過從后往前遍歷數組
同理當元素是空位時reduce和reduceRight會跳過，undefined,null不會跳過

indexOf()與lastIndexOf()

indexOf函數返回給定元素在數組中第一次出現的位置，如果沒有出現則返回-1；
匹配規則用的是全等（===）
不填參數，返回-1
特別是匹配對象和NaN時,對象在全等下比較的是地址，而NaN不等于自身

var arr = [NaN, 1, {a : 1}];
console.log(arr.indexOf());              //-1
console.log(arr.indexOf(NaN));           //-1
console.log(arr.indexOf(1));             //1
console.log(arr.indexOf({a : 1}));       //-1

lastIndexOf()是從后往前找

云服務器 GPU云服務器學習之substr() 深度學習之概要 webrtc學習之九 linux學習之centos

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98162.html

JavaScript學習之JSON對象

摘要：原始類型的值只有四種字符串數值必須以十進制表示布爾值和不能使用和。字符串必須使用雙引號表示，不能使用單引號。數組或對象最后一個成員的后面，不能加逗號。 JSON對象補充記錄一下，有些方法很需要熟練記憶的 JSON對象的規定 JSON對象對值有嚴格的規定復合類型的值只能是數組或對象，不能是函數、正則表達式對象、日期對象。原始類型的值只有四種：字符串、數值（必須以十進制表示）、布爾值和...

banana_pi 2019-08-23 12:43 評論0 收藏0
JavaScript學習之正則表達式

摘要：正則表達式如何創建正則表達式字面量創建通過構造函數正則表達式實例屬性及方法三個修飾符屬性，只讀不可修改正則表達式是否添加了忽略大小寫的修飾符，返回一個布爾值正則表達式是否添加了全局匹配的修飾符，返回一個布爾值正則表達式是否添加了換行的修飾符正則表達式如何創建正則表達式字面量創建var r = /a/; 通過構造函數var r = new RegExp(a); 正則表達式實...

idealcn 2019-08-23 12:19 評論0 收藏0
JavaScript學習之Object(下)new命令

摘要：命令作用作用是執行構造函數，返回實例對象上面例子是自定義一個構造函數，其最大的特點就是首字母大寫，用執行構造函數其中，在的執行下，代表了實例化后的對象，這個也就有屬性注意點如果不用執行構造函數，那么指向的是全局有兩種方式可以避免內部定義嚴格 new命令 new作用作用是執行構造函數，返回實例對象 function F() { this.name = object } var ...

Salamander 2019-08-23 12:14 評論0 收藏0
JavaScript學習之零碎記憶點總結記錄(一)

摘要：總結記錄常見的五種類型報錯語法解析錯誤變量未定義變量類型錯誤數組越界相關函數參數錯誤能防止報錯導致后面代碼不能執行問題的未定義不影響后面函數的執行注意點在報錯前，不執行里的內容不報錯也不執行在報錯后，的內容不會被執行執行完結束，如果有總結記錄 try-catch-finally 常見的五種類型報錯 SyntaxError語法解析錯誤 ReferenceError變量未定義 Type...

fou7 2019-08-23 12:16 評論0 收藏0
Javascript設計模式學習之Module(模塊)模式

摘要：實現模塊的幾種方法對象字面量表示法模式模式模式模塊對象字面量對象字面量型完整版配置對象基本方法根據配置信息輸出內容重寫當前的配置信息輸出結果值模式最初被定義為一種在傳統軟件工程中為類提供私有和公有封裝的方法。該模式返回一個對象。 javascript實現模塊的幾種方法: 對象字面量表示法 Module模式 AMD模式 CommonJS模式 ECMAScript Harmony模塊 ...

付永剛 2019-08-19 17:48 評論0 收藏0