javascript中的数组

value
114 阅读9分钟
1. 数组
1.1 数组就是专门用于存储一组数据的。数组(Array)是引用数据类型(对象类型)

2.2 创建数组方式：
        构造函数方式：let arr = new Array(size)
        字面量方式：let arr = []
        
2.3 数组注意点：
        js中,如果数组对应的索引中没有存储数据,默认存储的就是undefined。
        js中访问了数组中不存在的索引不会报错,会返回undefined。
        js中数组的存储空间不够时数组会自动扩容。
        js中数组可以存储不同类型数据。
        js中数组分配的存储空间不一定是连续的。
        
2.4 什么是数组遍历？
        就是依次取出数组中存储的所有数组,称之为数组的遍历。
2. 数组的解构赋值
2.1 解构赋值是es6中新增的一种赋值方式。

2.2 解构赋值注意点：
     在数组的解构赋值中,等号左边格式必须和等号右边的格式一摸一样,才能完全解构
         let [a,b,c] = [1,2,3] 
         console.log(a,b,c)  //1,2,3
         
         let [a,b] = [1,[2,3]]
         console.log(a,b,c)  //1,[2,3]
         
         let [a,[b,c]] = [1,[2,3]]
         console.log(a,b,c)  //1,2,3
         
     在数组的解构赋值中, 左边的个数可以和右边的个数不一样
        let [a, b] = [1, 3, 5];
        console.log(a,b);  //1,3
        
     在数组的解构赋值中, 右边的个数可以和左边的个数不一样
        let [a, b] = [1];
        console.log(a,b);  //1,undefined
        
     在数组的解构赋值中,如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值 
         let [a, b = 666, c = 888] = [1];
         console.log(a,b,c)  //1,666,888
         
     在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖    
        let [a, b = 666] = [1, 3];
        console.log(a,b)  //1,3
        
     在数组的解构赋值中, 还可以使用ES6中新增的扩展运算符来打包剩余的数据
     在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后
     ES6中新增的扩展运算符: ...   
        let [a, ...b] = [1, 3, 5];
        console.log(a,b)  //1,[3,5]
3. 数组的增删改查
3.1 需求: 在数组最后添加一条数据 (增)
    push方法可以在数组的最后新增一条数据, 并且会将新增内容之后数组当前的长度返回给我们
    push方法可以接收1个或多个参数
        let arr = [1,2,3]
        let res = arr.push(4);
        console.log(arr)  //[1,2,3,4]
        console.log(res)  //4
        
3.2 需求: 要求在数组最前面添加一条数据 (增)
    unshift方法和push方法一样, 会将新增内容之后当前数组的长度返回给我们
    unshift方法和push方法一样, 可以接收1个或多个参数
        let arr = [1,2,3]
        let res = arr.unshift(4);
        console.log(arr)  //[4,1,2,3]
        console.log(res)  //4
        
3.3 需求: 要求删除数组最后一条数据 (删)
    数组的pop方法可以删除数组中的最后一条数据,  并且将删除的数据返回给我们
        let arr = [1,2,3]
        let res = arr.pop();
        console.log(arr)  //[1,2]
        console.log(res)  //3
        
3.4 需求: 要求删除数组最前面一条数据 (删)
    数组的shift方法可以删除数组中的最前面一条数据,  并且将删除的数据返回给我们
        let arr = [1,2,3]
        let res = arr.shift();
        console.log(arr)  //[2,3]
        console.log(res)  //1
        
3.5 需求: 要求删除数组中索引为1的数据 (删)
    以下代码的含义: 从索引为2的元素开始删除1条数据
    参数1: 从什么位置开始
    参数2: 需要删除多少个元素
        let arr = [1,2,3]
        arr.splice(2,1);
        console.log(arr)  //[1,2]
        
3.6 需求: 将索引为1的数据修改为d, 索引为2的修改为e (改)      
    参数1: 从什么位置开始(索引)
    参数2: 需要替换多少个元素
    参数3开始: 新的内容
        let arr = [1,2,3]
        arr.splice(1,2,4,5);
        console.log(arr)  //[1,4,5]
        
3.7 需求: 获取数组中索引为1的那个数据 (查)
        let arr = [1,2,3]   
        console.log(arr[1])  //2
4. 数组常用方法
4.1 如何清空数组？
        let arr = [1,2,3]
        arr.splice(0, arr.length)
        console.log(arr);
        
4.2 如何将数组转换为字符串?
        let arr = [1,2,3]
        let str = arr.toString();
        console.log(str)  //1,2,3
        console.log(typeof str)  //string     
        
4.3如何将数组转换成指定格式字符串?
   join方法默认情况下如果没有传递参数, 就是调用toString();
   join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
        let arr = [1,2,3]
        let str =  arr.join("+");
        console.log(str);  //1+2+3
        console.log(typeof str);  //string    
        
4.4 如何将两个数组拼接为一个数组?
        let arr1 = [1, 3, 5];
        let arr2 = [2, 4, 6];
        let res = arr1.concat(arr2);
        console.log(res)  //[1, 3, 5, 2, 4, 6]
    注意点: 数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接
        let res = arr1 + arr2;
        console.log(res)  //1,3,52,4,6
    注意点: 扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
            扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
        let res = [...arr1, ...arr2];
        console.log(res);  //[1, 3, 5, 2, 4, 6]
    注意点: 不会修改原有的数组, 会生成一个新的数组返回给我们
        console.log(arr1);
        console.log(arr2);
        
4.5 如何对数组中的内容进行反转 
    注意点: 会修改原有的数组
        let arr = [1, 2, 3, 4, 5]
        let res = arr.reverse();
        console.log(res);  //[5,4,3,2,1]
        console.log(arr);  //[5,4,3,2,1]
        
4.6 如何截取数组中指定范围内容
    slice方法是包头不包尾(包含起始位置, 不包含结束的位置)
    注意点：不会改变原有的数组
        let arr = [1, 2, 3, 4, 5]
        let res =arr.slice(1,3)
        console.log(res);  //[2,3]
        console.log(arr);  //[1, 2, 3, 4, 5]
        
4.7 如何查找元素在数组中的位置
    indexOf方法如果找到了指定的元素, 就会返回元素对应的位置
    indexOf方法如果没有找到指定的元素, 就会返回-1
    注意点: indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找
        let arr = [1, 2, 3, 4, 5, 3];
        let res = arr.indexOf(3);
        console.log(res)  //2
        
        let res = arr.indexOf(6);
        console.log(res)  //-1 
    参数1: 需要查找的元素
    参数2: 从什么位置开始查找
        let arr = [1, 2, 3, 4, 5, 3];
        let res = arr.indexOf(3, 4);
        console.log(res)  //5
    注意点: lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找 
        let arr = [1, 2, 3, 4, 5, 3]
        let res = arr.lastIndexOf(3);
        console.log(res)  //5
        
        let res = arr.lastIndexOf(3, 4);
        console.log(res)  //2
        
4.8 从左往右查找, 找到返回true, 找不到返回false
        let arr = [3, 2, 6, 7, 6];
        let result = arr.includes(6);
        console.log(result);  // true    
        
4.9 数组的fill方法的作用：设置数组中所有元素的值为指定的数据
        let arr = new Array(5)
        arr.fill(1)
        console.log(arr);  //[1, 1, 1, 1, 1]
5. 二维数组
5.1 什么是二维数组?
    二维数组就是数组的每一个元素又是一个数组, 我们就称之为二维数组。
        let arr = [[1, 3], [2, 4]];
        let arr1 = arr[0];
        console.log(arr1);  //[1,3] 
        let ele = arr[0][1];
        console.log(ele);  //3 
        
    注意点: 在定义二维数组的时候, 将来需要存储多少个一维数组, 就写上多少个[]即可.    
        let arr = [[],[]];
        arr[0] = [1, 3];
        arr[1][0] = 2;
        console.log(arr);
        
5.2 二维数组的遍历
        let arr = [[1, 3], [2, 4]];
        for(let i = 0; i < arr.length; i++){
            let subArray = arr[i];
            // console.log(subArray);
            for(let j = 0; j < subArray.length; j++){
                console.log(subArray[j]);
            }
        }
6. 选择排序
    let arr = [5,2,8,4,6,4]    
    for(let i =0;i<arr.length;i++){
        for(let j=i;j<arr.length;j++){
            if(arr[i]>arr[j+1]){
                let temp = arr[i]
                arr[i] = arr[j+1]
                arr[j+1] = temp
            }
        }
    }
    console.log(arr);
7. 冒泡排序
  let arr = [5,2,8,4,6,4,2,8]    
    for(let i =0;i<arr.length;i++){
        for(let j=0;j<arr.length-i;j++){
            if(arr[j]>arr[j+1]){
                let temp = arr[j]
                arr[j] = arr[j+1]
                arr[j+1] = temp
            }
        }
    }
    console.log(arr);
8. 数组高级API
8.1 数组的遍历
    let arr = [1, 3, 5, 7, 9];
    //利用Array对象的forEach方法来遍历数组
    //forEach方法会自动调用传入的函数
    // 每次调用都会将当前遍历到的元素和当前遍历到的索引和当前被遍历的数组传递给这个函数
    arr.forEach((currentValue, currentIndex, currentArray)=>{
        console.log(currentValue,currentIndex,currentArray);
    });

    let arr1 = [1, 3, 5, 7, 9];
    //利用ES6中推出的for of循环来遍历数组
    for (let value of arr1) {
        console.log(value)  //1, 3, 5, 7, 9
    }

    let arr2 = [1, 3, 5, 7, 9];
    //利用for in循环来遍历数组;
    //注意点: 在企业开发中不推荐使用for in循环来遍历数组
    // for in循环是专门用于遍历对象的, 但是对象的属性是无序的, 所以for in循环就是专门用于遍历无序的东西的, 所以不推荐使用for in循环来遍历数组
    for (const key in arr2) {
        console.log(key)  //打印出来的是数组索引
    }
8.2 数组的查找方法
     1. findIndex方法: 
        findIndex方法返回索引
        定制版的indexOf, 找到返回索引, 找不到返回-1
            let arr = [1, 3, 5, 7, 9];
            let index = arr.findIndex((value,index,array)=>{
                console.log(value,index,array)
                if(value === 6){
                    return true
                }
            })
            console.log(index)  //-1
            
     2. find方法返回找到的元素
        find方法如果找到了就返回找到的元素, 如果找不到就返回undefined
            let arr = [1, 3, 5, 7, 9];
            let value = arr.find((currentValue,index,array)=>{
                console.log(currentValue,index,array)
                if(currentValue === 3){
                    return true
                }
            })
            console.log(value)  //3
     3. findIndex实现
        Array.prototype.myFindIndex = function (fn) {
            for(let i = 0; i < this.length; i++){
                let result = fn(this[i], i, this);
                if(result){
                    return i;
                }
            }
            return -1;
        }

     4. findIndex实现
        Array.prototype.myFind = function (fn) {
            for(let i = 0; i < this.length; i++){
                let result = fn(this[i], i, this);
                if(result !== undefined){
                    return result;
                }
            }
            return undefined;
        }    
        
8.3 数组的过滤
     1. 数组的filter方法:将满足条件的元素添加到一个新的数组中。
        let arr = [1, 2, 3, 4, 5];
        let newArray = arr.filter((currentValue,index,array)=>{
            console.log(currentValue,index,array)
            if(currentValue % 2 === 0){
                return true
            }
        })
        console.log(newArray)  //[2,4]
        
     2. 数组的map方法：将满足条件的元素映射到一个新的数组中。
        let arr = [1, 2, 3, 4, 5];
        let newArray = arr.map((currentValue,index,array)=>{
            console.log(currentValue,index,array)
            if(currentValue % 2 === 0){
                return currentValue
            }
        })
        console.log(newArray)  //[undefined, 2, undefined, 4, undefined]
        
     3. filter实现
        let arr = [1, 2, 3, 4, 5];
        Array.prototype.myFilter = function (fn) {
            let newArray = [];
            for(let i = 0; i < this.length; i++){
                let result = fn(this[i], i, this);
                if(result){
                    newArray.push(this[i]);
                }
            }
            return newArray;
        }
        let newArray = arr.myFilter((value)=>{
            if(value%2===0){
                return true
            }
        })
        console.log(newArray)  //[2,4]
        
     4. map实现
        let arr = [1, 2, 3, 4, 5];
        Array.prototype.myMap = function (fn) {
            let newArray = new Array(this.length);
            newArray.fill(undefined);
            for(let i = 0; i < this.length; i++){
                let result = fn(this[i], i, this);
                if(result !== undefined){
                    newArray[i] = result;
                }
            }
            return newArray;
        }
        let newArray = arr.myMap((value)=>{
            if(value%2===0){
                return value
            }
        })
        console.log(newArray)  //[undefined, 2, undefined, 4, undefined]
9. 数组的排序方法(sort)
9.0 sort方法默认是升序
    let arr = ["1", "3", "2"];
    arr.sort();
    console.log(arr)  //["1", "2", "3"]

9.1 注意点: 如果元素是字符串类型, 那么比较的是字符串的Unicode编码
    如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
    如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。
    如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前
        let arr = ["c", "a", "b"];
        arr.sort((a, b)=>{
            if(a > b){
                return 1;
            }else if(a < b){
                return -1;
            }else{
                return 0;
            }
        });
        console.log(arr);

9.2 规律: 如果数组中的元素是数值类型
    如果需要升序排序, 那么就返回a - b;
    如果需要降序排序, 那么就返回b - a;
        let arr = [3, 4, 2, 5, 1];
        arr.sort((a, b)=>{
            return a - b;
        });
        console.log(arr);

9.3 按照字符串的长度排序
    如果需要升序排序, 那么就返回a - b;
    如果需要降序排序, 那么就返回b - a;
        let arr = ["1234", "21", "54321", "123", "6"];
        arr.sort((str1, str2)=>{
            // return str1.length - str2.length;  //升序
            return str2.length - str1.length;     //降序
        });
        console.log(arr);
    
9.4 按照数组里的年龄排序
    如果需要升序排序, 那么就返回a - b;
    如果需要降序排序, 那么就返回b - a;
        let students = [
            {name: "zs", age: 34},
            {name: "ls", age: 18},
            {name: "ww", age: 22},
            {name: "mm", age: 28},
        ];
        students.sort((o1, o2)=>{
            // return o1.age - o2.age;  //升序
            return o2.age - o1.age;     //降序
        });
        console.log(students);
avatar
文章
阅读
粉丝