JavaScript数组

  • Post author:
  • Post category:java


==数组 存储数据的容器 可以存储任意数据类型 可以存储任意多个==

2.1 创建数组对象

  • 字面量创建

// 1.字面量创建
var arr = [1,true,false,"1234",undefined,null,[4,5,6],{"name":"李四"}];
console.log(arr);//[1, true, false, '1234', undefined, null, Array(3), {…}]
console.log(typeof arr);// object
  • new关键字创建

 // 2.使用new关键字创建
var arr1 = new Array(1,true,false,"字符串",undefined,null,[1,2,3],{"age":18});
console.log(arr1); //[1, true, false, '字符串', undefined, null, Array(3), {…}]
console.log(typeof arr1);// object
  • 通过下标查找数组

 // 3.数组的添加  通过下标操作
// 获取   数组名[下标]
console.log(arr1[4]);//undefined
// 长度  数组名.length
console.log(arr1.length);//8
​
// 修改数组中的某个内容   数组名[下标] = 值
arr1[4] = "你好";
console.log(arr1); // [1, true, false, '字符串', '你好', null, Array(3), {…}]
​
// 添加数组内容
arr1[8] = "快下课了";
console.log(arr1);//[1, true, false, '字符串', '你好', null, Array(3), {…}, '快下课了']
​
arr1[11] = "我是下标11";
console.log(arr1);//[1, true, false, '字符串', '你好', null, Array(3), {…}, '快下课了', empty × 2, '我是下标11']   
  • ==注意事项==

// 4.注意事项
// 注意1 :使用new关键字创建的时候  如果只有一个数据并且是number类型 代表创建长度为n的空数组
var arr2 = new Array(2);
console.log(arr2); //[empty × 2]
​
// 注意2  可以使用数组名.属性名追加内容  这种形式一般不用
var  arr3 = ["张三","李四","王五"];
arr3.name = "这是我用点的形式追加";
console.log(arr3.name);// "这是我用点的形式追加"

2.2 数据的分类依据

2.2.1分类依据

  • typeof检测结果

基本数据类型:数据结构比较单一 数据是存储在变量中的
        stirng数据     string
    number数据     number
    boolean数据    boolean
    undefined数据  undefined
        null数据       object
复杂数据类型:数据结构比较复杂 变量中存储的是内存地址 内存地址指向数据 会一改全改 
        array数组      object
    funtion函数    function
        object对象     object
    
​
        // 基本数据类型
        console.log(typeof "123");//string
        console.log(typeof 10);//number
        console.log(typeof true);//boolean
        console.log(typeof undefined);//undefined
        console.log(typeof null);//object
        // 特殊数据类型  复杂数据类型  引用数据类型  对象数据类型
        console.log(typeof []);// object
        console.log(typeof {});// object
        console.log(typeof function(){});// function
  • 修改基本数据类型和复杂数据类型的值

 // 2.修改基本数据类型和复杂数据类型的值
        // 基本数据类型:数据类型比较单一  变量里存储的就是值  
        var a = 10;
        var b = a;// 因为a中存储的是10  将10给变量b
        console.log(b);//10
​
        b = 20;
        console.log(a,b);// 10,20
​
​
        // 复杂数据类型 数据存储比较复杂  变量中存储的是内存地址 内存地址指向数据  如果共用一个地址  会一改全改
        var arr1 = [1,2,3,4];
        var arr2 = arr1;// 将arr1的内存地址赋值给arr2  arr1和arr2共用一个内存地址  一改全改
        console.log(arr2);//[1,2,3,4]
        
        arr2[3] = "哈哈哈";//修改arr2中的值
        console.log(arr1);// [1,2,3,'哈哈哈']
        console.log(arr2);// [1,2,3,"哈哈哈"]

2.2.2深浅拷贝

==只有复杂数据类型 才存在深浅拷贝问题==

  • 浅拷贝

// 1.浅拷贝
        // var arr1 = [1,2,3,4];
        // var arr2 = arr1;// 将arr1的内存地址赋值给arr2  arr1和arr2共用一个内存地址  一改全改
        // console.log(arr2);//[1,2,3,4]
        
        // arr2[3] = "哈哈哈";
        // console.log(arr1);// [1, 2, 3, '哈哈哈']
        // console.log(arr2);// [1,2,3,"哈哈"]
​
  • 深拷贝

 // 2.深拷贝
        var arr1 = [1,2,3,4];
        var arr2 = [];//给arr2 单独创建一个存储空间
        // 通过for循环  将arr1的值一一赋值给arr2
        for(var i = 0;i<arr1.length;i++){
            /* 
                i=0
                arr2[0] = 1
                arr2[1] = 2
            */
            arr2[i] = arr1[i];
        }
        arr2[3] = "哈哈哈";
        console.log(arr2);//[1, 2, 3, '哈哈哈']
        console.log(arr1);// [1,2,3,4] 

2.3 数组的方法

==数组的方法都会改变原数组==

2.3.1数组的添加和删除

push

  • 语法 arr.push(items)

  • 作用:在数组的末尾添加一个或者多个元素 返回当前数组的长度

pop

  • 语法:arr.pop()

  • 作用:在数组的末尾删除一个元素 返回被删除的元素

unshift

  • 语法:arr.unshift(items)

  • 作用:在数组的头部添加一个或者多个元素 返回当前数组的长度

shift

  • 语法:arr.shift()

  • 作用:在数组的头部删除一个元素 返回被删除的元素

        // 1.push
                var arr = [1,true,false,"空字符串"];
        var len =  arr.push("快吃饭了");
        console.log(arr);//[1, true, false, '空字符串', '快吃饭了']
        console.log(len);//5
        // push多个数据之间用逗号隔开 可以追加任意数据类型
        arr.push("1","2",["哈哈","嘿嘿"])
        console.log(arr);//[1, true, false, '空字符串', '快吃饭了', '1', '2', Array(2)]
​
        // 2.pop
        var arr = [1,true,false,"空字符串"];
        var a =  arr.pop();
        console.log(arr);//[1,true,false]
        console.log(a);// "空字符串"
​
        // 3.unshift
        var arr = [1,true,false,"空字符串"]
        var len = arr.unshift(0);
        console.log(arr);//[0,1,true,false,"空字符串"]
        console.log(len);//5
        arr.unshift(undefined,null,{});
        console.log(arr);// [undefined,null,{},0,1,true,false,"空字符串"]
​
        // 4.shift
        var arr = [1,true,false,"空字符串"];
        var a =  arr.shift();
        console.log(arr);//[true,fasle,"空字符串"]
        console.log(a);//1

2.3.2数组的其他方法

splice

  • 语法 arr.splice(sart,deleteCount,items)

  • 作用 删除数组中一串连续的数组元素 被删除的元素会组成一个新的数组返回 使用items替换前面被删除的数组元素

  • 参数

    • start 必需 开始删除的下标位置

    • deleteCount 可选值 删除的个数 默认是删除到末尾

    • items 可选值 替换的内容

 // 1.splice 
        // a.start参数
        var arr  = [1,true,false,null,"字符串"];
        var a =  arr.splice(3);
        console.log(arr);//[1,true,false];
        console.log(a);// [null "字符串"];
        // b:start参数 deleteCount参数     删除
        var arr  = [1,true,false,null,"字符串"];
        var a =  arr.splice(3,1);
        console.log(arr);// [1,true,false,"字符串"];
        console.log(a); // [null]
​
        // c.start参数  deleteCound参数   items替换的内容    替换
        var arr  = [1,true,false,null,"字符串"];
        arr.splice(2,2,"这是替换的内容",1);
        console.log(arr);//[1,true,"这是替换的内容",1,"字符串"]
​
​
        // d.添加功能
        var arr = [1,3,4];
        arr.splice(1,0,2);//从下标为1的位置开始删除  删除0个(相当于没有删除) 然后将数字2添加到该下标前面
        console.log(arr);//[1,2,3,4]

indexof

  • 语法:arr.indexof(searchValue,index)

  • 作用:查找元素在数组中首次出现的位置 出现返回对应的下标 找不到返回-1

var  arr = [1,2,3,4,5,6,1,2];
        var index =  arr.indexOf(1,2);
        console.log(index);// 6

join

  • str.split(分割标识) 将字符串根据分割标识分割成一个数组 ==字符串—数组==

  • arr.join(组合标识) 将数组按照组合标识组成字符串 ==数组–字符串==

    • 语法 arr.join(组合标识)

    • 作用 将数组按照组合标识组成字符串

​
        // 3.join
        var arr = [1,2,3,4,5];  //
        var a  =  arr.join("-");
        console.log(a);//  "1-2-3-4-5-6"
        console.log(arr.join(""));//12345
        console.log(arr.join(","));//1,2,3,4,5
        console.log(arr.join(" "));//1 2 3 4 5
​
       

reverse

  • 语法 arr.reverse()

  • 作用 反转数组 将反转结果作为返回值返回

 // 4.reverse
        var arr = [1,true,false,null,"字符串"];;
        var a =   arr.reverse();
        console.log(a);// ['字符串', null, false, true, 1]
        console.log(arr);
​
       

concat

  • 语法:arr.concat(items)

  • 作用 将多个元素 数组组合成一个新的数组返回

        // 5.concat  不会改变原数组
        var arr = [1,2,3];
        var a  =  arr.concat("4","5",["呵呵","哈哈"])
        console.log(a);//[1, 2, 3, '4', '5', '呵呵', '哈哈']
        console.log(arr); // [1,2,3]

slice

  • 语法 arr.slice(start,end)

  • 作用:截取数组中一串连续的元素组成一个新数组返回

 // 6.slice  不会改变原数组
        var arr = ['字符串', null, false, true, 1];
        var a = arr.slice(0,2);
        console.log(a);//["字符串","null"];
        console.log(arr);//['字符串', null, false, true, 1]

2.4 数组排序

2.4.1冒泡排序

  • 冒泡排序的思路 两个相邻位置的数据进行比较

 <script>
        var arr = [6, 4, 9, 2, 7, 1];
        for (var i = 0; i < 5; i++) {
            // i=0  内层0-5 
            // i=1  内层0-4   
            // i=2  内层0-3   
            // i=3  内层0-2   
            // i=4  内层0-1
            for (var j = 0; j < arr.length- 1 - i; j++) {
                if (arr[j] > arr[j + 1]) {
                    // 交换位置
                    var temp = arr[j];
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);

3.面试题

1-字符串的方法必须掌握
2-数组的方法必须掌握
3-冒泡排序逻辑思路必须掌握



版权声明:本文为m0_70877859原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。