js中比较重要的几个对象 -- Array对象属性+方法详解实例

什么是Array(数组)对象

数组对象的作用是：使用单独的变量名来存储一系列的值。

举个栗子🙋‍♂️

这段代码就是创建一个叫mycars的新数组
并且挨个赋值,

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据（例如：车名字），存在单独变量如下所示：

var car1="Saab";
var car2="Volvo";
var car3="BMW";

然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！

最好的方法就是用数组。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：
1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

在日常中 第三种是最常用也是最好用的一种

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值：

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

数组方法和属性

使用数组对象预定义属性和方法：

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

---

---

---

数组属性

    // constructor   返回创建数组对象的原型函数
    // length        设置或返回数组元素的个数
    //prototype      允许你向数组对象添加属性或方法
    以下是属性的实例

 <p id="demo">点击按钮创建一个数组,并显示它的构造函数constructor</p>
    <p id="long"></p>
    <p id="proto"></p>
    <button onclick="myFunction()">点我显示构造函数</button>
    <script>
        // 以下是属性的实例
        
        function myFunction(){
            var fruits = ["pineapple","banana","pomelo","nectarine"];
            var x = document.getElementById("demo");
            var y = document.getElementById("long");
            x.innerHTML = fruits.constructor; 
            y.innerHTML = fruits.length;

        } 
        </script>

 //Array 中 prototype属性 的 实例函数  
        //在Array对象中,prototype属性可以向对象中添加属性和方法,
        //当构建一个属性,并调用这个属性方法时,所有的数组将被设置属性,这个属性是默认值
        //在构建一个方法时,所有的数组都可以使用该方法
        //[注意]:Array.prototype单独不能引用数组, Array()对象可以.  在js中 prototype是一个全局属性
        Array.prototype.myUcase = function(){
            for( i = 0; i < this.length; i++){
                this[i] = this[i].toUpperCase();
            }
        }
        //创建一个数组
        var cars = ["benchi","baoma","hongqi","hafo"];
        // 调用myUcase方法  使数组数值转为大写
        cars.myUcase();
        console.log(cars);

Array对象方法

方法	描述
concat()	连接两个或更多的数组 ,并返回结果

//栗子
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai); 
//输出结果 Cecilie,Lone,Emil,Tobias,Linus,Robin

copyWithin()	从数组的指定位置拷贝元素到数组的另一个位置中

//复制数组的前面两个元素到后面两个元素上：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

//输出结果Banana,Orange,Banana,Orange

entres()	返回数组的可迭代对象

//从数组 fruit 创建一个可迭代对象， 该对象包含了数组的键值对：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();

//entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
//迭代对象中数组的索引值作为 key， 数组元素作为 value。

//返回结果
//[0, "Banana"]
//[1, "Orange"]
//[2, "Apple"]
//[3, "Mango"]

erery()	检测数值元素的每个元素是否都符合条件

//检测数组 ages 的所有元素是否都大于等于 18 :

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}


//输出结果false

fill()	使用一个固定值来填充数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");

//输出 Runoob,Runoob,Runoob,Runoob

filter()	检测数值元素,并返回符合条件的所有元素的数组

//返回数组 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

//输出结果 32,33,40

find()	返回符合传入测试(函数)条件的数组元素

//获取数组中年龄大于 18 的第一个元素

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
//输出结果  18

findindex()	返回符合传入测试(函数)条件的数组元素索引

//获取数组中年龄大于等于 18 的第一个元素索引位置

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
输出结果 2

forEach()	数组每个元素都执行一次回调函数。

//列出数组的每个元素：

<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
 
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
 
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
</script>
//输出结果
//index[0]: 4
//index[1]: 9
//index[2]: 16
//index[3]: 25

from()	通过给定的对象中创建一个数组

//通过字符串创建一个数组：

var myArr = Array.from("RUNOOB");

//from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

//如果对象是数组返回 true，否则返回 false。

includes()	判断一个数组是否包含一个指定的值。

//检测数组 site 是否包含 runoob :

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false


//includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

indexOf()	搜索数组中的元素，并返回它所在的位置。

//查找数组中的 "Apple" 元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a 结果输出：2
//indexOf() 方法可返回数组中某个指定的元素位置。
//该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

//如果在数组中没找到指定元素则返回 -1。

//提示如果你想查找字符串最后出现的位置，请使用 lastIndexOf() 方法。

isArray()	判断对象是否为数组

//判断对象是否为数组：
    <script>
        var fruits = ["Banana", "Orange", "Apple", "Mango"];
   console.log( Array.isArray(fruits))
    </script>
//isArray() 方法用于判断一个对象是否为数组。
//如果对象是数组返回 true，否则返回 false。
//

join()	把数组的所有元素放入一个字符串。

//把数组中的所有元素转换为一个字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
//energy输出结果：
//Banana,Orange,Apple,Mango

//join() 方法用于把数组中的所有元素转换一个字符串。
//元素是通过指定的分隔符进行分隔的。

keys()	返回数组的可迭代对象，包含原始数组的键(key)。

//从数组 fruit 创建一个数组迭代对象， 该对象包含了数组的键：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.keys();

//keys() 方法用于从数组创建一个包含数组键的可迭代对象。
//如果对象是数组返回 true，否则返回 false。

lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。

//查找数组元素 "Apple"出现的位置：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
//a 输出结果：2
//以上实例输出结果意味着 "Apple" 位于数组中的第 2 个位置.

//lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
//如果要检索的元素没有出现，则该方法返回 -1。

//该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

//如果在数组中没找到指定元素则返回 -1。

//提示： 如果你想查找数组首次出现的位置，请使用 indexOf() 方法。

map()	通过指定函数处理数组的每个元素，并返回处理后的数组。

//返回一个数组，数组中元素为原始数组的平方根:

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}
//输出结果为:2,3,4,5

//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
//map() 方法按照原始数组元素顺序依次处理元素。
//注意： map() 不会对空数组进行检测。
//注意： map() 不会改变原始数组。

pop()	删除数组的最后一个元素并返回删除的元素。

//移除最后一个数组元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//fruits 结果输出：Banana,Orange,Apple
//pop() 方法用于删除数组的最后一个元素并返回删除的元素。
//注意：此方法改变数组的长度！
//提示： 移除数组第一个元素，请使用 shift() 方法。

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

//数组中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
//fruits 结果输出：Banana,Orange,Apple,Mango,Kiwi
//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

//注意： 新元素将添加在数组的末尾。
//注意： 此方法改变数组的长度。
//提示： 在数组起始位置添加元素请使用 unshift() 方法。

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

//从数组中移除元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
//fruits结果输出:Orange,Apple,Mango

//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
//注意： 此方法改变数组的长度！
//提示: 移除数组末尾的元素可以使用 pop() 方法。

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

//将新项添加到数组起始位置:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//fruits 将输出：Lemon,Pineapple,Banana,Orange,Apple,Mango
//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
//注意： 该方法将改变数组的数目。
//提示: 将新项添加到数组末尾，请使用 push() 方法。

reduce()	将数组元素计算为一个值（从左到右）。

//计算数组元素相加后的总和：

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//输出结果：125

//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
//reduce() 可以作为一个高阶函数，用于函数的 compose。
//注意: reduce() 对于空数组是不会执行回调函数的。

reduceRight()	将数组元素计算为一个值（从右到左）。

//计算数组元素相加后的总和：

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}
//输出结果：125
//reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
//注意: reduce() 对于空数组是不会执行回调函数的。

reverse()	反转数组的元素顺序。

//颠倒数组中元素的顺序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 结果输出：Mango,Apple,Orange,Banana

slice()	选取数组的一部分，并返回一个新数组。

//在数组中读取元素：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
//citrus 结果输出:Orange,Lemon
//slice() 方法可从已有的数组中返回选定的元素。
//slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
//注意： slice() 方法不会改变原始数组。

some()	检测数组元素中是否有元素符合指定条件。

//检测数组中是否有元素大于 18:

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
//输出结果为:true

//some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
//some() 方法会依次执行数组的每个元素：
//       如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
//       如果没有满足条件的元素，则返回false。
//注意： some() 不会对空数组进行检测。
//注意： some() 不会改变原始数组。

sort()	对数组的元素进行排序。

//数组排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//fruits 输出结果：Apple,Banana,Mango,Orange

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

//排序顺序可以是字母或数字，并按升序或降序。
//默认排序顺序为按字母升序。
//注意：当数字是按字母顺序排列时"40"将排在"5"前面。
//使用数字排序，你必须通过一个函数作为参数来调用。
//函数指定数字是按照升序还是降序排列。
//这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。
//注意： 这种方法会改变原始数组！。

splice()	从数组中添加或删除元素。

//数组中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
//fruits 输出结果Banana,Orange,Lemon,Kiwi,Apple,Mango

//splice() 方法用于添加或删除数组中的元素。

//注意：这种方法会改变原始数组。
//如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

toString()	把数组转换为字符串，并返回结果。

//将数组转换为字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
//fruits将输出：Banana,Orange,Apple,Mango


//toString() 方法可把数组转换为字符串，并返回结果。

//注意： 数组中的元素之间用逗号分隔。

valueOf()	返回数组对象的原始值。

//valueOf() 是数组对象的默认方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();
 fruits.valueOf()与 fruits返回值一样。

//v输出结果为：Banana,Orange,Apple,Mango

//valueOf() 方法返回 Array 对象的原始值。
//该原始值由 Array 对象派生的所有对象继承。
//valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
//注意： valueOf() 方法不会改变原数组。