巧用javascript原生api

Javascript中其实有很多实用的针对字符串与数组操作的方法，会在开发中使代码更简洁。在此分享一下。注：（部分代码使用 ES6 语法，在新版chrome中可以直接运行，无需转换）

复制数组

let list = [1,2,3,4];
let newList = list.slice(); // or list.concat()

newList.push(44); // 原list不受影响

// output
// list ->  [1,2,3,4]
// newList -> [1,2,3,4,44]

函数参数转数组：

list(1,2,3,4);  // [1,2,3,4]

function list() {
    return Array.prototype.slice.call(arguments);  // 利用arguments为类数组（类型并非真正的Array），并用slice复制为真正数组
}

重复n个字符a：

new Array(n+1).join('a'); // 'aaaaa...' 输出n个a。

创建 N x N 二维矩阵，并初始化数据：

Array(3).fill(null).map(() => Array(3).fill(0)); // N x N的矩阵，且数值都为0

PS：切勿使用如下方法（原因详见我在 Stackoverflow 中的回答）

Array(N).fill(Array(N).fill(0)); // 此时创建的二维数组中的值会被引用，见下图说明

stackoverflow

类数组（NodeList）转数组（Array）

const nodeList = document.querySelectorAll('.i'); // 返回的不是真正的Array（你无法使用filter、map、reduce等方法）

// 方法1: 利用Array.from
const arrayList = Array.from(nodeList);

// 方法2: 利用slice
const arrayList = Array.prototype.slice.call(nodeList);

// 方法3: 使用ES6语法糖
const arrayList = [...nodeList];

arrayList.map(item => item.textContent); // 使用数组map方法输出每个元素的textContent

数组内记录重复次数

很多时候数组会有重复，有时我们想知道该数组里的值重复的多少次，可以巧用reduce方法来生成。

const alphas = ['A', 'A', 'A', 'B', 'B', 'C'];
alphas.reduce((obj, item) => {
    if(!obj[item]) {
        obj[item] = 0;
    }
    obj[item]++;
    return obj;
}, {});

// output
// {
//     A: 3,
//     B: 2,
//     C: 1
// }

数组去重 (利用ES6中的Set)

function uniqArray(a) {
  const seen = new Set();
  return a.filter(val => !seen.has(val) && seen.add(val));
}

const alphas = ['A', 'A', 'A', 'B', 'B', 'C'];
uniqArray(alphas); // ['A', 'B', 'C'];