前端JS基础知识复习笔记（13）

基础知识复习笔记（13）"/>

前端JS基础知识复习笔记（13）

数组是引用数据类型中的对象数据类型（特殊对象）**
创建一个数组，也是要开辟一个堆内存，堆内存中存储数组对象中的键值对
* 0 : 10
* 1 : 20
* 2 : 30
* length : 3
* 1）数组中我们看到的每一项都是属性值，默认的属性名是数字，数字从零开始递增，数字代表当前是第几项，我们把代表位置的数字属性名称为“索引”；数组是以数字为索引，索引从零开始递增的结构！
* 2）默认存在一个length属性，代表数组的长度（有多少项）
* 3）数组中存在的每一项可以是任何数据类型
*
真实项目中，我们从服务器获取到的数据，一般都是对象或者数组（JSON格式），而且结构层级一般也都是多级结构，所以学会数组/对象的相关操作，能够根据需求把获取的数据进行有效的解析和处理，是当下前端开发中非常重要的知识点；尤其是vue/react开发的时候，我们都是在不断的操作数据，来控制视图的渲染，而操作的数据也是以对象和数组偏多。
// ==== 一维数组（只有一级结构）
// let arr = [10, 20, 30];
// let arr = [10, ‘AA’, true, null, undefined, Symbol(1)];
// ==== 二维数组（多维数组） 有两级或者多级结构
/* let arr = [{
x: 100
}, {
y: 200
}]; */
* 学习数组：
* 1.掌握基础操作
* 2.掌握数组中常用的内置方法（浏览器天生给数组提供的方法）
* 3.掌握数组排序和去重（算法）
* …

========获取每一项值：ARR[索引] 或者对某一项进行操作**
ARR.LENGTH - 1：最后一项的索引
ARR[ARR.LENGTH] = X：向数组末尾追加一个新项
基于DELETE删除数组中的某一项（把它当做普通对象操作），键值对可以删掉，但是LENGTH并不会跟着改变，一般数组删除不用它！
基于ARR.LENGTH–可以实现删除数组中最后一项
// let arr = [10, 20, 30];
// arr[0] = 100;
// console.log(arr[arr.length - 1]);
// arr[3] = 40;
// delete arr[0];
// arr.length–;

数组迭代（遍历数组中的每一项）

for (let i = 0; i < arr.length; i++) {let item = arr[i];console.log(`当前遍历的是数组中索引为：${i}，数值为：${item}的这一项！`);
} 

作为普通对象，基于FOR IN遍历数组中所有的键值对

for (let attr in arr) {console.log(attr, arr[attr]);
} 

还可以基于 while循环、for of循环、内置的迭代方法来遍历数组每一项

============数组中常用的内置方法：基于这些方法可以让我们有效的对数组进行操作
* console.dir(Array.prototype)
* /
*
* 1.关于数组的增删改
* + push
* + pop
* + shift
* + unshift
* + splice
* 2.关于数组查询和拼接
* + slice
* + concat
* 3.转换为字符串
* + toString
* + join
* 4.验证是否包含某一项的
* + indexOf / lastIndexOf
* + includes
* 5.关于排序的
* + reverse
* + sort
* 6.关于数组迭代的方法
* + forEach
* + map
*
* 记忆的方式：
* 1.方法的意义和作用
* 2.参数（执行方法的时候传递的内容）
* 3.返回值（执行完方法返回的结果）
* 4.原始数组是否改变

let arr = [10, 20, 30];
=>push：向数组末尾追加元素
* @params:
* 参数个数不固定，类型也不固定，都是向数组末尾依次追加的内容
* @return:
* [NUMBER]新增后数组的长度
* 原始数据改变
*
* 基于对象键值对操作：arr[arr.length]=xxx
*/
// let result = arr.push(40, ‘珠峰培训’);
// console.log(result); //=>5
=>pop：删除数组最后一项
* @params:无
* @return:
* 被删除的那一项内容
* 原始数组改变
*
* arr.length-- 删除最后一项
*/
// let result = arr.pop();
=>unshift：向数组开始位置新增内容
* @params:
* 个数不定、类型不定，都是要依次新增的内容
* @return:
* [NUMBER]新增后数组的长度
* 原始数据改变
*/
// let result = arr.unshift(0, ‘珠峰培训’);
=>shift：删除数组第一项
* @params:无
* @return:
* 被删除的那一项内容
* 原始数组改变
*/
// let result = arr.shift();
=>splice：实现数组指定位置的增删改
* arr.splice(n,m)：从数组索引n开始，删除m个元素，返回结果是以新数组的方式，把删除的内容进行存储（m不写就是删除到末尾）
* arr.splice(n,m,x1,x2…)：从索引n开始，删除m个元素，用x1（或者更多的值）替换删除的内容，返回结果是一个数组，存储删除的内容
* arr.splice(n,0,x1,x2…)：从索引n开始，一个都不删除（返回结果是空数组），把x1或者更多值“插入到索引n的前面”
原始数组都会改变

let arr = [10, 20, 30, 40, 50, 60, 70];===新增（一个都不删）let result = arr.splice(2, 0, 100, 200, 300);console.log(result, arr); //=>result=[]  arr=[10, 20,100,200,300 ,30, 40, 50, 60, 70]===修改（删除掉一部分，然后用一些值替换即可）let result = arr.splice(2, 2, '珠峰培训', '周啸天');console.log(result, arr); //=>result=[30,40]  arr=[10, 20, '珠峰培训','周啸天', 50, 60, 70]===删除let result = arr.splice(2, 3);console.log(result, arr); //=>result=[30,40,50]  arr=[10,20,60,70]let result = arr.splice(0); //=>从索引零开始，删除到末尾（清空原来数组，把原来数组中的每一项都存放到新数组RESULT中）console.log(result, arr); //=>result=[10, 20, 30, 40, 50, 60, 70]  arr=[]

需求：删除数组末尾这一项，你有几种办法let arr = [10, 20, 30, 40, 50, 60, 70];arr.length--;arr.pop(); //=>返回结果70arr.splice(arr.length - 1); //=>从最后一项开始，删除到末尾（删除一个）  返回结果[70]delete arr[arr.length - 1]; //=>虽然可以删除，但是LENGTH长度不变（一般不用）...

需求：向数组末尾追加‘珠峰’let arr = [10, 20, 30, 40, 50, 60, 70];arr.push('珠峰');arr[arr.length] = '珠峰';arr.splice(arr.length, 0, '珠峰')

=>slice(n,m)：实现数组的查询，从索引n开始，查找到索引为m处（不包含m），把查找到的内容以新数组的方式返回，原始数组不变

let arr = [10, 20, 30, 40, 50, 60, 70];
let result = arr.slice(2, 5);
console.log(result, arr); //=>result=[30, 40, 50]  arr=[10, 20, 30, 40, 50, 60, 70]console.log(arr.slice(2)); //=>[30, 40, 50, 60, 70]  第二个参数不写是直接查找到数组末尾
console.log(arr.slice(0)); 
//=>[10, 20, 30, 40, 50, 60, 70] 
可以理解为把原始数组中的每一项都查找到，以新数组返回，实现出“数组的克隆”：得到的新数组和原始数组是两个不同的数组（两个不同的堆），但是堆中存储的内容是一致的Array.prototype.slice = function slice() {// this->arylet arr = [];for (let i = 0; i < this.length; i++) {arr.push(this[i]);}return arr;
};

=>concat：实现数组拼接，把多个数组（或者多个值）最后拼接为一个数组，原始的数组都不会变，返回结果是拼接后的新数组

let arr1 = [10, 20, 30];
let arr2 = [50, 60, 70];let arr = arr1.concat('珠峰', arr2);
console.log(arr); //=>[10, 20, 30, "珠峰", 50, 60, 70]

let arr = [10, 20, 30, 40, 50, 60, 70]; * 把数组转化为字符串：*   1. toString()：把数组中的每一项按照“逗号分隔”，拼接成对应的字符串*   2. join([char])：指定分隔符* 原始数组都不会改变console.log(arr.toString()); //=>'10,20,30,40,50,60,70'console.log(arr.join()); //=>等价于toStringconsole.log(arr.join('+')); //=>'10+20+30+40+50+60+70'  如果这个字符串能够变为JS表达式执行，则代表数组中每一项的求和 =>evallet str = arr.join('+');let total = eval(str);console.log(total);let total = 0;for (let i = 0; i < arr.length; i++) {total += arr[i];}console.log(total);

*获取数组中指定项的索引
* indexOf([item])：获取当前项在数组中第一次出现位置的索引
* lastIndexOf([item]) ：获取当前项在数组中最后一次出现位置的索引
* includes：验证数组中是否包含这一项，返回TRUE/FALSE
* 原始数组不变

let arr = [10, 20, 30, 10, 20, 10, 30];console.log(arr.indexOf(20)); //=>1console.log(arr.lastIndexOf(20)); //=>4console.log(arr.indexOf(40)); //=>-1 如果数组中不包含这一项，则返回结果是-1=>基于这个特征来验证数组中是否包含某一项if (arr.indexOf(40) > -1) {// 数组中包含这一项}console.log(arr.includes(40));

=>reverse：把原始数组倒过来排列，返回的结果是排列后的原始数组，原始数组改变
**=> sort：把原始数组按照规则进行排序，原始数组会改变（返回结果也是改变后的原始数组）

 * SORT支持传递回调函数，基于自定义的排序规则，进行排序的**let arr = [4, 3, 2, 5, 1];
arr.reverse();
console.log(arr);
arr.sort(); //=>默认按照由小到大排序
console.log(arr);  //=>[1,2,3,4,5]let arr = [12, 23, 110, 34, 2, 4, 9];
arr.sort(); //=>SORT排序，默认不就是按照每一项的数值大小排序，而是按照每一项的每一个字符编码来进行比较排序的，所以导致直接写SORT，不能处理两位及两位以上的内容排序
console.log(arr); //=>[110, 12, 2, 23, 34, 4, 9]let arr = [12, 23, 110, 34, 2, 4, 9];arr.sort(function (a, b) {// => RETURN A-B 升序，B-A 降序return b - a;// });console.log(arr); //=>[2, 4, 9, 12, 23, 34, 110]

数组中常用的迭代方法（遍历数组中每一项的）
* forEach([函数])：遍历数组中的每一项（数组中有多少项，函数会相继被执行多少次），每一次执行函数，都可以在函数中获取到当前遍历的这一项和对应的索引
* map：forEach是不支持返回值的，而map可以在forEach的基础上支持返回值，把原来数组中每一项的值替换成为新值，最后存储在一个新的数组中，但是原始数组是不变的
*
* 后面再学习的迭代方法：find / filter / every / some / reduce …
*/

let arr = [10, 20, 30, 40, 50];===========数组就和的方式console.log(eval(arr.join('+')));  如果数组中出现非有效数字，则最后结果是NaNlet total = 0;arr.forEach(function (item, index) {item = Number(item);if (isNaN(item) === false) {total += item;}});console.log(total); arr.forEach(function (item, index) {// 此函数会被循环执行五次(数组中有5项)// item：当前遍历这一项的内容// index：当前项的索引console.log(item, index);}); 

MAP支持返回值，但是不会改变原来的数组，执行完的返回结果是修改后的新数组

let arr = [10, 20, 30, 40, 50];let result = arr.map(function (item, index) {// 数组中有5项，此函数被循环执行了5次// item：当前循环这一次的值// index：当前值对应的索引// 函数中返回啥，都是把数组中当前项替换成啥return item * 10;});console.log(result);