开发React.js时，需要知道的ES6的新特性

Posted 2021-03-30 LightMeUp

/** * var * `var` variables are accessed in the whole function scope. */function sayHello1() { for (var i = 0; i < 5; i++) { console.log(i); }
 console.log(i); // 5}sayHello1();

/** * let * `let` variables are only accessable in that block where it's defined. */function sayHello2() { for (let i = 0; i < 5; i++) { console.log(i); }
 console.log(i); // 'i' is not defined}sayHello2();

/** * const * `const` variables are only accessable in that block where it's defined. */const i = 1;i = 2; // 'i' is read-only.

/** * Dont use 'var' unless you know what you want to do. * Use 'const' and 'let'. */



/** * Object */const person = { name: 'Mosh', walk: function () { }, // method talk() { } // method};
person.talk();person.name = 'John';
const targetMember = 'name';person[targetMember] = 'John';


/** * this */const person2 = { name: 'John', walk() { console.log(this); }};person2.walk();
const walk = person.walk;console.log(walk);walk(); // undefined.



/** * functions are objects. */const walk2 = person.walk.bind(person2);walk2(); // the same as 'person2.walk()'.



/** * Arrow functions */const square = function (number) { return number * number;};
const square2 = number => number * number;console.log(square2(2));
const jobs = [ { id: 1, isActive: true }, { id: 2, isActive: true }, { id: 3, isActive: false },];
const activeJobs = jobs.filter(function (job) { return job.isActive;})
const activeJobs2 = jobs.filter((job) => job.isActive);


/** * Arrow functions and 'this' *  * Arrow functions don't rebind 'this' keyword. */const person3 = { talk() { console.log('this', this); }};person3.talk();
const person4 = { talk() { setTimeout(function () { console.log('this', this); }, 1000); }};person4.talk();
const person5 = { talk() { setTimeout( () => console.log('this', this), 1000); }};person5.talk();


/** * Array.map */const colors = ['red', 'green', 'blue'];
colors.map((color) => '<li>' + color + '</li>');
colors.map(color => `<li>${color}</li>`);


/** * Object destructuring */const address = { street: '', city: '', country: '',};
const { street, city, country } = address;console.log(street, city, country);
// 'st' is alias for 'street'.const { street: st } = address;
console.log(st);


/** * Spread Operator */const first = [1, 2, 3];const second = [4, 5, 6];
const combined = first.concat(second);
const combined2 = [...first, 10, ...second];
const first_clone = [...first];

const first_prop = { name: 'Mosh' };const second_prop = { job: 'Instructor' };
const props = { ...first_prop, ...second_prop, location: 'Australia' };console.log(props); // Object { name: "Mosh", job: "Instructor", location: "Australia" }
const first_prop_clone = { ...first_prop };


/** * Classes */class PPerson { constructor(name) { this.name = name; }
 walk() { console.log("walk"); }}
const person6 = new PPerson("John");person6.walk();


/** * Inheritance */class Teacher extends PPerson { constructor(name, degree) { super(name); this.degree = degree; }
 teach() { console.log("teach", this.degree); }}const teacher = new Teacher("John", 1);teacher.teach();teacher.walk();


/** * Modules */
// person.js
// teacher.js
/** * We need to export the specific class/method to the public. */export class XXX { }
export const func = () => { };
/** * Then other files can import this class */import { Person } from "./person";import { Teacher } from "./teacher";

/** * Named and Default Exports */
export default class YYY { }