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

新:

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

fullName = `${word1}

${word2}`; //Liu

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