前端javascript基础学习篇一（基础和变量）_前端输入和输出-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62474008/article/details/138708198

1、浏览器执行JS的过程

浏览器执行JavaScript代码的过程包括解析HTML、创建全局上下文环境、解析和执行JavaScript代码、处理事件、渲染页面、处理定时器和异步操作，并遵循事件循环机制进行任务调度。

2、javascript的基本组成

ECMAScript提供了语言的核心特性，DOM提供了对文档的访问和操作能力，BOM提供了与浏览器交互的功能。通过组合使用这些部分，可以实现丰富而动态的Web应用程序。

ECMAScript（规范）
DOM（文档对象模型）
BOM（浏览器对象模型）

3、js的三种书写位置

内联（Inline）行内式
内部（Internal）内嵌式
外部（External）外链式

4、JavaScript的输入和输出语句

1、输入：

prompt()函数：

该函数用于弹出一个对话框，提示用户输入信息，并返回用户输入的内容作为字符串。

例如：

var name = prompt("请输入您的姓名:"); 

console.log("您输入的姓名是：" + name);

2、输出：

console.log()函数
alert()函数
document.write()方法：该方法用于直接将内容写入到HTML文档中。它会在当前位置插入指定的内容。例如：

document.write("这是通过 JavaScript 写入的内容。");

document.write()//该方法只在页面加载期间有效，在页面加载完成后再使用会覆盖整个页面内容

5、声明变量

关键字 var, let 或 const 来声明变量

1、 var 关键字声明变量：var 声明的变量具有函数作用域或全局作用域，没有块级作用域。

2、let 关键字声明变量：let 声明的变量具有块级作用域，即在 {} 内有效。

3、const 关键字声明常量：const 声明的变量也具有块级作用域，且一旦赋值就不能再改变。

6、声明变量的特殊情况

提升：在声明之前使用变量undefined

重复声明：在同一个作用域中，不允许使用相同的变量名进行重复的变量声明
全局对象属性：使用 var 关键字声明的变量在全局范围内（不在任何函数内），它将成为全局对象（window 对象）的属性。
冻结对象属性：使用 const 声明的变量可以更改对象属性的值，但不能给常量重新赋值。
只声明不赋值：undefined
不声明不赋值直接使用：报错
不声明直接赋值使用：能输出，不提倡使用

7、变量命名的规范

使用有意义的名称
使用驼峰命名法：首字母小写，后面单词首字母大写
避免使用简写和缩写
使用有意义的前缀或后缀
遵循编程语言的命名约定
不要使用保留关键字
注意一致性
多个单词之间使用合适的分隔符

8、怎么交换两个变量的值

使用临时变量

let a = 10; let b = 20; 

let temp = a;

    a = b; 

    b = temp;

console.log(a); // 输出 20 

console.log(b); // 输出 10

使用解构赋值：

let a = 10; 

let b = 20; 

[a, b] = [b, a]; 

console.log(a); // 输出 20 

console.log(b); // 输出 10

9、变量的拓展

解构：

解构允许我们从数组或对象中提取值，并将它们分配给单独的变量。以下是一些常见的解构示例：

数组解构：

const numbers = [1, 2, 3];

const [a, b, c] = numbers;

console.log(a); // 输出：1

console.log(b); // 输出：2

console.log(c); // 输出：3

对象解构：

const person = { name: 'Alice', age: 30, city: 'Shanghai' };

const { name, age, city } = person;

console.log(name); // 输出：'Alice'

console.log(age); // 输出：30

console.log(city); // 输出：'Shanghai'

扩展运算符（Spread Operator）：

扩展运算符可以将数组或对象展开为单独的元素，并将其用于函数调用、数组合并等场景。以下是一些常见的使用示例：

数组合并：

const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const mergedArray = [...arr1, ...arr2]; 

console.log(mergedArray); // 输出：[1, 2, 3, 4, 5, 6]

函数参数传递：

const numbers = [1, 2, 3];

function sum(a, b, c) { console.log(a + b + c); } sum(...numbers); // 输出：6

对象合并：

const obj1 = { x: 1, y: 2 };

const obj2 = { z: 3 };

const mergedObject = { ...obj1, ...obj2 };

console.log(mergedObject); // 输出：{ x: 1, y: 2, z: 3 }