JavaScript数组对象

最新推荐文章于 2024-05-08 22:34:53 发布

AIU哎呀

最新推荐文章于 2024-05-08 22:34:53 发布

阅读量448

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/AI_U20/article/details/84782135

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

JavaScript数组对象

一、概念

数组对象是使用单独的变量名来存储一系列的值。

二、创建数组

（一）构造函数

1. 常规方式：

var arr=new Array(); 
arr[0]="1";       
arr[1]="2";
arr[2]="3";

2. 简洁方式：

var arr=new Array("1","2","3");

注：
在使用构造函数创建数组时，如果传入一个数字参数，则会创建一个长度为参数的数组，如果传入多个，则创建一个数组，参数作为初始化数据加到数组中

var arr1 = new Array(5);
console.log(arr1.length);//5
console.log(arr1); //[] ,数组是空的

var arr2 = new Array(5,6);
console.log(arr2.length);//2
console.log(arr2); //[5,6]

（二）字面量

使用字面量方式，无论传入几个参数，都会把参数当作初始化内容

var arr=["1","2","3"];

var arr1 = [5];
console.log(arr1.length);//1
console.log(arr1); //[5]

var arr2 = [5,6];
console.log(arr2.length);//2
console.log(arr2); //[5,6]

注:
使用带初始化参数的方式创建数组的时候，最好最后不要带多余的”,”，在不同的浏览器下对此处理方式不一样

var a1 = [1,2,3,]
console.log(a1.length)  //在现代浏览器上长度是3；但在低版本IE下长度为4，最后一条数据是undefined
console.log(a1)

三、访问数组（通过索引与长度）

可以通过指定数组名以及索引值访问指定数组中某个特定的元素。
注：下标也可以是一个得出非负整数的变量或表达式

var a1 = [1,2,3,4];
console.log(a1[0]); //1
var i=1;
console.log(a1[i]); //2
console.log(a1[++i]); //3

数组也是对象，我们可以使用索引的奥秘在于，数组会把索引值转换为对应字符串（1=>”1”）作为对象属性名
拓展：操作符in，可以在不访问属性值的情况下判断对象中是否存在这个属性

var obj= {
  color: undefined
}
obj.name = '小喵'

console.log('color' in obj) // true
console.log('name' in obj) // true

console.log('sex' in obj)  // false

so，所有的索引都是属性名，但只有自然数（有最大值）才是索引，数组的索引可以是不连续的，访问index不存在的元素的时候返回undefined【so，一般在使用数组的时候不会出现数组越界错误】
注：数组的length属性是可写的属性，当强制把数组的length属性值设置为小于等于最大index值时，数组会自动删除index大于等于length的数据；如果把length设置为大于最大index+1的值的时候，数组也会自动扩张，但是不会为数组添加新元素，只是在尾部追加空空间

var a = new Array(1,2,3);
a[100] = 100;
console.log(a.length); //101  【数组length属性等于数组中最大的index+1】
console.log(a[3]); //undefined
console.log(a[99]); //undefined
console.log(a[100]); 100

a.length = 2
console.log(a);//[1,2]  【自动删除了index大于等于length的数据】

a.length=5;
console.log(a); //[1, 2, empty × 3]   //后面没有3个undefined

四、常用操作

（一）添加

push(): 向数组的末尾添加一个(item)或多个元素，并返回新的长度。
unshift(): 向数组的开头添加一个或更多元素，并返回新的长度。

// push(item1, item2, ..., itemX):  
var color = ["red", "orange", "yellow", "green"];
console.log(color.push("blue","indigo","purple")); //7
console.log(color);//(7) ["red", "orange", "yellow", "green", "blue", "indigo", "purple"]

// unshift(item1, item2, ..., itemX):  
var color = ["red", "orange", "yellow", "green"];
console.log(color.unshift("blue","indigo","purple")); //7
console.log(color);//(7) [ "blue", "indigo", "purple","red", "orange", "yellow", "green"]

（二）删除

pop(): 删除数组的最后一个元素并返回删除的元素。
shift(): 删除数组的第一个元素，并返回第一个元素的值。

//pop():
var color = ["red", "orange", "yellow", "green"];
console.log(color.pop()); //green
console.log(color);//(3) ["red", "orange", "yellow"]

//shift():
var color = ["red", "orange", "yellow", "green"];
console.log(color.shift()); //red
console.log(color);//(3) ["orange", "yellow", "green"]

（三）添加+删除(+替换)

splice(): 用于添加或删除数组中的元素。

注：

返回一个由删除元素组成的新数组，没有删除则返回空数组
结合使用可以达到替换效果

array.splice(index,howmany,item1,.....,itemX)
//参数1：index，表示从何处添加/删除元素。索引值必需。
//参数2：howmany，表示要删除元素的数量。可以是 "0"。当有三个参数时必需，当只有一个或两个参数时，选填。
//参数3：item1,.....,itemX，表示要添加到数组的新元素。选填。

//添加
var color = ["red", "orange", "yellow", "green"];
console.log(color.splice(2,0,"blue","indigo","purple")); //[]
console.log(color);//(7) ["red", "orange", "blue", "indigo", "purple", "yellow", "green"]
//删除
var color = ["red", "orange", "yellow", "green", "blue", "indigo", "purple"];
console.log(color.splice(2,0)); //[]
console.log(color);//(7) ["red", "orange", "yellow", "green", "blue", "indigo", "purple"]
console.log(color.splice(2,2)); //(2) ["yellow", "green"]
console.log(color);//(5) ["red", "orange", "blue", "indigo", "purple"]
console.log(color.splice(2)); //(3) ["blue", "indigo", "purple"]
console.log(color);//(2) ["red", "orange"]
//替换
var color = ["red", "orange", "yellow", "green"];
console.log(color.splice(2,2, "blue", "indigo", "purple")); //(2) ["yellow", "green"]
console.log(color);//(5) ["red", "orange", "blue", "indigo", "purple"]

（四）转换为字符串

join() ：把数组中的所有元素转换一个字符串。元素由指定的分隔符分隔。

array.join(separator)
//参数separate：默认","。选填。把每个元素转换为字符串，然后进行连接，每每两个元素之间插入 separator 进行分割。
var color = ["red", "orange", "yellow", "green"];
console.log(color.join()); //red,orange,yellow,green
console.log(color.join('*')); //red*orange*yellow*green
console.log(color);//(4) ["red", "orange", "yellow", "green"]

（五）截取

slice(): 截取数组中选定的元素。返回一个新数组。
注：包含start索引值下元素，不包含end索引值下元素

slice(start,end):
//参数1：选填。表示从何处开始选取。若为负数，则从数组尾部开始倒着算起的位置。如，-1 指最后一个元素，-2 指倒数第二个元素……。
//参数2：选填。表示从何处结束选取。若为负数，同参数1。若不填则从参数1开始到数组结束位置

var color = ["red", "orange", "yellow", "green"];
console.log(color.slice()); //(4) ["red", "orange", "yellow", "green"]
console.log(color.slice(1,3)); //(2) ["orange", "yellow"]
console.log(color.slice(-2)); //(2) ["yellow", "green"]
console.log(color.slice(-2,3)); //["yellow"]
console.log(color.slice(-2,-3)); //[]
console.log(color);//(4) ["red", "orange", "yellow", "green"]

（六）拼接

concat(): 连接两个或多个数组。返回一个新的数组。

concat(array2,array3,...,arrayX)
//参数：必填。可是具体的值，也可是数组对象。可任意多个。
var color = ["red", "orange", "yellow", "green"];
var color1 = ["blue", "indigo", "purple"];
console.log(color.concat(color1));//(7) ["red", "orange", "yellow", "green", "blue", "indigo", "purple"]
console.log(color.concat(color,color1)); //(11) ["red", "orange", "yellow", "green", "red", "orange", "yellow", "green", "blue", "indigo", "purple"]
console.log(color.concat(1,color1)); //(8) ["red", "orange", "yellow", "green", 1, "blue", "indigo", "purple"]
console.log(color);//(4) ["red", "orange", "yellow", "green"]
console.log(color);//(3) ["blue", "indigo", "purple"]

（七）倒序

reverse(): 颠倒数组中元素的顺序。改变原数组。

reverse():
var color = ["red", "orange", "yellow", "green"];
console.log(color.reverse());//(4) ["green", "yellow", "orange", "red"]
console.log(color);//(4) ["green", "yellow", "orange", "red"]

（八）排序

sort(): 对数组的元素进行排序。
注：

默认按字母表升序排序（字符编码的顺序）
如果含有undefined会被排到最后面
对象元素则会调用其toString方法
改变原数组

array.sort(sortfunction)
//参数：选填。规定排序顺序。必须是函数。

var color = ["red", "orange", "yellow", "green"];
var num = [3,2,-3,9,5];
var num1 = [3,2,-3,19,5];
var students = [
	{name: 'aaa', age: 21},
	{name: 'baa', age: 18},
	{name: 'abc', age: 24}
];
console.log(color.sort());//(4) ["green", "orange", "red", "yellow"]【默认字母表升序顺序】
console.log(color);//(4) ["green", "orange", "red", "yellow"]【改变了原数组】
console.log(num.sort());//(5) [-3, 2, 3, 5, 9]
console.log(num1.sort());//(5) [-3, 19, 2, 3, 5]
console.log(num);//(5) [-3, 2, 3, 5, 9]
console.log(num1);//(5) [-3, 19, 2, 3, 5]
//数组num1没有按照数值的大小进行排序，必须使用一个排序函数来实现：
function ascending(a,b) {
   return a - b
}
function descending(a,b) {
    return b - a
}
console.log(num1.sort(ascending));//(5) [-3, 2, 3, 5, 19]
console.log(num1.sort(descending));//(5) [19, 5, 3, 2, -3]
// 按age 从小到大排序
var sortByAge = students.sort(function(a, b){
    return  a.age - b.age
});

（九）判断

Array.isArray(): 判断一个对象是否为数组。若是数组返回 true，否则返回 false。 (数组对象的一个静态函数)

<script>
    var nums = ["one", "two", "three"];
    var color = {};
    console.log(Array.isArray(nums));    //true
    console.log(Array.isArray(color));   //false
</script>

（十）查找指定元素索引值

查找数组内指定元素位置，查找到第一个后返回其索引值，没查到到返回-1
indexOf(element) ：从开始到结束正序查找。
lastIndexOf(element) ：从结束到开始反序查找。

<script>
    var nums = ["one", "two", "three"];
    console.log(nums.indexOf("two"));//1
    console.log(nums.indexOf("five"));//-1
    console.log(nums.lastIndexOf("one"));//0
    console.log(nums.lastIndexOf("five"));//-1
</script>

（十一）遍历【forEach()】

forEach(function(element,index,array),thisValue): 遍历数组，用于调用数组的每个元素，并将元素传递给回调函数。
注: forEach() 对于空数组是不会执行回调函数的。

参数	描述
function	必填。回调函数，三个参数：1.element：必填。当前元素；2.选填。当前元素的索引值；3.选填。当前元素所属的数组对象。
thisValue	选填。传递给函数的值一般用 “this” 值。若不填，则"undefined" 会传递给 “this” 值

var nums = ["one", "two", "three"];
var color = [];
nums.forEach(function (ele,index) {
    console.log(ele,index);
});
color.forEach(function (ele,index) {
    console.log(ele,index);
});

输出结果：
在这里插入图片描述

（十二）检测

1. every(function(element,index,array),thisValue)

用来检测数组所有元素是否都符合指定条件（通过函数提供）：

只要检测到有一个元素不满足，则整个表达式返回 false ，并剩余的元素不会再进行检测。
若数组中所有元素都满足条件，则返回 true。

注：

不会对空数组进行检测。
不会改变原始数组。

参数	描述
function	必填。回调函数，三个参数：1.element：必填。当前元素；2.选填。当前元素的索引值；3.选填。当前元素所属的数组对象。
thisValue	选填。传递给函数的值一般用 “this” 值。若不填，则"undefined" 会传递给 “this” 值

2. some(function(element,index,array),thisValue)

用于检测数组中的元素是否满足指定条件（函数提供）：

只要检测到一个元素满足条件，则表达式返回true ,并剩余的元素不会再进行检测。
若数组中没有满足条件的元素，则返回false。

注：

不会对空数组进行检测。
不会改变原始数组。

参数	描述
function	必填。回调函数，三个参数：1.element：必填。当前元素；2.选填。当前元素的索引值；3.选填。当前元素所属的数组对象。
thisValue	选填。传递给函数的值一般用 “this” 值。若不填，则"undefined" 会传递给 “this” 值

<script>
    var nums = [2,4,6,7,8,10,3];
    var nums1 = [2,4,6,8,10,12];
    var nums2 = [1,3,5,8,10,12];
    var nums3 = [1,3,5,7,9,11];
    
    //every():
    
    function isEven(arr) {
        var fir = arr.every(function (ele) {
            console.log(ele);
            return ele % 2 === 0
        });
        console.log(fir);
    }
    isEven(nums);
    isEven(nums1);
    
    //some():
    
    function someEven(arr) {
        var fir = arr.some(function (ele) {
            console.log(ele);
            return ele % 2 === 0
        });
        console.log(fir);
    }
    someEven(nums2);
    someEven(nums3);
</script>

输出结果：
在这里插入图片描述

（十三）映射

map()： 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
注：

按照原始数组元素顺序依次处理元素
不会对空数组进行检测。
不会改变原始数组。

参数	描述
function	必填。回调函数，三个参数：1.element：必填。当前元素；2.选填。当前元素的索引值；3.选填。当前元素所属的数组对象。
thisValue	选填。传递给函数的值一般用 “this” 值。若不填，则"undefined" 会传递给 “this” 值

var nums = [2,4,6,7,8,10,3];
function mapDemo(arr) {
  var arr1 = arr.map(function (ele) {
        console.log(ele);
        return ele*ele;
    });
    console.log(arr1);
}
mapDemo(nums);

输出结果：
在这里插入图片描述

（十四）过滤

filter(): 创建一个新的数组，新数组中的元素是从指定数组中筛选出的符合条件的所有元素。
注：

不会对空数组进行检测。
不会改变原始数组。

参数	描述
function	必填。回调函数，三个参数：1.element：必填。当前元素；2.选填。当前元素的索引值；3.选填。当前元素所属的数组对象。
thisValue	选填。传递给函数的值一般用 “this” 值。若不填，则"undefined" 会传递给 “this” 值

var nums4 = [-1,3,5,0,7,-9,11];
function filterDemo(arr) {
	var arr1 = arr.filter(function (ele) {
		console.log(ele);
		return ele < 0;
	});
	console.log(arr1);
}
filterDemo(nums4);

输出效果：
在这里插入图片描述

AIU哎呀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数组对象

JavaScript数组对象一、概念数组对象是使用单独的变量名来存储一系列的值。二、创建数组（一）构造函数1. 常规方式：var arr=new Array(); arr[0]=&amp;amp;amp;amp;amp;quot;1&amp;amp;amp;amp;amp;quot;; arr[1]=&amp;amp;amp;amp;amp;quot;2&amp;amp;amp;amp;amp;quot;;arr[2]=&amp;amp;
复制链接

扫一扫