填坑日记之JS恶补

一、JS输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框

window.alert(5 + 6);

• 使用 document.write() 写入 HTML 输出

document.write(5 + 6);

• 使用 innerHTML 写入 HTML 元素

document.getElementById("demo").innerHTML = 5 + 6;

• 使用 console.log() 写入浏览器控制台     

console.log(5 + 6);

二、部分关键字

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

JavaScript 的语言结构

声明变量=>赋值=>计算值

var price1 = 7; //var声明变量||赋值
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;//计算值

Value = undefined

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

三、JS Let

Let关键词作用为声明块作用域变量，var声明的变量为全局作用域(相对而言)

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var和 let变量是不允许的(一次性！)

通过 var 声明的变量会提升到顶端。可以在声明变量之前就使用它

通过 let 定义的变量不会被提升到顶端。

在声明 let 变量之前就使用它会导致 ReferenceError（引用错误）。

变量从块的开头一直处于“暂时死区”，直到声明为止

四、JS Const

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

JavaScript Const (w3school.com.cn)

五、Var Let Const区别

面试官：说说var、let、const之间的区别 | web前端面试 - 面试官系列 (vue3js.cn)

Hoisting

提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。

（出现于var变量声明前使用变量，x会被默认提升到顶部成为一个全局变量，避免引用声明前赋值变量是undefined）

x = 5; // 把 5 赋值给 x
 
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x
​
var x; // 声明 x

x = 5; // 把 5 赋值给 x
 
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x
​
var x; // 声明 x

JavaScript 只提升声明，而非初始化。

let const不会提升，只有Var会

（只要规定使用变量前先声明的好习惯，就可以避免到Hoisting以避免一下意想不到的bug）

(95条消息) 变量提升与函数提升；var、let、const比较_lujiebin的博客-CSDN博客

六、运算符

跟一般语言一致，这里再列举复习一下

算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
--	递减

赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

JavaScript 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

JavaScript 数据类型：字符串值，数值，布尔值，数组，对象

对象

对象也是变量。但是对象包含很多值。

这段代码把多个值（porsche, 911, white）赋给名为 car 的变量：

var car = {type:"porsche", model:"911", color:"white"};

七、JS 数组排序

数组排序

sort() 方法以字母顺序对数组进行排序：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

以随机顺序排序数组

实例

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 

查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

升序排序：

实例

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
​
// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

降序排序：

实例

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
​
// 现在 points[0] 包含最高值
// 而 points[points.length-1] 包含最低值

对数组使用 Math.max()

您可以使用 Math.max.apply 来查找数组中的最高值：

实例

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}
Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

对数组使用 Math.min()

您可以使用 Math.min.apply 来查找数组中的最低值：

实例

function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}
Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。

反转数组

reverse() 方法反转数组中的元素。

您可以使用它以降序对数组进行排序：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

八、日期获取方法

var d = new Date();

//使用 setInterval() 显示时间，间隔为一秒（1000 毫秒）
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}
setInterval(myFunction, 1000);

九、正则表达式

JS正则表达式语法大全（非常详细） (biancheng.net)

十、异常

用输入验证案例：

<!DOCTYPE html>
<html>
<body>
​
<p>请输入 5 - 10 之间的数字：</p>
​
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>
​
<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "空的";
         if(isNaN(x)) throw "不是数字";
         x = Number(x);
        if(x < 5) throw  "太小";
        if(x > 10) throw "太大";
    }
    catch(err) {
        message.innerHTML = "输入是 " + err;
    }
}
</script>
​
</body>
</html> 

十一、this

JavaScript this 关键词指的是它所属的对象。

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

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

• 单独的情况下，this 指的是全局对象[object Window]。

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

• 在函数中，严格模式下，this 是 undefined（严格模式不允许默认绑定）。

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

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

call() 和 apply() 方法是预定义的 JavaScript 方法。

它们都可以用于将另一个对象作为参数调用对象方法。

十二、函数

箭头函数

（简化短小函数的语法糖）

JavaScript 箭头函数 (w3school.com.cn)

与常规函数相比，箭头函数对 this 的处理也有所不同。

简而言之，使用箭头函数没有对 this 的绑定。

在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。

对于箭头函数，this 关键字始终表示定义箭头函数的对象。

Map 函数

基本的 Map() 方法

Method	Description
new Map()	创建新的 Map 对象。
set()	为 Map 对象中的键设置值。
get()	获取 Map 对象中键的值。
entries()	返回 Map 对象中键/值对的数组。
keys()	返回 Map 对象中键的数组。
values()	返回 Map 对象中值的数组。

实例

// 初始化
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
​
// 创建新的 Map
const fruits = new Map();
​
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
​
​
//  Array 传递给 new Map() 构造函数：
const fruits = new Map([;
  [apples, 500],
  [bananas, 300],
  [oranges, 200]
]);
​
//get() 方法获取 Map 中键的值：
fruits.get(apples);    // 返回 500
//Remember: The key is an object (apples), not a string ("apples")
​
//Map.delete() 删除 Map 元素
fruits.delete(apples);
​
//Map.clear() 从 Map 中移除所有元素：
fruits.clear();

Set函数

Set 是唯一值的集合。

// 创建新的变量
const a = "a";
const b = "b";
const c = "c";
​
// 创建 Set
const letters = new Set();
​
// Add the values to the Set
letters.add(a);
letters.add(b);
letters.add(c);
​
// 将 Array 传递给 new Set() 构造函数，创建新的 Set
const letters = new Set(["a","b","c"]);
​
//对于 Set，typeof 返回对象：
typeof letters;      // 返回 object。

Set 对象的方法和属性

new Set()	创建新的 Set 对象。
add()	向 Set 添加新元素。
clear()	从 Set 中删除所有元素。
delete()	删除由其值指定的元素。
entries()	返回 Set 对象中值的数组。
has()	如果值存在则返回 true。
forEach()	为每个元素调用回调。
keys()	返回 Set 对象中值的数组。
values()	与 keys() 相同。
size	返回元素计数。

call函数

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");//接受参数（"Seattle", "USA"）

Apply函数

apply() 方法与 call() 方法非常相似

call() 和 apply() 之间的区别

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]); //接受数组形式的参数

数组上模拟 max 方法

Math.max(1,2,3);  // 会返回 3
Math.max.apply(null, [1,2,3]); // 也会返回 3

十三、JS类

语法：

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

like this:

class Car {            //class关键字创建类
  constructor(name, year) {     //constructor构造方法
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
​
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";

十四、JSON

• JSON 指的是 JavaScript Object Notation

• JSON 是轻量级的数据交换格式

• JSON 独立于语言 *

• JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

json实例：

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

(前后端请求的数据就是用JSON格式)

把 JSON 文本转换为 JavaScript 对象

首先，创建包含 JSON 语法的 JavaScript 字符串：

var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

然后，使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象：

var obj = JSON.parse(text);

最后，请在您的页面中使用这个新的 JavaScript 对象：

实例

<p id="demo"></p>
​
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script> 

十五、性能

减少循环中的活动

编程经常会用到循环。

循环每迭代一次，循环中的每条语句，包括 for 语句，都会被执行。

能够放在循环之外的语句或赋值会使循环运行得更快。

减少 DOM 访问

与其他 JavaScript 相比，访问 HTML DOM 非常缓慢。

假如您期望访问某个 DOM 元素若干次，那么只访问一次，并把它作为本地变量来使用：

实例

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello"; 

缩减 DOM 规模

请尽量保持 HTML DOM 中较少的元素数量。

这么做总是会提高页面加载，并加快渲染（页面显示），尤其是在较小的设备上。

每一次试图搜索 DOM（比如 getElementsByTagName）都将受益于一个较小的 DOM。

延迟 JavaScript 加载

请把脚本放在页面底部，使浏览器首先加载页面。

脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。