关于JavaScript数组的属性及方法
数组的属性:
1.length
Length属性可设置或返回数组中元素的数目。
var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"
document.write("Original length: " + arr.length)
document.write("<br />")
arr.length=5
document.write("New length: " + arr.length)
2.prototype
prototype 属性使您有能力向对象添加属性和方法。
object.prototype.name=value
数组的方法:
1.concat
concat方法通过合并(连接)现有数组来创建一个新数组:
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); // 连接 myGirls 和 myBoys
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数
2.slice
slice() 方法用数组的某个片段切出新数组。slice() 方法创建新数组。它不会从源数组中删除任何元素;
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
slice() 可接受两个参数,比如 (1, 3);该方法会从开始参数选取元素,直到结束参数(不包括)为止。
3.join
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
slice() 可接受两个参数,比如 (1, 3);该方法会从开始参数选取元素,直到结束参数(不包括)为止。
4.join
join() 方法也可将所有数组元素结合为一个字符串。
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
5.split
split() 方法用于把一个字符串分割成字符串数组。
-
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
-
但是,如果 separator 是包含子表达式的正则表达式,那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本)。
-
String.split() 执行的操作与 Array.join 执行的操作是相反的。
6.splice
splice() 方法可用于向数组添加新项
第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
清空数组的方法
1.length
用length方法可以很轻松地清空数组,代码示例:
var arr = [1,2,3];
console.log(arr);
arr.length = 0;
console.log(arr);
2.splice
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
var arr = [1,2,3];
console.log(arr);
arr.splice(0);
console.log(arr);
3.[]
利用声明一个空数组来完成,代码如下:
var arr = [1 ,2 ,3];
console.log(arr);
arr = []; console.log(arr);
伪数组
具有length属性,其他属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解),不具有数组的方法。
var fakeArray = {
"0":"aaa",
"1":23,
length:2
};
for (var i=0;i<fakeArray.length;i++){
console.log(fakeArray[i])
}
常见的伪数组(类数组对象)
{"0":"a,"1":b}
-
函数内部的arguments
-
DOM对象列表(document.getElementsByTags)
-
jQuery对象($(“div”))
转为数组的方法:
-
定义伪数组
let arr = [].slice.call(pagis)
pagis.slice()
console.log(arr) 这时arr就是真数组了。
- Array.prototype
let arr = Array.prototype.slice.call(pagis);
利用了slice传一个数组/集合,就会直接返回这个集合的原理。拿到的也是数组。也就可以使用数组的各种方法了。
- for循环
1 var arr1 = [],
2 len1 = pagis.length;
3 for (var i = 0; i < len1; i++) {
4 arr1.push(pagis[i]);
5 }
就是简单的for循环,把类数组的每一项都push到真正的数字arr1中
与之类似的另一种写法:
(转换函数中的arguments伪数组为真数组,是在学习es6时,将扩展运算符的收集功能在经过babel转换后得到的es5代码)
1 for (var _len = arguments.length, arr = new Array(_len), _key = 0; _key < _len; _key++) {
2 arr[_key] = arguments[_key];
3 }
- bind
1 var func = Function.prototype.call.bind(Array.prototype.slice);
1 var func = Function.prototype.bind(Array.prototype.slice).call;
var func = Function.prototype.call()
func(类数组对象) ===》 Function.prototype.call(类数组对象) ===》 类数组对象.slice()
2 console.log('类数组转换成数组:', func(pagis));
- …解构赋值
1 function args(){
2 console.log(arguments);
3 let newArr = [...arguments];
4 console.log(newArr);
5 }
6 args(1,2,3,23,2,42,34);
void add(){
arguments
}
add(a:1,b:2,c:3,d:4,c:5)
5.最后结语:
看到了这里想必小伙伴们对于数组有了一个初步的认识了,数组的属性及方法其实很多,这里我总结一些常用的,希望对您有所帮助! 那么我们下期见咯!