浅谈es6+大杂烩

最新推荐文章于 2025-06-14 16:11:41 发布
原创 最新推荐文章于 2025-06-14 16:11:41 发布 · 378 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#es6 #前端 #大

本文深入探讨JavaScript的高级特性，包括变量解构、函数扩展、原型链、柯里化函数、函数式编程及工程化实践。解析变量声明方式、作用域、Iterator接口、函数参数默认值、原型继承机制、柯里化概念、函数式编程原则及模块化、组件化等现代开发流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、变量解构

       变量6种声明的方式：var、let、const、import、class、function

  1. 什么是变量解构？
           从数组或者对象中获取值，并将值赋值，则称为变量解构,分为完全结构，不完全结构，结构错误
  2. 作用：
    2.1 能迅速获取数据
    2.2 代码清晰
    2.3 对函数参数初始化赋值
  3. let、const和var区别：
    var会进行变量提升，即在变量声明前可以赋值；
    let变量声明前会形成暂时性死区，从而形成块级作用域，有点类似于闭包
    const也会形成暂时性死区，从而形成块级作用域，而且该变量无法修改
  4. 顶层对象
           在浏览器中指：window，浏览器的窗口对象；在系统中指：global；
           js最大的败笔就是将全局变量和顶层变量挂钩了，不利于模块化编程。
  5. Iterator接口
           Map、Set、Array、Object是集合，那么遍历集合就是一个基本要求，而Iterator则提供了一种统一的接口机制，任何的数据结构部署Iterator接口机制即可以遍历。
           Map、Set、Array默认是带有Iterator接口机制的，Object是没有，原因：Map数组等是线性结构，有一定的顺序，先遍历谁后遍历谁，都是特定的，但是Object没有确切的数据顺序，需要先转换成线性结构才能部署Iterator接口
二、函数扩展

1、函数参数默认值

  • 能够迅速看到哪些参数是可以省略，不用查看函数或文档
  • 促进后期维护，当不需要传参时，不会引起报错

2、与解构赋值默认值结合使用

3、函数length属性

  • 此处的length返回值是函数减去了默认赋值的参数数量

4、作用域

  • 因为有参数进行声明初始化，则会形成一个作用域context

5、函数只要使用了默认值、变量解构、或者扩展运算符，那么函数内部就不能显式设定为严格模式。

  • 原因：函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，先执行函数参数，再执行函数体

6、rest参数

  • 形式为…变量名:用于获取函数的多余参数，这样就不需要引入arguments，rest参数是一个数组，将多余的参数放入数组中
三、原型链

1、javascript是一种基于原型的语言——每个对象都拥有一个原型，对象以其原型为模板、从原型继承方法和属性。原型对象中也有可能存在原型，层层剥离，从而形成原型链：这就是为什么一个对象中会拥有定义为其他对象中的属性和方法。

2、constructor属性

  • 每个实例对象都从原型中继承了一个constructor属性，该属性指向了用于构造此实例对象的构造函数。

3、对象：唯一有继承

  • 每个实例对象都有一个私有属性（称之为__proto__）指向它的原型对象，该原型也有一个自己的原型对象，层层向上直到一个对象为null。而null没有原型，作为原型链中的最后一个环节。

4、介绍下三位大哥
原型中还有原型

  • prototype：原型对象，下的constructor指向的是自己
  • constructor：构造函数指向的是子类
  • proto:原型指向的是子类的原型对象
四、柯里化函数

1、所谓"柯里化"，就是把一个多参数的函数，转化为单参数函数
2、不立即计算，延后执行
3、符合计算的条件，将缓存的参数，统一传递给执行方法
4、当一个变量需要转换类型时，会调用自身的valueOf，如果调用失败则会去调用toString()

五、函数式编程

1、开始：数学的范畴论，跟数理逻辑、微积分、行列式是一类东西，都是数学方法，碰巧用来写编程
2、函数式又分为：纯函数（不会引出额外的问题），非纯函数（会：比如改变全局变量，改变参数值，传出参数值）
3、开始数学只是去输入一个值，原始目的就是求值，不做其他事情，否则无法满足函数运算法则，所以函数式编程要求函数必须是纯的。
4、函子是函数式编程里最重要的数据类型，也是基本的运算单位和功能单位。
5、函数的调用，尾调用会形成一个调用栈，尾调用即是函数的最后一步操作。
6、递归是非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生‘栈溢出’错误。
7、递归和尾递归

  • 递归：指的是程序调用自身的编程技巧，一般递归是需要有边界条件，满足条件时，为递归前进，不满足则递归返回。
六、工程化

组件化指的是在设计层面上，对ui进行拆分，从而形成若干个组件，页面是最大的组件，而dom是最小的组件；
模块化指的是讲一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。
自动化指的是用很多工具来帮我们完成工作。
规范化指的是规范一些方式，减少后期维护工作：

  • 目录结构制定
  • 编码规范
  • 前后端接口规范
  • 文档规范
  • 代码模块化管理
  • ui组件管理
  • git分支管理
  • commit描述规范
  • 定期code review
  • 视觉图标icon规范
  • 服务部署
  • 打包规范
  • 框架使用管理
前端学习之ES6+
qq_56101688的博客
11-08 1664
let、const 与 var 的区别
ES6+(一)
weixin_47799089的博客
04-07 603
现阶段前端行业发展迅猛，前端技术也在高速迭代，ES6-ES11规范增加了很多JavaScript新特性。ES新特性已经成为前端技术发展的趋势，语法简洁，功能丰富，部分特性还有性能提升。 ES6的兼容性： 主流浏览器的最新版本几乎全部支持ES6 IE老版本等不支持的浏览器，可以用Babel转码 let与const： let 和 const是用来声明变量与常量，声明变量let代替var声明变量，const声明常量。 let与const的用法： var与let声明的就是变量，变量初始化之后，还可以重新赋值。
es6+node
weixin_34376986的博客
11-26 148
安装全局的babel 在命令提示符下，输入下面命令： npm install babel-cli babel-eslint -g 完成后，可以输入 babel --version 可以显示babel的版本号 用npm init创建工程 如果已创建，则跳过 在控制台下，建好工程目录，如:d:\work\firstnode 然后进入该目录 d:cd d:\work\firstnoden...
ES6+ 前端模块化开发指南
最新发布
小白菜的博客
06-14 802
本文专为解决前端开发中的“代码混乱”问题而生，覆盖ES6+模块化的核心语法（exportimport）、模块作用域、工程化实践（用Vite打包），以及大型项目中的实际应用。无论你是刚学前端的新手，还是被“全局变量污染”逼疯的老司机，都能找到答案。本文先通过“超市货架”的故事引出模块化需求，再用“工具箱”比喻讲解核心概念，接着用代码示例演示语法细节，最后通过实战项目（用Vite搭建模块化应用）带你亲手实现。模块：独立JS文件，封装功能（工具箱）。导出：暴露工具（贴标签），分命名导出（）和默认导出（导入。
ES6+
qq_35112578的博客
08-15 214
闭包
ES6 +
青蛙king的博客
09-28 1143
目录一、ES6(2015)二、ES7(2016)1、Array.prototype.includes()2、幂运算符**3、模板字符串扩展三、ES8(ES2017)1、async/await2、对象（1）、Object.values()（2）、Object.entries()（3）、Object.getOwnPropertyDescriptors()3、padStart() 和 padEnd()4、ShareArrayBuffer四、ES9(ES2018)1、for await…of2、模板字符串扩展3、正
浅谈react+es6+webpack的基础配置
08-29
浅谈React+ES6+Webpack的基础配置 React是一款流行的前端框架，ES6是最新的ECMAScript语法规范，Webpack是一个强大的模块打包工具。本文将带领大家从头开始，学习如何配置React+ES6+Webpack的基础环境。 一、安装...
Web前端模块化开发教程（ES6+Node.js+Webpack）_源代码.zip
06-29
本教程主要围绕Web前端的模块化开发展开，利用ES6的语法特性、Node.js环境以及Webpack工具进行深入探讨。在现代Web开发中，模块化已经成为不可或缺的一部分，它有助于提高代码的可读性、可维护性和复用性。下面将...
ES6 + Mock.js + vue2.0 全家桶开发的使用前家居分离的外卖App 开发文档、流程完整剧情，非常适合作为个人练手项目 .zip
12-01
项目描述此项目为一个前床分离的外卖 Web 应用程序 (SPA) 项目使用了Vue全家桶+ES6+Webpack等前端最新技术包括商家、商品、购物车、用户等多个功能子模块采用模块化、组件化、工程化的模式开发2. 你能通过项目中学到...
谈谈你对ES6的理解
LuckXinXin的博客
06-08 1273
新增模板字符串（为JavaScript提供了简单的字符串插值功能） 箭头函数 for-of（用来遍历数据—例如数组中的值。） arguments对象可被不定参数和默认参数完美代替。 ES6将promise对象纳入规范，提供了原生的Promise对象。 增加了let和const命令，用来声明变量。 增加了块级作用域 let命令实际上就增加了块级作用域。 还有就是引入module模块的概念 ...
【web】ES6+
博客
10-25 1256
第7 个数据类型：symbol（） 产生一个唯一的值，不可控 全称：ECMAScript6 弱类型语言：在编译过程中确定数据类型
浅谈ES6新特性
Darlingmi的博客
09-26 232
一、let及const 1、ES6新增的两种新的声明格式        let 和const 用于补全ES5标准中var声明变量的不足：在JavaScript中用’var’来声明变量会出现变量提升的情况，即通过"var"声明的变量系统都会把声明隐式的升至顶部，这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应，导致程序出现问题。 2、ES5中定义作用域有两种     &nbs
“ ES6+ —— 让你的JavaScript代码从平凡到精彩 “
技术前端，忠于热爱 @0.活在风浪里
04-27 3191
Es6 + 特性
ES6基础
weixin_50150881的博客
04-20 150
1、Object的基本使用与构造函数的属性： Object 构造函数创建一个对象包装器 语法 参数 在JavaScript中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和 方法。 Object 构造函数为给定值创建一个对象包装器。 Object 构造函数，会根据给定的参数创建对 象，具体有以下情况 （1）、如果给定值是 null 或 undefined ，将会创建并返回一个空对象 （2）、如果传进去的是一个基本类型的值，则会构造其包装类型的对象
关于ES6的一些浅薄的看法（1）
javascript_k的博客
01-10 953
最近决定专心的研究一下ES6，然后自己上网看看资料，有一点小小的收获，给大家分享一下。 ES6说简单的确是简单的，因为它相对于ES5来说，是一种优化，等于说是间接的减少了我们学习JS的难度，并且它也一直都在完善。听到这里，大家一定都很疑惑，为什么说它在完善呢？其实，现在的ES6并没有完整，而是在开发阶段，而且近几年，一年发布一个最新的版本。所以目前为止的最新版本是ES2016版本的。 好了，也不再说
谈谈ES6语法（汇总上篇）
weixin_30810239的博客
07-12 100
ES6可以说是一个泛指，指5.1版本以后的JavaScript的下一代标准，涵盖了ES2015,ES2016,ES2017等；亦指下一代JavaScript语言。 背景 嗯～ES6的语法有什么好谈的，无聊了吧？ 确实，语法糖的东西真的是学起来如嚼蜡 -- 淡无味；但是要用别人的东西来开发的，你学还是学呢？ 所以，还是简单谈下吧... 本次的ES6语法的汇总总共分为上、中、下三篇，本篇文章为上篇。 ...
ES6+(三)
weixin_47799089的博客
04-27 523
ES6语法扩展： 剩余参数： 1.认识剩余参数 2.剩余参数的本质=== >剩余参数永远是个数组，即使没有值也是一个空数组 剩余参数的默认值： 1.箭头函数的剩余参数 箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号 2.使用剩余参数替代arguments获取实际的参数 3.剩余参数的位置 剩余参数只能是最后一个参数，之后不能再有其他的参数，否则会报错 展开运算符： 数组的展开运算符： 数组的展开运算符的基本使用 1.认识展开运算符 2.数组展开运算符的基本用法 区分剩余参数和展
es6+什么意思
04-01
<think>嗯，用户问的是“es6+什么意思”，首先我需要确认用户对ES6的了解程度。可能他们听说过ES6，但不太清楚具体指的是什么，或者后面的“+”号代表什么。 首先，ES6是ECMAScript 2015的简称，是JavaScript的一个重要版本。用户可能知道JavaScript，但可能不清楚版本之间的差异。需要解释清楚ES6的全称和发布时间，以及它带来的重大更新。 接下来，“+”号可能表示ES6之后的版本，比如ES7、ES8等。用户可能想了解这些后续版本的新特性，或者想知道“ES6+”作为一个整体术语在开发中的意义。这时候需要说明ES6+通常指的是ES6及之后的版本，涵盖了从2015年至今的JavaScript新特性。 用户可能是在学习前端开发时遇到了这个术语，或者在技术文档中看到，想要了解其重要性。需要强调ES6+对现代JavaScript开发的影响，比如模块化、箭头函数、类、异步处理等，这些都是现代开发中的常用特性。 可能用户的实际需求是想要了解学习ES6+的必要性，或者是在项目中使用ES6+的好处。这时候需要分点列出ES6+的关键特性，并说明每个特性如何改进开发效率和代码质量。 另外，用户可能对版本命名方式有疑问，为什么从ES6之后改为按年份命名。需要简单解释ECMAScript的版本发布策略变化，帮助用户理解ES2015、ES2016等名称的由来。 最后，用户可能想知道如何开始学习ES6+，或者有哪些资源推荐。不过根据当前问题，可能不需要展开，但可以提到掌握ES6+对前端开发者是必备技能，鼓励深入学习。 需要确保回答结构清晰，分点明确，使用示例帮助理解，同时语言简洁，避免技术术语过于复杂。另外，用户之前关于作用域的问题中，提到了JavaScript的作用域类型，可能用户有JS基础，因此可以适当联系之前的知识点，比如块级作用域与let/const的关系，属于ES6的内容，加强连贯性。 总结回答的结构：定义ES6+，解释版本演变，关键特性，重要性，最后总结其意义。确保每个部分都有具体例子，比如箭头函数、解构赋值等，让用户更直观地理解。</think>### 一、ES6+ 的定义 **ES6+** 是 **ECMAScript 2015（ES6）及后续版本** 的统称，代表从2015年开始发布的现代JavaScript语言标准。ES6是JavaScript自1997年标准化以来 **最重要的升级**，而“+”符号表示其后续版本（如ES7/ES8/ES9等，现按年份命名为ES2016+）。 --- ### 二、版本演进与命名规则 1. **ES6（ES2015）** - 发布于2015年，原名ES6，后统一改为按年份命名（ECMAScript 2015）。 - **里程碑式更新**，引入了类、模块化、箭头函数等核心特性。 2. **ES2016+** - 2016年起每年发布新版本，命名规则改为 **ES+年份**（如ES2016、ES2023）。 - **增量更新**，逐步添加新功能（如`async/await`、可选链操作符`?.`）。 --- ### 三、ES6+ 的核心特性（部分示例） #### 1. 声明变量：`let` 与 `const` - 替代`var`，支持 **块级作用域**： ```javascript if (true) { let x = 10; // 仅在块内有效 const y = 20; // 常量 } ``` #### 2. 箭头函数（Arrow Functions） - 简化函数语法，自动绑定外层`this`： ```javascript // 传统函数 const sum = function(a, b) { return a + b; }; // 箭头函数 const sum = (a, b) => a + b; ``` #### 3. 解构赋值（Destructuring） - 从数组或对象中提取值： ```javascript // 数组解构 const [a, b] = [1, 2]; // 对象解构 const { name, age } = { name: "Alice", age: 25 }; ``` #### 4. 类（Class） - 提供面向对象的语法糖： ```javascript class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, ${this.name}!`); } } ``` #### 5. 模块化（Modules） - 支持`import`/`export`管理代码： ```javascript // math.js export const add = (a, b) => a + b; // app.js import { add } from './math.js'; ``` #### 6. 异步处理：`Promise` 与 `async/await` - 解决回调地狱，简化异步操作： ```javascript async function fetchData() { const res = await fetch('https://api.example.com'); const data = await res.json(); return data; } ``` --- ### 四、ES6+ 的重要性 1. **开发效率提升**：语法更简洁（如箭头函数、模板字符串）。 2. **代码可维护性增强**：模块化、类等特性支持大型项目。 3. **功能现代化**：`Promise`、`Proxy`等特性解决传统JS痛点。 4. **浏览器与Node.js全面支持**：现代环境已原生支持ES6+。 --- ### 五、ES6+ 的兼容性处理 若需兼容旧浏览器（如IE11），可通过工具转换代码： 1. **Babel**：将ES6+代码转译为ES5语法。 2. **Polyfill**：补充缺失的API（如`Promise`）。 --- ### 六、总结 - **ES6+** = ES2015及后续版本，代表现代JavaScript标准。 - **核心价值**：语法简化、功能增强、工程化支持。 - **学习建议**：掌握ES6+是前端开发的必备基础，建议从`let/const`、箭头函数、解构赋值等高频特性入手。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值