javascript作用域（6）

javascript作用域

何谓作用域呢，简单而言，就是标识符在某个范围起效果与作用，目的是为了提高程序的可靠性，减少命名冲突

JS的作用域

• 全局作用域
• 局部作用域

全局作用域

标识符处于整个<script>元素或外部单独一个js文件的范围内，便叫做全局作用域

如下：变量num处于全局作用域内

  <script>
        var num = 10;
        console.log(num) //标识符num的作用域便属于全局作用域
    </script>

局部作用域

• 标识符处于函数内部的范围，便叫做局部作用域

<script>
    function fn() {
        var num = 20;
        console.log(num) //20
    }
    fn() //调用函数
</script>

变量的作用域

根据作用域的不同，变量也分为全局变量和局部变量

全局变量

全局作用域

• 在全局作用域下声明的变量属于全局变量

<script>
    var num = 10;
    console.log(num) //10
    function fn() {
        console.log(num) //10 
    }
    fn()
</script>

• 在函数内部未使用var声明的变量也属于全局变量

<script>
    function fn() {
        num = 2; //此时num属于全局变量
    }
    fn()
    console.log(num) // 2
</script>

局部变量

在函数的内部声明的变量属于局部变量

<script>
    function fn() {
        var num = 20;
    }
    console.log(num) //此时会报错  num属于局部变量
</script>

函数的形参也可以看做局部变量

<script>
    function fn(num) {
        console.log(num)// num = 2
    }
    fn(2)
    console.log(num) //  会报错 num属于局部变量  只能在内部调用
</script>

全局变量和局部变量的区别

• 全局变量在全局的任何位置都能被调用到，只有当浏览器关闭时才会被销毁，因此比较占内存
• 局部变量在函数执行结束后便会被销毁，因此比较节省内存资源。

块级作用域

ES6之后 引入了块级作用域 何谓块级作用域呢 {}就是一个简单的块级作用域

<script>
    if(5>3) {
        var num  = 20;
    }
    console.log(num) //20
</script>

作用域链

内部函数访问外部函数变量的机制，采用链式的方式一级一级向上获取获取数据，称为作用域链（就近原则）

<script>
    var num = 20;
    function fn() {
        var num =25;
        function fn2()  {
            console.log(num) //25 就近原则
        }
        fn2()
    }
    fn()
</script>

作用域链习题

习题一

    <script>
    function f1() {
        var num = 123;
        function f2() {
            console.log(num)
        }
    f2() //123

    }

    var num = 456;
    f1()
</script>

习题二

<script>
    var a = 1;
    function fn1() {
        var a = 2;
        var b = '22';
        fn2() 
        function  fn2(){
            var a = 3;
            fn3();
            function fn3() {
                var a = 4;
                console.log(a); //a = 4
                console.log(b); //b = '22'
            }
        }
    }
    fn1()
</script>

JavaScript预解析

js引擎执行js代码分为两步：预解析 代码执行

• 预解析：js引擎会把js里面的所有使用var 声明的变量和function声明的函数提升到当前作用域的最顶部
• 代码执行 ：按照代码执行的顺序从上往下执行

预解析分为变量预解析及函数预解析

• 变量预解析会把变量声明提升到当前作用域的最前面，不提升赋值操作
• 函数预解析会把函数声明提升到当前作用域的最前面，不调用函数

变量预解析

<script>
    console.log(num); //undefined
    var num = 10;
/* 上述代码的步骤相当于
* var num;

* console.log(num);
* num = 10;
*/

</script>

函数预解析

函数预解析的第一种情况

<script>
    fn() //hello

    function fn() {
        console.log('hello')
    }

    /* 上述代码相当于
    *    function fn() {
    *     console.log('hello')
       }
      fn()
    */
</script>

函数预解析的第二种情况

<script>
    fn()
    var fn = function() {
        console.log('222')
    }

    /* 上述代码相当于
    var  fn;
    fn(); //会报错
    fn = function() {
        cosnle.log('222')
    }
    */
</script>

预解析案例

案例一

<script>
    var num = 10;
    fun();
    function fun() {
        console.log(num); //undefined
        var num = 20;

    }
    


    /* 上面的代码相当于以下步骤
    var num;
      function fun() {
          var num;
         console.log(num);
         num = 20;

    }
    num = 10;
    fun()

    */


</script>

案例二

<script>
    var num = 10;
    function fn() {
        console.log(num); //undefined
        var num = 20;
        console.log(num) //20
    }

    fn();

    /* 上述代码相当于以下操作
    var num ;
    function fn() {
        var num;
        console.log(num);
        num = 20;
        console.log(num);

    }
    num = 10;
    fn()
 */
     
</script>

案例三

<script>

    var a = 18;
    f1();
    function f1() {
        var b = 9;
        console.log(a); //underfined
        console.log(b); // 9
        var a  ='123'

    }

    /* 上述代码相当于以下操作
     var a;
       function f1() {
        var b;
        var a;
        b = 9;
        
        console.log(a);
        console.log(b);
         a  ='123'

    }
    a = 18;
    f1();
    */

</script>

案例四

<script>
f1();
console.log(c);
console.log(b);
console.log(a); 
function f1() {
    var a  = b = c = 9;
    console.log(a);
    console.log(b); 
    console.log(c);
}


/* 上述代码相当于以下操作

function f1() {
    var a；
     a =  9；
     b =9；
     c = 9;
    console.log(a); //9
    console.log(b); //9 
    console.log(c) //9 
}
f1();
console.log(c); //9 
console.log(b); // 9
console.log(a); //报错

*/



</script>

javascript对象

什么是对象？

对象是一组无序的相关属性与方法的集合，所有的事物都可以是对象，例如数值 字符串 数组 函数等等

对象是由属性与方法的集合

• 属性：事物的特征，在对象中用属性表示(常用名词)
• 方法：事物的行为，在对象中用行为表示（常用动词）

为什么需要对象？

保存一个值时，可以用到变量，保存多个值时，可以用到数组表示。对象可以表示事物的具体信息，让结构更清晰。

如何创建对象

• 利用字面量创建对象
• 利用new Object创建对象
• 利用构造函数创建对象

采用字面量的方式创建对象

<script>

    // 使用对象
    var object = {
        name:'尧子陌',
        age :24,
        sex:"男",
        height:'173cm',
        sayHi:function() {
            console.log('爱学习 爱劳动 爱国家')
        }
        
    }
    // 调用对象的属性
    console.log(object.name);
    console.log(object['name'])
    // 调用对象的方法
    object.sayHi()

</script>

注意事项

• 对象之间采用键对值的形式 中间用英文状态下的冒号相隔开
• 多组属性之间用英文状态下的逗号相隔开
• 调用对象的方法切记不要忘记小括号

如何调用对象的属性与方法呢

调用对象的属性

• 对象.属性
• 对象['属性']

调用对象的方法

• 对象.方法()

变量与属性 函数与方法的区别

• 变量是单独声明赋值 单独存在
• 属性是对象里面的变量 不需要声明 用来描述事物的特征
• 函数是单独存在 通过 函数名（）来进行调用
• 方法是对象里面的函数，通过 对象.方法（）来进行调用。用来描述事物的行为与功能

利用new Object创建对象

注意事项

• 使用new Object创建对象并采用等号赋值的方式，添加对象的方法和属性。
• 多组属性之间采用分号相隔开；
• 调用对象的方法和属性和字面量创建对象一致

<script>
  var object = new Object();
  object.name = '尧子陌';
  object.sex= '男';
  object.height = '175cm';
  object.kill = function() {
    console.log('爱生活')
  }
  console.log(object)
   console.log(object.name);
   object.kill()
</script>

构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它与new一起使用，把对象中公共的属性与方法抽取出来，封装到函数里面。

注意事项

• 构造函数名的首字母要大写
• 构造函数不需要return 便可以返回结果
• 构造函数必须跟new关键字一起使用
• 属性与方法前面必须要使用this

 <script>
    function Star(name,sex,age,behavior) {
        this.name = name;
        this.sex = sex;
        this.age = age ;
        this.behavior = function(){
            console.log('会说 会唱')
        }
    }

    var  people1 = new Star('尧子陌','男',"24");
    console.log(people1)
    people1.behavior()
</script>

构造函数的案例

使用构造函数创建猪八戒 后羿两个对象

<script>
    function Hero(name,sex,age) {
        this.name =name;
        this.sex = sex;
        this.age = age;
        this.skill = function(name) {
            console.log(name)
        }

    }
    var people1 = new Hero('猪八戒',"男",'1200');
    people1.skill("毫发无损");
    console.log(people1)
    
    var people2 = new Hero('后羿',"男",'1200');
    people1.skill("只识弯弓射大雕");
    console.log(people2)


</script>

构造函数与对象

• 构造函数抽取对象的公共属性与方法，泛指某一大类
• 使用new关键字创建的对象的过程被称为对象实例化

new关键字

new在执行过程

1.在内存中创建一个空对象

2.this指向这个新的对象

3.执行构造函数里面的代码 给这个新对象添加属性与方法

4.返回这个新对象（构造函数不需要return）

遍历对象

for( 变量 in 对象) {
    
}

变量用key表示 但还是简写k

<script>
   var obj = {
       name:'尧子陌',
       sex:"男",
       age:"18",
       skill:function() {
           return "天生帅气 人见人爱"
       }
   }
   for(var k in obj) {
       console.log(k) //打印对象的属性
       console.log(obj[k]) //打印对象的属性值
   }


</script>

总结

• 对象可以让结构更加清晰
• 对象是复杂类型object
• 本质：对象就是一组无序的相关属性与方法的集合
• 构造函数是泛指一大类
• 对象是指具体的一个的事物
• 使用for in可以遍历对象

js内置对象

javascript中对象分为3种：自定义对象  内置对象  浏览器对象

前面两种对象是js基础，属于ECMAscript;浏览器对象属于我们js独有的

内置对象属于js语言自带的一些对象，这些对象供开发者使用。提高开发效率。

js内置的对象：Math  Data   Array  string等等

如何查文档呢

MDN:developer.mozilla.org/zh-CN/

如何学习对象中的方法？

• 查看该方法的功能
• 查看里面参数的意义和类型
• 查看返回值的意义和类型
• 通过demo进行测试

Math对象

Math是js中的内置对象，它拥有数学常数属性和数学函数方法 ，它并不是一个函数对象。
Math.max:返回多个数值中的最大值     Math.min:返回多个数值中的最小值

<script>
    console.log(Math.PI) //打印圆周率
   console.log(Math.max(5,20,60,100))  //获取最大值
   console.log(Math.min(5,20,60,100))  //获取最小值
</script>,

案例：封装一个属于自己的数学对象，里面有PI 最大值和最小值。

<script>
  var myMath = {
      PI:3.141592653589793,
      Max:function() {
          var max = arguments[0];
          for(var i = 0;i<arguments.length;i++) {
              if(max<arguments[i]) {
                  max = arguments[i]
              }
          }
          return max;
      },
      Min:function() {
          var min = arguments[0];
          for(var i = 0;i<arguments.length;i++) {
              if(min > arguments[i]) {
                  min = arguments[i]
              }
          }
          return min;
      }
      
  }

//   调用对象
console.log(myMath.PI) //获取圆周率
console.log(myMath.Max(5,20,450,650)); //获取最大值
console.log(myMath.Min(20,1,6,90,50)); //获取最小值

</script>

Math对象中常用的方法

取绝对值方法:Math.abs()

<script>
    console.log(Math.abs(1)) //1 
    console.log(Math.abs(-1)) //1 
    console.log(Math.abs('-2')) //2 会将字符串的2转换成数值2
    console.log(Math.abs('尧子陌')) //遇到非数字 直接显示NaN

</script>

三个取整方法

• Math.floor() 向下取整
• Math.ceil() 向上取整
• Math.round() 四舍五入取整

<script>
// Math.floor() 向下取整
console.log(Math.floor(-2.5)) // -3 
console.log(Math.floor(1.8))  // 1
console.log(Math.floor(2.5))  // 2
console.log(Math.floor(0.5))  // 0


//Math.ceil() 向上取整
console.log(Math.ceil(2.6)) //3
console.log(Math.ceil(5.8)) // 6 
console.log(Math.ceil(-1.5))// -1 
console.log(Math.ceil(0.6)) //1


//Math.round() 四舍五入取整
console.log(Math.round(2.6)) //3
console.log(Math.round(5.8)) // 6 
console.log(Math.round(-1.5))// -1 
console.log(Math.round(0.6)) //1
</script>

注意:Math.round(-1.5)及Math.ceil(-1.5)会往大的取值

获取随机数

Math.random() ：生成随机数（0~1)

<script>
  console.log(Math.random()) //生成0~1之间的随机数
</script>

生成[min,max]之间的随机整数 包括max min

  Math.floor(Math.random() * (max - min + 1)) + min; 

案例：生成1~10之间的任意整数

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

    console.log(getRandom(1,10))  //生成1~10之间任意的整数
</script>

猜数字游戏

<script>
    // 封装一个获取随机数的函数
       function getRandom(min,max) {
        return  Math.floor(Math.random()*(max-min+1))+min
    } 

    var random = getRandom(1,10);

   

    while(true) {

        var userName  = prompt("请输入数字"); //必须写在while语句里面 输入错误，则会一直会弹出输入框的结果
        
        if(userName>random) {
            alert("对不起 你猜大了")
        }else if(userName<random) {
            alert("对不起 你猜小了")
        }else  {
            alert("恭喜你 你猜对了");
            break;
        }
    }
</script>

日期对象

注意事项

• Date对象和Math对象不一样，它属于构造函数
• Date对象用来处理日期和时间

获取当前的时间

<script>
    var time = new Date();
    console.log(time) //获取当前时间
</script>

Date()里面的参数

• Date()里面的参数代表时间 一般用字符串的形式写入参数

<script>
    var time = new Date('2020-7-17  15:49');
    console.log(time) 
</script>

日期格式化

案例：拼出当前的日期

<script>
  var date = new Date(); //实例化对象

  var year = date.getFullYear() //返回当前的年份
  var month = date.getMonth()+1  //获取当前的月份，由于返回的月份比实际月份小一 所以加1 
  var dates= date.getDate();// 获取当前日期
  var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
  var days = date.getDay() //获取当前星期几

  console.log('今年是:'+year+"年" +month+"月"+dates+"日 "+arr[days])
</script>

封装一个日期格式化函数

<script>
    function getTimer() {
        var date = new Date();
        var h  = date.getHours() //获取当前的时间
         h= h<10?"0"+h:h
        var m = date.getMinutes()//获取当前的分钟
          m= m<10?'0'+m:m
        var s = date.getSeconds() //获取当前的秒
          s= s<10?"0"+s:s;
        return h+":"+m+":"+s
    }
   console.log(getTimer())
</script>

获取日期的总的毫秒数（时间戳）

共有四种方法

<script>

    var date = new Date();
    console.log(date.valueOf()) 
    console.log(date.getTime())
    console.log(+new Date()) 
    console.log(Date.now()) //h5新增方法
</script>

倒计时

核心算法

• 用户输入的时间减去当前的时间 即为倒计时
• 用时间戳来做，用户输入的时间总毫秒数减去当前时间总毫秒数，得到的就是剩余的时间的毫秒数。
• 把剩余时间的总毫秒数转换为天 时 分 秒

  

<script>
    function  countTime(time) {
        var nowTime = +new Date() //获取当前时间的总毫秒数
        var inputTime = +new Date(time) //获取用户输入的总毫秒数
        var times = (inputTime-nowTime) /1000  //得到总秒数
        var d = parseInt(times/60/60/24); 
        d = d<10?'0'+d :d
        var h = parseInt(times/60/60%24);
        h = h<10?'0'+h :h
        var m =parseInt(times/60%60);
        m = m<10?'0'+m :m
        var s = parseInt(times%60)//取整
        s = s<10?'0'+s :s

        return d +"天"+ h +"时"+m +"分"+s +"秒"


    }
    

    console.log(countTime("2020-10-17 18:00:00"))
</script>

数组

• new Array() 若没有参数 则默认为空数组
• new Array(5) 参数若有一个数字 则代表当前数组的长度
• new Array(5,5,6) 参数若有2个及2个以上 里面则是数组元素

 <script>
    var arr1 = new Array() //声明一个空数组
    var arr2 = new Array(5) //一个参数则代表数组的长度
    var arr3 = new Array(5,6,9,89) //两个以上的参数则代表数组元素

    console.log(arr1)
    console.log(arr2)
    console.log(arr3)
</script>

如何检测是否为数组

• 通过instanceof 用来检测类型是否为数组
• 通过Array.isArray(参数)来检测是否为数组

上述方法 若参数为数组 则显示true 若参数不是数组 则返回false

instanceof

<script>
    var arr = [];
    var obj = {}
    console.log(obj instanceof Array)//instanceof 用来检测类型是否为数组
    console.log(arr instanceof Array);//instanceof 用来检测类型是否为数组
</script>

Array.isArray()

<script>
    var arr  = [];
    var obj = {};
    console.log(Array.isArray(arr)) //isArray()用来检测是否为数组 
    console.log(Array.isArray(obj)) //isArray()用来检测是否为数组

</script>

通过判断数组的方式来反转数组

<script>
    /* 反转数组 */
    function reverse(arr) {
        if(Array.isArray(arr)) {
            var newArr = [];
            for(var i = arr.length-1;i>=0;i-- )  {
                newArr[newArr.length] = arr[i]
            }
            return newArr
        }else {
          return '不属于数组类型 请重新输入数组'
        }
        

    }
   
    console.log(reverse([5,50,60,96,50]))  
    console.log(reverse(5,50,60,96,50))    
</script>

数组方法

push()

<script>
    var arr  = [1,2,3];
    console.log(arr.push(4,5,6))  //显示的是数组的个数
    console.log(arr) //原数组也会改变
</script> 

注意事项

• push是可以给数组的末尾添加一个或者多个数组元素
• push（）后面的参数直接写数组元素即可
• push完毕之后 显示的是新数组长度
• 原数组的也会发生变化

unshift()

<script>
     var arr = [20,50,60,90,90];
     console.log(arr.unshift("尧子陌","hello")); // 返回的是新数组的长度
     console.log(arr) 
</script>

注意事项

• unshift是可以给数组的开头 添加一个或者多个数组元素
• unshift()后面的参数直接写数组元素即可
• unshift完毕之后 显示的是新数组的长度
• 原数组的也会发生变化

pop()

<script>
    var arr = [5,20,60,90,45,50];
    console.log(arr.pop()); //50
    console.log(arr) 
</script>

注事事项

• pop()是删除数组的最后一项元素 返回值是数组的最后一个元素
• pop()里面没有参数
• 原数组也会发生改变

shift()

<script>
    var arr = [5, 20, 60, 82, 80, 85];
    console.log(arr.shift()) //5
</script>

注意事项

• unshift是删除数组的第一个元素
• 返回值是数组的第一个元素
• unshift（）里面没有参数
• 原数组会发生变化

案例

把一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中的工资超过2000的删除，剩余的放到新数组里面

<script>
    var arr = [1500, 1200, 2000, 2100, 1800, 2300, 2500, 6500];
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] > 2000) {
            newArr.push(arr[i]) //采用push的方法 把大于2000的数组元素存储到新数组
        }
    }
    console.log(newArr);
</script>

数组排序

reverse()

目的：实现数组反转

<script>
    var arr = ['pink', 'balck', 'yellow', 'red'];
    arr.reverse() //实现数组反转效果
    console.log(arr)
</script>

sort()

目的:数组排序

• a -b：实现升序
• b -a :实现降序

<script>
    var arr = [50, 60, 30, 60, 8, 20];
    arr.sort(function(a, b) {
        return a - b //a - b 是升序   b-a是降序
    })
    console.log(arr)
</script>

数组索引方法

indexOf()

• 参数为数组元素，返回的结果是该数组元素的索引号，从前面开始查找。
• 如果数组中没有该数组元素，且返回的索引号为-1

<script>
    var arr = ["尧子陌", "临风笑却世间", '22', '33', '55'];
    console.log(arr.indexOf('临风笑却世间')) //1
    console.log(arr.indexOf('惊鸿')) // -1
</script>

lastIndexOf()

• 参数为数组元素 返回的结果为该数组元素的索引号，从后面开始查找
• 如果数组中没有该数组元素，则返回的索引号为-1

<script>
    var arr = ['尧子陌', '惊鸿', '220', '550', '665', '尧子陌', '惊鸿', '220', '550', '665'];
    console.log(arr.lastIndexOf('惊鸿')) // 6
    console.log(arr.lastIndexOf('520')) // -1
</script>

数组去重(重点)

思路如下

• 遍历旧数组
• 拿旧数组的数组元素去查询新数组，如果该数组元素在新数组没有出现过，则添加，反之则不添加

<script>
    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 // 返回新数组

    }
    console.log(unique(['c', 'a', 'c', 'b', 'd', 's', 'c', 'aa', 'b', 'a', 'a']))
</script>

数组转换成字符串

toString()

• 利用toString()将数组转换成字符串

<script>
    var arr = [20, 50, 60, '尧子陌'];
    console.log(arr.toString()) //控制台打印结果
</script>

join(分隔符)

• 利用join可将数组转换成字符串，另外还可以跟上分隔符

<script>
    var arr = [20, 50, 60, '尧子陌'];
    console.log(arr.join("&")) //控制台打印结果
</script>

字符串对象

思考问题:

字符串为基本数据类型，为什么会有方法和属性呢?很简单，因为有基本包装数据类型

基本包装类型

• 何谓基本包装类型呢，简单而言，就是把基本数据类型转换成复杂数据类型

<script>
    var str = 'strong';
    console.log(str.length) //6

/*
1.利用临时变量把基本数据类型包装成复杂数据类型
    var temp = new String('strong');
2.把临时变量赋值给str
    str = temp;
3.销毁临时变量temp
    temp = null
*/
</script>

特殊引用类型

Js中有三种特殊引用类型：Number String Boolean

字符串的不可变性

利用变量名可将字符串重新赋值，但相当于在内存中重新开辟一块空间，因此不要拼接字符串，会造成电脑卡顿

根据字符返回索引位置

• indexOf("查找的字符元素",[起始的位置])
• lastIndexOf("查找的字符元素"，[起始位置])

注意事项

• 使用lastIndexOf()的时候，第二个参数为从哪个索引号开始查找，是从右往左查找的

<script>
    var str = 'acdefghibcdezafghdefghaijklbmnb';
    console.log(str.indexOf('a', 3)); //查找a从索引3开始查找
    console.log(str.indexOf('b', 3)) // 查找b从索引3开始查找
    console.log(str.lastIndexOf('b', 26)) //查找b从索引26开始查找
</script>

返回字符位置(重点)

查找字符串 abcofoxyozzopp 出现的位置及次数

<script>
    var str = 'abcofoxyozzopp';
    var num = 0; // 统计o出现的次数
    var index = str.indexOf('o') //查找o第一次出现的位置
    while (index !== -1) {
        console.log(index);
        num++
        index = str.indexOf('o', index + 1)

    }
    console.log('o出现的次数：' + num)
</script>

思路如下

• 先查找第一个o出现的位置
• indexOf()的索引只要不是-1，便继续向下查找
• indexOf()只能查找第一个o,所以后面的查找，一定是当前索引加1，从而继续查找

根据位置返回字符

charAt(index):根据位置返回字符

<script>
    var str = 'andy'
    console.log(str.charAt(2)) //d  根据索引位置返回字符
</script>

利用charAt()返回字符串的每一项

<script>
    var str = 'YaoZiMo';
    for (var i = 0; i < str.length; i++) {
        console.log(str.charAt(i)) //打印字符串的每一项元素

    }
</script>

charCodeAt()：根据位置返回字符串相对应的ASCII码

<script>
    var str = 'andy'
    console.log(str.charCodeAt(2)) //100  根据索引位置返回相对应的字符ASCII码
</script>

str[index]:根据索引位置返回字符（具有兼容性）

<script>
    var str= 'andy';
    console.log(str[2]) //d
</script>

案例

判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符 并统计次数

• 核心算法：利用charAt()遍历这个字符串
• 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在就+1
• 利用遍历得出最大值和字符

<script>
    var str = 'abcoefoxyozzopp';
    var obj = {};
    for (var i = 0; i < str.length; i++) {
        var charts = str.charAt(i)
        if (obj[charts]) { // obj[charts]得到是属性值
            obj[charts]++
        } else {
            obj[charts] = 1;
        }
    }
    console.log(obj)

    //开始遍历对象
    var max = 0;
    var ch = ""
    for (var k in obj) {
        if (obj[k] > max) {
            max = obj[k];
            ch = k;
        }
    }

    console.log("次数最多的字符:", ch)
    console.log("次数为:" + max)
</script>

字符串的其它方法

concat(str1,str2,str3...)

<script>
    var str = 'hello';
    console.log(str.concat('word')) //helloword
</script>

substr(star,length)

<script>
    var str = 'hello my name is china';
    console.log(str.substr(2, 3)) //llo
</script>

replace('被替换后字符'，'替换后的字符')

<script>
    var str = 'hello hello'
    console.log(str.replace('o', 'y'))
</script>

案例

将下列字符串中的‘a’替换为‘b’

<script>
    var str = 'aaccvricunrbeuaaaaaadeufban';
    while (str.indexOf('a') !== -1) {
        str = str.replace('a', 'b')
    }
    console.log(str)
</script>

将字符串转换为数组

split('分隔符')

目的：将字符串转换成数组

<script>

    var str = 'pink,blue,yellow';
    console.log(str.split(','))

    var str = 'hello&dark&yellow';
    console.log(str.split('&'))
</script>