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技术站

7个JS基础知识总结

7个JS基础知识总结

1. 数据类型和变量

2. 函数

3. 条件语句

4. 循环语句

5. 数组

6. 对象

7. DOM 操作

相关文章