JavaScript 常用的基础属性和概念 笔记

前言

是的，你没有看错。博主开始学习从零开始学习js了。

之前的css基础已经学习完，高级进阶的等到时候用的时候再查资料。

不然时间长了一样会忘记，还是把基础的记牢，基本上也都够用了！

后面应该也会写一篇方便查阅的全集笔记—我的域名还是很好记的；

所以大家有兴趣的也可以直接跳转过来查看笔记。

现在开始 Js 时间！

笔记

• 变量（Variables）

用于存储数据值。在 ES6 之前，主要使用 var 关键字来声明变量。

ES6 引入了 let 和 const，提供了块级作用域和不可变性

var message = "Hello, World!";
let count = 0;
const PI = 3.14159;

 

• 数据类型（Data Types）

String（字符串）、

Number（数字）、

Boolean（布尔值）、

Null（空）、

Undefined（未定义）、

Object（对象）、

Symbol（ES6 新增，表示独一无二的值）

 

• 操作符（Operators）

包括算术操作符、赋值操作符、比较操作符、逻辑操作符等

const result = 3 + 5; // 算术操作
result > 10 ? console.log('大于10') : console.log('小于等于10'); // 条件（三元）操作符

 

• 控制结构（Control Structures）

如条件语句 if、循环语句 for、while 和 do...while。

if (user.hasAccess) {
  // 执行某些操作
}

for (let i = 0; i < items.length; i++) {
  // 循环操作
}

 

• 函数（Functions）

封装了可重复使用的代码块

function greet(name) {
  console.log('Hello, ' + name);
}

greet('Alice'); // 输出: Hello, Alice

 

• 数组（Arrays）

用于存储多个值的集合

const numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出: 1

 

• 对象（Objects）

存储键值对的集合，键是字符串，值可以是任意数据类型

const person = {
  name: 'Alice',
  age: 30,
  greet: function() {
    console.log('Hello, I am ' + this.name);
  }
};

person.greet(); // 输出: Hello, I am Alice

 

• 解构赋值（Destructuring Assignment）

允许你从数组或对象中提取数据并赋值给新的变量

const [a, b] = [1, 2];
const { name, age } = person;

 

• 类（Classes）

ES6 引入的面向对象编程的一个语法糖，它提供了一种新的语法来定义对象的原型和继承

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log('Hello, I am ' + this.name);
  }
}

const alice = new Person('Alice', 30);
alice.greet(); // 输出: Hello, I am Alice

 

• 模块（Modules）

允许你将代码逻辑分割成独立的模块

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(1, 2)); // 输出: 3

 

• Promises 和异步编程（Promises and Asynchronous Programming）

用于异步操作，如网络请求、定时器等

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, World!');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 输出: Hello, World!
});

 

• 错误处理（Error Handling）

使用 try...catch 语句来捕获和处理错误

try {
  const result = someFunctionThatMightFail();
} catch (error) {
  console.error(error);
}

 

• for 循环

用于已知迭代次数的情况

for (var i = 0; i < 10; i++) {
  console.log(i); // 从0到9打印数字
}

• while 循环

当循环条件为真时，重复执行代码块

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

• do…while 循环

至少执行一次代码块，然后检查条件是否为真，如果是，继续执行循环

var i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

• for…in 循环

遍历对象的属性

var obj = { a: 1, b: 2, c: 3 };
for (var prop in obj) {
  console.log(prop + ': ' + obj[prop]);
}

• for…of 循环

遍历可迭代对象（如数组、字符串、Map，Set等）

var arr = ['apple', 'banana', 'cherry'];
for (var fruit of arr) {
  console.log(fruit);
}

 

 

 

随着 JavaScript 语言的不断发展，新的功能和特性也在不断被引入，努力学习强化自己吧！

JavaScript – 学习 Web 开发 | MDN (mozilla.org)