数组的概念及定义
数组的概念：
一组数据，数据的组和
哪些数据的组和，只要是数据（所有数据），就可以放在数组中
数组的意义：
可以同时操作多个数据
数组的创建方式
var arr1 = [1,2,3]; //字面量方式
var arr2 = new Array(1,2,3) //构造函数方式
注意：当只有一个数据时，两种创建方式的不同。
var arr1 = [5] //表示有一个数组元素5
var arr2 = new Array(5) //表示有5个数组元素，值全部为undefined
数组的操作-索引
索引操作：
增：给并不存在的索引，赋值
arr[5] = 1;
console.log(arr[5]);
console.log(arr)
删
console.log(arr.length)
arr.length = 1;
console.log(arr)
改
console.log(arr[0]);
arr[0] = "hahahah";
console.log(arr)
查：数组的遍历
console.log(arr[0])
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
数组的操作-方法
增
在末尾添加元素 arr.push
arr.push("gg");
console.log(arr)
var c = arr.push("gg") //返回值是所增值的位置
console.log(c)
在开始添加元素 arr.unshift
var a = arr.unshift("mm");
console.log(a)
删
在末尾删除最后一位 arr.pop
arr.pop()
console.log(arr)
删除第一个 arr.shift
arr.shift()
console.log(arr)
替换
从第n个项目开始删除，一共删除m个，再删除的位置加入a..... arr.splice（n,m,a...）
console.log(arr)
arr.splice(1,2,"pop","mmp") 从第二个数开始，删除两个（第二个和第三个）加入两个
var b = arr.splice(1,2,"pop","mmp") //返回被删除/替换的元素。
console.log(b)
console.log(arr)
截取
返回一个新数组，从下标n的位置取到m"前一个" arr.slice(n,m)
arr.slice(2,4);
console.log(arr); // 不改变原数组
var a = arr.slice(2,4); 截取第三到第四个，不包括第五个
console.log(a)
补充：可从已有的数组中返回选定的元素。
该方法接收两个参数slice(start,end)，strat为必选，表示从第几位开始；
end为可选，表示到第几位结束(不包含end位)，省略表示到最后一位；
start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位
var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.slice(1,3)); //["Jack","Lucy"] //返回值是截取的数组
console.log(arr.slice(1)); //["Jack","Lucy","Lily","May"]
console.log(arr.slice(-4,-1)); //["Jack","Lucy","Lily"]
console.log(arr.slice(-2)); //["Lily","May"]
console.log(arr.slice(1,-2)); //["Jack","Lucy"]
console.log(arr); //["Tom","Jack","Lucy","Lily","May"]---原数组未改变
排序
var arr2 = [11,3,25,35,67]
arr2.sort()
console.log(arr2) //按照字符方式排序
arr2.sort(function(a,b){
return a-b
})
var a = arr2.sort(function(a,b){
return a-b
})
console.log(a)
console.log(arr2) //按照数字排序需要函数
toString();
转换成字符串，类似于没有参数的join()。
该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。
var arr = [1,2,3];
console.log(arr.toString()); //1,2,3
console.log(arr); //[1,2,3]---原数组未改变
concat()
用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
var arr1 = [1,2,3]
var arr2 = arr1.concat();
console.log(arr1); //[1,2,3]---原数组
console.log(arr1 === arr2); //false
console.log(arr2); //[1,2,3]---原数组的副本
console.log(arr1.concat("hello","world")); //[1,2,3,"hello","world"]
console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}])); //[1,2,3,"a","b",[3,4],{"name":"admin"}]
// data为数组时，将data合并到原数组；data为具体数据时直接添加到原数组尾部；省略时创建原数组的副本。
console.log(arr1); //[1,2,3]---原数组未改变
join()
根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。
参数：join(str);参数可选，默认为","号，以传入的字符作为分隔符。
var arr = [1,2,3];
console.log(arr.join()); //1,2,3
var a = arr.join();
console.log(a); //1,2,3 返回值是这个字符串
console.log(arr.join("&"))
console.log(arr.join("-")); //1-2-3
console.log(arr); //[1,2,3]---原数组未改变
reverse()
颠倒数组中元素的顺序
var arr = [1,2,3];
console.log(arr.reverse()); //[3,2,1]
console.log(arr); //[3,2,1]---原数组改变
var a = arr.reverse();
console.log(a) //返回值是改变后的数组
valueOf()
返回数组的原始值（一般情况下其实就是"数组自身"），一般由js在后台调用，并不显式的出现在代码中
var arr = [1,2,3];
console.log(arr.valueOf()); //[1,2,3]
console.log(arr); //[1,2,3]
//为了证明返回的是数组自身
console.log(arr.valueOf() == arr); //true
indexOf()
根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1。
该方法是查询方法，"""不会对数组产生改变"""。
indexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，
当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l")); //2
console.log(arr.indexOf("l",3)); //3
console.log(arr.indexOf("l",4)); //-1
console.log(arr.indexOf("l",-1)); //-1
console.log(arr.indexOf("l",-3)); //2
lastIndexOf()
根据指定的数据，从右向左，查询在数组中出现的位置，如果不存在指定的数据，返回-1。
该方法是查询方法，不会对数组产生改变。
lastIndexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，
当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l")); //3
console.log(arr.lastIndexOf("l",3)); //3
console.log(arr.lastIndexOf("l",1)); //-1
console.log(arr.lastIndexOf("l",-3)); //2
console.log(arr.lastIndexOf("l",-4)); //-1
forEach()
ES5新增方法，用来遍历数组，该方法没有返回值。
forEach接收的回调函数会根据数组的每一项执行，该回调函数默认有三个参数，
分别为：遍历到的数组的数据，对应的索引，数组自身。
forEach(callback);callback默认有三个参数，分别为value，index，self。
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.forEach(function(value,index,self){
console.log(value + "--" + index + "--" + (arr === self));
})
// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true
console.log(a); //undefined---forEach没有返回值
//该方法为遍历方法，不会修改原数组
16.map()
同forEach功能；2.map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。
map(callback);callback默认有三个参数，分别为value，index，self。
功能1：同forEach
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
console.log(value + "--" + index + "--" + (arr === self))
})
// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true
//功能2：每次回调函数的返回值被map组成新数组返回
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
return "hi:"+value;
})
console.log(a); //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变
filter()
1.同forEach功能；2.filter的回调函数需要返回布尔值，当为true时，
将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。
filter(callback);callback默认有三个参数，分别为value，index，self。
功能1：同forEach
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
console.log(value + "--" + index + "--" + (arr === self))
})
// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true
//功能2：当回调函数的返回值为true时，本次的数组值返回给filter，被filter组成新数组返回
var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
return value.length > 3;
})
console.log(a); //["Jack", "Lucy", "Lily"]
console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变
every()
判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。
every()接收一个回调函数作为参数，这个回调函数需要有返回值，every(callback);
callback默认有三个参数，分别为value，index，self
当回调函数的返回值为true时，类似于forEach的功能，遍历所有；
如果为false，那么停止执行，后面的数据不再遍历，停在第一个返回false的位置。
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
})
打印结果为：
Tom--0--true
因为回调函数中没有return true，默认返回undefined，等同于返回false
demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return value.length < 4;
})
打印结果为：
Tom--0--true
abc--1--true
Jack--2--true
因为当遍历到Jack时，回调函数到return返回false，此时Jack已经遍历，但是后面数据就不再被遍历了
demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return true;
})
// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true
//因为每个回调函数的返回值都是true，那么会遍历数组所有数据，等同于forEach功能
功能2：当每个回调函数的返回值都为true时，every的返回值为true，只要有一个回调函数的返回值为false，every的返回值都为false
demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
return value.length > 3;
})
console.log(a); //false
//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
return value.length > 2;
})
console.log(a); //true
some()
功能：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
参数：some()接收一个回调函数作为参数，这个回调函数需要有返回值，some(callback);
callback默认有三个参数，分别为value，index，self。
功能1：因为要判断数组中的每一项，只要有一个回调函数返回true，some都会返回true，所以与every正好相反，当遇到一个回调函数的返回值为true时，可以确定结果， 那么停止执行，后面都数据不再遍历，停在第一个返回true的位置；当回调函数的返回值为false时，需要继续向后执行，到最后才能确定结果，所以会遍历所有数据，实现类似于forEach的功能，遍历所有。
demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self))
return value.length > 3;
})
// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true
功能2：与every相反，只要有一个回调函数的返回值都为true，some的返回值为true，所有回调函数的返回值为false，some的返回值才为false
demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
return value.length > 3;
})
console.log(a); //true
//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
return value.length > 4;
})
console.log(a); //false
reduce()
功能：从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。
参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；
第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。
callback返回的任何值都会作为下一次执行的第一个参数。
如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。
demo1:不省略initial参数，回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 打印结果为：
// 2019--10--0--true
// undefined--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined
//demo2:省略initial参数，回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
10--20--1--true
undefined--30--2--true
undefined--40--3--true
undefined--50--4--true
此时回调函数没有return，所以从第二次开始，prev拿到的是undefined
demo3:不省略initial参数，回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
}, 2019)
打印结果为：
2019--10--0--true
hello--20--1--true
hello--30--2--true
hello--40--3--true
hello--50--4--true
此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值
demo4:省略initial参数，回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
return "hello";
})
// 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
// 10--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值
//demo5：使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
return prev + now;
})
console.log(sum); //150
// 回调函数的最后一次return的结果被返回到reduce方法的身上
//demo6：使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
return prev + now;
}, 8)
console.log(sum); //158
// 回调函数的最后一次return的结果被返回到reduce方法的身上
// 因为reduce有第二个参数initial，在第一次执行时被计算，所以最终结果被加上8
reduceRight()
功能：（与reduce类似）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。
参数：同reduce。
demo：同reduce
是否改变原数组
pop,shift; push,unshift; reverse; sort; splice—— yes。
功能方法没有必要关注返回值，但是功能方法可以有返回值
数组的遍历(获取数组中的每个元素)
数组元素的获取：
索引，数组元素的下标，表示数组元素在数组中的顺序，从0开始，到arr.length-1
利用循环，配合索引
整数数组／字符串数组／对象数组／二维数组
整数数组：arr = [1,2,3,4,5,6,7]
数组的元素为整数
字符串数组：arr = ["h","e","l","l","o”]
数组的元素为字符串
json对象数组：arr = [{name:"Lisa"},{name:"Jack"},{name:"Loss"}]
数组的元素为对象
如何获取对象数组内的元素：arr[1].name; //Jack
二维数组：arr = [[1,"a",3],["hello",6,8],["color","width"]]
数组的元素为数组
如何获取而为数组内的元素：arr[2][1]; //width
原文地址：https://www.cnblogs.com/wuziqiang/p/11968404.html
时间： 2024-10-07 02:57:39