ES6__002(Array & Destructuring)

Array.of

무언가를 array로 만들고 싶을 때 사용한다.

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

const a = Array.of("a","b","c","d")

 

Array.from

array lik object를 array로 만들어준다. 예를들어

//html
<div>
 <button class=button> iam btn</button>
 <button class=button> iam btn</button>
 <button class=button> iam btn</button>
 <button class=button> iam btn</button>
</div


const buttons = documenet.getElementsByClass("button")

// 이것은 불가능합니다.
buttons.forEach(btn=>{
  btn.addEventListener("click",()=>console.log("HI"))
}

//이것은 가능합니다.
Array.from(buttons).forEach(btn=>{
  btn.addEventListener("click",()=>console.log("HI"))
}

 

Array.find

find를 사용해서 true가 나올시 첫번째 element를 알려준다.

const fruits = ["mangoapple", "grape", "apple", "pineapple", "orange"];

const a = fruits.find((fruit) => fruit.includes("apple"));

console.log(a);


// mangoapple

Array.findIndex

true가 나올 시 해당 첫번째로 true값으로 반환된  인덱스번호를 알려준다. 

const fruits = ["mangoapple", "grape", "apple", "pineapple", "orange"];

const check = () => fruits.findIndex((fruit) => fruit.includes("apple"));

let target = check();
console.log(target);

const oneOfFruit = fruits[target].split("apple")[0];

const apple = "Apple";

fruits[target] = `${oneOfFruit} & ${apple}`;

target = check();

console.log(target); // <= target에 다음 해당 인덱스가 있으면 양수가 나오고 없으면 음수가 나온다.
console.log(fruits);


//["mango & Apple", "grape", "apple", "pineapple", "orange"]

 

Array.fill

const fruits = ["mangoapple", "grape", "apple", "pineapple", "orange"];

const check = () => fruits.findIndex((fruit) => fruit.includes("apple"));

fruits.fill("*".repeat(3), 1, 2);

console.log(fruits);

//) ['mangoapple', '***', 'apple', 'pineapple', 'orange']

 

Array Destructuring

const numbers = ['1','2','3','4','5']

const [one,two,three]=numbers

console.log(one,two,three)

//1,2,3





const numbers = ["1", "2", "3", "4", "5"];

const [one, two, three, six = "6"] = numbers;

console.log(one, two, three, six);

//1,2,3,4





const numbers = ["1", "2", "3"];

const [one, two, three, six = "6"] = numbers;

console.log(one, two, three, six);

//1,2,3,6

 

Renaming

//데이터를 받아왔다고 가정
const setting = {
  color: {
    chose_color: "dark",
  },
};
// 데이터의 이름을 renaming
//let으로도 가능하다.
const {
  color: {chose_color: choseColor = "light"},
} = setting;

// 위와 같다.
// const choseColor = setting.color.chose_color || "light";

console.log(choseColor);

//let으로 할경우
//데이터를 받아왔다고 가정
const settingTwo = {
  color: {
    chose_color: "dark",
  },
};
// 데이터의 이름을 renaming
let choseColorTwo = "blue";
({
  color: {chose_color: choseColorTwo = "light"},
} = settingTwo);

// 위와 같다.
// const choseColorTwo = settingTwo.color.chose_color || "light";

console.log(choseColorTwo);

 

Swapping & Skipping

//Swapping

let tomato = "lemon";
let lemon = "tomato";
//Array destructuring을 사용하여 값을 맞춰준다.
// 바꿀 값을 원래 순에 맞게 첫번째 배열에 넣어준다.
// 바뀌어져야하는 변수를 바꿀 값 배열에 맞게 순서대로 적는다.
//";"을 꼭 사용해서 라인을 분간 시켜준다.
[lemon, tomato] = [tomato, lemon];

console.log(tomato);
console.log(lemon);

//Skipping
const days = ["mon", "tue", "wed", "thu", "fri"];

const [, , , thu, fri] = days;
console.log(thu, fri);