js 语法基础送给想要转行前端的小伙伴们
1-1 基础知识
- 单行注释：// 内容
- 在网页中按F12可以看到控制台（console）和对所写的代码进行调试。
1-2 赋值语句
var str = '春眠不觉晓'
- var：声明变量的关键字。浏览器解析看到var就知道它后面跟一个变量。
- str：变量名称，可以任意取名，但是有一定的命名规则，一般都是命名为有意义的名字，例如：
var age = 19 - =：赋值符号，这是一种运算符号，其含义是将右面的值赋值给左面的变量。
- ' '：单引号里面的值是字符串，而数字是不需要加单引号的。双引号也可以，但是为了节省空间，一般采用单引号。
- ;：在JavaScript中，分号可加可不加，分号是用来将两行语句区别开的，换行也可做到，建议不加分号。
1-3 数值类型：
- number：数字类型，例如：
var n=18其中的18就是数字类型。 - string：引号里面的就是字符串类型。
- bool：布尔类型 只有两个值：true 或false。
- undefined：没有赋值的变量类型，例如：
var aa中的aa未被赋值，即是undefined类型。name是窗口对象window的一个属性，而JavaScript中编写window属性的时候是可以省略window的。===：完全等于（即数值和数值类型都相同才为真）。
2-1 运算符号：
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。 **
2-2 if语句：
- 用来作流程控制。
if (m>0){ alert('我比较大！') }else{ alert('我比较小！') } // 如果满足条件，则执行我比较大，否则则执行我比较小。
2-2.1 逻辑或（||）：
- 只要有其中一个条件满足，那么运算结果就是True。
if (a>m || a<n){ alert('console.log('True')') }else{ alert('console.log('Flase')') } // a>m或者a<n成立时，运算结果为ture。
2-2.2 逻辑与（&&）：
- 只有当两个条件都为True的时候，运算结果才为Ture，否则为False。
if (a>m && a<n){ alert('console.log('True')') }else{ alert('console.log('False')') } // 只有当a>m和a<n同时满足时，运算结果才为ture。
2-2.3 逻辑非（!）：
相当于取反。
console.log('ture')的运算结果是True。
console.log('!ture')的运算结果是False。
2-3 for循环：
for(var i=1;i<=10;i++){ console.log('i') } // var i：定义变量的初始值，只执行一次。 // i<=10：循环条件，只要i<=10的输出结果是True，就会执行循环体
3-1 switch语句：
- 使用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 }
3-2 使用连接运算符：+
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）个球
3-3 累加案例：
var sum=0 for(var i=1;i<=10;i++){ sum=sum+i } console.log(sum) // 实现的是1-10的和
3-4 while循环：
- 当满足条件的时候，执行循环体里面的内容。
while(i<=6){ console.log(`这是第${i}个球`) i++ } // 当i<=6时，执行循环体里面的代码 // 输出结果是：这是第i（i<=6）个球
3-5 循环关键词：
- 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
4-1 函数：
- 函数的作用是为了做到代码复用，所以不要尝试修改函数代码。
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)表示不是一个数字。
4-2 嵌套for循环：
- 外循环执行一次，内循环执行一遍。
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)
4-3 最大值和最小值
4-3.1 交换变量的值：
- 交换变量的值需要借助其他的变量，不可以直接交换。
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
4-3.2 最大值案例：
// 找出数组中的最大值 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
- 最小值方法与最大值方法相同。
4-3.3 平均数：
- 利用最大值的方法取出一个最大值和一个最小值，再计算平均分。
4-4 打印直角三角形：
for(var i=1;i<5;i++){ for(var j=1;j<=i;j++){ document.write('★') // 在网页中输入文本需要使用document.write() } document.write('<br/>') // 在网页中换行 } // 输出结果是： ★ ★★ ★★★ ★★★★ ★★★★★
5-1 冒泡排序：
- 通过比较将数组由小到大排序。
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
5-2 九九乘法表：
// 找到行数与列数的关系，利用for循环完成 for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(`${j}*${i}=${i*j} `) //  是空格 } document.write('<br/>') } // 输出结果是：九九乘法表
5-3 作用域：
变量的势力范围，一个变量可以在那里使用。
- 在函数外部定义的变量叫全局作用域，可以在任何地方访问。
- 在函数内部定义的变量叫局部作用域，只能在函数内部访问。
5-4 作用域链：
5-4.1 变量提升：
- 当声明处于使用变量后面时，浏览器会将变量的声明提前，这叫做变量提升。
console.log(a) var a=10
上面的代码真正执行时，浏览器其实将代码改成下面这样：
var a console.log(a) // 所以输出结果是undefined a=10
5-4.2 函数提升：
- 当函数的调用放到函数定义前，浏览器会将整个函数的定义放到前面来，这与变量的提升不一样。
f1() function f1(){ console.log('f1执行起来了！') } // 运行结果是：f1执行起来了！
5-4.3 变量的一个访问顺序问题：
var num = 456 // 函数外部是全局作用域 function f1(){ // f1函数是一个局部作用域 var num = 123 function f2(){ // f2函数是一个局部作用域 // 就近原则 console.log(num) } f2() } f1() // 全局作用域包括了f1和f2作用域，f1作用域包含了f2作用域 // 运算结果是：123
5-4.4 作用域总结：
1.作用域就是一块内存空间。 2.函数外部叫做全局作用域，定义在全局作用域的变量，在所有地方都可以访问。 3.每个函数内部都是一块局部作用域，定义在局部作用域内的变量，只能在此作用域内部访问，也就是说定义在函数内部的变量，只能在函数内部访问。 4.作用域是有层次的，当在一个作用域内（也就是在一个函数内）访问某个变量时，首先在这个作用域内寻找有没有定义变量，如果定义了，使用此作用域内的变量，如果没有定义，向上一级的作用域中寻找，如果有，就用，如果没有，继续向上寻找，一直寻找到全局作用域中，如果全局作用域中也没有此变量的定义，则会报错：此变量没有定义。
6-1 Math对象：
- Math对象不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关的运算（求绝对值，取整，最大值等）可以使用Math中的成员。
6-1.1 圆周率：
- Math.PI是一种属性，它的功能是圆周率。
var r = 5 console.log(Math.PI*r*r) // Math.PI规定用作圆周率使用 // 输出结果是：78.53981633974483
6-1.2 取整:
- 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（采用四舍五入的方法对结果进行取整）
6-1.3 最大值和最小值
- 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 // ...是展开运算符，将数组展开成一组数。
6-1.4 随机数
- 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>
6-2 Date函数
6.2-1 获取当前时间
var now = new Date() console.log(now) // 输出结果是：Tue Apr 06 2021 20:32:42 GMT+0800 (中国标准时间)
6-2.2 获取年份
- 先要获取当前时间（new Date()）才可以得到年月日。
var now = new Date() var year = now.getFullYear() console.log(`${year}年`) // 输出结果是：2021年
6-2.3 获取月份
var now = new Date() var month = now.getMonth() console.log(`${month+1}月`) // 输出结果是：4月
6-2.4 获取日期
var now = new Date() var date = now.getDate() console.log(`${month}日`) // 输出结果是：6日
6-2.5 获取时
var now = new Date() var hour = now.getHours() console.log(`${hour}时`) // 输出结果是：20时
6-2.6 获取分
var now = new Date() var minutes = now.getMinutes() console.log(`${minutes}分`) // 输出结果是：32分
6-2.7 获取秒
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})
6-3 时钟
<!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>
7-1 数组对象
7-1.1判断是否是一个数组类型
1.定义一个数组：
var arr = [1,ture,false,"text"]
2.使用new Array定义一个空的数组：
var arr = new Array()
7-1.2 数组操作
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 = ['孙悟空','唐僧','猪八戒','沙和尚','白龙马','金角大王','银角大王']
7-2 跑马灯
- 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>
