~~
文章中提到的方法是数组的方法,只能数组用.但是对于伪数组而言,伪数组的原型内有forEach方法,所以伪数组也能使用
数组.map(function(item,index) {})
数组.filter(function(item,index) {})
数组.forEach(function(item,index) {})
数组.some(function(item,index) {})
数组.every(function(item,index) {})
数组.findIndex(function(item,index) {})
数组.reduce(function (sum,item,index) {},0) 以上七个方法的回调函数内的参数都有数组元素和下标,但这七个方法的作用都不同哦~
声明
方法1:(常用)
let 数组名 = [] //空数组
let 数组名 = [数据1,数据2,...,数据n]
方法2:使用new Array 构造函数声明数组
let arr2 = new Array()
增删改查
访问数组元素
let arr = ['干饭',1,true,false,undefined]
//语法 : 数组名[下标]
console.log(arr[0])
重新赋值
let arr = ['干饭',1,true,false,undefined]
//数组名[下标]= 新值
arr[0]='睡觉'
获取数组长度
// 语法 : 数组名.length
let arr = ['干饭',1,true,false,undefined]
console.log(arr.length)
数组新增
let arr = ['迪丽热巴','纪云禾','国超','任嘉伦']
// ★重点方法1: 数组名.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
arr.push('李长歌')
console.log(arr.push('阿娘'));
console.log(arr);
// 方法2 数组名.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
arr.unshift('阿诗勒隼')
console.log(arr.unshift('阿耶'));
console.log(arr);
//方法3 利用 splice 添加元素
// 数组名.splice(从索引号几开始,删除几个(0个),添加元素)
arr.splice(2,0,'pink')
数组删除
- 方法1 : 数组名.pop() 删除最后一个元素
- 方法2 : 数组名.shift() 删除第一个元素
- 方法3 : 数组名.splice(从索引号几开始,删除几个)
遍历数组
for 循环
const arr = ['pink','blue','plum','red']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // arr[i]代表数组里的元素
}
forEach()
方法2:
forEach()方法---数组的方法,只能数组用(但是伪数组的原型中有forEach方法,所有伪数组也可以用该方法),仅仅用来遍历数组
arr.forEach( function (item,index,o){
// 第一个参数item:数组元素
// 第二个参数index:当前数组元素的索引值
// 第三个参数o:代表当前数组本身
// 参数,用到谁写谁
console.log(item,index,o);
} )
map()
方法3:
map()方法---遍历数组每一项,执行回调函数,把所有结果放到新数组返回
const newArr = arr.map( function (item,index,o){
// 第一个参数item:数组元素
// 第二个参数index:当前数组元素的索引值
// 第三个参数o:代表当前数组本身
// console.log(item,index,o);
return item + '颜色'
} )
console.log(newArr);
filter()
filter()能够将符合条件元素放到新的数组,并返回
const arr1 = [10,20,30]
const newArr1 = arr1.filter(function(item,index) {
console.log(item);
console.log(index)
return item >= 20 //只能写大于小于(比较运算符,不能写加减)
})
console.log(newArr1);
数组的其他常用方法
concat()
arr.concat(其他数组) : 连接数组得到一个新数组
应用场景:下拉加载更多.此时会把新数组连接到原来的数组后面
const arr = [10,20]
arr = arr.concat(['pink','blue'])
console.log(arr); // [10,20,'pink','blue']
利用...连接多个数组
let arr1 = [10,20,30]
let arr2 = [40,50,60]
let arr3 = [70,80,90]
console.log(...arr1); // 打印得到数组arr1里的元素 10 20 30; ...会自动遍历数组传参
arr1 = arr1.concat(...arr2,...arr3)
console.log(arr1);
join()
arr.join('分隔符') :把数组每一个元素冰洁成字符串
应用场景:歌手不止一个,服务器会给一个数组
['周杰伦','蔡依林'].join('&') // 周杰伦&蔡依林
reverse()
arr.reverse() :反转数组
应用场景: 电商类的销量、价格、距离,点击之后会翻转显示
const arr = [10,20]
arr.reverse ()
console.log(arr); // [20,10]
sort()
arr.sort( function (a,b) {return a-b}) :数组排序
let numArr = [5,15,25,35,45]
numArr.sort(
function(a,b) {
// return a - b //从小到大排序
return b-a // 从大到小排序
}
)
console.log(numArr);
some()
some()方法的作用: 判断数组中有没有满足条件的元素 (类似于逻辑或 ||)应用场景: 非空判断:判断有没有空
some()方法的返回值:
1.返回true 有满足条件元素
2.返回false 没有满足条件元素
// 判断数组元素里面有没有偶数
let arr = [12,20,25,65,58]
// 完整写法
let res1 = arr.some(function (item,index) {
// 第一个参数item:数组元素
// 第二个参数index: 下标
if (item % 2 === 0) {
return true
} else {
return false
}
})
console.log(res1);
// 箭头函数简写:
let res2 = arr.some(item => item % 2 === 0)
console.log(res2); // true
every()
every方法作用: 判断数组中所有的元素都满足条件 (类似于 逻辑与 &&)
应用: 全选
every()方法的返回值
1.返回true 所有元素都满足条件
2.返回false 有元素不满足条件
// 判断数组元素里面有没有偶数
let arr = [12,20,25,65,58]
// 完整写法
let res1 = arr.every(function (item,index) {
// 第一个参数item:数组元素
// 第二个参数index: 下标
if (item % 2 === 0) {
return true
} else {
return false
}
})
console.log(res1);
// 箭头函数简写:
let res2 = arr.every(item => item % 2 === 0)
console.log(res2); // false
findIndex()
findIndex()方法作用: findIndex()与indexOf()作用相同,都是找元素下标,应用场景不同:
(1) 数组中的元素是值类型用
indexOf()(2) 数组中的元素是应用类型 :
findIndex()
findIndex方法的返回值:
-
返回
下标: 找到元素 -
返回
-1: 没有该元素
let arr = [
1,
{name:'小红',age:20},
{name:'小名',age:25},
{name:'小王',age:18}
]
// 完整写法:
let index = arr.findIndex(function (item,index) {
// 第一个参数item:数组元素
// 第二个参数index: 下标
if (item.name === '小红') {
return true
} else {
return false
}
}) */
// 箭头函数简写:
let index = arr.findIndex(item => item.name === '小红' )
console.log(index);
reduce()
应用场景: 数组求和
/* reduce方法的参数 :
*第一个参数: 回调函数
function (sum,item,index) {}
sum : 累加和,本次循环的sum值就是上一次回调的返回值
item : 数组元素
index : 数组下边
*第二个参数: 初始值 一般传0
一般reduce下标index默认从1开始,如果遇到空数组会报错
返回sum的值
*/
let arr = [12,20,35,65,57]
let res = arr.reduce(function (sum,item,index) {
console.log(sum,item,index)
return sum + item
},0)
console.log(res);
slice ()
切割数组得到新数组 :
let arr = [12,20,35,65,57]
// arr.slice(从哪个下标开始-包含,到哪个下标结束-不包含)
console.log( arr.slice(2,4)); // [35,65]
find()
arr.find((item,index,arr) => {})参数的含义 : item: 数组的元素, index : 数组的下标, arr:查找的数组
find()对于空数组,函数是不会执行的,而且find()不会改变数组的原始值
const arr = [1,2,3,5,1]
console.log( arr.find(item => item===1) ) // 1 返回的是第一个符合条件的元素
console.log( arr.find(item => item===7) ) // undefined 如果没有符合条件的元素,则返回undefined
includes()
检测数组是否有该元素,返回的值是布尔值
const arr = [1,2,3,5]
console.log( arr.includes(1) ) // true
console.log( arr.includes(7) ) // false
伪数组 转换 为真数组
伪数组
伪数组 : 有 下标,元素,长度,但不是能使用数组的方法
伪数组和数组的原型不一样
伪数组的本质是 对象
let obj = {
0 : 10,
1 : 20,
2 : 30,
length : 3
}
方法1:手动把伪数组元素依次取出来添加到数组arr中
arr.push(obj[0],obj[1],obj[2])
console.log(arr);
方法2: 循环遍历伪数组
for (let i = 0; i < obj.length; i++) {
arr.push(obj[i])
}
方法3 : arr.push.apply(arr,伪数组)
// 这里使用apply不是为了修改this,而是为了借助apply自动遍历传参的特点
arr.push.apply(arr.obj)
console.log(arr);
方法4(实际开发使用): ES6伪数组转成真数组,固定静态方法 Array.from(伪数组)
let newArr = Array.from(obj)
console.log(newArr);
求数组最大值
let arr = [20,50,62,65,90,78,98]
方法1: for循环
let max = arr[0]
for (let i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i]
}
}
console.log(max);
方法2: Math.max()
let max1 = Math.max(arr[0],arr[1],arr[2],arr[3],arr[4],arr[5],arr[6])
console.log(max1);
方法3 : Math.max.apply(Math,数组)
let max2 = Math.max.apply(Math,arr)
console.log(max2);
方法4: ES6: Math.max(...arr)
... 功能类似于apply,也会自动遍历数组传参
let max3 = Math.max(...arr)
console.log(max3);
数组去重
数据类型 Set
Set 集合 : 相当于数组,但是Set 不能存储重复元素
// 数组去重
let arr = [10,20,30,50,60,88,20,50,60,90]
console.log(arr);
/* // 1.创建Set
let set = new Set(arr)
console.log(set);
// 2.把set转成数组
let newArr = [...set] */
// 简写:
let newArr = [...new Set(arr)]
console.log(newArr);
暂时就这些啦~...~
