数组也是对象数据类型的，也是由键值对组成的。
- 数组是对象数据类型的，属于特殊的对象
let ary=[1,2,3,4];
console.log(typeof ary);//=>'object'
console.dir(ary);
![控制台打印的结果] Array(4) 0: 1 1: 2 2: 3 3: 4 length: 4 proto: Array(0)
数字作为索引（KEY属性名） length代表长度 ary[0] 根据索引获取指定项的元素 ary.length 获取数组的长度 ary.length-1 最后一项的索引
数组中常用的方法
- 四个维度记忆数组的方法
- 方法的作用和含义
- 方法的实参（类型和含义）
- 方法的返回值
- 原来的数组是否会发生改变
1、实现数组（增、删、改）的方法 ---这一部分方法都会修改原有数组
1.1 push()：
push:向数组末尾增加内容
参数：多个任意类型（直接数据类型和引用数据类型，Symbol都可以）
return：返回新增后的数组长度
原有的数组改变
let ary = [10, 20];
//1.push方法添加新元素
let res = ary.push(30, 'aa', { name: 'dog' });
console.log(ary, res);
//2.直接利用索引添加新元素 （2和3是一种方法）
ary[5] = 'bb';
console.log(ary);
//3.基于原生JS操作键值对的方法，也可以向末尾追加一项新的内容
ary[ary.length] = 'haha';
console.log(ary);
1.2 unshift():
- unshift:向数组的开始添加内容
- 参数：多个任意类型（直接数据类型和引用数据类型，Symbol都可以）
- return：返回新增后的数组长度
- 原有的数组改变
//unshift();添加开始第一项
let ary = [12, 34];
let res = ary.unshift('aa', 20);
console.log(ary, res);
//利用原生的JS添加---行不通的，没有此方法
// ary[0] = 30;//这样不行，是将原来的0位置的元素覆盖了
// console.log(ary);
//基于原生ES6展开运算符，把原有的ary克隆一份，在新的数组中创建第一项，其余的内容使用原始ary中的信息即可，也算是实现了向开始追加的效果，此方法不同于unshift的方法
ary = [100, ...ary];
console.log(ary);
1.3 shift():
- shift:删除数组中的第一项
- 参数：无
- return：返回删除的那一项
- 原有的数组改变
//shift();删除开始第一项
let ary = [100, 22, 34, 99];
let res = ary.shift();
console.log(ary, res);
//基于原生JS删除开始第一项，用delete是真删除，假删除是赋值为null
let ary1 = [100, 22, 34];
delete ary1[0];
console.log(ary1);//=>{1:22,2:34,length:3}
//基于原生JS中的delete，把数组当作普通对象，确实可以删除掉某一项内容，但是不会影响数组本身的结构特点（length长度不会跟着修改），真实项目中杜绝这样的删除使用
/*
(3) [empty, 22, 34]
1: 22
2: 34
length: 3
__proto__: Array(0)
*/
1.4 pop():
- pop：删除数组中的最后一项
- 参数：无
- return：返回删除的那一项
- 原有数组改变
//pop();删除最后一项
let ary = [12, 23, 34, 100, 200];
let res = ary.pop();
console.log(ary, res);
//基于原生JS让数组的长度去掉一位，默认去掉的就是最后一项
ary.length--;//ary.length=ary.length-1;
console.log(ary);
//利用原生的JS删除最后一项，delete不可以
delete ary[ary.length - 1];
console.log(ary);
/*
(4) [12, 23, 34, empty]
0: 12
1: 23
2: 34
length: 4
__proto__: Array(0)
*/
1.5 splice():array.splice(index,howmany,item1,.....,itemX)
- splice:实现数组的增加、删除、修改
- 参数：index，howmany都是数字 从索引index（必需）开始删除howmany（可选）个元素（howmany可以不写，是删除至末尾），item1, ..., itemX（可选）要添加到数组的新元素 index:为负数时，与数组的长度相加 howmany：为负数时相当于删除0个元素 splice(index,0,x);从索引index开始，一个都不删除，在index前添加x
- return：把删除部分用新数组存储起来+ 原有数组改变
//splice();增加，删除，修改 数组
let ary = [10, 20, 30, 40, 50, 60, 70, 80, 90];
let res = ary.splice(4, 5);
console.log(ary, res);
res = ary.splice(2, 1, 100, 200);
console.log(ary, res);
console.log('---------');
//基于这种方法可以清空一个数组，把原始数组以新数组存储起来（有点类似数组的克隆：把原来的数组克隆一份一样的给新数组）
//克隆是把原来的数组复制一份给新数组，原来的数组不变，所以这里说类似克隆
//清空数组ary.splice(0)，必须传递一个值0，什么也不传没有效果
res = ary.splice();
console.log((ary, res));//res没有接收到值
res = ary.splice(0);//从0开始清空数组
console.log(ary, res);
//splice实现删除最后一项
let ary = [10, 20, 30, 40];
let res = ary.splice(ary.length - 1);
console.log(ary, res);
//splice实现删除第一项
res = ary.splice(0, 1);
console.log(ary, res);
- 总结：删除最后一项
- pop();
- ary.length--;
- ary.splice(ary.length-1);
- 总结：删除第一项
- shift()
- splice(0,1)
- 总结：增加最后一项
- push()
- ary[ary.length]=value
- splice(ary.length,0,value)
- 总结：增加第一项
- unshift();
- splice(0,0,value);
2.数组的查询和拼接（此组方法中，原来数组不会改变）
- slice();array.slice(start, end) 已有的数组中返回选定的元素
- start：可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
- end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
- slice:实现数组的查询
- 参数：n，m都是数字，从索引n开始，找到索引为m的地方（不包含m这一项）
- return：把找到的内容一个新数组的形式返回
- 原有数组不变 //数组的克隆，参数0不写也可以
//slice();数组的查询
let ary = [11, 22, 33, 44, 55];
let res = ary.slice(1, -2);
console.log(res, ary);
//数组的克隆，参数0不写也可以
res = ary.slice(0);
/*
思考：1.如果n/m为负数会怎样，如果n>m了会怎样，如果是小数会怎样，如果是非有效数字会怎样，如果n或者m的值都比索引大会怎样？
2.这种克隆方式叫做浅克隆，深度克隆如何处理？(可以利用let deepCloneObj=JSON.parse(JSON.stringify(obj));)
*/
//如果n/m为负数会怎样:负数与数组长度相加得整数
let ary = [11, 22, 33, 44, 55];//5
let res = ary.slice(-3, -1);//2,4
let rr = ary.slice(2, 4);
console.log(res, rr);
//如果n>m了会怎样：会查询不到，返回一个空数组
let ary = [11, 22, 33, 44, 55];//5
let res = ary.slice(-1, -3);//2,4
let rr = ary.slice(4, 2);
console.log(res, rr);
//如果是小数会怎样：小数会自动按照整数来，只看整数位的数，完全忽略小数位
let ary = [11, 22, 33, 44, 55];//5
let res = ary.slice(-3.3, -1.5);//-3 -1=>2,4
let re = ary.slice(-3.9, -1.6);//-3 -1=>2,4
let rr = ary.slice(2.1, 4.7);//2 4
console.log(res, rr, re);
//如果是非有效数字会怎样:非有效数字会通过Number()转换为数字，NaN按照0来处理
let ary = [11, 22, 33, 44, 55];//5
let res = ary.slice(true, 4);//1,4
let r = ary.slice(undefined, 3);
let m = ary.slice(null, 3);//0 4
let n = ary.slice('', 3);
console.log('true', res, 'undefined', r, 'null-', m, 'n-', n);
//如果n或者m的值都比索引大会怎样:获取不到，直接返回一个空数组
let ary = [11, 22, 33, 44, 55];//5
let res = ary.slice(8);
let re = ary.slice(6, 10);
let r = ary.slice(10, 8);
console.log(res);//=>[]
console.log(re);//=>[]
console.log(r);//=>[]
//2.这种克隆方式叫做浅克隆，回去看看深度克隆如何处理？
let ary = [11, 22, 33, 44, 55];//5
let res = ary.slice();
console.log(res);
res[0] = 100;
console.log(ary, res);
//concat();
let ary1 = [1, 2];
let ary2 = [4, 5];
let res = ary1.concat(ary2, 6, 'aa');
//模拟数组克隆，参数不传的时候
let r = ary1.concat();
console.log(r);
console.log(res);
console.log(ary1, ary2);
- concat();array1.concat(array2,array3,...,arrayX):连接两个或多个数组
- concat: 实现数组的拼接，连接两个或多个数组
- 参数：多个任意类型值
- return：返回拼接后的新数组
- 原有数组不变
let ary=[1,2,3];
let res=[5,3].concat(ary,8,9,[5,6],false);
console.log(res);//[5, 3, 1, 2, 3, 8, 9, 5, 6, false]
3.把数组转换为字符串（原有数组不变）
- toString();转换后的字符串，每一项用逗号分隔
- toString:转换为字符串
- 参数：无
- return：返回转化后的字符串
- 原有数组不变
//toString();
[1, 2].toString();//=>"1,2"
[].toString();//=>""
[12].toString();//=>"12"
- join():array.join(separator)
separator:可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
- join:把数组转换为字符串 + 参数：指定的分隔符（字符串格式） + return：返回转换后的字符串（原来的数组不变） + 原有数组不变
//join();转换为字符串
let ary = [10, 20, 30];
let res = ary.join();
console.log(res);
res = ary.join('+');
console.log(res);
let n = eval(res);//eval()将字符串变为JS表达式执行
console.log(n);
4.检测数组中是否包含某一项 indexOf()/lastIndexOf()
- indexOf();返回数组中某个指定的元素位置。
array.indexOf(item,start)/array.lastIndexOf(item,start)
- item: 必须。查找的元素。
- start: 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符/最后一个字符开始检索。
- indexOf/lastIndexOf:检测当前项在数组中第一次/最后一次出现的位置的索引（IE6
8中不兼容，因为目前已经放弃IE68，所以现在可以放心用）； - 参数：item是要检索的项，start是检索起始位置
- return：返回找到的第一个位置/最后一个位置;如果没有找到返回-1
- 原有数组不变
- indexOf/lastIndexOf:检测当前项在数组中第一次/最后一次出现的位置的索引（IE6
- ES6新提供的includes()
// indexOf();/lastIndexOf();
let ary = [11, 2, 22, 'aa', 2, 10, 30, 10];
let m = ary.lastIndexOf(2);
let n = ary.indexOf(2, 5);
let s = ary.lastIndexOf(10, 4);
console.log(m, n, s);
let res = ary.indexOf('aa');
let n = ary.indexOf(11);
console.log(res, n);
//想验证ary中是否包含某一项 ary.indexOf('bb')===-1
if (ary.indexOf('bb') === -1) {
//不包含
console.log('不包含');
}
//也可以直接使用ES6新提供的includes()方法判断
if (ary.includes('bb')) {
//包含，做什么
}
//验证数组中是否含有某一项，ES6有了直接的方法 Array.includes();
console.log(ary.includes('bb'));
5.数组的排序或者排列
- reverse():array.reverse() 用于颠倒数组中元素的顺序。
- reverse():把数组倒过来排列
- 参数：无
- return：排列后的数组
- 原来的数组改变
let ary=[12,15,9,29];
let a=ary.reverse();
console.log(ary,a);
//[ 29, 9, 15, 12 ] [ 29, 9, 15, 12 ]
- sort():array.sort(fn)
- sort：实现数组的排序
- 参数：可以没有，也可以是一个函数
- return：返回排序后的新数组
- 原来数组改变
//sort()：不传参时
let ary = [2, 1, 5, 8, 6, 3, 7, 9];
let str = ['rabbit', 'snake', 'donkey', 'monkey', 'camel', 'horse'];
ary.sort();
str.sort();
console.log(ary);//[1, 2, 3, 5,6, 7, 8, 9]
console.log(str);//[ 'camel', 'donkey', 'horse', 'monkey', 'rabbit', 'snake' ]
//sort()：此方法如果不传递参数是无法处理10以上数字排序的（它默认按照每一项第一个字符来排，不是我们想要的结果）
let ary1 = [10, 12, 7, 22, 8, 32, 9]
ary1.sort();
console.log(ary1);//[10, 12, 22, 32, 7, 8, 9]
//sort()：传参时
let ary1 = [10, 12, 7, 22, 8, 32, 9];
ary1.sort((a,b)=>{
//a和b的相邻的两项
console.log(a,b);
})
//想要实现多位数正常排序，需要给sort传递一个函数，函数中返回a-b的实现升序，返回b-a的实现降序（其中原理——需要先了解冒泡排序的机制）
ary1.sort((a,b)=>a-b);//[7, 8, 9, 10, 12, 22, 32]
console.log(ary1);
ary1.sort((a,b)=>b-a);//[32, 22, 12, 10, 9, 8, 7]
6.遍历数组中每一项的方法
- forEach():数组每个元素都执行一次回调函数。
- forEach:遍历数组中的每一项内容
- 参数：回调函数
- return：
- 原来数组不变
let ary=[12,15,8,9,25,22];
//基于原生JS中的循环可以实现
for(let i=0;i<ary.length;i++){
//i:当前循环这一项的索引
//ary[i]:根据索引获取循环的这一项
console.log('值是'+ary[i]+'索引：'+i);
}
//forEach()
ary.forEach((item,index)=>{
//数组中有多少项，函数就会被默认多少次
console.log('值是:'+item+';索引是：'+index);
})
- map():
- filter():
- reduce():
- some():
- every():
Array.prototype在控制台查看数组中提供的所有方法，可以基于MDN网站去查询方法的用法
如下：在控制台中打印出的所有的数组的方法
