JavaScript学习笔记（3.0）

最新推荐文章于 2024-10-01 20:12:28 发布
最新推荐文章于 2024-10-01 20:12:28 发布
阅读量457 收藏 1
点赞数 2
文章标签： javascript 学习 前端 html5 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mez_Blog/article/details/129459507
版权
文章详细介绍了JavaScript中的数组和对象的区别及使用，包括数组的遍历方法、对象的属性访问以及如何识别数组。此外，还讨论了JavaScript的变量提升（Hoisting）现象以及严格模式（usestrict）的作用，强调了在严格模式下避免错误和提高代码安全性的特点。
摘要由CSDN通过智能技术生成

数组是一种特殊类型的对象。在JavaScript中对数组使用typeof运算符会返回“object”。

但是，JavaScript数组最好以数组来描述。

数组使用数字来访问其“元素”。比如person[0]访问person数组中的第一个元素。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象</h1>

<p>JavaScript 使用名称来访问对象属性。</p>

<p id="demo"></p>

<script>
var person = {firstName:"Bill", lastName:"Gates", age:19};
document.getElementById("demo").innerHTML = person["firstName"];
</script>

</body>
</html>

同样也可以用这种方式进行修改对象中的属性

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象</h1>

<p>JavaScript 使用名称来访问对象属性。</p>

<p id="demo"></p>

<script>
var person = {firstName:"Bill", lastName:"Gates", age:19};
person["firstName"]="Tom"
document.getElementById("demo").innerHTML = person["firstName"];
</script>

</body>
</html>

遍历数组元素

比较常用的方法就是for循环

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

还有一种方法就是foreach()函数

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>Array.forEach() 为每个数组元素调用函数。</p>

<p>Internet Explorer 8 以及更早的版本不支持 Array.forEach()。</p>

<p id="demo"></p>

<script>
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

数组和对象的区别

在JS中，数组使用数字索引；对象使用命名索引。

数组是特殊类型的对象，具有数字索引。

那么什么时候使用数组，什么时候使用对象？

①js不支持关联数组

②如果希望元素名为字符串（文本）则应该使用对象。

③如果希望元素名为数字则应该使用数组

如何识别数组

常见的问题是：我如何知道某个变量是否是数组？

问题在于JS运算符typeof返回"object"

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>typeof 运算符在数组上使用时返回 object：</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

还可以用ECMAscript 5定义的新方法Array.isArray():

Array.isArray(fruits);     // 返回 true

假如对象由给定的构造器创建，则可以用instanceof运算符看返回的结果是否为true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits instanceof Array     // 返回 true

JavaScript Hoisting

提升（Hoising）是JavaScript将声明移至顶部的默认行为。

JavaScript声明会被提升

在JavaScript中，可以在使用变量之后对其进行声明。

换句话说，可以在声明变量之前使用它。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // 把 5 赋值给 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;           // 在这个元素中显示 x

var x; // Declare x
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // 声明 x
x = 5; // 把 5 赋值给 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;           // 在这个元素中显示 x
</script>

</body>
</html>

Hoisting是JavaScript将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）

注意：用let 或const声明的变量和常量不会被提升！

JavaScript初始化不会被提升

JavaScript只提升声明，而非初始化。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;       // 显示 x 和 y

</script>

</body>
</html>

这里的两个值会正常显示 

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5;  // 初始化 x

elem = document.getElementById("demo");      // 查找元素
elem.innerHTML = "x is " + x + " and y is " + y;  // 显示 x 和 y

var y = 7;  // Initialize y
</script>

</body>
</html>

这里的7就会显示未定义。

因为只有声明（var 7）而不是（=7）被提升到顶部。

由于hoisting，y在其使用前已经被声明，但是由于未对初始化进行提升，y的值仍然是未定义。如下所示：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // 初始化 x
var y;   // 声明 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;       // 显示 x 和 y

y = 7;   // Assign 7 to y

</script>

</body>
</html>

所以，我们需要在顶部声明变量！

hoisting（对很多开发者来说）是JavaScript的一种未知的或被忽视的行为。如果开发者不理解hoisting，程序也许会包含bug（错误）。为了避免bug，请始终在每个作用域的开头声明所有变量。这就是JavaScript解释代码的方式，请保持这个好习惯。严格模式中的JavaScript不允许在未被声明的情况下使用变量。

JavaScript严格模式

“use strict”；定义JavaScript代码应该以“严格模式”执行。

“use strict”不算一条语句，而是一段文字表达式，更早版本的JavaScript会忽略它。

“use strict”;的作用是指示JavaScript代码应该以“严格模式”执行。

在严格模式中，无法使用未声明的变量。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-11 10:10:06
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-11 10:59:53
 * @FilePath: \vscode\特殊.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    "use strict"
    x=3.14;
  </script>
</head>
<body>
  
</body>
</html>

 当我们加上声明，就不会报错

<script>
    "use strict"
    var x=3.14;
  </script>

 在函数中声明严格模式，拥有局部作用域（只有函数中的代码以严格模式执行）：

x = 3.14;       // 这不会引发错误
myFunction();

function  myFunction() {
	"use strict";
	 y = 3.14;   // 这会引发错误
}

那么为什么要使用严格模式呢？

严格模式使我们更容易编写“安全的”JavaScript。

严格模式把之前可接受的“坏语法”转变为真实的错误。

举例来说，在普通的JavaScript中，错打变量名会创建新的全局变量。在严格模式中，此举将抛出错误，这样就不可能意外创建全局变量。

在普通JavaScript中，如果向不可写属性赋值，开发者不会得到任何错误反馈。

在严格模式中，向不可写的、只能读取的、不存在的属性赋值，或者向不存在的变量或对象赋值，将抛出错误。

删除变量（或对象）是不允许的：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-11 10:10:06
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-11 11:08:56
 * @FilePath: \vscode\特殊.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    "use strict"
    var x=3.14;
    delete x;
  </script>
</head>
<body>
  
</body>
</html>

 重复函数名是不允许的：
 

"use strict";
function x(p1, p1) {};   // 这将引发错误

八进制数值文本是不允许的：
 

"use strict";
var x = 010;             // 这将引发错误

转义字符是不允许的：

"use strict";
var x = \010;            // 这将引发错误

写入只读属性是不允许的：

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 这将引发错误

写入获取的属性是不允许的：

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;            // 这将引发错误

删除不可删除的属性是不允许的：

"use strict";
delete Object.prototype; // 这将引发错误

with语句也是不允许的：

"use strict";
with (Math){x = cos(2)}; // 这将引发错误

不允许eval（）在其被调用的作用域中创建变量：

"use strict";
eval ("var x = 2");
alert (x);               // 这将引发错误

严格模式中不允许使用为未来预留的关键词。它们是：

implements
interface
let
package
private
protected
public
static
yield

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-11 10:10:06
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-11 11:16:12
 * @FilePath: \vscode\特殊.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    "use strict"
    var public=3.14;
    // delete x;
  </script>
</head>
<body>
  
</body>
</html>

 注意：use strict指令只能在脚本或函数的开头被识别。

this

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript <b>this</b> 关键词</h1>

<p>在本例中，<b>this</b> 代表 <b>person</b> 对象。</p>

<p>因为 person 对象“拥有” fullName 方法。</p>

<p id="demo"></p>

<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id     : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

this关键字指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this指的是所有者对象。

单独的情况下，this指的是全局对象。

在函数中，this指的是全局对象。

在函数中，严格模式下，this是undefined

在事件中，this指的是接收事件的元素

比如call（）和apply（）这样的方法可以将this引用到任何对象。

函数中的this（默认）

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript <b>this</b> 关键词</h1>

<p>在本例中，<b>this</b> 代表“拥有” myFunction 的对象：</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
x="123"
  return this.x;
}
</script>

</body>
</html>

这里的结果就是this.x的输出为123.

事件处理程序中的this

在HTML事件处理程序中，this值得是接收此事件的HTML元素：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript <b>this</b> 关键词</h1>

<button onclick="this.style.display='none'">单击来删除我！</button>

</body>
</html>

mez_Blog
关注
访问者模式
Phoegel的博客
01-14 267
文章目录访问者模式案例模式介绍代码改造模式应用总结参考资料 访问者模式 案例 张三所在公司欲为某高校开发一套奖励审批系统，该系统可以实现教师奖励和学生奖励的审批(Award Check)，如果教师发表论文数超过10篇或者学生论文超过2篇可以评选科研奖，如果教师教学反馈分大于等于90分或者学生平均成绩大于等于90分可以评选成绩优秀奖。该系统主要用于判断候选人集合中的教师或学生是否符合某种获奖要求。张三想了想就开始动手写起来了。 1.首先他定义了一个父类： // 父类，主要存放一些公共字段 public cla
vue 3.0学习笔记(从入门到精通)
10-07
Vue 3.0是Vue.js框架的最新版本，它带来了许多...总之，Vue 3.0学习涵盖了许多方面，从基础的模板语法到高级的响应式机制，以及组件开发和路由管理。通过深入理解这些知识点，你将能够熟练地运用Vue 3.0进行前端开发。
JavaScript 数组
u011868279的博客
04-23 106
JavaScript 数组 JavaScript 数组用于在单一变量中存储多个值。 实例 var cars = ["Saab", "Volvo", "BMW"]; 什么是数组？ 数组是一种特殊的变量，它能够一次存放一个以上的值。 如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的： var car1 = "Saab"; var car2 = "Volvo"; var car3 = "BMW"; 不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是
Scala基础语法小结(四)
qq_42786792的博客
11-01 272
1.样例类 样例类是一种特殊的类,它可以用来快速定义一个用于保存数据的类(类似于Java POJO类) 1.1定义样例类 语法: case class 样例类名([var/val] 成员变量名1:类型1, 成员变量名2:类型2, 成员变量名3:类型3) 如果要实现某个成员变量可以被修改,可以添加var 默认为val,可以省略 1.2定义一个样例类 需求: 定义一个Person样例类，包含姓...
定义Person类， 属性： 姓名 、年龄 方法： 显示Person对象属性信息的方法。定义一个数组，用于存储Person对象，可以存储5个Person对象。
热门推荐
oneaka的博客
10-10 1万+
package 第七题; import java.util.Scanner; public class 第七题 { // 7、定义Person类， // 属性： 姓名 、年龄 // 方法： 显示Person对象属性信息的方法。 // 定义一个数组，用于存储Person对象，可以存储5个Person对象。 // 对象的属性信息，通过键盘录入的方式进行赋值。 // 遍历数组，显示对象的属性信息。 public static void main(String[] args) { // TOD
JavaScript学习笔记
IamFernweh的博客
09-12 1871
java Script学习笔记
javaScript学习笔记【尚硅谷】
Mxs_503的博客
03-20 5061
javaScript学习笔记【尚硅谷】 这是我看尚硅谷前端大神超哥视频，所记录的笔记！
Vue3.0学习笔记
fmk1023的博客
02-14 885
Vue3.0学习笔记
linux学习笔记3.0
qq_42002028的博客
08-17 2462
ilinux学习笔记 Linux哲学思想 一切都是一个文件（包括硬件） **小型，单一用途的程序 ** **链接程序，共同完成复杂的任务 ** **避免令人困惑的用户界面 ** 配置数据存储在文本中 第一周linux基础入门 ps aux 1.查看当前终端设备 tty [19:30:06 root@RC ~]#tty /dev/pts/0 2.当前登录终端设备 who am i [19:41:59 root@RC ~]#who am i root pts/0 2020-0
Vue3.0学习笔记一
qq_39715380的博客
04-25 110
Vue3.0 学习和使用
Bootstrap3.0学习笔记之入门篇
09-22
Bootstrap3.0是该框架的一个重要版本，提供了一套完整的响应式布局、组件和插件，使开发者能够快速构建交互式的网页和应用。 Bootstrap的介绍： Bootstrap框架是由一个活跃的社区开发和维护的开源项目。它基于最新...
前端学习笔记 (JavaScript、NodeJs、MySql、Vue3.0、webpackV5, Git).zip
02-23
在前端开发领域，掌握JavaScript、Node.js、MySQL、Vue 3.0、webpack 5以及Git等技术是至关重要的。这些技术共同构建了现代Web应用的基础，并且在开发者社区中广泛应用。下面，我们将深入探讨这些知识点，以帮助你更...
Bootstrap3.0学习笔记之CSS相关补充
09-22
Bootstrap3.0是一款广泛使用的前端框架，其CSS部分在网页设计中扮演了重要角色。本文主要探讨了在Bootstrap3.0中与CSS...此外，Bootstrap3.0的组件和JavaScript插件将进一步增强功能，使前端开发变得更为便捷和强大。
如何搭建Vue脚手架
w6437286的博客
09-26 476
本文主要讲解如何搭建vue脚手架。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 694
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 208
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 104
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mez_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值