【前端】JavaScript 基础
> 作者：დ旧言~
> 座右铭：松树千年终是朽，槿花一日自为荣。
> 目标：了解 JavaScript 基础语法。
> 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安!
> 专栏选自：前端基础知识_დ旧言~的博客-CSDN博客
> 望小伙伴们点赞👍收藏✨加关注哟💕💕
一、处识 JavaScript
概念：
JavaScript 简称 JS ，是一个脚本语言，通过解释器运行，主要在客户端（浏览器）运行，现在也可以基于 node.js 在服务端运行
JavaScript 能做的事情：
- 网页开发（复杂的特效和用户交互）
- 网页游戏开发
- 服务器开发（基于node.js）
- 桌面程序开发（如VSCode）
- 手机app开发
JavaScript 的组成：
- ECMAScript：JavaScript语法
- DOM：页面文档对象模型，对页面的元素进行操作
- BOM：浏览器对象模型，对浏览器窗口进行操作
JS 是一个动态类型语言, JS 是一个弱类型语言：
- 一个变量在程序运行过程中,类型可以发生改变,这就是动态类型 (js,python,php...)
- 一个变量在程序运行过程中,类型学不能发生改变,这就是静态类型(c,java,c++,go..)
- 可以发生隐式类型转换的就是弱类型语言
- 不可以发生隐式类型转换的就是强类型语言
二、JavaScript 的基础语法
2.1、变量的用法
创建变量：
- var与let都可以创建变量，他俩只表示这是一个变量，
- 而不指定具体的类型，具体类型由后面具体的赋值确定
- var与let的区别是作用域不同，var定义的是全局变量,let定义的是局部变量
- 建议使用 let
var a = 10; var name = "张三"; let flag = true;使用变量：
var a = 10; var name = "张三"; let flag = true; a = 20; //修改变量的值 console.log(name); //控制台打印变量
理解动态类型：
JS的变量类型是程序运行过程中才确定的，随着程序的运行，变量的类型可能会发生改变。
var a = 10; var name = "小花"; a = "张三"; name = 10;
2.2、基本数据类型
2.2.1、Number 数字类型
JS不区分整数和浮点数，统一用数字类型来表示，可以用不同的进制表示：
var a = 10; //十进制 var b = 07; //八进制，以0开头 var c = 0xa; //十六进制，以0x开头 var d = 0b10;//二进制，以0b开头
特殊的数字值：
- Infinity：无穷大，大于任何数字，表示数字已经超过了JS能表示的范围
- -Infinity：负无穷大，小于任何数字。表示数字已经低于了JS能表示的范围
- NaN：表示当前的结果不是一个数字
var max = Number.MAX_VALUE; console.log(max*2); //得到Infinity console.log(-max*2);//得到-Infinity console.log("haha"-10);//得到NaN注意：
- 负无穷大和无穷小不是一回事，无穷小是无限趋近 0，值为 1 / Infinity
- "haha" - 10得到 NaN ，但是 "haha" + 10不是 NaN ，而是进行字符串拼接得到 "haha10"
- 可以使用 isNaN 判断是不是一个数字：
console.log(isNaN(10)); //true console.log(isNaN("haha"-10)); //false2.2.2、String 字符串类型
字符串字面量需要用单引号或者双引号引起来：
var a = "aaa"; var b = 'bbb'; var c = ccc; //运行出错
如果字符串中已经包含了引号咋办：
var msg = "my name is 'zhangsan'"; //正确，双引号包裹单引号 var msg = 'my name is "zhangsan"'; //正确，单引号包裹双引号 var msg = "my name is \"zhangsan\""; //正确，使用转义字符，\"表示内部的引号 var msg = "my name is "zhangsan""; //出错
转义字符：
- \n，表示换行
- \\，表示 \
- \'，表示 '
- \"，表示 "
- \t ，表示制表符
求字符串的长度：使用String的length属性即可
var s = "haha"; console.log(s.length); //4 var c = "hello"; console.log(c.length); //5
字符串拼接：使用+进行拼接
var a = "hello"; var b = "word"; console.log(a+b);//helloword
数字和字符串也可以拼接：
var a = "my age is "; var b = 16; console.log(a+b); //my age is 16
2.2.3、Boolean 布尔类型
输出结果：
- 表示真true或假false，参与运算时当作1和0
var a = true; var b = false; console.log(2+a+b);//3
2.2.4、undefined 数据类型
如果一个变量没有被初始化，就是 undefined 类型，结果也是 undefined ：
var a; console.log(a);//undefined
undefined 和字符串相加，结果为字符串拼接的结果：
var a; console.log(a+"haha"); //undefinedhaha
undefined 和数字相加，结果为 NaN ，表示不是一个数字类型：
var a; console.log(a+10);//NaN
2.2.5、null 空值类型
null 表示当前变量为一个“空值”：
var a = null; console.log(a+10); //10 console.log(a+"haha"); //nullhaha
注意：
null 和 undefined 都为取值非法情况，但是侧重不一样，null 表示当前的值为空（相当于有一个空盒子），undefined 表示当前变量未定义（相当于连盒子都没有）
2.3、运算符
typeof 运算符：使用typeof操作符可以用来检查一个变量的数据类型。
console.log(typeof 123); console.log(typeof "Hello,World!"); console.log(typeof true); console.log(typeof undefined); console.log(typeof null);
算数运算符：
- + - * / %
赋值运算符和复合赋值运算符：
- = += -= *= /= %=
自增自减运算符：
- ++ --
比较运算符：
- = ==(会隐式类型转换) != ===(不会隐式类型转换) !==
逻辑运算符：
- && || !
位运算符：
- & | ~ ^
移位运算符：
- >>>
2.4、条件语句
if 语句：判断一个数是奇数还是偶数
var num = 10; if(num == 1){ console.log(num+"既不是偶数也不是奇数"); }else if(num % 2 == 0){ console.log(num+"是偶数"); }else { console.log(num+"是奇数"); }三元表达式：将一个 boolean 表达式的值取反
var a = true; a = a?false:true; console.log(a);
switch分支：用户输入一个数，判断是星期几
var day = prompt("请输入一个数字："); switch(parseInt(day)){ //day为一个字符串，必须转为数字 case 1: alert("星期一"); break; case 2: alert("星期二"); break; case 3: alert("星期三"); break; case 4: alert("星期四"); break; case 5: alert("星期五"); break; case 6: alert("星期六"); break; case 7: alert("星期天"); break; default: alert("输入有误"); }2.5、循环语句
while 循环：打印1到10
var num = 1; while(num
- >>>
- & | ~ ^
- && || !
- = ==(会隐式类型转换) != ===(不会隐式类型转换) !==
- ++ --
- = += -= *= /= %=
- + - * / %
- 表示真true或假false，参与运算时当作1和0
