数组遍历
是否改变原数组
不会改变原数组
- forEach(callback)
- map( callback)
- every(callback)
- some(callback)
- filter(callback) 过滤所有 find() 过滤第一个
- reduce(callback)
会改变
- sort(sortFn)
callback,作为参数传递的函数 (在IE8以上的浏览器才支持),像这种函数,由我们创建但是不由我们调用,我们称为回调函数
1.forEach(callback)
数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来
对数组的每个元素执行一次提供的函数, 没有返回值(return的结果:undefined)
参数:
callback(回调函数:作为参数传递的函数)为数组中每个元素执行的函数,该函数会接收一到三个参数
第一个参数 数组中正在处理的当前元素
第二个参数 数组中正在处理的当前元素的索引(下标)[可选]
第三个参数 正在操作的数组[可选]
不会改变原数组
let arr1 = [1, 2, 3, 4];
arr1.forEach(function(val, index,_arr){
console.log(val);
console.log(index);
console.log(_arr);
});
2、map( callback)方法
功能:
通过指定函数处理数组的每个元素,并返回处理之后的数组参数:
注意:
不会对空数组进行检测
不会改变原数组
输出arr2数组中大于3的元素
let arr2 = [1, 2, 3, 4,5];
//map()方法
let newArr2 = [];
newArr2 = arr2.map(function(item,index,array){
if(item > 3){
return item;
}
});
console.log(newArr2);
console.log(arr2);//不修改原数组
//forEach()方法
let newArr2a = [];
arr2.forEach(function(val ,index){
if(val >=3){
// return val;// 返回的是undefined
newArr2a.push(val);//可以推到新数组
}
});
console.log(newArr2a);
3.every(callback)
功能:
返回的是一个布尔值,成立条件是每一个元素满足条件就会返回true,否则就是false
注意:
不会对空数组进行检测
不会改变原数组
4.some(callback)
返回的是一个布尔值,成立条件是只要有一个元素满足条件就会返回true,否则就是false
注意:
不会对空数组进行检测
不会改变原数组
let arr3 = [123,33,4,5,888]
//arr3中每个元素是否大于10
let newArr3;
newArr3 = arr3.every(function(item){
return item > 10;
});
console.log(newArr3);
//是否有元素大于500
let newArr4;
newArr4 = arr3.some(function(item){
console.log(item);
return item >500;
});
console.log(newArr4);
console.log(arr3);
console.log("-----------------");
console.log("5.filter(callback)");
5.filter(callback)
创建一个新数组,新数组里面的元素是返回符合条件的所有元素
注意:
不会对空数组进行检测
不会改变原数组
let arr5 = [1,2,3,4,5];
let newArr5=[];
//过滤arr5数组中大于3的元素
newArr5 = arr5.filter(function(val,index){
return val >3;
})
//链式调用 直接在后面加 .xxxx()
// newArr5 = arr5.filter(function(val,index){
// return val >3;
// }).forEach(function(item){
// console.log(item);
// })
// 不过注意,这里.foeEach(),还返回了undefined, foeEach(没有返回值,后面不能加.xxx()
console.log(newArr5);
console.log(arr5);
6.reduce(callback) 累加器
接受一个函数作为累加器,数组中每一个值(从左到右)开始缩减,最终计算为一个值
参数:
callback(回调函数:作为参数传递的函数)
第一个参数 total 必填,初始值,计算结束后的返回值
第二个参数 current 必填,当前元素
第三个参数 index 可选,当前元素索引值
第四个参数 array 可选,当前元素所属的数组对象
init 可选,传递给函数的初始值
注意:
不会对空数组进行检测
数组中所有值求和
let arr6 = [1,2,3,4,5];
let arr66 = [];
arr66 = arr6.reduce(function(total,current,inedx){
return current+total;
},40);
console.log(arr66);//40+1+2+3+4+5
let a=[1,2,4,5,6]
console.log(a.reduce((x,y) =>x+y));
//数组中所有值求和,求乘积
let a=[1,2,4,5,6]
console.log(a.reduce((x,y) =>x+y));
console.log(a.reduce((x,y) =>x*y));
//>30的加到新数组
let arr1a = [10, 20, 30, 40,50];
let arr2a= [];
arr2a = arr1a.filter(function(val){
return val>50;
}).reduce(function(total,current,index){
return total.concat(current);
},[]);
console.log(arr2a);
// 获取参数的平均数值
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
console.log(average(1, 2, 3, 4));
7.sort(sortFn) 排序
对数组进行排序
参数:
sortFn 可选。规定排序的顺序
注意:
该方法会改变原数组
1.不传参
数组成员将会按照字符串编码的顺序进行排序 (数字会转为字符串)
Unicode编码大小顺序:数字 大写 小写 文字
let arr7 = [1,40,6,100,"haha","Aa","哈哈",60,78];
arr7.sort();//不需要重复赋值,说明 sort 会影响原数组
console.log(arr7);
2.传参
从小到大
let arr7a = [1,40,6,60,78,100];
// arr7a.sort(function(a,b){
// return a - b;
// });
arr7a.sort((a,b)=>a-b);
console.log(arr7a);
2从大到小
let arr7b = [1,40,6,60,78,100];
arr7b.sort(function(a,b){
return b - a;
});
console.log(arr7b);
// 字符串的长度排序
const arr= ['a','ggg','grfga','aa'];
arr.sort(function(a,b){
return a.length - b.length;
})
console.log(arr);//(4) ["a", "aa", "ggg", "grfga"]
// 将对象里面的年龄进行有序排序
const weng = {
name : "weng",
age:18,
}
const zhi = {
name : "zhi",
age:25,
}
const ye = {
name : "ye",
age:20,
}
const arr = [weng,zhi,ye];
arr.sort(function(a,b){
return a.age - b.age;
})
console.log(arr);
其3:字节长度排序(需要先封装一个方法)
求字节长度的代码
function retBytes(str){
const num = str.length;
for(const i = 0;i < str.length;i++){
if(str.charCodeAt(i) > 255){
num++;
}
}
return num;
}
在后台验证上面的方法:
const str=‘hell0翁’
undefined
retBytes(str)
搞定了求字节长度的方法,我们再来求字节长度排序
function retBytes(str){
const num = str.length;
for(const i = 0;i < str.length;i++){
if(str.charCodeAt(i) > 255){
num++;
}
}
return num;
}
const arr= ['你真帅WZY','二分','志dfsg','gdfgdfgafaf','业ad'];
arr.sort(function(a,b){
return retBytes(a)- retBytes(b);
})
consoele.log(arr);
解决了有序排列的问题,那么接下来我们来搞定无序排列
对数组内的数据无序排列(乱序)
无序排列需要用到一个方法:Math.random()
Math.random() 这东西的作用是在(0,1)之间,不包括0,也不包括1。随机生成一个数
const arr=[1,2,3,4,5];
arr.sort(function(){
return Math.random()-0.5;
});
当 Math.random()取在(0.5,1)之间 Math.random()-0.5 > 0
当 Math.random()取在(0,0.5]之间 Math.random()-0.5 <0
因此排列顺序随机