JavaScript入门模板字符串/严格模式/Ascll码/Math/进制转换 Day08

闻鹤于野

已于 2022-10-10 17:56:56 修改

阅读量66

点赞数

分类专栏：二阶段文章标签： javascript 前端开发语言

于 2022-08-25 17:36:10 首次发布

本文链接：https://blog.csdn.net/qq_63354840/article/details/126498104

版权

二阶段专栏收录该内容

34 篇文章 0 订阅

订阅专栏

模板字符串

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

var message = 'world'
var str = `helllo: ${message}`
console.log(str)   //hello:world

作用：

字符串拼接更加方便

function test(){
    var a = 10
    var b = 20
    var c = `${a}+${b}=${c}`
    console.log(c)  // 10 + 20 = 30
}
test()

换行不用连接符

function test(){
    var str = `<div>`
                <h2>标题</h2>
                <p>拼接字符串，换行不用连接符</p>
                </div>
            document.write(str)
}
test()

练习：用JS实现表格

<style>
			table {
				width: 1200px;
				margin: 50px auto;
			}
			table tr {
				text-align: center;
				line-height: 40px;
			}
			table th,
			tr,
			td {
				border-bottom: 1px dotted gray;
			}
		</style>
	</head>
	<body>
		<script>
			var students = [
				{ number: 1001, name: 'jack', score: 98, gender: '男' },
				{ number: 1002, name: 'rose', score: 95, gender: '女' },
				{ number: 1003, name: '小丽', score: 85, gender: '女' },
				{ number: 1004, name: 'tom', score: 88, 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>
                                    </tr>`
                
			})

			var str = '<table>' + trStr + '</table>'

			document.write(str)

严格模式

不严格体现：

变量不声明也能使用
函数形参可以重复（后者覆盖前者）

开启严格模式：

'use strict'

ASCII码

ascll码

只支持拉丁文，包含英文，中文会乱码

GBK ：

中文简体编码

Unicode编码

charCodeAt()方法

用cgarCodeAt()方法判断编码的字符串长度

var str = 'javascript编程实现学生表格显示'
			var count = 0 // 统计字节个数
			for (var i = 0; i < str.length; i++) {
                if(str.charCodeAt(i) > 255){
                    count += 2
                }else{
                    count += 1
                }
            }
            document.write('字符串中字节个数是 '+count)
/*
编写一个方法，求一个字符串的字节长度。 一个英文字符占用一个字节，一个中文字符占用两个字节
提示:中文字符unicode编码大于255
    字符unicode编码
     str.charCodeAt(0)
如 'jt编程实现学生表格显示'
     分析:
         初始化统计字节个数变量 count=0
         循环遍历字符串
         判断当前字符unicode编码是否大于255
             如果大于 count += 2 
             如果小于 count += 1  

*/

		function test() {
				var obj = {
					name: 'jack',
					age: 18,
					//a:1
				}
				//判断对象obj中是否有属性 a
				console.log('obj.a ', obj.a)
				// if语句条件表达式值为undefined、null、''、0 自动转为布尔值 false
				if (obj.a) {
					console.log('存在a')
				} else {
					console.log('不存在a')
				}
			}
			// test()

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 随机数

 /*
   返回m到n之间的随机数
     m~n     Math.floor(Math.random()*(n-m) + m)  
*/
        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)

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

ceil 向上取整