专栏首页web秀你对JavaScript的Array对象了解有多少?

你对JavaScript的Array对象了解有多少?

前言

工作中,数组应用非常广泛,菜单、列表、banner图等等都会应用到数组,所以必须对数组的属性和方法非常熟练才OK,下面一起来了解一下。

定义Array

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。 参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回新创建并被初始化了的数组。 如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。 当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。 当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。 当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。

Array的属性

属性

描述

constructor

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

length

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

prototype

使您有能力向对象添加属性和方法。

constructor

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

var test=new Array();
if (test.constructor==Array){
  console.log("This is an Array");
}
if (test.constructor==Boolean){
  console.log("This is a Boolean");
}
if (test.constructor==Date){
  console.log("This is a Date");
}
if (test.constructor==String){
  console.log("This is a String");
}
// print
// This is an Array

length

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

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

console.log("arr length: " + arr.length);

arr.length = 5;
console.log("New arr length: " + arr.length);
// print
// arr length: 3
// New arr length: 5

prototype

使您有能力向对象添加属性和方法。

function employee(name, job, age){
  this.name= name;
  this.job = job;
  this.age = age;
}

var bill = new employee('Javan', 'web前端工程师', 25);

employee.prototype.salary = null;
bill.salary = 20000;

console.log(bill.salary);
// print
// 20000

Array方法

方法

描述

concat()

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

join()

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

pop()

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

push()

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

reverse()

颠倒数组中元素的顺序。

shift()

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

slice()

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

sort()

对数组的元素进行排序

splice()

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

toSource()

返回该对象的源代码。

toString()

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

toLocaleString()

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

unshift()

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

valueOf()

返回数组对象的原始值

concat()

arrayObject.concat(arrayX,arrayX,......,arrayX) 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

// 示例一
var a = [1, 2, 3];
console.log(a.concat(4, 5));
// print
// 1,2,3,4,5
// 这里是字符串

// 示例二
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "Web";
arr[2] = "25";

var arr2 = new Array(3);
arr2[0] = "James";
arr2[1] = "Java";
arr2[2] = "35";

console.log(arr.concat(arr2));
// print
// Javan,Web,25,James,Java,35

join()

var a = [1,2,3,4];
console.log(a.join('-'));
// print
// 1-2-3-4

pop()

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

console.log(arr);
console.log(arr.pop());
console.log(arr);
// print
// [Javan, John, James]
// James
// [Javan, John]

push()

arrayObject.push(newelement1,newelement2,....,newelementX) 第一个参数必填, 把指定的值添加到数组后的新长度。

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

console.log(arr);
console.log(arr.push("Jesse"));
console.log(arr);
// print
// [Javan, John, James]
// 4
// [Javan, John, James, Jesse]

reverse()

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

console.log(arr);
console.log(arr.reverse());
// print
// [Javan, John, James]
// [James, John, Javan]

shift()

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

console.log(arr);
console.log(arr.shift());
console.log(arr);
// print
// [Javan, John, James]
// [John, James]

slice()

该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

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

console.log(arr);
console.log(arr.slice(1));
console.log(arr);
// print
// [Javan, John, James]
// [John, James]
// [Javan, John, James]

splice()

arrayObject.splice(index,howmany,item1,.....,itemX) index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。

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

console.log(arr);
arr.splice(2, 0, "Owen");
console.log(arr);
// print
// [Javan, John, James]
// [Javan, John, Owen, James]

toSource()

toSource() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

toString()

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

console.log(arr.toString());
// print
// Javan, John, James

toLocaleString()

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

console.log(arr.toLocaleString());
// print
// Javan, John, James

toString和toLocaleString的区别

请看下面的例子

var a = 1234;
console.log(a.toString());

console.log(a.toLocaleString());
// print
// 1234
// 1,234

unshift()

arrayObject.unshift(newelement1,newelement2,....,newelementX) unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

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

console.log(arr);
console.log(arr.unshift("Owen"));
console.log(arr);
// print
// [Javan, John, James]
// 4
// [Owen, Javan, John, James]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JDK源码分析-Vector

    上文「JDK源码分析-ArrayList」主要分析了 ArrayList 的实现原理。本文分析 List 接口的另一个实现类:Vector。

    o对酒当歌
  • 【连载】聊聊 APK(三) —— Android 资源编译的秘密

    上两期我们讲了 APK 里面 Dex 的东西,明白了 Dex 只是 classes 的某种打包形式,我们暂时不拘泥于细节,关于代码的部分就告一段落。我们知道除了...

    程序亦非猿
  • Java 世界里的垃圾回收规则你搞懂了吗?

    想进大厂,就关注「 程序亦非猿 」 时不时 8:38 推送优质文章,觉得有用,置顶加星标

    程序亦非猿
  • 浅谈代码覆盖率

    代码覆盖率作为一个指导性指标,可以一定程度上反应测试的完备程度,是软件质量度量的一种手段。100%覆盖的代码并不意味着100%无bug的应用,代码覆盖率作为质量...

    用户5521279
  • 爱情36技之记忆永存

    关注“一猿小讲”公众号的伙伴们都清楚,Java 那小子带着心爱的 Python 菇凉,去了一趟浪漫的土耳其,然后一起又去了东京和巴黎,接着 Python 菇凉自...

    一猿小讲
  • 深度 | Android 整体设计及背后意义

    架构的工程意义在于:定义并解决一类问题,为需求到实现的平稳过渡提供保障。传统意义的Android架构(图1)已被人熟知,但不同角色的视角不同,例如认为Runti...

    程序亦非猿
  • 不了解这12个语法糖,别说你会Java!

    本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学会如何使用 Java 语法糖的同时,...

    程序亦非猿
  • 【连载】聊聊 APK(二)——Dex 热修复与 Classpath

    想进大厂,就关注「 程序亦非猿 」 时不时 8:38 推送优质文章,觉得有用,置顶加星标

    程序亦非猿
  • 吐槽,Java 设计的槽点

    你是否曾经在面试的时候,经常被问到:数组有没有 length() 方法?字符串有没有 length() 方法? 集合有没有 length() 方法?

    一猿小讲
  • 【连载】聊聊 APK——直接运行 Dex文件的黑魔法

    想进大厂,就关注「 程序亦非猿 」 时不时 8:38 推送优质文章,觉得有用,置顶加星标

    程序亦非猿

扫码关注云+社区

领取腾讯云代金券