2021-09-14---JavaScript基础语法
JavaScript基础语法
一、JavaScript概述
- 什么是JavaScript？
是一门基于对象和事件驱动的客户端脚本语言。
官方概念：这是一个跨平台的脚本语言
平台：就是运行环境，这里一般指操作系统。跨平台就是在各种环境下都可以运行。
脚本语言：特点就是不能独立运行，要依赖于网页。HTML网页的运行离不开浏览器，js程序的运行离不开HTML网页。
- 哪一年？哪个公司？谁？第一个名字叫什么？
1995年 网景 布兰登 LiveScript - ECMA提出的第一套W3C标准？
ECMA-262 - js包含哪几部分？
ECMAScript
DOM:文档 HTML文件部分；
BOM: 浏览器 每打开的一个网页就是一个bom。
- JS特点
二、如何引入js
- 行内脚本 通过事件驱动
- 内部脚本 < script > < /script >(head和body标签内都行）
- 外部脚本 < script src = “” > < /script >
注，如果是外部引入js，那么在script标签中不要写任何内容，因为写了也不执行。
三、如何输出（面试）
- alert（）；以警告框的形式输出，缺点：会中断后面语句执行。通常在排错时使用
在网页上弹出一个警告框。直接在括号内写上警告框里弹出的内容，注意要用双引号引起来。
alert("易烊千玺")
- document.write（）；输出在网页中，缺点：会影响页面布局
- console.log（）；在控制台输出，输出对象的详细信息
在控制台输出内容，并且告诉你输出的这行代码是在HTML的第多行编写的。页面上没有任何效果，用户看不见，不影响用户的使用效果，一般用于代码调试。
四、如何换行
- 页面中换行 ‘< br >’
- 非页面中换行 \n
转义字符 \ 将特殊含义的符号转成普通字符
\t 横向跳格（一次跳8个空格）
<script>
// 在页面中换行<br>
document.write('hello<br>你好');
//下面的不会换行
alert("hello<br>你好");
console.log("hello<br>你好");
// 非页面中换行 这个可以换行
alert("hello\n你好");
console.log("hello\n你好");
</script>
五、注释
- HTML < ! – – >
- css /* */
- js 单行注释 //
多行注释 /* */
六、数据类型
- 基本数据类型
number（数字） string（字符串） Boolean（布尔） null（空） undefined （未定义） - 复合数据类型
object（对象）
七、标识符命名规则
-
只能包含字母、数字、下划线、$
-
不能以数字开头
-
不能是关键字或保留字
-
语义化
-
驼峰命名
（1）大驼峰 HowAreYou (构造函数、类名)
（2）小驼峰 howAreYou (函数名)
how_are_you(变量名)
-
匈牙利命名
整数 i_num
小数 f_num
字符串s_str
字符ch
布尔值 bo
数组 arr
函数 fn
对象 o_div
八、变量或常量
- 什么是变量？
在内存中开辟空间，用于存储数据，而随着程序的运行，这个空间的数据会发生变化，所以称为变量。 - 如何声明变量？
（1）显示声明 var 变量1，变量2，变量3；
（2）隐式声明 变量名 = 值； - 如何给变量赋值？
（1）初始化变量：声明变量的同时给它赋值
（2）先声明，后赋值 - 什么是常量？
js中一旦被定义就无法再被修改的变量，称之为常量
常量:不能修改的值
常量的关键字是const
常量只能读取，不能修改
九、运算符与表达式
1. ++ - - 递增递减运算符
自增，自减运算只能针对变量 ，3++会报错
从左到右 ，如果先看到变量，则先取出变量中的值参与其它运算，变量中的值再+1或-1。如果先看到运算符，则先将变量中的值+1或-1再参与其它运算。
注意：变量在前会有两个值，变量本身的值，和变量自增或自减后的值。
例如：var a = 3;
b = i++; 那么此时从左到右，先看到变量，就用变量本身的值参与运算，得到b的值为3，然后变量中的值再自增，得到a的值为4.
<script>
// var i = 3;
// // i ++;
// // ++ i;
// // 3 4
// // console.log(i ++,i); //3 4
// // console.log(++ i,i); //4 4
// // 3 4 5 5 6
// var j = i ++ + ++ i + i ++;
// // 3 + 5 + 5
// console.log(i,j);
var i = 3;
// 2 2 3 2 2 3
var j = -- i + i ++ + -- i + i ++;
// 2 + 2 + 2 + 2
//j = 8, i = 3;
// 4 8 9 4 5 9 10
var k = ++ i + j ++ + i ++ + j ++; // i = 5 j = 10 k = 25
// 4 + 8 + 4 + 9
console.log(i,j,k);
</script>
2. 算数运算符(五个）
* / %（模，取余） + -
规则：
（1）如果是number类型之间运算，直接运算。
（2）如果不是同类型之间的运算，则先转成数字，再运算。（转成功，直接运算，转失败，则转为NaN，运算结果也为NaN）
（3）true转为1 false转为0 null转为0 ，然后参与运算。
（4）undefined NaN 结果一定是NaN
注：0除以非0的数，结果为0；
非0的数除以0，结果infinite（无穷）；
0除以0，结果NaN。
<script>
console.log(4 * 4); //16
console.log(4 * '4'); //16
console.log(4 * '4a'); //NaN
console.log(4 * true); //4
console.log(4 * false); //0
console.log(4 * null); //0
console.log(4 * undefined); //NaN
</script>
console.log(4 / 4); //1
console.log(4 / '4'); //1
console.log(4 / '4a'); //NaN
console.log(4 / true); //4
console.log(4 / false); //infinite
console.log(4 / null); //infinite
console.log(4 / undefined); //NaN
console.log(0 / 4); //0
console.log(0 / 0); //0 NaN
console.log(4 % 4); //0
console.log(4 % '4'); //0
console.log(4 % '4a'); //NaN
console.log(4 % true); //0
console.log(4 % false); //4 NaN
console.log(4 % null); //4 NaN
console.log(4 % undefined); //NaN
console.log(4 % 0); //NaN
console.log(0 % 0); //NaN
console.log(4 + 4); //8
console.log(4 + '4'); //8 '44'
console.log(4 + '4a'); //'44a'
console.log(4 + 4 + ''); //'8'
console.log(4 + true + '' + 4); //'54'
console.log('' + 4 + 4 - 2); //42
+ -
规则：
（1）遵循上面的规则
（2）如果+两边有字符串，就连接成新的字符串；
二元加法运算符“+”可以对两个数字做加法，也可以做字符串连接操作：
当两个操作数都是数字或都是字符串的时候，计算结果是显而易见的。然而对于其他情况来说，则要进行一些必要的类型转换，并且运算符的行为依赖于类型转换的结果。加号的转换规则优先考虑字符串连接，如果其中一个操作数是字符串或者转换为字符串的对象，另外一个操作数将会转换为字符串，加法将进行字符串的连接操作。如果两个操作数都不是类字符串（string-like）的，那么都将进行算术加法运算。
从技术上讲，加法操作符的行为表现为： ·如果其中一个操作数是对象，则对象会遵循对象到原始值的转换规则转换为原始类值，在进行了对象到原始值的转换后，如果其中一个操作数是字符串的话，另一个操作数也会转换为字符串，然后进行字符串连接。 ·否则，两个操作数都将转换为数字（或者NaN），然后进行加法操作。
这里有一些例子：
1 + 2 // => 3: 加法
"1" + "2" // => "12": 字符串连接
"1" + 2 // => "12": 数字转换为字符串后进行字符串连接
1 + {} // => "1[object Object]": 对象转换为字符串后进行字符串连接
true + true // => 2: 布尔值转换为数字后做加法
2 + null // => 2: null转换为0后做加法
2 + undefined// => NaN: undefined转换为NaN后做加法
最后，需要特别注意的是，当加号运算符和字符串和数字一起使用时，需要考虑加法的结合性的对运算顺序的影响。也就是说，运算结果是依赖于运算符的运算顺序的，比如：
1 + 2 + " blind mice"; // => "3 blind mice"
1 +（2 + " blind mice"）; // => "12 blind mice"
3.关系运算符 （结果只有两个true false）
< > <= >=
规则
（1）相同类型比较，直接比较
（2）字符串比较，从左到右依次比较
（3）true转为1，false转为0，null转为0，再比较
（4）undefined NaN ,直接false。
<script>
console.log(4 > 3); //T
console.log(4 > '3'); //T
console.log('100' > '2'); //F
console.log(1 >= true); //T
console.log(0 >= false); //T
console.log(0 >= null); //T
console.log(0 >= undefined); //F
console.log(NaN >= NaN); //F
console.log('\n');
console.log(3 == 3); //T
console.log(3 == '3'); //T
console.log(3 === '3'); //F
console.log(3 === 3); //T
console.log('\n');
//切记
//(null就表示没有东西)
console.log(null == false); //F
console.log(null == 0); //F
console.log(null == ''); //F
console.log(null == undefined); // T
console.log(null === undefined); //F
console.log(NaN == NaN); //F
</script>
4. 逻辑运算符
&& 与（结果为表达式的值，不一定为true或false）
如果&& 左边表达式的值为true时，返回右边表达式的值；
如果&&左边表达式的值为false时，发生短路，返回左边表达式的值。
|| 或（结果为表达式的值，不一定为true或false）
如果||左边表达式的值为true时，发生短路，返回左边表达式的值；
如果||左边表达式的值为false时，返回右边表达式的值。
var i = 3;
console.log(4 - 3 && (i = 5)); //5
console.log(i); //5
console.log(!(4 - 3) && (i = 6)); //false
console.log(i); //5
console.log(0 % 3 === 0 || (i = 8)); //true
console.log('100' < 2 || (i = 10));// 10
console.log(i); //10
！非（结果只有两个 true false）
非真即假，非假即真
false ， 0 ，‘’ ，undefined ，null ， NaN 天然为假
！‘ ’ 结果为false？无效
逻辑运算符案例
// 1. 输出下列表达式的值。
// 1) (100>3)&&(‘a’>’c’)
console.log(100>3 && 'a'>'c');
// false
// 2) (100>3)||(‘a’>’c’)
console.log(100>3 || 'a'>'c');
//true
// 3) !(100<3)
console.log(!(100>3));
//true
// // 2. 构造一个表达式来表示下列条件：
// // 1) number 等于或大于 90，但小于 100
// number >= 90 && number < 100
// // 2) ch 不是字符 q 也不是字符 k
// ch != 'q' && ch != 'k'
// // 3) number 界于 1 到 9 之间（包括 1 不包括 9），但是不 等于 5
// number >=1 && number < 9 && number != 5
// // 4) number 不在 1 到 9 之间
// number < 1 || number > 9
// 3. 判断这个字符是空格，是数字，是字母
var ch = '19';
// ch === ' ' || ch > 0 && ch < 9 || ch > 'a' && ch < 'z' || ch > 'A' && ch < 'Z'
console.log(ch === ' ' || ch > '0' && ch < '9' || ch > 'a' && ch < 'z' || ch > 'A' && ch < 'Z');
//true
// // 4. 有 3 个整数 a,b,c，判断谁最大，列出所有可能
// a>b && a>c
// b>a && b>c
// c>a && c>b
// 5. 判断 year 表示的某一年是否为闰年，用逻辑表达式表示。 闰年的条件是符合下面二者之一：
// 1) 能被 4 整除但不能被 100 整除 2) 能被 400 整除
//year % 4 === 0 && year % 100 !== 0 || year % 100 ===0
var year = 2018;
console.log(year % 4 === 0 && year % 100 !== 0 || year % 100 ===0);
// !(year % 4) && (year %100) || !(year % 400)
var year= 2008;
console.log(!(year % 4) && (year % 100) || !(year % 400));
5.三目（三元）运算符
一元（一目）！ ++ - - +（正） -（负）
二元（二目） + - * / % 关系运算符
三元（三目） ？：
语法：
条件？语句：语句
当条件为true时，执行冒号前面的语句；
当条件为false时，执行冒号后面的语句。
<script>
//根据成绩判断，是否及格？ 90
var i_score = prompt('请输入你的成绩');
console.log(i_score >= 90 ? '及格':'不及格');
// 2. 判断一个年份是闰年还是平年
// 1) 能被 4 整除但不能被 100 整除或能被 400 整除的年份是 闰年
var year = 2015;
console.log((year % 4 === 0 && year % 100 !== 0 || year % 100 ===0) ? '闰年' : '平年');
var year = 2003;
console.log((!(year % 4) && (year %100) || !(year % 400)) ? '闰年' : '平年')
// !(i_year % 4) && i_year % 100 || !(i_year % 400) ? '闰年' : '平年'
// 3. 判断一个数是偶数还是奇数
var num =10;
// num % 2 === 0 ? "偶数":"奇数";
console.log(num % 2 === 0 ? "偶数":"奇数");
// 4. 判断一个数是正数还是负数
var num = -12;
// num > 0 ? "正数" : "负数"
console.log(num > 0 ? "正数" : "负数");
</script>
6. 赋值运算符
简单赋值 =
复合算数赋值
规则：先取 运算符左边变量的值 与 运算符右边的表达式的值 进行相应的 算数运算，最后将结果赋给左边的变量。
<script>
// 先取 运算符左边变量的值 与 运算符右边的表达式的值 进行相应的 算数运算，最后将结果赋给左边的变量。
var a = 5;
a *= a + 3;
//先取运算符左边变量的值 5
//与 运算符右边表达式的值 5+3=8
//进行相应的算数运算 5*8=40
//最后将结果赋给左边的变量 a = 40
//这个表达式实际上等价于 a = a * (a + 3)
console.log(a);//40
</script>
7.特殊运算符
new
作用：用于创建对象
语法： new 构造函数（）
var o_number = number();
var o_str = string();
var o_boo = boolean();
var o_obj = object();
typeof
作用：用于检测数据类型
<script>
console.log(typeof 3); // number
console.log(typeof '3'); //string
console.log(typeof true); //boolean
console.log(typeof null); //object
console.log(typeof undefined); //undefined
console.log(typeof NaN); //number
console.log(typeof typeof 3); //string
</script>
十、内置函数
就是已经封装好，可以直接用的函数。
1.isNaN() 判断是否为NaN
判断括号中的表达式的值是否是 NaN,如果是 NaN, 则返回 true,否则返回 false
<script>
// 判断括号中的表达式的值是否是 NaN,如果是 NaN, 则返回 true,否则返回 false
console.log(isNaN(3)); //false
console.log(isNaN('3')); //false
console.log(isNaN('2 2')); //true
console.log(isNaN("3.4.2")); //false true
console.log(isNaN('a3')); //false true
console.log(isNaN(NaN)); //true
console.log(isNaN('3+undefined')); //true
console.log(isNaN(0 / 0)); //true
console.log(isNaN(3 / 0)); //false
</script>
2.eval（）解析字符串为表达式并返回表达式的结果
eval():将字符串强制转换成表达式并返回表达式的值
<script>
var str = 'a + 8';
console.log(str); //'a + 8'
// console.log(eval(str)); 会报错，因为把字符串强制转换成表达式时，计算机会a没有被定义，所以会报错。
var st = 'undefined + 4';
console.log(st); //'undefined + 4'
console.log(eval(st)); //NaN
</script>
3.parseInt(“字符串”，2~36)
将字符串左边有效的数字部分，转为整数。如果第一个字符是非有效数字，则转为NaN，第二个参数用来限制第一个参数的进制范围。
（1）如果省略第二个参数或第二个参数为0，表示十进制。
（2）如果第二个参数为小于2或大于36，则结果为NaN。
（3）如果第一个参数不符合第二个参数的进制范围，则返回NaN。
<script>
console.log(parseInt("5 5")); //5
console.log(parseInt("3.256"));//3
console.log(parseInt("3a"));//3
console.log(parseInt("a3"));//NaN
console.log(parseInt("0x56"));//86 //0x ：表示十六进制数
console.log(parseInt("3",2));//NaN
console.log(parseInt("3a",1));//NaN
</script>
4.parseFloat（“字符串”）
将字符串左边有效的数字部分，转为小数，如果第一个字符是非有效数字，则转为NaN。
<script>
console.log(parseFloat("5 5")); //5
console.log(parseFloat("3.256"));//3.256
console.log(parseFloat("3a"));//3
console.log(parseFloat("a3"));//NaN
console.log(parseFloat('3.405.2'))//3.405
console.log(parseFloat('')); //NaN
</script>
5.number（‘字符串’）
将有效数字字符串转为数字，如果其中有一个非有效数字，则转为NaN
<script>
// 5. Number('字符串') ： 将有效数字字符串转为数字。如果其中有一个非有效数字，则转为NaN
console.log(Number(3.5));//3.5
console.log(Number('3.2a'));//NaN
console.log(Number('a3'));//NaN
console.log(Number('3 3'));//3 NaN
console.log(Number("3.4.5"))//3.4 NaN
console.log(Number('2.37'));
console.log(Number(true)); //1
console.log(Number('')); //0
</script>
十一、代码规范
1. 运算符两边加一个空格
2. 语句结束加分号
3. 如果在{}中缩进一个tab
4. 小括号嵌套，加空格 ( ( ) )
