ES6 basic interview arrangement

  • Development environments have become ubiquitous
  • The browser environment is not well supported (requires development environment compilation)
  • Focus on common grammar
  • Focus: use of development environment + master of key syntax

Question 1. How to use ES6 modularization and how to package the development environment?

Modular use and compilation environment

Modularity-export syntax

//utils1.js
export default{
    a:100
}

//utils2.js
export function fn1(){
    alert('fn1')
}

export function fn2(){
    alert('fn2');
}
Copy the code
// index.js
import utils1 from './utils1.js'
import {fn1,fn2} from  './utils2/js'

console.log(utils1);
fn1();
fn2();
Copy the code

Modularity – Development Environment – Babel

  • Have a Node environment on your computer and run NPM init

  • npm install –save-dev babel-core babel-preset-es2015 babel-preset-latest

  • Create the.babelrc file

  • npm install –global babel-cli

  • babel –version

  • Create the. / SRC/index. Js

Modularity – Development Environment – Webpack

  • npm install webpack babel-loader –save-dev
  • Configuration webpack. Config. Js
  • Configure script in package.json
  • Run the NPM start

Modularity – Development environment -rollup

Liverpoolfc.tv: rollupjs.org/guide/en/

English website: www.rollupjs.com/guide/intro…

  • npm init

  • npm i –save-dev rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest babel-core

  • Configuration. The babelrc

  • Configure a rollup. Config. Js

  • Rollup function is single, webPack function is powerful.

  • Reference design Principles and Linux/Unix Design Ideas

  • Tools should be as single, integrated and extensible as possible

Many modular standards about JS

  • No modularity
  • AMD becomes standard, require.js (also has CMD (domestic standard))
  • Front-end packaging tool that is nodeJS modular can be used (CommentJS standard)
  • ES6 came along and wanted to unify all the current modular standards
  • Nodejs is actively supported and browsers are not yet unified
  • You can make your own lib, but don’t make your own standard.

Answer to questions:

  • Syntax: import export(note the presence of default)
  • Environment: Babel compiles ES6 syntax, modularity available with WebPack and rollup
  • Extension: Talk about your expectations for modular standards to be unified

Question 2. What is the difference between ordinary Class constructors?

  • What is the syntax of class?
  • Class versus constructor? What are the advantages and disadvantages?

JS constructor review

Example: React example

// the constructor(props){super(props); this.state = { data:[] } } render(){ return { <div>hello imooc</div> } } componentDidMount(){ } }Copy the code

JS constructor:

Function MathHandle(x,y){this.x = x; this.y = y; Mathhandle.prototype. Add = function(){return this.x + this.y; }; Var m = new MathHandle(1,2) console.log(m.dd ()) // all constructor instances have methods that extend their prototypesCopy the code

Class basic syntax

/** * class constructor(x,y){this.x = x; this.y = y; } add(){ return this.x + this.y; }} const m = new MathHandle(1,2); console.log(m.add());Copy the code

Syntactic sugar

class MathHandle{ // ... } typeof MathHandle / / "function" MathHandle. = = = MathHandle prototype. The constructor; //true // This is a syntactic sugar form that looks different from what it actually does. // copy Java C# by force, but lose its nature and individuality.Copy the code

Syntactic sugar, they’re essentially the same thing, and then they do the same thing in a much cleaner way.

/ / constructor explicit prototype constructor MathHandle attribute is equal to the constructor itself. The prototype. The constructor = = = MathHandle / / true / / constructor out new instances have an implicit prototype, Mathhandle.prototype === mathhandle.prototype; // trueCopy the code

inheritance

From abstraction to clustering, from high level to low level

Function Animal(){this.eat = function(){console.log(' Animal eat'); }} function Dog(){this.bark = function(){console.log(' bark'); } } Dog.prototype = new Animal(); Var hashiqi = new Dog(); hashiqi.bark(); hashiqi.eat();Copy the code

Implement inheritance with class

class Animal{ constructor(name){ this.name = name; } eat(){ console.log(`${this.name} eat`) } } class Dog extends Animal{ constructor(name){ super(name); this.name = name; } say(){ console.log(`${this.name} say`); }} const dog = new dog (' husky ') dog.say() dog.eat()Copy the code

conclusion

  • Class is syntactically more compatible with object-oriented writing
  • Class implementation inheritance is easier to read and understand
  • Easier to write for back-end languages like Java
  • The essence is syntax sugar, use prototype

Basic use and principles of Promise.

  • Callback Hell can be viewed-> JavaScript Asynchronous Programming Guide: Callback Hell
  • The grammar of the Promise

Callback Hell

function loadingImg(src, callback, fail){
    var img = document.createElement('img');
    img.onload = function(){
        callback(img);
    }
    img.onerror = function(){
        fail();
    }
    img.src = src;
}
var src = "https://profile.csdnimg.cn/9/F/8/3_april_4";
loadingImg(src,function(img){
    console.log(img.width);
},function(){
    console.error('failed');
})

Copy the code

Make a Promise

Using the modified method of Promise:

function loadingImg(src){ const promise = new Promise(function(resolve,reject) { var img = document.createElement('img')  img.onload = function(){ resolve(img); } img.onerror = function(){ reject(); } img.src = src; }) return promise; } var src = "https://profile.csdnimg.cn/9/F/8/3_april_4"; var result = loadingImg(src); result.then(function(img){ console.log(img.width); },function(){ console.log('failed'); }); result.then(function(img){ console.log(img.height); });Copy the code
  • What are the basic uses of promises?

Promise problem summary

  • New Promise instance, and return
  • The new Promise is passed in as a function that takes resolve reject
  • Resolve () on success, reject() on failure
  • Then monitor result

Summarize other common ES6 features

(3 ~ 5)

  • Let /const (variable/constant)
  • Multi-line string/template variable
  • Deconstruction assignment
  • Block-level scope
  • Function default arguments
  • Arrow function

let/const

//js var i = 10; i = 100; var j = 20; j = 200; //ES6 let i = 10; // I = 100; const j = 20; // constant j = 200;Copy the code

Deconstruction assignment

//js
var obj = {a:100,b:200}
var a = obj.a;
var b = obj.b;

var arr = ['xxx','yyy','zzz'];
var x1 = arr[0];


// ES6

const obj1 = {a:10,b:20,c:30};
const {a1,c1} = obj1;

console.log(a1);
console.log(c1);

const arr1 = ['xxx','yyy','zzz'];
const [x,y,z] = arr1;

console.log(x);
console.log(y);
console.log(z);
Copy the code

Block-level scope

//js var obj = {a:100,b:200} for(var item in obj){console.log(item) //a,b} console.log(item); //b // ES6 const obj1 = {a:100,b:200} for(let item1 in obj1){ console.log(item1); // a,b} console.log(item1) {item1 is not defined;Copy the code

Function default arguments

//js
function something(a,b){
    if(b==null){
        b = 0;
    }
}

//ES6
function something2(a,b=0){
    
}
Copy the code

Arrow function

Var arr = [1,2,3]; arr.map(function(item){ return item +1; }) // const arr1 = [1,2,3]; arr1.map( item => item+1); arr1.map((item,index) => { console.log(index); return item +1; })Copy the code