一、模板字符串
1.用反引号创建的字符串叫模板字符串
var str=`helloword`
2.模板语法：`${变量}`
var message='word'
var str='hello':`${message}`
console.log(str)3.作用
1>字符串拼接更方便
var a=20
var b=10
var c=`${a}+${b}=${a+b}`
console.log(c)2>换行时不使用连接符(+),直接换行
var str=`<div>
<h2></h2>
</div>`
字符串模板列题：
//用js实现表格
<style>
table {
width: 1200px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
table th,
tr,
td {
line-height: 40px;
}
</style>
<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) {
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>二、严格模式
不严谨:1.变量不声明也能使用
2.函数形参可以重复（后者覆盖前者）
开启严格模式：<script> 'use strict' </script>
三、ASCll码
1.ASCLL码：美国标准信息编码，有128个字符---->只支持拉丁文，英文
2.中文简体编码：GBK---->汉字内码扩展规范---->共记录了21003个汉字或GB2313
3.unicode编码：万国码，统一码。（UTF-8就是一种8位的unicode字符集）
列题：charCodeAt方法求字符串字节长度
var str='javascript求字符串字节长度'
var count=0
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>255){ //得到当前数组下标的unicode码
count+=2
}else{
count+=1}
}
console.log('字符串字节长度位:'+count)统计不同字符出现的次数：
思想：用一个空对象来装字符，用if判断是否存在，存在加一，不存在当赋值语句赋给对象
循环遍历数组
注：if条件表达式值位undefined,null,'',0自动转为布尔值flase
var str='acbdacefdceacbdb'
var obj={} //用来装字符出现的次数数据
function fun(){
for(var i=0;i<str.length;i++){
var chars=str.chaAt(i) //拿到字符
if(obj[chars]){
obj[chars]++
}else{
obj[chars]=1}
}
for(var key in obj){
console.log('字符:'+key+'出现的次数:'+obj[chars])}
}fun()四、数学对象Math【类对象】
1.作用：处理数学问题
2.创建方式：不需要使用构造函数创建，它比较特殊直接使用就可以，这样的对象称为类对象
用Math.random()来生成0-1之间的随机数，生成数字包括0，不包括1
4.取整方法：round,ceil,floor
Math.ceil--->向上取整，如10.1取整为11
Math.floor--->向下取整，如10.9取整为10
Math.round--->四舍五入
5.绝对值abs:Math.bas()-->取绝对值
6.最大值max：console.log(Math.max(1,2,3,4))-->得到最大值为4
7.最小值min：console.log(Math.min(1,2,3,4))-->得到最大值为1
列题：生产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(20,30)
console.log(r)0~10随机数10000个，统计出现次数
var obj={}
function getRandom(){
for(var i=0;i<10000;i++){
var r=Math.floor(Math.random()*10)
if(obj[r]){
obj[r]++
}else{
obj[r]=1}
}
for(var key in obj){
console.log('数字'+key+'出现的次数'+obj[key])}
}getRandom()
实现表格
<style>
table {
width: 1200px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
table th,
tr,
td {
line-height: 40px;
}
</style>
<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) {
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>
//用map实现表格：
<style>
table{
width: 1200px;
margin: 0 auto;
}
table th,tr,td{
text-align: center;
line-height: 40px;
border-bottom:1px dotted black;
}
</style>
<script>
var students = [{
number: 1001,
name: 'jack',
score: 98,
gender: '男'
},
{
number: 1002,
name: 'rose',
score: 95,
gender: '女'
},
{
number: 1003,
name: '小丽',
score: 85,
gender: '女'
},
]
var newArr=students.map(function(item){
return `<tr>
<td>${item.number}</td>
<td>${item.name}</td>
<td>${item.score}</td>
<td>${item.gender}</td>
</tr>`
})
var str=newArr.join('')
var newStr=`<table>${str}</table>`
document.write(newStr)
</script>渲染表格：
<style>
table {
width: 1200px;
margin: 0 auto;
border: 1px solid black;
}
table th,
tr,
td {
text-align: center;
line-height: 60px;
border-bottom: 1px dotted black;
/* border: 1px solid black; */
/* width: 90px; */
}
input {
width: 40px;
text-align: center;
}
img {
margin-top: 30px;
}
</style>
<script>
var productList = [{
id: '商品编号',
name: '商品信息',
url: '商品图片',
price: '商品价格',
num: '商品数量',
singlePrice: '商品总价',
state: '操作'
},
{
id: 1001,
name: 'js高级编程',
url: 'images/1.jpg',
price: 68.90,
num: 2,
singlePrice: '￥0',
state: '移入收藏',
state1: '删除'
},
{
id: 1002,
name: 'css高级编程',
url: 'images/2.jpg',
price: 55.89,
num: 3,
singlePrice: '￥0',
state: '移入收藏',
state1: '删除'
},
{
id: 1003,
name: 'html高级编程',
url: 'images/2.jpg',
price: 45.89,
num: 4,
singlePrice: '￥0',
state: '移入收藏',
state1: '删除'
}
]
var str=''
productList.forEach(function (item,index) {
if (index == 0) {
str=str+`<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.url}</td>
<td>${item.price}</td>
<td>${item.num}</td>
<td>${item.singlePrice}</td>
<td>${item.state}</td>
</tr>`
} else {
str=str+`<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td><img src="${item.url}" alt="商品图片"></td>
<td>${item.price}</td>
<td><button>-</button><input placeholder="0"><button>+</button></td>
<td>${item.singlePrice}</td>
<td><span>${item.state}</span><br><span>${item.state1}</span></td>
</tr>`
}
})
var newStr = `<table>${str}</table>`
document.write(newStr)
</script>
