三）数组相关
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
总结：
改变元数组的方法： push() pop() shift() unshift() splice() split() sort() reverse()
不改变原数组的方法：concat() slice() join() 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]
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]]