数组总结es5

数组

初识数组

创建

// 数组的作用是：使用单独的变量名来存储一系列的值。数组是可以存储任意数据类型的数据

// 1、字面量创建(推荐)
var arr = []; // []
var arr = [3]; // [3]
var arr = [1, 2, 3]; // [1, 2, 3]
var arr = ['abc', 3, true, null, undefined, function () { }, {}, [1, 2]];
console.log(arr);


// 2、构造函数创建
var arr = new Array(); // []
var arr = new Array(3); // [undefined, undefined, undefined]
var arr = new Array('3'); // ["3"]

console.log(arr);

数组读写

var arr = ['刘备', '关羽', '张飞'];

// 读: 数组[下标]
console.log(arr.length);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]); // undefined   读一个不存在的下标，返回undefined


// 数组有长度，且可以通过下标获取某一个，所以可以for循环
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// -------------------------------------
// 写: 数组[下标] = 值;
arr[5] = '小王'; // ["刘备", "关羽", "张飞", empty × 2, "小王"]
console.log(arr);



// --------------------------
// 面试题
arr[100] = '小王';
console.log(arr.length); // 101

数组的长度读写

var arr = ['刘备', '关羽', '张飞'];

// 数组的长度可读可写
// 清空一个数组：长度为0

// 读
console.log(arr.length); // 3

// 修改长度
arr.length = 5;
console.log(arr); // ["刘备", "关羽", "张飞", empty × 2]

arr.length = 1;
console.log(arr); // ["刘备"]

// ----------------------------------------
// 字符串长度只读不写
var str = 'abc';
str.length = 1;
console.log(str); // 'abc'

数组API方法

栈方法 (都修改原数组)

// 栈方法：即数组的前后添加，前后删除
// 先进先出：排队
// 先进后出：羽毛球筒

// 共同点：都修改原数组
// 添加的方法：一次可以添加多个，同时返回数组的长度
// 删除的方法：一次只能删除一个，返回被删除的项


var arr = ['刘备', '关羽', '张飞'];

// 数组.push(参数);
// 向数组的尾部添加，一次可以添加多个，返回数组的长度
var n = arr.push('小王', '王小二');
console.log(arr);
console.log(n);


// -----------------------------------
// 数组.unshift(参数);
// 向数组的头部添加，一次可以添加多个，返回数组的长度
var n = arr.unshift('小五', '小二');
console.log(arr);
console.log(n);

// -------------------------------
// 数组.pop();
// 删除数组最后一项，返回被删除的项
var n = arr.pop();
console.log(arr);
console.log(n);

// 数组.shift();
// 删除数组第一项，返回被删除的项
var n = arr.shift();
console.log(arr);
console.log(n);

强大的splice （修改原数组）

• 数组.splice(起始位置, 要删除的个数, 要添加的项…);
• 作用：可以实现数组任意位置的添加、删除、替换
• 返回值：返回由删除的项组成的数组（修改原数组）

var arr = ['刘备', '关羽', '张飞'];

// 1、删除
var n = arr.splice(1, 1);
console.log(arr); // ["刘备", "张飞"]
console.log(n); // ["关羽"]

// 2、替换
var n = arr.splice(1, 1, '关平', '关兴');
console.log(arr); // ["刘备", "关平", "关兴", "张飞"]
console.log(n); // ["关羽"]

// 3、添加
var n = arr.splice(2, 0, '关平', '关兴');
console.log(arr); // ["刘备", "关羽", "关平", "关兴", "张飞"]
console.log(n); // []

sort排序+排序算法

var arr = [5, 8, 7, 4, 2, 11, 3, 9, 6];

// 数组中是单一的数字


// 1、sort排序
// 默认以字符串进行排序，即便是数字，也是以字符串排序
// 数组.sort();
// 会修改原数组，并返回排序以后的数组
var n = arr.sort();
console.log(arr);
console.log(n);
console.log(arr == n); // true


// 2、如果要想以数字进行排序，则sort需要接收一个比较函数
// 比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。
arr.sort(function (a, b) {
    // return a - b; // 正序
    // return b - a; // 倒序
    return 0.5 - Math.random(); // 无序
});
console.log(arr);

中文排序

var arr = [
    { name: '武丽昕', num: 78 },
    { name: '白文博', num: 38 },
    { name: '卢文博', num: 58 },
    { name: '邓钧键', num: 97 },
    { name: '刘继昂', num: 56 },
    { name: '栗军安', num: 78 },
    { name: '艾晓月', num: 98 },
    { name: '付秋萍', num: 79 }
];

// 按成绩排序
arr.sort(function (a, b) {
    return a.num - b.num;
});
console.log(arr);


// 按中文排序
arr.sort(function (a, b) {
    return a.name.localeCompare(b.name, 'zh');
})
console.log(arr);

排序算法

1、选择排序

var arr = [5, 32, 2, 7, 45];
console.log(fn(arr)); // []

// 选择排序
// 从第一项起，每一项都和后面所有项依次比较，如果被比较项比当前项小，则两项交换位置。
// 每一轮，都找到一个最小的数，放到前面。
function fn(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length - i; j++) {
            if (arr[i] > arr[j]) {
                var temp = arr[j];
                arr[j] = arr[i];
                arr[i] = temp;
            }
        }
        // console.log(arr.toString()); // 每一轮数组的状况
    }
    return arr;
}

2、冒泡排序

var arr = [5, 32, 2, 7, 45];
console.log(fn(arr)); // []

// 冒泡排序
// 从第一项起，比较相邻的两个元素，如果前一个比后一个大，则交换位置。
// 第一轮的时候最后一个元素应该是最大的一个。每一轮最后一个元素已经是最大的了，所以最后一个元素下一轮不用比较。
function fn(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = temp;
            }
        }
        console.log(arr.toString()); // 每一轮数组的状况
    }
    return arr;
}

reverse （翻转） (修改原数组)

• 数组.reverse();
• 作用：反转数组，返回反转以后的数组，并修改原数组

var arr = ['a', 'b', 'c'];
arr.reverse();
console.log(arr); // ["c", "b", "a"]

反转字符串

var str = '我爱你';


// 方式一
console.log(str.split('').reverse().join(''));


// 方式二
var s = '';
for (var i = str.length - 1; i >= 0; i--) {
    s += str[i]
}
console.log(s);

indexOf和lastIndexOf （查找索引） + 去重

• 数组.indexOf(要查找的项[, 查找的起始位置]);
• 数组.lastIndexOf(要查找的项[, 查找的起始位置]);
• 作用：返回要查找的项在这个数组中的下标，如果没有，返回-1
• IE8及以下不支持

var arr = [4, 34, 3, 6, 3, 2, 5, 3];

console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(3, 3)); // 4

console.log(arr.indexOf('3')); // -1
console.log(arr.lastIndexOf(3)); // 7

数组去重方式一

var arr = [2, 3, 2, 2, 2, 3, 4];
console.log(fn(arr)); // [2, 3, 4]

function fn(arr) {
    var newArr = []; // 存储去重以后的结果

    for (var i = 0; i < arr.length; i++) {
        var v = arr[i]; // 原数组中的每一个

        if (newArr.indexOf(v) === -1) {
            newArr.push(v);
        }
    }

    return newArr;
}

数组去重方式二

var arr = [2, 3, 2, 2, 2, 3, 4];
console.log(fn(arr)); // [2, 3, 4]


function fn(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}

去重纯算法

     var arr = [1, 34, 3, 4, 5, 7, 4,  2, 2, 2];
        var newArr = [];
        var flag = true;
        for (var i = 0; i < arr.length; i++) { // 第一层循环
            flag = true; // 默认添加到要返回的数组result中,因为j每次要改为newArr.length为，第二个循环不能执行。

            for (var j = 0; j < newArr.length; j++) { 
                // 第二层循环
                if (arr[i] == newArr[j]) {
                    flag = false;
                    // 如果第一层循环中的元素和结果数组中的某个元素相同，就不必再对比结果数组的剩余元素了
                    // 改变j的值，结束第二层循环
                    j = newArr.length;
                }
            }
            if (flag) {
                newArr.push(arr[i]);
            }
        }

concat （拼接） (不影响原数组)

• 数组.concat(参数, …)
• 将参数拼接到数组中，参数可以是数组，也可以是项
• 返回拼接后的结果，(不影响原数组)

var arr1 = [1, 2, 3];
var arr2 = ['a', 'b', 'c'];

var arr = arr1.concat(arr2, '小王', '五小二');
console.log(arr1); // [1, 2, 3]
console.log(arr2); // ['a', 'b', 'c']
console.log(arr); // [1, 2, 3, "a", "b", "c", "小王", "五小二"]

// ------------------------
// 推荐用法：
var arr = [].concat(arr1, arr2, '小王', 'abc');
console.log(arr); // [1, 2, 3, "a", "b", "c", "小王", "abc"]

slice (截取) (不影响原数组)

• 数组.slice(起始下标, 结束下标);
• 数组截取，(不影响原数组),返回新数组

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

// 数组.slice(起始下标, 结束下标);
console.log(arr.slice()); // ["a", "b", "c", "d", "e", "f", "g"]
console.log(arr.slice(2)); // ["c", "d", "e", "f", "g"]
console.log(arr.slice(2, 5)); // ["c", "d", "e"]
console.log(arr.slice(2, -2)); // ["c", "d", "e"]
console.log(arr.slice(5, 2)); // []

数组克隆

var arr1 = ['a', 'b', 'c'];

// var arr2 = arr1; // 不可以,同一地址，无意义。


浅克隆
// ------------------
// 1、循环
var arr2 = [];
for (var i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i]);
   //arr2[i] = arr1[i];
}
arr1.push('小王');
console.log(arr1);
console.log(arr2);

// ------------------
// 2、concat
var arr2 = [].concat(arr1);
arr1.push('小王');
console.log(arr1);
console.log(arr2);

// ------------------
// 3、slice
var arr2 = arr1.slice();
arr1.push('小王');
console.log(arr1);
console.log(arr2);

// ------------------
//4、rest参数，打散参数
var newArr = [...arr1];

深克隆

// 方式一
var newArr = JSON.parse(JSON.stringify(arr1));

// 方式二
$.extend([deep], target, object1 [, objectN]);
 deep：即是否深度克隆 如true则深克隆。
 
 // 方式二
 原生见对象克隆。

数组类型判断

• Array.isArray(参数)
• 作用：判断参数是否是数组，返回布尔值
• 不足：IE8及以下不支持

console.log(typeof []); // object

console.log(Array.isArray(null)); // false
console.log(Array.isArray({})); // false
console.log(Array.isArray([])); // true

数组的迭代方法

迭代：循环、遍历

IE8及以下不支持

• forEach没有返回返回值
• map、filter返回数组
• every、some返回布尔值

forEach

// 数组.forEach(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组（没有返回值），代替for循环

var arr = ['a', 'b', 'c'];
arr.forEach(function (item, index, array) {
    console.log(item, index, array);
});

map

// 数组.map(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，返回每次函数调用的结果组成的一个新数组
var arr = [4, 2, 6];
var a = arr.map(function (item, index, array) {
    return item * 2;
});
console.log(a); // [8, 4, 12]

filter

// 数组.filter(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，返回每次函数调用的结果为true的项组成的一个新数组
var arr = [4, 8, 2, 6];
var a = arr.filter(function (item) {
    return item > 5;
});
console.log(a);

every

// 数组.every(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，如果每次函数调用结果都为true，则返回true
var arr = [4, 8, 2, 6];
var a = arr.every(function (item, index, array) {
    return item > 5;
});
console.log(a);

some

// 数组.some(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，函数调用只要有一个为true，则结果为true
var arr = [4, 8, 2, 6];
var a = arr.some(function (item, index, array) {
    return item > 10;
});
console.log(a);

find和findIndex

// 数组.find(function (item, index, array){});    
// 循环数组，调用函数，如果这个函数返回true，则把对应的item返回，否则返回undefined
// 返回的是满足条件的这一项

var arr = [3, 4, 3, 2, 3, 2, 3, 3];
var a = arr.find(function (item, index, array) {
    // console.log(item, index, array);
    return item === '3';
});
console.log(a);

// ---------------------------
var arr = [
    { name: 'zs', password: 1234 },
    { name: 'ls', password: 4545 },
    { name: 'ww', password: 77 },
    { name: '小王', password: 3333 },
    { name: '小李', password: 8998 }
];
var o = arr.find(function (item, index, array) {
    return item.name == 'ww' && item.password == 77
})
console.log(o);



// 数组.findIndex(function (item, index, array){}); 
// 调用函数，如果这个函数返回true，则把对应的item的下标返回，否则返回-1
// 返回的是满足条件的下标
var o = arr.findIndex(function (item, index, array) {
    return item.name == '小王' && item.password == 3333;
});
console.log(o);