Kafka常見問題及解決方法
在JS中,陣列方法是非常重要且常用的方法.在此整理總結一番.
JavaScript 陣列的力量隱藏在陣列方法中。
1. javaScript常用陣列方法
順序 | 方法名 | 功能 | 返回值 | 是否改變原陣列 | 版本 |
---|---|---|---|---|---|
1 | push() | (在結尾)向陣列新增一或多個元素 | 返回新陣列長度 | Y | ES5- |
2 | unshift() | (在開頭)向陣列新增一或多個元素 | 返回新陣列長度 | Y | ES5- |
3 | pop() | 刪除陣列的最後一位 | 返回被刪除的資料 | Y | ES5- |
4 | shift() | 刪除首個數組元素,並把所有其他元素“位移”到更低的索引 | 返回被刪除的資料 | Y | ES5- |
5 | reverse() | 反轉陣列中的元素 | 返回反轉後陣列 | Y | ES5- |
6 | sort() | 以字母順序(字串Unicode碼點)對陣列進行排序 | 返回新陣列 | Y | ES5- |
7 | splice() | 在指定位置刪除指定個數元素再增加任意個數元素 (實現陣列任意位置的增刪改) | 返回刪除的資料 | Y | ES5- |
8 | concat() | 通過合併(連線)現有陣列來建立一個新陣列 | 返回合併之後的陣列 | N | ES5- |
9 | join() | 用特定的字元,將陣列拼接形成字串 (預設",") | 返回拼接後的新陣列 | N | ES5- |
10 | slice() | 裁切指定位置的陣列 | 被裁切的元素形成的新陣列 | N | ES5- |
11 | toString() | 將陣列轉換為字串 | 新陣列 | N | ES5- |
12 | valueOf() | 查詢陣列原始值 | 陣列的原始值 | N | ES5- |
13 | indexOf() | 查詢某個元素在陣列中第一次出現的位置 | 存在該元素,返回下標,不存在 返回 -1 | N | ES5- |
14 | lastIdexOf() | 方向查詢陣列某個元素在陣列中第一次出現的位置 | 存在該元素,返回下標,不存在 返回 -1 | N | ES5- |
15 | forEach() | (迭代) 遍歷陣列,每次迴圈中執行傳入的回撥函式 | 無/(undefined) | N | ES5- |
16 | map() | (迭代) 遍歷陣列, 每次迴圈時執行傳入的回撥函式,根據回撥函式的返回值,生成一個新的陣列 | 有/自定義 | N | ES5- |
17 | filter() | (迭代) 遍歷陣列, 每次迴圈時執行傳入的回撥函式,回撥函式返回一個條件,把滿足條件的元素篩選出來放到新陣列中 | 滿足條件的元素組成的新陣列 | N | ES5- |
18 | every() | (迭代) 判斷陣列中所有的元素是否滿足某個條件 | 全都滿足返回true 只要有一個不滿足 返回false | N | ES5- |
19 | some() | (迭代) 判斷陣列中是否存在,滿足某個條件的元素 | 只要有一個元素滿足條件就返回true,都不滿足返回false | N | ES5- |
20 | reduce() | (歸併)遍歷陣列, 每次迴圈時執行傳入的回撥函式,回撥函式會返回一個值,將該值作為初始值prev,傳入到下一次函式中 | 最終操作的結果 | N | ES5- |
21 | reduceRight() | (歸併)用法同reduce,只不過是從右向左 | 同reduce | N | ES5- |
22 | includes() | 判斷一個數組是否包含一個指定的值. | 是返回 true,否則false | N | ES6 |
2.方法詳解
1.push();
功能: 在陣列最後一位新增一個或多個元素,並返回新陣列的長度,改變原陣列.(新增多個元素用逗號隔開)
var arr = [1, 2, "c"];
var rel = arr.push("A", "B");
console.log(arr); // [1, 2, "c", "A", "B"]
console.log(rel); // 5 (陣列長度)
2.unshift();
功能: 在陣列第一位新增一個或多個元素,並返回新陣列的長度,改變原陣列。(新增多個元素用逗號隔開)
var arr = [1, 2, "c"];
var rel = arr.unshift("A", "B");
console.log(arr); // [ "A", "B",1, 2, "c"]
console.log(rel); // 5 (陣列長度)
3.pop();
功能:刪除陣列的最後一位,並且返回刪除的資料,會改變原來的陣列。(該方法不接受引數,且每次只能刪除最後一個)
var arr = [1, 2, "c"];
var rel = arr.pop();
console.log(arr); // [1, 2]
console.log(rel); // c
4.shift();
功能:刪除陣列的第一位資料,並且返回新陣列的長度,會改變原來的陣列。(該方法同pop();一樣不接受引數,且每次只能刪除陣列第一個,但是該方法和pop();返回值不同)
var arr = [1, 2, "c"];
var rel = arr.shift();
console.log(arr); // [2, "c"]
console.log(rel); // 1
5.reverse();
功能:將陣列的資料進行反轉,並且返回反轉後的陣列,會改變原陣列
var arr = [1, 2, 3, "a", "b", "c"];
var rel = arr.reverse();
console.log(arr); // ["c", "b", "a", 3, 2, 1]
console.log(rel); // ["c", "b", "a", 3, 2, 1]
6.sort();
sort() 方法是最強大的陣列方法之一。
sort(); 方法用於對陣列的元素進行排序,並返回陣列。預設排序順序是根據字串Unicode碼點。
例1:
var arr1 = [10, 1, 5, 2, 3];
arr1.sort();
console.log(arr1);
列印結果:
結果並不是我們想要的排序結果,因為它是根據unicode編碼來排序的,這也顯示了其不穩定性。
語法: arr.sort(function(a,b))
引數: function可選。用來指定按某種順序進行排列的函式。如果省略,元素按照轉換為的字串的諸個字元的Unicode位點進行排序。
具體用法:
- 如果 function(a, b) {return: a - b;} ,=> a - b > 0 那麼 a 會被排列到 b 之前; (從小到大排序)
- 如果 function(a, b) {return: b - a;} ,=> b - a > 0 那麼b會被排列到 a 之前; (從大到小排序)
那麼我們就可以運用以上所說的function(a,b)去完成對數字的排序:
var arr = [10, 1, 5, 2, 3];
arr.sort(function (a, b) {
return a - b;
});
console.log(arr);
列印結果:
元素為物件時(可按其中某個屬性來排序):
var arr1 = [
{ name: "老八", age: "38" },
{ name: "趙日天", age: "28" },
{ name: "龍傲天", age: "48" },
];
arr1.sort(function (a, b) {
console.log(a, b);
return b.age - a.age;
});
console.log(arr1);
列印結果:(按 age 排序(大到小))
7.splice();
功能:向陣列中新增,或從陣列刪除,或替換陣列中的元素,然後返回被刪除/替換的元素。可以實現陣列的增刪改;
語法: arrayObject.splice(index,howmany,item1,.....,itemX)
引數:
引數 | 描述 |
---|---|
index | 必需。整數,規定新增/刪除專案的位置(元素下標),使用負數可從陣列結尾處規定位置。 |
howmany | 必需。要刪除的專案數量。如果設定為 0,則不會刪除專案。 |
item1, ..., itemX | 可選。向陣列新增的新專案。 |
例,刪除arr()中第三個元素並新增 ”add1“ "add2"元素
var arr = ["a", "b", "c", 2, 3, 6];
var rel = arr.splice(2, 1, "add1", "add2");
console.log(arr); //原陣列
console.log(rel); //新陣列
列印結果:
8.concat();
功能: 陣列的拼接(將多個數組或元素拼接形成一個新的陣列),不改變原陣列
如果拼接的是陣列 則將陣列展開,之後將陣列中的每一個元素放到新陣列中.
如果是其他型別, 直接放到新陣列中
另外,如果不給該方法任何引數,將返回一個和原陣列一樣的陣列(複製陣列)
var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["A", "B", "C"];
var rel = arr1.concat(arr2, arr3);
console.log(arr1); //原陣列
console.log(rel); //新陣列
列印結果:
可以看到原陣列 arr1() 並沒有被改變,該方法不改變原陣列,後續不改變原陣列方法將不再列印原陣列
9.join();
功能:用特定的字元,將陣列拼接形成字串 (預設",")
var list = ["a", "b", "c", "d"]; // "a-b-c-d"
var result = list.join("-"); //"a-b-c-d"
var result = list.join("/"); //"a/b/c/d"
var result = list.join(""); //"abcd"
var result = list.join(); // a,b,c,d
console.log(result);
10.slice();
功能: 裁切指定位置的陣列,返回值為被裁切的元素形成的新陣列 ,不改變原陣列
同concat() 方法 slice() 如果不傳引數,會使用預設值,得到一個與原陣列元素相同的新陣列 (複製陣列)
語法: arr[].slice(startIndex,endIndex)
引數
引數 | 描述 |
---|---|
startIndex | 起始下標 預設值 0 |
endIndex | 終止下標 預設值 length,可以接收負數,(倒著數) |
注意!起始下標和終止下標的區間是 左閉右開 [ a ,b) 能取到起始,取不到終止
var list = ["a", "b", "c", "d"];
var result = list.slice(1, 3);
console.log(result); // ["b", "c"]
11.toString();
功能: 直接將陣列轉換為字串,並且返回轉換後的新陣列,不改變原陣列,與join();方法不新增任何引數 相同.
var list = ["a", "b", "c", "d"];
var rel = list.toString();
console.log(rel); // a,b,c,d (字串型別)
12.valueOf();
功能: 返回陣列的原始值(一般情況下其實就是陣列自身)
var list = [1, 2, 3, 4];
var rel = list.valueOf();
console.log(list); // [1, 2, 3, 4]
console.log(rel); // [1, 2, 3, 4]
13.indexOf();
功能: 查詢某個元素在陣列中第一次出現的位置 存在該元素,返回下標,不存在 返回 -1 (可以通過返回值 變相的判斷是否存在該元素)
var list = [1, 2, 3, 4];
var index = list.indexOf(4); //3
var index = list.indexOf("4"); //-1
console.log(index);
14.lastIndexOf();
功能: 查詢某個元素在陣列中最後一次出現的位置 (或者理解為反向查詢第一次出現的位置) 存在該元素,返回下標,不存在 返回 -1 (可以通過返回值 變相的判斷是否存在該元素)
var list = [1, 2, 3, 4];
var index = list.lastIndexOf(4); //3
var index = list.lastIndexOf("4"); //-1
console.log(index);
15.forEach();
功能: 遍歷陣列,每次迴圈中執行傳入的回撥函式 。(注意: forEach() 對於空陣列是不會執行回撥函式的。) 沒有返回值,或理解為返回值為undefined,不改變原陣列.
語法:
arr[].forEach(function(value,index,array){
//do something
})
引數: item:每次迴圈的當前元素, index:當前項的索引, array:原始陣列;
陣列中有幾項,那麼傳遞進去的匿名回撥函式就需要執行幾次;
例項1.:
var list = [32, 93, 77, 53, 38, 87];
var res = list.forEach(function (item, index, array) {
console.log(item, index, array);
});
console.log(res);
列印結果
例項2: 陣列中元素的和
var list = [32, 93, 77, 53, 38, 87];
var sum = 0;
list.forEach(function (item) {
console.log(item);
sum += item;
});
console.log(sum);
列印結果
16.map();
功能: 遍歷陣列, 每次迴圈時執行傳入的回撥函式,根據回撥函式的返回值,生成一個新的陣列 ,
同forEach() 方法,但是map()方法有返回值,可以return出來;
語法:
arr[].map(function(item,index,array){
//do something
return XXX
})
引數: item:每次迴圈的當前元素, index:當前項的索引, array:原始陣列;
示例:
var list = [32, 93, 77, 53, 38, 87];
var res = list.map(function (item, index, array) {
return item + 5 * 2;
});
console.log("原陣列", list);
console.log("新陣列", res);
列印結果:
17.filter();
功能: 遍歷陣列, 每次迴圈時執行傳入的回撥函式,回撥函式返回一個條件,把滿足條件的元素篩選出來放到新陣列中.
語法:
arr[].filter(function(item,index,array){
//do something
return XXX //條件
})
引數: item:每次迴圈的當前元素, index:當前項的索引, array:原始陣列;
示例:
var list = [32, 93, 77, 53, 38, 87];
var resList = list.filter(function (item, index, array) {
return item >= 60; // true || false
});
console.log(resList);
列印結果:
18.every();
功能: 遍歷陣列, 每次迴圈時執行傳入的回撥函式,回撥函式返回一個條件,全都滿足返回true 只要有一個不滿足 返回false => 判斷陣列中所有的元素是否滿足某個條件
var list = [32, 93, 77, 53, 38, 87];
var result = list.every(function (item, index, array) {
console.log(item, index, array);
return item >= 50;
});
console.log(result);
列印結果:false
19.some();
功能: 遍歷陣列, 每次迴圈時執行傳入的回撥函式,回撥函式返回一個條件,只要有一個元素滿足條件就返回true,都不滿足返回false => 判斷陣列中是否存在,滿足某個條件的元素
示例:
var list = [32, 93, 77, 53, 38, 87];
var result = list.some(function (item, index, array) {
return item >= 50;
});
console.log(result);
列印結果 : true
20.reduce();
功能: 遍歷陣列, 每次迴圈時執行傳入的回撥函式,回撥函式會返回一個值,將該值作為初始值prev,傳入到下一次函式中, 返回最終操作的結果;
語法: arr.reduce(function(prev,item,index,array){})
引數:
prev 初始值 (類似求和是 sum=0) 可以設定初始值( 引數),如果不設定初始值預設是陣列中的第一個元素,遍歷時從第二個元素開始遍歷
item 每次迴圈的當前元素
index 每次迴圈的當前下標
array 原陣列
例項1: 不設定初始值的累加
var arr = [2, 3, 4, 5];
var sum = arr.reduce(function (prev, item, index, array) {
console.log(prev, item, index, array);
return prev + item;
});
console.log(arr, sum);
列印結果
解析:
第一次迴圈: prev = 2 ; item(當前迴圈元素) = 3 ; index(當前迴圈元素下標) = 1;原陣列 =array;
因為沒有給prev設定初始值,所以prev 的值為陣列中第一個元素,遍歷從第二個元素開始
第二次迴圈:prev = 5; item(當前迴圈元素) = 4 ; index(當前迴圈元素下標) = 2;原陣列 =array;
prev = 2+3(上次迴圈的元素) = 5 ;
.......
最終prev = 14 ; arr中有四個元素 共迴圈三次;(因為沒設定初始值跳過第一次迴圈prev預設等於第一個值)
例項2 設定初始值的累加
var arr = [2, 3, 4, 5];
var sum = arr.reduce(function (prev, item, index, array) {
console.log(prev, item, index, array);
return prev + item;
}, 0);
console.log(arr, sum);
列印結果
解析: 可以看到與上一次設定初始值相比,最終的結果相同,但是多迴圈的一次,因為設定了prev的初始值為0,所以迴圈遍歷從第一個元素開始,而不設定初始值,迴圈從第一個元素開始.
21.reduceRight();
功能: 用法同reduce,只不過是從右向左
22.includes();
功能: 用來判斷一個數組是否包含一個指定的值,如果是返回 true,否則false。
例項
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false