数组相关
三）数组相关
1）数组的方法：
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() 从前面删除元素，只能删除一个 返回值是删除的元素
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, 即分隔所有
let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]
8..sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的
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]]
