和小夏一起学习----一天学一点点JS（数组）

一天学一点点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等）；
关联数组：下标是一个字符串！

数组的特点

数组就是一组数据（数字，字符串，对象）类型的集合，简单来说数组就是一种容器

1. 数组内的数据可以是任意的类型
2. 数组下标从0开始
3. 数组的长度就是数组元素的个数(length)
4. 数组下标的范围是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 小夏
明天见！