一.数组的概念
- 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。
- 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
- 简单来说:数组就是用于储存多个相同类型数据的集合。
二.数组中的方法
1.toString();
将数组转化为字符串
const arr = ["1","2","3","4"]
//toString()将数组变为字符串,不改变原有数组
const string = arr.toString();
console.log(arr);
//["1","2","3","4"]
console.log(string);
//1,2,3,4
2.join();
用特定的字符,将数组拼接形成字符串
var list = ["a","b","c","d"];
var result = list.join("-");
// a-b-c-d
var result = list.join("/");
// a/b/c/d
var result = list.join("");
// abcd
var result = list.join();
//a,b,c,d
3.join();
实现重复字符串
function repeatStr(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatStr("嗨",3)); //嗨嗨嗨
console.log(repeatStr("Hi",3)); //HiHiHi
console.log(repeatStr(1,3)); //111
4. push();
在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组(添加多个元素用逗号隔开)
var arr = [1, 2, "c"];var arr = [1, 2, "3"];
var rel = arr.push("4","5");
console.log(arr);//[1,2,"3","4","5"]
console.log(rel); // 5 (数组长度)
5.pop();
删除数组的最后一位,并且返回删除的数据,会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)
pop()删除最后一个元素,改变原来数组,返回被删除的元素
var arr = [1, 2, "3"];
var rel = arr.pop();
console.log(arr); // [1, 2]
console.log(rel); // 3
6.shift();
删除数组的第一位数据,并且返回新数组的长度,会改变原来的数组(该方法同pop();一样不接受参数,且每次只能删除数组的第一个,但是该方法和pop()返回值不同)
shift()删除第一个元素,改变原来数组,返回被删除的元素
var arr = [1, 2, "3"];
var rel = arr.shift();
console.log(arr);
//[2,"3"]
console.log(rel);
//1
7.unshift();
方法可向数组的开头添加一个或更多元素,并返回新的长度。
// unshift()在首位添加一个元素, 改变原来数组,返回数组的长度
var arr = ["1", "2", "3"];
const arr2 = arr.unshift("zhihu");
console.log(arr);
//["zhihu","1","2","3"]
console.log(arr2);
//4
8.splice();
在数组中添加,或从数组中删除,或替换数组中的元素,然后返回被删除或者被替换的元素,可以实现数组的增改删;
var arr = ["张三","李四","王五","小明","小红"];
//删除王五
var arrReplace1 = arr.splice(2,1);
console.log(arrReplace1); // ["王五"]
console.log(arr); // ["张三", "李四", "小明", "小红"] (原数组改变)
// 删除多个
var arrReplace2 = arr.splice(1,2);
console.log(arrReplace2); // ["李四", "王五"]
console.log(arr); // ["张三", "小明","小红"]
//添加小刚
var arrReplace3 = arr.splice(1,0,"小刚");
console.log(arrReplace3); // [] (没有删除元素,所以返回的是空数组)
console.log(arr); // ["张三", "小刚","李四","王五","小明", "小红"]
//添加多个
var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");
console.log(arrReplace4); // []
console.log(arr); // ["张三", "李四","王五","刘一","陈二","赵六", "小明", "小红"]
9.reverse();
将数组的数据进行反转,并且返回反转后的数组,会改变原数组
var arr = [1, 2, 3, "a", "b", "c"];
var rel = arr.reverse();
console.log(arr);// ["c","b","a","3","2","1",]
console.log(rel); // ["c", "b", "a", 3, 2, 1]
10.sort();
方法用于对数组的元素进行排序,并返回数组,默认排序顺序是根据字符串Unicode码点
//sort()方法是最强大的数组方法之一
var arr1 = [10, 1, 5, 2, 3];
arr1.sort();
console.log(arr1);//(5)[1,10,2,3,5]
结果并不是我们想要的排序结果,因为它是根据unicode编码来排序的,这也显示了其不稳定性。
语法: arr.sort(function(a,b)) 参数: function可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。 具体用法:
-
如果 function(a, b) {return: a - b;} ,=> a - b > 0 那么 a 会被排列到 b 之前; (从小到大排序)
-
如果 function(a, b) {return: b - a;} ,=> b - a > 0 那么b会被排列到 a 之前; (从大到小排序)
那么我们就可以运用以上所说的function(a,b)去完成对数字的排序:
var arr = [10, 1, 5, 2, 3];
arr.sort(function (a, b) {
return a - b;
});
console.log(arr);
// 打印结果为:(5)[1,2,3,5,10]
元素为对象时(可按其中某个属性来排序):
var arr1 = [ { name: "懒洋洋", age: "7" }, { name: "美羊羊", age: "6" }, { name: "喜洋洋",age:"8"}, ];
arr1.sort(function (a, b) {
return b.age - a.age;
});
console.log(arr1);
打印结果为:
edge Translation started
(3) [{…}, {…}, {…}]
0: {name: '喜洋洋', age: '8'}
1: {name: '懒洋洋', age: '7'}
2: {name: '美羊羊', age: '6'}
length: 3[[Prototype]]: Array(0)
11.concat();
数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组, 如果拼接的是数组 则将数组展开,之后将数组中的每一个元素放到新数组中。 如果是其他类型, 直接放到新数组中, 另外,如果不给该方法任何参数,将返回一个和原数组一样的数组 。
var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["A", "B", "C"];
var rel = arr1.concat(arr2, arr3);
console.log(arr1); //原数组
console.log(rel);//新数组
打印结果:
(3) [1, 2, 3]
(9) [1, 2, 3, 'a', 'b', 'c', 'A', 'B', 'C']
可以看到原数组 arr1() 并没有被改变,该方法不改变原数组,后续不改变原数组方法将不再打印原数组
12.valueOf();
返回数组的原始值(一般情况下其实就是数组自身)
var list = [1, 2, 3, 4];
var rel = list.valueOf();
console.log(list); // [1, 2, 3, 4]
console.log(rel); // [1, 2, 3, 4]
13.indexOf();
查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [1, 2, 3, 4]
var index = list.indexOf(4); //3
var index = list.indexOf("4"); //-1
console.log(index);
14.Array.from();
功能: 将一个类数组对象或者可遍历对象转换成一个真正的数组
注意: 将一个类数组对象转换为一个真正的数组,必须具备以下条件:
(1)、该 伪数组 / 类数组 对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
(2)、该 伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字
var all = {
0: "熊二",
1: "2",
2: "男",
3: ["蜂蜜", "熊大", "光头强"],
length: 4,
};
var list = Array.from(all);
console.log(all);
console.log(list,Array.isArray(list));
打印结果:
{0: '熊二', 1: '2', 2: '男', 3: Array(3), length: 4}
(4) ['熊二', '2', '男', Array(3)] true
15.lastIndexOf();
查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [1, 2, 3, 4];
var index = list.lastIndexOf(4); //3
var index = list.lastIndexOf("4"); //-1
console.log(index);
16.forEach();
遍历数组,每次循环中执行传入的回调函数 。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组.
参数: item:每次循环的当前元素, index:当前项的索引, array:原始数组;
数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
实例1:
var list = [32, 93, 77, 53, 38, 87];
var res = list.forEach(function (item, index, array) {
console.log(item, index, array);
});
console.log(res);
打印结果:
32 0 (6) [32, 93, 77, 53, 38, 87]
93 1 (6) [32, 93, 77, 53, 38, 87]
77 2 (6) [32, 93, 77, 53, 38, 87]
53 3 (6) [32, 93, 77, 53, 38, 87]
38 4 (6) [32, 93, 77, 53, 38, 87]
87 5 (6) [32, 93, 77, 53, 38, 87]
实例二:数组中元素的和:
var list = [32, 93, 77, 53, 38, 87];
var sum = 0;
list.forEach(function (item) {
console.log(item);
sum += item;
});
console.log(sum);
打印结果:
32
93
77
53
38
87
380
17.includes();
功能: 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false
以上就是数组常用方法有哪些的详细内容。