Javascript语言语法

Javascript

javascript定义方式

内联JavaScript

直接在HTML元素的事件属性中编写JavaScript代码

<body>
    <h1>Hello, World!</h1>

    <button onclick="alert('Button clicked!')">Click Me</button>
</body>

内部JavaScript
- 可以直接在HTML文件中使用<script>标签来编写JavaScript代码
- 放置在<head>内的<script>标签会在页面加载过程中被下载和解析，但在页面内容渲染之前执行
- 放置在<body>结尾处的<script>标签会在页面内容加载完毕后执行
- 直接放在HTML文件的顶部会在页面加载时立即执行脚本
- 放在HTML标签之外被视为无效内容
- ```
<body>
    <h1>Hello, World!</h1>

    <script>
        // 这里是JavaScript代码
        alert('Hello from inline JavaScript!');
    </script>
</body>
```
外部JavaScript文件
- 可以将JavaScript代码放在一个外部文件中，然后在HTML文件中通过<script>标签的src属性引用该文件。
- ```
<body>
    <h1>Hello, World!</h1>

    
    <script src="script.js"></script>
</body>
```
<script>标签的defer和async属性
- 当引用外部JavaScript文件时，可以使用defer或async属性来控制脚本的加载和执行时机。
  - defer: 脚本会在文档解析完成后执行，但会在DOMContentLoaded事件之前执行。
  - async: 脚本会在下载完成后立即执行，可能会中断文档的解析。
  - ```
  
  <script src="script1.js" defer></script>
  
  <script src="script2.js" async></script>
```

JavaScript语法

变量

声明变量

在 JavaScript 中，可以使用 var、let 和 const 来声明变量
var: 这是 ES5 及之前版本中声明变量的主要方式。var 声明的变量具有函数作用域（function scope），而不是块作用域（block scope）。这意味着在函数内部声明的变量在整个函数内部都是可见的。
let: 这是 ES6 引入的声明变量的方式。let 声明的变量具有块作用域（block scope），这意味着在块（如 if 语句、for 循环等）内部声明的变量只在该块内部可见。
const: 这也是 ES6 引入的声明变量的方式。const 用于声明常量，一旦声明后，其值不能被重新赋值。const 也具有块作用域。
- const 声明的变量不能被重新赋值，但如果变量是一个对象或数组，其内容是可以修改的。

变量的作用域

变量的作用域决定了变量在代码中的可见性和生命周期。
全局作用域: 在函数外部声明的变量具有全局作用域，可以在代码的任何地方访问。
- ```
var globalVar = "I am global";

function example() {
    console.log(globalVar); // "I am global"
}
```

函数作用域: 使用 var 声明的变量具有函数作用域，只在声明它的函数内部可见。

function example() {
    var localVar = "I am local";
    console.log(localVar); // "I am local"
}
console.log(localVar); // 错误：localVar 未定义

块作用域: 使用 let 和 const 声明的变量具有块作用域，只在声明它的块内部可见
可以在全局位置使用 let 和 const 声明变量，但它们的作用域仍然是块作用域。块作用域的意思是，变量只在声明它的块（{} 内部）或更内层的块中可见。

在全局作用域中，let 和 const 声明的变量会成为全局变量，但它们不会像 var 那样成为全局对象（如 window 或 global）的属性。

if (true) {
    let blockVar = "I am in a block";
    console.log(blockVar); // "I am in a block"
}
console.log(blockVar); // 错误：blockVar 未定义

块作用域的主要好处是避免变量污染和提高代码的可维护性。通过将变量的作用域限制在块内部，可以避免意外覆盖外部作用域中的变量

let x = 10;

if (true) {
    let x = 20; // 这是一个新的变量，与外部的 x 无关
    console.log(x); // 20
}

console.log(x); // 10（外部的 x 没有被修改）

如果使用 var，变量会被提升到函数作用域，可能导致意外的行为：

var x = 10;

if (true) {
    var x = 20; // 这是同一个变量，覆盖了外部的 x
    console.log(x); // 20
}

console.log(x); // 20（外部的 x 被修改了）

变量提升

JavaScript 中的变量声明会被提升到其作用域的顶部，但赋值操作不会被提升。

var 的变量提升: var 声明的变量会被提升到函数或全局作用域的顶部，但初始化为 undefined。

console.log(x); // undefined
var x = 5;
console.log(x); // 5

//相当于
var x;
console.log(x); // undefined
x = 5;
console.log(x); // 5

let 和 const 的变量提升: let 和 const 声明的变量也会被提升，但在声明之前访问它们会导致暂时性死区（Temporal Dead Zone, TDZ）错误。
- ```
console.log(y); // 错误：Cannot access 'y' before initialization
let y = 10;
```

变量命名规则

变量名必须以字母、下划线（_）或美元符号（$）开头。
变量名可以包含字母、数字、下划线和美元符号。
变量名区分大小写。
不能使用 JavaScript 的保留字（如 if、else、function 等）作为变量名。

变量类型

JavaScript 是一种动态类型语言，变量的类型可以在运行时改变。
- 基本类型: number、string、boolean、null、undefined、symbol、bigint。
- 引用类型: object、array、function 等。

对象和方法

创建对象

JavaScript 中的对象本质上就是键值对（key-value pairs）的集合。每个对象都是由一组属性和方法组成的
- 键（key）：是一个字符串（或 Symbol 类型），表示属性的名称。
- 值（value）：可以是任意数据类型，包括基本类型（如字符串、数字、布尔值）、复杂类型（如数组、函数、其他对象）等。
使用对象字面量
- 这是最常见且简洁的定义对象和方法的方式
- 字符串键：最常见的键类型。
- 隐式转换：如果使用非字符串的键（如数字、布尔值等），JavaScript 会将其转换为字符串。
- ```
const person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

// 调用方法
person.greet(); // 输出: Hello, my name is Alice
```

使用构造函数

通过构造函数可以创建多个相似的对象实例。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

// 创建对象实例
const alice = new Person("Alice", 25);
const bob = new Person("Bob", 30);

// 调用方法
alice.greet(); // 输出: Hello, my name is Alice
bob.greet();   // 输出: Hello, my name is Bob

使用 class 语法

ES6 引入了 class 语法，使得定义对象和方法更加直观。

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

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

// 创建对象实例
const alice = new Person("Alice", 25);

// 调用方法
alice.greet(); // 输出: Hello, my name is Alice

使用 Object.create()

Object.create() 方法可以创建一个新对象，并使用现有对象作为新对象的原型。

const personPrototype = {
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const alice = Object.create(personPrototype);
alice.name = "Alice";
alice.age = 25;

// 调用方法
alice.greet(); // 输出: Hello, my name is Alice

使用工厂函数

工厂函数是一个返回对象的函数，适合需要创建多个相似对象的场景。

function createPerson(name, age) {
    return {
        name: name,
        age: age,
        greet: function() {
            console.log(`Hello, my name is ${this.name}`);
        }
    };
}

// 创建对象
const alice = createPerson("Alice", 25);

// 调用方法
alice.greet(); // 输出: Hello, my name is Alice

定义方法

函数声明（Function Declaration）
- 使用 function 关键字定义函数，函数声明会被提升（hoisted），因此可以在定义之前调用。
- ```
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"
```
函数表达式（Function Expression）
- 将函数赋值给一个变量。函数表达式不会被提升，必须在定义之后才能调用。
- ```
const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet("Bob")); // "Hello, Bob!"
```

方法简写（Method Shorthand）

在对象中定义方法时，可以使用简写语法。
方法中的 this 指向调用它的对象

const person = {
    name: "Alice",
    greet() {
        return `Hello, ${this.name}!`;
    }
};

console.log(person.greet()); // "Hello, Alice!"

构造函数（Constructor Function）

使用 function 定义构造函数，通常用于创建对象实例
使用 new 关键字调用。

function Person(name) {
    this.name = name;
    this.greet = function() {
        return `Hello, ${this.name}!`;
    };
}

const alice = new Person("Alice");
console.log(alice.greet()); // "Hello, Alice!"

流程控制

if 、else if 、else 语句

let age = 10;

if (age >= 18) {
    console.log("You are an adult.");
} else if (age >= 13) {
    console.log("You are a teenager.");
} else {
    console.log("You are a child.");
}

switch 语句

switch 语句用于根据不同的值执行不同的代码块。

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("Today is Monday.");
        break;
    case "Tuesday":
        console.log("Today is Tuesday.");
        break;
    default:
        console.log("Today is not Monday or Tuesday.");
}

for 循环

for (let i = 0; i < 5; i++) {
    console.log("Iteration: " + i);
}

while 循环

let i = 0;

while (i < 5) {
    console.log("Iteration: " + i);
    i++;
}

do...while 循环
跳转语句用于改变代码的执行顺序。常见的跳转语句包括 break、continue 和 return。

异常控制语句

try...catch finally语句

try {
    let result = 10 / 0;
    if (!isFinite(result)) {
        throw new Error("Division by zero");
    }
} catch (error) {
    console.log("An error occurred: " + error.message);
} finally {
    console.log("This will always be executed.");
}

posted @ 2025-03-18 14:49 QAQ001 阅读(43) 评论(0) 收藏举报

刷新页面返回顶部

Learn-Review-blog

Javascript语言语法

Javascript

javascript定义方式

JavaScript语法

变量

对象和方法

公告