数组和字符串方法

最新推荐文章于 2025-03-23 21:07:43 发布

小赵先生呀

最新推荐文章于 2025-03-23 21:07:43 发布

阅读量127

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52398973/article/details/129459066

版权

在JS中内置了很多的方法，不同的对象有不同的方法（方法其实就是对象中的函数）

let obj = {
  方法名: function () {}
}

obj.方法名()

数组方法

数组方法是属于数组中的一些函数，可以对数组进行操作。使用的方式是：数组.方法名(参数)

数组方法只能被数组调用

push

向数据的末尾插入新的值

let arr = []
arr.push(值) 
// 数组就会变成 [值]

// 也可以同时插入多个值
arr.push(值1, 值2, 值3, 值n)

以后记住，VSCode提示这种写法，表示可以写很多个参数。

push方法有返回值，一般不用，返回值是插入新元素之后的长度。

let arr = [8， 9， 7]
let length = arr.push(5) // 一般不会没事获取到它的返回值
console.log(length) // 4

pop

删除数组的末尾最后一个值

let arr = [1, 2, 3]
arr.pop()
console.log(arr) // [1, 2]

pop有返回值，是被删除的那个值

let arr = [1, 2, 3]
let item = arr.pop() // 3

unshift

在数组的首位添加一个值

let arr = []
arr.unshift(值)
arr.unshift(值1, 值2, 值3, 值n)

他的返回值和push一致，是插入后的数组长度

shift

删除数组首位的值

let arr = [1, 2, 3]
arr.shift() // 1
console.log(arr) // [2, 3]

他的返回值是被删除的值。

indexOf

根据目标值查找数组中对应的值的下标。如果有返回下标，如果没有返回-1

fromIndex ?: number 表示第二个参数是数字，？表示可选（可写可不写）

let arr = [1, 2, 3, 4, 5, 3, 3]

console.log(arr.indexOf(3)) // 2 找到第一个出现的3 就结束
console.log(arr.indexOf(3, 4) // 5 跳1 2 3 4 的遍历直接从下标为4的元素开始

lastIndexOf

和indexOf功能相同，找到最后一个出现的目标值的下标

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

和indexOf的方向刚好相反，所以第二个参数写好之后，表示向前查找。

includes

ES6中新增的方法，兼容性差，IE浏览器不支持，用来判断数组中是否存在某个值，返回结果为布尔值

let arr = [1,2,3,4,5]

console.log(arr.includes(3)) // true
console.log(arr.includes(6)) // false

该属性也支持第二个参数，和indexOf的第二个参数一样

let arr = [1,2,3,4,5]
console.log(arr.includs(2, 3)) // false 从下标为3的元素开始往后找。没有2，所以为false

concat

想要把两个数组拼接成一个数组时，可以使用concat。concat的返回值是拼接后的数组，原数组不变。

let arr = [1,2,3]
arr.concat([4,5,6]) // 这个操作的返回值就是拼接后的数组 [1,2,3,4,5,6]
console.log(arr) // [1,2,3] 不变

arr.concat([4,5,6], [7, 8, 9], 10) // 这个操作的返回值就是拼接后的数组 [1,2,3,4,5,6,7,8,9,10] 里边的值可以直接是数字

forEach

forEach可以替代for循环进行数组的遍历。个人建议使用forEach替代for循环进行正序的数组遍历

let arr = [1,2,3,4,5]
for (let i = 0; i < arr.length; i++) {
  // arr[i] 是数组中的每一个值 i是下标
}

arr.forEach(function (item, index, arr) {
  // 这里的item index arr三个参数的名字可以随便改
  // item表示对应的值 index表示下标 arr表示遍历的数组本身
  // 一般这里的参数只需要写 item 最多再写index arr基本不用
})

疑问？为什么我们声明的函数function (item, index, arr) {}我们没有调用也执行了？

因为js的内部帮我们进行了调用了。不需要我们自己调用。

下面是forEach的原理，因为涉及到了一些高级的用法，所以看看就行。

function forEach(arr, callbackfn) {
  for (let i = 0; i < arr.length; i++) {
    callbackfn(arr[i], i, arr)
  }
}

forEach([1,2,3,4,5], function (item, index, arr) {
  
})

map

他和forEach类似，也会产生一个遍历，但是，他有自己固定的功能，在我们想要从一个数组中遍历出某些数据时使用

let arr = [
  {name: "张三", age: 18},
  {name: "李四", age: 20}
]

// 获取到对应的一个新的数组 ["张三", "李四"]
let names = arr.map(function (item) {
  return item.name
})

console.log(names) // ['张三', '李四']

map的语法和forEach一致。不一样的在于return，map在对应的函数中return会作为新数组中的值。

map的返回值是一个和原数组长度一致的数组，通过改变map内部的函数的返回值，可以得到不同的数组。

应用场景：在一个数组中，获取到我们想要的数据信息。

const potatoes = [{weight: 400}, {weight: 300}, {weight: 599}]

// [400, 300, 599]
let weights = potatoes.map(function (potato) {
  return potato.weight
})


let arr = [{a: 1, b: 2, c: 3}, {a: 1, b: 2, c: 3}, {a: 1, b: 2, c: 3}, {a: 1, b: 2, c: 3}]

// 只要数组中的a和c属性 [{a: 1, c: 3}, {a: 1, c: 3}, {a: 1, c: 3}, {a: 1, c: 3}]
arr.map(function (item) {
  return {a: item.a, c: item.c}
})

join

把数组按照规则转换为字符串，不会改变原数组，返回值是一个字符串

let arr = [1,2,3,4,5,6]
arr.join("字符串") // 1字符串2字符串3字符串4字符串5字符串6

arr.join("")表示直接讲数组中的值连接在一起变成字符串

arr.join()表示用,连接，和toString效果一致。

reverse

反向，将数组直接变成一个倒序排列的数组

let arr = [1,2,3]

arr.reverse() // 返回值为倒序的数组 

console.log(arr) // 原数组也会变成倒序的数组

sort

用于数组中的值的排序，升序或者降序。返回值是排序后的数组，原数组也会改变。

默认的排序规则按照对应的查词典的方式，首位先比较大小（按ASCII码进行比较）小的在前，大的在后，相同则比较下一位。依次类推。

// 对数字进行排序
let arr = [24235,5,264,3,532,56,4367,34,65324]

arr.sort(function (a, b) {
  return a - b // 升序排列
})

arr.sort(function (a, b) {
  return b - a // 降序排列
})

函数中，我们的核心代码，就是在判断a和b中的值谁大谁小的问题。

我们要判断谁大的问题

arr.sort(function (a, b) {
  if (a > b) {
    return 负数 // 如果是负数 b放前面 a放后面  如果是正数相反
  }

  if (a < b) {
    return 正数 // b放在前面 a在后面
  }
  
  if (a === b) {
    return 0 // 位置不动
  }
})

let stus = [
  {
    name: "张三",
    age: 18,
    sex: "男"
  }, {
    name: "李四",
    age: 20,
    sex: "男"
  }, {
    name: "王五",
    age: 18,
    sex: "女"
  }, {
    name: "小花",
    age: 19,
    sex: "女"
  }
]

// 请对学生进行排序，按照年龄从小到大进行排列
stus.sort(function (a, b) {
  return a.age - b.age
})

冒泡排序

// 编写方法，实现冒泡
var arr = [29,45,51,68,72,97];
//外层循环，控制趟数，每一次找到一个最大值
for (var i = 0; i < arr.length - 1; i++) {
  // 内层循环,控制比较的次数，并且判断两个数的大小
  for (var j = 0; j < arr.length - 1 - i; j++) {
    // 白话解释：如果前面的数大，放到后面(当然是从小到大的冒泡排序)
    if (arr[j] > arr[j + 1]) {
      var temp = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;
    }
  }
}
console.log(arr);//[2, 4, 5, 12, 31, 32, 45, 52, 78, 89]

slice

用来裁切数组，我们如果想要获取到数组中某一部分的数组片段，可以使用slice方法

[1,2,3,4,5,6,7,8]想要得到[4,5,6]

slice不会改变原数组，slice返回值为裁切下来的数组片段

let arr = [1,2,3,4,5,6,7]
arr.slice(2, 3) // [3]
arr.slice(2) // [3, 4, 5, 6, 7]
arr.slice(-3) // -1指最后一位，-3指倒数第三位 [5, 6, 7]

splice

会改变原数组，将原数组中的值进行修改，有三个功能：插入，删除，修改

删除

使用两个参数即可，得到的返回值，是删除的值组成的数组。

let arr = [1,2,3,4]
arr.splice(下标, 数量)

插入

需要使用三个参数，第一个参数为下标，表示插入到这个下标的前面，第二个参数为固定的0，后面的参数为要插入的值。

let arr = [1,2,3,4]

arr.splice(下标, 0, 插入的值1, 插入的值2, 插入的值n) // [] 返回值为空，因为没有删除
console.log(arr) // arr改变了

修改

所谓修改就是删除原本的值，然后再添加的新的值

let arr = [1,2,3,4]
// arr.splice(1, 1, 5)
arr.splice(1, 2, 5)

字符串方法

可以通过打印new String()查看所有的字符串方法

split *

把字符串按照规则转成数组。和数组方法join刚好相反

let str = "字符串"
str.split("") // ["字", "符", "串"]

let str = "1&2&3"
str.split("&") // [1, 2, 3]

slice substr substring *

裁切字符串

let str = "字符串"
str.slice(0, 2) // 字符
str.slice(-2) // 符串
str.substr(1, 2) // 符串
str.substring(0, 2) // 字符

slice 既支持正数，右支持负数下标

substring 正数和slice效果相同，负数不支持

substr 第一个参数开始裁切的下标第二个参数表示要裁切的长度

replace *

将一个字符串中指定的字符进行替换，替换成新的字符。没有正则表达式支持的情况下，只能替换第一个。

let str = "123"
str.replace('1', '2') // 223
str.replace(/值/g, "替换后的值")

let str = "aaaaab"
str.replace('a', 'b') // baaaab
str.replace(/a/g, 'b') // bbbbbb

search

用于查询某个字符串对应的下标，没有则返回-1。支持正则表达式

let str = "123456"
console.log(str.search('3')) // 2

indexOf lastIndexOf

可以获取到对应的值在字符串中的下标，不支持正则表达式，和数组类似

前者正序查找，后者倒序查找。只会找到第一个

toLowerCase toUpperCase

把英文变成纯小写或者纯大写

let str = "AaBb"
str.toLowerCase() // aabb
str.toUpperCase() // AABB

trim

去除字符串左右两侧的空格

let str = "   jfdis  fdkasgjd   "
str.trim() // "jfdis  fdkasgjd"

我们也可以单独清楚前和后的空格，可以利用下面的方法。兼容性很差

trimStart trimLeft 清除左侧（前面）的空格
trimEnd trimRight 清除右侧（后面）的空格

之前我们如果想清除空格，可以使用这样一个操作，前期了解即可

function trim (str) {
  return str.replace(/^\s*|\s*$/g, '')
}

includes

和数组的includes方法类似，用来判断字符串中是否有指定的字符串，有则返回true，无返回false

let str = "123456"

console.log(str.includes('2')) // true

charCodeAt()

没有参数str.charCodeAt()会得到对应的字符的ASCII码，如果有多个值，则得到字符串中第一个值的ascii码

let str = "A"
str.charCodeAt() // 65

String.fromCharCode(ASCII码)

我们填入对应的ascii，就会得到对应的字符

String.fromCharCode(65) // A

for (let i = 65; i <= 91; i++) {
  console.log(String.fromCharCode(i))
}

数值方法

toFixed

保留小数位，四舍五入，返回的字符串，精确数字不要用

let num = 1.2345
console.log(num.toFixed(2)) // 1.23
console.log(num.toFixed(3)) // 1.235

toPrecision

返回科学计数法的字符串，参数为科学计数法前面的总位数。

let num = "123432654251"
num.toPrecision(3) // 1.23e+11

toExponential

同上，参数指的是小数位

在Number中提供了很多的常量

Number.xxx
Number.EPSILON
Number.MAX_SAFE_INTEGER
Number.MAX_VALUE
Number.MIN_SAFE_INTEGER
Number.MIN_VALUE
Number.Number.NEGATIVE_INFINITY
Number.NaN
Number.POSITIVE_INFINITY

EPSILON: 2.220446049250313e-16
MAX_SAFE_INTEGER: 9007199254740991
MAX_VALUE: 1.7976931348623157e+308
MIN_SAFE_INTEGER: -9007199254740991
MIN_VALUE: 5e-324
NEGATIVE_INFINITY: -Infinity
NaN: NaN
POSITIVE_INFINITY: Infinity

一些全局方法

isNaN(值)

判断对应的值是否是NaN

Array.isArray(值)

用来判断某个值是否是数组

Array.isArray([]) // true
Array.isArray({}) // false

获取到精确的数据类型

Object.prototype.toString.call(值) // [object 值类型]