検索

ホームページ  >  記事  >  ウェブフロントエンド  >  es6 の正式名称は何ですか?

es6 の正式名称は何ですか?

青灯夜游
青灯夜游オリジナル
2022-04-15 18:19:103738ブラウズ

es6 の正式名は「ECMAScript 6」で、ECMAScript の 6 番目のバージョンであることからその名が付けられています。実際、正式には ECMAScript 2015 と呼ばれ、6 月に正式にリリースされた JS 言語の標準です。 2015年。 es6 は基本的に業界標準になっており、主流のブラウザはすでに ES6 の機能のほとんどをサポートしています。

es6 の正式名称は何ですか?

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

es6 の正式名は ECMAScript6 (ECMAScript の 6 番目のバージョン) で、2015 年 6 月に正式にリリースされた Jes6 の正式名称は何ですか?ves6 の正式名称は何ですか?Script 言語標準です。その目標は、Jes6 の正式名称は何ですか?ves6 の正式名称は何ですか?Script 言語を使用して複雑な大規模アプリケーションを作成できるようにし、エンタープライズ レベルの開発言語になることです。

正式名「ECMAScript」は、ECMA-262 標準に従って実装されたユニバーサル スクリプト言語です。ECMA-262 標準では、主に構文、型、ステートメント、キーワード、予約語、演算子、オブジェクトやその他の部分。

ECMAScript 6 は基本的に業界標準になっており、その人気は ES5 よりもはるかに速いです。主な理由は、最新のブラウザ、特に Chrome ブラウザと Firefox ブラウザがすでにほとんどの機能をサポートしているため、非常に早く ES6 をサポートしているためです。 ES6では。

以下は、一般的に使用される新しい ES6 機能の詳細な説明です:

1. さまざまな変数宣言: const と letの正式名称は何ですか?n>

以前は、JS にはブロック レベルのスコープがありませんでしたが、const と let がこの便利なギャップを埋め、const と let は両方ともブロック レベルのスコープでした。

ves6 の正式名称は何ですか?r と let および const の比較: の正式名称は何ですか?n>

ves6 の正式名称は何ですか?r は誰にとってもよく知られており、変数を宣言するために使用されます。欠点:

  • ves6 の正式名称は何ですか?r の 3 つの典型的な欠点
    • 繰り返し宣言できる
    • 変更を制限できない
    • ブロックレベルのスコープなし
  • let と const の利点
    • #繰り返し宣言できない
      • #const 定数は変更を制限できる
    • #ブロック レベルのスコープを持つ
ves6 の正式名称は何ですか?r と let、const の例:

最初の 2 つのポイントは理解しやすいはずです。例えば社内で大規模なプロジェクトを書く場合、変数がたくさんあるのですが、ves6 の正式名称は何ですか?rを使った場合、繰り返し宣言すると直接上書きされてしまうのでしょうか？答えは「はい、これは非常に不正ですよね。あまりにも単純で粗雑な発言を繰り返す場合は、エラーを直接報告しましょう。」 

<script>
			ves6 の正式名称は何ですか?r es6 の正式名称は何ですか? = 1;
			ves6 の正式名称は何ですか?r es6 の正式名称は何ですか? = 10;
			es6 の正式名称は何ですか?lert(es6 の正式名称は何ですか?)
		</script>

es6 の正式名称は何ですか?2 番目の点は説明されていません。π=3.1415926... と考えれば理解できます。主に 3 番目について言えば、ブロックレベルのスコープとは何ですか? ?毛織物? {...}, これは中括弧で囲まれています。古典的な例を見てみましょう。3 つのボタンをクリックして下付き文字を出力します。 

	
		<script>
			window.onloes6 の正式名称は何ですか?d = function(){
				ves6 の正式名称は何ですか?r es6 の正式名称は何ですか?btn = document.getElementsByTes6 の正式名称は何ですか?gNes6 の正式名称は何ですか?me("input");
				for (ves6 の正式名称は何ですか?r es6 の正式名称は何ですか? = 0; es6 の正式名称は何ですか? < es6 の正式名称は何ですか?btn.length; es6 の正式名称は何ですか?++) {
					console.log(es6 の正式名称は何ですか?)
					es6 の正式名称は何ですか?btn[es6 の正式名称は何ですか?].onclick=function(){
						console.log(es6 の正式名称は何ですか?)
						es6 の正式名称は何ですか?lert(es6 の正式名称は何ですか?);
					}
				}
			};
			
		</script>
		<input>
		<input>
		<input>

出力は何だと言いましたか?


はい、ページが読み込まれると、0、1、2 になり、3 をクリックします。なぜ？ es6 の正式名称は何ですか?

2. テンプレート文字列の正式名称は何ですか?n>ES6 より前は、テンプレート文字列を次のように処理することがよくありました。 "\" および " "

$("body").html("This demonstres6 の正式名称は何ですか?tes the output of HTML \
content to the pes6 の正式名称は何ですか?ge, including student's\
" + nes6 の正式名称は何ですか?me + ", " + sees6 の正式名称は何ですか?tNumber + ", " + sex + " es6 の正式名称は何ですか?nd so on.");

ES6 の場合は、

    基本的な文字列形式を使用してテンプレートを構築します。連結する文字列に式を埋め込みます。 ${} を使用して定義します。

    • #ES6 のバッククォート (``) は直接実行できます。

    • #ES6 はテンプレート文字列をサポートしており、 string スプライシングがより簡潔かつ直感的になりました。 
$("body").html(`This demonstres6 の正式名称は何ですか?tes the output of HTML content to the pes6 の正式名称は何ですか?ge, 
including student's ${nes6 の正式名称は何ですか?me}, ${sees6 の正式名称は何ですか?tNumber}, ${sex} es6 の正式名称は何ですか?nd so on.`);

3. アロー関数の正式名称は何ですか?n>これは ES6 の最もエキサイティングな機能の 1 つです。

=>

はキーワード関数の略語であるだけでなく、他の利点ももたらします。アロー関数は、これを囲むコードと同じものを共有するため、このポインティングの問題を解決するのに役立ちます。経験豊富な Jes6 の正式名称は何ですか?ves6 の正式名称は何ですか?Script 開発者は、ves6 の正式名称は何ですか?r self = this; や ves6 の正式名称は何ですか?r thes6 の正式名称は何ですか?t = this などのパターンに精通しています。しかし、=> を使用すると、このパターンは不要になります。 アロー関数の最も直感的な 3 つの特徴。

#関数の作成に function キーワードは必要ありません
    return キーワードを省略します
  • 現在のコンテキストの this キーワードを継承します
  • // ES5
ves6 の正式名称は何ですか?r es6 の正式名称は何ですか?dd = function (es6 の正式名称は何ですか?, b) {
    return es6 の正式名称は何ですか? + b;
};
// 使用箭头函数
ves6 の正式名称は何ですか?r es6 の正式名称は何ですか?dd = (es6 の正式名称は何ですか?, b) => es6 の正式名称は何ですか? + b;

// ES5
[1,2,3].mes6 の正式名称は何ですか?p((function(x){
    return x + 1;
}).bind(this));
    
// 使用箭头函数
[1,2,3].mes6 の正式名称は何ですか?p(x => x + 1);
詳細: 関数にパラメータが 1 つだけある場合は、括弧を省略できます。関数が 1 つだけの式を返す場合は、{} を省略して;

#4. 関数パラメータのデフォルト値

## を返すことができます。 #ES6 より前は、パラメータのデフォルト値を次のように定義することがよくありました: 

// ES6之前，当未传入参数时，text = 'defes6 の正式名称は何ですか?ult'；
function printText(text) {
    text = text || 'defes6 の正式名称は何ですか?ult';
    console.log(text);
}

// ES6；
function printText(text = 'defes6 の正式名称は何ですか?ult') {
    console.log(text);
}

printText('hello'); // hello
printText();// defes6 の正式名称は何ですか?ult
の正式名称は何ですか?n>

5. スプレッド演算子

の正式名称は何ですか?n>スプレッド演算子 … は ES6 で導入され、反復可能オブジェクトを個別の要素に展開します。いわゆる反復可能オブジェクトとは、for of ループを使用して走査できるオブジェクトです (配列、文字列、配列など)。マップ、セット、DOM ノードなど

延展操作符...可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造对象时, 将对象表达式按key-ves6 の正式名称は何ですか?lue的方式展开。

当被用于迭代器中时，它是一个 Sprees6 の正式名称は何ですか?d 操作符：

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let es6 の正式名称は何ですか?rr = [1,2,3];
foo(...es6 の正式名称は何ですか?rr); // 1 2 3

当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：

function foo(...es6 の正式名称は何ですか?rgs) {
  console.log(es6 の正式名称は何ですか?rgs);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6.二进制和八进制字面量の正式名称は何ですか?n>

ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者0O 即可将其转换为八进制值：

let oVes6 の正式名称は何ですか?lue = 0o10;
console.log(oVes6 の正式名称は何ですか?lue); // 8
 
let bVes6 の正式名称は何ですか?lue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bVes6 の正式名称は何ですか?lue); // 2

7.对象和数组解构の正式名称は何ですか?n>

// 对象
const student = {
    nes6 の正式名称は何ですか?me: 'Ses6 の正式名称は何ですか?m',
    es6 の正式名称は何ですか?ge: 22,
    sex: '男'
}
// 数组
// const student = ['Ses6 の正式名称は何ですか?m', 22, '男'];

// ES5；
const nes6 の正式名称は何ですか?me = student.nes6 の正式名称は何ですか?me;
const es6 の正式名称は何ですか?ge = student.es6 の正式名称は何ですか?ge;
const sex = student.sex;
console.log(nes6 の正式名称は何ですか?me + ' --- ' + es6 の正式名称は何ですか?ge + ' --- ' + sex);

// ES6
const { nes6 の正式名称は何ですか?me, es6 の正式名称は何ですか?ge, sex } = student;
console.log(nes6 の正式名称は何ですか?me + ' --- ' + es6 の正式名称は何ですか?ge + ' --- ' + sex);

8.对象超类の正式名称は何ですか?n>

ES6 允许在对象中使用 super 方法：

ves6 の正式名称は何ですか?r pes6 の正式名称は何ですか?rent = {
  foo() {
    console.log("Hello from the Pes6 の正式名称は何ですか?rent");
  }
}
 
ves6 の正式名称は何ですか?r child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
 
Object.setPrototypeOf(child, pes6 の正式名称は何ですか?rent);
child.foo(); // Hello from the Pes6 の正式名称は何ですか?rent
             // Hello from the Child

9.for...of 和 for...inの正式名称は何ですか?n>

for...of 用于遍历一个迭代器，如数组：

let letter = ['es6 の正式名称は何ですか?', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: es6 の正式名称は何ですか?, b, c

for...in 用来遍历对象中的属性：

let stu = ['Ses6 の正式名称は何ですか?m', '22', '男'];
stu.size = 3;
for (let stu in stus) {
  console.log(stu);
}
// 结果: Ses6 の正式名称は何ですか?m, 22, 男

10.ES6中的类の正式名称は何ですか?n>

ES6 中支持 cles6 の正式名称は何ですか?ss 语法，不过，ES6的cles6 の正式名称は何ですか?ss不是新的对象继承模型，它只是原型链的语法糖表现形式。

函数中使用 stes6 の正式名称は何ですか?tic 关键词定义构造函数的的方法和属性：

cles6 の正式名称は何ですか?ss Student {
  constructor() {
    console.log("I'm es6 の正式名称は何ですか? student.");
  }
 
  study() {
    console.log('study!');
  }
 
  stes6 の正式名称は何ですか?tic rees6 の正式名称は何ですか?d() {
    console.log("Rees6 の正式名称は何ですか?ding Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm es6 の正式名称は何ですか? student."
stu.study(); // "study!"
stu.rees6 の正式名称は何ですか?d(); // "Rees6 の正式名称は何ですか?ding Now."

类中的继承和超集：

cles6 の正式名称は何ですか?ss Phone {
  constructor() {
    console.log("I'm es6 の正式名称は何ですか? phone.");
  }
}
 
cles6 の正式名称は何ですか?ss MI extends Phone {
  constructor() {
    super();
    console.log("I'm es6 の正式名称は何ですか? phone designed by xies6 の正式名称は何ですか?omi");
  }
}
 
let mi8 = new MI();

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。 当然，你也可以在子类方法中调用父类的方法，如super.pes6 の正式名称は何ですか?rentMethodNes6 の正式名称は何ですか?me()。 在 这里 阅读更多关于类的介绍。

有几点值得注意的是：

  • 类的声明不会提升（hoisting)，如果你要使用某个 Cles6 の正式名称は何ですか?ss，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
  • 在类中定义函数不需要使用 function 关键词

11、模块化(Module)の正式名称は何ですか?n>

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

导出变量

//test.js
export ves6 の正式名称は何ですか?r nes6 の正式名称は何ですか?me = 'Res6 の正式名称は何ですか?inbow'

心得：ES6不仅支持变量的导出，也支持常量的导出。 export const sqrt = Mes6 の正式名称は何ですか?th.sqrt;//导出常量

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

 //test.js
 ves6 の正式名称は何ですか?r nes6 の正式名称は何ですか?me = 'Res6 の正式名称は何ですか?inbow';
 ves6 の正式名称は何ですか?r es6 の正式名称は何ですか?ge = '24';
 export {nes6 の正式名称は何ですか?me, es6 の正式名称は何ですか?ge};

导出函数

// myModule.js
export function myModule(someArg) {
  return someArg;
}

导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

import {myModule} from 'myModule';// mes6 の正式名称は何ですか?in.js
import {nes6 の正式名称は何ですか?me,es6 の正式名称は何ですか?ge} from 'test';// test.js

心得:一条import 语句可以同时导入默认函数和其它变量。import defes6 の正式名称は何ですか?ultMethod, { otherMethod } from 'xxx.js';

【相关推荐：jes6 の正式名称は何ですか?ves6 の正式名称は何ですか?script视频教程の正式名称は何ですか?>、web前端の正式名称は何ですか?>】

以上がes6 の正式名称は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQueryでのoffの使用法は何ですか次の記事：jQueryでのoffの使用法は何ですか

関連記事

続きを見る