Let’s talk about some new ES6 syntaxes

1. Default parameters

Previously, we set the default parameter like this

function foo(x, y) {
    x = x || 10
    y = y || 11
    console.log(x + y);
}

foo(1.2);  / / 3
// Output what?
foo(1.null);
foo(1);
Copy the code

Trust this and you’ll know the answer pretty soon: 12, yes, the default value for y is 11

How about this one?

foo(1.0);
Copy the code

Output what?

Output 1? NoNoNo…. Again, output 12

Because your incoming 0 is considered to be false, so y | | will take 11 November, not the incoming value of 0, it’s a bit risky to use this

As a result, ES6 has added a syntax to address this shortcoming

function foo(x = 10, y = 11) {
    console.log(x + y);
}
Copy the code

When we call:

foo(1.2); / / 3

// x=1, y=11
foo(1); / / 12

// x=1, y=0
foo(1.0); / / 1

// undefined default y has no parameter
foo(1.undefined); / / 12

// null is cast to 0
foo(1.null);  / / 1
Copy the code

2. Remaining parameters

The residual parameter syntax allows us to represent an unquantified parameter as an array

let sum = function(. args) {
    let total = 0;
    args.forEach(function(item) {
        total += item
    });
    return total;
}

console.log(sum(10.20)); / / 60
console.log(sum(10.20.30.40)); / / 100
Copy the code

The remaining parameters match the structure

let arr = [10.20.30]
let [value, ...args] = arr

console.log(value);  / / 10
console.log(args);  / / (20, 30)
Copy the code

The remaining parameters can also be used for arrays

let arr = [10.20.30]
let [...args] = arr
console.log(args); / / [10, 20, 30]

arr[0] = 40
console.log(arr);  // [40, 20, 30]
console.log(args);  / / [10, 20, 30]
Copy the code

The value of ARGS does not change as arR changes, so this type of replication is a shallow copy

3, deconstruction

Deconstructing assignment is assigning a value to a variable according to its location

ES6 has a new syntax for array deconstruction and object structure

2.1 Array Deconstruction

Previously we wanted to assign each element of the array to a variable separately, so we did this:

let arr = [1.2.3]
let a = arr[0],
    b = arr[1],
    c = arr[2]

console.log(a, b, c);  / / 1 2 3
Copy the code

Using array structures is quite convenient

let arr = [1.2.3]
let [a, b, c] = arr
console.log(a, b, c); / / 1 2 3
Copy the code

Matches elements in an array in a one-to-one relationship

2.2 Object Deconstruction

The name of the variable is used to match the attribute of the object, and the value of the attribute of the object is assigned to the variable on success

let person = {
    namer: 'Joe'.age: 2.sex: 'other'
}
let { namer, age, sex } = person
console.log(namer, age, sex);  // Do you have any questions
Copy the code

Note: Variable and attribute names must match. Changing to another variable will cause an error

You can also use object structures to assign attribute values to other variables

let { namer: newName, age: newAge, sex: newSex } = person
console.log(newName, newAge, newSex); // Do you have any questions
Copy the code

Repeat the assignment

let { a: x, a: y } = { a: 100 }
console.log(x, y);  / / 100 100
Copy the code

Object literals are extended

4.1 Concise Attributes

The following is a common way to create objects using object literals and add key-value pairs

let namer = 'Joe', age = 2
let obj = {
    namer: namer,
    age: age
}
console.log(obj);  // {namer: 'zhang3 ', age: 2}
Copy the code

ES6 provides a concise way to write properties

let let obj = {
    namer,
    age
}
console.log(obj); // {namer: 'zhang3 ', age: 2}
Copy the code

4.2 Concise Method

Add a function to an object, that’s what we normally do

let obj = {
    a: function() {
        console.log(123);
    }
}
obj.a()  / / 123
Copy the code

ES6 simplifies the writing of the method

let obj = {
    a() {
        console.log(123);
    }
}
obj.a() / / 123
Copy the code

This is recommended

4.3 Calculating the Attribute Name

We used to compute object property names only “outside.”

let namer = 'user'
let obj = {}
obj[namer + 'Foo'] = function() {}
obj[namer + 'Bar'] = function() {}
console.log(obj);  // { userFoo: [Function (anonymous)], userBar: [Function (anonymous)] }
Copy the code

After ES6, we can do that

let namer = 'user'
let obj = {
    [namer + 'Foo'] :function() {},
    [namer + 'Bar'] :function() {}}console.log(obj); // { userFoo: [Function (anonymous)], userBar: [Function (anonymous)] }
Copy the code

Arrow function

When our functions are shorter, we can use the new arrow functions in ES6

Grammar:

() = > {}Copy the code

There is only one line of code in the function body, and the result of the code execution is the return value. You can omit the curly braces

// A normal function
function foo(x, y) {
    console.log(x, y);
}

// Arrow function
let foo = (x, y) = > {x + y};
console.log(foo(1.2));
Copy the code

If the parameter has only one, the parentheses can also be omitted

// A normal function
function fn(n1) {
    return n1 ** 2;
};
console.log(fn(2)); / / 4

// Arrow function
const fn1 = n1= > n1 ** 2;
console.log(fn1(2)); / / 4
Copy the code

Arrow functions are not boundthisKeyword, arrow function does not existthisKeyword that points to the context at which the function is definedthis

let obj = {
    namer: 'Joe'
}

function foo() {
    return () = > {
        console.log(this.namer); }}// call modifies the reference to this and executes the function
let f = foo.call(obj);
f();  / / zhang SAN
Copy the code

Arrow functions can’t use argument, super and new.target. They can’t be used as constructors.

Give it a try

var age = 100;
var obj = {
    name: 'zxc'.age: 18.say: () = > {
        console.log(this.age); }}; obj.say();Copy the code

What is the output?

100, we said that this refers to the function above it, otherwise it refers to the global scope window; It has nothing to do with obJ objects

6, for… Of circulation

ES6 in for and for… On the basis of… An in loop, which loops over a series of values produced by an iterator

for… The required value of of must be an iterable

Let’s start with for… In circulation

let arr = ['a'.'b'.'c'.'d']
// go through the number group
for (index in arr) {
    console.log(index);  // 0 1 2 3 
}


let obj = {
    namer: 'Joe'.age: 2.sex: 'other'
}
// Iterate over the object
for (key in obj) {
    console.log(key);  // namer age sex
}
Copy the code

Let’s look at for… of

let arr = ['a'.'b'.'c'.'d']
for (value of arr) {
    console.log(value); // a b c d  
}
Copy the code

So:

for... in: traversal index, object attribute name traversal
for... of: Traverses the values of a number group

for… Of can also be used to iterate over strings

let str = 'hello'
for (value of str) {
    console.log(value); // h e l l o  
}
Copy the code

for… The of loop can also be broken, continue, or return

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

New syntax in ES6

1. Default parameters

2. Remaining parameters

3, deconstruction

2.1 Array Deconstruction

2.2 Object Deconstruction

Object literals are extended

4.1 Concise Attributes

4.2 Concise Method

4.3 Calculating the Attribute Name

Arrow function

6, for… Of circulation

New syntax in ES6

1. Default parameters

2. Remaining parameters

3, deconstruction

2.1 Array Deconstruction

2.2 Object Deconstruction

Object literals are extended

4.1 Concise Attributes

4.2 Concise Method

4.3 Calculating the Attribute Name

Arrow function

6, for… Of circulation

Related Posts

In-depth understanding of component extensibility and ease of use

CSS and SVG implement text gradient, stroke, and projection

Star rating component – Raises questions about the React component