JavaScript数组和字符串的操作方法

Posted 2022-05-16 公众号_前端每日技巧

数组

数组：表示有序数据的集合，每一项之间有顺序
数组使用字面量：[],每一项之间用逗号隔开，每一项可以是任何数据类型，一般我们习惯书写相同的数据。
最后一项不书写逗号。

数组的数据类型：object（引用数据）
读取：数组名​​[index]​​ 通过index索引值读取数组中每一项的值。index从0开始。

console.log(arr1[0]);

设置：使用=赋值

arr1[0] = 100;

length属性

数组length属性：表示数组中保存数据的总个数
对象.方法()
对象.属性
读取：数组.length

arr1.length

数组最后一项索引值arr.length - 1

arr1[arr1.length - 1]

可以通过索引值赋值强制将数组拉长

// 通过索引值赋值将数组拉长
arr1[10] = 10;
console.log(arr1.length);
// 没有赋值undefined
console.log(arr1[9]);

可以通过length强制将数组拉长，没有赋值仍然是undefined

// 可以通过length将数组拉长
arr1.length = 20;
console.log(arr1.length);
// 没有赋值仍然是undefined
console.log(arr1[18]);

数组遍历

依次数组数组中每一项数值

// 每一项可以是不同的数据类型
var arr = [10,Infinity,"你好",true,function()console.log(1);];
// 依次输出数组中每一项的值,索引值有效范围0   -      arr.length-1;
for(var i = 0; i <= arr.length - 1; i ++) 
  console.log(arr[i]);

数组的方法

首尾操作的方法

push():表示在数组结尾添加数据
参数：要添加的数据，如果是多项用逗号隔开
返回值：新数组的长度

var arr = [1,2,3,4,5,6];
// push() 在数组结尾添加
// 参数：要添加的数据，可以是散值。或者是字面量，变量名
// 返回值新数组长度
console.log(arr.push(77,[90,100]));
// push()原数组方法改变
console.log(arr);

​​pop()​​:表示删除数组最后一项

参数：不用书写
返回值：删除项的值
​​unshift()​​:在数组开头进行添加

参数：要添加的数据
返回值：新数组的长度
​​shift()​​: 删除数组第一项

参数：不用书写
返回值：删除的值

合并和拆分方法

合并：concat()
参数：要合并的数组
返回值：合并后的新数组

var arr1 = [1,2,3,4,5,6];
var arr2 = [7,8,9];
// concat() 
// 返回值：合并后的新数组
console.log(arr1.concat(arr2));
// 原数组不改变
console.log(arr1);

拆分：slice(start,end)
参数：需要两个参数
start:表示数组截取项开始的索引值
end:表示数组截取项结束的索引值
包括start不包括end
返回值：
截取后的新数组

console.log(arr1.slice(2,5));
// 原数组不改变
console.log(arr1);

还可以使用负数，表示倒数，从-1开始

数组方法

数组删除，插入，替换方法

splice(index,howmany,elements……)
index：必须书写，删除项开始索引值。
howmany:必须书写，删除数组项个数，如果没有删除书写0
elements：元素可以省略，可以有多个用逗号隔开。插入，替换的元素
返回值：删除项组成的新数组，没有删除返回空数组。
删除：howmany不能是0,elements不要书写

// 数组
var arr = [1,2,3,4,5,6,7];
// 删除
var arrNew = arr.splice(2, 3);
// 原数组改变
console.log(arr);
// 返回值
console.log(arrNew);

插入： howmany:书写为0，elements书写要插入的数据

// 插入 [1,2,3,333,444,4,5,6,7]
console.log(arr.splice(3,0,333,444));
console.log(arr);

替换：howmany不能是0，elements表示替换的数据

// 替换[1,2,333,444,555,5,6,7]
console.log(arr.splice(2,2,333,444,555));
console.log(arr);

倒序和排序

倒序：reverse()，只是将数组第一项和最一项每一项都进行前后的倒置
参数：省略
返回值：倒置后的新数组

// 数组
var arr = [1,2,3,4,5,6,7];
// 倒序
console.log(arr.reverse());
// 原数组改变
console.log(arr);

排序：sort()
参数：省略
返回值：排序后的新数组
排序依据：将数组每一项转为字符串，然后按照字符编码进行比较，编码越靠后越大。（从小到大）
数字 大写字母 小写字母

// 数组
var arr1 = [123,37,"a", "B",true];
console.log(arr1.sort());
// 原数组改变
console.log(arr1);

参数：可以书写比较函数，比较函数是一个匿名函数，可以声明两个参数，a,b
a,b表示两个要比较的数据
可以自定义升序（降序）：
以升序为例：
a > b: 返回负数
a == b : 返回0
a < b: 返回正数

// 自定义升序
arr2.sort(function(a,b) 
  if(a > b) 
    return 2;
  else if(a == b) 
    return 0;
  else if(a < b) 
    return -1;
  
);

join()

表示将数组转为字符串方法
参数：可以不书写，也可以书写，表示每一项按照参数连接
返回值：字符串

var arr = [1,2,3,4,5,6,7];
// 省略参数，表示以逗号连接
// 返回值新字符串
// 原数组不改变
console.log(arr.join());
console.log(typeof arr.join());
console.log(arr);

// 书写参数：表示参数连接
console.log(arr.join("+"));

以上是关于JavaScript数组和字符串的操作方法的主要内容，如果未能解决你的问题，请参考以下文章

类Arrays

js数组操作方法

JavaScript数组的常用方法

JavaScript学习笔记：数组的sort()和reverse()方法

JavaScript对数组对象进行升序排列

JavaScript数组的sort方法常规用法