文章目录
一、JS语言的简单解释
1995年诞生,布兰登艾奇用了10天时间设计出来。
弱类型的脚本语言:基于对象、简单、动态性、跨平台
- 弱类型:创建后变量还可以进行改变
- 脚本语言:需要依附在HTML文件中运行的
二、JS的创建书写方式:行内、内部、外部
1. 行内式的创建方式
- 在a标签中书写 最简单的书写方式,只需要在href中书写JS事件即可
- 在非a标签书写,可以把事件看出是html标签的属性,在属性值位置属性JS语法即可
<a href="javascript:alert('Hello');">点击跳转</a>
阻止跳转:表示点击a标签的时候不会发生跳转
2. 内部式的创建方式
- 使用的是script标签(脚本)
- 在script中书写规法的JS语法即可
<script>
alert("Hello world")
</script>
3. 外部式的创建方式
- 需要在外面创建一个后缀名.js的文件
- 需要script标签引入进来
<script src="js/index.js"></script>
关于JS创建的总结
- 行内写法基本不使用,代码写在一起比较麻烦,后期更新维护复杂
- 内部式创建可以写在当前文档中的任何地方,建议写在文档的最下面(html+css+JS)
- 内部和外部的书写不可以共用一个script标签
三、JS组成部分
web的组成部分:html+css+JS
JS的组成部分:
- DOM:Document Object Model 文档对象模型(获取到结构绑定相关的事件)
- BOM:Browser Object Model 浏览器对象模型(通过一些方法设置浏览器)
- ECMAScript:语言的规法 目前学习ECMA3
四、输出方式
为了查看当前代码是否符合我们想要的结果(审查过程)
-
window.alert() 可以简写成alert() 系统的弹窗,用于提示信息、警告等作用
-
document.write() 在文档上书写,表示当前的数据会在浏览器的显示页面上展示出来
-
console.log() 控制台 日志 工作中用的最多的一种输出方式
-
confirm() 确认 一种提示作用
-
prompt() 需要用户自己输入的
prompt("请输入您的密码",123)
五、变量
用来储存数据的容器
-
定义变量
- 使用一个关键字 variable 表示多变的可变的,简写为 var
- 使用方法:var 变量名称 例如:var aa
- 可以一次声明多个变量 var a,b,c
- 隐式声明,省略var,涉及作用域问题 aa=1
-
变量名称的使用规则
- 不能使用中文汉字或纯数字开头的变量名
- 不能使用特殊符号 ?&*… 可用:&_$
- HTML和CSS属性不建议使用
- 关键字和保留字
- 变量名称大小写是有区别的
-
变量赋值
- 使用一个符号 “=” 表示赋值
- 变量的赋值表示将等号右侧的值赋给左侧的变量
六、JavaScript的数据类型【重点】
-
判断数据类型
-
typeof 被检测的数据 | typeof(被检测的数据)
-
数字类型 number,字符串 string,undefined 未定义、未赋值,布尔类型 boolean,对象 object 万物皆对象
var e = [] //数组:有序的数据集合 var f = {} //对象:无序的数据集合 var g = null //空的
JS数据类型的总结
- number 数据类型:正数、负数、0
- string 字符串类型:只要是引号里面都是字符串(单双引号一样)
- undefined 未定义的:表示定义了没有赋值
- Boolean 布尔类型: true/false
- Object 对象:null、数组、对象
拓展:
除了以上数据类型,在ECMA后续的版本中还新增了很多数据类型,如:symbol(ES6)、bigInt(ES10)
JS中基本数据类型和引用数据类型的区别
-
-
数据类型的一些拓展
-
进制的了解
var a = 010; //8进制 var b = 0XA; //16进制 var c = 0Xb; //小写字母和大写字母都可以 console.log(a); //8 console.log(b); //10 console.log(c); //11
-
NaN的认识
//NaN:not a number,表示一个非数字 //在JS中,NaN用来表示一个非数字的特殊值,当发现无法进行运算时,JS不会报错,而是会返回一个NaN /* NaN的注意事项: - NaN的类型是number,表示一个非数字 - NaN不等于任何值,包括NaN本身 - 通过isNaN()可以判断是否是一个数字,返回false的时候表示是一个数字 */ var a = 123; var b = "abc"; console.log(isNaN(a)); //false console.log(isNaN(b)); //true
-
科学计数法
//当一个数字很大的时候,可以使用科学计数法来表示 var num = 5e+5; //5乘以10的5次方 var num = 3e-3; //3乘以10的-3次方
-
浮点数精度丢失问题
//在进行浮点数运算的时候,可能会出现精度丢失的问题 0.1 + 0.2 = 0.300000000004; 0.2 + 0.2 = 0.4; //尽量少用浮点数进行运算,会出现精度丢失问题,是进制换算导致的 //解决办法:根据小数点后面的位数量,乘以对应的整数 0.1 + 0.2 ==> (0.1*10+0.2*10)/10 = 0.3
JS中的数字都是双精度的浮点数,在进行计算时,计算机会把十进制数转换成64位二进制,这个过程可能会导致精度丢失。
-
字符串的转义符号
\n 换行 \b 空格 \ 斜杠
-
七、JS数据类型转换
1. 字符串类型转换为数字类型
将字符串类型转换为数字类型(字符串中是数字),才可以进行转换
注意:当字符串中有数字和字符组合的时候,number方法会输出NaN
//1. Number()
var a = "10"
var a1 = Number(a)
cosole.log(a,a1) // "10",10
//2. parseInt()
var b = '2.9111'
var b1 = parseInt(b)
console.log(b,b1)//"2.9111",2
//3. parseFloat()
var c = '3.1415'
var c1 = parseFloat(c)
console.log(c,c1)//“3.1415”,3.1415
//4. Math.round() 四舍五入,只看小数点后一位
var d = '3.14'
var d1 = Math.round(d)
console.log(d,d1) //"3.14",3
总结:
相同点:都可以转换为数字类型
不同点:
- parseInt 转换的是整数,parseFloat转换的是浮点数
- number转换的是纯数字,如果有字符就会显示NaN
- parse方法可以转换含有字符的字符串
不常见的转换方式【面试题】
用转换为数字类型的四种方法去转换其他的数据类型
-
将布尔类型转换为数字类型
var e = true // true/false console.log(Number(e)) // 1/0 console.log(parseInt(e)) // NaN console.log(parseFloat(e)) // NaN console.log(Math.round(e)) // 1/0
- parse方法会转换得到NaN
- Number和Math.round方法会得到1(true)和0(false)
-
将undefined类型转换为数字类型
var f = undefined console.log(Number(f)) // NaN console.log(parseInt(f)) // NaN console.log(parseFloat(f)) // NaN console.log(Math.round(f)) // NaN
- 表示所有转换的值都是NaN
-
将null类型转换为数字类型
var g = null console.log(Number(g)) // 0 console.log(parseInt(g)) // NaN console.log(parseFloat(g)) // NaN console.log(Math.round(g)) // 0
- parseInt 和 parseFloat 方法会转换得到NaN
- Number和Math.round方法会得到0
2. 将数据转换为字符串类型
String(被转换的数据),被转换的数据.toString()
-
将数字类型转换成字符串类型
var a = 1 console.log(String(a)) // "1" console.log(a.toString()) // "1"
保留小数:变量.toFixed(保留位数)
可以把数字类型转换为字符串类型
-
将布尔类型转换为字符串类型
var b = false console.log(String(b))//"false" console.log(b.toString())//"false"
-
将undefined类型转换为字符串类型
var c = undefined console.log(String(c))//"undefined" console.log(c.toString())//报错 后面不会执行(js单线程)
- String方法转换的时候可以转换为字符串类型
- toString方法转换的时候会报错
-
将null类型转换为字符串类型
var d = null console.log(String(d))//"null" console.log(d.toString())//报错 后面不会执行
- String方法转换的时候可以转换为字符串类型
- toString方法转换的时候会报错
3. 将数据转换为布尔类型
Boolean(被转换的数据)
-
将数字类型转换为布尔类型
var a = 10 console.log(Boolean(a))//true
- 非0的数都是true,只有0转换得到false
-
将字符串转换为布尔类型
var b='' console.log(Boolean(b))//false var b1='0' console.log(Boolean(b))//true
- 非空转换得到true,字符串为空时是false
-
将undefined类型转换为布尔类型
var c = undefined console.log(Boolean(c))//false
-
将null类型转换为布尔类型
var d = null console.log(Boolean(d))//false
八、JS的运算符
1. 数学运算符:+ - * / %
2. 赋值运算符:= += -= *= /= %=
在JS语法中一个=表示赋值,不是等于的意思
c*=2 //c=c*2
3. 比较运算符:> < >= <= == === != !==
比较的结果一定是一个布尔类型的值
== 判断是否相等,比较的是类型中的值
=== 判断是否全等(恒等),比较的是类型和值
一个等号表示赋值,两个等号表示比较的是类型中的值,三个等号表示比较的是类型和值
4. 逻辑运算符:&& || ! (与或非)
var res = age>=18 && age<=100;
- && 并且 当多个条件都满足的时候才输出true
- || 或者 当其中一个条件满足的时候就输出true
- ! 取反 真的变假的,假的变真的
5. 一元运算符:++ –
-
自增自减单独运算的时候,在前在后是没有区别的
-
碰到输出或者一些运算的时候:
- 符号在前的先运算后输出
- 符号在后的先输出后运算
++ 和 += 的区别
++固定的每次只能加1,+=可以自定义