<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
ES6新增關鍵字let和const介紹
2022-03-21 16:00:24
ES6新增加了兩個重要的JavaScript關鍵字：let和const
一、let關鍵字
let宣告的變數只在let命令所在的程式碼塊內有效。
1、基本語法
let a='123'
2、let和var的區別
var也是用來宣告變數，let和var有什麼區別呢？區別主要是以下三點：
2.1、同一作用域內let不能重複定義同一個名稱，var可以重複定義
看下面的例子：
// 同一個作用域內let不能重複定義同一個名稱 let a='123';let a='456'; // 錯誤 // var可以重複定義 var a=10; var a=20;
2.2、兩者作用域不同
let屬於塊級作用域，只在當前塊內有效。
var屬於全域性作用域。
看下面的範例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 同一個作用域內let不能重複定義同一個名稱
// let a='123';let a='456'; // 錯誤
// var可以重複定義
var a=10;
var a=20;
// 有著嚴格的作用域，變數隸屬於當前作用域
// let塊級作用域{}，var函數作用域
function testVar(){
if(true){
var str='123';
};
console.log(str);
}
// 呼叫函數
testVar(); // 輸出123
// 定義函數
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 呼叫函數
testLet(); // 報錯
}
</script>
</head>
</html>效果：
列印str1的時候會報錯，因為超出了str1的作用域。
2.3、不存在變數提升
var宣告的變數存在變數提升，即可以在變數宣告之前就使用該變數，值為undefined;而let不存在變數提升，必須先宣告變數才能使用。看下面的例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 1、同一個作用域內let不能重複定義同一個名稱
// let a='123';let a='456'; // 錯誤
// var可以重複定義
// var a=10;
// var a=20;
// 2、有著嚴格的作用域，變數隸屬於當前作用域
// let塊級作用域{}，var函數作用域
function testVar(){
if(true){
var str='123';
};
//console.log(str);
}
// 呼叫函數
testVar(); // 輸出123
// 定義函數
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 呼叫函數
//testLet(); // 報錯
//3、不存在變數提升
// var命令會發生‘變數提升'（可以在宣告前使用，值為undefined）
// let不存在變數提升
console.log(a); // undefined
var a=12;
console.log(b); // 報錯:b is not defined
let b='123';
}
</script>
</head>
</html>效果：
二、const
const與let的相同點：都是塊級作用域。
不同點：const宣告的是一個唯讀的常數，宣告之後就不允許改變。意味著，宣告的同時必須初始化。看下面的例子：
const pi='3.1415926'; pi='3.1415927'
檢視控制檯結果：
宣告的同時必須初始化，看範例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 1、同一個作用域內let不能重複定義同一個名稱
// let a='123';let a='456'; // 錯誤
// var可以重複定義
// var a=10;
// var a=20;
// 2、有著嚴格的作用域，變數隸屬於當前作用域
// let塊級作用域{}，var函數作用域
function testVar(){
if(true){
var str='123';
};
//console.log(str);
}
// 呼叫函數
testVar(); // 輸出123
// 定義函數
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 呼叫函數
//testLet(); // 報錯
//3、不存在變數提升
// var命令會發生‘變數提升'（可以在宣告前使用，值為undefined）
// let不存在變數提升
// console.log(a); // undefined
// var a=12;
// console.log(b); // 報錯:b is not defined
// let b='123';
// const 唯讀常數
// 相同：與let都是塊級作用域
// const pi='3.1415926';
// pi='3.1415927' // 不允許修改
const b; // 錯誤：宣告的時候必須初始化
}
</script>
</head>
</html>控制檯結果：
注意：
const 如何做到變數在宣告初始化之後不允許改變的？其實 const 其實保證的不是變數的值不變，而是保證變數指向的記憶體地址所儲存的資料不允許改動。此時，你可能已經想到，簡單型別和複合型別儲存值的方式是不同的。是的，對於簡單型別（數值 number、字串 string 、布林值 boolean）,值就儲存在變數指向的那個記憶體地址，因此 const 宣告的簡單型別變數等同於常數。而複雜型別（物件 object，陣列 array，函數 function），變數指向的記憶體地址其實是儲存了一個指向實際資料的指標，所以 const 只能保證指標是固定的，至於指標指向的資料結構變不變就無法控制了，所以使用 const 宣告複雜型別物件時要慎重。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 1、同一個作用域內let不能重複定義同一個名稱
// let a='123';let a='456'; // 錯誤
// var可以重複定義
// var a=10;
// var a=20;
// 2、有著嚴格的作用域，變數隸屬於當前作用域
// let塊級作用域{}，var函數作用域
function testVar(){
if(true){
var str='123';
};
//console.log(str);
}
// 呼叫函數
testVar(); // 輸出123
// 定義函數
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 呼叫函數
//testLet(); // 報錯
//3、不存在變數提升
// var命令會發生‘變數提升'（可以在宣告前使用，值為undefined）
// let不存在變數提升
// console.log(a); // undefined
// var a=12;
// console.log(b); // 報錯:b is not defined
// let b='123';
// const 唯讀常數
// 相同：與let都是塊級作用域
// const pi='3.1415926';
// pi='3.1415927' // 不允許修改
// const b; // 錯誤：宣告的時候必須初始化
// 陣列
const arr=[];
arr.push('123');
console.log(arr);
// 物件
const obj={};
obj.name='abc';
console.log(obj);
}
</script>
</head>
</html>控制檯結果：
到此這篇關於ES6新增關鍵字let和const的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45