ES6 related interview question 3

---

Say yes ES6 in rest Understanding of parameters

ES6 introduce rest Parameters （ In the form of … Variable name ）, Extra arguments to get functions , So you don't need to use arguments Object .rest The argument is an array , This variable puts extra parameters in the array .

function add(...values) {
    
  let sum = 0;

  for (var val of values) {
    
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

Code above add Function is a summation function , utilize rest Parameters , You can pass any number of arguments... To this function .

Here's a rest Parameters instead of arguments Examples of variables .

// arguments How to write variables 
function sortNumbers() {
    
  return Array.prototype.slice.call(arguments).sort();
}

// rest How to write parameters 
const sortNumbers = (...numbers) => numbers.sort();

arguments Objects are not arrays , It's an array like object . So in order to use the array method , You have to use Array.prototype.slice.call Turn it into an array first .rest Parameter does not have this problem , It's a real array , Array specific methods can be used . Here is a utilization rest Parameter override array push Examples of methods .

function push(array, ...items) {
    
  items.forEach(function(item) {
    
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)

Be careful ,rest Parameters cannot be followed by any other parameters （ It can only be the last parameter ）, Otherwise, an error will be reported .
Arrow function cannot be used arguments object , The object does not exist inside the function . If you want to use , It can be used rest Parameters instead of

Tell me about your right new.target The understanding of the

new.target Property allows you to detect whether a function or constructor passes through new Operator is called .
Through new Operator is initialized in a function or constructor ,new.target Returns a reference to a constructor or function . In normal function calls ,new.target The value of is undefined.
We can use it to detect , Whether a function passes as a constructor new The called .

function Foo() {
    
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"

Talk about object.defineProperty And Proxy The difference between

stay Vue2.x In the version of the , Bidirectional binding is based on Object.defineProperty Realized by . and Vue3.x In the version , Used ES6 Medium Proxy The way of proxy .
Object.defineProperty(obj, prop, descriptor)
Use Object.defineProperty There are three main problems ：
1. Can't listen for array changes
2. Every property of the object must be traversed
Can pass Object.keys() To achieve
3. You have to go deep through nested objects
Traversing nested objects deeply through recursion , And then through Object.keys() To hijack each attribute
Proxy
Proxy For the entire object ,Object.defineProperty For a single attribute , That's it Deep recursion of the object is required （ Support nested complex object hijacking ） Implement the problem of hijacking each attribute
Proxy It's solved Object.defineProperty Unable to hijack the array
Than Object.defineProperty There are more interception methods , Compare some new browsers , It may be true Proxy Optimization of targeting , Help improve performance

ES6 Medium Reflect What's the use of objects ?

Reflect Object is not a constructor , So it is not created with new To create .
stay ES6 The purpose of adding this object in ：

1. take Object Some of the objects are clearly language-specific methods （ such as Object.defineProperty）, Put it in Reflect On the object . At this stage , Some methods are at the same time Object and Reflect Object , New methods in the future will only be deployed in Reflect On the object . in other words , from Reflect You can get the methods inside the language from the object .

2. Modify some Object method , Make it more reasonable . such as ,Object.defineProperty(obj, name, desc) When properties cannot be defined , It throws an error , and Reflect.defineProperty(obj, name, desc) Will return false.

3. Give Way Object Operations become function behaviors . some Object The operation is imperative , such as name in obj and delete obj[name], and Reflect.has(obj, name) and Reflect.deleteProperty(obj, name) Let's make them function behavior .

4.Reflect Object method and Proxy Object's methods correspond one to one , As long as it is Proxy Object method , You can be in Reflect Find the corresponding method on the object . This makes Proxy Object can easily call the corresponding Reflect Method , Complete the default behavior , As the basis for modifying behavior . in other words , No matter Proxy How to modify the default behavior , You can always be in Reflect Get default behavior on .

var loggedObj = new Proxy(obj, {
    
  get(target, name) {
    
    console.log("get", target, name);
    return Reflect.get(target, name);
  },
  deleteProperty(target, name) {
    
    console.log("delete" + name);
    return Reflect.deleteProperty(target, name);
  },
  has(target, name) {
    
    console.log("has" + name);
    return Reflect.has(target, name);
  },
});

In the above code , every last Proxy Object's interception operation （get、delete、has）, All of them call the corresponding Reflect Method , To ensure that native behavior can be performed normally . Added work , It is to output a line of log for each operation .

A brief introduction ES6 Medium lterator iterator

Iterator Iterators are born for iteration , For different sets ：Object、Array、Map、Set, Provides a unified interface （ Here, the interface can be simply understood as a method , Is the traversal method ）
Iterator An iterator is an interface method , It provides a unified access mechanism for different data structures ; Enables members of a data structure to be arranged in a certain order , And be visited one by one .
To be an iterative object , An object must implement iterator Method . This means that the object （ Or an object on its prototype chain ） There must be a key for iterator Properties of , You can use the constant Symbol.iterator Access this property .

let myIterable = {
    
    a: 1,
    b: 2,
    c: 3
}
myIterable[Symbol.iterator] = function() {
    
  let self = this;
  let arr = Object.keys(self);
  let index = 0;
  return {
    
    next() {
    
      return index < arr.length ? {
    value: self[arr[index++]], done: false} : {
    value: undefined, done: true};
    }
  }
}

var it = myIterable[Symbol.iterator]();

it.next();

for(const i of myIterable) {
    
  console.log(i);
}

take myIterable Object to add Symbol.iterator attribute , At the same time, in the returned next In the method , Add two properties , It makes it an iteratable object .（ In fact, if there is such a demand , Consider using Map）.
Iterator standard ————Iterator The iterator contains a next() Method , The method call returns two properties ：done and value; By defining the of an object Symbol.iterator attribute , You can change this object into an iterator object , Support for…of Traverse .