久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > ES6新特性與重點(diǎn)知識(shí)總結(jié)

        ES6新特性與重點(diǎn)知識(shí)總結(jié)

        來(lái)源:千鋒教育
        發(fā)布人:wjy
        時(shí)間: 2022-06-01 14:07:00 1654063620

          ### 一、ES6變量聲明

          - var 聲明的變量,沒(méi)有“塊級(jí)作用域”的限制;

          - let / const 聲明的變量,具有“塊級(jí)作用域”。

          ```text

          {

          var a = 1;

          let b = 2;

          const c = 3;

          let fn = function() {

          console.log(4)

          }

          }

          console.log(a); // 1

          console.log(b); // 報(bào)錯(cuò)ReferenceError,undefined

          console.log(c); // 報(bào)錯(cuò)ReferenceError,undefined

          fn(); // ReferenceError: fn is not defined

          ```

          - var 聲明的變量存在“變量提升”,let / const沒(méi)有。

          ```text

          var tmp = new Date();

          function fn() {

          console.log(tmp);

          if (false) {

          // var tmp 變量提升

          var tmp = 'hello world';

          }

          }

          fn()

          ```

          - const 聲明的是常量,不能被修改。

          ```text

          const c = 1;

          c = 2; // TypeError報(bào)錯(cuò)

          ```

          ### 二、解構(gòu)賦值

          ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱(chēng)為解構(gòu)。

          - 數(shù)組解構(gòu)賦值

          ```text

          let arr = [1, 'hello', [100,200], {a:1, b:2}, true, undefined];

          let [a, b, c, d, e, f] = arr

          console.log(a,b,c,d,e,f)

          ```

          - 使用解構(gòu)賦值,交換兩個(gè)變量的值

          ```text

          let x = 1, y = 2;

          [x, y] = [y, x]

          console.log(x, y)

          ```

          - 對(duì)象解構(gòu)賦值

          ```text

          let obj = {

          a: 1,

          b: [1,2,3],

          c: false,

          d: {name: 'geekxia', age: 10 }

          }

          let { a, b, c, d, e } = obj

          console.log(a, b, c, d, e)

          // 別名

          let { b: bb } = obj

          console.log(bb)

          ```

          ### 三、字符串方法擴(kuò)展

          ```text

          let str = 'hello world, my name is geekxia.';

          // 獲取指定索引處理字符

          console.log(str.charAt(0))

          // 查詢(xún)字符串中是否包含指定片段,如果存在返回索引號(hào),如果不存在返回-1

          console.log(str.indexOf('name0'))

          // 判斷字符串是否包含指定片段,返回布爾值

          console.log(str.includes('geekxia'))

          // 判斷字段串是否以指定片段開(kāi)頭,返回布爾值

          console.log(str.startsWith('he'))

          // 判斷字段串是否以指定片段結(jié)尾,返回布爾值

          console.log(str.endsWith('he'))

          // 對(duì)字符串重復(fù)n次,返回新的字符串

          console.log(str.repeat(2))

          // 對(duì)字符串進(jìn)行頭部補(bǔ)全,返回新的字符串

          console.log(str.padStart(100, '01'))

          // 對(duì)字符串進(jìn)行尾部補(bǔ)全,返回新的字符串

          console.log(str.padEnd(100, '01'))

          ```

          ### 四、Math方法擴(kuò)展

          ES6 在 Math 對(duì)象上新增了 17 個(gè)與數(shù)學(xué)相關(guān)的方法。

          ```text

          // 去除小數(shù)點(diǎn)部分

          console.log(Math.trunc(5.5))

          // 判斷指定值是正數(shù)(1),負(fù)數(shù)(-1),還是零(0)

          console.log(Math.sign(0))

          // 計(jì)算立方根

          console.log(Math.cbrt(-8))

          // 計(jì)算兩個(gè)數(shù)的平方和的平方根

          console.log(Math.hypot(3, 4))

          // 指數(shù)運(yùn)算符

          console.log(2**4)

          ```

          ### 五、函數(shù)擴(kuò)展

          - 函數(shù)與解構(gòu)賦值結(jié)合使用

          ```text

          function add ({ a = 0, b = 0 }) {

          console.log(a + b)

          }

          add({a:2, b:3}) // 5

          add({a:2}) // 2

          add({}) // 0

          add() // 報(bào)錯(cuò)

          ```

          - 函數(shù)的 rest 參數(shù)

          ```text

          function sum(...values) {

          let total = 0;

          for (let value of values) {

          total += value

          }

          console.log(total)

          }

          sum(1,2,3)

          // 允許尾逗號(hào)

          sum(1,2,3,4,5,)

          ```

          ### 六、箭頭函數(shù)

          ```text

          let f1 = v => v;

          let f2 = () => 5;

          let f3 = (a, b) => a + b;

          console.log(f1(1))

          console.log(f2())

          console.log(f3(1,2))

          ```

          - 由于大括號(hào)被解釋為代碼塊,所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象,必須在對(duì)象外面加上括號(hào)。

          ```text

          // 返回一個(gè)對(duì)象,對(duì)象要用()包裹

          let f4 = (a, b) => ({a, b})

          console.log(f4(1,2))

          ```

        ES6新特性與重點(diǎn)知識(shí)總結(jié)

          ### 七、擴(kuò)展運(yùn)算符

          擴(kuò)展運(yùn)算符(spread)是三個(gè)點(diǎn)(...)。它好比 rest 參數(shù)的逆運(yùn)算,將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

          - 數(shù)組的操作、合并

          ```text

          let arr1 = [1, 2, 3];

          let arr2 = [4, 5, 6];

          let arr = [...arr1, ...arr2, 7, 8, 9, 10];

          console.log(arr)

          ```

          - 與解構(gòu)賦值配合,實(shí)現(xiàn)數(shù)組的截取

          ```text

          let arr = [1, 2, 3, 4, 5, 6]

          let [a, b, ...arr1] = arr

          console.log(arr1)

          ```

          - 對(duì)象的操作、合并:

          ```text

          let obj1 = { a:1, b:2 }

          let obj2 = { c:3, d:4 }

          let obj = { ...obj1, ...obj2, e:5, a:6 }

          console.log(obj)

          ```

          - 與解構(gòu)賦值配合,操作對(duì)象:

          ```text

          let obj = { a:1, b:2, c:3, d:4, e:5 }

          let { a, b, ...obj1 } = obj

          console.log(obj1)

          ```

          ### 八、Array擴(kuò)展

          - 把類(lèi)數(shù)組轉(zhuǎn)化成真正的數(shù)組:

          ```text

          let arrayLike = {

          '0': 'a',

          '1': 'b',

          '2': 'c',

          length: 3

          }

          var arr = Array.from(arrayLike);

          console.log(arr) // ['a', 'b', 'c']

          ```

          - 把一組值,轉(zhuǎn)換為數(shù)組。Array.of總是返回參數(shù)值組成的數(shù)組。如果沒(méi)有參數(shù),就返回一個(gè)空數(shù)組。

          ```text

          let a = Array.of(1,2); // [1, 2]

          let b = Array.of(); // []

          let c = Array.of(undefined); // [undefined]

          console.log(a)

          console.log(b)

          console.log(c)

          ```

          - 數(shù)組實(shí)例的find方法,用于找出第一個(gè)符合條件的數(shù)組成員。它的參數(shù)是一個(gè)回調(diào)函數(shù),所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù),直到找出第一個(gè)返回值為true的成員,然后返回該成員。如果沒(méi)有符合條件的成員,則返回undefined。

          ```text

          let res1 = [1,2,-5,10].find((ele,index,arr) => ele < 0);

          console.log(res1)

          ```

          - 數(shù)組實(shí)例的findIndex方法的用法與find方法非常類(lèi)似,返回第一個(gè)符合條件的數(shù)組成員的位置,如果所有成員都不符合條件,則返回-1。

          ```text

          let res2 = [1,5,10,15].findIndex((ele,index,arr) => ele > 9);

          console.log(res2)

          ```

          - 數(shù)組填充

          ```text

          let res3 = new Array(4).fill(7);

          console.log(res3)

          ```

          - 判斷指定數(shù)組中是否包含某個(gè)值

          ```text

          let arr = [1, 2, 3]

          console.log([1,2,3].includes(2))

          console.log([1,2,3].includes(0,1)) // 第二參數(shù)表示索引號(hào)

          ```

          ### 九、對(duì)象擴(kuò)展

          ES6 允許直接寫(xiě)入變量和函數(shù),作為對(duì)象的屬性和方法。這樣的書(shū)寫(xiě)更加簡(jiǎn)潔。

          ```text

          let foo = 'geekxia'

          function fn1() {

          console.log(1)

          }

          const obj = {

          foo,

          bar: 'hello',

          fn1,

          fn2() {

          console.log(2)

          },

          fn3: function() {

          console.log(3)

          }

          }

          obj.fn1()

          obj.fn2()

          obj.fn3()

          ```

          ### 十、Symbol類(lèi)型

          ES6 引入了一種新的原始數(shù)據(jù)類(lèi)型Symbol,表示獨(dú)一無(wú)二的值。它是 JavaScript 語(yǔ)言的第七種數(shù)據(jù)類(lèi)型,前六種是:undefined、null、布爾值(Boolean)、字符串(String)、數(shù)值(Number)、對(duì)象(Object)。

          ### 十一、Set結(jié)構(gòu)

          ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類(lèi)似于數(shù)組,但是成員的值都是唯一的,沒(méi)有重復(fù)的值。Set 本身是一個(gè)構(gòu)造函數(shù),用來(lái)生成 Set 數(shù)據(jù)結(jié)構(gòu)。

          - 使用Set結(jié)構(gòu),實(shí)現(xiàn)數(shù)組去重

          ```text

          let arr1 = [1,2,2,2,3,4]

          let arr2 = [...new Set(arr1)]

          console.log(arr2)

          ```

          ### 十二、Map結(jié)構(gòu)

          ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類(lèi)似于對(duì)象,也是鍵值對(duì)的集合,但是“鍵”的范圍不限于字符串,各種類(lèi)型的值(包括對(duì)象)都可以當(dāng)作鍵。也就是說(shuō),Object 結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng),Map 結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng),是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。如果你需要“鍵值對(duì)”的數(shù)據(jù)結(jié)構(gòu),Map 比 Object 更合適。

          ```text

          const map = new Map();

          map.set({ p: 'hello world'}, 1)

          map.set('hello', [1,2,3])

          console.log(map.size)

          ```

          ### 十三、Promise

          Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。

          ```text

          let promise = new Promise(function(resolve, reject) {

          setTimeout(()=>{

          if(false) {

          resolve('ok')

          } else {

          reject({err: -1, msg: '錯(cuò)誤發(fā)生了'})

          }

          }, 1000)

          })

          promise.then(res=>{

          console.log(res)

          }).catch(err=>{

          console.log(err)

          }).finally(()=>{

          console.log('總會(huì)執(zhí)行')

          })

          ```

          ### 十四、循環(huán)遍歷

          - ES6 借鑒 C++、Java、C# 和 Python 語(yǔ)言,引入了for...of循環(huán),作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一方法。

          - for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類(lèi)似數(shù)組的對(duì)象(比如arguments對(duì)象、DOM NodeList 對(duì)象)、Generator對(duì)象,以及字符串。

          - for...of 可以與 break / continue / return 配合使用。

          ```text

          let arr = [1, 2, 3, 4, 5]

          for(let ele of arr) {

          if (ele > 2) {

          break

          }

          console.log(ele)

          }

          ```

          - 對(duì)于普通的對(duì)象,for...of結(jié)構(gòu)不能直接使用,會(huì)報(bào)錯(cuò)。使用 for...in 來(lái)遍歷普通對(duì)象。

          ```text

          let obj = {

          a: 1,

          b: 2,

          c: 3

          }

          for(let k in obj) {

          console.log(obj[k])

          }

          ```

          ### 十五、async / await

          ```text

          function add(a,b) {

          // 返回一個(gè)promise對(duì)象

          return new Promise((resolve, reject)=>{

          setTimeout(()=>{

          resolve(a+b)

          }, 2000)

          })

          }

          // await is only valid in async function

          // await 只在 async函數(shù)中有效

          async function testAdd() {

          let num = await add(2,3)

          console.log(num)

          }

          testAdd()

          ```

          ### 十六、class類(lèi)與繼承

          ```text

          class Point {};

          class ColorPoint extends Point {

          constructor(x, y, color) {

          super(x, y); // 調(diào)用父類(lèi)的 constructor(x, y)

          this.color = color;

          }

          toString() {

          return this.color + ' ' + super.toString(); // 調(diào)用父類(lèi)的toString()方法

          }

          }

          ```

          ### 十七、ES6模塊化

          - 使用`export default`拋出模塊

          ```text

          export default xxx; // 拋出模塊

          import xxx from './xxx' // 引入模塊

          ```

          - 使用 `export` 拋出模塊

          ```js

          export const a = 1;

          export function foo() {} // 拋出

          import { a, foo } from './xxx' // 引入

          ```

          ### 十八、裝飾器

          許多面向?qū)ο蟮恼Z(yǔ)言都有修飾器(Decorator)函數(shù),用來(lái)修改類(lèi)的行為。

          - 裝飾器用于修飾一個(gè)類(lèi):

          ```text

          @decorator

          class A {};

          ```

          - 裝飾器用于修飾一個(gè)類(lèi)的方法:

          ```text

          class Person {

          @readonly

          name() { return `${this.name}` }

          }

          ```

          更多關(guān)于“html5培訓(xùn)”的問(wèn)題,歡迎咨詢(xún)千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專(zhuān)業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的提升班,高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        今日頭條展現(xiàn)量是什么?今日頭條展現(xiàn)量規(guī)則分析

        目前頭條用戶(hù)會(huì)發(fā)現(xiàn)微頭條和問(wèn)答新增了“展現(xiàn)量”指標(biāo)。那么這個(gè)今日頭條展現(xiàn)量是什么意思呢?如何提高呢?下面千鋒教育小編就和大家說(shuō)...詳情>>

        2023-09-19 09:15:47
        我想直播帶貨去哪里找貨源一件代發(fā)

        現(xiàn)在直播帶貨是一個(gè)非?;鸬男袠I(yè),越來(lái)越多的人進(jìn)入到這個(gè)圈子,但是,認(rèn)真地說(shuō),直播帶貨能不能賺到錢(qián)還是要看自己。雖然這一行業(yè)火,收入高,...詳情>>

        2023-09-19 08:41:02
        入駐短視頻mcn需要多少錢(qián)?有哪些費(fèi)用?

        眾所周知,現(xiàn)在短視頻成了很多人的自媒體創(chuàng)業(yè)道路之一,越來(lái)越多人喜歡在網(wǎng)上消遣時(shí)間,購(gòu)物等。也有很多優(yōu)秀的博主去做出很多新的內(nèi)容,那么入...詳情>>

        2023-09-19 08:12:47
        短視頻帶貨應(yīng)該注冊(cè)什么公司?需要什么資料?

        短視頻大家應(yīng)該都非常熟悉,現(xiàn)在很多人都喜歡在閑暇的時(shí)候刷短視頻,短視頻平臺(tái)也開(kāi)始了直播帶貨,商家也都開(kāi)始創(chuàng)業(yè)了,那么短視頻帶貨需要營(yíng)業(yè)...詳情>>

        2023-09-19 08:09:31
        怎樣投抖加不花錢(qián)?別人能看出來(lái)嗎?

        抖音一些視頻為了獲取更多點(diǎn)擊,一些博主機(jī)會(huì)投抖加。其實(shí)抖加的投放沒(méi)有絕對(duì)正確的方法,而不同賬號(hào)和視頻投放的策略都是不一樣的,不過(guò)一般情...詳情>>

        2023-09-19 08:00:10
        開(kāi)班信息
        北京校區(qū)
        • 北京校區(qū)
        • 大連校區(qū)
        • 廣州校區(qū)
        • 成都校區(qū)
        • 杭州校區(qū)
        • 長(zhǎng)沙校區(qū)
        • 合肥校區(qū)
        • 南京校區(qū)
        • 上海校區(qū)
        • 深圳校區(qū)
        • 武漢校區(qū)
        • 鄭州校區(qū)
        • 西安校區(qū)
        • 青島校區(qū)
        • 重慶校區(qū)
        • 太原校區(qū)
        • 沈陽(yáng)校區(qū)
        • 南昌校區(qū)
        • 哈爾濱校區(qū)
        普洱| 山阳县| 民乐县| 洛川县| 郯城县| 隆化县| 宁海县| 肥东县| 宣城市| 农安县| 磐安县| 拜城县| 雷波县| 湘西| 嵩明县| 微博| 游戏| 西盟| 科技| 涟源市| 吴堡县| 平舆县| 苍山县| 沂南县| 定兴县| 牟定县| 万盛区| 喀喇沁旗| 外汇| 上栗县| 巴楚县| 太仆寺旗| 孝感市| 巧家县| 安化县| 江川县| 海原县| 遂宁市| 泗洪县| 石林| 彩票|