JavaScript学习笔记——9、数组

  大家好，我是阿赵。继续学习JavaScript，这次学习一下数组的用法。

一、 数组的基础使用

1、 什么是数组

  普通的变量，一个变量能存一个值。如果想把多个变量按照顺序存储起来，就可以使用数组。
  一个数组里面包含了多个元素，然后元素的需要称为“下标”，我们可以通过下标从数组里面把元素取出。

2、声明数组

  声明数组比声明普通类型要复杂一些，比如：

let arr = []

  用一个中括号表示数组
  或者一开始就给数组赋值：

let arr = [1,2,3]

3、数组的取值

  先看一个例子：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}    

  结果：

  从这个例子可以看出4点：

1. 数组可以通过循环语句来遍历，比如for语句
2. 数组的下标是从0开始的
3. 取下标对应的值可以直接“数组[下标]”，比如例子里面的arr[i]
4. 取数组的长度可以使用“数组.length”，比如例子里面的arr.length
     再看这个例子：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < arr.length; i++) {
  arr[i] *= 2;
  console.log(arr[i]);
}   

  结果：

  这里可以看出，通过“数组[下标]”可以直接给数组里面某个项赋值，比如例子里面的arr[i]*=2，arr[i]就是一个正常变量的使用。
  这里需要注意一个问题，先看例子：

let arr = [];
arr[2] = 1;
arr[4] = 3;
arr[7] = 5;
console.log(arr);
console.log(arr[6]);

结果

  从结果可以看出，数组的长度，是以已经赋值的最大下标来计算的。如果前面有没有赋值的项，将会以undefined值来代替。

4、新增

  向数组里面新增元素，有2个方法：

1.push

语法：数组.push(元素1、元素2、……元素n)
作用：将1个或多个元素添加到数组的末尾，并返回该数组的新长度。
举例：

let arr = [1, 2, 3, 4, 5];
arr.push(6, 7, 8, 9, 10);
console.log(arr);

结果：

  可以看到，[6,7,8,9,10]被新增到了原来数组的最后面了。

2.unshift

语法：数组.unshift(元素1、元素2、……元素n)
作用：将1个或多个元素添加到数组的开头，并返回该数组的新长度。
举例：

let arr = [1, 2, 3, 4, 5];
arr.unshift(6, 7, 8, 9, 10);
console.log(arr);

结果：

  可以看到，[6,7,8,9,10]被插入到原数组的最前面了。

5、删除

  从数组里面删除元素，有3个方法。

1.pop

语法：数组.pop()
作用：从数组中删除最后一个元素，并且返回该元素的值。
举例：

let arr = [1, 2, 3, 4, 5];
let a = arr.pop();
console.log(a);
console.log(arr);

结果：

  可以看到，变量a是从arr里面pop出来的最后一位，值是5。然后原数组arr就少了最后一个值，变成了长度4。

2.splice

语法：数组.splice(start,deleteCount)
作用：从数组指定一个开始位置，删除指定数量的元素，并返回被删除的部分的新数组。
举例：

let arr = [1, 2, 3, 4, 5];
let a = arr.splice(0, 2);
console.log(a);
console.log(arr);

结果：

  可以看到，我指定了从数组arr里面的位置0开始，删除2个元素，所以返回了变量a作为新的数组，包含了arr的前2个元素，而arr就剩下了3个元素了。

3.shift

语法：数组.shift()
作用：从数组里面删除第一个元素，并返回该元素的值。
举例：

let arr = [1, 2, 3, 4, 5];
let a = arr.shift();
console.log(a);
console.log(arr);

结果：

  可以看到，变量a是从数组arr里面shift出来的第一个元素，然后原数组arr就剩下后面4个元素了。

二、 数组的基础用法举例

1、 数组求和

代码：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}
console.log(sum);

结果：

2、 数组求平均值

代码：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}
let average = sum / arr.length;
console.log(average);

结果：

3、 数组求最大值

代码：

let arr = [1, 9, 6, 3, 4, 7, 8, 2, 10, 5];
let maxValue = arr[0];
for (let i = 1; i < arr.length; i++) {
  if (arr[i] > maxValue) {
    maxValue = arr[i];
  }
}
console.log(maxValue);

结果：

4、 翻转数组

方法1
  使用push或者unshift，把旧数组的值推入新数组
代码：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2.unshift(arr[i]);
}
console.log(arr2);

结果

方法2
指定下标给新数组赋值
代码：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2[arr.length - i - 1] = arr[i];
}
console.log(arr2);

结果：

5、 数组排序

冒泡排序法
代码：

let arr = [1, 9, 6, 3, 4, 7, 8, 2, 10, 5];
for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr.length; j++) {
    if (arr[i] < arr[j]) {
      let temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
  }
}
console.log(arr);

结果：

三、 数组常用方法介绍

1、 join

J  oin可以把数组中所有的元素合并成一个字符串，并用连接符连接。
例子：

  const arr = [1, 2, 3, 4, 5]
  const str = arr.join("-")
  console.log(str)

结果：

2、 find

  find可以在数组里面根据条件查找，直到找到第一个符合条件的结果，如果没有符合的结果，则返回undefined。
例子：

  const arr = [1, 2, 3, 4, 5]
  const result = arr.find(function (item, index) {
    if (item > 3) {
      return true;
    }
  })
  console.log(result);

结果：

  可以看到，给出的条件是要大于3，所以第一个大于3的数就是4了。

3、 filter

  filter和find类似，都是给出条件在数组里面查找，但find找的是第一个符合条件的成员元素，而filter是返回所有符合条件的元素的数组。
例子：

  const arr = [1, 2, 3, 4, 5]
  const result = arr.filter(function (item, index) {
    if (item > 3) {
      return true;
    }
  })
  console.log(result);

结果：

  返回了一个数组，里面有2个值，是4和5，都是符合条件大于3的。

4、 every

  every可以用于检查数组里面是不是所有的元素都符合条件，如果都符合就返回true，否则返回false。
例子:

const arr = [1, 2, 3, 4, 5]
  const result = arr.every(function (item, index) {
    if (item > 3) {
      return true;
    }
  })
  console.log(result);

结果：

  由于给出的条件是要所有元素都大于3，明显数组里面前3个数都不符合条件，所以返回了false。

5、 some

some和every的作用都是判断数组里面的条件是否符合，和every不同，some是只要其中有一个元素符合条件，就会返回true
例子：

  const arr = [1, 2, 3, 4, 5]
  const result = arr.some(function (item, index) {
    if (item > 3) {
      return true;
    }
  })
  console.log(result);

结果：

  由于4和5都大于3，所以这里返回true

6、 concat

concat可以合并2个数组成为一个新的数组返回。
例子：

  const arr1 = [1, 2, 3, 4, 5];
  const arr2 = [6, 7, 8, 9, 10];
  const arr = arr1.concat(arr2);
  console.log(arr);

结果：

7、 sort

  sort可以数组进行排序。
例子：

  const arr = [1, 22, 13, 49, 52, 12, 11, 10, 100, 1000];
  arr.sort((a, b) => {
    return a - b;
  });
  console.log(arr);

结果：

  注意，sort是直接修改原数组

8、 reverse

  reverse可以翻转数组。
例子

  const arr = [1, 2, 3, 4, 5];
  arr.reverse();
  console.log(arr);

结果：

  同样的，reverse是修改原数组。

9、 findIndex

  findIndex可以在数组里面查找某个值第一次出现的下标。
例子：

  const arr = [1, 2, 3, 4, 5, 3];
  const ind = arr.indexOf(3);
  console.log(ind);

结果：

  注意，下标是从0开始的。

10、 map

  使用map遍历数组处理数据，并返回新的数组。
比如：

  const arr = [1, 2, 3, 4, 5]
  const newArr = arr.map(function (item, index) {
    return `第${index + 1}个元素是：` + item;
  })
  console.log(newArr)

结果：

11、 reduce

  reduce是累计器，返回累计处理结果，常用于求和。
例子：

  const arr = [1, 2, 3, 4, 5];
  const total = arr.reduce(function(a, b) 
  { 
    return a + b
  });
  console.log(total);

结果：

  这里reduce的回调函数里面的a和b，a代表的是上一次的返回结果，b代表这一次进入的值。第一个进入的值，由于没有上一次的结果，所以a是0；
  然后累加函数还可以指定初始值，比如：

  const arr = [1, 2, 3, 4, 5];
  const total = arr.reduce(function (a, b) {
    return a + b
  }, 100);
  console.log(total);

结果：

  这里因为在reduce方法传入了100的初始值，所以第一次进入回调时，a将会是100.
  如果要把reduce的回调写成箭头函数，是这样：

btn1.onclick = function () {
  const arr = [1, 2, 3, 4, 5];
  const total = arr.reduce((a, b) => a + b, 100);
  console.log(total);