数组相关

时间 2019-11-24

标签数组相关繁體版

原文原文链接

三）数组相关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]]