JavaScript基础

1.1 基本数据类型

在 JavaScript 里，基本数据类型属于不可变的数据类型，它们直接存储值。

number
用于表示整数和浮点数。
javascript
let num1 = 10; // 整数
let num2 = 3.14; // 浮点数
bigint
用于表示任意大的整数。在数字后面加上 n 来表示 bigint 类型。
javascript
let bigNum = 9007199254740991n;
string
用于表示文本数据，需用单引号、双引号或者反引号包裹。
javascript
let str1 = 'Hello';
let str2 = "World";
let str3 = Hello, ${str2}; // 模板字符串
boolean
仅有两个值：true 和 false，常被用于条件判断。
javascript
let isTrue = true;
let isFalse = false;
null
表示一个空值或者无对象指向，它是一个原始值。
javascript
let emptyValue = null;
undefined
当变量被声明但未赋值，或者函数没有返回值时，就会得到 undefined。
javascript
let undef;
console.log(undef); // 输出: undefined
symbol
创建独一无二且不可变的值，一般用作对象的属性名。
javascript
let sym = Symbol('description');

1.2 数据声明

在 JavaScript 中，可以使用 var、let 和 const 来声明变量。

var
在 ES6 之前，var 是声明变量的唯一方式。它具有函数作用域，不存在块级作用域。
javascript
var x = 10;
if (true) {
var x = 20; // 会覆盖外部的 x
}
console.log(x); // 输出: 20

let
ES6 引入了 let，它拥有块级作用域，这意味着变量仅在声明它的块内有效。
javascript
let y = 10;
if (true) {
let y = 20; // 不会覆盖外部的 y
}
console.log(y); // 输出: 10

const
const 同样是 ES6 引入的，用于声明常量。一旦赋值，就不能重新赋值。它也具备块级作用域。
javascript
const PI = 3.14;
// PI = 3.1415; // 报错，不能重新赋值

1.3 常用引用类型

引用类型的值是对象，存储的是对象的引用，而非对象本身。

对象（Object）
是无序的数据集合，由键值对构成。
javascript
let person = {
name: 'John',
age: 30,
isStudent: false
};

数组（Array）
用于存储有序的数据集合。
javascript
let numbers = [1, 2, 3, 4, 5];

函数（Function）
函数属于一等公民，可以作为变量传递、作为参数传入其他函数，也可以作为返回值返回。
javascript
function add(a, b) {
return a + b;
}

日期（Date）
用于处理日期和时间。
javascript
let now = new Date();

正则表达式（RegExp）
用于匹配和处理字符串。
javascript
let pattern = /abc/;

2. 基本类型与引用类型

2.1 基本类型

基本类型是不可变的数据类型，它们直接存储值，并且在内存中占据固定大小的空间。在 JavaScript 中，
基本类型包括 number、bigint、string、boolean、null、undefined 和 symbol。
当你操作基本类型的值时，实际上是在操作这些值本身。例如：
javascript
let num1 = 10;
let num2 = num1;
num2 = 20;
console.log(num1); // 输出: 10
console.log(num2); // 输出: 20
在这个例子中，num2 复制了 num1 的值，当修改 num2 时，num1 的值不受影响。
number：表示数字，包含整数和浮点数。
bigint：用于处理任意大的整数。
string：代表文本数据。
boolean：仅有 true 和 false 两个值。
null：表示空值。
undefined：变量声明未赋值或函数无返回值时的类型。
symbol：创建独一无二且不可变的值。

2.2 引用类型

引用类型的值是对象，它们存储的是对象的引用，而不是对象本身。引用类型包括 Object、Array、Function、Date、RegExp 等。
当你操作引用类型的值时，实际上是在操作对象的引用。例如：
javascript
let obj1 = { value: 10 };
let obj2 = obj1;
obj2.value = 20;
console.log(obj1.value); // 输出: 20
console.log(obj2.value); // 输出: 20
在这个例子中，obj2 复制了 obj1 的引用，它们指向同一个对象，所以当修改 obj2 的属性时，obj1 的属性也会被修改。
Object：无序的键值对集合。
Array：有序的数据集合。
Function：可作为变量、参数和返回值的代码块。
Date：用于处理日期和时间。
RegExp：用于字符串匹配和处理

3. 基本运算与操作

3.1算术运算符

用于执行基本的数学运算，包括加法（+）、减法（-）、乘法（*）、除法（/）、取模（%）和幂运算（**）。
javascript
let a = 10;
let b = 3;
console.log(a + b); // 输出: 13
console.log(a - b); // 输出: 7
console.log(a * b); // 输出: 30
console.log(a / b); // 输出: 3.3333333333333335
console.log(a % b); // 输出: 1
console.log(a ** b); // 输出: 1000

3.2 比较运算符

用于比较两个值的大小或相等性，返回一个布尔值。比较运算符包括等于（）、不等于（!=）、严格等于（=）、严格不等于（!==）、大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。
javascript
let x = 10;
let y = '10';
console.log(x == y); // 输出: true，值相等
console.log(x === y); // 输出: false，值和类型都要相等
console.log(x > y); // 输出: false
console.log(x < y); // 输出: false

3.3 逻辑运算符

用于组合多个布尔表达式，包括逻辑与（&&）、逻辑或（||）和逻辑非（!）。
javascript
let isTrue = true;
let isFalse = false;
console.log(isTrue && isFalse); // 输出: false
console.log(isTrue || isFalse); // 输出: true
console.log(!isTrue); // 输出: false

3.4 赋值运算符

用于给变量赋值，包括简单赋值（=）、加法赋值（+=）、减法赋值（-=）、乘法赋值（*=）、除法赋值（/=）等。
javascript
let num = 10;
num += 5; // 相当于 num = num + 5
console.log(num); // 输出: 15

3.5 字符串连接运算符

使用 + 运算符可以将两个字符串连接起来。
javascript
let str1 = 'Hello';
let str2 = ' World';
console.log(str1 + str2); // 输出: Hello World

3.6 类型转换

在 JavaScript 中，类型转换可以是隐式的，也可以是显式的。
隐式类型转换：在某些运算中，JavaScript 会自动进行类型转换。例如：
javascript
let num = 10;
let str = '20';
console.log(num + str); // 输出: 1020，这里发生了隐式类型转换，将 num 转换为字符串

3.7 显式类型转换：可以使用一些函数进行显式类型转换，如 Number()、String() 和 Boolean()。

javascript
let numStr = '10';
let num = Number(numStr);
console.log(num); // 输出: 10

弹窗与事件

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹窗与事件示例</title> <style> /* 简单的样式设置，让按钮更美观 */ button { padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; }

    input {
        padding: 10px;
        margin: 10px;
        font-size: 16px;
    }
</style>

</head> <body>  <button id="alertButton">显示警告框</button>  <button id="confirmButton">显示确认框</button>  <button id="promptButton">显示输入框</button>  <div id="hoverElement" style="width: 200px; height: 100px; background-color: lightblue;"> 鼠标悬停在这里 </div>  <input type="text" id="inputField" placeholder="输入内容">  <form id="myForm"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <input type="submit" value="提交"> </form>

<script>
    // 获取各个元素的引用
    const alertButton = document.getElementById('alertButton');
    const confirmButton = document.getElementById('confirmButton');
    const promptButton = document.getElementById('promptButton');
    const hoverElement = document.getElementById('hoverElement');
    const inputField = document.getElementById('inputField');
    const myForm = document.getElementById('myForm');

    // 为显示警告框的按钮添加点击事件监听器
    alertButton.addEventListener('click', function () {
        // 使用 alert() 函数显示警告框
        alert('这是一个警告框！');
    });

    // 为显示确认框的按钮添加点击事件监听器
    confirmButton.addEventListener('click', function () {
        // 使用 confirm() 函数显示确认框，并根据用户的选择输出不同信息
        const result = confirm('你是否确认此操作？');
        if (result) {
            console.log('用户点击了确认');
        } else {
            console.log('用户点击了取消');
        }
    });

    // 为显示输入框的按钮添加点击事件监听器
    promptButton.addEventListener('click', function () {
        // 使用 prompt() 函数显示输入框，并根据用户的输入输出不同信息
        const input = prompt('请输入一些内容：');
        if (input!== null) {
            console.log('你输入的内容是：' + input);
        } else {
            console.log('你取消了输入');
        }
    });

    // 为鼠标悬停元素添加鼠标悬停事件监听器
    hoverElement.addEventListener('mouseover', function () {
        // 当鼠标悬停时，改变元素的背景颜色
        this.style.backgroundColor = 'lightcoral';
    });

    // 为鼠标悬停元素添加鼠标移出事件监听器
    hoverElement.addEventListener('mouseout', function () {
        // 当鼠标移出时，恢复元素的背景颜色
        this.style.backgroundColor = 'lightblue';
    });

    // 为输入框添加键盘按下事件监听器
    inputField.addEventListener('keydown', function (event) {
        // 当按下键盘按键时，输出按下的按键代码
        console.log('按下的按键代码是：' + event.keyCode);
    });

    // 为表单添加提交事件监听器
    myForm.addEventListener('submit', function (event) {
        // 阻止表单的默认提交行为
        event.preventDefault();
        // 获取表单中的用户名和密码
        const username = this.elements.username.value;
        const password = this.elements.password.value;
        // 输出用户名和密码
        console.log('用户名：' + username + '，密码：' + password);
    });
</script>

</body>

posted on 2025-03-10 08:36 刘晋宇阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

Yunyuzuiluo