Detailed explanation of extended examples of various data types in es6

1. Extension of string

1. Adds an Iterator to the string, which can be traversed by for...of

2. includes, startsWith and endsWith both return Boolean values ​​and support the second parameter (the starting position of the search). endsWith targets the first n characters, and the other two are from the nth to the end

3. repeat returns a new string, and the parameter is the number of repetitions (the decimal will be rounded down, a negative number or Infnity will report an error, 0 to -1 is equivalent to 0, and the string will be converted to a number)

4. padStart and padEnd are completed at the head or tail. The first parameter is the minimum length of the string, and the second parameter is the string used for completion.

5. Template String `${...}`

2. Numeric expansion

1. Number.isFinite checks whether a value is finite, All non-numeric values ​​return false

2. Number.isNaN checks whether a value is NaN, and only NaN returns true;
   The traditional method isFinite isNaN will first call Number() to convert the non-numeric value Convert to a numerical value

3. Number.parseInt(), Number.parseFloat() are the same as the traditional methods, the purpose is to reduce the global method and language modularization

4. Number.isInteger() determines whether it is an integer

5. Number.EPSILON is a very small constant. If the error of floating point calculation is less than this value, it is ok

6. The exact integer range of JS: -2^53~2^53 (excluding both ends),
   Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
   Number.MIN_SAFE_INTEGER = -Number.MAX_SAFE_INTEGER;
   Number.isSafeInteger() is used to determine whether an integer falls within this range;

7. Math.trunc() removes the decimal part and returns an integer Part;
   Math.sign() determines whether it is a negative integer or 0;
   Math.cbrt() calculates the cube root of a number; there are also some logarithmic methods and trigonometric function methods;
   Exponential operator 2 * * 3 === 8, which is different from the Math.pow implementation. For particularly large operations, the last digit of the operation result is different;

3. Array expansion

1. Array.from can convert array-like objects and traversable objects into arrays, and the spread operator can also convert certain objects into arrays;
   can accept a second parameter, similar to the map method , returns the processed value to an array;

2. Array.of converts a set of values ​​into an array;

3. copyWithin copies the member at the specified location to other locations;
   Array.prototype.copyWithin(target, start = 0, end = this.length)

4. find finds the first qualified member, the parameter is one Callback function;
   findIndex returns the position of the first array member that meets the conditions

5. fill fills the array with the given value, and the second and third parameters can specify the start and end positions;

6. keys, values, entries

7. includes, indexOf is not semantic enough, and is used internally == judgment,
   [NaN] .indexOf(NaN) // -1 , [NaN].includes(NaN) // true
   Map's has is used to find key names, Set's has is used to find values

8. The empty position of the array has no value, 0 in [,,] // false, es6 will convert the empty position to undefined, and the empty position should be avoided

four . Function extension

1. allows setting default values ​​for functions. If default values ​​are set for non-tail parameters, in fact this parameter cannot be omitted;
   After setting the default value , the length attribute of the function will return the number of parameters without a specified default value;
   If the parameter with a default value set is not the tail parameter, then the length attribute will not be counted. Enter the following parameters;

2. Once the default value of the parameter is set, when the function is declared and initialized, the parameters will form a separate scope (context). When the initialization is completed, this scope will disappear. This syntax behavior will not appear when the parameter default value is not set.

3. Rest parameter (... variable name)

4. Extension operator (...), convert an array to comma-separated parameter sequence.
   

   /* 替代数组的apply方法 */// ES5的写法function f(x, y, z) {  // ...}var args = [0, 1, 2];
   f.apply(null, args);// ES6的写法function f(x, y, z) {  // ...}var args = [0, 1, 2];
   f(...args);/* --------------------------------- */// ES5的写法Math.max.apply(null, [14, 3, 77])// ES6的写法Math.max(...[14, 3, 77])// 等同于Math.max(14, 3, 77);/* --------------------------------- */// ES5的写法var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];
   Array.prototype.push.apply(arr1, arr2);// ES6的写法var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];
   arr1.push(...arr2);

5. Notes on using arrow functions:

   (1) The this object in the function body is the definition The object in which it is located at the time of use, not the object in which it is used.

   (2) cannot be used as a constructor, that is to say, the new command cannot be used, otherwise an error will be thrown.

   (3) The arguments object cannot be used, as the object does not exist in the function body. If you want to use it, you can use the rest parameter instead.

   (4) The yield command cannot be used, so the arrow function cannot be used as a Generator function.

5. Object extension

1. Abbreviated representation of attributes

2. Attribute name expression, [variable name]

3. The name attribute of the method returns the function name (i.e. method name)

4. Object.is is basically the same as ===. The difference is that +0 is not equal to -0, and NaN is equal to itself
   

   // es5实现Object.isObject.defineProperty(Object, 'is', {
     value: function(x, y) {if (x === y) {      // 针对+0 不等于 -0的情况  return x !== 0 || 1 / x === 1 / y;
       }// 针对NaN的情况return x !== x && y !== y;
     },
     configurable: true,
     enumerable: false,
     writable: true});

5. Object.assign(target, o1, o2) is used to merge objects. If there are properties with the same name, the previous ones will be overwritten later; the shallow copy executed
   cannot be converted due to undefined and null into objects, so if they are used as parameters, an error will be reported;

6. Object.getOwnPropertyDescriptor method can obtain the description object of the property.

7. Traversal of properties:
   for...in, Object.keys, Object.getOwnPropertyNames(obj), Object.getOwnPropertySymbols(obj), Reflect.ownKeys(obj)

8. __proto__ has the same function as Object.setPrototypeOf(), used to set the prototype object of an object, Object.getPrototypeOf()

9. Object. keys(), Object.values(), Object.entries()

10. Object.getOwnPropertyDescriptors returns the description object of all its own properties (non-inherited properties) of the specified object;

The above is the detailed content of Detailed explanation of extended examples of various data types in es6. For more information, please follow other related articles on the PHP Chinese website!