达达前端 · 2019年12月22日

【達達前端】JavaScript Array 對象

file
作者 | Jeskson

来源 | 达达前端小酒馆

JavaScript array 對象

array對象,是用於在單個變量中存儲多個值的一種變量類型。

創建array對象的語法:

new array();

new array(size);

new array(element0, element1, ..., elementn);

參數size表示數組元素的個數,返回的是數組類型,length字段是size的值,參數 element0, element1, ..., elementn ,表示參數列表,新創建數組的元素就會被初始化為這些元素值。

array對象屬性:

constructor屬性

描述:返回對創建此對象的數組函數的引用

length屬性

描述:設置或返回數組中元素的數目

prototype屬性

描述:可以讓您向對象添加屬性和方法

array對象方法:

concat()方法

鏈接兩個或更多的數組,並返回結果

join()方法

把數組中的所有元素放入一個字符串

pop()方法

刪除並返回數組的最後一個元素

push()方法

向數組的末尾添加一個或更多元素,並返回新的長度

reverse()方法

顛倒數組中的元素順序

shift()方法

刪除並返回數組的第一個元素

valueOf()方法

返回數組對象的原始值

unshift()方法

向數組的開頭添加一個或多個元素,並返回新數組的長度

toLocaleString()方法

把數組轉換為本地數組,並返回結果

toString()方法

把數組轉換為字符串,並返回結果

toSource()方法

返回該對象的源代碼

splice()方法

刪除元素,並向數組添加新元素

sort()方法

對數組的元素進行排序

slice()方法

從某個已有的數組返回選定的元素

JavaScript constructor属性

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

格式:

object.constructor
<script type="text/javascript">
 var dada = new Array();
 if(dada.constructor == Array){
  document.write("array");
 }
 
 if(dada.constructor == Boolean){
  document.write("boolean");
 }
 
 if(dada.constructor == Date){
  document.write("date");
 }
</script>

结果:

array

使用constructor属性:

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

var dashu = new dada("dashucoding", 12);

document.write(dashu.constructor);

结果:

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

JavaScript prototype属性

可以让你向 对象 添加 属性和方法

格式:

object.prototype.name = value

使用prototype属性向对象添加属性:

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

var dashu = new dada("dashucoding", 12);

dada.prototype.job = null;

dashu.job = it;

document.write(dashu.job);

结果:

it

JavaScript中的concat()方法

格式:

arrayObject.concat(arrs1,arrs2,...,arrsn)
var a = [1,2,3];
document.write(a.concat(4,5));

结果:

1,2,3,4,5
var arr1 = new Array(2)
arr1[0] = "a"
arr1[1] = "b"

var arr2 = new Array(2)
var2[0] = 'c'
var2[1] = 'd'

document.write( arr1.concat(arr2))

结果:

a,b,c,d
var arr1 = new Array(2)
arr1[0] = "a"
arr1[1] = "b"

var arr2 = new Array(2)
var2[0] = 'c'
var2[1] = 'd'

var arr3 = new Array(2)
var3[0] = 'e'
var3[1] = 'f'

document.write( arr1.concat(arr2,arr3))

结果:

a,b,c,d,e,f

JavaScript 中的join()方法

join()方法用于把数组中的所有元素放入一个字符串中。

var arr = [a,b,c];
console.log(arr.join());

结果:
a,b,c
var arr = [a,b,c];
console.log(arr.join("-");

结果:
a-b-c

JavaScript pop()方法

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

格式:

arrayObject.pop()
var arr = [1,2,3];
console.log(arr.pop());

// 3

JavaScript push()方法

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

var arr = [1,2,3,4]
console.log(arr.push("5"));
// 5 长度

reverse()颠倒其元素:

var arr = [1,2,3];
arr.reverse();

// 3,2,1

shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

var arr = [2,3,4];
arrr.shift();

// 2

valueOf方法返回array对象的原始值

arrayObject.valueOf()

unshift() 方法向数组的开头添加一个或多个元素,并返回新的长度。

sort() 方法用于对数组的元素进行排序。

function sortNumber(a,b){
 return a-b;
}

var arr = [1,2,4,9,7,3];
console.log(arr.sort(sortNumber));
arrayObject.toLocaleString()

首先调用每个数组元素的 toLocaleString() 方法
使用地区特定的分隔符把生成的字符串连接起来,形成一个字符串。

toString()把数组转换为字符串

toSource()方法:

对象的源代码

object.toSource()
function dada(name, age){
this.name = name;
this.age = age;
}
var dashu = new dada("dashucoding", 1);
console.log(dashu.toSource());

// ({name:"dashucoding", age: 1})

slice()方法:可以从已有的数组中返回选定的元素

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

var arr2 = [a,b,c,d]
console.log(arr2.slice(2,3))

// c

splice()向数组中添加,删除项目,然后返回被删除的项目

index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX 可选。向数组添加的新项目。

var arr = [1,2,3,4,5];
arr.splice (2,0, 'a');

// [1,2,a,3,4,5]

var arr = [1,2,3,4,5];
arr.splice (2,1, 'a');

// [1,2,a,4,5]

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info:

【作者】:Jeskson
【原创公众号】:达达前端小酒馆。
【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)!
【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客

前端技术栈

推荐阅读
关注数
2
文章数
124
前端资源下载群:通告:前端开发交流群:711613774 文章 每天更新(点个赞,证明你还爱我哦,亲)友链大礼包:[链接]
目录
极术微信服务号
关注极术微信号
实时接收点赞提醒和评论通知
安谋科技学堂公众号
关注安谋科技学堂
实时获取安谋科技及 Arm 教学资源
安谋科技招聘公众号
关注安谋科技招聘
实时获取安谋科技中国职位信息