【JS基础回顾】Array对象及其常用属性以及方法

简介:

目的很简单,主要回顾下javascript里面Array常用的一些属性以及方法,虽然经常使用,但其实一些细节没有注意到,总是等到用到的时候再去查有点浪费时间,因此总结了下加深印象

一、Array的几种声明方式


var arr = [1, 2, 3];  
var arr = new Array(2);  //声明一个数组,长度为2,默认填充值为undefined的元素
var arr = new Array(1, 2, 3);
var arr = new Object([1, 2, 3]);

关于第二种声明方式,有些想吐槽。假如想要声明只有一个元素的数组,该元素为3,可能会情不自禁地写下这么条语句,然后就悲剧了



var arr = new Array(2);  //实际声明了一个有两个元素的数组

二、Array的常用属性、方法

arrayObj.length

作用:返回arrayObj的数组长度



[1, 2, 3].length;  //输出 3

arrayObj.push(newElement1, newElement2, ... newElementX)

作用:向数组末尾添加一个或多个元素,并返回修改后的数组长度

注意:会修改原数组;返回修改后的数组长度

var arr = [1, 2, 3];
arr.push(4, 5);  //输出 5,此时arr=>[1,2,3,4,5]

arrayObj.pop()

作用:删除并返回数组最后一个元素



var arr = [1, 2, 3];
arr.pop();  //输出 3,此时arr=>[1, 2]
[].pop();  //输出 undefined

 

arrayObj.shift()

作用:删除并返回数组第一个元素



var arr = [1, 2, 3];
arr.shift();  //输出 1,此时arr=>[2, 3]
[].shift();  //输出 undefined

arrayObj.unshift()

作用:向数组开头添加一个或多个元素,返回修改后的数组长度

注意:会修改原数组;返回的是修改后的数组长度;在IE6里,返回的是undefined

var arr = [4, 5];
arr.unshift(1, 2, 3);  //输出 5,此时arr=>[1, 2, 3, 4, 5]

 

arrayObj.join([seperator])

作用:将数组的各个元素转成字符串,再以seperator为分隔符,将数组连接成一个字符串后

注意:seperator可选,如没有指定seperator,默认用“,”来连接字符串

[1, 2, 3].join('-');  //输出 '1-2-3'
var arr = new Array();
arr[0] = {name: 'casper'};
arr[1] = 2;
arr.join(',');  //输出 '[object Object],2',需注意
[null, 2].join(',');  //输出 ',2'

 

arrayObj.reverse()

作用:将数组元素的排序全部颠倒过来

注意:会修改原有数组

var arr = [1, 2, 3];
arr.reverse();  //输出 [3, 2, 1],此时arr=>[3, 2 1]

arrayObj.concat(element1, element2, ..., elementX)

作用:连接两个或多个数组,返回连接后的数组;

注意:不修改原数组;如果不传任何参数,则返回原数组的一份拷贝;如果参数不是数组,则将参数添加到连接的数组后面;如果传入的参数是数组,则将参数数组的每个元素添加到连接的数组后面;

var arr = [1, 2, 3];
arr.concat();  //返回 [1, 2, ,3 ],此时arr=>[1, 2 ,3]
arr.concat(4, 5);  //返回 [1, 2, ,3 ,4, 5],此时arr=>[1, 2 ,3]
arr.concat(4, [5, 6]);  //返回 [1, 2, 3, 4, 5, 6]
arr.concat(4, [5, 6], 7);  //返回 [1, 2, 3, 4, 5, 6, 7]

 

arrayObj.slice(start, end)

作用:从已有的数组中返回指定元素组成的新数组,类似与String对象的slice方法,包括start指定位置的元素,但不包含end处包含的元素;

注意:start必选,end可选;当start或end为负值时,表示从数组最后一个元素开始,倒数第n个元素,比如数组最后一个元素为倒数第一个;当没有指定end时,则截取从start开始,一直到最后一个元素;

var arr = [1, 2, 3];
arr.slice(0 ,2); //输出 [1, 2],此时arr=>[1, 2, 3]
arr.slice(-2, -1);  //输出 [2]
arr.slice(1);  //输出 [2, 3]

 

arrayObj.splice(index, howmany, element1, element2..., elementX)

作用:从index处开始,从数组里删除howmany个元素后,将element1~elementX插入到数组中,插入开始的位置为index;返回值为删除的元素组成的数组;

注意:会修改原数组;howmany可选,如只传入index,则删除从index开始的所有元素;如howmany为0,则删除0个元素;如果传入的element为数组,不会像slice方法那样插入单个元素,而是将数组作为整个元素插入;

var arr = [1, 2, 3];
arr.splice(0, 1);  //输出 [1],此时arr=>[2, 3]

arr = [1, 2, 3];
arr.splice(1, 0, 'hello');  //输出 [],此时 arr=>[1, 'hello', 2, 3]

arr = [1, 2, 3];
arr.splice(1);  //输出 [2, 3],此时arr=>[1]

arr = [1, 2, 3];
arr.splice(1, 0, ['hello', 'world']);  //输出 [],此时arr=> [1, ['hello', 'world'], 2, 3]

 

arrayObj.toString()

作用:将数组转化成字符串,与不穿参调用join方法相似

[1, 2, 3].toString();  //输出 '1, 2, 3'
[1, 2, [3, 4]].toString();  //输出 '1, 2, 3, 4'

 

arrayObj.sort([sortFunc])

作用:对数组元素进行排序;

注意:的确需要注意,由于不同浏览器排序算法的不同,传入同一个排序函数,得出的结果竟然会是不一样的,还没仔细研究过差别,暂不举例,避免误导读者,可先参考:http://www.w3school.com.cn/js/jsref_sort.asp,里面没提到这点

 

三、写在后面

一些比较不常用的方法,比如arrayObj.toLocalString,这里没有进行说明,如欲了解,可点击下面的链接查看

主要参考来源:http://www.w3school.com.cn/js/jsref_obj_array.asp

文中示例如有错漏,请指出;如觉得文章对您有用,可点击“推荐” :)

相关文章
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
762 1
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
415 23
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
325 1
JavaScript中对象的数据拷贝
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

  • 1
    PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
    338
  • 2
    Java 中数组Array和列表List的转换
    1065
  • 3
    JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
    777
  • 4
    通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
    1610
  • 5
    通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
    723
  • 6
    通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
    519
  • 7
    多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解
    362
  • 8
    别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
    356
  • 9
    Array.forEach实战详解:简化循环与增强代码可读性;Array.forEach怎么用;面对大量数据时怎么提高Array.forEach的性能
    243
  • 10
    深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
    850