👉 배열을 초기화 할때 사용하는 두가지 방법 [from / fill]
- from: 객체를 얕게 복사해 새로운 객체 생성
- fill: 정적인 값 한가지, 요소의 위치를 지정가능
from
- 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만든다.
- 기존 객체를 이용해 새로운 배열을 만들어야 할 때
Array.from('js공부중');
//['j', 's', '공', '부', '중']
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
💡 유사배열 객체란?
유사 배열 객체는 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.
JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다.
(보통은 유사 배열 객체를 사용할 일은 없으나 나만의 자료형을 따로 만들 때 사용한다.)
배열에 내포되어있는 기능들을 유사배열에서 사용하기 위해 call, apply, bind을 사용한다.
(apply와 call은 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내것처럼 사용할 수 있게 해준다.)
유사배열객체 vs 배열의 차이
arr.length=3일 때 배열의 길이는 3개로 정해지지만 유사 배열 객체에는 아무 영향이 없다
fill
- 모두 똑같은 요소로 채우고 싶을 때
- 원본을 변경하므로 복사본이 아닌 this 객체로 변경해 반환한다는 특징이 있다.
arr.fill(“넣을 것",시작인덱스, 종료인덱스)
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4)); // [1, 2, 0, 0]
//‘0’을 [2]부터 [4]전까지의 자리의 요소에 넣는다
console.log(array1.fill(5, 1)); // [1, 5, 5, 5]
//‘5’를 [1]자리의 요소에 넣는다
console.log(array1.fill(6)); // [6, 6, 6, 6]
//‘6’을 전체 요소에 넣는다
flat
- 배열을 원하는 깊이로 평탄화하고 싶을때
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat( Infinity );
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
some
- 1개 이상의 요소가 조건에 맞는지 찾을 때
- 여부를 boolean으로 반환한다.
const cafe = [{
'item' : 'coffee',
'amount' : 5},
{
'item' : 'cake',
'amount' : 4},
{
'item' : 'tea',
'amount' : 7},
{
'item' : 'cookie',
'amount' : 3
}];
const order = cafe.some ( i => {
return i.amount >= 5
});
order
//expected output: true
every
- 모든 요소가 조건에 맞는지 찾을 때
- 여부를 boolean으로 반환한다. 하나라도 조건에 해당하지 않으면 false
const cafe = ['coffee', 'cake', 'tea', 'cookie']
const cafe = [{
'item' : 'coffee',
'amount' : 5
},{
'item' : 'cake',
'amount' : 4
},{
'item' : 'tea',
'amount' : 7
},{
'item' : 'cookie',
'amount' : 3
}];
const order = cafe.every( i => i.amount >= 3)
order
//expected output: true
'JavaScript' 카테고리의 다른 글
| JavaScript | 'DOM' 제어 명령어 (0) | 2022.05.17 |
---|---|
| JavaScript | 'DOM' 접근하기, HTMLCollection 와 NodeList (0) | 2022.05.16 |
|JavaScript | 반복문 for...in , for...of (0) | 2022.05.10 |
JavaScript _배열 [Array].join, split, sort, reverse (0) | 2022.05.08 |
JavaScript _배열 [Array].indexOf, pop, shift, push, unshift, concat, splice, slice (0) | 2022.05.03 |