ES6基礎(chǔ)知識介紹
更新時間：2022年04月29日 11:07:12 作者：農(nóng)碼一生
ECMAScript 6.0（以下簡稱 ES6）是JavaScript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。
一、ECMAScript和JavaScript關(guān)系
JavaScript 的創(chuàng)造者 Netscape 公司，決定將 JavaScript 提交給標(biāo)準(zhǔn)化組織 ECMA，希望這種語言能夠成為國際標(biāo)準(zhǔn)，但是JavaScript本身也已經(jīng)被 Netscape 公司注冊為商標(biāo)，后面的標(biāo)準(zhǔn)都由ECMA制定，取名ECMAScript。
那么ES6這個版本引入的新內(nèi)容較多，通常指JavaScript語言的下一個版本。
二、let命令
ES6 新增了let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。
var和let定義變量區(qū)別：
<script>
//var的作用域是函數(shù)級的(函數(shù)內(nèi)部定義變量只能函數(shù)里面使用)
// function showName()
// {
// var myName = "張學(xué)友";
// alert(myName + "歡迎您!"); //此處的myName為"張學(xué)友"
// }
// showName();
// alert(myName + "歡迎您!"); //此處會報(bào)錯,myName只能在showName函數(shù)中使用
//var的作用域是函數(shù)級的(在代碼塊中定義的變量可以在代碼塊之外使用)
// if(1==1)
// {
// var myName = "張學(xué)友";
// }
// alert(myName + "歡迎您!"); //此處可以運(yùn)行
//let的作用域是代碼塊級別的
// if(1==1)
// {
// let myName = "張學(xué)友";
// }
// alert(myName + "歡迎您!"); //此處會報(bào)錯
//let不存在變量提升
// console.log(a); //報(bào)錯
// let a = "apple";
// console.log(b); //undefined
// var b = "banana";
</script>
var和let在循環(huán)計(jì)數(shù)時候的區(qū)別：
<script>
// for(var i = 1;i <= 10;i++)
// {
// //
// }
// alert(i); //此處會打印11,i在循環(huán)體內(nèi)和循環(huán)體外都可以使用
//此時計(jì)數(shù)器的變量泄露成了全局變量
// for(let i = 1;i <= 10;i++)
// {
// //
// }
// alert(i); //此處會報(bào)錯,i只在循環(huán)體內(nèi)有效,在循環(huán)體外無效
// 輸出十個11
// i是全局的,定時器代碼在循環(huán)之后發(fā)生,所以打印十個11
// for (var i = 1; i <= 10; i++) {
// setTimeout(function(){
// console.log(i);
// })
// }
//輸出1 2 3 4 5 6 7 8 9 10
for (let j = 1; j <= 10; j++) {
setTimeout(function(){
console.log(j);
})
}
</script>循環(huán)綁定網(wǎng)頁元素事件中var和let的區(qū)別：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循環(huán)綁定按鈕事件</title>
</head>
<body>
<h2>點(diǎn)擊三個按鈕分別彈出1，2，3</h2>
<input type="button" class="myButton" value="第一個按鈕" />
<input type="button" class="myButton" value="第二個按鈕"/>
<input type="button" class="myButton" value="第三個按鈕"/>
</body>
</html>
<script>
//在此案例中i是全局的,點(diǎn)擊按鈕發(fā)生在循環(huán)之后,所以打印結(jié)果全部為4
// var list = document.getElementsByClassName("myButton");
// for(var i = 0;i < list.length;i++)
// {
// list[i].onclick = function(){
// alert(i+1);
// }
// }
//上述代碼不能打印1,2,3,而是打印4,需要采取JS閉包來解決此問題;
//閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)
// var list = document.getElementsByClassName("myButton");
// for(var i = 0;i < list.length;i++)
// {
// list[i].onclick = (function(num)
// {
// return function(){
// alert(num);
// }
// })(i+1);
// }
//如果使用ES6中l(wèi)et關(guān)鍵字則不存在上面演示的問題
var list = document.getElementsByClassName("myButton");
for(let i = 0;i < list.length;i++)
{
list[i].onclick = function(){
alert(i+1);
}
}
</script>三、const命令
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
<script>
// const PI = 3.14;
// PI = 3.15; //此處會報(bào)錯,const聲明的變量不能改變其值
//const一旦聲明變量，就必須立即初始化，不能留到以后賦值。
//const PI; //報(bào)錯
//const實(shí)際上保證的，并不是變量的值不得改動，
//而是變量指向的那個內(nèi)存地址所保存的數(shù)據(jù)不得改動。
const arr = [];
arr.push('jack'); //可以執(zhí)行
arr.push("rose"); //可執(zhí)行
console.log(arr[0]);
console.log(arr[1]);
</script>四、變量的解構(gòu)賦值
1、數(shù)組的解構(gòu)賦值
ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值
// let a = 1; // let b = 2; // let c = 3; //上述代碼可以如下編寫(從數(shù)組中提取值，按照對應(yīng)位置，對變量賦值) // let[a,b,c]=[1,2,3];
數(shù)組解構(gòu)賦值案例：
//let [a, [[b], c]] = [1, [[2], 3]]; //a=1,b=2,c=3 //let [ , , c] = ["jack", "rose", "mike"]; //c=mike //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=[]
解構(gòu)不成功，變量的值就等于undefined：
//let [foo] = []; //解構(gòu)不成功,foo=undefined //let [bar, foo] = [1]; //bar=1,foo解構(gòu)不成功foo=undefined
不完全解構(gòu)：
左邊的模式只能匹配右邊的一部分，也可以解構(gòu)成功：
let [x, y] = [1, 2, 3]; //x=1,y=2
字符串解構(gòu)(將字符串當(dāng)成一個數(shù)組)：
let [a, b, c, d, e] = 'hello'; console.log(a); console.log(b); console.log(c); console.log(d); console.log(e);
默認(rèn)值：
解構(gòu)賦值允許指定默認(rèn)值
//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(只有當(dāng)一個數(shù)組等于undefined，默認(rèn)值才會生效)
默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明
//let [x = 1, y = x] = []; // x=1; y=1 //let [x = 1, y = x] = [2]; // x=2; y=2 //let [x = 1, y = x] = [1, 2]; // x=1; y=2 //let [x = y, y = 1] = []; // ReferenceError: y is not defined
2、對象的解構(gòu)賦值
解構(gòu)不僅可以用于數(shù)組，還可以用于對象。
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; //foo='aaa', bar='bbb'以上代碼看上去和數(shù)組解構(gòu)賦值沒有多大區(qū)別，但是：
（1） 數(shù)組解構(gòu)中數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；
（2） 對象解構(gòu)中對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值 ;
如下：
let { bar, foo } = { foo: 'aaa', bar: 'bbb' }; //foo="aaa" bar= "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' }; //baz = undefined，解構(gòu)失敗，值為undefined對象的解構(gòu)賦值，可以很方便地將現(xiàn)有對象的方法，賦值到某個變量：
// 例一
let { log, sin, cos } = Math; //將Math對象的對數(shù)、正弦、余弦三個方法，賦值到對應(yīng)的變量上
// 例二
const { log } = console; //將console.log賦值到log變量,簡化代碼
log('hello') // hello如果變量名與屬性名不一致，必須寫成下面這樣：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //baz = "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj; //f = 'hello' l = 'world'這實(shí)際上說明，對象的解構(gòu)賦值是下面形式的簡寫
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };真正被賦值的是后者，而不是前者：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
//baz = "aaa" foo = error: foo is not defined與數(shù)組一樣，解構(gòu)也可以用于嵌套結(jié)構(gòu)的對象 :
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"注意，這時p是模式，不是變量，因此不會被賦值。如果p也要作為變量賦值，可以寫成下面這樣。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]默認(rèn)值：
let {x = 3} = {};
x // 3
let {x, y = 5} = {x: 1};
x // 1
y // 5
let {x: y = 3} = {};
y // 3
let {x: y = 3} = {x: 5};
y // 5
let { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"默認(rèn)值生效的條件是，對象的屬性值嚴(yán)格等于undefined
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null注意點(diǎn)：
如果要將一個已經(jīng)聲明的變量用于解構(gòu)賦值，必須非常小心
// 錯誤的寫法
let x;
{x} = {x: 1};上面代碼的寫法會報(bào)錯，因?yàn)?JavaScript 引擎會將{x}理解成一個代碼塊， 只有不將大括號寫在行首，才能解決
這個問題。
// 正確的寫法
let x;
({x} = {x: 1});由于數(shù)組本質(zhì)是特殊的對象，因此可以對數(shù)組進(jìn)行對象屬性的解構(gòu)。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr; //利用數(shù)組下標(biāo)解構(gòu)賦值
first // 1
last // 3到此這篇關(guān)于ES6基礎(chǔ)知識的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用原生JS獲取select元素選中的value和text值
這篇文章介紹了使用原生JS獲取select元素選中的value和text值，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了深入理解Js中的this,有隊(duì)這方面感興趣的同學(xué)可以閱讀學(xué)習(xí)下2021-02-02
這篇文章向我們詳細(xì)介紹了javascript中的對象，包括默認(rèn)對象、數(shù)組對象、字符串對象、自定義對象，并通過示例對這4中對象做了對比分析，推薦給大家。2015-01-01
這篇文章主要介紹了javascript單引號和雙引號的區(qū)別和處理,希望對大家有所幫助2014-05-05
下面小編就為大家?guī)硪黄钊肜斫膺壿嫳磉_(dá)式的用法 與或非的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
其實(shí)通俗的說就是一個有名稱的代碼段，方便重用。2010-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript reduce的基本用法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
javascript 打開頁面window.location和window.open的區(qū)別
有時候需要用js來實(shí)現(xiàn)頁面的打開，因?yàn)閖s下有window.location和window.open的不同實(shí)現(xiàn)方法，下面來簡單的說明下區(qū)別。2010-03-03
javaScript中的this示例學(xué)習(xí)詳解及工作原理
這篇文章主要介紹了javaScript中的this示例學(xué)習(xí)詳解及工作原理，大家參考使用吧2014-01-01
node.js入門教程迷你書、node.js入門web應(yīng)用開發(fā)完全示例
本書致力于教會你如何用Node.js來開發(fā)應(yīng)用，過程中會傳授你所有所需的“高級”JavaScript知識。本書絕不是一本“Hello World”的教程。2014-04-04