JavaScript面向对象中的Array类型个人分享

Array类型

检测数组

示例代码:

var arr = [1,2,3,4,5];
console.log(arr instanceof Array);//调用结果为 true
/*
    Object.prototype.toString.call()方法
      * 作用 - 用于判断当前对象的(数据)类型
      * 结果 - [object Array]
      * 特点 - 可以准确判断出当前变量的类型
 */
console.log(Object.prototype.toString.call(arr));// 调用结果为 [object Array]

console.log(typeof null);// object

// console.log(null instanceof Null)// 调用结果为 报错

console.log(null instanceof Object);// 调用结果为 false

console.log(Object.prototype.toString.call(null));// 调用结果为 [object Null]

// Object.prototype.isPrototypeOf()方法 - 判断指定类型是否出现在当前对象的原型链中
console.log(Array.prototype.isPrototypeOf(arr));// 调用结果为 true

console.log(Array.isArray(arr));// true

---

转换数组

• JavaScript提供了两种方法,用于数组的转换

  1. toString()方法 - 把数组转换为字符串,并返回结果
  2. valueOf()方法 - 返回数组对象的原始值

示例代码:

var arr = [1,2,3,4,5];
/*
    利用toString()方法将数组转换为字符串
      * 结果 - 多个数组元素被逗号( , ) 进行分隔组成的字符串
 */
console.log(arr.toString());// 调用结果为 1,2,3,4,5

console.log(arr.valueOf());// 调用结果为 [1,2,3,4,5]

var obj = {
    name : '皮卡丘'
};
console.log(obj.valueOf());// 调用结果为 { name: '皮卡丘' }

---

进出栈方法

• 所谓栈就是数据结构,(先进后出)这个结构就叫栈

示例代码:

var arr = [1,2,3,4,5];

/* 在指定的数组的最后面添加指定的元素 */
arr.push(6);
console.log(arr);
/* 删除指定数组的最后一个元素并返回被删除的数组 */
arr.pop();
console.log(arr);

/* 在指定的数组的最前面添加指定元素 */
arr.unshift(7);
console.log(arr);
/* 删除指定数组的最前面的一个元素并返回被删除的数组 */
arr.shift();
console.log(arr);

分析图:

---

排序方法

• 注意 - reverse()和sort()方法的返回值是经过排序之后的数组

• 注意: 使用if进行判断如果形参中的 a < b 排序方式是由大到小进行排列
  如果 a > b 排序方式是由小到大进行排列

  • 注意返回值是负数的情况下是无效的

示例代码:

/*
    reverse()方法 - 表示反转数组的元素顺序(就是把顺序给到过来)
 */
var arr = [3,1,2,3,4,5,21];
// console.log(arr.reverse());// 调用结果为 [ 5, 4, 3, 2, 1 ]

/*
    sort()方法 - 表示数组的元素进行排列(就是正常顺序排列)
 */
var result = arr.sort();
console.log(result);// 调用结果为 [ 1, 2, 3, 4, 5 ]
console.log(arr);// 调用结果为 [ 1, 2, 3, 4, 5 ]


/*
    使用if进行判断如果形参中的 a < b 排序方式是由大到小进行排列
    如果 a > b 排序方式是由小到大进行排列
    * 注意返回值是负数的情况下是无效的
 */

var result = arr.sort(function (a,b) {
    if (a < b){
        /* 返回值 */
        return 1;
    }
});
console.log(arr);// 调用结果为 [ 1, 2, 3, 3, 4, 5, 21 ]
console.log(result);// 调用结果为 [ 1, 2, 3, 3, 4, 5, 21 ]

控制台效果代码图:

---

连接方式

• concat()方法 - 表示连接两个或多个数组,并返回结果

  • 就是把concat()方法中括号里的元素和原有数组的元素添加到一起并返回结果

示例代码:

var arr = [1,2,3,4,5];
console.log(arr.concat(6));// 调用结果为 [ 1, 2, 3, 4, 5, 6 ]
console.log(arr.concat([9,10,'J','O','K']));// 调用结果为 [ 1, 2, 3, 4, 5, 9, 10, 'J', 'O', 'K' ]

控制台效果图:

---

操作方法

• 特点 - 可以删除指定元素的位置并且给指定的位置添加新的元素

示例代码:

var arr = [1,2,3,4,5];
/*
    splice(start, deleteCount)方法
    * 作用 - 用于删除当前数组中指定位置指定个数的元素
    * 参数
      * start - 表示删除的开始位置
      * deleteCount - 表示删除的个数
    * 返回值 - 将删除的元素组成的新数组进行返回
 */
// var result = arr.splice(0, 5);
// console.log(result);// 调用结果为 [ 1, 2, 3, 4, 5 ]
// console.log(arr);// 调用结果为 []

/*
    splice(start, deleteCount, item1, item2, ...)方法
    * 作用 - 向指定数组的指定位置添加元素
    * 参数
      * start - 表示删除的开始位置
      * deleteCount - 表示删除的个数
      * item1, item2, ... - 表示向数组添加的元素
    * 返回值 - 将删除的元素组成的新数组进行返回
 */
var result = arr.splice(0, 0, 6,7,8);
console.log(result);// 调用结果为 []
console.log(arr);// 调用结果为 [ 6, 7, 8, 1, 2, 3, 4, 5 ]

var result = arr.splice(0, 3, 6,7,8);
console.log(result);// 调用结果为 [ 1, 2, 3 ]
console.log(arr);// 调用结果为 [ 6, 7, 8, 4, 5 ]

/*
    slice()方法
    * 作用 - 截取指定数组中的元素
    * 参数
      * begin - 表示开始截取的位置(从 0 开始)
      * end - 表示结束截取的位置(截取最后一个位置的下一个位置)
    * 返回值 - 返回截取的元素组成的新数组
 */
var result = arr.slice(2,3);
console.log(result);// 调用结果为 [3]

---

检索方法

• indexOf()和lastindexOf()方法

  • 用于检索数组中是否包含指定的元素内容 - 并且返回元素所在的位置

    • indexOf() - 表示从左至又的顺序进行检索
    • lastIndexOf() - 表示从右至左的顺序进行检索

  • 注意 - 如果在同一个数组当中有重复的元素存在,则会匹配到第一个被查找到的元素信息的位置

    • 比如 - (indexOf就是从左到右开始找第一个相符的元素,lastIndexOf就是从右到左找第一个相符的元素)
  • 如果检索的元素并不在指定数组中时 - 那么返回的结果为 -1(这是固定的)

示例代码:

var arr = ['葫芦娃','哪吒','皮卡丘','哪吒','舒克','贝特'];

console.log(arr.indexOf('哪吒'));// 调用结果为 1
console.log(arr.lastIndexOf('舒克'));//调用结果为 4
console.log(arr.indexOf('哆啦A梦'));// 调用结果为 -1

---

forEach( )方法

• Array.prototype.forEach()方法
• 作用 - 用于遍历指定数组

• 参数

  • callback - 表示回调函数

    • currentValue - 表示遍历数组得到每个元素
    • index - 表示遍历数组得到每个元素对应的索引值
    • array - 表示遍历的数组

示例代码:

var arr = ['皮卡丘','葫芦娃','舒克','贝特','叮当猫'];

arr.forEach(function (currentValue,index,array) {
    console.log(array);
});

控制台示例图: