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

這個網(wǎng)站有幾個熱門的前端技術棧的免費課程，上課體驗除了英語渣只能看代碼理解聽老師講的一知半解之外，是極佳的學編程的網(wǎng)站了。你跟老師同一個編譯器上編譯代碼，超強體驗！！如果跟我一樣英語渣，最好結合一下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

function addressMaker(city, state) { const newAdress = {newCity: city, newState: state}; console.log(newAdress);? ?//?{newCity: "Austin", newState: "Texas"} } addressMaker('Austin', 'Texas'); ===========ES6==== function addressMaker(city, state) { const newAdress = {city, state}; console.log(newAdress);? ?//?{city: "Austin", state: "Texas"} } addressMaker('Austin', 'Texas');

?

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

const apiUrl = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime';
function getTop100Campers() { fetch(apiUrl) .then((r) => r.json()) .then((json) => { console.log(json[0]) }).catch((error) => {console.log('faild');}); } getTop100Campers();? //{username:"sjames1958gm",img:"https//avatars1.githubusercontent.com/u/4639625?v=4",alltime:8826,recent:104,lastUpadate:"2018-04-04T09:10:12.456Z"}
-----await--- const apiUrl = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime';
function getTop100Campers() { const response = await fetch(aipUrl); const json = await response.json(); ? console.log(json[0]); } getTop100Campers();? //{username:"sjames1958gm",img:"https//avatars1.githubusercontent.com/u/4639625?v=4",alltime:8826,recent:104,lastUpadate:"2018-04-04T09:10:12.456Z"} -----async---- 沒聽懂 function resolveAfter3Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 3000); }); }
// resolveAfter3Seconds().then((data) => { // console.log(data); // });
async function getAsyncData() { const result = await resolveAfter3Seconds(); console.log(result);? ? ? ? ? ? ?//resolved }
getAsyncData();

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

轉(zhuǎn)載于:https://www.cnblogs.com/GuliGugaLiz/p/10335067.html

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。