ES6-10筆記(一)

来源:https://www.cnblogs.com/xingchenhuanqi/archive/2020/05/12/12796519.html
-Advertisement-
Play Games

ES6-10的整理筆記，僅為梳理知識體系，回頭查閱方便。本節（scope作用域 -- let&const -- Array） ...


大綱

（慕課的圖先用著）

scope-作用域

作用域是指程式源代碼中定義變數的區域，規定瞭如何查找變數，也就是確定當前執行代碼對變數的訪問許可權。

JavaScript作用域共有兩種主要的工作模型——詞法作用域（靜態作用域）和動態作用域。

JavaScript預設採用詞法作用域(lexical scoping)，也就是靜態作用域。

詞法作用域是由開發者在寫代碼時將變數和塊作用域寫在哪裡來決定的。由此出現全局作用域，函數作用域(局部作用域)，塊狀作用域

動態作用域一般由this產生

註:1.如果一個變數或者表達式不在“當前的作用域”，那麼JavaScript機制會繼續沿著作用域鏈向上查找直到全局作用域(global或瀏覽器中的window)如果找不到將不判定為不可被使用。
    2.作用域也會根據代碼層次分層，作用域之間形成父子關係，嵌套關係。子作用域可以訪問父作用域。通常沿著鏈式的作用域鏈查找向上查找,而不能從父作用域引用訪問子作用域的變數和引用

全局作用域

所有在全局作用域中聲明的變數、函數都會變成window對象的屬性和方法

變數在函數或者代碼塊{}外定義，即為全局作用域。一般可以在頁面任何地方訪問

var oneName = " Volvo";
// 此處可調用 oneName 變數
function myFunction() {
    // 函數內可調用 oneName 變數
}
if(true){
	//代碼塊內可調用oneName變數
}

在函數或者代碼塊{}內未定義的變數也擁有全局作用域。該變數將作為global或者window的屬性存在

// 此處可調用 oneName 變數
function myFunction() {
     carName = "Volvo";
    // 函數內可調用 oneName 變數
}
if(true){
	//代碼塊內可調用oneName變數
}

註：在函數內部或者代碼塊中沒有定義的變數實際上是作為global/window的屬性存在，而不是全局變數。該變數是可以被delete掉，而全局變數不可以。因為通過var語句添加的全局變數有一個configcurable屬性，預設值為false。可以通過Object.getOwnPropertyDescriptor(window，"...")查看

window對象上的屬性在書寫時可以省略window.

函數作用域（局部作用域）

在函數內部定義的變數對外是封閉的，從外層無法直接訪問函數內部的作用域

function bar() {
  var testValue = 'inner';
}
console.log(testValue);		// 報錯：ReferenceError: testValue is not defined

如果想讀取函數內部的變數，必須藉助return或者閉包

//使用return方式
function bar(value) {
  var testValue = 'inner';
  return testValue + value;
}
console.log(bar('fun'));		// "innerfun"

return 是函數對外交流的出口，而 return 可以返回的是函數，根據作用域的規則，函數bar內部的子函數inner是可以獲取函數bar作用域內的變數result

//使用閉包方式
function bar(value) {
  var testValue = 'inner';
  var result = testValue + value;
  function innser() {
     return result;
  };
  return innser();
}
console.log(bar('fun'));	// "innerfun"

塊狀作用域

在其他編程語言中，塊狀作用域是很熟悉的概念，但是在JavaScript中不被支持。在ES6中已經有了{}塊狀作用域。

if(true){
  let a = 1
  console.log(a) //1
}
console.log(a) //a is not defined

註：事實上塊狀作用域在ES3就已經存在，只是不明顯。比如catch塊捕獲的異常僅在catch塊可見

詞法作用域（靜態作用域）與動態作用域

在javaScript採用詞法作用域，執行foo函數，先從foo函數內部查找局部變數value，如果沒有，就根據書寫的位置，查找上面一層的代碼，也就是value等於1，所以結果會列印1

var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}
bar();
// 結果是1

這裡 bind 已經把作用域的範圍進行了修改指向了 { a: 2 }，而 this 指向的是當前作用域對象

window.a = 3
function test () {
  console.log(this.a)
}
test.bind({ a: 2 })() // 2
test() // 3

如果要開啟動態作用域請藉助 bind、with、eval 等。

let&Const

let&Const是ES6之後的語法。let擁有的特性Const都擁有。在ES6之後聲明變數有6個方式var，function，let，const，import，class

var命令和function命令聲明的全局變數依然是頂層對像（window/global）的成員。但let，const，class命令聲明的全局變數，不在屬於頂層對象的成員。從ES6開始全局變數將逐步與頂層對象的屬性脫鉤。

註：let和Const聲明的變數去哪了？參考https://juejin.im/post/5c0be11b6fb9a049df23e388#heading-1

let

let聲明的變數擁有塊級作用域

{
  let a = 1
}
console.log(a); //undefined

let聲明的全局變數不是全局對象的屬性

不可以通過window變數名的方式訪問這些變數，而var聲明的全局變數是window的屬性，是可以通過window變數名的訪問

var a = 1
console.log(window.a); //1

let a = 1
console.log(window.a); // undefined

用let重定義變數會拋出一個語法錯誤，var可以重覆定義。

var a = 1
var a = 2
console.log(a)  //2

let a = 1
let a = 2
// VM131:1 Uncaught SyntaxError: Identifier 'a' has already been declared
//   at <anonymous>:1:1

let聲明的變數不會進行變數提升，存在暫時性死區（TDZ）。在死區結束前變數不會初始化

function test () {
  console.log(a)
  var a = 1
}
test() //undefined

function test () {//TDZ開始
  console.log(a)//
  ...
  ...
  let a = 1 //TDZ結束
}
test()
// Uncaught ReferenceError: Cannot access 'a' before initialization

const

Const除了具有let的塊級作用域和不會變數，並且它定義的常量，在用const定義變數後，就不能修改。對其修改會拋出異常

const PI = 3.1415;
console.log(PI);
PI = 22;
console.log(PI);
// Uncaught TypeError: Assignment to constant variable.

const聲明的變數必須進行初始化，否則會拋出異常Uncaught SyntaxError: Missing initializer in const declaration

const PI
PI = 3.1415
// Uncaught SyntaxError: Missing initializer in const declaration

Array

ES6新增了一些實用的原生API，方便開發者對Array的操控性更強。

ES5操作數組的方法 concat、join、push、pop、shift、unshift、slice、splice、substring 和 substr 、sort、 reverse、indexOf 和 lastIndexOf 、every、some、filter、map、forEach、reduce

ES6新增操作數組的方法 find、findIndex、fill、copyWithin、Array.from、Array.of、entries、values、key、includes

圍繞數組產生的動作無非是遍歷，轉換，生成，查找。。。。。。(資料庫增刪改查一樣一樣的)

數組遍歷的方法有很多例如for迴圈，forEach，every，for...in，for...of等等

數組的遍歷

舉幾個例子

for迴圈

for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

forEach

forEach ( ) 方法。等同於for,不支持break;continue,會拋出異常

forEach（）對於空數組是不會執行回調函數的

array.forEach(function(i){
  console.log(i);
})
[1,2,3,4,5].forEach(function(i){
    if(i===2){
    	return;
    }else{
    	console.log(i) //1,3,4,5
    }
})

every

every()方法遍歷可以達到break效果。

every的代碼塊種仍然不能使用break，continue，會拋出異常

[1,2,3,4,5].every(function(i){
  if(i===2){
    return false; //return false等同於break
  }else{
    console.log(i)
    return true  // return true 等同於continue
  }
})

for...in

for... in 的目的是用來遍歷對象，而數組剛好是可遍歷對象。。。

for (var index in array) {
	//index是索引值，是字元串
  console.log(array[index]);
}

for...of

for…of是支持 break、continue的，所以在功能上非常貼近原生的 for。

for…of 遍歷的是一切可遍歷的元素（數組、對象、集合）等。ES6 中允許開發者自定義遍歷

for (variable of iterable) {}

variable：每個迭代的屬性值被分配給該變數

iterable：一個具有可枚舉屬性並且可以迭代的對象

數組轉換功能

偽數組 具有length屬性； 按索引方式存儲數據； 不能調用數組的方法

ES5偽數組轉換為數組

let args = [].slice.call(arguments)

let imgs= [].slice.call(document.querySelectorAll('img'))//NodeList

ES6偽數組轉換為數組

let args = Array.from(arguments)

let imgs = Array.from(document.querySelectorAll('img'))

Array.from(arrayLike,mapFn,thisArg)
//arrayLike 必選  想要轉換成數組的偽數組對象或可迭代對象
//mapFn  可選  新數組中的每個元素會執行該回調函數
//thisArg 可選 執行回調函數 mapFn 時 this 對象

數組的生成

ES5初始化一個長度為5的數組，每個數組元素有預設值

Array.from({ length: 5 }, function () { return 1 })

ES6初始化一個長度為5的數組，每個數組元素有預設值

Array.prototype.from()方法

Array.from({ length: 5 }, function () { return 1 })

Array.prototype.of()方法

Array.of(element0[, element1[, ...[, elementN]]])  
elementN  任意個參數，將按順序成為返回數組中的元素。
Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.prototype.fill()方法

fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。

let array = [1, 2, 3, 4]
array.fill(0, 1, 2)
// [1,0,3,4]

arr.fill(value[, start[, end]])
value 必選 用來填充數組元素的值
start 可選 起始索引，預設值為0
end 可選 終止索引，預設值為this.length

數組的查找

ES6新增查找方法find(),findIndex()

Array.prototype.find()方法

find() 方法返回數組中滿足提供的測試函數的第一個元素的值，否則返回 undefined。

let array = [5, 12, 8, 130, 44];
let found = array.find(function(element) {
  return element > 10;
});
console.log(found);// 12

array.find(function(currentValue, index, arr),thisValue)
//function(currentValue, index, arr) 在數組每一項上執行的函數
//currentValue 當前遍歷到的元素
//index 當前遍歷到的索引
//array 數組本身
//thisArg 執行回調時用作this的對象

Array.prototype.findIndex()方法
findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。其實這個和 find() 是成對的，不同的是它返回的是索引而不是值


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

-Advertisement-
Play Games
更多相關文章
  • 三分鐘快速搭建分散式高可用的Redis集群
    Redis Cluster是Redis在3.0版本正式推出的專用集群方案，有效地解決了Redis分散式方面的需求，讓我們一起快速搭建出分散式高可用的Redis集群吧！ ...
  • Redis學習筆記（三） 字典
    Redis的字典使用哈希表作為底層實現，一個哈希表中可以有多個哈希表節點，而每個哈希節點就保存在字典中的一個鍵值對。 redis字典所用的哈希表由disht結構定義。 typedef struct dictht{ dictEntry **table;//哈希表數組 unsigned long siz ...
  • Android連載10-動態添加頁面、創建一個新聞app
    一、動態規劃界面的大小 1.我們在res的文件夾裡面創建一個新的文件夾large_fragment用來，然後寫一個界面，activity_main.xml文件，用於存儲平板電腦等一些解析度高的界面。也就是說小屏幕使用正常activity_main文件、大屏幕就使用large_fragment文件夾里 ...
  • Flutter聊天室|dart+flutter仿微信App界面|flutter聊天實例
    一、項目概述 flutter-chatroom是採用基於flutter+dart+chewie+image_picker+photo_view等技術跨端開發仿微信app界面聊天室項目。實現了消息發送/動態gif表情、彈窗、圖片預覽、紅包/朋友圈/小視頻號等功能。 二、技術框架 編碼/技術：Vscod ...
  • android的佈局 （如何實現空心圓效果的佈局）
    layer-list : 簡單來說layer-list就是圖層列表的意思,是用來創建LayerDrawable的,LayerDrawable是DrawableResource的一種,所以,layer-list創建出來的是"圖層列表",也就是一個drawable圖形``` ... ...
  • SwiftUI - 一起來仿寫微信APP之一首頁列表視圖
    最近在學習 SwiftUI ，我一般都是先去學習界面佈局，所以就想著仿寫一下經常使用的軟體的界面，所以先拿微信開刀。因為不想一次性發太多的內容，所以只好將主題分解，一部分一部分地去講，接下來我們一起來學習吧。 ...
  • {path：“ /”，expires：7}這一段是什麼意思？
    1.創建會話cookie： $ .cookie（'name'，'value'）; 2.創建到期的cookie，然後7天： $ .cookie（'name'，'value'，{到期日：7}）; 3.創建有效過期cookie，整個網站： $ .cookie（'name'，'value'，{到期：7，路徑 ...
  • js 獲取視頻的總時長
    js 獲取視頻的總時長： <!DOCTYPE html> <html> <head> <title></title> </head> <body> <video id="videoPlayerNew" src="http://vfx.mtime.cn/Video/2019/03/18/mp4/190 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類