Object's methods and properties

for...in

Traverse the enumerable properties of an object other than Symbol in any order

for (variable in object)
  statement

• variable

  At each iteration, variable is assigned a different property name.

• object

  An object whose enumerable properties of non Symbol type are iterated.

let obj ={
  a:1,
  b:2,
  c:3
 }
//Traverse out object properties
// 1,
for(let prop in obj){
    console.log("obj."+prop+"="+obj[prop]);
}
// 2,
for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
        console.log(`obj.${prop} = ${obj[prop]}`);
    }
}

for...of

for...of statement in Iteratable object (including Array，Map，Set，String，TypedArray，arguments Object, etc.), call the custom iteration hook, and execute the statement for the value of each different attribute

const arr = [ 'a','b','c']
    for(const ele of arr){
      console.log(ele);//a,b,c
    }

Syntax:

for (variable of iterable) {
    //statements
}

• variable

  In each iteration, the values of different attributes are assigned to variables.

• iterable

  An object whose properties are iteratively enumerated.

The difference between for... in() and for... of() is mainly reflected in Array

for...in Statement iterates over the of an object in any order Enumerable properties.

for...of statement traversal Iteratable object Define the data to iterate over.

let iterable =[3,5,7,"foo"];

for(let i in iterable){
    console.log(i);//0,1,2,3
}

 for(let i of iterable){
    console.log(i);//3,5,7,'foo'
 }

Object.assign()

**The Object.assign() * * method is used to assign the values of all enumerable attributes from one or more source objects to the target object. It will return the target object

const target = { b: 4, c: 3 }
const source = { a: 1, b: 2 };
Object.assign(target, source);
console.log(target);//a:1,b:2,c:3
console.log(source);//a:1,b:2

Syntax:

Object.assign(target, ...sources)

• target

  Target object.

• sources

  Source object.

If the attributes in the target object have the same key, the attributes are overwritten by the attributes in the source object. The properties of the subsequent source object will similarly override the properties of the previous source object.

Note: Object.assign will not be used when the source object value is null or undefined Throw an error when.

copy object

let obj1 = {a:0,b:{c:1}}
let obj2 = Object.assign({},obj1);
console.log(obj2);//{a:0,b:{c:1}}

Copy

Object.assign is a shallow copy. If you need a deep copy, you need to use other methods

let obj1 = {a:0,b:{c:1}}
let obj2 = Object.assign({},obj1);
console.log(obj2);//{a:0,b:{c:1}}
obj1.a=4;
console.log(obj1)//a: 4  b: {c: 1}
console.log(obj2)//a: 0  b: {c: 1}
obj1.b.c =2
console.log(obj1);//a: 4 b: {c: 2}
console.log(obj2);//a: 0 b: {c: 2}

//deep clone
//Use JSON.parse(JSON.stringify())
obj3 = {a:0,b:{c:0}};
let obj4 = JSON.parse(JSON.stringify(obj3));
obj3.b.c=4
obj3.a=4
console.log(obj3);//a: 4 b: {c: 4}
console.log(obj4);//a: 0 b: {c: 0}

Merge objects

const obj1 = {a:1}
const obj2 = {b:2}
const obj3 = {c:3}
const obj = Object.assign(obj1,obj2,obj3)
console.log(obj1);//{a: 1, b: 2, c: 3} the target object will also change
console.log(obj);//{a: 1, b: 2, c: 3}

Merge objects with the same properties

const obj1 = {a:1,b:2,c:3}
const obj2 = {b:4,c:5}
const obj3 = {c:6}
const obj = Object.assign({},obj1,obj2,obj3)
console.log(obj);//The back of {a: 1, b: 4, c: 6} covers the front
console.log(obj1);//{a:1,b:2,c:3} the target object will not change

Array methods and properties

Array.prototype.forEach()

Array.forEach() executes the given function once for each element of the array

arr.forEach(callback(currentValue,index,array),thisArg)

• callback

  The function executed for each element in the array, which receives one to three parameters:

  The current element being processed in the currentValue array. Index the index of the current element being processed in the optional array. Array the array that the optional forEach() method is working on.

• thisArg optional

  Optional parameters. Used as the value of this when the callback function callback is executed.

const array = ['a','b','c']
array.forEach(ele => console.log(ele))

lookup

find()

The parameters are callback functions ⭐⭐⭐⭐

Find the qualified elements in the array. If there are multiple qualified elements, the first element will be returned

let arr = Array.of(1,2,3,4)
console.log(arr.find(item => item === 2))//2
//Array empty bits are processed as undefined
console.log([,3,4].find(item => true));//undefined

findIndex()

The first parameter: the parameter is also a callback function. The second parameter (optional): Specifies the return index of this value in the callback function ⭐⭐⭐⭐

Find the qualified element index in the array. If there are multiple qualified elements, return the first element index

let arr1 = Array.of(1,2,3,4,5)
console.log(arr1.findIndex(item => item == 2))

fill

fill()

Populates the contents of array elements with a range of indexes into a single specified value

There are three parameters:

First parameter: the value to fill in

Second parameter: the starting index to be filled

The third parameter (optional): the end index to be filled. It defaults to the end of the array

let arr2 = Array.of(1,2,3,4,5)
console.log(arr2.fill(0,1,2));//[1,0,3,4,5]

copyWithin()

Modifies an array element with a range index to another element with a specified range index for this array

There are three parameters:

First parameter: the starting position to be overwritten

The second parameter: the starting index used to overwrite the data

The third parameter: used to overwrite the end index of the data. It defaults to the end of the array

let a = [1,2,3,4,5,6,7]
console.log(a.copyWithin(0,1,3))//[2, 3, 3, 4, 5, 6, 7]

Convert nested array to array

flat()

De flattening

let arr5 = [1,[3,5,[6,3,[7]]]]
//  If not specified, only one layer is removed
console.log(arr5.flat());
console.log(arr5.flat(2));
console.log(arr5.flat(3));
// If flattening has been achieved, the number will be the same no matter how much you add
console.log(arr5.flat(4));
// A simple nested array can quickly know how many dimensions it is
// It is very troublesome to count or try numbers one by one in a complex nested array
// At this time, we introduce the word Infinity
// No matter how many layers, directly de flatten
console.log(arr5.flat(Infinity));

flatMap()

First, each element in the array is processed, and then the flat() method is executed on the array

console.log([1,2,3,4,5,6].flatMap(n =>  [n*2] ))//[2, 4, 6, 8, 10, 12]
// You can have brackets or not, but you'd better have them
console.log([1,2,3,4,5,6].flatMap(n =>  n*2 ))//[2, 4, 6, 8, 10, 12]
// If it is a multi-dimensional array, you need to use flat() before using flatMap()
console.log([1,2,[3,4,[5,6]]].flatMap(n =>  [n*2] ))//[2,4,NaN]