JS——基础知识
语句语法:
语法:
- 与 Java 一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。
- ECMAScript 中的变量无特定的类型,可以随时改变变量所存数据的类型。
语句:
- JavaScript 语句由:值、运算符、表达式、关键词和注释构成。
- 程序员们常常喜欢把一行代码行控制在 80 个字符以内。
- 下方单词是关键词,指的是保留的单词。保留词无法用作变量名。
语句 | 描述 | 实例 |
---|---|---|
分号 |
|
a = 5; b = 6; c = a + b; |
空白 |
|
var x = y + z; |
折行 |
|
document.getElementById("demo").innerHTML = |
代码块 |
|
function myFunction() { |
break | 终止 switch 或循环。 | |
continue | 跳出循环并在顶端开始。 | |
debugger | 停止执行 JavaScript,并调用调试函数(如果可用)。 | |
do ... while | 执行语句块,并在条件为真时重复代码块。 | |
for | 标记需被执行的语句块,只要条件为真。 | |
function | 声明函数。 | |
if ... else | 标记需被执行的语句块,根据某个条件。 | |
return | 退出函数。 | |
switch | 标记需被执行的语句块,根据不同的情况。 | |
try ... catch | 对语句块实现错误处理。 | |
var | 声明变量。 |
JavaScript类型:
- string
- number
- boolean
- object
- function
- Object
- Date
- Array
- String
- Number
- Boolean
- null
- undefined
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof NaN // 返回 "number"
typeof false // 返回 "boolean"
typeof [1,2,3,4] // 返回 "object"
typeof {name:'Bill', age:19} // 返回 "object"
typeof new Date() // 返回 "object"
typeof function () {} // 返回 "function"
typeof myCar // 返回 "undefined" *
typeof null // 返回 "object"
严格模式:
- 它不算一条语句,而是一段文字表达式。
- 使我们更容易编写“安全的”JavaScript。
- 把之前可接受的“坏语法”转变为真实的错误。
- 通过在脚本或函数的开头添加“use strict”来声明严格模式。
- 在脚本开头进行声明,拥有全局作用域(脚本中的所有代码均以严格模式来执行)
"use strict";
x = 3.14; // 这会引发错误,因为 x 尚未声明
在严格模式中不允许的事项:
"use strict";
x = 3.14; // 这将引发错误
"use strict";
x = {p1:10, p2:20}; // 这将引发错误
"use strict";
var x = 3.14;
delete x; // 这将引发错误
"use strict";
function x(p1, p2) {};
delete x; // 这将引发错误
"use strict";
function x(p1, p1) {}; // 这将引发错误
"use strict";
var x = 010; // 这将引发错误
"use strict";
var x = \010; // 这将引发错误
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14; // 这将引发错误
"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14; // 这将引发错误
"use strict";
delete Object.prototype; // 这将引发错误
"use strict";
var eval = 3.14; // 这将引发错误
"use strict";
var arguments = 3.14; // 这将引发错误
"use strict";
with (Math){x = cos(2)}; // 这将引发错误
"use strict";
eval ("var x = 2");
alert (x); // 这将引发错误
输出:
JavaScript 不提供任何内建的打印或显示函数。
- 使用 window.alert() 弹警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
window.alert:
以弹框的形式来显示相应内容。两种形式都可以。
<body>
<script>
window.alert('弹窗显示');
alert('弹窗显示')
</script>
</body>
document.write:
- 显示在网页中的测试
- 在HTML文档完全加载后使用,将会删除所有已有的HTML
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>
innerHTML:
- 该方法较多的应用于在匹配元素后,插入HTML的语言。
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
console.log:
右键检查(F12)中,选择console,可以显示需要输出的相关内容。
网页查看JS:
注释:
单行注释:
在//后面的文字或行为,为单行注释,将不会执行。
// 改变标题:
document.getElementById("myH").innerHTML = "我的第一张页面";
// 改变段落:
document.getElementById("myP").innerHTML = "我的第一个段落。";
var x = 5; // 声明 x,为其赋值 5
var y = x + 2; // 声明 y,为其赋值 x + 2
多行注释:
多行注释以/*开头,以*/结尾。
/*
下面的代码会改变
网页中
id = "myH" 的标题
以及 id = "myP" 的段落:
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
运算符:
运算符及优先级。
值 | 运算符 | 描述 | 实例 |
---|---|---|---|
20 | ( ) | 表达式分组 | (3 + 4) |
19 | . | 成员 | person.name |
19 | [] | 成员 | person["name"] |
19 | () | 函数调用 | myFunction() |
19 | new | 创建 | new Date() |
17 | ++ | 对数值进行递增 | i++ |
17 | -- | 对数值进行递减 | i-- |
16 | ++ | 前缀递增 | ++i |
16 | -- | 前缀递减 | --i |
16 | ! | 逻辑否 | !(x==y) |
16 | typeof | 类型 | typeof x |
15 | ** | 求幂 (ES7) | 10 ** 2 |
14 | * | 乘 | 10 * 5 |
14 | / | 除 | 10 / 5 |
14 | % | 两个整数的除法产生商和余数 | 10 % 5 |
13 | + | 加,当其中有字符串格式时,属于拼接。 | 10 + 5 = 15 10+'5'='105' |
13 | - | 减 | 10 - 5 |
12 | << | 通过从右推入零向左位移,并使最左边的位脱落。 | x << 1,等于:0101 << 1,结果:1010 |
12 | >> | 通过从左推入最左位的拷贝来向右位移,并使最右边的位脱落。 | x >> 1,等于:0101 >> 1,结果:0010 |
12 | >>> | 通过从左推入零来向右位移,并使最右边的位脱落。 | x >>> 1,等于:0101 >>> 1,结果:0010 |
11 | < | 小于 | x < y |
11 | <= | 小于或等于 | x <= y |
11 | > | 大于 | x > y |
11 | >= | 大于或等于 | x >= y |
11 | in | 对象中的属性 | "PI" in Math |
11 | instanceof | 对象的实例 | instanceof Array |
11 | >>&<< | 连续大于或连续小于 |
10>5>1或1<5<10 结果为False 10>5=True,True>1=False |
10 | == | 值相等 | x == y |
10 | === | 值相等并且类型相等 | x === y |
10 | != | 不相等 | x != y |
10 | !== | 严格不相等 | x !== y |
9 | & | 按位与(python中的and) | x & y |
8 | ^ | 按位 XOR | x ^ y |
7 | | | 按位或(python中的or) | x | y |
6 | && | 逻辑与 | x && y |
5 | || | 逻辑或 | x || y |
4 | ? : | 条件 | ? "Yes" : "No" |
3 | = | 赋值 | x = y |
3 | += | 赋值 | x += y 等同于:x=x+y |
3 | -= | 赋值 | x -= y 等同于:x=x-y |
3 | *= | 赋值 | x *= y 等同于:x=x*y |
3 | %= | 赋值 | x %= y 等同于:x=x%y |
3 | <<= | 赋值 | x <<= y |
3 | >>= | 赋值 | x >>= y |
3 | >>>= | 赋值 | x >>>= y |
3 | &= | 赋值 | x &= y |
3 | ^= | 赋值 | x ^= y |
3 | |= | 赋值 | x |= y |
2 | yield | 暂停函数 | yield x |
1 | , | 逗号 | 7 , 8 |
条件:
在JavaScript上,可以使用如下判断语句。
- 使用 if 来规定要执行的代码块,如果指定条件为 true。
- 使用小写字母,大写字母会产生Js错误。
if (条件) {
如果条件为 true 时执行的代码
}
//如果时间早于 18:00,则发出 "Good day" 的问候:
if (hour < 18) {
greeting = "Good day";
}
- 使用 else 来规定要执行的代码块,如果相同的条件为 false
- 使用else语句来规定假如条件为false时的代码块
if (条件) {
条件为 true 时执行的代码块
} else {
条件为 false 时执行的代码块
}
- 使用 else if 来规定要测试的新条件,如果第一个条件为 false
- 规定当首个条件为false时的新条件。
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
- 使用 switch 来规定多个被执行的备选代码块
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
//计算一次 switch 表达式,把表达式的值与每个 case 的值进行对比,如果存在匹配,则执行关联代码
break关键词:
- 如遇到break关键词,它会跳出switch代码块
- 将停止代码块中更多代码的执行以及case测试。
default关键词
- 规定不存在case匹配时所运行的代码
- case不必是switch代码块中最后一个case
- 如果default不是switch代码块中最后一个case,请记得用break结束默认case
switch (new Date().getDay()) {
default:
text = "期待周末!";
break;
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
}
- 有时会使用不同的case来使用相同的代码,
switch (new Date().getDay()) {
case 4:
case 5:
text = "周末快到了:)";
break;
case 0:
case 6:
text = "今天是周末~";
break;
default:
text = "期待周末!";
}
//使用case4和5分享相同的代码块。而0和6分享一段代码块。
this:
- JavaScript this关键词指的是它所属的对象。他拥有不同的值,具体取决于他的使用位置。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
在方法中,this指的是所有者对象。
-
在对象方法中,this指的是此方法的拥有者,在上面的例子中,this指的是person对象,对象是fullName方法的拥有者。
单独的情况下,this指的是全局对象(window)。
- 在单独使用时,拥有者是全局对象,因此this指的是全局对象。在浏览器中,全局对象是【object Window】
var x = this;
在函数中,this指的是全局对象,(默认)
- 在JavaScript函数中,函数的拥有者默认绑定this。因此,在函数中,this指的是全局对象【object Window】
function myFunction() {
return this;
}
在函数中,严格模式下,this是 undefined。
- JavaScript严格模式下不允许默认绑定。在函数中使用时,在严格模式下,this是未定义的。
"use strict";
function myFunction() {
return this;
}
在事件中,this指的是接收事件的元素。
- 在HTML时间处理程序中,this指的是接收此时间的HTML元素。
<button onclick="this.style.display='none'">
点击来删除我!
</button>
作用域:
全局作用域:
- 全局(在函数之外)声明的变量拥有全局作用域。
- 全局变量可以在JavaScript程序中的任何位置访问。
- 常用的为var来声明变量。
- 在HTML中,全局作用域是window对象。通过var关键词定义的全局变量属于window对象。
- 通过var声明的变量会提升到顶端。
var carName = "xuan";
// 此处的代码可以使用 carName
function myFunction() {
// 此处的代码也可以使用 carName
}
window对象:
var carName = "porsche";
// 此处的代码可使用 window.carName
循环作用域:
var i = 7;
for (var i = 0; i < 10; i++) {
// 一些语句
}
// 此处,i 为 10
重新声明变量:
允许在程序的任何位置使用var重新声明JavaScript变量。
var x = 10;
// 现在,x 为 10
var x = 6;
// 现在,x 为 6
函数作用域:
- 局部(函数内)声明的变量拥有函数作用域。
- 局部变量只能在它们被声明的函数内访问。
// 此处的代码不可以使用 carName
function myFunction() {
var carName = "xuan";
// code here CAN use carName
}
// 此处的代码不可以使用 carName
块作用域:
- 通过var关键词声明的变量没有块作用域。
- 在块{}内声明的变量可以从块之外进行访问。
- 在WS2015之前,JavaScript是没有块作用域的。
- 在块中重新声明变量也将重新声明块外的变量。
{
var x = 10;
}
// 此处可以使用 x
使用var关键字重新声明变量。
var x = 10;
// 此处 x 为 10
{
var x = 6;
// 此处 x 为 6
}
// 此处 x 为 6
let和const:
- ES2015引入的 两个新关键词。
- 可以使用let关键词声明拥有块作用域的变量。即在块{}内声明的变量无法从块外访问。
- 同样的,在块中重新声明的变量不会重新声明块外的变量。
- 通过let关键词定义的全局变量不属于window对象。
- 通过let定义的变量不会被提升到顶端,在声明let变量之前就使用它会倒是ReferenceError。变量从块的开头一直处于“暂时死区”直到声明为止。
- const定义的变量与let变量类似,但不能重新赋值。
- const变量必须在声明时直接进行赋值,无法声明后赋值。
{
let x = 10;
}
// 此处不可以使用 x
块中声明的变量,不会重新声明块外的变量。
var x = 10;
// 此处 x 为 10
{
let x = 6;
// 此处 x 为 6
}
// 此处 x 为 10
var x = 10;
// 此处,x 为 10
{
const x = 6;
// 此处,x 为 6
}
// 此处,x 为 10
通过let关键词定义全局变量,不属于window对象。
let carName = "porsche";
// 此处的代码不可使用 window.carName,将会显示undefined
循环作用域:
let i = 7;
for (let i = 0; i < 10; i++) {
// 一些语句
}
// 此处 i 为 7
如果在循环中用let声明变量i,那么只有在循环内,变量i才是可见的。
let i = 7;
for (let i = 0; i < 10; i++) {
// 一些语句
}
// 此处 i 为 7
重新声明:
在相同的作用域,或在相同的块中,通过let重新声明一个变量是不允许的。
var x = 10; // 允许
let x = 6; // 不允许
{
var x = 10; // 允许
let x = 6; // 不允许
}
let x = 10; // 允许
let x = 6; // 不允许
{
let x = 10; // 允许
let x = 6; // 不允许
}
let x = 10; // 允许
var x = 6; // 不允许
{
let x = 10; // 允许
var x = 6; // 不允许
}
let x = 6; // 允许
{
let x = 7; // 允许
}
{
let x = 8; // 允许
}
const不能重新赋值:
const PI = 3.141592653589793;
PI = 3.14; // 会出错
PI = PI + 10; // 也会出错
const可以更改常量对象的属性:
// 您可以创建 const 对象:
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性:
car.color = "White";
// 您可以添加属性:
car.owner = "Bill";
//无法重新为常量对象赋值
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
//可以更改常量数组的元素
// 您可以创建常量数组:
const cars = ["Audi", "BMW", "porsche"];
// 您可以更改元素:
cars[0] = "Honda";
// 您可以添加元素:
cars.push("Volvo");
//无法重新为常量数组赋值
const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"]; // ERROR
正则表达式:
语法:
/pattern/modifiers;
//parrern是模式,modifiers是修饰符
使用正则表达式时,不需要加入引号。
var str = "Visit W3School";
var n = str.search(/w3school/i);
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School");
正则表达式修饰符:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
test方法:
- 是正则表达式方法
- 它通过模式来搜索字符串,然后根据结果返回true或false
var patt = /e/;
patt.test("The best things in life are free!");
//查找字符串中是否含有e,返回true,可缩短成一行
/e/.test("The best things in life are free!");
exec方法:
- 通过制定的模式(pattern)搜索字符串,并返回以找到的文本。
- 如果未找到匹配,则返回null
/e/.exec("The best things in life are free!");
错误:
try语句允许定义一个代码块,以便在执行时检测错误。
catch语句允许定义一个要执行代码块,如果try代码块中发生错误。
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
throw语句:
允许创建自定义的错误,可以抛出字符串,数字,布尔或对象。
throw "Too big"; // 抛出文本
throw 500; //抛出数字
配合finally使用:
try {
// 供测试的代码块
}
catch(err) {
// 处理错误的代码块
}
finally {
// 无论结果如何都执行的代码块
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· spring官宣接入deepseek,真的太香了~