当前位置:网站首页>Take you to learn the new methods in Es5

Take you to learn the new methods in Es5

2020-11-06 20:37:00 Tell me Zhan to hide

1. ES5 Some new methods are added in , Can be very convenient operation array or string , These methods mainly include the following aspects

  • Array methods
  • String method
  • Object methods

2. Array methods

Iterative traversal method :forEach()、map()、filter()、some()、every()
Judgment method :isArray()

2.1 forEach Follow jQuery Of each Usage is similar. . Grammar is :

array.forEach(function(currentValue, index, arr))
  • currentValue: Array the values of the current item
  • index: Array the index of the current item
  • arr: Array object itself
var arr = [1,2,3]
arr.forEach(function(value, index, array){
   
	console.log(' Every array element '+ value)
  console.log(' The index value of each array element '+ index)
  console.log(' The array itself '+ array)
})

The operation effect is shown below
image.png

2.2 map()

array.map(function(currentValue, index, arr))

map() Method to create a new array , The result is the result returned after each element in the array invokes a supplied function .
Be careful :map() Method is to return a new array directly

  • currentValue: Array the values of the current item
  • index: Array the index of the current item
  • arr: Array object itself
var array1 = [1, 4, 9, 16];
var map1 = array1.map(function(value, index, arr) {
   
return value * 2
});
console.log(map1) //[2,8,18,32]

2.3 filter()

array.filter(function(currentValue, index, arr))

filter() Method is used to filter to create a new array , The elements in the new array are checked by checking all the eligible elements in the specified array , It is mainly used to filter arrays .
filter() Method is to return a new array directly

  • currentValue: Array the values of the current item
  • index: Array the index of the current item
  • arr: Array object itself
var arr = [12,66,88]
//  Choose greater than 20 Of 
var newarr = arr.filter(function(value, index){
   
  return value >=20
})
 It can be abbreviated as var newarr = arr.filter( //[66, 88])
console.log(newArr) //[66, 88]

The preview effect is shown in the following figure
image.png

2.4 some()

array.some(function(currentValue, index, arr))

some() Method is used to detect whether the elements in the array meet the specified conditions , Popular point to find whether there are elements in the array that meet the conditions
Be careful : some() Method return value is Boolean , If you find this element , Just go back to true, If not found, it will return false
If you find the first element that satisfies the condition , Then stop the cycle , No more searching

  • currentValue: Array the values of the current item
  • index: Array the index of the current item
  • arr: Array object itself
var arr=[10,30,4]
var b = arr.some(function(value){
   
	return value > 20
})
console.log(b) //true

2.5 every()

array.every(function(currentValue, index, arr))

every() Method to test whether all elements in an array can pass the test of a specified function . It returns a Boolean value .
Be careful :every() Method must be qualified for each element to return true, If one doesn't match , Then return to false.
If you receive an empty array , This method returns in all cases true.

  • currentValue: Array the values of the current item
  • index: Array the index of the current item
  • arr: Array object itself

2.6 isArray()

Array.isArray(obj)


Array.isArray() Used to determine if the value passed is a Array

  • obj Is the value that needs to be tested . If it is an array, it returns true, Otherwise return to false

difference :

  1. filter It's looking for elements that satisfy the condition , It returns an array , And it's to return all the elements that meet the conditions
  2. some It's to find out whether the element that satisfies the condition exists , It returns a Boolean value , If you look for the first element that satisfies the condition , Just stop the cycle . If the array queries for the only element , use some The method is more suitable , Because it finds this element , It's not a cycle , More efficient
  3. every It's to find out whether all elements meet the criteria , It returns a Boolean value
  4. map Is to create a new array , The result is the result returned after each element in the array invokes a supplied function

3. String method

trim() Method to remove white space characters from both ends of a string

str.trim()

trim() Method does not affect the original string itself , It returns a new string .

4. Object methods

Object.defineProperty() Define new properties or modify existing properties in the object

Object.defineProperty(obj, prop, descriptor)
  • obj: It's necessary . Target audience
  • prop: It's necessary . The name of the property to be defined or modified
  • descriptor: It's necessary . Properties owned by the target property

Object.defineProperty() The third parameter descriptor explain : In the form of objects {} Writing

  • value: Set the value of the property , The default is undefined
  • writable: Whether the value can be overridden .true | false The default is false
  • enumerable: Whether the target property can be enumerated .true | false The default is false
  • configurable: Whether the target attribute can be deleted or the attribute can be modified again true | false The default is false
var obj = {
   
id: 1,
pname: ' millet ',
price: 1999
}
// How previous objects add and modify properties 
obj.num = 1000
obj.pirce = 99
console.log(obj)

//Object.deefineProperty() Define new properties or modify existing properties 
Object.defineProperty(obj, 'num',{
   
	value: 1000,
})
Object.defineProperty(obj, 'pricee',{
   
	value: 9.9,
})
Object.defineProperty(obj, 'id',{
   
  // If the value is false, It is not allowed to modify 
	writable: false,
})
Object.defineProperty(obj, 'address',{
   
	value: ' Zhengzhou, China ',
  // If the value is false, Traversal is not allowed , enumeration 
  enumerable: false
})
console.log(obj)
console.log(Object.keys(obj))

summary

This article mainly shares ES5 Some new methods , There are array methods 、 String method 、 Object methods and so on , It mainly shares the usage of GE's method , Characteristics and so on .

版权声明
本文为[Tell me Zhan to hide]所创,转载请带上原文链接,感谢