数组

1 什么是数组

1) 数组是值的有序集合。
2) 每个值叫做一个元素。
3) 每个元素在数组中有一个位置, 以数字表示,称为索引 (有时也称为下标)。
4) 数组的元素可以是任何类型。
5) 数组索引从 0 开始,数组最大能容纳 4294967295 个元素。

2 创建数组

2.1 使用数组直接量

  1. // 定义所有的姓名组成的集合
  2. var nameList = ['曹操', '诸葛亮', '刘备'];
  4. //定义由数字组成的数组
  5. var numList = [112,232,34,34234,3434,3434,121,112,112,112];
  7. //数组的元素各种类型都有
  8. var list = ['孙悟空', 100, true, false, '猪八戒', [1, 2, 3]];

3 读写数组元素

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

  1. // 读取数组中元素的值
  2. nameList[12];
  4. // 给数组中的元素赋值
  5. nameList[2] = 100;

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

  1. nameList.length; // 获取数组 nameList 的长度

如果数组[大于元素个数的索引]

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

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

  1. let colors=['red','blue','green'];
  2. colors.length=2;
  3. console.log(colors[2])//undefined
  4. ary.length=7;//新增的元素都用undefined填充
  5. ary[ary.length]='black';//数组最后添加一个

4 遍历数组（迭代）

  1. // for 循环遍历
  2. for (var i = 0; i < arr.length; i ++) {
  3.     arr[i]
  4. }
  6. //for in 循环
  7. for (var i in arr) {
  8.     arr[i]
  9. }

6 多维数组

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

7 字符串具有数组的特性

字符串可以通过 [] 取到指定的字符，只能取值无法修改。
2）字符串属性 .length 可获取字符串的长度（字符的个数）。
3）字符串可以向数组那样遍历。

8 数组方法

1）push：

  • 作用：向数组末尾追加某一项
  • 参数：添加的具体项，可以是一项,也可以是多项
  • 返回值：新数组的长度

  • 是否改变原数组：改变

    1. var colors = ['red', 'pink'];
    2. var res = colors.push('blue');
    3. // 原数组
    4. console.log(colors);//['red', 'pink', 'blue']
    5. // 返回值
    6. console.log(res);//3

    2）pop：

  • 作用：删除数组的最后一项

  • 参数：无
  • 返回值：删除的项

  • 是否改变原数组：改变

    1. var colors = ['red', 'pink'];
    2. var res = colors.pop();
    3. // 原数组
    4. console.log(colors);//['red']
    5. // 返回值
    6. console.log(res);//pink

    3）shift：

  • 作用：删除数组的第一项

  • 参数：无
  • 返回值：删除的项

  • 是否改变原数组：改变

    1. var colors = ['red', 'pink'];
    2. var res = colors.shift();
    3. // 原数组
    4. console.log(colors);//['pink']
    5. // 返回值
    6. console.log(res);//red

    4）unshift：

  • 作用：向数组的开头添加内容

  • 参数：添加的内容
  • 返回值：新数组的长度

  • 是否改变原数组：改变

    1. var colors = ['red', 'pink'];
    2. var res = colors.unshift('blue', 'green');
    3. // 原数组
    4. console.log(colors);//['blue', 'green', 'red', 'pink']
    5. // 返回值
    6. console.log(res);//4

    5)reverse 倒序

  • 作用：把数组元素反向排列

  • 参数：无
  • 返回值：返回值是排序后的新数组
  • 是否改变原数组：改变 ```javascript var ary=[1,2,3]; var res=ary.reverse(); console.log(res);//[3,2,1]; console.log(ary);//[3,2,1];
  1. <a name="YTUZa"></a>
  2. #### 6) sort 排序
  4. - 作用：把数组进行排序
  5. - 参数：无或者是一个函数
  6. - 返回值：排序后的新数组
  7. - 是否改变原数组：改变
  8. ```javascript
  9. //----------------------不传参的时候
  11. //=====>10 以内的可以排
  12. var ary=[3,2,1,6,8];
  13. ary.sort();
  15. [1, 2, 3, 6, 8]
  17. //=====> 超出10
  18.  var ary2=[1,21,5,33,26]
  19.  ary2.sort();
  20.  [1, 21, 26, 33, 5];
  22.  //---------------------------传参的时候
  23.  var ary2=[1,21,5,33,26]
  24.  ary2.sort(function(a,b){
  25.     return a-b; // 升序
  26.     return b-a; //降序
  27.  })

7）splice（增删改一体化）

  • 作用：删除/新增/修改
  • 参数：splice（n,m,…x）不能传负数
  • 返回值：删除的元素
  • 是否改变原数组：是

@1、删除

删除需要给splice传递两个参数
第一个参数：要删除的第一个元素的位置
第二个参数：要删除的元素数量

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

@2、新增

新增需要传递3个参数
第一个参数：开始的位置
第二个参数：0（要删除的元素数量）
第三个参数: 要插入的元素（任意个）

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

@3、修改

修改也需要传递3个参数
第一个参数：开始的位置
第二个参数：要删除的元素数量
第三个参数: 要插入的元素（任意个）
注意：删除的个数和新增的个数可以不一致

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

小节

思考一：删除数组最后一项，你有几种方法？

  • ary.pop()
  • ary.splice(ary.length-1,1);
  • ary.length—

思考二：在数组末尾追加新内容，你有几种方法？

  • ary.push(x);
  • ary.splice(ary.length，0，x)；
  • ary[ary.length]=x;

    8）slice

    • 作用：从原有的数组中选中特定的内容
    • 参数：可以有一个或者两个
    • 返回值：返回值是一个数组，返回的每一项是复制的项
    • 是否改变原数组：不改变

@1、如果只有一个参数，slice()会返回该索引到数组末尾的所有元素

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

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

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

@3、如果slice()的参数有负值，那么就以数组长度加上这个负数来确定位置，案例如下
长度为6，slice（-5，-1）就相当于slice(1，5)

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

@4、如果结束位置小于开始位置，则返回空数组

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

9）concat

  • 作用：实现多个数组或者值的拼接
  • 参数：数组或者值
  • 返回值：返回值是拼接后的新数组

  • 是否改变原数组：不改变

    1. var ary1 = [1, 2, 3];
    2. var ary2 = [4, 5, 6];
    3. var res = ary1.concat(ary2, "珠峰", "同学");
    4. console.log(ary1);//[1, 2, 3]
    5. console.log(res);//[1, 2, 3, 4, 5, 6, '珠峰', '同学']

    10）toString

    • 作用：可以把一个数组转换为字符串
    • 参数：无
    • 返回值：返回值是转换后的字符串
    • 是否改变原数组：不改变

  • 数组中每一个元素转为字符串，然后是使用逗号连接输出显示。

    1. var ary1 = [1, { a: 1 }, null, undefined, 3];
    2. var res = ary1.toString();
    3. console.log(ary1);//[1, {a:1},null, undefined, 3]
    4. console.log(res)//1,[object Object],,,3

    alert方法最终体现的是字符串，会调用toString()，所以alert([1,2])结果是1，2

    11）join

  • 作用：把数组通过指定的连接符，转换为字符串

  • 参数：连接符
  • 返回值：返回值是转换后的字符串

  • 是否改变原数组：不改变

    1. var ary1 = [1, 2, undefined, 3, { a: 1 }];
    2. var res = ary1.join("|");
    3. console.log(ary1);//[1, 2, undefined, 3, { a: 1 }]
    4. console.log(res)// 1|2||3|[object Object]  
    5. eval(res) //==> eval  执行计算

    12)indexOf/ lastIndexOf

    不兼容ie6-ie8；

  • 作用：获取某项在数组中(首次出现/最后出现的) 索引（也可以用来是否包含某项）

  • 参数：（n,m）
  • 参数：
    • n:检测的项
    • m:如果是indexOf 的话，就是从索引m开始检索。如果是lastIndexOf 的话，就是从索引m停止检索
  • 返回值：-1或者具体的索引值
  • 是否改变原数组：不改变 ```javascript

  • 作用：检测数组中的某项在数组中（首次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

  • 作用：检测数组中是否包含某一项
  • 参数：具体项
  • 返回值：布尔值
  • 是否修改原数组：否