JS数组、预解析、对象

JS数组、预解析、对象

1.数组使用

<script>
        // 声明
        var nums=[1,2,3,4,5];
        //小标从0开始
        console.log(nums[0]);
        console.log(nums[nums.length-1]);
        for(var i=0;i<nums.length;i++){
            console.log(nums[i]);
        }
        nums[2]=33;
        //因为没有20个元素，所以 中间的都是空
        nums[20]=20;
        console.log(nums);
        //通过更改length属性进行数据删除
        nums.length=3;
        // 删除
        nums.pop();
        for(var i in nums){
            //i是对应的下标，不过是字符串类型的
            console.log(nums[i]);
            console.log(i);
        }
        var strs =['a','b','c','d'];
        //因为数组也是对象，本质还是键值对
        //而js中对象操作 可以是 对象.属性 也可以是 对象['属性']
        console.log(strs["0"]);
        console.log(strs);
        strs['age']=10;
        console.log(strs);
        console.log(strs['age']);
        console.log(strs.age);
    </script>

1.1二维数组

    <script>
        var arr=[
            [1,2,3],
            [1,2,3,4,5],
            [1,5]
        ]
        for(var i in arr){
            for (var j in arr[i]){
                console.log(arr[i][j]);
            }
        }
    </script>

2.函数

    <script>
        fn1();
        //1 函数声明,可以在任何地方调用
        function fn1(){
            console.log(111);
        }
        //调用
        fn1();
        // 2 表达式声明 js 中函数也是对象，方法名就相当于对象的引用
        // 只能在声明之后调用
        var fn2=function(){
            console.log(222);
        }
        fn2();

        //js是没有方法重载的，函数名决定唯一性
        function fn3(a,b){
            console.log(a,b);
        }
        fn3();
        function fn3(){
            console.log('你好啊');
            //如果有返回值，就加return就行
            return 1;
        }

        function fn4(){
            //在函数中使用var声明的变量，说明是局部变量，函数外不能使用
            var c=2;
            //如果没有用var声明，则变量是全局变量
            b=3;
        }
        fn4();

        // c is not defined
        // console.log(c);
        //只要函数被调用了，b就是全局变量
        console.log(b);
    </script>

2.1全局变量

    <script>
        // var i是全局变量
        // let 块变量，相当于局部变量
        for(let i=0;i<10;i++){
            console.log(i);
        }
        console.log(i+"-----------");
    </script>

2.2预解析

    <script>
        // i is not defined 没有声明这个i
        //console.log(i);
        //undefinde 未初始化
        //预解析 会把变量和函数的声明提前，放到代码的最前面
        //但是变量的=赋值操作不会提前，必须执行到这一个行才会赋值
        console.log(a);
        var a=1;
        
        //变量和函数同名的时候，变量就不会进行预解析
        var1();
        //所以在变量声明之前，都可以调用该函数
        // 但是变量声明之后，就无法使用该该函数，因为变量的值把函数覆盖
        var var1=2;
        function var1(){
            console.log('函数');
        }

        //上面的代码 会解析成这样
        // function var1(){
        //     console.log('函数');
        // }
        // var1();
        // var var1=2;

        
    </script>

2.3函数参数

<script>
        function m1(){
            //arguments是函数中的一个内置对象，保存着传递的所有参数的值
            //本质是数组，操作和数组一样
            console.log(arguments);
            for(let i in arguments){
                console.log(arguments[i]);
            }
        }
        m1(1,2,3);
    </script>

2.4作用域

<script>
        //本质就是k v  k：i b v：1 1  所以方法和变量同名就覆盖了
        var i=1;
        var b=1;
        console.log(1);
        console.log(window.i);
        console.log(window);
        num=2;
        //全局变量
        function f1(){
            //局部变量
            //num2没有用var声明 也是全局变量
            var num=num2=1;
            console.log(num);
            function f2(){
                console.log(num);
            }
            f2();
        }
    </script>
    <script>
        //2=====
        console.log(num+"======");
        f1();
        console.log(num2);
    </script>

2.5匿名函数

    <script>
        function f1(){

        }
        var a=f1;
        a();
        //把匿名函数当成一个最大的作用域,所有的代码都放到里面,可以解决命名冲突问题
        (function (){

        })();
    </script>

2.6闭包

    <script>
        //操作一个函数中的局部变量，类似于java中的getter/setter方法
        function m1(){
            var i=10;
            function m2(){
                console.log(i);
            }
            return m2;
        }

        var m=m1();
        m();
    </script>

3.对象

    <script>
        //1 字面量
        var person = {
            name:'张三',
            age:18,
            sex:'女',
            toString:function(){
                console.log('姓名:'+this.name+',年龄:'+this.age+',性别:'+this.sex)
            }
        };
        person.toString();
        console.log(person.name);

        //2 new Object();
        var person =new Object();
        person.name='李四';
        person.age=19;
        person.sex='男';
        person.toString=function(){
            console.log('姓名:'+this.name+',年龄:'+this.age+',性别:'+this.sex)
        }
        person.toString();
        console.log(person.name);

        // 3 工厂模式
        function createPerson(name,age,sex){
            var person =new Object();
            person.name='李四';
            person.age=19;
            person.sex='男';
            person.toString=function(){
                 console.log('姓名:'+this.name+',年龄:'+this.age+',性别:'+this.sex)
            }
          return person;
        }
        var person1= createPerson('王五',17,'男');
        var person2= createPerson('2',1,'2');
        person1.toString();
        person2.toString();

        // 4 构造函数
        function Person(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
            toString=function(){
                 console.log('姓名:'+this.name+',年龄:'+this.age+',性别:'+this.sex)
            }
        }
        var p1=new Person('1',12,'2');
        p1.toString();
    </script>

3.1对象操作

    <script>
        var person={
            name:'张三',
            age:18
        };
        //获取
        console.log(person.name);
        console.log(person['name']);
        // 添加
        person.sex="男";
        // 更改
        person.age=20;
        // 删除
        delete person.age;
        // 遍历
        for(let key in person){
            //key 是属性，字符串类型
            console.log(person[key]);
        }
    </script>

3.2利用对象实现数组去重

<script>
        function toNoRepeatArray(nums){
            var samllMap=[];
            for(let i in nums){
                samllMap[nums[i]]=1;
            }
            var newnums=[];
            for(let key in samllMap){
                newnums.push(parseInt(key));
            }
            return newnums;
        }
    </script>
    <script>
        var nums=[1,2,1,2,3,4,3];
        console.log(toNoRepeatArray(nums));
    </script>

4.异常

<script>
        try{
            console.log(a);
        }catch(error){
            console.log("出错啦:"+error.message);
        }finally{
            console.log("必须执行");
        }
        console.log(1);

        function m1(num){
            if(isNaN(num)){
                throw "请输入数字";
            }else{
                console.log("输入的是数字");
            }
        }

        try{
            m1();
        }catch(error){
            console.log(error);
        }
        console.log(2222); 
    </script>

6.常用类

6.1Math

<script>
        console.log(Math);
        //保留两位小数
        console.log(3.1415926.toFixed(2));
        //随机数 大于等于0 且小于1
        console.log(Math.random());
        //向下取整
        console.log(Math.floor(2.9));
        //向上取整
        console.log(Math.ceil(2.2));
        //四舍五入
        console.log(Math.round(2.5));
        console.log(Math.round(3.5));
        //最大值
        console.log(Math.max(1,2,3,4,5,23,11));
        //最小值
        console.log(Math.min(1,2,0.2,22));
        //几次幂
        console.log(Math.pow(3,3));
        //开平方
        console.log(Math.sqrt(4));

        function getRandom(min,max){
            return  Math.floor(Math.random()*(max-min+1)+min);
        }
        console.log(getRandom(1,10));
    </script>

6.2Date

<script>
        //创建事件对象
        var date =new Date();
        console.log(date);
        //获取时间原点到当前时间的毫秒数
        console.log(date.valueOf());
        console.log(date.getTime());
        //年
        console.log(date.getFullYear());
        //月从0开始，需要+1
        console.log(date.getDate());
        //星期 0 是周日，1是周一
        console.log(date.getDay());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        
    </script>

6.3Array

<script>
        //字面量
        var arr1=[1,2,34];
        //new
        var arr2=new Array(2,5,1);
        //判断是不是数组 instanceof 或者 isArray
        console.log(arr1 instanceof Array);
        console.log(Array.isArray(arr2));

        // push 尾部追加
        arr1.push(1);
        //尾部删除
        arr1.pop();
        //头部追加
        arr1.unshift(2);
        // 头部删除
        arr1.shift();

        //反转
        arr1.reverse();
        console.log(arr1);

        arr1=[1,12,11,2];
        arr1.sort(function(a,b){
            return b-a;
        });
        console.log(arr1);
        //排序，指挥按照ASCII码进行比较
        arr1.sort((a,b)=> a-b);
        console.log(arr1);

        //第一个参数是数据，第二个参数是索引
        arr1.forEach(function(item,index){
            console.log(item,index);
        });
        arr1.forEach((item,index)=>console.log(item,index));

        //filter：过滤，不符合条件的就不要了
        //只要偶数
        var arr3=arr1.filter(function(item,index){
            if(item%2==0){
                return true;
            }else{
                return false;
            }
        });
        console.log(arr3);

        //奇数
        var arr4=arr1.filter(item=> item%2==1? true:false);
        console.log(arr4);
        //map：更改数组
        var arr =[1,2,3,4,5,6];
        //数组中 奇数加10 偶数加5
        var arr5= arr.map(function(item){
            if(item%2==0){
                return item+5;
            }else{
                return item+10;
            }
        });
        console.log(arr5);

        var arr6=arr.map(item=> item%2==0? item+5:item+10);
        console.log(arr6);

        var arr=[1,2,3,4,5,6,7,8,9];
        //获取对应数据的索引，找不到返回-1
        console.log(arr.indexOf(21));
        //获取最后一次出现的索引，找不到返回-1
        console.log(arr.lastIndexOf(3));

        //数组转字符串
        console.log(arr.join('-'));
        var arr1=[1,2,3];
        var arr2=[11,12,13];
        var arr3=arr1.concat(arr2);
        console.log(arr3);

        //删除，并返回要删除的数据
        var arr=[1,2,3,4,5];
        // index num
        arr.splice(2,3);
        console.log(arr);

        arr=[];
    </script>