Summary of ES6 common knowledge points

Original address: qszone.com

1. New declaration methods

1. Let: Declared variables are valid only within a code block
2. Const: Declares a constant, which must be assigned and unchangeable

let a = 'aaa';
const b = 'bbb';
console.log(a, b);
Copy the code

2. Deconstruction assignment of variables

Array destruct assignment

let [aa, bb, cc] = [0.1.2];
Copy the code

Object destruct assignment

let { cnName, enName } = {
  id: '151521574'.cnName: 'ying-ying went'.enName: 'Ronnie'
};
console.log(cnName, enName); //' Zhang Sheng ', 'Ronnie'
Copy the code

Extension operators and REST operators

Object extension operator

function test01(. arg) {
  console.log(arg[0]); / / 1
  console.log(arg[1]); / / 2
  console.log(arg[2]); / / 3
  console.log(arg[3]); //undefined
}
test01(1.2.3);

let arr1 = [1.2.3];
let arr2 = [...arr1];
arr2.push(4); // Do not change arr1 at this time
console.log(arr1); / / [1, 2, 3]
console.log(arr2); / / [1, 2, 3, 4]
Copy the code

Rest operator (representing remaining parameters)

function test02(first, ... arg) {
  for (let item of arg) {
    console.log(item); // output 1,2,3,4,5,6
  }
  console.log(first); / / 0
}
test02(0.1.2.3.4.5.6);
Copy the code

String template

String template

let name = 'Ronnie';
let str = 'Hello, I'm <b>${name}</b><br/> Nice to meet you;
document.write(str);
Copy the code

String lookup

let str = 'Hello, I'm <b>${name}</b><br/> Nice to meet you;
console.log(str.includes('Not happy')); //false
console.log(str.startsWith('Hello.')); // Check whether the beginning exists, true
console.log(str.endsWith('you')); // Check whether the end exists, true
Copy the code

Five, digital operation

Binary declaration Binary

let binary = 0b010101;
console.log(binary); / / 21
Copy the code

Octal declares Octal

let octal = 0o666;
console.log(octal); / / 438
Copy the code

Check whether it is a number

Number.isFinite(888); //true
Number.isFinite('888'); //false, the string will not be converted to a number before judging
Number.isFinite('asd'); //false
Number.isFinite(undefined); //false
Number.isFinite(NaN); //false
Copy the code

Check whether it is an integer

Number.isInteger(1.1); //false
Number.isInteger(1); //true
Copy the code

Maximum and minimum safe integers

Number.MAX_SAFE_INTEGER;
Number.MIN_SAFE_INTEGER;
Copy the code

Check whether it is a safe integer

Number.isSafeInteger(Math.pow(2.53) - 1); //true
Number.isSafeInteger(Math.pow(2.53) + 1); //false
Copy the code

New array knowledge

Array format conversion: array. from, array. of

let json = {
  '0': 'Ronnie'.'1': 'Rose'.'2': 'zhangsheng'.'3': 'Json'.length: 4
};

let jsonArr = Array.from(json);
console.log(jsonArr); //['Ronnie','Rose','zhangsheng','Json']

let strArr = Array.of('a'.'b'.'c'.'d');
console.log(strArr); //['a', 'b', 'c', 'd']
Copy the code

Find () method: returns the first element that satisfies the condition, with three arguments

• Value: indicates the current search value
• Index: Indicates the index of the value being searched
• StrArr: The original array to search for

let findRst = strArr.find((value, index, strArr) = > {
  return value === 'd' || value === 'a';
});
console.log(findRst); //a
Copy the code

The fill () method

let fillArr = ['Ronnie'.'Rose'.'Zhangsheng'];
fillArr.fill('es6'.1.3); // Replace index [1,3], i.e. index 1 and 2 with 'es6'
console.log(fillArr); //["Ronnie", "es6", "es6"]
Copy the code

for… of

for (let item of fillArr) {
  console.log(item);
}
// indexed
for (let [index, value] of fillArr.entries()) {
  console.log(index + ':' + value);
}
Copy the code

Entries () generate an array in Iterator form, which has the advantage of allowing us to manually jump to the next value using next() if necessary

let list = fillArr.entries();
console.log(list.next().value); //[0, "Ronnie"]
console.log(list.next().value); //[1, "es6"]
console.log(list.next().value); //[2, "es6"]
console.log(list.next().value); //undefined
Copy the code

Some method: Returns a Boolean that determines whether any elements meet func criteria

let someArr = [1.2.3.4];
someArr.some(item= > item > 1); //true
Copy the code

Every method: Returns a Boolean that determines whether each element meets the func criteria

let everyArr = [1.2.3.4];
everyArr.every(item= > item > 3); //false
everyArr.every(item= > item >= 1); //true
Copy the code

Filter method: returns an array of elements that meet func criteria, without changing the original array

let ages = [23.28.25.32];
ages.filter(item= > item > 25); Aiaa / / [28]
console.log(ages); / / [23, 28, 25, 32]
Copy the code

Map method: Returns a new array consisting of elements that result from each call to the function

let mapArr = [1.2.3.4.5.6];
mapArr.map(item= > item + 1); / /,3,4,5,6,7 [2]
Copy the code

The in method is used to determine whether a key or index exists in an object or array

let inObj = {
  cnName: 'ying-ying went'.enName: 'Ronnie'
};
console.log('enName' in inObj); //true
console.log(4 in ages); //false
Copy the code

Functions in ES6

Function to deconstruct the JSON object

let jsonObj = {
  cnName: 'ying-ying went'.enName: 'Rose'
};

function fun({ cnName, enName = 'Ronnie' }) {
  console.log(cnName, enName);
}
fun(jsonObj); Rose / / zhang Rose
Copy the code

Objects in ES6

Object assignment: ES6 allows you to assign declared variables directly to objects

let nameObj = { cnName, enName };
console.log(nameObj); //{cnName: "zhang sheng ",enName: "Ronnie"}

// Object Key value construction
let key = 'skill';
let keyObj = {
  [key]: 'web'
};
console.log(keyObj); //skill: "web"
Copy the code

Object. Is () Object comparison,=== is equal, is() is strictly equal

console.log(+0= = = -0); //true
console.log(NaN= = =NaN); //false
console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN.NaN)); //true
Copy the code

Object.assign() Object merge

let obj1 = { cnName: 'ying-ying went' };
let obj2 = { enName: 'Ronnie'.age: 26 };
let obj3 = Object.assign(obj1, obj2);
console.log(obj3); //{cnName: "zhang ", enName: "Ronnie", age: 26}
Copy the code

Ix. Set, WeakSet and MAP data structures

Set: The difference between a Set and an Array is that a Set cannot contain duplicate values. If only one value is displayed, the value is de-duplicated

The Set of statements

let setArr = new Set(['ronnie'.'zhangsheng'.'web']);
console.log(setArr); //Set(3) {'ronnie', 'zhangsheng', 'web'}
Copy the code

Add, delete, and check Set values

setArr.add('front end'); / / to add
setArr.delete('web'); / / delete
setArr.has('front end'); / / check: true
setArr.clear(); / / to empty
Copy the code

The Set of traverse

for (let item of setArr) {
  console.log(item);
}
Copy the code

The size attribute

console.log(setArr.size); / / 3
Copy the code

WeakSet: A set used to store objects

WeakSet statement, the statement is not allowed to assign value, otherwise an error will be reported, and the value inside WeakSet is not allowed to repeat

let weakObj = new WeakSet(a); weakObj.add({cnName: 'ying-ying went'.age: 26 });
console.log(weakObj);
Copy the code

Map: A map is a flexible, simple data structure suitable for one-to-one lookup. It is similar to A JSON object, but much faster, and more flexible. You can think of a map as a special key-value pair, but the key can be set as an array, and the value can be set as a string

The map’s statement

let map = new Map(a);Copy the code

Add, delete, and query maps

let obj4 = { cnName: 'ying-ying went'.age: 26 };
map.set('ronnie', obj4); / / to add
map.set('ronnie'.'Always eighteen'); // Change: If the key is the same, change it
map.set(obj4, 'Ronnie'); // add: key can also be an object
console.log(map);
console.log(map.get(obj4)); // Value: Ronnie
map.delete('ronnie'); // Delete: delete according to the key value
console.log(map.size); / / the size attribute
console.log(map.has(obj4)); //has: finds whether it exists
map.clear(); //clear clears all elements
console.log(map);
Copy the code

X. Proxy preprocessing

Proxy: Similar to hook functions, there are several pre-actions when we operate on an object or method

• Get property: A get property is a preprocessed method that takes three arguments when you get the value of an object property
  1. Target: the target value obtained
  2. Key: The key value of the target, which is equivalent to the property of the object
  3. Property: Optional. This parameter is not commonly used
• Set: The set property is the pre-processing you do when you change the value of the Proxy property. It takes four arguments.
  1. Target: the target
  2. Key: indicates the key value of the target
  3. Value: indicates the value to be changed
  4. Receiver: original value before change

let pro = new Proxy({add: function(val) {
      return val + 10;
    },
    name: 'I am Ronnie'
  },
  {
    get: function(target, key) {
      console.log('come in Get');
      return target[key];
    },
    set: function(target, key, value, receiver) {
      console.log(`setting ${key} = ${value}`);
      return(target[key] = value); }});console.log(pro.name); // Come in Get I am Ronnie
pro.name = 'ying-ying went'; //setting name = "setting name
Copy the code

Use of Promise objects

Promise came along to solve the problem of callback hell

The basic use of promise (illustrated), such as putting an elephant in a refrigerator, has three steps

1. Open the refrigerator door
2. Put the elephant in
3. Close the refrigerator door

let isSuccess = true;
function step1(resolve, reject) {
  console.log('First step');
  if (isSuccess) {
    resolve('Successfully opened the refrigerator door');
  } else {
    reject('Error opening refrigerator door'); }}function step2(resolve, reject) {
  console.log('Second step');
  isSuccess = false;
  if (isSuccess) {
    resolve('Successfully put the elephant in.');
  } else {
    reject('Error in putting the elephant in'); }}function step3(resolve, reject) {
  console.log('Third step');
  if (isSuccess) {
    resolve('Successfully closing the fridge door');
  } else {
    reject('Error closing refrigerator door'); }}new Promise(step1)
  .then(function(rst) {
    console.log(rst);
    return new Promise(step2);
  })
  .then(function(rst) {
    console.log(rst);
    return new Promise(step3);
  })
  .then(function(rst) {
    // console.log(rst);
    return rst;
  })
  .catch(e= > {
    console.log(e); // Catch error message returned by Promise Reject
  });
Copy the code

The use of class

Class declaration and use

class Coder {
  name(val) {
    console.log(val);
    return val;
  }
  skill(val) {
    console.log(this.name('Ronnie') + ':' + 'Skill-' + val);
  }
  constructor(cnName, age) {
    this.cnName = cnName;
    this.age = age;
  }
  introduce() {
    return this.cnName + ':' + this.age; }}let Ronnie = new Coder('ying-ying went'.26);
Ronnie.name('Ronnie'); //Ronnie
Ronnie.skill('web'); //Ronnie: Skill-web
console.log(Ronnie.introduce()); //Ronnie:26
Copy the code

The class inheritance

class htmler extends Coder {}

let zhangsheng = new htmler();
zhangsheng.name('zhangsheng'); //zhangsheng
Copy the code

Modular operation

There are two main aspects to modular operations

1. Export: Output operation of the module
2. Import: The import operation of a module

Export allows us to modularize variables, functions and objects, and provide external call interface for external reference

export let name = 'Ronnie'; //export temp.js

import { a } from './temp.js'; // import a as an import in index.js, where a corresponds to the name output in temp.js
Copy the code

Multivariable output and function output

let var1 = 'Ronnie';
var var2 = 'ying-ying went';
var var3 = 'zhangsheng';
function add(a, b) {
  return a + b;
}
export { var1, var2, var3, add };
import { var1, add } from './temp'; // The corresponding import mode
Copy the code

Export defalut: Only one defalut can be exported

let str = 'ronnie is so handsome';
export default str;
import aaa from './temp.js'; // The corresponding import method, the import name can be arbitrary
Copy the code

OK, the above is the common knowledge point about ES6, the introduction of Proxy pretreatment may not be very detailed, the specific explanation will be long, so I will not go into the in-depth introduction, interested friends can search other people’s articles, I believe that many friends have a better explanation than me.

Afraid of what infinite truth, into an inch into an inch of surprise ~