JavaScript初识及基本语法详解

        JavaScript是一种广泛应用于Web开发的轻量级、解释型、面向对象的脚本语言，它支持事件驱动、函数式以及基于原型的编程风格。JavaScript不仅可以用于客户端（在用户的浏览器中运行），也可以在服务端（如Node.js环境）运行。以下是JavaScript初识及基本语法的详解：

1.标识符和关键字

  • 标识符：

在JavaScript中，标识符是用来给变量、函数、对象等命名的字符串，必须以字母、下划线_或美元符号$开头，后面可以跟任意数量的字母、数字、下划线或美元符号。例如：myVariable、firstName、_temp、$scope。

  • 关键字：

JavaScript保留了一些具有特殊意义的词汇，如var、function、if、else、for、while等，这些词汇不能用作标识符。

2. 变量

  • 声明变量：

使用var、let或const关键字声明变量。var在ES6之前是唯一的方式，但具有变量提升和作用域的限制；let和const是在ES6中新增的，let用于声明块级作用域的变量，const用于声明不可修改的常量。

   var x = 10; // 使用var声明变量let y = "Hello"; // 使用let声明变量const z = true; // 使用const声明常量

3. 数据类型

  • 原始类型：

包括Number、String、Boolean、Null、Undefined以及ES6新增的Symbol类型。

  • 复杂类型：

主要指Object类型，包括数组、函数、正则表达式等，都属于对象。

4. 运算符与表达式

  • 算术运算符：

如加减乘除、取余、递增递减等。

  • 比较运算符：

如等于（==、===）、不等于（!=、!==）、大于小于等。

  • 逻辑运算符：

如&&（逻辑与）、||（逻辑或）、!（逻辑非）。

  • 赋值运算符：

如简单赋值=, 复合赋值如+=、-=、*=等。

5. 控制结构

  • 条件语句：

如if...else、switch...case。

  • 循环语句：

如for、while、do...while、for...of、for...in。

6. 函数

  • 声明函数：

可以使用function关键字定义命名函数或匿名函数。

   function add(a, b) {return a + b;}const sum = function(a, b) {return a + b;};

  • 箭头函数：

ES6引入的简洁语法，没有自己的this绑定，简化函数定义。

   const arrowAdd = (a, b) => a + b;

7. 对象与JSON

  • 对象字面量：

使用花括号{}创建对象，键值对之间用逗号隔开。

   const person = {name: "Alice",age: 30,sayHello: function() {console.log("Hello!");}};

  • JSON：

JavaScript Object Notation，是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。JavaScript可以直接通过JSON.parse()解析JSON字符串为对象，通过JSON.stringify()将对象转换为JSON字符串。

8. 异步编程

  • 回调函数：

早期JavaScript处理异步任务的主要方式。

  • Promise：

ES6引入的原生异步编程解决方案，用于解决回调地狱的问题。

  • async/await：

基于Promise的糖语法，使得异步代码看起来像是同步代码。

9. 事件处理

JavaScript能够响应浏览器的各种事件，如点击、滚动、加载等，通过addEventListener和removeEventListener方法注册和移除事件处理器。

10. 文档对象模型（DOM）

虽然不属于JavaScript语法的一部分，但在浏览器环境下JavaScript常用于操作DOM树，对网页内容进行动态修改。

11. 类（Class）

从ES6开始，JavaScript引入了类（Class）的概念，使面向对象编程更加直观和清晰：

class Person {constructor(name, age) {this.name = name;this.age = age;}introduce() {return `${this.name} is ${this.age} years old.`;}
}const alice = new Person("Alice", 30);
console.log(alice.introduce()); // 输出："Alice is 30 years old."

12. 模块系统（Module）

ES6同样引入了模块系统，使得代码组织和复用更为方便。主要有两种导入导出方式：

// 导出
export const PI = 3.14;// 导出默认值
export default function add(x, y) {return x + y;
}// 导入
import { PI } from './math';
console.log(PI);// 导入默认值
import add from './add';
console.log(add(2, 3));

13. 解构赋值（Destructuring Assignment）

解构赋值允许从数组或对象中提取值并赋予新的变量名：

// 数组解构
const [a, , c] = [1, 2, 3];
console.log(a); // 1
console.log(c); // 3// 对象解构
const person = { name: "Alice", age: 30 };
const { name, age } = person;
console.log(name); // "Alice"
console.log(age); // 30

14. 扩展运算符（Spread Operator）

扩展运算符(...)可以展开数组或对象，用于合并数组、复制数组、合并对象等场景：

// 合并数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]// 复制数组
const copiedArr = [...arr1];// 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

15. 正则表达式（Regular Expression）

JavaScript支持强大的正则表达式来进行文本匹配、查找、替换等操作：

const text = "Hello, world!";
const pattern = /world/gi;// 匹配
const matches = text.match(pattern); // ["world"]// 替换
const replacedText = text.replace(pattern, "JavaScript"); // "Hello, JavaScript!"

16. Promise

Promise是JavaScript中处理异步操作的一种方式，它提供了一种更加优雅的处理异步操作的方法，避免了回调函数嵌套的问题。

const promise = new Promise((resolve, reject) => {// 异步操作setTimeout(() => {const random = Math.random();if (random > 0.5) {resolve(random);} else {reject(new Error("Failed"));}}, 1000);
});promise.then(result => {console.log("Success:", result);
}).catch(error => {console.error("Error:", error.message);
});

17. Async/Await

Async/Await是基于Promise的另一种更加简洁和直观的处理异步操作的方式，它使得异步代码看起来更像是同步代码。

async function asyncFunc() {try {const result = await promise;console.log("Success:", result);} catch (error) {console.error("Error:", error.message);}
}asyncFunc();

18. Generator

Generator是ES6中引入的一种新的迭代器接口，它允许函数暂停执行并返回一个迭代器，以便在后续再次恢复执行。

function* generatorFunc() {console.log("Start");yield 1;console.log("Resume");yield 2;console.log("End");
}const iterator = generatorFunc();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

19. Proxy

Proxy是ES6中提供的一种机制，它允许在对象的原生操作之前拦截并自定义行为。它可以用于实现数据绑定、依赖注入、数据校验等需求。

const obj = {name: "John",age: 30
};const proxyObj = new Proxy(obj, {set(target, key, value) {console.log(`Setting ${key} to ${value}`);target[key] = value;return true;},get(target, key) {console.log(`Getting ${key}`);return target[key];}
});proxyObj.name = "Alice"; // Setting name to Alice
console.log(proxyObj.name); // Getting name

20. Reflect

Reflect是一个独立的对象，它提供了若干操作对象属性的方法，这些方法与Proxy中使用的操作方法相对应。Reflect对象的出现使得操作对象属性更加灵活和统一。

const obj = {name: "John",age: 30
};Reflect.set(obj, "name", "Alice");
console.log(Reflect.get(obj, "name")); // Alice

以上就是JavaScript中的一些常用特性，它们使得JavaScript更加灵活和强大。当然，JavaScript语言的特性远不止这些，开发者可以根据自己的需求和场景选择合适的技术和工具进行开发。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/762828.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

unity学习（63）——预制体

unity学习（63）——预制体

1.运行发现预制体初始化的时候存在问题 这里有许多技巧，需要细看。 2.预制体在MapHandler.cs的定义如下 3.把MapHandler绑到相机上，在相机的属性栏中找到赋值部分。 4.size设置成2，然后把模型拖拽到1号索引位置上 5.运行之后预制体确实成功实…
阅读更多...
【实例】React 状态管理库 MobX Redux 入门及对比

【实例】React 状态管理库 MobX Redux 入门及对比

上一篇：【实例】React 组件传值方法: Props、回调函数、Context、路由传参 MobX MobX 是一个状态管理库，它提供了一种响应式的数据流方案，使得状态的变化能够自动地反映到相关的组件中。 MobX 的核心理念是可观察的状态（Observa…
阅读更多...
思科无线控制器配置学习

思科无线控制器配置学习

文章目录 简单拓扑WLC配置 简单拓扑 WLC配置 WLC#show running-config Building configuration...Current configuration : 11943 bytes ! ! Last configuration change at 16:22:44 UTC Thu Mar 14 2024 by admin ! version 17.9 service timestamps debug datetime msec se…
阅读更多...
鸿蒙一次开发，多端部署（七）响应式布局

鸿蒙一次开发，多端部署（七）响应式布局

自适应布局可以保证窗口尺寸在一定范围内变化时，页面的显示是正常的。但是将窗口尺寸变化较大时（如窗口宽度从400vp变化为1000vp），仅仅依靠自适应布局可能出现图片异常放大或页面内容稀疏、留白过多等问题，此时就需要借…
阅读更多...
农业四情监测系统的工作原理

农业四情监测系统的工作原理

农业四情监测系统的工作原理【TH-Q1】农业四情监测系统是一种应用现代科技手段，以实现对农田环境信息的实时监测和数据采集的系统。这一系统通过对农田的土壤、气象、病虫害以及作物生长状况等四个方面的实时监测，帮助农民和农业管理者更好地了解和掌握农…
阅读更多...
网络: 传输层

网络: 传输层

功能: 将数据从发送到传给接收端 UDP 无连接状态: 知道对端的IP和端口号就直接进行传输, 不需要建立连接不可靠: 没有确认机制, 没有重传机制. 出错不会管面向数据包: 不能够灵活的控制读写数据的次数和数量 发送速度快: 立即发送 报文结构 TCP 面向连接可靠 校验和序列号(按…
阅读更多...
测试框架到底是什么，如何定义？

测试框架到底是什么，如何定义？

测试框架的关键组件是什么？ 测试执行引擎：协调测试的运行、管理序列和报告结果。 测试脚本存储库：存储将要执行的实际测试用例或脚本。 测试数据：测试执行所需的输入数据，可以是静态的、动态的或动态生成的。 存根和…
阅读更多...
十四届蓝桥杯 冶炼金属（二分 / 公式）

十四届蓝桥杯 冶炼金属（二分 / 公式）

二分代码1&#xff1a; #include<iostream> #include<cstdio> #include<cmath> using namespace std;int get(int a, int b){int l1;r1e91;while(l<r){int mid lr >>1;if(a / mid < b){r mid;}else l mid 1;}return l; } int main() {int n…
阅读更多...
【机器学习】基于机器学习的分类算法对比实验

【机器学习】基于机器学习的分类算法对比实验

摘要 基于机器学习的分类算法对比实验 本论文旨在对常见的分类算法进行综合比较和评估&#xff0c;并探索它们在机器学习分类领域的应用。实验结果显示&#xff0c;随机森林模型在CIFAR-10数据集上的精确度为0.4654&#xff0c;CatBoost模型为0.4916&#xff0c;XGBoost模型为…
阅读更多...
在Hive中使用Python编写的UDF函数

在Hive中使用Python编写的UDF函数

在Hive中使用Python编写的UDF函数&#xff0c;需要通过Hive的brickhouse库来实现。brickhouse库提供了一种将Python UDF函数与Hive集成的方法。以下是一个简单的示例&#xff0c;演示如何在Hive中使用Python编写的UDF函数transform&#xff1a; 首先&#xff0c;您需要安装bri…
阅读更多...
Obsidian+PicGo+Gitee搭建免费图床

Obsidian+PicGo+Gitee搭建免费图床

之前使用PicGoGitee配合Typora&#xff0c;后来因为换电脑Typora管理笔记不方便&#xff0c;换到Obsidian笔记&#xff0c;此处记录重新搭建图床的坑与经验。 主要参考# picGogitee搭建Obsidian图床&#xff0c;实现高效写作&#xff01; 1 下载安装PicGo 下载链接https://mo…
阅读更多...
u盘表格不小心删除怎么恢复数据,u盘误删的表格怎么找回

u盘表格不小心删除怎么恢复数据,u盘误删的表格怎么找回

u盘表格不小心删除怎么恢复数据？当我们使用U盘存储重要数据时，不小心删除文件或者整个表格可能会导致数据的丢失。这种情况下，我们需要采取一些措施来恢复被删除的数据。u盘误删的表格怎么找回？幸运的是，有一些方法可以帮助我们恢复U盘中的数据，即使它们被删除了。在本文…
阅读更多...
5.78 BCC工具之sslsniff.py解读

5.78 BCC工具之sslsniff.py解读

一，工具简介 sslsniff工具可以用来追踪OpenSSL、GnuTLS和NSS的写入/发送和读取/接收函数。传递给这些函数的数据会以纯文本的形式打印出来。也就是用于捕获和分析 SSL/TLS 加密的网络流量。 二，代码示例 #!/usr/bin/env pythonfrom __future__ import print_function from…
阅读更多...
球面数据的几何深度学习--球形 CNN

球面数据的几何深度学习--球形 CNN

目录 一、说明二、球形 CNN概述三、球面数据的对称性四、标准&#xff08;平面&#xff09;CNN的局限性五、卷积并发症六、球面卷积七、球面卷积是不够的 一、说明 球面数据的几何深度学习–球形 CNN。通过对物理世界的平移对称性进行编码&#xff0c;卷积神经网络 &#xff…
阅读更多...
AI 工具能检测到医生未发现的癌症征兆

AI 工具能检测到医生未发现的癌症征兆

一项 AI 工具已证明其能够侦测到人类放射科医师遗漏的癌症迹象。 这款名为 Mia 的 AI 工具在英国与 NHS 临床医生合作进行试点&#xff0c;分析了逾 10,000 名女性的乳房 X 光检查结果。 虽然大部分参与者没有癌症&#xff0c;但 AI 成功地标出了所有表现出乳腺癌症状的病例&…
阅读更多...
备战2024年中学生古诗文大会（初中组）：单选题真题和独家解析

备战2024年中学生古诗文大会（初中组）：单选题真题和独家解析

今天我们继续来做中学生古诗文大会&#xff08;初中组&#xff09;——简称初中生古诗文大会的一些真题&#xff0c;让大家了解初中生古诗文大会的考察内容和形式&#xff0c;并且提供了我独家的题目解析和答案&#xff0c;供初中的同学们学习和参考。 有一些朋友问中学生古诗…
阅读更多...
软考机考新模式，有什么影响？

软考机考新模式，有什么影响？

关于软考考试改机考的影响&#xff0c;初步预测可能会有以下几个影响&#xff1a; 1、需要掌握的基础知识要求更高 机考可能导致每个人的题目不同&#xff0c;因此需要更扎实地掌握基础知识&#xff0c;认真备考每个知识点&#xff0c;核心分值可能会全部打散&#xff0c;不能…
阅读更多...
富格林：虚假亏损正规伎俩打击防范

富格林：虚假亏损正规伎俩打击防范

富格林指出&#xff0c;在投资市场上&#xff0c;投资者进行任何交易都是以盈利为出发点的&#xff0c;现货黄金交易也不例外。但在投资过程中除了要提高做单收益之外&#xff0c;还得谨防虚假亏损伎俩&#xff0c;避免落入虚假陷阱中导致受害亏损&#xff0c;这样就得不偿失了…
阅读更多...
2024-3-21-Qtday2作业

2024-3-21-Qtday2作业

要求&#xff1a; 自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面。&#xff08;不要使用课堂上的图片和代码&#xff0c;自己发挥&#xff0c;有利于后面项目的完成&#xff09; 要求&#xff1a; 1. 需要使用Ui界面文件进行界面设计 2. ui界面上的组件相关…
阅读更多...
外腔激光器（ECL）市场发展空间大 外腔半导体激光器（ECDL）是主要产品类型

外腔激光器（ECL）市场发展空间大 外腔半导体激光器（ECDL）是主要产品类型

外腔激光器&#xff08;ECL&#xff09;市场发展空间大 外腔半导体激光器&#xff08;ECDL&#xff09;是主要产品类型 外腔激光器&#xff08;ECL&#xff09;&#xff0c;是一种利用外腔进行光反馈的激光器。根据新思界产业研究中心发布的《》2024-2029年中国外腔激光器&…
阅读更多...
最新文章

Copyright @ 2022~2023