前端(十一)—— JavaScript基础:JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符

时间:2023-12-15 14:23:26

JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符

一、JS语言介绍

1、概念

  • 浏览器脚本语言
  • 可以编写运行在浏览器上的代码程序
  • 属于解释性、弱语言类型编程语言

2、组成

  • ES语法:ECMAScript、主要版本ES5和ES6
  • DOM:文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标志语言的标准编程接口。
  • BOM:浏览器对象模型(Browser Object Model),提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;且由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

二、三种存在位置

1、行间式:存在于行间事件中

<body id="body" onload="body.style.backgroundColor='#0ff'">

</body>

2、内联式:某页面的特有逻辑,存在于页面script标签中

<body id="body">
<script type="text/javascript">
body.style.backgroundColor='#0ff'
</script>
</body>

3、外联式:存在于外部JS文件,通过script标签src属性链接,适用于团队开发,JS代码具有复用性

index.js文件
body.style.backgroundColor='#0ff' index.html文件
<script src="./js/index.js"></script>

三、解释性语言特性决定JS代码位置

  • 出现在head标签底部:依赖型JS库
  • 出现在body标签底部:功能型JS脚本

四、JS语法规范

  • 注释
// 单行注释
/*
多行注释
*/
  • 以分号作为语句结尾(允许省略)

五、变量的定义

在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可

var name="Gates", age=56, job="CEO";

1、ES5定义变量

var num = 10;  // 无块级作用域变量
num = 10; // 全局变量

2、ES6定义变量

let num = 10;  // 局部变量
const NUM = 10; // 常量

3、变量(标识符)的命名规范

  • 由字母,数字,_,$组成,不能以数字开头(可以包含中文字符)
  • 区分大小写
  • 不能出现关键字及保留字
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

六、三种弹出框

  • alert:普通弹出框
  • confirm:确认框,有结果返回,如果是确定,返回true;取消返回false
  • prompt:输入框,有结果返回,如果是确定,返回输入的值;取消则返回null
<script>
// 弹出框: 一个弹出框只能弹出一条信息
alert("普通弹出框", "呵呵"); // 呵呵被忽略了 // 确认框
var res = confirm("你是男的吗?"); // true | false
alert(res); // 输入框
var res = prompt("请输入你的小名!"); // 确定为输入值, 取消为null
alert(res); </script>

七、四种调试方式

  • alert():弹出框
  • console.log():控制台显示,在浏览器的console中可以显示
  • document.write():文档中显示,可能会影响布局
  • 浏览器断点调试:在浏览器的Sources中可以对JS部分的代码打断点
<script type="text/javascript">
var a = 10;
var b = 20; // 四种查看变量的值的方式
//弹窗显示
alert(a);
alert(b); // 控制台显示
console.log(a);
console.log(b); //浏览器文档中显示
document.write(a);
document.write(b); // 断点调试 </script>

八、数据类型

1、值类型

typeof() :查看类型,()可以省略
ES5(var)中不会检测变量的重复定义报错;ES6(let | const)会检测变量的重复定义,如果一个变量重复定义会报错
  • number:数字类型
var a = 10;
console.log(a, typeof a);
var c = 314e2; // 31400
// 判断方式
console.log(typeof a == 'number')
  • string:字符串类型
var a = '10';
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'string')
  • boolean:布尔类型
var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'boolean')
  • undefined:未定义类型
var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'undefined')
console.log(a == undefined)

2、引用类型

  • function:函数类型
var a = function(){};
console.log(a, typeof a);
// 判断方式
console.log(typeof a == 'function')
  • object:对象类型
// 在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义
var a = {};
console.log(a, typeof a)
var b = {firstname:"Bill", lastname:"Gates", id:5566}; // b对象有firstname,lastname,id三个属性,
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)

3、具体的对象类型

  • null:空对象
var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a == null)
  • Array:数组对象
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)
  • Date:时间对象
var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)
  • RegExp:正则对象
var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)

4、类型转换

  • 数字|布尔 转换为 字符串
var a = 10 or true

String(a)

a.toString()
  • 布尔|字符串 转换为 数字
var a = true or '10'

Number(a)

+ a

parseFloat()
parseInt()
  • 字符串|数字 转换为 布尔
var a = 10 or '10'
Boolean(a)
  • 自动转换
5 + null  // 5
"5" + null // "5num"
"5" + 1 // "51"
"5" - 1 // 4
  • 特殊产物
// NaN: 非数字类型
// 不与任何数相等,包含自己
// 利用isNaN()进行判断

九、运算符

1、算数运算符

前提:n = 5

运算符 描述 例子 x结果 n结果
+ 加法 x=n+2 7 5
- 减法 x=n-2 3 5
* 乘法 x=n*2 10 5
/ 除法 x=n/2 2.5 5
% 驱魔(余数) x=n/2 1 5
++ 自增 x=++n 6 6
x=n++ 5 6
-- 自减 x=--n 4 4
x=n-- 5 4

2、赋值运算符

前提:x=5,y=5

运算符 例子 等同于 运算结果
= x=y 5
+= x+=y x=x+y 10
-= x-=y x=x-y 0
*= x*=y x=x*y 25
/= x/=y x=x/y 1
%= x%=y x=x%y 0

3、比较运算符

前提:x=5

运算符 描述 比较 结果
== 等于 x=="5" true
=== 绝对等于 x==="5" false
!= 不等于 x!="5" fales
!== 不绝对等于 x!=="5" true
> 大于 x>5 false
< 小于 x<5 false
>= 大于等于 x>=5 true
<= 小于等于 x<=5 true

4、逻辑运算符

前提:n=5

运算符 描述 例子 结果
&& x=n>10&&++n x=false,n=5(短路)
|| x=n<10||n-- x=true,n=5(短路)
! x=!n x=false,x=5
// 运算结果为true|false
var a = 10;
var b = 20;
var c = 30;
var res = a < b && c == 30;
console.log(res);
// 真,真 => 真
// 真,假 => 假
// 假,真 => 假 短路
// 假,假 => 假 短路
// &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路 // 短路
var res = a > b && ++c;
console.log(res, c); // c=30 // ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路
// 真,真 => 真 短路
// 真,假 => 真 短路
// 假,真 => 真
// 假,假 => 假 // !运算,真则假,假则真,负负得正
console.log(!1, !!1);

5、三目运算(三元运算)

// 三目运算符(三元运算符)
// 结果 = 条件表达式 ? 结果1 : 结果2;
// 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,
var tq = prompt("天气(晴|雨)")
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);

6、ES6语法解构赋值

  • 数组的解构赋值
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
  • 对象的解构赋值
let {key: a} = {key: 10}
// a=10
  • 字符串解构赋值
let [a,b,c] = 'xyz'
// a='x',b='y',c='z'