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 所出现的新特性。好了，今天视频就到此结束，如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！