招式百出的陣列（js）
阿新 • • 發佈：2020-09-13
陣列的作用是：使用單獨的變數名來儲存一系列的值。陣列是可以儲存任意資料型別的資料。
1、建立
// 1、字面量 推薦 var arr = []; // 建立一個空陣列 var arr = [1, 2, 3]; var arr = [1, 'ab', true, null, undefined, {}, [], function () { }, new Date()]; // 陣列可以儲存任意資料型別 console.log(arr); // 2、建構函式 var arr = new Array(); var arr = new Array(1, 2, 3); var arr = new Array(3); //[undefined, undefined, undefined] 這個3即陣列的長度 var arr = new Array('3'); // [ "3" ] console.log(arr);
2、讀、寫、遍歷
var arr = ['曹操', '劉備', '孫權']; // 讀：陣列[下標] console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[5]); // undefined 讀取一個不存在的下標，返回undefined // 寫：陣列[下標] = 新值 arr[0] = '小美'; //[ "小美", "劉備", "孫權" ] arr[5] = '老王'; // [ "小美", "劉備", "孫權", undefined, undefined, "老王" ] console.log(arr); // ---------------------- // 遍歷(不要用for-in) for (var i = 0; i < arr.length; i++) { console.log(arr[i]); }
3、陣列的長度
陣列長度，可讀可寫
var arr = ['劉備', '關羽', '張飛']; // 讀 console.log(arr.length); // 3 // 寫 arr.length = 5; // [ "劉備", "關羽", "張飛", undefined, undefined ] arr.length = 1; // [ "劉備" ] console.log(arr);
4、棧方法
1、陣列頭部或尾部新增或刪除
var arr = ['劉備', '關羽', '張飛']; // 陣列.push(引數); // 在陣列的尾部新增，返回陣列新的長度 var n = arr.push('張三', '隔壁老王'); console.log(arr); console.log(n); // 陣列.unshift(引數); // 在陣列的頭部新增，返回陣列新的長度 var n = arr.unshift('小美'); console.log(arr); console.log(n); // 陣列.pop(); // 刪除陣列最後一項，返回被刪除的項 var n = arr.pop(); console.log(arr); console.log(n); // 陣列.shift(); // 刪除陣列的第一項，返回被刪除的項 var n = arr.shift(); console.log(arr); console.log(n);
2、強大的splice方法，可以實現任意位置的新增、刪除、替換
陣列.splice(起始下標, 要刪除的個數, 要新增的項...); 返回被刪除的項組成的陣列
var arr = ['劉備', '關羽', '張飛']; // 新增 var n = arr.splice(2, 0, '關平', '關興'); console.log(arr); // [ "劉備", "關羽", "關平", "關興", "張飛" ] console.log(n); // [] // 刪除 var n = arr.splice(1, 1); console.log(arr); // [ "劉備", "張飛" ] console.log(n); // [ "關羽" ] // 替換 var n = arr.splice(1, 1, '小鄧', '老王'); console.log(arr); // [ "劉備", "小鄧", "老王", "張飛" ] console.log(n); // [ "關羽" ]
5、陣列拼接
陣列.concat(引數); 引數可以是陣列，也可以是其它項。返回拼接以後的陣列，不修改原陣列
var arr1 = [1, 2, 3]; var arr2 = ['a', 'b', 'c']; // [1, 2, 3, 'a', 'b', 'c'] // var arr = arr1.concat(arr2, '小鄧', '老王'); // console.log(arr1); // console.log(arr2); // console.log(arr); // -------------------- // 推薦用法 var arr = [].concat(arr1, arr2, '小鄧', '老王'); console.log(arr);
陣列.sort();
預設規則：按字串排序，即便是數字，哪也是按字串排序。會修改原陣列
// 預設規則排序 var arr = [4, 6, 21, 9, 1, 7]; arr.sort(); console.log(arr); // [ 1, 21, 4, 6, 7, 9 ] // -------------------------- // 比較函式接收兩個引數，如果第一個引數應該位於第二個之前則返回一個負數，如果兩個引數相等則返回 0，如果第一個引數應該位於第二個之後則返回一個正數。 // 從小到大 var arr = [4, 6, 21, 9, 1, 7]; arr.sort(function (a, b) { return a - b; }); console.log(arr); // [ 1, 4, 6, 7, 9, 21 ] // --------------------- // 從大到小 var arr = [4, 6, 21, 9, 1, 7]; arr.sort(function (a, b) { return b - a; }) console.log(arr); // -------------------- // 隨機排序 var arr = [1, 4, 6, 7, 9, 21]; arr.sort(function () { return 0.5 - Math.random(); }); console.log(arr);
根據物件的key值排序
// 按date進行降序排序，如果date一樣，按DIU進行降序排序 var arr = [ { "date": "2018-08-01", "DIU": 1209, "country": "US" }, { "date": "2018-08-02", "DIU": 680, "country": "GB" }, { "date": "2018-08-01", "DIU": 2311, "country": "CN" }, { "date": "2018-08-02", "DIU": 879, "country": "US" }, { "date": "2018-08-03", "DIU": 1525, "country": "CN" }, { "date": "2018-08-02", "DIU": 1525, "country": "CN" } ]; arr.sort(function (a, b) { var t1 = Date.parse(a.date); // 隨機取得陣列項的date轉成時間戳 var t2 = Date.parse(b.date); if (t1 === t2) { return b.DIU - a.DIU; } else { return t2 - t1; } }); console.log(arr); // console.log(Date.parse('2018-08-01')); // 1533081600000(將字串轉成時間戳)
按中文排
var arr = [ { name: '麗昕', num: 78 }, { name: '湯博', num: 38 }, { name: '盧博', num: 58 }, { name: '鄧鍵', num: 97 }, { name: '繼昂', num: 56 }, { name: '軍安', num: 78 }, { name: '屈月', num: 98 }, { name: '秋萍', num: 79 } ]; // 按中文排 arr.sort(function (a, b) { return a.name.localeCompare(b.name, 'zh'); }); console.log(arr); // 按num排 arr.sort(function (a, b) { return a.num - b.num }); console.log(arr);
7、排序演算法
-
選擇排序
// 選擇排序：從第一項起，每一項都和後面所有項依次比較，如果被比較項比當前項小，則兩項交換位置。 // 每一輪，都找到一個最小的數，放到前面。 var arr = [5, 32, 2, 7, 45]; console.log(fn(arr)); // [2, 5, 7, 32, 45] function fn(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] > arr[j]) { var temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } console.log(arr.toString()); // 內部每一輪排序的結果 } return arr; }
-
氣泡排序
// 氣泡排序：從第一項起，比較相鄰的兩個元素，如果前一個比後一個大，則交換位置。第一輪的時候最後一個元素應該是最大的一個。每一輪最後一個元素已經是最大的了，所以最後一個元素下一輪不用比較。
var arr = [5, 32, 2, 7, 45]; console.log(fn(arr)); // [ 2, 5, 7, 32, 45 ] function fn(arr) { for (var i = 1; i < arr.length; i++) { for (var j = 0; j < arr.length - i; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } console.log(arr.toString()); } return arr; }
-
快速排序
// 快速排序：找到陣列的第一項，把它刪除。然後迴圈陣列，如果比第一項小的，放在一個left陣列中，如果比第一項大的，放在一個right的陣列中，然後遞迴呼叫上面的方法。
var arr = [4, 6, 2, 6, 5, 8, 4, 7, 3]; console.log(fn(arr)); // [ 2, 3, 4, 4, 5, 6, 6, 7, 8 ] function fn(arr) { if (arr.length <= 1) { return arr; } var num = arr.shift(); // 刪除陣列第一項 var left = []; // 儲存小於num的項 var right = []; // 儲存大於等於num的項 for (var i = 0; i < arr.length; i++) { if (arr[i] < num) { left.push(arr[i]); } else { right.push(arr[i]); } } // console.log(left, num, right); return fn(left).concat(num, fn(right)); }
8、join
陣列.join(引數)
將陣列拼接成字串。join()方法只接收一個引數，即用作分隔符的字串，然後返回包含所有陣列項的字串。
9、reverse
// 陣列.reverse(); 翻轉 var arr = ['a', 'b', 'c']; arr.reverse(); console.log(arr); // [ "c", "b", "a" ] // ------------------- var str = '我愛你'; console.log(str.split('').reverse().join(''));
10、indexOf和lastIndexOf
// IE8及以下不支援 // 陣列.indexOf(要查詢的項, [查詢的起始位置]); // 陣列.lastIndexOf(要查詢的項, [查詢的起始位置]); // 返回查詢的項在陣列中的下標 var arr = [4, 3, 4, 2, 45, 43, 6, 3, 5]; console.log(arr.indexOf(3)); // 1 console.log(arr.indexOf(3, 2)); // 7 console.log(arr.indexOf('3')); // -1 console.log(arr.lastIndexOf(3)); // 7 // 陣列去重 var arr = [2, 3, 4, 3, 3, 3]; console.log(fn(arr)); // [2,3,4] function fn(arr) { var newArr = []; // 倉庫 for (var i = 0; i < arr.length; i++) { // 檢查arr[i]在newArr中是否存在，如果不存在，則新增 if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); } } return newArr; }
11、slice
// 陣列.slice(起始下標, 結束下標); var arr = [4, 3, 4, 2, 45, 43, 6, 3, 5]; console.log(arr.slice()); // [ 4, 3, 4, 2, 45, 43, 6, 3, 5 ] console.log(arr.slice(2)); // [ 4, 2, 45, 43, 6, 3, 5 ] console.log(arr.slice(2, 6)); // [ 4, 2, 45, 43 ] console.log(arr.slice(2, -3)); // [ 4, 2, 45, 43 ] console.log(arr.slice(6, 2)); // []
12、Array.isArray
// 因為typeof不能判斷陣列 // Array.isArray(引數) IE8及以下不支援 如果引數是陣列，返回true，否則返回fasle var arr = []; console.log(typeof arr); // object console.log(Array.isArray(arr)); // true console.log(Array.isArray({})); // false
13、迭代方法
IE8及以下不支援
-
forEach
// 陣列.forEach(function (陣列項, 下標, 陣列本身) { }); // 作用：同for迴圈，用於遍歷陣列（沒有返回值） var arr = ['劉備', '關羽', '張飛']; arr.forEach(function (item, index, array) { console.log(item, index, array); });
-
map
// 陣列.map(function (陣列項, 下標, 陣列本身) { }); // 作用：迴圈陣列，返回每次呼叫的結果組成的新陣列 var arr = [3, 6, 4]; var n = arr.map(function (item, index) { // console.log(item, index); return item * 2; }); console.log(n); // [ 6, 12, 8 ]
-
filter
// 陣列.filter(function (陣列項, 下標, 陣列本身) { }); // 作用：返回每次呼叫的結果為true的項組成的陣列 var arr = [4, 45, 24, 4, 2]; var n = arr.filter(function (item, index) { // console.log(item, index); return item > 10 && item < 30; }); console.log(n);
-
every
// 陣列.every(function (陣列項, 下標, 陣列本身) { }); // 作用：每一項呼叫的結果為true，則返回true var arr = [4, 45, 24, 4, 2]; var n = arr.every(function (item, index) { // console.log(item, index); return item > 0; }); console.log(n);
-
some
// 陣列.some(function (陣列項, 下標, 陣列本身) { }); // 作用：只要有一項返回true，結果就是true var arr = [4, 45, 24, 4, 2]; var n = arr.some(function (item, index) { return item > 10; }); console.log(n);