JavaScript学习笔记（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/BubbleM/article/details/53239438

本文详细介绍了JavaScript数组的各种操作方法，包括长度属性的使用、增删元素的push/pop、shift/unshift方法，以及数组的截取、排序等高级操作。同时展示了如何通过内置函数实现数组的高效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript数组

js数组更加类似java的容器。长度可变，元素类型也可以不同！
数组长度随时可变！随时可以修改！（length属性）

<script type="text/javascript" charset="UTF-8">
//定义数组的两种方式 推荐后一种
//  var arr = new Array();
    var arr = [1,2,3,"abc",new Date()];

//  alert(arr.length);//5
    arr.length = 3;
    alert(arr);//1,2,3  隐式调用toString()，即arr.toString();
</script>

push()和pop()

//push为数组追加元素，并返回新数组长度
    var arr = [new Date(),false];
    var result = arr.push(1,2.3);
    alert(arr);
    alert(result);//4
//pop从数组尾部移除一个元素，返回值为移除的元素值 
    var obj = arr.pop();
    alert(arr);
    alert(obj);

shift()和unshift()

var  arr = [1,2,3, true , new Date()];
    var r1 = arr.shift();       
//shift从头部移除一个元素(返回移除的元素)
    alert(arr);
    alert(r1);
    var r2 = arr.unshift(10,false); 
//unshift从头部插入多个元素(返回新数组的长度)
    alert(arr);
    alert(r2);

splice()和slice()

/**
    * splice、slice 方法 (截取的方法)
    * splice方法操作数组本身
    * slice方法不操作数组本身
 */
         splice: 第一个参数 :起始位置
            第二个参数 ：表示截取的个数
            第三个参数以后:表示追加的新元素个数

var arr = [1,2,3,4,5];
arr.splice(1,2,3,4,5);  // 134545
alert(arr);

// slice：//返回截取的内容 //截取范围 (左闭右开区间)
var arr = [1,2,3,4,5];
var reuslt = arr.slice(2,4);   
alert(reuslt);      //3,4

操作数组的方法: concat()和join()

    var arr1 = [1,2,3];
    var arr2 = [true , 4 , 5];

    var reuslt = arr1.concat(arr2);     
//concat合并粘连的操作(不操作数组本身)
    alert(reuslt);//1,2,3,true,4,5

    var result = arr1.join('-');        
//join在每个元素之间加入内容(不操作数组本身)
    alert(arr1); //1,2,3
    alert(result);//1-2-3

sort()和reverse()

/**
     * sort排序 
     * reverse倒叙
 */
    var arr1 = [5,2,1,4,3];
    var arr2 = [10,2,4,1,7];

    arr1.sort();
    alert(arr1);//1,2,3,4,5
    arr1.reverse();     
//倒叙排序 是按照集合的位置进行倒叙的
    arr2.sort();
    alert(arr2);    // 1 10 2 4 7 将元素按照字符串一个字符一个字符比较

function compare(value1 , value2){
    if(value1 < value2){
        return -1 ;
    } else if(value1 > value2){
        return 1 ; 
    } else {
        return 0 ;
    }
}
    arr2.sort(compare);
    alert(arr2);

JS模拟Java中的Map方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS模拟Java中的Map方法</title>
        <script type="text/javascript" charset="UTF-8">
        var Map = function(){
            //private
            var obj = {};

            //put方法
            this.put = function(key,value){
                obj[key] = value; //把键值绑定到obj对象上
            }

            //size方法 获取map容器的个数
            this.size = function(){
                var count = 0;
                for(var attr in obj){
                    count++;
                }
                return count;
            }

            // get 方法 根据key 取得value
            this.get = function(key){
                //数字0会转换为false 为了避免有0时会被忽略
                if(obj[key] || obj[key]===0 || obj[key]===false){
                    return obj[key];
                }else{
                    return null;
                }
            }

            //remove删除方法
            this.remove = function(key){
                if(obj[key] || obj[key]===0 || obj[key]===false){
                    delete obj[key];
                }
            }

            //eachMap 遍历map容器的方法
            this.eachMap = function(fn){  //fn 回调函数
                for (var attr in obj) {
                    fn(attr,obj[attr]);
                }
            }
        }
            var map = new Map();
            map.put("001",0);
            map.put("002","刘敏");
            map.put("003",false);
            map.put("004",new Date());
            map.put("005",true);
            //alert(map.size());    //返回5  说明put和size方法都是正确的
            //alert(map.get("001")); //返回0  get方法正确
        /*  alert(map.get("004"));  //返回时间
            map.remove("004");
            alert(map.get("004"));  //返回null remove方法正确
        */
            map.eachMap(function(key,value){
                alert(key+":"+value);
            });
        </script>
    </head>
    <body>

    </body>
</html>

利用JS对象特性实现去除数组中重复项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用JS对象特性，去掉数组中的重复项</title>
        <script type="text/javascript" charset="UTF-8">

            var arr = [2,1,2,10,2,3,5,5,1,10,13];

        /*  //js对象的特性：在Js对象中，key是永远不会重复的
            var obj = new Object();
            obj.name = 'z3';
            obj.age = 20 ;
            //alert(obj.name);
            obj.name = 'w5';
            alert(obj.name);   //w5
        */

        // 1 把数组转成一个js的对象
        // 2 把数组中的值,变成js对象当中的key
        // 3 把这个对象 再还原成数组


            //把数组转成对象
            function toObject(arr){
                var obj = {};  //私有对象
                for(i=0;i<arr.length;i++){
                    obj[arr[i]] = true;
                }
                return obj;
            }

            //把这个对象转成数组
            function toArr(obj){
                var arr = [];
                for(var attr in obj){
                    if(obj.hasOwnProperty(attr)){
                        arr.push(attr);
                    }
                }
                return arr;
            }
            //综合的方法 去掉数组中的重复项
            function uniq(newarr){
                return toArr(toObject(arr));
            }
            alert(uniq(arr));
        </script>
    </head>
    <body>
    </body>
</html>