js的各种遍历

Waxiangyu
    let arr = [2, 4, 6, 56, 7, 88];
    let obj = {
        name: '小明',
        age: 18,
        hobby: 'run,song,game'
    };
    let str="xiaoming"

for

forjs中简单,最直接的一种用法,写起来较麻烦,循环要执行确定的次数,通常使用 for 循环。for类循环都可以break,return.

    for (let i = 0; i < arr.length; i++) {

        console.log(i + ':' + arr[i]) //0:2 1:4 2:6 3:56 4:7 5:88
    }

while

很容易死循环

let arr=[1,0,8,7],i=0;
while(i<arr.length){
    console.log(i+':'+arr[i]);//0:1 1:0 2:8 3:7
    i++
}

do while

很容易死循环

let arr=[1,0,8,7],i=0;
do{
    console.log(i+':'+arr[i]);//0:1 1:0 2:8 3:7
    i++
}while(i<arr.length)

for in

遍历的key,keystring类型,也会循环原型链中的属性,适用于对象

for(let key in obj){

    console.log(key+':'+obj[key]) //name:小明 age:18 hobby:run,song,game

}

for of

遍历的value

for(let value of arr){
    console.log(value) //2 4 6 56 7 88
}

for (let [key, value] of arr.entries()) {
    console.log(key+':'+value); //0:2 1:4 2:6 3:56 4:7 5:88
}

for (let [key, value] of Object.entries(obj)) {
    console.log(key+':'+value); //name:小明 age:18 hobby:run,song,game
}

forEach

最节省内存的一种,但是不能break,也不能用return

    arr.forEach((value,key)=>{
        console.log(key + ':' + value) //0:2 1:4 2:6 3:56 4:7 5:88
    })

    Object.keys(obj).forEach((value)=>{
        console.log(value) //"name", "age", "hobby"
    })
    

map

同forEach写法一样,循环每一个的时候就相当于在内存中新建了一个数据,比较占内存,与forEach不同的是,它可以return。返回数组。

arr.map((value,index)=>{
    console.log(index+':'+value) //0:2 1:4 2:6 3:56 4:7 5:88
})

Object.values(obj).map((value,key)=>{
    console.log(key+':'+value) //0:小明 1:18 2:run,song,game
})

Object.keys()/values()

console.log(Object.keys(obj)) // (3) ["name", "age", "hobby"]
console.log(Object.values(obj)) // (3) ["小明", 18, "run,song,game"]

Array

Array.prototype.reduce()

累加器

语法:arr .reduce(callback [累加器累加的值,当前元素的值,当前元素的索引(可选),])
arr.reduce((acc,value)=>acc+value) //2+4+6+56+7+88=163

arr.reduce((acc,value)=>{
    return acc+value
},5) //5+2+4+6+56+7+88=168,第一个为此时设置的值为index=0开始

//合并数组
[[0, 1], [2, 3], [4, 5]].reduce(
  ( acc, cur ) => acc.concat(cur),
  [] //[0, 1, 2, 3, 4, 5]
);

//统计出现次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {}); // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }


//按顺序运行promise
function runPromiseInSequense(arr) {
  return arr.reduce((promiseChain, currentPromise) => {
    return promiseChain.then((chainedResult) => {
      return currentPromise(chainedResult)
        .then((res) => res)
    })
  }, Promise.resolve());
}

// promise function 1
function p1() {
  return new Promise((resolve, reject) => {
    resolve(5);
  });
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2);
  });
}

// promise function 3
function p3(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 3);
  });
}

const promiseArr = [p1, p2, p3];
runPromiseInSequense(promiseArr)
  .then((res) => {
    console.log(res);   //5+5*2+5*3= 30
  });

Array.prototype.every()

遍历所有元素,得到一个bool值,要所有条件都相符才会返回true

arr.every(x =>{ x >= 10}); // false

Array.prototype.some()

得到一个布尔值,只要有一个符合条件就可返回true

arr.some(item=>{
    return item>10 //true
})

Array.prototype.filter()

返回一个符合条件的新数组

arr.filter(item=>{
    return item>10 //(2) [56, 88]
})

Array.prototype.find()

返回符合条件的数组的值或数组的对象,找不到返回undefined

arr.find(item=>item==2)//2
Array.indexof(),findIndex()/includs()查找。返回index/-1,boolean
Array.prototype.fill(填充的值,开始索引,结束索引)[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]

Array.sort()

排序

arr.sort((a,b)=>a-b)//升序
arr.sort((a,b)=>b-a)//降序

Object

Object.creact(proto)

proto:一个对象,作为创建新对象的原型或null
用指定的原型对象和属性创建一个新的对象

//来实现类式继承,单继承
fuction Shape(){
    this.x=0;
    this.y=0;
}
Shape.prototype.move=function(x,y){
    this.x += x;
    this.y += y
}

function Rectangle(){
    Shape.call(this)
}
Rectangle.prototype=Object.create(Shape.prototype)
var rect=new Rectangle()
rect instanceof Rectangle //true
rect instanceof Shape //true

Object.defineProperty(目标对象,给对象要加的属性);返回加了属性之后的对象
Object.getOwnPropertyNames(目标对象);返回带有该对象属性的数组
Object.is(value1,value2);判断2个值是否相同,返回布尔值
阅读 2.8k
628 声望
28 粉丝
0 条评论
628 声望
28 粉丝
文章目录
宣传栏