JavaScript学习笔记（3.0）

news2024/11/26 4:35:37

数组是一种特殊类型的对象。在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>

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

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

相关文章

【JavaEE进阶】——第一节.Maven国内源配置

【JavaEE进阶】——第一节.Maven国内源配置

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 操作步骤 1.打开项目配置界面&#xff08;当前项目配置&#xff09; 2.检查并配置国内源 3.再次打开项目配置界面&#xff08;新项目配置&#xff09; 4…
阅读更多...
Android RecyclerView的notify方法和动画的刷新详解

Android RecyclerView的notify方法和动画的刷新详解

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 前言&#xff1a; 本篇讲解了RecyclerView关于通知列表刷新的常用的notify方法。和Recy…
阅读更多...
综合练习7 摄氏度转华氏温度（“\t“的使用，循环语句）

综合练习7 摄氏度转华氏温度（“\t“的使用，循环语句）

综合练习7 摄氏度转华氏温度 使用do…while循环&#xff0c;在控制台输入摄氏温度与华氏温度的对照表。 对照表从摄氏温度-30℃到50℃&#xff0c;每行间隔10℃&#xff0c;运行如下&#xff1a; 摄氏温度&#xff1a;-30℃ 华氏温度&#xff1a;-22.0℉ 摄氏温度&#xff1a;…
阅读更多...
【专项训练】动态规划-3

【专项训练】动态规划-3

动态规划：状态转移方程、找重复性和最优子结构 分治 + 记忆化搜索，可以过度到动态规划（动态递推） function DP():# DP状态定义# 需要经验，需把现实问题定义为一个数组，一维、二维、三维……dp =[][] # 二维情况for i = 0...M:
阅读更多...
自动化测试的定位及一些思考

自动化测试的定位及一些思考

大家对自动化的理解&#xff0c;首先是想到Web UI自动化&#xff0c;这就为什么我一说自动化&#xff0c;公司一般就会有很多人反对&#xff0c;因为自动化的成本实在太高了&#xff0c;其实自动化是分为三个层面的&#xff08;UI层自动化、接口自动化、单元测试&#xff09;&a…
阅读更多...
井字棋--课后程序(Python程序开发案例教程-黑马程序员编著-第7章-课后作业)

井字棋--课后程序(Python程序开发案例教程-黑马程序员编著-第7章-课后作业)

实例2&#xff1a;井字棋 井字棋是一种在3 * 3格子上进行的连珠游戏&#xff0c;又称井字游戏。井字棋的游戏有两名玩家&#xff0c;其中一个玩家画圈&#xff0c;另一个玩家画叉&#xff0c;轮流在3 * 3格子上画上自己的符号&#xff0c;最先在横向、纵向、或斜线方向连成一条…
阅读更多...
【Leetcode】【简单】35. 搜索插入位置

【Leetcode】【简单】35. 搜索插入位置

给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2 示例 2: 输入:…
阅读更多...
MSP430F5529单片机入门学习笔记1

MSP430F5529单片机入门学习笔记1

本笔记整理自B站教程MSP430F5529单片机学习视频汇总基于库函数的开发—GPIO库函数右边部分写错了&#xff0c;看的时候注意基于库函数的开发—GPIO实践操作LED交替闪烁#include <msp430.h> /** EXP-GPIO-01.C** Created on: 2023年3月10日* Author: ASUS*/#include…
阅读更多...
webRtc概念

webRtc概念

webRtc概念 以下的文档整理来自此链接 文档整理了一系列实现web通用接口的ECMAScript APIs &#xff0c;这些接口是为了支持浏览器或者一些其他实现了实时交换协议的设备进行媒体信息和程序数据交换。 1、实现点对点通信的规范&#xff1a; NAT穿透实现与远端节点链接比如&a…
阅读更多...
WebRTC开源库内部调用abort函数引发程序发生闪退问题的排查

WebRTC开源库内部调用abort函数引发程序发生闪退问题的排查

目录 1、初始问题描述 2、使用Process Explorer工具查看到处理音视频业务的rtcmpdll.dll模块没有加载起来 3、使用Dependency Walker工具查看到rtcmpdll.dll依赖的库有问题 4、更新库之后Debug程序启动时就发生异常&#xff0c;程序闪退 5、VS调试时看不到有效的函数调用堆…
阅读更多...
hashmap存储方式 hash碰撞及其解决方式

hashmap存储方式 hash碰撞及其解决方式

1.Map的存储特点 在Map这个结构中&#xff0c;数据是以键值对&#xff08;key-value&#xff09;的形式进行存储的&#xff0c;每一个存储进map的数据都是一一对应的。 创建一个Map结构可以使用new HashMap()以及new TreeMap()两种方式&#xff0c;两者之间的区别是&#xff1a…
阅读更多...
TVS和稳压管的相同点和不同点

TVS和稳压管的相同点和不同点

大家好，我是记得诚。 文章目录 介绍相同点不同点介绍 TVS和稳压管都是电路中很常用的电子元器件，都是二极管的一个种类。 TVS二极管全称是Transient voltage suppression diode，也叫瞬态电压抑制二极管。 稳压二极管英文名字Zener diode，又叫齐纳二极管。 关于稳压二极…
阅读更多...
Jenkins从下载到部署项目的流程

Jenkins从下载到部署项目的流程

Jenkins安装配置1.1 Jenkins介绍Jenkins 是一款流行的开源持续集成&#xff08;Continuous Integration&#xff09;工具&#xff0c;广泛用于项目开发&#xff0c;具有自动化构建、测试和部署等功能。官网&#xff1a; http://jenkins-ci.org/。Jenkins的特征&#xff1a;开源…
阅读更多...
谷粒学院开发（三）：统一日志、异常及前端准备工作

谷粒学院开发（三）：统一日志、异常及前端准备工作

特定异常处理 ControllerAdvice public class GlobalExceptionHandler {ExceptionHandler(Exception.class) // 指定出现什么异常会被处理ResponseBody // 为了能够返回数据public R error(Exception e) {e.printStackTrace();return R.error().message("执行了全局异常…
阅读更多...
Linux--磁盘存储管理 分区工具 fdisk 分区实操 详解~

Linux--磁盘存储管理 分区工具 fdisk 分区实操 详解~

上一篇文章介绍了 fdisk 的各个菜单功能&#xff0c;这篇&#xff0c;我们直接实操 管理磁盘 fdisk :分区 &#xff1a; 我们上一篇文章里讲过&#xff0c;上篇文章的 磁盘 /dev/nvme0n1 空间已经满了因此 &#xff0c; 又重新添加了一块儿硬盘~&#xff01;&#xff01;>&g…
阅读更多...
传统图像处理之颜色特征

传统图像处理之颜色特征

博主简介 博主是一名大二学生&#xff0c;主攻人工智能研究。感谢让我们在CSDN相遇&#xff0c;博主致力于在这里分享关于人工智能&#xff0c;c&#xff0c;Python&#xff0c;爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主&#xff0c;博主会继续更新的&#xff0c…
阅读更多...
UML时序图速查——架构设计必备技能

UML时序图速查——架构设计必备技能

目录 一、时序图概述 二、时序图元素 1. Actor&#xff08;角色&#xff09;& Object&#xff08;对象&#xff09; 2. Lifeline&#xff08;生命线&#xff09; 3. Message&#xff08;消息&#xff09; 4. Combined Fragment&#xff08;组合片段&#xff09; 5. …
阅读更多...
【Linux】多线程---线程控制

【Linux】多线程---线程控制

进程在前面已经讲过了&#xff0c;所以这次我们来讨论一下多线程。前言&#xff1a;线程的背景进程是Linux中资源及事物管理的基本单位&#xff0c;是系统进行资源分配和调度的一个独立单位。但是实现进程间通信需要借助操作系统中专门的通信机制&#xff0c;但是只这些机制将占…
阅读更多...
java并发入门（一）共享模型—Synchronized、Wait/Notify、pack/unpack

java并发入门（一）共享模型—Synchronized、Wait/Notify、pack/unpack

一、共享模型—管程 1、共享存在的问题 1.1 共享变量案例 package com.yyds.juc.monitor;import lombok.extern.slf4j.Slf4j;Slf4j(topic "c.MTest1") public class MTest1 {static int counter 0;public static void main(String[] args) throws InterruptedEx…
阅读更多...
如何科学管理技术团队的研发交付速率？

如何科学管理技术团队的研发交付速率？

每当提及「研发效能」&#xff0c;我们都在谈论什么&#xff1f; 研发效能管理要在保证质量的前提下&#xff0c;思考如何更快地向客户交付价值。在管理实践中&#xff0c;效能度量涉及三大维度&#xff1a;交付速率、交付质量、交付价值。 技术团队对内如何优化开发流程&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023