溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ES6基礎(chǔ)知識有哪些

發(fā)布時間：2022-04-29 14:07:56 來源：億速云 閱讀：151 作者：zzz 欄目：開發(fā)技術(shù)

今天小編給大家分享一下ES6基礎(chǔ)知識有哪些的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、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 + "歡迎您!");  //此處會報錯,myName只能在showName函數(shù)中使用

	//var的作用域是函數(shù)級的(在代碼塊中定義的變量可以在代碼塊之外使用)
	// if(1==1)
	// {
	// 	var myName = "張學(xué)友";
	// }
	// alert(myName + "歡迎您!"); //此處可以運(yùn)行

	//let的作用域是代碼塊級別的
	// if(1==1)
	// {
	// 	let myName = "張學(xué)友";
	// }
	// alert(myName + "歡迎您!"); //此處會報錯
	
	//let不存在變量提升
	// console.log(a);  //報錯
	// 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);  //此處會報錯,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>
		<h3>點(diǎn)擊三個按鈕分別彈出1，2，3</h3>
		<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; //此處會報錯,const聲明的變量不能改變其值
	
	//const一旦聲明變量，就必須立即初始化，不能留到以后賦值。
	//const PI; //報錯
	
	//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};

上面代碼的寫法會報錯，因?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

以上就是“ES6基礎(chǔ)知識有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

es6
AI
助
手