JavaScript 基础（四）

数组

1. 数组的概述

数组就是表示一系列有序数据的集合

表示方法

[]：只要见到方括号就是一个数组

• 数组中每个元素之间用逗号隔开
• 通过下标可以得到数组中的一项（下标index从0开始），并可以进行赋值操作

var arr = [1, '2', '您好', true, 5];
console.log(arr[3]);
// true

2. 数组长度

数组的数据类型： object 引用类型

引用类型一般都有自己的属性( length )和方法( push() pop() )，通过打点（ . ）的方式进行调用

数组的长度用length属性表示，直接打点调用

数组的最后一项：arr[arr.lenght-1]

var arr = [1, 2, 3, 6, 8, 5, 9, 0];
// 输出数组的长度
console.log(arr.length); 
// 8

// 输出数组最后一项
console.log(arr[arr.length-1]);
// 0

// 数组中的某一项赋值
arr[2] = 4;
console.log(arr[2]);
// 4

// 输出数组中不存在的某一项
console.log(arr[9]);
// undefined

// 增大数组的长度
arr[20] = 20
console.log(arr[20]);
// 20
console.log(arr.length);
// 21

// 减小数组的长度
arr.length = 3;
console.log(arr);
// [ 1, 2, 4 ]

3. 数组遍历

遍历： 通过某种方法得到数组中的每一项

• for 循环

  var arr = [1, 2, '你好', '', function(){}, 12, 23, null, false];
  // for循环遍历输出数组中每一项
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    console.log(element);
  }
  // 1 2 你好 '' [Function] 12 23 null false
  

• map 方法

  var arr = [1, 2, '你好', '', function(){}, 12, 23, null, false];
  // map方法遍历输出每一项
  arr.map(item => {
    console.log(item);
  })
  // 1 2 你好 '' [Function] 12 23 null false
  

案例：arr = [2,4,6,7,8];求数组中每一项的阶乘然后求和。

var arr = [2, 4];

var sum = 0;
for (let i = 0; i < arr.length; i++) {
  sum += jiecheng(arr[i])
}
console.log(sum);
// 26

function jiecheng(x) {
  var cheng = 1
  for (let i = 1; i <= x; i++) {
    cheng *= i
  }
  return cheng;
}

4. 数组的首尾操作方法

pop()：删除数组的最后一项 无参数，返回值为删除的项的值

push()：在数组的最后添加数据 参数：需要添加的数据 多项用逗号隔开 返会添加后数组的长度

shift()：删除数组的第一项 无参数 返回值为删除的项的值

unshift() ： 在数组的开头添加数据 参数：需要添加的数据 多项用逗号隔开 返会添加后数组的长度

var arr = [1, 2, 3, 4, 5]
// pop() 删除最后一项 返回删除的值
console.log(arr.pop());
// 5

// push() 末尾添加数据 返回添加后数组的长度
console.log(arr.push(5, 6, [7, 8]));
// 7
console.log(arr);
// [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]

// pop() 删除第一项 返回删除的值
console.log(arr.shift());
// unshift() 开头添加数据 返回添加后数组的长度
console.log(arr.unshift(9));
// 7
console.log(arr);
// [ 9, 2, 3, 4, 5, 6, [ 7, 8 ] ]

应用

// 把数组的最后一项变成第一项
var arr1 = [2, 3, 4];
arr1.unshift(arr1.pop());
console.log(arr1);
// [ 4, 2, 3 ]

// 把数组的第一项变成最后一项
var arr2 = [2, 3, 4];
arr2.push(arr2.shift());
console.log(arr2);
// [ 3, 4, 2 ]

5. 数组的合并与拆分

• 数组的合并

  concat()： 用于连接两个或多个数组，不改变现有数组，返回一个新数组

  var arr1 = [1, 2, 3];
  var arr2 = [4, 5, 6];
  var arrNew = arr1.concat(arr2);
  console.log(arrNew);
  // [ 1, 2, 3, 4, 5, 6 ]
  console.log(arr1);
  // [ 1, 2, 3 ]
  
  var arrNew2 = arr1.concat(4, 5, [6, 7]);
  console.log(arrNew2);
  // [ 1, 2, 3, 4, 5, 6, 7 ]
  

  注意：数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

• 数组的拆分

  slice() ： 可从已有的数组中返回选定的元素。

  语法：arrayObject.slice(start,end)

  返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

  start ： 必需 从何处开始选取（包含），若是负数，那么从数组尾部开始算起来的位置（-1指得是最后一个元素）

  end ： 可选 从何处结束选取（不包含），若没有该参数则从start到数组结束，若参数为负数那么从数组尾部开始算起的元素

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  
  var arrNew = arr.slice(2, 5);
  // 得到一个新数组
  console.log(arrNew);
  // [ 3, 4, 5 ]
  // 新数组的长度为end-start
  console.log(arrNew.length);
  // 3
  
  var arrNew1 = arr.slice(-6, -2);
  console.log(arrNew1);
  // [ 3, 4, 5, 6 ]
  
  // 只有start且为正数
  var arrNew2 = arr.slice(3);
  console.log(arrNew2);
  // [ 4, 5, 6, 7, 8 ]
  
  // 只有start且为负数
  var arrNew3 = arr.slice(-6);
  console.log(arrNew3);
  // [ 3, 4, 5, 6, 7, 8 ]
  

  ​ 注：该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

6. 数组的删除、插入、替换

splice() ： 向/从数组中添加/删除项目，然后返回被删除的项目。

注： 该方法会改变原始数组

语法： arrayObject.splice(index,howmany,item1,.....,itemX)

index: 必需 整数 规定添加/删除项目的位置，使用负数可从数组结尾处规定位置

howmany: 必需 要删除的项目数量 如果设置为 0，则不会删除项目

item1, ..., itemX: 可选 向数组添加的新项目

返回值： 由删除元素组成的数组，若没有，空数组，源时数组发生改变

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 删除
var res1 = arr.splice(2, 3);
console.log(res1);
// [ 3, 4, 5 ]
console.log(arr);
// [ 1, 2, 6, 7, 8 ]

// 插入
var res2 = arr.splice(2, 0, 23, 34, '您好');
console.log(res2);
// []
console.log(arr);
// [ 1, 2, 23, 34, '您好', 6, 7, 8 ]

// 替换
var res3 = arr.splice(2, 3, 100, 101);
console.log(res3);
// [ 23, 34, '您好' ]
console.log(arr);
// [ 1, 2, 100, 101, 6, 7, 8 ]

7. 数组的倒序和排序

• 倒序

  reverse() ： 颠倒数组元素的顺序

  var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  // 倒序
  console.log(arr.reverse());
  // [ 8, 7, 6, 5, 4, 3, 2, 1 ]
  

• 排序

  sort() ： 用于对数组的元素进行排序。

  语法：arrayObject.sort(sortby)

  参数： sortby: 可选 规定排序顺序 必须是函数; 若无参数，把元素转换城字符串，按照字符编码的顺序进行从小到大排序（数字0-9<大写字母A-Z<小写字母a-z）

  // 无参数
  var arr = [12, 2, 'AB', 4, 5, null, 'x', 'a'];
  // 倒序
  console.log(arr.sort());
  // [ 12, 2,  4, 5, 'AB', 'a', null, 'x' ]
  

  参数（函数）: 该函数要比较两个值，返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

  • 升序
    • 若 a > b，则返回一个大于 0 的值。
    • 若 a = b，则返回 0。
    • 若a < b，返回一个小于 0 的值。
  • 降序序
    • 若 a > b，则返回一个小于 0 的值。
    • 若 a = b，则返回 0。
    • 若a < b，返回一个大于 0 的值。

  var arr = [12, 34, 56, 4, 5, 100, 3, 35];
  console.log(arr.sort(compareFun1));
  var arr = [12, 34, 56, 4, 5, 100, 3, 35];
  console.log(arr.sort(compareFun2));
  
  // 升序函数
  function compareFun1(a, b) {
    if (a > b ) {
      return 1;
    } else if (a === b) {
      return 0;
    } else {
      return -1
    }
  }
  
  // 降序函数
  function compareFun2(a, b) {
    if (a > b ) {
      return -1;
    } else if (a === b) {
      return 0;
    } else {
      return 1
    }
  }
  

8. 数组转化成字符串

join(separator) ： 用于把数组中的所有元素放入一个字符串

参数： 可选 指定要使用的分隔符 如果省略该参数，则使用逗号作为分隔符。

返回值： 返回一个字符串。该字符串是通过把数组的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

var arr = ['001', '002', '003', '006', '017'];
console.log(arr.join());
// 001,002,003,006,017
console.log(arr.join('.'));
// 001.002.003.006.017