當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Introduction to ES6上课笔记

發布時間：2023/12/10 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 Introduction to ES6上课笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

課程鏈接：https://scrimba.com/g/gintrotoes6

這個網站有幾個熱門的前端技術棧的免費課程，上課體驗除了英語渣只能看代碼理解聽老師講的一知半解之外，是極佳的學編程的網站了。你跟老師同一個編譯器上編譯代碼，超強體驗！！如果跟我一樣英語渣，最好結合一下ES6相關書看一下，這樣聽不懂也看代碼也可以知道點在哪里了。

1.Template Literals

?let word1 = 'Liu';

let word2 = 'li';

舊：

const fullName = word1 + ''+word2;

fullName = word1 + ''\n + word2;? ? ?//Liu

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?li

新:?

const fullName = `${word1} ${word2}`;? ?//Liu li

fullName =??`${word1}

${word2}`;? ? ?//Liu

? ? ? ? ? ? ? ? ? ? ? ?li

2.Destructuring Objects

const personalInformation = {

firstName: 'Dylan', lastName: 'Israel', city: 'Austin', state: 'Texas', zipCode: 73301 }; const {firstName, lastName} = personalInformation;
const {firstName: fn, lastName: ln} = personalInformation; console.log(`${firstName} ${lastName}`);
console.log(`${fn} ${ln}`);

3.Destructuring Arrays

let [firstName, middleName, lastName] = ['Dylan', 'Coding God', 'Israel']; lastName = 'Clements'; console.log(lastName)? ? //Clements

4.Object Literal

5.Object Literal(Challenge)

function addressMaker(address) {

const {city, state} = address; const newAddress = { city, state, country: 'United States' };? } addressMaker({city: 'Austin', state: 'Texas'});

6.For of Loop

let fullName = "Dylan Coding God Israel"; for (const char of fullName) { console.log(char);? ? ? ? ? ? ? ? //D y l a n .... }

7.For of Loop(Challenge)

let incomes = [62000, 67000, 75000]; for (let income of incomes) { income += 5000; } console.log(incomes);? ? ?//?[62000, 67000, 75000] ?

8.Spread Operator

let example1 = [1,2,3,4,5,6]; let example2 = [...example1]; example2.push(true); console.log(example2);? ?//[1,2,3,4,5,6,true]

9.Rest Operator

function add(...nums){ console.log(nums)? ? //[4,5,6,7,8] }? add(4,5,6,7,8);

10.Arrow Functions

舊： function add(...nums) { let total = nums.reduce(function (x, y) { return x+y; });? console.log(total); //36 } add(4, 5, 7, 8, 12) 新： function add(...nums) { let total = nums.reduce((x, y) => { return x+y; }); console.log(total); }
add(4, 5, 7, 8, 12) 或者是進一步的 function?add(...nums) { let?total?=?nums.reduce((x,?y) => x+y); console.log(total); } add(4,?5,?7,?8,?12)

11.Default? Param

function add(numArray = []) { let total =0; numArray.forEach((element) => { total += element; }); console.log(total);? ? //0 } add();

12.includes（除IE）

舊： let numArray = [1,2,3,4,5]; console.log(numArray.indexOf(0))? ? ? //-1 新： let numArray = [1,2,3,4,5]; console.log(numArray.includes(0))? ? ?//false

13.Let&Const

var: if?(false) { var?example=5; } console.log(example)? ?//null let: if (false) { let example =5; } console.log(example)? ?//ReferenceError const: const example = []; example =3; console.log(example)? ?//Error ? const?example=[]; example.push(3); console.log(example)? ?//[3] ? const example = {}; example.firstName ='Dylan'; console.log(example)? //{firstName:"Dylan"}

14.padStart()&padEnd()

let example = 'Dylan'; console.log(example.padStart(10, 'a'));? //aaaaaDylan ? let example = 'Dylan'; console.log(example.padEnd(10, 'a'));? //Dylanaaaaa ? let?example?=?'Dylan Irseal'; console.log(example.padEnd(10,?'a'));? //Dylan Irseal

15.Import&Export?

---------文件Animal.js----------- export class Animal { constructor(type, legs) { this.type = type; this.legs = legs; }? makeNoise(loudNoise = "loud"){ console.log(loudNoise); } } ---------文件index.js---------- import { Animal } from './animal.js'; let cat = new Animal('Cat', 4); cat.legs = 3; cat.makeNoise("meow");? //meow console.log(cat.legs)? ? //3

16.Classes

-------文件Animal.js---------- export class Animal { constructor(type, legs) { this.type = type; this.legs = legs; }? makeNoise(loudNoise = "loud"){ console.log(loudNoise); } ? get metaData(){ return `Type:${this.type},Legs:${this.legs}`; } ? static return10(){ return 10; } } ? export class Cat extends Animal{ constructor(type,legs,tail){ super(type,legs); this.tail = tail; } makeNoise(loudNoise = "meow"){ console.log(loudNoise); } } ------文件index.js-------- import { Animal ,Cat} from './animal.js'; let cat = new Cat('Cat',4,"long"); console.log(Animal.return10());? //10 console.log(cat.metaData);? // Type:Cat,Legs:4 ? cat.makeNoise(); //meow console.log(cat.metaData) //Type:Cat,Legs:4 console.log(cat.tail)//long

17.Trailing Commas

沒聽懂

18.Async&Await

18.Sets

const exampleSet = new Set([1,1,1,1,2,2,2,2]); exampleSet.add(5); exampleSet.add(5).add(17); console.log(exampleSet.size);? ?//4 ---------delete()----------
console.log(exampleSet.delete(5));? //true console.log(exampleSet.size);? ?//3 ----------clear()----- exampleSet.clear(); console.log(exampleSet.size);? //0

轉載于:https://www.cnblogs.com/GuliGugaLiz/p/10335067.html

總結

以上是生活随笔為你收集整理的Introduction to ES6上课笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： html5 type submit,in
下一篇： jer中无html文件,index.ht