# JavaScript

**Repository Path**: ouzai-zai/java-script

## Basic Information

- **Project Name**: JavaScript
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-26
- **Last Updated**: 2021-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JS

## 一、JS基本六种数据类型

1. string	字符串
2. undefined  未定义
3. null 空值
4. number 数值
5. object 对象
6. Boolean 布尔值

## 二、类型转换

> 强制类型转换
>
> ——	指将一个数据类型强制转换成其他数据类型
>
> ——	类型转换主要转换为 string number Boolean

### 2.1、转换为String

- 方式一：
  - 调用被转换数据类型的toString()方法
  - 该方法不会影响到原变量，会将转换的结果返回
  - 注意：null和undefined这两个值没toString()方法 

```js
var a = 123
a.toString()
var b = a.toString()

console.log(typeof a) // number
console.log(typeof b) // string
```

- 方式二：
  - 调用String() 函数，并将被转换的数据作为参数传递给函数
  - 使用String()函数转换时，对于number和Boolean实际上就是调用toString()方法

```js
var a = 123
a = String(a)
console.log(typeof a);
```

### 2.2、转换为Number

- 方式一：
  - 使用Number()函数
    - **字符串** ——> 数字
      - 如果是纯字符串，则直接将其转换为数字
      - 如果字符串中有非数字内容，则转换为NaN
      - 如果字符串是一个空或者全空格的字符串，则转换为0
    - **布尔值** ——> 数字
      - true 转成 1
      - false 转成 0
    - **null** ——> 数字 == 0
    - **undefined** ——> 数字  == NaN

```js
var a = '123'

a = Number(a)
console.log(typeof a); // number
```

- 方式二：
  - 专门对付字符串
  - parseInt()  把一个字符串转换成一个**整数**
  - parseFloat() 把一个字符串转换成一个**浮点数**
  - 对非String使用parseInt或parseFloat，会先转换成string，然后在操作

```js
var a = '123px22'
a = parseInt(a)

console.log(typeof a); // number
console.log(a); // 123

var a = '123.233px22'
a = parseFloat(a)

console.log(typeof a); // number
console.log(a); // 123.233
```

### 2.3、转换为Boolean

- 方式一：
  - 使用Boolean()函数
  - 数字 ——> 布尔
    - 除了 0 和 NaN ，其余都是true
  - 字符串 ——> 布尔
    - 除了空串，其余都是true
  - null 和 undefined ——> 布尔
    - 都转换为 false

```js
var a = 123
a = Boolean(a)

console.log(a);
console.log(typeof a);
```

## 三、自增和自减

### 3.1、自增

- 自增 **++**
  - 通过自增可以使变量在自身的基础上增加一
  - 对于一个变量自增以后，原变量的值会立即自增一
  - 自增分成两种：后++（**a++**）和前++（**++a**）无论是**++a**还是**a++**，都会立即使变量自增一，不同的是**a++**和**++a**的值，**a++**的值等于原变量的值（自增前），**++a**的值等于新值（自增后的值）
    - **a++**：就是先返回原变量的值，再自增，先输出再运算
    - **++a**：是直接自增然后返回新值，先运算再输出

```js
var a = 233

a++
console.log(a) // 233 虽然打印的是233，但是值已经到了234

++a
console.log(a) // 235
```

### 3.2、自减

- 自减 --
  - 通过自减可以使变量在自身的基础上减少一
  - 自减分成两种：后--（**a--**）和前--（**--a**），无论是**--a**还是**a--**，都会立即使变量自减一，**a--**的值等于原变量的值（自增前），**--a**的值等于新值（自增后的值）
    - **a--**：就是先返回原变量的值，再自增，先输出再运算
    - **--a**：是直接自增然后返回新值，先运算再输出

```js
var a = 111

a--
console.log(a) // 111 虽然打印的是111，但是值已经到了110

--a
console.log(a) // 109
```

##   四、三元运算符

> 条件运算符也叫三元运算符
>
> - 语法：
>   - 条件表达式？语句1：语句2
> - 执行流程：
>   - 条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回执行结果。如果该值为false，则执行语句2，并返回执行结果
>   - 如果条件表达式的求知结果是一个非布尔值，它会将其转换为布尔值然后在运算

## 五、判断语句

### 5.1、if 语句

```js
if (条件) {
  (如果条件为 true 时执行的代码)
  语句...
} else if (条件) {
  (如果条件为 true 时执行的代码)
  语句...
} else {
  (如果上面两个都为false就直接这里)
  语句...
}
```

### 5.2、switch

```js
switch(表达式) {
  case n:
    代码块
    break;
  case n:
    代码块
    break;
  default:
    默认代码块
} 
```

- **break 关键词**

  如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

  此举将停止代码块中更多代码的执行以及 case 测试。

  如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

  break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

  不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

- **default 关键词**

  default 关键词规定不存在 case 匹配时所运行的代码：

### 5.3、while 循环

```js
while (条件){
  需要执行的代码
}
```

while是先判断后执行

```js
do{
  需要执行的代码
}while (条件);
```

do...while是先执行后判断

## 六、作用域

> 作用域指一个变量的作用的范围
>
> JS中共有两种作用域：全局作用域，函数作用域

### 6.1、全局作用域

- **直接编写在 script 标签中的 JS 代码，都在全局作用域中**
- 全局作用域在页面打开时创建，在页面关闭时销毁
- 在全局作用域中有一个全局对象 window，他代表的是一个浏览器的窗口，由浏览器创建，我们可以直接使用
- 在全局作用域中，**①创建的变量都会作为 window 对象的属性保存。②创建的函数都会作为 window 对象的方法保存**

```js
①
{
  var a = 10
	var b = "hello"

  console.log(window.a) // 10
  console.log(window.b) // "hello"
  console.log(window.c) // undefined
}
②
{
  function fun(){
    console.log('aaa')
  }
  
  fun() // aaa
  window.fun() // aaa
}
```

### 6.2、函数作用域

- 调用函数时**创建函数作用域，函数执行完毕后，函数作用域销毁**
- 每调用一次函数就会创建一个新的函数作用域，他们互相独立的
- 在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域中的变量
- 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域寻找

```js
{
  var a = 10
  function fun(){
    console.log(a) // 10  先找当前作用域中的a，如果没有往上一级找
	}
}

{
  function fun2(){
  	var b = 20
	}
  console.log(b) // undefined  当前在全局作用域，没找到b，所以打印undefined
}

{
  var c = 20
  function fun3(){
    console.log(c) // 20  找当前作用域，因为c=22没有使用var 关键字，所有变量没有提前声明，它就直接去找上一级的作用域，找到了20
    c = 22
	}
  console.log(c) // 22
  // 如果在函数中的变量不使用var声明，则会被当成全局变量
  
  function fun4() {
    console.log(d) // undefined  
    var d = 33
  }
}
```

## 七、this

> 解析器在调用函数每次都会向函数内部传递进一个隐含的参数this，this指向的是一个对象，这个对象我们称之为函数执行的上下文，根据函数的调用方式不同，this指向不同的对象

```js
function fun(){
  console.log(this)
}
fun() // 以函数的形式调用，this永远指向window


var obj = {
  name: '刻晴',
  sayName:fun
}
obj.sayName() // 以方法的形式调用，this就是调用方法的那个对象，这里就指向的obj对象
```

## 八、构造函数

> 构造函数就是一个普通的函数，创建方法和普通函数没有区别。
>
> 不同的是构造函数习惯首字母大写
>
> 构造函数和普通函数的区别就是调用方法不同，普通函数是直接调用，构造函数需要使用 new 关键字来调用

格式：

```js
function Person() {
  
}
var per = new Person()
```

## 九、函数的方法

> call()和apply()
>
> 这两个方法都是函数对象的方法，需要通过函数对象来调用
>
> 当对函数调用call()和apply()都会调用函数执行
>
> 在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会编程函数执行的this
>
> call()方法可以将实参在对象之后依次传递
>
> ```
> var obj = {
>   name: 'obj',
>   sayName: function () {
>   	alert(this.name)
> 	}
> }
> 
> function fun(a, b) {
> 	console.log(a + '是我' + ',' + b + '是我')
> }
> fun.call(obj, 1, 2) // 1是我,2是我
> ```

## 十、数组

### 10.1、数组常用的方法

- **push（）**该方法可以向数组的**末尾添加一个或多个元素**，并**返回数组的新长度**

```js
var arr = ['刻晴','尤拉','神里绫华']

arr.push('胡桃')
console.log(arr) // '刻晴,尤拉,神里绫华,胡桃'

var result = arr .push('甘雨')
console.log(result) // 5  返回五个长度

```

- **pop（）**该方法可以**删除数组的最后一个元素**，并将被删除的元素作为返回值返回

```js
var arr = ['刻晴','尤拉','神里绫华']

arr.pop()
console.log(arr) // '刻晴,尤拉'

var result = arr.pop()
console.log(result) // 神里绫华
```

- **unshift（）**向数组**开头添加一个或多个元素**，并返回新的数组长度

```js
var arr = ['刻晴','尤拉','神里绫华']

arr.unshift('甘雨','雷神')
console.log(arr) // '甘雨，雷神,刻晴,尤拉,神里绫华'
```

- **shift（）**可以删除数组的第一个元素，并将被删除的元素作为返回值返回

```js
var arr = ['刻晴','尤拉','神里绫华']

arr.shift()
console.log(arr) // 尤拉,神里绫华

var result = arr.shift()
console.log(result) // 刻晴
```

- **slice（）**可以用来从数组提取指定元素，该方法不会改变原数组，而是将截取到的元素封装到一个新的数组中返回
  - 第一个参数是起始索引，第二个参数是结束索引
  - 起始索引包括它本身，结束索引不包括本身
  - 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

```js
var arr = ['刻晴', '尤拉', '神里绫华']

var result = arr.slice(1,3)
console.log(result) // 尤拉,神里绫华
```

- **splice（）**用于删除数组中的指定元素，使用该方法会影响到原数组，会将指定元素从数组中删除
  - 第一个参数起始索引，第二个参数，往后删除几个，第三个参数及之后所有，添加的元素

```js
var arr = ['刻晴', '尤拉', '神里绫华']
arr.splice(0,1)
console.log(arr);
```

- **concat（）**可以连接两个或多个数组，并将新的数组返回，不会对原数组产生影响

```js
var arr = ['刻晴', '尤拉', '神里绫华']
var arr2 = ['胡桃','钟离','雷神']

var result = arr.concat(arr2)

console.log(result);
```

- **join（）**该方法可以将数组转换为一个字符串，不会对原数组产生影响，而是将转换后的字符串作为返回结果
  - 在join（）中可以指定一个字符串作为参数，这个字符串将作为数组中元素的连接符

```js
var arr = ['刻晴', '尤拉', '神里绫华']

var result = arr.join('-')
console.log(result); //	刻晴-尤拉-神里绫华
```

- **reverse（）**该方法用来反转数组（前后颠倒），会对原数组造成影响

```js
var arr = ['刻晴', '尤拉', '神里绫华']

var result = arr.reverse()
console.log(result);
```

- **sort（）**可以从来对数组元素进行排序，会对原数组造成影响，默认按照Unicode编码排序

  ```js
  var arr = ['b', 'c', 'd', 'f', 't', 'y', 'a']
  
  arr.sort()
  console.log(arr);
  ```

  - 但是，也可以自己来指定排序规则，

    - 在sort（）添加一个回调函数，里指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，
    - 浏览器会根据回调函数的返回值来决定顺序
      - 如果返回值大于0，则元素会交换位置
      - 如果返回值小于0，则位置不变
      - 如果返回值是0，则认为两个元素相等 ，位置不变

    ```js
    var arr = [11, 1, 5, 8, 7, 4, 99, 6, 3, 65]
    
        arr.sort(function (a, b) {
          return a - b
        })
        console.log(arr);
    ```

    



### 10.2、forEach

- 一般我们使用for循环去遍历数组，也可以使用forEach（）来遍历数组。
- forEach（）方法需要一个**函数作为参数**，像这种函数，由我们创建但不由我们调用，称之为**回调函数**。数组中有几个元素函数就会执行几次。
- 每次执行时，浏览器会将遍历到的元素以**实参**的形式传递进来，我们可以定义**形参**来读取这些内容
- 浏览器会在回调函数中传递三个参数：
  - 第一个参数：是当前正在遍历的元素
  - 第二个参数：是当前正在遍历的元素的索引值
  - 第三个参数：正在遍历的数组

```js
var arr = ['刻晴', '尤拉', '神里绫华']

arr.forEach(function (a,b,c) {
  console.log(a);
  console.log(b);
  console.log(c);
})
```

## 十一、Data（）对象

Data对象在JS中使用来表示一个**时间**

直接使用构造函数创建一个**Date对象**，则会封装为当前代码执行的时间

```js
var d = new Date()
console.log(d);
```

创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数

格式：月份 / 日 / 年 / 时：分：秒

```js
var d = new Date('03/29/2021 13:14:20')
console.log(d);
```

关于对象的方法：https://www.w3school.com.cn/jsref/jsref_obj_date.asp

可以用来测试代码运行速度

```js
var s = Date.now()

for (var i = 0; i < 100; i++) {
  console.log(i);
}
var e = Date.now()

console.log(e - s+'毫秒');
```

## 十二、Math（）对象

Math和其他对象不同，它**不是一个构造函数**，它属于一个**工具类**不要创建对象，里面封装了数学运算相关的属性和方法

https://www.runoob.com/jsref/jsref-obj-math.html