js中void 0是什么意思,javascript:void()_js n = void 0 === n ? {} : n;-优快云博客

本文链接：https://blog.youkuaiyun.com/mynote/article/details/134462532

大家好，本文将围绕js中void 0是什么意思展开说明，javascript:void()是一个很多人都想弄明白的事情，想搞清楚js void运算符需要先了解以下几个事情。

JavaScript 简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。

JavaScript 是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格python for语句用法。

JavaScript 用法

HTML 中的脚本必须位于标签之间。

脚本可被放置在 HTML 页面的和部分中。

<>标签

<> 和 </> 会告诉 JavaScript 在何处开始和结束。

<> 和 </> 之间的代码行包含了 JavaScript:

<>
alert("我的第一个 JavaScript");
</>

<body> 中的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <>
        alert("我的第一个 JavaScript");
    </>
</body>
</html>

JavaScript 函数和事件

上面代码中的 JavaScript 语句，会在页面加载时执行。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数，如：用户点击按钮时执行代码。

<head> 中的 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <>
        function myFunction() {
            alert("我的第一个 JavaScript函数");
        }
    </>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
</body>
</html>

点击按钮时调用JavaScript函数如下图
在这里插入图片描述
<body> 中的 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
    <>
        function myFunction() {
            alert("我的第一个 JavaScript函数");
        }
    </>
</body>
</html>

效果一样如下图
在这里插入图片描述
外部的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    < src="firstScript.js"></>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
</body>
</html>

firstScript.js代码如下

function myFunction(){
    alert("我的第一个 JavaScript函数");
}

JavaScript 输出

window.alert() 弹出警告框。
document.write() 方法将内容写到 HTML 文档中。
innerHTML 写入到 HTML 元素。
console.log() 写入到浏览器的控制台。

使用 window.alert()弹出警告框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <>
        window.alert('弹出警告框');
    </>
</head>
<body>

</body>
</html>

在这里插入图片描述
使用document.write() 将内容写到 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <>
        document.write('将内容到HTML文档中');
    </>
</head>
<body>

</body>
</html>

使用innerHTML 写入到 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">我的第一个段落</p>
    <>
        document.getElementById("demo").innerHTML = "写入HTML元素";
    </>
</body>
</html>

在这里插入图片描述
使用console.log() 写入到浏览器的控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <>
        console.log("写入控制台")
    </>
</head>
<body>

</body>
</html>

在这里插入图片描述

JavaScript 语法

JavaScript 是一个脚本语言，是一个轻量级，但功能强大的编程语言。

JavaScript 字面量

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)：

3
3.14
3.1415926e5

字符串（String）字面量可以使用单引号或双引号：

‘Demo’
“Demo”

表达式字面量用于计算：

3+9
3*9

数组（Array）字面量定义一个数组：

[1, 2, 3, 4, 5]

对象（Object）字面量定义一个对象：

{Name:“OIqng”, age:18}

JavaScript 变量

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x = 4

JavaScript 操作符

类型	实例
赋值，算术和位运算符	= + - * /
条件，比较及逻辑运算符	== != < >

JavaScript 语句

x = 4 + 5;

JavaScript 关键字


abstract	else	instanceof
boolean	enum	int
break	export	interface
byte	extends	let
case	false	long
catch	final	native
char	finally	new
class	float	null
const	for	package
continue	function	private
debugger	goto	protected
default	if	public
delete	implements	return
do	import	short
double	in	static

JavaScript 注释

双斜杠 // 后的内容将会被浏览器忽略：

// 这是一个注释

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var x = 3; // Number 通过数字字面量赋值
var y = x * 10; // Number 通过表达式字面量赋值
var Name = “OIqng”; // String 通过字符串字面量赋值
var a = [1, 2, 3]; // Array 通过数组字面量赋值
var person = {Name:“OIqng”, age:18}; // Object 通过对象字面量赋值

JavaScript 函数

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
   	return a + b;                             
// 返回 a + b 的结果
}

JavaScript 字母大小写

JavaScript 对大小写是敏感的，常见的是驼峰法的命名规则。

lastName

JavaScript 语句

分号 ;

分号用于分隔 JavaScript 语句

a = 4;
b = 5;
c = a + b;

JavaScript 代码

document.getElementById("demo").innerHTML("你好");

JavaScript 代码块

代码块以左花括号开始，以右花括号结束。

function myFunction() {
	document.getElementById("demo").innerHTML("你好")
}

JavaScript 语句标识符

语句	描述
break	用于跳出循环
catch	语句块，在 try 语句块执行出错时执行 catch 语句块
continue	跳过循环中的一个迭代
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块
for	在条件语句为 true 时，可以将代码块执行指定的次数
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作
return	退出函数
switch	用于基于不同的条件来执行不同的动作
throw	抛出（生成）错误
try	实现错误处理，与 catch 一同使用
var	声明一个变量
while	当条件语句为 true 时，执行语句块

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

var name=“OIqng”;
var name = “OIqng”;

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行:

<>
        document.write("Hell\
        World!");
</>

JavaScript 注释

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头：

// 这是个注释

JavaScript 多行注释

/*
这是
一个
多行注释
*/

JavaScript 变量

变量是用于存储信息的"容器"。

变量可以使用短名称（如 x 和 y），也可以使用描述性更好的名称（如 age, sum）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

一条语句，多个变量

var name=“OIqng”, age=18;

也可跨行声明

var name=“OIqng”,
age=18;

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

var x;

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型

意味着在JavaScript中相同的变量可用作不同的类型：

 <>
        var x;
        x = 5;
        console.log(x)
        x = "OIqng"
        console.log(x)
 </>

在这里插入图片描述

JavaScript 字符串

字符串是存储字符的变量，可以是单引号或双引号中的任意文本：

<>
    var answer;
    answer = "He is called 'OIqng'";
    console.log(answer);
    answer = 'He is called "OIqng"';
    console.log(answer);
</>

在这里插入图片描述
JavaScript 数字

JavaScript 只有一种数字类型

<>
    var x = 3.00;
    console.log(x);
    x = 3;
    console.log(x);
    x = 3.14e2;
    console.log(x);
    x = 3.14e-2;
    console.log(x);
</>

在这里插入图片描述
JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

<>
        var x = true;
        console.log(x);
        var y = false;
        console.log(y);
    </>

在这里插入图片描述
JavaScript 数组

<>
        var a = new Array();
        a[0] = 1;
        a[1] = 2;
        console.log(a);
</>

在这里插入图片描述
JavaScript 对象

JavaScript 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

<>
        var person = {
            name : "OIqng",
            age : 18
        }
        console.log(person);
</>

在这里插入图片描述
Undefined 和 Null

Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。

<>
        var x;
        console.log(x);
        x = null;
        console.log(x);
</>

在这里插入图片描述

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。

真实生活中的对象，属性和方法

对象	属性	方法
	car.name =BMW car.color=Quantum blue	car.start() car.stop()

所有汽车都有这些属性，但是每款车的属性都不尽相同，所有汽车都拥有这些方法，但是它们被执行的时间都不相同。

JavaScript 对象

在 JavaScript中，几乎所有的事物都是对象，对象也是一个变量，但对象可以包含多个值（多个变量）

var car = "BMW";

var car = {
            type:"BMW",
            color:"Quantum blue"
}

对象属性

JavaScript 对象是键值对的容器

对象键值对的写法类似于：

PHP 中的关联数组
Python 中的字典
C 语言中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的哈希表

访问对象属性

var car = {
            type:"BMW",
            color:"Quantum blue"
}
console.log(car.color)
console.log(car["color"])

在这里插入图片描述

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname() {
            
}

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数，这些参数可以在函数中使用，您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方，通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction() {
            var x = 3;
            return x;
}

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）,只要函数运行完毕，局部变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始,局部变量会在函数运行以后被删除,全局变量会在页面关闭后被删除。

<>
    var x = 1; // 不可配置全局属性
    y = 2; // 可配置全局属性
    console.log(this.x); // 1
    console.log(window.x); // 1

    delete x; // 无法删除
    console.log(x); //1

    delete y; 
    console.log(delete y); // true
    console.log(y); // 已经删除 报错变量未定义
</>

JavaScript 作用域

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。

function myFunction() {
            var x = 3; // 函数内可调用x变量
}

JavaScript 全局变量

变量在函数外定义，即为全局变量。

		var x = 3; 
        function myFunction() {
            // 函数内可调用x变量
}

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
…

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。

字符串长度

使用内置属性 length 来计算字符串的长度：

var sentence = "Its better to be alone than to be with someone youre not happy to be with";
console.log(sentence.length)

在这里插入图片描述
特殊字符

代码	输出
\’	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

字符串可以是对象

我们也可以使用 new 关键字将字符串定义为一个对象

var name1 = "OIqng";
console.log(typeof name1);
var name2 = new String("OIqng");
console.log(typeof name2);

在这里插入图片描述
字符串属性和方法

字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

JavaScript 运算符

JavaScript 算术运算符

下面的表格解释了这些算术运算符：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取余数
++	自增
–	自减

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

运算符	例子	等同于
=	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

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

var name1 = "My name is ";
var name2 = "OIqng";
console.log(name1 + name2);

在这里插入图片描述
对字符串和数字进行加法运算

var x = 5 + 4;
console.log(x);
var y = "5" + 4;
console.log(y);

在这里插入图片描述

JavaScript 比较符

比较运算符

运算符	描述
==	等于
===	绝对等于（值和类型均相等）
!=	不等于
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）
>	大于
<	小于
>=	大于或等于
<=	小于或等于

逻辑运算符

运算符	描述
&&	and

!	not

条件运算符

variablename=(condition)?value1:value2

JavaScript 条件语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

if 语句

if (condition)
{
    // 当条件为 true 时执行的代码
}

if…else 语句

if (condition)
{
    // 当条件为 true 时执行的代码
}
else
{
    // 当条件不为 true 时执行的代码
}

if…else if…else 语句

if (condition1)
{
    // 当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    // 当条件 2 为 true 时执行的代码
}
else
{
  // 当条件 1 和 条件 2 都不为 true 时执行的代码
}

JavaScript switch 语句

switch(n)
{
    case 1:
        // 执行代码块 1
        break;
    case 2:
        // 执行代码块 2
        break;
    default:
        // 当 case 1 和 case 2 条件不满足时执行的代码
}

JavaScript 循环

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for (var i = 0; i < 5; i++) {
            console.log(i);
}

在这里插入图片描述
For/In 循环

var person = {
    name:"OIqng",
    age:18
}
for (i in person) {
    console.log(person[i]);
}

在这里插入图片描述

JavaScript while 循环

while 循环

while (condition)
{
   // 需要执行的代码
}

do/while 循环

do
{
    // 需要执行的代码
}
while (condition);

JavaScript break 和 continue 语句

break 语句用于跳出循环，continue 用于跳过循环中的一个迭代。

break 语句

for (var i = 0; i < 5; i++) {
            if (i == 3) {
                break;
            }
            console.log(i);
}

在这里插入图片描述
continue 语句

for (var i = 0; i < 5; i++) {
            if (i == 3) {
                continue;
            }
            console.log(i);
}

JavaScript typeof

typeof 操作符

使用 typeof 操作符来检测变量的数据类型。

console.log(typeof "OIqng");
console.log(typeof 3);
console.log(typeof true);
console.log(typeof [3]);
console.log(typeof {name:"OIqng"});

在这里插入图片描述
null

null是一个值为空的特殊类型。表示一个空对象引用。

var x = null;
console.log(x);
console.log(typeof x);

在这里插入图片描述
undefined

在 JavaScript 中, undefined 是一个没有设置值的变量，typeof 一个没有值的变量会返回 undefined。

x = undefined;
console.log(x);
console.log(typeof x);

在这里插入图片描述
undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等：

var x = null;
var y = undefined;
console.log(x == y);
console.log(x === y);

在这里插入图片描述

JavaScript 类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

document.write("OIqng".constructor + "<br>");              
document.write((3.14).constructor + "<br>");                 
document.write(true.constructor + "<br>");                 
document.write([1].constructor + "<br>");             
document.write(new Date().constructor + "<br>");

在这里插入图片描述
JavaScript 类型转换

通过使用 JavaScript 函数
通过 JavaScript 自身自动转换

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

console.log(typeof String(1));      
console.log(typeof String(1 + 2));

在这里插入图片描述
Number 方法 toString() 也是有同样的效果

var x = 3;
console.log(typeof x.toString());

在这里插入图片描述
数字转换为字符串的方法：

方法	描述
toExponential()	把对象的值转换为指数计数法
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字
toPrecision()	把数字格式化为指定的长度

将布尔值转换为字符串

console.log(typeof String(true)); // 全局方法 String() 可以将布尔值转换为字符串      
console.log(typeof true.toString()); // Boolean 方法 toString()

将日期转换为字符串

console.log(typeof Date()); // Date() 返回字符串。   
console.log(typeof String(new Date())); // 全局方法 String() 可以将日期对象转换为字符串

Date 方法 toString()也可以将日期对象转换为字符串

a = new Date()
console.log(typeof a.toString());

日期转换为字符串的函数：

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)
getFullYear()	从 Date 对象以四位数字返回年份
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
getTime()	返回 1970 年 1 月 1 日至今的毫秒数

将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

console.log(Number("3"));
console.log(Number(""));    
console.log(Number(" "));

在这里插入图片描述
字符串转为数字的方法：

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数
parseInt()	解析一个字符串，并返回一个整数

+ 可用于将变量转换为数字，如果变量不能转换，它仍然会是一个数字，但值为 NaN

var x = "3";
var y = + x;
console.log(y);
x = "OIqng";
y = + x;
console.log(y);

在这里插入图片描述
将布尔值转换为数字

console.log(Number(true));

在这里插入图片描述
将日期转换为数字

a = new Date();
console.log(Number(a)); // 全局方法 Number() 可将日期转换为数字
console.log(a.getTime()); // 日期方法 getTime()

自动转换类型

当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型

JavaScript 正则表达式

正则表达式（英文：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

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

/正则表达式主体/修饰符(可选)

使用字符串方法

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

search() 方法使用正则表达式

var str = "Visit OIqng!";
var n = str.search(/OIqng/i);
console.log(n);

search() 方法使用字符串

var str = "Visit OIqng!";
var n = str.search("OIqng");
console.log(n);

在这里插入图片描述
replace() 方法使用正则表达式

使用正则表达式且不区分大小写将字符串中的name替换为 OIqng:

var str = "Visit name!";
var n = str.replace(/name/i, "OIqng");
console.log(n);

在这里插入图片描述
replace() 方法使用字符串

var str = "Visit name!";
var n = str.replace("name", "OIqng");
console.log(n);

在这里插入图片描述
正则表达式修饰符

修饰符可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

正则表达式模式

括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符
[0-9]	查找任何从 0 至 9 的数字
(x\|y)	查找任何以 \| 分隔的选项

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字
\s	查找空白字符
\b	匹配单词边界
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串
n*	匹配任何包含零个或多个 n 的字符串
n?	匹配任何包含零个或一个 n 的字符串

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

使用 test()

test() 方法是一个正则表达式，用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true。

console.log(/e/.test("the best thing is learning knowledge"));

在这里插入图片描述
使用 exec()

exec() 方法用于检索字符串中的正则表达式的匹配，该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

console.log(/e/.exec("the best thing is learning knowledge"));

在这里插入图片描述

JavaScript 错误

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

JavaScript 抛出（throw）错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。JavaScript 语句 try 和 catch 是成对出现的。

try {
    ...    // 异常的抛出
} catch(err) {
    ...    // 异常的捕获与处理
} finally {
    ...    // 结束处理
}

Throw 语句

throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

throw exception

JavaScript 调试

console.log() 方法

在调试窗口上打印 JavaScript 值

设置断点

在调试窗口中，你可以设置 JavaScript 代码的断点。在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。

debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

JavaScript 变量提升

在JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

在JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

x = 3;
console.log(x);
var x;

在这里插入图片描述

var x;
x = 3;
console.log(x);

在这里插入图片描述
JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

var x = 3;
var y = 5;
console.log("x = " + x + " y = " + y);

在这里插入图片描述

var x = 3;
console.log("x = " + x + " y = " + y);
var y = 5;

在这里插入图片描述

JavaScript 严格模式

JavaScript 严格模式（strict mode）即在严格的条件下运行。

使用 “use strict” 指令

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增，严格模式下你不能使用未声明的变量。

严格模式声明

严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明。

 <>    
        "use strict";
</>

<>    
    "use strict";
    x = 3;
</>

在这里插入图片描述

严格模式的限制

不允许使用未声明的变量
不允许删除变量或对象
不允许删除变量或对象
不允许删除函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用 “eval” 字符串
变量名不能使用 “arguments” 字符串
在作用域 eval() 创建的变量不能被调用
禁止this关键字指向全局对象

保留关键字

implements
interface
let
package
private
protected
public
static
yield

JavaScript 表单

HTML 表单自动验证

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

 <input type="text" name="fname" required="required">

数据验证

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML 约束验证

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

约束验证 HTML 输入属性

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

约束验证 CSS 伪类选择器

选择器	描述
:disabled	选取属性为 “disabled” 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"required"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

JavaScript 验证 API

约束验证 DOM 方法

Property	Deion
checkValidity()	如果 input 元素中的数据是合法的返回 true
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity(’’) setCustomValidity(null) setCustomValidity(undefined)

约束验证 DOM 属性

属性	描述
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证
Validity	属性
input	元素的 validity 属性包含一系列关于 validity 数据属性

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型
valueMissing	设置为 true，如果元素 (required 属性) 没有值
valid	设置为 true，如果元素的值是合法的

JavaScript 保留关键字

JavaScript 标准

ECMAScript 5（ES5，2009 年发布），是 JavaScript 最新的官方版本。

JavaScript 保留关键字

Java 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Java 以后扩展使用。


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

* 标记的关键字是 ECMAScript5 中新添加的。

JavaScript 对象、属性和方法

您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Java 的变量或函数名：


Array	Date	eval	function	hasOwnProperty
Infinity	isFinite	isNaN	isPrototypeOf	length
Math	NaN	name	Number	Object
prototype	String	toString	undefined	valueOf

Java 保留关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符：


getClass	java	JavaArray	javaClass
JavaObject	JavaPackage

Windows 保留关键字

在 HTML 中，您必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Java 的变量及函数名：


alert	all	anchor	anchors	area
assign	blur	button	checkbox	clearInterval
clearTimeout	clientInformation	close	closed	confirm
constructor	crypto	decodeURI	decodeURIComponent	defaultStatus
document	element	elements	embed	embeds
encodeURI	encodeURIComponent	escape	event	fileUpload
focus	form forms	frame	innerHeight
innerWidth	layer	layers	link	location
mimeTypes	navigate	navigator	frames	frameRate
hidden	history	image	images	offscreenBuffering
open	opener	option	outerHeight	outerWidth
packages	pageXOffset	pageYOffset	parent	parseFloat
parseInt	password	pkcs11	plugin	prompt
propertyIsEnum	radio	reset	screenX	screenY
scroll	secure	select	self	setInterval
setTimeout	status	submit	taint	text
textarea	top	unescape	untaint	window

HTML 事件句柄

除此之外，您还应该避免使用 HTML 事件句柄的名称作为 Java 的变量及函数名。


onblur	onclick	onerror	onfocus
onkeydown	onkeypress	onkeyup	onmouseover
onload	onmouseup	onmousedown	onsubmit

JavaScript this

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

方法中的 this

在对象方法中， this 指向调用它所在方法的对象。

单独使用 this

单独使用 this，则它指向全局(Global)对象。

在浏览器中，window 就是该全局对象为 [object Window]

var x = this;
console.log(x);

在这里插入图片描述

严格模式下，如果单独使用，this 也是指向全局(Global)对象。

"use strict";
var x = this;
console.log(x);

在这里插入图片描述
函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上，而在浏览器中，window 就是该全局对象为 [object Window]:

function myFunction() {
    return this;
}
console.log(myFunction());

在这里插入图片描述
函数中使用 this（严格模式）

严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

"use strict";
function myFunction() {
    return this;
}
console.log(myFunction());

在这里插入图片描述
事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

<butto onclick="this.style.display='none'">点完就消失</button>

JavaScript let 和 const

ECMAScript 2015(ECMAScript 6)

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。

let关键字

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

重新定义变量

var x = 3;
console.log(x);
{
    let x = 5;
    console.log(x);
}
console.log(x);

使用 let 关键字声明的全局作用域变量不属于 window 对象:

let personName = "OIqng";
console.log(window.personName);

在这里插入图片描述
在相同的作用域或块级作用域中：

不能使用 let 关键字来重置 var 关键字声明的变量
不能使用 let 关键字来重置 let 关键字声明的变量
不能使用 var 关键字来重置 let 关键字声明的变量:

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

const 关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改

const PI = 3.14;
PI = 3.1415926;

const定义常量与使用let 定义的变量相似：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

在这里插入图片描述
并非真正的常量

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。

const car = {
    type:"BMW",
    color:"Quantum blue"
};
car.color = "Alpine White";
console.log(car);

在这里插入图片描述
const 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

在相同的作用域或块级作用域中：

不能使用 const 关键字来重置 var 和 let关键字声明的变量
不能使用 const 关键字来重置 const 关键字声明的变量

JavaScript JSON

JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据。

JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言（JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本）
JSON 易于理解。

JSON 语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

JSON 数据：一个名称对应一个值

JSON 数据格式为键/值对，就像 JavaScript 对象属性。

“name”:“OIqng”

JSON 字符串转换为 JavaScript 对象

var text = '{ "person" : [' +
    '{ "name":"OIqng"} ]}';    
obj = JSON.parse(text);
console.log(obj.person[0].name);

在这里插入图片描述
相关函数

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串

JavaScript void

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

void func()
java:void func()

href="#"与href="java:void(0)"的区别

# 包含了一个位置信息，java:void(0), 仅仅表示一个死链接。

JavaScript 代码规范

变量和函数的命名规则
空格，缩进，注释的使用规则。
其他常用规范……

变量名

变量名推荐使用驼峰法来命名(camelCase):

firstName

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

var x = 1 + 3;

代码缩进

通常使用 4 个空格符号来缩进代码块

语句规则

语句通常以分号作为结束符
将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明

对象规则

将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性-值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号

每行代码字符小于 80

命名规则

变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )