배열 정리중

김명성·2022년 1월 26일
20220201
0

자바스크립트

목록 보기
7/26

1.Array.length

  • length 메서드는 배열의 길이를 반환한다.
  • length가 2인 배열을 length를 3으로 설정한다면 undefined가 추가돼 총 3개의 요소를 갖게 된다.
  • length의 값이 꼭 배열내 값의 수를 나타내진 않습니다.
배열 내 undefined가 있다면 length에 포함하지 않음.

length로 배열을 단축할 수도 있다.

var numbers = [1, 2, 3, 4, 5];

if (numbers.length > 3) {
    numbers.length = 3;
}

console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3

2.Array.concat

concat은 인자로 주어진 배열, 값을 기존 배열에 합쳐 새 배열을 반환한다.

  • 기존 배열을 유지하며 새로운 배열을 생성한다.
  • 합쳐지더라도 중첩 배열 내부로 재귀하지 않는다.(1차원 배열로 합쳐진다)
  • 주의점 : 얕은 복사로 원본 배열과 새 배열에서 같은 참조값을 가져 같은 객체를 가리키게 된다.
예제1

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array1)
(3) ['a', 'b', 'c']

console.log(array2)
(3) ['d', 'e', 'f']

console.log(array3);
(6) ['a', 'b', 'c', 'd', 'e', 'f']

예제2
const alpha = ['a', 'b', 'c'];

alpha.concat(1, [2, 3]);
// 결과: ['a', 'b', 'c', 1, 2, 3]

3.Array.copyWithin

  • copyWithin은 3개의 매개변수를 갖는다.(target, start, end)
  • target에 start ~ end 인덱스 이전까지 포함되는 값을 뒤집어 씌운다.
  • copyWithin 메서드는 변경자 메서드로서 원본을 훼손하기에 미리 복사본을 생성해야 기존 배열을 유지할 수 있다
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
[3,5,8,22,45].copyWithin(0,1,3);
// [5,8,8,22,45]

4.Array.entries() // next()

  • 배열의 각 인덱스에 iterate 할 수 있도록 새로운 객체를 반환합니다.
  • 반환되는 객체와 함께 done : true/false 두가지 값도 반환합니다.
  • true가 반환되면 더이상 값이 없음을 의미합니다.
const bird = ['뻐꾸기','참새','종달새','두루미'];

newBird = bird.entries();
Array Iterator {}
newBird.next()
{value: Array(2), done: false}
newBird.next()
{value: Array(2), done: false}
newBird.next()
{value: Array(2), done: false}
newBird.next()
{value: Array(2), done: false}
newBird.next()
{value: undefined, done: true}
요소들을 단계적으로 살펴봐야 할 때 사용될 것 같습니다.

5. Array.splice

  • 배열의 요소를 삭제할 수 있다.
  • 배열의 요소를 변경할 수 있다.
  • 배열에 새로운 요소를 추가할 수 있다.
  • splice는 순서대로 3개의 파라미터를 갖는다.(startIndex,deleteCount,item)
  • deleteCount를 0으로 설정하면 기존 배열 내 요소를 삭제하지 않고 item을 추가한다.
  • item은 여러개를 추가로 넣을 수 있다.

○ 배열의 요소 삭제 

const fruits = [
  {banana: "30개"}, {mango: "27개"}, {melon:"10개"}, {lemon:"62개"}, {kiwi:"88개"}
				]
fruits.splice(0);
console.log(fruits) // output : []


○ 배열의 요소 삭제,변경 
const newproduct = {watermelon:"14개"}
const fruits = [
  {banana: "30개"}, {mango: "27개"}, {melon:"10개"}, {lemon:"62개"}, {kiwi:"88개"}
				]
fruits.splice(0,1); // [{"banana":"30개"}]

console.log(fruits);
  // [{"mango": "27개"},{"melon": "10개"},{"lemon": "62개"},{"kiwi: 88개}]

const devideFruits = fruits.splice(2,2,newproduct);
// [{"lemon": "62개", "kiwi": "88개"}]

console.log(devidefruits) // [{"lemon": "62개", "kiwi": "88개"}]
console.log(fruits) 
// [{"mango": "27개"},{"melon": "10개"},{"watermelon":"14개"}

const devideFruits = fruits.splice(2,2,newproduct)를 보면 splice를 하면서 newproduct를 추가하였지만 잘리는 부분만 devideFruits에 할당되고 newproduct는 fruits에 할당되는 것을 볼 수 있다.기존 배열의 splice를 받는 변수는 item자리에 들어오는 요소를 받을 수 없다.

6. Array.every

  • 배열 안의 모든 요소가 주어진 콜백함수를 통과하는지 테스트합니다.
  • Boolean 값을 반환합니다.
  • 빈 배열에서 호출하면 무조건 true를 반환합니다.
  • 콜백함수는 요소,인덱스,사용할 배열 세 가지 인수와 함께 사용할 수 있습니다.
  • every는 배열을 변형하지 않습니다.
let namba = [1,2,3,4,5,6,7,8,10];

namba.every((tomato) =>{ return tomato <11;});

>true
배열 내 객체에도 사용할 수 있습니다.

let myFriends = [
  { name : "kim" , hobby : "fishing" ,age : 30},
  { name : "park" , hobby : "football",age : 29 },
  { name : "choi" , hobby : "sleep" ,age : 33},
  { name : "song" , hobby : "eat" ,age : 31}
  ]

myFriends.every((키값) => { return 키값.age < 40 });
>true
every 내장 함수는 false를 추적합니다.

7. Array.some

  • every와 같은 문법을 사용합니다.
  • 조건에 하나라도 맞는 요소가 있다면 true를 반환하고 종료됩니다.

let myFriends = [
  { name : "kim" , hobby : "fishing" ,age : 30},
  { name : "park" , hobby : "football",age : 29 },
  { name : "choi" , hobby : "sleep" ,age : 33},
  { name : "song" , hobby : "eat" ,age : 31}
  ]
myFriends.some((elems) =>{ return elems.hobby.includes("eat");})
>true
some 내장 함수는 true를 추적합니다.

Rest 파라미터
Rest 파라미터는 함수 인자 선언 앞에 ...을 붙여서 정의하는 문법

function getData(...rest){
let[item1,item2,item3,item4,item5] = rest;
console.log(...rest);
}

getData(1,2,3,4,5)

Spread 파라미터
Rest 파라미터와 마찬가지로 ...을 붙여서 정의하는 문법
iterable한 변수 앞에 붙여서, 해당 변수의 데이터를 개별 아이템으로 분리함
iterable = 반복 가능한 객체를 의미하며 배열,문자열 등을 의미함

기존 배열로 새로운 배열 구성하기

  1. const myArray1 = [1,2,3];
    const myArray2 = [...myArray1,3,4,5];

myArray2 = [1,2,3,3,4,5]

  1. const data = [1,23,7,67,13,958,10,5,45,69,77];

function func(a,b,c,d,e,f,g,h,i,j,k){
console.log(a,g,j,k,e,b,c);
}

func(...data);

1 10 69 77 13 23 7
// spread 매개변수는 배열이 아닌 각각의 값을 내보낸다

--
new로 Promise 객체 생성
2. Promise 객체에서는 executor라는 함수가 자동으로 실행됨.
executor 함수는 resolve,reject라는 두개의 [함수]를 인자로 받아
비동기 처리 함수를 실행.
executor를 통해 비동기 처리 함수를 실행 완료 후,
해당 작업이 성공이면 resolve 실패하면 reject 함수 호출
const promise = new Promise((resolve,reject) =>{
setTimeout(() =>{
let num = 10;
if(num>=11){
resolve(num);
}else{
reject("error");
}
},1000);
});

실행부
promise.then(resolve인자함수,reject인자함수)

--

정의부
const runCode = new Promise(
(resolve,reject) => {
setTimeout(() =>{
let num = 10;
if( num>9) {
resolve();
}else{
reject();
}
}});

실행부
runCode
.then((item) =>{
console.log('success',item);
}, (err) =>{
console.log(err);
})

.then(() =>{
console.log('순차적으로 실행된다');
});

비동기적인 코드를 먼저 실행해야 한다면(순서대로 실행되야 한다면)
.then을 계속 써서 순차적으로 실행하게 만들 수 있다. (콜백지옥해결)
실행된 .then에
retrun [value];로 그 다음 then에 값을 넘겨줄 수 있다.

.catch
실행 중 예외사항 처리함.
failureCallback이 정의되지 않을 경우 reject 함수를 호출한다.
보통 호출부 제일 마지막에 설치함.

throw
사용자 정의 예외를 던질 때 사용
catch 블록이 있으면 catch블록으로 전달되고 그렇지 않으면 플그램을 종료함
보통 다음과 같은 구문으로 사용됨 (Error클래스의 객체를 만들어서 전달함)
Throw new Error("ERROR");

finally() 성공 실패와 상관 없이 실행됨.

모든 promise 실행 후 .then 실행
promise.all([promise1,promise2,promise...])
.then((data) => {
//내용작성
};

제일 빠른 promise 실행 후 .then실행
promise.race([promise1,promise2]).then((data) =>{
console.log(data);
});

1단계 HTML parsing

2단계 DOM tree , CSSOM tree생성

3단계 Render tree 생성

4단계 랜더링 : Layout / Paint / Compositing
HTML 객체를 이용해서 화면에 뿌려준다

javascript를 head에 넣으면
DOM tree 구성 전에 javascript가 실행되므로 DOM을 조작하는
javascript는 에러가 나거나 정상 실행이 되지 않는다.

window와 document

window : 최상위 객체 웹브라우저 객체

document : window tree 바로 아래 DOM 객체의 최상위 객체

BOM(Browser Object Model)

  • window는 브라우저 환경 전체 객체를 가리키며, window를 안써도 됨.(ex.console,alert)
    BOM의 주요 객체
    navigator 객체 : pc에 대한 정보
    navigator.userAgent // 브라우저 정보
    navigator.flatform // 운영체제 정보
    navigator.lacation : 현재 URL 정보

자바스크립트로 HTML을 조작하기 위해서는 CRUD 사용법을 이해해야 한다.

Create , Read(find) , Update , Delete
원하는 HTML을 읽는다는 의미는 원하는 HTML을 찾는다는 의미다.

Array.push(추가할 값)

배열의 [[끝]]에 있는 아이템을 리턴해주고 해당 아이템은 배열에서 삭제
Array.pop()

배열의 첫 아이템 삭제, 그 뒤에 있는 아이템을 앞으로 당김
Array.shift()

두 배열을 합치는 함수
const 배열3 = 배열3.concat(배열1,배열2)

아이템 사이에 특정 문자열을 넣어서 모든아이템을 합쳐 하나의 문자열로 만들어 줌
Array.join(stirng);
let data2 = data1.join(string);
데이터1 배열안에 값 각각에 string 값을 붙여 준다.

Array.reverse
오른쪽에서 왼쪽으로 (역순으로 배치해준다)

배열의 일부분을 반환해준다
Array.slice(a,b) : a 아이템 인덱스번호부터 시작해서, b-1 아이템 인덱스까지 추출

for문을 대체해서 간단히 배열의 각 아이템을 가져올 수 있는 함수.
Array.forEach(item)

배열의 각 아이템에 정의한 함수를 적용해서 새로운 배열을 생성
Array.map
const data2 = data1.map(item => item * 2)

배열에서 지정한 데이터가 위치한 인덱스 번호를 리턴한다. 없으면 -1 리턴
Array.indexOf

배열 내 객체에 들어 있는 값의 인덱스를 알고 싶다면 findIndex를 사용한다.
Array.findIndex(item => (Array.name === ' Emerson ');
배열 내 객체들에 키값 name이 Emerson인 객체를 찾아 index번호를 리턴해줌.

Array.find
findindex와 유사하지만 데이터 위치를 리턴하는 것이 아니라, 지정한 데이터가 들어 있는
객체를 리턴함

Array.filter(fn)
배열에서 특정 조건에 맞는 아이템만 추출함 (true값)

Array.from(1번매개변수 :복사할 배열객체 또는 반복가능객체 2번 : mapping할 함수)

객체 구조 분해 할당 (비구조화 할당) 문법
배열이나 객체의 속성을 해체해서, 값을 개별 변수에 대입할 수 있게 하는 문법
구조분해할당은 객체와 배열을 좀 더 쉽게 다루는 문법으로 이해하면 됨

const data = {
name : "dave",
age : 20
};

const { age, name } = data; // 동일한 프로퍼티명을 써줘야, 해당 프로퍼티에 맞는 값이 대입됨

console.log(name,age) = dave 20

가져오고 싶은 객체의 키값 입력으로 가져올 수 있다.
다른 이름으로 가져오고 싶다면 .

const { name = myName , age = myAge } = data

console.log(myName,myAge);

const data = {
name : "Emerson",
age : 33,
job : "doctor"}
undefined
const { job } = data;

job // "doctor"

--
배열 분해 할당
const data = [1,2,3];

const [item1,item2] = data;

console.log(item1,item2);
item1,item2 라고 해도 해당 번호가 index번호를 의미하는 것은 아니다.
item3,item4로 매개변수를 입력해도 1,2를 가져옴 .
data 배열은 변형되지 않는다

const data = [1,2,3];

const [item1,item2] = data;

data = (3) [1, 2, 3]
function ab(){
return item1 * item2
} // item1,item2가 전역변수, 사용할 수 있는 지역변수라면 빼와서 사용이 가능..!!

ab(item1,item2) 결과값 2
data 결과값 (3)  [1, 2, 3]

[item1,item2] 결과값 (2) [1, 2]

문법 활용 팁

값 치환하기

let a = 1;
let b = 2;
[a, b] = [b, a];

함수 리턴시 여러 데이터 넘겨주기

function getData(){
return [10,20];
}

let[a,b] = getData();

문자열 배열로 만들기
const data = 'DaveLee,fun-coding,coding';

console.log(data.split(',');

결과값 : (3) ["Dave Lee" , "fun-coding" , "coding"]

구조분해할당 활용 팁
일반 문자열인 const data를 배열로 가져올 수 있다.

const data = "Orange,Apple,Banana,Melon,Kiwi"

newdata = data.split(',');

newdata 결과값 (5) ['Orange', 'Apple', 'Banana', 'Melon', 'Kiwi']

secondData[favorite,good,most] = newdata.split
secondData

Rest 파라미터
Rest 파라미터는 함수 인자 선언 앞에 ...을 붙여서 정의하는 문법

function getData(...rest){
let[item1,item2,item3,item4,item5] = rest;
console.log(...rest);
}

getData(1,2,3,4,5)

Spread 파라미터
Rest 파라미터와 마찬가지로 ...을 붙여서 정의하는 문법
iterable한 변수 앞에 붙여서, 해당 변수의 데이터를 개별 아이템으로 분리함
iterable = 반복 가능한 객체를 의미하며 배열,문자열 등을 의미함

기존 배열로 새로운 배열 구성하기

  1. const myArray1 = [1,2,3];
    const myArray2 = [...myArray1,3,4,5];

myArray2 = [1,2,3,3,4,5]

  1. const data = [1,23,7,67,13,958,10,5,45,69,77];

function func(a,b,c,d,e,f,g,h,i,j,k){
console.log(a,g,j,k,e,b,c);
}

func(...data);

1 10 69 77 13 23 7
// spread 매개변수는 배열이 아닌 각각의 값을 내보낸다

profile
김명성
이전 포스트

Array.sort

다음 포스트

클로저 - 정리중

0개의 댓글