前端之家

  1. 首页
  2. 博文

JavaScript进阶

• 博文 • 作者：fallingintodreams

闭包

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。

<body>
  <script>
    // 闭包 : 内层函数 + 外层函数变量
    // function outer() {
    //   const a = 1
    //   function f() {
    //     console.log(a)
    //   }
    //   f()
    // }
    // outer()

    // 闭包的写法  统计函数的调用次数
    function outer() {
      let count = 0
      function fn() {
        count++
        console.log(`函数被调用${count}次`)
      }
      return fn
    }
    const re = outer()
    re() // 1
    re() // 2
  </script>
</body>

总结：

1.怎么理解闭包？

  • 闭包 = 内层函数 + 外层函数的变量

2.闭包的作用？

  • 封闭数据，实现数据私有，外部也可以访问函数内部的变量
  • 闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来

3.闭包可能引起的问题？

  • 内存泄漏

函数

构造函数

构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。

注意事项：

  1. 使用 new 关键字调用函数的行为被称为实例化

  2. 实例化构造函数时没有参数时可以省略 ()

  3. 构造函数的返回值即为新创建的对象

  4. 构造函数内部的 return 返回的值无效！

  5. 构造函数的函数名一般是首字母大写（约定）

<body>
  <script>
    // 创建一个猪 构造函数 
    function Pig(uname,age) {
      this.uname = uname
      this.age = age
    }
    // console.log(new Pig('佩奇',6))
    // console.log(new Pig('乔治',3))
    const p = new Pig('佩奇',6)
    console.log(p)

    function Goods(name,price,count) {
      this.name = name
      this.price = price
      this.count = count
      this.sayhi = function () { }
    }
    const mi = new Goods('小米',1999,20)
    console.log(mi)
    const hw = new Goods('华为',3999,59)
    console.log(hw)
    console.log(mi === hw) // false
    mi.name = 'vivo'
    console.log(mi)
    console.log(hw)
  </script>
</body>

函数参数

动态参数

arguments是一个伪数组，可以获取传递的实参。

<script>
  // 求和函数，计算所有参数的和
  function sum() {
    // console.log(arguments)
    let s = 0
    for(let i = 0; i < arguments.length; i++) {
      s += arguments[i]
    }
    console.log(s)
  }
  // 调用求和函数
  sum(5,10) // 15
  sum(1,2,4) // 7
</script>

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。theArgs是一个真数组。

function(a,b,...theArgs) {
  // ...
}

说明：

  • a 和 b 分别接收第一个参数和第二个参数
  • 第三个参数以及后面的参数都由 theArgs 接收
  • 如果只有一个参数且为剩余参数，那么所有参数都由它进行接收
function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1,3));
// Expected output: 6

console.log(sum(1,3,4));
// Expected output: 10
展开运算符

...是展开运算符，可以展开数组。

<body>
  <script>
    const arr1 = [1,3]
    // 展开运算符 可以展开数组
    // console.log(...arr1) // 1 2 3

    // console.log(Math.max(1,3))
    // ...arr1  === 1,3
    // 1. 求数组最大值/最小值
    console.log(Math.max(...arr1)) // 3
    console.log(Math.min(...arr1)) // 1
    // 2. 合并数组
    const arr2 = [3,4,5]
    const arr = [...arr1,...arr2]
    console.log(arr) // [1,5]
  </script>
</body>

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

基础语法：

(param1,param2,…,paramN) => { statements }
(param1,paramN) => expression
//相当于：(param1,paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

高级语法：

//加括号的函数体返回对象字面量表达式：
params => ({foo: bar})

//支持剩余参数和默认参数
(param1,...rest) => { statements }
(param1 = defaultvalue1,paramN = defaultvalueN) => {
statements }

//同样支持参数列表解构
let f = ([a,b] = [1,2],{x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数中的 this

箭头函数中的 this 是从自己的作用域链的上一层继承的 this

<body>
  <script>
    // 以前 this 的指向：谁调用的这个函数，this 就指向谁
    console.log(this)  // window
    // 普通函数
    // function fn() {
    //   console.log(this)  // window
    // }
    // window.fn()
    // 对象方法里面的 this
    // const obj = {
    //   name: 'andy',//   sayHi: function () {
    //     console.log(this)  // obj
    //   }
    // }
    // obj.sayHi()

    // 箭头函数的 this  是上一层作用域的 this 指向
    // const fn = () => {
    //   console.log(this)  // window
    // }
    // fn()
    // 对象方法箭头函数 this
    // const obj = {
    //   uname: '张三',//   sayHi: () => {
    //     console.log(this)  // window
    //   }
    // }
    // obj.sayHi()

    const obj = {
      uname: '李四',sayHi: function () {
        console.log(this)  // obj
        let i = 10
        const count = () => {
          console.log(this)  // obj 
        }
        count()
      }
    }
    obj.sayHi()

  </script>
</body>

解构赋值

解构赋值语法是一种 Javascript 表达式。可以将数组中的值或对象的属性取出，赋值给其他变量。

默认值

每个解构属性都可以有一个默认值。当属性不存在或值为 undefined 时，将使用默认值。如果属性的值为 null，则不使用它。

const [a = 1] = []; // a is 1
const { b = 2 } = { b: undefined }; // b is 2
const { c = 2 } = { c: null }; // c is null

数组解构

基本变量赋值

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

const [red,yellow,green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

解构比源更多的元素

在从赋值语句右侧指定的长度为 N 的数组解构的数组中，如果赋值语句左侧指定的变量数量大于 N，则只有前 N 个变量被赋值。其余变量的值将是未定义。

const foo = ["one","two"];

const [red,green,blue] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // undefined
console.log(blue); //undefined

交换变量

可以在一个解构表达式中交换两个变量的值。

let a = 1;
let b = 3;

[a,b] = [b,a];
console.log(a); // 3
console.log(b); // 1

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

忽略某些返回值

function f() {
  return [1,3];
}

const [a,b] = f();
console.log(a); // 1
console.log(b); // 3

const [c] = f();
console.log(c); // 1

对象解构

基本赋值

const user = {
  id: 42,isVerified: true,};
// 变量名需要一致
const { id,isVerified } = user;

console.log(id); // 42
console.log(isVerified); // true

赋值给新的变量名

可以从对象中提取属性，并将其赋值给名称与对象属性不同的变量。

const o = { p: 42,q: true };
const { p: foo,q: bar } = o;

console.log(foo); // 42
console.log(bar); // true

举个例子，const { p: foo } = o 从对象 o 中获取名为 p 的属性，并将其赋值给名为 foo 的局部变量。

赋值到新的变量名并提供默认值

一个属性可以同时是两者：

  • 从对象提取并分配给具有不同名称的变量。
  • 指定一个默认值，以防获取的值为 undefined。
const { a: aa = 10,b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

从作为函数参数传递的对象中提取属性

传递给函数参数的对象也可以提取到变量中，然后可以在函数体内访问这些变量。至于对象赋值，解构语法允许新变量具有与原始属性相同或不同的名称，并为原始对象未定义属性的情况分配默认值。

const user = {
  id: 42,displayName: "jdoe",fullName: {
    firstName: "Jane",lastName: "Doe",},};

// 解构
function userId({ id }) {
  return id;
}
console.log(userId(user)); // 42

// 解构并重命名
function userDisplayName({ displayName: dname }) {
  return dname;
}
console.log(userDisplayName(user)); // `jdoe`

// 解构嵌套对象
function whois({ displayName,fullName: { firstName: name } }) {
  return `${displayName} is ${name}`;
}
console.log(whois(user)); // "jdoe is Jane"

数组

forEach 遍历数组

<body>
  <script>
    // forEach 就是遍历  加强版的for循环  适合于遍历数组对象
    const arr = ['red','green','pink']
    arr.forEach(function (item,index) {
      console.log(item)  // 数组元素 red green pink
      console.log(index) // 索引号
    })
  </script>
</body>

filter 过滤元素

const words = ['spray','elite','exuberant','destruction','present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant","destruction","present"]

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。

本文链接：https://www.f2er.com/3188587.html

大家都在看

  • 飞码LowCode前端技术系列：如何便捷快速验证实现投产及飞码探索 博文

    飞码LowCode前端技术系列：如何便捷快速验证实现投产及飞码探索

    本篇文章从数据中心，事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。
    2023-11-16 • 博文
  • 如何优雅使用 vuex 博文

    如何优雅使用 vuex

    大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法，所以大概会讲述下面这些点： Q1：我为什么会想使用 vuex 来管理数据状态交互？ Q2：使用 vuex 框架有哪些缺点或者说副作用？ Q3：我是如何在项目里使用 vuex 的？ 初识 vuex 对于 vuex，有人喜欢，有人反感 喜欢的人觉
    2023-11-16 • 博文

  • 第三方组件及计算属性传参的问题解决方式

    1. 前言 唉，好想玩滋嘣。 2. 计算属性直接传参接收不到 表格数据某一列需要用的计算属性时，模板中使用计算属性 fullName 就会直接调用 fullName 函数，而在模板中 fullName(item) 相当于fullName()(item)，此处为函数柯里化。 &lt;el-table-
    2023-11-16 • 博文
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件 博文

    记录--Vue3基于Grid布局简单实现一个瀑布流组件

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表……
    2023-11-16 • 博文

  • 用强数据类型保护你的表单数据-基于antd表单的类型约束

    接口数据类型与表单提交数据类型，在大多数情况下，大部分属性的类型是相同的，但很少能做到完全统一。我在之前的工作中经常为了方便，直接将接口数据类型复用为表单内数据类型，在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考，这种工作模式会引起各种隐藏bug，一定有更……
    2023-11-16 • 博文
  • pinia的使用 博文

    pinia的使用

    前言 最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
    2023-11-16 • 博文
  • 记录--让我们来深入了解一下前端“三清”是什么 博文

    记录--让我们来深入了解一下前端“三清”是什么

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前端“三清” 在前端开发中，我们经常听到关于“三清”的说法，即 window、document、Object。这三者分别代表了 BOM（浏览器对象模型）、DOM（文档对象模型）以及 JS 的顶层对象。在这个体系中，我们通过 JavaScr
    2023-11-16 • 博文
  • 记录--啊？Vue是有三种路由模式的？ 博文

    记录--啊？Vue是有三种路由模式的？

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 众所周知，vue路由模式常见的有 history 和 hash 模式，但其实还有一种方式-abstract模式（了解一哈~） 别急，本文我们将重点逐步了解： 路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念
    2023-11-16 • 博文