javaScript模板字符串、严格模式、编码字节长度

一、模板字符串

var str=`hello`模板字符串

模板语法`${变量}`

${简单运算}

    <script>// +号连接字符function test2(){var a=10var b=20var c=a+'+'+b+'+'+'='+(a+b)document.write(c)}test2()//语法： ${简单运算}// 模板语法`${变量}`function test3(){var a=10var b=20var c=`${a}+${b}=${a+b}`document.write(c)}test3()function test4(){var str= '<div>'+' <h2>模板字符串</h2>'+'<p>作用</p>'+'  <p>拼接字符串</p>'+'</div>'document.write(str)}test4()//语法： ${简单运算}// 模板语法`${变量}`function test5(){var str=`<div><h2>模板字符串</h2><p>作用</p><p>拼接字符串</p></div>`document.write(str)}test5()</script>

模板字符串案例：

利用js实现一个动态的表格

方法一：

js编程实现表格显示

1.静态表格

2.javascript代码显示静态表格

3.学生数据与表格关联

 <style>table {width: 1000px;margin: 50px, auto;}table tr {text-align: center;line-height: 30px;}table,th,tr,td {border-bottom: 1px solid gray;}</style>
<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: "lucy", score: 75, gender: "女" },]// 先设置一个空字符串var trStr = ''// 利用forEach遍历数组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)
</script>

方法2：利用map和join实现表格

    <script>// map映射出一个新的数组，将遍历后的元素放在里面var trArr=students.map(function(item){return `<tr><td>${item.number}</td><td>${item.name}</td><td>${item.score}</td><td>${item.gender}</td></tr>`})//   用join将元素拼接在一起var trStr=trArr.join('')var str=`<table>${trStr}</table>`document.write(str)</script>

二、严格模式

1.变量在未声明的情况下也可以使用，不报错

2.函数名可以重复

开启严格模式

<script>'use strict'//严格模式num=100  //给变量赋值console.log('num',num)function fun(m,m){console.log('m',m,'m',m)}fun(100,200)</script>

未加'use strict'

可以正常运行不报错

加了之后出现错误：Uncaught SyntaxError: Duplicate parameter name not allowed in this context

'use strict'使JavaScript的代码更加严谨化

练习：1.编写一个方法，求一个字符串的字节长度。一个英文字符占用一个字节，一个中文字符占用两个字节

提示:中文字符unicode编码大于255

 <script>
function testUnicode() {var str = 'javascript编程实现学生表格显示'var count = 0for (var i = 0; i < str.length; i++) {//循环遍历字符串if (str.charCodeAt(i) > 255) {//当前字符是中文还是英文count += 2} else {count += 1}}console.log('字节长度为 :',count)}testUnicode()</script>

2.统计字符串中不同字符的出现次数?

'abcdefabcadefkmmkggcc'

分析：

Object{

a:3

b:2

c:4

d:2

}

计数器：

count=0

count++

1.定义一个空对象存储字符出现次数，属性名是字符，属性值

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

三、Math数学对象

javascript内置对象

1.对象做什么，有什么功能

Object对象

存储名称值对的集合

Array数组

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

String 字符串对象

2.创建方式

var obj=nae Object()

var obj={}

obj.name="jack"

var arr=new Array()

var arr=[]

arr.length

3.属性

length

4.方法

Math 数学对象

1.处理数学问题

2.创建方式

不需要使用构造函数，它比较特殊直接使用就可以，这样的对象成为类对象

Math.方法()

3.方法

Math.random（）随机数

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

Math.ceil() 向上取整

Math.floor() 向下取整

Math.round() 四舍五入

 <script>// 取整的方法function test2(){var num=10.1var num1=Math.ceil(num)//向上取整11var num2=Math.floor(num)//向下取整10var num3=Math.round(num)//四舍五入10console.log(num1)console.log(num2)console.log(num3)}test2()</script>

Math.abs() 取绝对值

 <script>function test3(){var num=-9var num1=Math.abs(num)//求绝对值console.log(num1)}test3()</script>

Math.max() 取最大值

Math.min() 取最小值

 <script>function test4(){var m=Math.max(37,21,35,47,65,99,82)//求最大值var m1=Math.min(37,21,35,47,65,99,82)//求最小值console.log(m)console.log(m1)}test4()</script>

案例：

1.生成指定范围随机数 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~40 Math.floor(Math.random()*10+30)

40~50 Math.floor(Math.random()*10+40)

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

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

 <!-- 生成指定范围随机数 m~n之间的随机数 --><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(20,30)document.write(r)</script>

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

分析：

1.0~10随机数

Math.random() 0~1

Math.random()*10

2.循环10000次

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

 <script>var obj = {}//记录随机数出现的次数，名称：随机数   值：次数for (var i = 0; i < 10000; i++) {var r = Math.floor(Math.random() * 10)//0~9if (obj[r]) {obj[r]++} else {obj[r] = 1}}console.log(obj)</script>

四、进制之间的转换

进制与进制的转换

进制

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

十进制 0 ~ 9

满十进一

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

满二进一

10 11 100

---------

100

2 3 4

八进制 0 ~ 7

满八进一

10 11

8 9

计算机区分(前面加0)

010

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

满十六进一

计算机区分(前面加0x)

0x10

     <script>function test1(){var num=010var num1=0x11console.log(num,num1)}test1()
</script>

进制转换

十进制转其他进制

var num=100

->转二进制

num.toString(2)


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

其他进制转十进制

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

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

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