慕课网web前端工程师2021视频课程javascript学习路径&笔记分享(3)

本节课主要是围绕数组展开学习，需要掌握的知识点如下：

• 数组是什么？应该如何定义？
  数组是有序的元素序列，属于对象类型。有三种定义方式，最常见的是[]包围。
  
  

• 如如何检测数组类型？
  Array.isArray(数组变量名)
  
  

• 数组有哪些常用方法？
  .push 在数组末尾添加
  .pop 在数组的末尾删除并记录
  .unshift 在数组的头部添加
  .shift 在数组的头部删除并记录
  .splice 在数组中任意位置新增、删除、替换项
  .slice 截取数组内容(不会更改原数组内容)
  .join 使数组转为字符串
  .split 使字符串转为数组
  .indexOf 在数组中查找某个内容，返回值为数组下角标，若找不到则返回-1
  .includes 在数组中查找某个内容，返回值为boolean值，查询到返回true，查不到返回flase
  
  

• 数组的遍历相关算法、去重和随机样本、冒泡排序

• 基本类型值和引用类型值的区别

• 实现浅克隆
  这三个知识点内容较多，在笔记下方
  
  

数组的定义方法

数组在浏览器打印时有时第一遍不会显示出来，刷新一下即可

// 数组的定义方法1
var arr1 = [33, 44, 55, 66];
// 数组的定义方法2
var arr2 = new Array(33, 44, 55, 66);
// 数组的定义方法3
var arr3 = new Array(4);

检测数组类型的方法

var arr1 = [33, 44, 55, 66];
console.log(Array.isArray(arr1));

访问数组的项

var arr = ['A', 'B', 'C', 'D'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

// 访问没有的项，会出现undefine;
console.log(arr[4]);
console.log(arr[-1]);

// 可以直接输出数组的长度，也可以通过数组的总长度-1，输出数组的最后一项，其他以此类推；
console.log(arr.length);
console.log(arr[arr.length - 1]);

通过直接访问，更改数组项

var arr = ['i', 'm', 'o', 'o', 'c'];
// 将数组第2项o，改为大写O
arr[2] = arr[2].toUpperCase();
// 增加数组第六项为A，此时第5项为空，将设置为undefine
arr[6] = 'A';
console.log(arr);

数组的遍历方法

var arr = [34, 3245, 345, 234, 345, 67, 45, 345, 324];
// 使用for循环输出数组内的所有项
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

数组的常用方法示例

数组的头尾操作

// 定义arr数组
var arr = [22, 33, 44, 55];
// 在数组末尾添加
arr.push(66);
console.log(arr);

// 在数组的末尾删除并记录
var item = arr.pop();
console.log(arr);
console.log(item);

// 在数组的头部添加
arr.unshift(11);
arr.unshift(0);
console.log(arr);

// 在数组的头部删除并记录
var item = arr.shift();
console.log(arr);
console.log(item);

splice在数组中任意位置新增、删除、替换项

var arr = [0, 1, 2, 3, 4, 5];
// 新增操作：在数组中第2个下标位前，新增44、55、66、77
arr.splice(2, 0, 44, 55, 66, 77);
console.log(arr);

var arr = [0, 1, 2, 3, 4, 5];
// 替换并新增操作：在数组中第三个下标位前，从第三个下标位起的后2项(第三、第四)，将3, 4替换为66, 77, 88, 99
arr.splice(3, 2, 66, 77, 88, 99);
console.log(arr);

var arr = [0, 1, 2, 3, 4, 5];
// 删除操作：删除第二个下标位的内容
arr.splice(2, 1);
console.log(arr);

// 不论替换还是删除，splice方法都会以数组形式记录下被替换或删除的内容
var arr = [0, 1, 2, 3, 4, 5];
var items = arr.splice(3, 2, 66, 77, 88, 99);
console.log(arr);
console.log(items);

截取数组的slice方法

slice方法不会更改原数组内容，需要将改变后的内容加入一个新的变量容器中储存；

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];
// 截取从第二个下标开始，到第五个下标内的内容，不包括第五个
var ChildArr1 = arr.slice(2, 5);
console.log(ChildArr1);
// 截取从第二个下标开始后的所有项
var ChildArr2 = arr.slice(2);
console.log(ChildArr2);
// 截取从第二个下标开始，一直到倒数第一个下标的内容
var ChildArr3 = arr.slice(2, -1);
console.log(ChildArr3);

数组的格式转换方法

join()方法使数组转为字符串，split()方法使字符串转为数组，使用jpin&split方法时('')，空字符默认为，号

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

// 将数组转为字符串，并去除, 链接
var joinArr = arr.join('');
console.log(joinArr);

// 将字符串转为数组，并以, 分割
var splArr = joinArr.split('');
console.log(splArr);

// 用split方法将数组转为字符串，再用reverse方法将数组逆序排列，最后再用join方法将数组转为字符串
// reverse方法只能用于数组，不能用于字符串
var revArr = JoinArr.split('').reverse().join('');
console.log(revArr);

数组内容的查询方法：indexOf和includes

// indexOf在数组中查找某个内容，能查询到则返回该内容的下角标，查找到多个则返回第一个的下角标，找不到返回-1
var indexOfArr = arr.indexOf('C');
console.log(indexOfArr);

// includes在数组中查找某个内容，能查询到返回true，查不到返回flase
// includes查询时不会考虑在第几个下标位，也不会考虑查询到多少个，有就是true，没有就是flase
var includesArr = arr.includes('C');
console.log(includesArr);

数组操作的经典案例

求数组的总和和平均数

var arr = [3, 5, 3, 2, 1, 1];
// 累加器
var sum = 0;
// 遍历数组，每遍历一个数字，就要把这个数字累加到累加器中
for (var i = 0; i < arr.length; i++) {
  sum += arr[i];
}

console.log(sum);
console.log(sum / arr.length);

求数组的最大值和最小值

var arr = [3, 4, 88, 3, 1];
// 定义两个变量，max表示当前寻找到的最大值，默认是arr[0]，min表示当前寻找到的最小值，默认是arr[0]
var max = arr[0];
var min = arr[0];

// 遍历数组，从下标为1的项开始遍历
for (var i = 1; i < arr.length; i++) {
  // 如果你遍历的这项，比当前最大值大，那么就让当前最大值成为这个项
  if (arr[i] > max) {
    max = arr[i];
  } else if (arr[i] < min) {
    // 否则如果你遍历的这项，比当前最小值小，那么就让当前最小值成为这个项
    min = arr[i];
  }
}
console.log(max, min);

数组去重

var arr = [1, 1, 1, 2, 2, 3, 3, 3, 2, 1];
// 结果数组
var result = [];
// 遍历原数组
for (var i = 0; i < arr.length; i++) {
  // 判断遍历到的这项是否在结果数组中，如果不在就推入
  // includes方法用来判断某项是否在数组中
  if (!result.includes(arr[i])) {
    result.push(arr[i]);
  }
}
console.log(result);

随机样本：随机获取数组内3个不相同的数

var arr = [3, 6, 10, 5, 8, 9];
// 结果数组
var result = [];
// 遍历原数组
for (var i = 0; i < 3; i++) {
  // 随机选择一项的下标，数组的下表0~arr.length - 1;
  // 之前学习过一个random的公式，[a,b]区间的随机数是parseInt(Math.random() * (b-a+1)) + a;
  var n = parseInt(Math.random() * arr.length);
  // 把这项推入结果数组
  result.push(arr[n]);
  // 删除这项，防止重复被随机到
  arr.splice(n, 1);
}
console.log(result);

冒泡排序

n个数字，共需要比较n-1遍，比较总次数为n(n-1)/2次

var arr = [6, 2, 9, 3, 8, 1, 45, 23, 45, 49];
// 一趟一趟比较，趟数序号就是i
for (var i = 1; i < arr.length; i++) {
  // 内层循环负责两两比较
  for (var j = arr.length - 1; j >= i; j--) {
    // 判断项的大小
    if (arr[j] < arr[j - 1]) {
      // 这一项比前一项还小了，那么就要交换两个变量的位置
      // 定义一个临时储存项，方便数组当前位与前一位互换位置
      var temp = arr[j];
      arr[j] = arr[j - 1];
      arr[j - 1] = temp;
    }
  }
  // console.log(arr);
}
console.log(arr);

基本类型和引用类型

不同之处：
基本类型被复制时，两个变量a、b是完全独立的，被复制变量a改变时不会更改已复制的新值b；
引用类型被复制时，被复制变量a改变时会同时更改已复制的新值b；


详细解释：
1）原始值：在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。
2）引用值：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。
这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了。

二维数组的遍历方法

var matrix = [
  [11, 33, 55],
  [22, 33, 44],
  [36, 49, 52],
  [56, 10, 23]
];
// 循环输出二维数组中的每一个项
for (var i = 0; i < matrix.length; i++) {
  for (var j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

深克隆与浅克隆

本节课暂时只提到浅克隆，深克隆课程在后续课程中

var arr1 = [1, 2, 3, 4, [6, 9, 4]];
// 结果数组
var result = [];
// 遍历原数组中的每一项，把遍历到的项推入到结果数组中
for (var i = 0; i < arr1.length; i++) {
  result.push(arr1[i]);
}
console.log(result);
console.log(result == arr1);    // 期望false，因为引用类型值进行比较的时候，==比较的是内存地址
console.log(result[4] == arr1[4]);  // 藕断丝连

更多关于慕课网前端工程师2021的详细学习路径&笔记目录：

第5周 JS基础语法与表达式

https://www.cnblogs.com/inzens/p/javascript.html

第6周 JS流程控制语句

https://www.cnblogs.com/inzens/p/15110463.html

第6周 数组

https://www.cnblogs.com/inzens/p/15111648.html