【前端芝士樹】Array的屬性及方法整理（參照MDN）

MoAir 發(fā)布于2019-08-23 16:15 / 3737人閱讀

摘要：本文主要是我自己對的一些整理，參考自，其中的分類有些不準確之處，還望見諒的基本屬性屬性的一些方法增刪改查基礎功能增刪改查基礎功能增刪改刪除數(shù)組的第一個元素刪除數(shù)組的最后一個元素在數(shù)組的開頭一個或多個元素，在數(shù)組的末尾增加一個或者多個元素數(shù)組

本文主要是我自己對Array的一些整理，參考自MDN，其中的分類有些不準確之處，還望見諒

Array

const arr = ["1", "2", "3", "four", "hello"];
let arrObj = new Array();

Array的基本屬性

// 屬性
console.log(arr.length); //5
console.log(arr.__proto__);

Array的一些方法 Array 增刪改查 && 基礎功能

/**
 * 增刪改查 && 基礎功能
 */
// 增刪改
arr.shift(); //刪除數(shù)組的第一個元素
arr.pop(); //刪除數(shù)組的最后一個元素
arr.unshift(); //在數(shù)組的開頭一個或多個元素，
arr.push(); //在數(shù)組的末尾增加一個或者多個元素
[1, 2, 3].concat([6, 7, 8]); //數(shù)組合并 [1,2,3,6,7,8]
[1, 2, 3, 4, 5].copyWithin(0, 1, 2); // 淺復制一部分，[2,2,3,4,5], arr.copyWithin(target[, start[, end]])
// splice(start, deleteCount, item) 刪除或者替換現(xiàn)有元素，返回被修改或者刪除的部分
[1, 2, 3].splice(1, 0, "hello"); // [] 原數(shù)組變成了[1, "hello", 2, 3]

// 查找
[1, 2, 3, 4, 5, 6].find(item => item > 3); // 返回復合條件的第一個值 4
[1, 2, 3, 4, 5, 6].findIndex(item => item > 3); // 返回復合條件的第一個值的位置索引 3
[1, 2, 3, 4, 5, 6].includes(3); // 判斷數(shù)組是否包含一個指定的值 true
[1, 2, 3, 4, 5, 6].includes(7); // false
[1, 2, 3, 4, 5, 6].indexOf(3); // 判斷數(shù)組是否包含一個指定的值 2
[1, 2, 3, 4, 5, 6].indexOf(7); // -1
[1, 2, 3, 4, 5, 6].lastIndexOf(3); // 從后往前找 2
[1, 2, 3, 4, 5, 6].lastIndexOf(7); // -1

Array 遍歷

// 遍歷所有的元素
[1, 2, 3, 4, 5, 6].forEach(item => console.log(item)); //1,2,3,4,5,6

// 填充數(shù)組
[1, 2, 3, 4, 5, 6].fill(0, 1); //[1, 0, 0, 0, 0, 0]
[1, 2, 3, 4, 5, 6].fill(); //[0, 0, 0, 0, 0, 0]

// 過濾數(shù)組
[1, 2, 3, 4, 5, 6].filter(item => {
  return item > 3;
}); // [4,5,6]

// 排序 原地歸并算法 穩(wěn)定 nlog(n)
[1, 3, 4, 2].sort(); // 默認從小到大 [1, 2, 3, 4]

Array 測試

/**
 * 測試
 */
[1, 30, 39, 29, 10, 13].every(currentValue => {
  return currentValue < 40;
}); // arr.every() 測試數(shù)組的所有元素是否是通過了指定函數(shù) true
[1, 30, 39, 29, 10, 13].some(curr => curr < 2); // 測試是否至少有一個元素通過測試 true

Array 轉換 && 返回新的對象

/**
 * 轉換 && 返回新的對象
 */
[1, 2, 3, 4, 5, 6].join("-"); // 數(shù)組轉為字符串 "1-2-3-4-5-6"
[1, 2, 3].toString(); // 轉換為字符串，相當于join(","); "1,2,3"
[1, 2, 3].map(item => item * 2); // 映射器 [2, 4, 6]
[1, 2, 3].reduce((acc, curr) => {
  return acc + curr;
}); // 累加器 從左到右 6
[1, 2, 3].reverse(); // 翻轉數(shù)組 [3, 2, 1]
[1, 2, 3].slice(1, 2); // 從原數(shù)組中選取值，返回新數(shù)組 slice(begin, end) [2]
const keys = ["a", "b", "c"].keys(); // 返回每個索引鍵的 Array Iterator?{} 對象
for (let key of keys) {
  console.log(key); // expected output: 0 1 2
} // 0 1 2
const values = ["a", "b", "c"].values(); // 返回每個索引鍵的 Array Iterator?{} 對象
for (const value of values) {
  console.log(value); // expected output: "a" "b" "c"
}

Array 實驗中的功能 && 其他

/**
 * 實驗中的功能 IE和Edge不支持
 *  */
// flat(depth) 展開嵌套數(shù)組
[1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, 3, 4, [5, 6]]
[1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6]
[1, 2, [3, 4, [5, 6]]].flat(Infinity); // [1, 2, 3, 4, 5, 6]

// 其他
const arr2 = Array.of(1, 2, 3); // [1,2,3]

const iter = ["a", "b", "c"].entries(); // 返回一個Array Iterator
iter.next().value; // [0, "a"]

GPU云服務器云服務器數(shù)據(jù)整理及存儲方案 array方法前端技能樹屬性定義方法

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

轉載請注明本文地址：http://systransis.cn/yun/102826.html

【前端芝士樹】Javascript的原型與原型鏈

摘要：在創(chuàng)建對象不論是普通對象還是函數(shù)對象的時候，都有一個叫做的內(nèi)置屬性，用于指向創(chuàng)建它的構造函數(shù)的原型對象，也就是。因為一個普通對象的構造函數(shù)所以原型鏈原型鏈的形成是真正是靠而非。參考文章最詳盡的原型與原型鏈終極詳解，沒有可能是。【前端芝士樹】Javascript的原型、原型鏈以及繼承機制前端的面試中經(jīng)常會遇到這個問題，自己也是一直似懂非懂，趁這個機會整理一下 0. 為什么會出現(xiàn)原型和...

yy736044583 2019-08-23 12:17 評論0 收藏0
【芝士整理】HTML的標簽們

摘要：讀一遍文檔后的個人總結，重點在于整理語義化標簽的定義規(guī)范，記錄各種部件容易被忽略的特性。結構化，通過標簽先后順序和嵌套語法給樹提供基礎。標簽列表基于個人理解即非官方描述，給標簽劃分為結構化標簽語義化標簽功能化標簽，文檔標簽。讀一遍MDN文檔后的個人總結，重點在于整理語義化標簽的定義規(guī)范，記錄各種部件容易被忽略的特性。關于HTML HTML的作用可以簡單總結為結構化、語義化和提供基礎...

stonezhu 2019-08-02 16:06 評論0 收藏0
【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用、克隆對象、復制數(shù)組

摘要：前端芝士樹淺拷貝深拷貝以及的作用首先還是得回到的基本數(shù)據(jù)類型。值類型深拷貝數(shù)值布爾值字符串。它接受任意數(shù)量的源對象，主要作用就是枚舉它們的所有屬性并分配給。【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用首先還是得回到Javascript的基本數(shù)據(jù)類型。值類型[深拷貝]：數(shù)值Num、布爾值Boolean、字符串String、null、undefined。基本...

ccj659 2019-08-23 16:14 評論0 收藏0
【前端芝士樹】如何完成數(shù)組的去重 Array Unique？

摘要：前端芝士樹如何完成數(shù)組的去重輸入推薦方法其他方法利用實現(xiàn)數(shù)據(jù)的去重【前端芝士樹】如何完成數(shù)組的去重 Array Unique？輸入 const users = [{ id: 1, name: a }, { id: 2, name: a }, { id: 3, name: b }, { id: 4, name: v }]; 推薦方法 Array.prototype.u...

doodlewind 2019-08-23 13:01 評論0 收藏0
【前端芝士樹】如何完成數(shù)組的扁平化 Array flattern？

摘要：前端芝士樹如何完成數(shù)組的扁平化問題描述輸入一個嵌套型數(shù)組輸出扁平化后的數(shù)組如果只是兩層的數(shù)據(jù)如果是多層嵌套的數(shù)組【前端芝士樹】如何完成數(shù)組的扁平化 Array flattern？問題描述輸入：一個嵌套型數(shù)組輸出：扁平化后的數(shù)組 let array = [1, [2, 3, 4]]; let arrayDeeper = [1, [2, [3, 4]]]; 如果只是兩層的數(shù)據(jù) fun...

2shou 2019-08-23 12:57 評論0 收藏0