es5와 비교하여 es6의 새로운 점은 무엇입니까?-프런트엔드 Q&A-php.cn

새로운 콘텐츠: 1. Let 및 const 키워드는 변수를 선언하고, 블록 수준 범위를 지원하고, 임시 데드존을 갖는 데 사용됩니다. 2. 구조 분해 할당은 배열 또는 객체에 대해 패턴 일치를 수행한 다음 그 안의 변수를 일치시키는 것입니다. 할당의 의미; 3. 집합과 배열의 요소를 단일 요소로 확장하는 데 사용할 수 있는 확장 연산자. 4. 배열과 유사하지만 멤버의 값이 고유한 새로운 데이터 구조. , 중복된 값이 없습니다. 5. 생성자 메서드 Array.from(), Array.of().

es5와 비교하여 es6의 새로운 점은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES5보다 ES6의 새로운 기능

let, const:

let 및 const는 블록 수준 범위를 지원하고 임시 데드존을 가집니다(먼저 선언한 다음 사용해야 하며 변수 승격은 지원되지 않습니다). ;

const는 상수이며 선언 시 값을 할당해야 합니다. 할당이 기본 유형인 경우 해당 값을 변경할 수 없으며 참조 유형에 대한 작업은 변경할 수 없습니다. 배열 푸시, 개체 속성 추가, 삭제 및 수정 등을 수행할 수 있습니다.

구조 분해 할당:

es6을 사용하면 특정 패턴에 따라 배열이나 개체에서 값을 추출하고 값을 할당할 수 있습니다. 변수에 할당하는 것을 구조 분해 할당이라고 합니다.

구조 분해 할당은 코드 작성 시 간단하고 이해하기 쉬우며 의미가 명확하므로 복잡한 객체의 데이터 필드를 편리하게 얻을 수 있습니다.

객체 분해 할당:

let obj = {
  a: 1,
  b: 2
};
let {a, b, c} = obj; // 大括号中的变量名必须和obj的属性名一致
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: undefined

로그인 후 복사

배열 분해 할당: (문자열과 동일)

let arr = ['a', 'b', 'c'];
let [e, f] = arr;	// 中括号中的变量按数组中元素的顺序被赋值
console.log(e, f);

// 输出：
// e: 'a'
// f: 'b'

// 快速交换两个变量值
let a = 1, b = 2;
[a, b] = [b, a];

로그인 후 복사

확장 연산자:

세 개의 점(...)으로 표시, JavaScript 확장 연산자는 다음과 같습니다. ES6에서 소개되었습니다. 컬렉션 및 배열의 요소를 단일 개별 요소로 확장하는 데 사용할 수 있습니다.

확산 연산자를 사용하여 배열과 객체를 생성 및 복제하고, 배열을 함수 인수로 전달하고, 배열에서 중복 항목을 제거하는 등의 작업을 할 수 있습니다.

확산 연산자는 반복 가능한 객체에만 사용할 수 있습니다. 분리 없이 반복 가능한 객체 앞에 사용해야 합니다. 예:

console.log(...arr);

로그인 후 복사

Array:

let arr1 = [1, 2, 3, 4];
let arr2 = [&#39;a&#39;, &#39;b&#39;, ...arr1, &#39;c&#39;];
console.log(arr2);

// 输出：
// [&#39;a&#39;, &#39;b&#39;, 1, 2, 3, 4, &#39;c&#39;]

로그인 후 복사

Object:

let obj1 = {
  a: 1,
  b: 2
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4
};
console.log(obj2);

// 输出：
// {a: 1, b: 2, c: 3, d: 4}

로그인 후 복사

나머지 매개변수 처리:

Array:

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;	// 将arr后面所有的剩余参数放入c中
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: [3, 4, 5]

로그인 후 복사

Object:

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
let {a, b, ...c} = obj;
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: {c: 3, d: 4}

// 对象的复制（不是传地址）
let obj2 = {...obj};

로그인 후 복사

Set 개체:

세트가 제공됩니다 by ES6 새로운 데이터 구조로 배열과 유사하지만 멤버의 값이 고유하고 중복된 값이 없습니다.

Set 자체는 Set 데이터 구조를 생성하는 데 사용되는 생성자입니다.
Set 개체를 사용하면 기본 값이든 개체 참조이든 관계없이 모든 유형의 고유한 값을 저장할 수 있습니다.
세트의 요소는 한 번만 나타납니다. 즉, 세트의 요소는 고유합니다.
또한 NaN과 undefine은 모두 Set에 저장될 수 있으며 NaN은 동일한 값으로 처리됩니다(NaN !== NaN임에도 불구하고).
Set 함수는 초기화를 위한 매개변수로 배열(또는 반복 가능한 인터페이스가 있는 다른 데이터 구조)을 허용할 수 있습니다.

배열 중복 제거:

let arr = [2, 1, 2, 1, 3, 4, 4, 5];
let s = new Set(arr);
arr = [...s];
// arr: [2, 1, 3, 4, 5]

로그인 후 복사

Set 메서드:

let s = new Set([1, 1, 2, 3, &#39;a&#39;]);
// 得到Set元素个数：
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值，返回操作是否成功
s.delete(&#39;a&#39;);
// 查看集合是否包含某个值
s.has(&#39;a&#39;);
// 添加一项，返回集合本身的引用
s.add(&#39;b&#39;);

로그인 후 복사

Map 개체:

ES6은 Map 데이터 구조를 제공합니다. 객체와 유사하며 키-값 쌍의 집합이기도 하지만 "키"의 범위가 문자열에만 국한되지 않고 다양한 유형의 값(객체 포함)을 키로 사용할 수 있습니다. 즉, 개체 구조는 "문자열-값" 대응을 제공하고, 맵 구조는 "값-값" 대응을 제공하며, 이는 해시 구조의 보다 완전한 구현입니다. "키-값" 데이터 구조가 필요한 경우 Object보다 Map이 더 적합합니다.

Map 기능:

Map 객체는 키-값 쌍을 저장하고 키의 원래 삽입 순서를 기억할 수 있습니다.
모든 값(객체 또는 기본 요소)을 키 또는 값으로 사용할 수 있습니다.

let arr = [
  [&#39;a&#39;, 1],
  [&#39;b&#39;, 2],
  [&#39;c&#39;, 3]
];
let m = new Map(arr);
// m: {&#39;a&#39; => 1, &#39;b&#39; => 2, &#39;c&#39; => 3}

로그인 후 복사

Map 메서드:

// 清空Map
m.clear();
// 删除某一项，返回操作是否成功
m.delete(key);
// 获取某一项的值，返回对应的val
m.get(key);
// 是否包含某一项
m.has(key);
// 添加一项，返回Map本身的引用
m.set(key, val);

로그인 후 복사

함수 새 콘텐츠:

Arrow 함수: this 및 argumentsthis和arguments
参数默认值

数组新增方法：

构造函数的方法：

把一个类数组转换成真正的数组：Array.from(arrLike [, mapFunc, mapThis]);
参数：
- arrLike:类数组
- mapFunc:对类数组每一项的操作函数
- mapThis:替换mapFunc的this指向
另一种方法：let arr = [...arrLike];
将参数列表转换为数组：
Array.of(...items);
🎜🎜 매개변수 없음 기본값 값 🎜🎜🎜
🎜🎜새 배열 방법: 🎜🎜🎜
🎜생성자 방법: 🎜