JavaScript的基础语法学习

news2025/1/16 16:55:04

文章目录

  • 一、JavaScript let 和 const
  • 二、JavaScript JSON
  • 三、javascript:void(0) 含义
  • 四、JavaScript 异步编程
  • 总结

一、JavaScript let 和 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

  • 全局变量

在函数外声明的变量作用域是全局的：

<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
		"我可以显示 " + carName;
}
</script>

在这里插入图片描述全局变量在 JavaScript 程序的任何地方都可以访问。

  • 局部变量

在函数内声明的变量作用域是局部的（函数内）：

<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是：" +  typeof carName;
function myFunction() 
{
    var carName = "Volvo";
}
</script>

在这里插入图片描述函数内使用 var 声明的变量只能在函数内访问，如果不使用 var 则是全局变量。

  • JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

在这里插入图片描述

  • 重新定义变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10
  • HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象:

<script>
var carName = "Volvo";

// 可以使用 window.carName 访问变量
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

在这里插入图片描述

使用 let 关键字声明的全局作用域变量不属于 window 对象:

<script>
let carName = "Volvo";

// 不能使用 window.carName 访问变量
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>

在这里插入图片描述
在这里插入图片描述

  • 变量提升

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明（JavaScript 变量提升）。

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

  • const 关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

<script>
try {
    const PI = 3.141592653589793;
    PI = 3.14;
}
catch (err) {
    document.getElementById("demo").innerHTML = err;
}

在这里插入图片描述const定义常量与使用let 定义的变量相似：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

在这里插入图片描述

  • 并非真正的常量

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：


// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

但是我们不能对常量对象重新赋值：

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

以下实例修改常量数组：


// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
 
// 修改元素
cars[0] = "Toyota";
 
// 添加元素
cars.push("Audi");

二、JavaScript JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

  • 什么是 JSON?

    JSON 英文全称 JavaScript Object Notation
    JSON 是一种轻量级的数据交换格式。
    JSON是独立的语言 *
    JSON 易于理解。

  • JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。

  • JSON 实例

以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:


{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}
  • JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

  • JSON 语法规则

    数据为 键/值 对。
    数据由逗号分隔。
    大括号保存对象
    方括号保存数组

  • JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"
  • JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对：

{"name":"Runoob", "url":"www.runoob.com"}
  • JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：


"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

在以上实例中，对象 “sites” 是一个数组，包含了三个对象。

每个对象为站点的信息（网站名和网站地址）。

  • JSON 字符串转换为 JavaScript 对象、

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：


var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

在这里插入图片描述在这里插入图片描述

三、javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

在这里插入图片描述下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。


<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

以下实例中，在用户点击链接后显示警告信息：

<body>
	
<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
	
</body>

在这里插入图片描述以下实例中参数 a 将返回 undefined

<script type="text/javascript">
function getValue(){
   var a,b,c;
   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
</script>
</head>
<body>
	
<p>点击以下按钮查看结果：</p>
<form>
<input type="button" value="点我" onclick="getValue();" />

在这里插入图片描述

  • href="#"与href="javascript:void(0)"的区别

#包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。


<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

四、JavaScript 异步编程

异步的概念
简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

在这里插入图片描述

  • 什么时候用异步编程

在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

  • 回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”，在命令行输出 “RUNOOB!”。

当然，JavaScript 语法十分友好，我们不必单独定义一个函数 print ，我们常常将上面的程序写成：

setTimeout(function () {
    document.getElementById("demo1").innerHTML="RUNOOB-1!";
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";

结果：

RUNOOB-1!
RUNOOB-2!

- 异步 AJAX

除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程
XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调：

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库，也可以更加优雅的使用异步 AJAX：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

在这里插入图片描述
学习来自“https://www.runoob.com/js”

总结

天空带了一层面纱，树上的鸟儿叽叽喳喳，路上的行人都忙着gogo，一不小心就嘎嘎.

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

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

相关文章

React Native 组件基础

React Native 组件基础

基于组件的架构模式&#xff0c;或许是现在重展示、重交互应用的最好选择 拆组件要准守一个原则&#xff0c;单一责任原则。 这也是 React 官方倡导的原则&#xff0c;这个原则的意思是每个组件都应该只有一个单一的功能&#xff0c;并且这个组件和其他组件没有相互依赖。当然…
阅读更多...
Zookeeper数据模型与Watch机制

Zookeeper数据模型与Watch机制

数据模型 ZooKeeper 中的数据模型是一种树形结构&#xff0c;非常像电脑中的文件系统&#xff0c;有一个根文件夹&#xff0c;下面还有很多子文件夹。ZooKeeper 的数据模型也具有一个固定的根节点&#xff08;/&#xff09;&#xff0c;我们可以在根节点下创建子节点&#xff0…
阅读更多...
华为 WLAN基本配置

华为 WLAN基本配置

华为 无线基本配置 一、前言二、项目拓扑三、项目需求四、配置思路五、配置步骤1. 创建vlan&#xff0c;配置vlan接口ip2. trunk放行对应流量&#xff0c;保证链路可达3.开启DHCP服务&#xff0c;配置DHCP地址池&#xff0c;为AP和终端设备分配IP地址4.WLAN基本配置 六、结语 一…
阅读更多...
一文解读类的加载过程（类的生命周期）

一文解读类的加载过程（类的生命周期）

目录 概述总览 过程一&#xff1a;Loading&#xff08;加载&#xff09;阶段 加载完成的操作 二进制流的获取方式 类模型与Class实例的位置 数组类的加载 过程二&#xff1a;Linking&#xff08;链接&#xff09;阶段 环节1&#xff1a;链接阶段之Verification&#xff…
阅读更多...
第一次的医美体验，决定了客户的回头率

第一次的医美体验，决定了客户的回头率

爱美之心&#xff0c;人皆有之。随着人们求美需求的增加&#xff0c;医美消费成为了越来越多人的选择&#xff0c;而这种需求往往不是一次性的。 根据艾媒咨询于2021年发布的一份医美报告显示&#xff0c;30.6%的医美消费受访者只体验了1家医美机构&#xff0c;有78.1%的受访者…
阅读更多...
代码随想录算法训练营第六十天 | 84. 柱状图中最大的矩形

代码随想录算法训练营第六十天 | 84. 柱状图中最大的矩形

84. 柱状图中最大的矩形 本题与接雨水问题的区别是记录每个柱子左边第一个小于该柱子的下标&#xff0c;而不是左边第一个小于该柱子的高度。 因为本题是要找每个柱子左右两边第一个小于该柱子的柱子&#xff0c;所以从栈头&#xff08;元素从栈头弹出&#xff09;到栈底的顺…
阅读更多...
恢复误删文件

恢复误删文件

误删恢复 用losf恢复进程存在的文件 注意此处要后台进程存在 创建一个文件&#xff0c;用tail命令&#xff0c;模拟文件一直被监听 打开另外一个终端&#xff0c;删除这个文件 用lsof命令查看被删除的文件&#xff0c;可以发现文件虽然被删除&#xff0c;但是进程依然在 然后…
阅读更多...
Make-A-Video（造啊视频）——无需文字-视频数据的文字转视频（文生视频）生成方法

Make-A-Video（造啊视频）——无需文字-视频数据的文字转视频（文生视频）生成方法

© 2022 Uriel Singer et al (Meta AI) © 2023 Conmajia 本文基于论文 Make-A-Video: Text-to-Video Generation without Text-Video Data&#xff08;2209.14792&#xff09;。 本文已获论文第一作者 Uriel Singer 授权。 本视频由这句话生成&#xff1a;穿着超人装…
阅读更多...
javaweb学生在线考试系统dzkf10程序

javaweb学生在线考试系统dzkf10程序

打分&#xff09;、系统管理&#xff08;数据备份&#xff09;等功能操作。 以学生的身份在登录页面输入账号和密码&#xff0c;经过数据库身份验证&#xff0c;验证成功后登录系统主页&#xff0c;可以使用个人资料管理、试卷查看、在线考试、在线答疑、个人考试成绩查询等功能…
阅读更多...
微任务宏任务详解题目

微任务宏任务详解题目

注意点&#xff1a;我们的异步任务1和异步任务2并不是直接放在任务队列里面&#xff0c;而是先挂载到我们相应的线程下面&#xff01;&#xff01;&#xff01; 假如说我们的宏任务执行得很快&#xff0c;100ms就执行完了&#xff0c;那么我们就会去轮询我们的任务队列&#x…
阅读更多...
C++linux高并发服务器项目实践 day3

C++linux高并发服务器项目实践 day3

Clinux高并发服务器项目实践 day3 文件IO标准C库IO函数与LinuxIO函数虚拟地址空间文件描述符Linux系统IO函数open与close mode:八进制的数&#xff0c;表示用户对创建出的新的文件的操作权限 最终的权限是&#xff1a;mode & ~umask 0777 r(读) w(写) x(可执行)都有这样的权…
阅读更多...
2021遥感应用组二等奖：近20年黄河流域植被动态与生态环境效应

2021遥感应用组二等奖：近20年黄河流域植被动态与生态环境效应

作品介绍 1 研究目的 基于MODIS NDVI植被指数、土地利用数据和气象数据集&#xff0c;辅以趋势分析、偏相关分析、马尔科夫转移矩阵变化分析、多元回归分析等方法&#xff0c;全面分析黄河流域2001-2020年植被时空变化特征&#xff0c;并通过构建统计模型方式&#xff0c;定量…
阅读更多...
【Seata】Seata配置上传Nacos

【Seata】Seata配置上传Nacos

前言 在seata1.4.2版本之后&#xff0c;Seata可以通过dataId配置seata的所有配置项&#xff0c;也就是说&#xff0c;我们可以将之前上传的所有配置项整合到一个配置文件中&#xff0c;接下来直接演示该怎样操作。 如果你不清楚seata的config.txt文件在哪里下载或者其它的一些…
阅读更多...
c++11 标准模板（STL）（std::queue）（五）

c++11 标准模板（STL）（std::queue）（五）

定义于头文件 <queue> template< class T, class Container std::deque<T> > class queue; std::queue 类是容器适配器&#xff0c;它给予程序员队列的功能——尤其是 FIFO &#xff08;先进先出&#xff09;数据结构。 类模板表现为底层容器的包…
阅读更多...
kali相关操作

kali相关操作

目录 kali换源&#xff1a; 由于没有公钥&#xff0c;无法验证下列签名&#xff1a; NO_PUBKEY 871920D1991BC93C 安装中文 设置中文输入法 kali换源&#xff1a; sudo su 备份相关配置 cp /etc/apt/sources.list /etc/apt/sources.list.bak vim /etc/apt/sources.list替…
阅读更多...
搭建SFTP服务安全共享文件，实现在外远程访问「内网穿透」

搭建SFTP服务安全共享文件，实现在外远程访问「内网穿透」

文章目录 1.前言2.本地SFTP服务器搭建2.1.SFTP软件的下载和安装2.2.配置SFTP站点2.3.Cpolar下载和安装 3.SFTP服务器的发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的网络发达&#xff0c;个人电脑容量快速上升&#xff0c;想要保存的数据资料…
阅读更多...
最近，我们做了一次“实景”容灾演练

最近，我们做了一次“实景”容灾演练

保障头部新闻客户端的业务连续性&#xff0c;阿里云帮助客户在真实场景下完成容灾演练。 云计算和新闻 APP&#xff0c;能有什么关系&#xff1f; 2021 年&#xff0c;传媒行业某头部媒体的新闻客户端进行了全新改版并升级上线&#xff0c;以 “内容技术”的融合驱动效率提升&a…
阅读更多...
Vue2-黑马（十）

Vue2-黑马（十）

目录&#xff1a; &#xff08;1&#xff09;vuex-actions &#xff08;2&#xff09;vuex-调用actions &#xff08;3&#xff09;vue2实战-项目搭建 &#xff08;1&#xff09;vuex-actions 有这么一个需求&#xff0c;绿色的组件从服务器获取数据放入store&#xff0c;主…
阅读更多...
CHAPTER 2: 《BACK-OF-THE-ENVELOPE ESTIMATION》 第2章 《初略的估计》

CHAPTER 2: 《BACK-OF-THE-ENVELOPE ESTIMATION》 第2章 《初略的估计》

CHAPTER 2: BACK-OF-THE-ENVELOPE ESTIMATION 在系统设计面试中&#xff0c;有时您会被要求估计系统容量或使用粗略估计的性能需求。根据杰夫迪恩的说法&#xff0c;谷歌高级研究员&#xff0c;“粗略的计算是你使用结合思想实验和常见的性能数字&#xff0c;以获得良好的感觉…
阅读更多...
武器目标分配问题研究进展: 模型、算法与应用

武器目标分配问题研究进展: 模型、算法与应用

源自&#xff1a;系统公正与电子技术 作者&#xff1a;李梦杰 常雪凝 石建迈 陈超 黄金才 刘忠 摘 要 武器目标分配问题是指挥控制与任务规划领域的关键难点之一, 也是军事运筹领域的基础研究课题。经过多年研究, 武器目标分配问题在陆海空天电等领域都得到了广泛研究,…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023