Es6學習指南-1-函數變數

来源:https://www.cnblogs.com/jinfeixiang/archive/2019/07/05/11139404.html
-Advertisement-
Play Games

本篇章我們簡述的是 es6初級知識點，認識es6，以及es6變數和es5的變數和函數。 ECMAScript 6簡介 ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式發佈了。它的目標，是使得JavaScript語言可以用來編寫複雜的大型應 ...


本篇章我們簡述的是 es6初級知識點，認識es6，以及es6變數和es5的變數和函數。

ECMAScript  6簡介

　　ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式發佈了。它的目標，是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

ECMAScript和JavaScript的關係

一個常見的問題是，ECMAScript和JavaScript到底是什麼關係？

一個常見的問題是，ECMAScript和JavaScript到底是什麼關係？

　　要講清楚這個問題，需要回顧歷史。1996年11月，JavaScript的創造者Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這種語言能夠成為國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，並將這種語言稱為ECMAScript，這個版本就是1.0版。

　　該標準從一開始就是針對JavaScript語言制定的，但是之所以不叫JavaScript，有兩個原因。一是商標，Java是Sun公司的商標，根據授權協議，只有Netscape公司可以合法地使用JavaScript這個名字，且JavaScript本身也已經被Netscape公司註冊為商標。二是想體現這門語言的制定者是ECMA，不是Netscape，這樣有利於保證這門語言的開放性和中立性。

　　因此，ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現（另外的ECMAScript方言還有Jscript和ActionScript）。日常場合，這兩個詞是可以互換的。

以上是對Es6和javaScript的瞭解，現在我們正式開始學習Es6

1.我們先瞭解es5的一些知識

1.變數

Es5聲明變數的方式有哪些？

一共有三種：

　　第一是：var

　　第二是：function

　　第三是：我們需要註意 不能忽略函數的形參(形參也是變數它是函數的私有變數)

var 定義變數

var 有個功能是變數提升但是不能定義 給window 添加一個對應的屬性。

聲明和定義是兩碼事

定義是  =  號賦值

 

function 既可以提前聲明，同時還定義了

什麼是定義？

　　所謂定義就是給變數賦值了

作用域問題：

var 的作用域

怎麼理解  域  這個詞？

　　域是範圍的意思

什麼是全局作用域？：

　　在window下聲明的變數或者在函數外聲明的變數

什麼是局部作用域？：

　　在函數內聲明的變數

想學習作用域，必須瞭解瀏覽器執行的機制：

　　瀏覽器在執行時候會開闢一個大空間(window) ，window下麵分兩個模塊，棧記憶體(執行模塊，棧記憶體也叫作用域)，堆記憶體(也叫存儲模塊)。棧記憶體用來存放變數的記憶體地址，堆記憶體主要存放代碼塊的，然後瀏覽器從上到下執行代碼。

function 聲明的變數

　　function 聲明的變數也會給window添加一個屬性 屬性值是方法

下麵我們說一下函數的歸屬問題：

　　1.函數歸屬誰跟它在哪調用無關，跟在那定義有關

//函數歸誰，跟它在哪調用無關，跟它在哪定義有關。
    var a=10;
    function fn(){
        var a=12
        return function(){
            console.log(a)
        }
    }
    
    //ff()是fn中的匿名函數
    var ff=fn()
    ff()//12

2.任何一個函數都有返回值，如果寫了 return return返回什麼就是什麼，如果沒有寫return 得到的是undefined

//任何一個函數執行後都有一個返回值，如果寫了return return的是什麼就得到什麼，
//如果沒有return得到的是undefined
//如果是我把return a 給刪掉 那麼console.log(a)列印的是undefined
    function fn(){
        var a=20;
        return a
    }
    console.log(fn())

對於變數來說 它的作用域只有 window和函數(函數執行時會開闢一個私有作用域)

3.函數在if中的特殊情況：

　　在if語句中定義的函數(很特殊)，只聲明不定義，當條件成立的時候，if模塊中不管函數在哪聲明的函數，都會第一步對這個函數定義，再去執行if裡面的代碼

//函數在if中的特殊情況
    var a=12;
    console.log(fn)//undefined
    if(a){
        console.log(fn)//列印出fn()
        function fn(){
            console.log("hrllo 1807b")
        }
    }

條件不成立：if裡面的代碼就不會執行，所以就不會列印函數fn()

//條件不成立
    var a=12;
    console.log(fn)//undefined
    if(a==false){
        console.log(fn)//
        function fn(){
            console.log("hrllo 1807b")
        }
    }
    console.log(fn)//undefined

 

以上是小編對Es5變數已經函數作用域的基礎知識，現在我們開始學習Es6

1.變數

Es6提供了四種定義變數？

　　第一種：let

　　第二種：cont

　　第三種：class

　　第四種：import

let：

let它是Es6提供的一種聲明變數的方式

1.沒有變數提升這個功能 在聲明之前不能使用

2.不能重覆的聲明

3.不會給window添加屬性

let塊級作用域：

帶 {} 的都是塊級作用域，if(){}  for(){}  對象{} 函數不是塊級 作用域，因為函數本身就是個私有作用域

var 和function 沒有塊級作用域的這個概念，let和const有塊級這個作用域

作用域是對於變數的

1.在塊級作用域下 var和function 跟在window下一樣，function很特殊，在塊級作用域前，只會提前聲明不會定義

console.log(a)//undefined
    console.log(get)//undefined
    {
        console.log(get)//function(){}
        var a=5
        function get(){
            console.log(111)
        }
        
    }
    console.log(a)//5
    console.log(get)//function(){}

2.在塊級作用域下 let和conts聲明的變數是私有的，外面訪問不到

{
        let a=100
    }
    console.log(a)//Uncaught ReferenceError: a is not defined

 

3.在for迴圈下let 聲明變數不會泄露

var list=document.querySelector("#list").querySelectorAll("li")
    for(var i=0;i<list.length;i++){//length=3
        list[i].onclick=function(){
            alert(i)//3
        }
    }

 

事件是非同步的，for迴圈結束後i是3並且i還是全局的，點擊了 li 最後彈出i，i此時是3，所以都會彈出3

var list=document.querySelector("#list").querySelectorAll("li")
    for(let i=0;i<list.length;i++){//length=3
        list[i].onclick=function(){
            alert(i)//3
        }
    }

 

4.塊級作用域和對象的區別？

這個是塊級作用域：

//    塊級作用域
    {
        name:"zhangsan",
        age:12
    }

{} 如果想表示對象，不能放行首，就是前面不能沒東西，如果{} 前面沒有東西 就是塊級作用域

console.log({
        name:"zhangsan",
        age:12
    })

 

裡面必須加一個() 因為如果不加就是個塊級作用域，我們要把eval轉成對象，對象前面不能沒東西。

eval 是將字元串轉js代碼

eval('({name:"zhangsan",age:22})')
console.log(eval('({name:"zhangsan",age:22})'))

　　

什麼是暫時性死區？：

如果塊級作用域內使用 let和const聲明變數了，這個區域就會被這個變數強制綁定，凡是在聲明這些變數都是不可用的，使用會報錯，這就是暫時性死區

//    什麼是暫時性死區?
    var a=10;
    {
//會報錯 Uncaught ReferenceError: Cannot access 'a' before initialization
        console.log(a);
        let a=20;
        console.log(a)
    }
    console.log(a)

 

什麼是暫時性死區的場景？：

//    暫時性死區的場景
    function fn(a=b,b=2){
        console.log(a,b)
    }
    fn()

 

使用變數b在定義b之前了，就出現了暫時性死區，a=b和b=2換下位置

1.寫法上 有預設值的寫後面，沒有預設值的寫前面

2.如果傳對於的參數，就不要預設值了(就沒有覆蓋了)，不是先賦預設值，然後再去實參去覆蓋，如果沒有參數在去

let a=a 報錯，賦值運算從右往左，右邊使用變數a結果發現a沒有聲明，而let語法規定不能在沒定義之前使用變數，所以報錯。

var a=a 不報錯 因為var 有變數提升這個功能，在等會賦值時，從右往左，使用變數a此時a是undefined，賦值時候又把undefined覆給了a，所以a還是undefined

 


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

-Advertisement-
Play Games
更多相關文章
  • 數據表創建參數介紹
    這個博主寫的非常好，直接附上連接。 數據表創建參數介紹一http://blog.itpub.net/17203031/viewspace-688011/ 數據表創建參數介紹二 http://blog.itpub.net/17203031/viewspace-688047/ 數據表創建參數介紹三 ht ...
  • 資料庫學習其二 從表空間到臨時表空間
    在網上搜索了很多次oracle表空間查詢語句，現在記錄下來 查詢oracle表空間大小： 其中包含了當前的表空間和臨時表空間總空間大小和當前使用情況，突然看到其中包含臨時表空間語句，產生了一些興趣，度了一番之後，如下： 臨時表空間使用情況 創建臨時表空間，比起普通表空間多了temporary關鍵字 ...
  • SqlServer 總結(1) 游標
    在做項目的過程中。我發現有許多地方有用到游標的方式去實現功能效果的。所以，整理了有關常用的實現游標的方式。 一、什麼是游標 維基百科中事這樣定義游標的。游標是處理結果集的一種機制 ,而結果集就是select查詢返回的所有行數據的集合。 對於我而言，用通俗的話來講，就是把自己需要用到的數據先放到一個容 ...
  • Xamarin學習（一）---- 環境準備
    前言： 摸索學習Xamarin的應用，以此博客跟進學習進度。 介紹： Xamarin 提供了用於移動設備、平板電腦和桌面應用程式的跨平臺開發解決方案。Xamarin 產品依賴於 Apple 和 Google 中的平臺 SDK 才能面向 iOS 或 Android，因此系統要求應與這些平臺的要求匹配。 ...
  • Android中使用WebView實現全屏切換播放網頁視頻
    首先寫佈局文件activity_main.xml： 原理：實現全屏的時候把webview里的視頻放到一個View（佈局里的video_view控制項）裡面，然後把webview隱藏掉！這樣就實現了全屏播放的！現在具體來看看怎麼實現的:先放代碼MainActivity.java： 最後說下Android ...
  • Android 上傳開源項目到 jcenter 實戰踩坑之路
    本文微信公眾號「AndroidTraveler」首發。 背景 其實 Android 上傳開源項目到 jcenter 並不是一件新鮮事，網上也有很多文章。 包括我本人在將開源項目上傳到 jcenter 的時候也是參考了一些文章。 不過由於版本和環境問題，很多很早以前寫的文章並不完全適用。 基於此，這邊 ...
  • 用 node.js 模仿 Apache 的部分功能
    首先，這個例子用到了服務端渲染的技術。服務端渲染，說白了就是在服務端使用模板引擎，這裡我先簡單的介紹一下服務端渲染與客戶端渲染之間的區別。 服務端渲染與客戶端渲染之間的區別: 客戶端渲染不利於搜索引擎優化 服務端渲染可以被爬蟲抓取到，而客戶端非同步渲染很難被爬蟲抓取到（例如：AJAX） 大部分的網站既 ...
  • 前端筆記之React（三）使用動態樣式表&antd&React腳手架&props實戰
    一、使用動態樣式表 1.1 LESS使用 1.2 LESS和webpack結合 希望在React項目中使用less，此時就需要webpack打包的時候順便進行less翻譯 安裝依賴： 修改webpack.config.js配置： 樣式會被webpack編譯後出現在head標簽中 1.3提煉樣式表 e ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類