es6 deconstruction assignment

1, Deconstruction and assignment of variables

1. Deconstruction assignment of object

(1) The property name is inconsistent with the variable name
When the attribute name is inconsistent with the variable name, you need to explicitly specify the attribute name. In this way, the attribute value can be assigned to the variable.

let user = {name: 'Xiao Ming', age: 12};
let {name: userName, age: userAge} = user;
console.log(userName); // 'Xiao Ming'
console.log(userAge);  // 12

(2) The attribute name is consistent with the variable name
When the attribute name is consistent with the variable name, only the specified variable name needs to be displayed.

let user = {name: 'Xiao Ming', age: 12};
let {name, age} = user;
console.log(name);
console.log(age);

(3) Nested assignment

let user = {name: 'Xiao Ming', age: 12, course: {name: 'mathematics', score: 90}};
let {course: { score }} = user
console.log(score) // 90

Assign default values to (other) variables

// Property does not exist
let user = {name: 'Xiao Ming', age: 12};
let {address: userAddress = 'Shanghai'} = user;
console.log(userAddress); // Since the address attribute does not exist in user, the value of userAddress is the default value`

// Attribute exists
let user = {name: 'Xiao Ming', age: 12};
let {name: userName = 'Xiaotian'} = user;
console.log(userName); // Username = > 'Xiaoming' / / because the attribute exists, the variable cannot get the default value

2. Deconstruction assignment of array

(1) Array deconstruction syntax allows us to quickly iterate over the elements of an array and assign values to multiple variables.

let myArray = [1, 2, 3]
let [a, b, c]= myArray
//a 1  b 2 c 3
let [a, b, c = 3] = [1, 2];
console.log(c); //Output "3"

(2) Nested arrays, you can extract values from multidimensional arrays and assign them to variables
let [a, b, [c, d]] = [1, 2, [3, 4]];

Promise.all([radioGroup(), cascader(),getTable()]).then((res)=>{
  const res1=res[0].data;
  const res2=res[1].data;
  const res3=res[2].data;
})

//----Optimize---
async getInfo() {
  const [res1, res2,res3] = await Promise.all([radioGroup(), cascader(),getTable()]);
}

2, Extension of function

1. Function parameter problem
Function parameters can be added with default values and written directly after the parameter definition. The default values will be taken only when the actual parameters are not passed

getBase64(ticket, scaleRation = 5, isType = 0){}

2. Used in conjunction with deconstruction assignment defaults

function fetch(url, { body = "", method = "GET", headers = {} }){
  console.log(method);
}
fetch("base/base/screenConfig/list", {});

3. Arrow function

function fn(x){
  return x;
}
//It can be changed to:
x=>x;

// 1. Arrow function without parameters
    let a1 = () => console.log('Arrow function without parameters')
    a1()

 // 2. Arrow function of parameters
    let a2 = (item)  => console.log(`->a2(${item})`);
    a2(25);
    // Parentheses can be omitted when there is only one formal parameter
    let a2 = item  => console.log(`->a2(${item})`);

//3. Multiple parameters
    let a3 = (...items) => console.log(`->a3(${items})`);
    a3(1,2,3,4);

  //Function body 
  //If there is only one statement or expression, {} can be omitted ----- > the result of statement execution or expression will be returned automatically
  let a4=(x,y)=>x+y;
  console.log(a4(1,3))
  // If there is more than one statement or expression in the function body, you need to add return
  let a5=(x,y)=>{
    console.log(a5(1,3))
    return x+y
  }

4. Because the arrow function does not have its own this, and its internal this points to this in the outer scope, it is not suitable for defining object methods (object literal method, object prototype method, constructor method)
Then it is not suitable to define a callback function (event binding function) combined with dynamic context, because the arrow function will bind the static context when declared.

const button = document.querySelector('button');
button.addEventListener('click', () => {
    this.textContent = 'Loading...';
});
// this does not point to the expected button element, but to window

3, Array extension

1,Array.from()

Array.from() converts array like objects and traversable objects into arrays and returns them.

let arr = {
  '0':'a',
  '1':'b',
  '2':'c',
  length:3
};
var arr2=Array.from(arr)
var arr1=[].slice.call(arr);

example

// Report reset function
const arr=this.$refs.search.$el.querySelectorAll('input[type=text]') 
Array.from(arr).forEach(item => item.value = '');  //Reset

2,includes()

The includes() method is used to determine whether an element is contained in the array. If it exists, it returns true and if not, it returns false,

3,find()&findIndex()

The find() function is used to find the target element in the array. If it is found, it will return the element (if it is found, it will not look for others). If it is not found, it will return undefined.

  const oldV = oldData.find((d) => d.policyId == v.policyId);

The findindex() method returns the index value of the first element that matches the result of the expression, otherwise it returns - 1

const selectIdx = [{goodsCode:1},{goodsCode:2}].findIndex(v => v.goodsCode == 2);// selectIdx 1
  selectIdx != -1 && this.selectedData.splice(selectIdx,1);

4, Object extension and addition methods

1,Object.is()
It can be used to compare whether two values are strictly equal, which is basically consistent with the strict comparison operator = = =;
There are two main differences from the strict comparison operator = = =:
(1). + 0 is not equal to - 0,
(2). NaN equals itself.

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

2,Object.assign()
Object. The assign method is used for object merging and copies all enumerable properties of the object to be merged into the target object.

let target = { x: 1};
let s1 = { y: 2 };
let s2 = { z: 3 };
Object.assign(target, s1, s2); // {x: 1, y: 2, z: 3}

(1) If the target object and the source object use properties with the same name, or multiple source objects have properties with the same name, the subsequent properties override the previous properties

let target2 = { x: 1};
let s3 = { x: 3, y: 2 };
let s4 = { y: 4,  z: 3 };
Object.assign(target2, s3, s4); // {x: 3, y: 4, z: 3}

(2) Object.assign() is a shallow copy. If a property value of the source object is an object, the target object is copied to the reference of the object.

let source = {person: { name: 'Clearlove'}}
let target = Object.assign({}, source)

source.person.name = 'Meiko'
target.person.name  // 'Meiko'

For this kind of nested object, once an attribute with the same name is encountered, object Assign () is handled by replacing, not adding.

let source = {person: { name: 'Clearlove' }}
let target = {person: { name: 'Meiko', age: 18 }}
Object.assign(target, source) // {person: {Name: 'clearlove'}} / / person of source replaces person of target

3,Object.keys()
Returns an array of self enumerable properties of a given object.

let person = {name:"Zhang San",age:25,address:"Shenzhen"}
Object.keys(person) // ["name", "age","address"]

Object to array

//data0 {133179548792890404: "YPZB",133185397229854127: "Vip diamond card"}
Object.keys(data0).map((item) => {
  this.policyMapOpt.push({
    value: item,
    label: data0[item],
  });
});
// this. Policymapopt [{label: "ypzb", value: "133179548792890404"}, {label: "VIP diamond card", value: "133185397229854127"}]

4,Object.values()
Output all the values of the object in the form of an array, eliminating the need for us to manually iterate to get the value of each attribute of the object. (attribute value - composite array)

const obj = {
    book: "Learning ES2017 (ES8)",
    author: "Front end talent",
    publisher: "Front end talent",
    useful: true
};
console.log(Object.values(obj));
// ['Learning ES2017 (ES8),' front-end talent ',' front-end talent ', true]

5,Object.entries()
Can be used to convert an object to an array of key / value pairs. That is, a two-dimensional array. Each element of the array is an array containing keys and values.

const obj = {
    book: "Learning ES2017 (ES8)",
    author: "Front end talent",
    publisher: "Front end talent",
    useful: true
};
console.log(Object.entries(obj));
// [['book', 'learning es2017 (es8)'], ['author ',' front-end expert '], ['publisher', 'front-end expert'], ['useful', true]]