1. Enforce parameters

ES6 provides a default argument value mechanism that allows you to set default values for arguments in case the function is called without passing them in. In the example below, we write a required() function as the default for parameters A and b. This means that if either a or B does not pass a value when called, the required() function defaults and an error is thrown.

`const required = () => {``throw` `new` `Error(``'Missing parameter'``)}; `
`const add = (a = required(), b = required()) => a + b; `
`add(1, 2)` ` ` / / 3
`add(1)` `// Error: Missing parameter.`
Copy the code

2. Powerful Reduce

The reduce method of arrays is very versatile. It is typically used to reduce each item in an array to a single value. But you can do so much more with it.

2.1 Using Reduce to Implement Both Map and Filter

Suppose you have a sequence, and you want to update each of its entries (map functionality) and filter out some of them (filter functionality). If you use map and filter first, you need to traverse the array twice. In the code below, we double the values in the sequence and pick out the numbers greater than 50. Notice how efficiently we use Reduce to complete both map and Filter methods at the same time?

`const numbers = [10, 20, 30, 40]; `
`const doubledOver50 = numbers.reduce((finalList, num) => {`
`num = num * 2; `
`if` `(num > 50) {`
`finalList.push(num); `
`} `
`return` `finalList; `
`}, []);`
`doubledOver50; ` ` ` / / [60, 80]Welcome to join the full stack development AC stroke AC circle:582735936For the stroke1- 3The front-end staff helped break through the bottleneck of paddling and improved the thinking abilityCopy the code

2.2 Replacing Map and Filter with Reduce

If you read the above code carefully, you can understand that Reduce can replace Map and Filter.

2.3 Matching Parentheses using Reduce

Another use of reduce is to be able to match parentheses in a given string. For a string containing parentheses, we need to know if the number of (and) is the same and before. We can easily solve this problem using Reduce in the following code. We just have to declare a counter variable that starts at 0. When encountered (counter + 1, encountered) counter minus 1. If the number of parentheses matches, the final result is 0.

`//Returns 0 if balanced.`
`const isParensBalanced = (str) => {`
`return` `str.split(``''``).reduce((counter, char) => {`
`if``(counter < 0) {` `//matched ")" before "("`
`return` `counter; `
`} ` `else` `if``(char ===` ` '(' ``) {`
`return` `++counter; `
`} ` `else` `if``(char ===` ` ` ') '`) {`
`return` `--counter; `
`} ` `else` ` {` `//matched some other char`
`return` `counter; `
`} `
`}, 0); ` `//<-- starting value of the counter}`
`isParensBalanced(`` '() ()' ``) ` `// 0 <-- balanced`
`isParensBalanced(``'(asdfds)'``) ` `//0 <-- balanced`
`isParensBalanced(`` '(()' ``) ` `// 1 <-- not balanced`
`isParensBalanced(`` ') (' ``) ` `// -1 <-- not balanced`Welcome to join the full stack development AC stroke AC circle:582735936For the stroke1- 3The front-end staff helped break through the bottleneck of paddling and improved the thinking abilityCopy the code

2.4 Count the number of identical items in an array

A lot of times, you want to count the number of duplicate items in the array and represent them as an object. Then you can use the reduce method to process this array. The following code will count the number of vehicles of each type and represent the total as an object.

`var` `cars = [``'BMW'``, ``'Benz'``, ` `'Benz'``, ` `'Tesla'``, ` `'BMW'``, ` `'Toyota'``]; `
`var` `carsObj = cars.reduce(``function` `(obj, name) {`
`obj[name] = obj[name] ? ++obj[name] : 1; `
`return` `obj; `
`}, {}); `
`carsObj; ` `// => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }`
Copy the code

There are so many other uses of reduce that I recommend reading MDN code examples.

3. Object deconstruction

3.1 Deleting unnecessary Attributes

Sometimes you don’t want to keep certain object properties, perhaps because they contain sensitive information or are just too big. You might enumerate the entire object and then delete it, but in reality you simply assign the useless attributes to the variable and leave the useful parts you want to keep as the remaining parameters. In the following code, we want to remove the _internal and tooBig arguments. We can assign them to internal and tooBig variables and store the remaining properties in cleanObject for later use.

`let {_internal, tooBig, ... cleanObject} = {el1:` ` ` '1'`, _internal:``"secret"``, tooBig:{}, el2:` ` ` '2'`, el3:` ` ` '3'`}; `
`console.log(cleanObject); ` `// {el1: '1', el2: '2', el3: '3'}`
Copy the code

3.2 Deconstructing nested objects in function arguments

In the following code, engine is an object nested within the object CAR. If we are interested in the Vin attribute of engine, we can easily get it using deconstructed assignment.

`var` `car = {`
`model:` `'bmw 2018'``, `
`engine: {`
`v6:` `true``, `
`turbo:` `true``, `
`vin: 12345`
`} `
`} `
`const modelAndVIN = ({model, engine: {vin}}) => {`
`console.log(`model: ${model} vin: ${vin}`); `
`} `
`modelAndVIN(car); ` `// => model: bmw 2018 vin: 12345`
Copy the code

3.3 Merging Objects

ES6 brings extension operators (…) . It’s usually used to deconstruct arrays, but you can also use it for objects. Next, we expand a new object using the extension operator, and the property values in the second object overwrite the property values of the first object. For example, the b and c of object2 overwrite the same attribute of Object1.

`let object1 = { a:1, b:2,c:3 }`
`let object2 = { b:30, c:40, d:50}`
` let merged = {... Object1,... object2}` `//spread and re-add into merged`
`console.log(merged)` `// {a:1, b:30, c:40, d:50}`
Copy the code

4. Sets

4.1 Using Set to implement array de-duplication

In ES6, because a Set stores only unique values, you can use a Set to remove duplicates.

`let arr = [1, 1, 2, 2, 3, 3]; `
`let deduped = [...``new` `Set(arr)]` ` / / ` [1, 2, 3]
Copy the code

4.2 Using array methods on sets

The extension operator makes it easy to convert a Set to an array. So you can use all of Array’s native methods on sets. Let’s say we want to filter the Set below to get items greater than 3.

`let mySet =` `new` ` Set ([1, 2, 3, 4, 5)); `
`var` `filtered = [...mySet].filter((x) => x > 3)` ` ` / / [4, 5]
Copy the code

5. Array deconstruction

Sometimes you will put multiple values returned by a function in an array. We can use array deconstruction to get each of these values.

5.1 Value Exchange

`let param1 = 1; `
`let param2 = 2; `
`//swap and assign param1 & param2 each others values`
`[param1, param2] = [param2, param1]; `
`console.log(param1)` ` ` / / 2
`console.log(param2)` ` ` / / 1
Copy the code

5.2 Receive multiple results returned by the function

In the code below, we get a post from /post and the associated comments from/Comments. Since we are using async/await, the function puts the return value in an array. By using array deconstruction, we can assign the return value directly to the corresponding variable.

`async` `function` `getFullPost(){`
`return` `await Promise.all([`
`fetch(``'/post'`` `)
`fetch(``'/comments'``) `
`]); `
`} `
`const [post, comments] = getFullPost(); `Welcome to join the full stack development AC stroke AC circle:582735936For the stroke1- 3The front-end staff helped break through the bottleneck of paddling and improved the thinking abilityCopy the code

What is ES6?

ECMAScript 6 (ES6) is the next generation standard for the JavaScript language, which was officially released in June 2015. Mozilla will build on this standard with JavaScript 2.0.

What is the relationship between ECMAScript and JavaScript? For starters, ECMAScript is the international standard for JavaScript, and JavaScript is the implementation of ECMAScript.

Let and const

In JavaScript, we used to use the key var to define variables. After ES6, we added two new keywords to define variables, namely let and const. For variables, in ES5 var variables are promoted before all functions and statements in scope, whereas in ES6 let variables are not. Let variables create a temporary dead zone in their corresponding code block until the variable is declared. Let and const can both declare block-level scope, similar to var, in that let does not promote variables and is locked in the current block.

A very simple example:

`function` `test() {`
`if`` (``true``) {`
`console.log(a)`'//TDZ, a temporary dead zone, is used to describe the phenomenon of variables not ascending
`let a = 1`
`} `
`} `
`test()` `// a is not defined`
`function` `test() {`
`if`` (``true``) {`
`let a = 1`
`} `
`console.log(a)`
`} `
`test()` `// a is not defined`
Copy the code

The only correct way to use it: declare first, access later.

`function` `test() {`
`if`` (``true``) {`
`let a = 1`
`console.log(a)`
`} `
`} `
`test()` ` ` / / 1Welcome to join the full stack development AC stroke AC circle:582735936For the stroke1- 3The front-end staff helped break through the bottleneck of paddling and improved the thinking abilityCopy the code

const

Declare constants. Once declared, they cannot be changed, and constants must be initialized. Const is a constant and is not allowed to change the default assignment. However, if you define an Object, you can change the value of the property inside the Object.

`const type = {`
`a: 1`
`} `
`type.a = 2` '// Instead of directly modifying the value of type, modify the property value of type.a, which is allowed. `
`console.log(type)` `// {a: 2}`
Copy the code

Similarities and differences between const and let

Similarities: Const and let are both valid within the current block and are destroyed outside the block. There is no variable promotion (TDZ) and they cannot be declared twice.

Differences: Const cannot be reassigned; let variables can be repeatedly assigned. What const actually guarantees is not that the value of the variable cannot be changed, but that the data stored at the memory address to which the variable points cannot be changed. For data of simple types (values, strings, booleans), the value is stored at the memory address to which the variable points, and is therefore equivalent to a constant. But for complex type data (mainly objects and arrays), variable pointing to the memory address, save only a pointer to the actual data, const can guarantee the pointer is fixed (i.e., always points to the other a fixed address), as far as it is pointing to the data structure of variable, is completely unable to control. Therefore, declaring an object as a constant must be done with great care.

Usage scenarios for block-level scopes

A variable declared by var in a for loop will jump out of the loop and pollute the current function.

`for`` (``var` `i = 0; i < 5; i++) {`
`setTimeout(() => {`
`console.log(i)` '//5, 5, 5, 5, 5
` `}, 0)
`} `
`console.log(i)` '// 5i jumps out of the loop and pollutes the external function'
'// change var to let'
`for``(let i = 0; i < 5; i++) {`
`setTimeout(() => {`
`console.log(i)` ` / / 0,1,2,3,4 `
` `}, 0)
`} `
`console.log(i)`'// I is not defined I cannot contaminate the external function'
Copy the code

In real development, we choose to use var, let, or const depending on whether our variables need to be updated or not. Usually we want variables to be protected from malevolent modification and use lots of const. Use const declarations. When declaring an object, const is also recommended. When you need to change the value of a declared variable, use let instead.

symbol

Before ES6, we knew that the five basic data types were Undefined, Null, Boolean, Number, and String. Then we added a reference type Object to make up all the data types in JavaScript. The name symbol, as its name suggests, means unique. It means that each symbol type is unique and does not duplicate any other symbol. A new value of type Symbol can be created by calling the Symbol() method, which is unique and not equal to any value.

`var` `mySymbol=Symbol(); `
`console.log(``typeof` `mySymbol)` `//"symbol"`
Copy the code

2. String

ES6 string new method UTF-16 code point: ES6 enforces utF-16 string encoding. Please find utF-16 on your own. CodePointAt () : This method supports UTF-16, takes the position of the encoding unit instead of the string position as an argument, and returns the code point corresponding to a given position in the string, that is, an integer value. String.fromcodepoiont () : The opposite of codePointAt, retrieves the code point of a character in a String, or generates a character from the specified code point. Normalize () : Provides a standard form of Unicode, taking an optional string parameter to indicate that a standard form of Unicode should be applied. In ES6, three new methods have been added. Each method takes two parameters, a substring to detect, and the index position to start matching.

Template string

Strings are one of the most frequently used types in JavaScript, except for objects. Strings contain methods such as substr, replace, indexOf,slice, and so on. ES6 introduced the template string feature, which is represented by backquotes. You can represent multi-line strings and do text interpolation (using template placeholders).

`// The previous multi-line string is written like this: '
`console.log(``"hello world 1\n\`
`hello cala"` `); ` `// "hello world`
`// hello cala"`
`// After you have the template string
`console.log(`hello world`
`string text line 2`); ` `// "hello world`
`// hello cala"`
Copy the code

You can use ${} to represent template placeholders, and you can pass variables you have defined into brackets, for example:

`var` `name=``"cala"` `; ` `var` `age=22; ` `console.log(`hello,I``'am ${name},my age is ${age}`)`
`//hello,I''am cala,my age is 22 includes(STR, index) : returns'' if the specified text is detected in the stringtrue' ', otherwise ' 'false` `. ` `let t =` `'abcdefg'`
`if``(t.includes(``'cde'``)) {`
`console.log(2)`
`}`
`//trueStartsWith (STR, index) : Returns if the specified text is detected at the beginning of the stringtrue', otherwise return 'false` `. ` `let t =` `'abcdefg'`
`if``(t.startsWith(``'ab'``)) {`
`console.log(2)`
`}`
`//trueEndsWith (STR, index) : Returns if the specified text is detected at the end of the stringtrue', otherwise return 'false` `. ` `let t =` `'abcdefg'`
`if``(t.endsWith(``'fg'``)) {`
`console.log(2)`
`}`
`//true`
Copy the code

If you only need to match a string for a substring, the new method is recommended, and if you need to find the location of the matching string, use indexOf().

Three, functions,

The default argument to the function

In ES5, we pass parameters to a function and then set default values inside the function, as follows.

`function` `a(num, callback) {`
`num = num || 6`
`callback = callback ||` `function` `(data) {console.log(``'ES5: '``, data)}`
`callback(num * num)`
`} `
`a()` '// es5:36, no parameter output default'
'// You can also use callback as such
`a(10,` `function``(data) {`
`console.log(data * 10)` '// 1000, pass the parameter output new value'
` `})
Copy the code

In ES6, we use the new default writing

`function` `a(num = 6, callback =` `function` `(data) {console.log(``'ES6: '``, data)}) {`
`callback(num * num)`
`} `
`a()` '// ES6:36, no parameter output default'
`a(10,` `function``(data) {`
`console.log(data * 10)` '// 1000, pass the parameter output new value'
` `})
Copy the code

Iv. Arrow function (=>)

(The arrow function is very important, so I will mention it briefly and write an article about it later.)

`const arr = [5.10] ` `const s = arr.reduce((sum, item) => sum + item)`
`console.log(s)` `/ / 15 `
Copy the code

The arrow function uses this differently from ordinary functions. Ordinary functions in JavaScript have their own this value, which can be divided into:

Ordinary functions:

When the function is called as a global function, this refers to the global object. When the function is called as a method in the object, this refers to the new object. When the function is called as a constructor, this refers to the new object

Arrow function:

1. The arrow function does not have this. The this inside the function comes from the nearest non-arrow function and cannot change the direction of this. Arrow functions don’t have super. Arrow functions don’t have arguments. Arrow functions don’t have new. No prototype. 7. No support for duplicate named parameters.

Simple understanding of arrow functions

1. The left side of the arrow function represents the input parameters and the right side represents the output results.

`const s = a => a`
`cosole.log(s(2)) ` `/ / 2 `
Copy the code

In arrow functions, this belongs to the lexical scope and is directly determined by the context. For ordinary functions that point to indefinite this, it is easier to process this as follows:

'//ES5 normal function'
`function` `Man(){`
`this``.age=22; `
`return` `function`` () {`
`this``.age+1; `
`} `
`} `
`var` `cala=``new` `Man(); `
`console.log(cala())``//undefined`
'//ES6 arrow function'
`function` `Man(){`
`this``.age=22; `
`return` ` () = > ` `this``.age+1; `
`} `
`var` `cala=``new` `Man(); `
`console.log(cala())`23 ` ` / /
Copy the code

Arrow functions have no arguments(we can use rest arguments instead), no archetypes, and no new keyword (e.g. :

` / / not the arguments `
`var` `foo=(a,b)=>{``return` `arguments[0]*arguments[1]}`
` console. The log (foo (3, 5)) `
`//arguments is not defined`
'// No prototype'
`var` `Obj = () => {}; `
`console.log(Obj.prototype); `
`// undefined`
'// the new keyword' cannot be used
`var` `Obj = () => {``"hello world"``}; `
`var` `o =` `new` `Obj(); `
`// TypeError: Obj is not a constructor`
Copy the code

The arrow function sorts the array

`const arr = [10.50.30.40.20] ` `const s = arr.sort((a, b) => a - b)`
`console.log(s)` `/ / `,20,30,40,50 [10]
Copy the code

Tail-call optimization

A tail call is a call to a new function when the function returns. Since the implementation of the tail call needs to be stored in memory, in a loop body, if there are any tail calls to the function, your memory may be full or overflow.

In ES6, the engine does the last call optimization for you. You don’t need to do it yourself, but you need to meet the following three requirements:

A function is not a closure. 2. The trailing call is the last statement of the function

In the ES5 era, recursion was not recommended because recursion affected performance. But with tail-call optimization, the performance of recursive functions has improved.

'// New tail optimization writing method'
`"use strict"``; `
`function` `a(n, p = 1) {`
`if``(n <= 1) {`
`return` `1 * p`
`} `
`let s = n * p`
`return` `a(n - 1, s)`
`} `
// Find 1 x 2 x 3 factorial
`let sum = a(3)`
`console.log(sum)` ` ` / / 6
Copy the code

5. Add methods for ES6 objects

Object.assign()

The object.assign () method is used to copy the values of all enumerable properties from one or more source objects to target objects. It will return the target object. The object. assign method copies only the enumerable properties of the source Object itself to the target Object. This method uses the source object’s [[Get]] and the target object’s [[Set]], so it calls the relevant getter and setter. Therefore, it assigns attributes, rather than just copying or defining new attributes. If the merge source contains getters, this may make it unsuitable to merge the new properties into the stereotype. To defined properties (including its enumerable) is copied to the prototype, the Object should be used. The getOwnPropertyDescriptor () and Object. The defineProperty (). Both String and Symbol attributes are copied.

Merge objects

`var` `o1 = { a: 1 }; `
`var` `o2 = { b: 2 }; `
`var` `o3 = { c: 3 }; `
`var` `obj = Object.assign(o1, o2, o3); `
`console.log(obj); ` `// { a: 1, b: 2, c: 3 }`
`console.log(o1); ` '// {a: 1, b: 2, c: 3}, note that the target object itself also changes. `
Copy the code

Merge objects with the same properties

`var` `o1 = { a: 1, b: 1, c: 1 }; `
`var` `o2 = { b: 2, c: 2 }; `
`var` `o3 = { c: 3 }; `
`var` `obj = Object.assign({}, o1, o2, o3); `
`console.log(obj); ` `// { a: 1, b: 2, c: 3 }`Welcome to join the full stack development AC stroke AC circle:582735936For the stroke1- 3The front-end staff helped break through the bottleneck of paddling and improved the thinking abilityCopy the code

Map and Set

Both maps and sets are called sets, but they are also different. A Set is often used to check for the presence of a key name in an object, and a Map collection is often used to retrieve existing information. A Set is an ordered list of independent, non-repeating values. Array and Set are both containers that store multiple values. They can be converted to each other, but their usage scenarios are different. The indexOf method is less efficient than the HAS method of Set. A Set does not have duplicate values. A Set deletes a value by delete, whereas an Array can only be deleted by splice. Map, filter, some, every, etc. Set does not have (but can be converted to each other) Object and map Object is a string – value, Map is a value – The value Object key is of string type. The Map key can be of any type

The sort of Map is insertion order Object has archetypes, so there are some default keys in the Map. Map= object.create (null)

Set of operations

`let set =` `new` `Set()`
'// Set to array'
`let arr = Array.from(set)`
`let arr = [...set]`
'// Instance attributes (inherited from Set)'
`set.constructor === Set`
`set.size`
'// Operation method'
`set.add(1)` '// Add a value'
`set.``delete`` ` (1) '// Delete a value'
`set.has(1)` '// Determine if the value (indexOf in Array) exists
`set.clear()` '// Clear all values'
'// Get the member method used for traversal (the traversal order of Set is the insertion order)'
`set.keys()` '// Returns the traversal of the key name
`set.values()` '// return key worth traverser'
`set.entries()` '// Returns the traversal of the key-value pair
`set.forEach()` '// loop over each value (same as Array's method)'
`for` `(let key of set.keys()){}`
`for` `(let val of set.values()){}`
`for` `(let entry of set.entries()){}`
'// Use array methods to handle set values
`set =` `new` `Set(arr)`
`set =` `new` `Set([...set].map((x) => x = x * 2))`
`set =` `new` `Set([...set].filter((x) => x > 2))`
Copy the code

A collection of Map methods

`let map =` `new` `Map()`
'// Instance attributes (inherited from Map)'
`map.constructor === Map`
`map.size`
'// Operation method'
` ` map. The set (1, 2)
`map.get(1)`
`map.``delete`` ` (1)
`map.has(1)`
`map.clear()`
'// traversal method'
`map.keys()`
`map.values()`
`map.entries()`
`map.forEach()`
'// Map and array conversion'
`map =` `new` `Map([[``'key'``, ``'val'`` `], [2, 1]]) '// Requires a two-member array
`let arr = [...map]`
'// It is worth noting that Map keys are memory bound
`map.set([1],` `'s'``) `
`map.get([1])`
`let arr = [1]`
`let arr1 = [1]`
`map.set(arr,` `'s'``) `
`map.get(arr)`
`map.set(arr1,` `'s'``) `
`map.get(arr1)`
Copy the code

Iterators (iterators)

Entries () returns iterator: returns key-value pairs

` ` / / array
`const arr = [``'a'``, ` `'b'``, ` `'c'``]; `
`for``(let v of arr.entries()) {`
`console.log(v)`
`} `
`// [0, 'a'] [1, 'b'] [2, 'c']`
`//Set`
`const arr =` `new` `Set([``'a'``, ` `'b'``, ` `'c'``]); `
`for``(let v of arr.entries()) {`
`console.log(v)`
`} `
`// ['a', 'a'] ['b', 'b'] ['c', 'c']`
`//Map`
`const arr =` `new` `Map(); `
`arr.set(``'a'``, ` `'a'``); `
`arr.set(``'b'``, ` `'b'``); `
`for``(let v of arr.entries()) {`
`console.log(v)`
`} `
`// ['a', 'a'] ['b', 'b']`
Copy the code

Values () returns iterator: returns the value of the key-value pair

` ` / / array
`const arr = [``'a'``, ` `'b'``, ` `'c'``]; `
`for``(let v of arr.values()) {`
`console.log(v)`
`} `
`//'a' 'b' 'c'`
`//Set`
`const arr =` `new` `Set([``'a'``, ` `'b'``, ` `'c'``]); `
`for``(let v of arr.values()) {`
`console.log(v)`
`} `
`// 'a' 'b' 'c'`
`//Map`
`const arr =` `new` `Map(); `
`arr.set(``'a'``, ` `'a'``); `
`arr.set(``'b'``, ` `'b'``); `
`for``(let v of arr.values()) {`
`console.log(v)`
`} `
`// 'a' 'b'`
Copy the code

Keys () returns the iterator: returns the key of the key-value pair

` ` / / array
`const arr = [``'a'``, ` `'b'``, ` `'c'``]; `
`for``(let v of arr.keys()) {`
`console.log(v)`
`} `
` ` / / 0 1 2
`//Set`
`const arr =` `new` `Set([``'a'``, ` `'b'``, ` `'c'``]); `
`for``(let v of arr.keys()) {`
`console.log(v)`
`} `
`// 'a' 'b' 'c'`
`//Map`
`const arr =` `new` `Map(); `
`arr.set(``'a'``, ` `'a'``); `
`arr.set(``'b'``, ` `'b'``); `
`for``(let v of arr.keys()) {`
`console.log(v)`
`} `
`// 'a' 'b'`
Copy the code

Although the three built-in iterator methods are listed above, different collection types also have their own default iterators. In for of, the default iterator for arrays and sets is values(), and for Map is entries().

For the cycle

The object itself does not support iteration, but we can add a generator of our own that returns an iterator of key and value, and then use a for of loop to deconstruct the key and value.

`const obj = {`
`a: 1,`
`b: 2,`
`*[Symbol.iterator]() {`
`for``(let i` `in` `obj) {`
`yield [i, obj[i]]`
`} `
`} `
`} `
`for``(let [key, value] of obj) {`
`console.log(key, value)`
`} `
`// 'a' 1, 'b' 2`
Copy the code

String iterator

`const str =` `'abc'``; `
`for``(let v of str) {`
`console.log(v)`
`} `
`// 'a' 'b' 'c'`
Copy the code

ES6 adds several new methods to arrays: find(), findIndex(), fill(), copyWithin()

1. Find () : Passes a callback function that finds the first element in the array that matches the current search rule, returns it, and terminates the search.

`const arr = [1,` ` ` "2"` `, 3, 3 ` ` "2"`] `
`console.log(arr.find(n =>` `typeof` `n ===` `"number"`` `)) ` ` / / 1
Copy the code

FindIndex () : Passes a callback function that finds the first element in the array that matches the current search rule, returns its index, and terminates the search.

`const arr = [1,` ` ` "2"` `, 3, 3 ` ` "2"`] `
`console.log(arr.findIndex(n =>` `typeof` `n ===` `"number"`` `)) ` / / 0 `
Copy the code

3. Fill () : replace the element in the array with a new element.

`arr.fill(value, start, end)`
Copy the code

4. CopyWithin () : Selects an index of the array and copies elements from there, starting from 0 by default. You can also specify a range of elements to copy.

`arr.copyWithin(target, start, end)`
`const arr = [1, 2, 3, 4, 5]`
`console.log(arr.copyWithin(3))` '// [1,2,3,1,2] copies the array from the element with subscript 3, so 4, 5 are replaced with 1,2'
`const arr1 = [1, 2, 3, 4, 5]`
`console.log(arr1.copyWithin(3, 1))` '// [1,2,3, 3] copies the array starting with the element with index 3, specifying that the first element to be copied has index 1, so 4, 5 are replaced with 2,3'
`const arr2 = [1, 2, 3, 4, 5]`
`console.log(arr2.copyWithin(3, 1, 2))` '// [1,2,3,2,5] copies the array starting with the element with subscript 3, specifying that the first element copied is subscript 1 and ends at position 2, so 4 is replaced with 2'
Copy the code

ES6 classes class, Promise, and asynchronous programming, Proxy, and Reflection apis are more complex, but I’ll write more about them later.