A.ES5 中的循环:
1. for
for(let i=0; i<arr.length; i++){
//循环体语句
}
2. while
while(条件为真){
//循环体语句
}
B.数组新增的一些循环
forEach
|
map
|
filter
|
some()
|
every()
|
reduce()
|
reduceRight()
|
for...of...
语法一致
arr.
forEach
|
map
|
filter
|
some
|
every
|
reduce
|
reduceRight
|
for
...
of
...
(function(
val
,
index
,
arr
){
//回调函数
}
this 指向
);
参数:循环里面执行的回调函数,循环调用执行的语句 (略)
参数:
this
的指向[
可选项
]
循环中回调函数的参数有三个
:
第一个参数:循环出来的值
val
第二个参数:循环出来的值的索引
index
第三个参数:数组本身
ar
1.forEach
let arr = ['aaa', 'bbb', 'ccc'];
arr.forEach(function(val, index, arr) {
console.log(this, val, index, arr);
//回调函数
}, 123);
let arr = ['aaa','bbb','ccc'];
arr.forEach((val,index,arr)=>{
console.log(this,val,index,arr);
},123);
2.arr.map()
important
正常情况下,
需要配合 return
,
返回
是一个
新的数组
若是没有 return,相当于 forEach
注意:平时只要用 map,一定是要有 return
(1)无返回值
let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
console.log(val,index,arr);
});
console.log(newArr);
(2)有返回值
let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
console.log(val,index,arr);
return 1;
});
console.log(newArr);
map 方法一般会用在整理数据结构上,在数据交互的时候,根据需求我们需要改一些前端部分需要的数据
形式:
let aNews = [
{aaa: '为排行暴走万步', bbb: 404512},
{aaa: '李荣浩庆生杨丞琳', bbb: 444512},
];
let newArr = aNews.map((val,index,arr) => {
let json = {};
json.title = `标题:${val.aaa}`;
json.read = `阅览量:${val.bbb}`;
return json;
});
console.log(newArr);
3. filter()
用来过滤一些不合格的元素,如果回调函数返回的是 true,那么自然会被留下来,为 false 的就会被过滤掉
let aNews = [
{title: '为排行暴走万步', read: 404512, hot: false},
{title: '李荣浩庆生杨丞琳', read: 444512, hot: true},
];
let newArr = aNews.filter((val,index,arr) => {
return val.hot==true;
});
console.log(newArr);
4. some()
查找一个字符串存在不存在
let aNews = ['aaa','bbb','ccc'];
let newArr = aNews.some((item,index,arr) => {
return item=='aaa';
});
console.log(newArr);
// true
5. every()
查找数组中的每一项,所有元素都要符合条件,才返回 true
let arr = [1,3,5,7,9];
let newArr = arr.every((val,index,arr)=>{
return val%2==1;
// 判断是不是奇数
});
console.log(newArr);
// true
6. reduce()
从左往右运算→求数组的和、差、积、阶乘
let arr = [2,3,3];
let newArr = arr.reduce((prev,curr,index,arr)=>{
return prev-curr;
// 运算的方式
});
console.log(newArr);
// -4
7. reduceRight()
从右往左运算←
上面这两种方法可以用来求数组的和、阶乘、幂运算;接受 4 个函数参数
let arr = [2,3,3];
let newArr = arr.reduceRight((prev,curr,index,arr)=>{
return prev-curr;
// 运算的方式
});
console.log(newArr);
// -2
ES2017 新增的幂运算符(**)
幂
let arr = [2,3,2];
let newArr = arr.reduce((prev,curr,index,arr)=>{
return Math.pow(prev,curr);
return prev**curr;
});
console.log(newArr);
// 6
Math.pow(2,3)
//ES5 以往做法求 2 的 3 次方
2 ** 3
//ES6 写法
8. for...of...
arr.keys() 数组下标
arr.entries() 数组某一项
let arr = ['aaa','bbb','ccc'];
for (let val of arr) {
console.log(val);
// 输出每一项
// aaa
// bbb
// ccc
}
for (let index of arr.keys()) {
console.log(index);
// 输出每一项的索引
// 0
// 1
// 2
}
for (let item of arr.entries()) {
console.log(item);
// 输出三个数组
// [0, "aaa"]
// [1, "bbb"]
// [2, "ccc"]
console.log(item[0]);
// 0 1 2
console.log(item[1]);
// aaa bbb ccc
}
for (let [key,val] of arr.entries()) {
console.log(key,val);
// 0 "aaa"
// 1 "bbb"
// 2 "ccc"
}