js的各种遍历

mj 发布于2019-08-26 11:33 / 1981人阅读

摘要：小明是中简单，最直接的一种用法，写起来较麻烦，循环要执行确定的次数，通常使用循环。

</>复制代码 
    let arr = [2, 4, 6, 56, 7, 88];
    let obj = {
        name: "小明",
        age: 18,
        hobby: "run,song,game"
    };
    let str="xiaoming"

for

for是js中简单，最直接的一种用法，写起来较麻烦，循环要执行确定的次数，通常使用 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
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
for  in
遍历的key,key为string类型，也会循环原型链中的属性，适用于对象
</>复制代码 
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个值是否相同，返回布尔值

GPU云服务器云服务器 js 中各种数据类型的比较 js遍历对象的数据 js获取遍历中的单个 js遍历的数据怎么换行显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107116.html

【JS基础】ES6语法

摘要：遍历器对象调用方法后，抛出的异常被函数体捕获以后，会附带执行下一条语句。 iterator迭代器在ES6之前遍历数组的方法有以下四种： // 第一种 for(var i = 0; i < array.length; i++){ console.log(array[i]) } // 第二种 array.forEach(function(item,index){ cons...

Maxiye 2019-08-22 15:15 评论0 收藏0
JavaScript二叉树及各种遍历算法详情

　　在之前的文章中我们有讲过树的相关知识，例如，树的概念、深度优先遍历和广度优先遍历。这篇文章讲述了一个特殊的树——二叉树。什么是二叉树　　二叉树是每个节点最多只能有两个子节点的树，如下图所示：　　一个二叉树具有以下几个特质：　　要计算在每层有多少个点，可以依据公式2^(i-1)个(i是树的第几层)；　　如果这颗二叉树的深度为k，那二叉树最多有2^k-1个节点；　　在一个非空的二叉树中，若使...

3403771864 2022-09-18 22:18 评论0 收藏0
task0002（一）- JavaScript数据类型及语言基础

摘要：不过让流行起来的原因应该是是目前所有主流浏览器上唯一支持的脚本语言。经过测试，数字字符串布尔日期可以直接赋值，修改不会产生影响。再考虑对象类型为或者的情况。对于结果声明其类型。判断对象的类型是还是，结果类型更改。转载自我的个人博客欢迎大家批评指正 1. 第一个页面交互这里最需要学习的老师的代码中，每一部分功能都由函数控制，没有创建一个全部变量。且最后有一个函数来控制执行代码...

elarity 2019-08-22 10:59 评论0 收藏0
JavaScript 堆内存分析新工具 OneHeap

摘要：关注于运行中的内存信息的展示，用可视化的方式还原了，有助于理解内存管理。背景运行过程中的大部分数据都保存在堆中，所以性能分析另一个比较重要的方面是内存，也就是堆的分析。上周发布了工具，可以用来动态地展示的结果，分析各种函数的调用关系。 OneHeap 关注于运行中的 JavaScript 内存信息的展示，用可视化的方式还原了 HeapGraph，有助于理解 v8 内存管理。 ...

zilu 2019-08-21 10:36 评论0 收藏0
js中的for in和for each in的用法和区别

摘要：区别一是中发布的。是作为标准的一部分在中发布的，而它不是标准的一部分。这将意味着存在各种浏览器的兼容性问题。遍历对象，由于没办法提供理想的遍历，因而只能选择其他方法。区别一： for in是javascript 1.0 中发布的。 for each in是作为E4X标准的一部分在javascript 1.6中发布的，而它不是ECMAScript标准的一部分。这将意味着存在各种浏览器...

Blackjun 2019-08-20 15:26 评论0 收藏0