js原生API妙用（一）

復制數組

我們都知道數組是引用類型數據。這里使用slice復制一個數組，原數組不受影響。

let list1 = [1, 2, 3, 4];
let newList = list1.slice();
list1.push(5); // [1,2,3,4,5]
//newList [1,2,3,4] 不受影響
console.log(newList); //[1,2,3,4]
console.log(list1); //[1, 2, 3, 4, 5]
let list2 = [5,6,7,8];
let newList2 = list2.concat();
newList2.push(9); // 
console.log(newList2); //[5, 6, 7, 8, 9]
console.log(list2); //[1, 2, 3, 4, 5]

函數參數轉數組

將函數參數轉數組，利用arguments偽數組形式，再用slice拷貝為新數組。

function argsParam() {
    //arguments偽數組形式，再用slice拷貝為新數組
    return Array.prototype.slice.call(arguments);
}

console.log(argsParam(1,2,3,4)); //[1, 2, 3, 4]

重復n個字符

利用Array構造函數傳參，再使用join函數分隔指定的字符串

/**
    @params
    num: 重復次數
    str: 重復字符串
**/
function repeatStr(num, str) {
    return new Array(num+1).join(str);
}

console.log(repeatStr(5, 's'));//sssss

創建 N x N 二維矩陣，並初始化數據

使用Array對象傳入數組length參數，調用fill再用map循環fill替換對應的值返回一個新數組

/**
    @params
    num: 矩陣次數
    str: 矩陣數組中的值，由於fill函數替換所以值都是一致的
**/
function arrayMatrix(num, matrixStr) {
    return Array(num).fill(null).map(() => Array(num).fill(matrixStr));
}
//  ["a", "a", "a", "a"]  ["a", "a", "a", "a"] ["a", "a", "a", "a"] ["a", "a", "a", "a"]
console.log(arrayMatrix(4, 'a'));

類數組（NodeList）轉數組（Array）

其實，前面幾個例子也有。如slice，這里加多數組的from方法,ES6語法糖

//返回的不是真正的Array（你無法使用filter、map、reduce等方法）
const nodeList = document.querySelectorAll('div');  
// 方法1: 使用Array.from
const arrayList1 = Array.from(nodeList);
// 方法2: 使用slice
const arrayList2 = Array.prototype.slice.call(nodeList);
// 方法3: 使用ES6語法糖
const arrayList3 = [...nodeList];

數組內記錄重復次數

使用reduce函數，reduce函數接收4個參數：1.累計變量：默認數組的第一個值；2.當前變量：默認數組的第二個值；3.當前位置：重0開始；4.原數組

const arrs = [1, 1, 1, 2, 2, 3];
//得到{1: 3, 2: 2, 3: 1}
arrs.reduce((obj, item) => {
    if(!obj[item]) {
        obj[item] = 0;
    }
    obj[item]++;
    return obj;
}, {}); 

數組去重

數組去重有很多種方式如傳統的for循環等，這里例子使用最新的ES6 set不重復方式，並使用set的has、add等 API操作；注意set返回的也是一個不重復的類數組形式要使用Array.from方法轉成數組形式

/**
    @params
    arr: 需要去重的數組
**/
function uniqueArray(arr) {
    const setArr = new Set();
    return arr.filter(val => !setArr.has(val) && setArr.add(val));
}

console.log(uniqueArray([1,1,2,1,1,2,3,4,5,3,2,4]));    //[1, 2, 3, 4, 5]

 

參考：http://hectorguo.com/zh/magic-js/