字符串、数组、对象常用方法（持续更新）

1、数组常用方法：

1.1、join

join将数组转为字符串

**注释：**join() 方法不会改变原始数组。

let arr = [1,2,3,4]
let str = arr.join('、')
console.log(str)//1、2、3、4

1.2、shift

shift方法移除数组的第一项并返回删除的元素

**注释：**shift() 方法将改变原始数组。

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

1.3、unshift

unshift方法可向数组的开头添加一个或更多元素，并返回新的长度

**注释：**unshift() 方法将改变原始数组。

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

1.4、push

push向数组末尾添加新项目，并返回新长度

**注释：**push() 方法将改变原始数组。

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

1.5、pop

pop方法用于删除数组的最后一个元素并返回删除的元素

**注释：**pop() 方法将改变原始数组。

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

1.6、sort

sort方法用于对数组的元素进行排序。

**注释：**sort() 方法将改变原始数组。

let arr = [
    {id:5},
    {id:1},
    {id:4},
    {id:2},
]

//a-b为从小到大，b-a 
arr.sort((a,b)=>a.id - b.id)
console.log(arr)//[1,2,4,5]

1.7、reverse

reverse方法反转数组中元素的顺序。

**注释：**reverse() 方法将改变原始数组。

let arr = [1,2,3,4]
array.reverse()
console.log(arr)//[4,3,2,1]

1.8、slice

slice() 方法以新的数组对象，返回数组中被选中的元素。

slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。

**注释：**slice() 方法不会改变原始数组。

let arr = [1,2,3,4,5,6]
//返回从0开始到3结束的所有字符（不包括3）
console.log(arr.slice(0,3)) //123 
//返回从3开始的所有字符
console.log(arr.slice(3)) //456

1.9、splice

splice() 方法向/从数组添加/删除项目，并返回删除的项目。

**注释：**splice() 方法会改变原始数组。

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

// 在位置 2，添加 2 个元素：
arr.splice(2, 0, 2.1, 2.2);
console.log(arr)//[1,2,2.1,2.2,3,4,5,6]

//在位置 2，添加新项目，并删除 1 个项目：
arr.splice(2, 1, "three");
console.log(arr)//[1,2,three,4,5,6]

//在位置 2，删除 2 个项目:
arr.splice(2, 2);
console.log(arr)//[1,2,5,6]

1.10、indexOf

indexOf()方法返回指定元素在数组中出现的位置索引，如果没有出现则返回-1。

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

console.log(arr.indexOf(2)) // 1
console.log(arr.indexOf(7)) // -1

//indexOf方法还可以接受第二个参数，表示搜索的开始位置。
console.log(arr.indexOf(3,1)) //2
console.log(arr.indexOf(3,3)) //-1

1.11、toString

toString()方法返回数组的字符串形式。

**注释：**toString() 方法不会改变原始数组。

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

console.log(arr.toString()) // "1,2,3,4,5,6"

1.12、concat

concat()方法用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组。

**注释：**concat() 方法不会改变原始数组。

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

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

1.13、Array.from

Array.from() 方法用于将类数组对象或可迭代对象转化为数组。

**注释：**Array.from() 方法不会改变原始数组。

  1. 基本使用：

    // 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
 
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

  2. 类数组对象

    let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(arr); // ['1', '2', 3]

  3. 可迭代对象

    • 转换map

      let map = new Map();
map.set('key0', 'value0'); // Map(1) {'key0' => 'value0'}    
map.set('key1', 'value1'); // Map(2) {'key0' => 'value0', 'key1' => 'value1'}
console.log(Array.from(map)); // [['key0', 'value0'],['key1', 'value1']]

    • 转换 set

      let arr = [1, 2, 3];
let set = new Set(arr); // Set(3) {1, 2, 3}
console.log(Array.from(set)); // [1, 2, 3]

    • 转换字符串

      let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]

  4. 参数：Array.from(arrayLike[, mapFn[, thisArg]])

    • arrayLike：想要转换的类数组对象或可迭代对象

      console.log(Array.from([1, 2, 3])); // [1, 2, 3]

    • mapFn：可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素

      console.log(Array.from([1, 3, 5], (item) => item * 2)); // [2, 6, 10]

    • thisArg：可选，用于指定 map 函数执行时的 this 对象

      let map = {
    do: function(item) {
        return item * 2;
    }
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (item){
    return this.do(item);
}, map)); // [2, 4, 6]

1.14、find

查找数组中符合条件的元素，若有多个符合条件的元素，则返回第一个元素。没有则返回 undefined。

**注释：**find() 方法不会改变原始数组。

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3

let arr2 = [, 1]
// 数组空位处理为 undefined
console.log(arr2.find(item => true)); // undefined

1.15、findIndex

查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。没有则返回 -1。

**注释：**findIndex() 方法不会改变原始数组。

let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
console.log(arr.findIndex(item => item == 2)); // 1

// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
let map = {
    do: function (item){
        return item == 2
    }
}

let index = arr.findIndex(function(item){
    return this.do(item)
}, map)

console.log(index); // 1

let arr2 = [, 1]
// 数组空位处理为 undefined
console.log(arr2.findIndex(item => true)); //0

1.16、flat

flat()方法用于将嵌套数组转一维数组。

**注释：**flat() 方法不会改变原始数组。

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
 
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
 
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
 
// 自动跳过空位
console.log([1, [2, , 3]].flat()); // [1, 2, 3]

2、字符串常用方法：

2.1、slice

slice返回一个新的字符串

**注释：**slice() 方法不会改变原始字符串。

let a = '123456'
//返回从0开始到3结束的所有字符（不包括3）
console.log(a.slice(0,3)) //123 
//返回从3开始的所有字符
console.log(a.slice(3)) //456

2.2、split

split将字符串分割为数组

**注释：**split() 方法不会改变原始字符串。

let a = '1，2，3，4，5，6'
console.log(a.split('，')) //[1,2,3,4,5,6]

2.3、indexOf

indexOf返回某个指定的字符串值在字符串中首次出现的位置，如果不存在返回-1

注意：indexOf()方法对大小写敏感，如果没有找到，返回-1。第二个参数表示从哪个下标开始查找，默认从下标0开始查找。

let str = 'Hello World'
console.log(str.indexOf('o'))  //4
console.log(str.indexOf('a'))  //-1

console.log(str.indexOf('e',1))  //-1
console.log(str.indexOf('e',3))  //1

2.4、lastIndexOf

lastIndexOf返回某个指定的子字符串在字符串中最后出现的位置。

注意：lastIndexOf()方法对大小写敏感，如果没有找到，返回-1。第二个参数表示从哪个下标开始查找，默认从下标0开始查找。

let str = 'Hello World'
console.log(str.lastIndexOf("o"))  //7
console.log(str.lastIndexOf('a'))  //-1

console.log(str.lastIndexOf('e',1))  //1
console.log(str.lastIndexOf('e',3))  //1

2.5、toLowerCase

toLowerCase将字符串转为小写，返回新的字符串。

**注释：**toLowerCase() 方法不会改变原始字符串。

let a = 'Hello World'
console.log(a.toLowerCase()) //hello world

2.6、toUpperCase

toUpperCase将字符串转为大写，返回新的字符串。

**注释：**toUpperCase() 方法不会改变原始字符串。

let a = 'hello world'
console.log(a.toUpperCase()) //HELLO WORLD

2.7、charAt

charAt返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间，返回空字符串。

let a = '1，2，3，4，5，6'
console.log(a.charAt(6)) //4

2.8、substring&substr

substring和substr的区别：

  1. 相同点：如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
  2. 不同点：
    • substr（startIndex,lenth）： 第二个参数是截取字符串的长度（从startIndex开始，截取lenth个字符）；
    • substring（startIndex, endIndex）： 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾’）。

2.8.1、substring

substring截取字符串中介于两个指定下标之间的字符。

注意：substring()用法与slice()一样，但不接受负值的参数。

let str="Hello World";
//从索引为2开始截取，一直到str.length
console.log(str.substring(2)) //llo World

//从索引为2开始截取，截止到2
console.log(str.substring(2,2)) //如果两个参数相等，返回长度为0的空串

//从索引为2开始截取，截止到索引为7
console.log(str.substring(2,7)) //llo W

2.8.2、substr

substr返回从指定下标开始指定长度的的子字符串。

注意：如果没有指定length,返回从下标开始处结尾处的所有字符串。

let str="Hello World";
//从索引为2开始截取，一直到str.length
console.log(str.substring(2)) //ello World

//从索引为2开始截取，截取两个字符
console.log(str.substring(2,2)) //ll

//从索引为2开始截取，截取7个字符
console.log(str.substring(2,7)) //llo Wor

2.9、replace

replace 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

let str="Hello World";

//正则
let reg=/o/ig; //o为要替换的关键字，不能加引号，否则替换不生效，i忽略大小写，g表示全局查找。

console.log(str.replace(reg,"**"))//Hell** W**rld

2.10、match

match返回所有查找的关键字内容的数组，如果不存在返回null。

var str="To be or not to be";

//正则
var reg=/to/ig;//to为要匹配的关键字，不能加引号，否则替换不生效，i忽略大小写，g表示全局查找。

console.log(str.match(reg)); //["To", "to"]

2.11、repeat

repeat 方法返回新的字符串，表示字符串复制指定次数。

let str="Hello World";

let str2 = str.repeat(3)
console.log(str2); //Hello WorldHello WorldHello World

2.12、includes、startsWith、endsWith

  • includes：返回布尔值，判断是否找到参数字符串。
  • startsWith：返回布尔值，判断参数字符串是否在原字符串的头部。
  • endsWith：返回布尔值，判断参数字符串是否在原字符串的尾部。

以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

2.13、padStart、padEnd

  • padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
  • padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
let str = '1'
let str2 = str.padStart(3,'0')
let str3 = str.padEnd(3,'0')
console.log(str2); // 001
console.log(str3); // 100

3、对象常用方法：

3.1、Object.keys

Object.keys()返回一个给定对象的自身可枚举属性的属性名组成的数组

const obj = {
    name:'张三',
    sex:'男',
    age:18
}

console.log(Object.keys(obj)) //['name','sex','age']

3.2、Object.values

Object.values()返回一个给定对象的自身可枚举属性的属性值组成的数组

const obj = {
    name:'张三',
    sex:'男',
    age:18
}

console.log(Object.values(obj)) //['张三','男',18]

3.3、Object.entries

Object.entries()返回一个给定对象自身可枚举属性的键值对数组

const obj = {
    name:'张三',
    sex:'男',
    age:18
}

console.log(Object.entries(obj)) //[['name', '张三'],['sex', '男'],['age', 18]]

3.4、Object.fromEntries

Object.fromEntries()把键值对数组转换为一个对象，是Object.entries()的逆操作。

const arr = [['name', '张三'],['sex', '男'],['age', 18]]

console.log(Object.fromEntries(arr)) //{name: '张三', sex: '男', age: 18}

3.5、Object.assign

Object.assign用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

let target = { a: 1, b: 2 };
let source = { c: 4, d: 5 };

console.log(Object.assign(target, source))//{a: 1, b: 2, c: 4, d: 5}

console.log(target)//{a: 1, b: 2, c: 4, d: 5}

console.log(source)//{b: 4, c: 5}
#学习笔记
#JavaScript
字符串、数组、对象常用方法（持续更新）
http://localhost:8090//archives/commonmethod
作者
龟龟
发布于
2020年12月18日
更新于
2024年08月28日
许可协议