JavaScript ES6 리프레셔(2부)
18350 단어 javascriptes6reactbeginners
어레이 매핑
map()
메서드는 부모 배열에 있는 각 요소에 대해 특정 함수를 호출하여 배열을 만듭니다.const colors = ["red", "blue", "green"];
const mappedArray = colors.map(color => 'Primary Color - ${color}');
어디,
mappedArray = ['Primary Color - red', 'Primary Color - blue', 'Primary Color - green']
화살표 함수를 사용하여 템플릿 문자열을 사용하여 각 색상을 새 배열로 매핑합니다. 위의 코드는 템플릿 문자열과 화살표 함수를 사용하지 않고도 작성할 수 있습니다.
const mappedArray = colors.map(function(color) {
return "Primary Color - " + color;
})
두 함수에 전달하는
color
매개변수는 배열의 특정 단일 항목입니다. 변수 이름을 지정할 수 있습니다. 예를 들어 i
대신 color
객체 구조화
객체의 값에 접근하는 일반적인 방법
const address = {
street: '1 ABC'
city: 'DEF',
country: 'GHI'
}
const street = address.street
const city = address.city
const country = address.country
street, city, country
는 "1 ABC", "DEF", "GHI"
와 같은 값을 갖습니다.그러나 ES6 객체를 구조화하는 방법을 사용하여
const {street, city, country} = address
두 경우 모두 주소 개체에서 새 변수의 거리, 도시 및 국가 속성을 추출했습니다.
const {street: st} = address
여기서 우리는 주소에서
street
속성을 추출하고 st
변수에 저장합니다.따라서
st
에는 주소 개체의 거리 속성에서 추출한 "1 ABC"
값도 포함됩니다.스프레드 연산자
Spread 연산자를 사용하면 배열을 확장할 수 있습니다. 배열을 연결하고 새 값이 거의 없는 후 다른 배열을 연결해야 할 때 가장 잘 사용됩니다.
const first = [1, 2, 3]
const second = [4, 5, 6]
const combined = first.concat(second)
const spreadCombined = [...first, ...second]
// best use case
const inBetween = [0, ...first, 10, 20, ...second, 30, 40]
스프레드 연산자는 객체에도 사용할 수 있습니다.
const one = {B: "Bhutan"}
const two = {D: "India"}
const combined = {A: "USA", ...one, C: "Canada", ...two, E: "Australia"}
클래스
여러 개체를 만드는 대신 클래스를 사용할 수 있습니다.
const person1 = {
name: "ABC"
walk() {
console.log('Walk')
}
}
const person2 = {
name: "DEF"
walk() {
console.log('Walk')
}
}
여러 객체를 선언하는 것보다 공통 속성을 가진 클래스를 갖는 것이 좋습니다.
다음과 같은 방법으로 JavaScript에서 클래스를 구현할 수 있습니다.
class Person {
constructor(name) {
this.name = name
}
walk() {
console.log('Walk')
}
}
//creating persons
const person1 = new Person('ABC')
person1.walk()
const person2 = new Person('DEF')
person2.walk()
계승
예를 들어 모든 교사가 걸을 수 있어야 하는
Teacher
클래스를 만듭니다. 따라서 Person
키워드를 사용하여 extends
클래스의 모든 메서드를 상속합니다.이제
Teacher
클래스가 Person
클래스를 사용하여 extend
클래스의 속성을 상속한 후 해당 클래스의 Person
인스턴스를 생성하여 Teacher
클래스의 모든 메서드를 사용할 수 있습니다.class Person {
constructor(name) {
this.name = name
}
walk() {
console.log('Walk')
}
}
class Teacher extends Person {
teach() {
console.log('Teach')
}
}
const teacher1 = new Teacher('ABC ')
teacher1.teach()
teacher1.walk()
이제
Teacher
클래스의 생성자를 생성하면 super
키워드도 사용해야 합니다.class Teacher extends Person {
constructor(name, degree) {
super(name)
this.degree = degree
}
teach() {
console.log('Teach')
}
}
super 키워드를 사용하면
name
클래스의 Teacher
가 Person
클래스에서 상속됩니다.모듈
모듈은 다른 JavaScript 파일에서 클래스 또는 함수를 가져오는 데 사용됩니다.
export
키워드는 새 JavaScript 파일로 가져올 클래스 또는 함수에 추가되어야 합니다.src/Person.js
export class Person {
constructor(name) {
this.name = name
}
walk() {
console.log('Walk')
}
}
export function display(number) {
console.log(number)
}
모듈을 사용하여 새 JavaScript 파일에서 Person 클래스 및 표시 기능 가져오기
src/teacher.js
import {Person} from './person.js'
import {display} from './person.js'
class Teacher extends Person {
constructor(name, degree) {
super(name)
this.degree = degree
}
teach() {
console.log('Teach')
}
}
const teacher1 = new Teacher('ABC ')
teacher1.teach()
teacher1.walk()
display('hello')
용법:
import {function / class name} from 'path to that js file'
참고:
export
키워드는 함수나 클래스 앞에 추가해야 합니다.기본 및 명명된 내보내기
default
키워드와 함께 export
키워드를 추가하면 기본 내보내기import ... from 'path to js file'
import { ... } from 'path to js file'
위의 예에서 default를 추가하면
export class Person
→ export default class person
그런 다음 새 파일로 가져오는 동안:
import Person , { promote } from './person.js'
Reference
이 문제에 관하여(JavaScript ES6 리프레셔(2부)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/divyashc/javascript-es6-refresher-part-2-52j3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)