es6 객체에 추가된 새로운 속성은 무엇입니까?

es6 객체에 추가된 새로운 속성은 "name"입니다. name 속성은 객체의 메서드(함수) 이름을 가져올 수 있습니다. 예를 들어 "getName() {console.log(this.name);}" 함수는 name을 직접 호출할 때 함수 이름을 반환합니다. 리터럴 객체의 메소드도 function 이므로 name 속성도 있습니다. 객체의 메소드가 Symbol 값인 경우 name 속성은 괄호 안에 Symbol의 설명 내용을 반환합니다.

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

객체는 JavaScript에서 매우 중요한 데이터 구조입니다. ES6에서는 객체를 크게 확장하고 사용하기 쉽게 만듭니다. es6 객체에 추가된 새 속성은 "name"입니다.

객체 메서드의 이름 속성

객체에서 메서드 이름을 얻는 방법에 대해 생각해 본 적이 있나요? ES6에서는 함수의 name 속성을 추가합니다. 함수가 name을 직접 호출하면 함수 이름이 반환됩니다. 리터럴 객체의 메서드도 함수이므로 name 속성도 갖습니다. 다음 예:

var person = {
  name: "Jack",
  getName() {
    console.log(this.name);
  },
};

person.getName.name // "getName"

위 코드에서 getName() 메서드의 name 속성은 함수 이름(예: 메서드 이름)을 반환합니다. getName() 方法的 name 属性返回函数名（即方法名）

有两种特殊情况：

• Function 构造函数创造的函数，name 属性返回 “anonymous”；

• bind 方法创造的函数，name 属性返回 “bound” 加上原函数的名字。

(new Function()).name // "anonymous"

var doSomething = function() {
  // todo
};
doSomething.bind().name // "bound doSomething"

如果对象的方法是一个 Symbol 值，那么 name

두 가지 특수 케이스:

• Function 생성자에 의해 생성된 함수, name 속성은 "anonymous"를 반환합니다.
• 에 의해 생성된 함수; bind 메서드에서 name 속성은 "bound"와 원래 함수의 이름을 반환합니다.

const key1 = Symbol('description content');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description content]"
obj[key2].name // ""

객체 메소드가 Symbol 값인 경우 name 속성은 괄호 안에 Symbol의 설명 내용을 반환합니다.

var name = 'imooc';

// ES5
var obj1 = {
  name: name,
}
// ES6
var obj2 = {
  name,
}

확장된 지식: es6 객체의 속성 개선

1. 간결한 속성 표현

ES6에서는 변수와 함수를 객체의 속성과 메서드로 직접 작성할 수 있습니다.

1.1 속성 값의 약어

ES5에서는 객체를 정의할 때 속성의 값을 적어야 한다고 알고 있습니다. ES6에서는 속성 이름과 정의된 변수 이름이 같으면 다음과 같이 객체에 직접 변수 이름을 쓸 수 있다고 규정하고 있습니다. 아이템의 대상. 다음과 같습니다. 위 코드의

// ES5
function getObj(x, y) {
  return {x: x, y: y};
}
// 等同于 ES6
function getObj(x, y) {
  return {x, y};
}

getObj(1, 2) // {x: 1, y: 2}

obj1과 obj2는 동일한 의미를 갖습니다. 변수 이름은 중괄호 안에 직접 작성할 수 있습니다. 이때 속성명은 변수명, 속성값은 변수값이 된다.

함수에서 객체를 반환하는 예를 살펴보겠습니다.

const name = '张三'
// ES5
var person = {
  name: name,
  getName: function() {
    console.log('imooc')
  }
};

// ES6
var person = {
  name,
  getName() {
    console.log(this.name)
  }
};
console.log(person)	// {name: "imooc", getName: ƒ}

위 코드에서 볼 수 있듯이 일상적인 개발에서 데이터를 조합하는 것은 매우 편리하고 유용합니다.

1.2 객체의 메소드 축약

축약할 수 있는 속성 외에도 객체의 메소드도 축약할 수 있어 더욱 간결하고 명확해졌습니다. 다음 예를 살펴보겠습니다.

var person = {};

function getName () {
  return person.name
}

function setName () {
  person.name = '李四'
}

function clear () {
  person = {};
}

// ES5 写法
module.exports = {
  getName: getName
  setName: setName,
  clear: clear
};
// ES6写法
module.exports = { getName, setName, clear };

위 코드에서 ES5에서는 객체에 대한 메서드를 정의할 때 function 키워드를 사용하여 정의해야 하지만, ES6에서는 콜론과 function 키워드를 직접 생략합니다. ES6를 사용하면 이러한 간결한 방식이 더 표현력이 좋다는 것을 알 수 있습니다.

이 방법은 Node.js에서 모듈을 내보낼 때 더 편리합니다. 다음 예를 살펴보겠습니다.

// 方法一
obj.name = 'imooc';

// 方法二
obj['a' + 'ge'] = 7;

위 코드에서는 person 객체를 정의하고 person 객체를 조작하는 여러 메서드를 노출합니다. 내보낼 때 ES6에서는 변수 이름을 반복적으로 작성할 필요가 없으므로 더 간결하다는 것을 알 수 있습니다. 모듈에서 제공하는 메소드를 표현합니다.

2. 간결한 속성 표현

JavaScript에서 객체의 속성을 정의하는 방법은 일반적으로 두 가지가 있습니다.

var obj = {
  name: 'imooc',
  age: 7
}

위 코드에서 메소드 1은 식별자를 직접 사용하여 할당 작업을 수행합니다. 이는 더 일반적으로 사용되는 할당 작업이지만 속성이 표현식인 경우 메소드 2를 사용하여 괄호 안에 표현식을 작성할 수 있습니다. .

그러나 ES5에서 리터럴 객체를 정의할 때 표현식을 리터럴 객체의 속성으로 사용할 수는 없습니다. 첫 번째 방법(식별자)을 통해서만 속성을 정의할 수 있습니다.

var key = 'name';
var obj = {
  [key]: 'imooc',
  ['a' + 'ge']: 7
}

ES6에서는 더 많은 시나리오를 처리하기 위해 객체의 속성을 확장했습니다. 속성은 다음과 같이 변수 형식으로 정의할 수 있습니다.

var str = 'first name';
var obj = {
  ['I love imooc']: 'ES6 Wiki',
  [str]: 'Jack'
}
console.log(obj['I love imooc'])	// ES6 Wiki
console.log(obj[str])	// Jack
console.log(obj['first name'])	// Jack

위 코드에서 리터럴 객체의 속성은 대괄호로 묶을 수 있습니다. 대괄호 안의 값은 변수나 표현식일 수 있습니다. 이는 의심할 여지 없이 속성의 기능을 확장하고 프로그래밍을 더욱 유연하게 만듭니다.

또한 속성은 공백이 포함된 문자열일 수도 있습니다. 값을 가져올 때 문자열을 대괄호 안에 직접 사용하거나 변수를 사용할 수 있습니다. 다음과 같습니다:

var person = {
  name: 'Jack',
  ['get' + 'Name']() {
    console.log(this.name)
  }
};
console.log(person.getName())	// Jack

표현식은 객체의 메서드 이름을 정의하는 데에도 사용할 수 있습니다.

// 报错
var name = 'Jack';
var age = 18;
var person = { [name] };
// Uncaught SyntaxError: Unexpected token '}'

참고 1: 속성 이름 표현과 속성 간결 표현은 동시에 사용할 수 없으며 오류가 보고됩니다. 🎜

var key1 = {name: 'imooc'};
var key2 = {age: 7};
var obj = {
  [key1]: 'value content 1',
  [key2]: 'value content 2',
}
console.log(obj)	// {[object Object]: "value content 2"}

🎜위 코드에는 구문 오류가 있습니다🎜🎜참고 2: 속성 이름은 문자열 유형이어야 합니다. 속성 표현식이 객체인 경우 toString()이 먼저 호출되어 객체를 문자열로 변환한 후 진행됩니다. 사용. 🎜

var keys = ['imooc', '7'];
var obj = {
  [keys]: 'value content',
}
console.log(key.toString())	// "imooc,7"
console.log(obj)		// {imooc,7: "value content"}
console.log(obj[keys])	// "value content"

🎜위 코드에 정의된 두 변수는 객체형이며, toString()이 호출되면 동일한 속성을 갖는 [객체 객체]가 됩니다. 따라서 이후 속성이 이전 속성을 덮어씁니다. 🎜

注意 3： 如果属性的表达式是数组时，则和对象不一样。数组在 toString() 后会变成一个字符串，所以对象属性的表达式就是一个字符串。

var keys = ['imooc', '7'];
var obj = {
  [keys]: 'value content',
}
console.log(key.toString())	// "imooc,7"
console.log(obj)		// {imooc,7: "value content"}
console.log(obj[keys])	// "value content"

上面的代码中可以看出来，数组 keys 在 toString() 得到了 imooc,7 作为 obj 的属性。另外，我们也可以直接使用 keys 获取 obj 对象上的值。

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

위 내용은 es6 객체에 추가된 새로운 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!