web前端2021--小白进阶之路JS基础

web前端2021–小白进阶之路JS(1)

JS基础–学习一门编程语言的基本步骤：
（1）了解背景知识：历史，现状，特点，应用场景
（2）搭建开发环境，编写Hello world
（3）变量和常量
（4）数据类型
（5）运算符
（6）逻辑结构
（7）通用小程序
（8）函数和对象
（9）第三方库和框架

题库：程序员必做50题
https://wenku.baidu.com/view/af66e2f14afe04a1b071de42.html
推荐书籍:《JavaScript高级程序设计》第三版

1、JS的应用场景
开发浏览器端的交互效果(前端)
创建web服务器，操作数据库等(后端)
2、JS的开发环境

• 浏览器–浏览器中自带JS解释器
• 服务器–安装Node.js，含有V8引擎的JS解释器(node -v 查看node.js版本号)
• 运行JS
  浏览器端：创建01.js和01.html两个文件，把js文件嵌入到html文件中

<script src="01.js"></script>

服务器端：在cmd下，node C:/xampp/…/01.js 回车

一、变量

• 使用var关键字声明变量
• 变量命名规则：可以使用字母、数字、下划线，美元符号，不能以数字开头，不能使用js中关键字，不推荐使用中文。
• 驼峰命名法：userName 下划线命名法：user_name
• 变量赋值： var d;(此变量只声明未赋值，则保存的值为undefined)
• 一次声明多个变量：var b1=1,b2=2,b3=3;

二、常量
保存的是不可变化的值，声明变量必须赋值。
const pi=3.14;
三、数据类型(检测数据类型typeof)

• 数值型：整型，浮点型

整型：
1,2,3,4,5…7,8,9,10 十进制
1,2,3,4,5…7,10,11,12 八进制 以0开头的数字，例如011 -> 9
1,2,3,4,5…7,8,9,a … f 10 十六进制 以0x开头的数字，其中a_f代表1015，例如 0xf -> 15 其中的字母不区分大小写

浮点型：
3.14
3140 3.14*10^3 指数形式 3.14e3

0.00314 3.1410^-3 指数形式 3.14e-3
31.410^-4

• 字符串型：被引号包着的数据就是字符串型

如何查看任意字符的Unicode码？
‘a’.charCodeAT()

• 布尔型：true/false

• 未定义型：undefined

• 空：null (类型是object，常和引用类型一起使用)
  四、数据类型的转换

• 隐式转换
  1）数值型+字符串型 数值型转为字符串型
  2+‘3’ -> ‘23’
  加号（+）表示字符串之间拼接
  2）数值型+布尔型
  2+true ->3
  2+false ->2
  3）字符串型+布尔型 布尔型转为字符串型
  ‘2’+true ->‘2true’
  4）减乘除的隐式转换
  如果运算符的两端不是数值，都自动转为数值型

练习：

var a=1,b=true,c='tedu';
console.log(a+b+c);//'2tedu'
console.log(b+c+a);//'truetedu1'
console.log(c+a+b);//'tedu1true'

注意：
JS中加号的作用
执行加法运算
执行字符串的拼接，前提是加号的两端至少有一个数据是字符串型

总结：
隐式转化中，如果加号中出现字符串，则数据转为字符串类型，其他情况都是自动调用Number函数转为数值型。

• 强制转换
  1）强制转为数值型
  Number()

Number('3') //3
Number('3a')  //NaN
Number(true)  //1
Number(undefined) //NaN
Number(null)  //0

2）强制转为整型
parseInt() 常用于将小数或者字符串转为整型，其他都是返回NaN,如果要转换的字符串中以数字开头，则返回整数部分。4；
如果要转化的字符串中以非数字开头，则返回NuN

parseInt(10.5)//10
parseInt('5.1a')//5
parseInt('a5')//NaN

3）强制转为浮点型
parseFloat() 他的用法和parseInt几乎一致，只是常用于将字符串转为浮点型

'3.14'//3.14
'5.9a'//5.9
'a5.9'//NaN
'5a'//5.0

4）强制将数值和布尔型转字符串

toString 
var num=5;
var num1=num.toString();//把转换后的保存到新变量

五、运算符
表达式是由数据或者数据连接的运算符所组成的形式。
分为6大类：
算术运算符：比较运算符；逻辑运算符
位运算符： 赋值运算符；三目运算符

• 算数运算符

+	 -	 *	 /	 %	 ++	 --	
/*
%：取余
++：自增
--：自减
var d=c++; 先把c的值赋给d，然后又再执行自增
var f=++e;先让e执行自增，再把自增的结果赋给f
*/

• 比较运算符

> < >= <= == != === !==
// ===不仅比较值，还比较类型
// == 只比较值，比较的是首歌字符的Unicode码

3>'10'     数字和字符串比较，字符串转为数字
'3' > '10'   字符串比较，比较的是首个字符的Unicode码

3>'10a'
3<'10a'
3=='10a'
//以上3个钟10a隐式转为NaN，而NaN和任何值比较
（> 	<	>=	  <=	  ==	  !=	 === 	!==）
都返回false，甚至两个NaN比较是否相等也是false

• 逻辑运算符

&& || !
/*
&&	并且，关联的两个条件都是true，结果是true，否则false
||	或者，关联的两个条件有一个为true，结果是true,否则false
!	非，取反
*/

短路逻辑：

&& ||
/*
并且（&&），如果第一个条件为false,不再执行第二个条件
或者（||），如果第一个条件为true,不再执行第二个条件
*/

练习：

查看以下程序是否报错
var num=3;
num>5 && console.log(a); //false

• 位运算符

& |
/*
按位与（&）：上下两位都是1，否则是0
按位或（|）：上下两位含有1，结果是1，否则是0

//练习：
3&5  //->1//先把3和5转为二进制，分别为01