JS学习day08--数组对象

数组

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

1、数组创建

字面量

// 1、字面量创建(建议使用)
var arr = []; // 创建一个空数组
var arr = [1, 2, 3]; // 创建有三个值的数组
var arr = [3];
var arr = [1, 'ab', true, null, undefined, [], {}, function () { }, new Date()]; // 数组中可以放任何类型的数据
console.log(arr);

构造函数

// 2、构造函数创建
var arr = new Array();
var arr = new Array(1, 2, 3);
var arr = new Array(3); // 3作为数组的长度 [undefined, undefined, undefined]
var arr = new Array('3'); // ['3']
console.log(arr);

2、数组的读写

读：数组[下标]

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

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

// 数组循环(遍历)
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

写：数组[下标] = 值

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

// 写：数组[下标] = 值
arr[0] = '洋洋';
arr[5] = '小王'; // 给一个不存在的下标赋值，数组长度会增加，以适应你给的这个值
console.log(arr); // [ "洋洋", "关羽", "张飞", undefined, undefined, "小王" ]
console.log(arr.length); // 6

3、length属性

// 数组长度可读可写
var arr = ['刘备', '关羽', '张飞'];

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

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

arr.length = 5;
console.log(arr); // [ "刘备", "关羽", "张飞", undefined, undefined ]

4、四个小宝贝

push unshift pop shift

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);

5、最强大的splice

• 数组.splice(起始下标, 要删除的个数, 要添加的项);

可以实现对数组任意位置的添加、删除、替换。返回被删除的项组成的数组

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

// 删除
var n = arr.splice(1, 2);
console.log(arr);
console.log(n);

// 替换
var n = arr.splice(1, 1, '关平', '关兴', '洋洋');
console.log(arr);
console.log(n);

// 添加
var n = arr.splice(2, 0, '关平', '关兴', '洋洋');
console.log(arr);
console.log(n);

6、sort排序

数组.sort();

• 会修改原数组，返回修改后的数组
• 默认以字符串进行排序（即便你给的是数字，也是以字符串排序）
• 可以给sort传一个比较函数，进行自定义排序

var arr = [4, 6, 3, 12, 2];

arr.sort(); // 默认排序
console.log(arr); // [ 12, 2, 3, 4, 6 ]

// ----------------------
// 传入比较函数
arr.sort(function (a, b) {
    // return a - b; // 从小到大
    return b - a; // 从大到小
});
console.log(arr);

案例：

1、根据对象的key进行排序

2、根据中文进行排序

7、排序算法

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; j++) {
            if (arr[i] > arr[j]) {
                var temp = arr[j];
                arr[j] = arr[i];
                arr[i] = temp;
            }
        }
        // console.log(arr);
    }
    return arr;
}

2、冒泡排序

从第一项起，比较相邻的两个元素，如果前一个比后一个大，则交换位置。第一轮的时候最后一个元素应该是最大的一个。每一轮最后一个元素已经是最大的了，所以最后一个元素下一轮不用比较。

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

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

3、快速排序

• 取得数组的第一项，其它项依次同第一项进行比较，如果比它小，放到左边数组，如果比它大，放到右边数组，依次递归调用
• 递归调用要判断一个结束的条件，即数组长度小于等于1，则返回

var arr = [4, 6, 2, 6, 5, 8, 4, 7, 3];
console.log(fn(arr));

function fn(arr) {
    if (arr.length <= 1) {
        return arr;
    }

    var left = []; // 存小于它的值
    var right = []; // 存大于它的值
    var num = arr.shift(); // 删除数组的第一项，并取得这项

    for (var i = 0; i < arr.length; i++) {
        var v = arr[i];
        if (v > num) {
            right.push(v);
        } else {
            left.push(v);
        }
    }

    return fn(left).concat(num, fn(right));
}

8、数组的其它方法

1、concat 拼接

数组.concat(参数); 参数可以是数组，也可以是其它项，返回的结果为拼接后的数组

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

// var arr = arr1.concat(arr2);
console.log(arr1); // 不影响原数组
console.log(arr2);
console.log(arr); // [ 1, 2, 3, "a", "b", "c" ]

// 推荐
var arr = [].concat(arr1, arr2, true, '洋洋');
console.log(arr);

2、reverse 反转

数组.reverse();

var arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [ 3, 2, 1 ]

// -------------
// 字符串没有反转的方法，转成数组
var str = '你爱我'; // 我爱你
var v = str.split('').reverse().join('');
console.log(v);

3、slice 截取

数组.slice(起始下标, 结束下标);

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

console.log(arr.slice()); // 没有参数，返回全部 [ "a", "b", "c", "d", "e" ]
console.log(arr.slice(2)); // 有1个参数，从第一个参数处起，到最后 [ "c", "d", "e" ]
console.log(arr.slice(2, 4)); // 有两个参数，从第一个参数起，到第二个参数止，不包括第二个参数 [ "c", "d" ]
console.log(arr.slice(4, 2)); // 第一个参数比第二个参数大，返回空数组 []
console.log(arr.slice(2, -1)); // 负数同长度相加 [ "c", "d" ]

4、indexOf和lastIndexOf

• IE8及以下不支持
• 数组.indexOf(要查找的项, [起始位置]); 返回找到的下标，找不到返回-1
• 数组.lastIndexOf(要查找的项, [起始位置]); 从右向左查找

var arr = [32, 4, 32, 4, 2, 4, 3, 2];

console.log(arr.indexOf(4)); // 1
console.log(arr.indexOf(4, 2)); // 3
console.log(arr.indexOf(4, 4)); // 5
console.log(arr.indexOf('4')); // -1

console.log(arr.lastIndexOf(4)); // 5

案例：数组去重

5、Array.isArray 数组类型判断

Array.isArray(参数)

判断参数是否是数组，如果是，返回true，否则返回false，IE8及以下不支持

console.log(typeof []); // object
console.log(typeof null); // object
console.log(typeof {}); // object

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

9、数组的迭代方法

• 参数为一个函数，这个函数有三个参数，分别为：数组项 下标 数组本身
• IE8及以下不支持

1、forEach

// 数组.forEach(function (item, index, array) { });
// 作用：循环数组，没有返回值，仅仅替代for循环
var arr = ['刘备', '关羽', '张飞'];
arr.forEach(function (item, index, array) {
    console.log(item, index, array);
});

2、map

// 数组.map(function (item, index, array) { });
// 作用：循环数组，返回由函数调用的结果组成的新数组
var arr = [2, 3, 4];
var n = arr.map(function (item, index) {
    // console.log(item, index);
    return item * 2;
});
console.log(n); // [ 4, 6, 8 ]

3、filter

// 数组.filter(function (item, index, array) { });
// 作用：循环数组，如果函数调用的结果为true，则当前对应的项放到新数组中
var arr = [2, 3, 4, 10, 20];
var n = arr.filter(function (item, index, array) {
    return item > 3 && item < 15;
});
console.log(n);

4、every

// 数组.every(function (item, index, array) { });
// 作用：循环数组，如果每一项函数调用的结果为true，则返回true
var arr = [2, 3, 4, 10, 20];
var n = arr.every(function (item) {
    return item > 1;
});
console.log(n);

5、some

// 数组.some(function (item, index, array) { });
// 作用：循环数组，只要有一项的返回值为真，则结果为真
var arr = [2, 3, 4, 10, 20];
var n = arr.some(function (item, index) {
    return item > 20;
});
console.log(n);