一天学一点点JS
hello 大家好!我是小夏,不爱唱歌的小夏。
今天学的是js数组:
JS数组
数组的概念
什么是数组呢?
数组就是按照一定的顺序排列的一组值,每个值都有自己的编号,编号(下标)从0开始,整个数组可以用[]表示。
数组的定义
定义数组的方式:
方式1:中括号[]
var arr = [数组的值1,数组的值2,数组的值3,…];
方式2:使用new Array();
var arr = new Arry(数组的值1,数组的值2,数组的值3,…);
数组的访问
我们可以用arr[index]方式来访问数组里面的每一个元素;
数组的操作
数组里面的元素可以是任意不同的数据类型;
数组可以进行增删改查操作;
数组的分类
按维度分:数组可以是任意维度—一维数组、二维数组、等等;
按类型分:分为索引数组和关联数组;
索引数组:普通的数组(下标是0,1,2等);
关联数组:下标是一个字符串!
数组的特点
数组就是一组数据(数字,字符串,对象)类型的集合,简单来说数组就是一种容器
- 数组内的数据可以是任意的类型
- 数组下标从0开始
- 数组的长度就是数组元素的个数(length)
- 数组下标的范围是0~length-1
数组的使用
1、值传递
一般的数据类型是值传递
var num=9;
var num2=num;//将num的值传递给num2;并在num2的地址里保存
num2=10;//修改num2地址保存的值,不会修改num的值
console.log(num);
console.log(num2);
输出:
[Running]
9
10
[Done] exited with code=0 in 0.72 seconds
2、地址传递
数组、函数、对象都是地址传递,改变其中一个的元素会影响另一个,因为他们都指向同一地址;
var arr=['我','是','小','夏','!'];
var arr2=arr;//地址传递:将arr所指向的地址传递给arr2;
arr2[0]='吾';//直接修改的是arr2指向数组地址的第一个元素;
console.log(arr2);
console.log(arr);
输出:
[Running]
[ '吾', '是', '小', '夏', '!' ]
[ '吾', '是', '小', '夏', '!' ]
[Done] exited with code=0 in 0.12 seconds
数组的遍历
普通循环遍历
遍历:循环输出数组/对象元素的值;
var arr=['我','是','小','夏','!'];
for(var i=0;i<arr.length;i++){//length是数组的一个属性,后面会提到
console.log(arr[i]);
}
输出:
[Running]
我
是
小
夏
!
[Done] exited with code=0 in 0.118 seconds
for----in的使用
var arr=['我','是','小','夏','!'];
for(i in arr){
console.log(arr[i]);//for---in里面遍历的i是数组的下标;
}
输出:
[Running]
我
是
小
夏
!
[Done] exited with code=0 in 0.114 seconds
for----of的使用
var arr=['我','是','小','夏','!'];
for(i of arr){
console.log(i)//for---of里面遍历的i是数组元素
}
输出:
[Running]
我
是
小
夏
!
[Done] exited with code=0 in 0.115 seconds
数组的方法(重点)
数组的属性length的使用
前面普通遍历数组的时候其实就已经用到了数组的length属性
length:数组的长度
length是一个开发者可以设定的属性:
如果设置length长度小于数组本身长度,那么多余元素舍弃。
如果设置length长度大于数组本身长度,那么缺少元素用空位补齐。
如果设置length长度不是合法数值,那么会报错Invalid array length!
var arr=['我','是','小','夏','!'];
arr.length=3;
console.log(arr);//舍弃多余元素
arr.length=8;
console.log(arr);//缺少的元素会用空位补全;
arr.length='a';
console.log(arr);//报错Invalid array length!
输出:
[Running]
[ '我', '是', '小' ]
[ '我', '是', '小', <5 empty items> ]
arr.length='a';
^
RangeError: Invalid array length
[Done] exited with code=1 in 0.114 seconds
数组的空位
当数组的某个位置是空元素,即两个逗号之间没有任何值,我们称该数组存在空位(hole)。
var arr1=[1,,3];
console.log(arr1);
console.log(arr1[1]);
console.log(arr1.length);
输出:
[Running]
[ 1, <1 empty item>, 3 ]
undefined
3
[Done] exited with code=0 in 0.233 seconds
数组的方法
1.concat(arr1,arr2,…):连接多个数组
var arr1=[1,2,3,4];
var arr2=['我','是','小','夏','!'];
console.log(arr1.concat(arr2,['不爱唱歌的小夏']));
2.push(若干个新元素):把若干个新元素添加到数组尾部
arr1.push(5,6);
console.log(arr1);
3.pop():删除数组尾部的一个元素
arr1.pop()
console.log(arr1);
4.shift():删除数组头部的一个元素
arr1.shift();
console.log(arr1);
5.unshift(若干个新元素):把若干个新元素添加到数组头部
arr1.unshift(0,1);
console.log(arr1);
6.join():给数组添加一个分隔符并将数组转化为字符串
console.log(arr1.join('-'))
7.reverse():倒叙输出数组元素
console.log(arr1.reverse());
8.slice(start,end):数组的截取
console.log(arr1.slice(0,3));
9.splice():添加修改删除数组元素
console.log(arr1.splice(0,0,'你好','添加元素'));
<!-- splice(from,howmany,items):添加删除数据。
from是开始改动的数组下标,howmany是删除元素的个数,当howmany=0时不删除
From:从哪个下标开始添加还是删除
Howmany:删除或者添加几个数组元素
Items:添加的数据或者是修改的数据。 -->
1)删除数组元素:
arr1.splice(1,2,);
console.log(arr1);
2)删除数组元素并替换数组元素
arr1.splice(1,1,'这是替换的元素');
console.log(arr1);
3)添加数组元素
arr1.splice(0,0,'添加元素2');
console.log(arr1);
10.sort():数组的排序
按照字符(a-z)的顺序排序
var charArr=['h','a','m','k','y','o'];
console.log(charArr.sort());//直接调用sort排序,默认a-z排序
数字的排序方法:
var numArr=[89,32,66,90,99]
console.log(numArr.sort())//默认从小到大排序
11.map():循环遍历数组,有返回值
var res=numArr.map(function(val,i,arr){
return val;
})
console.log(res);
12.forEach():循环遍历数组,没有返回值
/*forEach(function(val,index,arr){
})
val:数组元素的值
index:下标
arr:数组本身 */
var res2=numArr.forEach(function(val,i,arr){
return val;
})
console.log(res2);//undefined
13.filter():找到符合条件的所有元素
var charArr2=['abc','acd','obj'];
console.log(charArr2.filter(function(a,b,c){
return a[0]=='a';
}));
14.find():找到符合条件的第一个元素
console.log(charArr2.find(function(a,b,c){
return a[0]=='a';
}));
15.findIndex():找到符合条件的第一个元素的下标
console.log(charArr2.findIndex(function(a,b,c){
return a[0]=='a';
}));
16.some():只要有一个符合条件的就返回true
console.log(charArr2.some(function(a,b,c){
return a[0]=='a';
}));
17.every():只要有一个不符合条件的就返回false
console.log(charArr2.every(function(a,b,c){
return a[0]=='a';
}));
18.includes():判断是否包含指定的数组元素,有就是true,没有就是false
console.log(charArr2.includes('abc'));
19.reduce():数组元素的计算(从左开始往右一组一组操作)
console.log(numArr.reduce(function(a,b){
return a-b;
}))
20.reduceRight():数组元素的计算(从右到左一组一组操作)
console.log(numArr.reduceRight(function(a,b){
return a-b;
}));
21.indexOf():返回指定数组元素的首次出现的下标
var numArr3=[1,1,3,4,5,4]
console.log(numArr3.indexOf(4))
22.lastIndexOf():返回指定数组元素的最后一次出现的下标
console.log(numArr3.lastIndexOf(4))
23.keys():返回由所有数组元素的下标组成的特殊对象
console.log(numArr3.keys())
for(i of numArr3.keys()){
console.log(i)
}
24.values():返回由所有数组元素的值组成的特殊对象
console.log(numArr3.values())
for(i of numArr3.values()){
console.log(i)
}
25.entries():返回所有数组元素的键名和键值共同组成的特殊对象
console.log(numArr3.entries())
for(i of numArr3.entries()){
console.log(i)
}
ps: 二维数组可自行了解
@author 小夏
明天见!