JavaScript数组的操作方法(增删改、排序、反转、拼接、转化)

▲通过索引下标来操作数组
①通过索引下标调用数组中指定单元的数据

var arr = ['北京','上海','广州','重庆','天津'];

在这里插入图片描述
②通过索引下标来修改数组中存储的单元的数据
对已存在的索引下标进行赋值,进行的是重复赋值,会覆盖之前存储的数据

arr[0] = '武汉';
console.log(arr);

北京被武汉覆盖了
③通过索引下标来新增数组的单元
对不存在的索引下标,进行赋值,是新增数组单元的操作

// 连续索引 
arr[5] = '郑州';
// 间隔索引
arr[100] = '瞎写的';
console.log(arr);
console.log(arr[50]);


④通过索引下标来删除数组的单元
定义数组的length长度属性,通过定义数组的单元个数来删除数组的单元
只能是从数组的结尾处开始删除单元,不能从数组的起始开始删除单元
一般不使用,除非是一定要限制数组长度

arr.length = 3;
console.log(arr);

在这里插入图片描述
▲使用JavaScript提供的操作数组的方法可以向数组中新增或者删除单元
新增单元:

// 新增单元——从数组的起始位置开始
// 数组变量.unshift(新增的数据)   在数组的起始位置新增单元
// 数组变量.unshift(数据1,数据2,数据3...)   可以新增多个单元,之间使用逗号间隔
// 新增的单元可以是任意JavaScript支持的数据类型
var arr = ['北京','上海'];
arr.unshift('武汉');
arr.unshift('武汉加油','武汉棒棒哒');
arr.unshift([1,2,3,4,5]);
arr.unshift(function fun(){console.log(123)});
arr.unshift( {name:'张三'} );

在这里插入图片描述

// 新增单元——从数组的结束位置开始
// 数组变量.push(新增的数据)   在数组的结束位置新增单元
// 数组变量.push(数据1,数据2,数据3...)   可以新增多个单元,之间使用逗号间隔
// 新增的单元可以是任意JavaScript支持的数据类型
// push()是最常用的数组方法,用于向数组中添加内容
var arr = ['郑州','信阳'];
arr.push('武汉');
arr.push('武汉加油','武汉棒棒哒');
arr.push([1,2,3,4,5]);
arr.push(function fun(){console.log(123)});
arr.push( {name:'张三'} );

在这里插入图片描述
删除单元:

// 数组.shift(括号内什么都不要写,写了也没用)   只能删除起始的第一个单元   
// 数组.pop(括号内什么都不要写,写了也没用)     只能删除结束的最后一个单元 
var arr = ['郑州','信阳','开封','河南'];
arr.shift(); //删除了第一个单元'郑州'
arr.pop(); //删除了最后一个单元'河南'
console.log(arr);

在这里插入图片描述
总结:新增可以是一个或者多个,删除一次只能一个
unshift() 起始新增,可以是一个或者多个
push() 结束新增,可以是一个或者多个
shift() 起始删除,只能是一个
pop() 结束删除,只能是一个

▲数组操作方法的返回值

// unshift()  push() 新增单元操作,返回值都是新增单元之后,数组新的长度,也就是length属性值
// shift()  pop()  删除单元操作,返回值都是删除单元存储的数据信息
// 删除单元,也称为 抛出 释放 消除
var arr = [1,2,3,4,5]; //定义一个长度为5的数组,即length属性是5
var res1 = arr.unshift('郑州'); //在起始位置,也就是'1'的前面新增'郑州'
var res2 = arr.push('北京'); //在结束位置,也就是'5'的后面新增'北京'
console.log(arr);
console.log(res1); //新增单元操作,返回值是数组新的长度,即length属性,对应下图中的6
console.log(res2); //新增单元操作,返回值是数组新的长度,即length属性,对应下图中的7
var res3 = arr.shift(); //删除开头位置的'郑州'
console.log(res3);  //删除单元操作,返回值都是删除单元存储的数据信息。对应下图中开头处被删去的'郑州'

在这里插入图片描述
▲截取数组的指定单元 / 删除数组的指定单元
定义一个数组var arr = ['北京','上海','广州','重庆','天津'];若要删除广州与重庆
方法①从结束位置删除3个单元,之后再把天津添加上
方法②数组.splice()
参数1: 删除起始单元的位置—索引下标
参数2: 从起始单元开始,删除单元个数—删除几个单元
参数3: 在删除的位置上,插入的新的数据
替换插入的数据,可以是一个,可以是多个,多个单元之间使用逗号间隔
可以是任意JavaScript支持的数据类型

// 从索引下标是2,也就是第三个单元开始,删除2个单元
var arr = ['北京','上海','广州','重庆','天津'];
var res = arr.splice(2,2); //从索引下标为2,也就是第三个单元'广州'开始,删除2个单元
console.log(arr);
console.log(res); //操作结果返回值是删除单元组成的新的数组

在这里插入图片描述

// 如果只写一个参数,是从删除位置开始,删除之后所有的单元,包括起始位置单元
var arr = ['北京','上海','广州','重庆','天津'];
arr.splice(2); //从索引下标为2,也就是第三个单元'广州'开始,删除包括开始位置及后面的所有单元
console.log(arr);

在这里插入图片描述

// 写三个单元执行效果类似于替换操作
var arr = ['北京','上海','广州','重庆','天津'];
var res2 = arr.splice(2,2,'武汉','加油'); //从索引下标为2,也就是第三个单元'广州'开始,删除2个单元,并在当前位置新增'武汉'和'加油'2个单元
console.log(arr);
console.log(res2); //操作结果返回值是删除单元组成的新的数组

在这里插入图片描述
如果不写参数是没有效果的,比如arr.splice();

▲数组的排序方法:将数组中的数据按照数值大小来进行排序
数组名.sort() 默认按照首位数值排序,不是数值的实际大小
数组名.sort( function(a,b){return a-b} ) 按照数值的实际大小排序 — 从小到大
数组名.sort( function(a,b){return b-a} ) 按照数值的实际大小排序 — 从大到小

var arr = [3,21,3215432,321321,32,43,5,34,43,23,32543,1234,45,321,14,234,4];
arr.sort(); //按照首位数值排序
console.log(arr);

按照首位数值排序

var arr = [3,21,3215432,321321,32,43,5,34,43,23,32543,1234,45,321,14,234,4];
arr.sort( function(a,b){return a-b} ) //按照数值的实际大小顺序,从小到大排序
console.log(arr);

按照数值实际大小,从小到大排序

var arr = [3,21,3215432,321321,32,43,5,34,43,23,32543,1234,45,321,14,234,4];
arr.sort( function(a,b){return b-a} ) //按照数值的实际大小顺序,从大到小排序
console.log(arr);

在这里插入图片描述
▲数组的反转(颠倒顺序)
数组名.reverse();将数据库中数组最后的最新的消息,反转到最上方先显示,相当于颠倒顺序

var arr = ['北京','上海','广州','重庆','天津'];
arr.reverse();
console.log(arr);

数组顺序颠倒
▲数组和字符串的转化
①数组转化为字符串:
数组名.join();不会改变原始数组的内容,返回值是字符串类型,内容是数组中每个单元存储的数据信息,默认使用逗号间隔
遵守其他数据类型转化为字符串类型的自动转化原则

var arr = ['北京','上海','广州','重庆','天津',true,false,100,[1,2,3,4],{name:'张三'},function fun(){}];
var res1 = arr.join(); //默认逗号间隔  
var res2 = arr.join('-');//设定间隔符号 
var res3 = arr.join(''); //没有间隔符号,设定空字符串作为间隔 
console.log(arr);
console.log(res1); //数组中每个单元存储的数据信息,默认使用逗号间隔
console.log(res2); //数组中每个单元存储的数据信息,设定使用横线间隔
console.log(res3); //数组中每个单元存储的数据信息,设定使用空字符串间隔

在这里插入图片描述
②字符串转化为数组:
数组名.split();将字符串切割存储为数组的形式,不会改变原始字符串,返回值是: 按照字符串,转化为的数组
语法1:不定义参数,会将字符串整个转化为数组的一个单元
语法2:定义参数为空字符串,会将每个字符转化为一个单元
语法3:可以按照特定的间隔符号来分割字符串,存储单元数据内容中不会出现间隔符号
语法4:设定第二个参数,是设定数组的单元个数,也就是length长度,一般是不写的

var arr = '北京-上海-广州-天津-重庆';
var res4 = arr.split('-' , 3); //按照间隔符号 - 减号来分割字符串,存储成数组形式,并且设定数组为3个单元长度
console.log(arr);
console.log(res4);

在这里插入图片描述
▲数组的拼接
数组名1.concat(数组2);将两个数组拼接为一个数组,两个数组的数据内容会进行拼接

var arr1 = [1,2,3,4,5];
var arr2 = ['北京','上海','广州','重庆','天津'];
var arr3 = arr1.concat(arr2);
console.log(arr3);

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值