ES6基礎入門之let、const

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/24/12559315.html
-Advertisement-
Play Games

以前變數的聲明，可以通過var或者直接使用 直接使用相當於往window全局對象上掛了一個屬性 let和var的主要區別： let聲明的變數只在當前（塊級）作用域內有效 let聲明的變數不能被重覆聲明 不存在變數提升 ES6之前的作用域： 全局作用域 函數作用域 eval作用域 ES6塊級作用域： ...


以前變數的聲明，可以通過var或者直接使用

直接使用相當於往window全局對象上掛了一個屬性

 

 

 

 

let和var的主要區別：

let聲明的變數只在當前（塊級）作用域內有效

let聲明的變數不能被重覆聲明

不存在變數提升 

 

ES6之前的作用域：

全局作用域  函數作用域  eval作用域

 

ES6塊級作用域：

所有用花括弧包裹的代碼塊，如：

    if(){}
    for(){}
    switch(){}
    try{}catch(e){}
    {}

 但是不包括對象，如下麵這種情況不是塊級作用域

var obj={

    
}
{
    var a=1;//不受塊級作用域影響
    let b=2;//只作用在塊級作用域內
}
console.log(a);
console.log(b);

 

 塊級作用域可以嵌套

內層可以訪問外層，外層不能訪問內層

{
    let a=1;
    {
        let b=2;
        console.log(a);
    }
    console.log(b);
}

 

 

使用let或者const聲明的變數，不能再被重新聲明

var a=1;
var a;
console.log(a);//1  不會是undefined
var a=2;
console.log(a);//2

let c=1;
let c;//報錯

 

let不存在變數提升

var是存在變數提升的，比如下麵這段代碼

 

 由於變數提升會把聲明提前，相當於

 

 因此結果是undefined

 

 

 如果是let，不存在變數提升，因此會報錯

 

暫存死區：

 

 

 

 ES6規定，如果在一個作用域中存在let或者const聲明的變數，那麼會形成一個封閉作用域，因此會拿不到外面的變數

 

 

 

 

 

使用let實現面試常見小例子

生成10個按鈕，每次點擊彈出1-10

使用var來實現

for(var i=0;i<10;i++){
    (function(i){
        var btn=document.createElement("button");
        btn.innerText=i;
        btn.onclick=function(){
            alert(i);
        }
        document.body.appendChild(btn);
    })(i);
}

使用let來實現（不再需要閉包來實現內部的作用域）

for(let i=0;i<10;i++){
    let btn=document.createElement("button");
    btn.innerText=i;
    btn.onclick=function(){
        alert(i);
    }
    document.body.appendChild(btn);
}

效果

 

const 聲明常量-不可改變的量

常量必須在聲明的時候賦值

跟let一樣，不能重覆聲明，存在塊級作用域，不存在變數提升

但是，當常量為引用類型的時候，是可以被修改的（不能修改引用地址，但是可以修改地址中的值）

對象：

const cyy={
    name:"cyy",
    age:18
}
console.log(cyy);
cyy.name="cyy2";
console.log(cyy);//可以修改引用地址里的值
cyy={};
console.log(cyy);//不能修改引用地址

 

 

數組：

const ARR=[];
ARR.push(1);
console.log(ARR);//可以修改引用里的值
ARR=[];
console.log(ARR);//不可以修改引用地址

 

 

怎麼防止常量為引用類型的時候能被修改的情況：

Object.freeze()

const cyy={
    name:"cyy",
    age:18
}
console.log(cyy);
Object.freeze(cyy);//禁止對象常量的值被修改
cyy.name="cyy2";
console.log(cyy);//可以修改引用地址里的值

 

 

const ARR=[];
Object.freeze(ARR);
ARR.push(1);
console.log(ARR);//可以修改引用里的值

 

 

const擴展

ES6之前怎麼聲明常量

1、假裝是常量

var CYY="cyy";

2、給對象設置不可修改的屬性

Object.defineProperty

var cyy={};
Object.defineProperty(cyy,"BASE_NAME",{
    value:"cyy",
    writable:false
})
cyy.BASE_NAME="cyy2";
console.log(cyy.BASE_NAME);

可以看到BASE_NAME屬性並沒有被更改

 

 

同理，如果是在全局範圍內定義一個常量，就可以掛載到window上

Object.defineProperty(window,"BASE_NAME",{
    value:"cyy",
    writable:false
})
BASE_NAME="cyy2";
console.log(BASE_NAME);

 

 

但是這樣定義的常量，依然可以對屬性做修改

Object.defineProperty(window,"BASE_NAME",{
    value:"cyy",
    writable:false
})
BASE_NAME.a=1;
console.log(BASE_NAME.a);

 

 不過看我列印出來的，貌似是不能修改……

 

可以使用Object.seal防止屬性被擴展

Object.defineProperty(window,"BASE_NAME",{
    value:"cyy",
    writable:false
})
Object.seal(BASE_NAME);//防止常量的屬性被修改
BASE_NAME.a=1;
console.log(BASE_NAME);
console.log(BASE_NAME.a);

 

 

Object.seal能夠防止屬性被擴展，但是已經存在的屬性，值是可以修改的

var cyy={a:1};
Object.seal(cyy);
console.log(cyy);
cyy.b=2;
console.log(cyy);//不能擴展，沒有b屬性
cyy.a=3;
console.log(cyy);//屬性能被修改，a被改變

 

 

如果想要禁止屬性被修改，還是使用Object.defineProperty

var cyy={a:1};
//禁止修改cyy對象的a屬性
Object.defineProperty(cyy,"a",{
    writable:false
})
Object.seal(cyy);
console.log(cyy);
cyy.a=3;
console.log(cyy);//屬性不能被修改

 

 

也就是說，Object.defineProperty和Object.seal結合使用，可以達到Object.freeze的效果

//在ES6之前，封裝函數，使得常量不能被修改
//引用類型的常量，屬性也不能被修改和擴展
Object.defineProperty(Object,"myfreeze",{
    value:function(obj){
        for(var i in obj){
            if(obj.hasOwnProperty(i)){
                Object.defineProperty(obj,i,{
                    writable:false
                })
            }
        }
        Object.seal(obj);
    }
})

const cyy={a:1};
Object.myfreeze(cyy);

 

 

hasOwnProperty 判斷屬性是原型上的屬性，還是自身的屬性

var obj1={
    a:1,
    b:2
}
var obj2=Object.create(obj1);
obj2.c=3;
obj2.d=4;

//for in遍歷到了所有屬性，有原型上的a和b屬性，還有自身的c和d屬性
for(var i in obj2){
    console.log(obj2[i]);
}

//hasOwnProperty 只會顯示自身的屬性（不包括原型屬性）
for(var i in obj2){
    if(obj2.hasOwnProperty(i)){
        console.log(obj2[i]);        
    }
}

 

 

數組使用自定義的仿freeze方法

//在ES6之前，封裝函數，使得常量不能被修改
//引用類型的常量，屬性也不能被修改和擴展
Object.defineProperty(Object,"myfreeze",{
    value:function(obj){
        for(var i in obj){
            if(obj.hasOwnProperty(i)){
                Object.defineProperty(obj,i,{
                    writable:false
                })
            }
        }
        Object.seal(obj);
    }
})

const cyy=[];
Object.myfreeze(cyy);

 

 

但是，如果對象的屬性值又是一個對象的話，那這個對象的屬性值還是可以被修改的

//在ES6之前，封裝函數，使得常量不能被修改
//引用類型的常量，屬性也不能被修改和擴展
Object.defineProperty(Object,"myfreeze",{
    value:function(obj){
        for(var i in obj){
            if(obj.hasOwnProperty(i)){
                Object.defineProperty(obj,i,{
                    writable:false
                })
            }
        }
        Object.seal(obj);
    }
})

var cyy={
    name:"cyy",
    age:18,
    num:{
        a:1,
        b:2
    }
}
Object.myfreeze(cyy);

 

 

 

需要使用遞歸來解決

//在ES6之前，封裝函數，使得常量不能被修改
//引用類型的常量，屬性也不能被修改和擴展
Object.defineProperty(Object,"myfreeze",{
    value:function(obj){
        for(var i in obj){
            if(obj.hasOwnProperty(i)){
                Object.defineProperty(obj,i,{
                    writable:false
                })
            }

            //如果屬性值是對象，則再次進行遍歷
            if(obj[i] instanceof Object){
                Object.myfreeze(obj[i]);
            }
        }
        Object.seal(obj);
    }
})

var cyy={
    name:"cyy",
    age:18,
    num:{
        a:1,
        b:2
    }
}
Object.myfreeze(cyy);

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS Share Extension 自定義分享界面
    先上效果圖，預設的實在是太醜了，搜查 Share Extension 自定義界面相關文章大部分都會引導你用 NSExtensionPrincipalClass ，然後繼承 UIViewController ，然後全都是手寫代碼，但是我想用 Storyboard 啊！其實很簡單： 不用改 NSExte ...
  • Android高德自定義marker點標記與infoWindow窗體
    自定義marker與infoWindow窗體 1.展示地圖佈局的xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" an ...
  • iOS開發如何面對疫情過後的面試高峰期 ！
    2020年本應該是一個 "愛你、愛你"的年份！卻因為 黑天鵝 給我們帶來非常大的影響! 一、2020年iOS招聘數據分析 這裡是 2020年3月份BOSS直聘 北京iOS招聘前幾頁數據 薪資待遇崗位個數年限要求公司規模 15K左右 35份 1-3年 20-99 20K左右 78份 3-5年 100- ...
  • 小程式scroll-view點擊項自動居中
    效果 代碼 佈局樣式代碼省略，以下只展示邏輯代碼 我們想要的是居中的效果，所以觸發滾動的條件是點 寬度一半之後的項才開始滾動，所以需要減去寬度的一半 為相對於 總長度的X軸距離，只要相減計算後的數值為正數，就可以證明上面的條件，觸發滾動 ...
  • 【免費工具】完全免費短視頻去水印小程式，支持30多個平臺！
    大家好，這是第8期免費工具推薦，本次分享一個面前的去水印工具：《靈泉短視頻去水印》小程式，完全免費，支持抖音、快手、小紅書等幾十個平臺！一鍵保存無水印視頻到手機相冊！蘋果安卓手機通用！掃描下方微信小程式碼直達！ ...
  • ES6 字元串、數值與布爾值、函數參數的解構賦值
    const str="hello world"; const [a,b,...oth]=str; 字元串分割為數組的三種方法： const str="hello world"; const [...str1]=str; const str2=[...str]; const str3=str.spli ...
  • ES6 對象的解構賦值
    對象是無序的，必須使用屬性名去匹配 因此解構賦值時變數名必須與對象的屬性名保持一致 const obj={ a:1, b:2 }; let {a,b}=obj; 比較複雜的結構條件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
  • ES6 數組的解構賦值
    數組的解構賦值 將數組的值，或者對象的屬性，提取到不同的變數中 const arr=[1,2,3,4]; let [a,b,c,d]=arr; 更複雜的匹配規則： const arr=[1,2,[3,4],[5,6,7]]; let [,b]=arr; let [,,c,d]=arr; let [, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類