思维导图
数组的基本概念
.什么是数组?
数组是存储一个或多个数据的容积,它是一组内存空间,通常用来批量处理数据,这组内存空间的名字叫做数组
2.数组的特点
对齐自身储存的数据并没有什么要求,无论是数量还是类型, 数组中的每一项可以是任意一种数据类型通,过数组下标来管理数组
3.length
数组也是对象数据类型，它也是有键值对组成，属性名是数字，并且有一个length属性,数组名.length表示数组的长度,也是数组当前存储元素的个数,因为下标从0开始,所以数组长度-1表示最后一个元素的下标
怎么创建一个数组
1. 字面量(语法糖)
2. new创建
```
//字面量创建一个数组
var arr = [1, 2, 3]
//new创建
var arr1 = new Array(1, 2, 3)
```
数组常用的方法
1.push
- 作用：向数组末尾追加某一项
- 参数：添加的具体项，可以是一项,也可以是多项
- 返回值：新数组的长度
- 是否改变原数组：改变
//push 向数组末尾追加一项
var ary = [1, 2, 3];
let newarr = ary.push(4); //添加的具体项
console.log(ary); //改变原来数组:[1, 2, 3, 4]
console.log(newarr);//4 新增数组的长度
2.pop
- 作用：删除数组的最后一项
- 参数：无
- 返回值：删除的项
- 是否改变原数组：改变
//pop 删除数组的最后一项
var ary = [1, 2, 3];
let newarr = ary.pop(); //无参数
console.log(ary); //改变原来数组:[1, 2]
console.log(newarr);//3 删除的项
3.shift
- 作用：删除数组的第一项
- 参数：无
- 返回值：删除的项
- 是否改变原数组：改变
// shift删除数组第一项
var ary = [1, 2, 3];
let newarr = ary.shift(); //无参数
console.log(ary); //改变原来数组:[2,3]
console.log(newarr);//1 删除的项
4.unshift
- 作用：向数组的开头添加内容
- 参数：添加的内容
- 返回值：新数组的长度
- 是否改变原数组：改变
// unshift删除数组第一项
var ary = [1, 2, 3];
let newarr = ary.unshift(0); //无参数
console.log(ary); //改变原来数组:[0,1,2,3]
console.log(newarr);///4 新增数组的长度
5.splice
- 作用：删除/新增/修改
- 参数：splice（n,m,...x） ;完整的写法，第一个参数代表从哪个索引开始，删除m项，把删除的内容用x进行替换
- 返回值：是一个数组，里面是删除的每一项
- 是否改变原数组：是
删除
ary.splice(n,m); 从索引n开始，删除m项
如果后面的m不写，或者超出数组的长度，就是从索引n删除到数组最后一项
// splic删除
var ary = [1, 2, 3];
let newarr = ary.splice(0, 1); //从索引0开始删除1项
console.log(ary); //改变原来数组[2, 3]
console.log(newarr);//[1] 一个数组,删除的项新增
ary.splice(n,0,....x)从索引n开始，删除0项，并且把x项添加的内容新增到索引n的前面
返回值是一个空数组
// splic新增
var ary = [1, 2, 3];
let newarr = ary.splice(0, 0, 5); //从索引0开始删除0项,并把添加的内容增加到1的前面
console.log(ary); //改变原来数组 [5, 1, 2, 3]
console.log(newarr);//一个空数组修改
ary.splice(n,m,...x);从索引n开始删除m项，并且用后面的内容进行替换，
// splic修改
var ary = [1, 2, 3];
let newarr = ary.splice(1, 2, 4, 5); //从索引1开始删除2项,替换成4,5
console.log(ary); //改变原来数组[1, 4, 5]
console.log(newarr);//[2, 3]一个数组,删除的项
6.slice
- 作用：从原有的数组中选中特定的内容
- 参数：slice（n，m）：选中从索引n（包含n）开始---索引m的项（不包含m）
- 返回值：返回值是一个数组，返回的每一项是复制的项
- 是否改变原数组：不改变
// slice 从原有的数组中选定特定的内容
var ary = [1, 2, 3, 4, 5, 6];
let newarr = ary.slice(1, 4); //从索引1开始(包含1)--索引到索引4的项(不包含4)
console.log(ary); //不改变原来数组
console.log(newarr);//[2, 3 ,4]一个数组,复制的每一项含头不含尾
想要复制所有项 不跟参数或者0
注意：克隆的新数组和原来的数组并不相等，因为是不同的堆内存地址；(浅克隆)
7.concat
- 作用：实现多个数组或者值的拼接
- 参数：数组或者值
- 返回值：返回值是拼接后的新数组
- 是否改变原数组：不改变
//concat实现多个数组和或值的拼接
//不改变原数组
var ary1 = [1, 2, 3];
var ary2 = [4, 5, 6];
var res = ary1.concat(ary2, "同学");//数组或者值
console.log(res);//[1, 2, 3, 4, 5, 6, '同学'] 拼接后的新数组8.toString
- 作用：可以把一个逻辑值转换为字符串
- 参数：无
- 返回值：返回值是转换后的字符串
- 是否改变原数组：不改变
// toString 可以把一个逻辑值转为字符串
var ary1 = [1, 2, 3];
var res = ary1.toString();//无参数
console.log(ary1);//不改变原数组
console.log(res);//转换后的字符串9.join
- 作用：把数组通过指定的连接符，转换为字符串
- 参数：连接符
- 返回值：返回值是转换后的字符串
- 是否改变原数组：不改变
var ary1 = [1, 2, 3];
var res = ary1.join("+");// 参数 连接符
console.log(ary1); //不改变原来数组
console.log(res);// 转换后的字符串 "1+2+3";
eval(res) //==> eval 执行计算eval 执行计算
10.reverse 倒序
- 作用：把数组倒过来
- 参数：无
- 返回值：返回值是排序后的新数组
- 是否改变原数组：改变
//reversre把数组倒过来
var ary = [1, 2, 3];
var res = ary.reverse();//参数 无
console.log(res);//===排序后的新数组[3,2,1];
console.log(ary);//===改变原数组[3,2,1];
11.sort 排序
- 作用：把数组进行排序
- 参数：无或者是一个函数
- 返回值：排序后的新数组
- 是否改变原数组：改变
不传参的时候 10以内的可以排列,超出10以内的只能按照第一位进行排序
// sort把数组进行排序
//----------------------不传参的时候
//=====>10 以内的可以排
var ary = [3, 2, 1, 6, 8];
res = ary.sort();
console.log(ary);//改变原来数组[1, 2, 3, 6, 8]
console.log(res); //排序后的新数组
//=====> 超出10以内的，只能按照第一位进行排序
var ary2 = [1, 21, 5, 33, 26]
res = ary2.sort();
console.log(res);// [1, 21, 26, 33, 5]
传参的时候 一个函数 a-b升序, b-a降序
//---------------------------传参的时候
var ary2 = [1, 21, 5, 33, 26]
ary2.sort(function (a, b) {
return a - b; // 升序 [1, 5, 21, 26, 33]
return b - a; //降序 [33, 26, 21, 5, 1]
})
12.includes
- 作用：检测数组中是否包含某一项
- 参数：具体项
- 返回值：布尔值
- 是否修改原数组：否
// includes 检测数组中是否包含某一项
// 不改变数组，参数查询的项，不改变数组，返回布尔值
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(100); // false13.forEach
- 作用：遍历数组中的每一项
- 参数：函数
- 返回值：undefined
- 是否修改原数组：否
forEach VS for
forEach是函数式编程(把循环的操作封装到函数中，我们无需关注循环的过程，只需要关注结果 WHAT)；for循环是命令式编程(循环的过程自己把控，关注过程 HOW)；
- forEach会迭代数组每一项，不支持提前结束循环、也不支持跳跃时循环
- for循环想干啥就干啥
- 真实项目中，大部分需求都直接基于forEach处理即可，这样可以提高开发效率，减少冗余代码；但是某些负责的需求，需要我们在循环过程中做一些特殊处理的，我都自己写for循环...
//遍历数组某一项,参数 一个函数 ,不改变数组
var ary3 = [1, 2, 3];
let res = ary3.forEach(function (item, index) {
// item 每一项的具体值
// index 每一项的索引
console.log("item:" + item + "--index:" + index);
// item: 1--index:0
// item: 2--index: 1
// item: 3--index: 2
})
console.log(res);// 返回值undefined
14.map
- 作用：把一个数组可以映射成一个新的数组
- 参数：函数
- 返回值：映射后的新数组
- 是否修改原数组：否
// map作为一个数组可以映射一个新数组,参数一个函数,
var ary3 = [1, 2, 3];
var res = ary3.map((item, index) => {
return item + "index";
})
console.log(res)//[ '1index', '2index', '3index' ] 新数组
console.log(ary3);//不改变原数组15.indexof
- 作用：获取某项在数组中首次出现/最后出现的 索引（也可以用来是否包含某项）
- 参数：（n,m） n检测的项 从索引m开始检索
- 返回值：-1或者具体的索引值 -1不包含这一项
- 是否改变原数组：不改变
var ary = [1, 2, 3, 4, 1, 55, 1];
//检测1这个项目在数组ary 中首次出现的位置
ary.indexOf(1); //0
//从索引2开始，检测1这个项目在数组中首次出现的位置
ary.indexOf(1, 2); //4
console.log(ary.indexOf(99)); //-1不包含这一项
lastIndexOf最后出现的索引
var ary = [1, 2, 3, 4, 1, 55, 1];
// 检测1这个项目在数组中最后一次出现的索引
a = ary.lastIndexOf(1);
console.log(a);//6 索引号是正的
// 检测1这个项目在数组中最后出现的索引，在索引5的位置停止检测
b = ary.lastIndexOf(1, 5)
console.log(b);//4
16.filter
- 作用：过滤原始数组,返回新数组
- 参数：函数
- 返回值：符合条件的新数组
- 是否修改原数组：否
// filer过滤原始数组, 返回新数组 筛选符合条件的
let a = [22, 10, 21, 9]
let fn = a.filter(function (value, index) {
return value > 20
})
console.log(a);//[22, 10, 21, 9] 不修改原数组
console.log(fn);// [22, 21]返回大于20的值17.Array.form()
- 作用：将伪数组转为数组
- 参数：要转换的伪数组
- 返回值：新数组
- 是否修改原数组：否
let obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
let arr = Array.from(obj)
console.log(obj);//{0: 'a', 1: 'b', 2: 'c', length: 3}不改变原数组
console.log(arr);// ['a', 'b', 'c']新数组18.find/findIndex
find/findIndex按照条件找到符合的这一项(这一项的索引)：有多项符合条件，只找第一个符合的即可；如果一个符合的都没有，结果是undefined/(-1)
let arr = [10, 20, 30, 40, 50];
let item = arr.find((item, index) => {
return item > 30;
});
console.log(item); //40 如果有多个只返回一个
//如果没有就是(undefined)-119.some
some依次迭代数组中的每一项，只要其中有一项符合设定的条件，则结果是TRUE，如果所有项都不符合条件，则结果是FALSE；
// let arr = [10, 20, 30, 40, 50];
console.log(
arr.some((item) => item > 30)
); //true
有一项符合就是true20.every
every和some相反，他是所有项都符合条件结果才是TRUE，只要有有一项不符合结果就是FALSE；
// let arr = [10, 20, 30, 40, 50];
console.log(
arr.every((item) => item > 30)
); //false 所有项都符合才是true21.reduce/reduceRight
依次迭代数组每一项(reduceRight是从右到左迭代)，他会把上一次迭代中，回调函数处理的结果传递给下一次迭代，以此实现结果的累积
let arr = [10, 20, 30, 40, 50];
let total = arr.reduce((x, item, index) => {
// 第一次迭代 x=10 item=20 index=1 处理结果30 (x获取数组第一项，然后从数组第二项开始迭代)
// 第二次迭代 x=30(上一次处理的结果) item=30 index=2 处理结果60
// 第三次迭代 x=60 item=40 index=3 处理结果100
// 第四次迭代 x=100 item=50 index=4 处理结果150
// 循环结束，最后处理结果150赋值给外面的total
return x + item;
});
let total = arr.reduce((x, item, index) => {
// 第一次迭代 x=100 item=10 index=0 处理结果110
// ...
return x + item;
}, 100); //第二个参数是给x的初始值 从数组第一项开始迭代 22. flat 数组扁平化「ES6」
- flat(n) 降低N个维度
- flat(Infinity) 不论原始数组是几维，直接降为1维
let arr = [
10,
[20, 30, [40, 50, [60, 70]]],
80,
[90, [100, 110]]
];
console.log(arr.flat(Infinity));
//不论原始数组是几维，直接降为1维fill 数组填充「ES6」
稀疏数组和密集数组
- 稀疏数组：数组中并不是每一项都有值 例如：new Array(5)，长度是5，但是每一项都是empty
- 密集数组：每一项都有值
- 迭代方法在处理的时候，如果是数组中的稀疏项，那么是不去进行迭代的
new Array(5).fill(null).forEach(() => {
console.log('OK');
}); 【思考】
删除数组最后一项，你有几种方法?
- ary.pop()
- ary.splice(ary.length-1,1);
- ary.length--
向数组末尾追加新内容，你有几种方法？
- ary.push(x);
- ary.splice(ary.length，0，x)； 或者ary.splice(ary.length，1，x)；
- ary[ary.length]=x;
总结
改变原数组的方法 push.pop,shift unshift,splice reverse sort
不改变原数组 slice, concat tostring join ,indexOf , lastIndexOf ,includes forEach, map.filfter,Array.form
----------------------------------------------------完结,散花---------------------------------------------
------------------------------------接受大佬们的批改,欢迎留言--------------------------------------------
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
