數(shù)組的使用總結(jié)— (js基礎(chǔ)復(fù)習(xí)第2期)

zhigoo 發(fā)布于2019-08-23 13:10 / 2643人閱讀

摘要：前一個(gè)值，當(dāng)前值，索引，數(shù)組對(duì)象產(chǎn)生新數(shù)組的迭代器方法類(lèi)似，對(duì)數(shù)組的每個(gè)元素使用某個(gè)函數(shù)，并返回新數(shù)組和相似，傳入一個(gè)返回值為布爾類(lèi)型的函數(shù)。

1. 前言

數(shù)組真的是每天用了，但是有很多方法都是記不住，總是要百度查，很煩，所以才寫(xiě)了個(gè)數(shù)組使用總結(jié)，有什么不對(duì)的希望大家指出來(lái)。

2. 思路

先看看這些問(wèn)題都記得很清楚么？

創(chuàng)建數(shù)組，怎么創(chuàng)建數(shù)組的

數(shù)組的構(gòu)造方法Array有哪些方法？ES5 , ES6

ES6把類(lèi)似數(shù)組對(duì)象轉(zhuǎn)化成數(shù)組方法，ES5怎么把類(lèi)似數(shù)組的對(duì)象轉(zhuǎn)化成數(shù)組，原理

字符串和數(shù)組互相轉(zhuǎn)換

數(shù)組的增刪查改
增：從頭部增，從尾部增，從中間位置增加
刪：從頭部刪，從尾部刪，從中間位置刪
查： indexOf()， indexOf 的不足，ES6 怎么查找指定的元素
改：哪些操作是對(duì)本數(shù)組的修改，哪些是創(chuàng)建新數(shù)組？

數(shù)組排序，配合sort方法

數(shù)組的迭代器方法
不產(chǎn)生新數(shù)組的迭代器方法
產(chǎn)生新數(shù)組的迭代器方法

$.each() 和 forEach 參數(shù)區(qū)別，如何跳出循環(huán)？

3. 整理 3.1 創(chuàng)建數(shù)組

var a = new Array(1,2,3);  //[1,2,3]
var b = new Array(4); //[,,,] 四個(gè)空值,不是undefined
var c = [5,6,7]; //[5,6,7]

3.2 Array 的構(gòu)造函數(shù)有哪些方法？

ES5：isArray, 判斷變量是否是數(shù)組

var a = [1,2,3];
Array.isArray(a); //true

ES6: Array.from ，Array.of

Array.from 將類(lèi)似數(shù)組的對(duì)象（array-like object）和可遍歷（iterable）的對(duì)象, 轉(zhuǎn)為真正的數(shù)組
什么是類(lèi)似數(shù)組的對(duì)象?類(lèi)數(shù)組對(duì)象

總結(jié)：

表象：這種對(duì)象很像數(shù)組，對(duì)對(duì)象的讀寫(xiě)和遍歷操作和數(shù)組類(lèi)似，但卻不是數(shù)組

條件：只包含使用從零開(kāi)始，且自然遞增的整數(shù)做鍵名，并且定義了length表示元素個(gè)數(shù)的對(duì)象，我們就認(rèn)為他是類(lèi)數(shù)組對(duì)象。

常見(jiàn)的類(lèi)數(shù)組對(duì)象：DOM 通過(guò) document.querySelectorAll 獲取的對(duì)象、函數(shù)的參數(shù)arguments

//定義數(shù)組和類(lèi)數(shù)組對(duì)象
var arr = [1,2,3];
var obj = {0: 1, 1: 2, 2: 3, length: 3};
//元素讀寫(xiě)操作
console.log(arr[0], obj[0])//1, 1
console.log(arr["length"], obj["length"])//1, 1
arr[0] = 9;
obj[0] = 9;
 
//遍歷
for(var i = 0, len = arr.length; i < len; i++) {
    arr[i]....
}
for(var i = 0, len = obj.length; i < len; i++) {
    obj[i]....
}

什么是可遍歷對(duì)象？

JavaScript 原有的表示“集合”的數(shù)據(jù)結(jié)構(gòu)，主要是數(shù)組（Array）和對(duì)象（Object），ES6 又添加了Map和Set。
任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數(shù)據(jù)結(jié)構(gòu)的所有成員）

Array.from 使用：

let arrayLike = {
    "0": "a",
    "1": "b",
    "2": "c",
    length: 3
};

// ES5的寫(xiě)法
var arr1 = [].slice.call(arrayLike); // ["a", "b", "c"]

// ES6的寫(xiě)法
let arr2 = Array.from(arrayLike); // ["a", "b", "c"]

let namesSet = new Set(["a", "b"]);
Array.from(namesSet) //將可遍歷對(duì)象轉(zhuǎn)成數(shù)組

Array.of ：方法用于將一組值，轉(zhuǎn)換為數(shù)組

Array.of(3, 11, 8) // [3,11,8]  
Array.of(3) // [3]  
Array.of(3).length // 1

3.3 ES6、ES5怎么把類(lèi)似數(shù)組的對(duì)象轉(zhuǎn)化成數(shù)組，原理

[].slice.call(arrayLike); //為什么能轉(zhuǎn)化為數(shù)組
slice原理

3.4 字符串?dāng)?shù)組互相轉(zhuǎn)化

    var s = "a,b,c,d";
    var arr1 = s.split(",");
    arr1; // ["a", "b", "c", "d"]
    var s2 = arr1.join(" ");
    s2;  //"a b c d"
    var s3 = arr1.toString(); 
    s3;  // "a,b,c,d"

3.5 數(shù)組的增刪查改

從頭部增，從尾部增，從中間位置增加

頭：
var arr = [4,5,6];
arr.unshift(3);  //5 注意，返回的是數(shù)組長(zhǎng)度
arr;  // [3,4,5,6]
arr.unshit(1,2);   // unshit 不僅可以增加一個(gè)，還可以增加多個(gè)
arr; //[1,2,3,4,5,6]

尾：
arr.push(7); //7, 返回?cái)?shù)組長(zhǎng)度
arr; // [1,2,3,4,5,6,7] 
arr.push(8,9);  //9， push也可以添加多個(gè)
arr; // [1,2,3,4,5,6,7,8,9]  

中間
splice(起始索引，需要?jiǎng)h除的元素個(gè)數(shù)，想要添加進(jìn)數(shù)組的元素)

var arr2 =  [1,2,3,7,8,9];
arr2.splice(3,0,4,5,6);
arr2; //[1, 2, 3, 4, 5, 6, 7, 8, 9]

從頭部刪，從尾部刪，從中間位置刪

var arr = ["a","b","c","d","e"]
arr.shift();  // "a", 被刪除的元素
arr; //["b", "c","d","e"]
arr.pop(); //"e", 返回被刪除的元素
arr; // ["b","c","d"]
arr.splice(1,1);  // ["c"]  返回，被刪除元素組成的數(shù)組！??！
arr; // ["b","d"]

indexOf()， indexOf 的不足，ES6 怎么查找指定的元素

indexOf : 如果目標(biāo)數(shù)組包含該參數(shù)，就返回第一個(gè)與參數(shù)相同元素的的索引，如果不包含，返回 -1

var arr = ["a", "b", "c"];
arr.indexOf("b"); //1

indexOf 不足：
一是，不夠語(yǔ)義化，它的含義是找到參數(shù)值的第一個(gè)出現(xiàn)位置，所以要去比較是否不等于-1，表達(dá)起來(lái)不夠直觀。

二是，它內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行判斷，這會(huì)導(dǎo)致對(duì)NaN的誤判

   ES6：  
   includes: 返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值
   ```
   [1, 2, 3].includes(2)     // true
   [1, 2, 3].includes(4)     // false
   [1, 2, NaN].includes(NaN) // true
   ```
  
   find: 用于找出第一個(gè)符合條件的數(shù)組成員，參數(shù)是一個(gè)回調(diào)函數(shù)
   和filter 不同，返回所有符合添加的數(shù)組成員
   ```
   [1, 4, -5, -2].find((n) => n < 0)  // -5
   [1, 4, -5, -2].filter((n) => n < 0) //[-5, -2]
   ```
   
   findIndex: 返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回-1。
   ```
   [1, 5, 10, 15].findIndex(function(value, index, arr) {
     return value > 9;
   }) // 2
   ```

哪些操作是對(duì)本數(shù)組的修改，哪些是創(chuàng)建新數(shù)組？

splice: 修改會(huì)影響原數(shù)組
concat: 不會(huì)影響原數(shù)組

    var a = [1,2,3,4];
    var b = [5,6];
    a.concat(b); 
    a; //[1,2,3,4];

3.6 數(shù)組排序，配合sort方法

//順序修改
var arr = [1,11,2,22,3,33];
arr.reverse(); //[33, 3, 22, 2, 11, 1]

//大小排序：
arr.sort(); //[1, 11, 2, 22, 3, 33]  
//sort 方法默認(rèn)按照字典順序?qū)υ剡M(jìn)行排序

arr.sort(function(a, b) {
    return  a - b;
});
arr;  //[1, 2, 3, 11, 22, 33]

3.7 數(shù)組的迭代器方法

不產(chǎn)生新數(shù)組的迭代器方法  
1. forEach
2. every 
3. some
4. reduce

forEach,接受一個(gè)函數(shù)作為參數(shù)，對(duì)數(shù)組的每一個(gè)元素使用該函數(shù)

    var arr = [1, 2, 3];
    arr.forEach(function(value, index){
        console.log(value * value);
    })

every, 接受一個(gè)返回值為布爾類(lèi)型的函數(shù)，對(duì)數(shù)組中每一個(gè)元素使用該函數(shù)，如果所有元素，該函數(shù)均返回true，則函數(shù)返回true

    var arr = [1, 2, 3];
    var arrIsEven = arr.every(function(value){
        return value % 2 == 0;
    });
    arrIsEven;  //false

some, 接受一個(gè)返回值為布爾類(lèi)型的函數(shù)，對(duì)數(shù)組中每一個(gè)元素使用該函數(shù)，只要有一個(gè)元素使得該函數(shù)返回true，則函數(shù)返回true

    var arr = [1, 2, 3];
    var arrIsEven = arr.some(function(value){
        return value % 2 == 0;
    });
    arrIsEven; //true

reduce, 接受一個(gè)函數(shù)，返回一個(gè)值。迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終返回的值。reduce() 方法從數(shù)組的第一項(xiàng)開(kāi)始，逐個(gè)遍歷到最后，而reduceRight() 則從數(shù)組的最后一項(xiàng)開(kāi)始，從前遍歷到第一項(xiàng)。

//前一個(gè)值，當(dāng)前值，索引，數(shù)組對(duì)象
reduce(prev, cur, index, arr)

var  nums = [1, 2, 3, 4, 5];
var sum = nums.reduce(function(prev, cur, index, arr) {
    console.log("prev", prev); //1 3 6 10
    console.log("cur", cur); // 2 3 4 5 
    return prev + cur;
})
sum; //15

產(chǎn)生新數(shù)組的迭代器方法
1. map
2. filter

map: 類(lèi)似forEach，對(duì)數(shù)組的每個(gè)元素使用某個(gè)函數(shù)，并返回新數(shù)組

 var arr = [1, 2, 3];
 var arr2 = arr.map(function(value, index){
    return (value * value);
 })
 arr2; //[1, 4, 9]
 arr;  //[1, 2, 3]

filter: 和every相似，傳入一個(gè)返回值為布爾類(lèi)型的函數(shù)。和every不同的是，對(duì)數(shù)組中的所有元素應(yīng)用改函數(shù)，將返回返回為true的元素，添加新數(shù)組，返回新數(shù)組

 var arr = [1, 2, 3];
 var arr2 = arr.filter(function(value){
    return value % 2 == 0;
 })
 arr2; //[2]
 arr;  //[1, 2, 3]

3.8 $.each() 和 forEach 參數(shù)區(qū)別，如何跳出循環(huán)？

$.each 是 jQuery的方法,forEach 是js 數(shù)組原生方法 ,
value 和 index 順序是反的，很氣！每次都要百度！

$.each 用return false
forEach 無(wú)法在所有元素都傳遞給調(diào)用的函數(shù)之前終止遍歷，沒(méi)有辦法中止 forEach 循環(huán)。如果要中止，可使用 Array.every 或Array.some，或 try catch

  $.each([1,2,3,4], function(index, value ){
      if( value == 3) {
          return false;  
      }
      console.log( value ); //1 2 3
  })
 
  
    var flag = true;
    [1,2,3,4].forEach(function(value, index) {
        if( value != 3 && flag) {
            console.log(value);
        }
        else {
            flag = false;
        }
    })
    
    try {
        [1,2,3].forEach(function(i) {
            if(i === 2) throw new Error();
            console.log(i);
        });
    } catch(e) {
    }
    
    
    [1,2,3].some(function(i) {
        if(i == 2) return true;
        console.log(i);
    });

4. 參考

類(lèi)數(shù)組對(duì)象
slice原理
forEach如何跳出循環(huán)

GPU云服務(wù)器云服務(wù)器開(kāi)源早讀課周刊（第6期）：蘋(píng)果的開(kāi)源差強(qiáng) asp數(shù)組使用2 js數(shù)據(jù)結(jié)構(gòu)與算法第2 js數(shù)據(jù)結(jié)構(gòu)與算法+第2

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99258.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zhigoo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

炫“庫(kù)”行動(dòng)-人大金倉(cāng)有獎(jiǎng)?wù)魑?-改造TPCE測(cè)試工具dbt5，提升測(cè)試結(jié)果tpSE

閱讀 1184·2021-10-12 10:11
《慕課React入門(mén)》總結(jié)

閱讀 967·2019-08-30 15:53
css的居中效果、li鼠標(biāo)懸浮背景顏色從上往下變化、選擇器的分類(lèi)與使用

閱讀 2405·2019-08-30 14:15
如何愉悅地寫(xiě) React 樣式

閱讀 3049·2019-08-30 14:09
如何判斷元素是否在可視區(qū)域ViewPort

閱讀 1274·2019-08-29 17:24
Rust-weekly-2019-05-09

閱讀 1038·2019-08-26 18:27
Golang Gin實(shí)踐連載十三優(yōu)化你的應(yīng)用結(jié)構(gòu)和實(shí)現(xiàn)Redis緩存

閱讀 1353·2019-08-26 11:57
前端設(shè)計(jì)——數(shù)據(jù)轉(zhuǎn)換層

閱讀 2255·2019-08-23 18:23

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

數(shù)組的使用總結(jié)— (js基礎(chǔ)復(fù)習(xí)第2期)

相關(guān)文章

**判斷是否是數(shù)組的幾種方法— (js基礎(chǔ)復(fù)習(xí)第1期)**

**【重溫基礎(chǔ)】21.高階函數(shù)**

即將立秋的《課多周刊》(第2期)

即將立秋的《課多周刊》(第2期)

發(fā)表評(píng)論

0條評(píng)論

zhigoo

男|高級(jí)講師

TA的文章

炫“庫(kù)”行動(dòng)-人大金倉(cāng)有獎(jiǎng)?wù)魑?-改造TPCE測(cè)試工具dbt5，提升測(cè)試結(jié)果tpSE

《慕課React入門(mén)》總結(jié)

css的居中效果、li鼠標(biāo)懸浮背景顏色從上往下變化、選擇器的分類(lèi)與使用

如何愉悅地寫(xiě) React 樣式

如何判斷元素是否在可視區(qū)域ViewPort

Rust-weekly-2019-05-09

Golang Gin實(shí)踐連載十三優(yōu)化你的應(yīng)用結(jié)構(gòu)和實(shí)現(xiàn)Redis緩存

前端設(shè)計(jì)——數(shù)據(jù)轉(zhuǎn)換層

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

數(shù)組的使用總結(jié)— (js基礎(chǔ)復(fù)習(xí)第2期)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！