前端开发中数组的重要性
真是项目中,从服务器获取到的数据,都是对象或者数组(JSON格式),而且结构层级一般也都是多级的,所以要学会数组/对象的操作,能够根据需求把获取的数据进行有效的解析和处理;而且vue/react开发的时候,我们都不断操作数据,来控制试图的渲染,而且操作的数据也是以对象和数组偏多
学习数组要掌握的内容
- 基础的数组操作
- 数组常用的内置方法(浏览器天生给数组提供的方法)
- 数组的排序和去重
数组的一些操作
- arr.length - 1; 数组的最后一项
- arr[length - 1] = x; 向数组末尾追加一个新项
- 基于delet删除数组中的某一项,是把数组当作普通对象操作,键值对可以删掉,但是length不会改变,一般删除数组不用这个
let arr = [10, 20, 30];
delete arr[0];
// 此时数组是[empty, 20, 30] 索引从1开始 length为3
数组的遍历
- for 循环
- for in
把数组作为普通对象,基于for in遍历数组中的所有键值对
数组常用的内置方法
学习数组要注意的几个方面
- 方法的作用和含义
- 方法的实参(类型和含义)
- 方法的返回值
- 原来的数组是否会发生改变
1.实现数组增删改的方法
这一部分方法都会修改原有的数组
push
/*
* push : 向数组末尾增加内容
* @params
* 多个任意类型
* @return
* 新增后数组的长度
*/
let ary = [10, 20];
let res = ary.push(30, 'AA');
// 基于原生JS操作键值对的方法,也可以向末尾追加一项新的内容
ary[ary.length] = 40;
console.log(res, ary); //=>4 [10,20,30,'AA',40]
unshift
/*
* unshift : 向数组开始位置增加内容
* @params
* 多个任意类型
* @return
* 新增后数组的长度
*/
let ary = [10, 20];
let res = ary.unshift(30, 'AA');
console.log(res, ary); //=>4 [30,'AA',10,20]
// 基于原生ES6展开运算符,把原有的ARY克隆一份,在新的数组中创建第一项,其余的内容使用原始ARY中的信息即可,也算实现了向开始追加的效果
ary = [100, ...ary];
console.log(ary); //=>[100,30,'AA',10,20]
shift
/*
* shift : 删除数组中的第一项
* @params
* @return
* 删除的那一项
*/
let ary = [10, 20, 30, 40];
let res = ary.shift();
console.log(res, ary); //=>10 [20, 30, 40]
// 基于原生JS中的DELETE,把数组当做普通的对象,确实可以删除掉某一项内容,但是不会影响数组本身的结构特点(length长度不会跟着修改),真实项目中杜绝这样的删除使用
delete ary[0];
console.log(ary); //=>{1:30,2:40,length:3}
pop
/*
* pop : 删除数组中的最后一项
* @params
* @return
* 删除的那一项
*/
let ary = [10, 20, 30, 40];
let res = ary.pop();
console.log(res, ary); //=>40 [10,20,30]
// 基于原生JS
ary.length--; //=>ary.length = ary.length - 1;
console.log(ary);
splice
splice(n,m)
/*
* splice : 实现数组指定位置的增加、删除、修改
* @params
* n,m 都是数字 从索引n开始删除m个元素(m不写,是删除到末尾)
* @return
* 把删除的部分用新数组存储起来返回
*/
let ary = [10, 20, 30, 40, 50, 60, 70, 80, 90];
let res = ary.splice(2, 4);
console.log(res, ary); //=>[30, 40, 50, 60] [10, 20, 70, 80, 90]
// 基于这种方法可以清空一个数组,把原始数组中的内容以新数组存储起来(有点类似数组的克隆:把原来数组克隆一份一模一样的给新数组)
/* res = ary.splice(0);
console.log(res, ary);//=>[10, 20, 70, 80, 90] [] */
// 删除最后一项和第一项
ary.splice(ary.length - 1);
// 删除第一项
ary.splice(0, 1);
splice(n,m,x)
/*
* splice : 实现数组的增加、修改
* @params
* n,m,x 从索引n开始删除m个元素,用x占用删除的部分,x可以为很多项目
* n,0,x... 从索引n开始,一个都不删,把x(或x1,x2,x3)放到索引n的前面
* @return
* 把删除的部分用新数组存储起来返回
*/
let ary = [10, 20, 30, 40, 50];
let res = ary.splice(1, 2, '哈哈哈');
console.log(res, ary); //=> [20,30] [10,'哈哈哈', 40, 50]
// 实现增加
ary.splice(3, 0, '呵呵呵');
console.log(ary); //=>[10, "哈哈哈", "呵呵呵", 40, 50]
// 向数组末尾追加
ary.splice(ary.length, 0, 'AAA');//注意不是ary.length - 1
// 向数组开始追加
ary.splice(0, 0, 'BBB');
2.数组的查询和拼接
此组学习的方法,原来数组不会改变
slice
/*
* slice : 实现数组的查询
* @params
* n,m 都是数字 从索引n开始,找到索引为m的地方(不包含m这一项)
* @return
* 把找到的内容以一个新数组的形式返回
*/
let ary = [10, 20, 30, 40, 50];
let res = ary.slice(1, 3);
console.log(res); //=>[20,30]
// m不写是找到末尾
res = ary.slice(1);
console.log(res); //=>[20, 30, 40, 50]
// 数组的克隆,参数0不写也可以
res = ary.slice(0);
console.log(res); //=>[10, 20, 30, 40, 50]
// 思考:1.如果n/m为负数会咋地,如果n>m了会咋地,如果是小数会咋地,如果是非有效数字会咋地,如果m或者n的值比最大索引都会咋地? 2.这种克隆方式叫做浅克隆,可以回去先看看深度克隆如何处理!
concat
/*
* concat : 实现数组拼接
* @params
* 多个任意类型值
* @return
* 拼接后的新数组(原来数组不变)
*/
let ary1 = [10, 20, 30];
let ary2 = [40, 50, 60];
let res = ary1.concat(ary2);
console.log(res);
3.把数组转换为字符串
原有数组不变
toString
/*
* toString : 把数组转换为字符串
* @params
* @return
* 转换后的字符串,每一项用逗号分隔(原来数组不变)
*/
let ary = [10, 20, 30];
let res = ary.toString();
console.log(res); //=>"10,20,30"
console.log([].toString()); //=>""
console.log([12].toString()); //=>"12"
join
/*
* join : 把数组转换为字符串
* @params
* 指定的分隔符(字符串格式)
* 如果不传参,toString()一样
* 传入‘’则没有分隔符
* @return
* 转换后的字符串(原来数组不变)
*/
let ary = [10, 20, 30];
let res = ary.join('');
console.log(res); //=>"102030"
res = ary.join();
console.log(res); //=>"10,20,30"
res = ary.join('|');
console.log(res); //=>"10|20|30"
res = ary.join('+');
// 基于join求和
console.log(res); //=>"10+20+30"
console.log(eval(res)); //=>60 eval把字符串变为JS表达式执行
4.检测数组中的是否包含某一项
indexOf / lastIndexOf / includes
/*
* indexOf / lastIndexOf : 检测当前项在数组中第一次或者最后一次出现位置的索引值(在IE6~8中不兼容)
* @params
* 要检索的这一项内容
* @return
* 这一项出现的位置索引值(数字),如果数组中没有这一项,返回的结果是-1
* 原来数组不变
*/
let ary = [10, 20, 30, 10, 20, 30];
console.log(ary.indexOf(20)); //=>1
console.log(ary.lastIndexOf(20)); //=>4
// 想验证ARY中是否包含'abcd
if (ary.indexOf('abcd') > -1) {
// 数组中包含这一项
}
// 也可以直接使用ES6新提供的includes方法判断
if (ary.includes('abcd')) {
// 包含:如果存在返回的是TRUE
}
5.数组的排序或者排列
reverse
/*
* reverse : 把数组倒过来排列
* @params
* @return
* 排列后的新数组
* 原来数组改变
*/
let ary = [12, 15, 9, 28, 10, 22];
ary.reverse();
console.log(ary); //=>[22, 10, 28, 9, 15, 12]
sort
/*
* sort : 实现数组的排序
* @params
* 可以没有,也可以是个函数
* @return
* 排序后的新数组
* 原来数组改变
*/
let ary = [7, 8, 5, 2, 4, 6, 9];
ary.sort();
console.log(ary); //=>[2, 4, 5, 6, 7, 8, 9]
// SORT方法中如果不传递参数,是无法处理10以上数字排序的(它默认按照每一项第一个字符来排,不是我们想要的效果)
/* ary = [12, 15, 9, 28, 10, 22];
ary.sort();
console.log(ary); //=> [10, 12, 15, 22, 28, 9] */
// 想要实现多位数正常排序,需要给SORT传递一个函数,函数中返回 a-b 实现升序,返回 b-a 实现降序
ary = [12, 15, 9, 28, 10, 22];
// ary.sort(function(a,b){ return a-b; });
ary.sort((a, b) => a - b);
console.log(ary);
6.遍历数组中每一项的方法
forEach
/*
* forEach:遍历数组中的每一项内容
* @params
* 回调函数(放入一个函数)
* @return
*
* 原来数组不变
*/
let ary = [12, 15, 9, 28, 10, 22];
/* // 基于原生JS中的循环可以实现
for (let i = 0; i < ary.length; i++) {
// i:当前循环这一项的索引
// ary[i]:根据索引获取循环的这一项
console.log('索引:' + i + ' 内容:' + ary[i]);
} */
ary.forEach((item, index) => {
// 数组中有多少项,函数就会被默认执行多少次
// 每一次执行函数:item是数组中当前项的内容,index是当前项的索引
console.log('索引:' + index + ' 内容:' + item);
});
基于foreach求和
ary.forEach((item, index) => {
item = Number(item);
if (isNaN(item) === false) {
total += item;
}
});
map
// forEach不支持返回值,而map是在forEach的基础上支持返回值,把原来数组上每一项的值替换为新值,最后储存在一个新数组中返回,但是原始值不变
let arr = [1, 2, 3, 4];
let result = arr.map(function(item, index){
return item * 10;
})
filter
find
reduce
some
every
…
面试题
删除数组末尾这一项
arr.length--;
arr.pop(); // 返回结果70
arr.splice(arr.length - 1); // 从最后一项开始,删除到末尾,返回结果是[10]
delete arr[arr.length - 1]; // 虽然可以删除,但长度不边
向数字末尾追加一项
arr.push('item');
arr[arr.length] = 'item';
arr.splice(arr.length, 0, 'item');