第二章 ECMAScript 和 TypeScript概敘

var / let / const宣告變數

在Es6中引入其他宣告變數的方法,那便是let和const,那么為什么要添加新的宣告方式呢???讓我們看看幾段代碼

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

上面的代碼是可以完美運行的,而且我們的第一個a變數還會被第二個宣告的a覆寫,所以我們列印出來的就是2,假如中間寫了很多代碼,而且命名不規范的情況下,這里可能會有產生很多bug,聽說以前很多問題就是有這個的身影.

let 使用

let a = 1;
// ~~~
let a = 2;     //這里就會報錯
console.log(a);

你會發現,在第二個let a的時候就報錯了,運行也會有報錯

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

var 申明的變數會系結到全域變數上,至少是當前物件上,而let不會

function varTest() {
  var x = 1;
  {
    var x = 2;  // 同樣的變數!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // 不同的變數
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

let宣告的變數只在其宣告的塊或子塊中可用，這一點，與var相似，二者之間最主要的區別在于var宣告的變數的作用域是整個封閉函式，注意:這里是用{}圍成的子塊,以下情況是一樣的列印結果

function varTest() {
      var x = 1;
      function test() {
            var x = 2; // 不同的變數
            console.log(x); // 2
      }
      test();
      console.log(x); // 1
}
function letTest() {
      let x = 1;
      function test() {
            let x = 2; // 不同的變數
            console.log(x); // 2
      }
      test();
      console.log(x); // 1
}

console.log(name);
console.log(age);
var name = "測驗";
let age = 18;

運行結果

變數提升: 可以看到,name列印出來是undefined,而age直接報錯,可見var宣告的變數有變數提升的,let卻沒有
暫時性死區：ES6 明確規定，如果區塊中存在 let 和 const 命令，則這個區塊對這些命令宣告的變數從一開始就形成封閉作用域，只要在宣告之前使用這些變數，就會報錯，這種語法稱為“暫時性死區”（temporal dead zone，簡稱TDZ），

const使用

const宣告的為常量,只讀,不可修.(不可修的僅僅是參考地址不可以變而已,但是參考地址內部變化是可以的),怎么理解呢!!!

const a = 0;
const b = {
    c: 0,
    d: 1
}
b.c = 15;   // 沒有問題
b = 14;     // 拋出例外
a = 12;     // 拋出例外 

運行結果

更多資料MDN

模板字面量

說實話,第一眼看到這個的時候,我就喜歡上了它,真的太方便了,以后都不用拼接字串了

鍵盤位置

在鍵盤的Esc下的第一個按鍵

使用

  let message = "什么玩意";
  let logMessage = `
    模板字面量是${message},
    我是第二行了吧
  `;
  console.log(logMessage) // 模板字面量是什么玩意

${}代表里面放的是變數,而且這里面的空格什么的都會保留

運行結果

箭頭函式

聽說JavaScript開發中有幾大公認的難點,如果上面提到的var宣告變數混淆算是一個小難點,那么this指向就是一個大boss,這個問題一直存在現代編程中,但是箭頭函式的出現,解決了絕大多數的this指向問題

this指向保持不變

 // 圖片地址
 let img_url = "https://upload-images.jianshu.io/upload_images/13962818-8ab62dc051112573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/500/format/webp";
 // 創建物件
 let img = new Image();
 // 改變圖片的src
 img.src = https://www.cnblogs.com/wangzhaoyv/archive/2020/11/15/img_url;
 // 加載完成執行
 img.onload = function () {
   // 列印
   console.dir(this);
 };

 // 創建物件
 let img1 = new Image();
 // 改變圖片的src
 img1.src = img_url;
 // 加載完成執行
 img1.onload = () => {
      // 列印
      console.log(this);
 };

運行結果

使用箭頭函式的時候,this還是指向外部的window物件,而普通函式的this指向呼叫者(這里的呼叫者是img物件)

如果只有一條陳述句,可以省掉return

let arr = [1, 2, 3, 4, 5, 6, 7];
let filterArr = arr.filter((item) => item % 2 === 0);
console.log(arr, filterArr);

運行結果

這里的filter方法需要回傳一個值,如果回傳值是true,就保留這個值,如果是false就過濾掉,會回傳一個新陣列,原陣列不變,但是我們看到這個箭頭函式好像沒有回傳一樣,這就是箭頭函式的第二個特性,如果只有一條陳述句,可以省略return

函式的引數默認值

function sum(x = 1, y = 2, z = 3){
    return x + y + z;
}
sum();      // 6
sum(2 , 3); // 8

宣告展開和剩余引數

let params = [1,2,3];
console.log(...params);

運行結果

有時候我們會想要撰寫一個動態引數的方法,這個時候就可以使用這個符號

function push(targetArr, ...nums){
    for(let i = 0,len = nums.length; i < len; i++){
        targetArr.push(nums[0]);
    }
}

let arr = [];
push(arr, 12, 45);
console.log(arr)

運行結果

我這樣的一個push方法就支持一個或者多個引數,而不需要把后面的引數整合成物件,或者陣列,我只是覺得這樣寫更舒服點

乘方運算子

// Es5
const area = 3.14 * Math.pow(r, 2);
// Es6
const area = 3.14 * (r ** r);

模塊

注意:這里面如果你想用HTML來測驗模塊的內容,需要做兩步

• script標簽上記得加上type="module",不加報錯不能在模塊外部使用import陳述句
• 使用服務器模式打開HTML檔案(vscode可以安裝一個Live Server插件,ws可以直接點擊右上角選擇瀏覽器運行),不這樣報錯跨域

index.js

// 1 
export const index = 5555;

const key = "key";
const good = 1234;

// 2 A
export {
      key,good
}

// B
export default {
      test :function(params) {
          console.log(params)  
      }
}

測驗html

<script type="module">
            import { index } from "./index.js";    //匯入1
            import utils from "./index.js";        //匯入2
            import * as newUtils from "./index.js";//匯入3
            console.log(index);
            console.log(newGood);
            console.log(newKey);
            utils.test("這個世界");
            console.log(newUtils);
            console.log(newUtils.index);
            console.log(newUtils.good);
            console.log(newUtils.key);
            newUtils.default.test("這個世界");
 </script>

1和2兩種其實是一種,只是1是一個個的匯出,而2是一次匯出多個,兩種方式隨便那個都可以.我的建議是,如果匯出的東西不多,可以用2,當匯出的內容過多了,這個時候匯出陳述句可能在很下面,所以推薦一個一個的匯出(個人想法而已)

后面兩種A(export) 和 B(export default)匯出有以下幾點注意

1. export匯出的元素,可以使用import {A, B} from "檔案地址"引入,這里相當于做了一個結構賦值,并且相當于指定了一個物件
2. export default匯出的元素可直接接收,默認匯出的是個匿名物件,然后需要指定該物件的名字,才可以使用其屬性,這里不能結構匯出
3. 第三個匯入,直接將內部所有的匯出都集中到newUtils,列印出來后,你會發現匯出B中的物件放在了newUtils的default屬性中了

運行結果

改變匯出的名稱

index.js

const index = 5555;
const newInfo = 4444;
const key = "key";
const good = 1234;  
export {
      newInfo,
      index as newIndex
}
export default {
      newKey :key,
      good,
      test :function(params) {
          console.log(params)  
      }
}

<script type="module">
            import { newIndex, newInfo as info } from "./index.js";
            import utils from "./index.js";
            import * as newUtils from "./index.js";
            console.log(newIndex);         //關注點1 
            console.log(info);             //關注點2
            utils.test("這個世界");
            console.log(utils.good);
            console.log(utils.newKey);
            console.log(newUtils); 
            console.log(newUtils.newInfo);  //關注點3
            console.log(newUtils.newIndex); //關注點4
            newUtils.default.test("這個世界");
 </script>

運行結果

改名方式1

good , key都通過 export default匯出,但是key卻變了一個名稱newKey,這導致匯入使用的時候需要使用新的鍵newKey

改名方式 --- as

• newInfo , index都通過 export匯出,但是index卻變了通過as轉為newIndex,這導致匯入使用的時候需要使用新的鍵newIndex
• newInfo 匯出的時候為 newInfo,但是我們可以在匯入使用的時候使用as關鍵字,將newInfo 改名為 info

最后還要關注一下newUtils這個物件,是不是發現在匯出前改名的直接反應在這里,但是通過匯入時改名并沒有體現出來,當然這也是在意料之中的事了

標籤：其他

上一篇：JavaScript執行模型筆記

下一篇：第一章 JavaScript簡介