# JavaScript 数组

数组的概念

  • 之前学习的变量， 一个变量只能存储一个值,如果我们想存储班级中所有学生的姓名时， 那么该如何存储呢？

    • 可以使用数组(Array)。数组可以把一组相关的数据—起存放，并提供方便的访问（获取）方式。

  • 什么是数组呢？

    • 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任何类型的元素。

数组的创建与初始化

利用 new 创建数组

1
2
3
4
    // 利用 new 创建数组
    var arr = new Array(); // 创建了一个空的数组
var arr = new Array(3); // 创建了长度为3的空数组
var arr = new Array("zs","ls","ww"); // 创建数组并初始化

用数组字面量创建数组

  • 数组的字面量是方括号［ ］
  • 声明数组并赋值称为数组的初始化
1
2
3
//利用数组字面量创建数组 []
var arr = []; // 创建了一个空的数组
var arr1 = [1, 2, 'pink老师', true]; // 创建数组并初始化

创建数组并初始化

  • 这种字面量方式创建数组,也是我们以后最多使用的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 利用数组字面量创建数组 []
var arr1 = [1, 2, 'pink老师', true];

// 1. 我们数组里面的数据一定用逗号分隔
// 2. 数组里面的数据 比如1,2， 我们称为数组元素
// 3. 获取数组元素: 数组名[索引号]  索引号从 0 开始 
console.log(arr1); // [1, 2, 'pink老师', true]
console.log(arr1[2]); // pink老师
console.log(arr1[3]); // true

var arr2 = ['迪丽热巴', '古丽扎娜', '佟丽丫丫'];
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]); // 因为没有这个数组元素 所以输出结果是 undefined

数组元素的类型

  • 01 和其它编程语言不同,如果数组对应的索引中没有存储数据，默认存储的就是 undefined
  • 02 JavaScript 中访问了数组中不存在的索引不会报错, 会返回 undefined
  • 03 JavaScript 的数组可以存储不同类型数据
1
2
3
    //数组中可以存放任意类型的数据，例如字符串，数字，布尔值等
    var arrStus = ["小白", 12, true, 28.9];
console.log(arrStus[4]); // undefined
  • 04 数组元素的存储
    • 和其它编程语言不同, JavaScript 中数组分配的存储空间不一定是连续的
    • 其它语言数组分配的存储空间都是连续的, JavaScript 数组是采用”哈希映射”方式分配存储空间
    • 什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间
    • 在浏览器中各大浏览器也对数组分配存储空间进行了优化
      • 如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间
      • 如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间

数组的索引

  • 索引下标：用来访问数组元素的序号（数组索引从0开始）。
1
2
3
//数组的索引: 用来访问数组元素的序号（数组下标从0开始）。
var arr = ["小白", "小黑", "大黄", "奇瑞"];
//索引号:     0       1       2      3
  • 数组可以通过索引来访问、设置、修改对应的数组元素， 我们可以通过arr[1] 的形式来获取数组中的元素。
1
2
3
//定义数组
var arrstus = [1, 2, 3]; // 获取数组中的第二个元素
alert(arrStus[1]); // 2
1
2
3
/* 案例:定义一个数组，里面存放星期一、星期二.... 直到星期日(共7天)，在控制台输出:星期日。*/
var week = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
console.log(week[6]); // 星期日

新增数组元素

  • 可以通过修改 length 长度来实现数组扩容的目的
  • length 属性是可读写的.
1
2
3
4
5
6
7
8
9
// 1. 新增数组元素 修改length长度 
var arr = ['red', 'green', 'blue'];
console.log(arr.length); // 3

arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 

console.log(arr); //  ['red', 'green', 'blue', empty × 2] 
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined
  • 其中索引号是 3,4 的空间没有给值，默认值就是 undefined。
  • 可以通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值，否则会覆盖掉以前的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
// 2. 新增数组元素 修改索引号 追加数组元素
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);    // ['red', 'green', 'blue', 'pink']

arr1[4] = 'hotpink';
console.log(arr1);    // ['red', 'green', 'blue', 'pink', 'hotpink']

arr1[0] = 'yellow';   // 这里是替换原来的数组元素
console.log(arr1);    // ['yellow', 'green', 'blue', 'pink', 'hotpink']

arr1 = '有点意思';
console.log(arr1);    // 有点意思  不要直接给数组名赋值,否则里面的数组元素都没有了

数组长度

  • 数组的长度就是元素的个数

  • 和其它编程语言不同, 当 JavaScript 中数组的存储空间不够时数组会自动扩容

1
2
3
4
5
6
7
let arr = new Array(3); // 定义一个长度为 3 的空数组
arr[0] = "lnj"; // 给空数组添加元素
arr[1] = "zs";
arr[2] = "ls";
arr[3] = "it666";	// 数组会自动扩容
console.log(arr); // ["lnj","zs","ls","it666"] 自动扩容
console.log(arr.length); // 4
1
2
3
4
5
var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink'];
    for (var i = 0; i <= 7; i++) {
        console.log(arr[i]);
    }
    console.log(arr.length); // 8
1
2
3
4
5
var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink'];
// 数组长度 : arr.length , 动态监测数组元素的个数
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }

清空数组

1
2
3
4
5
6
let arr = [1, 2, 3, 4, 5];
// 如何清空数组
arr = []; // 直接赋值一个空数组
arr.length = 0; // 将数组的长度设置为 0
arr.splice(0, arr.length) // 删除数组元素
console.log(arr);

遍历数组

什么是遍历数组

  • 数组中的每—项我们怎么取出来？
    • 答：可以通过“数组名［索引号］ ＂ 的方式—项项的取出来
1
2
3
4
5
// 遍历数组：就是把数组的元素从头到尾访问一次
var arr = ['red', 'green', 'blue'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

  • 怎么把数组里面的元素全部取出来？

  • 规律：

    • 从代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增,答案就是循环

  • 遍历：数组的遍历就是依次取出数组中存储的所有数据, 我们就称之为数组的遍历,就是把数组中的每个元素从头到尾都访问—次

1
2
3
4
5
6
7
8
9
10
11
12
    // 遍历数组：就是把数组的元素从头到尾访问一次
    // 1. 因为我们的数组索引号从0开始 ，所以 i 必须从 0开始  i < 3
    // 2. 输出的时候 arr[i]  i 计数器当索引号来用
    var arr = ['red', 'green', 'blue'];
    for (var i = 0; i < 3; i++) {
        console.log(arr[i]); // red green blue
    }

// 数组的长度 arr.length
    for(let i = 0; i < arr.length; i++){
        console.log(arr[i]); // red green blue
    }

【案例】遍历数组

  • 请将数组 [‘关羽’,’张飞’,’马超’,’赵云’,’黄忠’,’刘备’,’姜维’] 里的元素依次打印在控制台:
1
2
3
4
var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维']
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

【案例】求和及平均值

1
2
3
4
5
6
7
8
9
10
11
12
// 1. 求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。
// 		(1)声明一个求和变量 sum。
// 		(2)遍历这个数组，把里面每个数组元素加到 sum 里面。
// 		(3)用求和变量 sum 除以数组的长度就可以得到数组的平均值。
var arr = [2, 6, 1, 7, 4];
var sum = 0; 				// 和
var average = 0; 		// 平均值
for (var i = 0; i < arr.length; i++) {
    sum += arr[i];  // 我们加的是数组元素 arr[i] 不是计数器 i
}
average = sum / arr.length;
console.log(sum, average); // 想要输出多个变量，用逗号分隔即可

【案例】求最大值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 求数组[2,6,1,77,52,25,7]中的最大值
// 		01 声明一个保存最大元素的变量 max。
// 		02 默认最大值可以取数组中的第一个元素。
// 		03 遍历这个数组，把里面每个数组元素和 max 相比较。
// 		04 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
// 		05 最后输出这个 max
var arr = [2, 6, 1, 77, 52, 25, 7, 99];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
        max = arr[i];
    }
}
console.log('该数组里面的最大值是：' + max);

【案例】指定字符分隔数组

1
2
3
4
5
6
7
8
9
10
11
// 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串，并且用 | 或其他符号分割
// 		1.需要一个新变量用于存放转换完的字符串 str。
// 		2.遍历原来的数组，分别把里面数据取出来，加到字符串里面。
// 		3.同时在后面多加一个分隔符
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var sep = '*';
for (var i = 0; i < arr.length; i++) {
    str += arr[i] + sep;
}
console.log(str); // red*green*blue*pink*

遍历数组小结

  • 01 什么是遍历？
    • 遍历数组：就是把数组的元素从头到尾访问一次
  • 02 我们通过什么来遍历数组里面的元素？
    • for 循环
  • 03 for 里面的 i 是什么？当什么使用？for 里面的数组元素怎么写？
    • i 是计数器，当索引号使用，arr[i] 是数组元素第 i 个数组元素
  • 04 怎么获取数组的长度？
    • 使用 数组名.length (arr.length)可以访问数组的元素数量（数组长度）
  • 05 数组索引号和数组长度有什么关系？
    • 索引号从0开始，数组长度是元素个数

【案例】遍历填充数组

1
2
3
4
5
6
7
8
9
10
11
// 新建一个数组，里面存放10个整数（ 1~10）
// 		核心原理：使用循环来追加数组。
// 		1、声明一个空数组 arr。
// 		2、循环中的计数器 i 可以作为数组元素存入。
// 		3、由于数组的索引号是从0开始的， 因此计数器从 0 开始更合适，存入的数组元素要+1。
var arr = [];
for (var i = 0; i < 10; i++) {
    // arr = i; 不要直接给数组名赋值 否则以前的元素都没了
    arr[i] = i + 1;
}
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

【案例】筛选出指定值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  // 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。
  // 		1、声明一个新的数组用于存放新数据newArr。
  // 		2、遍历原来的旧数组， 找出大于等于 10 的元素。
  // 		3、依次追加给新数组 newArr。

// 方法1
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
  if (arr[i] >= 10) {
    // 新数组索引号应该从0开始 依次递增
    newArr[j] = arr[i];
    j++;
  }
}
console.log(newArr); // [77, 52, 25]
  
// 方法2 
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 刚开始 newArr.length 就是 0
for (var i = 0; i < arr.length; i++) {
  if (arr[i] >= 10) {
    // 新数组索引号应该从0开始 依次递增
    newArr[newArr.length] = arr[i];
  }
}
console.log(newArr); // [77, 52, 25]

【案例】删除指定值

1
2
3
4
5
6
7
8
9
10
11
12
// 将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。
// 		1、需要一个新数组用于存放筛选之后的数据。
// 		2、遍历原来的数组， 把不是 0 的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据)。
// 		3、新数组里面的个数， 用 length 不断累加。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] != 0) {
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr); // [2, 6, 1, 77, 52, 25, 7]

【案例】翻转数组

1
2
3
4
5
6
7
8
9
10
// 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放
// 		1、声明一个新数组 newArr
// 		2、把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)
// 		3、我们采取 递减的方式  i--
var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
    newArr[newArr.length] = arr[i]
}
console.log(newArr); // ['hotpink', 'purple', 'pink', 'blue', 'green', 'red']

【案例】数组冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 冒泡排序
// 冒泡排序．是一种算法，把一系列的数据按照一定的顺序进行排列显示,从小到大或从大到小）
// 我们可以将数组 [4, 1, 2, 3, 5] 中的元素按照从小到大的顺序进行排序，输出1,2,3,4,5
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 
    for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
        // 内部交换2个变量的值 前一个和后面一个数组元素相比较
        if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr); // [, 4, 3, 2, 1]

数组常用方法

检测是否为数组

  • instanceof 运算符，可以判断一个对象是否属于某种类型
  • instanceof 的官方解释: instanceof 运算符用于检测构造函数的 prototype属性是否出现在某个实例对象的原型链上。
  • Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 翻转数组
function reverse(arr) {
    // if (arr instanceof Array) {
    if (Array.isArray(arr)) {
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i];
        }
        return newArr;
    } else {
        return 'error 这个参数要求必须是数组格式 [1,2,3]'
    }
}
console.log(reverse([1, 2, 3])); // [3, 2, 1]
console.log(reverse(1, 2, 3)); // error 这个参数要求必须是数组格式 [1,2,3]

// 检测是否为数组
// (1) instanceof  运算符 它可以用来检测是否为数组,(实际上是检测一个对象是否是指定构造函数的实例对象)
var arr = [];
var obj = {};
console.log(arr instanceof Array); // true (检测 arr 是否为 Array 的实例对象)
console.log(obj instanceof Array); // false 

// (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

新增和删除元素

image-20220129151742023

1
2
3
4
5
6
7
8
9
// 1. push() 在数组的末尾 添加一个或者多个数组元素   push  推
// 		(1) push 是可以给数组后面追加新的元素
// 		(2) push() 参数直接写要追加的数组元素就可以了
// 		(3) push完毕之后，返回的结果是插入新元素后的数组的长度 
// 		(4) 原数组会发生变化,即往某个数组内插入新的元素,定然会改变该数组
var arr = [1, 2, 3];
var res = arr.push(4, 'pink');
console.log(res); // 5
console.log(arr); // [1, 2, 3, 4, 'pink']
1
2
3
4
5
6
7
8
9
// 2. pop() 它可以删除数组的最后一个元素  
// 		(1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// 		(2) pop() 没有参数
// 		(3) pop完毕之后，返回的结果是 删除的那个元素 
// 		(4) 原数组也会发生变化
var arr = [1, 2, "pink"];
var res = arr.pop(); // 返回的是被删除掉的那个元素,一次只能删除一个元素
console.log(res); // pink
console.log(arr); // [1, 2]
1
2
3
4
5
6
7
8
9
// 3. unshift 在数组的开头 添加一个或者多个数组元素
    // 		(1) unshift 可以在数组前面追加新的元素
    // 		(2) unshift() 参数直接写要追加的数组元素就可以了
    // 		(3) unshift完毕之后，返回的结果是插入新元素后的数组的长度 
    // 		(4) 原数组也会发生变化
    var arr = [1, 2, 3];
    var res = arr.unshift('red', 'purple');
    console.log(res); // 5
    console.log(arr); // ['red', 'purple', 1, 2, 3]
1
2
3
4
5
6
7
8
9
// 4. shift() 它可以删除数组的第一个元素
// 		(1) shift 可以删除数组的第一个元素 记住一次只能删除一个元素
// 		(2) shift() 没有参数
// 		(3) shift完毕之后，返回的结果是 删除的那个元素
// 		(4) 原数组也会发生变化  
var arr = [1, 2, "pink"];
var res = arr.shift();
console.log(res); // 1
console.log(arr); // [2, 'pink']

【案例】筛选数组元素

  • 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
1
2
3
4
5
6
7
8
9
10
// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        // newArr[newArr.length] = arr[i];
        newArr.push(arr[i]);
    }
}
console.log(newArr); //  [1500, 1200, 1800]

数组反转与排序

image-20220129151852687

1
2
3
4
// 1. reverse() 翻转数组,会修改原有的数组,返回的是经过翻转后的原数组
var arr = ['pink', 'red', 'blue'];
var result = arr.reverse();
console.log(result); // ['blue', 'red', 'pink']  
1
2
3
4
5
6
7
// 2. sort() 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function (a, b) {
    //  return a - b; 升序的顺序排列
    return b - a; // 降序的顺序排列
});
console.log(arr1); // [77, 13, 7, 4, 1]

获取元素的索引

image-20220129151953594

1
2
3
4
5
6
7
8
9
10
11
12
// 1. indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找
// 		它只返回第一个满足条件的索引号 , indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找
// 		它如果在该数组里面找不到元素，则返回的是 -1  
// var arr = ['red', 'green', 'blue', 'pink', 'blue']; //2
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue')); // -1

let arr = [1, 2, 3, 4, 5, 3];
// 参数1: 需要查找的元素
// 参数2: 从什么位置开始查找
let res = arr.indexOf(3, 4); // 从索引号为 4 的位置开始往后查找元素 3 
console.log(res); // 5
1
2
3
4
5
6
7
8
9
10
    // 2. lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面往前开始查找
// 		lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
    var arr = ['red', 'green', 'blue', 'pink', 'blue'];
    console.log(arr.lastIndexOf('blue')); // 4

    let arr = [1, 2, 3, 4, 5, 3];
    // 参数1: 需要查找的元素
    // 参数2: 从什么位置开始查找
    let res = arr.lastIndexOf(3, 4); // 从索引号为 4 的位置开始往前查找元素 3 
    console.log(res); // 2
1
2
3
4
5
6
    // 3.如何判断数组中是否包含某个元素,返回值为 true / false
// 	也可以通过 indexOf / lastIndexOf 是否等于 -1 ,判断一个数组中是否包含有某个元素,返回 -1 就是数组中没有这个元素
    let arr = [1, 2, 3, 4, 5];
    // let res = arr.includes(8);
    let res = arr.includes(4);
    console.log(res); // true

【案例】数组去重

  • 有一个数组 [‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]，要求去除数组中重复的元素。

  • 案例分析:

    • ① 目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去。
    • ② 核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
    • ③ 我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) , 如果返回时 -1 就说明新数组里面没有该元素

  • 旧数组 [‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]

  • 新数组 [ ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
// 		1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
// 		2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加，否则不添加。
// 		3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 -1 就说明 新数组里面没有改元素
// 封装一个 去重的函数 unique:独一无二的 
function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
// var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
var demo = unique(['blue', 'green', 'blue'])
console.log(demo); //  ['blue', 'green']

转字符串与分隔元素

image-20220129152131869

1
2
3
4
5
6
// 数组转换为字符串 
// 1. toString() 将数组转换为字符串,返回的字符串中是没有括号的
let arr = [1, 2, 3, 4, 5];
let str = arr.toString();
console.log(str); // 1,2,3,4,5
console.log(typeof str); // string
1
2
3
4
5
6
7
8
9
10
11
12
13
// 2. join(分隔符) 
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink  不写参数,默认用逗号分隔
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink

// 3.如何将数组转换成指定格式字符串
// 	join 方法默认情况下如果没有传递参数, 就是调用toString();
// 	join 方法如果传递了参数, 就会将传递的参数作为元素和元素之间的连接符号
let arr = [1, 2, 3, 4, 5];
let str = arr.join("+");
console.log(str); // 1+2+3+4+5
console.log(typeof str); // string

数组的拼接与截取

image-20220129152147091

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    // 1.1 concat() 拼接数组,返回的是一个经过拼接后的新数组
    var arr2 = [1, 2, 3];
    var arr3 = ['green', 'blue', 'pink'];
    var res = arr2.concat(arr3);
    console.log(res); // [1, 2, 3, 'green', 'blue', 'pink']

// 1.2 注意点: 数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接
    let arr1 = [1, 3, 5];
    let arr2 = [2, 4, 6];
    let res = arr1 + arr2;
    console.log(res); // 1,3,52,4,6

    // 1.3 使用扩展运算符将两个数组拼接为一个数组
    // 注意点: 扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
    //         扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
    let arr1 = [1, 3, 5];
    let arr2 = [2, 4, 6];
    let res = [...arr1, ...arr2]; // 相当于: let res = [1, 3, 5, 2, 4, 6];
    console.log(res); // [1, 3, 5, 2, 4, 6]
    // 注意点: 不会修改原有的数组, 会生成一个新的数组返回给我们
    console.log(arr1); //  [1, 3, 5]
    console.log(arr2); //  [2, 4, 6]
1
2
3
4
5
6
7
8
9
10
11
// 2.1 slice() 数组截取
var arr4 = [1, 2, 3, 4, 5, 6, 7, 8];
var res2 = arr4.slice(0, 2); // 从索引值0位开始截取,截取到索引值为2,但是不包括2位置
console.log(res2); // [1, 2]  返回的是截取到的数组
console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8] 不会更改原数组

// 2.2 slice方法是包头不包尾(包含起始位置, 不包含结束的位置)
let arr = [1, 2, 3, 4, 5];
let res = arr.slice(1, 3)
console.log(res); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
1
2
3
4
5
6
   // 3. splice() 删除数组元素 
   var arr5 = [1, 2, 3, 4, 5, 6, 7, 8];
   var res3 = arr5.splice(0, 3);// 参数:开始删除的索引 要删除的个数
   console.log(res3); // [1, 2, 3]  返回的是被删除的数组元素组成的数组
   console.log(arr5); // [4, 5, 6, 7, 8]  会更改原数组
arr.splice(0, arr.length);	// 清空整个数组

数组的解构赋值

  • 01 数组的完全解构
1
2
3
4
5
let arr = [1, 3, 5];
let [a, b, c] = arr; // 数组的解构赋值
console.log("a = " + a); // 1
console.log("b = " + b); // 3
console.log("c = " + c); // 5
  • 02 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构
1
2
3
4
5
6
7
// let [a, b, c] = [1, 3, 5];         // 1 3 5
// let [a, b, c] = [1, 3, [2, 4]];    // 1 3 2,4 报错 d is not defined
let [a, b, [c, d]] = [1, 3, [2, 4]];  // 1 3 2 4
console.log("a = " + a); // 1
console.log("b = " + b); // 3
console.log("c = " + c); // 2
console.log("d = " + d); // 4
  • 03 在数组的解构赋值中, 左边的个数可以和右边的个数不一样
1
2
3
let [a, b] = [1, 3, 5];
console.log("a = " + a); // 1
console.log("b = " + b); // 3
  • 04 在数组的解构赋值中, 右边的个数可以和左边的个数不一样
1
2
3
4
let [a, b, c] = [1];
console.log("a = " + a); // 1
console.log("b = " + b); // undefined
console.log("c = " + c); // undefined
  • 05 在数组的解构赋值中,如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值
1
2
3
4
let [a, b = 666, c = 888] = [1];
console.log("a = " + a); // 1
console.log("b = " + b); // 666
console.log("c = " + c); // 888
  • 06 在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么设置的默认值会被覆盖
1
2
3
let [a, b = 666] = [1, 3, 5];
console.log("a = " + a); // 1
console.log("b = " + b); // 3
  • 07 在数组的解构赋值中, 还可以使用ES6中新增的扩展运算符来打包剩余的数据,返回的是一个数组
    • 在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后
1
2
3
4
5
// ES6中新增的扩展运算符: ...
// let [a, b] = [1, 3, 5];
let [a, ...b] = [1, 3, 5];
console.log("a = " + a); // a = 1
console.log(b);// [3, 5]

二维数组

  • 1 什么是二维数组?

    • 二维数组就是数组的每一个元素又是一个数组, 我们就称之为二维数组

  • 2 如何操作二维数组?

    • 2.1 如何从二维数组中获取数据
      • 数组名称[二维数组索引]; 得到一个一维数组
      • 数组名称[二维数组索][一维数组索引]; 得到一维数组中的元素
    • 2.2 如何往二维数组中存储数据
      • 数组名称[二维数组索引] = 一维数组;
      • 数组名称[二维数组索引][一维数组索引] = 值;
1
2
3
4
5
6
7
8
let arr = [1, 3, 5]; // 一维数组
let arr = [[1, 3], [2, 4]]; // 二维数组

// 注意点: 在定义二维数组的时候, 将来需要存储多少个一维数组, 就写上多少个[]即可
let arr = [[],[]];
arr[0] = [1, 3];
arr[1][0] = 2;
console.log(arr); // [Array(2), Array(1)]
1
2
3
4
5
6
7
8
9
// 遍历二维数组
let arr = [[1, 3], [2, 4]];
for (let i = 0; i < arr.length; i++) {
    let subArray = arr[i];
    // console.log(subArray);
    for (let j = 0; j < subArray.length; j++) {
        console.log(subArray[j]); // 1 3 2 4
    }
}

数组的三个高阶方法

for of 实现元素处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 定义一个数组
const nums = [10, 20, 111, 222, 444, 40, 50]

// 需求1: 取出所有小于 100 的数字
let newNums = []
for (let item of nums) {
  if (item < 100) {
    newNums.push(item)
  }
}
console.log(newNums) // [ 10, 20, 40, 50 ]

// 需求2: 在需求1的结果的基础上,将数组的每一项都乘以 2
let newNums2 = []
for (let item of newNums) {
  newNums2.push(item * 2)
}
console.log(newNums2) // [ 20, 40, 80, 100 ]

// 需求3: 在需求2的结果的基础上,将数组的每一项进行相加求和
let total = 0
for (let item of newNums2) {
  total = total + item
}
console.log(total) //240

filter 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 需求1: 取出所有小于 100 的数字
// 需求2: 在需求1的结果的基础上,将数组的每一项都乘以 2
// 需求3: 在需求2的结果的基础上,将数组的每一项进行相加求和

// 定义一个数组
const nums = [10, 20, 111, 222, 444, 40, 50]

// 需求1: 取出所有小于 100 的数字
// filter 方法:
//   filter 中的回调函数,必须返回一个 Boolean 值
//          true : 当返回的是 true 时,函数内部会自动将这次回调的 item 加入到新的数组 nuwNums 中
//          false : 当返回的是 false 时,函数内部会过滤掉这次的 item
// 对数组 nums 进行遍历,数组中有多少个元素,就会执行多少次回调方法,形参 item 为遍历的数组中的每一项
let nuwNums = nums.filter(function (item) {
  return item < 100
})
console.log(nuwNums) // [ 10, 20, 40, 50 ]

map 方法

1
2
3
4
5
6
7
8
// 需求2: 在需求1的结果的基础上,将数组的每一项都乘以 2
// map 方法:
//  对数组 nuwNums 进行遍历,数组中有多少个元素,就会执行多少次回调方法,形参 item 为遍历的数组中的每一项
//  新数组 newNum2 中的每一项,由 map 方法中的回调的返回值决定
let newNum2 = nuwNums.map(function (item) {
  return item * 2
})
console.log(newNum2) //[ 20, 40, 80, 100 ]

reduce 方法

1
2
3
4
5
6
7
8
9
10
11
12
// 需求3: 在需求2的结果的基础上,将数组的每一项进行相加求和
// reduce 方法:
//    参数一: 遍历时执行的回调
//            回调中的形参 preValue: 第一次遍历时,值为初始化 0 , 即 reduce 方法的参数二,
//																以后每次遍历时,该值等于每次遍历时回调的返回值
//            回调中的形参 item : 为每次遍历数组时的每一项数组元素
//    参数二: 初始值
// 遍历的数组由多少项,就会执行多少次回调函数
let total1 = newNum2.reduce(function (preValue, item) {
  return preValue + item
}, 0)
console.log(total1) // 240

对以上方法的综合写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义一个数组
const nums = [10, 20, 111, 222, 444, 40, 50]

// 对以上三个需求的综合写法
let total2 = nums
  .filter(function (item) {
    return item < 100
  })
  .map(function (item) {
    return item * 2
  })
  .reduce(function (preValue, item) {
    return preValue + item
  }, 0)
console.log(total2) // 240