The most commonly used collection of Javascript methods (updated in real time)

concat() concatenates arrays

This method is used to concatenate two or more arrays. This method does not change the existing array

const arr = [1,2,3]

const arr1 = [4,5,6]

const newArr = arr.concat(arr1)

console.log(newArr) // [1,2,3,4,5,6]

(ES6) The spread operator concatenates arrays

Merge multiple arrays
 

const arr = [1,2,3]

const arr1 = [4,5,6]

console.log(...arr, ...arr1) // [1,2,3,4,5,6]

join() simply means that an array can be converted to a string

const arr = [1, 2, 3]

const newArr = arr.join('')

console.log(newArr); // 123

Add at the end of push()

Adds one or more elements to the end of the array and returns the new length

Add at the end, return the length, will change the original array

const arr = [1,2,3]

const newArr = arr.push(4,5)

console.log(arr); // [1, 2, 3, 4, 5] 改变原数组

console.log(newArr); // 5 长度

 substr() intercepts a string

 All are to intercept the string fragment from the current subscript to the end of the string

 const obj = '410928199909081258'

 console.log(obj.substr(6, 6)); // 199909 从第六个开始截取 截取6位

(ES6) map() mapping

• Run the given function on each item in the array, returning the result of each function call to form a new array
• Changes to the array will not affect the original array

  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  const newArr = arr.map(item => item + '★')

  console.log(newArr)
// ['1★', '2★', '3★', '4★', '5★', '6★', '7★', '8★', '9★', '10★']
  console.log(arr)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

map + replace (replacement)

 let obj = [
      { id: 1, name: "小米", imgUrl: "http://www.xiaoji.jpg" },
      { id: 2, name: "苹果", imgUrl: "http://www.xiaoji.jpg" },
      { id: 3, name: "华为", imgUrl: "http://www.xiaoji.jpg" }
    ]
    obj = obj.map(item => {

      item.imgUrl = item.imgUrl.replace("http", "https"); // 使用replace方法替换
      return item;
    })
    console.log(obj);
    /*
      {id: 1, name: '小米', imgUrl: 'https://www.xiaoji.jpg'}

      {id: 2, name: '苹果', imgUrl: 'https://www.xiaoji.jpg'}

      {id: 3, name: '华为', imgUrl: 'https://www.xiaoji.jpg'}

    */

(ES6) forEach() traverses an array

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const newArr = []

arr.forEach(item => newArr.push(item*10))

console.log(newArr); //  [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

 (ES6) includes() Determines whether the specified value is included

Used to determine whether an array contains a specified value, if it returns true, otherwise false

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(arr.includes(8)); // true

console.log(arr.includes(18)); // false

 (ES6)every() judges whether the condition is met

• It can be used to check whether each element in the current array meets a certain condition.
• The return value is a boolean value. Returns true if all elements meet the condition; returns false if one element does not meet the condition.
• do not modify the original array
• Iterates through the array and returns true if each element satisfies the condition, otherwise returns false.

const arr = [5,6,1,183,8]

const arrs = [2,6,7,9,56]

// 查找是否有大于等于100的值 有的话是false 没有是true

const newArr = arr.every(item => item <= 100)

const newArrs = arrs.every(item => item <= 100) // 没有大于等于100

console.log(newArr); // false
console.log(newArrs); // true

reverse() flips the array

 const arr = [1,2,3,4,5,6,7,8,9]

 console.log(arr.reverse()) // [9, 8, 7, 6, 5, 4, 3, 2, 1]

indexOf() traversal search

•  Find whether there is such an element, if found, return the position (subscript) of the item to be found in the array, if not found, return -1

const arr = [1,2,3,4,5,6,7,8,9]

console.log(arr.indexOf(5)); // 4

console.log(arr.indexOf('5')); // -1

*Array traversal

 // for 循环
 const arr = ['a', 'b', 'c', 'd', 'e']
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]) // a,b,c,d
    }

 // 主要用于遍历对象，for()中的格式：for(key in obj) {} key表示obj对象的每一个键值对的键
    for (let j in arr) {
      console.log(arr[j]) // a,b,c,d
    }

(ES6) filter() is used to filter an array

• When we request the data list from the backend, we need to filter the qualified data . When we get the data, we want to capitalize the first letter of the English language,  deduplicate the array , etc.
• (note) empty arrays are not checked; original arrays are not altered

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let obj = arr.filter((item) => {
// 遍历数组 查找小于5的元素
   return item < 5
})
console.log(obj) //  [1, 2, 3, 4]
// 对原数组不会发生改变
console.log(arr) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

obj[0] = 999
console.log(obj); //  [999, 2, 3, 4]
console.log(arr) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

(ES6) repeat() User repeats string

• The syntax format is str.repeat(n) ;
• repeat() does not change the original string, so a variable is needed to receive the repeated result

  const res = 'xiaomi'

  const newRes = res.repeat(3)

  console.log(newRes); // xiaomixiaomixiaomi

  console.log(res); // xiaomi

(ES6) template strings

• Template strings are represented by backticks , for example: `res`, which is essentially a string, but more powerful than ordinary strings
• It can also be displayed in a new line, and the new line format will be retained
• It can also be concatenated using ${}

 const name = '小明'

 const sex = '男'

 const res = `我叫${name}, 

 性别${sex}   `

 console.log(res);/*我叫小明, 

性别男   */  

(ES6)some() 

• It is used to judge whether there is an element in the array that satisfies a certain condition, as long as one element is satisfied, it returns true, and only when all elements are not satisfied, it returns false. Similar to the OR || relationship in logical judgment

 const arr = [2, 6, 100, 8, 99, 4]
    
 const newArr = arr.some((item) => {
    return item < 10
 })

 console.log(newArr) // true