微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

js第八天


前言

今天主要学习了模板字符串,js的严格模式,ASCII码,使用js实现表格,以及Math数学对象以及在js中常用的进制与进制转换,其实今天最主要的是示例练习,主要锻炼自己的思维能力。


一、模板字符串

模板字符串是是使用反引号(``)定义的字符串,例如:`hello`

模板语法:`${变量}`    `${简单运算}`

var message='world'

var str=`hello${message}`          //输出helloworld

作用:①字符串拼接,增加代码可读性

代码如下(示例):

var c = a + '+' + b + ' = '+ (a+b)    可以简化为 var c = `${a}+${b}=${a+b}`

 ②换行不用连接符 (多用于html标签使用)


二、严格模式

我们都知道 js 是一个相对不很严谨的语言,而且开发的时候,一些代码也不是很严格要求,而严格模式就是对开发的时候写的一些内容做了要求

js不严格体现: 1. 变量不声明也能使用 2. 函数形能可以重复

开启严格模式:

代码如下(示例):

 <script>
        'use strict'  // 开启严格模式
        // var num  //定义变量
        num = 100 //使用变量 给变量赋值
        console.log('num ',num)

        function fun(m,m){
            console.log('m ',m, ' m ',m)
        }
        fun(100,200)

    </script>


三、ASCII码

1.ASCII码 - as key

计算机只能存储 0101010 这样的二进制数字

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

ASCII码表 - 128个 

2.GBK

GBK是汉字内码扩展规范

共收录了21003个汉字

3.unicode 编码

 unicode 编码,也叫(万国码,统一码)

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

我们的 UTF-8 就是一种 8 位的unicode字符集

4.charCodeAt方法

中文字符unicode编码大于255

示例:编写一个方法,求一个字符串的字节长度。 一个文字符占用一个字节,一个中文字符占用两个字节

如 'jt编程实现学生表格显示' 分析: 初始化统计字节个数变量 count=0 循环遍历字符串 判断当前字符unicode编码是否大于255 如果大于 count += 2 如果小于 count += 1

代码如下(示例): 

 <script>
        var str='javascript编程实现学生表显示'
        var count=0
        for(i=0;i<str.length;i++){
            if(str.charCodeAt(i) > 255){
                count +=2
            }else{
                count +=1
            }
        }
        console.log(`javascript编程实现学生表显示的字节长度为${count}`)
    </script>

5.js实现表格

js编程实现表格显示 1. 静态表格 2. javscript代码显示静态表格 3. 学生数据与表格关联

方法一:使用数组方法map + join实现

 代码如下(示例):

<script>
        var students = [{
                number: 1001,
                name: 'jack',
                score: 98,
                gender: '男'
            },
            {
                number: 1002,
                name: 'rose',
                score: 95,
                gender: '女'
            },
            {
                number: 1003,
                name: '小丽',
                score: 85,
                gender: '女'
            },
        ]

        var arr = students.map(function (item) {
            return trStr = `
                      <tr>
                          <td>${item.number}</td>
                          <td>${item.name}</td>
                          <td>${item.score}</td>
                          <td>${item.gender}</td>
                     </tr> `
        })
        var arr=arr.join('')

        document.write(`<table>${arr}</table>`)
    </script>

方法二:

 代码如下(示例):

  <script>
         var students = [
        {number:1001, name:'jack', score:98,gender:'男'},
        {number:1002, name:'rose', score:95,gender:'女'},
        {number:1003, name:'小丽', score:85,gender:'女'},
        ]

        var trStr=''
        students.forEach(function(item,index){
          trStr=trStr+`<tr>
                         <td>${item.number}</td>
                         <td>${item.name}</td>
                         <td>${item.score}</td>
                         <td>${item.gender}</td>
                     `
            
        })
        document.write(`<table>${trStr}</table>`);
    </script>

样式设置:(这里方法一和方法二的样式设置基本一样)

<style>
        table {
            width: 1000px;
            margin: 50px;
            background: rgb(235, 226, 226);
            border-spacing: 0px;
            border-collapse: collapse;
        }

        tr {
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid palegreen;
            border-spacing: 0px;
        }
    </style>

6.统计字符个数

分析:1. 定义一个空对象存储字符出现次数属性名是字符,属性值对应字符出现次数 {a:2,b:3...}

2. var obj = {} obj.a = 1 {a:1} obj.b = 1

3. 循环遍字符串 判断obj对象中是否已经有该字符 如果有值加一 如没有,作为新属性添加,值赋值为1

 代码如下(示例):

<script>
        function getStringCount(){
            var str = 'abcdefabcadefkmmkggcc'
            var obj={} //存储各个字符出现次数
            // 循环遍历字符串
            for(i=1;i<str.length;i++){
                var chars=str.charat(i)
                // 判断obj对象中是否已经有该字符
					// 当对象属性是变量时,通过中括号访问
                if(obj[chars]){
                    obj[chars]++
                }else{
                    obj[chars] =1
                }
            } 
             // 遍历对象for-in
            for(var key in obj){
                console.log('key: ',key +  '  value : ',obj[key])
            }
        }
        getStringCount()
    </script>

 


四、Math 数学对象

学习javascript内置对象主要从四个方面:

1. 对象做什么的,有什么功能?

Object对象 存储名称值对的集合

Array数组 存储一系列有序数据的集合

String 字符串对象

2. 创建方式 

 var obj = new Object()
                    var obj = {name:'jack',age:18}
                    obj.name = 'jack'  
                    
                    
                    var arr = new Array()
                    var arr = [10,20,30]
                    arr.length

3. 属性 length

4. 方法

Math 数学对象 1. 处理数学问题

2. 创建方式 不需要使用构造函数创建,它比较特殊直接使用就可以,像这样的对象称为类对象

语法: Math.方法() 

3. 方法

random 随机

ceil 向上取整

floor 向下取整

round 四舍五入

abs max min ...

实例对象 和 类对象 var obj = new Object() obj = {} obj 实例对象 Math 类对象

Math的方法

1.Math.random()

这个方法是用来生成一个 0 ~ 1 之间的随机

 代码如下(示例):

<script>
        function test1(){
            var r = Math.random() // 0 ~ 1 (包含0不包含1)
            document.write(r)
        }
</script>

2.取整方法round,ceil,floor

ceil 向上取整   Math.ceil(需要取整的数)

floor 向下取整   Math.floor(需要取整的数)

round 四舍五入取整  Math.round(需要取整的数)

代码如下(示例):

<script>
        function test2(){
            var num = 10.4
            // var num1 = Math.ceil(num)
            // var num1 = Math.floor(num)
            var num1 = Math.round(num)
            document.write(num1)
        }
        test2()
       
</script>

3.绝对值abs

Math.abs() 是返回一个数字的绝对值

代码如下(示例):

<script>
         function test3(){
            var num = -9
            var num1 = Math.abs(num)
            document.write(num1)
        }
         test3()
       
</script>

4.最大值max 最小值min

代码如下(示例):

<script>
        function test4(){
            // var m = Math.max(34,56,78,65,98)
            var m = Math.min(34,56,78,65,98)
            document.write(m)
        }
        test4()
       
</script>

5.Math对象的方法

abs(x) 返回数的绝对值

acos(x)返回数的反余弦值

asin(x)返回数的反正弦值

atan(x)以介于-π/2与π/2弧度之间的数值来返回x的反正切值

atan2(y,x)  返回从x轴到点(x,y)的角度(介于-π/2与π/2弧度之间)

cos(x) 返回数的余弦

exp(x) 返回e的指数

log(x) 返回数的自然对数(底为e)

pow(x,y)  返回x的y次幂

sin(x) 返回数的正弦

sqrt(x)返回数的平方根

tan(x) 返回角的正切

toSource()  返回该对象的源代码

valueOf() 返回Math对象的原始值

Math示例

 1.生成10000个0~10随机数,统计每个随机数出现次数

分析:

                1. 0~10随机

                    Math.random()   0~1

                   Math.random() * 10

                2. 循环10000次

                3. 统计每个随机数出现次数

                    {

                        5:109,

                        3:789,

                        6:187

                        ...

                    }

代码如下(示例): 

 <script>
     

        var obj={}   //记录随机数出现次数, 名称:随机数  值: 次数
        for(i=1;i<=10000;i++){
            var num=(Math.random()*10)  //生成0~10随机数
            num=Math.floor(num)    // [0,10)
            if(obj[num]){
                obj[num]++

            }else{
                obj[num]=1
            }
        }
        for(var key in obj){
                console.log('key: ',key +  '  value : ',obj[key])
            }
    </script>

2.生成m到n之间的随机

 0~10 Math.floor(Math.random()*10)

10~20 Math.floor(Math.random()*10 + 10)

20~30 Math.floor(Math.random()*10 + 20)

30~50 Math.floor(Math.random()*20 + 30)

50~80 Math.floor(Math.random()*30 + 50) ....

m~n Math.floor(Math.random()*(n-m) + m) 

代码如下(示例): 

  <script>
        /*
          返回m到n之间的随机数
        */
        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(40,15)
        document.write(r)

    </script>


五、进制与进制转换

1.常用进制

进制与进制转换

            进制

               计数的一种方式, 现实生活中一般十进制计数

            十进制  0 ~ 9    

                      + 1  

                        10

                    满十进一

            二进制   0 ~ 1      计算机使用二进制

                    满二进一

                       10    11    100

                           +  1

                           -----

                             100  

                       2     3      4

            八进制    0 ~ 7  

                     满八进一

                     10   11  

                     8    9

                    计算机区分

                    010

            十六进制   0~9 A B C D E F

                    满十六进一

                      0x10  

2.进制转换

 1. 十进制转其它进制

             toString(进制)

            var num = 100

            -> 转二进制

            num.toString(2)  ->

   

 2. 其它进制转十进制

        parseInt(100,2) ->  二进制转十进制数

         parseInt(100,8) ->  八进制转十进制数

3.进制转换示例

代码如下(示例): 

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

        function test2(){
            var num = 27
            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>

 


原文地址:https://www.jb51.cc/wenti/3280797.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐