有關數組的一些方法

1. Array.isArray(ary) //判斷變量是不是一個數組,傳回布爾值
2. toString() // 把數組轉換為字元串，并傳回結果，結果使用逗号分隔

var ary = ['a', 'b', 'c'];
var ary1 = [1, 2, 3];
console.log(ary.toString());
console.log(ary1.toString());
           

控制台的輸出結果如下：

3. valueOf() // 傳回數組對象本身

var ary = ['a', 'b', 'c'];
console.log(ary.valueOf());
           

1. ary.pop() [常用] //删除并傳回數組的最後一個元素

var ary = ['a', 'b', 'c'];
console.log(ary.pop());
console.log(ary);
           

控制台的輸出結果如下：

5. ary.shift() //删除并傳回數組的第一個元素

var ary = ['a', 'b', 'c'];
console.log(ary.shift());
console.log(ary);
           

控制台的輸出結果如下：

6. ary.push(要添加的元素1，要添加的元素2，…，要添加的元素n )[常用] // 向數組的末尾添加一個或多個元素，并傳回新的長度。

var ary = ['a', 'b', 'c'];
console.log(ary.push('d', 'e'));
console.log(ary);
           

控制台的輸出結果如下：

7. ary.unshift(要添加的元素1，要添加的元素2，…，要添加的元素n) //向數組的開頭添加一個或更多元素，并傳回新的長度。

var ary = ['a', 'b', 'c'];
console.log(ary.unshift('d', 'e'));
console.log(ary);
           

控制台的輸出結果如下：

8. reverse() // 翻轉數組

var ary = ['a', 'b', 'c'];
console.log(ary.reverse());
           

控制台的輸出結果如下：

[注]: 該方法會改變原來的數組，而不會建立新的數組

9. concat() //連接配接兩個或更多的數組，傳回一個新數組，不改變原數組。

var ary = ['a', 'b', 'c'];
var ary1 = ['d', 'e', 'f'];
// 添加元素
console.log(ary.concat('d', 'e'));
// 連接配接數組
console.log(ary.concat(ary1));
console.log(ary);
           

控制台的輸出結果如下：

10. slice(startindex, endindex) //從目前數組中截取一個新的數組 ，傳回標明的元素

✔第一個參數表示開始索引位置，如果是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。

✔第二個參數代表結束索引位置，如果沒有指定該參數，那麼切分的數組包含從 start 到數組結束的所有元素。

var ary = ["a", "b", "c", 'd', 'e'];
console.log(ary.slice(1));
console.log(ary.slice(1,3));
console.log(ary);
           

控制台的輸出結果如下：

[注]：截取的元素不包含結束索引位置的元素。

11. splice(startindex, deletCont, options) //從數組中添加或删除元素，然後傳回被删除的元素的集合

✔ 第一個參數代表添加/删除元素的位置，使用負數可從數組結尾處規定位置。

✔ 第二個參數代表要删除的元素數量。如果設定為 0，則不會删除元素。

✔ 第三個參數代表向數組插入的新元素

var ary = ["a", "b", "c", "d", "e"];
// 從索引為1的位置開始添加元素f,g,h
console.log(ary.splice(1, 0, "f",'g','h'));
console.log(ary);
// 從索引為6的位置開始添加元素g
console.log(ary.splice(6, 0, "g"));
console.log(ary);
// 删除從索引為2的位置開始的3個元素
console.log(ary.splice(2, 3));![在這裡插入圖檔描述](https://img-blog.csdnimg.cn/20200627222859834.png)
console.log(ary);
// 删除從索引為3的位置開始的所有元素
console.log(ary.splice(3));
console.log(ary);
           

控制台的輸出結果如下：

12. indexOf(content[,index])，lastIndexOf() //沒找到傳回-1

找數組中的某個值

✔ indexOf()：如果找到傳回元素的第一個索引位置,如果沒有找到傳回-1

✔ lastIndexOf()：如果找到傳回元素的最後一個索引位置,如果沒有找到傳回-1

var ary = ["a", "b", "b","c", "d", "b","e"];
 // 添加元素f
 console.log(ary.indexOf('b'));
 console.log(ary.indexOf('bc'));
 console.log(ary.lastIndexOf('b'));
           

控制台的輸出結果如下：

13. join() // 将數組中的每一個元素通過一個字元連接配接到一起

var ary = ['張三', '李四', '王五'];
console.log( ary.join('|') );
console.log( ary.join('-') );
           

控制台的輸出結果如下：

ES5新增方法

forEach(function(value, index, array){})：周遊數組

回調函數的參數

value：數組元素 ，必寫

index：數組元素的索引，可選

array：目前的數組，可選

[注]：沒有傳回值

// forEach 疊代(周遊) 數組
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function(value, index, array) {
	console.log('每個數組元素' + value);
	console.log('每個數組元素的索引号' + index);
	console.log('數組本身' + array);
	sum += value;
})
console.log(sum);
           

控制台的輸出結果如下：

filter(function(value, index,array){})：過濾數組

回調函數的參數

value：數組元素

index：數組元素的索引

array：目前的數組

傳回值是一個新數組

// filter 篩選數組
 var arr = [12, 66, 4, 88, 3, 7];
 var newArr = arr.filter(function(value, index) {
 	return value >= 20;
});
console.log(newArr);
           

以數組形式輸出大于20的元素：

some(function(value, index,array),thisValue)：查找數組中是否有滿足條件的元素

回調函數的參數

value：數組元素

index：數組元素的索引

array：目前的數組

傳回值

如果找到滿足條件的元素，則傳回true，否則傳回false

var arr = [10, 30, 4];
var flag = arr.some(function(value) {
	return value >= 20;
});
console.log(flag);
           

數組是否有大于20的值：

[總結]：1. filter 用于查找滿足條件的元素，傳回的是一個數組，會把所有滿足條件的元素傳回回來。

2. some 用于查找滿足條件的元素是否存在 ，傳回的是一個布爾值，如果查找到第一個滿足條件的元素就終止循環。

map(function(currentValue,index,arr), thisValue)

回調函數的參數

currentValue：數組元素

index：數組元素的索引

arr：目前的數組

傳回值

傳回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。

var ary = [4, 9, 16, 25];
 var newAry = ary.map(function(value, index){
 	return Math.sqrt(value);
 });
 console.log(newAry);
           

對數組中的每個元素開平方後輸出：

[總結]：forEach和map的比較：

1. forEach：周遊數組，沒有傳回值
2. map：周遊數組，會傳回一個新數組

數組的擴充方法（ES6）

擴充運算符（展開文法）

1. 擴充運算符可以将數組或者對象轉為用逗号分隔的參數序列

var ary = ["a", "b", "c"];
 var ary1 = [1 ,2 ,3];
 console.log(...ary); //相當于下面一行代碼
 console.log("a", "b", "c")
 console.log(...ary1);
           

控制台的輸出結果如下：

[注]：從控制台輸出的結果來看，…ary相當于把數組中的元素取出來

2. 擴充運算符可以應用于合并數組

// 方法一 
 var ary1 = [1, 2, 3]; 
 var ary2 = [3, 4, 5]; 
 var ary3 = [...ary1, ...ary2]; 
 console.log(ary3);
 // 方法二 
 ary1.push(...ary2);
 console.log(ary1);
           

合并ary1,ary2：

3. 将僞數組或可周遊對象轉換為真正的數組

var oDivs = document.getElementsByTagName('div'); 
oDivs = [...oDivs];
console.log(oDivs);
           

将僞數組轉換為真正的數組，可使用數組的方法：

構造函數方法：Array.from()

1. 将僞數組或可周遊對象轉換為真正的數組

var arrayLike = { 
	"0": "a", 
	"1": "b", 
	"2": "c", 
	length: 3 
}; //轉成數組
var arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
console.log(arr2);
           

将對象轉成數組：

2. 方法還可以接受第二個參數，作用類似于數組的map方法，用來對每個元素進行處理， 将處理後的值放入傳回的數組

var arrayLike = { 
	"0": 1, 
	"1": 2, 
	length: 2 
};
var newAry = Array.from(arrayLike, function(item){
	return item * 2;
});
console.log(newAry);
           

傳第二個參數（函數），讓數組的每個元素*2：

[注]：如果是對象，那麼屬性需要寫對應的索引，且要通過屬性length指定數組的長度。

執行個體方法：find(function(currentValue, index,arr))

回調函數的參數

currentValue：目前周遊的元素，必寫

index:目前元素的索引，可選

arr:目前元素所在的數組對象，可選

傳回值

傳回符合條件第一個數組成員，如果沒有找到則傳回undefined

var ary = [
        {
          id: 1,
          name: "張三",
        },
        {
          id: 2,
          name: "李四",
        },
        {
          id: 3,
          name: "李四",
        },
      ];
      var target = ary.find(function(item, index){
        return item.name == '李四';
      }); 
      console.log(target);
           

查找name為李四的數組元素:

執行個體方法：findIndex(function(currentValue, index, arr), thisValue)

參數

1. function()：

   currentValue：目前元素，必寫

   index：目前元素的索引，可選

   arr：目前元素所在的數組對象，可選

2. thisValue：可選。 傳遞給函數的值一般用 “this” 值。

   如果這個參數為空， “undefined” 會傳遞給 “this” 值

傳回值

傳回第一個符合條件的數組成員的位置，如果沒有找到傳回-1

var ary = [1, 5, 10, 15];
var index= ary.findIndex(function(value, index){
	return value > 9;
}); 
console.log(index); 
           

輸出數組中大于9的值所在的位置（索引）：

執行個體方法：includes(searchElement，fromIndex)：判斷某個數組是否包含給定的值

參數

searchElement：必須。需要查找的元素值。

fromIndex：可選。從該索引處開始查找 searchElement。如果為負值，則按升序從 array.length + fromIndex 的索引開始搜尋。預設為 0。

傳回值

布爾值，找到傳回true，否則傳回false

var item1 = [1, 2, 3].includes(2);
 var item2 = [1, 2, 3].includes(4);
 // 從索引為2的位置開始往右查找1
 var item3 = [1, 2, 3, 4].includes(1, 2);
 // 從索引為2(4-2)的位置開始往右查找3
 var item4 = [1, 2, 3, 4].includes(3, -2);
 // 從索引為2(4-2)的位置開始往右查找2
 var item5 = [1, 2, 3, 4].includes(2, -2); 
 console.log(item1);
 console.log(item2);
 console.log(item3);
 console.log(item4);
 console.log(item5);
           

控制台輸出結果：

[參考文檔]：

[1] w3school：https://www.w3school.com.cn/

[2] 菜鳥教程：https://www.runoob.com/