模板字符串
ES2015前,字符串拼接使用引号'', 但在换行操作和输出变量值时不方便，ES2015后, 字符串拼接使用反引号 ``（tab键上面） ,引用变量时可以使用 ${变量名}
-
模板字符串
var str = 'hello' var str = "hello" var str = `hello` 模板字符串 模板语法 `${变量}` ${简单运算} -
作用
2.1字符串拼接 2.2换行不用连接符 // 2.1字符串拼接 输出a+b=c function test2(){ var a = 10 var b = 20 var c = a + '+' + b + ' = '+ (a+b) console.log(c) } // test2() function test3(){ var a = 10 var b = 20 var c = `${a}+${b}=${a+b}` //比test2更具可读性 console.log(c) }
3.练习
/*js编程实现学生表格显示
1. 静态表格
2. javscript代码显示静态表格
3. 学生数据与表格关联 */
<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>
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 tr = ''
students.forEach(function(students) {
tr = tr + `<tr>
<td>${students.number}</td>
<td>${students.name}</td>
<td>${students.score}</td>
<td>${students.gender}</td>
</tr>
`
})
var str = '<table>' + tr + '</table>'
document.write(str) */
// 法二
var trArr = students.map(function (students) {
return `<tr>
<td>${students.number}</td>
<td>${students.name}</td>
<td>${students.score}</td>
<td>${students.gender}</td>
</tr>`
})
var str=trArr.join('')
document.write('<table>'+str+'</table>')
严格模式
不严格体现
- 变量不声明也能使用
- 函数形能可以重复
开启严格模式 ：'use strict'
<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>
字符串字节长度
/*
编写一个方法，求一个字符串的字节长度。 一个英文字符占用一个字节，一个中文字符占用两个字节
提示:中文字符unicode编码大于255
字符unicode编码
str.charCodeAt(0)
如 'jt编程实现学生表格显示'
分析:
初始化统计字节个数变量 count=0
循环遍历字符串
判断当前字符unicode编码是否大于255
如果大于 count += 2
如果小于 count += 1
// 法一
*/
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)
// 法二
function testCharcode() {
var str = 'js编程实现学生表格显示'
var n = str.length
var bytes = n
for (var i = 0; i < n; i++) {
if (str.charCodeAt(i) > 255)
bytes++
}
console.log('bytes为', bytes);
}
testCharcode()
统计字符个数
/*
统计字符串中不同字符的出现次数?
'abcdefabcadefkmmkggcc'
1. 定义一个空对象存储字符出现次数，属性名是字符，属性值对应字符出现次数 {a:2,b:3...}
2. var obj = {}
obj.a = 1 {a:1}
obj.b = 1
3. 循环遍字符串
判断obj对象中是否已经有该字符
如果有值加一
如没有，作为新属性添加，值赋值为1
*/
function getCountString() {
var str = 'abcdefabcadefkmmkggcc'
var obj = {} //存储各个字符出现次数
// 循环遍历字符串
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i) // a
// 判断obj对象中是否已经有该字符
// 当对象属性是变量时，通过中括号访问
if (obj[chars]) {
obj[chars]++
} else {
obj[chars] = 1
}
}
// 遍历对象for-in
for(var key in obj){
console.log('key: ',key + ' value : ',obj[key])
}
}
getCountString()
数学对象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
...
function test1(){
var r = Math.random() // 0 ~ 1 (包含0不包含1)
document.write(r)
}
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()
function test3(){
var num = -9
var num1 = Math.abs(num) // 取绝对值
document.write(num1)
}
// test3()
function test4(){
// var m = Math.max(34,56,78,65,98) // 取最大值
var m = Math.min(34,56,78,65,98) // 取最小值
document.write(m)
}
test4()
示例
1、 生成10000个0~10随机数，统计每个随机数出现次数
分析:
1. 0~10随机数
Math.random() 0~1
Math.random() * 10
2. 循环10000次
3. 统计每个随机数出现次数
{
5:109,
3:789,
6:187
...
}
function getRandomCount(){
var obj ={} //记录随机数出现次数, 名称:随机数 值: 次数
for(var i=0;i<10000;i++){
var r=Math.round(Math.random()*10) //[0,10]
if(obj[r]){
obj[r]++
}else{
obj[r]=1
}
}
console.log(obj);
}
getRandomCount()
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) */
/*
返回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)
