【Javascript系统学习】(二)

news2024/11/24 20:33:27

函数

定义函数

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

函数声明

函数表达式

//例子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"

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

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

相关文章

【Python】解决Python报错:AttributeError: ‘list‘ object has no attribute ‘shape‘

​​​​ 文章目录 引言1. 错误详解2. 常见的出错场景2.1 使用列表代替NumPy数组2.2 错误的数据类型转换 3. 解决方案3.1 确保使用NumPy数组3.2 检查数据类型 4. 预防措施4.1 使用类型注解4.2 编写单元测试 结语 引言 在使用Python进行数据处理或科学计算时&#xff0c;可能会…

NodeJs实现脚本:将xlxs文件输出到json文件中

文章目录 前期工作和依赖笔记功能代码输出 最近有一个功能&#xff0c;将json文件里的内容抽取到一个xlxs中&#xff0c;然后维护xlxs文件。当要更新json文件时&#xff0c;就更新xlxs的内容并把它传回json中。这个脚本主要使用NodeJS写。 以下是完成此功能时做的一些笔记。 …

怎么换自己手机的ip地址

在互联网时代&#xff0c;IP地址已经成为了我们数字身份的一部分。无论是浏览网页、下载文件还是进行在线交流&#xff0c;我们的IP地址都在默默发挥着作用。然而&#xff0c;有时出于安全或隐私保护的考虑&#xff0c;我们可能需要更换手机的IP地址。那么&#xff0c;如何轻松…

工信部《工业和信息化领域数据安全风险评估实施细则(试行)》实行,行云管家数据产品助力企业数据安全

2024年6月1日&#xff0c;工信部颁布的《工业和信息化领域数据安全风险评估实施细则&#xff08;试行&#xff09;》&#xff08;以下简称《细则》&#xff09;开始实行&#xff0c;旨在引导工业和信息化领域数据处理者规范开展数据安全风险评估工作&#xff0c;提升数据安全管…

springboot3 一些听课笔记(1)

文章目录 一、日志框架二、springboot 自动配置三 、springweb3.13.2 自己编写一个messageconvert3.2.2 如果我们想让其支持yaml格式呢&#xff1f; 一、日志框架 springboot底层 默认使用logbacksjf4j作为日志框架。 1、每个 starter 场景&#xff0c;都会导入一个核心场景 …

3067. 在带权树网络中统计可连接服务器对数目 Medium

给你一棵无根带权树&#xff0c;树中总共有 n 个节点&#xff0c;分别表示 n 个服务器&#xff0c;服务器从 0 到 n - 1 编号。同时给你一个数组 edges &#xff0c;其中 edges[i] [ai, bi, weighti] 表示节点 ai 和 bi 之间有一条双向边&#xff0c;边的权值为 weighti 。再给…

驱动开发之设备树语法

目录 0.设备树由来 1.设备树概念 1.1.DTS、DTB 和 DTC 和 dtsi 概念 2.设备树语法 2.1.例子 2.2.设备节点 2.2.1.节点命名 2.2.2节点数据类型 2.2.3.根节点 2.2.4.属性介绍 2.2.4.1.compatible属性 2.2.4.2.name属性 2.2.4.3.status 属性 2.2.4.5.unit-address属性…

42【Aseprite 作图】梅花盆栽——拆解

1 花盆 是高度比较低的盆&#xff0c;只有一个下2&#xff1b;上面分两个 1 2 盆边缘颜色深&#xff0c;上面靠近外面的颜色浅&#xff0c;正面颜色稍微深一点&#xff0c;画两条竖的浅色线&#xff0c;作为装饰 2 花盆中的沙石 沙子颜色深一点&#xff0c;中间有浅一点的线…

C++学习/复习14--list的模拟实现(节点类/迭代器封装成类/list类/测试)

一、节点类 1.匿名对象 **在C中&#xff0c;匿名对象主要是通过构造函数直接生成的未命名对象实例&#xff0c;通常产生于以下三种情况&#xff1a;将对象作为值传递给函数、进行类型转换以及在函数需要返回一个对象时**。以下是对这三种情况的详细介绍&#xff1a; 1. **传…

全链路性能测试:Nginx 负载均衡的性能分析和调优

为什么性能测试很多同学觉得是一个比较难以自学上岸的测试领域,是因为真正做全链路的性能测试是比较难的。所谓的全链路就是在项目的整个链路上任何一环节都有可能存在性能测试瓶颈,我们都需要能够通过分析性能的监控指标找到对应的问题。 我们今天要讲的Nginx负载均衡就是…

基于协同过滤推荐的在线课程选修系统

基于协同过滤推荐的在线课程选修系统 demo 网站查看 http://course.qsxbc.com/all_course/ 点我查看 效果 功能 登录注册、点赞收藏、评分评论&#xff0c;课程推荐&#xff0c;热门课程&#xff0c;个人中心&#xff0c;可视化&#xff0c;后台管理&#xff0c;课程选修 …

【设计模式】JAVA Design Patterns——Servant(服务模式)

&#x1f50d;目的 仆人类被用于向一组类提供一些行为&#xff0c;区别于在每个类定义行为-或者当我们无法排除 公共父类中的这种行为&#xff0c;这些行为在仆人类被定义一次 &#x1f50d;解释 真实世界例子 国王、王后和其他宫廷皇室成员需要仆人为他们提供饮食、准备饮料等…

semaphore | 使用web界面的ansible来批量运维 linux、windows主机

Ansible 的现代化 UI &#xff0c;可以轻松管理和运行 Ansible playbook&#xff0c;功能强大&#xff0c;操作简单&#xff0c;支持中文。 文章目录 一、系统功能说明二、系统安装2.1 直接安装2.2 docker 安装 三、系统使用3.1 建立存储库3.2 编写代码3.3 建立主机配置3.3 建立…

Qt Window Dialog 无标题栏 ,无边框,可拖动

1.效果&#xff1a; 2. 主要实现步骤&#xff1a; 设置窗口 flag&#xff1a; this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint); 创建变量存储位置 QPoint m_dragPosition; 对鼠标左键按下和移动事件做处理 void DraggableDialog::mousePre…

R语言探索与分析18-基于时间序列的汇率预测

一、研究背景与意义 汇率是指两个国家之间的货币兑换比率&#xff0c;而且在国家与国家的经济交流有着举足轻重的作用。随着经济全球化的不断深入&#xff0c;在整个全球经济体中&#xff0c;汇率还是一个评估国家与国家之间的经济状况和发展水平的一个风向标。汇率的变动会对…

嵌入式Linux系统编程 — 3.3 chown、fchown 和 lchown 函数更改文件属主

目录 1 文件属主 1.1 文件属主概念 1.2 如何查看文件属主 1.3 有效用户 ID 和有效组 ID 2 chown 函数 2.1 chown命令 2.2 chown函数 2.3 getuid 和 getgid函数 3 fchown函数 3.1 fchown函数简介 3.2 示例代码 4 lchown函数 1 文件属主 1.1 文件属主概念 Linux…

“中新美”三重身份,能帮SHEIN解决上市问题吗?

一家公司的海外上市之路能有多复杂&#xff1f;辗转多地的SHEIN&#xff0c;可能是当前最有话语权回答这个问题的公司。最近&#xff0c;它又有了新消息。 在上市信息多次更改后&#xff0c;伦敦正在成为SHEIN最有可能的“着陆”点。巴伦周刊援引英国天空新闻报道称&#xff0…

可以抛弃纸质礼金簿了,以后登记礼金可以用这款小程序

可以抛弃纸质礼金簿了&#xff0c;以后登记礼金可以用这款小程序 小程序介绍使用主要技术代码来源项目演示首页和我的关于和设置收礼功能送礼功能我的家庭和数据统计 总结 大家好&#xff0c;这里是程序猿代码之路&#xff0c;先说说为什么想搞这一个小程序呢&#xff0c;主要是…

Unity 编辑器扩展 一键替换指定物体下的所有材质球

先看效果 实现方案 1&#xff1a;创建几个用于测试的Cube 2&#xff1a;创建一个脚本 3:编写脚本内容 主要是这部分的逻辑 附上完整代码 using System.Collections; using System.Collections.Generic; using UnityEditor; using UnityEngine;public class Tool {[MenuItem(…

计算机基础(8)——音频数字化(模电与数电)

&#x1f497;计算机基础系列文章&#x1f497; &#x1f449;&#x1f340;计算机基础&#xff08;1&#xff09;——计算机的发展史&#x1f340;&#x1f449;&#x1f340;计算机基础&#xff08;2&#xff09;——冯诺依曼体系结构&#x1f340;&#x1f449;&#x1f34…