哈哈哈这里只是给的大家归纳了一下数组的相关方法哦~
具体更深层次的可以查阅资料~大家可以收藏方便之后查阅,顺便关注一波博主吧!!!!~~~~~
目录
1.查找元素 indexOf() lastIndexOf()
(1)数组转换成字符串 join()和 toString()
六.数组类型判断 Array.isArray(数组名) 判断是否是数组;
数组的方法
一.查找/转换/拼接/截取
1.查找元素 indexOf() lastIndexOf()
indexOf()
语法: 数组名.indexOf("元素")
目的:用来查找元素是否在该数组中存在,若包含返回该元素在数组中的下标(索引),若不包含则返回-1
代码:
<script>//indexOf
var arr = ["a", "b", "c", "d", "e"];
console.log(arr.indexOf("a"));//0
console.log(arr.indexOf("c"));//2
console.log(arr.indexOf("h"));//-1
</script>
lastIndexOf()
语法: 数组名.lastIndexOf("元素")
目的:用来查找元素在数组中最后一次出现的下标(索引).若没有找到该元素则返回-1
代码:
<script>//lastIndexOf
var arr = ["a", "b", "c", "a", "b", "c", "d", "e"];
console.log(arr.lastIndexOf("a"));//3
console.log(arr.lastIndexOf("c"));//5
console.log(arr.lastIndexOf("h"));//-1
</script>
2.数组与字符串转换
(1)数组转换成字符串 join()和 toString()
join()
语法: 数组名.join("连接符")
目的:返回一个包含数组所有元素的字符串,各元素之间用连接符分隔开,若没有设置连接符,则默认逗号分隔开。
toString()
语法: 数组名.toString()
目的:返回一个包含数组所有元素的字符串,各元素之间用逗号分隔开。
代码:
<script>//join()
var arr =["a", "b", "c", "a", "b", "c", "d", "e"];
var arr_str = arr.join("-");
console.log(arr_str);//a-b-c-a-b-c-d-e
console.log(typeof arr_str);//string
arr_str = arr.toString();
console.log(arr_str);//a,b,c,a,b,c,d,e
console.log(typeof arr_str);//string
</script>
(2)字符串转换成数组 split('分隔符')
split('分隔符')
语法: 数组名.split('分隔符')
目的:将字符串通过分隔符分成几部分,并将每部分作为一个元素保存于一个新建的数组中。
代码:
<script> //split("分隔符")
var sentence = "关注一下博主吧 哈哈哈哈";
//通过空格将字符串分离成数组[]
// ['关注一下博主吧', '哈哈哈哈']
console.log(sentence.split(" "));
//将字符串每个元素分离成数组[]
//['关', '注', '一', '下', '博', '主', '吧', ' ', '哈', '哈', '哈', '哈']
console.log(sentence.split(""));
</script>
3.字符串的拼接和截取 concat() splice()
(1) concat() 拼接
语法: 数组.concat(数组1,数组2,........)
目的:合并多个数组,创建一个新数组。括号里面的数组按顺序拼接到concat前面的数组后面
代码:
<script>//concat()
var arr = ["关", "注"];
var arr1 = ["一", "下"];
var arr2 = ["博主", "吧"];
console.log(arr.concat(arr1, arr2));
//['关', '注', '一', '下', '博主', '吧']
</script>
(2) splice() 截取
语法: 数组名.splice(index下标,length截取长度)
目的:截取一个数组的子集创建一个新数组,(返回一个数组)
代码:
<script>//splice()
var arr = ["a", "b", "c", "a", "b", "c", "d", "e"];
console.log(arr.splice(2,4));//['c', 'a', 'b', 'c']
</script>
二.数组的增删函数
1.数组元素的增删
(1) push():
在数组的结尾添加一个或多个元素,返回新数组的长度;
(2) pop():
移除数组最后一个元素,返回移除的元素;
(3) unshift():
在数组的开头添加一个或多个元素,返回新数组的长度;
(4) shift():
删除数组第一个元素,并返回删除的元素;
代码:
<script>
var arr = ["a", "b", "c", "d", "e"];
console.log(arr.push("f"));//返回在结尾添加元素后的数组的长度 6
console.log(arr.pop());//返回删除的最后一个元素 f
console.log(arr.unshift("0"));//返回在开头添加元素后的数组长度 6
console.log(arr.shift());//返回删除的第一个元素 0
</script>
2.splice() 从数组中添加,替换,和删除元素
(1) 添加:
arr1.splice(startIndex,0,arr2),注第二个参数为0:往前边前边添加
代码:
<script>
var arr = ["1", "1", "1", "1", "1"];
//添加元素 arr1.splice(startIndex,0,arr2) 注第二个参数为0:往前边前边添加
console.log(arr.splice(2, 0, "2", "2", "2"));//返回空数组(后面会讲到,返回删除的元素)
console.log(arr);//['1', '1', '2', '2', '2', '1', '1', '1']
</script>
(2) 替换:
arr1.splice(startIndex,length,arr2),注第二个参数为被替换的数组长度
注意:删除的长度(length)要和后面添加的元素个数要相同
代码:
<script>
var arr = ["a", "b", "c", "d", "e"];
//替换元素 arr1.splice(startIndex,length,arr2),注第二个参数为被替换的数组长度
console.log(arr.splice(2, 2, "2", "2"));//返回删除(被替换)的元素['c', 'd']
console.log(arr);// ['a', 'b', '2', '2', 'e']
</script>
(3) 删除:
arr.splice(startIndex,length) 方法从数组中删除元素,返回删除的元素组成的数组
代码:
<script>
var arr = ["a", "b", '2', '2', "c", "d", "e"];
console.log(arr.splice(2, 2));//['2', '2']
</script>
三.数组的排序
1.数组中的元素顺序翻转 reverse()
arr.reverse()
代码:
<script>
var arr = ["a", "b", "c", "d", "e"];
console.log(arr.reverse());// ['e', 'd', 'c', 'b', 'a']
</script>
2.对数组中的元素进行排序,sort()
sort()
数字按大小排序,字母按先后排序
大写字母均比小写字母小,
字符串,或者几位数的数字比较按照下标逐位比较(unicode码)
代码:
<script>
var names = ['Ana', 'ana', 'john', 'John'];
console.log(names.sort());
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums);
</script>
四.迭代器方法
1.不生成新数组的迭代器方法
(1) forEach
对数组中的每一项运行给定函数,没有返回值,它和使用for循环的结果相同
<script>
function square(num) {
console.log(num * num);
}
var nums = [1, 2, 3, 4];
nums.forEach(square);
</script>
(2) every()
对数组中的每一项运行给定函数,如果该函数对每一个项都返回true,则返回true; 反之,有一个值是false就返回false(默认返回false)。
<script>
function isEven(num) {
return num % 2 == 0;
}
var nums = [2, 3, 4, 6, 8, 10];
var even = nums.every(isEven);
console.log(even);//false
</script>
(3) some()
对数组中的每一项运行给定函数,如果该函数对任一一项返回true,则返回true(默认返回false)。
<script>
function isEven(num) {
return num % 2 == 0;
}
var nums = [1, 3, 5, 7, 8, 9];
var someEven = nums.some(isEven);
console.log(someEven);//true
</script>
2.生成新数组的迭代器方法
(1) map()
对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
<script>
function square(num) {
return num * num;
}
var nums = [1, 2, 3, 4];
console.log(nums.map(square)); // [1, 4, 9, 16]
</script>
(2) filter()
传入一个返回值为布尔类型的函数。
<script>
function isEven(num) {
return num % 2 == 0;
}
var nums = [2, 3, 4, 6, 8, 10];
var evens = nums.filter(isEven);
console.log(evens);//[2, 4, 6, 8, 10]
</script>
扩展:以上迭代器方法除了可以 数组名.xxx(函数方法名)以此来传参给外面的函数之外,可以构建匿名函数的方式,格式如下,这里举例forEach:
扩展: 匿名函数
nums.forEach(function (item, index, array) {})
item 指代元素值index 指代元素索引
array 指代数组本身
形参位置固定
五.累加方法 reduce和reduceRight
reduce 从左向右操作
reduceRight 从右向左操作
使用指定的函数对数组元素进行组合,生成一个值,接收两个参数。
1.reduce和reduceRight用法:
<script> var numbers = [1, 2, 3, 4, 5, 6, 7,8, 9, 10]; numbers.reduce(function (previousValue, currentValue, index, array) { return previousValue + currentValue; }, initialValue); </script>
其中:
参数一:要执行的函数,有返回值,函数内部处理的参数如下
previousValue :上一次调用回调返回的值,或者是提供的初始值(initialValue)
currentValue :数组中当前被处理的元素
index :当前元素在数组中的索引
array :调用 reduce 的数组
参数二:传递给函数的默认值,可忽略
理解:
[x1, x2, x3, x4].reduce(f) = f( f( f (x1, x2), x3), x4)
2.扩展用法
(1)累加
<script>
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var n = a.reduce(function (x, y) { console.log(x + y); return x + y; }, 0);
//0表示函数的默认起始值,即第一次执行0将被赋值给previousValue;
console.log(n);//55
/* 0+1=1
1+2=3;
3+3=6
6+4=10
10+5=15
15+6=21
21+7=28
28+8=36
36+9=45
45+10=55 */
</script>
(2)累积
<script>
var a = [1, 2, 3];
var m = a.reduce(function (x, y) { return x * y; }, 1)
console.log(m);//6
</script>
(3)求数组最大值
<script>
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var max = a.reduce(function (x, y) { return x > y ? x : y; });
console.log(max);//10
</script>
六.数组类型判断 Array.isArray(数组名) 判断是否是数组;
Array.isArray(数组名):判断是否是数组;
<script>
var a = [1, 2];
//数组是特殊的对象类型
//typeof 判断类型
console.log(typeof a);//object
//isArray 判断是不是数组
console.log(Array.isArray(a)); //true
//instanceof 判断类型
console.log(a instanceof Array); //true
var b = { x: 1, y: 2 };
console.log(Array.isArray(b)); //false
</script>
七.数组的长度 数组名.length
数组名.length :获取数组的元素个数
<script>
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(a.length);//10
</script>
八.删除数组指定元素 delete 数组名[index]
delete 数组名[index]:删除数组中指定元素,index为被删除元素的下标
注意:该方法删除的原则是把该位置的元素改为undefined,数组的长度不变
<script>
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
delete a[0]; // 把 fruits 中的指定元素改为 undefined
console.log(a);//数组的长度不变
</script>