7 分钟掌握 JavaScript 核心语法
新书《JavaScript 基础语法详解》已出版,可在各大电商平台购买!京东: https://u.jd.com/RttYRbe
JavaScript 最初作为浏览器的脚本语言用于给 HTML 页面添加交互,后面随着 Node.js 的出现,JavaScript 也可以用于编写服务端应用程序了。
JavaScript 的语法和 Java 非常类似,不过更灵活,几乎可以用于前端、后端、移动端和桌面端等所有应用开发中,所以掌握 JavaScript 十分必要。这个视频快速介绍 JavaScript 的核心语法,适合有一定编程经验的同学,让你尽快上手开发。
变量
在 JavaScript 中定义变量使用 let:
let a = 5;
定义常量使用 const,常量在定义后不能修改:
const a = 5;
a = 6; // 错误
使用 console.log() 可以在控制台打印字符,用于调试代码,可以给它传递多个参数:
let a = 5;
let b = 6;
console.log(a); // 5
console.log(a, b); // 5, 6
数据类型
JavaScript 是动态类型语言,不用明确指定变量类型。JavaScript 内置的基本类型有:
- Number 数字类型,包含小数和浮点数。
- String 字符串类型。
- Boolean 布尔类型。
- Null 空类型,表示变量已定义,但未赋值
- Undefined 未定义类型,表示变量未定义,不存在。
let i = 5; // 整数
let f = 5.2; // 浮点数
let b = true; // 布尔
let s = "hello"; // 字符串
let n = null; // 空
u; // 直接访问不存在的变量 undefined;
let un = undefined; // 或可以赋值为 undefined
引用类型有:
- Array:数组
- Object:对象
- Function:函数
let arr = [1, 2, 3]; // Array 数组
let obj = { a: 1, b: 2 }; // Object 对象
function f() {
// Function 函数
return a + b;
}
运算符
JavaScript 的运算符和其它编程语言的基本一致,有:
- +、-、\*、/ 、%、++、--、\*\* 等基本数学运算。
- <, <=, >, >=, ==, === 等比较运算。
- &&、||、! 等逻辑运算。
1 + 2; // 3
1 - 2; // -1
1 * 2; // 2
1 / 2; // 0.5
3 % 2; // 1
++1; // 2
--1; // 0
2 ** 3; // 8
2 < 3; // true
2 <= 3; // true
2 > 3; // false
2 >= 3; // false
2 == "2"; // true, JavaScript 会尝试先进行类型转换
2 === "2"; // false, 严格比较,类型不匹配
true && false; // false
true || false; // true
!true; // false
分支
JavaScript 分支语句有 if ... else、if ...else if...else、switch 和三目运算符:
let a = 5;
if (a > 2) {
// 一些操作
} else {
// 一些操作
}
if (a > 2) {
// 一些操作
} else if (a <= 2) {
// 一些操作
} else {
// 一些操作
}
switch (a) {
case 1:
// 一些操作
break;
case 2:
// 一些操作
break;
default:
// 一些操作
}
a > 5 ? "大于 5" : "小于等于 5";
循环语句有 for、while 和 do...while,do while 循环中,do 中的语句会先执行一次,再判断 while 中的条件:
for (let i = 0; i < 10; i++) {
console.log(i);
}
let j = 0;
while (j < 10) {
console.log(j);
j++;
}
let k = 0;
do {
console.log(k);
k++;
} while (k < 10);
中断循环可以用 continue 和 break,分别是中断当次循环和退出循环:
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue; // i = 6 继续
}
console.log(i);
}
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // for 循环终止
}
console.log(i);
}
函数
JavaScript 函数使用 function 关键字定义,函数可以有参数和返回值:
function f(a, b) {
return a + b;
}
f(1, 2); // 调用
JavaScript 的函数可以保存在变量中,这个变量可以像函数一样调用:
const func = function f(a, b) {
return a + b;
};
func(1, 2);
这样也可以省略函数名字,这样的函数叫做匿名函数:
const f = function (a, b) {
return a + b;
};
JavaScript 还有一种函数定义方式,箭头函数,函数的参数和函数体用一个 => 符号隔开:
const f = (a, b) => {
return a + b;
};
f(1, 2);
因为箭头函数本身是匿名函数,所以如果想在后面调用,需要保存到变量中。如果箭头函数体中只有一个 return 语句,那么可以省略大括号和 return:
const f = (a, b) => a + b;
如果只有一个参数,也可以省略小括号:
const f = (a) => a * 2;
如果没有参数,小括号不能省略:
const f = () => 5;
数组
JavaScript 定义数组使用一对方括号,里边写上用逗号隔开的元素:
let arr = [1, 2, 3];
元素的访问和赋值使用数组变量加[],里边写上索引,数组的索引是从 0 开始的:
console.log(arr[0]); // 1
arr[0] = 4;
console.log(arr); // [4, 2, 3]
获取数组长度可以访问 length 属性:
console.log(arr.length); // 3
添加元素到数组末尾可以使用 push():
let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
添加元素到头部可以使用 unshift():
let arr = [1, 2, 3];
arr.unshift(4); // [4, 1, 2, 3]
移除数组末尾元素并返回使用 pop():
let arr = [1, 2, 3];
arr.pop(); // 3
移 除数组头部元素并返回使用 shift():
let arr = [1, 2, 3];
arr.shift(); // 1
数组其它常用的方法有:forEach() 遍历所有元素,它接收一个回调函数,回调函数的参数分别是当前遍历到的元素、元素索引和数组本身,可以通过箭头函数来简化回调函数定义:
let arr = [1, 2, 3];
arr.forEach((e, i, arr) => {
console.log(e);
});
// 1, 2, 3
map() 用于遍历数组,并返回一个同等长度的新数组:
let arr = [1, 2, 3];
let arr2 = arr.map((e) => e * 2);
console.log(arr2); // [2, 4, 6]
filter() 用于过滤数组,返回指定条件的元素:
let arr = [1, 2, 3];
let arr2 = arr.filter((e) => e >= 2);
console.log(arr2); // [2, 3]
数组支持解构赋值语法,一次性把数组元素赋值给多个变量:
let [a, b] = [1, 2, 3];
console.log(a, b); // 1, 2
let [a, , b] = [1, 2, 3];
console.log(a, b); // 1, 3
也支持 rest 运算符,把没解构的子数组保存起来:
let [a, ...rest] = [1, 2, 3];
console.log(a, rest); // 1, [2, 3]
还可以用 spread 展开运算符复制一个数组:
let arr = [1, 2, 3];
let arr2 = [...arr];
console.log(arr2); // [1, 2, 3]
最后,使用 for...of 循环也可以遍历数组:
let arr = [1, 2, 3];
for (let e of arr) {
console.log(e);
}
// 1, 2, 3
对象
对象是 JavaScript 中最灵活的数据结构,使用一对大括号来定义,里边是 key-value 键值对形式的属性,属性可以是任何类型:
let obj = {
a: 1,
b: true,
f() {
// 函数
},
arr: [1, 2, 3],
obj: { // 子对象
c: 2;
}
}
访问或修改对象属性使用 . 运算符:
console.log(obj.a); // 1
obj.a = 2;
console.log(obj.a); // 2
obj.d = 3; // 添加新属性
console.log(obj.d); // 3
或者使用 [] 形式,[]里是字符串形式的属性名,或者保存了属性字符串的变量:
let obj = { a: 1, b: 2, c: 3 };
obj["a"]; // 1;
let b = "b";
obj[b]; // 2
对象也支持解构赋值:
let obj = { a: 1, b: 2, c: 3 };
let { a, b } = obj; // a 和 b 的名字保持和对象的属性名一致
console.log(a, b); // 1, 2
rest 运算符:
let obj = { a: 1, b: 2, c: 3 };
let { a, ...rest } = obj;
console.log(a, rest); // 1, {b: 2, c: 3}
和 spread 运算符:
let obj = { a: 1, b: 2, c: 3 };
let obj2 = { ...obj };
console.log(obj2); // { a: 1, b: 2, c: 3 }
使用 for...in 循环,可以遍历对象所有属性:
for (let p in obj) {
console.log(p, obj[p]);
}
// a 1
// b 2
// c 3
内置对象和函数
JavaScript 中提供了一些内置的对象和函数,进行一些高级运算。
Math 用于复杂的数学运算,例如:
- 开方
- 最大值
- 最小值
- 获取圆周率
Math.sqrt(4); // 2
Math.max(1, 2, 3, 4); // 4
Math.min(1, 2, 3, 4); // 1
Math.PI; // 3.141592653589793
Date 用于获取日期:
let date = new Date(); // 当前日期
console.log(date.getFullYear()); // 2022
console.log(date.getMonth()); // 3,月份从 0 到 11
console.log(date.getDate()); // 22
console.log(date.getTime()); // 时间戳 1650636352668
parseInt() 和 parseFloat() 分别可以把字符串转换为整数或小数:
parseInt("1"); // 1
parseFloat("2.5"); // 2.5
setTimeout 用于把代码延后一段时间执行:
setTimeout(() => {
console.log("hi");
}, 500); // 延后 500 毫秒
setInterval 用于间隔一定时间重复执行代码:
setInterval(() => {
console.log("hi");
}, 5000); // 每隔 5 秒执行一次
调用 setTimeout() 和 setInterval() 会返回 id,后续可以使用 clearTimeout() 和 clearInterval() 来取消他们:
let id = setInterval(() => {
console.log("hi");
}, 5000); // 每隔 5 秒执行一次
clearInterval(id);
错误处理
在编写程序时难免会出现错误,JavaScript 的处理方式是使用 try...catch,把可能出错的代码放到 try 中,把出错后的处理代码放到 catch 中,catch 接收错误信息作为参数:
try {
console.log(a); // 访问未定义的变量
} catch (e) {
console.log(e.name); // ReferenceError
}
异步操作
JavaScript 的异步操作可以使用 Promise API,例如浏览器内置的 fetch() API 用于异步的请求远程数据,它返回一个 Promise,我们可以调用它的 then() 方法注册回调函数,在 Promise() 完成之后,会自动执行 then 回调函数中的代码,如果 then 回调函数返回的仍然是 Promise,可以继续调用 then 处理:
fetch("https://someapi").then(( res ) => res.json()).then(result= > { console.log(result) });
Promise 还支持 catch() 方法,用于处理错误,注意 catch() 之前的所有 then() 中只要有一个有错误,就会触发:
fetch("https://someapi")
.then(( res ) => res.json())
.then(result= > { console.log(result) })
.catch(e => console.log(e));
小结
这些就是 JavaScript 的核心语法,如果想学习更详细的,可以购买由我编写的《JavaScript 基础语法详解》一书,里边详细介绍了 JavaScript 的语法以及从 ES6 到 ES2021 所出现的新特性。好了,今天视频就到此结束,如果有帮助请三连并关注,想学更多的开发知识,可以在评论区留言,感谢观看!
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!
即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!
《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买