js 数组

163 阅读6分钟

数组

1.什么时候数组

  • 数组是值的有序集合。
  • 每个值叫做一个元素。
  • 每个元素在数组中有一个位置,以数字表示从0到n 被成为索引(下标)。
  • 数组里的元素可以是任意数据类型。
  • 数组的最大能容纳 4294967295 个元素。

2.创建数组

2.1使用数组直接量

var ary = [1,'he',{},true];//可以由任意数据类型组成

3.读写数组元素

使用操作符[]来读写数组的每一个元素,[]中是数组的索引

ary[1];//读取数组中元素的值 ary[2]=200;//给数组中的索引赋值

数组可以通过length 属性获取数组的长度,也就是数组中元素的个数。

ary.length//获取数组ary的长度

如果数组索引比元素个数要多,中间会用empty占位

var ary=[1,2,3];
ary[3]=200;//相当于新增一个
ary[5]=300;
console.log(ary);//[1, 2, 3, 200, empty, 300]
console.log(ary[4]);//undefined

数组length属性的特别之处(他不是只读的,通过修改length,可以从数组末尾删除或添加元素)

colors.length=2;
console.log(colors[2])//undefined
ary.length=7;//新增的元素都用undefined填充
ary[ary.length]='black';//数组最后添加一个

4.遍历数组(迭代)

// for 循环遍历
for (var i = 0; i < arr.length; i ++) {
    arr[i]
}

//for in 循环
for (var i in arr) {
    arr[i]
}

6.多维数组

// 创建多维数组
var cityList = [  ['广州', '深圳', '佛山', '东莞', '惠州'],
  ['南京', '苏州', '徐州', '无锡', '南通'],
  ['济南', '青岛', '烟台', '潍坊', '淄博'],
  ['杭州', '宁波', '温州', '绍兴', '湖州']
];
青岛
// 多维数组取值
cityList[2][1]//'青岛';

7.字符串具有数组的特性

字符串可以通过[]取到指定字符,只能取值无法修改。

  • 字符串属性.length可以获取字符串的长度(字符个数)
  • 字符串可以和数组那样遍历

8.数组方法

1.push

  • 作用:向数组末尾增加一个元素
  • 参数:添加的具体元素,可以是一项,也可以是多项
  • 返回值:新数组的长度
  • 是否改变源数组:改变
var colors = ['red', 'pink'];
var res = colors.push('blue');
// 原数组
console.log(colors);//['red', 'pink', 'blue']
// 返回值
console.log(res);//3

2.pop:

  • 作用:删除数组的最后一项
  • 参数:没有
  • 返回值:删除的项
  • 是否改变源数组:改变
var ary = [12345];
var retrunvalue = ary.pop();
console.log(ary,retrunvalue);//[1,2,3,4]  5 

3.shift:

  • 作用:删除数组的第一项
  • 参数:没有 +返回值:删除的项 +是否改变源数组:改变
var colors = ['red', 'pink'];
var res = colors.shift();
// 原数组
console.log(colors);//['pink']
// 返回值
 console.log(res);//red

4.unshift:

  • 作用:向数组的开头添加内容
  • 参数:添加的内容
  • 返回值:新数组的长度
  • 是否改变源数组:改变
var colors = ['1', '2'];
var res = colors.unshift('3', '4');
// 原数组 在数组的开头添加从0项开始
console.log(colors);//['3', '4', '1', '2']
// 返回值
console.log(res);//4

5.reverse倒序:

  • 作用:把数组元素反向排列
  • 参数:没有
  • 返回值:排列后的数组
  • 是否改变源数组:改变
var ary=[1,2,3];
var res=ary.reverse();
console.log(res);//参数[3,2,1];
console.log(ary);//返回值[3,2,1];

6.sort排序:

  • 作用:把数组进行排序,参数没写函数只能排列10以内的数,写参数后函数的返回值为a-b 升序 b-a 降序
  • 参数:没有或者是一个函数
  • 返回值:排序后的数组
  • 是否改变源数组:改变
//----------------------不传参的时候

//=====>10 以内的可以排
var ary=[3,2,1,6,8];
ary.sort();

[1, 2, 3, 6, 8]

//=====> 超出10
 var ary2=[1,21,5,33,26]
 ary2.sort();
 [1, 21, 26, 33, 5];
 
 //---------------------------传参的时候
 var ary2=[1,21,5,33,26]
 ary2.sort(function(a,b){
    return a-b; // 升序
    return b-a; //降序
 })

7.splice(增删改一体化)

  • 作用:删除/新增/修改
  • 参数:splice(a,b,c....,n)不能是负数
  • 返回值:删除的元素,可以是空数组
  • 是否改变原数组:改变
1,删除
  • 删除需要给splice两个参数
  • 第一个参数:要删除的第一个元素的位置
  • 第二个参数:要删除的元素数量
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 2);//从0项开始删除两项
console.log(nums);// [3, 4, 5, 6]
console.log(res);// [1,2]
2.新增

新增需要传递3个参数

  • 第一个参数:开始的位置
  • 第二个参数:0(要删除的元素数量)
  • 第三项参数:要插入的元素(任意个)
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(3, 0, 7, 8, 9);
console.log(nums);//[1, 2, 3, 7, 8, 9, 4, 5, 6] 
console.log(res);// []没有删除元素所以是空数组
3.修改

修改也是需要三个参数 第一个参数:开始的位置 第二个参数:要删除的元素数量 第三个参数:要插入的元素(任意个) 注意:删除的个数和新增的个数可以不一致

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 3, 7, 8, 9);
console.log(nums);//[7, 8, 9, 4, 5, 6] 
console.log(res);// [1, 2, 3]

8.slice

  • 作用:从原有数组中选中特定的内容
  • 参数:可以有一个或者两个
  • 返回值:返回值是一个数组,返回的每一项是复制的项
  • 是否改变源数组:不改变 如果只有一个参数,slice()会返回该索引到数组末尾的所有元素
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5, 6]

如果有两个参数时,clice()返回从开始所有到结束所有对应的所有元素,但是不包含结束所有nums.slice(n,m)包含n不包含m

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1, 5);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]

如果slice()参数有负值,那么就以数组长度加上这个负数来确定位置

var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(-5, -1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]

9.concat

  • 作用:实现多个数组或者值的拼接
  • 参数:数组或者值
  • 返回值:拼接后的数组
  • 是否改变源数组:不改变
var ary1 = [1, 2, 3];
var ary2 = [4, 5, 6];
var res = ary1.concat(ary2, "珠峰", "同学");
console.log(ary1);//[1, 2, 3]
console.log(res);//[1, 2, 3, 4, 5, 6, '珠峰', '同学']

10.toString

  • 作用:把数组转为字符串
  • 参数:无
  • 返回值:转换后的字符串
  • 是否改变源数组:不改变
var ary1 = [1, { a: 1 }, null, undefined, 3];
var res = ary1.toString();
console.log(ary1);//[1, {a:1},null, undefined, 3]
console.log(res)//1,[object Object],,,3 

11.join

  • 作用:把数组通过指定的连接符,转为字符串
  • 参数:连接符
  • 返回值:转换后的字符串
  • 是否改变源数组:不改变
var ary1 = [1, 2, undefined, 3, { a: 1 }];
var res = ary1.join("|");
console.log(ary1);//[1, 2, undefined, 3, { a: 1 }]
console.log(res)// 1|2||3|[object Object]  
eval(res) //==> eval  执行计算

12.indexOf/lastIndexOf

  • 不兼容 ie6-ie8
  • 作用,获取某项在数组中(首次出现/最后出现的)索引(也可以用来是否包含某项)
  • 参数(n,m) n:检测的项 m:如果是indexOf 就是从索引m开始检测,如果是lastIndexOf:就是在m项停止检测
  • 返回值:-1或者具体的索引值
  • 是否改变源数组:不改变
+ 作用:检测数组中的某项在数组中(首次indexOf/最后lastIndexOf)出现的位置

    var ary=[1,2,3,4,1,55,1];
    //检测1这个项目在数组ary 中首次出现的位置
    ary.indexOf(1); //0
    //从索引2开始,检测1这个项目在数组中首次出现的位置
    ary.indexOf(1,2); //4
    
    // 检测1这个项目在数组中最后一次出现的索引
    ary.lastIndexOf(1);
    // 检测1这个项目在数组中最后出现的索引,在索引5的位置停止检测
    ary.lastIndexOf(1,5)
    
    //如果此项在数组中没有出现,返回值就是-1
    ary.indexOf(66)===>-1

13.includes

  • 作用:检测数组中是否有某一项
  • 参数:具体项
  • 返回值:布尔值
  • 是否改变源数组:不改变

数组迭代方法

迭代,循环,遍历

14.foEach

  • 作用:遍历数组中的每一项
  • 参数:函数
  • 返回值:undefined
  • 是否修改源数组:否
  • forEach方法可以用来遍历数组每一项,这个没有返回值
// 使用forEach迭代数组,计算数组元素的和

//一个家庭的年龄 过年了  每个人长1岁
//方法1 创建一个新数组
var userAages = [19,21,18,34,32,25,45];
var newUserAges = [];
userAages.forEach(function (item,index,array) {
    newUserAges[index] = item + 1;
})
console.log(newUserAges);
//方法2 直接改变原来数组
var re = userAages.forEach(function (item,index,array) {
    userAages[index] = item + 1;
})
console.log(userAages);
console.log(re);

15.map (结束)

  • 作用:把一个数组可以映射成为一个新数组
  • 参数:函数
  • 返回值:映射后的新数组
  • 是否修改源数组:否
// 有一个数组装着2021年所有人的年龄,2022年以后,每个人的年龄都增加1岁
var allAge = [19,15,,2,30,32,43,45];
var age2020 = allAge.map(function (item,index,arr) {
    return item+1;
})
console.log(age2020);