JavaScript学习笔记

### JavaScript学习笔记

##### JavaScript`语句`

- 分号可在一行写多个语句；

- 可以不写，但建议用分号结束；

- JavaScript 会忽略空格，可以用空格增加可读性；

- 运算符之后可换行，增加可读性；

- 可以用花括号（{...}）组合代码块，代码块的作用是定义一同执行的语句；

- JavaScript 语句常用关键词：

| 关键词        | 描述                                              |

| :------------ | :------------------------------------------------ |

| break        | 终止 switch 或循环。                              |

| continue      | 跳出循环并在顶端开始。                            |

| debugger      | 停止执行 JavaScript，并调用调试函数（如果可用）。 |

| do ... while  | 执行语句块，并在条件为真时重复代码块。            |

| for          | 标记需被执行的语句块，只要条件为真。              |

| function      | 声明函数。                                        |

| if ... else  | 标记需被执行的语句块，根据某个条件。              |

| return        | 退出函数。                                        |

| switch        | 标记需被执行的语句块，根据不同的情况。            |

| try ... catch | 对语句块实现错误处理。                            |

| var          | 声明变量。                                        |

##### JavaScript 语法

- 基础变量运算

```javascript

var x, y; // 如何声明变量

var a = 8;    //直接声明并赋值

x = 7; y = 8; // 如何赋值

z = x + y; // 如何计算值

```

- 字符串可以直接相加：

```javascript

"Bill" + 6 + "Gates"    //输出Bill8Gates；字符串可以用单引号，也可以用双引号

```

- 注释：

双斜杠 // 或 /* 与 **/* 之间的代码被视为*注释*

```javascript

//这是一个注释

/*

这

也是一个注释

*/

```

##### JavaScript 数据类型

- JavaScript 只有一种数值类型（number）：

```js

var x1 = 34.00;    // 带小数点

var x2 = 34;        // 不带小数点

var y = 123e5;      // 科学计数法：12300000

var z = 123e-5;    // 科学计数法：0.00123

```

- typeof 运算符可以用来确定 JavaScript 变量的类型

```js

typeof ""                  // 返回 "string"

typeof "Bill"              // 返回 "string"

typeof "Bill Gates"          // 返回 "string"

typeof 0                  // 返回 "number"

typeof 3.14                // 返回 "number"

typeof [] // 返回 "object"

```

##### JavaScript 数组

- 多种方式定义数组：

```

var cars = [

    "Saab",

    "Volvo",

    "BMW"

];

var cars = new Array("Saab", "Volvo", "BMW");

```

- 数组方法[[详细教程](https://www.w3school.com.cn/js/js_array_methods.asp)]

  - toString() 返回数组转化成（逗号分隔的）字符串

  - joying() 返回数组转化成可以规定分隔符的字符串，如 fruits.join(" * ") 生成 Banana * Orange * Apple * Mango

  - pop() 删除最后一个元素（返回“被弹出”的值）

  - push() 添加一个新元素在数组结尾处（返回新的length）

  - shift() 删除首个数组元素，并把所有其他元素“位移”到更低的索引（返回被“位移出”的字符串）

  - unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素（返回新数组的长度）

  - delete() 方法将特定元素替换为undefined（不想留下空洞用splice()）

  - splice() 方法可用于向数组添加新项，也在数组中不留“空洞”的情况下移除元素

  - concat() 方法通过合并（连接）现有数组来创建一个新数组

  - slice() 方法用数组的某个片段切出新数组

- 数组迭代方法

  - forEach() 方法为每个数组元素调用一次函数（回调函数）

  - map() 方法通过对每个数组元素执行函数来创建新数组；不会对没有值的数组元素执行函数；不会更改原始数组

    - 这个例子将每个数组值乘以2：

      ```js

      var numbers1 = [45, 4, 9, 16, 25];

      var numbers2 = numbers1.map(myFunction);

      function myFunction(value, index, array) {

        return value * 2;

      }

      ```

  - filter() 方法创建一个包含通过测试的数组元素的新数组。

    - 这个例子用值大于 18 的元素创建一个新数组：

      ```js

      var numbers = [45, 4, 9, 16, 25];

      var over18 = numbers.filter(myFunction);

      function myFunction(value, index, array) {

        return value > 18;

      }

      ```

  - reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值；在数组中从左到右工作。另请参阅 reduceRight()；方法不会减少原始数组

  - every() 方法检查所有数组值是否通过测试 （只要一个 false 就为 false）

  - some() 方法检查某些数组值是否通过了测试 （只要一个 true 就为 true）

  - indexOf()  / Array.lastIndexOf()方法在数组中搜索元素值并返回其位置。

  - find() 方法返回通过测试函数的第一个数组元素的值。(ES6)

  - findIndex() 方法返回通过测试函数的第一个数组元素的索引。(ES6)

##### JavaScript 函数

- JavaScript 函数通过 function 关键词进行定义，其后是*函数名*和括号 ()。由函数执行的代码被放置在花括号中：*{}*

```js

function name(参数 1, 参数 2, 参数 3) {

    要执行的代码

}

```

- 函数内可以用 arguments 直接调用函数内的参数

```js

//当不知道参数数量时求和

sum(1,6,5,7,8);

function sum() {

    var s = 0;

    for (var i=arguments.length-1; i>=0; i--) {

        s += arguments[i];

    }

    return s;

}

```

arguments 对象不是一个 Array。它类似于 Array，但除了 .length 属性和索引元素之外没有任何 Array 属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的 Array：

```js

var args = Array.prototype.slice.call(arguments);

var args = [].slice.call(arguments);

// ES2015

const args = Array.from(arguments);

const args = [...arguments];

```

- 函数的 length 属性的值是函数期望参数的个数；

- 函数可以通过 valueOf() 方法和 toString() 方法返回函数的源代码。

##### JavaScript 对象

JavaScript 变量是数据值的容器。值以*名称:值*对的方式来书写（名称和值由冒号分隔）。JavaScript 对象是*被命名值*的容器。

```js

var person = {

  firstName: "Bill",

  lastName : "Gates",

  id      : 678,

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

};

```

- this 关键词

在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 *person 对象*。

换言之，this.firstName 的意思是 *this 对象*的 firstName 属性。

它拥有不同的值，具体取决于它的使用位置：

- 在方法中，this 指的是所有者对象。

- 单独的情况下，this 指的是全局对象。

- 在函数中，this 指的是全局对象。

- 在函数中，严格模式下，this 是 undefined。

- 在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

##### Math 对象方法

| 方法            | 描述                                                    |

| :--------------- | :------------------------------------------------------- |

| abs(x)          | 返回 x 的绝对值                                          |

| acos(x)          | 返回 x 的反余弦值，以弧度计                              |

| asin(x)          | 返回 x 的反正弦值，以弧度计                              |

| atan(x)          | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |

| atan2(y,x)      | 返回从 x 轴到点 (x,y) 的角度                            |

| ceil(x)          | 对 x 进行上舍入                                          |

| cos(x)          | 返回 x 的余弦                                            |

| exp(x)          | 返回 Ex 的值                                            |

| floor(x)        | 对 x 进行下舍入                                          |

| log(x)          | 返回 x 的自然对数（底为e）                              |

| max(x,y,z,...,n) | 返回最高值                                              |

| min(x,y,z,...,n) | 返回最低值                                              |

| pow(x,y)        | 返回 x 的 y 次幂                                        |

| random()        | 返回 0 ~ 1 之间的随机数                                  |

| round(x)        | 把 x 四舍五入为最接近的整数                              |

| sin(x)          | 返回 x（x 以角度计）的正弦                              |

| sqrt(x)          | 返回 x 的平方根                                          |

| tan(x)          | 返回角的正切                                            |

##### JavaScript 数值方法

- toString() 以字符串返回数值

- toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字

- toFixed() 返回字符串值，它包含了指定位数小数的数字

- toPrecision() 返回字符串值，它包含了指定长度的数字

- valueOf() 以数值返回数值

- Number() 可用于把 JavaScript 变量转换为数值

- Number() 还可以把日期转换为数字

- parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字

- parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字

-

##### JavaScript 逻辑

- 逻辑运算符用于判定变量或值之间的逻辑。

  我们给定 x = 6 且 y = 3，下表解释了逻辑运算符：

| 运算符 | 描述 | 例子                          |

| :----- | :--- | :---------------------------- |

| &&    | 与  | (x < 10 && y > 1) 为 true    |

| \|\|  | 或  | (x == 5 \|\| y == 5) 为 false |

| !      | 非  | !(x == y) 为 true            |

- JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。

```js

variablename = (condition) ? value1:value2

```

##### JavaScript 条件

- if / else 写法

```js

if (hour < 18) {

    greeting = "Good day";

} else {

    greeting = "Good evening";

}

```

- case 写法

```js

switch (new Date().getDay()) {    //switch 条件判读采用严格比较（===）

    case 4:

    case 5:

        text = "周末快到了：）";

        break;

    case 0:

    case 6:

        text = "今天是周末~";

        break;

    default:

        text = "期待周末！";

}

```

##### JavaScript 循环

- For 循环写法

```js

var i = 0;

var len = cars.length;

for (; i < len; ) {

    text += cars[i] + "<br>";

      i++;

}

```

- For / in 循环写法

```js

var person = {fname:"Bill", lname:"Gates", age:62};

var text = "";

var x;

for (x in person) {

    text += person[x];

}

```

- While 循环写法

```js

while (i < 10) {

    text += "数字是 " + i;

    i++;

}

```

- Do While 循环

```js

do {

    text += "The number is " + i;

    i++;

}

while (i < 10);

```

##### JavaScript 错误

可以通过 try、catch、throw、finally 来测试代码中的错误。

##### let 和 const (ES6)

- let 定义的量只在该块作用域之内有效。

```js

let i = 7;

for (let i = 0; i < 10; i++) {

  // 一些语句

}

// 此处 i 为 7

```

- const 只在该块作用域之内有效；只能在声明时赋值；赋值后值不能被改变。

- const 声明的数组可以改变其元素，但不能重新赋值。

##### 箭头函数（ES6）

- 相当于 function 的简写

- 没有自己的 this

```

// ES5

var x = function(x, y) {

  return x * y;

}

// ES6

const x = (x, y) => x * y;

```

##### JavaScript 对象构造器

- 构造写法

```js

function Person(first, last, age, eye) {

    this.firstName = first;

    this.lastName = last;

    this.age = age;

    this.eyeColor = eye;

}

```

- 创造对象写法（顺序对应）

```js

var myFather = new Person("Bill", "Gates", 62, "blue");

var myMother = new Person("Steve", "Jobs", 56, "green");

```

##### async 函数（ES6）

- async 表示函数里有异步操作， await 表示紧跟在后面的表达式需要等待结果

- Pomise 对象：

  -  Promise对象的构造函数接受一个函数作为参数，而该函数的两个参数分别是**resolve和reject**。且它们又是两个函数，作用是修改promise对象的状态。

  - Promise.then()

    - Promise实例具有then方法，它的作用是**为promise对象状态改变时指定回调函数**，换句话说，当promise对象状态改变时，会分别对应执行then方法中对应的回调函数。then方法有2个参数，第一个函数接收resolved状态的回调，第二个参数接收reject状态的回调。

    - [详细内容](https://www.jianshu.com/p/850518344a85)