目录
一 、 创建数组方法
数组基本介绍 :
数组是一种特殊的对象,数组是按照顺序排列的一组值(元素),每个位置都有一个编号,编号从0开始,编号也叫索引或者下标。数组可以存储任意数据类型。
1.用[ ]
<script>
// 数字的长度 = 4 array[0] = a
var arry = ["a", "b", 110, 120];
console.log(array);
</script>
2.二维数组 由于数组的元素是任意的数据类型,当数组的元素是一个数组的时候,就构成了二维数组,如果二维数组的元素又是数组,可以成为多维数组
<script>
var arr = [["a","b"],[11,33]];
// 读取第一个元素中的第二个元素
console.log(arr[0][1]);
</script>
3.用函数去创建数组 Array
<script>
var arr1 = new Array(3); //只有一个值,值是创建数组的长度
console.log(arr1);
//值时一个非数组或者大于1个值,则是作为数组元素创建数组
var arr2 = new Array(3, 4);
console.log(arr2);
</script>
输出的结果
二、读取数组的值
1.使用方法:数组名 [下标 ] 下标从0开始编号。
<script>
var arr = ["a", "b", 10, 12];
console.log(arr[0]); //读取数组的第一位值
</script>
2.数组length属性
<script>
var arr = ["a", "b", 10, 12];
console.log(arr.length); //读取数组的长度
</script>
三、修改数组的值
1.通过[下标]给对应位置元素重新赋值
<script>
var arr = ["a", "b", 10, 12];
arr[0] = "李"; //更改数组第一位的值
console.log(arr); //读取数组的值
</script>
输出 --->
2.通过[下标]可以添加值,如果对应位置有元素则覆盖,没有对应元素,则是添加
<script>
var arr = ["a", "b", 10, 12];
arr[0] = "李"; //更改数组第一位的值
// 可以给任意的值赋值,跳过的位置则自动填充空位。一般按顺序添加
arr[5] = 35;
arr[6] = "ha";
console.log(arr); //读取数组的值
</script>
输出 --->
3.delete 删除数组元素,删除后对应位置会变空 一般不用该方法
<script>
var arr = ["a", "b", 10, 12];
arr[0] = "李"; //更改数组第一位的值
// 可以给任意的值赋值,跳过的位置则自动填充空位。一般按顺序添加
arr[4] = 35;
arr[5] = "ha";
delete arr[3]; //删除数组中的第4位数,所以显示空值
console.log(arr); //读取数组的值
</script>
输出为 --->
4.splice删除数组元素,删除后后面的元素会补上
基本语法 :数组名.splice(index ,num) index 为下标 num为元素的个数
<script>
var arr = [1, 5, 7, 6, 9, 0];
var del2 = [];
// 删除arr中第3个元素后面的3个元素
del2 = arr.splice(0, 3);
// 输出删除的数组
console.log(del2);
// 输出删除后的数组
console.log(arr);
</script>
5.splice其他用法
1)替换元素 ,先删除元素,再从删除下标开始插入新的元素
基本语法 : 数组名.splice ()
<script>
var arr1 = ["a","b","c"];
//数组的第二个元素开始删除两个元素,并且替换为"b1","c1"
arr1.splice(1,2,"b1","c1");
console.log(arr1);
//输出:"a","b1","c1","c"
</script>
2)插入元素 不删除元素 用0表示
基本语法:数组名.splice(1,0)
<script>
var arr1 = ["a","b","c"];
//数组的第1个元素 开始插入"b1","c1"
arr1.splice(1,0,"b1","c1");
console.log(arr1);
//输出:"a","b1","c1","b","c"
</script>
四、数组其他
1. [ ] in 数组 判断数组下标是否在数组里面 ,数组中有则显示true ,没有则显示false
<script>
var arr = ["a", "b", 10, 12];
arr[0] = "李"; //更改数组第一位的值
// 可以给任意的值赋值,跳过的位置则自动填充空位。一般按顺序添加
arr[4] = 35;
arr[5] = "ha";
delete arr[3]; //删除数组中的第4位数,所以显示空值
console.log(arr); //读取数组的值
console.log(2 in arr); //true
</script>
2. 遍历数组
1)for .... in 可以遍历数组,由于数组是有序号的特殊对象,用for...in 消耗较大,一般不用
<script>
var arr = ["a", "b", 10, 12];
for (var x in arr) {
// x是数组的下标
console.log(arr[x]);
}
</script>
2)for()循环遍历数组 常用遍历数组的方法
<script>
var arr = ["a", "b", 10, 12];
//i 为数组的下标值 arr.length为4位 因为用的小于号 所以不需要 -1
for (var i = 0 ;i < arr.length;i++) {
console.log(arr[i]);
}
</script>
3)判断元素是否在数组里面 方法比较原始 (不推荐)
<script>
var has = false;
var arr = ["a", "b", 10, 12];
//i 为数组的下标值 arr.length为4位 因为用的小于号 所以不需要 -1
for (var i = 0; i < arr.length; i++) {
if ("b2" === arr[i]) {
// 如果b2元素在数组中,则为true
has = true;
break;
}
}
if (has) {
console.log("该元素在数组中存在");
}
else {
console.log("该元素在数组中不存在");
}
</script>
4)Array.isArray( )判断是否是数据类型,是数组返回true,不是数组返回false
Array.isArray( 判断对象 )
<script>
var arr = ["a", "b", 10, 12];
console.log(Array.isArray(arr));
</script>
5).toString( ) 数组转为字符串
<script>
var has = false;
var arr = ["a", "b", 10, 12];
console.log(arr.toString); //把数组转为字符串
</script>
6)push( )在数组末尾追加一个元素,可以追加多个
基本语法: 数组名.push( )
<script>
var arr = ["a", "b", 10, 12];
arr.push("我是新增加的", "可以多个添加", "用逗号隔开");
console.log(arr);
</script>
7)pop()删除末尾最后一个元素,并返回删除的元素
基本语法: 数组名.pop( )
<script>
var arr = ["a", "b", 10, 12];
arr.push("我是新增加的", "可以多个添加", "用逗号隔开");
console.log(arr);
// 把删除的元素赋值给r
var r = arr.pop();
console.log(r);
</script>
8)unshift 在数组的开头插入一个或者多个元素
基本语法:数组名.unshift(插入元素)
<script>
var arr = ["a", "b", 10, 12];
arr.unshift("我是新增加的", "可以多个添加", "用逗号隔开");
console.log(arr);
</script>
9)shift( )删除头部的元素,并返回该元素
基本语法: var y = 数组名 .shift( )
<script>
var arr = ["a", "b", 10, 12];
arr.unshift("我是新增加的", "可以多个添加", "用逗号隔开");
console.log(arr);
// 把删除的元素赋值给r
var r = arr.shift();
console.log(r);
</script>
10)类似数组对象,属性看起来和数组一样,但是本质还是一个狭义的对象,并没有数组的特性。
<script>
var arr1 = ["a","b","c"];
// 在第四个位置添加一个d 元素
arr1[3] = "d";
console.log(arr1);
//创建一个对象 与数组输出的格式类似
var ob1 = {0 :"a",1 :"b",2 :"c" ,length : 3};
console.log(Array.isArray(ob1)); // flase
//可以在对象后面添加 但是不能自动具备数组的自动计算属性
ob1[3] = "d";
console.log(ob1);
</script>
四、数组常用的方法
1. join( ) 可以把数组转为指定分隔符号的字符串,并返回该字符串
<script>
//join( 分隔符)
var arr = [1, 2, 3, 4, 5];
arr = arr.join("--");
console.log(arr); //1--2--3--4--5
</script>
2.concat( )可以合并多个数组,返回一个新数组
<script>
//合并数组1.concat(合并数组2,合并数组3 ....)
var arr1 = [1,2,3,4,5];
var arr2 = ["a","b","c"];
arr3 = arr1.concat(arr2,["6","7","8","9"]);//可以在后面直接添加数组
console.log(arr3); //[1, 2, 3, 4, 5, 'a', 'b', 'c','6','7','8','9']
</script>
3.reverse( )倒叙数组,将原来的数组倒叙,并返回倒叙后的数
<script>
//reverse( )
var arr = [1, 2, 3, 4, 5];
arr = arr.reverse();
console.log(arr); //5--4--3--2--1
</script>
4.slice(startIndex ,[endIndex])截取数组中的一部分,返回截取的数组,原数组不变。
startIndex 是开始解析的下标 ,endIndex 是结束的下标(如果省略则是截取到末尾)
<script>
//slice(startIndex,[endIndex]) 截取数组的一部分
var arr = [1, 2, 3, 4, 5];
// 取第一个元素-第四个元素之间的值
arr1 = arr.slice(1,4);
console.log(arr1); //--> 2,3,4
</script>
5.forEach(function(item,index){ }) //数组遍历元素的方法。
参数是一个回调函数,回调函数的item参数则是遍历的数组元素,里面不能用break
item是当前元素 index是索引
<script>
//forEach(Function(item,index){ })
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item,index ){
console.log(item,index); // 1,0 2,1 3,2 4,3 5,4
});
</script>
6.map(function(item,i) {return item} ) 遍历数组元素,和forEach类似,但是会返回一个新的数组,新数组的元素则是回调函数的值。
item是当前元素 index是索引
<script>
//map(Function(item,i){ })
var arr = [1, 2, 3, 4, 5];
var c = arr.map(function(item){
//console.log(item); // --> 输出元素 1 2 3 4 5
//把return的元素作为新数组的元素,通过map返回。如果不返回值,默认返回undfiend
return item + "a";
})
console.log(c); // ['1a', '2a', '3a', '4a', '5a']
</script>
7.filter(function(item) {return boolean} )过滤数组成员,并返回新的数组。
如果返回值为true ,则把该元素作为新数组的成员。
<script>
//filter(function(item){return boolean}) 过滤数组
var arr = [1, 2, 3, 4, 5,6];
var c = arr.filter(function(item){
//输出偶数 item元素会作为新数组
return item % 2 === 0;
})
console.log(c); //--> 2,4,6
</script>
8.reduce(function(a,b){ }) 依次处理数组成员,最终累计为一个值
第一次遍历:a 是数组的第一个元素,b是数组的第二个元素
第二次以后:a 是上轮返回值,b则是遍历的n次+1个元素
一般用于求数组所有元素累计的和值
<script>
//reduce(function(a,b){})
var arr = [1,8,3,4,9,2];
var count = arr .reduce(function(a,b){
return a + b; // 1+8 , 9+3, 12+4, 16+9, 25+2
});
console.log(count); // 27
</script>
应用: 算数组的平均值
<script>
//reduce(function(a,b){})
var arr = [1,8,3,4,9,2];
var count = arr .reduce(function(a,b){
return a + b; // 1+8 , 9+3, 12+4, 16+9, 25+2
})/ arr.length ; //求数组的平均值 ,直接除以数组的长度
console.log(count); // 27
</script>
9.sort( ) 数组排序,如果传回调函数,默认则是按照字典排序(默认字符的编码)
基本语法 :sort(function (a,b) {return a-b })
a,b 是相邻的两个元素。
如果返回值>0,则第一个元素在第二个元素的后面,否则第二个元素在第一个元素的前面
1) 从大到小排序
2) 从小到大排序
<script>
var arr = [2, 1, 12, 4, 5, 7, 6, 24];
// a 是前面的元素 b 是后面的元素
//返回值是 a-b > 0,则是前面的元素大于后面的元素,交换位置 从小到大排列
var arr2 = arr.sort(function (a, b) { return a - b });
console.log(arr2); //-----> [1, 2, 4, 5, 6, 7, 12, 24]
//返回值是 b-a > 0 ,则是后面的元素大于前面的元素,交换位置 从大到小排列
var arr3 = arr.sort(function(a,b){return b-a});
</script>
举例 :数组对象数据排序
<script>
//创建数组对象
var arr4 = [{ name: "张三", num: 2 }, { name: "李四", num: 1 }, { name: "老王", num: 4 }, { name: "赵四", num: 3 }];
var arr5 = arr4.sort(function (a, b) { return a.num - b.num }); //按照num值 从小到大排序
console.log(arr5);
</script>
10.some( ) 根据条件判断数组元素是否成立 (只要有一个元素成立,整个some方法就成立)
基本语法 :some(function(el,index ,arr) {return ( boolean )})
el 遍历的每个元素(必填), index是当前的遍历元素的索引(可选),arr当前数组(可选)
只要有一个元素返回true,整个some方法返回true
<script>
var arr4 = [{ name: "张三", num: 2 }, { name: "李四", num: 1 },
{ name: "老王", num: 4 }, { name: "赵四", num: 3 }];
//some()
//找出num = 5 的数组 找不到则返回false
var arr6 = arr4.some(function (item) { return item.num === 5 });
console.log(arr6); //---> false
//找出num = 4 的数组 找到则返回true
var arr7 = arr4.some(function (item) { return item.num === 4 });
console.log(arr7); //----> true
</script>
11.every( )与some( )类似 (所有成员返回true ,才会返回true,否则是false)
基本语法 :every(function(el,index ,arr) {return ( boolean )})
el 遍历的每个元素(必填), index是当前的遍历元素的索引(可选),arr当前数组(可选)
所有成员返回true ,才返回true,否则是false 。
<script>
var arr9 = [1, 3, 5, 7, 9];
var arr10 = arr9.every(function (item) { return item % 2 !== 0 });
console.log(arr10);//true
</script>
12. indexOf( element )查看元素在数组中第一次出现的位置。如果没有该元素则返回-1。
一般用于判断该元素是否在数组中。
基本语法:数组名.indexOf(eldement)
<script>
var arr9 = [1, 3, 5, 7, 9];
console.log(arr9.indexOf(5));//返回该元素第一次出现在数组中的下标
console.log(arr9.indexOf(10)); //在数组中找不到该元素,则返回 -1
</script>
13. lastIndexOf(element) 查看元素在数组中最后一次出现的位置 。
与indexOf用法法类似
基本语法:数组名.lastIndexOf(element)
<script>
var arr11 = [5, 3, 5, 7, 9, 5];
console.log(arr11.lastIndexOf(12)); //返回该元素最后一次出现在数组中的下标 5
console.log(arr11.indexOf(10)); //在数组中找不到该元素,则返回 -1
</script>
14.只要返回值是一个新数组的都支持链式操作
新数组后面可以添加多个数组方法
举例:var arr = [{ name: "张三", num: 2 }, { name: "李四", num: 1 }, { name: "老王", num: 4 }, { name: "赵四", num: 3 }];
需求:1)在arr 数组中添加 “ age = 12 ”的属性,并创建一个新的数组。
2)按照 num的属性值 从小到大排序 。
3)并排除掉num=3的数组 。
<script>
var arra = [{ name: "张三", num: 2 }, { name: "李四", num: 1 }, { name: "老王", num: 4 }, { name: "赵四", num: 3 }];
var arrNew = arra.map(function (item) {
item.age = 12; return item
}).sort(function (a, b) {
return (a.num - b.num);//从小到大排序
}).filter(function (item) {
return item.num !== 3; //去除num = 3 的值
})
console.log(arrNew);
</script>