【小記】ES6

amuqiao 發布于2019-08-22 15:31 / 3475人閱讀

摘要：前言來自閱讀阮老師的入門的小結疑問先開個坑，慢慢填問題和循環先看書中的一段代碼這個我們知道，是因為每個都被賦予了一個函數，輸出作用域的，而是在全局作用域下調用的，所以輸出的是全局變量，因為循環沒有塊作用域，所以輸出。

前言

來自閱讀阮老師的《ES6入門》的小結+疑問~先開個坑，慢慢填

問題

Q：let和for循環？
先看書中的一段代碼：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

這個我們知道，是因為每個a[i]都被賦予了一個函數，輸出作用域的i，而a[6]()是在全局作用域下調用的，所以輸出的i是全局變量i，因為for循環沒有塊作用域，所以輸出10。
改成let后：

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

其實我第一次看到這里是不能理解的，然后看到書上說：

變量i是let聲明的，當前的i只在本輪循環有效，所以每一次循環的i其實都是一個新的變量，所以最后輸出的是6。

好吧，還是感覺沒清楚到底這個機制是啥樣的(⊙﹏⊙)，那我就用小工具把它轉為ES5語法了（雖然也不能當成完全等同吧(lll￢ω￢)）：

"use strict";
var a = [];

var _loop = function _loop(i) {
  a[i] = function () {
    console.log(i);
  };
};

for (var i = 0; i < 10; i++) {
  _loop(i);
}
a[6](); // 6

這個結果就很清楚啦，它類似在執行語句的外面包裹了一個函數，結果就是i當成參數傳進去了，而且還形成了一個閉包：

再來看另一個例子：

for (let i = 0; i < 3; i++) {
  let i = "abc";
  console.log(i);
}
// abc
// abc
// abc

原文說：

for循環還有一個特別之處，就是設置循環變量的那部分是一個父作用域，而循環體內部是一個多帶帶的子作用域。

轉換之后的結果（這里有小問題0_0，單純轉換出來會都是i，但是多復制一份，轉出來就是下面這種，我個人覺得根據意思應該轉成這樣才是對的）：

for (var _i = 0; _i < 3; _i++) {
  var _i2 = "abc";
  console.log(_i2);
}

Q：let特性？
不存在變量提升
暫時性死區(temporal dead zone)

在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的

GPU云服務器云服務器 thinking-in小記 thinking-in-小記 ES6 es6-系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93500.html

ES6小記

摘要：命令改變了這個行為，必須要在聲明后使用，否則報錯。值為臨時鎖區保證了命令不會受到外部影響。基本使用聲明一個只讀的常量。默認值解構允許指定默認值內部嚴格使用來判斷是否有值，所以只有當一個數組成員嚴格等于，默認值才會生效。 ES6 ES6 就是ECMAScript 6是新版本JavaScript語言的標準。 1. let 和 const ES6 新增了 let 和 const 來聲明變量和...

王晗 2019-08-22 15:37 評論0 收藏0
javascript小記

摘要：模板字面量相當于格式化字符串字符串用兩個包含起來并且內部的占位符用標識一般用于標識多行文本或者配合函數使用與箭頭函數用于數組是用于讓數組每一個元素都調用函數的語法基本格式為其中為數組元素下標為當前元素所屬的數組對象在實際調用時只需要箭頭函數 1.模板字面量相當于格式化字符串,字符串用兩個``包含起來,并且內部的占位符用${variable}標識.一般用于標識多行文本或者配合函數使用. ...

waltr 2019-08-23 16:23 評論0 收藏0
前端小白的面經小記

摘要：前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。直接現場手敲觸發的樣式。數組去重如何實現如果用的話，里面如何寫排序算法。對象何時被修改心態需要調整好，不緊張不匆忙。前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。問題相關 Css 布局方式有...

FuisonDesign 2019-08-23 15:35 評論0 收藏0
前端小白的面經小記

摘要：前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。直接現場手敲觸發的樣式。數組去重如何實現如果用的話，里面如何寫排序算法。對象何時被修改心態需要調整好，不緊張不匆忙。前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。問題相關 Css 布局方式有...

MSchumi 2019-08-30 15:55 評論0 收藏0
知識點小記

摘要：箭頭函數我們來看一下箭頭函數的效果箭頭函數是無法通過來修改作用域的這個需要切記。所以切記在需要的時候使用箭頭函數。這是一些小問題的記錄和總結： 1. vue serve和build 在vue-cli3.0中可以快速的開發原型。通過全局安全@vue/cli-service-global npm i -g @vue/cli-service-global 那么就可以使用vue serve ...

shery 2019-08-23 16:49 評論0 收藏0