Skip to main content

数组

如何创建一个数组？​

let arr = []; // 通过数组字面量创建
let arr = new Array(); // 通过系统构造函数Array创建
let arr = Array(); // 这种一般不使用，但是确实可以创建


let arr1 = [, , ,];
console.log(arr1); // [empty × 3] 
console.log(arr1.length); // 3  从第一个逗号前面开始数，最后一个逗号后面的默认不存在。


let arr2 = [, 2, , 5, 6, , , 7]; // 稀松数组
console.log(arr2); // [empty, 2, empty, 5, 6, empty × 2, 7]
console.log(arr2[0]); // undefined
  

let arr3 = [1, 2, 3, 4, 5];
console.log(arr3[5]) // 访问数组中没有没有的值返回undefined => 底层实现类似对象访问属性, 我们可以理解为数组在JavaScript中其实就是对象的另外一种形式。

let arr4 = new Array(, , ,); // 报错
let arr4 = new Array(1, , 2); // 报错
let arr4 = new Array(1, 2, 3); // [1, 2, 3]
let arr4 = new Array(2.1); // Uncaught RangeError: Invalid array length
let arr4 = new Array(2); // [empty × 2]
let arr4 = new Array('a') // ['a']

数组常用的一些方法​

JavaScript数组可以使用的方法都是 继承 自系统自带构造函数 Array.prototype 上的方法。

push / unshift​

// push 代表向数组的末端添加数据
let arr = [1, 2, 3];
console.log(arr.push(4)); // 4 => push方法返回的是`push执行过后`数组的长度
console.log(arr); // [1, 2, 3, 4]

// push 原理实现
Array.prototype.myPush = function () {
    for (let i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i];
    }
    return this.length;
}

// unshift 代表向数组的前端添加数据
let arr = [1, 2, 3];
console.log(arr.unshift(4)); // 4 => push方法返回的是`push执行过后`数组的长度
console.log(arr); // [4, 1, 2, 3]

// unshift 用(splice)实现
Array.prototype.myUnshift = function () {
    let pos = 0;
    for (let i = 0; i < arguments.length; i++) {
        this.splice(pos, 0, arguments[i]);
        pos++;
    }
    return this.length;
}

// unshift 用(concat)实现
Array.prototype.myUnshift = function () {
    let args = Array.prototype.slice.call(arguments);
    let newArr = args.concat(this);
    return newArr;
}

pop / shift​

// pop 代表向数组的末端删除数据
let arr = [1, 2, 3];
console.log(arr.pop(4)); // 3 => pop方法返回的是pop删除的值
console.log(arr); // [1, 2]

// shift 代表在数组的前端删除数据
let arr = [1, 2, 3];
console.log(arr.shift(4)); // 1 => shift方法返回的是shift删除的值
console.log(arr); // [2, 3]

reverse​

// reverse 代表在让数组反转
let arr = [1, 2, 3];
console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]

splice​

// splice 第1个参数代表从第几位开始 第2个参数代表从第一个参数的位置后面删除几个，第3个参数代表要添加的数据
let arr = ['a', 'b', 'd'];
console.log(arr.splice(2, 0, 'c')); // []
console.log(arr); // ['a', 'b', 'c', 'd']

let arr = ['a', 'b', 1, 3, 'd'];
console.log(arr.splice(2, 2, 'c', 'e')); // [1, 3]
console.log(arr); // ['a', 'b', 'c', 'e', 'd']

sort​

// sort方法只接调用是按照ASCII表来排序的。
// sort里面可以传递一个函数可以接受两个参数a和b，如果这个函数返回负值a排在前面，返回正值b排在前面，返回0则不变
let arr = [44, 5, 32, 76, 23, 29];

arr.sort() // [23, 29, 32, 44, 5, 76]

arr.sort(function (a, b) {
    if (a > b) {
        return 1
    } else {
        return -1
    }
}) // [5, 23, 29, 32, 44, 76]

arr.sort(function (a, b) { // 上面方法的简写（正序）
    return a - b
})

arr.sort(function (a, b) { //（倒序） [76, 44, 32, 29, 23, 5]
    return b - a;
})

arr.sort(function (a, b){ // 随机排序
    let rand = Math.random();
    if (rand > 0.5) {
        return 1
    } else {
        return -1
    }
})

let arr = [{name: '小明', age: 7}, {name: '小王', age: 17}, {name: '小方', age: 34}, {name: '小张', age: 2}];

arr.sort(function (a, b) {
    return a.age - b.age
}) // [{"name":"小张","age":2},{"name":"小明","age":7},{"name":"小王","age":17},{"name":"小方","age":34}]


// 如何按照字符串所占的字节数来排序
function getStrByte(str) {
    let temp = 0;
    for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 255) {
            temp += 2;
        } else {
            temp++;
        }
    }
    return temp;
}

let arr = ['ajsdhajksdh', '无敌', 'ash', '你', 'youSay什么'];

arr.sort(function (a, b) {
    return getStrByte(a) - getStrByte(b);
}) // ['你', 'ash', '无敌', 'youSay什么', 'ajsdhajksdh']

concat​

let arr1 = ['a', 'b', 'c'];
let arr2 = ['d', 'e', 'f'];
let arr3 = arr1.concat(arr2);
console.log(arr3); // ['a', 'b', 'c', 'd', 'e', 'f']

toString​

let arr1 = ['a', 'b', 'c'];
let arr2 = [1, 2, 3, 4, 5];
console.log(arr1.toString()); // a,b,c
console.log(arr2.toString()); // 1,2,3,4,5

slice​

let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr.slice()); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr.slice(1)); // ['b', 'c', 'd', 'e', 'f']
console.log(arr.slice(1, 3)); // ['b', 'c']
console.log(arr.slice(-3, 5)); // ['d', 'e']
console.log(arr.slice(-3, -2)); // ['d']
console.log(arr.slice(-3, -1)); // ['d', 'e']

join / split​

let arr = ['a', 'b', 'c', 'd'];
console.log(arr.join()); // a,b,c,d  等于 arr.toString();
console.log(arr.join('-')); // a-b-c-d 

let str = 'a-b-c-d';
console.log(str.split()); // ['a-b-c-d']
console.log(str.split('')); // ['a', '-', 'b', '-', 'c', '-', 'd']
console.log(str.split('-')); // ['a', 'b', 'c', 'd']
console.log(str.split('-', 2)); // ['a', 'b'] 第二个参数代表数组的长度

数组去重的一些方法​

let arr = [1, 1, 3, 4, 4, 4, 6, 6];

// 1.利用对象属性的不重复性。
function unique(arr) {
    let newArr = [],
        temp = {}
    for (let i = 0; i < arr.length; i++) {
        if (!temp.hasOwnProperty(arr[i])) {
            temp[arr[i]] = arr[i];
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

unique(arr) // [1, 3, 4, 6];

数组一些相关的问题​

// 字符串去重
function uniqueStr(str) {
    let newStr = '',
        temp = {}
    for (let i = 0; i < str.length; i++) {
        if (!temp.hasOwnProperty(str[i])) {
            temp[str[i]] = str[i];
            newStr += str[i];
        }
    }
    return newStr;
}
uniqueStr('aaaakkkkhhhhgggg') // 'akhg'

// 找出字符串中第一个不重复的值
function uniqueFirstStr(str) {
    let newStr = '',
        temp = {}
    for (let i = 0; i < str.length; i++) {
        if (!temp.hasOwnProperty(str[i])) {
            temp[str[i]] = 1;
        } else {
            temp[str[i]]++;
        }
    }
    for (let key in temp) {
        if (temp[key] === 1) {
            return key;
        }
    }
}
uniqueFirstStr('aaaakkzkkhxhhhggpgg') // 'z'

类数组​

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    let divs = document.getElementsByTagName('div');
    console.log(divs); // 类数组
    
    function test() {
        arguments.push(4); // 报错
        // 上面报错的原因是类数组并没有继承Array.prototype上面的方法，所以push不能使用
        console.log(arguments); // 类数组
    }

    test(1, 2, 3);
    
    // 创建一个类数组
    let obj = {
        '0': 1,
        '1': 2,
        '2': 3,
        'length': 3,
        'splice': Array.prototype.splice, // 借用数组的splice 加了这个方法可以让 {} 变成 []
        'push': Array.prototype.push // 借用数组的push
    }
    
    console.log(obj); // [1, 2, 3, splice: ƒ, push: ƒ]

    // Array.prototype.push = function (elem) { // 类数组push原理
    //     this[this.length] = elem;
    //     this.length ++ ;
    // }
    
    let obj1 = {
        '2': 3,
        '3': 4,
        'length': 2,
        'splice': Array.prototype.splice,
        'push': Array.prototype.push
    }
    
    obj1.push(1);
    obj1.push(2);
    console.log(obj1); // [empty × 2, 1, 2, splice: ƒ, push: ƒ]
</script>