es6全名是什麼

es6全名是“ECMAScript 6”，因其是ECMAScript的第6個版本而得名；其實它正式名為ECMAScript 2015，是2015年6月正式發布的JS語言的標準。 es6已基本成為業界標準，主流瀏覽器已支援ES6絕大多數的特性。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6全名為ECMAScript6（ECMAScript的第6個版本），是於2015年6月正式發布的Jes6全名是什麼ves6全名是什麼Script語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得Jes6全名是什麼ves6全名是什麼Script語言可以用來編寫複雜的大型應用程序，成為企業級開發語言。

es全名為“ECMAScript”，是根據ECMA-262 標準實現的通用腳本語言，ECMA-262 標準主要規定了這門語言的語法、類型、語句、關鍵字、保留字、操作符、物件等幾個部分。

ECMAScript 6 目前基本上成為業界標準，它的普及速度比ES5 要快很多，主要原因是現代瀏覽器對ES6 的支援相當迅速，尤其是Chrome 和Firefox 瀏覽器，已經支援ES6 中絕大多數的特性。

下面逐一為大家詳解常用的ES6新特性：

1.不一樣的變數宣告：const和let全名是什麼n>

在之前JS是沒有區塊級作用域的，const與let填補了這方便的空白，const與let都是區塊級作用域。

ves6全名是什麼r與let、const對比：全名是什麼n>

#ves6全名是什麼r大家不陌生吧，宣告變數用的，既然這麼熟了直接對比它的缺點吧：

• ves6全名是什麼r典型三大不足
  • 可以重複宣告
  • #無法限制修改
  • 沒有區塊級作用域
• let和const的優點
  • 不能重複宣告
  • const常數能限制修改
  • 有區塊級作用域

ves6全名是什麼r與let、const範例：

前兩點應該很好理解，例如我在公司寫一個大型項目，那麼多變量，如果用ves6全名是什麼r，萬一重複聲明了是不是就會直接覆蓋我呢？答案肯定啊，這就很坑爹了是不是，let重複聲明就直接給你報錯，多好簡單粗暴。

<script>
			ves6全名是什麼r es6全名是什麼 = 1;
			ves6全名是什麼r es6全名是什麼 = 10;
			es6全名是什麼lert(es6全名是什麼)
		</script>

第二點就不解釋了你想想π=3.1415926...你就懂了，主要來說第三個，什麼叫塊級作用域呢？ {...}，這種大括號括起來的就是了，來一個經典的例子，三個按鈕點選輸出下標。

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

你說輸出什麼？

對，頁面載入es6全名是什麼就0,1，2了，然後點選都是3。為啥呢？

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支援模板字串，使得字串的拼接更加的簡潔、直覺。

$("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.箭頭函數（Arrow Functions）全名是什麼n>

#這是ES6中最令人興奮的特性之一。 =>不只是關鍵字function的簡寫，它也帶來了其它好處。箭頭函數與包圍它的程式碼共用同一個this,能幫你很好的解決this的指向問題。有經驗的Jes6全名是什麼ves6全名是什麼Script開發者都熟悉諸如ves6全名是什麼r self = this;或ves6全名是什麼r thes6全名是什麼t = this這種引用外圍this的模式。但藉助=>，就不需要這種模式了。

箭頭函數最直觀的三個特點。

• 不需要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);

細節：當你的函數有且僅有一個參數的時候，是可以省略掉括號的。當你函數回傳有且僅有一個表達式的時候可以省略{} 和return；

4. 函數的參數預設值全名是什麼n>

在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

#5.延展運算子(Sprees6全名是什麼d operes6全名是什麼tor)全名是什麼n>

延展操作符 … 是ES6中引入的，將可迭代對象展開到其單獨的元素中，所謂的可迭代對象就是任何能用for of循環進行遍歷的對象，例如：陣列、字串、Mes6全名是什麼p 、Set 、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中文網其他相關文章！