코드를 손으로 치는 것을 좋아하는 아이로서, 코드를 암기하려면 직접 쳐야 한다고 생각해서 오늘은 ES6~ES12의 기능을 소개하겠습니다. ES 사용에 있어 사각지대가 있으시거나, 새로운 기능에 대해 잘 모르시는 분들이라면 이 글이 큰 도움이 되리라 믿습니다~
이해를 돕기 위해 케이스 모드로 설명을 드리기 때문에 이해를 돕기 위해, 동시에 이 케이스는 개발자 모드에서의 디버깅도 지원하므로 지원해주시길 바랍니다~
ECMAScript 는 Ecma International(이전 유럽 컴퓨터 제조업체 협회)이 ECMA를 통해 표준화한 스크립트 프로그래밍 언어입니다. -262 .
프로그래머의 세계에는JavaScript의 표준 버전이 ES5와 ES6 두 가지 밖에 없다고도 할 수 있습니다
ES5 ES6 가 실제로 출시된 것은 2015년이며, 이 시기는 공식적으로 대 프론트엔드 시대이기도 합니다. 즉, 2015년을 연도로 사용하고 있으며, 2015년 이전에는 ES5 라고 불렀고, 2016년 이후 ES6
ES6 기능에 대한 내용은 "ES6 표준 소개"를 참조하세요
Ruan Yifeng 선생님.
let, const, var의 차이점:
또한 객체가 const 로 선언되면 객체의 속성이 변경될 수 있습니다. 왜냐하면 const로 선언된 obj는 객체의 참조 주소만 저장하기 때문입니다.
주소가 변경되지 않은 한
... 사용하여 분해하여 나머지 모든 항목을 나타낼 수 있습니다undefined 되지 않습니다. a, b, c] = [1, 2, 3] console.log(a, b, c) // 1 2 3 [a, , c] = [1, 2, 3]이라고 합시다. console.log(a, , c) // 1 3 [a, b, ...c] = [1, 2, 3, 4, 5]라고 합시다. console.log(a, b, c) // 1 2 [3, 4, 5] [a, b, ...c] = [1]이라고 합시다. console.log(a, b, c) // 1 정의되지 않음 [] [a = 1, b = a] = []라고 놔두세요. const.log(a, b) // 1 1 [a = 1, b = a] = [2]라고 합시다. const.log(a, b) // 2 2
undefined: , 기타 별칭let { a, b } = { a: 1, b: 2 };
console.log(a, b); // 1 2
{ a } = { b: 2 };
console.log(a); // 정의되지 않음
{ a, b = 2 } = { a: 1 };
console.log(a, b); // 1 2
let { a: b = 2 } = { a: 1 };
console.log(a); // 변수 a가 존재하지 않습니다. console.log(b); // 1 length 속성을 가진let [a, b, c, d, e] = "hello"
console.log(a, b, c, d, e) // 안녕하세요
let { 길이 } = "안녕하세요"
console.log(length) // 5 . toString: s } = 123;
console.log(s === Number.prototype.toString) // true
let { toString: s } = true;
console.log(s === Boolean.prototype.toString) // let arr = [[1,2], [3, 4]]
res = arr.map([a, b] => a + b)
console.log(res) // [3, 7]
arr = [1, 정의되지 않음, 2]
let res = arr.map((a = 'test') => a);
console.log(res) // [1, '테스트', 2]
func = ({x, y} = {x: 0, y: 0}) => {
반환[x, y]
}
console.log(func(1, 2)) // [정의되지 않음, 정의되지 않음]
console.log(func()) // [0, 0]
console.log(func({})) // [정의되지 않음, 정의되지 않음]
console.log(func({x: 1})) // [1, 정의되지 않음]
func = ({x=0, y=0}) => {
반환[x, y]
}
console.log(func({x:1,y:2})) // [1, 2]
console.log(func()) // 오류
console.log(func({})) // [0, 0]
console.log(func({x: 1})) // [1, 0] 규칙성은 실제로 이해하기 매우 어려운 지식 포인트입니다. 누군가가 완전히 마스터할 수 있다면 정말 간단하게 만들어 보겠습니다. 여기서 먼저
JS分格와 perl 分格
JS 그리드: RegExp()
let re = new RegExp('a') //문자열에 a가 있는지 확인합니다.
let re = new RegExp('a', 'i'); //첫 번째는 검색 객체이고, 두 번째는 옵션입니다. 펄 스타일: / rule/option, 순서
에 상관없이 뒤에 여러 개가 올 수 있습니다.
/a/; //문자열에 a가 있는지 확인 let re = /a/i;//첫 번째는 검색할 개체이고 두 번째는 옵션입니다.
여기서는 정규식 온라인 테스트(일반 정규식 사용)를 소개합니다. 일반 온라인 테스트
大括号包含//유니코드
console.log("a", "u0061") //aa
console.log("d", "u{4E25}"); // d는 str = 'Dmesy'로 엄격하게 설정합니다.
//코드포인트At()
console.log(str.codePointAt(0)) // 68
//문자열.fromCharCode()
console.log(String.fromCharCode(68)) // D
//문자열.raw()
console.log(String.raw`Hin${1 + 2}`) // 안녕하세요n3
console.log(`안녕n${1 + 2}`) // 안녕 3
str = 'Domesy'로 설정
//시작()
console.log(str.startsWith("D")) // 참
console.log(str.startsWith("s")) // 거짓
//끝()
console.log(str.endsWith("y")) // 참
console.log(str.endsWith("s")) // 거짓
//repeat(): 전달된 매개변수는 자동으로 반올림됩니다. 문자열인 경우 숫자로 변환됩니다. console.log(str.repeat(2)) // DomesyDomesy
console.log(str.repeat(2.9)) // DomesyDmesy
// 순회: for-of
for(str의 코드를 알려주세요){
console.log(code) // D omesy를 한 번 반환합니다.
}
//포함()
console.log(str.includes("s")) // 참
console.log(str.includes("a")) // 거짓
// 트림시작()
const string = "안녕하세요! ";
console.log(string.trimStart()); // "안녕하세요! "
console.log(string.trimLeft()); // "안녕하세요! "
// 트림엔드()
const string = "안녕하세요! ";
console.log(string.trimEnd()); // "안녕하세요!"
console.log(string.trimRight()); // "Hello world!" let str = `Dome
sy`
console.log(str) //자동으로 줄 바꿈 //Dome
// sy const str = {
이름: '리틀두두',
정보: '안녕하세요 여러분'
}
console.log(`${str.info}, I am `${str.name}`) // 안녕하세요 여러분, 저는 Xiao Dudu입니다. . 1, 2, 3, 4, 5]
//배열.of()
arr1 = Array.of(1, 2, 3);
console.log(arr1) // [1, 2, 3]
//copyWithin(): 세 개의 매개변수(target, start = 0, end = this.length)
// target: 대상의 위치 // start: 시작 위치. 생략 가능하며 음수도 가능합니다.
// end: 끝 위치, 생략 가능, 음수일 수 있음, 실제 위치는 end-1입니다.
console.log(arr.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5]
//찾다()
console.log(arr.find((item) => 항목 > 3 )) // 4
//인덱스 찾기()
console.log(arr.findIndex((item) => 항목 > 3 )) // 3
//키()
for (arr.keys()의 인덱스를 보자) {
console.log(index); // 한 번에 0 1 2 3 4를 반환합니다.
}
// 값()
for (arr.values()의 인덱스를 지정) {
console.log(index); // 한 번에 1 2 3 4 5를 반환합니다.
}
// 항목()
for (arr.entries()의 인덱스를 보자) {
console.log(index); // [0, 1] [1, 2] [2, 3] [3, 4] [4, 5]를 한 번 반환합니다.
}
arr = [1, 2, 3, 4, 5]로 설정
// Array.from(): 순회는 문자열, 집합 구조, 노드 노드와 같은 의사 배열일 수 있습니다. let arr1 = Array.from([1, 3, 5], (item) => {
반품 항목 * 2;
})
console.log(arr1) // [2, 6, 10]
// fill(): 세 개의 매개변수(target, start = 0, end = this.length)
// target: 대상의 위치 // start: 시작 위치. 생략 가능하며 음수도 가능합니다.
// end: 끝 위치, 생략 가능, 음수일 수 있음, 실제 위치는 end-1입니다.
console.log(arr.fill(7)) // [7, 7, 7, 7, 7]
console.log(arr.fill(7, 1, 3)) // [1, 7, 7, 4, 5]
arr = [1, 2, 3, 4]로 설정
//포함()
console.log(arr.includes(3)) // 참
console.log([1, 2, NaN].includes(NaN)); // true // 이 함수의 기능은 배열을 확장하는 것입니다. let arr = [3, 4, 5] console.log(...arr) // 3 4 5 arr1 = [1, 2, ...arr]로 설정합니다. console.log(...arr1) // 1 2 3 4 5
for-in//Object.is()로 변경됩니다.
console.log(Object.is('abc', 'abc')) // true
console.log(Object.is([], [])) // 거짓
//트래버스: for-in
let obj = { 이름: 'Domesy', 값: 'React' }
for(obj에 키를 넣음){
console.log(key); // 속성값 name 값을 차례로 반환합니다.
console.log(obj[key]); // 속성값을 순서대로 반환 Domesy React
}
//Object.keys()
console.log(Object.keys(obj)) // ['이름', '값']
//Object.할당()
const 대상 = { a: 1, b: 2 };
const 소스 = { b: 4, c: 5 };
const 결과 = Object.할당(대상, 소스)
console.log(result) // {a: 1, b: 4, c: 5}
console.log(target) // {a: 1, b: 4, c: 5} let a = 1;
b = 2라고 하자;
obj = { a, b } 로 놔두세요
console.log(obj) // { a: 1, b: 2 }
메소드 = {
안녕하세요() {
console.log('안녕하세요')
}
}
console.log(method.hello()) // hello let a = "b"
obj = {라고 놔두세요
[a]: "ㄷ"
}
console.log(obj) // {b : "c"} // 그 기능은 배열을 확장하는 것입니다. let { a , b , ...c } = { a: 1, b: 2, c: 3, d: 4};
console.log(c) // {c: 3, d: 4}
obj1 = {c: 3 }을 하자
obj = { a: 1, b: 2, ...obj1}로 둡니다.
console.log(obj) // { a: 1, b: 2, c: 3} 0b 또는 0B 로 시작, 800 또는 0O 로 시작, 바이너리를 나타냄正数为1 ,负数为-1 ,正零0 ,负零-0 , NaNparseIntparseFloat//Binary console.log(0b101) // 5
console.log(0o151) //105
//Number.isFinite()
console.log(Number.isFinite(7)); // 참
console.log(Number.isFinite(true)); // 거짓
//숫자.isNaN()
console.log(Number.isNaN(NaN)); // 참
console.log(Number.isNaN("true" / 0)) // 참
console.log(Number.isNaN(true)); // 거짓
//Number.isInteger()
console.log(Number.isInteger(17)); // 참
console.log(Number.isInteger(17.58)); // 거짓
//Number.isSafeInteger()
console.log(Number.isSafeInteger(3)); // 참
console.log(Number.isSafeInteger(3.0)); // 참
console.log(Number.isSafeInteger("3")); // 거짓
console.log(Number.isSafeInteger(3.1)) // 거짓
//Math.trunc()
console.log(Math.trunc(13.71)) // 13
console.log(Math.trunc(0)); // 0
console.log(Math.trunc(true)); // 1
console.log(Math.trunc(false)); // 0
//Math.sign()
console.log(Math.sign(3)); // 1
console.log(Math.sign(-3)) // -1
console.log(Math.sign(0)); // 0
console.log(Math.sign(-0)) // -0
console.log(Math.sign(NaN)); // NaN
console.log(Math.sign(true)); // 1
console.log(Math.sign(false)); // 0
//Math.abrt()
console.log(Math.cbrt(8)); // 2
//Number.parseInt()
console.log(Number.parseInt("6.71")) // 6
console.log(parseInt("6.71")) // 6
//Number.parseFloat()
console.log(Number.parseFloat("6.71@")) // 6.71
console.log(parseFloat("6.71@")) // 6.71 //매개변수에는 기본적으로 특정 값이 할당됩니다.
함수 fun(x, y = x){
console.log(x, y)
}
함수 fun1(c, y = x){
console.log(c, x, y)
}
재미(2); //2 2
fun1(1); //1 1 1 function fun(...arg){
console.log(arg) // [1, 2, 3, 4]
}
fun(1, 2, 3, 4) let arrow = (v) => v + 2 console.log(arrow(1)) // 3
화살표 함수와 일반 함수의 차이점
은 ES6의 새로운 데이터 구조로 배열과 비슷합니다. 그러나 멤버의 값은 고유하며 반복되는 값 선언이 없습니다
. : const set = new Set()
속성:
메서드:
구체적으로 반복합니다. 참고:
iterator 자는 삽입 순서대로let list = new Set()입니다.
//추가하다()
목록.추가("1")
목록.추가(1)
console(list) // Set(2) {1, "1"}
//크기
콘솔(list.size) // 2
//삭제()
목록.삭제("1")
console(list) // 설정(1) {1}
//가지다()
list.has(1) // 참
list.has(3) // 거짓
//분명한()
목록.클리어()
console(list) // 설정(0) {}
let arr = [{id: 1}, {id: 2}, {id: 3}]
목록을 보자 = 새로운 세트(arr)
//키()
for (list.keys()의 키를 설정) {
console.log(key); // 다음을 인쇄합니다: {id: 1} {id: 2} {id: 3}
}
//값()
for (list.values()의 키를 설정) {
console.log(key); // 다음을 인쇄합니다: {id: 1} {id: 2} {id: 3}
}
//항목()
for (list.entries()의 데이터를 보자) {
console.log(data); // 다음을 인쇄합니다: [{id: 1},{id: 1}] [{id: 2},{id: 2}] [{id: 3},{id: 3 } ]
}
//각각
list.forEach((항목) => {
console.log(item)//다음을 인쇄하세요: {id: 1} {id: 2} {id: 3}
}); 응용 프로그램:
new Set 객체를 제거할 수 없다는 것입니다. 정의되지 않음, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a']; console.log([...new Set(arr)]) //또는 console.log(Array.from(new Set(arr))) // [1, 'true', true, 15, false, undefine, null, NaN, 'NaN', 0, 'a']는
let a = new Set([1, 2 , 3])
b = new Set([2, 3, 4])로 둡니다.
//Union console.log(new Set([...a, ...b])) // Set(4) {1, 2, 3, 4}
//교차점 console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
//차이 세트 new Set([...a].filter(v => !b.has(v))) // Set(1) {1} let set = new Set([1,2, 3])
console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6} 정의: Set과 구조는 동일하지만 멤버 값은
객체에 대해서만 선언될 수 있습니다: const set = new WeakSet()
메소드:
.
추천 인덱스: ⭐️⭐️
맵은 유사한 개체인 ES6의 새로운 데이터 구조입니다. key는 모든 유형의 값 선언입니다
. const map = new Map()
속성:
메서드:
특별 참고 사항:
let map = new Map()
//세트()
map.set('a', 1)
map.set('b', 2)
console.log(map) // Map(2) {'a' => 1, 'b' => 2}
//얻다
map.get("a") // 1
//크기
console.log(map.size) // 2
//삭제()
map.delete("a") // 참
console.log(map) // 맵(1) {'b' => 2}
//가지다()
map.has('b') // 참
map.has(1) // 거짓
//분명한()
지도.클리어()
console.log(map) // 맵(0) {}
arr = [["a", 1], ["b", 2], ["c", 3]]
지도 = 새 지도(arr)
//키()
for (map.keys()의 키를 설정) {
console.log(key); // 다음을 인쇄합니다: abc
}
//값()
for (map.values()의 값을 알려주세요) {
console.log(value); // 다음을 인쇄합니다: 1 2 3
}
//항목()
for (map.entries()의 데이터를 보자) {
console.log(data); // 다음을 인쇄합니다: ["a", 1] ["b", 2] ["c", 3]
}
//각각
map.forEach((항목) => {
console.log(item)//다음을 인쇄하세요: 1 2 3
}); 정의: 및 Map 구조, 그러나 멤버 값은
객체에 대해서만 선언될 수 있습니다: const set = new WeakMap()
메서드:
Symbol은独一无二선언
: const sy = Stmbol()
매개변수: 문자열 (선택 사항)
방법:
Symbol值만듭니다. 이 매개변수가 존재하는 경우 원래의 Symbol值반환합니다. (검색 후 생성, 글로벌 환경에 등록됨)Symbol值에 대한 설명을 반환합니다. ( Symbol.for() 의 key 반환 가능)Symbol值의 배열을 반환합니다.// 선언 let a = Symbol();
b = 기호()라고 하자;
console.log(a === b); // 거짓
//Symbol.for()
c = Symbol.for("domesy");
d = Symbol.for("domesy");
console.log(c === d); // 참
//Symbol.keyFor()
const e = Symbol.for("1");
console.log(Symbol.keyFor(e)); // 1
//Symbol.description
let 기호 = 기호("es");
console.log(symbol.description);
console.log(Symbol("es") === Symbol("es")) // 거짓
console.log(symbol === 기호); // 참
console.log(symbol.description === "es"); // true 프록시는 특정 작업의 기본 동작을 수정하는 데 사용되며 이는 언어 수준에서 변경하는 것과 동일하므로 일종의 "메타"입니다. 프로그래밍"), 즉 프로그래밍 언어로 프로그래밍하는 것을
이런 식으로 이해할 수 있습니다. 프록시는 대상 개체 앞에 설정된拦截계층입니다. 외부 세계가 액세스하려면 이 차단 계층을 통과해야 합니다. 따라서 외부 세계의 액세스를 필터링하고 다시 작성하는 메커니즘이 제공됩니다.
여기서 Proxy는代理器
선언으로 이해될 수 있습니다. const proxy = new Proxy(target, handler)
차단 방법을 정의합니다.
let obj = {
이름: 'domesy',
시간: '2022-01-27',
값: 1
}
데이터 = 새 프록시(obj, {
//얻다()
get(대상, 키){
return target[key].replace("2022", '2015')
},
//세트()
set(대상, 키, 값) {
if (키 === "이름") {
return (대상[키] = 값);
} 또 다른 {
반환 대상[키];
}
},
// 가지다()
has(대상, 키) {
if (키 === "이름") {
반환 대상[키];
} 또 다른 {
거짓을 반환;
}
},
//속성 삭제()
deleteProperty(대상, 키) {
if (key.indexOf("_") > -1) {
대상 삭제[키];
사실을 반환;
} 또 다른 {
반환 대상[키];
}
},
// 소유키()
ownKeys(대상) {
return Object.keys(target).filter((item) => item != "time");
},
})
console.log(data.time) // 2015-01-27
데이터.시간 = '2020'
data.name = '반응'
console.log(data) //프록시 {이름: 'React', 시간: '2022-01-27', 값: 1}
//가로채기 has()
console.log("name" in data) // true
console.log("time" in data) // 거짓
// deleteProperty() 삭제
data.time 삭제; // 참
// ownKeys() 탐색
console.log(Object.keys(data)); //['이름', '값']
//적용하다()
합계 = (...args) => {
숫자 = 0으로 두십시오.
args.forEach((항목) => {
숫자 += 항목;
});
반환 번호;
};
합계 = 새 프록시(합계, {
적용(대상, ctx, args) {
return target(...args) * 2;
},
});
console.log(sum(1, 2)); // 6
console.log(sum.call(null, 1, 2, 3)) // 12
console.log(sum.apply(null, [1, 2, 3])) // 12
//건설자()
사용자 = 클래스 {
생성자(이름) {
this.name = 이름;
}
}
사용자 = 새 프록시(사용자, {
구성(대상, 인수, newTarget) {
새 대상을 반환합니다(...args);
},
});
console.log(new User("domesy")); // User {name: 'domesy'} Reflect는 Object 의 기본 동작을 유지하고
Reflect의 메서드
로 전환합니다.Proxy의 메소드는 일대일 대응이므로 여기서는 소개하지 않겠습니다.
클래스: 공통 특성을 가진 클래스의 추상화(생성자 구문 설탕)
클래스 Parent {
생성자(이름 = 'es6'){
this.name = 이름
}
}
데이터 = new Parent('domesy')로 설정
console.log(data) // Parent { name: 'domesy'} 클래스 Parent {
생성자(이름 = 'es6'){
this.name = 이름
}
}
// 일반 상속 클래스 Child는 Parent {}를 확장합니다.
console.log(new Child()) // 자식 { 이름: 'es6'}
// 매개변수 전달 class Child는 Parent {를 확장합니다.
constructor(이름 = "자식") {
슈퍼(이름);
this.type = "자식";
}
}
console.log(new Child('domesy')) // Child { name: 'domesy', type: 'child'} 클래스가아닌 속성
생성자(이름 = 'es6'){
this.name = 이름
}
// 게터
getName()을 얻습니다.
'sy' + this.name을 반환합니다.
}
// 세터
세트 이름(값){
this.name = 값
}
}
데이터 = 새 부모()로 설정
console.log(data.getName) // sys6
data.setName = 'domesy'
console.log(data.getName) //domsy class Parent {
정적 getName = (이름) => {
'안녕하세요! ${이름}`
}
}
console.log(Parent.getName('domesy')) // 안녕하세요! Domesy 클래스 상위 {}
Parent.type = "테스트";
console.log(Parent.type); //test Promise "콜백 지옥" 문제를 해결하는 것입니다. 이는 비동기 작업 처리를 매우 우아하게 만들 수 있습니다.
Promise 여러 동시 요청을 지원하고 동시 요청에서 데이터를 얻을 수 있습니다. Promise Promise 는 비동기식 정의라고 할 수 없습니다 .
비동기 작업 결과를 포함하는 개체 상태
:
참고:
//일반 정의 let ajax = ( 콜백) => {
console.log('©')
setTimeout(() => {
콜백 && callback.call();
}, 1000)
}
아약스(() => {
console.log('시간 초과')
})
// 먼저 실행을 시작하기 위해 인쇄되고, 1초 후에 타임아웃이 인쇄됩니다.
//약속하다
아약스 = () => {
console.log("실행 시작");
return new Promise((해결, 거부) => {
setTimeout(() => {
해결하다();
}, 1000);
});
};
아약스().then(() => {
console.log("시간 초과");
});
// 먼저 실행을 시작하기 위해 인쇄되고, 1초 후에 타임아웃이 인쇄됩니다.
//그 다음에()
아약스 = () => {
console.log("실행 시작");
return new Promise((해결, 거부) => {
setTimeout(() => {
해결하다();
}, 1000);
});
};
아약스()
.then(() => {
return new Promise((해결, 거부) => {
setTimeout(() => {
해결하다();
}, 2000);
});
})
.then(() => {
console.log("시간 초과")
})
// 먼저 실행을 시작하도록 입력되고, 3초(1+2) 후에 타임아웃이 입력됩니다.
// 잡다()
ajax = (숫자) => {
console.log("실행 시작");
return new Promise((해결, 거부) => {
if (숫자 > 5) {
해결하다();
} 또 다른 {
throw new Error("오류가 발생했습니다.");
}
});
};
아약스(6)
.then(함수 () {
console.log("timeout"); // 먼저 실행을 시작한 다음 1초 후에 시간 초과가 인쇄됩니다.
})
.catch(함수 (err) {
console.log("catch", 오류);
});
아약스(3)
.then(함수 () {
console.log("시간 초과");
})
.catch(함수 (err) {
console.log("catch"); // 먼저 실행을 시작한 다음 1초 후에 catch합니다.
}); 이미지가로드 된 후 페이지에 추가 된하위 프로모션 결과입니다.
새로운 약속을 반환합니다 (결의, 거부) => {
img = document.createElement ( "IMG");
img.src = src;
img.onload = function () {
해결 (IMG);
};
img.onerror = function (err) {
거부(err);
};
});
}
const showimgs = (imgs) => {
imgs.foreach ((img) => {
document.body.appendChild (IMG);
})
}
약속 .ALL ([[
loadimg ( "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhhy/zhidao/pic/item/71cf3bc79f3df8dccc6551159cd11728b461028889.jpg"),
loadimg ( "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhhy/zhidao/pic/item/71cf3bc79f3df8dccc6551159cd11728b461028889.jpg"),
loadimg ( "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhhy/zhidao/pic/item/71cf3bc79f3df8dccc6551159cd11728b461028889.jpg"),
] .
그런 다음 (showimgs)
{
새로운 약속을 반환합니다 (결의, 거부) => {
img = document.createElement ( "IMG");
img.src = src;
img.onload = function () {
해결 (IMG);
};
img.onerror = function (err) {
거부(err);
};
});
}
const showimgs = (imgs) => {
p = document.createelement ( "p");
P.AppendChild (IMG);
document.body.appendchild (p);
}
약속.
loadimg ( "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhhy/zhidao/pic/item/71cf3bc79f3df8dccc6551159cd11728b461028889.jpg"),
loadimg ( "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhhy/zhidao/pic/item/71cf3bc79f3df8dccc6551159cd11728b461028889.jpg"),
loadimg ( "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhhy/zhidao/pic/item/71cf3bc79f3df8dccc6551159cd11728b461028889.jpg"),
]) )
하는
비동기솔루션 입니다
done valuevalue done .恢复데 사용됩니다..
"A"를 산출합니다.
"B"수율;
"C"반환
}
generator = data ();
console.log (generator.next ()) // {value : 'a', done : false}
console.log (generator.next ()) // {value : 'b', done : false}
console.log (generator.next ()) // {value : 'c', done : true}
console.log (generator.next ()) // {value : undefined, done : true} iterator는 다양한 데이터 구조에 대한 통합 액세스 메커니즘을 제공하는 인터페이스입니다. 데이터 구조가 반복자 인터페이스를 배포하는 한 트래버스 작동을 완료 할 수 있습니다 (즉, 데이터 구조의 모든 구성원을 순서대로 처리).
반복자의 기능 :
.
数组,某些类似数组的对象, Set 및 Map结构있습니다. Map结构.// 기본적으로 let arr = [ "hello", "world"];
map = arr [symbol.iterator] ();
console.log (map.next ()); // {value : 'done : false}
console.log (map.next ()); // {value : 'done : false}
console.log (map.next ()); // {value : done : true}
// 루프의 경우 arr = [ "hello", "world"];
(ARR의 가치) {
Console.log (value);
}
// 객체 처리 let obj = {
시작 : [1, 5, 2],
끝 : [7, 9, 6],
[Symbol.iterator](){
인덱스 = 0으로 놔두세요;
arr = this.start.concat (this.end)
반품 {
다음(){
if (index <arr.length) {
반품 {
값 : ARR [index ++],
완료 : 거짓
}
}또 다른{
반품 {
값 : ARR [index ++],
완료: 사실
}
}
}
}
}
}
for (obj의 키를하자) {
Console.log (키);
} @ 기호를 사용하여 클래스의 동작을 확장하고 수정하면core-decorators 3 자 라이브러리를 소개해야합니다.
target.name = "domesy"
}
@이름
수업 테스트 {}
Console.log (Test.Name) // Domesy 초기에는 즉각적인 실행 기능을 사용하여 모듈화 문제가 발생
합니다 모듈화 사용 :
솔루션 향상 :
export default Indexexport { name as newName }import Index from './Index'import * as Index from './Index'import { name, value, id } from './Index'import { name as newName } from './Index'import './Index'import Index, { name, value, id } from './Index'export命令및 import命令한 줄로 결합되어 있으며,이 변수는 실제로 외부 전달과 동일합니다. 인터페이스
. // 포함 () es6 console.log (arr.includes (3)) // true console.log ([1, 2, nan]. includes (nan)); // 포함 () es7 console.log (arr.includes (1, 0)) // true Console.log (Arr.includes (1, 1)) // False
// 전원 운영자 ES7을
Math.pow() **Console.log (Math.pow (2, 3)) // 8 Console.log (2 ** 8) // 256
str = 'domesy' // padstart () : 여기서 공백으로 채워 집니까? "0")); // 01 Console.log ( "8-27".PADSTART (10, "YYYY-0M-0D");// padend
) console.log와 동일한 사용법 ( "1".padend (2, "0");
. //object.values () Console.log (Object.Values (OBJ)) // [ 'React', 'Rect']] //object.entries () console.log (Object.entries (obj)) // [[ 'name', 'value'], [ 'react', 'react']]
기능을 동기화 함수 (Generator 's Swnats Sugar)로 변경합니다 .
const func = async () => {
약속 = 새로운 약속을하자 ((결의, 거부) => {
setTimeout(() => {
Resolve ( "Execute");
}, 1000);
});
Console.log (Await Promise);
Console.log (Await 0);
Console.log (Await Promise.Resolve (1));
console.log(2);
Return Promise.resolve (3);
}
func (). 그런 다음 (val => {
Console.log (Val); // 순서대로 실행 : 0 1 2 3
}); 특별한 특수
Promise 객체를 반환하므로 then 명령을 사용할forEach()async/await for-of Promise.all()try catch reject두 가지 상황이 있습니다. 약속 대상이 아닌
경우, Assync는 Async 외부에서 동기화 코드를 실행합니다. 이 비 전문적 인 것은 표현의 결과입니다.
Promise Object를 기다리는 경우 Await은 Async 뒤의 코드를 일시 중지하고 먼저 Async 외부의 동기화 코드를 실행하고 Promise Object가 충족 될 때까지 대기 한 다음 Await 표현식의 작동 결과로 Resolve 매개 변수를 사용합니다.
진정한
.
undefined 것이 반환되고 원래 문자열은 raw 에서 얻을 수 있습니다.// 문자열 제한 완화 const test = (value) => {
Console.log (값)
}
'domesy` // ['domesy ', raw : [ "domesy"] promy.finally ()
하십시오. func = time => {
새로운 약속을 반환합니다 ((res, Rej) => {
setTimeout(() => {
if (time <500) {
RES (시간)
}또 다른{
리 (시간)
}
}, 시간)
})
}
재미 (300)
. ((val) => console.log ( 'res', val))
.catch ((erro) => console.log ( 'Rej', erro))))
.finally (() => console.log ( '완료')))
// 실행 결과 : RES 300 완성 된 func (700)
. ((val) => console.log ( 'res', val))
.catch ((erro) => console.log ( 'Rej', erro))))
.finally (() => console.log ( '완료')))
// 실행 결과 : Rej 700 조정 : 비동기 반복기, 루프는 각 Promise对象다음 단계로 들어가기 전에 resolved状态가되기를 기다립니다
.
새로운 약속을 반환합니다 (res => {
setTimeout(() => {
RES (초)
}, 초)
})
}
비동기 기능 test () {
ARR = [GetTime (2000), GetTime (500), GetTime (1000)]
기다리고 있습니다 (x의 x) {
Console.log (x);
}
}
test () // 실행 2000 500 1000 //json.stringify ( ) 업그레이드 console.log (json.stringify ( " ud83d ude0e");console.log
u {d800}")); Infinity 입력 할 때 하단으로 자동으로 해결))let arr = [1, 2, 3, 4] // flatMap () console.log (arr.map ((x) => [x * 2])); console.log (arr.flatmap ((x) => [x * 2])); Console.log (arr.flatmap ((x) => [[x * 2]])); const arr1 = [0, 1, 2, [3, 4]; const arr2 = [0, 1, 2, [[[3, 4]]]; Console.Log (ARR1.FLAT ()); // [0, 1, 2, 3, 4] Console.log (arr2.flat (2)); console.log (arr2.flat (Infinity)); // [0, 1, 2, 3, 4]
Object.entries().
[ "A", 1],
[ "B", 2],
]);
OBJ = Object.Fromentries (MAP)를하자;
console.log (obj); // {a : 1, b : 2} .
[ "A", 1],
[ "B", 2],
]
OBJ = Object.Fromentries (ARR);
console.log (obj); // {a : 1, b : 2} = {
A : 1,
B : 2,
ㄷ: 3
}
res = object.fromentries (
Object.entries (obj) .filter (([key, val]) => value! == 3)
)
console.log (res) // {a : 1, b : 2} // tostring ()
기능 test () {
Conspoys.log ( 'domesy')
}
console.log (test.toString ());
// 함수 test () {
//consople.log('Domesy ')
//} es10의 , 시도 캐치는 캐치 매개 변수를 무시할 수 있습니다
.
노력하다 {
return JSON.PARSE (이름)
} 잡다 {
거짓을 반환하다
}
}
Console.log (func (1)) // 1
console.log (func ({a : '1'})) // false 의
. Console.log (2 ** 53) // 9007199254740992 Console.log (번호 .max_safe_integer) // 9007199254740991 // bigint const bigint = 9007199254740993N Console.log (bigint) // 9007199254740993N console.log (bigint 타입) // bigint Console.log (1n == 1) // true console.log (1n === 1) // false const bigintnum = bigint (9007199254740993N) Console.log (bigintnum) // 9007199254740993N
null number symbol srting object undefined boolean
Function RegExp object Date Array
8. srting , number , boolean , object , null , 널, undefined , symbol , BigInt
Promise.AllSettled () :
Promise.all()Promise.allSettled ([[[)
약속. reject ({
코드 : 500,
MSG : "서비스 예외",
}),
Promise.resolve ({
코드 : 200,
데이터 : [ "1", "2", "3"],
}),
Promise.resolve ({
코드 : 200,
데이터 : [ "4", "5", "6"],
}),
]). 그런 다음 ((res) => {
console.log (res) // [{code : {code : 500, msg : 'service exception'}, 상태 : "거부"},
// {이유 : {코드 : 200, 데이터 : [ "1", "2", "3"]}, 상태 : "거부"},
// {이유 : {코드 : 200, 데이터 : [ "4", "5", "6"}, 상태 : "거부"}]
const data = res.filter ((item) => item.status === "충족");
console.log (data); // [{code : 200, data : [ "1", "2", "3"}, "거절"},
// {이유 : {코드 : 200, 데이터 : [ "4", "5", "6"}, 상태 : "거부"}]
}) import() 되지 않음 require require() 로드// 그런 다음 ()
modulepage = "index.js"를하자;
import (modulepage). ((module) => {
module.init ();
});
// 비동기가 기다리고 있습니다
(비동기 () => {
const modulepage = 'index.js'
const module = import (modulepage);
Console.log (모듈)
}) . //마디 Console.log (GlobalThis) // 글로벌
. // es11 전에 a = user && user.name을 허용합니다 !
""||. "기본값"; ""? ""기본값 "; const b = 0; const a = b ||. Console.log (a); const b = null // 정의되지 않았습니다 const a = b ?? 513; console.log
(
let str = "hi!, 이것은 ES6 ~ es12의 새로운 기능입니다. 현재 ES12" console.log (str.replace ( "es", "sy"); , 이것은 Sy6 ~ es12, 현재 ES12의 새로운 기능입니다. console.log (str.replace (/es/g, "sy"); , 이것은 Sy6 ~ Sy12의 새로운 기능이며 현재 Sy12입니다. console.log (str.replaceall ( "es", "sy"); , 이것은 Sy6 ~ Sy12의 새로운 기능이며 현재 Sy12입니다. console.log (str.replaceall (/es/g, "sy");,
이것은
sy6 ~ sy12의 새로운 기능
약속.
약속. reject ( "셋째"),
Promise.resolve ( "Second"),
Promise.resolve ( "첫 번째"),
])
. ((res) => console.log (res)) // 두 번째
.catch ((err) => console.error (err));
약속.
약속. reject ( "오류 1"),
약속. reject ( "오류 2"),
약속. Reject ( "오류 3"),
])
. ((res) => console.log (res))
.catch ((err) => console.error (err));
// AggregateError : 모든 약속이 거부되었습니다
약속.
Proming.resolve ( "Third"),
Promise.resolve ( "Second"),
Promise.resolve ( "첫 번째"),
])
. ((res) => console.log (res)) // 세 번째
.catch (( err));
let excref = new 약점 ({이름 : 'domesy', 연도 : 24})
weachref.deref () // {이름 : 'domesy', 연도 : 24}
weachref.deref .
Num2 = 10을하자;
num1 && = num2;
Console.log (num1);
// num1과 동일합니다. (num1 = num2);
if (num1) {
num1 = num2;
} Num1을하자;
Num2 = 10을하자;
num1 || = num2;
Console.log (num1);
// num1 ||에 해당합니다 (num1 = num2).
if (! num1) {
num1 = num2;
} ?? Num2 = 10을하자; NUM3 = NULL을하자; // 정의되지 않았다 num1 ?? = num2; Console.log (num1); num1 = false; num1 ?? = num2; Console.log (num1); num3 ?? = 123; Console.log (num3); // num1에 해당합니다. (num1 = num2
)
Num2 = 100_000을하자; Console.log (num1); Console.log (num2); const num3 = 10.12_34_56 Console.log (num3);