前言
今天主要学习了模板字符串,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实现表格
代码如下(示例):
<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
代码如下(示例):
<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()
代码如下(示例):
<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. 0~10随机数
Math.random() 0~1
Math.random() * 10
2. 循环10000次
{
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>
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>