跳到主要内容位置

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 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买