这是我参与「第四届青训营 」笔记创作活动的第2天
一、 JS三种书写位置
- 行内式
<input type="button" value="点击了按钮" onclick="alert('我是行内js')">
<!-- html中使用双引号，js中使用单引号 -->
html中使用双引号，js中使用单引号
- 内嵌式
<script>
alert('我是内嵌式js');
alert('我是内嵌式js')
</script>
- 外部引用
<script src="my.js"></script>
<!-- 两个标签中间不可以再写代码了 -->
要注意！！两个标签中间不可以再写代码了
二、 声明变量、输入输出、数据类型
1.基本使用
//1.声明年龄age变量
var age;
//2.prompt读取用户输入
age = prompt('请输入年龄',18);
//3.alert输出
alert('年龄是'+age);
//4.console.log控制台输出
console.log(age);
2.同时声明多个变量
var age = 18,
address = 'guangzhou',
phone = 13700;
3.数据类型
- js的数据类型有：
| 数据类型 | 默认值 |
|---|---|
| Number | 0 |
| Boolean | false |
| String | ' ' |
| Undefined | underfined |
| Null | null |
- js变量数据类型可变（弱类型）
var num = 12; num = 'red'; - js字符串长度与拼接
var str1 = 'abbbss';
var str2 = 'ccdd';
console.log('str1的长度为:'+str1.length); //强制类型转换 str1的长度为:6
console.log(str1+str2); //abbbssccdd
console.log(true + 'abc'); //trueabc js字符最大
console.log(undefined + 'abc'); //undefinedabc js字符最大
console.log(null + 'abc'); //nullabc js字符最大
console.log(true + 1); //2
console.log(undefined + 1); //NaN
console.log(null + 1); //1 null和undefined的区别
- typeof 检测数据类型
console.log(typeof('abc')); //string
console.log(typeof(abc)); //undefined
console.log(typeof(NaN)); //number
console.log(typeof(null)); //object
- js数据类型转换
//转string
var num = 1;
//1.
alert(num.toString());
//2.
alert(String(num));
//3.
alert(String(num+''));
//转number
var str = '12.34px' ;
//1.
alert(parseInt(str)); //12
//2.
alert(parseFloat(str)); //12.34
//3.
alert(str - 0); //- * /隐式转换 12.34
//4.
alert(Number(str)); //12.34
//转boolean
//0、NaN、null、undefined 都是false 其余都是true
alert(Boolean(0)); //false
三、运算符与运算
1.js浮点数运算
alert(0.1+0.2) //0.0.30000000000000004 js浮点数不能直接相比较
//
var num = (0.1*10 + 0.2*10) / 10
alert(num) //0.3
alert(num == 0.3) //true
2.'==='与'=='的区别
- '==='要求变量类型和值都相等，'=='仅仅要求值相等(==会将字符数据转换为数字型）
console.log(12 == '12') //true
console.log(12 === '12') //false
3.逻辑中断（短路运算）
- 如果'&&'前面的表达式为真，则返回第二个表达式
- 如果'&&'前面的表达式为假，则返回第一个表达式，剩下的不执行
console.log(123 && 12) //12
console.log(0 && 12) //0
- '||'找表达式中第一个为真的值返回，剩下的不执行
四.JS异步
-
js没有真异步，js的异步是通过主线程和异步子线程分开按顺序执行来实现的，两者之间有主次，即先执行主线程，再执行异步子线程
-
执行顺序：同步 > 异步 > 回调
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log('i: ',i);
}, 1000);
}
console.log(i);
//输出
5
i: 5
i: 5
i: 5
i: 5
i: 5
-
在上述代码for循环和外部的console是同步的，所以先执行for循环，读到回调的时候，将其加入消息队列堆栈（未被执行），再执行外部的console.log。
-
主线程执行后，最后执行堆栈中的setTimeout回调
