和小夏一起学习----一天学一点点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 小夏
明天见!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值