javascript中数组操作

最新推荐文章于 2023-03-27 17:49:51 发布
最新推荐文章于 2023-03-27 17:49:51 发布
阅读量294 收藏
点赞数

javascript中Array相关的属性和方法

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

Array 对象属性

constructor : 返回对创建此对象的数组函数的引用

1
2
3
4
var test=new Array()
if (test.constructor==Array){
	document.write("This is an Array")
}

length 设置或返回数组中元素的数目。

prototype 可以向构造函数的原型对象添加属性和方法

Array对象方法

concat()

连接两个或更多的数组，并返回结果

1
2
3
4
var arr = [1,2,3,4];
var arr2 = [5,6,7,8];
var arr3 = arr.concat(arr2);
console.log(arr3); // 连接之后返回的数组为：[1, 2, 3, 4, 5, 6, 7, 8]

join()

把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔

1
2
3
var arr = ['xiao','lin','qiqi','mingtian'];
var arr2 = arr.join(',');
console.log(arr2); // 根据','隔开返回的字符串为："xiao,lin,qiqi,mingtian"

pop()

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

1
2
3
4
var arr = [2,3,4,5];
var arr2 = arr.pop();
console.log(arr2); // 删除的数组的最后一个元素为：5
console.log(arr);  // 删除元素之后的数组为：[2, 3, 4]

shift()

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

1
2
3
4
var arr = [2,3,4,5];
var arr2 = arr.shift();
console.log(arr2); // 删除的数组的第一个元素为：2
console.log(arr);  // 删除元素之后的数组为：[3, 4，5]

push()

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

1
2
3
4
var arr = [2,3,4,5];
var arr2 = arr.push(6);
console.log(arr2);  // 返回的数组长度：5 
console.log(arr);  // [2, 3, 4, 5, 6]

unshift()

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

1
2
3
4
var arr = ['xiao','ming','qiqi','aiming'];
var arr1 = arr.unshift('lang');
console.log(arr1);  // 返回的数组的长度：  5
console.log(arr);  //向数组开头添加元素返回的结果：["lang", "xiao", "ming", "qiqi", "aiming"]

reverse()

颠倒数组中元素的顺序

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

slice()

从某个已有的数组返回选定的元素

1
2
3
4
var arr = [2,3,4,5];
var arr2 = arr.slice(1,3);
console.log(arr2);  // 截取区间返回的数组为：[3, 4]
console.log(arr);  // [2, 3, 4, 5]

sort()

对数组的元素进行排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 借助排序函数，实现数值由小到大排序
function sortNumber(a,b){
    return a - b
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2);  // [5, 23, 30, 42]
console.log(arr);   // [5, 23, 30, 42]

// 借助排序函数，实现数值由大到小排序
function sortNumber(a,b){
    return b - a
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2);  // [42, 30, 23, 5]
console.log(arr);  // [42, 30, 23, 5]

splice()

删除元素，并向数组添加新元素。

1
2
3
4
5
6
7
8
9
// 创建一个新数组，并向其添加一个元素
var arr = [1,2,3,4];
arr.splice(2,0,5);
console.log(arr);  // [1, 2, 5, 3, 4]

// 删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：
var arr = [1,2,3,4];
arr.splice(2,1,5);
console.log(arr);  // [1, 2, 5, 4]

toSource()

返回该对象的源代码

1
2
3
4
5
6
7
8
9
10
11
12
// 浏览器支持
// 只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。
<script type="text/javascript">
function employee(name,job,born){
    this.name=name;
    this.job=job;
    this.born=born;
}
var bill = new employee("Bill Gates","Engineer",1985);
document.write(bill.toSource());
</script>
// 输出：({name:"Bill Gates", job:"Engineer", born:1985})

toString()

把数组转换为字符串，并返回结果

1
2
3
var arr = ['xiao','ming','qiqi','aiming'];
arr.toString();
console.log(arr);  // ["xiao", "ming", "qiqi", "aiming"]

toLocaleString()

把数组转换为本地数组，并返回结果

1
2
3
var arr = ['xiao','ming','qiqi','aiming'];
arr.toLocaleString();
console.log(arr);  // ["xiao", "ming", "qiqi", "aiming"]

valueOf()

返回数组对象的原始值

1
2
3
var arr = ['xiao','ming','qiqi','aiming'];
arr.valueOf('lang');
console.log(arr); // ["xiao", "ming", "qiqi", "aiming"]

array1

array2

array3

Array部分方法实现

数组元素去重

方法一：

思路：

1. 定义一个 json 对象
2. 遍历数组，将 arr[i] 作为 json 的键
3. 若 不重复，则给对应 arr[i] 的键值为 1 作为后面判断的标识，并 push 到新数组 arr1 中，若重复，则删除

1
2
3
4
5
6
7
8
9
var arr = [1, 2, 3, 2, 1, 5, 6, 3, 3, 2, 1, 7, 9, 8,6]
   var arr1 = []
   var json = {}
   for (var i = 0; i < arr.length; i++) {
   	 if (!json[arr[i]]) {
   		json[arr[i]] = 1
   		arr1.push(arr[i])
   	 }
   }

方法二：

思路：

  1. 定义一个新数组 arr1
  2. 如果这个新数组中没有这个元素，则 push
1
2
3
4
5
6
7
var arr = [1, 2, 3, 2, 1, 5, 6, 3, 3, 2, 1, 7, 9, 8,6]
   var arr1 = []
   for (var i = 0; i < arr.length; i++) {
   	 if (arr1.indexOf(arr[i]) < 0) {
   	 	arr1.push(arr[i])
   	 }
   }

方法三：filter

  1. filter的接收回调，可以有多个参数回调可以接收三个参数，第一个是数组中的元素，第二个是位置，第三个是数组本身
  2. 利用filter过滤器，总是返回元素第一个位置
  3. 去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了
1
2
3
4
5
var arr = [1, 2, 3, 2, 1, 5, 6, 3, 3, 2, 1, 7, 9, 8,6]
   	var arr1 = arr.filter(function(ele, index, self) {
   		return self.indexOf(ele) === index
   	})
   	console.log(arr1)

数组最值

方法一：Math.max.apply And Math.min.apply

1
2
3
4
5
6
7
方法一：Math.max.apply
   	var iMax = 0
   	var iMin = 0
   	var arr = [1, 268, 5, 4, 9, 0, 68]
   	iMax = Math.max.apply(null, arr)
   	iMin = Math.min.apply(null, arr)
   	console.log(iMax, iMin)

方法二：：Math.max.call And Math.min.call

1
2
3
4
5
6
var iMax = 0
 	var iMin = 0
 	var arr = [1, 268, 5, 4, 9, 0, 68]
 	iMax = Math.max.call(null, 1, 268, 5, 4, 9, 0, 68)
 	iMin = Math.min.call(null, 1, 268, 5, 4, 9, 0, 68)
 	console.log(iMax, iMin)

方法三：循环比较

1
2
3
4
5
6
7
8
9
10
11
12
var iMax = 0
var iMin = 0
var arr = [1, 268, 5, 4, 9, 0, 68]
for (var i = 0; i < arr.length; i++) {
	if (iMax < arr[i]) {
		iMax = arr[i]
	}
	if (iMin > arr[i]) {
		iMin = arr[i]
	}
}
console.log(iMax, iMin)

数组排序

sort

原理：在不带参数的情况下sort()方法默认会将数组元素当作string类型来升序排序,根据它们的unicode码从小到大依次排列，如果想按照自己的条件进行排序，需要传一个比较函数

1
2
3
4
5
6
7
8
9
10
11
var arr = [1, 268, 5, 4, 9, 0, 68]
  	// 从小到大
  	arr.sort(function (a, b) {
  		return a - b
  	})
  	console.log(arr)
  	// 从大到小
  	arr.sort(function (a, b) {
  		return b - a
  	})
  	console.log(arr)
冒泡排序

思路：每次比较相邻的两个数，如果后一个比前一个小，换位置。如果要实现由大到小排序，使用reverse()即可；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = [1, 268, 5, 4, 9, 0, 68, 67, 69, 96, 14, 78, 100, 25, 42, 23, 32, 68, 89, 98, 1]
   	var temp = 0
   	for (var i = 0; i < a.length; i++) {
   		for (var j = 0; j < a.length - i; j++) {
   			if (a[j] > a[j + 1]) {
	   			temp = a[j]
	   			a[j] = a[j + 1]
	   			a[j + 1] = temp
   			}
   		}
   		
   	}
   	var b = a.reverse()
   	console.log(a)
快速排序

思路：采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var arr = [1, 268, 5, 4, 9, 0, 68, 67, 69, 96, 14, 78, 100, 25, 42, 23, 32, 68, 89, 98, 1]
function quickSort(arr) {
    if(arr.length == 0) {
        return [];  // 返回空数组
    }
    var arrL = []
	var arrR = []
    var index = Math.floor(arr.length / 2)
	var arrM = arr.splice(index, 1) // 返回被删除的数
    for (var i = 0; i < arr.length; i++) {	
    	if (arrM > arr[i]) {
    		arrL.push(arr[i])
    	} else {
    		arrR.push(arr[i])
    	}
    }
    // console.log(arrL.concat(arrR))
    return quickSort(arrL).concat(arrM, quickSort(arrR))
}
console.log(quickSort(arr))

数组翻转(非reverse)

方法一：

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

1
2
3
4
5
6
7
8
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
    var num = arr.pop(); //删除数组最后一个元素并返回被删除的元素
    arr2.push(num);
}
console.log(arr2);
// [4, 3, 2, 1]

方法二：

删除数组第一个元素并返回被删除的元素

1
2
3
4
5
6
7
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length){
    var num = arr.shift(); //删除数组第一个元素并返回被删除的元素
    arr2.unshift(num);
}
console.log(arr2);
六六子大顺1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript数组操作方法小结和3个属性详细介绍
12-08
最近一直在用js，好好研究了下js数组的操作，在这里总结一下。 1、数组的创建 代码如下: var arrayObj = new Array();　//创建一个数组 var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, …[, elementN]]]]);　//创建一个数组并赋值 要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时
JavaScript中数组常见操作技巧
10-19
### JavaScript中数组常见操作技巧 ...通过以上内容，可以看出JavaScript中数组操作技巧包含数组的创建、遍历、读写、排序以及数组与字符串处理等多方面知识。掌握这些技巧对于进行高效的前端开发非常有帮助。
JavaScript语法——数组操作
swpucwf的博客
02-17 191
1. 数组的介绍 数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。 2. 数组的定义 // 实例化对象方式创建 var aList = new Array(1,2,3); // 字面量方式创建，推荐使用 var aList2 = [1,2,3,'asd']; 3. 多维数组 多维数组指的是数组的成员也是数组，把这样的数组叫做...
js数组操作大全
weixin_30484739的博客
12-29 394
shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined Javascript代码 vara=[1,2,3,4,5]; varb=a.shift();//a:[2,3,4,5]b:1 unshift:将参数添加到原数组开头，并返回数组的长度 Javascript代码 ...
Js数组操作
WindrunnerMax
04-18 1404
Js数组操作 JavaScript数组操作，主要包括Array对象原型方法以及常用操作如去重、扁平化、排序等。 Array.prototype forEach Array.prototype.forEach() arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) callback 为数组中每个元素执行的函数，该函数接...
JavaScript常用数组操作方法。
VFrank
10-21 486
JavaScript常用数组操作方法。 concat() concat() 方法用于连接两个或多个数组，返回被连接数组的一个副本。 不改变原数组。 let arr1 = [2, 3, 4], arr2 = [4, 5, 6]; let arr3 = arr1.concat(arr2); console.log(arr3); // [ 2, ...
JavaScript中的数组操作介绍
10-24
以下是JavaScript数组操作相关的一些关键知识点： 1. join()方法：join()方法将数组中的所有元素连接成一个字符串。如果不提供参数，默认使用逗号作为分隔符，也可以提供一个参数作为分隔符。示例如下： ```...
javascript操作数组详解
10-25
JavaScript数组操作方法众多，包括但不限于上述内容，还包括一些不太常用的高级操作，如`toLocaleString`、`toString`和`valueOf`等，它们可以转换数组为字符串，但通常`join`方法就足以满足大部分场景。 总之，...
JavaScript数组操作详解
10-20
splice方法是个非常强大的数组操作方法，它可以用来添加、删除或替换数组中的元素。它接受三个参数：要操作的位置、要删除的元素数量和新添加的元素。该方法会直接在原数组上进行修改。slice方法用于提取原数组的一...
javascript 数组操作详解
10-24
JavaScript数组操作非常灵活，拥有许多内置的方法来执行各种任务。 数组的创建有多种方式。最简单的方式是使用数组字面量，例如 `var arrayObj = [];`。另一个方法是使用 `Array` 构造函数来创建数组，可以指定数组...
JavaScript的数组操作
XQC_KKK的博客
05-16 874
JavaScript的数组操作1、JavaScript的`Array` 可以包含任意数据类型，并通过索引来访问每个元素。2、`Array` 可以通过索引把对应的元素修改为新的值，因此，对`Array` 的索引进行赋值会直接修改这个`Array`。3、JavaScript数组常用方法 1、JavaScript的Array 可以包含任意数据类型，并通过索引来访问每个元素。 要取得Array 的长度，直接访问length 属性： var arr = [1, 2, 3.14, 'Hello', null, true
JavaScript 数组操作
厚积薄发，持之以恒
04-28 217
JavaScript中的数组可通过concat,slice,splice进行合并，截取等操作。 数组合并 var number1 = [ 1,2,3,4]; var number2 = number1.concat(5,6,[7,8]);//number2为1,2,3,4,5,6,7,8 //number1不变 数组截取 slice()可以接受一至两个参数,即开始位置和结束...
javascript 数组操作
mannix_lei的博客
08-22 335
1 concat()        concat() 方法用于连接两个或多个数组。 let foo = ['a','d','v','b','d','g','d'] let bar = [1,2,3,4,5] console.info(bar.concat(foo)) // [ 1, 2, 3, 4, 5, 'a', 'd', 'v', 'b', 'd', 'g', 'd' ] 2  j...
Javascript操作数组
最新发布
Sqddian的博客
03-27 207
操作数组的几种方法
JavaScript数组操作 【排序、大小值、去重】
一尾流莺 半世情缘
01-09 353
一些基础的js数组用法； 一、数组元素随机排序： var arr2 = [1,2,3,4,5,6,7]; function Ran(a,b){ return Math.random() &gt;=0.5 ? 1 :-1 } arr2.sort(Ran); console.log(arr2); 二、求数组元素min和max值： var arr = [12,32,543,6456,86,3...
学习web前端第二天
qq_36734072的博客
07-16 146
关于javascript数组操作 to string（）可以将数组转化成字符串输出 join() 方法也可将所有数组元素结合为一个字符串。 pop() 方法从数组中删除最后一个元素： pop() 方法返回“被弹出”的值： push() 方法（在数组结尾处）向数组添加一个新的元素： shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。 unshift() 方法（在开头）向...
【JavaScript】数组操作
qq_62487469的博客
02-01 747
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组 arrayObject.splice(index,howmany,item1,…arrayObject.slice(start,end)返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。该方法会改变原来的数组----将原来的数组倒序，而不会创建新的数组。删除数组的第一个元素，并返回第一个元素的值,如果数组是空的，那么 shift() 方法将不进行任何操作。
JavaScript数组操作大全
xlxxcc的专栏
08-01 7511
一、js数组的常规操作1、数组的创建var arrayObj = new Array();　//创建一个数组var arrayObj = new Array([size]);　// 创建一个数组并指定长度，数组都是变长的， 尽管指定了数组的长度，仍然可以将元素存储在规定长度以外的var arrayObj = new Array([element0[, element1[, …[, elementN]
JavaScript中数组操作方法汇总
qq_38110274的博客
11-02 535
Js中的数组操作方法   我们在学习工作中，经常需要对数组和字符进行操作，但是操作方法多样，很容易忘记或者记混，这里，我对它们的操作方法的种类以及各自的应用做了相应的总结和代码演示，希望可以对你们有所帮助。 数组操作方法   一、对数组的简单操作主要分为三类，普通的增删改查，遍历、专用方法操作，下面，我会逐介绍并附上代码。   普通的增删改查需要通过索引index来完成。我们先声明一个数组如下所示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值