美文网首页JavaScript 进阶营
bunny笔记| JS基础入门到精通[02]

bunny笔记| JS基础入门到精通[02]

作者: 一只小小小bunny | 来源:发表于2021-07-21 00:31 被阅读0次

    上一章:bunny笔记| JS基础入门到精通[01]

    arguments的使用

    当我们不确定有多少个参数传递的时候,可以用arguments来获取,在js中,arguments实际上是当前函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。

            //arguments的使用
            function fn() {
                console.log(arguments);//里面存储了所有传递过来的实参
            }
            fn(1, 2, 4, 5, 7);
    

    关键知识点

    arguments

    伪数组

    利用函数反转任意数组 reverse翻转、冒泡排序 sort 打乱的数组重新排序

    函数之间的相互调用、函数声明的两种方式

    作用域、全局作用域、局部作用域与、变量的作用域、局部变量作用域、全局变量、局部变量、块级作用域、作用域链

    预解析

    js为什么需要对象?创建对象的三种方式、变量/属性/函数/方法的异同?构造函数、函数结构......

    <详情请结合以下代码查看与分析>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
        
    

    当我们不确定有多少个参数传递的时候,可以用arguments来获取,在js中,arguments实际上是当前函数的一个内置对象
    所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参
    1.arguments的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个 arguments

            // // function fn() {
            // //     console.log(arguments);//里面存储了所有传递过来的实参
            // // }
            // // fn(1, 2, 4, 5, 7);
    
    

    arguments显示形式是一个伪数组,其特点有:具有length属性;按索引方式存储数据;不具有数组的push、prop等方法

             function fn() {
                console.log(arguments);//里面存储了所有传递过来的实参 argunments=[1, 2, 4, 5, 7]
                console.log(arguments.length);//5
                 console.log(arguments[2]);//4
                 for (var i = 0; i < arguments.length; i++) {
                     console.log(arguments[i]);//1, 2, 4, 5, 7
                 }
             }
             fn(1, 2, 4, 5, 7);
    

    伪数组并不是真正意义上的数组
    1.具有数组的length属性
    2.按照索引的方式进行存储的
    3.它没有真正数组的一些方法 pop() push()等等

            // 利用函数求任意个数的最大值
            function getMax() {
                 var max = arguments[0];
                 for (i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                         max = arguments[i];
                    }
                }
               return max;
             }
            console.log(getMax(1, 2, 3));
             console.log(getMax(1, 2, 3, 5, 99));
    
            //利用函数反转任意数组 reverse翻转
             function reverse(arr) {
               var newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                 }
                return newArr;
            }
             var arr1 = reverse([1, 3, 4, 5, 6, 9]);
             console.log(arr1);
             var arr2 = reverse(['xiaoyu', 'xiaoqing', 'baibai']);
           console.log(arr2);
    
             //冒泡排序 sort 打乱的数组重新排序
            function sort(arr) {
                var newArr = [];
                for (var i = 0; i < arr.length - 1; i++) {
                    for (var j = 0; j < arr.length - i - 1; j++) {
                        if (arr[j] > arr[j + 1]) {
                            var temp = arr[j];
                            arr[j] = arr[j + 1];
                           arr[j + 1] = temp;
                         }
                    }
               }
                 return arr;
             }
             var arr1 = sort([1, 9, 5, 8]);
            console.log(arr1);
    
            // //函数是可以相互调用的
             function fn1() {
                console.log(111);//第二步 function fn1(){}中先打印出111
                 fn2();//第三步 再跳到function fn2(){}中去
                 console.log('fn1');//第六步 打印出fn1字符串
           }
             function fn2() {
                console.log(2222);//第四步 function fn2(){}中先打印出2222
                 console.log('fn2');//第五步 打印出fn2字符串
            }
           fn1();
    //分析 第一步是看这里 回调fn1(),所以看向function fn1(){}
    
         函数声明的两种声明方式
        1.利用函数关键字自定义函数(命名函数)
    
            function fn() {
    
             }
    
        2.函数表达式
       var 变量名 = function(){}
         var fun = function () {
            console.log('我是函数表达式');
         }
         fun();
    
            fun 是变量名 不是函数名
            函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
            函数表达式也可以进行传递参数
    
        var fun = function (argu) {
           console.log('我是函数表达式');
             console.log(argu);
         }
         fun();
    
            1.JS的作用域:就是指代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性,更重要的是减少命名冲突
            2.JS的作用域(es6之前,现在学的是es5):全局作用域 局部作用域
            3.全局作用域:整个script标签 或者是一个单独的js文件
    
        var num = 10;
       4.局部作用域(函数作用域):
         function fn() {
             //局部作用域
           var num = 20;
            console.log(num); }
        fn();
    
    /变量的作用域 :根据作用域的不同 我们变量分为全局变量和局部变量
          //1.全部变量:在全局作用域下的变量 在全局下都可以用
          //注意:如果在函数内部 没有声明直接赋值的变量属于全局变量
          // var num = 10;
          //2.局部变量: 在局部作用域下的变量 或者在函数内部的变量就是局部变量
          意:函数的形参也可以看做是局部变量 如:argu  // function fn(argu) {
            //     var num1 = 20;//局部
            //     num2 = 99;//全局 特殊情况
            //     console.log(argu);//形参是局部
    
            // }
            // fn();
            // console.log(num2);
    
            //3.从执行效率来看全局变量和局部变量
            //(1)全局变量只有浏览器关闭的时候才会销毁,占内存资源
            //(2)局部变量 当我们程序只写那个完毕就会销毁,比较节约内存资源
    
            //4.JS中没有块级作用域 JS的作用域:全局作用域 局部作用域 现阶段学习的JS没有块级作用域
            //我们的JS也是在ES6的时候新增的块级作用域
    
            //块级作用域{} 大括号声明 if{}  for(){}
    
            // //作用域链:内部函数访问外部函数的变量,采取的就是链式查找的方式来决定取哪个值 这种结构就称为作用域链
            // var num = 10;
            // function fn() {
            //     var num = 20;
            //     function fun() {
            //         console.log(num);//20
            //     }
    
            // }
            //只要是代码,就至少有一个作用域
            //写在函数内部的局部作用域
            //如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
            //根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称为作用域链
    
            // //案例:
            // function f1() {
            //     var num = 123;
            //     function f2() {
            //         console.log(num);
            //     }
            //     f2();
            // }
            // var num = 456;
            // f1();
            //分析:0级 :f1、num=456
            //1级: num 、f2
            //2级:console.log(num);
            //站在目标出发 一层一层地往外查找
    
            // //JS的预解析
            // //JS引擎运行JS分为两步 预解析 和 代码执行
    
            // //问1
            // console.log(num);//num2 is not defined
    
            // //问2
            // console.log(num);//undefined 
            // var num = 10;
            // //错误的原因:相当于执行了以下代码 变量提升 
            // var num;//声明了变量没给值 所以undefined 
            // console.log(num);
            // num = 10;
    
            // //问3 
            // fn();
            // function fn() {
            //     console.log(11);//11
            // }//这个函数可提升 所以没有报错
    
            // //问4 
            // fun(); //报错 
            // var fun = function () {
            //     console.log(22);
            // }
            // //报错原因:相当于执行了以下代码 这里是不能提升函数变量的 所以报错
            // var fun;//声明的变量没给值
            // fun();
            // fun = function () {
            //     console.log(22);
            // }
    
            // //(1)预解析:JS引擎会把JS里面所有的var 还有function提升到当前作用域的最前前面
            // //(2) 代码执行:按照代码书写的顺序 从上往下执行
    
            // //2.预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
            // //变量提升 就是把所有的 变量声明提升到当前的作用域最前面 不提升赋值操作
            // //函数提升 就是把所有的函数声明 提升到当前作用域的最前面 不调用函数
    
            // //预解析案例
            // var num = 10;
            // fun();
            // function fun() {
            //     console.log(num);
            //     var num = 20;
            // }
            // //相当于执行以下代码
            // var num;//第一步 声明变量没问题
            // function fun() {
            //     var num;//第五步 声明了变量num
            //     console.log(num);//根据就近原则 打印输出的num 是第五步的num 只声明而没有赋值 所以是undefined
            //     num = 20;
            // }//第二部 函数没调用 不执行 略过
            // num = 10;//第三步 把10赋值给num 存数据10了
            // fun();//第四步函数调用 找到函数
            // //步骤执行分析: 五步
    
            // js对象 为什么就是需要对象 创建对象、构造函数、关键字
            //对象是看得见摸得着的具体事物。再js中,对象是一组无序的相关属性和方法的集合,苏哦有的事物都是对象,例如字符串、数值、数组、函数等
            //对象是由属性和方法组成的 属性:事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词)
            //为什么需要对象?保存一个值的时候,可以用变量,保存多个值(一组值)时,可以使用数组
            //目的是js中的对象表达结构更清晰、更强大
    
            //创建对象的三种方式
    
            //第一种: 利用自变量创建对象{}
    
            // var obj = {};//创建一个空的对象
            // var obj = {
            //     uname: '白小兔',
            //     age: '18',
            //     sex: '女',
            //     sayHi: function () {
            //         console.log('hi~');//方法就是后面加一个匿名函数
            //     }
            // }
            // //(1)里面的属性和方法或者方法,我们采取键值对的形式 键 属性名:值 属性值
            // //(2)多个属性或者方法中间用 逗号隔开的
            // //(3)方法冒号后面跟的是一个匿名函数
            // //2.使用对象
            // //(1)调用对象的属性 我们采用 对象名.属性名
            // console.log(obj.uname);
    
            // //(2)调用属性的另一种方法,对象名['属性名']
            // console.log(obj['sex']);
    
            // //(3)调用方法 sayHi 对象名.方法名() 千万不要忘记小括号
            // obj.sayHi();
    
            // //变量 属性 函数 方法的区别
            // //变量和属性的相同点: 它们都是用来存储数据的
            // //不同点
            // //变量 单独声明并赋值 使用的时候直接写变量名 单独存在
            // //属性 在对象里面的不需要声明的 使用 的时候必须 对象.属性,否则报错
            // var num = 10;//声明变量
            // console.log(num);
    
            // var obj = {
            //     age: 20
            // }
            // console.log(obj.age);//true
            // console.log(age);//false
    
            //函数和方法的相同点: 都是实现某种功能 做某件事
            //函数是单独声明 并且调用的 函数名() 单独存在的
            //方法 在对象里面 调用的时候 对象.方法名()
    
            // //第二种方法:利用new object 创建对象
            // var obj = new Object();//创建了一个空的对象 注意 这个的Object o要用大写的 否则object is not defined
            // obj.uname = '白小兔';
            // obj.age = 18;
            // obj.sex = '女';
            // obj.sayHi = function () {
            //     console.log('hi~');
            // }
            // //(1)我们利用等号赋值的方法 添加对象的属性和方法
            // //(2)每个属性和方法之间用 分号结束
            // console.log(obj.uname);
            // console.log(obj['sex']);
            // obj.sayHi();
    
            //第三种方法 : 利用构造函数的方法来创建对象
            //1.我们为什么需要使用构造函数 就是因为我们前两种创建对象的方法 一次只能创建一个对象
    
            //因为我们一次创建一个对象 里面很多的属性和方法是大量相同的,我们只能复制
            //因为我们可以利用函数的方法重复这些相同的代码 我们就把这个函数称为构造函数
            //又因为这个函数不一样,里面封装的不是普通代码,而是对象
            //构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
            //利用构造函数创建对象
            //我们需要创建四大天王的对象 相同的属性:名字 年龄 性别 相同的方法:唱歌
            //结构:
            // function 构造函数名() {
            //     this.属性 = 值;
            //     this.方法 = function () {
    
            //     }
            // }
            // new 构造函数名();
            //Str()里面是形参
            function Str(uname, age, sex) {
                this.uname = uname;
                this.age = age;
                this.sex = sex;
                this.sing = function (sang) {
                    console.log(sang);
                }
    
            }
            var ldh = new Str('刘德华', 20, '男');//这里是实参 要传给形参
            //调用函数返回的是一个对象
            console.log(ldh.uname);
            ldh.sing('大雨')
            //增加一个对象
            var zxy = new Str('张学友', 22, '男')
            console.log(zxy.age);
    
            //1.构造函数的名字首字母要大写
            //2.我们构造函数不需要return就可以返回结果
            //3.我们调用构造函数 必须要用new
            //4.我们只要new Str()调用函数就创建一个对象 ldh{}
            //5.我们的属性和方法的前面必须添加 this
    
            //构造函数  抽象了对象的公共部分,封装了函数里面,它泛指某一大类(class),如Str()
            //对象 是一个具体的事物,特值某一个,通过new关键字创建对象的过程我们也称为对象实例化,如: 刘德华==(name:"刘德华",age=18,sex="男")
    
            //new关键字:
    
            //new构造函数可以在内存中创建了一个空的对象
            //this就会指向刚才创建的空对象
            //执行的构造函数里面的代码,给这个新对象添加属性和方法
            //返回这个新对象(所以构造函数里面不需要return)
    
            //遍历对象
            var obj = {
                name: 'bunny',
                age: 20,
                aex: '女'
            }
            //for in 遍历构造函数的对象
            for (var key in obj) {
                console.log(key);//k是变量 输出得到的是属性名
                console.log(obj[key]);//obj[k] 得到的是 属性值
    
            }
    //小结
    // 1.对象可以让代码结构更清晰
    // 2.对象复杂数据类型object
    // 3.本质:对象就是一组无序的相关属性和方法的集合
    // 4.构造函数泛指某一大类,比如苹果,不管红苹果还是绿苹果都统称为苹果
    // 5.对象实例化特指一个事物,比如这个苹果
    // 6.for in 语句用于对象的属性进行循环操作(遍历对象)
    
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>
    ```
    ###JS内置对象等
    ```
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Js内置对象</title>
        <script>
            //内置对象:自定义对象、内置对象、浏览器对象
            //查文档:MDN/W3C 查Math.max([value[,value2,...]]) 中括号表示参数可有也可没有
            //如何学习对象中的方法 (1)查阅该方法的功能 (2)查看里面参数的意义和类型 (3)查看返回值得意义和类型
    
            // //Math对象 在MDN查看  Math是一个内置对象,它具有数学和函数的属性和方法,不是一个函数对象
            // //Math对象与其它全局对象不同的是,Math不是一个构造器,Math的所有属性和方法都是静态的
            // //Math不是构造函数,所以不需要用new来调用 而是直接使用
            // console.log(Math.PI);//PI是一个属性,即圆周率,输出3.141592653589793
            // console.log(Math.max(1, 55, 99, 22, 221));//如果里面有非数字的值,返回NaN;如果直接console.log(Math,max());则输出-Infinity
    
            // //利用对象封装自己的数学对象 里面有PI的最大值和最少值
            // var myMath = {
            //     PI: 3.141592653,
            //     max: function () {
            //         var max = arguments[0];
            //         for (var i = 1; i < arguments.length; i++) {
            //             if (arguments[i] > max) {
            //                 max = arguments[i];
            //             }
            //         }
            //         return max;
            //     },
            //     min: function () {
            //         var min = arguments[0];
            //         for (var i = 1; i < arguments.length; i++) {
            //             if (arguments[i] < min) {
            //                 min = arguments[i];
            //             }
            //         }
            //         return min;
            //     },
    
            // }
            // console.log(myMath.PI);//3.141592653
            // console.log(myMath.max(1, 2, 3, 88, 5));//88
            // console.log(myMath.min(1, 2, 3, 5, 77));//1
    
            //其它常用到的:(1)Math.abs(12) 绝对值  ;
            //(2)三个取整
            //Math.floor(1.7) 输出1  向下取整 往最小值取值 
            //Math.cell(1.3)输出2  向上取整 往最大了取值
            //Math.round() 四舍五入(其它数字都是四舍五入,但是'.5' 特殊,它往大了取)
    
            //Math对象的随机数方法 random() 返回一个随机的小数 0=< x <1 
            //Math.random() 函数(对象)返回一个浮点,伪随机数在范围[0,1]
            //如果是 [0,1) 表示范围到1  但是不包括1
    
    
    
            // //获取两个值之间的随机数
            // function getRandomArbitrary(min, max) {
            //     return Math.random() * (max - min) + min;
            // }
            // console.log(getRandomArbitrary(3, 5));
            // //获取两个值之间的随机整数
            // function getRandomInt(min, max) {
            //     min = Math.ceil(min);
            //     max = Math.floor(max);
            //     return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
            // }
            // console.log(getRandomInt(3, 5));
            // //获取两个值之间的随机整数
            // function getRandomIntInclusive(min, max) {
            //     min = Math.ceil(min);
            //     max = Math.floor(max);
            //     return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
            // }
            // console.log(getRandomIntInclusive(1, 10));
            // //随机点名
            // var arr = ['小白', '小红', '小黑', '小蓝']
            // console.log(arr[getRandomIntInclusive(0, arr.length - 1)]);
    
    
            // //猜数字游戏
            // //1.随机生成一个1~10的整数 我们需要用到Math.random()方法
            // //2.需要一直猜到正确为止,也就是说需要循环
            // //3.while循环更简单
            // //4.核心算法:使用 if else if多分支语句来判断大于、小于
            // function getRandom(min, max) {
            //     return Math.floor(Math.random() * (max - min + 1)) + min;
    
            // }
            // var random = getRandom(1, 10);
            // while (true) {//死循环
            //     var num = prompt('你来猜?输入1~10之间的数字');
            //     if (num > random) {
            //         alert('你猜大了')
            //     } else if (num < random) {
            //         alert('你猜小了')
            //     } else {
            //         alert('真厉害,恭喜你猜对了!');
            //         break;//退出整个循环结束程序
            //     }
            // }
    
            // //Date() 日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象
            // var arr = new Array();//创建一个数组对象
            // var obj = new Object();//创建一个对象实例
            // //1.使用Data 如果没有参数 则返回当前系统的时间
            // var data = new Date();
            // console.log(data);
            // //2.参数常用的写法 数字型2020,10,02 或者 字符串型 '2020-10-2 8:8:8' ,通常来说,用字符串型即可
            // //3.关于Date()的方法属性 查MDN
            // var date = new Date();
            // console.log(date.getFullYear());//返回当前的年
            // //getHours()、getMonth()+1... ...
    
            // //4.格式化日期年月日 查MDN
            // //5.格式化日期时分秒 查MDN
            // //6.获得Date总的毫秒数(时间戳) 查MDN
            // // var date = new Date();
            // // console.log(date.valueOf());//方法一:就是 我们就现在时间 距离1970.1.1总的毫秒数
            // // console.log(date.getTime());//方法二:
            // // var date1 = +new Date();//方法三[最常用]: +new Date()返回的就是总的毫秒数 
            // // console.log(Date.now());//方法四:H5新增的
    
            // //案列 :倒计时
            // //分析:1,核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒相见,比如05分减去25分,结果会变成复数
            // //2,用时间戳来做,用户输入时间总的毫秒数减去现在的总的毫秒数,得到的就是剩余时间的毫秒数
            // //3,把剩余时间的总的毫秒数转换为天、时、分、秒(时间戳转换为十分秒)要除以1000
            // //转换公式:
            // //d=parseInt(总秒数/60/60/24);//计算天数
            // //h=parseInt(总秒数/60/60%24);//计算时
            // //m=parseInt(总秒数/60%60);//计算分
            // //s=parseInt(总秒数%60);//计算秒
    
            // function countDown(time) {
            //     var nowTime = + new Date();//返回的是当前时间总的毫秒数
            //     var inputTime = +new Date(time);//返回的是用户输入时间的毫秒数
            //     var times = (inputTime - nowTime) / 1000;//times是剩余时间的毫秒数
            //     d = d < 10 ? '0' + d : d;
            //     var d = parseInt(times / 60 / 60 / 24);//计算天
            //     h = h < 10 ? '0' + h : h;
            //     var h = parseInt(times / 60 / 60 % 24);//计算时
            //     m = m < 10 ? '0' + m : m;
            //     var m = parseInt(times / 60 % 60);//计算分
            //     s = s < 10 ? '0' + s : s;
            //     var s = parseInt(times % 60);//计算秒
            //     return d + '天' + h + '时' + m + '分' + s + '秒';
            // }
            // console.log(countDown('2021-7-8 12:00:00'));
            // var date = new Date();
            // console.log(date);
    
            // //数组对象 array
            // //创建一个数组的两种方式
            // //1,利用数组字面量
            // var ar = [1, 2, 3];
            // console.log(ar[2]);
    
            // //2,利用new Arry()
            // var arr1 = new Array();//创建一个新的数组
            // var arr1 = new Array(2);//这个2表示 数组的长度为2 里面有2个空的数组元素
    
            // var arr2 = new Array(2, 3);//等价于[2,3] 这样写表示里面有2个数组元素 是2和3
            // console.log(arr2);
    
            //检测是否为数组
            //(1) instanceof 运算符 它可以用来检测是否是数组
            //(2) Array.isArray()
            //详情MDN搜索Array
    
            // //添加删除数组元素的方法
            // //1,push() 在我们数组的末尾 添加一个或者多个元素 push推
            // var arr = [1, 3, 4, 5];
            // // arr.push(4, 'bunny');
            // console.log(arr);
            // console.log(arr.push(4, 'bunny'));//push完毕后,返回的结果是 新数组的长度
            // //(1)push 是可以给数组追加新的元素
            // //(2)push() 参数直接写 数组元素就可以了
            // //(3)push完毕后,返回的结果是 新数组的长度
            // //(4)原数组也会发生变化
    
            // //2,unshif 在我们数组的开头添加一个或者多个数组元素
            // arr.unshift('我是第一', '好的');
            // console.log(arr);
            // console.log(arr.unshift(4, 'bunny'));
            // //(1)unshift 是可以给数组前面追加新的元素
            // //(2)unshift() 参数直接写 数组元素就可以了
            // //(3)unshift完毕后,返回的结果是 新数组的长度
            // //(4)原数组也会发生变化
    
            // //3,pop() 它可以删除数组的最后一个元素 记住:一次只能删除一个元素
            // console.log(arr.pop());
            // console.log(arr);
            // //(1)pop 是可以删除数组的最后一个函数
            // //(2)pop() 没有蚕食
            // //(3)pop完毕后,返回的结果是 删除的那个函数
            // //(4)原数组也会发生变化
    
            // //4,shift() 它可以删除数组的第一个元素 记住:一次只能删除一个元素
            // console.log(arr.shift());
            // console.log(arr);
            // //(1)shift 是可以删除数组的最后一个函数
            // //(2)shift() 没有蚕食
            // //(3)shift 完毕后,返回的结果是 删除的那个函数
            // //(4)原数组也会发生变化
    
    
            // //数组排序 
            // //翻转数组 用方法
            // var arr1 = [5, 6, 7];
            // arr1.reverse();
            // console.log(arr1);
    
            // //冒泡
            // var arr2 = [12, 5, 58, 99];
            // arr2.sort(function (a, b) {
            //     //return a-b;//升序
            //     return b - a;//降序
            // });
            // console.log(arr2);
    
            // //数组索引
    
            // //返回数组元素索引号方法 indexOf(数组元素) 作用是返回该数组元素的索引号 从前面开始查找
            // //它只返回第一个满足条件的索引号
            // //它如果在该数组里面找不到元素,则返回的是 -1
            // var arr = ['red', 'purple', 'pink'];
            // console.log(arr.indexOf('blue'));
            // //返回数组元素索引号方法 lastIndexOf(数组元素) 作用是返回该数组元素的索引号 从后面开始查找
            // var arr = ['red', 'purple', 'pink', 'blue'];
            // console.log(arr.lastIndexOf('blue'));
    
            // //案例:数组去重
    
            // //数组去重['a','s','c','d',,'s',a']要求去除重复的数组
            // //1,目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重
            // //2,核心算法:遍历旧数组,然后拿着旧数组去查询新数组,如果该元素在新数组里没有出现过,则添加,否则不添加
            // //我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回时 -1 就说明 新数组里面没有改过元素 
            // //封装一个 去重函数 unique 独一无二的
    
            // function unique(arr) {
            //     var newArr = [];
            //     for (var i = 0; i < arr.length; i++) {
            //         if (newArr.indexOf(arr[i]) === -1) {
            //             newArr.push(arr[i]);
            //         }
            //     }
            //     return newArr;
            // }
            // var demo = unique(['a', 's', 'c', 'd', , 's', 'a'])
            // console.log(demo);
    
            // //数组转化为字符串
            // //1,toString() 将我们的数组转换为字符串
            // var arr = [1, 2, 4, 6, 9];
            // console.log(arr.toString());
            // //2,join(分隔符) 相对于toSting更强大
            // console.log(arr.join());//默认逗号
            // console.log(arr.join('' + ' & ' + ''));
    
            // //**字符串的变量
    
            // //基本包装类型:就是把简单数据类型包装成复杂数字类型,这样基本数据类型就有了属性和方法
            // //为了方便操作基本数据类型,js还提供了三个特征的引用类型:String、Number、Boolean
    
            // var str = 'andy';
            // console.log(str.length);
            // //对象 才有 属性和方法 复杂数据类型才有 属性和方法
            // //简单数据类型为什么会有length属性呢?
            // //基本包装类型:就是 把简单数据类型 包装成了 复杂的数据类型
            // //(1)把简单的数据类型包装为复杂数据类型
            // var temp = new String('andy');
            // //(2)把临时变量的值 给str
            // str = temp;
            // //(3)销毁这个临时变量
            // temp = null;
    
            //字符串是不可变的 每一次存值都会开辟新的空间位置给它存值
    
            // //案例:
            // //查找字符串“abcoefoxyozzopp”中所有o出现的位置的次数
            // //核心算法:先查找第一个o出现的位置
            // //然后 只要indexOf返回的结果不是-1 就继续往后查找
            // //因为indexOf只能查找到第一个 所以后面的查找 一定是当前索引加1 从而继续查找
    
            // var str = "abcoefoxyozzopp";
            // var index = str.indexOf('o');
            // var num = 0;
            // // console.log(index);//第一个的位置
            // while (index != -1) {
            //     console.log(index);
            //     num++;
            //     index = str.indexOf('o', index + 1);
            // }
            // console.log('o出现的次数:' + num);
    
            // //根据位置返回字符(重点)
            // //1.charAt(index) 根据位置返回字符
            // var str = 'andy';
            // console.log(str.charAt(3));
            // //遍历所有的字符
            // for (var i = 0; i < str.length; i++) {
            //     console.log(str.charAt(i));
            // }
            // //2,charCodeAt(index) 返回相应索引号的字符ASCII值 目的:判断用户按下哪个键
            // console.log(str.charCodeAt(0));//97
            // //3,str[index] H5新增的
            // console.log(str[1]);//n
    
            //有一个对象 来判断是否有该属性 写法:对象['属性名']
            var o = {
                age: 18
            }
            if (o['age']) {
                console.log('里面有该属性');
            } else {
                console.log('里面没有该属性');
            }
    
            //统计出现次数最多的字符
            //核心算法:利用charAt() 遍历这个字符串
            //把每个字符都存储给对象,如果对象没有该属性就为1,如果存在了 就+1
            //遍历对象,得到最大值和该字符
            var str = 'abcoefoxyozzopp';
            var o = {};
            for (var i = 0; i < str.length; i++) {
                var chars = str.charAt(i);//chars是字符串的每一个字符
                if (o[chars]) {//0[chars]得到属性值
                    o[chars]++;
                } else {
                    o[chars] = 1;
                }
            }
            console.log(o);
    
            //遍历对象 
            var max = 0;
            var ch = '';
            for (var k in o) {
                //k得到的是属性名
                //o[k]得到的是属性值
                if (o[k] > max) {
                    max = o[k];
                    ch = k;
                }
            }
            console.log(max);
            console.log('最多的字符是' + ch);
    
    
            //拼接和截取字符串
            //字符串操作方法
            //1,concat('字符串1','字符串2'...)
            var str = 'andy';
            console.log(str.concat('red'));
    
            //2,substr('截取的起始位置','截取几个字符');
            var str1 = '这是一只可可爱爱的小兔子';
            console.log(str1.substr(2, 2));//第一个2是索引号 从第几个开始 第二个2是取几个字符
    
    //1,替换 replace('被替换的字符','用来替换的字符')  他只会替换一个字符
    //2,字符转为数组 split('分隔符') 前面我们学过的join 把数组转换为字符串
    
    //简单数据类型(简单类型/值类型)和复杂数据类型(引用类型)
    
    //简单数据类型中:number、string、undifined、boolean、null。 特殊的null 它返回的是一个空的对象 object
    //如果有个白能量我们以后存储为对象 暂时没有想好放啥 这个时候就会给null
    
    //堆(放复杂的)和栈(放简单的)
    //1,简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
    //2,复杂数据类型 首先在栈里面存放地址 十六进制表示 系统自动分配 然后这个地址是指向堆里面的数据
    
    //3,简单数据类型传递的参数,把值传过去,所以 修改形参不会对外部函数影响
    //4,复杂数据类型传递的参数 ,把地址传过去,所以,内部的传参会对外部产生影响
    
    
    
    
    
    
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>
    ```

    相关文章

      网友评论

        本文标题:bunny笔记| JS基础入门到精通[02]

        本文链接:https://www.haomeiwen.com/subject/ivjzyltx.html