Javascript中必须熟记的常用数组和字符串方法

_Plain
525 阅读3分钟

本文未经允许，禁止转载

数组

能改变原数组

  • Array.push(),向数组末尾添加一个或者多个元素，并返回新的数组长度。原数组改变。

        // 原理
Array.prototype.push = function () {
    for (let i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i];
    }
    return this.length
}
// 例如
let arr = [1, 2, 3, 4]
arr.push(5, 6, 7)
arr = [1, 2, 3, 4, 5, 6, 7]

  • Array.pop()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。

    //例如
arr = [1, 2, 3, 4, 5, 6, 7]
arr.pop()   // del = 7
// arr = [1, 2, 3, 4, 5, 6]

  • Array.unshift()，向数组的开头添加一个或者多个元素，并返回新的数组长度。原数组改变。

    let arr = [1, 2, 3, 4, 5, 6, 7]
let res = arr.unshift(0)   // res = 8  返回数组长度
// arr = [0, 1, 2, 3, 4, 5, 6, 7]

  • Array.shift()，删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。

    let arr = [1, 2, 3, 4, 5, 6, 7]
let res = arr.shift()   // res = 1  返回第一个元素的值
//arr = [2, 3, 4, 5, 6, 7]

  • Array.reverse()，将数组倒序，原数组改变。

    let arr = [1, 2, 3, 4, 5, 6, 7]
	arr.reverse()   // arr = [7, 6, 5, 4, 3, 2, 1]

  • Array.splice（从第几位开始，截取多少的长度，在切口处添加新的数据），当截取长度为0的时候，则不删除元素。原数组改变。

    let arr = [1, 2, 3, 4, 5, 6, 7]
	arr.splice(2,1)    //从第二位开始删除一个长度
	arr.splice(2, 1, 4)    //从第二位开始截取一个长度
	//arr = [1, 2, 4, 4, 5, 6, 7]
	arr.splice(2, 0, 4)  //当截取长度为0时
	// arr = [1, 2, 4, 3, 4, 5, 6, 7]

  • Array.sort()，对数组元素排序。按照字符串Unicode码排序。原数组改变。arr.sort(1.必须写两个形参 2.看返回值 当返回值为负数时，那么前面的数在前面；当返回值 为正数时，那么后面的数在前；当返回值为0 不动)

    //例如：
let arr = [1, 3, 5, 4, 10]
	arr.sort(function (a, b) {
             if(a > b) {       //换成a < b 的时候  为降序
        return 1
    }else {
        return -1
    }
             }
    )
 //简化写法
arr.sort(function (a, b)) {
         return a - b;     // 换成 b - a 的时候为降序
         }
//给一个有序的数组乱序
let arr = [1, 2, 3, 4, 5, 6]
	arr.sort(function() {
        return Math.random() - 0.5
    })
不能改变原数组

  • Array.concat()，合并两个或者多个数组，生成一个新的数组。原数组不变。

    let arr = ["x","y","z"]  //不变
let arr1 = [1, 2, 3]   //不变
let arr2 = [4, 5, 6]  //不变
let rel = arr.concat(arr1,arr2)
//rel = ["x","y","z", 1, 2, 3, 4, 5, 6]

// 6. (可选)
// 自定义concat方法
function concat (arr1, arr2) {
  for (i = 0; i < arr2.length; i++) {
      arr1.push(arr2[i])
  }
  return arr1
}
concat([1,2,3],[4,5,6])

  • Array.join()，将数组的每一项用指定字符链接形成一个字符串。默认链接字符串为“ ， ”，逗号。

    let arr = [1, 2, 3, 4, 5]
      arr.join()  //"1, 2, 3, 4, 5"
      arr.join("-")  //"1-2-3-4-5"

  • Array.slice(start,end)，从start（第几位）开始，到end位之前结束，不包括end。如果不给end值，从start开始到数组结束。Start可以给负值，-1表示数据最后一位，以此类推。空值不写代表整个截取。

    let arr = [1, 2, 3, 4, 5]
let arr1 = arr.slice(2,4)  // arr1 = [3,4]  slice返回值
let arr2 = arr.slice(1)    // arr2 = [2, 3, 4, 5]
let arr3 = arr.slice(-2)   // arr3 = [4, 5]

  • Array.indexOf( ) 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

    ['a', 'b', 'c', 'a', 'b'].indexOf('b');   // 1
['a', 'b', 'c', 'a'].indexOf('d');   // -1

  • Array.lastIndexOf( ) 返回在数组中最后一个的索引 如果不存在则返回 -1

    ['a', 'b', 'c', 'a'].lastIndexOf('a');   // 3
['a', 'b', 'c', 'a'].lastIndexOf('d');   // -1

  • Array.includes() 检测数组是否包含某个元素 返回布尔值

    let site = ['runoob', 'google', 'taobao'];
site.include('runoob')   //返回true

ES5/ES6 新增的数组方法

  • isArray() 用来判断是否是数组，返回一个布尔值, 弥补typeof检测的不足

    let arr = [1,2,3]
console.log(typeof arr) // "Object"
Array.isArray(arr) // true

  • forEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环. 应用场景：为一些相同的元素，绑定事件处理器！

    var arr = ["张飞","关羽","赵云","马超"];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
arr.forEach(function(element, index, array){
  console.log(element, index, array);
});

  • map() 方法遍历数组，返回一个新数组。新数组是原数组的映射，此方法不会改变原数组的值，新数组的每一项元素值是每次遍历return返回的值

    let arr = [1,2,3,4,5]
let newArr = arr.map(item => return item * 2)
console.log(newArr)  // [2,4,6,8,10]

  • filter() 过滤数组，返回一个新数组。如果返回值为true，那么就留下来；返回值为false，就过滤掉

    let arr = [1000, 5000, 20000, 3000, 10000, 800, 1500];
var newArray = arr.filter(function(element, index, array){
  if(element > 5000) {
    return false;
  }else {
    return true;
  }
});
console.log(newArray);//[1000, 5000, 3000, 800, 1500]

  • some() 遍历数组，只要有一项满足条件就返回true 否则返回false

    let arr = [2,4,6,8,10,21];
let result = arr.some(item => {
  if(element %2 == 1){
    return true;
  }else {
    return false;
  }
})
console.log(result)   // true

  • every() 遍历整个数组，只有数组每一个元素返回true 才为true 有一个false就为false

    let arr = [1,2,3,4,6,8,4]
const result = arr.every(item => item % 2 === 0)
console.log(result)  // false

  • reduce() 遍历数组 接收两个参数 第一个参数为一个函数，第二个参数为函数迭代的初始值。此方法常用来数组求和/乘积、计算元素出现的次数、去重

    let arr = [1,2,3,4]
let result = arr.reduce((prev,el,index,arr) => {
    // prev 上次函数调用返回的值
    // el 当前元素
    // index  当前元素的索引
    // arr 被遍历的数组 
    return prev + el
},5)
console.log(result) //  15

  • find() 此方法接收一个回调函数,返回满足函数执行的第一个元素的值

    let arr = [2,3,4,6,7,8]
let result = arr.find(item => item > 4)
console.log(result) // 6

  • findIndex() 此方法接收一个回调函数，返回满足函数执行的第一个元素的下标，没有则返回-1

    let arr = [2,3,4,6,7,8]
let result = arr.findIndex(item => item > 4)
console.log(result) // 3

字符串

  • slice(start,end) 从start开始到end结束，且取不到end

    let str = 'string'
console.log(str.slice(2,4))  // ri

  • split() 将字符串转为数组

      //split:将字符串分割成数组（很常用）
  //功能和数组的join正好相反。

  // var str = '赵云|马超|关羽';

  // 第一种情况  不传递参数  使用的很少
  // var arr = str.split();
  // console.log(arr); // ["赵云|马超|关羽"]

  // 第二种情况 传递一个分隔符
  // var arr = str.split('|');
  // console.log(arr); //  ["赵云", "马超", "关羽"]

  // 第三种情况 传递一个空值
  // var arr = str.split('');
  // console.log(arr); //  ["赵", "云", "|", "马", "超", "|", "关", "羽"]
  ```

  • substring(start，end) 字符串截取 从start开始到end结束，且取不到end

  • substr(start，end) 字符串截取 从start开始往后截取end位

    let str = 'string'
console.log(str.substr(2,4))  // ring

  • indexOf() 遍历字符串 接收一个参数 判断是否包含 如包含则返回对应索引，不包含返回-1

    let str = 'string'
str.indexOf('t') // 1

  • toUpperCase()：全部转换成大写字母 ；toLowerCase()：全部转换成小写字母

  • replace(searchValue, replaceValue) 字符串替换,如有重复字符则只会替换第一个

    // 参数：searchValue:需要替换的值    replaceValue:用来替换的值
let str = 'sttring'
str.replace('t','z') // szring
avatar
文章
阅读
粉丝