자바스크립트 배열에 일반적으로 사용되는 순회 메서드(코드 예제)

이 기사는 일반적으로 사용되는 JavaScript 배열의 순회 방법(코드 예제)에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

머리말

이 글에서는 주로 일반적인 배열 순회 방법을 소개합니다: forEach, map, filter, find,every,some,reduce, 한 가지 공통점이 있습니다: 원본을 변경하지 않습니다. 정렬.

1. forEach: 배열을 순회합니다.

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
});

또 다른 예를 살펴보겠습니다. 배열의 값을 순회하고 합계를 계산합니다.

var numbers = [1,2,3,4,5];
var sum = 0;
numbers.forEach(number=>sum+=number)
console.log(sum)//15

2. map: 배열을 다른 배열에 매핑합니다.

map 지정된 함수를 통해 배열의 각 요소를 처리하고 처리 후 새 배열을 반환합니다. Map은 원래 배열을 변경하지 않습니다.

forEach와 map의 차이점은 forEach에는 반환 값이 없다는 것입니다.
map은 값을 반환해야 하는데, 반환이 주어지지 않으면 기본적으로 정의되지 않은 값을 반환합니다

사용 시나리오 1
숫자 배열(A)이 있다고 가정하고, A 배열의 값을 B 배열에 넣습니다. double form

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]

사용 시나리오 2 객체 배열(A)이 있다고 가정하고, A 숫자에 있는 객체의 특정 속성 값을 B 배열

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( )는 숫자 요소를 감지하고 기준을 충족하는 모든 요소의 배열을 반환합니다. filter()는 원래 배열을 변경하지 않습니다.

사용 시나리오 1: 객체 배열이 있다고 가정하고(A), 배열에서 지정된 유형의 객체를 가져와서 배열 B에 넣습니다.

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);

사용 시나리오 2: 객체 배열이 있다고 가정합니다(A). , 다음 요구 사항을 충족하지 않는 객체를 필터링합니다. 조건 객체
조건: 야채의 양이 0보다 크고 가격이 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>사용 시나리오 3</strong>: 두 개의 배열(A , B), A의 id 값을 기준으로 B 배열과 일치하지 않는 데이터를 필터링합니다</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: 테스트를 통과한 배열의 첫 번째 요소 값을 반환합니다(함수 내 판단) )

해당 매개변수는 콜백 함수이며, 모든 배열 멤버는 첫 번째 반환 값이 true인 멤버를 찾아서 해당 멤버를 반환할 때까지 순차적으로 콜백 함수를 실행합니다. 일치하는 멤버가 없으면 정의되지 않은 값이 반환됩니다.
사용 시나리오 1
객체 배열이 있다고 가정하고(A), 조건에 맞는 객체를 찾습니다

 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}找到后就终止循环

사용 시나리오 2: 객체 배열이 있다고 가정하고(A), 조건에 맞는 객체를 배열에서 찾습니다. 지정된 객체의 조건에 따라

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: 배열의 각 요소가 지정된 조건을 충족하는지 여부

some: 지정된 조건을 충족하는 배열의 요소가 있는지 여부

사용 시나리오 1: 객체 배열에서 각 컴퓨터 운영 체제를 계산합니다. 사용 가능한가? 16비트 운영 체제보다 크면 사용 가능하다는 뜻이고, 그렇지 않으면 사용할 수 없다는 뜻입니다.

//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

간단히 말하면: Every: one true는 일부: 하나는 거짓입니다

사용 시나리오 2: 등록 페이지가 있다고 가정하고 모든 입력 콘텐츠의 길이가 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() 메서드는 메서드를 누산기로 수신하며 배열의 각 값(왼쪽에서 오른쪽으로) 병합을 시작하고 하나의 값으로 끝납니다.

사용 시나리오 1: 배열에 있는 모든 값의 합 계산

 var 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);

사용 시나리오 2:
배열에 있는 객체의 특정 속성을 다른 배열로 추출

 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"]

사용 시나리오 3: 결정 문자열은 대괄호가 대칭인가요

function balancedParens(string){
  return !string.split("").reduce(function(previous,char){
    if(previous <p class="comments-box-content"></p>

위 내용은 자바스크립트 배열에 일반적으로 사용되는 순회 메서드(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!