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
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
console.log(exampleSet.delete(5)); //true
console.log(exampleSet.size); //3
----------clear()-----
exampleSet.clear();
console.log(exampleSet.size); //0
