js中的数组

Hui.6

已于 2023-07-06 17:16:12 修改

阅读量102

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-07-06 17:02:27 首次发布

本文链接：https://blog.csdn.net/weixin_64502483/article/details/131559152

版权

数组

1.数组基础

数组是一个可以存放任意数据类型的有序集合

数组的元素可以是任意数据类型

数组的大小可以动态变换

2.数组创建

1.使用字面量创建

var arr = [1,2,3,4,5];

访问数组元素 arr[index] index 从0开始

数组元素下标的最大值为arr.length-1

2.使用构造函数创建数组

如果在Array中放入的是一个number正数表示数组长度

如果是一个小数则报错

如果是其他数据类型，则表示数组元素

var arr1 = new Array();
console.log(arr1);//[]
var arr1 = new Array(10);
console.log(arr1,arr1.length);//[ <10 empty items> ] 10
// var arr1 = new Array(10.2);//小数是0（10.0）不报错 其他小数报错
// console.log(arr1,arr1.length);//报错
var arr1 = new Array('10.2');
console.log(arr1,arr1.length);//[ '10.2' ] 1

3.数组API

1.数组序列化

将数组进行序列化JSON.stringify

将数组json字符串转为数组JSON.parse

var arr = [1,5,7,8,{name:'zhangsan'}];
var res = JSON.stringify(arr);
console.log(res,typeof res);//[1,5,7,8,{"name":"zhangsan"}] string
console.log(JSON.parse(res));//[ 1, 5, 7, 8, { name: 'zhangsan' } ]

将数组转为字符串

数组调用toString()

使用join() 想让数组之间用什么隔开就在join方法里写什么

var arr = [1,5,7,8,{name:'zhangsan'}];
var strArr = arr.toString();
console.log(strArr,typeof strArr);//1,5,7,8,[object Object] string
var strArr = arr.join("!");
console.log(strArr,typeof strArr);//1!5!7!8![object Object] string

2.构造函数的方法

静态方法只能由构造函数调用的方法 Object

1.Array.isArray()

用来判断某个变量是否是一个数组对象，返回布尔值

var arr=[1,2,3,4];
var str = 'hello';
var obj = {name:'zhangsan',age:12};
console.log(Array.isArray(arr));//true
console.log(Array.isArray(str));//false
console.log(Array.isArray(obj));//false

2.Array.from()

将类数组对象转为数组对象

var str = 'hello';
console.log(Array.from(str));//[ 'h', 'e', 'l', 'l', 'o' ]

3.Array.of()

创建数组，参数会被当成数组元素解析

var arr = Array.of(10,'hello',{});
console.log(arr);//[ 10, 'hello', {} ]

3.栈与队列方法

1.Array.prototype.pop()

删除数组的最后一个元素并返回删除的元素

参数：无

返回值：删除的数组元素

是否修改原数组：修改原数组

var arr = [1,2,3,4,5];
console.log(arr.pop(),'返回值');//5 返回值
console.log(arr,'');//[ 1, 2, 3, 4 ]

2.Array.prototype.push()

向数组的末尾添加一个或多个元素，并返回新数组的长度

参数：想要添加的元素

返回值：返回新数组的长度

是否修改原数组：修改原数组

var arr = [1,2,3,4,5];
var res =arr.push('tom','jerry');
console.log(res,arr);//6 [ 1, 2, 3, 4, 5, 'tom', 'jerry' ]

3.Array.prototype.shift()

把数组的第一个元素从其中删除，并返回第一个元素的值

参数：无

返回值：返回删除的第一项元素

是否修改原数组：修改原数组

var arr = [1,2,3,4,5];
var res = arr.shift();
console.log(res,arr);//1 [2,3,4,5]

4.Arrsy.prototype.unshift()

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

参数：想要添加的元素

返回值：返回新数组的长度

是否修改原数组：修改原数组

var arr=[1,2,3,4,5];
var res = arr.unshift('tom','jerry');
console.log(res,arr);//7 [ 'tom', 'jerry', 1, 2, 3, 4, 5 ]

4.排序方法

1.Array.prototypr.reverse()

用于颠倒数组中元素的顺序

参数：无

返回值：返回反转后的新数组

是否修改原数组：修改原数组

var arr = [1,2,3,4,5];
var res = arr.reverse();
console.log(arr,res);//[ 5, 4, 3, 2, 1 ] [ 5, 4, 3, 2, 1 ]

2.Array.prototype.sort()

用于对数组的元素进行排序

参数：函数（return 整数表示就是升序 return 负数表示的降序）

返回值：返回排序后的新数组

是否修改原数组：修改原数组

var arr = [1,11,32,23,202,58,69];
var res = arr.sort(function(a,b){
    if(a>b){
        //表示升序
        return 1;
        // return a-b; // a-b也表示升序
    }else{
        //表示降序
        return -1;
        // return b-a; // b-a也表示降序
    }
});
console.log(res,arr);

5.操作方法

1.Array.prototype.concat()

用于连接两个或多个数组

参数：要拼接的数组

返回值：拼接好的新数组

是否修改原数组：不修改原数组

var arr = [1,2,3];
var arr1 =[4,5,6];
var arr2 =[7,8,9];
var res = arr.concat(arr1,arr2);
console.log(res,'返回值');//[ 1, 2, 3, 4, 5,6, 7, 8, 9] 返回值
console.log(arr,'修不修改原数组');//[ 1, 2, 3 ] 修不修改原数组

2.Array.prototype.slice()

从数组中截取数组元素

参数	返回值	是否修改原数组
start,end	返回的包含截取元素的数组不包含末尾	不修改原数组
start	从开始位置截取到末尾结束	不修改原数组
负数	从倒数第几位截取到末尾结束	不修改原数组
负数，负数	从倒数第几位截取到倒数第几位结束	不修改原数组

var arr = [1,2,3,4,5];
var res =arr.slice(2,4);//[3,4] 截取第二位到第四位，不包括第四位
var res = arr.slice(2);//[3,4,5] 从第二位截取到最后
var res = arr.slice(-3);//[ 3, 4, 5 ] 从倒数第三位截取到最后
var res = arr.slice(-3,-1);//[3,4]从倒数第三位截取，截取到倒数第一位结束，不包含倒数第一位
console.log(res);

3.Array.prototype.splice()

用于添加或删除数组中的元素

参数：index，howmany

返回值：若是删除元素，返回含有被删除元素的数组

是否修改原数组：修改原数组

var arr= [1,2,3,4,5];
//(2,2)表示从下标为2的位置删除两项数组元素
var res = arr.splice(2,2);//[ 3, 4 ] [ 1, 2, 5 ]
//(2,1,'tom',...)表示从下标为2的位置删除1项并且插入n项
var res = arr.splice(2,1,'tom','jerry');//[ 3 ] [ 1, 2, 'tom', 'jerry', 4, 5 ]
//(2，0，xxx)表示从下标为2的位置开始增加数组元素
var res = arr.splice(2,0,'tom','jerry');//[] [ 1, 2, 'tom', 'jerry', 3, 4, 5 ]
//从下标为3位置删除末尾结束
var res = arr.splice(3);//[ 4, 5 ] [ 1, 2, 3 ]
//从倒数第二项开始删除到末尾结束
var res = arr.splice(-2);//[ 4, 5 ] [ 1, 2, 3 ]
//从倒数第二项开始删除一项
var res = arr.splice(-2,1);//[ 4 ] [ 1, 2, 3, 5 ]
//从倒数第二项开始删除一项并添加一项
var res = arr.splice(-2,1，'yom');//[ 4 ] [ 1, 2, 3, 'yom', 5 ]


console.log(res);

6.位置方法

1.Array.prototype.indexOf()

查找数组元素出现的位置从头到尾开始查找

参数	返回值	是否修改原数组
数组元素	返回第一次数组元素出现的索引，若没有返回-1	不修改原数组
数组元素，index（从下标开始查找）	返回第一次数组元素出现的索引，若没有返回-1	不修改原数组

var arr = [11,22,11,32,56,11];
var res=arr.indexOf(66);//-1
var res=arr.indexOf(11,3);//5 从下标为3的位置开始查找
console.log(res);

2.Array.prototype.lastIndexOf()

查找数组元素出现的位置从尾部开始查找元素

参数	返回值	是否修改原数组
数组元素	返回从尾部第一次查到数组元素的下标或者-1	不修改原数组
数组元素，index	返回从尾部第一次查到数组元素的下标或者-1	不修改原数组

var arr = [11,22,32,56,11,66,11];
var res =arr.lastIndexOf(11);//6 [11, 22, 32, 56,11, 66, 11]
var res =arr.lastIndexOf(11,3);//0 [11, 22, 32, 56,11, 66, 11]
console.log(res);

7.迭代方法

1.Array.prototype.forEach()

调用数组的每个元素，并将元素传递给回调函数（for循环升级版）

参数：函数(item,index,arr)

返回值无返回值有返回值也是undefined

是否修改原数组：不修改原数组

var arr = [1,2,3,4,5];
var res = arr.forEach(function(item,index,arr){
    console.log(item,index,arr);
});
console.log(res,arr);
//打印结果为
//1 0 [ 1, 2, 3, 4, 5 ]
//2 1 [ 1, 2, 3, 4, 5 ]
//3 2 [ 1, 2, 3, 4, 5 ]
//4 3 [ 1, 2, 3, 4, 5 ]
//5 4 [ 1, 2, 3, 4, 5 ]

2.Array.prototype.every()

判断数组中的每一个元素是否符合内部表达式一项数组不满足返回false

参数：函数(item,index,arr)

返回值：true/false 只要有一项不满足直接跳出循环

是否修改原数组：不修改原数组

var arr = [1,2,3,4,5];
var res = arr.every(function(item,index){
return item>1
});
console.log(res,arr);//false [ 1, 2, 3, 4, 5 ]

注：every中不给迭代方法提供第二个参数，this会默认指向全局对象global

var res = arr.every(function(item,index){
console.log(this);//this指向全局对象global
})

如果提供了第二个参数，this则指向第二个参数（null和undefined没有意义的参数this还是会指向全局对象global）

var res = arr.every(function(item,index){
console.log(this);//{ name: 'zhangsan' } this指向第二个参数
},{name:'zhangsan'})

3.Array.prototype.some()

比对数组每一项元素是否符合函数内部表达式只要有一项符合返回true 都不符合返回false

参数：函数(item,index,arr)

返回值：true/false 只要有一项满足直接跳出循环

是否修改原数组：不修改原数组

var ages = [18,32,56,44,22];
var res =ages.some(function(item){
    // return item>40//true
    return item>60//false
});
console.log(res);

4.Array.prototype.filter()

过滤出符合条件的数组元素组成新数组

参数：函数(item,index,arr)

返回值：返回符合函数表达式数组元素组成的新数组

是否修改原数组：不修改原数组

var ages = [18,23,17,22,46];
var res = ages.filter(function(item,index,arr){
    return item >22
});
console.log(res,ages);//[ 23, 46 ] [ 18, 23, 17, 22, 46 ]

5.Array.prototype.map()

映射对数组每一个元素进行处理返回一个新数组

参数：函数(item,index,arr)

返回值：返回对每一个数组元素进行处理后的新数组

是否修改原数组：不修改原数组

var arr = [1,2,3,4,5];
var res = arr.map(function(item,index,arr){
    return item * 10
})
console.log(res,arr);//[ 10, 20, 30, 40, 50 ] [ 1, 2, 3, 4, 5 ]

批量删除id

var data = [
    {id:1,name:'zhangsan'},
    {id:2,name:'lisi'},
    {id:3,name:'wangwu'},
    {id:4,name:'zhaoliu'},
    {id:5,name:'sunqi'},
];
var res = data.map(function(item){
    return item.name
});
console.log(res);//[ 'zhangsan', 'lisi', 'wangwu', 'zhaoliu', 'sunqi' ]