JavaScript学习笔记08

最新推荐文章于 2023-12-13 21:01:46 发布

Amy_cx

最新推荐文章于 2023-12-13 21:01:46 发布

阅读量437

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/amy_cx/article/details/126514269

版权

一、模板字符串

模板语法 `${变量}`
作用：
1.字符串拼接
2.换行输出,不用连接符

    <script>
        var msg='world'
        var str=`hello:${msg}`
        console.log(str) //hello:world

        //字符串拼接
        function test1(){
            var a=10
            var b=20
            var c=`${a}+${b}=${a+b}`
            console.log(c)
        }
        test1()

        //换行
        function test2(){
            var title = `模板字符串`
            var str = `<div>
                        <h3>${title}</h3>
                        <p>作用</p>
                       </div>`
            document.write(str)
        }
        test2()
    </script>

二、严格模式

不严格体现：
1.变量不声明也能使用
2.函数形参可以重复，但是后面会覆盖前面

开启严格模式：
'use strict'
开启之后不规范会报错

<script>
    'use strict'
    num = 10 
    console.log(num)//未声明变量，会报错，必须先声明再使用

    function test(a, a, b){
        console.log(a)
        console.log(b)
    }
    test(10, 20, 30)//报错，严格模式下函数参数不能重名，非严格模式输出20，30（重复，后面覆盖前面）
    //报错信息为：Uncaught SyntaxError: duplicate formal argument a
</script>

Q：为什么要使用严格模式？

A： 1.消除代码运行的一些不安全之处，保证代码运行的安全；

2.提高编译器效率，增加运行速度；

3.为未来新版本的Javascript做好铺垫。

三、ASCII码

计算机只能存储 0101010 这样的二进制数字。我们可以简单的理解为， a ~ z / A ~ Z / $ / @ /… 之类的内容都有一个自己的编号，然后在计算机存储的时候是存储的这些编号，我们看的时候，也是通过这些编号再解析成我们要看到的内容给我们看到。

ASCll码只支持拉丁文(包含英文), 中文会乱码。

其他编码还有：

1.GBK

汉字内码扩展规范，共收录了21003个汉字，中文简体编码。

2.Unicode编码

我们看到，ASCII 码只有这 128 个字符的编码结构，但是因为 ASCII 出现的比较早，而且是美国发明的，早些时候这些内容就够用了，但对于世界来说是不够用的，所以就出现了 unicode 编码（也叫万国码，统一码）。

unicode 对照表就是一个和 ASCII 一样的对照表，只不过变得很大很大，因为存储的内容特别的多，而且包含了世界上大部分国家的文字，所以我们的文字和字符现在存储的时候，都是按照 unicode 编码转换成数字进行存储。UTF-8 就是一种 8 位的unicode字符集。

charCodeAt()方法：

charCodeAt(索引)就是返回对应索引位置的unicode编码。

示例：编写一个方法，求一个字符串的字节长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串字节长度</title>
    <!--
        编写一个方法，求一个字符串的字节长度。一个英文字符占用一个字节，一个中文字符占用两个字节
            提示：中文字符unicode编码大于255
                字符unicode编码
                str.charCodeAt(0)
            如'jt编程实现学生表格显示'
                分析：
                    初始化统计字节个数变量 count=0
                    循环遍历字符串
                        判断当前字符unicode编码是否大于255
                        如果大于count+=2
                        如果小于count+=1
    -->
</head>
<body>
    <script>
        var str = 'js编程实现学生表格显示' 
        var count = 0
        for(var i=0;i<str.length;i++){
            if(str.charCodeAt(i)>255){
                count += 2
            }else{
                count += 1
            }
        }
        document.write('字符串中字节个数是 '+count)  //输出：字符串中字节个数是 22 
        // console.log(str[0],' ',str.charCodeAt(0)) //106，j在Unicode编码里的十进制数表示为106
        // console.log(str[3],' ',str.charCodeAt(3)) //31243
    </script>
</body>
</html>

四、简单对象Object补充

在JavaScript中，可以使用“ . ”和“ [ ] ”来访问对象的属性。二者区别：“ . ”表示法一般作为静态对象使用时来存取属性。而“[ ]”表示法在动态存取属性时就非常有用。

遍历对象的方法：for in

for-in 遍历对象
            语法:
            for(var key in obj){
                //key属性
                //obj[key]
            }

for-in 可以循环遍历对象，数组，字符串。

遍历对象访问对象属性,

遍历数组，访问数组索引号,

遍历字符串，访问字符串索引号

练习：统计字符串中每个字符出现的次数。

<script>
    /*
            1.定义一个空对象存储字符出现次数，属性名是字符，属性值对应字符出现次数《a：2，b:3...}
            2.  var obj ={}
                obj.a =1 (a:1)
                obj.b = 1
                3.循环遍字符串
                    判断obj对象中是否已经有该字符
                    如果有值加一
                    如没有，作为新属性添加，值赋值为1
        */
    // 统计字符串中每个字符出现的次数
    function getCountString() {
        var str = 'abcdefabcadefkmmkggcc'
        var obj = {} //存储各个半符出现次教
        //循环遍历字符串
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i) // a
            //判断obj对象中是否已经有该字符
            //尚对象属性是变量时，通守中括号访问
            if (obj[chars]) {
                obj[chars]++
            } else {
                obj[chars] = 1
            }
        }
        // 遍历对象for-in
        for (var key in obj) {
            console.log('key:', key + ' value:', obj[key])
        }
    }
    getCountString()
</script>

五、Math

       1.处理数学问题
   2.创建方式
            不需要使用构造函数创建，它比较特殊，直接使用就可以，像这样的对象称为类对象。
            Math.方法()

        3.方法：
        random 随机数
        ceil 向上取整整数部分加1
        floor 向下取整整数部分减1
        round 四舍五入
        abs 绝对值
        max 最大值
        min 最小值
        pow(x,y) x的y次幂
        sqrt(x,y) x开y次根
        ……

示例1：生成10000个0~10的随机数，统计每个随机数出现次数。

<script>
    /*
        生成10000个0~10的随机数，统计每个随机数出现次数
        分析：
            1. 0~10随机数
                Math.random()     0~1
                Math.random()*10  0~10
            2.循环10000次
            3.统计每个随机数出现次数
    */
    var obj={} //记录随机数出现次数，名称：随机数  值：次数
    for(var i=0;i<10000;i++){
        var r=Math.floor(Math.random()*10)
        if(obj[r]){
            obj[r]++
        }else{
            obj[r]=1
        }
    }
    console.log(obj)
</script>

示例2：m~n的随机数。

<!--  m~n的随机数：Math.floor(Math.random()*(n-m)+m)  -->
<script>
    function getRandom(x,y){
        var n=Math.max(x,y)
        var m=Math.min(x,y)
        return Math.floor(Math.random()*(n-m)+m)
    }
    var r=getRandom(10,20)
    document.write(r) 
</script>

示例：小数取整。

<script>
    var num = 10.1
    var num1=10.9
    console.log(Math.ceil(num)) //11
    console.log(Math.ceil(num1)) //11

    console.log(Math.floor(num)) //10
    console.log(Math.floor(num1)) //10

    console.log(Math.round(num)) //10
    console.log(Math.round(num1)) //11
</script>

示例：绝对值、最大最小值

<script>
    console.log(Math.max(1,2,3,4,5)) //5
    console.log(Math.min(1,2,3,4,5)) //1
    console.log(Math.abs(-3)) //3
</script>

实例对象和类对象：

var obj = new Object()

var obj = {}

obj就是实例对象

Math 类对象

六、数字转换进制

        进制转换：
        1.十进制转其他进制
            toString(进制)
            十进制数除以进制，倒着取余数
        2.其他进制转十进制
            parseInt(数字，进制)

<script>
    function test1(){
        var num = 010   // 编程时八进制前加0
        var num1 = 0x11 //0x 十六进制
        console.log(num, num1)
    }

    //十进制转其他进制
    function test2(){
        var num = 100
        console.log('二进制 :', num.toString(2) )
        console.log('八进制 :', num.toString(8) )
        console.log('十六进制 :', num.toString(16) )
    }
    test2()
    //其他进制转十进制
    function test3(){
        var num = 100
        console.log( parseInt(num, 2) )
        console.log( parseInt(num, 8) )
        console.log( parseInt(num, 16) )
    }
    test3()
</script>