


Commonly used traversal methods for javascript arrays (code examples)
What this article brings to you is about the commonly used traversal methods (code examples) of JavaScript arrays. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Preface
This article mainly introduces common array traversal methods: forEach, map, filter, find, every, some, reduce, they all have one thing in common: they will not change the original array.
1. forEach: Traverse the array
var colors = ["red","blue","green"]; // ES5遍历数组方法 for(var i = 0; i <pre class="brush:php;toolbar:false">// ES6 forEach colors.forEach(function(color){ console.log(color);//red blue green });
Let’s look at an example again: traverse the values in the array and calculate the sum
var numbers = [1,2,3,4,5]; var sum = 0; numbers.forEach(number=>sum+=number) console.log(sum)//15
2. Map: Map an array into another array
map processes each element of the array through the specified function and returns the new array after processing. Map does not change the original array.
The difference between forEach and map is that forEach has no return value.
map needs to return a value. If no return is given, it will return undefined by default
Usage scenario 1
Assume that there is a numerical array (A), and the values in the A array are doubled in the form B array
var numbers = [1,2,3]; var doubledNumbers = []; // es5写法 for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 map方法 var doubled = numbers.map(function(number){ return number * 2; }) console.log(doubled);//[2,4,6]
Usage scenario 2 Assume there is an object array (A), and store the value of a certain attribute of the object in the A array into the B array
var cars = [ {model:"Buick",price:"CHEAP"}, {model:"BMW",price:"expensive"} ]; var prices = cars.map(function(car){ return car.price; }) console.log(prices);//["CHEAP", "expensive"]
3. Filter: Find all elements that meet the specified conditions from the array
filter() detects numeric elements and returns an array of all elements that meet the conditions. filter() does not change the original array.
Usage scenario 1: Assume there is an object array (A), get the specified type of object in the array and put it into the B array
var porducts = [ {name:"cucumber",type:"vegetable"}, {name:"banana",type:"fruit"}, {name:"celery",type:"vegetable"}, {name:"orange",type:"fruit"} ]; // es5写法 var filteredProducts = []; for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 filter var filtered2 = porducts.filter(function(product){ return product.type === "vegetable"; }) console.log(filtered2);
Usage scenario 2: Assume there is An object array (A), filter out objects that do not meet the following conditions
Conditions: The quantity of vegetables is greater than 0, and the price is less than 10
var products = [ {name:"cucumber",type:"vegetable",quantity:0,price:1}, {name:"banana",type:"fruit",quantity:10,price:16}, {name:"celery",type:"vegetable",quantity:30,price:8}, {name:"orange",type:"fruit",quantity:3,price:6} ]; products = products.filter(function(product){ return product.type === "vegetable" && product.quantity > 0 && product.price <p><strong>Usage scenario 3</strong>: Assume there are two arrays (A,B), based on the id value in A, filter out the data that does not match the B array</p><pre class="brush:php;toolbar:false">var post = {id:4,title:"Javascript"}; var comments = [ {postId:4,content:"Angular4"}, {postId:2,content:"Vue.js"}, {postId:3,content:"Node.js"}, {postId:4,content:"React.js"}, ]; function commentsForPost(post,comments){ return comments.filter(function(comment){ return comment.postId === post.id; }) } console.log(commentsForPost(post,comments));//[{postId:4,content:"Angular4"},{postId:4,content:"React.js"}]
4. find: Returns the first element of the array that passes the test (judged within the function) Value
Its parameter is a callback function, and all array members execute the callback function in sequence until the first member whose return value is true is found, and then returns that member. If there are no matching members, undefined is returned.
Usage scenario 1
Assume there is an object array (A), find the object that meets the conditions
var users = [ {name:"Jill"}, {name:"Alex",id:2}, {name:"Bill"}, {name:"Alex"} ]; // es5方法 var user; for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 find user = users.find(function(user){ return user.name === "Alex"; }) console.log(user);// {name:"Alex",id:2}找到后就终止循环
Usage scenario 2: Assume there is an object array (A), according to Specify the conditions of the object to find the objects in the array that meet the conditions
var posts = [ {id:3,title:"Node.js"}, {id:1,title:"React.js"} ]; var comment = {postId:1,content:"Hello World!"}; function postForComment(posts,comment){ return posts.find(function(post){ return post.id === comment.postId; }) } console.log(postForComment(posts,comment));//{id: 1, title: "React.js"}
5. every&some
every: Whether each element in the array meets the specified conditions
some: Whether there are elements in the array that meet the specified conditions
Usage scenario 1: Calculate whether each computer operating system in the object array is available. If the operating system is greater than 16 bits, it means it is available, otherwise it is not available
//ES5方法 var computers = [ {name:"Apple",ram:16}, {name:"IBM",ram:4}, {name:"Acer",ram:32} ]; var everyComputersCanRunProgram = true; var someComputersCanRunProgram = false; for(var i = 0; i <pre class="brush:php;toolbar:false">//ES6 some every var every = computers.every(function(computer){ return computer.ram > 16; }) console.log(every);//false var some = computers.some(function(computer){ return computer.ram > 16; }) console.log(some);//true
In a nutshell: Every: One true is true; Some: One false is false
##Usage scenario 2: Assume there is a registration page, Determine whether the length of all input content is greater than 0
function Field(value){ this.value = value; } Field.prototype.validate = function(){ return this.value.length > 0; } //ES5方法 var username = new Field("henrywu"); var telephone = new Field("18888888888"); var password = new Field("my_password"); console.log(username.validate());//true console.log(telephone.validate());//true console.log(password.validate());//true //ES6 some every var fields = [username,telephone,password]; var formIsValid = fields.every(function(field){ return field.validate(); }) console.log(formIsValid);//true if(formIsValid){ // 注册成功 }else{ // 给用户一个友善的错误提醒 }
6. reduce: combine the array into a value
reduce() method receives a method as an accumulator, in the array Each value of (from left to right) starts to be merged into one value. Usage scenario 1: Calculate the sum of all values in the arrayvar numbers = [10,20,30]; var sum = 0; //es5 方法 for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 reduce var sumValue = numbers.reduce(function(sum2,number2){ console.log(sum2);//0 10 30 60 return sum2 + number2; },0);//sum2初始值为0 console.log(sumValue);
Usage scenario 2: Extract an attribute of the object in the array to another In the array
var primaryColors = [ {color:"red"}, {color:"yellow"}, {color:"blue"} ]; var colors = primaryColors.reduce(function(previous,primaryColor){ previous.push(primaryColor.color); return previous; },[]); console.log(colors);//["red", "yellow", "blue"]
Usage scenario 3: Determine whether the brackets in the string are symmetrical
function balancedParens(string){ return !string.split("").reduce(function(previous,char){ if(previous <p class="comments-box-content"></p>
The above is the detailed content of Commonly used traversal methods for javascript arrays (code examples). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
