- 浏览器分成两部分:渲染引擎和 JS 引擎🔥
- 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit
- JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。
- 引用外部JS文件的script标签中间不可以写代码🔥
- 声明变量特殊情况🔥
情况 | 说明 | 结果 |
var age; console.log(age); | 只声明,不赋值 | undefined |
console.log(age) | 不声明 不赋值 直接使用 | 报错 |
age = 10;console.log(age); | 不声明 只赋值 | 10 |
- JS中数值的最大值:Number.MAX_VALUE
- JS中数值的最小值:Number.MIN_VALUE
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
- 数字型的三个特殊值🔥
alert(Infinity); //Infinity(无穷大)
alert(-Infinity); //-Infinity(无穷小)
alert(NaN); //NaN - Not a Number ,代表任何一个非数值
Infinity ,代表无穷大,大于任何数值
-Infinity ,代表无穷小,小于任何数值
Nan ,Not a Number,代表一个非数值
- isNaN🔥
这个方法用来判断非数字,并且返回一个值,如果是数字返回的是false,如果不是数字返回的是true - 字符串引号嵌套🔥
JS可以用 单引号嵌套双引号,或者用 双引号嵌套单引号(外双内单,外单内双)
var strMsg ='我是一个“高富帅”' //可以用 ' ' 包含 " "
var strMsg2 ="我是'高富帅'" //可以用" " 包含 ''
- 字符串转义符🔥
类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是 \ 开头的,常用的转义符及其说明如下:
转义符 | 解释说明 |
\n | 换行符,n是newline |
\ \ | 斜杠\ |
\ ’ | ’ 单引号 |
\ ‘’ | ‘’ 双引号 |
\t | tab 缩进 |
\b | 空格,b是blank的意思 |
- 字符串的拼接🔥
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
注意:字符串 + 任何类型 =拼接之后的新字符串
//1 字符串相加
alert('hello' + ' ' + 'World'); //hello World
//2 数值字符串相加
alert('100' + '100'); //100100
//3 数值字符串+数值
alert('12'+12); //1212
//4 数值+数值
alert(12+12); //24
+号总结口诀:🌏数值相加,字符相连🌏
var age = 18;
console.log('我今年'+age+'岁'); //引引加加,最终也是上面的形式
- 布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0🔥
var flag = true;
console.log(flag + 1); // 2 true当加法来看当1来看,flase当0来看
比如经纬恒润面试的时候,问了一道题 1<2<3和3<2<1返回的是什么?
答案都是true,原因是1<2结果是true,这个true和3比较的时候,true的值为1,进行比较,最后的结果是true,同理后面一个先返回false即0,0<1,所以最终结果也是True
- undefined未定义🔥
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
// 如果一个变量声明未赋值,就是undefined 未定义数据类型
var str;
console.log(str); //undefined
var variable = undefined;
console.log(variable + 'Pink'); //undefinedPink
console.log(variable + 18); //NaN
1.undefined 和 字符串 相加,会拼接字符串
2.undefined 和 数字相加,最后结果是NaN
- 空值null🔥
一个声明变量给 null 值,里面存的值为空
var space = null;
console.log(space + 'pink'); //nullpink
console.llog(space + 1); // 1
- typeof🔥
可以用来判断基本类型的数据类型,引用类型就不能用它来判断
详见判断数组和对象 - 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
数字字面量:8,9,10
字符串字面量:‘大前端’,‘后端’
布尔字面量:true、false - 转换为字符串型🔥
方式 | 说明 | 案例 |
toString() | 转成字符串 | var num = 1; alert(num.toString()); |
String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num =1; alert(num+“我是字符串”); |
//1.把数字型转换为字符串型 toString() 变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
//2.强制转换
console.log(String(num));
toString() 和 String() 使用方式不一样
三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一方式也称为隐士转换
- 转换为数字型🔥
// 1.parseInt()
var age =prompt('请输入您的年龄');
consolo.log(parseInt(age)); //数字型18
consolo.log(parseInt('3.14')); //3取整
consolo.log(parseInt('3.94')); //3,不会四舍五入
consolo.log(parseInt('120px')); //120,会去掉单位
// 2.parseFloat()
console.log(parseFloat('3.14')); //3.14
consolo.log(parseFloat('120px')); //120,会去掉单位
// 3.利用Number(变量)
var str ='123';
console.log(Number(str));
console.log(Number('12'));
// 4.利用了算术运算 - * / 隐式转换
console.log('12'-0); // 12
console.log('123' - '120'); //3
console.log('123' * 1); // 123
1.注意 parseInt 和 parseFloat ,这两个是重点
2.隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型
- 转换为布尔型🔥
方法 | 说明 | 案例 |
Boolean()函数 | 其他类型转成布尔值 | Boolean(‘true’); |
代表空,否定的值会被转换为false,如 ’ ’ , 0, NaN , null , undefined
其余的值都会被被转换为true
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('小白')); //true
console.log(Boolean(12)); //true
- 浮点数的精度问题🔥
浮点数值的最高精度是17位小数,但在进行算数计算时其精确度远远不如整数
var result = 0.1 +0.2; //结果不是0.3,0.30000000000000004
console.log(0.07 * 100); //结果不是7,而是7.000000000000001
所以不要直接判断两个浮点数是否相等
- ①前置递增运算符🔥
++num num = num + 1
使用口诀:先自加,后返回值
var num = 10;
alert (++num + 10); // 21
先自加 10+1=11,返回11,此时num=11
- ②后置递增运算符🔥
num ++ num = num +1
使用口诀:先返回原值,后自加
var num = 10;
alert(10 + num++); // 20
- 比较(关系)运算符🔥
比较运算符是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。 - ===== 小结
console.log(18 == '18'); //true
console.log(18 === '18'); //false
- 逻辑运算符🔥
逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值
逻辑与:两边都是 true才返回 true,否则返回 false
逻辑或:两边都为 false 才返回 false,否则都为true
逻辑非:逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false
var isOk = !true;
console.log(isOk); // false
//逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false
- 短路运算(逻辑中断)🔥
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
- 逻辑与🔥
语法:表达式1 && 表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值为假,则返回表达式1
console.log(123 && 456); //456
console.log(0 && 456); //0
console.log(123 && 456 && 789); //789
- 逻辑或
语法:表达式1 || 表达式2
如果第一个表达式的值为真,则返回表达式1
如果第一个表达式的值为假,则返回表达式2
console.log(123 || 456); //123
console.log(0 || 456); //456
console.log(123 || 456 || 789); //123
var num = 0;
console.log(123 || num++);
// 先返回在加,相当于 (123 || 0)
console.log(num); // 123
- 运算符优先级🔥
1.一元运算符里面的逻辑非优先级很高
2.逻辑与 比 逻辑或 优先级高
3.练习题
console.log( 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true
这个
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); //false
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); //true
var c = 2 === "2";
console.log(c); //false
var d = !c || b && a ;
console.log(d); //true