数组及字符串的常用JS方法_js 数组字符串-CSDN博客

本文链接：https://blog.csdn.net/m0_52933282/article/details/126439300

数组及字符串的常用JS方法

一、修改原数组
二、不改变原数组
转换为数组
- 1.Array.of()：将任意数组类型，转换成数组
- 2.Array.from()：将数组型对象转换成数组
类型判断
字符串的方法
其他
常用的函数处理数据方法：

一、修改原数组

1.数组的常用方法(修改原数组)：对数组的开头和结尾的增加和删除 push() pop() unshift() shift()

let arr = [“a”, “b”, “c”];

向数组末尾添加一个或多个元素，返回添加后数组的长度，修改原数组。 push()
arr.push(“d”, “e”); arr为：[“a”, “b”, “c”,“d”,“e”]; 返回值为：5;

删除数组最后一个元素，将被删除的元素作为返回值，修改原数组。 pop()
arr.pop(); arr为：[“a”, “b”]; 返回值为：“c”;

向数组开头添加一个或多个，返回添加后的数组长度，修改原数组。 unshift()
arr.unshift(“0”, “1”); arr为：[‘0’, ‘1’, ‘a’, ‘b’, ‘c’]; 返回值为：5;

删除数组第一个元素，返回删除的元素，修改原数组。 shift()
arr.shift(); arr为：[‘b’, ‘c’]; 返回值为：“a”;

2.splice()(修改原数组)：对数组的任意位置的增加和删除

let arr = [“a”, “b”, “c”];

1.删除任意位置数组，返回删除的数组，修改原数组
arr.splice(1, 1);
第一个参数是删除的开始索引位置(包括自己)，第二个参数是要删除的个数
arr为：[“a”, “c”]; 返回值为：“b”;

2.插入任意位置，返回空数组，修改原数组
arr.splice(1, 0, 4, 6);
第一个参数为:插入开始索引位置(包括自己)，第二个参数固定值为0:表示仅插入，第三个参数以及后面的参数为:需要插入的元素
arr为：[“a”, 4, 6, “b”, “c”]; 返回值为：[];

3.替换任意位置数组，返回被替换的数组，修改原数组
arr.splice(1, 1, "haha", 666);
第一个参数为:开始替换的索引位置(包括自己)，第二个参数为:要替换的元素个数，第三个参数以及后面的参数为:需要替换的元素
arr为：[“a”, “haha”, 666, “c”]; 返回值为：“b”;

3.sort()(会修改原数组)：数组排序，返回排序后的当前数组

let arr = [3, 4, 2, 10];

从小到大排序
arr.sort((a, b) => a - b); myList.sort((a, b) => a.age - b.age)
arr为：[2, 3, 4, 10]; 返回值为：[2, 3, 4, 10];

从大到小排序
arr.sort((a, b) => b - a); myList.sort((a, b) => b.age - a.age)
arr为：[10, 4, 3, 2]; 返回值为：[10, 4, 3, 2];

4.reverse()(会修改原数组)：颠倒数组，返回替换后的数组

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.reverse();
fruits输出为：
Mango,Apple,Orange,Banana

5.fill()(会修改原数组)：填充或替换，返回替换后的数组，会改变原数组

let arr = [“一”, “二”, “三”, “四”, “五”];

填充所有：
arr.fill(“A”);
arr为：[‘A’, ‘A’, ‘A’, ‘A’, ‘A’] 返回值为：[‘A’, ‘A’, ‘A’, ‘A’, ‘A’]

替换索引 1(包括1) 到索引4(不包括4) 之间的数
arr.fill(“A”, 1, 4);
arr为：[‘一’, ‘A’, ‘A’, ‘A’, ‘五’] 返回值为：[‘一’, ‘A’, ‘A’, ‘A’, ‘五’]

6.copyWithin()(会修改原数组)：数组内部将指定位置的元素复制到其他位置，返回当前数组

let num = [1, 2, 3, 4, 8, 9, 10];

从索引3位置(包括3)往后的所有数值，替换从索引0(包括0)位置往后的对应数值
num.copyWithin(0, 3);
num为：[4, 8, 9, 10, 8, 9, 10]; 返回值为：[4, 8, 9, 10, 8, 9, 10];

二、不改变原数组

1.indexOf()、lastIndexOf()、includes()(不会修改原数组)：检查数组是否包某个值

let arr = [“a”, “b”, “c”];

从前往后检测arr数组是否含有'd'，若有则返回其索引，若无则返回 -1
let ishas = arr.indexOf(“b”);
ishas为：1 ;

从后往前检测，从数组的索引为 1 的位置开始往后检测
let ishas = arr.lastIndexOf(“c”, 1);
ishas为：-1 ;

从前往后检测arr数组是否含有'd'，若有则返回true，若无则返回 false
let ishas = arr.includes(“b”);
ishas为 true ;

2.toString()、toLocaleString()、join()将数组转换成字符串，不改变原数组

let a = [1, 2, 3, null, , “菜鸟”];

1.返回以逗号隔开的字符串 toString()：一个一个转换或 toLocaleString()：整体转换
let b = a.toString(); 或 let b = a.toLocaleString();
b为：‘1,2,3,菜鸟’ , a不变
注意：
当数字是四位数及以上时，有区别
当目标是标准时间格式时，有区别

2.参数作为数组值之间的分隔符 join()
let b = a.join(“@”);
b为：“1@2@3@@@菜鸟” , a不变
注意：
如果参数为undefined或者不传参，则默认以逗号分隔开。
共同点：当数组中某一项为null或者undefined时，则这一项都以空字符串的方式被转出

3.slice()(不改变原数组)：数组截取，提取数组中的指定位置的一个或多个元素，返回一个新数组，不改变原数组

let a = [1, 2, 3, , “菜鸟”, “大佬”];

选取索引为 1(包括1) 及之后的所有元素，返回选取后的数组
let b = a.slice(1);
b为：[2, 3, empty, ‘菜鸟’, ‘大佬’]

选取索引为 1(包括1) 及索引为 4(包括4) 之间的元素，返回选取后的数组
let b = a.splice(1, 4);
b为：[2, 3, empty, ‘菜鸟’]

4.concat()(不改变原数组)：数组的合并

let a = [1, 2, 3, “小白”];
let b = [“js”, “vue”];

1.把 a 数组和 b 数组合并
let hebin = a.concat(b);
hebin为：[1, 2, 3, ‘小白’, ‘js’, ‘vue’]

2.把 b 数组和 a 数组合并
let hebin = b.concat(a);
hebin为：[‘js’, ‘vue’, 1, 2, 3, ‘小白’]

5.技巧：将数组转换成对象

  let arr = ["username=bobi", "password=123"];

  let obj = {};
  for (let i = 0; i < arr.length; i++) {
    var arg = arr[i].split("=");
    obj[arg[0]] = arg[1];
  }
obj为：{username: 'bobi', password: '123'}

6.技巧：将对象转换成数组

  let obj = { name:'张三' , age:'18' };

  let arr = [];
  for( let key in obj ) {
     arr.push( {
           name: key,
           age: obj[ key ]
     })
  }
arr为：[{ name:'张三' , age:'18' }]

转换为数组

1.Array.of()：将任意数组类型，转换成数组

console.log(Array.of(3, 11, 20, [1, 2, 3], { id: 1 }));
输出：[3, 11, 20, Array(3), {…}]

2.Array.from()：将数组型对象转换成数组

let obj = { 0: “菜鸟”, 1: “18”, length: 2 };

let objArr = Array.from(obj);
objArr为：[‘菜鸟’, ‘18’]

使用：
let objArr =Array.from(obj, (item) => {
return item + “@”;
});
objArr为：[‘菜鸟@’, ‘18@’]

类型判断

1.typeof 变量 (如果判断 null、Object、Array 则输出： object)

2.object.prototype.toString.call() (全部类型都能区分) 返回string类型：“[object Array]”

3.a instanceof Array （只能判断某对象是否存在于目标对象的原型链上）

4.instanceof、isArray检查一个元素是否为数组

let a = new Array();

console.log(a instanceof Array); 输出：true
console.log(Array.isArray(a)); 输出：true

字符串的方法

1.split()(不会修改原字符串)：字符串截断为数组，返回一个处理后的数组

let url = “username=zhanshan”;

传入截断的依据
let arrs = url.split(“=”);
arrs为：[‘username’, ‘zhanshan’] ;

扩展：字符串转换成数组

let arrs = […url]
let arrs = url.split(“”);

2.search() (不会修改原字符串)：检查字符串是否包含某个值，若有则返回索引,若无则返回-1

let str = “abc1def”;

一般检索：
str.search(“1”)
返回值为number类型：3

忽略大小写检索：
str.search(/abc/i)
返回值为number类型：0

正则检索(从一段字符串中收集特定规则的字符和字符串)：
let reg = new RegExp(this.keyWord, “i”);
return q.name.match(reg);

3.substring()(不改变原字符串)：字符串截取，返回修改后字符串，不改变原字符串

let str = “?abcdef”;

获取字符串索引为 1 (包括1) 及之后的所有的字符串
let new_str = str.substring(1);
new_str为：“abcdef”;

获取字符串索引为 1 (包括1) 及索引为 3 (不包括3) 之间的字符串
let new_str = str.substring(1, 3);
new_str为：“ab”;

4.padStart(),padEnd() (不改变原字符串)：字符串补全(时间)，返回补充后的字符串

‘x’.padStart(5, 'ab') // ‘ababx’
‘x’.padStart(4, 'ab') // ‘abax’
‘x’.padEnd(5, 'ab') // ‘xabab’
x’.padEnd(4, 'ab') // ‘xaba’

注意：
1.如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。
2.如果省略第二个参数，默认使用空格补全长度。

5.replace()(不会修改原字符串)：字符串替换，返回修改后的字符串

let str = ‘我是中古人’;
let xgstr = str.replace(‘中古’,‘中国’); 注：找到第一个就只替换第一个
xgstr为：我是中国人

全局替换：忽略大小写
let str = “Mr Blue has a blue house and a blue car”;
let result = str.replace(/blue/gi, “red”);
输出结果：Mr red has a red house and a red car