1 js基础

发布时间：2023-09-06 02:18责任编辑：白小东关键词：js

# JS基础

## 一、JS语言介绍

#### 1、概念

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

#### 2、组成

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

## 二、三种存在位置

#### 1、行间式：存在于行间事件中

```html
<body id="body" onload="body.style.backgroundColor=‘#0ff‘">
???
</body>
```

#### 2、内联式：存在于页面script标签中

```html
<body id="body">
???<script type="text/javascript">
body.style.backgroundColor=‘#0ff‘
</script>
</body>
```

#### 3、外联式：存在于外部JS文件，通过script标签src属性链接

```html
index.js文件
body.style.backgroundColor=‘#0ff‘

index.html文件
<script src="./js/index.js"></script>
```

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

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

## 四、JS语法规范

- 注释

```js
// 单行注释
/*
多行注释
*/
```

- 以分号作为语句结尾（允许省略）

## 五、变量的定义

#### 1、ES5定义变量

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

#### 2、ES6定义变量

```js
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：确认框
- prompt：输入框

## 七、四种调试方式

- alert()
- console.log()
- document.write()
- 浏览器断点调试

## 八、数据类型

#### 1、值类型

- number：数字类型

```js
var a = 10;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ‘number‘)
```

- string：字符串类型

```js
var a = ‘10‘;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ‘string‘)
```

- boolean：布尔类型

```js
var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ‘boolean‘)
```

- undefined：未定义类型

```js
var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ‘undefined‘)
console.log(a == undefined)
```

#### 2、引用类型

- function：函数类型

```js
var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ‘function‘)
```

- object：对象类型

```js
var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ‘object‘)
console.log(a instanceof Object)
```

#### 3、具体的对象类型

- null：空对象

```js
var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ‘object‘)
console.log(a == null)
```

- Array：数组对象

```js
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：时间对象

```js
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：正则对象

```js
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、类型转换

- 数字|布尔转换为字符串

```js
var a = 10 or true

String(a)

a.toString()
```

- 布尔|字符串转换为数字

```js
var a = true or ‘10‘

Number(a)

+ a

parseFloat()
parseInt()
```

- 字符串|数字转换为布尔

```js
var a = 10 or ‘10‘
Boolean(a)
```

- 自动转换

```js
5 + null ?// 5
"5" + null ?// "5null"
"5" + 1 ?// "51"
"5" - 1 ?// 4
```

- 特殊产物

```js
// NaN: 非数字类型
// 不与任何数相等，包含自己
// 利用isNaN()进行判断
```

## 九、运算符

#### 1、算数运算符

前提：n = 5

#### 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 ????????|

#### 5、三目运算符

```js
// 结果 = 条件表达式 ? 结果1 : 结果2;

// eg:
var tq = prompt("天气(晴|雨)")
var res = tq == ‘晴‘ ? "今天天气挺好" : "请假回家收衣服";
console.log(res);
```

#### 6、ES6语法解构赋值

- 数组的解构赋值

```js
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
```

- 对象的解构赋值

```js
let {key: a} = {key: 10}
// a=10
```

- 字符串解构赋值

```js
let [a,b,c] = ‘xyz‘
// a=‘x‘,b=‘y‘,c=‘z‘
```

1 js基础

原文地址：https://www.cnblogs.com/ouyang99-/p/9784097.html

1 js基础

知识推荐