js中数组经常使用的方法和属性

本文对 js中数组经常使用的方法和属性 进行知识点总结

建立数组的三种方式

1，常规方法

var arr = new Array ();
  arr[0]="abc";
  arr[1]="def"

2，简洁方式

var arr = new Array("abc","def");

3，字面量方式

var arr = [];
arr=["abc","def"];

或者

var arr=["abc","def"]

数组对象的属性

属性

描述

constructor

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

length

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

prototype

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

数组对象经常使用的方法

concat（）

链接两个或更多的数组，并返回结果

例子1：

在本例中，把 concat() 中的参数链接到数组 a 中

var a = [1,2,3];
console.log(a.concat(4, 5));

运行结果

---

例子2：

在本例中，建立了两个数组，而后使用 concat() 把它们链接起来

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"

var arr2 = new Array(2)
arr2[0] = "ABC"
arr2[1] = "DEF"

console.log(arr.concat(arr2));

运行结果

---

例子3：

在本例中，建立了三个数组，而后使用 concat() 把它们链接起来

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"

var arr2 = new Array(2)
arr2[0] = "ghi"
arr2[1] = "jkl"

var arr3 = new Array(2)
arr3[0] = "mno"
arr3[1] = "pqr"


console.log(arr.concat(arr2, arr3));

运行结果

---

join（）

把数组的全部元素放入一个字符串，元素经过指定的分隔符进行分割（注：默认是以"逗号"分割）

例子1：

在本例中，咱们建立一个数组，而后把它的全部元素放入一个字符串

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"
console.log(arr.join());

运行结果

---

例子2：

在本例中，咱们使用分隔符来分隔数组中的元素

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"
console.log(arr.join("."));

运行结果

---

pop（）

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

例子1：

在本例中，建立一个数组，而后删除数组的最后一个元素（注意：这也会改变数组的长度）

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "hig"
console.log(arr);
console.log(arr.pop());
console.log(arr);

运行结果

---

push（）

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

例子1：

在本例中，建立一个数组，并经过添加一个元素来改变其长度

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"

console.log(arr)
console.log(arr.push("jlm"))
console.log(arr)

运行结果

---

reverse（）

颠倒数组中元素的顺序

例子1：

在本例中，建立一个数组，而后颠倒其元素的顺序

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr)
console.log(arr.reverse())

运行结果

---

shift（）

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

例子1：

在本例中，建立一个数组，并删除数组的第一个元素 （注意：这也将改变数组的长度）

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr)
console.log(arr.shift())
console.log(arr)

运行结果

---

slice（）

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

例子1：

在本例中，建立一个新数组，而后显示从其中选取的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
console.log(arr.slice(2,4))
console.log(arr)

运行结果

---

例子2：

在本例中，建立一个新数组，而后显示从其中选取的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
console.log(arr.slice(2,4))
console.log(arr)

运行结果

---

sort（）

对数组的元素进行排序

例子1：

在本例中，将建立一个数组，并按字母顺序进行排序

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "pqr"
arr[2] = "mno"
arr[3] = "jkl"
arr[4] = "ghi"
arr[5] = "def"
console.log(arr)
console.log(arr.sort())

运行结果

---

splice（）

删除元素，并向数组添加新元素

例子1：

在本例中，建立一个新数组，并向其添加一个元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
arr.splice(2,0, "zzz")
console.log(arr)

运行结果

---

例子2：

在本例中，删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
arr.splice(2,1,"zzz")
console.log(arr)

运行结果

---

例子3：

在本例中咱们将删除从 index 2 ("ghi") 开始的三个元素，并添加一个新元素 ("zzz") 来替代被删除的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
arr.splice(2,3,"zzz")
console.log(arr)

运行结果

---

toSourse（）

返回该对象的源代码

例子1：

toSource() 方法的用法

function employee(name,job,born)
{
    this.name=name;
    this.job=job;
    this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.toSource());

运行结果

---

toString（）

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

例子1：

toString() 方法的用法

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr.toString());

运行结果

---

toLocaleString（）

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

例子1：

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr.toLocaleString());

运行结果

---

unshift（）

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

例子1：

在本例中，建立一个数组，并把一个元素添加到数组的开头，并返回数组的新长度

var arr = new Array()
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr);
console.log(arr.unshift("zzz"));
console.log(arr);

运行结果

---

valueOf（）

返回数组对象的原始值

例子1：

var arr = new Array(1,2,3)
console.log(arr.valueOf());

运行结果

---

数组对象的几种遍历方法

1，普通的for循环

最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

例子1：

let arr1 = [1, 2, 3, 4, 5]
for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i])
}

运行结果

---

2，优化版的for循环

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显

例子1：

let arr = [1, 2, 3, 4, 5];
for (i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

运行结果

说明：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显

---

3，forEach()循环

数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

例子1：

var arr = [1,2,3,4,5]
arr.forEach(function (value) {
    console.log(value)
})

运行结果

---

4，for-in循环

在众多的循环遍历方式中,它的效率是最低的；for...in循环会遍历一个object全部的可枚举属性，for...in循环主要是为遍历对象而设计的，不适用于遍历数组

例子1：

var arr =[1,2,3,4,5]
for(var item in arr){
    console.log(arr[item])
}

运行结果

---

5，map循环

这种方式也是用的比较普遍的，虽然用起来比较优雅，但实际效率还比不上foreach

例子1：

var arr =[1,2,3,4,5]
arr.map(function (value) {
    console.log(value)
})

运行结果

---

es6数组新增方法

foreach（）

foreach遍历数组，无返回值，不改变原数组，仅仅只是遍历，经常使用于注册组件、指令等等

forEach()有三个参数

• 第一个参数是当前元素
• 第二个参数是当前元素的索引
• 第三个参数是当前元素所属的数组

let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
console.log(item);
});
复制代码

运行结果

---

map（）

map遍历数组，返回一个新数组，不改变原数组,主要做用是建立一个新的数组

let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
return item + 1;
});
console.log(temp);
console.log(array);

运行结果

---

filter（）

filter过滤掉数组中不知足条件的值,返回一个新数组,不改变原数组

let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
return item > 3;
});
console.log(temp);
console.log(array);

运行结果

---

reduce（）

reduce让数组的先后两项进行某种计算,而后返回其值，并继续计算,不改变原数组,返回计算的最终结果，从数组的第二项开始遍历

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
  return a + b;
});
console.log(total);
复制代码

运行结果

---

some（）

遍历数组每一项,有一项返回true,则中止遍历，结果返回true。不改变原数组

let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
  console.log(item);
  return item > 3;
});

运行结果

---

every（）

遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,中止遍历,结果返回为false。不改变原数组

let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
  return item > 2;
});
console.log(bo);

运行结果

最后

但愿看到文章的同窗都有收获！

文章要是有不对的地方还望指正！

最后祝你们都愈来愈优秀！

欢迎你们加入，一块儿学习前端，共同进步！