这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

JavaScript2

从 JS逻辑到 JS位运算都没看

正则表达式

正则表达式是构成搜索模式的字符序列。

该搜索模式可用于文本搜索和文本替换操作。

正则表达式可用于执行所有类型的文本搜索和文本替换操作。

语法

/pattern/modifiers;

实例

var patt = /w3school/i;

JavaScript 错误 -Thrwo 和 Try to Catch

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

<p id="demo"></p>

<script>
try {
    adddlert("欢迎访问！");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

try 语句允许您定义一个代码块，以便在执行时检测错误。

catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误。

JavaScript 语句 try 和 catch 成对出现：

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
}

throw 语句允许您创建自定义错误。

请输入 5 到 10 之间的数字：

检测输入

< script> function myFunction() { var message, x; message = document.getElementById("p01"); 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>

现代浏览器通常会结合 JavaScript 与内置的 HTML 验证，通过使用在 HTML 属性中定义的预定义的验证规则：

finally

finally 语句允许您在 try 和 catch 之后执行代码，无论结果：

try {
     // 供测试的代码块
}
 catch(err) {
     // 处理错误的代码块
} 
finally {
     // 无论结果如何都执行的代码块
}

各种错误

JavaScript 错误 - Throw 和 Try to Catch (w3school.com.cn)

作用域

全局与局部

JavaScript hoisting

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

在 JavaScript 中，可以在使用变量之后对其进行声明。

换句话说，可以在声明变量之前使用它。

例子一和二是一样的：

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

var x; // 声明 x

var x; // 声明 x
x = 5; // 把 5 赋值给 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;

用 let 或 const 声明的变量和常量不会被提升！

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

为了避免 bug，请始终在每个作用域的开头声明所有变量。

严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。

JavaScript 严格模式

"use strict";
x = 3.14;       // 这会引发错误，因为 x 尚未声明

JS 箭头函数

之前的函数写法

hello = function( ) {

return "hello world!"'

'}

使用箭头函数

hello = ( ) => {

return "hello world!"；

}

hello = () => "Hello World!";

// 常规函数：
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello);

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);

// 箭头函数：
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello);

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);

JavaScript 类

请使用关键字 class 创建类。

请始终添加名为 constructor() 的方法

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

json

什么是json

JSON 是存储和传输数据的格式。

JSON 经常在数据从服务器发送到网页时使用。

JSON 指的是 JavaScript Object Notation
JSON 是轻量级的数据交换格式
JSON 独立于语言 *****
JSON 是“自描述的”且易于理解

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

js调试

查找编程代码中的错误被称为代码调试。

调试并不简单。但幸运地是，所有现代浏览器都有内置的调试器。

内置的调试器可打开或关闭，强制将错误报告给用户。

通过调试器，您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。

通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。

设置断点

在调试窗口中，您可在 JavaScript 代码中设置断点。

在每个断点中，JavaScript 将停止执行，以使您能够检查 JavaScript 的值。

在检查值之后，您可以恢复代码执行。

代码约定

对标识符名称（变量和函数）使用了驼峰式大小写

JavaScript 最佳实践

请避免全局变量、new、===、eval()

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包。

闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器目前是 3

变量 add 的赋值是自调用函数的返回值。

这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

// 在顶部声明
var firstName, lastName, price, discount, fullPrice;

在您声明变量时对其进行初始化是个好习惯。

这么做的好处是：

更整洁的代码
在单独的位置来初始化变量
避免未定义值

请使用 default 来结束您的 switch 语句。即使您认为没有这个必要。

< script>
var day;
switch (new Date().getDay()) {
  case 0:
    day = "周日";
    break;
  case 1:
    day = "周一";
    break;
  case 2:
    day = "周二";
    break;
  case 3:
    day = "周三";
    break;
  case 4:
    day = "周四";
    break;
  case 5:
    day = "周五";
    break;
  case  6:
    day = "周六";
    break;
  default:
     day = "未知";
}
document.getElementById("demo").innerHTML = "今天是：" + day;
< /script>

eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。

性能

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

延迟 JavaScript 加载

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

JavaScript笔记 ｜ 青训营笔记