JavaScript语法基础

• 单行注释:///// 内容
• 在网页中按F12可见控制台（console）调试所写代码。

var str = 春眠不觉

• var：声明变量的关键字。浏览器分析可以看到var知道它背后有一个变量。

• str：可以随意命名变量名，但是有一定的命名规则，它通常被命名为有意义的名称，例如： var age = 19

• =：赋值符号，这是一作符号，其含义是将右侧的值赋值给左侧的变量。

• ’ '：单引号里面的值是字符串，而数字是不需要加单引号的。双引号也可以，但是为了节省空间，一般采用单引号。

• ;：在JavaScript在中间，分号可以加不加，分号用来区分两行语句，换行也可以做，建议不加分号。

• number：数字类型，例如： var n=18 18是数字类型。
• string：引号里面是字符串类型。
• bool：布尔类型 只有两个值：true 或false。
• undefined：例如：var aa中的aa没有赋值，就是undefined类型。 name是窗口对象window和JavaScript中编写window属性可以省略window的。 ===：完全等于(即数值和数值类型相同才是真的)。

1.算数运算符： - * / % 2.浮点数的精度:浮点数的最高精度是17位小数，但算术计算的精度远低于整数，解决方案是：

• 四舍五入法

var num = 2.51515 num = num.toFixed(2)  // 输出结果为：2.52 

• 先转化为整数，再转化为整数 转化为小数：

var a = 0.2 var b = 0.1 console.log((a*10 b*10)/10)  // 输出结果为：0.3 

3.递增和递减：

var n=10 n=n 2 // 依次加2 

var n=10 n  // 依次加1 

var n=10 n =2 // 依次加2 

**当递增运算单独存在时，会先计算递增运算；但当递增运算存在于其他表达式中时，会先输出n值，然后 ；如果希望先 ，输出新值需要使用 n。 **

• 用于过程控制。

if (m>0){ 
          alert('我比较大！') }else{ 
          alert(我比较小！) }  // 若符合条件，则执行我较大，否则执行我较小。 

• 只要有其中一个条件满足，那么运算结果就是True。

if (a>m || a<n){ 
        
	alert('console.log('True')')
}else{ 
        
	alert('console.log('Flase')')
}

// a>m或者a<n成立时，运算结果为ture。

• 只有当两个条件都为True的时候，运算结果才为Ture，否则为False。

if (a>m && a<n){ 
        
	alert('console.log('True')')
}else{ 
        
	alert('console.log('False')')
}

// 只有当a>m和a<n同时满足时，运算结果才为ture。

相当于取反。

• console.log('ture')的运算结果是True。
• console.log('!ture')的运算结果是False。

for(var i=1;i<=10;i++){ 
        
	console.log('i')
}
	
// var i：定义变量的初始值，只执行一次。
// i<=10：循环条件，只要i<=10的输出结果是True，就会执行循环体。

• 使用case后面的值与变量day比较，如果相等，则执行相应case后面的语句。
• 获取计算机当前时间：var now = new date()
• 获取当前计算机的日期：var day = now.getDay() switch语句的应用有局限性，主要在于只能进行 等于 比较。

switch(day):{ 
        
	case 1:
		console.log('学习理论知识')
		break
	case 2:
		console.log('学习理论知识')
		break
	case 3:
		console.log('企业实践')
		break
	case 4:
		console.log('企业实践')
		break
	case 5:
		console.log('总结经验')
		break
	case 6:
		console.log('休息和娱乐')
		break
	case 7:
		console.log('休息和娱乐')
		break
}

for(var i=1;i<=6;i++){ 
        
	console.log('这是取出的第'+i+'个球')
}

// 输出结果是：这是取出的第i（i<=6）个球

for(var i=1;i<=6;i++){ 
        
	console.log(`这是取出的第${ 
          i}个球`)
}

// 输出结果是：这是取出的第i（i<=6）个球

var sum=0
for(var i=1;i<=10;i++){ 
        
	sum=sum+i
}
console.log(sum)

// 实现的是1-10的和

• 当满足条件的时候，执行循环体里面的内容。

while(i<=6){ 
        
	console.log(`这是第${ 
          i}个球`)
	i++
}

// 当i<=6时，执行循环体里面的代码
// 输出结果是：这是第i（i<=6）个球

• continue：结束本次循环，继续i++

for(var i=1;i<10;i++){ 
        
	if(i == 5){ 
        
		continue
	}
	console.log(i)
}

// 输出结果是：1 2 3 4 6 7 8 9

• break：结束循环，继续执行循环后面代码。

for(var i=1;i<10;i++){ 
        
	if(i == 5){ 
        
		break
	}
	console.log(i)
}

// 输出结果是：1 2 3 4

• 函数的作用是为了做到代码复用，所以不要尝试修改函数代码。

var sum = 0
function he(){ 
        						// 定义一个函数使用function
	for(var i=1;i<=10;i++){ 
        
		sum=sum+i
	}
	console.log(sum)
}
he()

// 输出结果是1-10的和——55

两个undefined变量相加结果为NaN(not a number)表示不是一个数字。

• 外循环执行一次，内循环执行一遍。

for(var i=0;i<3;i++){ 
        
	for(var j=0;j<3;j++){ 
        
		console.log(i,j)
	}
}

// 输出结果是:(0，0)(0，1)(0，2)(1，0)(1，1)(1，2)(2，0)(2，1)(2，2)

• 交换变量的值需要借助其他的变量，不可以直接交换。

m=10 n=20 var temp=m //第一步先把m的值赋值给一个临时变量，m=undefinde,n=20,temp=10 var m=n //第二步再把n的值赋值给m，m=20,n=undefinde,temp=10 var n=temp //第三步把临时变量的值赋值给n,m=20,n=10,temp=undefinde

// 找出数组中的最大值
var numbers=[3,2,55,6,7,8]	// 定义一个数组
var max=number[0]			// 假设数组中第一个值是最大值
for(var i=1;i<numbers.length;i++){
	if(numbers[i]>max){			/*如果数组中第i个数大于max，则把i个数赋值给max*/
		max=number[i]			
	}
}
console.log(max)

// 输出结果是：55

• 最小值方法与最大值方法相同。

• 利用最大值的方法取出一个最大值和一个最小值，再计算平均分。

for(var i=1;i<5;i++){
	for(var j=1;j<=i;j++){
		document.write('★')		// 在网页中输入文本需要使用document.write()
	}
	document.write('<br/>')		// 在网页中换行
}

// 输出结果是：
★
★★
★★★
★★★★
★★★★★

• 通过比较将数组由小到大排序。

var a=[12,23,1,3,45,7]
for(var i=0;i<a.length;i++){
	for(var j=0;j<a.length-i-1;j++){
		if(a[j]>a[j+1]){
			// 给两个值换位置
			var temp=a[j]
			a[j]=a[j+1]
			a[j+1]=temp
		}
	}
}

// 输出结果是：1 3 7 12 23 45

// 找到行数与列数的关系，利用for循环完成
for(var i=1;i<=9;i++){
	for(var j=1;j<=i;j++){
		document.write(`${j}*${i}=${i*j}&nbsp;&nbsp;`)	// &nbsp是空格
	}
	document.write('<br/>')
}

// 输出结果是：九九乘法表

变量的势力范围，一个变量可以在那里使用。

• 在函数外部定义的变量叫全局作用域，可以在任何地方访问。
• 在函数内部定义的变量叫局部作用域，只能在函数内部访问。

• 当声明处于使用变量后面时，浏览器会将变量的声明提前，这叫做变量提升。

console.log(a)
var a=10

• 上面的代码真正执行时，浏览器其实将代码改成下面这样：

var a
console.log(a)		// 所以输出结果是undefined
a=10

• 当函数的调用放到函数定义前，浏览器会将整个函数的定义放到前面来，这与变量的提升不一样。

f1()
function f1(){ 
        
	console.log('f1执行起来了！')
}

// 运行结果是：f1执行起来了！

var num = 456		// 函数外部是全局作用域
function f1(){		// f1函数是一个局部作用域
	var num = 123
	function f2(){		// f2函数是一个局部作用域
		// 就近原则
		console.log(num)
	}
	f2()
}
f1()

// 全局作用域包括了f1和f2作用域，f1作用域包含了f2作用域
// 运算结果是：123

1.作用域就是一块内存空间。 2.函数外部叫做全局作用域，定义在全局作用域的变量，在所有地方都可以访问。 3.每个函数内部都是一块局部作用域，定义在局部作用域内的变量，只能在此作用域内部访问，也就是说定义在函数内部的变量，只能在函数内部访问。 4.作用域是有层次的，当在一个作用域内（也就是在一个函数内）访问某个变量时，首先在这个作用域内寻找有没有定义变量，如果定义了，使用此作用域内的变量，如果没有定义，向上一级的作用域中寻找，如果有，就用，如果没有，继续向上寻找，一直寻找到全局作用域中，如果全局作用域中也没有此变量的定义，则会报错：此变量没有定义。

• Math对象不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关的运算（求绝对值，取整，最大值等）可以使用Math中的成员。

• Math.PI是一种属性，它的功能是圆周率。

var r = 5
console.log(Math.PI*r*r)		// Math.PI规定用作圆周率使用


// 输出结果是：78.53981633974483

• Math.floor(),Math.cell(),Math.round()是一种方法。 1.Math.floor()的功能是向下取整。

var a = 55
var b = 3
console.log(Math.floor(a/b))

// 输出结果是：18（小数点后面的数全部舍掉）

2.Math.ceil()的功能是向上取整。

// 在分页功能中，经常使用Math.ceil()方法进行向上取整。

var totalCount = 51		// 总记录数
var pageSize = 10		// 每页显示的记录数
var page = 1		// 总页数
// %：取余，两个数相除取其余数。
if(totalCount % pageSize == 0){ 
        
	page = totalCount / pageSize
}else{ 
        
	page = Math.ceil(totalCount / pageSize)
}
console.log(page)

// 输出结果是6

3.Math.round的功能是四舍五入版 就近取整 注意-3.5的结果是-3。

var a = 55
var b = 3
console.log(Math.floor(a/b))

// 输出结果是：18（采用四舍五入的方法对结果进行取整）

• Math.max()是求最大值，Math.min是求最小值。

// var max = Math.max(4,33,56,77,1,8)
// 获取数组中的最大值

var arr = [4,33,56,77,1,8]
console.log(arr)		// 输出结果是：[4,33,56,77,1,8]
console.log(...arr)		// 输出结果是：4,33,56,77,1,8
var max = Math.max(...arr)		// 最小值的获取方法和最大值相同。
console.log(max)		// 输出结果是：77

// ...是展开运算符，将数组展开成一组数。

• Math.random() 函数返回一个浮点。伪随机数在范围[0,1)，也就是说，，从0（包括0）往上但是不包括1（排除1），然后你可以缩到所需的范围。实现将初始种子选择到随机数生成算法，它不能被用户选择或重置。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style> .box{ 
          width: 500px; height: 300px; margin: 100px auto; margin-bottom: 10px; text-align: center; line-height: 300px; font-size: 30px; font-weight: 700px; border: 1px solid black; } button{ 
          display: block; padding: 10px 20px; margin: 0 auto; } </style>
</head>
<body>
	<div class="box"></div>
	<button>停止</button>
	<script> var students = ['金吒','木吒','哪吒','孙悟空','太乙真人','东皇太一','杨戬','太上老君'] // 生成两个数之间的随机整数，包含两个数 function getRandomIntInclusive(min,max){ 
          min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * ( max - min + 1)) + min; // 含最大值和最小值 } function f1(){ 
          var index = getRandomIntInclusive(0,7) // 将生成的学生姓名插入到box中 document.querySelector('.box').innerHTML = students[index] } var id = setInterval(f1,50) //停止 document.querySelector('button').onclick = function(){ 
          // 停止计时器 clearInterval(id) } </script>
</body>
</html>

var now = new Date()
console.log(now)	

// 输出结果是：Tue Apr 06 2021 20:32:42 GMT+0800 (中国标准时间)

• 先要获取当前时间（new Date()）才可以得到年月日。

var now = new Date()
var year = now.getFullYear()
console.log(`${ 
          year}年`)

// 输出结果是：2021年

var now = new Date()
var month = now.getMonth()
console.log(`${ 
          month+1}月`)

// 输出结果是：4月

var now = new Date()
var date = now.getDate()
console.log(`${ 
          month}日`)

// 输出结果是：6日

var now = new Date()
var hour = now.getHours()
console.log(`${ 
          hour}时`)

// 输出结果是：20时

var now = new Date()
var minutes = now.getMinutes()
console.log(`${ 
          minutes}分`)

// 输出结果是：32分

var now = new Date()
var seconds = now.getSeconds()
console.log(`${ 
          seconds}秒`)

// 输出结果是：42秒

• 一般的格式为2021-4-6 20:32:42

console.log(${ 
        year}-${ 
        month}-${ 
        date} ${ 
        hour}:${ 
        minutes}:${ 
        seconds})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
<body>
	<div class="box"></div>
	<script> function gettime(){ 
          var now = new Date() // 获取当前时间 var year = now.getFullYear() // 获取年 var month = now.getMonth() // 获取月 var date = now.getDate() // 获取日 var hour = now.getHours() // 获取时 var minutes = now.getMinutes() // 获取分 var seconds = now.getSeconds() // 获取秒 var time = (`${ 
           year}-${ 
           month}-${ 
           date} ${ 
           hour}:${ 
           minutes}:${ 
           seconds}`) document.querySelector('.box').innerHTML = time // 获取盒子并把当前时间填入到盒子里。 } setInterval(gettime,1000) // 计时器 </script>
</body>
</html>

1.定义一个数组：

var arr = [1,ture,false,"text"]

2.使用new Array定义一个空的数组：

var arr = new Array()

1.数组排序：

• soft()方法使用原地排序对数组进行排序，并返回数组。默认是将元素转化为字符串，再对元素的utf-16代码单元值序列进行比较进行的。

var arr = [44,66,13,1,7,9,10]
arr.sort()
console.log(arr)

// 输出结果是：[1, 10, 13, 44, 66, 7, 9]

• 数组由小到大排序：

var arr = [44,66,13,1,7,9,10]
function mysort(first,second){ 
        
	return first - second	// 从小到大排序
	
	// 从大到小排序：return second - first
}
arr.sort(mysort)
console.log(arr)

// 输出结果是：[1, 7, 9, 10, 13, 44, 66]

2.数组的索引：

• 寻找数组的索引需要使用indexOf（寻找第一个符合要求的元素的索引）和lastindexOf（寻找最后一个符合要求元素的索引）。
• 数组的索引是指在一个数组中找到想找的元素位置。

var arr = ['孙悟空','唐僧','猪八戒','沙和尚','白龙马','金角大王','银角大王']

• substr(想要获取的第一个索引，获取的长度)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style> .box{ 
          width: 400px; background-color: #eee; padding: 10px 20px; color: red; white-space: nowrap; overflow: hidden; } </style>
<body>
	<div class="box">欢迎乘坐G520次列车，本车时速为340Km/h，请系好安全带。</div>
	<script> setInterval(f1,300); // 计时器 function f1(){ 
          // 使用document.querySelector().innerHTML获取div中的文本。 var str = document.querySelector('.box').innerHTML // 获取第一个字符。 var first = str.substr(0,1) // 获取除第一个字符之外的所有字符。 var second = str.substr(1) // 把第一个字符拼接在最后面，产生跑马灯的效果。 document.querySelector('.box').innerHTML = second + first } </script>
</body>
</html>