2020-08-13

关于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)

５．最后结语:

---

看到了这里想必小伙伴们对于数组有了一个初步的认识了,数组的属性及方法其实很多,这里我总结一些常用的,希望对您有所帮助! 那么我们下期见咯!