What is the function of three points in es6?

The three dots of es6 are not functions, but an operator. The three dots "..." refer to the "expand operator", which can expand the iterable object into its separate elements; the so-called iterable object is any object that can be traversed using a for of loop, such as an array, String, Map, Set, DOM node, etc.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

The spread operator... was introduced in ES6 and expands an iterable object into its individual elements. The so-called iterable object is any object that can be traversed using a for of loop, such as: array (array Common methods), strings, Map (understanding Map), Set (how to use Set?), DOM nodes, etc.

Array spread operator

The spread operator (spread) is three dots (...). It is like the inverse operation of the rest parameter, converting an array into a comma-separated parameter sequence. The spread operator can be used in conjunction with normal function parameters, and an expression can also be placed behind it, but if it is followed by an empty array, it will have no effect.

let arr = [];
arr.push(...[1,2,3,4,5]);
console.log(arr); //[1,2,3,4,5]
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
console.log(...(1 > 0 ? ['a'] : [])); //a
console.log([...[], 1]); //[1]

Meaning

The apply method of the alternative function

Since the spread operator can expand the array, it is no longer neededapply Method, convert the array into function parameters.

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])

Apply

• Copy Array

  // ES5 的写法
  const a1 = [1, 2];
  const a2 = a1.concat();
  // ES6 的写法
  const a1 = [1, 2];
  const a2 = [...a1];
  //或
  const [...a2] = a1;

• Merge Array

  // ES5 的写法
  [1, 2].concat(more);
  arr1.concat(arr2, arr3);
  // ES6 的写法
  [1, 2, ...more];
  [...arr1, ...arr2, ...arr3]

• Combined with destructuring assignment

  // ES5 的写法
  a = list[0], rest = list.slice(1)
  // ES6 的写法
  [a, ...rest] = list

  Note: If the spread operator is used for array assignment, it can only be placed at the last bit of the parameter, otherwise it will Report an error.

• Convert strings

  The expansion operator can also convert strings into real arrays and can correctly identify four-byte Unicode characters.

  'x\uD83D\uDE80y'.length // 4
  [...'x\uD83D\uDE80y'].length // 3
  
  let str = 'x\uD83D\uDE80y';
  str.split('').reverse().join('') // 'y\uDE80\uD83Dx'
  [...str].reverse().join('')      // 'y\uD83D\uDE80x'

• Objects that implement the Iterator interface

  Any object of the Iterator interface (see the Iterator chapter) can be converted into a real array using the spread operator.

• Map and Set structures, Generator functions

  • The expansion operator internally calls the Iterator interface of the data structure, so as long as the object has the Iterator interface, You can use spread operators, such as Map structures.

  let map = new Map([
   [1, 'one'],
   [2, 'two'],
   [3, 'three'],
  ]);
  
  let arr = [...map.keys()]; // [1, 2, 3]

  • After the Generator function runs, it returns a traverser object, so the spread operator can also be used.

  const go = function*(){
   yield 1;
   yield 2;
   yield 3;
  };
  
  [...go()] // [1, 2, 3]

  • If you use the spread operator on an object without an Iterator interface, an error will be reported.

Extension operator of object

Concept

Object of Destructuring assignment is used to get a value from an object, which is equivalent to assigning all the traversable (enumerable) but not yet read properties of the target object itself to the specified object. All keys and their values ​​will be copied to the new object.

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

Note:

• Since destructuring assignment requires that the right side of the equal sign is an object, so if the right side of the equal sign is undefined or null, an error will be reported because they cannot be converted into objects.

• Destructuring assignment must be the last parameter, otherwise an error will be reported.

• The copy of destructuring assignment is a shallow copy, that is, if the value of a key is a composite type value (array, object, function), then the destructuring assignment copies a reference to this value. instead of a copy of this value.

  let obj = { a: { b: 1 } };
  let { ...x } = obj;
  obj.a.b = 2;
  x.a.b // 2

• The destructuring assignment of the spread operator cannot copy properties inherited from the prototype object.

  let o1 = { a: 1 };
  let o2 = { b: 2 };
  o2.__proto__ = o1;
  let { ...o3 } = o2;
  o3 // { b: 2 }
  o3.a // undefined
  
  
  const o = Object.create({ x: 1, y: 2 });
  o.z = 3;
  
  let { x, ...newObj } = o;
  let { y, z } = newObj;
  x // 1
  y // undefined
  z // 3
  
  let { x, ...{ y, z } } = o;
  // SyntaxError: ... must be followed by an identifier in declaration contexts

Application

• ##Expand the parameters of a function and introduce other operations.

function baseFunction({ a, b }) {
// ...
}
function wrapperFunction({ x, y, ...restConfig }) {
// 使用 x 和 y 参数进行操作
// 其余参数传给原始函数
return baseFunction(restConfig);
}

• Get all traversable properties of the parameter object and copy them to the current object.

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

//上面的例子只是拷贝了对象实例的属性，如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法。
// 写法一
const clone1 = Object.assign(
Object.create(Object.getPrototypeOf(obj)),
obj
);
// 写法二
const clone2 = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)

• Merge two objects.

  let ab = { ...a, ...b };
  // 等同于
  let ab = Object.assign({}, a, b);
  
  
  //如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。
  let aWithOverrides = { ...a, x: 1, y: 2 };
  // 等同于
  let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
  // 等同于
  let x = 1, y = 2, aWithOverrides = { ...a, x, y };
  // 等同于
  let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

• Modify the properties of an existing object part.

  let newVersion = {
  ...previousVersion,
  name: 'New Name' // Override the name property
  };

Others

If you put the custom attribute in front of the spread operator, it becomes the default attribute value of the new object.
• Like the spread operator for arrays, the spread operator for objects can be followed by an expression.
• If the spread operator is followed by an empty object, it has no effect.
• If the parameter of the expansion operator is
• null or undefined, these two values ​​will be ignored and no error will be reported.
• If there is a value function

  get in the parameter object of the expansion operator, this function will be executed.

[Related recommendations:

javascript video tutorial, programming video】

The above is the detailed content of What is the function of three points in es6?. For more information, please follow other related articles on the PHP Chinese website!