집 >웹 프론트엔드 >JS 튜토리얼 >JS에서 일반적으로 사용되는 배열 방법 요약

JS에서 일반적으로 사용되는 배열 방법 요약

php中世界最好的语言원래의: 2018-03-07 14:51:052112검색

이번에는 JS에서 흔히 사용하는 배열 방식에 대해 정리해보겠습니다. JS에서 데이터를 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. concat() 메서드는 두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고 새 배열을 반환합니다.

예:
var array1 = ['a', 'b', 'c'];

var array2 = ['d', 'e', 'f'];

console.log( array1.concat(array2));

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

2. 배열. 제공된 함수를 통해 구현된 테스트의 모든 요소를 포함합니다. (필터링에 사용 가능)

예:
function isBigEnough(value) {
return value >= 10;
}

varfiltered = [12, 5, 8, 130, 44].filter(isBigEnough) ;

// 필터링됨은 [12, 130, 44]

// ES6 방식

const isBigEnough = value => value >= 10;

let [...spread]= [12, 5, 8, 130, 44];

letfiltered = Spread.filter(isBigEnough);

3. find() 메서드는 제공된 테스트 함수를 충족하는 배열의 첫 번째 요소 값을 반환합니다. 그렇지 않으면 정의되지 않은 값이 반환됩니다.

예:
function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

4, findIndex () 메소드는 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환합니다. 그렇지 않으면 -1이 반환됩니다.

function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough)
// 배열의 4번째 요소 인덱스가 반환됩니다. ,
// 따라서 '3'

5이 됩니다. forEach() 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번 실행합니다. (JavaScript의 for 루프와 동일)

예:

const arr = ['a', 'b', 'c'];

arr.forEach(function(element) {
console .log(요소);
});

arr.forEach( 요소 => console.log(요소));

// a
// b
// c

6, indexOf() 메서드 주어진 요소를 찾을 수 있는 배열의 첫 번째 인덱스를 반환하거나, 존재하지 않는 경우 -1을 반환합니다.

예:
let a = [2, 9, 7, 8, 9];
a.indexOf(2); // 0
a.indexOf(6); ); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1

if (a.indexOf(3) === -1) {

// 요소는 배열에 존재하지 않습니다
}

7. map() 메소드는 새로운 배열을 생성하고, 결과는 배열의 각 요소에 대해 제공된 함수를 호출하여 반환된 결과입니다.

예:

// ES6
let 숫자 = [1, 5, 10, 15];
let doubles = Numbers.map( x => x ** 2);

// doubles는 이제 [1 , 25, 100, 225]

// 숫자는 여전히 [1, 5, 10, 15]

const 숫자 = [2, 4, 8, 10];

반쪽 = 숫자.map(x => x / 2);

let 숫자 = [1, 4, 9];

let 뿌리 = 숫자.map(Math.sqrt);
// 뿌리는 이제 [1, 2, 3]
// 숫자는 여전히 [ 1, 4, 9]

8. pop() 메서드는 배열에서 마지막 요소를 제거하고 해당 요소의 값을 반환합니다. 이 메서드는 배열의 길이를 변경합니다.

예:

let a = [1, 2, 3];
a.length; // 3

a.pop() // 3

console.log(a); 2]

a.length; // 2

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

예:

const array1 = [1, 2, 3, 4];

const 감소기 = (누산기,
current값) => 누산기 +currentValue;// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));

// 예상 출력: 10

// 5 + 1 + 2 + 3 + 4

console.log(array1.reduce(reducer, 5));

/ / 예상 출력: 15
// 필터링됨은 [12, 130, 44]

10입니다. Array.isArray()는 전달된 값이 Array

인지 확인하는 데 사용됩니다.예:

Array.isArray([ 1 , 2, 3]);

// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar")
// false
Array.isArray(정의되지 않음)
// false

11. Array.from() 메서드는 유사 배열 또는 반복 가능 개체에서 새 배열 인스턴스를 만듭니다.

예:

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array .from('foo');

// ["f", "o", "o"]

12. fill() 메서드는 시작 인덱스부터 끝 인덱스까지 고정된 값으로 배열을 채웁니다. 모든 요소.

예:

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

// 위치 2부터 위치 4까지 0으로 채웁니다.
console.log(array1.fill(0, 2, 4));
// 예상 출력: [1, 2, 0, 0]

// 위치 1에서 5로 채우기
console.log(array1.fill(5, 1));
// 예상 출력: [1, 5, 5, 5]

console.log(array1.fill(6));
// 예상 출력: [6, 6, 6, 6]

구문:
arr.fill(value[, start[, end]])
즉, (채워진 값, 시작 값(인덱스), 끝 값 (1부터 시작))

13.includes() 메서드는 배열에 지정된 값이 포함되어 있는지 확인하는 데 사용됩니다. 상황에 따라 포함되어 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

예:
let a = [1, 2, 3];

a.includes(2);
// true

a.includes(4)
// false

14. ) 메서드는 배열(또는 배열과 유사한 객체)의 모든 요소를 string으로 연결하고 이 문자열을 반환합니다.

예:
let a = ['바람', '비', '불'];

console.log(a.join())
// 기본값은 ","
// '바람, Rain,Fire'

console.log(a.join(""))
// 구분 기호 === 빈 문자열 ""
// "WindRainFire"

console.log(a.join("- ") );
// 구분 기호 "-"
// 'Wind-Rain-Fire'

15. push() 메서드는 배열 끝에 하나 이상의 요소를 추가하고 새 배열의 길이를 반환합니다.

예:
var 숫자 = [1, 2, 3];
numbers.push(4);

console.log(숫자)
// [1, 2, 3, 4]

숫자. push(5, 6, 7);

console.log(numbers);
// [1, 2, 3, 4, 5, 6, 7]

16. 누적 누산기와 배열의 각 값(오른쪽에서 왼쪽으로)을 단일 값으로 줄입니다. Array.prototype.reduce()의 실행 방향과 반대

예:
let flattened = [
[0, 1],
[2, 3],
[4, 5]
].reduceRight((a , b) => {
return a.concat(b);
}, []);

// 평면화는 [4, 5, 2, 3, 0, 1]

17입니다. 메소드 배열에서 첫 번째 요소를 제거하고 해당 요소의 값을 반환합니다. 이 메서드는 배열의 길이를 변경합니다.

예:
let a = [1, 2, 3];
let b = a.shift();

console.log(a)
// [2, 3]

console.log( b);
// 1

18. Slice() 메서드는 선택한 배열의 일부를 처음부터 끝까지(끝 제외) 새 배열 객체로 반환합니다. 원래 배열은 수정되지 않습니다.

예:
var Animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// 예상 출력 : 배열 ["낙타", "오리", "코끼리"]

console.log(animals.slice(2, 4));
// 예상 출력: 배열 ["낙타", "오리"]

console .log(animals.slice(1, 5));
// 예상 출력: Array ["bison", "camel", "duck", "elephant"]

19 some() 메소드는 배열 여부를 테스트합니다. 특정 요소는 제공된 기능으로 구현된 테스트를 통과합니다.

예:
const isBiggerThan10 = (요소, 인덱스, 배열) => {
return 요소 > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10); / false

[12, 5, 8, 1, 4].some(isBiggerThan10);

// true

20. sort() 메서드는 배열 요소를 정렬하는 데 사용됩니다. 배열을 반환합니다. sort 정렬이 반드시 안정적인 것은 아닙니다. 기본 정렬 순서는 문자열 유니코드 코드 포인트를 기반으로 합니다.

예:

var Fruit = ['체리', '사과', '바나나'];
fruit.sort()
// ['사과', '바나나', '체리']

21 splice() 메서드는 기존 요소를 제거하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

예:

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum') // 인덱스 2에 'drum' 삽입; '

// myFish는 ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1) // 인덱스 2에서 항목 하나 삭제(즉, '드럼' 항목)

// myFish는 ["angel", "clown", "mandarin", "sturgeon"]

구문:

array.splice(start)

array .splice(start, deleteCount)

array.splice(start, deleteCount, item1, item2, ...)

매개변수:
start
수정의 시작 위치를 지정합니다(0부터 계산). 배열의 길이를 초과하면 배열의 끝부터 내용이 추가되고, 음수인 경우 시작 매개변수만 사용하는 경우 배열의 끝부터 시작하는 숫자를 나타냅니다. deleteCount가 없으면 :array.splice(start)와 같은 항목은 [start, end]의 요소를 삭제한다는 의미입니다.
deleteCount 선택 사항
정수, 제거할 배열 요소 수를 나타냅니다. deleteCount가 0이면 요소가 제거되지 않습니다. 이 경우 최소한 하나의 새로운 요소를 추가해야 합니다. deleteCount가 시작 후 총 요소 수보다 크면 시작 후의 모든 요소가 삭제됩니다(시작 위치 포함).
deleteCount를 생략하면 (arr.length - start)와 동일합니다.
item1, item2, ... 선택사항
배열에 추가할 요소는 시작 위치부터 시작됩니다. 지정하지 않으면 splice()는 배열 요소만 제거합니다.
splice 메소드는 deleteCount 매개변수를 사용하여 삭제 또는 추가 여부를 제어합니다.
start 매개변수는 필수이며 시작 위치(0부터 계산)를 나타냅니다. 예: start=0 start>= array.length; -1은 마지막 항목부터 시작함을 의미합니다.
①. 시작 위치부터 [시작, 끝] 요소를 삭제합니다.
array.splice(start)
②. 시작 위치부터 [start, Count] 요소를 삭제합니다.
array.splice(start, deleteCount)
3. 시작 위치부터 item1, item2, ... 요소를 추가합니다.
array.splice(start, 0, item1, item2, ...)

22. toString()은 지정된 배열과 해당 요소를 나타내는 문자열을 반환합니다.

23. unshift() 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 배열의 길이를 반환합니다.

예:

let a = [1, 2, 3];
a.unshift(4, 5);

console.log(a);
// [4, 5, 1, 2, 3 ]

24. substring() 메서드는 문자열에서 지정된 두 첨자 사이의 문자를 추출하는 데 사용됩니다.
예:
var str="Hello world!";
document.write(str.substring(3)+"
");//lo world!
document.write(str.substring( 3,7));//lo w

구문:
string.substring(from, to)

Parameters
from
필수입니다. 문자열 Object에서 추출할 부분 문자열의 첫 번째 문자 위치를 지정하는 음수가 아닌 정수입니다.
~
선택사항. 문자열 Object에서 추출할 하위 문자열의 마지막 문자보다 하나 더 많은 위치에 있는 음수가 아닌 정수입니다.
이 매개변수를 생략하면 반환된 하위 문자열이 문자열의 끝으로 이동합니다.

25. substr() 메서드는 문자열의 시작 첨자부터 지정된 수의 문자를 추출할 수 있습니다.
Example
var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3,7));p//lo worl
구문:
stringObject.substr(start,length)

매개변수:
start
필수입니다. 추출할 부분 문자열의 시작 인덱스입니다. 숫자 값이어야 합니다. 음수인 경우 이 매개변수는 문자열 끝에서의 위치를 선언합니다. 즉, -1은 문자열의 마지막 문자를 나타내고, -2는 마지막에서 두 번째 문자를 나타내는 식입니다.
길이
선택사항. 하위 문자열의 문자 수입니다. 숫자 값이어야 합니다. 이 매개변수를 생략하면 stringObject의 처음부터 끝까지의 문자열이 반환됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!