Embrace ES6 (a)

and let const

let, const and var, like, it can be used to declare variables. But variables let, const statement will not be initialized as undefined as assignment var during the lift.
Further, the let, a variable declared const presence of block-level scope and temporary dead, can reduce pollution of global variables.
It is noteworthy that, and let const variable definitions must be declared before use, otherwise an error.
As for the const, a more precise definition of constants this argument, and can not be changed after the defined value (except reference types - content variable, but constant references)

example-01- block-level scope

    {
        var a=1;
        let b=2;
    }
    console.log(a);//1
    console.log(b);//报错  b is not defined

  • For a better understanding of the block-level scope, see below these two codes
   var arr = [];

   for (var i = 0; i < 3; i++) {
       arr[i] = function () {
          console.log(i);
      };
    }
    console.log(arr[0]()); // 3
    console.log(arr[1]()); // 3
    console.log(arr[2]()); // 3
  • Here 0,1,2 not expected output, because there is no block-level scope declared by the variable var, i of the outer loop is also effective.
  • And so executed, with only a global i, this i now has three.
  • The top var i defined let into defined try
    var arr = [];
      for (let i = 0; i < 10; i++) {
       arr[i] = function () {
          console.log(i);
      };
    }
    console.log(arr[0]()); // 0
    console.log(arr[1]()); // 1
    console.log(arr[2]()); // 2

  • This is reflected in block-level scope, in which case the outer loop is accessed i is not accessible. Each cycle i have save their own value, the output in line with expectations.

example-02- does not initialize assignment


    // var 的情况

    console.log(a); // undefined

    var a= 1;

    // let 的情况

    console.log(b); // 报错 b is not defined

    let b= 2;

     // const 的情况

     // const声明一个只读的常量,不可变。

        const c=1;

   //报错 Assignment to constant variable.

        c=2;

  //const定义的常量必须初始化赋值

       const d;

// SyntaxError: Missing initializer in const declaration 

       console.log(d)

Deconstruction assignment

ES6 allowed according to a certain pattern, and the object is extracted from an array of values, variable assignment, which is referred to deconstructed (Destructuring). Note that the pattern matching, as long as the same pattern on both sides of the equal sign, the variable on the left will be given corresponding values. If deconstruction is not successful, the value of the variable is equal to undefined.

Deconstruction example-03- array assignment


//快速为变量赋值
var [a, b, c] = [1, 2, 3];
console.log(a);//1
console.log(b);//2
console.log(c);//3

//注意模式匹配
var [a, [[b], c]] = [1, [[2], 3]];
console.log(a)// 1
console.log(b)// 2
console.log(c)// 3

// 可以只获取自己想要的
var[ , , c] = ["a", "b", "c"];
console.log(c) // c

var [x, , z] = [1, 2, 3];
console.log(x)// 1
console.log(z)// 3
example-04-字符串的解构赋值

const [a, b] = '高芊';
console.log(a)  // 高
console.log(b)  // 芊
example-05-函数的解构赋值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

…grammar

For arrays and objects, easy to use super ... operator, the parameters may be a list of object properties or dismantling eleven, may be put together again. It is worth noting: Deconstruction and an array of objects there is an important difference. Elements of the array are arranged in order, the value of the variable is determined by its location; no order and properties of the object, attribute variables must be the same name, in order to get the correct value.

Syntax example-06- ...

//一一拆解后拼凑
var obj={name:"高芊",like:"编程"}
var selfObj={...obj}//相当于拷贝
console.log(selfObj)//{name:"高芊",like:"编程"} 

//一一拆解
var { a, b} = { a: "aaa", b: "bbb" };
console.log(a) // aaa
console.log(b) // bbb


//此时的b实际时剩余项组成的数组

var [a, ...b] = [1, 2, 3, 4];
console.log(a) // 1
console.log(b) // [2, 3, 4]
example-07-复杂对象解构

注意,此时p是一种模式,不是变量,故不会被赋值

var obj = {
  p: [
    'Hello',
    { b: 'World' }
  ]
};

var { p: [a, { b }] } = obj;
console.log(a) // "Hello"
console.log(b) // "World"

  • If p is also assigned as a variable, it can be written as follows.
var obj = {
  p: [
    'Hello',
    { b: 'World' }
  ]
};

var { p,p: [a, { b }] } = obj;
console.log(a) // "Hello"
console.log(b) // "World"
console.log(p) // ['Hello', { b: 'World' } ]

The following code has four destructuring assignment, respectively deconstruction loc, start, line, column four attribute assignment. Note that, in the last deconstruction assignment line, column attributes, only line, column variables, loc and start all modes, not a variable.

var  node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

var { loc, loc: { start }, loc: { start: { line,column }} } = node;

console.log(line)  // 1
console.log(column)  // 5
console.log(start)  //  {line: 1, column: 5}
console.log(loc)  //{start: {line: 1, column: 5}}

String extension method

  • es5 only indexOf method, it can be used to determine whether a string is contained in another string.
  • ES6 also provides three new methods: includes, * startsWith, endsWith.
  • In addition, there are two commonly used in data processing padStart, padEnd
  • includes (): returns a Boolean value to determine whether to find a parameter string.
  • startsWith (): returns a Boolean value, it is determined whether the parameter string at the head of the original string.
  • endsWith (): returns a Boolean value, it is determined whether the parameter string at the end of the original string.
  • padStart (): fill bits before param1: Maximum length; param2: not reached the maximum length is supplemented content
  • padEnd (): After the fill bit param1: Maximum length; param2: not reached the maximum length is supplemented content

example-08- string extension method

 var s = 'Hello world!';
 console.log(s.startsWith('Hello')) // true
 console.log(s.endsWith('!')) // true
 console.log(s.includes('o')) // true

Processing time

function dateFormat(date=new Date()) {
    let y = date.getFullYear().toString();
    let m = (date.getMonth() + 1).toString().padStart(2,'0');
    let d = date.getDate().toString().padStart(2,'0');
    let h = date.getHours().toString().padStart(2,'0');
    let M = date.getMinutes().toString().padStart(2,'0');
    let s = date.getSeconds().toString().padStart(2,'0');
    return y  + m + d + " " +h + ":" + M + ":" +s;
}
console.log(dateFormat())
//20191208 12:39:38   注意日期:08   前置补了一个0


Published 455 original articles · won praise 794 · views 170 000 +

Guess you like

Origin blog.csdn.net/qq_42813491/article/details/104023488