7个JS基础知识总结
JavaScript 是前端开发中最重要的语言之一，掌握基础知识对于成为一名优秀的前端开发工程师至关重要。下面总结了 7 个关键的 JS 基础知识点，帮助你深入了解这门语言。
1. 数据类型和变量
JS 中，变量可以存储不同类型的数据，包括字符串、数字、布尔值、数组、对象等等。其中，字符串需要使用单引号或双引号进行包裹，数字可以是整数或小数，布尔值只有 true 和 false 两种可能。数组和对象都是由一组数据构成，但是它们的存储方式不同。
示例代码：
// 定义字符串变量
var name = 'Emma';
// 定义数字变量
var age = 18;
// 定义布尔值变量
var isMale = true;
// 定义数组变量
var hobbies = ['reading', 'hiking', 'music'];
// 定义对象变量
var person = {
name: 'Emma',
age: 18,
isMale: true
};
2. 函数
函数是可重用的代码块，它们允许你封装可执行的代码，然后按需调用。函数有参数和返回值，参数是传递给函数的数据，返回值是函数执行后返回的值。函数的定义中包含函数名、参数列表和函数体，其中函数名是可选的。
示例代码：
// 定义一个带参数的函数
function greeting(name) {
return 'Hello ' + name + '!';
}
// 调用函数并输出结果
console.log(greeting('Emma')); // 输出 "Hello Emma!"
3. 条件语句
条件语句允许你根据条件执行不同的代码路径。常见的条件语句有 if 语句和 switch 语句。if 语句允许你根据条件执行不同的代码，而 switch 语句允许你基于不同的 case 条件执行不同的代码。
示例代码：
var isRaining = true;
// 使用 if 语句执行条件判断
if (isRaining) {
console.log('It\'s raining!');
} else {
console.log('It\'s not raining!');
}
// 使用 switch 语句执行条件判断
var day = 'Monday';
switch(day) {
case 'Monday':
console.log('Today is Monday');
break;
case 'Tuesday':
console.log('Today is Tuesday');
break;
default:
console.log('I don\'t know what day it is');
}
4. 循环语句
循环语句允许你重复执行代码块。常见的循环语句有 for 循环和 while 循环。for 循环适用于已知循环次数的情况，而 while 循环适用于未知循环次数的情况。
示例代码：
var i;
// 使用 for 循环重复执行代码块
for (i = 0; i < 10; i++) {
console.log(i);
}
// 使用 while 循环重复执行代码块
var count = 0;
while (count < 10) {
console.log(count);
count++;
}
5. 数组
数组是一组按照顺序排列的数据。可以使用索引访问数组中的所有元素。JS 中的数组可以包含不同类型的数据，但通常只包含一种类型。数组的长度是可变的。
示例代码：
// 创建一个数组
var myArray = [1, 2, 3, 'four', {a: 5}];
// 访问数组元素
console.log(myArray[0]); // 输出 1
console.log(myArray[3]); // 输出 'four'
// 修改数组元素
myArray[0] = 'one';
console.log(myArray[0]); // 输出 'one'
// 添加新元素
myArray.push('six');
console.log(myArray); // 输出 [ 'one', 2, 3, 'four', {a: 5}, 'six']
6. 对象
对象是一组键值对，每个键对应一个值。键是字符串，值可以是任何数据类型。对象可以嵌套在其他对象中。JS 中对象常用来表示复杂的数据结构。
示例代码：
// 创建一个对象
var myObj = {
'name': 'Emma',
'age': 18,
'hobbies': ['reading', 'hiking', 'music'],
'address': {
'street': '123 Main St',
'city': 'New York',
'state': 'NY'
}
};
// 访问对象属性
console.log(myObj.name); // 输出 'Emma'
console.log(myObj.hobbies[0]); // 输出 'reading'
console.log(myObj.address.city); // 输出 'New York'
// 修改对象属性
myObj.age = 19;
console.log(myObj.age); // 输出 19
// 添加新属性
myObj.gender = 'female';
console.log(myObj); // 输出 { name: 'Emma', age: 19, hobbies: [ 'reading', 'hiking', 'music' ], address: { street: '123 Main St', city: 'New York', state: 'NY' }, gender: 'female' }
7. DOM 操作
DOM（文档对象模型）是用于操作网页中的 HTML 和 CSS 的标准 API。使用 DOM API 可以动态地修改网页内容、样式和行为。DOM 由 HTML、CSS 和 JavaScript 三部分组成，可以使用 JS 访问网页上的所有元素。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>My Heading</h1>
<button id="my-button">Click me</button>
<script>
var heading = document.querySelector('h1');
heading.innerHTML = 'New Heading';
var button = document.querySelector('#my-button');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
上面的代码演示了如何使用 JS 修改一个网页的标题和添加一个点击事件的监听器。这些操作的核心是通过 DOM API 访问网页上的元素，然后修改它们的属性或者添加事件监听器。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：7个JS基础知识总结 - Python技术站
微信扫一扫 
支付宝扫一扫 