[ES5] overview of new methods - foreach () - filter () - some () - map () - trim () - object defineProperty()

Posted by thefisherman on Sat, 22 Jan 2022 14:41:01 +0100

ES5 has added some methods to operate arrays or strings conveniently. These methods mainly include:

  • Array method
  • String method
  • Object method

1, Array method

Iterative (traversal) methods: forEach, map(), filter(), every()

1.forEach

Executes the given function once for each element of the array.

1.1 writing method

array.forEach( function(Item,index,arr) )
  • Item: array current item
  • Index: current index of the array
  • arr: array itself

1.2 features

If there is no return value, forEach directly changes the array

1.3 cases

//forEach iteration (traversal) array
    let arr = [1, 2, 3]
    arr.forEach((item, index, array) => {
        console.log("Each array element is" + item);
        console.log("The index number of each array element is" + index);
        console.log("Array itself" + array);
    })
    /*
    Each array element is 1
    The index number of each array element is 0
    Array itself 1,2,3
    Each array element is 2
    The index number of each array element is 1
    Array itself 1,2,3
    Each array element is 3
    The index number of each array element is 2
    Array itself 1,2,3
    */

2. filter

Create a new array that contains all the elements of the test implemented by the provided function.

2.1 writing method

array.filter( function(Item,index,arr) )
  • Item: array current item
  • Index: current index of the array
  • arr: array itself

2.2 features

  • With return value: a new array composed of elements that pass the test. If no array elements pass the test, an empty array is returned.
  • It is often used to filter out useful data in an array

2.3 cases

Filter out numbers greater than 10 from the array

//filter iterates over the array
    let arr = [1, 6, 14, 2, 42, 4]
    let resuslt = arr.filter((item, index, array) => {
        return item > 10
    })
    console.log(resuslt);  // [14, 42]

3. some

The some() method is used to detect whether the elements in the array meet the specified conditions Click to find whether there are qualified elements in the array

3.1 writing method

array.some( function(Item,index,arr) )
  • Item: array current item
  • Index: current index of the array
  • arr: array itself

3.2 features

  • Return value: note that its return value is a Boolean value. If this element is found, it returns true. If it is not found, it returns false.
  • If the first element satisfying the condition is found, the loop is terminated and the search is no longer continued

3.3 cases

Is there any element greater than 20 in the array

//some finds whether there are elements in the array that meet the conditions
    let arr = [1, 30, 14]
    let resuslt = arr.some((item) => {
        return item > 20
    })
    console.log(resuslt);  // true

3.4 difference between filter and some

  1. The filter also finds the elements that meet the conditions, returns an array, and returns all the elements that meet the conditions
  2. some is also used to find whether the element satisfying the condition exists. It returns a Boolean value. If the first element satisfying the condition is found, the loop I will be terminated

4. map

The map() method creates a new array, and the result is that each element in the array is the return value after calling the provided function once.

4.1 writing method

array.map( function(Item,index,arr) )
  • Item: array current item
  • Index: current index of the array
  • arr: array itself

4.2 features

  • Return value: a new array composed of the results of the callback function executed by each element of the original array.
  • It is often used to change the elements in the array and create a new array in the group. It is a little similar to forEach, but forEach directly changes the original array and does not return a new array

4.3 cases

Add one to each element in the array

//map iteration (traversal) array
    let arr = [1, 6, 14, 2, 42, 4]
    let resuslt = arr.filter((item) => {
        return item + 1
    })
    console.log(resuslt);  // [2, 7, 15, 3, 43, 5]

2, String method

1. trim

The trim() method removes white space characters from both ends of a string

1.1 writing method

str.trim()

1.2 features

  • The trim() method does not affect the original string, it returns a new string
  • trim() can only remove the spaces on both sides, not the spaces in the middle

1.3 cases

//some finds whether there are elements in the array that meet the conditions
    let str =  "    andy    "
    let resuslt = str.trim()
    console.log(resuslt);  //andy

3, Object method

Object.defineProperty()

Object.defineProperty() defines a new property or modifies an existing property in an object.

Writing method

Object.defineProperty(obj,prop,descriptor)
  • obj: required. Target object
  • prop(str): required. The name of the attribute to be defined or modified
  • descriptor(obj): required. Attributes owned by the target attribute

Object.defineProperty) description of the third parameter descriptor: written as an object {}

  • Value: set the value of the attribute to undefined by default
  • writable: whether the value can be overridden. true | false the default is false
  • enumerable: whether the target attribute can be enumerated. true | false the default is false
  • configurable: whether the target attribute can be deleted or whether the attribute can be modified again. true | false is false by default

Case 1

  • Change the price of obj object to 1000
  • Change the id of obj to non rewritable
//Object.defineProperty() defines a new property or modifies an existing property
let obj = {
    id:1,
    pname:"millet",
    price:1999
}
//Change the price of obj object to 1000
Object.defineProperty(obj,"price",{
    value: 1000
})
//Change the id attribute of obj object to ----- > and cannot be modified
Object.defineProperty(obj,"id",{
    writable:false
})
//Inspection results
console.log(obj.price); // 1000
obj.id = 2
console.log(obj.id); // 1

Case 2

  • Set the price of obj to non enumerable
  • Set the id of obj to be undeletable
//Object.defineProperty() defines a new property or modifies an existing property
let obj = {
    id:1,
    pname:"millet",
    price:1999
}
//Set the price of obj to non enumerable
Object.defineProperty(obj,"price",{
    enumerable: false
})
//Set the id of obj to be undeletable
Object.defineProperty(obj,"id",{
    configurable:false
})
//Inspection results
console.log(Object.keys(obj)); // 1000

delete obj.id
console.log(obj); //{id: 1, pname: 'Xiaomi', price: 1999}

Topics: Javascript Front-end ECMAScript TypeScript Vue.js