Javascript 方法最常用合集(实时更新)

concat() 拼接数组

该方法用于连接两个或多个数组。该方法不会改变现有的数组

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)扩展运算符拼接数组

合并多个数组
 

const arr = [1,2,3]

const arr1 = [4,5,6]

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

join() 简单来说就是可以数组转字符串

const arr = [1, 2, 3]

const newArr = arr.join('')

console.log(newArr); // 123

push()  末尾添加

可向数组的末尾添加一个或多个元素，并返回新的长度

末尾添加，返回的是长度，会改变原数组

const arr = [1,2,3]

const newArr = arr.push(4,5)

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

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

 substr() 截取字符串

 都是是截取字符串从当前下标以后直到字符串最后的字符串片段

 const obj = '410928199909081258'

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

(ES6)map()  映射

• 对数组的每一项都运行给定的函数，返回每次函数调用的结果组成一个新数组
• 对数组的变化不会影响到原数组

  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 (替换)

 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() 遍历数组

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()  判断是否有包含指定的值

用来判断一个数组是否包含一个指定的值，如果是返回 true，否则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()  判断是否满足条件

• 可用于检测当前数组中的每一个元素是否都符合某一条件。
• 返回值为布尔值。若全部符合条件，则返回真；若有一个元素不符合条件，则返回假。
• 不修改原数组
• 遍历数组，每一个元素都满足条件 则返回 true，否则返回 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() 翻转数组

 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() 遍历查找

•  查找是否有该元素, 如找到, 返回的是要查找的项在数组中的位置(下标), 如没找到返回-1

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

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

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

*数组遍历

 // 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()  用于对数组进行过滤

• 当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写, 数组去重等等
• (注意)不会对空数组进行检测；不会改变原始数组

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() 用户重复字符串

• 语法格式为str.repeat(n);
• repeat()并不会改变原来的字符串，因此需要一个变量用来接收重复后的结果

  const res = 'xiaomi'

  const newRes = res.repeat(3)

  console.log(newRes); // xiaomixiaomixiaomi

  console.log(res); // xiaomi

(ES6) 模板字符串

• 模板字符串使用反引号来表示，例如：`res`，它的本质上是字符串，只不过比普通字符串的功能更加强大
• 也可以换行展示, 会保留换行格式
• 也可拼接 使用 ${}

 const name = '小明'

 const sex = '男'

 const res = `我叫${name}, 

 性别${sex}   `

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

性别男   */  

(ES6)some() 

• 用于判断数组中是否存在一个元素满足某个条件，只要有一个元素满足就返回true，只有当所有元素都不满足时，才返回false。类似与逻辑判断中的或||关系

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

 console.log(newArr) // true