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
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類