7个JS基础知识总结

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

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • 从URL中提取参数与将对象转换为URL查询参数的实现代码

    从URL中提取参数的实现代码 通过JavaScript代码解析URL获取参数是一种很常见的操作,我们可以通过以下操作来提取URL中的参数: 1.使用window.location.search获取查询字符串部分,该部分包含了所有请求参数。例如,我们可以使用以下代码来获取URL地址中的search字符串: let searchStr = window.loca…

    JavaScript 2023年6月11日
    00
  • JavaScript 定时器详情

    JavaScript 定时器详情 JavaScript 定时器是一种可以按照指定时间间隔循环执行代码的机制。它可以使得开发者对页面进行自动化控制,从而使得网站的交互更加丰富和动态。 JavaScript 定时器包括两种类型:setInterval() 和 setTimeout()。setInterval() 方法会按照指定的时间间隔重复执行一段代码,而 se…

    JavaScript 2023年6月11日
    00
  • 深入浅出JavaScript中base64编码原理

    深入浅出JavaScript中base64编码原理 什么是base64编码 Base64是一种用于将二进制数据转换成ASCII字符的编码方式。它使用64个字符表示64个不同的二进制数字,每个字符表示6个二进制位,因此每3个字节需要进行编码,得到4个字符。这种编码方式常用于电子邮件和HTTP协议传输数据,因为它可以处理非文本数据。 base64编码原理 在Ja…

    JavaScript 2023年5月20日
    00
  • jQuery表单验证插件formValidator(改进版)

    jQuery表单验证插件formValidator(改进版)攻略 一、简介 jQuery表单验证插件formValidator是一款实用的前端验证插件,可以方便地验证表单输入是否符合指定的规则,从而提高用户输入数据的准确度,避免非法数据被提交。经过改进的formValidator拓展了原版的功能,增加了新的验证规则,如密码强度验证、手机号码验证等,同时去除了…

    JavaScript 2023年6月10日
    00
  • 在html中添加script脚本的2种方法和注意事项

    在HTML中,我们可以通过添加<script>标签来添加JavaScript脚本。下面分别介绍两种添加<script>标签的方法以及需要注意的事项。 方法一:直接添加在HTML文件中 在HTML文件中,可以使用<script>标签来内联嵌入JavaScript代码。可以把脚本放在<body>标签或<hea…

    JavaScript 2023年5月27日
    00
  • javascript 进阶篇1 正则表达式,cookie管理,userData

    JavaScript 进阶篇1:正则表达式、Cookie 管理、UserData 1. 正则表达式 正则表达式在 JavaScript 开发中非常重要,是处理字符串的得力工具。以下是一些基本概念和正则表达式在 JavaScript 中的应用。 基本概念 匹配模式:正则表达式在搜索时所用的模式 字符串搜索:在文本中搜索匹配模式并返回匹配结果 模式修饰符:使用标…

    JavaScript 2023年6月11日
    00
  • JS数组中常用方法技巧学会进阶成为大佬

    JS数组中常用方法技巧学会进阶成为大佬 JavaScript中的数组(Array)是一种基本数据结构,用于在一个变量中存储多个值。掌握JavaScript中的数组操作方法是成为JS大佬的必备技能之一。本篇攻略将介绍JS中常用的数组方法和技巧。 数组方法 splice() splice()方法可以从数组中添加或删除元素,并返回被删除的元素。该方法有三个参数:第…

    JavaScript 2023年5月18日
    00
  • JavaScript高级程序设计 XML、Ajax 学习笔记

    JavaScript高级程序设计 XML、Ajax 学习笔记 简介 本学习笔记主要介绍了JavaScript高级程序设计中XML和Ajax的相关内容,通过学习本笔记,读者将掌握XML的基本语法和解析以及Ajax的异步通信和请求,从而实现Web应用程序的高效交互。 XML 基本语法 XML是一种自定义标记语言,它允许我们定义自己的标记来描述某个对象的属性。下面…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部