ECMAScript ~

已于 2023-08-18 16:34:43 修改
阅读量49 收藏
点赞数
文章标签： javascript 前端 es6
于 2023-06-13 22:56:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DGogoing/article/details/131197514
版权

ES5

  • 如果一个 变量 或者 其他表达式 不在 “当前的作用域”
  • 那么会继续沿着作用域链向上查找直到全局作用域（global或浏览器中的window）
  • 自由变量的查找是在定义的作用域向上级寻找，非执行地！

全局作用域

  • 变量在函数或者代码块 {} 外定义，即为全局作用域
  • 没有使用 var 定义的变量拥有全局作用域，但是可以被 delete （ 实际 window/global 属性 ），而全局变量不可以
// 此处可调用
function myFunction() {
    x = "es"
    // 此处可调用
}

函数作用域

  • 函数内部定义的变量，对外是封闭的，外层作用域无法直接访问函数内部
  • 想读取函数内的变量，必须借助 return 或者闭包
function bar() {
    var testValue = 'inner'
}
console.log(testValue) // ReferenceError: testValue is not defined

块状作用域

  • 关于什么是块，认识 {} 即可
if (true) {
  let a = 1
}
console.log(a) //  a is not defined

动态作用域

  • this 在执行时开始寻找作用域，箭头函数取上级作用域
function fn() {
  console.log(this)
}
fn() // window
fn.call({ x: 100 }) // { x: 100 }
fn.bind({ x: 100 })() // {x: 100}
  • 隐式转换
    • 当运算符在运算时两边数据类型不统一会自动将数据进行一个类型转换，称为 隐式转换
    • ==：等同 ~ 比较运算符，两边值类型不同的时候，先进行类型转换，再比较
    • ===：恒等 ~ 严格比较运算符，不做类型转换，类型不同就是不等
    • 常规场景：有一种情况可使用 ==，其余使用 === ~ if (a == null) {} if (a == udnefined) {}
console.log(100 == '100') // true
console.log(0 == '') // true
console.log(0 == false) // true
console.log(false == '') // true
console.log(null == undefined) // true
  • truly falsely
    • 经过两次非运算：truly 变量为 true，falsely 变量为 false
    • if 判断其实是判断是否为 trully 变量
    • && 返回 falsely 变量，都是 truly 返回最后一个
    • || 返回 truly 变量，都是 truly 返回第一个，都是 falsely 返回最后一个
console.log(!!0) // false
console.log(!!NaN) // false
console.log(!!'') // false
console.log(!!null) // false
console.log(!!undefined) // false
console.log(!!false) // false
console.log(NaN && 100) // NAN
console.log(100 && 200) // 200
console.log(NaN || 100) // 100
console.log(100 || 200) // 100
console.log(NaN || undefined) // undefined
  • typeof
    • null 属于特殊引用类型，指针为空地址
    • Class 实际是 function 语法糖
console.log(typeof undefined) // undefined
console.log(typeof 'abc') // string
console.log(typeof 100) // number
console.log(typeof true) // boolean
console.log(typeof Symbol('zhangsan')) // symbol

console.log(typeof null) // object
console.log(typeof ['a', 'b']) // object
console.log(typeof { x: 100 }) // object
console.log(typeof function fn() {}) // function
console.log(typeof Object) // function
  • createDocumentFragment ：文档片段插入
const frag = document.createDocumentFragment()
for (let i = 0; i < 10; i++) {
  const li = document.createElement('li')
  frag.appendChild(li)
}
document.body.appendChild(frag)
  • onload 需要等待所有资源加载完毕执行，DOMContentLoaded 为DOM渲染完成执行
  • window.requestAnimationFrame：浏览器自动调节 60帧/s
const box = document.getElementById('box')
let position = 0
let speed = 2
function animate() {
    position += speed
    if (position > 200 || position < 0) {
        speed = -speed
    }
    box.style.transform = `translateX(${position}px)`
    window.requestAnimationFrame(animate) // 请求下一帧动画
}
window.requestAnimationFrame(animate)
  • 闭包

    • 函数作为参数被传入或者作为返回值被返回，或者说函数内部创建的函数返回内部的变量

    • 防止内存泄漏

      • 在不再需要使用闭包时，手动解除对闭包的引用
      • 使用模块化的方式
      • 将包含闭包的变量赋值为 null
      • 内部变量使用 WeakMap 或 WeakSet

    • 原子操作

const increase = (a, b, c, d) => {
    return a + b + c + d
}
function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args)
        } else {
            return function (...moreArgs) {
                return curried.apply(this, args.concat(moreArgs))
            }
        }
    }
}
const curriedAdd = curry(increase)
console.log(curriedAdd(10)(20)(30)(40)) // 100

ES6

  • let
    • 不属于顶层对象 window
    • 不允许重复声明
    • 不存在变量提升
    • 拥有块级作用域（ 必须有 {} ）
var a = 5
b = 6
let c = 7
console.log(window.a) // 5 设计缺陷：var声明全局变量和顶层对象window进行了挂钩；
console.log(window.b) // 6 // 相当于给 window 顶层对象属性赋值，window.b = 6
console.log(window.c) // undefined
  • const ：和 let 一致 ，差异点必须定义初始值，不可改变原值（引用类型指地址）
  • 解构：对象、数组、字符串
const [a, [b, c], d = 4] = [1, [2, 3]] // 左右结构必须一致
console.log(a, b, c, d) // 1 2 3 4

const user = {
  name: 'zhangsan',
  age: 10
}
let { age: uage, name: uname } = user // 别名
let { age, name } = user // key

function foo([a, b, c]) {
  console.log(a, b, c) // 参数解构 1 2 3
}
foo([1, 2, 3])
  • 函数扩展
    • 允许 toString()
    • 增加了默认值
    • 函数有 length 属性即参数个数，默认值不计算在当中
    • 拥有函数名：匿名函数 和 bind 有区别
function foo(x, y, z = 1) {} // 默认值

function foo1(x = 1, y = 2, z = 3) {}
console.log(foo1.length) // 0

function foo2(x, y, z = 1) {}
console.log(foo2.length) // 2

console.log(foo.name) // foo
console.log(new Function().name) // anonymous
console.log(foo4.bind({}).name) // bound foo
  • rest：剩余运算符，可用于解构（参数、字符串、对象、数组）、合并、拷贝
const arr = [...arr1, ...arr2] // 合并
const obj = { ...obj1 } // 拷贝
foo(...arr) // 解构
function fn(x, ...args) {} // 剩余属性
const { key1, ...rest } = obj // 剩余参数
  • 箭头函数
    • 不可作为构造函数
    • 不可使用 arguments
    • 箭头函数不存在 this，或者说 this 指向定义时所在对象，而非调用时的对象（取上级作用域）
    • 不存在预加载（类似变量提升）
const sum = (x, y) => x + y

ES7 / es2016

  • 内容包含：幂运算符 **
  • includes
    • 两个参数：包含内容、开始寻找的索引位置（负数从后开始寻找）
    • 可用于数组、字符串，无法查找复杂数据类型， 如二维数组，对象数组
const arr = [1, 2, 3, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

const arr2 = ['es6', 'esnext',]
console.log(arr10.includes('es6')) // true
console.log(arr10.includes('es6', 1)) // false

ES8 / es2017

  • 内容包含：async、await、Object.defineProperty、Object.values、padStart、padEnd

ES9 / 2018

  • 内容包含：Promise.finally
  • Symbol.asyncIterator ：异步可迭代协议
  • for await：遍历过程中依次执行每一个异步函数，而不是瞬间全部执行
function fn(time) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({
                value: time,
                done: false
            })
        }, time)
    })
}
const arr = [fn(1000), fn(2000), fn(3000)]
arr[Symbol.asyncIterator] = function () {
    let nextIndex = 0
    return {
        next() {
            return nextIndex < arr.length
                ? arr[nextIndex++]
                : Promise.resolve({ value: undefined, done: true })
        }
    }
}
//  ! 将整个异步函数转换为一个函数表达式
!(async function test() {
    for await (let item of arr) {
        console.log(item) // 依此输出 1000 2000 3000
    }
})()

ES10 / 2019

  • 内容包含：fromEntries、flat、faltMap
  • Function.prototype.toString ： 在 Function 原型上添加 toString 方法
  • try catch ：允许省去 catch 绑定括号和参数
  • JSON superset ：支持在 es 中允许 json 使用分隔符
const json = 'var str = "hello" \u2029 function foo(){console.log(str)}'
eval(json) // 行分隔符 \2028，段分隔符 \2029
foo() // hello
  • JSON.stringify ：解决 unicode 字符串转换缺陷问题，即便输入错误会转换为普通的字符串储存
const str = '\uD83D\uDE0E' // emoji 表情
console.log(JSON.stringify(str)) // "😎"

ES11 / 2020

  • 动态导入：常用于结合异步组件和 webpack 代码分割功能实现路由懒加载
const obtn = document.querySelector('#btn')
obtn.addEventListener('click', () => {
  import('url').then(mod => {})
})
  • BigInt
    • 新的原始数据类型，通过 数字+n 或 BigInt(val) 声明
    • 最大安全数 2 ** 53 | Number.MAX_SAFE_INTEGER
    • 只有字符串可以储存比最大安全数还大的单位，可以将 BigInt 类型 进行 toString()
const bigInt = 10n
const bigInt2 = BigInt(100n)

console.log(1n == 1) // true
console.log(1n === 1) // false
  • globalThis ：提供了一个标准的方式来获取不同环境下的全局 this 对象
  • 可选链
    • &&
    • ?
const obj = {
  fn() {
    console.log('hello')
  }
}
obj && obj.fn && obj.fn()
obj?.fn?.()
  • 空值合并运输算符 ： ?? 只有当值为 undefined 或 null 才会默认获取默认值
const a = 0 ?? 1
console.log(a) // 0

const b = '' ?? 'hi'
console.log(b) // 空

const c = false ?? false
console.log(c) // false

其他

DGogoing
关注
ECMAScript 2015~2020 语法全解析
←か淡定☆ ヾ 的博客
12-25 224
涵盖ES2015~ES2020每一个版本所引入的新特性，新特性的语法优势、应用场景，在实战项目中的应用。
ECMAScript
七夜的博客
05-30 1128
也称为，是对JavaScript编程语言的重要更新。这是自2009年标准化的以来的第一次重大修订。
ECMAScript详解
weixin_45479891的博客
06-03 837
ECMAScript（简称ES）是由ECMA国际（European Computer Manufacturers Association）通过ECMA-262标准化的脚本语言规范。它是JavaScript的基础，定义了JavaScript的核心语法和功能。本文将详细介绍ECMAScript的语法和使用教程，并附上简单案例。
ECMAScript 2016~2018
qq_39540493的博客
12-06 109
一、JavaScript 字符串填充 ECMAScript 2017 添加了两个 String 方法：padStart和padEnd，以支持在字符串的开头和结尾进行填充。 二、JavaScript 对象条目 ECMAScript 2017 向对象添加了新的Object.entries方法。 三、JavaScript 对象值 Object.values类似Object.entries，但返回对象值的单维数组 四、JavaScript 异...
ECMAScript 详解
qq_42985051的博客
05-25 431
ECMAScript，通常简称为ES，是JavaScript语言的标准规范。它由ECMA国际（European Computer Manufacturers Association）制定并维护，旨在为Web浏览器和其他宿主环境提供一种可移植的脚本语言规范。自1997年首次发布以来，ECMAScript经历了多个版本的迭代，不断引入新特性，优化语言结构，以适应日益复杂的应用开发需求。本文将深入解析ECMAScript的核心概念、发展历程、最新特性以及其在现代Web开发中的应用。
JS笔记（一） ECMAScript部分
Kivitor的博客
03-23 256
后面需要学的大部分都是js基础上的一个个负载方法，提取出了许多门类 专业素养 一个人的厚重感可以和书比，让人信服 web发展史 1993 Mosaic------ 第一个普遍使用的 显示图片的 网页浏览器（马克·安德森，版权在大学手里） ​ 但是伊利诺伊大学把Mosaic版权 — 卖给Spy Glass — 又被微软收购 — 后面变成了IE1.0（图形化界面抄的是乔布斯的） Netscape Navigator 网景 是该团队重做的浏览器 火狐的前生（网景破产后 开放了源码） JavaScrip
ECMAScript中文最新(ECMA262)
12-30
ECMAScript2021中文最新,ECMAScript2021中文文档，第1-6章，持续更新，喜欢请star。git地址https://github.com/fangniyima/ECMAScript-notes
ECMAScript功能：ECMAScript功能速查表
02-05
ECMAScript功能或备忘单 请点击 :star: 如果您喜欢这个项目。 拉取请求受到高度赞赏。 跟随我获取技术更新。 下载PDF / Epub格式 您可以从“上的最新运行中下载此存储库的PDF和Epub版本。 如何执行范例 npm install ...
ECMAScript 2018规范
07-06
ECMAScript 2018规范。 主要包含内容： 异步迭代器：原生支持在 JavaScript 中对异步获取的数据做迭代。 Object Rest/Spread Properties Promise.prototype.finally Template Literal（模板字面量）：取消 ...
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 942
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1421
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 96
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 492
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
npm 安装electron网络问题报错解决
weixin_59685936的博客
09-05 1126
npm 安装electron网络问题报错解决
Nginx部署前端Vue项目
不会代码的小林
09-03 1325
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 775
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
【HTTP、Web常用协议等等】前端八股文面试题
Una的博客
09-01 1483
前端面试中，会被问到网络协议等问题。 欢迎大家订阅 我创作的《前端八股文面试题》专栏。
前端技术演进与未来发展趋势探究
最新发布
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1468
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
ECMAScript规范解析与历史
"ECMAScript Language Specification Edition 3, 24-Mar-00, Edition 3 Final" ECMAScript，通常简称为ES，是一种基于多种原始技术的标准，其中包括最著名的JavaScript（Netscape）和JScript（Microsoft）。这种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值