es6 オブジェクトに追加された新しい属性は何ですか?

es6 オブジェクトに追加された新しい属性は「name」です。 name 属性は、オブジェクトのメソッド (関数) の名前を取得できます (例: "getName() {console.log(this.name);}"。この関数は、name を直接呼び出すと関数名を返します。リテラルオブジェクトのメソッドも function なので、 name 属性もあります。オブジェクトのメソッドがシンボル値の場合、name 属性は括弧内のシンボルの説明内容を返します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

オブジェクトは JavaScript において非常に重要なデータ構造です。ES6 ではオブジェクトが大幅に拡張され、より使いやすくなっています。 es6 オブジェクトに追加された新しい属性は「name」です。

オブジェクト メソッドの name 属性

オブジェクトのメソッドの名前を取得する方法について考えたことはありますか? ES6では関数にname属性が追加されており、関数がnameを直接呼び出すと関数名が返されます。リテラル オブジェクトのメソッドも関数であるため、name 属性も持ちます。次の例:

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

person.getName.name // "getName"

上記のコードでは、getName() メソッドの name 属性は関数名 (つまりメソッド名)

# を返します。 ##2 つのタイプがあります 特殊なケース:

• Function コンストラクターによって作成された関数、name 属性は「匿名」を返します;
  ## によって作成された関数
#bind メソッドでは、name 属性は「bound」と元の関数の名前を返します。

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

オブジェクト メソッドがシンボル値の場合、

name

属性は括弧内のシンボルの説明内容を返します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const key1 = Symbol(&amp;#39;description content&amp;#39;); const key2 = Symbol(); let obj = { [key1]() {}, [key2]() {}, }; obj[key1].name // &quot;[description content]&quot; obj[key2].name // &quot;&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>

拡張知識: es6 オブジェクトの属性の改善

1. 簡潔な属性表現

ES6 では、変数や関数をオブジェクトのプロパティやメソッドとして直接記述することができます

1.1 プロパティ値の省略形

ES5 では、オブジェクトを定義するときのプロパティの値は次のとおりであることがわかっています。 ES6では、属性名と定義した変数名が同じであれば、オブジェクト内の項目として変数名をオブジェクト内に直接記述することができます。以下のように: 上記のコードの

var name = 'imooc';

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

obj1 と obj2 は同じ意味を持ちます。変数名は中括弧内に直接記述することができます。このとき、属性名が変数名、属性値が変数の値となります。

関数でオブジェクトを返す例を見てみましょう:

// 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}

上記のコードから、日常の開発において、データを組み立てることが非常に便利で役立つことがわかります。 。

1.2 オブジェクト内のメソッドの省略形

省略可能なプロパティに加えて、オブジェクト内のメソッドも省略でき、より簡潔で明確になります。次の例を見てみましょう:

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: ƒ}

上記のコードでは、ES5 でオブジェクトのメソッドを定義する場合、function キーワードを使用してメソッドを定義する必要がありますが、ES6 ではコロンと function キーワードが直接省略されます。 ES6 の簡潔なアプローチを使用すると、より表現力が豊かになることがわかります。

この方法は、Node.js でモジュールをエクスポートする場合に便利です。次の例を見てみましょう:

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 };

上記のコードでは、人物オブジェクトを定義し、その人物オブジェクトを操作するためのいくつかのメソッドを公開しています。エクスポートするときに、ES6 で次の記述を繰り返す必要がないことがわかります。変数名をより簡潔な方法で変更し、モジュールによって提供されるメソッドをより簡潔に表現します。

2. 簡潔な属性表現

JavaScript でオブジェクトのプロパティを定義するには、通常 2 つの方法があります。次のように:

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

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

上記のコードでは、メソッド 1 は識別子を直接使用して代入操作を実行します。これはより一般的に使用される代入操作ですが、属性が式の場合は、メソッド 2 を使用して属性を変更できます。式 式は角括弧内に記述されます。

ただし、ES5 でリテラル オブジェクトを定義する場合、リテラル オブジェクトのプロパティとして式を使用することはできません。プロパティは、最初のメソッド (識別子) を通じてのみ定義できます。

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

ES6 は、より多くのシナリオをカバーするためにオブジェクトのプロパティを拡張しました。プロパティは、次のように変数の形式で定義できます:

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

上記のコードでは、リテラル オブジェクトの属性を次のように定義できます。角括弧内に配置します。角括弧には変数または式を指定できます。これにより、間違いなく属性の機能が拡張され、プログラミングがより柔軟になります。

さらに、属性にはスペースを含む文字列を指定することもでき、値を取得する場合は、括弧内で文字列を直接使用することも、変数を使用することもできます。次のように:

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

注 1: プロパティ名の表現とプロパティの簡潔な表現を同時に使用することはできず、エラーが報告されます。

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

上記のコードには構文エラーがあります

注 2: 属性名は文字列型である必要があります。属性式がオブジェクトの場合、最初に toString() が呼び出されます。使用前の紐です。

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() が呼び出されたときに同じ属性を持つ [object Object] になります。したがって、後の属性によって前の属性が上書きされます。

注意 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 中国語 Web サイトの他の関連記事を参照してください。