循环的N种写法

Posted 2021-03-23 pengdt

protype，json都算进去

先总结一下
伪数组的循环方式有，for，for-of
数组的循环方式有for，forEach，map，filter，find，some，every，reduce，for-of
对象的循环方式有for-in，JSON，for-of
Set的循环有forEach，for-of
Set的循环有forEach，for-of

挑重要的说
map,filter
some，every通过循环里返回对象决定最后的结果是对错
reduce，JSON，for-of

map映射

var arr = [11, 'lala', 'haha11', '123'];
var newArr = arr.map(function(x, y, z) {
   // x代表数组的值可读性应该写成item
   // y代表数组的顺序可读性应该写成index
   // z代表原数组可读性应该写成self
   if(Number(x)) {
    return x*10;
   }
})
console.log(arr); //原数组不会变，想改变原数组可以操作第三个参数
console.log(newArr); //[110, undefined, undefined, 1230]

filter过滤

var arr = [11, 'lala', 'haha11', '123'];
var newArr = arr.filter(function(x, y, z) {
   // x代表数组的值可读性应该写成item
   // y代表数组的顺序可读性应该写成index
   // z代表原数组可读性应该写成self
   if(Number(x)) {
    x++;
    return x * 10;
   }
})
console.log(arr); //原数组不会变，想改变原数组可以操作第三个参数
console.log(newArr); //[110,1230]

some一些判断

var arr = [11, 'lala', 'haha11', '123'];
var flag = arr.some(function(x, y) {
   // x代表数组的值可读性应该写成item
   // y代表数组的顺序可读性应该写成index
   // z代表原数组可读性应该写成self
   if(Number(x)) {
        // 自己判断是不是true或false，决定返回值
    return true;
   }
})
console.log(arr); //原数组不会变
console.log(flag); // true，无返回就默认false

every所有判断

var arr = [11, 'lala', 'haha11', '123'];
var flag = arr.every(function(x, y) {
   // x代表数组的值可读性应该写成item
   // y代表数组的顺序可读性应该写成index
   // z代表原数组可读性应该写成self
   if(Number(x)) {
        // 自己判断是不是true或false，决定返回值
    return true;
   }
})
console.log(arr); //原数组不会变
console.log(flag); // false，无返回就默认false

reduce计算
这个是个非常秀的循环
他会把上一次循环的结果作为下一次循环的参数，最后返回的是最后一次循环的返回

arr.reduce(callback,[initialValue])
callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）

// 不使用第二个参数
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);  // [1, 2, 3, 4] 10

// 使用第二个参数
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},100)
console.log(arr, sum);  // [1, 2, 3, 4] 110

// 字母去重
var str = "asdkaldaldadladkadkfjrjgj"
var res = str.split("").reduce((x,y)=>{
    x.includes(y)　?　""　:　x.push(y)
    return x
},[])
console.log(res)

// 字母个数
var str = "asdkaldaldadladkadkfjrjgj"
var res = str.split("").reduce((x,y)=>{
    x[y]　?　x[y]++　:　x[y]=1
    return x
},{})
console.log(res)

// vue的data数据取值，获取data.aa.name的值
var data = {
   aa:{
      name:"pdt"
   }
}
var str = "data.aa.name"
str.split(".").reduce(function(x,y){
   return x[y]
})

JSON

const user = {
   id: 229,
   name: 'John',
   email: '[e-mail]'
};
function replacer(key, value) {
   console.log(typeof value);
   if (key === 'email') {
   return undefined;
   }
   return value;
}
const userStr = JSON.stringify(user, replacer);
console.log(userStr)

for-of

var arr = [11, 'lala', 'haha11', '123'];
const obj = {
   id: 229,
   name: 'John',
   email: '[e-mail]'
};
var set = new Set([11, 'lala', 'haha11', '123']); //一个集合的意思
var map = new Map([
    ['aa', 'aa的值'],
    ['bb', ['bb的值1', 'bb的值2']]
]); //一个字典的意思

for(var x of arr) {
    console.log(x)
}
for(var [key, value] of Object.entries(obj)) {
    console.log(key,value)
}
for(var [key, value] of set.entries()) {
    console.log(key,value)
}
for(var [key, value] of map.entries()) {
    console.log(key,value)
}