일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- EM6
- aframe
- JavaScript
- javscript
- PHP
- JS
- npx
- 상태관리
- vuex
- CI/CD
- VR
- A-Frame
- bootstrap
- vue
- vuetify
- AR
- Component
- PDO
- WebVR
- array
- package-lock.json
- web
- auth0
- Node
- promise
- Three.js
- version mismatch
- 3d
- vue-template-compiler
- WebXR
Archives
- Today
- Total
대가는 결과를 만든다
[ES6] String, Array 관련 함수(spread) 추가 정리 본문
반응형
기본적인 내용은 제외하고, 개인적으로 기록하고픈 내용들만 정리한다.
1. String
1) startsWith() , endsWith() : 앞/뒤로 일치하는 문자열 판단
2) includes() : 문자열 포함여부 판단
let str = "A is B";
str.startsWith("A"); //true
str.endsWith("B"); //true
str.includes("is"); //true
2. Array
1) for in의 문제 보완한 for of
//for-in의 경우 index로 순회 : 상위 prototype의 값도 포함될 수 있음
let data = ["A","B"];
Array.prototype.getIndex = "C";
for(let index in data){
console.log(data[index]); //"A", "B", "C"
}
//for-of의 경우 value 순회가능
let data = ["A", "B"];
Array.prototype.getIndex = "C";
for(let value of data){
console.log(value); //"A", "B"
}
2) spread 연산자
[ ... array ] 배열또는 iterable을 "개별" 요소로 분리
- 기본 예제
// 배열
console.log(...[1, 2, 3]); // -> 1, 2, 3
// 문자열
console.log(...'Helllo'); // H e l l l o
// Map과 Set
console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3])); // 1 2 3
- 배열 합치기 예제
const a = [1,2,3];
const b = [4,5];
const c = ["안녕"];
car d = a.concat(b,c); //기존 ES5 방식
const d = [...a, ...b, c]; //기존 ES6 방식
console.log(d); //[1,2,3,4,5,"안녕"]
- 원본 배열 유지 예제
const a = [1,2,3,4,5];
//const b = a.reverse(); //ES5 기존 방식
const b = [...a].reverse();
console.log(a); //1,2,3,4,5
console.log(b); //5,4,3,2,1
- 나머지 요소 할당
const a = [1,2,3,4,5];
let [first, second, ...rest] = a;
console.log(first, second, rest); //1 2 [3,4,5]
- 객체에서 사용
const obj1 = {x:1, y:2};
const obj2 = {...obj1, z:3};
console.log(obj2); //{x:1, y:2, z:3}
'개발 > Javascript' 카테고리의 다른 글
[ES6] import/export module (0) | 2019.12.24 |
---|---|
[ES6] 비구조화 할당, 객체 리터럴 생성 간편화 (0) | 2019.12.24 |
scroll to animation only with js 예제 (0) | 2019.12.17 |
[스터디] javscript의 상속 Traditional vs ES6 (0) | 2019.09.24 |
web worker (0) | 2019.07.25 |
Comments