2021-04-25JS高級(jí)第五天

之前只有函數(shù)中存在局部作用域汗贫。

一、聲明變量與常量

1.let關(guān)鍵字

①let關(guān)鍵字用來聲明變量另患。
if纽乱、for的大括號(hào) { } 內(nèi)用 let 聲明的變量具有塊級(jí)作用域蛾绎,只在當(dāng)前大括號(hào)內(nèi)起作用昆箕。

依然遵循作用域鏈:內(nèi)部可以訪問外部,外部不能訪問內(nèi)部

     if (true) {
        let b = 10;
        if (true) {
          console.log(b);  //遵循作用域鏈:內(nèi)部可以訪問外部租冠。10
        }
      }

      if (true) {
        let b = 10;
        if (true) {
          let b = 20; 
        }
        console.log(b); //遵循作用域鏈:外部不能訪問內(nèi)如鹏倘。10
      }

③在 for 循環(huán)中,用 let 聲明的計(jì)數(shù)器 i 也具有塊級(jí)作用域顽爹,只在當(dāng)前大括號(hào)內(nèi)起作用纤泵。
④let 聲明的變量沒有變量提升(預(yù)解析),變量必須先聲明后使用镜粤。
⑤暫時(shí)性死區(qū)捏题。塊級(jí)作用域內(nèi)部與全局聲明的同名變量沒有任何關(guān)系。

      var  a = 10;  //全局變量
      if (true) {
        console.log(a);  //錯(cuò)誤肉渴!a沒有定義
        let a = 20;
      }
2.每次循環(huán)都會(huì)產(chǎn)生一個(gè)新的塊級(jí)作用域公荧,每個(gè)塊級(jí)作用域中的變量相互獨(dú)立的。
     // 核心:循環(huán)是同步任務(wù)同规,調(diào)用函數(shù)是異步任務(wù)循狰。所以函數(shù)被調(diào)用時(shí)循環(huán)已經(jīng)結(jié)束。
      var arr1 = [];
      for (var i = 0; i < 2; i++) {
        arr1[i] = function () {
          console.log(i);
        };
      }
      arr1[0](); //2
      arr1[1](); //2

      // 核心:每次循環(huán)都會(huì)產(chǎn)生一個(gè)新的塊級(jí)作用域券勺,每個(gè)塊級(jí)作用域中的變量相互獨(dú)立的绪钥。
      // 函數(shù)執(zhí)行時(shí)輸出的是自己上一級(jí)(循環(huán)產(chǎn)生的塊級(jí)作用域)作用域下的i值。
      let arr2 = [];
      for (let i = 0; i < 2; i++) {
        arr2[i] = function () {
          console.log(i);
        };
      }
      arr2[0](); //0
      arr2[1](); //1
3.const關(guān)鍵字

①const關(guān)鍵字用來聲明常量关炼。
②const關(guān)鍵字聲明的常量具有塊級(jí)作用域程腹。
③const關(guān)鍵字聲明常量時(shí)必須賦值
④const關(guān)鍵字聲明的常量不能重新賦值儒拂。

如果是基本數(shù)據(jù)類型寸潦,不能更改值缀去;
如果是復(fù)雜數(shù)據(jù)類型,可以更該內(nèi)部的值甸祭,不能更改地址值缕碎,。如下:

       const arr = [1,2];

        arr[0] = 10;
        arr[1] = 20;
        console.log(arr);  //結(jié)果為[10,20]

        arr = [10,20];  //報(bào)錯(cuò)池户!不能更改復(fù)雜數(shù)據(jù)類型的地址值

二咏雌、解構(gòu)賦值

ES6中允許從數(shù)組中提取值,按照對(duì)應(yīng)位置校焦,對(duì)變量賦值赊抖,對(duì)象也可以實(shí)現(xiàn)解構(gòu)

4.數(shù)組解構(gòu)

let [ 變量1,變量2...] = 數(shù)組

注意:如果變量的個(gè)數(shù)比數(shù)組元素多時(shí)寨典,后面的變量賦值為underfined氛雪。
如果變量的個(gè)數(shù)比數(shù)組元素少,后面的數(shù)組元素被忽略耸成。更多情況見文檔报亩。

let [a, b, c] = [1, 2, 3];
 console.log(a) //1
 console.log(b) //2
 console.log(c) //3
5.對(duì)象解構(gòu)

(1)let { 與屬性名同名變量1, 與屬性名同名變量2...} = 對(duì)象

     // 聲明一個(gè)對(duì)象
      let obj = { uname: '吳磊', age: '22' };

      //(1) 對(duì)象解構(gòu)
      let {uname, age} = obj;
      console.log(uname); //吳磊
      console.log(b);     //22

(2)修改結(jié)構(gòu)出來的變量名稱

let { 屬性名1:自定義名1井氢,屬性名2:自定義名2...} = 對(duì)象

      // 聲明一個(gè)對(duì)象
      let obj = { uname: '吳磊', age: '22' };

      //(2)對(duì)象解構(gòu)
      let { uname: a, age: b } = obj;
      console.log(a); //吳磊
      console.log(b); //22

(3)結(jié)構(gòu)賦值時(shí)弦追,給結(jié)構(gòu)出來的變量添加默認(rèn)值。

let { 變量名 = 默認(rèn)值 } = 對(duì)象 ( 如果對(duì)象中沒有要結(jié)構(gòu)的這個(gè)變量花竞,則該變量取默認(rèn)值劲件。)

(4)防止被結(jié)構(gòu)的對(duì)象出錯(cuò),結(jié)構(gòu)時(shí)預(yù)處理

let { 變量名 } = 對(duì)象 || {}

//如果被解構(gòu)的對(duì)象為null或者undefined時(shí)约急,結(jié)構(gòu)賦值會(huì)報(bào)錯(cuò)零远。
const obj = null
const {data} = obj || {}

三、箭頭函數(shù)

1.格式

const 變量名 = 參數(shù) => 函數(shù)體

①箭頭函數(shù)的函數(shù)體只有一句代碼厌蔽,并且這句代碼的結(jié)果就是函數(shù)返回值的話牵辣,可以省略大括號(hào)和return。
②箭頭函數(shù)只有一個(gè)參數(shù)躺枕,可以省略小括號(hào)服猪。

      // 下面兩個(gè)函數(shù)時(shí)等價(jià)的
      function sum(num1, num2) {
        return num1 + num2;
      }

      const sum = (num1, num2) => num1 + num2;
2.箭頭函數(shù)中的this

箭頭函數(shù)中不綁定this,箭頭函數(shù)中的this指向是它所定義的位置的this拐云。
也就是罢猪,定義箭頭函數(shù)中的作用域的this指向誰,它就指向誰叉瘩。

   // 箭頭函數(shù)的this指向所在作用域的this.但是obj對(duì)象不產(chǎn)生作用域膳帕,所以箭頭函數(shù)的this指向window。
      var age = 100;
      var obj = {
        age: 22,
        say: () => {
          console.log(this.age);
        },
      };

      obj.say();

四、剩余參數(shù)

1.剩余參數(shù)與箭頭函數(shù)搭配

箭頭函數(shù)里沒有arguments內(nèi)置對(duì)象危彩,所以參數(shù)個(gè)數(shù)不確定時(shí)可以用"...參數(shù)名"接收剩余所有參數(shù)攒磨,存儲(chǔ)到一個(gè)數(shù)組中。

     const sum = (...args) => {
        let total = 0;
        args.forEach(value => total += value); //遍歷參數(shù)數(shù)組汤徽,實(shí)現(xiàn)求和
        console.log(total);
      };

      sum(21,34,64)
2.剩余參數(shù)可以和解構(gòu)一起使用娩缰。

當(dāng)變量個(gè)數(shù)小于數(shù)組元素個(gè)數(shù)時(shí)(對(duì)象屬性個(gè)數(shù)),用剩余參數(shù)接收剩下的所有數(shù)組元素(對(duì)象屬性)谒府,存儲(chǔ)到一個(gè)新數(shù)組中拼坎。

let [...變量名] = 數(shù)組

      let arr = [1, 2, 3, 4];
      let [a, ...b] = arr;
      console.log(a); // 1
      console.log(b); // [2,3,4]

      let obj = {uname: '吳磊',age: 22}
      let{...c} = obj;
      console.log(c);  //object{uname: '吳磊',age: 22}

五、數(shù)組的擴(kuò)展方法

1.數(shù)組的擴(kuò)展運(yùn)算符...(對(duì)象也有)

格式:...數(shù)組名

①擴(kuò)展運(yùn)算符可以將數(shù)組或者對(duì)象轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列完疫。
②console.log打印時(shí)泰鸡,會(huì)把逗號(hào)當(dāng)做分隔符自動(dòng)抹去

        let arr = [1,2,3,4];
        // ...arr  //相當(dāng)于1,2,3,4
        console.log(...arr);  //輸出結(jié)果為:1 2 3 4
2.數(shù)組擴(kuò)展運(yùn)算符的應(yīng)用----合并數(shù)組

(1)let arr3 = [ ...arr1 , ...arr2 ]
(2)arr1.push( ...arr2 )

     // 合并數(shù)組方法1
      let arr1 = [1, 2, 3];
      let arr2 = [4, 5, 6];
      let arr3 = [...arr1, ...arr2];
      console.log(arr3);

      //合并數(shù)組方法2
      let arr4 = [10,20,30];
      let arr5 = [40,50,60];
      arr4.push(...arr5);
      console.log(arr4);
3.數(shù)組擴(kuò)展運(yùn)算符的應(yīng)用----偽數(shù)組轉(zhuǎn)換成數(shù)組

let 數(shù)組名 =[ ...偽數(shù)組]

      //偽數(shù)組轉(zhuǎn)換成數(shù)組
      var lis = document.querySelectorAll('li');
      lis = [...lis];
4.數(shù)組的Array.from( )方法 (人資項(xiàng)目的日歷會(huì)用到)

Array.from ( 偽數(shù)組壳鹤,處理函數(shù) )

(1)Array.from( )方法可以將偽數(shù)組轉(zhuǎn)換成數(shù)組盛龄,返回值是新數(shù)組
(2)第一個(gè)參數(shù)是待轉(zhuǎn)化的偽數(shù)組芳誓。
(3)第二個(gè)參數(shù)是一個(gè)函數(shù)余舶,可以對(duì)每一個(gè)偽數(shù)組元素進(jìn)行處理并返回到新數(shù)組中。

      // 定義一個(gè)偽數(shù)組
      var arrayLike = {
        "0": 1,
        "1": 2,
        "length": 2,
      };
      // 將偽數(shù)組轉(zhuǎn)換成真數(shù)組兆沙,并把每一個(gè)元素乘以2
      var newarr = Array.from(arrayLike, (value,index) => value * 2);
      console.log(newarr);
5.數(shù)組的find( )方法 (重點(diǎn))-------------------->數(shù)組的some( )方法

數(shù)組名.find( function( item , index ))

(1)find( )方法可以查找數(shù)組中【第一個(gè)】滿足條件的元素欧芽。
(2)方法的返回值是第一個(gè)滿足條件的數(shù)組元素
(3)方法的參數(shù)是一個(gè)處理函數(shù)葛圃。方法會(huì)遍歷數(shù)組,每個(gè)元素都會(huì)調(diào)用處理函數(shù)憎妙。
(4)處理函數(shù)有兩個(gè)參數(shù)库正,當(dāng)前數(shù)組元素item,當(dāng)前數(shù)組元素的索引號(hào)index厘唾。
(5) 結(jié)果一定要 return 出去褥符。

      var arr = [{ id: 1 }, { id: 2 }];
      var ele = arr.find(function (item, index) {
        return item.id == 2;
      });
      console.log(ele); // {id: 2}
6.findIndex( )方法

數(shù)組名.findIndex( function( item ,index ) )

(1)與find( )方法用法完全相同。只不過findIndex( )方法查找的是索引號(hào)抚垃。
(2)findIndex( )方法的返回值是第一個(gè)滿足條件的元素的索引號(hào)喷楣。找不到則返回-1

      var arr2 = [10, 20, 30, 40];
      var i = arr2.findIndex((item) => item > 20);
      console.log(i); // 第一個(gè)大于20的元素的索引號(hào)是2
7.includes( )方法

數(shù)組.includes( 元素 )

includes( )方法可以查找數(shù)組中是否包含某個(gè)元素鹤树。返回值是布爾值铣焊。

some( )方法可以查找數(shù)組中是否有 符合條件的元素。找到一個(gè)罕伯,則不再遍歷剩余元素曲伊。
includes( )方法可以查找數(shù)組中是否有 某個(gè)元素

map( ) 和 filter( )

六追他、字符串的擴(kuò)展方法

1.模板字符串
2.startsWidth( )方法和endsWidth( )方法

原字符串.startsWith(參數(shù)字符串):表示參數(shù)字符串是否在原字符串的頭部坟募,返回布爾值
原字符串.endsWith(參數(shù)字符串):表示參數(shù)字符串是否在原字符串的尾部岛蚤,返回布爾值

3.repeat( )方法

var 新字符串 = 原字符串.repeat( 次數(shù) )

repeat( )方法可以將字符串重復(fù)n次。參數(shù)表示重復(fù)的次數(shù)懈糯,返回值是一個(gè)新字符串涤妒。

3.Set數(shù)據(jù)結(jié)構(gòu)
  • Set本身是一個(gè)構(gòu)造函數(shù),用來生成 Set 數(shù)據(jù)結(jié)構(gòu)赚哗。
  • Set類似于數(shù)組Array届腐,但是成員的值都是唯一的,沒有重復(fù)的值蜂奸。
    ①參數(shù)是一個(gè)數(shù)組犁苏。
    ②返回值是一個(gè)Set數(shù)據(jù)結(jié)構(gòu)。

var 變量名 = new Set( [... ] )

        const set = new Set([1,1,2,2]);
        console.log(set.size);  //返回Set數(shù)據(jù)結(jié)構(gòu)的長度
        console.log(set);       //返回Set數(shù)據(jù)結(jié)構(gòu)本身  {1, 2}

        var arr = [...set]; //數(shù)組去重
        console.log(arr); 
4.利用Set數(shù)據(jù)結(jié)構(gòu)扩所、解構(gòu) 進(jìn)行數(shù)組去重

var Set數(shù)據(jù)名稱 = new Set(數(shù)組)
數(shù)組 = Array.from(Set數(shù)據(jù)名稱)

5.Set結(jié)構(gòu)的方法
  • add(value):添加某個(gè)值围详,返回 Set 結(jié)構(gòu)本身
  • delete(value):刪除某個(gè)值,返回一個(gè)布爾值祖屏,表示刪除是否成功
  • has(value):返回一個(gè)布爾值助赞,表示該值是否為 Set 的成員
  • clear():清除所有成員,沒有返回值
       const set = new Set(["a","b"]);
        //添加值袁勺”⑹常可以連寫。
        set.add('C').add("D");
        // 刪除值期丰,返回一個(gè)布爾值群叶,表示是否刪除成功。
        const result = set.delete('C');
        console.log(result);
        // 判斷Set中是否存在該參數(shù)钝荡。返回一個(gè)布爾值街立。
        const result2 = set.has('a')
        console.log(result2);
        // 清除Set結(jié)構(gòu)中的所有值埠通。
        set.clear();
6.遍歷Set結(jié)構(gòu)

Set 結(jié)構(gòu)名.forEach( function( value ) { } )

Set結(jié)構(gòu)也有forEach( )方法,但參數(shù)只有一個(gè)端辱,表示當(dāng)前元素。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舞蔽,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子喷鸽,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸡岗,死亡現(xiàn)場離奇詭異,居然都是意外死亡轩性,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門揣苏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卸察,你說我怎么就攤上這事】又剩” “怎么了?”我有些...
    開封第一講書人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵涡扼,是天一觀的道長。 經(jīng)常有香客問我吃沪,道長,這世上最難降的妖魔是什么什猖? 我笑而不...
    開封第一講書人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任票彪,我火速辦了婚禮,結(jié)果婚禮上卸伞,老公的妹妹穿的比我還像新娘抹镊。我一直安慰自己,他們只是感情好荤傲,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著颈渊,像睡著了一般遂黍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上俊嗽,一...
    開封第一講書人閱讀 51,482評(píng)論 1 302
  • 那天雾家,我揣著相機(jī)與錄音,去河邊找鬼绍豁。 笑死芯咧,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播敬飒,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼邪铲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了无拗?” 一聲冷哼從身側(cè)響起带到,我...
    開封第一講書人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎英染,沒想到半個(gè)月后揽惹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡四康,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年搪搏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闪金。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡疯溺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出毕泌,到底是詐尸還是另有隱情喝检,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布撼泛,位于F島的核電站挠说,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏愿题。R本人自食惡果不足惜损俭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望杆兵。 院中可真熱鬧仔夺,春花似錦、人聲如沸日裙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至联四,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間灰羽,已是汗流浹背鱼辙。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來泰國打工倒戏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人傍念。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓憋槐,卻偏偏與公主長得像淑趾,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子近范,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • ES6語法 let let聲明的變量只在所處于的塊級(jí)有效 注意:使用let關(guān)鍵字聲明的變量才具有塊級(jí)作用域评矩,使用v...
    Grandperhaps閱讀 296評(píng)論 0 0
  • 2.什么是函數(shù)柯里化斥杜? 答:是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)(最初函數(shù)的第一個(gè)參數(shù))的函數(shù)果录,并且返回接...
    Rain_Wuu閱讀 2,268評(píng)論 1 8
  • ECMASript 6 新特性(ES6) 1.1 let關(guān)鍵字 let 關(guān)鍵字用來聲明變量,使用 let 聲明的變...
    wantLG閱讀 205評(píng)論 0 0
  • 1.編程思想 2.對(duì)象與類 3.面向?qū)ο蟀鎡ab 欄切換 4.構(gòu)造函數(shù)和原型 5.繼承 6.ES5新增方法 7.函...
    Scincyc閱讀 560評(píng)論 0 0
  • 所用域 什么是作用域 變量起作用的范圍 什么是塊級(jí)作用域棋恼,使用代碼塊限定的作用域是塊級(jí)作用域(let聲明的變量是塊...
    js66閱讀 329評(píng)論 0 0