1、数组常用方法之 push
push 是用来在数组的末尾追加一个元素
返回值：追加数组的长度
注意：会改变原数组
var arr = [1, 2, 3]
// 使用 push 方法追加一个元素在末尾
arr.push(4)
console.log(arr) // [1, 2, 3, 4]2、数组常用方法之 pop
pop` 是用来删除数组末尾的一个元素
返回值：被删除的数据
注意：会改变原数组
var arr = [1, 2, 3]
// 使用 pop 方法删除末尾的一个元素
arr.pop()
console.log(arr) // [1, 2]3、数组常用方法之 unshift
unshift 是在数组的最前面添加一个元素
返回值：添加数据后，数组的长度
注意：会改变原数组
var arr = [1, 2, 3] // 使用 unshift 方法向数组的最前面添加一个元素 arr.unshift(4) console.log(arr) // [4, 1, 2, 3]
4、数组常用方法之 shift
shift 是删除数组最前面的一个元素
返回值：删除的数据
注意：会改变原数组
var arr = [1, 2, 3] // 使用 shift 方法删除数组最前面的一个元素 arr.shift() console.log(arr) // [2, 3]
5、数组常用方法之 splice
splice 是截取数组中的某些内容，按照数组的索引来截取
注意：会改变原数组
语法： splice(从哪一个索引位置开始，截取多少个，替换的新元素) （第三个参数可以不写）
var arr = [1, 2, 3, 4, 5] // 使用 splice 方法截取数组 arr.splice(1, 2) console.log(arr) // [1, 4, 5] console.log(arr) // [1, 0, 5] 中间0不替换
arr.splice(1, 2) 表示从索引 1 开始截取 2 个内容
第三个参数没有写，就是没有新内容替换掉截取位置
var arr = [1, 2, 3, 4, 5] // 使用 splice 方法截取数组 arr.splice(1, 2, '我是新内容') console.log(arr) // [1, '我是新内容', 4, 5]
arr.splice(1, 2, '我是新内容')` 表示从索引 1 开始截取 2 个内容
然后用第三个参数把截取完空出来的位置填充
6、数组常用方法slice()截取数组
语法：数组.slie(起始索引,结束索引)
特点1：包前不包后
特点2：可以写负整数,就是倒数第几个，等价于 length+负整数
起始索引不写默认为0
结束索引不写默认为length
返回值：一个新数组 ；里面的数组就是截取的数据内容
注意：不会改变原数组
// slice() // var arr = ['a','b','c','d','e']; // var res = arr.slice(1); // var res = arr.slice(1,3); // var res = arr.slice(0,-1); // console.log(arr); // console.log(res);
7、数组常用方法之 reverse
reverse` 是用来反转数组使用的
返回值：反转后的数组
注意：会改变原数组
var arr = [1, 2, 3] // 使用 reverse 方法来反转数组 arr.reverse() console.log(arr) // [3, 2, 1]
8、数组常用方法之 sort
sort` 是用来给数组排序的
注意：会改变原数组
数组.sort() ASCII一位一位比较
数组.sort(function(a,b){return a-b}) 升序
数组.sort(function(a,b){return b-a}) 降序
返回值：排序后的数组
var arr = [2, 3, 1] // 使用 sort 方法给数组排序 arr.sort() console.log(arr) // [1, 2, 3]
这个只是一个基本的简单用法
9、数组常用方法之 concat
concat` 是把多个数组进行拼接
和之前的方法有一些不一样的地方，就是 concat 不会改变原始数组，而是返回一个新的数组
var arr = [1, 2, 3] // 使用 concat 方法拼接数组 var newArr = arr.concat([4, 5, 6]) console.log(arr) // [1, 2, 3] console.log(newArr) // [1, 2, 3, 4, 5, 6]
注意： concat 方法不会改变原始数组
10、数组常用方法 filter
语法：数组.filter(function(item,index,arr){})
返回值：一个新的数组
- 原始数组中满足条件的数据
- 在回调函数中 以return 的新形式书写过滤条件
// filter()
// var arr = [1, 2, 3, 4, 5];
// // 获取arr中大于3的数据 形成新数组
// var res = arr.filter(function (item) {
// return item > 2;
// })
// console.log(res);
/*
封装方法
+ 需求: 根据我的条件原始数组进行过滤，把原始数组中满足条件的数据拿出
组成一个新的数组
+ 荔枝：
- 原始数组：[10,20,30,40]
- 条件 > 20
- [30,40]
*/
// 1. 准备方法
Array.prototype.myFilter = function(cb){
// 准备一个新数组
var ary = [];
// 根据 回调函数的条件， 向 新数组中 添加成员
for(var i = 0;i<this.length;i++){
// 调用cb
var r = cb(this[i],i,this);
// ary.push(this中满足条件的数据)
r&&ary.push(this[i]);
}
// 将新数组返回
return ary;
}
// 将来和私用
var arr = [10,20,30,40];
var res = arr.myFilter(function(item,index,arr){
// 过滤条件
return item>20;
})
console.log(res);
11、数组常用方法之 join 连接数组
语法：数组.join(连接赋符号)
如果连接符号不写，默认使用 ','
作用：把数组中的每一项数据，使用连接符号拼接为一个字符串
返回值：一个连接好的字符串
注意：不会改变原数组
var arr = [1, 2, 3]
// 使用 join 链接数组
var str = arr.join('-')
console.log(arr) // [1, 2, 3]
console.log(str) // 1-2-3
12、数组常用方法 froEach()
专门用于遍历数组
语法：
数组.forEach(function(item,index,arr) { //这个回调函数，数组有多少数据，就会执行多少次
item 表示数组的每一个项
index 表示数组每一个项的索引
arr 表示原数组
})
返回值：没有，undefined
意义：用来遍历数组
数组调用 arr.myForEach() // 报错 arr.myForEach is not a function
-
能不能像forEach一样，数组.myForEach 调用
需要让我们封装的方法能被数组直接调动
需要把这个方法赋值给一个 '空间'内
把我们自己写的 myForEach 放到 '数组方法空间' 中
'数组方法空间' 是一个对象数据类型
'数组方法空间' 被我们称之为 Array.prototype
将我们写的myForEach函数 添加到 '数组方法空间' 这个对象中
Array.prototype.myForEach = myForEach;
此时数组就可以直接调用myForEach方法 ： arr.myForEach()
// 在myForEach中也遍历数组
Array.prototype.myForEach = myForEach;
// 此时数组就可以直接调用myForEach方法
// arr.myForEach(function b(item,index,arr){
// console.log(item,index,arr);
// })
// 求arr数组中的数据和
var sum = 0;
arr.myForEach(function(item){
sum += item;
})
console.log(sum);
13、数组常用方法---map
语法: 数组.map(function(item,index,arr){})
作用：对原数组进行映射
返回值：就是一个和原数组长度一样的新数组，
并且新数组中的数据是被映射操作过的内容
注意：不改变原数组
// map()
// var arr = [10,20,30,40];
// // arr中的数据加百分之30
// var res = arr.map(function(item){
// return item*1.3
// })
// console.log('原数组',arr);
// console.log('映射操作后的数组',res);
/*
封装一个和数组的map一样功能的方法---myMap
+ 需求：
- 根据原数组的长度 返回 一个新的数组
- 在回调函数中可以对原数组中的每一个数据进行操作(我需要的操作)
- 新数组中得到的数据，就是操作后的数据
*/
// 1. 准备一个方法，这个方法可以直接被数组调用
Array.prototype.myMap = myMap
function myMap(cb){
// 在这个函数中，需要找到调用这个方法的那个数组
// 因为需要遍历调用此方法的数组
// 数组方法函数内的关键字 this 指向 调用这个方法的数组
// console.log(this);
// 准备一个新数组
var ary = [];
// 遍历数组 根据原始数组(this)的长度 和cb 的操作
// 向ary中添加数据
for (var i = 0; i < this.length; i++) {
// 使用 myMap方法的人，会把他想要操作数据的方法写在 b 回调函数中
// 需要调用cb,并且把每一项数据 给b函数
// res接受的就是b函数内中的返回值
// 因为b函数内返回的是 每一项 +1 的结果
// res 得到的就是每一个数据 +1 的结果
var res = cb(this[i],i,this);
ary.push(res);
}
// 把操作号的数组返回
return ary;
}
// 2. 将来使用的时候
var arr1 = [1,2,3,4];
var arr2 = [10,20,30,40];
var arr3 = [100,200,300,400];
// 数组直接调用 我们自己写的myMap方法
var resArr = arr3.myMap(function b(item,index,arr){
// 一些操作，假设操作数据 +1
// 以返回值的形式 把结果给出去
return item+1;
})
console.log(resArr);
14、数组常用方法 every
判断数组中是不是所有项都满足条件
如果所有项都满足条件，那么返回 true
只要有任意一项不满足条件，就返回false
条件写在回调函数的 return 后
// // every
// // 判断数组中的数据是否都大于1
// var r1 = arr.every(function(item){
// return item > 0;
// })
// console.log(r1);
// 封装我们自己的every方法---myEvery
// 1. 准备方法
Array.prototype.myEvery = function (cb) {
// 假设变量，假设所有项都满足条件
var flag = true;
// 通过遍历数组 来验证假设
for (var i = 0; i < this.length; i++) {
var r = cb(this[i], i, this)
//如果在循环中，r 为 false 了，说明当前这一个项不满足条件
// 推翻假设
if (!r) {
flag = false;
break;
}
}
// 返回flag
return flag;
}
15、数组常用方法some
判断数组中是不是有每一个项满足条件
只要数组中任意一项满足条件，就返回 true
只有所有项都不满足条件的时候，才返回false
条件写在回调函数的 return 后
// some
// 判断数组中的数据是否有大于4的
// var r2 = arr.some(function(item){
// return item > 4;
// })
// console.log(r2);
// 封装我们自己的some方法---mySome
// 准备一个mySome方法
Array.prototype.mySome = function (cb) {
// 假设变量，假设没有数据满足条件
var flag = false;
for (var i = 0; i < this.length; i++) {
var r = cb(this[i], i, this);
if (r) {
flag = true;
break;
}
}
return flag;
}
// 将来使用的时候
var arr = [10, 20, 30, 40, 50];
// // 判断是否都大于 20
// var r1 = arr.myEvery(function (item) {
// return item > 5;
// })
// console.log(r1);
// 判断是否有大于60的数
var r1 = arr.mySome(function (item) {
return item > 60;
})
console.log(r1);
16、数组常用方法flat()
语法：数组.flat(数字)
如果不传参数，默认拍平一层
传递参数是几，就拍平几层
不管多少维度都可以直接拍平，传递Infinity
作用：拍平一个数组(把多维数组转为一维)数组常用方法
// flat() // var arr = [1,[2,[3,[4,[5]]]]]; // console.log(arr); // // var resArr = arr.flat() // // var resArr = arr.flat(3) // var resArr = arr.flat(Infinity) // console.log(resArr);
17、数组常用方法 find()
- 语法：数组.find(function(item,index,arr){})
+ 返回值：数组中满足条件的第一个数据
- 回调函数中 以 return 的形式书写
// find()
// var arr = [1, 2, 3, 4];
// var res = arr.find(function (item) {
// return item > 1;
// })
// console.log(res);
18、数组常用方法 findIndex()
- 语法：数组.findIndex(function(item,index,arr){})
+ 返回值：数组中满足条件的第一个数据的索引
- 以 return 的形式书写
// findIndex()
// var arr = ['a', 'b', 'c', 'd'];
// var arr = [1, 2, 3, 4];
// var res = arr.findIndex(function (item) {
// // return item === 'c';
// return item > 2;
// })
// console.log(res);
19、 数组常用方法 includes()
- 语法：数组.includes(数据)
+ 返回值：布尔值
- 如果数组中有该数据，那么就是true
- 如果数组中没有该数据，那么就是false
//includes()
// var arr = ['a', 'b', 'c', 'd'];
// // var res = arr.includes('a');
// var res = arr.includes('z');
// console.log(res);
20、数组常用方法 fill()
- 语法：数组.fill(要填充的数据,开始索引,结束索引)
+ 开始索引不写 默认为0
+ 结束索引不写 默认为数组数据的最后一个索引
+ 特点：索引 包前不包后(包含开始索引，不包含结束索引)
- 作用：替换，按照索引位置替换数组中的指定索引的数据
- 注意：直接改变原数组
- 注意：只能替换现有的数据，不能新增
// fill()
// var arr = [10,20,30,40,50];
// arr.fill('数据1');
// arr.fill('数据1',1);
// arr.fill('数据1',1,3);
// arr.fill('数据1',1,6);
// console.log(arr);
21、数组常用方法 reduce()
- 语法：数组.reduce(function(prev,item,index,arr){},init)
- init 如果不写，默认 使用数组的第一个数据
- 作用：叠加
— 返回值：就是叠加后的结果
// reduce()
// var arr = [10, 20, 30, 40, 50];
// var res = arr.reduce(function (prev, item) {
// console.log(prev, item)
// return prev+item;
// },0)
// console.log(res);
/*
你设置 init 位置的参数
循环第一次， prev 就是init 位置的数据，item就是数组的第一项
循环第二次及之后， prev 就是上一次 return 的内容，item就是数组当前的第几项
你没有设置 init 位置的参数
循环第一次， prev 就是数组的第一项[0]数据，item就是数组的第二项
循环第二次及之后， prev 就是上一次 return 的内容，item就是当前数组的后一项
*/
22、数组常用方法 concat() 拼接数组
语法：数组.concat(数组2,数据,数组3...)
作用：把所有参数中的数组或数据追加到原始数组的后面，如果参数是数组，那么就拆开追加
返回值：拼接好的新数组
注意：不会改变原数组
//concat()
// var arr = [1,2,3];
// var res = arr.concat('a','b','c',['d','e']);
// console.log(arr);
// console.log(res);
23、数组常用方法indexOf()
语法：数组.indexOf(要查找的数据)
数组.indexOf(要查找的数据,开始索引)
返回值：
从前向后查找数组中的数据，找到的第一个满足要求的数据
返回第一个满足要求的数据的索引
如果有这个数据 则返回 数据 的索引 ； 如果没有这个数据 则-1
//indexOf()
// var arr = ['a', 'b', 'c', 'b', 'e'];
// var res = arr.indexOf('b');
// var res = arr.indexOf('b',2);
// var res = arr.indexOf('z');
// console.log(res);
24、数组常用方法 lastIndexOf()
语法： 数组.lastIndexOf(要查找的数据)
数组.lastIndexOf(要查找的数据,开始索引)
返回值：
- 从后向前查找数组中的数据，找到的第一个满足要求的数据
- 返回第一个满足要求的数据的索引
- 如果有这个数据 则返回 数据 的索引
- 如果没有这个数据 则-1
//lastIndexOf()
// var arr = ['a', 'b', 'c', 'b', 'e'];
// var res = arr.lastIndexOf('b');
// var res = arr.lastIndexOf('b', 2);
// var res = arr.lastIndexOf('z');
// console.log(res);