一路欢歌，JS技能升级——前端基础系列第八章

2023-09-06 10:05:50

前言

作为一名前端开发工程师，扎实掌握JavaScript基础知识至关重要。本文将深入浅出地讲解JavaScript的基本语法、数据类型、运算符、条件语句、循环语句、函数、数组、对象等知识点，并辅以大量的代码示例和学习资源，帮助读者夯实前端开发基础。

JavaScript简介

JavaScript是一种脚本语言，常用于前端开发，如网页交互、表单验证、动画效果等。JavaScript语法简洁易学，具有跨平台性，可在多种浏览器中运行，是Web开发必备技能。

JavaScript基本语法

JavaScript基本语法包括变量声明、数据类型、运算符、控制语句、函数、数组、对象等。

变量声明

JavaScript变量声明使用var、let、const，其中var为传统声明方式，let和const为ES6新增声明方式。let声明的变量作用域为块级，const声明的变量为常量，不可修改。

var name = 'John Doe';
let age = 30;
const PI = 3.1415926;

数据类型

JavaScript数据类型包括基本类型和引用类型。基本类型包括字符串、数字、布尔值、undefined和null，引用类型包括对象、数组和函数。

console.log(typeof 'Hello World'); // "string"
console.log(typeof 123); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"

运算符

JavaScript运算符包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。

let x = 10;
let y = 5;

console.log(x + y); // 15
console.log(x - y); // 5
console.log(x * y); // 50
console.log(x / y); // 2

console.log(x == y); // false
console.log(x > y); // true
console.log(x >= y); // true

console.log(x && y); // true
console.log(x || y); // true
console.log(!x); // false

控制语句

JavaScript控制语句包括if语句、switch语句、for循环、while循环、do-while循环等。

if (x > 0) {
  console.log('x is greater than 0');
} else if (x < 0) {
  console.log('x is less than 0');
} else {
  console.log('x is equal to 0');
}

switch (x) {
  case 1:
    console.log('x is 1');
    break;
  case 2:
    console.log('x is 2');
    break;
  default:
    console.log('x is not 1 or 2');
}

for (let i = 0; i < 10; i++) {
  console.log(i);
}

while (x > 0) {
  console.log(x);
  x--;
}

do {
  console.log(x);
  x--;
} while (x > 0);

函数

JavaScript函数用于封装代码块，可以提高代码的可复用性和可维护性。

function sum(x, y) {
  return x + y;
}

let result = sum(1, 2);
console.log(result); // 3

数组

JavaScript数组用于存储一组有序元素，元素类型可以是任何数据类型。

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // "apple"
console.log(fruits.length); // 3

fruits.push('pear');
console.log(fruits); // ["apple", "banana", "orange", "pear"]

fruits.pop();
console.log(fruits); // ["apple", "banana", "orange"]

对象

JavaScript对象用于存储一组键值对，键和值可以是任何数据类型。

let person = {
  name: 'John Doe',
  age: 30,
  gender: 'male'
};

console.log(person.name); // "John Doe"
console.log(person['age']); // 30

person.job = 'developer';
console.log(person); // { name: 'John Doe', age: 30, gender: 'male', job: 'developer' }

delete person.gender;
console.log(person); // { name: 'John Doe', age: 30, job: 'developer' }