JavaScript基础

无敌CV工程师

已于 2023-09-14 11:12:04 修改

阅读量149

点赞数 1

文章标签： javascript 前端 html

于 2023-03-11 16:29:28 首次发布

本文链接：https://blog.csdn.net/2202_75345049/article/details/129463630

版权

本文介绍了JavaScript的基础知识，包括如何使用JS显示数据、语句结构、变量（如let和const）、作用域（全局、局部、块级）以及字符串操作。还讨论了不同类型的运算符和数据类型，如数字、字符串和数组。

摘要由CSDN通过智能技术生成

为什么学习JS

JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

如何使用

在 HTML 中，JavaScript 代码必须位于标签之间。

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

输出

JavaScript 显示方案

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

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button οnclick="document.write(5 + 6)">试一试</button>

</body>
</html>

使用 innerHTML 写入 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

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

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

语句

JavaScript 语句

JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 语句</h2>

<p>在 HTML 中，JavaScript 语句由浏览器执行。</p>

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

<script>
document.getElementById("demo").innerHTML = "Hello Kitty.";
</script>

</body>
</html>

分号

如果有分号分隔，允许在同一行写多条语句：

a = 5; b = 6; c = a + b;

空白字符

JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。

下面这两行是相等的：

var person = "Bill";
var person="Bill";

代码块

JavaScript 语句可以用花括号（{…}）组合在代码块中。

代码块的作用是定义一同执行的语句。

您会在 JavaScript 中看到成块组合在一起的语句：

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

关键词

在这里插入图片描述

语法

字面量

JavaScript 语句定义两种类型的值：混合值和变量值。

混合值被称为字面量（literal）。变量值被称为变量。
字符串是文本，由双引号或单引号包围：

"Bill Gates"

'Bill Gates'

关键词

JavaScript 关键词用于标识被执行的动作。

var 关键词告知浏览器创建新的变量：

var x = 7 + 8;
var y = x * 10;

标识符

标识符是名称。

在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。

在大多数编程语言中，合法名称的规则大多相同。

在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。

连串的字符可以是字母、数字、下划线或美元符号。

提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。

注：所有 JavaScript 标识符对大小写敏感。

变量 lastName 和 lastname，是两个不同的变量。

注释

单行注释
单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。
多行注释
多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

JS变量

一条语句，多个变量
您可以在一条语句中声明许多变量。

以 var 作为语句的开头，并以逗号分隔变量：

var person = "Bill Gates", carName = "porsche", price = 15000;

声明可横跨多行：

var person = "Bill Gates",
carName = "porsche",
price = 15000;

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

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

变量 carName 在这条语句执行后的值是 undefined：
重复声明 JavaScript 变量
如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 “porsche”

let

ECMAScript 2015
ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

函数作用域

局部（函数内）声明的变量拥有函数作用域。

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。

在块 {} 内声明的变量可以从块之外进行访问。

{ 
  var x = 10; 
}
// 此处可以使用 x

在 ES2015 之前，JavaScript 是没有块作用域的。

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

{ 
  let x = 10;
}
// 此处不可以使用 x

重新声明变量
使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

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

循环作用域

在循环中使用 var：

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

const

块作用域

在块作用域内使用 const 声明的变量与 let 变量相似。

在本例中，x 在块中声明，不同于在块之外声明的 x：

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

在声明时赋值

JavaScript const 变量必须在声明时赋值：

const PI = 3.14159265359;

常量对象可以更改
您可以更改常量对象的属性：

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

常量数组可以更改
您可以更改常量数组的元素：

// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

但是您无法重新为常量数组赋值：

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

重新声明使用条件

var x = 2;    //  允许
var x = 3;    //  允许
x = 4;        //  允许

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：

var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：

const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

在另外的作用域或块中重新声明 const 是允许的：

const x = 2;       // 允许

{
  const x = 3;   // 允许
}

{
  const x = 4;   // 允许
}

提升
通过 var 定义的变量会被提升到顶端。如果您不了解什么是提升（Hoisting），请学习提升这一章。

您可以在声明 var 变量之前就使用它：

carName = "Volvo";    // 您不可以在此处使用 carName
const carName = "Volvo";

运算符

在这里插入图片描述

JavaScript 字符串运算符

运算符也可用于对字符串进行相加（concatenate，级联）。

 `txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2; `

字符串和数字的相加

x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;

在这里插入图片描述

类型运算符

在这里插入图片描述

数组类型

字符串值，数值，布尔值，数组，对象。

JavaScript 数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

数据类型概念

在这里插入图片描述

typeof 运算符

您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：

typeof 运算符返回变量或表达式的类型：

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"
typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)             // 返回 "number"

Undefined

var person;                  // 值是 undefined，类型是 undefined。

Null
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。

不幸的是，在 JavaScript 中，null 的数据类型是对象。

您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

您可以通过设置值为 null 清空对象：var person = null; // 值是 null，但是类型仍然是对象
您也可以通过设置值为 undefined 清空对象：

var person = undefined;           // 值是 undefined，类型是 undefined。

Undefined 与 Null 的区别

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

复杂数据

typeof 运算符可返回以下两种类型之一：

function
object
typeof 运算符把对象、数组或 null 返回 object。

typeof 运算符不会把函数返回 object。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

事件

HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击
在这里插入图片描述

字符串

字符串长度

内建属性 length 可返回字符串的长度：

`var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;`

转义字符

在这里插入图片描述

特殊字符

在这里插入图片描述

长代码行换行

\ 方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许 \ 字符之后的空格。

对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：

document.getElementById("demo").innerHTML = "Hello" + 
"Kitty!";

字符串方法

查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

JavaScript 从零计算位置。

0 是字符串中的第一个位置，1 是第二个，2 是第三个 …

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);

lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);

检索字符串中的字符串
search() 方法搜索特定值的字符串，并返回匹配的位置：

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");

slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

这个例子裁剪字符串中位置 7 到位置 13 的片段：

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);

substring() 方法
substring() 类似于 slice()。

不同之处在于 substring() 无法接受负的索引。

var str = "Apple, Banana, Mango";
var res = str.substring(7,13);

substr() 方法
substr() 类似于 slice()。

不同之处在于第二个参数规定被提取部分的长度。

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);

替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

转换为大写和小写
通过 toUpperCase() 把字符串转换为大写：

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

concat() 方法
concat() 连接两个或多个字符串：

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

String.trim()
trim() 方法删除字符串两端的空白符：
提取字符串字符
这是两个提取字符串字符的安全方法：

charAt(position)
charCodeAt(position)`

`var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

var str = "HELLO WORLD";

str.charCodeAt(0);         // 返回 72

把字符串转换为数组
可以通过 split() 将字符串转换为数组：

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

字符串搜索

String.indexOf()
indexOf() 方法返回指定文本在字符串中第一次出现（的位置）的索引：

实例

let str = "Please locate where 'locate' occurs!";
str.indexOf("locate")    // 返回 7

String.lastIndexOf()
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

实例

let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate")    // 返回 21

String.search()
search() 方法在字符串中搜索指定值并返回匹配的位置：

实例

let str = "Please locate where 'locate' occurs!";
str.search("locate")     // 返回 7

String.match()
match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。

实例 1
在字符串中搜索 “ain”：

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g)    // 返回数组 [ain,ain,ain]

String.includes()
如果字符串包含指定值，includes() 方法返回 true。

实例

let text = "Hello world, welcome to the universe.";
text.includes("world")    // 返回 true

String.startsWith()
如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false：

实例

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // 返回 true

String.endsWith()
如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false：

实例
检查字符串是否以 “Gates” 结尾：

var text = "Bill Gates";
text.endsWith("Gates")    // 返回 true

字符串模板

变量替换
模板字面量允许字符串中的变量：

实例

let firstName = "Bill";
let lastName = "Gates";

let text = `Welcome ${firstName}, ${lastName}!`;

表达式替换
模板字面量允许字符串中的表达式：

实例

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

HTML 模板
实例

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

数字

数字和字符串相加
警告！！
JavaScript 的加法和级联（concatenation）都使用 + 运算符。

数字用加法。字符串用级联。

如果您对两个数相加，结果将是一个数：

var x = 10;
var y = 20;
var z = x + y;           // z 将是 30（一个数）
var x = "10";
var y = "20";
var z = x + y;           // z 将是 1020（字符串）
var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020（一个字符串）
var x = "10";
var y = 20;
var z = x + y;           // z 将是 1020（字符串）

var x = 10;
var y = 20;
var z = "The result is: " + x + y;//1020
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;//3030

NaN - 非数值
NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：

实例

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）

Infinity
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

实例

var myNumber = 2;

while (myNumber != Infinity) {          // 执行直到 Infinity
    myNumber = myNumber * myNumber;
}

数值可以是对象
通常 JavaScript 数值是通过字面量创建的原始值：var x = 123

但是也可以通过关键词 new 定义为对象：var y = new Number(123)

实例

var x = 123;
var y = new Number(123);

// typeof x 返回 number
// typeof y 返回 object

请不要创建数值对象。这样会拖慢执行速度。

new 关键词使代码复杂化，并产生某些无法预料的结果：

当使用 == 相等运算符时，相等的数看上去相等：

实例

var x = 500;             
var y = new Number(500);

// (x == y) 为 true，因为 x 和 y 有相等的值

数字方法

toString() 方法

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

所有数字方法可用于任意类型的数字（字面量、变量或表达式）：

实例

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toExponential() 方法

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

参数定义小数点后的字符数：

实例

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

toFixed() 方法

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

实例

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

toPrecision() 方法

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

实例

var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

valueOf() 方法

valueOf() 以数值返回数值：

实例

var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

把变量转换为数值
这三种 JavaScript 方法可用于将变量转换为数字：

Number() 方法

parseInt() 方法
parseFloat() 方法
这些方法并非数字方法，而是全局 JavaScript 方法。
Number() 方法
Number() 可用于把 JavaScript 变量转换为数值：

实例

x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

用于日期的 Number() 方法

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

实例

Number(new Date("2019-04-15"));    // 返回 1506729600000

parseInt() 方法

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

实例

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

parseFloat() 方法

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

实例

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN