數組相關
三）數組相關jquery
1）數組的方法：es6
1.push() 從後面添加元素，返回值爲添加完後的數組的長度數組
let arr = [1,2,3,4,5]
console.log(arr.push(5)) // 6
console.log(arr) // [1,2,3,4,5,5]
2.pop() 從後面刪除元素，只能是一個，返回值是刪除的元素數據結構
let arr = [1,2,3,4,5]
console.log(arr.pop()) // 5
console.log(arr) //[1,2,3,4]
3.shift() 從前面刪除元素，只能刪除一個 返回值是刪除的元素dom
let arr = [1,2,3,4,5]
console.log(arr.shift()) // 1
console.log(arr) // [2,3,4,5]
4.unshift() 從前面添加元素, 返回值是添加完後的數組的長度函數
let arr = [1,2,3,4,5]
console.log(arr.unshift(2)) // 6
console.log(arr) //[2,1,2,3,4,5]
5.splice(i,n,key) 刪除從i(索引值)開始以後的那個元素。返回值是刪除的元素。參數爲空則表示截取一個空數組，元數組不變。i爲整數（0 正數 負數）負數表示從數組的後邊往前數，-1表示最後一個；n爲正數和0表示要剪切的長度，0和負數表示不刪除。key表示剪切位置新添加的數據，長度不限，新加元素之間用逗號隔開，若新加元素爲字符串，則須要用引號標記。測試
let arr = [1,2,3,4,5]
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]
6.concat() 鏈接兩個數組 返回值爲鏈接後的新數組優化
let arr = [1,2,3,4,5]
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]
7.split(i，j) 將字符串轉化爲數組 i-- 分隔符，默認爲全部的空字符，包括空格、換行(\n)、製表符(\t)等。 j-- 分割次數。默認爲 -1, 即分隔全部ui
let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]
8..sort() 將數組進行排序,返回值是排好的數組，默認是按照最左邊的數字進行排序，不是按照數字大小排序的spa
var arr = new Array(6)
arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") //10,5,40,25,1000,1 document.write(arr.sort()) // 1,10,1000,25,40,5
-------按照數字大小排序：-------
let arr1 = arr.sort((a, b) =>a - b) //[1,5,10,25,40,1000]
9.reverse() 將數組反轉,返回值是反轉後的數組
let arr = [1,2,3,4,5]
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]
10.slice(start,end) 切去索引值start到索引值end的數組，不包含end索引的值，返回值是切出來的數組
let arr = [1,2,3,4,5]
console.log(arr.slice(1,3)) // [2,3]
console.log(arr) // [1,2,3,4,5]
11.forEach(callback) 遍歷數組,無return callback的參數： value --當前索引的值 index --索引 array --原數組
let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{ console.log(`value:${value} index:${index} array:${array}`) }) // value:1 index:0 array:1,2,3,4,5 // value:2 index:1 array:1,2,3,4,5 // value:3 index:2 array:1,2,3,4,5 // value:4 index:3 array:1,2,3,4,5 // value:5 index:4 array:1,2,3,4,5 let arr = [1,2,3,4,5] arr.forEach( (value,index,array)=>{ value = value * 2 console.log(`value:${value} index:${index} array:${array}`) }) console.log(arr) // value:2 index:0 array:1,2,3,4,5 // value:4 index:1 array:1,2,3,4,5 // value:6 index:2 array:1,2,3,4,5 // value:8 index:3 array:1,2,3,4,5 // value:10 index:4 array:1,2,3,4,5 // [1, 2, 3, 4, 5]
12.map(callback) 映射數組(遍歷數組),有return 返回一個新數組 callback的參數： item--當前索引的值 index --索引 arr --原數組
llet arr1 = [1,2,3,4,5];
arr1.map((item,index,arr)=>{ item=item*2; console.log(item,'index',index,'arr',arr); }); console.log(arr1); VM421:4 2 "index" 0 "arr" (5) [1, 2, 3, 4, 5] VM421:4 4 "index" 1 "arr" (5) [1, 2, 3, 4, 5] VM421:4 6 "index" 2 "arr" (5) [1, 2, 3, 4, 5] VM421:4 8 "index" 3 "arr" (5) [1, 2, 3, 4, 5] VM421:4 10 "index" 4 "arr" (5) [1, 2, 3, 4, 5] VM421:6 (5) [1, 2, 3, 4, 5]
ps;arr.map 與 arr.forEach 的區別 map---map函數遍歷後會將每次遍歷的item值返回到一個新的數組中 ,（就至關於從新定義了個數組，而後將item一個一個的壓入） forEach ----forEach函數遍歷後不返回一個新數組
var arr = ['Jack','Tom','Json','Jerry','Danny']
var names = arr.map(function(item,index){ return item }) console.log(names) // ["Jack", "Tom", "Json", "Jerry", "Danny"] ---------------------------分割線--------------------------- var names2 = arr.forEach(function(item,index){ return item }) console.log(names2) // undefined
13.filter(callback) 過濾數組，返回一個知足要求的數組
let arr = [1,2,3,4,5]
let arr1 = arr.filter( (i, v) => i < 3) console.log(arr1) // [1, 2]
14..every(callback) 依據判斷條件，數組的元素是否全知足，若知足則返回ture
let arr = [1,2,3,4,5]
let arr1 = arr.every( (i, v) => i < 3) console.log(arr1) // false let arr2 = arr.every( (i, v) => i < 10) console.log(arr2) // true
15.some() 依據判斷條件，數組的元素是否有一個知足，如有一個知足則返回ture
let arr = [1,2,3,4,5]
let arr1 = arr.some( (i, v) => i < 3) console.log(arr1) // true let arr2 = arr.some( (i, v) => i > 10) console.log(arr2) // false
16.join() 方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。默認爲，；
var arr = new Array(3)
arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join()) // George,John,Thomas
ps:join()方法將數組中的全部元素轉換成字符串，而後鏈接起來，這恰好和String的split()方法是一個相反的操做。
17.indexOf() 查找某個元素的索引值，如有重複的，則返回第一個查到的索引值.若不存在，則返回 -1
let arr = [1,2,3,4,5,2]
let arr1 = arr.indexOf(2) console.log(arr1) // 1 let arr2 = arr.indexOf(9) console.log(arr2) // -1
18.arr.lastIndexOf() 和arr.indexOf()的功能同樣，不一樣的是從後往前查找
let arr = [1,2,3,4,5,2]
let arr1 = arr.lastIndexOf(2) console.log(arr1) // 5 let arr2 = arr.lastIndexOf(9) console.log(arr2) // -1
19.from() 將僞數組變成數組，就是隻要有length的就能夠轉成數組。 ---es6
var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj); console.log(objArr) // ["a", "b", "c"] objArr[1] == "b"; // true --------------分割線--------------- var arr = Array.from([1, 2, 3], x => x * 10); console.log(arr) //[10, 20, 30] // arr[0] == 10; // arr[1] == 20; // arr[2] == 30;
20.Array.of() 方法建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型 ---es6
ps:Array.of() 和 Array 構造函數之間的區別在於處理整數參數：Array.of(7) 建立一個具備單個元素 7 的數組，而 Array(7) 建立一個長度爲7的空數組（注意：這是指一個有7個空位(empty)的數組，而不是由7個undefined組成的數組）
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
21.find(callback) 找到第一個符合條件的數組成員
let arr = [1,2,3,4,5,2,4]
let arr1 = arr.find((value, index, array) =>value > 2) console.log(arr1) // 3
22.findIndex(callback) 找到第一個符合條件的數組成員的索引值
let arr = [1,2,3,4,5]
let arr1 = arr.findIndex((value, index, array) => value > 3) console.log(arr1) // 3
23.fill() 使用固定值填充數組：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob"); //Runoob,Runoob,Runoob,Runoob
24.includes()方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法相似。該方法屬於 ES7 ，但 Babel 轉碼器已經支持。
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
25.reduce()
arr.reduce(function(prev,cur,index,arr){ ... }, init);
arr 表示原數組；
prev 表示上一次調用回調時的返回值，或者初始值 init;
cur 表示當前正在處理的數組元素；
index 表示當前正在處理的數組元素的索引，若提供 init 值，則索引爲0，不然索引爲1；
init 表示初始值。
用法實例：
var arr = [3,9,4,3,6,0,9];
1. 求數組項之和
var sum = arr.reduce(function (prev, cur) { return prev + cur; },0); 因爲傳入了初始值0，因此開始時prev的值爲0，cur的值爲數組第一項3，相加以後返回值爲3做爲下一輪迴調的prev值，而後再繼續與下一個數組項相加，以此類推，直至完成全部數組項的和並返回。
2. 求數組的最大值
var max = arr.reduce(function (prev, cur) { return Math.max(prev,cur); }); 因爲未傳入初始值，因此開始時prev的值爲數組第一項3，cur的值爲數組第二項9，取兩值最大值後繼續進入下一輪迴調。
3. 數組去重
var newArr = arr.reduce(function (prev, cur) { prev.indexOf(cur) === -1 && prev.push(cur); return prev; },[]);
ps：reduce() 是數組的歸併方法，與forEach()、map()、filter()等迭代方法同樣都會對數組每一項進行遍歷，可是reduce() 可同時將前面數組項遍歷產生的結果與當前遍歷項進行運算，這一點是其餘迭代方法沒法企及的
25.copyWithin() 指定位置的成員複製到其餘位置---es6
let a = ['測試1', '測試2', '測試3', '測試4', '測試5']; // 1位置開始被替換, 2從該位置開始讀取數據，默認爲 0 。若是爲負值，表示倒數。 5到該位置前中止讀取數據，默認等於數組長度。若是爲負值，表示倒數。 a.copyWithin(1, 2, 5); // ["測試1", "測試3", "測試4", "測試5", "測試5"]
26.fill('填充值',‘填充起始位置’,‘填充結束位置’) 填充數組
['a1', 'a2', 'a3'].fill('b')
// ['b', 'b', 'b']
['a1', 'a2', 'a3'].fill('b1', 1, 2)
["a1", "b1", "a3"]
27.includes(‘必須。須要查找的元素值’，‘。從該索引處開始查找 searchElement。若是爲負值，則按升序從 array.length + fromIndex 的索引開始搜索。默認爲 0’) 查找數組是否包含某元素 返回布爾值
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true
28.ES6 keys()&values()&entries() 遍歷鍵名、遍歷鍵值、遍歷鍵名+鍵值
for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"
總結：
改變元數組的方法： push() pop() shift() unshift() splice() split() sort() reverse() fill(） copyWithin()
不改變原數組的方法：concat() slice() join() indexOf() ES6的擴展運算符... es7的includes（） map ,filter,forEach,some,every等不改變原數組 若數組的每項爲對象 map 和forEach方法則會改變原數組
2）數組相關的函數
1.JS數組中查找特定元素並返回全部該元素的索引
function findIndex(arr,x){
var endArr = [], len = arr.length , i = 0
while(i<len){ i = arr.indexOf(x,i) if(i == -1){ break } endArr.push(i) i++ } return endArr } var arr1 = [1,2,3,1,4,1,4,1] findIndex(arr1,1) //[0, 3, 5, 7]
2.數組的從小到大排序
var arr1 = [1,3,6,14,0,19];
function sortOne(arr){ arr.sort(function(a,b){return a - b}) return arr; }; sortOne(arr1) //[0, 1, 3, 6, 14, 19] ------------------------------------------------------------------ function sortTwo(arr){ var min; for(var i = 0 ; i < arr.length ; i++){ for(var j = i ; j<arr.length ; j++){ if(arr[i]>arr[j]){ min = arr[j] arr[j] = arr[i] arr[i] = min } } } return arr } sortTwo(arr1) //[0, 1, 3, 6, 14, 19]
3.數組去重
var arr = [1, 3, 4, 1, 5, 2, 6, 7, 8, 3]
var arrN = arr .filter((item, index, self) => self.indexOf(item) === index) console.log(arrN ) //[1, 3, 4, 5, 2, 6, 7, 8]
function unique(arr) {
//Set數據結構，它相似於數組，其成員的值都是惟一的
return Array.from(new Set(arr)); // 利用Array.from將Set結構轉換成數組
}
unique([0,0,1,1,2,3,4,4]); // [0, 1, 2, 3, 4]
function onlyOnce(arr){
var newArr = []
for(var i = 0 ; i < arr.length ; i++){
if(newArr.indexOf(arr[i]) == -1) newArr.push(arr[i])
}
return newArr
}
onlyOnce([0,0,1,1,2,3,4,4]) // [0, 1, 2, 3, 4]
3，詳情見reduce()
4.求數組的最大最小值
1 function findMin(arr){
2 var a = arr[0] 3 for(var i = 0 ; i <arr.length ; i++){ 4 if(a>arr[i]){ 5 a= arr[i] 6 } 7 } 8 return a 9 } 10 11 function findMax(arr){ 12 var a = arr[0] 13 for(var i = 0 ; i <arr.length ; i++){ 14 if(a<arr[i]){ 15 a= arr[i] 16 } 17 } 18 return a 19 } 20 var arr1 = [1,2,34,51,4,5,6,8,9,] 21 findMax(arr1) //51 findMin(arr1) //1
5:隨機打亂一個數組
1 var arr2 = [1,2,3,4,5,6,7]
2 function Ran(a,b){
//生成隨機數跟0.5比較 3 return Math.random() >=0.5 ? 1 :-1 4 } 5 arr2.sort(Ran) //往Ran裏兩兩傳入數組元素
6.數組的冒泡排序及優化
var arr1= [5,1,12,6,40,9,8],temp,num = 0;
function bubble(arr) { for(var i = arr.length - 1; i > 0; i--) { for(var j = 0; j < i; j++) { if(arr[j] > arr[j+1]) { temp= arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } num++ } console.log("執行次數"+num) return arr } bubble(arr1); //執行次數6 [1, 5, 6, 8, 9, 12, 40] ---------------------------優化------------------------------------- function bubbleBetter(arr) { var l = arr.length for(var i = l - 1; i >= 1; i--) { var swaped = false //監控內層交換 for(var j = 0; j < i; j++) { if(arr[j] > arr[j + 1]) { var tmp = arr[j] arr[j] = arr[j + 1] arr[j + 1] = tmp swaped = true } num++; } } console.log(num) if(!swaped) { return arr } } bubbleBetter(arr1) // 6 [1, 5, 6, 8, 9, 12, 40]
7.數組的深拷貝和淺拷貝
深拷貝是開闢一塊新的內存地址，將源對象的各個屬性逐個複製過去，對拷貝對象和源對象各自的操做互不影響
一）JSON.parse()和JSON.stringify()
var arr = [1, [2,88,77], 5, 7, 23] var arrC = JSON.parse(JSON.stringify(arr)) arrC[1][2] = 99 console.log(arr);//[1, [2,88,77], 5, 7, 23] console.log(arrC);//[1, [2,88,99], 5, 7, 23] 二）for循環遍歷 *多維數組的深拷貝也能夠用嵌套for循環實現。
var ary7 = [1,2,3,4]; var ary8 = []; for(var i=0;i<ary7.length;i++){ ary8[i] = ary7[i] } ary7.push(100); console.log(ary7); // [1, 2, 3, 4, 100] console.log(ary8); // [1, 2, 3, 4]
三）jquery的$extend方式
var ary11 = [1,2,3]; var ary12=[]; $.extend(true,ary12,ary11); // var ary12 = $.extend(true,[],ary11); // 做用同上面兩個 ary11.push(99); console.log(ary11); console.log(ary12);
四）遞歸方式
function deepCopy(obj) { var out = (obj.constructor === Array) ? [] : {}; for (var i in obj) { if (typeof obj[i] === 'object') { out[i] = (obj[i].constructor === Array) ? [] : {}; out[i] = deepCopy(obj[i]); } else { out[i] = obj[i]; } } return out; } var obj = { name:'celine', age:'22', address:{ country: 'China', province:'Fujian', city:'Amoy' } } var obj2 = deepCopy(obj); obj.name = 'Wang Xiaolin'; obj.address.city = 'Quanzhou'; console.log(obj); console.log(obj2);
淺拷貝會致使引用類型A和引用類型B指向同一塊內存地址。改變其中一方內容，都是在原來的內存上作修改會致使對象和源對象都發生改變
一）直接=
var arr = [13,12,31];
var new_arr = arr; new_arr[0] = 10; console.log(arr); //[10,12,31] console.log(new_arr); ////[10,12,31] 二）//數組的淺拷貝，可用concat、slice返回一個新數組的特性來實現拷貝 **只能實現一維數組的深拷貝 var arr = [13,12,31]; var new_arr = arr.concat(); //var new_arr = arr.slice()也是同樣的效果; new_arr[0] = 10; console.log(arr); //[13,12,31] console.log(new_arr); //[10,12,31] // 可是若是數組嵌套了對象或者數組的話用concat、slice拷貝只要有修改會引發新舊數組都一塊兒改變了，好比： var arr = [{id: 1}, [3]]; var new_arr = arr.concat(); arr[0].id = 2; new_arr[1][0] = 4; console.log(arr); // [{id: 2}, [4]] console.log(new_arr); // [{id: 2}, [4]]
-
每一个你不满意的现在，都有一个你没有努力的曾经。