学习笔记：JavaScript 内置对象Array

前言：
近几日学习了内置对象Array，故写篇文章记录学习知识点。
JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

前提：创造数组的两种方法

1、字面量方式

var 数组名 = [ ] ;//创建空数组
var 数组名 = [ ‘小白’,’小黑’,’小蓝’] ;

2、new Array( )

var 数组名 = new Array( ) ;//创建空数组

注意：用第二种方法创建数组的时候，如果括号内写的是2，console.log( )输出的会是一个数组，但是里面是两个空的数组元素；如果写的是2，3，4等多个数，输出结果为数组。

var arr = new Array(2);//数组长度为2
var arr1 = new Array(2, 3);
var arr2 = new Array(2, 3, 4);
console.log(arr);
console.log(arr1);
console.log(arr2);

结果：

检测是否为数组的两种方式

1、instanceof Array

var arr = [];
var obj = {};
console.log(arr instanceof Array); //true
console.log((obj instanceof Array)); //false

tips：obj为对象

2、Array.is Array(参数)

var arr = [];
var obj = {};
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false

通过查询MDN，还有以下基础判断：

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });

两者的区别

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

添加、删除数组元素的方法

1、push( ) 在数组的末尾添加一个或多个数组元素

2、unshift( ) 在数组的开头添加一个或多个数组元素

3、pop( ) 删除数组的最后一个数组元素

4、shift( ) 删除数组的第一个数组元素

添加、删除元素小例子

        var arr = [1, 2, 3];
        // 1、push() 在原数组末尾添加数组元素
        // arr.push(4, 5, 6, 'nihao');
        console.log(arr.push(4, 5, 6, 'nihao')); //输出新数组长度 7
        console.log(arr); //(7) [1, 2, 3, 4, 5, 6, "nihao"]

        //2、unshift 在原数组开头添加数组元素
        arr.unshift('green');
        console.log(arr); //(8) ["green", 1, 2, 3, 4, 5, 6, "nihao"]

        //3、pop( )   删除数组的最后一个数组元素，一次只能删除一个元素
        /* arr.pop();
        console.log(arr);//(7) ["green", 1, 2, 3, 4, 5, 6] */
        console.log(arr.pop()); // 返回值是你删除的元素 nihao

        //4、shift() 删除数组的第一个数组元素
        /* arr.shift();
        console.log(arr);//(6) [1, 2, 3, 4, 5, 6] */
        console.log(arr.shift()); //返回值是删除的元素 green

数组对象

数组排序 reverse( )、sort( )

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

sort() 方法用原地算法对数组的元素进行排序，并返回数组。

翻转数组的两种方法 常规和reverse( )

        //翻转数组
        var arr = ['red', 'green', 'purple', 'pink'];
        /* var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            //把数组索引号第三个取过来
            newArr[newArr.length] = arr[i];

        }
        console.log(newArr); */
        arr.reverse();
        console.log(arr);

数组排序（冒泡排序）的两种方法 常规和sort( )

        //数组排序（冒泡排序）
        var arr = [5, 3, 2, 4, 1];
        /* for (var i = 0; i <= arr.length - 1; i++) { //外层循环
            for (var j = 0; j <= arr.length - i - 1; j++) { //内层循环交换次数
                //内部交换两个变量的值
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr); */
        arr.sort();
        console.log(arr);

注意：sort( )方法有bug，以上写法只能针对单位数。

sort( )方法 bug解决办法

        var arr1 = [13, 4, 77, 1, 7];
        arr1.sort(function(a, b) {
            // return b - a; //按照降序的顺序排列
            return a - b; //按照升序的顺序排列  

        });
        console.log(arr1); //(5) [1, 4, 7, 13, 77]
        

sort( )方法除了可以给数字排序之外还可以给对象根据属性来进行排序。
我们可以参照MDN中的栗子：

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});

// sort by name
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

// names must be equal
  return 0;
});

数组索引方法

indexOf( )

从前面开始查找

        var arr = ['pink', 'yellow', 'black', 'white'];
        console.log(arr.indexOf('yellow'));// 1

注意：当数组中出现重复数组元素，只返回第一个满足条件的索引号；如果查找的数组元素没有则返回 -1 。

lastindexOf( )

从后面开始查找

注意：当数组元素中出现重复的数组元素的时候，返回最后一个满足条件的索引号；查找不到的依旧返回 -1。

小例子 数组去重

有一个数组 [’ c’,’ a’ , ’ z’, ‘a’ ,‘x’,‘a’,‘x’,'c,‘b’] ，去掉重复的元素。

核心算法：遍历旧数组，拿着旧数组的元素去查询新数组，如果该元素在新数组里没出现就添加进去出现了就不添加。
其次，我们可以利用 新数组.indexOf(数组元素) 知道有没有数组重复

        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }

            }
            return newArr;
        }
        var a = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
        console.log(a);

数组转换为字符串 —— toString( ) 和 join(’ 分隔符 ')

        // 1、toString()
        var arr = [1, 2, 3];
        console.log(arr.toString()); //1,2,3
        // 2、join('分隔符')  
        var arr1 = ['blue', 'black', 'white'];
        console.log(arr1.join('/')); //blue/black/white
        console.log(arr1.join('&'));//blue&black&white

其他方法

concat ( ) 连接多个数组

不会更改现有数组，返回一个新数组

        // 1、concat 连接两个或多个多个数组
        var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6];
        console.log(arr1.concat(arr2)); //(6) [1, 2, 3, 4, 5, 6]
        console.log(arr2.concat(arr1)); //(6) [4, 5, 6, 1, 2, 3]
        var arr3 = [7, 8, 9];
        var newArr = arr1.concat(arr2, arr3);
        console.log(newArr); //(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
        //合并嵌套
        var arr4 = arr1.concat(10, arr2);
        console.log(arr4); //(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

slice ( begin,end ) 截取指定数组

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

        // 2、slice() 截取指定数组
        var color = ['red', 'blue', 'yellow', 'black', 'white'];
        console.log(color.slice(2)); //未指定结束位置从指定位置截取到原数组末尾  (3) ["yellow", "black", "white"]
        console.log(color.slice(-2)); //开始位置可以为复数 截取原数组到数组第二个至末尾  (2) ["black", "white"]
        console.log(color.slice(7)); //取值大于原数组长度 返回空数组 []
        console.log(color.slice(2, 4)); //不包括最后一个数组元素  (2) ["yellow", "black"]
        console.log(color.slice(2, 7)); //超出原数组长度，截取之元素组末尾止  (3) ["yellow", "black", "white"]
        console.log(color.slice(-3, -1)); //截取倒数第三个到倒数第二个，不包含最后一个 (2) ["yellow", "black"]
        console.log(color.slice(-3, 0)); //返回空数组
        console.log(color.slice(-7, -1)); //超出原数组长度 从第一个一直到倒数第二个 (4) ["red", "blue", "yellow", "black"]

splice( ) 删除、替换、添加指定数组

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

结构：
splice( 开始，删除个数，元素1，元素2… )

注意：
> 1、指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
2、如果移除的数组元素的个数被省略了，或者如果它大于或者等于指定修改的开始位置之后的所有元素的数量，那么之后的数组的所有元素都会被删除。如果 移除的数组元素的个数是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
3、如果不指定添加进数组的元素，则 splice() 将只删除数组元素。

        // 3、splice() 删除、替换、添加指定数组
        color.splice(2, 0, 'pink'); //索引数为2，删除0 相当于添加
        console.log(color); // (6) ["red", "blue", "pink", "yellow", "black", "white"]
        color.splice(2, 1, 'green'); //索引号为2开始删除1个 并替换为green 
        console.log(color); // (6) ["red", "blue", "green", "yellow", "black", "white"]