수색…


통사론

  • array = [ , , ... ]
  • array = new 배열 ( , , ... )
  • array = Array.of ( value , value , ... )
  • array = Array.from ( arrayLike )

비고

요약 : JavaScript의 배열은 수정 된 Object 인스턴스이며 고급 프로토 타입을 사용하여 다양한 목록 관련 작업을 수행 할 수 있습니다. ECMAScript 1st Edition에 추가되었으며 다른 프로토 타입 메소드는 ECMAScript 5.1 Edition에 추가되었습니다.

경고 : new Array() 생성자에서 n 이라는 숫자 매개 변수를 지정하면 n 요소가있는 배열을 선언하고 n 요소의 값이 1 인 배열을 선언하지 않습니다.

console.log(new Array(53)); // This array has 53 'undefined' elements!

즉 배열을 선언 할 때는 항상 [] 를 사용해야합니다.

console.log([53]); // Much better!

표준 배열 초기화

배열을 만드는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 배열 리터럴 또는 Array 생성자를 사용하는 것입니다.

var arr = [1, 2, 3, 4];
var arr2 = new Array(1, 2, 3, 4);

인수없이 Array 생성자를 사용하면 빈 배열이 만들어집니다.

var arr3 = new Array();

결과 :

[]

정확히 하나의 인수와 함께 사용되며 해당 인수가 number 인 경우, undefined 모든 값을 가진 길이의 배열이 대신 만들어집니다.

var arr4 = new Array(4);

결과 :

[undefined, undefined, undefined, undefined]

단일 인수가 숫자가 아닌 경우에는 적용되지 않습니다.

var arr5 = new Array("foo");

결과 :

["foo"]
6

배열 리터럴과 Array.of 를 사용하여 여러 개의 인수가 지정된 새 Array 인스턴스를 만들 수 있습니다.

Array.of(21, "Hello", "World");

결과 :

[21, "Hello", "World"]

Array 생성자와 달리 Array.of(23) 와 같은 단일 숫자로 배열을 만들면 길이가 23 인 Array가 아니라 새 배열 [23] 이 만들어집니다.

배열을 만들고 초기화하는 또 다른 방법은 Array.from

var newArray = Array.from({ length: 5 }, (_, index) => Math.pow(index, 4));

결과는 다음과 같습니다.

[0, 1, 16, 81, 256]

배열 확산 / 나머지

스프레드 연산자

6

ES6을 사용하면 스프레드를 사용하여 개별 요소를 쉼표로 구분 된 구문으로 구분할 수 있습니다.

let arr = [1, 2, 3, ...[4, 5, 6]];  // [1, 2, 3, 4, 5, 6]

// in ES < 6, the operations above are equivalent to
arr = [1, 2, 3];
arr.push(4, 5, 6);

또한 스프레드 연산자는 문자열을 처리하여 각 문자를 새 문자열 요소로 분리합니다. 따라서 이들을 정수로 변환하기 위해 배열 함수 를 사용하면 위에 작성한 배열은 다음과 같습니다.

let arr = [1, 2, 3, ...[..."456"].map(x=>parseInt(x))]; // [1, 2, 3, 4, 5, 6]

또는 단일 문자열을 사용하면 다음과 같이 단순화 할 수 있습니다.

let arr = [..."123456"].map(x=>parseInt(x)); // [1, 2, 3, 4, 5, 6]

매핑이 수행되지 않으면 다음을 수행하십시오.

let arr = [..."123456"]; // ["1", "2", "3", "4", "5", "6"]

spread 연산자는 인수를 함수에 전달 하는 데에도 사용할 수 있습니다.

function myFunction(a, b, c) { }
let args = [0, 1, 2];

myFunction(...args);

// in ES < 6, this would be equivalent to:
myFunction.apply(null, args);

나머지 연산자

나머지 연산자는 여러 요소를 단일 연산자로 통합하여 스프레드 연산자의 반대 작업을 수행합니다.

[a, b, ...rest] = [1, 2, 3, 4, 5, 6]; // rest is assigned [3, 4, 5, 6]

함수의 인수를 수집하십시오.

function myFunction(a, b, ...rest) { console.log(rest); }

myFunction(0, 1, 2, 3, 4, 5, 6); // rest is [2, 3, 4, 5, 6]

값 매핑

기존 배열의 값을 기반으로 새 배열을 생성해야하는 경우가 있습니다.

예를 들어, 문자열 배열에서 문자열 길이의 배열을 생성하려면 다음과 같이하십시오.

5.1
['one', 'two', 'three', 'four'].map(function(value, index, arr) {
  return value.length;
});
// → [3, 3, 5, 4]
6
['one', 'two', 'three', 'four'].map(value => value.length);
// → [3, 3, 5, 4]

이 예제에서는 익명의 함수가 map() 함수에 제공되며 map 함수는 배열의 모든 요소에 대해 익명 함수를 호출하여 다음 매개 변수를이 순서로 제공합니다.

  • 요소 자체
  • 요소의 인덱스 (0, 1 ...)
  • 전체 배열

또한 map() 은 매핑 함수 this 값을 설정하기 위해 선택적인 두 번째 매개 변수를 제공합니다. 실행 환경에 따라 기본값 this 다를 수 있습니다 :

브라우저 this 기본값은 항상 window .

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // window (the default value in browsers)
  return value.length;
});

다음과 같이 사용자 정의 개체로 변경할 수 있습니다.

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // Object { documentation: "randomObject" }
  return value.length;
}, {
  documentation: 'randomObject'
});

값 필터링

filter() 메서드는 함수가 제공 한 테스트를 전달하는 모든 배열 요소로 채워진 배열을 만듭니다.

5.1
[1, 2, 3, 4, 5].filter(function(value, index, arr) {
  return value > 2;
});
6
[1, 2, 3, 4, 5].filter(value => value > 2);

새로운 배열로 결과 :

[3, 4, 5]

허위 값 필터링

5.1
var filtered = [ 0, undefined, {}, null, '', true, 5].filter(Boolean);

Boolean은 [하나의 선택적 매개 변수]를 취하는 네이티브 javascript 함수 / 생성자 이므로 필터 메서드도 함수를 사용하여 현재 배열 항목을 매개 변수로 전달하므로 다음과 같이 읽을 수 있습니다.

  1. Boolean(0) 은 거짓을 반환합니다.
  2. Boolean(undefined) 은 false를 반환합니다.
  3. Boolean({}) 은 반환 된 배열로 푸시한다는 것을 나타내는 true 를 반환 합니다.
  4. Boolean(null) 은 false를 반환합니다.
  5. Boolean('') 은 false를 반환합니다.
  6. Boolean(true) 은 반환 된 배열로 푸시한다는 것을 나타내는 true 를 반환 합니다.
  7. Boolean(5) 는 반환 된 배열로 푸시한다는 것을 나타내는 true 를 반환 합니다.

전체 프로세스가 결과로 나타납니다.

[ {}, true, 5 ]

또 다른 간단한 예

이 예제는 하나의 인수를 취하는 함수를 전달하는 것과 동일한 개념을 사용합니다.

5.1
function startsWithLetterA(str) {
    if(str && str[0].toLowerCase() == 'a') {
        return true
    }
    return false;
}

var str              = 'Since Boolean is a native javascript function/constructor that takes [one optional paramater] and the filter method also takes a function and passes it the current array item as a parameter, you could read it like the following';
var strArray         = str.split(" ");
var wordsStartsWithA = strArray.filter(startsWithLetterA);
//["a", "and", "also", "a", "and", "array", "as"]

되풀이

전통적인 for -loop

전통적인 for 루프에는 세 가지 구성 요소가 있습니다.

  1. 초기화 : look 블록이 처음 실행되기 전에 실행됩니다.
  2. 조건 : 루프 블록이 실행되기 전에 매번 조건을 검사하고 거짓이면 루프를 종료합니다.
  3. 추가 고려 사항 : 루프 블록이 실행 된 후에 매번 수행됩니다 .

이 세 가지 구성 요소는 a로 구분됩니다 ; 상징. 이 세 가지 구성 요소 각각에 대한 내용은 선택 사항입니다. 즉, 다음은 가능한 최소 for 루프입니다.

for (;;) {
    // Do stuff
}

물론 if(condition === true) { break; } 또는 if(condition === true) { return; } 그 안의 어딘가 for -loop이 실행을 멈추게합니다.

일반적으로 초기화는 인덱스를 선언하는 데 사용되며 조건은 최소 또는 최대 값과 해당 인덱스를 비교하는 데 사용되며 추가 고려 사항을 사용하여 인덱스를 증가시킵니다.

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

일반적인 for 루프를 사용하여 배열을 반복합니다.

배열을 순환하는 전통적인 방법은 다음과 같습니다.

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

또는 거꾸로 반복하려는 경우 다음과 같이하십시오.

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

그러나 다음과 같이 다양한 변형이 가능합니다.

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... 아니면 이거 ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... 또는이 하나 :

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

어느 것이 가장 효과적인지는 주로 개인적인 취향과 구현중인 특정 유스 케이스의 문제입니다.

이 유사 콘텐츠는 모두 매우 오래된 브라우저를 포함하여 모든 브라우저에서 지원됩니다.


while 루프

for 루프의 한 가지 대안은 while 루프입니다. 배열을 반복하려면 다음을 수행하십시오.

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

전통적인 for 루프와 마찬가지로 while 루프는 가장 오래된 브라우저에서도 지원됩니다.

또한 모든 while 루프는 for 루프로 다시 작성할 수 있습니다. 예를 들어 while 루프 for -loop에 for 다음과 똑같은 방식으로 동작합니다.

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

JavaScript에서는 다음 작업을 수행 할 수도 있습니다.

for (i in myArray) {
    console.log(myArray[i]);
}

그러나 모든 경우에서 일반적인 for 루프와 동일하게 동작하지 않으므로주의해서 사용해야하며 잠재적 인 부작용이 고려되어야합니다. See 왜 "for ... in"을 배열 반복과 함께 사용하는 것이 나쁜 생각입니까? 자세한 사항은.

for...of

ES 6에서 for-of 루프는 배열의 값을 반복 할 때 권장되는 방법입니다.

6
let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

다음 예제에서는 for...of 루프와 for...in 루프의 차이점을 보여줍니다.

6
let myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Array.prototype.keys()

Array.prototype.keys() 메서드는 다음과 같이 인덱스를 반복하는 데 사용할 수 있습니다.

6
let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
  let twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Array.prototype.forEach()

.forEach(...) 메소드는 ES 5 이상에서 옵션입니다. Internet Explorer 9 이상은 물론 모든 최신 브라우저에서 지원됩니다.

5
[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

전통적인 for 루프와 비교하여 .forEach() 의 루프에서 .forEach() 수는 없습니다. 이 경우 for 루프를 사용하거나 아래에 제시된 부분 반복을 사용하십시오.

JavaScript의 모든 버전에서 전통적인 C 스타일의 for 루프를 사용하여 배열의 인덱스를 반복 할 수 있습니다.

var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
  var twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

while 루프를 사용할 수도 있습니다.

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

ES5 이후로 배열의 일부분을 반복하고 싶다면 Array.prototype.every 를 사용할 수 있습니다.이 배열은 false 를 반환 할 때까지 반복됩니다.

5
// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

자바 스크립트 버전과 동일합니다.

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
  console.log(arr[i]);
}

Array.prototype.some

Array.prototype.sometrue 를 반환 할 때까지 반복 true .

5
// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

자바 스크립트 버전과 동일합니다.

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

도서관

마지막으로 많은 유틸리티 라이브러리에는 자체 foreach 변형이 있습니다. 가장 인기있는 세 가지는 다음과 같습니다.

jQuery 에서 jQuery.each() , :

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() 에서, Underscore.js :

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() 에서, Lodash.js :

_.forEach(myArray, function(value, key) {
    console.log(value);
});

이 정보의 대부분이 처음 게시 된 SO에 관한 다음 질문을 참조하십시오.

개체 배열 필터링

filter() 메서드는 테스트 함수를 받아들이고 제공된 테스트를 통과 한 원래 배열의 요소 만 포함하는 새 배열을 반환합니다.

// Suppose we want to get all odd number in an array:
var numbers = [5, 32, 43, 4];
5.1
var odd = numbers.filter(function(n) {
  return n % 2 !== 0;
});
6
let odd = numbers.filter(n => n % 2 !== 0); // can be shortened to (n => n % 2)

odd 는 다음 배열을 포함합니다 : [5, 43] .

또한 객체 배열에서도 작동합니다.

var people = [{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}, {
  id: 3,
  name: "Peter",
  age: 55
}];
5.1
var young = people.filter(function(person) {
  return person.age < 35;
});
6
let young = people.filter(person => person.age < 35);

young 은 다음 배열을 포함합니다.

[{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}]

전체 배열에서 다음과 같은 값을 검색 할 수 있습니다.

var young = people.filter((obj) => {
  var flag = false;
  Object.values(obj).forEach((val) => {
    if(String(val).indexOf("J") > -1) {
      flag = true;
      return;
    }    
  });
  if(flag) return obj;
});

이것은 다음을 반환합니다.

[{
  id: 1,
  name: "John",
  age: 28
},{
  id: 2,
  name: "Jane",
  age: 31
}]

문자열의 배열 요소 조인하기

배열의 모든 요소를 ​​문자열로 join 하려면 join 메소드를 사용할 수 있습니다.

console.log(["Hello", " ", "world"].join("")); // "Hello world"
console.log([1, 800, 555, 1234].join("-")); // "1-800-555-1234"

두 번째 줄에서 볼 수 있듯이 문자열이 아닌 항목이 먼저 변환됩니다.

배열과 같은 객체를 배열로 변환

배열과 같은 객체 란 무엇입니까?

JavaScript에는 길이 속성을 가진 배열의 Object 표현 인 "Array-like Objects"가 있습니다. 예 :

var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

Array-like Object의 일반적인 예는 document.getElementsByTagName 또는 document.querySelectorAll 과 같은 메소드에서 반환 된 HTMLCollection 또는 NodeList 객체의 arguments 객체입니다.

그러나 Array와 Array와 같은 객체 간의 주요 차이점 중 하나는 Array와 유사한 객체가 Array.prototype 대신 Object.prototype 에서 상속받습니다. 즉, Array와 유사한 객체는 forEach() , push() , map() , filter()slice() 와 같은 일반적인 Array 프로토 타입 메서드에 액세스 할 수 없습니다.

var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;

domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() { 
  arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.

function func() {
  console.log(arguments);
}
func(1, 2, 3);   // → [1, 2, 3]

ES6에서 배열과 같은 객체를 배열로 변환

  1. Array.from :
6
const arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
arrayLike.forEach(value => {/* Do something */}); // Errors
const realArray = Array.from(arrayLike);
realArray.forEach(value => {/* Do something */}); // Works
  1. for...of :
6
var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}
  1. 스프레드 연산자 :
6
[...arrayLike]
  1. Object.values :
7
var realArray = Object.values(arrayLike);
  1. Object.keys :
6
var realArray = Object
   .keys(arrayLike)
   .map((key) => arrayLike[key]);

≤ ES5에서 배열과 같은 객체를 배열로 변환

Array.prototype.slice 과 같이 사용하십시오 :

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
var realArray = Array.prototype.slice.call(arrayLike);
realArray = [].slice.call(arrayLike); // Shorter version

realArray.indexOf('Value 1'); // Wow! this works

또한 Function.prototype.call 을 사용하여 배열과 같은 객체의 Array.prototype 메소드를 변환하지 않고 직접 호출 할 수 있습니다.

5.1
var domList = document.querySelectorAll('#myDropdown option');

domList.forEach(function() { 
  // Do stuff
}); // Error! forEach is not defined.

Array.prototype.forEach.call(domList, function() { 
  // Do stuff
}); // Wow! this works

또한 [].method.bind( arrayLikeObject ) 를 사용하여 배열 메소드를 빌려 객체에 glom을 사용할 수 있습니다.

5.1
var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};

arrayLike.forEach(function() {
  // Do stuff
}); // Error! forEach is not defined.

[].forEach.bind(arrayLike)(function(val){
  // Do stuff with val
}); // Wow! this works

변환 중 항목 수정

ES6에서는 Array.from 을 사용하면서 생성되는 새 배열에 매핑 된 값을 반환하는지도 함수를 지정할 수 있습니다.

6
Array.from(domList, element => element.tagName); // Creates an array of tagName's

자세한 분석은 배열 객체 를 참조하십시오.

값 줄이기

5.1

reduce() 메서드는 누적 기와 배열의 각 값에 대해 왼쪽에서 오른쪽으로 함수를 적용하여 단일 값으로 줄입니다.

배열 합

이 메서드는 배열의 모든 값을 단일 값으로 압축하는 데 사용할 수 있습니다.

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

선택적 두 번째 매개 변수는 reduce() 전달 될 수 있습니다. 이 값은 콜백에 대한 첫 번째 호출 ( function(a, b) 로 지정됨)의 첫 번째 인수 ( a 지정됨)로 사용됩니다.

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

5.1

객체 배열 병합

아래 예제는 객체 배열을 단일 객체로 전개하는 방법을 보여줍니다.

var array = [{
    key: 'one',
    value: 1
}, {
    key: 'two',
    value: 2
}, {
    key: 'three',
    value: 3
}];
5.1
array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});
6
array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});
7
array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});

Rest / Spread PropertiesES2016의 제안 된 제안 목록에 없습니다. ES2016에서는 지원되지 않습니다. 그러나 babel plugin babel-plugin-transform-object-rest-spread 를 사용하여이를 지원할 수 있습니다.

Flatten Array에 대한 위의 모든 예는 다음과 같습니다.

{
  one: 1,
  two: 2,
  three: 3
}

5.1

지도 축소를 사용하여

초기 값 매개 변수를 사용하는 또 다른 예로, 항목 배열에 함수를 호출하여 결과를 새로운 배열로 반환하는 작업을 생각해보십시오. 배열은 일반적인 값이고리스트 연결은 일반 함수이므로, 다음 예에서와 같이 reduce 를 사용하여 목록을 누적 할 수 있습니다.

function map(list, fn) {
  return list.reduce(function(newList, item) {
    return newList.concat(fn(item));
  }, []);
}

// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]

이것은 (초기 값 매개 변수의) 그림에만 해당되며 목록 변환 작업에 대해서는 기본 map 을 사용합니다 (자세한 내용은 값 매핑 참조).


5.1

최소값 또는 최대 값 찾기

누적기를 사용하여 배열 요소를 추적 할 수 있습니다. 다음은이를 이용하여 최소값을 찾는 예제입니다.

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10
6

고유 한 값 찾기

다음은 reduce를 사용하여 고유 숫자를 배열로 반환하는 예제입니다. 빈 배열은 두 번째 인수로 전달되고 prev 의해 참조됩니다.

var arr = [1, 2, 1, 5, 9, 5];

arr.reduce((prev, number) => {
  if(prev.indexOf(number) === -1) {
    prev.push(number);
  }
  return prev;
}, []);
// → [1, 2, 5, 9]

값의 논리적 결합

5.1

.some.every 는 Array 값의 논리적 연결을 허용합니다.

반면 .some 와 반환 값을 결합 OR , .every 그들을 결합 AND .

.some

[false, false].some(function(value) {
  return value;
});
// Result: false

[false, true].some(function(value) {
  return value;
});
// Result: true

[true, true].some(function(value) {
  return value;
});
// Result: true

.every 대한 예제

[false, false].every(function(value) {
  return value;
});
// Result: false

[false, true].every(function(value) {
  return value;
});
// Result: false

[true, true].every(function(value) {
  return value;
});
// Result: true

배열 연결

2 개의 배열

var array1 = [1, 2];
var array2 = [3, 4, 5];
var array3 = array1.concat(array2);  // returns a new array
6
var array3 = [...array1, ...array2]

새로운 Array 결과 :

[1, 2, 3, 4, 5]

다중 배열

var array1 = ["a", "b"],
    array2 = ["c", "d"],
    array3 = ["e", "f"],
    array4 = ["g", "h"];

array.concat() 더 많은 Array 인수 제공

var arrConc = array1.concat(array2, array3, array4);
6

[] 더 많은 인수 제공

var arrConc = [...array1, ...array2, ...array3, ...array4]

새로운 Array 결과 :

["a", "b", "c", "d", "e", "f", "g", "h"]

첫 번째 배열 복사 안 함

var longArray = [1, 2, 3, 4, 5, 6, 7, 8],
    shortArray = [9, 10];

Function.prototype.apply 사용하여 푸시 할 매개 변수로 shortArray 의 요소를 제공합니다.

longArray.push.apply(longArray, shortArray);
6

spread 연산자를 사용하여 shortArray 의 요소를 별도의 인수로 전달하여 push

longArray.push(...shortArray)

longArray 의 값은 다음과 같습니다.

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

두 번째 배열이 너무 길면 (> 100,000 개 항목), 스택 오버 플로우 오류가 발생할 수 있습니다 ( apply 방법 때문에). 안전을 위해 대신 반복 할 수 있습니다.

shortArray.forEach(function (elem) {
    longArray.push(elem);
});

배열 및 배열이 아닌 값

var array = ["a", "b"];
var arrConc = array.concat("c", "d");
6
var arrConc = [...array, "c", "d"]

새로운 Array 결과 :

["a", "b", "c", "d"]

배열이 아닌 배열을 혼합 할 수도 있습니다

var arr1 = ["a","b"];
var arr2 = ["e", "f"];

var arrConc = arr1.concat("c", "d", arr2);

새로운 Array 결과 :

["a", "b", "c", "d", "e", "f"]

배열에 항목 추가 / 추가

유분이없는

.unshift 를 사용하여 배열 시작 부분에 하나 이상의 항목을 추가하십시오.

예 :

var array = [3, 4, 5, 6];
array.unshift(1, 2);

array 결과는 다음과 같습니다.

[1, 2, 3, 4, 5, 6]

푸시

추가 .push 는 현재 존재하는 마지막 항목 다음에 항목을 추가하는 데 사용됩니다.

예 :

var array = [1, 2, 3];
array.push(4, 5, 6);

array 결과는 다음과 같습니다.

[1, 2, 3, 4, 5, 6]

두 메소드 모두 새 배열 길이를 반환합니다.

배열에 대한 객체 키와 값

var object = {
    key1: 10,
    key2: 3,
    key3: 40,
    key4: 20
};
 
var array = [];
for(var people in object) {
  array.push([people, object[people]]);
}

현재 배열입니다.

[
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
]

다차원 배열 정렬하기

주어진 다음 배열

var array = [
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
];

당신은 번호순으로 그것을 정렬 정렬 할 수 있습니다 (두 번째 인덱스)

array.sort(function(a, b) {
  return a[1] - b[1];
})
6
array.sort((a,b) => a[1] - b[1]);

그러면 출력됩니다.

[
  ["key2", 3],
  ["key1", 10],
  ["key4", 20],
  ["key3", 40]
]

sort 메서드는 배열의 배열 에서 작동합니다. 그것은 배열을 변경합니다. 대부분의 다른 배열 메서드는 새로운 배열을 반환하고 원래 배열은 그대로 유지합니다. 함수형 프로그래밍 스타일을 사용하고 부작용이없는 함수를 기대할 경우 특히주의해야합니다.

배열에서 항목 제거하기

시프트

.shift 를 사용하여 배열의 첫 번째 항목을 제거합니다.

예 :

var array = [1, 2, 3, 4];
array.shift();

array 결과는 다음과 같습니다.

[2, 3, 4]

추가 .pop 은 배열에서 마지막 항목을 제거하는 데 사용됩니다.

예 :

var array = [1, 2, 3];
array.pop();

array 결과는 다음과 같습니다.

[1, 2]

두 메소드 모두 제거 된 항목을 리턴합니다.

접착

.splice() 를 사용하여 배열에서 일련의 요소를 제거합니다. .splice() 는 시작 색인과 삭제할 요소의 수 (선택 사항 .splice() 라는 두 개의 매개 변수를 허용합니다. 두 번째 매개 변수를 생략하면 .splice() 는 배열의 끝을 통해 시작 인덱스에서 모든 요소를 ​​제거합니다.

예 :

var array = [1, 2, 3, 4];
array.splice(1, 2);

array 포함하는 나뭇잎 :

[1, 4]

array.splice() 반환하면 제거 된 요소가 포함 된 새로운 배열입니다. 위의 예에서 반환 값은 다음과 같습니다.

[2, 3]

따라서 두 번째 매개 변수를 생략하면 배열을 두 개의 배열로 효과적으로 분할 할 수 있습니다. 원본 배열은 지정된 인덱스 앞에 끝납니다.

var array = [1, 2, 3, 4];
array.splice(2);

... [1, 2] 포함하는 array 을 떠나 [3, 4] 반환합니다.

지우다

배열의 길이를 변경하지 않고 delete 를 사용하여 배열에서 항목을 제거합니다.

var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
delete array[2];
console.log(array); // [1, 2, undefined, 4, 5]
console.log(array.length); // 5

Array.prototype.length

배열의 length 에 값을 할당하면 길이가 주어진 값으로 변경됩니다. 새 값이 배열 길이보다 작 으면 항목이 값 끝에서 제거됩니다.

array = [1, 2, 3, 4, 5];
array.length = 2;
console.log(array); // [1, 2]

배열 반전

.reverse 는 배열 내부의 항목 순서를 반대로하는 데 사용됩니다.

.reverse 예 :

[1, 2, 3, 4].reverse();

결과 :

[4, 3, 2, 1]

참고 : .reverse ( Array.prototype.reverse )는 배열 반대로 배치 합니다. 역순으로 복사본을 반환하는 대신 동일한 배열을 반대로 반환합니다.

var arr1 = [11, 22, 33];
var arr2 = arr1.reverse();
console.log(arr2); // [33, 22, 11]
console.log(arr1); // [33, 22, 11]

또한 다음과 같이 배열을 '깊게'뒤집을 수 있습니다.

function deepReverse(arr) {
  arr.reverse().forEach(elem => {
    if(Array.isArray(elem)) {
      deepReverse(elem);
    }
  });
  return arr;
}

deepReverse의 예 :

var arr = [1, 2, 3, [1, 2, 3, ['a', 'b', 'c']]];

deepReverse(arr);

결과 :

arr // -> [[['c','b','a'], 3, 2, 1], 3, 2, 1]

배열에서 값 제거

배열에서 특정 값을 제거해야하는 경우 다음 한 행을 사용하여 지정된 값없이 복사 배열을 만들 수 있습니다.

array.filter(function(val) { return val !== to_remove; });

또는 복사본을 만들지 않고 배열 자체를 변경하려면 (예를 들어 함수로 배열을 가져 와서 조작하는 함수를 작성하는 경우)이 스 니펫을 사용할 수 있습니다.

while(index = array.indexOf(3) !== -1) { array.splice(index, 1); }

그리고 발견 된 첫 번째 값만 제거해야하는 경우 while 루프를 제거하십시오.

var index = array.indexOf(to_remove);
if(index !== -1) { array.splice(index , 1); }

객체가 배열인지 확인하기

Array.isArray(obj) 는 객체가 Array true 반환하고 그렇지 않으면 false 반환 true .

Array.isArray([])           // true
Array.isArray([1, 2, 3])    // true
Array.isArray({})           // false
Array.isArray(1)            // false

대부분의 경우 instanceof 를 사용하여 객체가 Array 인지 확인할 수 있습니다.

[] instanceof Array; // true
{} instanceof Array; // false

Array.isArray 는 배열의 프로토 타입이 변경된 경우에도 여전히 true 반환하고 배열이 아닌 프로토 타입이 Array 프로토 타입으로 변경되면 false 를 반환한다는 점에서 instanceof check를 사용하는 것보다 이점이 있습니다.

var arr = [];
Object.setPrototypeOf(arr, null);
Array.isArray(arr);   // true
arr instanceof Array; // false

배열 정렬

.sort() 메서드는 배열 요소를 정렬합니다. 기본 메소드는 유니 코드 코드 문자열에 따라 배열을 정렬합니다. 배열을 숫자로 정렬하려면 .sort() 메소드에 전달 된 compareFunction 이 있어야합니다.

참고 : .sort() 메서드는 .sort() 합니다. .sort() 는 배열 원래 위치로 정렬합니다. 즉, 원래 배열의 정렬 된 복사본을 만드는 대신 원본 배열을 재정렬하고 반환합니다.

기본 정렬

UNICODE 순서로 배열을 소트합니다.

['s', 't', 'a', 34, 'K', 'o', 'v', 'E', 'r', '2', '4', 'o', 'W', -1, '-4'].sort();

결과 :

[-1, '-4', '2', 34, '4', 'E', 'K', 'W', 'a', 'l', 'o', 'o', 'r', 's', 't', 'v']

주 : 대문자가 소문자보다 위로 이동했습니다. 배열은 알파벳 순서가 아니며 번호는 숫자 순서가 아닙니다.

알파벳순 정렬

['s', 't', 'a', 'c', 'K', 'o', 'v', 'E', 'r', 'f', 'l', 'W', '2', '1'].sort((a, b) => {
  return a.localeCompare(b);        
});

결과 :

['1', '2', 'a', 'c', 'E', 'f', 'K', 'l', 'o', 'r', 's', 't', 'v', 'W']

참고 : 위의 정렬은 배열 항목이 문자열이 아닌 경우 오류를 발생시킵니다. 배열에 문자열이 아닌 항목이 포함될 수 있음을 알고있는 경우 아래 안전 버전을 사용하십시오.

['s', 't', 'a', 'c', 'K', 1, 'v', 'E', 'r', 'f', 'l', 'o', 'W'].sort((a, b) => {
  return a.toString().localeCompare(b);      
});

길이에 의한 문자열 정렬 (longest first)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return b.length - a.length;
});

에 결과

["elephants", "penguins", "zebras", "dogs"];

길이에 의한 문자열 정렬 (가장 짧은 우선 순위)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return a.length - b.length;
});

에 결과

["dogs", "zebras", "penguins", "elephants"];

수치 정렬 (오름차순)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return a - b;
});

결과 :

[1, 10, 100, 1000, 10000]

수치 정렬 (내림차순)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return b - a;
});

결과 :

[10000, 1000, 100, 10, 1]

배열을 짝수 및 홀수로 정렬

[10, 21, 4, 15, 7, 99, 0, 12].sort(function(a, b) {
    return (a & 1) - (b & 1) || a - b;
});

결과 :

[0, 4, 10, 12, 7, 15, 21, 99]

날짜 정렬 (내림차순)

var dates = [
  new Date(2007, 11, 10),
  new Date(2014, 2, 21),
  new Date(2009, 6, 11),
  new Date(2016, 7, 23)
];

dates.sort(function(a, b) {
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
});

// the date objects can also sort by its difference
// the same way that numbers array is sorting
dates.sort(function(a, b) {
  return b-a;
});

결과 :

[
  "Tue Aug 23 2016 00:00:00 GMT-0600 (MDT)",
  "Fri Mar 21 2014 00:00:00 GMT-0600 (MDT)",
  "Sat Jul 11 2009 00:00:00 GMT-0600 (MDT)",
  "Mon Dec 10 2007 00:00:00 GMT-0700 (MST)"
]

배열의 얕은 복제

때로는 원본을 수정하지 않고 배열로 작업해야합니다. clone 메서드 대신 배열에는 배열의 모든 부분에 대한 단순 복사본을 수행 할 수있는 slice 메서드가 있습니다. 이것은 첫 번째 레벨 만 복제한다는 것을 명심하십시오. 이것은 숫자 나 문자열과 같은 원시 타입과 잘 맞지만 객체는 잘 동작하지 않습니다.

배열을 얕은 복제 (즉, 새 배열 인스턴스가 있지만 요소가 동일한 경우)하려면 다음 한 줄짜리를 사용할 수 있습니다.

var clone = arrayToClone.slice();

이 메서드는 내장 JavaScript Array.prototype.slice 메서드를 호출합니다. 인수를 slice 전달하면 배열의 일부분 만 얕은 복제본을 만드는보다 복잡한 동작을 얻을 수 있지만 slice() 를 호출하기 위해 전체 배열의 얕은 복사본을 만듭니다.

배열과 같은 배열을 객체로 변환 하는 데 사용되는 모든 메소드는 배열을 복제하는 데 적용 할 수 있습니다.

6
arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.from(arrayToClone);
clone2 = Array.of(...arrayToClone);
clone3 = [...arrayToClone] // the shortest way
5.1
arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.prototype.slice.call(arrayToClone);
clone2 = [].slice.call(arrayToClone);

배열 검색

권장 방법 (ES5 이후)은 Array.prototype.find 를 사용하는 것입니다.

let people = [
  { name: "bob" },
  { name: "john" }
];

let bob = people.find(person => person.name === "bob");

// Or, more verbose
let bob = people.find(function(person) {
  return person.name === "bob";
});

자바 스크립트의 모든 버전에서 표준 for 루프도 사용할 수 있습니다.

for (var i = 0; i < people.length; i++) {
  if (people[i].name === "bob") {
    break; // we found bob
  }
}

FindIndex

findIndex () 메서드는 배열의 요소가 제공된 테스트 함수를 충족시키는 경우 배열의 인덱스를 반환합니다. 그렇지 않으면 -1이 리턴됩니다.

array = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 }
];
var index = array.findIndex(item => item.value === 3); // 2
var index = array.findIndex(item => item.value === 12); // -1

splice ()를 사용하여 요소 제거 / 추가하기

splice() 메서드는 배열에서 요소를 제거하는 데 사용할 수 있습니다. 이 예제에서는 배열에서 처음 3 를 제거합니다.

var values = [1, 2, 3, 4, 5, 3];
var i = values.indexOf(3);
if (i >= 0) {
  values.splice(i, 1);
}
// [1, 2, 4, 5, 3]

splice() 메서드를 사용하여 요소를 배열에 추가 할 수도 있습니다. 이 예에서는 6, 7 및 8을 배열 끝에 삽입합니다.

var values = [1, 2, 4, 5, 3];
var i = values.length + 1;
values.splice(i, 0, 6, 7, 8);
//[1, 2, 4, 5, 3, 6, 7, 8]

splice() 메서드의 첫 번째 인수는 요소를 제거 / 삽입 할 인덱스입니다. 두 번째 인수는 제거 할 요소의 수입니다. 세 번째 인수는 배열에 삽입 할 값입니다.

배열 비교

간단한 배열 비교를 위해 JSON stringify를 사용하고 출력 문자열을 비교할 수 있습니다.

JSON.stringify(array1) === JSON.stringify(array2)

참고 : 두 객체가 모두 JSON 직렬 가능이며 순환 참조를 포함하지 않는 경우에만 작동합니다. TypeError: Converting circular structure to JSON 할 수 있습니다 TypeError: Converting circular structure to JSON

재귀 함수를 사용하여 배열을 비교할 수 있습니다.

function compareArrays(array1, array2) { 
  var i, isA1, isA2;
  isA1 = Array.isArray(array1);
  isA2 = Array.isArray(array2);
  
  if (isA1 !== isA2) { // is one an array and the other not?
    return false;      // yes then can not be the same
  }
  if (! (isA1 && isA2)) {      // Are both not arrays 
    return array1 === array2;  // return strict equality
  }
  if (array1.length !== array2.length) { // if lengths differ then can not be the same
    return false;
  }
  // iterate arrays and compare them
  for (i = 0; i < array1.length; i += 1) {
    if (!compareArrays(array1[i], array2[i])) { // Do items compare recursively
      return false;
    }           
  }
  return true; // must be equal
}

경고 : 위의 함수를 사용하는 것은 위험합니다. 배열에 순환 참조가있을 가능성이있는 경우 try catch 로 래핑해야합니다 (자체에 대한 참조가 포함 된 배열에 대한 참조)

a = [0] ;
a[1] = a;
b = [0, a]; 
compareArrays(a, b); // throws RangeError: Maximum call stack size exceeded

참고 : 함수는 완전 항등 연산자 === 를 사용하여 배열이 아닌 항목 {a: 0} === {a: 0}false

배열 분해하기

6

배열은 새로운 변수에 할당 될 때 소멸 될 수 있습니다.

const triangle = [3, 4, 5];
const [length, height, hypotenuse] = triangle;

length === 3;     // → true
height === 4;     // → true
hypotneuse === 5; // → true

요소를 건너 뛸 수 있음

const [,b,,c] = [1, 2, 3, 4];

console.log(b, c); // → 2, 4

나머지 연산자도 사용할 수 있습니다.

const [b,c, ...xs] = [2, 3, 4, 5];
console.log(b, c, xs); // → 2, 3, [4, 5]

배열은 함수에 대한 인수 인 경우에도 구조화 될 수 있습니다.

function area([length, height]) {
  return (length * height) / 2;
}

const triangle = [3, 4, 5];

area(triangle); // → 6

세 번째 인수는 필요하지 않기 때문에 함수에 이름이 지정되지 않았습니다.

구문 구조 해제에 대해 자세히 알아보십시오.

중복 요소 제거

ES5.1 이후부터는 네이티브 메소드 Array.prototype.filter 를 사용하여 배열을 반복하고 주어진 콜백 함수를 전달하는 항목 만 남겨 둘 수 있습니다.

다음 예제에서 우리 콜백은 주어진 값이 배열에 있는지 검사합니다. 일치하지 않으면 중복되어 결과 배열에 복사되지 않습니다.

5.1
var uniqueArray = ['a', 1, 'a', 2, '1', 1].filter(function(value, index, self) { 
  return self.indexOf(value) === index;
}); // returns ['a', 1, 2, '1']

사용자 환경에서 ES6을 지원하는 경우 Set 개체를 사용할 수도 있습니다. 이 객체를 사용하면 프리미티브 값이나 객체 참조와 상관없이 모든 유형의 고유 한 값을 저장할 수 있습니다.

6
var uniqueArray = [... new Set(['a', 1, 'a', 2, '1', 1])];

SO에 대한 다음 anwsers를 참조하십시오 :

모든 요소 제거하기

var arr = [1, 2, 3, 4];

방법 1

새 배열을 만들고 기존 배열 참조를 새 배열로 덮어 씁니다.

arr = [];

원래 배열에서 항목을 제거하지 않으므로주의해야합니다. 함수에 전달 될 때 배열이 닫혀있을 수 있습니다. 배열은 함수의 수명 동안 메모리에 남아있을 것입니다. 그러나 이것을 알지 못할 수도 있습니다. 이것은 메모리 누출의 일반적인 원인입니다.

잘못된 배열 지우기로 인한 메모리 누수의 예 :

var count = 0;

function addListener(arr) { // arr is closed over
  var b = document.body.querySelector("#foo" + (count++));
  b.addEventListener("click", function(e) { // this functions reference keeps
    // the closure current while the
    // event is active
    // do something but does not need arr       
  });
}

arr = ["big data"];
var i = 100;
while (i > 0) {
  addListener(arr); // the array is passed to the function
  arr = []; // only removes the reference, the original array remains
  array.push("some large data"); // more memory allocated
  i--;
}
// there are now 100 arrays closed over, each referencing a different array
// no a single item has been deleted

메모리 누수의 위험을 방지하려면 위의 예제의 while 루프에서 배열을 비우려면 다음 두 가지 방법 중 하나를 사용하십시오.

방법 2

length 속성을 설정하면 모든 배열 요소가 새 배열 길이에서 이전 배열 길이로 삭제됩니다. 배열의 모든 항목을 제거하고 참조를 취소하는 가장 효율적인 방법입니다. 원래 배열에 대한 참조를 유지합니다.

arr.length = 0;

방법 3

방법 2와 비슷하지만 제거 된 항목이 포함 된 새 배열을 반환합니다. 항목이 필요하지 않은 경우이 방법은 새로운 배열이 즉시 참조 해제 될 때만 비효율적입니다.

arr.splice(0); // should not use if you don't want the removed items
// only use this method if you do the following
var keepArr = arr.splice(0); // empties the array and creates a new array containing the
                             // removed items

관련 질문 .

맵을 사용하여 배열의 객체를 다시 포맷

Array.prototype.map() : 원래 배열의 모든 요소에서 제공된 함수를 호출 한 결과가 포함 된 배열을 반환합니다.

다음 코드 예제에서는 person 배열을 사용하고 'fullName'속성을 가진 person을 포함하는 새로운 배열을 만듭니다.

var personsArray = [
  {
    id: 1,
    firstName: "Malcom",
    lastName: "Reynolds"
  }, {
    id: 2,
    firstName: "Kaylee",
    lastName: "Frye"
  }, {
    id: 3,
    firstName: "Jayne",
    lastName: "Cobb"
  }
];

// Returns a new array of objects made up of full names.
var reformatPersons = function(persons) {
  return persons.map(function(person) {
    // create a new object to store full name.
    var newObj = {};
    newObj["fullName"] = person.firstName + " " + person.lastName;

    // return our new object.
    return newObj;
  });
};

이제 우리는 reformatPersons(personsArray) 호출하고 각 사람의 전체 이름의 새로운 배열을 받았습니다.

var fullNameArray = reformatPersons(personsArray);
console.log(fullNameArray);
/// Output
[
  { fullName: "Malcom Reynolds" }, 
  { fullName: "Kaylee Frye" },
  { fullName: "Jayne Cobb" }
]

personsArray 및 그 내용은 변경되지 않습니다.

console.log(personsArray);
/// Output
[
  {
    firstName: "Malcom",
    id: 1,
    lastName: "Reynolds"
  }, {
    firstName: "Kaylee",
    id: 2,
    lastName: "Frye"
  }, {
    firstName: "Jayne",
    id: 3,
    lastName: "Cobb"
  }
]

두 배열을 키 값 쌍으로 병합합니다.

두 개의 개별 배열이 있고 그 두 배열로부터 키 값 쌍을 만들고자한다면, 아래와 같이 배열의 reduce 함수를 사용할 수 있습니다 :

var columns = ["Date", "Number", "Size", "Location", "Age"];
var rows = ["2001", "5", "Big", "Sydney", "25"];
var result =  rows.reduce(function(result, field, index) {
  result[columns[index]] = field;
  return result;
}, {})

console.log(result);

산출:

{
  Date: "2001",
  Number: "5",
  Size: "Big",
  Location: "Sydney",
  Age: "25"
}

문자열을 배열로 변환

.split() 메서드는 문자열을 하위 문자열 배열로 나눕니다. 기본적으로 .split().split(" ") 을 호출하는 것과 동등한 문자열을 공백 ( " " )의 하위 문자열로 나눕니다.

.split() 전달 된 매개 변수는 문자열 분할에 사용할 문자 또는 일반 표현식을 지정합니다.

문자열을 배열로 분할하려면 .split 을 빈 문자열 ( "" )로 호출하십시오. 중요 참고 사항 : 이것은 모든 문자가 유니 코드보다 낮은 범위의 문자에 들어 맞는 경우에만 작동하며 대부분의 영어와 대부분의 유럽 언어를 포함합니다. 3 바이트 및 4 바이트 유니 코드 문자가 필요한 언어의 경우 slice("") 가 해당 문자를 구분합니다.

var strArray = "StackOverflow".split("");
// strArray = ["S", "t", "a", "c", "k", "O", "v", "e", "r", "f", "l", "o", "w"]
6

stringarray 로 변환하려면 스프레드 연산자 ( ... )를 사용합니다.

var strArray = [..."sky is blue"];        
// strArray = ["s", "k", "y", " ", "i", "s", " ", "b", "l", "u", "e"]

모든 배열 항목의 동등성을 테스트하십시오.

.every 메소드는 모든 배열 요소가 제공된 조건 자 테스트를 통과하는지 테스트합니다.

모든 객체의 동등성을 테스트하려면 다음 코드 스 니펫을 사용할 수 있습니다.

[1, 2, 1].every(function(item, i, list) { return item === list[0]; }); // false
[1, 1, 1].every(function(item, i, list) { return item === list[0]; }); // true
6
[1, 1, 1].every((item, i, list) => item === list[0]); // true

다음 코드 조각은 속성 동일성을 테스트합니다.

let data = [
  { name: "alice", id: 111 },
  { name: "alice", id: 222 }
];

data.every(function(item, i, list) { return item === list[0]; }); // false
data.every(function(item, i, list) { return item.name === list[0].name; }); // true
6
data.every((item, i, list) => item.name === list[0].name); // true

배열의 일부 복사

slice () 메서드는 배열의 일부 사본을 반환합니다.

arr.slice([begin[, end]]) 두 매개 변수를 취 arr.slice([begin[, end]]) .

시작하다

추출 시작 부분 인 0부터 시작하는 인덱스입니다.

종료

0을 기준으로 한 인덱스로 추출의 끝 부분이며이 인덱스까지 분할되지만 포함되지는 않습니다.

끝이 음수이면 end = arr.length + end .

예제 1

// Let's say we have this Array of Alphabets
var arr = ["a", "b", "c", "d"...];

// I want an Array of the first two Alphabets
var newArr = arr.slice(0, 2); // newArr === ["a", "b"]

예제 2

// Let's say we have this Array of Numbers
// and I don't know it's end
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9...];

// I want to slice this Array starting from
// number 5 to its end
var newArr = arr.slice(4); // newArr === [5, 6, 7, 8, 9...]

최소 또는 최대 요소 찾기

배열 또는 배열 형 객체가 숫자 인 경우, 즉 모든 요소가 숫자 인 경우 Math.min.apply 또는 Math.max.apply 를 사용하여 첫 번째 인수로 null 을 전달하고 두 번째 인수로 배열을 전달합니다. .

var myArray = [1, 2, 3, 4];

Math.min.apply(null, myArray); // 1
Math.max.apply(null, myArray); // 4
6

ES6에서는 ... 연산자를 사용하여 배열을 넓히고 최소 또는 최대 요소를 취할 수 있습니다.

var myArray = [1, 2, 3, 4, 99, 20];

var maxValue = Math.max(...myArray); // 99
var minValue = Math.min(...myArray); // 1

다음 예제에서는 for 루프를 사용합니다.

var maxValue = myArray[0];
for(var i = 1; i < myArray.length; i++) {
   var currentValue = myArray[i];
   if(currentValue > maxValue) {
      maxValue = currentValue;
   }
}
5.1

다음 예제에서는 Array.prototype.reduce() 를 사용하여 최소값 또는 최대 값을 찾습니다.

var myArray = [1, 2, 3, 4];

myArray.reduce(function(a, b) {
  return Math.min(a, b);
}); // 1

myArray.reduce(function(a, b) {
  return Math.max(a, b);
}); // 4
6

또는 화살표 기능 사용 :

myArray.reduce((a, b) => Math.min(a, b)); // 1
myArray.reduce((a, b) => Math.max(a, b)); // 4
5.1

reduce 버전을 일반화하기 reduce 빈 목록의 경우를 커버하기 위해 초기 값 을 전달해야합니다.

function myMax(array) {
  return array.reduce(function(maxSoFar, element) {
    return Math.max(maxSoFar, element);
  }, -Infinity);
}

myMax([3, 5]);             // 5
myMax([]);                 // -Infinity
Math.max.apply(null, []);  // -Infinity

reduce 를 적절하게 사용하는 방법에 대한 자세한 내용은 reduce 참조하십시오.

배열 병합

2 차원 배열

6

ES6에서 스프레드 연산자로 배열을 평평하게 만들 수 있습니다 ... :

function flattenES6(arr) {
  return [].concat(...arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flattenES6(arrL1)); // [1, 2, 3, 4]
5

ES5에서는 .apply () 를 사용하여 이를 달성 할 수 있습니다.

function flatten(arr) {
  return [].concat.apply([], arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flatten(arrL1)); // [1, 2, 3, 4]

고차원 배열

이렇게 중첩 된 배열을 감안할 때

var deeplyNested = [4,[5,6,[7,8],9]];

이 마술로 평평해질 수 있습니다.

console.log(String(deeplyNested).split(',').map(Number);
#=> [4,5,6,7,8,9]

또는

const flatten = deeplyNested.toString().split(',').map(Number)
console.log(flatten);
#=> [4,5,6,7,8,9]

위의 두 가지 방법 모두 배열이 숫자로만 구성된 경우에만 작동합니다. 이 방법으로 다차원 객체 배열을 병합 할 수 없습니다.

특정 색인의 배열에 항목 삽입

Array.prototype.splice 메서드를 사용하면 간단한 항목 삽입이 가능합니다.

arr.splice(index, 0, item);

여러 인수 및 연결 지원을 포함하는 고급 변형 :

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  this.splice.apply(this, [index, 0].concat(
    Array.prototype.slice.call(arguments, 1)));
  return this;
};

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);  // ["b", "X", "Y", "Z", "c"]

그리고 배열 형식 인수를 병합 및 연결 지원 :

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  index = Math.min(index, this.length);
  arguments.length > 1
    && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
    && this.insert.apply(this, arguments);
  return this;
};

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");  // "a-b-V-W-X-Y-Z-c-d"

entries () 메소드

entries() 메서드는 배열의 각 인덱스에 대한 키 / 값 쌍을 포함하는 새로운 Array Iterator 객체를 반환합니다.

6
var letters = ['a','b','c'];

for(const[index,element] of letters.entries()){
  console.log(index,element);
}

결과

0 "a"
1 "b"
2 "c"

참고 : 이 방법은 Internet Explorer에서 지원되지 않습니다.

CC-by-SA 2.5에 따라 허가 된 Mozilla Contributors의 Array.prototype.entries 에있는이 컨텐츠의 일부



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow