Web前端

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

从 ES2021 到 ES2023 的 13 个实用的 JavaScript 新功能

浏览 1219 扫码 分享 2023-12-25 15:41:02

若有收获，就点个赞吧

0 人点赞

上一篇:
下一篇:
  • 书签
  • 添加书签 移除书签
  • 前端开发工具
    • WebStorm个性化开发配置
    • 10 个 VS Code 使用技巧
      • 提高生产力的10个必备VS Code技巧和窍门
      • 10个极大提高开发效率的 VSCode 技巧
      • VSCode 前端插件推荐
    • 提效工具-locatorjs
    • 开发者必备的 7 款效率提升工具
      • 45个实用的前端开发工具汇总
      • 63 个面向前端开发人员的开源项目工具
      • 前端开发者应知道的25个实用网站
      • 9个对Web开发人员有用的CSS工具
      • 14个前端开发者实用网站
    • 15 个对 Web 开发人员有用的代码共享网站
  • HTML
    • Notes
      • 24 HTML 属性提升开发效率
        • 7个提升用户体验的HTML属性
        • 11个 HTML 属性
        • 7个实用的HTML属性
      • HTML标签
        • 9个高级的HTML功能
        • 11 个非常特别的 HTML 标签
        • 【HTML】meta 标签
        • Video标签
      • 10个好用的 HTML5 特性
        • 15 个 HTML 新特性
      • HTML6 新特性
      • 关于script标签中type的使用
      • HTML5 LocalStorage 的 5 个不为人知的事实
    • DevNotes
      • iframe有什么好处，有什么坏处？
        • 网站禁用Iframe链接
      • 响应式布局新方案
      • 5个HTML技巧
        • HTML小技巧
      • 移动端 H5 开发相关问题
      • 将视频设置为网页背景
      • 使用CSS创建卡通动画加载效果
      • 液体填充效果
      • 反射效果的实现
      • 烟熏效果的实现
      • 3D文字效果的实现
      • 轮播图实现
        • 纯CSS实现可点击切换的轮播图
        • 实现轮播图
      • 可拖曳滚动条实现
      • 为什应该使用Picture标签而不是Img标签
  • SVG
  • CSS
    • Notes
      • Google I/O 2023：最新 CSS 特性解读！
        • 2023 年 CSS 新特性大盘点
        • 令人期待的 CSS 新功能：让编码更高效
        • CSS @scope 如何取代 BEM
      • 2022 年的 CSS 全览
        • State of CSS 2022
        • 2022 年 CSS 新增的特性
        • 新的 CSS 属性：aspect-ratio 为元素设置宽高比
        • CSS容器查询
        • CSS 原生嵌套语法
          • 现代 CSS 解决方案：原生嵌套（Nesting）
          • 主流浏览器都支持原生 CSS 嵌套
        • CSS新规范：样式查询
        • 3 个即将推出的 CSS 特性
      • 10个CSS新功能（2021版）
        • CSS Custom Highlight
        • CSS新特性 @layer
        • CSS新特性
      • CSS 基础核心知识
        • CSS学习的方法论
        • CSS常用知识点
        • CSS 基础——核心知识
        • CSS属性：inherit、initial、unset、revert
        • :is(), :where(), 和:has()伪元素的运用
          • :has 语法
        • 深入解析 CSS 选择器
          • CSS 选择器
        • 5 个好用的 CSS 伪元素
          • 9 个实用的 CSS 伪元素
        • CSS - position
          • CSS粘性定位的工作原理
        • CSS之z-index的用法
      • CSS函数
        • 新 CSS Math方法：rem() 和 mod()
        • CSS 实用函数
        • 有趣的 CSS 数学函数
        • 5个好用的CSS函数
        • CSS 解决方案：数学函数之 min、max、clamp
        • CSS 数学函数之 calc
          • CSS 动态计算，calc使用指南
          • 使用CSS3的calc()宽度计算做响应模式布局
          • CSS中calc(100%-100px)不加空格不生效的问题
        • CSS filter函数用途
          • CSS神奇而强大的filter属性
      • CSS变量
        • CSS 变量由浅入深
      • CSS 单位
        • 新Viewport单位
        • Chrome 发布新的 CSS 视口单位：svh、lvh、dvh
        • CSS3 新单位 ch 和等宽字体
      • Flex 布局
        • flex属性align-content
        • flex 布局总结
        • 用Flex实现三栏等宽布局
      • CSS Grid 布局
        • CSS Grid 布局
      • 现代 CSS 颜色指南
        • 2023 CSS3 新魔法color()
        • 探索 CSS 颜色的新功能
      • CSS 居中完全指南
      • CSS mask遮罩层详解
      • CSS 重排、重绘和合成
      • CSS中的宽高比
        • CSS 文本换行
      • CSS 中重要的 BFC
        • BFC
        • BFC、IFC、GFC 和 FFC
      • CSS盒子模型
      • CSS 中的 : 和 :: 的区别
        • 深入理解 : 和 ::
      • CSS解析原理分析
      • CSS Houdini 技术简介
      • CSS 新特性 contain，控制页面的重绘与重排
      • CSS的设计模式/架构
    • DevNotes
      • 常用CSS代码 | 文字与字体
      • font-weight 设置导致在 Windows 上网页不显示加粗效果
      • 不再需要 JS 做的 5 件事
      • 借助 CSS 来监听事件
      • 使用 CSS 制作动画的 12 条原则
      • 高级动画实现思路
        • 使用CSS创建高级动画
      • CSS 中几种最常用的水平垂直居中的方法
        • 8 种CSS实现内容居中的方法
      • CSS 简写中的坑
      • 如何优雅的写CSS代码
      • 页面导入样式时使用link和@import的区别
      • 一行 CSS 实现 10 种强大的布局
      • 20 个防御式 CSS 开发经验
        • 防御式CSS以及几个重点防御属性！
      • 10 个CSS技巧前端开发必知的知识点
        • CSS实践系列
      • CSS实现一些精美的UI效果
        • CSS实现故障风格文字动画
      • 10个CSS3动画工具
      • CSS的hover效果
      • 利用属性选择器对外部链接进行样式设计
      • 改善 CSS 的 10 个最佳实践
        • 如何提高 CSS 性能 ？
        • A Guide to CSS Rules - CSS 规则书写指南
      • CSS布局和块格式化上下文
      • SCSS代码优化技巧
      • CSS 实现响应式布局
      • CSS 的object-fit与object-position让图片完美适应
      • CSS 自定义形状网格布局
      • CSS个人博客样式特效实例
      • 设置 CSS 颜色属性的最佳方法
      • 提高CSS性能
      • 提高 Web 页面渲染速度的7个技巧
        • 两行 CSS 提升渲染性能7倍！
        • 提升页面CSS渲染速度
        • 使用CSS提升页面渲染速度
        • CSS优化长列表网页的渲染性提升
        • 使用 content-visibility 优化渲染性能
      • 删除未使用的 CSS 代码
      • 通过CSS盗取密码
    • 19 个 CSS 高级技巧汇总
      • 22个实用的CSS技巧
      • 13 种有用的 CSS 技术
      • 7个实用的CSS技巧
      • 12 个实用的高级前端 CSS 技巧
      • 9个鲜为人知的CSS属性
      • 15个强大的CSS属性
      • 常用的CSS3属性
      • 5个编写CSS方式的新功能
      • 10个强大的CSS属性
      • 12 个强大的现代 CSS 技术
      • 20 个超级实用的 CSS 技巧
      • 18个很有用的 CSS 技巧
      • 惊艳的 CSS 属性
      • 优化 CSS 代码的12个小技巧
      • 10 个不错的 CSS 小技巧
      • 19 个 CSS 技巧
      • 有趣且实用的 CSS 小技巧
      • 在 CSS 中隐藏元素的 10 种方法
        • CSS中隐藏页面元素的几种方式和区别
        • 8 种在 CSS 中隐藏元素的方法汇总
      • 8则纯CSS布局排版技巧
        • 42 种前端常用布局方案
      • 5个实用的CSS技巧
      • 20 个 CSS 高级技巧汇总
      • 29个CSS选择器的使用与汇总
      • 十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）
      • 5个很棒CSS功能
      • 20 个 CSS 快速提升技巧
      • CSS ::marker伪元素，修改li的项目符号颜色，字号字体
    • CSS实例
      • CSS 按钮样式：悬停、颜色和背景
      • 网页置灰功能实现
        • 如何在网页置灰的前提下，保持部分元素彩色
      • 多行文本下的文字渐隐消失术
      • CSS 补全字符串
      • CSS3实战汇总
      • CSS 实现可拉伸调整尺寸的分栏布局
      • CSS 实现按钮点击动效的效果
      • 动画控制
      • CSS mask 实现鼠标跟随镂空效果
      • 纯CSS实现：渐变+滚动的边框
      • CSS 实现烟雾效果
      • 炫酷的 CSS 文字效果之诗词《兔》
      • CSS 实现微信朋友圈的九宫格图片自适应
      • CSS 实现极光特效
        • CSS 实现烟花动画
      • 巧妙实现自适应宽度的内容输入框
      • 使用 CSS 轻松实现高频出现的各类奇形怪状按钮
      • 19个CSS唯美的边框
      • CSS 实现电子时钟
      • CSS 可以做的 4 件事
      • 巧用模糊实现文字的 3D 效果
      • CSS使用 resize 实现强大的图片拖拽切换预览功能
      • 不同样式 tooltip 对话框小三角的 CSS 实现
      • 使用CSS3实现酷炫的3D旋转视图
      • CSS 实现自定义滚动条样式
      • CSS隐藏垂直滚动条但同时需保持滚动
      • 使用 CSS 控制动画行进
      • 纯 CSS 实现拖拽效果
      • 借助 CSS 来监听事件
      • CSS 实现透明方格的 3 种方式
    • 工作中常用的CSS技巧总结
      • 9个冷门的CSS3属性
      • 纯 CSS 实现带连接线的树形组件
      • 前端工作中常用 CSS 知识点整理
      • CSS 防止按钮重复点击
      • CSS 性能效率提升技巧
      • 使用 HTML/CSS 实现进度条的 N 种方式
        • 纯 CSS 美化 input range 滑动输入条
      • CSS巧妙实现文本"不定行数"截断
      • 巧妙实现不定宽溢出文本循环滚动展示
      • 几个 CSS 专业技巧
      • 49 个CSS 样式清单整理
      • CSS基础——常见需求实现
      • CSS实现现代的10种布局
      • 9种HTML中通过CSS方式隐藏元素的方法
      • CSS清除浮动的几种方法
      • 5种实现CSS底部固定的方法
      • CSS 进度条实现的几种方式
      • 三种 Loading 制作方案
        • 纯CSS实现Loading加载效果
        • CSS 实现动态线条 Loading 动画
      • 3种CSS简单方法实现文字竖向排版
      • CSS实现强制换行的解决方法
      • CSS 实现多行文本“展开收起”
    • Sass语言声明和引用变量
      • SASS 技巧
      • Scss
    • 10个实现炫酷UI设计效果的CSS生成工具
      • 9个CSS网格生成器
      • 64 个超级有用的 CSS 资源
      • 30 多个 CSS 动画资源
      • 10个适合Web开发的最佳 CSS 生成器工具
      • 12 个非常棒的CSS形状生成器
      • 13+ 有趣的 CSS 工具/库
      • 10个可视化 CSS 工具， 快速生成 CSS 片段
      • 9个免费的 CSS 生成器网站
    • 使用 Postcss增强 CSS 代码
    • Framer Motion 布局动画
    • 5 个 火 的 CSS 项目
    • 原子化真的是现代前端 CSS 的救星吗
      • 原子CSS引擎——unocss
  • ECMAScript
    • ES2023 ～ ES2016 最全 JavaScript 新特性指南
      • 从 ES2021 到 ES2023 的 13 个实用的 JavaScript 新功能
      • 2023款ECMAScript
        • ECMAScript 2023 新特性
        • ES2023最新更新
      • ECMAScript 2022 新特性
        • ES2022 8个实用的新功能
      • ES 2021 新特性
    • ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
      • ES7、ES8、ES9、ES10、ES11、ES12新特性
      • JavaScript 从 ES6 到 ES12 新特性汇总
      • ES6—ES13开发技巧
      • ES7-ES12知识点
      • ES7～ES12新特性
      • ES7-ES12必学知识点
    • ES6 特性
      • ES6 知识总结
      • 22个ES6知识点汇总
      • ES2020 中 Javascript 12 个新功能
      • ECMAScript 6—字符串的扩展
        • ECMAScript 6—字符串的新增方法
      • ECMAScript 6—数值的扩展
      • ECMAScript 6—函数的扩展
      • ECMAScript 6—数组的扩展
      • ECMAScript 6—对象的扩展
        • JavaScript Object 对象的用法
        • ECMAScript 6—对象的新增方法
        • JavaScript Object.keys() 排序问题的深入探索
      • ECMAScript 6—Symbol
        • Symbol
        • Symbol
        • JavaScript 中 Symbol 内置属性的一些妙用
        • ES6 symbol 的应用场景
      • ECMAScript 6—Proxy
        • Proxy的使用
      • ECMAScript6—Reflect
        • 为什么 Proxy 一定要配合 Reflect 使用？
      • ECMAScript6—Promise 对象
        • JavaScript 中的 Promise，变化与优化
        • Promise的源码实现
        • ​Promise面试
      • ECMAScript 6—Set 和 Map 数据结构
      • ECMAScript6—Iterator 和 for...of 循环
        • ES6 迭代器和生成器
      • ECMAScript 6—Generator 函数的语法
        • ECMAScript6—Generator 函数的异步应用
        • JavaScript 中的 Generator 有什么用？
        • ECMAScript6—async 函数
        • ECMAScript6—异步遍历器
      • ECMAScript6—Class 的基本语法
        • ECMAScript6—Class 的继承
        • JavaScript中constructor, prototype, __proto__
      • ECMAScript6—Module的语法
        • ECMAScript6—Module的加载实现
        • ECMAScript模块
    • ECMAScript 规范
    • 什么是CommonJs和ES Module及它们的区别
      • 为什么模块循环依赖不会死循环？CommonJS和ES Module的处理有什么不同？
      • 浏览器中的 ESM
      • 前端模块化详细了解
      • 掌握前端模块化