Detailed core ES6

Detailed core ES6

---

This chapter you will learn the following knowledge points

• ES6 module
• ES6 keyword

ES6 module

Believe that learning through the front of the students heard about the front-end module lazy loading and front-loading, from its earliest concepts of AMD and CMD of front-end module loader RequireJS and SeaJS in.

And wherein the predetermined AMD CMD below a predetermined module

Why pull it so far? Because we are going to learn ES6 module is pre-loaded, so that then do not have to declare in advance, but after you declare, ultimately become compiled into the top of the code.

Well, we should then look at how to use it

---

• default

  • Import: import num from './文件';
  • Export: export default num变量或常量;

• Import export declaration

  • Import:import { name,age } from './文件';
  • Export:export var age = 18; export {name};

• Import All

  • import * as 变量名 from './文件'

  Here we look at the code and the implementation of the results forecast
  

The final run the program (in the future we can see the test results in this section of the project)

The last module: We note, import and export keywords can only be written in the role of top-level domain, but can not write in this block of code if {} of the class, as reasons Well ... hey, is speaking in front of the pre-loaded! ! ! !

Keyword

const and let all block-level scope, they appear the most significant problem we have to solve the variable type promotion, let's see if he can solve the problem?

Click 1, when we click on:

Good heavens! So for this reason, there are two points:

1. After only one i variable in the global, regardless of where can visit, for loop is executed, the value really is 5
2. onclick Code assignment is a function, and the function is executed only when clicked when it is executed within the loop, i finally get global

So we want to solve this problem, the core point is that a li click corresponds to different variables like, so let us in the same keywords for circulation, with the presence of five variables

To summarize: the let keyword for variable declaration, var relatively speaking, will not improve as a global variable

    if(true) {
        let a = 1;  // 这个a在外部无法使用
    }

• const is block-level scope, the amount of (constant) does not change the value for the declaration

// 变量
let num = 1;
// 常量
const PI = 3.1415926;

Arrow function

• Relative function / ES6 function shorthand, this function of the arrow binds to the higher function

• At the same time arguments also bind up

    var obj = {
        init:function() {
            var xx = () => {
    			// this是init的this，也就是obj对象
            }
        }
    }

• Written very cool: (left) a parameter can be saved parentheses, (on the right) line of code braces can be saved

• Arrow function does not have this, this will bind to the superior function, it can not be used as a constructor function

Arrow function writing:

• Without argument:()=>{}
• Line of code to do the return value: () => 'abc'
• A number of parameters: (n,m) => n + m
• A parameter: n => n
• Relatively complicated a little bit of writing:

ES6 function shorthand

• With the property of the object

fn3() { //干掉了:function,用在对象的属性中
				console.log(this);
},

Talking about this difference ES6 function and arrow shorthand function is that this is bound up the

Deconstruction assignment

Deconstruction assignment to facilitate the life ah. . Look

• let obj = { a:1,b:2,c:3};
  // 我们需要只获取其中a和b属性
  let a = obj.a; let b = obj.b; 
  // 也可以这样
  let { a,b } = obj; // 只获取其中部分key值
  let [a,,,d] = [1,2,3,4];  // a:1    d:4
  // 还可以用别名
  let { name:myName } = { name:'jack'};
  console.log(myName); // 'jack'
  

Three operators

Speaking of ... very silent? Not! In the front end also has such operators, the name is also very much, we cut through the fog direct classification!

Have you ever heard expand the operator, a word to describe it: open

var obj = { a:1,b:2 };
var newObj = { ...obj,c:3}; // { a:1,b:2,a:3 };
var arr = [1,2,3];
[4,5,...arr];  /// [4,5,1,2,3];

Note that belongs to expand the operator shallow copy, that is: when you expand a property is an object, object references will be assigned to the new object, rather than re-create an object with the difference that modify the object's attributes are affecting many

it is good! Then again a "revenue"! This operator is called variable parameters, mainly to solve the function call, the number of unknown parameters of the problem

function add (n1,n2,n3,n4) { // 如果还有n5、n6呢?
}
function calc (operator,...nums) {
    // operator 可以是+-*/
    let result = '';
    for(let i = 0; i < nums.length; i ++) {
        if (i === nums.length - 1)
          	result += nums[i];
        else
        	result += nums[i] + operator;
    }
    return eval(result);
}
calc('+',1,2,3,4,5,66,7,8);  // 96

These requirements are simple calculator to achieve, with emphasis we see ... nums it into an array, at the same time ... nums there are other parameters friend, only on the last place.

Finally, write again

To help make learning easy, efficient and free for everyone to share a large number of resources to help you in becoming a full stack engineers, architects and even the way through the clutter. We are here to recommend a full-stack Learning Exchange front-end circle: ?? 1018453829 welcome to exchange into the group discussion, learning exchanges and common progress.

Some people are passionate about learning, but the lack of direction, and in the vast ocean of knowledge in the seemingly endless, at this time the most important thing is to know which technologies need to focus grasp, avoid doing useful work, the limited energy and to maximize state of.

Finally wish all encounter a problem and do not know how to do the front-end programmers, I wish you all in the future work and interview all the best.