Javascript 배열의 반복 방법에 대한 자세한 분석-JS 튜토리얼-php.cn

Javascript 배열의 반복 방법에 대한 자세한 분석

不言

풀어 주다： 2018-09-11 15:31:21

원래의

1075명이 탐색했습니다.

이 기사는 Javascript 배열의 반복 방법에 대한 자세한 분석을 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

배열의 몇 가지 사용법을 소개했습니다. 예를 들어 배열이 "스택"처럼 동작하는 방법, "큐"처럼 동작하는 데 사용되는 메서드 등. Javascript에는 배열 메서드가 많기 때문에 한 기사에서 너무 많은 내용을 소개하지 않습니다. 배열의 다른 기능에 대해

공식적으로 시작되었습니다!

배열 반복 방법

배열 반복 방법은 우리 개발 프로젝트에서 매우 자주 사용되며 매우 중요하고 효율적일 뿐만 아니라 이러한 방법을 사용하면 코드를 매우 간결하게 만들 수도 있습니다. 개발 중에 이러한 방법을 자주 사용하지 않으면 정말 끔찍할 것입니다.

예를 들어 DOM 노드를 일괄적으로 추가하는 방법

let containerUl = document.getElementById('container');
let li;
let peoples = [{name: 'Liu', age: 14}, {name: 'Li', age: 13}, {name: 'Cao', age: 11}];

//for 循环
for (let i = 0; i < peoples.length; i++) {
    li = document.createElement(&#39;li&#39;);
    li.innerHTML = peoples[i].name + ":" + peoples[i].age;
    containerUl.appendChild(li);
};

//数组的迭代方法，更加简洁
peoples.forEach((people) => {
    li = document.createElement('li');
    li.innerHTML = people.name + ":" + people.age;
    containerUl.appendChild(li);
})

로그인 후 복사

위는 단순한 예일 뿐입니다. 사실 우리의 일상적인 개발 프로세스는 이보다 훨씬 더 복잡하고, 따라서 개발하는 방법은 다음과 같습니다. 효율적으로 작업하는 것이 매우 필요합니다. 가장 일반적으로 사용되는 것부터 하나씩 시작해 보겠습니다.

forEach()

이 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하고 정의되지 않은(또는 반환 값 없음)을 반환합니다.

이 메소드는 두 개의 매개변수를 받습니다. 하나는 각 요소에 의해 실행되는 콜백 함수이고, 다른 하나는 선택적 매개변수이며 콜백 함수가 실행될 때의 값입니다.

전달된 콜백 함수는 배열의 요소(항목), 요소의 인덱스(인덱스, 선택 사항) 및 배열 자체(배열, 선택 사항)의 세 가지 매개 변수를 허용합니다.

//语法
array.forEach(callback[, this])
array.forEach(callback(item, index, array){
    //函数体，执行的操作
});

//看个例子，本质上与 for 循环一样
let items = ['a', 'b', 'c'];
items.forEach(function (item) {
    console.log(item);
});

for (let i = 0; i < items.length; i++) {
    console.log(items[i])
}

로그인 후 복사

마지막으로 위 그림에 바로 보이는 forEach() 메소드의 호환성을 살펴보겠습니다.

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
예	예	1.5	9	예	예

지도 ()

이 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하고 새 배열을 반환합니다. 새 배열의 결과는 원래 배열의 요소에 대해 메서드를 실행한 결과입니다.

전달된 콜백 함수는 배열의 요소(항목), 요소의 인덱스(인덱스, 선택 사항) 및 배열 자체(배열, 선택 사항)의 세 가지 매개 변수를 허용합니다.

//语法
var newArrs = array.map(callback[, this])
var newArrs = array.map(callback(item, index, array){
    //return 执行后的结果
});

//例子
let numbers = [1, 2, 3];
let newNumbers = numbers.map(x => x * x);
console.log(newNumbers); //[1, 4, 9]

로그인 후 복사

일상적인 개발 작업에서 우리는 많은 데이터 형식화 프로세스를 접하게 됩니다. 이러한 방법을 사용하면 처리가 훨씬 쉬워집니다.

예를 들어 클래스 배열을 배열로 변환하는 과정

<ul>
    <li><input type="text" value="1"></li>
    <li><input type="text" value="2"></li>
    <li><input type="text" value="3"></li>
</ul>
<script>
    let list = document.getElementsByTagName('input');
    let newList = Array.prototype.map.call(list, item => {
        return item.value;
    });
    console.log(newList);//[1,2,3]
</script>
});

로그인 후 복사

예를 들어 포맷팅에 필요한 데이터

let peoples = ['Liu', 'Cao', 'Pan'];
let peoplesInfo = peoples.map(people => {
    return {
        name: people,
        age: Math.floor(Math.random()*20)
    }
});
console.log(peoplesInfo);
// [{name: Liu, age: XX}, 
//  {name: Cao, age: XX}, 
//  {name: Pan, age: XX}]

로그인 후 복사

물론 실제 작업에서 데이터 복잡도는 이보다 훨씬 높지만, 우리는 이러한 방법이 데이터를 처리한다는 것을 분명히 느낄 수 있습니다. 장점은 다음과 같습니다.

마지막으로 위 그림과 같이 map() 메소드의 호환성을 살펴보겠습니다.

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
예	예	1.5	9	예	예

필터

이 메서드는 또한 배열의 각 요소에 대해 지정된 함수를 실행하고 새 배열을 반환합니다. 새 배열은 각각 true를 반환하는 항목으로 구성됩니다. 쉽게 말하면 원하는 것을 걸러내는 것입니다.

전달된 콜백 함수는 배열의 요소(항목), 요소의 인덱스(인덱스, 선택 사항) 및 배열 자체(배열, 선택 사항)의 세 가지 매개 변수를 허용합니다.

//语法
var newArrs = array.filter(callback[, this])
var newArrs = array.filter(callback(item, index, array){
    //return 满足条件的项
});

//例子
let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.filter(x => x > 2);
console.log(newNumbers); //[3, 4, 5]

로그인 후 복사

"필터" 방법은 실제 작업에서도 많은 용도로 사용됩니다. 예를 들어 어떤 어린이가 그룹에 있는지 알아냅니다.

var peoples = [{name: 'liu', age: 9}, 
            {name: 'jiang', age: 18}, 
            {name: 'cao', age: 20}, 
            {name: 'pan', age: 3}];
var childrens = peoples.filter(people => people.age < 10);
console.log(childrens);

로그인 후 복사

마지막으로 위 그림과 같이 filter() 메소드의 호환성을 살펴보겠습니다.

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
예	예	1.5	9	예	예

every

该方法是对数组的每一个元素执行给定的函数，
如果数组中的每个元素都满足给定的条件则返回 true，否则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.every(callback[, this])
var newArrs = array.every(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.every(item => item > 4);
console.log(result1); //false
var result2 = number.every(item => item > 1);
console.log(result2); //true

로그인 후 복사

我们在来看看 every() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

some

该方法是对数组的每一个元素执行给定的函数，
如果数组中的有一个元素满足条件则返回 true，如果全部不满足条件则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.some(callback[, this])
var newArrs = array.some(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.some(item => item < 1);
console.log(result1); //false
var result2 = number.some(item => item > 5);
console.log(result2); //true

로그인 후 복사

我们在来看看 some() 方法的兼容性，直接上图。