es6에서는 어떤 기능이 향상되었나요?

ES6 향상된 기능: 1. 구조 분해 할당을 통해 배열이나 개체에서 값을 추출하고 특정 패턴에 따라 변수에 할당할 수 있습니다. 2. 문자열에 순회 인터페이스가 추가되어 "for...of 루프"로 문자열을 순회할 수 있습니다. 3. 템플릿 문자열은 문자열의 향상된 버전입니다. 4. 레이블 템플릿은 함수 호출의 특수한 형태입니다. 5. 함수의 매개변수에 대한 기본값을 설정합니다. 6. 화살표 함수의 this는 상위 범위를 가리킵니다. 7. 변수 및 함수를 객체의 속성 및 메서드로 중괄호 안에 직접 작성할 수 있습니다. . 튜토리얼 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터

ES6은 원래 구문을 향상합니다

1, 구조 분해 할당

es6은 값 추출을 허용합니다. ​​배열이나 객체에서 변수에 값을 할당하는 것을 구조 분해 할당이라고 합니다. 코드 작성에서 구조 분해 할당은 간단하고 이해하기 쉬우며, 복잡한 객체에서는 의미가 명확하고 쉽게 데이터 필드를 얻을 수 있습니다. Destructuring. , Destructuring 소스는 Destructuring 할당 표현식의 오른쪽에 있고 Destructuring 대상은 Destructuring 표현식의 왼쪽에 있습니다.

(1), 배열의 Destructuring 할당

ES6에서는 배열에서 특정 패턴을 따르고 객체에서 값을 추출하고 변수에 값을 할당하는 것을 구조 분해라고 합니다.

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

본질적으로 이러한 작성 방법은 패턴이 일치하는 한입니다. 등호의 양쪽이 동일하면 왼쪽의 변수에 해당 값이 할당됩니다. 구조 분해에 실패하면 값이 정의되지 않은 경우, 즉 왼쪽의 패턴이 됩니다. 등호 쪽은 등호 오른쪽에 있는 배열의 일부와만 일치합니다. Set.구조의 경우 배열의 구조 분해 할당을 사용할 수도 있습니다. 기본값

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

ES6은 위치에 값이 있는지 여부를 결정하기 위해 내부적으로 엄격한 동등 연산자(===)를 사용합니다. 따라서 기본값은 배열 구성원이 정의되지 않은 것과 엄격하게 동일한 경우에만 적용됩니다. 배열 멤버가 null인 경우 null은 정의되지 않음과 엄밀히 동일하지 않기 때문에 기본값이 적용되지 않습니다.

let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [null];x // null

위 코드에서는 x가 값을 얻을 수 있으므로 함수 f는 위 코드는 실제로 다음 코드

• (2), 객체 구조화 및 할당

과 동일합니다. 객체 구조화와 배열 사이에는 중요한 차이점이 있습니다. 순서대로 정렬되며 변수의 값은 위치에 따라 결정되지만 개체의 속성에는 순서가 없으며 올바른 값을 얻으려면 변수의 이름이 속성과 동일해야 합니다. 기존 객체의 메소드를 특정 변수에 할당하면 매우 편리합니다.

function f() {
  console.log('aaa');
}
let [x = f()] = [1];

위 코드의 예제 1에서는 Math 객체의 로그, 사인, 코사인 메소드를 해당 변수에 할당합니다. 예제 2에서는 console.log를 로그 변수에 할당합니다.

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

위 코드에서 foo는 일치하는 패턴이고, baz는 패턴 foo가 아닌 변수 baz입니다. . 객체 구조 분해 및 할당의 내부 메커니즘은 먼저 동일한 이름을 가진 속성을 찾은 다음 이를 해당 변수에 할당하는 것입니다. 실제로 할당된 것은 전자가 아니라 후자입니다. 배열과 마찬가지로 구조 분해도 중첩 구조의 객체에 사용할 수 있습니다.

// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log('hello') // hello

기본값

객체 구조 분해를 통해 기본값을 지정할 수도 있습니다.

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

(3), 문자열 구조 분해 및 할당

배열과 유사한 객체에는 길이 속성이 있으므로 이 속성도 구조 분해 및 할당할 수 있습니다.

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

(4) 숫자 및 부울 값의 구조 분해 할당 ​​

구조 분해 할당 중에 등호 오른쪽이 숫자 값이나 부울 값인 경우 먼저 객체로 변환됩니다. .

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

(5), 함수 매개변수의 구조 분해 할당

let {length : len} = 'hello';
len // 5

(6), Purpose1) 변수 값 교환

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

2) 변수에서 여러 값 반환 function

함수만 하나의 값을 반환할 수 있습니다. 여러 값을 반환하려면 배열이나 객체에 넣어서 반환하면 됩니다. 구조 분해 할당을 사용하면 이러한 값을 검색하는 것이 매우 편리합니다.

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

3) 함수 매개변수 정의 구조 분해 할당은 매개변수 세트와 변수 이름을 쉽게 일치시킬 수 있습니다.

let x = 1;
let y = 2;
[x, y] = [y, x];

4) JSON 데이터 추출 구조 분해 할당은 JSON 개체에서 데이터를 추출하는 데 특히 유용합니다.

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

5) 맵 구조 순회 Iterator 인터페이스로 배포된 모든 객체는 for...of 루프를 사용하여 순회할 수 있습니다. Map 구조는 기본적으로 Iterator 인터페이스를 지원하며 변수의 구조 분해 및 할당을 통해 키 이름과 키 값을 얻는 것이 매우 편리합니다.

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

키 이름이나 키 값만 얻고 싶다면 다음과 같이 쓰면 됩니다.

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

2, 문자열 향상

ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

"\uD842\uDFB7"
// "?"
"\u20BB7"
// " 7"

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

（1）字符串的遍历器接口

ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

（2）模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中还能调用函数。如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

字符串的新增方法

1,String.fromCodePoint()
ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。

2,String.raw()
ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

3, 实例方法：includes(), startsWith(), endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

3，函数的增强

（1）标签模板

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

let a = 5;
let b = 10;
function tag(s, v1, v2) {
  console.log(s[0]);
  console.log(s[1]);
  console.log(s[2]);
  console.log(v1);
  console.log(v2);
  return "OK";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"

（2）函数参数增强：参数默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

（3）箭头函数的简化

箭头函数的this指向上级作用域

    const name = 'tony'
    const person = {
      name: 'tom',
      say: () => console.log(this.name),
      sayHello: function () {
        console.log(this.name)
      },
      sayHi: function () {
        setTimeout(function () {
          console.log(this.name)
        }, 500)
      },
      asyncSay: function () {
        setTimeout(()=>console.log(this.name), 500)
      }
    }
    person.say()  //tony
    person.sayHello() //tom
    person.sayHi() //tony
    person.asyncSay()  //tom

4.对象的扩展

属性的简洁表示法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。除了属性简写，方法也可以简写。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};
const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

1、如果key与value变量名相同，省略:value
2、省略函数：function
3、计算属性：[Math.random()]

   const bar = 'bar'
    const obj = {
      bar,
      fn () {
        console.log('1111')
      },
      [Math.random()]: '123'
    }
    console.log(obj)

【推荐学习：javascript视频教程】

위 내용은 es6에서는 어떤 기능이 향상되었나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!