【Javascript系统学习】(二)

函数

定义函数

函数提升仅适用于函数声明,而不适用于函数表达式

函数声明

函数表达式

//例子1
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

console.log(factorial(3)); // 6
//factorial(n)、fac(n)、arguments.callee()
-------------------------------------------
//例子2 该函数接收由函数表达式定义的函数,并对作为第二个参数接收的数组的每个元素执行该函数:
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const cube = function (x) {
  return x * x * x;
};

const numbers = [0, 1, 2, 5, 10];
console.log(map(cube, numbers)); // [0, 1, 8, 125, 1000]

递归

function foo(i) {
  if (i < 0) {
    return;
  }
  console.log(`开始:${i}`);
  foo(i - 1);
  console.log(`结束:${i}`);
}
foo(3);

// 打印:
// 开始:3
// 开始:2
// 开始:1
// 开始:0
// 结束:0
// 结束:1
// 结束:2
// 结束:3

用于获取DOM树子节点

function walkTree(node) {
  if (node === null) {
    return;
  }
  // 对节点做些什么
  for (let i = 0; i < node.childNodes.length; i++) {
    walkTree(node.childNodes[i]);
  }
}

闭包

闭包在一个函数里面嵌套另外一个函数。嵌套(内部)函数对其容器(外部)函数是私有的闭包是可以拥有独立变量以及绑定了这些变量的环境(“封闭”了表达式)的表达式(通常是函数)。既然嵌套函数是一个闭包,就意味着一个嵌套函数可以“继承”容器函数的参数和变量。换句话说,内部函数包含外部函数的作用域

闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套,并且内部函数具有定义在外部函数中的所有变量和函数(以及外部函数能访问的所有变量和函数)的完全访问权限

外部函数却不能访问定义在内部函数中的变量和函数。这给内部函数的变量提供了一种封装。

此外,由于内部函数可以访问外部函数的作用域,因此当内部函数生存周期大于外部函数时外部函数中定义的变量和函数的生存周期将比内部函数执行的持续时间要长当内部函数以某一种方式被任何一个外部函数之外的任何作用域访问时,就会创建闭包

  • 内部函数只可以在外部函数中访问。
  • 内部函数形成了一个闭包:它可以访问外部函数的参数和变量,但是外部函数却不能使用它的参数和变量。
function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}

console.log(addSquares(2, 3)); // 13
console.log(addSquares(3, 4)); // 25
console.log(addSquares(4, 5)); // 41
--------------------------------------
//由于内部函数形成了闭包,因此你可以调用外部函数并为外部函数和内部函数指定参数:
function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}

const fnInside = outside(3); // 可以这样想:给我一个可以将提供的值加上 3 的函数
console.log(fnInside(5)); // 8
console.log(outside(3)(5)); // 8

保存变量:上例中 inside 被返回时 x 是怎么被保留下来的。一个闭包必须保存它可见作用域中所有参数和变量。因为每一次调用传入的参数都可能不同,每一次对外部函数的调用实际上重新创建了一遍这个闭包。只有当返回的 inside 没有再被引用时,内存才会被释放。

 多层嵌套函数

  • 函数(A)可以包含函数(B),后者可以再包含函数(C)。
  • 这里的函数 B 和 C 都形成了闭包,所以 B 可以访问 AC 可以访问 B
  • 此外,因为 C 可以访问 B(而 B 可以访问 A),所以 C 也可以访问 A

闭包可以包含多个作用域;它们递归地包含了所有包含它的函数作用域。这个称之为作用域链

function A(x) {
  function B(y) {
    function C(z) {
      console.log(x + y + z);
    }
    C(3);
  }
  B(2);
}
A(1); // 打印 6(即 1 + 2 + 3)
------------------------------------
//实例2
function outside() {
  const x = 5;
  function inside(x) {
    return x * 2;
  }
  return inside;
}
console.log(outside()(10)); // 20(而不是 10)

//这里的作用链域是 {inside、outside、全局对象}。因此 inside 的 x 优先于 outside 的 x
---------------------------------------------------------------------------------
const createPet = function (name) {
  let sex;

  const pet = {
    // 在这个上下文中:setName(newName) 等价于 setName: function (newName)
    setName(newName) {
      name = newName;
    },

    getName() {
      return name;
    },

    getSex() {
      return sex;
    },

    setSex(newSex) {
      if (
        typeof newSex === "string" &&
        (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")
      ) {
        sex = newSex;
      }
    },
  };

  return pet;
};

const pet = createPet("Vivie");
console.log(pet.getName()); // Vivie

pet.setName("Oliver");
pet.setSex("male");
console.log(pet.getSex()); // male
console.log(pet.getName()); // Oliver
----------------------------------------------------------------------------------------
//内部函数保留“稳定”而又“被封装”的数据参与运行。
const getCode = (function () {
  const apiCode = "0]Eal(eh&2"; // 我们不希望外部能够修改的代码......
  return function () {
    return apiCode;
  };
})();

console.log(getCode()); // "0]Eal(eh&2"

 arguments对象

函数的实际参数会被保存在一个类似数组的 arguments 对象中

使用 arguments 对象,你可以处理比声明更多的参数来调用函数。这在你事先不知道会需要将多少参数传递给函数时十分有用。你可以用 arguments.length 来获得实际传递给函数的参数的数量,然后用 arguments 对象来访问每个参数。

function myConcat(separator) {
  let result = ""; // 初始化列表
  // 迭代 arguments
  for (let i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
  }
  return result;
}
console.log(myConcat("、", "红", "橙", "蓝"));
// "红、橙、蓝、"

console.log(myConcat(";", "大象", "长颈鹿", "狮子", "猎豹"));
// "大象;长颈鹿;狮子;猎豹;"

console.log(myConcat("。", "智者", "罗勒", "牛至", "胡椒", "香菜"));
// "智者。罗勒。牛至。胡椒。香菜。"

函数参数

默认参数

function multiply(a, b) {
  b = typeof b !== "undefined" ? b : 1;
  return a * b;
}
-----------------------------------------
function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5)); // 5

剩余参数

将不确定数量的参数表示为数组

function multiply(multiplier, ...theArgs) {
  return theArgs.map((x) => multiplier * x);
}

const arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

无单独的this

在箭头函数出现之前,每一个新函数都定义了自己的 this 值(在构造函数中是一个新的对象;在严格模式下是 undefined;在作为“对象方法”调用的函数中指向这个对象;等等)。事实证明,这对于面向对象的编程风格来说并不理想。

//箭头函数没有自己的 this,而是使用封闭执行上下文的 this 值。
//因此,在以下代码中,传递到 setInterval 中的函数内的 this 与闭包函数中的 this 相同:
function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++; // 这里的 `this` 正确地指向 person 对象
  }, 1000);
}

const p = new Person();

预定义函数

 eval() 方法执行方法计算以字符串表示的 JavaScript 代码。

parseFloat() 函数解析字符串参数,并返回一个浮点数。

parseInt() 函数解析字符串参数,并返回指定的基数(基础数学中的数制)的整数。

表达式与运算符 

 解构:一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式。

var foo = ["one", "two", "three"];

// 不使用解构
var one = foo[0];
var two = foo[1];
var three = foo[2];

// 使用解构
var [one, two, three] = foo;

比较运算符 

位运算符与位逻辑运算符

(Java基础知识综合)-CSDN博客

数值推导

[for (i of [ 1, 2, 3 ]) i*i ];
// [ 1, 4, 9 ]

var abc = [ "A", "B", "C" ];
[for (letters of abc) letters.toLowerCase()];
// [ "a", "b", "c" ]

this

假设一个用于验证对象value属性的validate函数,传参有对象,最高值和最低值。

function validate(obj, lowval, hival) {
  if (obj.value < lowval || obj.value > hival) console.log("Invalid Value!");
}

你可以在任何表单元素的onchange事件处理中调用validat函数,用this来指代当前的表单元素,用例如下:

<p>Enter a number between 18 and 99:</p>
<input type="text" name="age" size="3" onChange="validate(this, 18, 99);" />

 instanceof

如果所判别的对象确实是所指定的类型,则返回true

var theDay = new Date(1995, 12, 17);
if (theDay instanceof Date) {
  // statements to execute
}

in

如果所指定的属性确实存在于所指定的对象中,则会返回true

// Arrays
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees; // returns true
3 in trees; // returns true
6 in trees; // returns false
"bay" in trees; // returns false (you must specify the index number,
// not the value at that index)
"length" in trees; // returns true (length is an Array property)

// Predefined objects
"PI" in Math; // returns true
var myString = new String("coral");
"length" in myString; // returns true

// Custom objects
var mycar = { make: "Honda", model: "Accord", year: 1998 };
"make" in mycar; // returns true
"model" in mycar; // returns true

void

可以用 void 运算符指明一个超文本链接。该表达式是有效的,但并不会在当前文档中进行加载。

//下面的代码创建了一个超链接,当用户单击它时,提交一个表单。
<a href="javascript:void(document.form.submit())">Click here to submit</a>

typeof

typeof 操作符返回一个表示 operand 类型的字符串值。operand 可为字符串、变量、关键词或对象,其类型将被返回。operand 两侧的括号为可选。

var myFun = new Function("5 + 2");
var shape = "round";
var size = 1;
var today = new Date();
--------------------------------------
typeof myFun; // returns "function"
typeof shape; // returns "string"
typeof size; // returns "number"
typeof today; // returns "object"
typeof dontExist; // returns "undefined"

delete

x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4; // create property h
delete x; // returns true (can delete if declared implicitly)
delete y; // returns false (cannot delete if declared with var)
delete Math.PI; // returns false (cannot delete predefined properties)
delete myobj.h; // returns true (can delete user-defined properties)
delete myobj; // returns true (can delete if declared implicitly)
-------------------------------------------------------------------------

逗号操作符

逗号操作符(,)对两个操作数进行求值并返回最终操作数的值。它常常用在 for 循环中,在每次循环时对多个变量进行更新。

var x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var a = [x, x, x, x, x];

for (var i = 0, j = 9; i <= j; i++, j--)
  console.log("a[" + i + "][" + j + "]= " + a[i][j]);

 短路求值

  • false && anything // 被短路求值为 false
  • true || anything // 被短路求值为 true

字符串运算符

var myString = "alpha";

myString += "bet"; // 返回 "alphabet"

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot发邮件服务如何配置?怎么使用?

SpringBoot发邮件需要的参数&#xff1f;邮件发送性能如何优化&#xff1f; 在SpringBoot项目中配置发邮件服务是一个常见的需求&#xff0c;它允许我们通过应用程序发送通知、验证邮件或其他类型的邮件。AokSend将详细介绍如何在SpringBoot中配置发邮件服务。 SpringBoot发邮…

PDF分页处理:技术与实践

引言 在数字化办公和学习中&#xff0c;PDF文件因其便携性和格式稳定性而广受欢迎。然而&#xff0c;处理大型PDF文件时&#xff0c;我们经常需要将其拆分成单独的页面&#xff0c;以便于管理和分享。本文将探讨如何使用Python编程语言和一些流行的库来实现PDF文件的分页处理。…

[word] word文字间隙怎么调整? #媒体#职场发展

word文字间隙怎么调整&#xff1f; 在文档中的数据包含英文、数字、中文等&#xff0c;会有间隙&#xff0c;有时候误以为是空格&#xff0c;但是根本删除不了&#xff0c;其实这是默认的间隙&#xff0c;是可以调整的&#xff0c;下面教大家word文字间隙怎么调整的操作&#…

路由器作为网络扩展器——设置桥接、路由模式

下面提到的路由器都是家用路由器 一、有线桥接(交换模式) 1.连接示意图 (副路由器只看交换模式部分) 副路由器充当交换机的角色 二、无线桥接(与有线类似) &#xff08;副路由器的无线信号 连接 主路由器的无线信号&#xff09; 三、路由模式 1.连接示意图 (副路由器只看…

百华鞋业祝莘莘学子旗开得胜,一举夺魁

在知识的海洋中&#xff0c; 有一群人以笔为剑&#xff0c; 在漫长的岁月里不断磨砺&#xff0c; 只为迎接那场人生的重要战役——高考。 高考&#xff0c; 是学子们十几年寒窗苦读的见证&#xff0c; 是他们用奋斗书写青春考卷的舞台。 在这个舞台上&#xff0c; 他们将…

yarn保姆级安装和使用

目录 前言 一、yarn简介 主要特性 使用场景 二、yarn的安装 yarn的下载 配置环境变量 三、yarn的常用命令 四、yarn的常用配置项 五、npm与yarn的区别 前言 本文旨在介绍如何安装和使用Yarn&#xff0c;以及它的一些常见用法。我们将从Yarn的基本概念开始&#xff0c;…

以sqlilabs靶场为例,讲解SQL注入攻击原理【32-41关】

【Less-32】 尝试使用各种注入发现无论是单引号还是双引号都被\转义成了字符串&#xff0c;导致SQL无法注入。 解决方案&#xff1a;宽字节注入。原理&#xff1a;利用数据库和页面编码不同的问题&#xff0c;PHP发送请求到mysql时经过一次gbk编码&#xff0c;因为GBK是双字节…

易于上手的requests

Python中的requests库主要用于发送HTTP请求并获取响应结果。在现代网络编程中&#xff0c;HTTP请求是构建客户端与服务器之间通信的基础。Python作为一种高级编程语言&#xff0c;其丰富的库支持使得它在网络数据处理领域尤为突出。其中&#xff0c;requests库以其简洁、易用的…

【计算机视觉】数字图像处理基础:以像素为单位的图像基本运算(点运算、代数运算、逻辑运算、几何运算、插值)

0、前言 在上篇文章中&#xff0c;我们对什么是数字图像、以及数字图像的组成&#xff08;离散的像素点&#xff09;进行了讲解&#x1f517;【计算机视觉】数字图像处理基础知识&#xff1a;模拟和数字图像、采样量化、像素的基本关系、灰度直方图、图像的分类。 我们知道&a…

高考作文:时光之河,逐梦前行

时光之河&#xff0c;奔流不息&#xff0c;如同我们的人生旅途&#xff0c;充满了未知与挑战。站在2024年的高考门槛前&#xff0c;我们回望过去&#xff0c;展望未来&#xff0c;心中充满了期待与憧憬。 首先&#xff0c;让我们回顾一下这条时光之河中的点滴。过去的岁月里&am…

java 大型企业MES生产管理系统源码:MES系统与柔性化产线控制系统的关系、作用

MES定义为“位于上层的计划管理系统与底层的工业控制之间的面向车间层的管理信息系统”,它为操作人员/管理人员提供计划的执行、跟踪以及所有资源(人、设备、物料、客户需求等)的当前状态。 MES系统与柔性化产线控制系统的关系 MES&#xff08;制造执行系统&#xff09;是一种…

i.MX8MP平台开发分享(RDC软件配置篇)

Uboot中已经将RDC的配置写入到了OCRAM中&#xff0c;NXP在ATF中预设了SIP服务&#xff0c;SIP服务下有厂商自定义的smc命令ID。例如下面的DDR、GPC、SRC和HAB的smc回调函数。 在SRC中断处理函数中&#xff0c;对于SRC_M4_START指令&#xff0c;先读取OCRAM中的配置&#xff0c;…

记录一次springboot、ruoyi若依前后端不分离项目和vue项目的合并整合问题,搞了一天总结

项目场景&#xff1a; 因为此功能只做为客户方一个小模块&#xff0c;客户方使用的是springboot前后端不分离的架构。而我们的项目是使用前后端分离springbootvue的架构。在接项目前&#xff0c;项目已经存在&#xff0c;所以不存在设计架构的前提。实际是在原有基础上修改的。…

了解Synchronized对象头?

1、对象头的结构 Java对象存储在内存中结构为&#xff1a; 对象头&#xff08;Header&#xff09;&#xff1a;实例数据&#xff08;Instance Data&#xff09;&#xff1a;定义类中的成员属性对齐填充字节&#xff08;Padding&#xff09;&#xff1a;由于HotSpot虚拟机的自…

USB Type-C 和 USB供电数据和电源角色

USB Type-C 连接器生态系统随着现代平台和设备需求的变化而不断发展。 USB Type-C 连接器生态系统可满足现代平台和设备不断变化的需求&#xff0c;并且符合更小、更薄且更轻便的外形设计趋势。此外&#xff0c;针对 Type-C 连接器修改 USB PD 有助于满足高耗电应用的需求。 …

GDPU JavaWeb Ajax请求

异步请求可以提升用户体验并优化页面性能。 ajax登录 实现ajax异步登录。 注意&#xff0c;ajax用到了jQuery库&#xff0c;先下载好相应的js库&#xff0c;然后复制导入到工程的web目录下&#xff0c;最好与你的前端页面同一层级。然后编写时路径一定要找准&#xff0c;“pag…

STM32F103C8移植uCOSIII并以不同周期点亮两个LED灯(HAL库方式)【uCOS】【STM32开发板】【STM32CubeMX】

STM32F103C8移植uC/OSIII并以不同周期点亮两个LED灯&#xff08;HAL库方式&#xff09;【uC/OS】【STM32开发板】【STM32CubeMX】 实验说明 将嵌入式操作系统uC/OSIII移植到STM32F103C8上&#xff0c;构建两个任务&#xff0c;两个任务分别以1s和3s周期对LED进行点亮—熄灭的…

Android基本概念

Android发展历史 Android 是一个流行的移动操作系统&#xff0c;由 Google 开发并于 2008 年首次推出。 Android是基于Linux开发的移动设备操作系统。 在2005年被Google收购&#xff0c;2008年发布Android1.0&#xff0c;后续发布1.5/1.6 ------ 直到2021年发布Andriod12 。 …

什么是大型语言模型 ?

引言 在本文[1]中&#xff0c;我们将从高层次概述大型语言模型 (LLM) 的具体含义。 背景 2023年11月&#xff0c;我偶然间听闻了OpenAI的开发者大会&#xff0c;这个大会展示了人工智能领域的革命性进展&#xff0c;让我深深着迷。怀着对这一领域的浓厚兴趣&#xff0c;我加入了…

【Python】解决Python报错:ZeroDivisionError: division by zero

​​​​ 文章目录 引言1. 错误详解2. 常见的出错场景2.1 直接除零2.2 变量导致的间接除零 3. 解决方案3.1 检查除数3.2 使用异常处理 4. 预防措施4.1 数据验证4.2 编写防御性代码 结语 引言 在Python中&#xff0c;尝试将一个数字除以零时&#xff0c;会抛出ZeroDivisionErr…