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

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

이 튜토리얼의 운영 환경: 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 = ['a', 'b', ...arr1, 'c'];
console.log(arr2);

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

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, 'a']);
// 得到Set元素个数：
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值，返回操作是否成功
s.delete('a');
// 查看集合是否包含某个值
s.has('a');
// 添加一项，返回集合本身的引用
s.add('b');

Map 개체:

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

Map 기능:

• Map 객체는 키-값 쌍을 저장하고 키의 원래 삽입 순서를 기억할 수 있습니다.

• 모든 값(객체 또는 기본 요소)을 키 또는 값으로 사용할 수 있습니다.

let arr = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];
let m = new Map(arr);
// m: {'a' => 1, 'b' => 2, 'c' => 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);

  🎜🎜 매개변수 없음 기본값 값 🎜🎜🎜

  🎜🎜새 배열 방법: 🎜🎜🎜

  🎜생성자 방법: 🎜

  🎜 🎜클래스 배열을 실제 배열로 변환: Array.from(arrLike [, mapFunc, mapThis]);🎜🎜매개변수: 🎜
  🎜arrLike:< /code>Array- like 🎜🎜<code>mapFunc:유사 배열의 각 항목에 대한 연산 함수 🎜🎜mapThis:mapFunc의 this <를 대체합니다. /code>🎜🎜🎜를 가리킵니다. 또 다른 방법: <code>let arr = [...arrLike];🎜🎜🎜🎜인수 목록을 배열로 변환: 🎜🎜Array.of( . ..항목);🎜

  • 检测一个对象是否是一个数组：

    Array.isArray(obj);

  对象的方法：

  • arr.find(callback [, thisArg])：查找数组中满足条件的第一个元素的值

    let arr = [1, 2, 3, 4];
    let val = arr.find((item, index) => item >= 3);
    // val: 3
    let val = arr.find((item, index) => item >= 5);
    // val: undefined

  • arr.findIndex(callback [, thisArg])：查找数组中满足条件的第一个元素的索引

  • 数组扁平化：

    • arr.flat([depth])

      参数：depth：指定要提取嵌套数组的结构深度，默认为1，当depth = infinity时，无论数组多少层，都提取为一维数组。

    • arr.flatMap(callback[, thisArg])

      参数：callback：对原数组的每个元素进行操作，返回新数组的元素；

      该函数值支持深度为1的扁平化

  • 数组元素填充：arr.fill(value[, start[, end]]);

    用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引；不会改变数组长度

    参数：

    • value：用来填充数组元素的值；
    • start：起始索引，默认值为0；
    • end：终止索引，默认值为 arr.length ；

  • arr.includes(valueToFind[, fromIndex])：判断数组中是否包含一个指定的值

    参数：

    • valueToFind：需要查找的值
    • fromIndex：从 fromIndex 处开始向后查找

  字符串新增方法：

  • str.startsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串开头

    参数：

    • searchString：要搜索的字符串
    • position：在 str 中搜索 searchString 的开始位置，默认为0，也就是真正的字符串开头处

  • str.endsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串结束

    参数：

    • searchString：要搜索的字符串
    • position：在str中反向搜索的开始位置，默认为 str.length

  • str.repeat(times)：返回重复str字符串times次的字符串

  模版字符串：

  反引号：``，可以换行

  插值表达式：${}

  对象新增方法：

  • 简洁表示法：

    let a = 1, b = 2;
    // 原来的表示方法：
    let obj = {
      a: a,
      b: b,
      c: function() {}
    };
    // 简洁表示法：
    let obj = {
      a,
      b,
      c() {}
    };

  • 属性名表达式：

    let name = "小明";
    let obj = {
      [name]: 111
    };
    console.log(obj);
    // 输出：
    // obj: {'小明': 111}
    
    // 等价于：
    let obj = {};
    obj[name] = 111;

  • Object.assign(obj1, obj2, ...)：将第二个参数即之后的参数对象合并到第一个参数对象中

    let obj1 = {a: 1, b: 2};
    let obj2 = {c: 3, d: 4};
    Object.assign(obj2, obj1);
    // 等价于
    obj2 = {
      ...obj1,
      ...obj2
    }
    // 等价于
    obj2 = Object.assign({}, obj1, obj2);

  • Object.is(value1, value2)：判断两个值是否相等（强类型）

    和===的区别：

    +0 === -0;	// true
    Object.is(+0, -0);	// false
    
    NaN === NaN; // false
    Object.is(NaN, NaN); // true

    babel编译器：

    将es6语法编译为es5语法

    【相关推荐：javascript视频教程、编程视频】

    위 내용은 es5와 비교하여 es6의 새로운 점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!