设计师 网站,有人有片资源吗免费的视频,做网站自己能做百度推广吗,天猫网站建设的理由文章目录 #x1f30d;一. ES6 新特性❄️1. ES6 基本介绍❄️2. 基本使用2.1 let 声明变量2.2 const 声明常量/只读变量2.3 解构赋值2.4 模板字符串2.5 对象拓展运算符2.6 箭头函数 #x1f30d;二. Promise❄️1. 基本使用❄️2. 如何解决回调地狱问题2.1回调地狱问题2.2 使… 文章目录 一. ES6 新特性❄️1. ES6 基本介绍❄️2. 基本使用2.1 let 声明变量2.2 const 声明常量/只读变量2.3 解构赋值2.4 模板字符串2.5 对象拓展运算符2.6 箭头函数 二. Promise❄️1. 基本使用❄️2. 如何解决回调地狱问题2.1回调地狱问题2.2 使用 Promise2.3Promise 的优势 三. 模块化编程 ❄️1. 基本介绍❄️2. CommonJS 模块编程❄️3. ES6 模块编程1. ES6模块的关键特性2. 实践中的注意事项 ♂️ 作者whisperrr.♂️ 专栏JavaWeb 标题【JavaWeb13】了解ES6的核心特性对于提高JavaScript编程效率有哪些潜在影响 ❣️ 寄语比较是偷走幸福的小偷❣️ 一. ES6 新特性
首先给大家推荐俩个学习ES6的网址。 ECMA International 官方网站这个网站提供了 ES6 的官方文档详细介绍了 ES6 的所有特性和规范。这是一个权威且详尽的学习资源适合那些希望深入了解语言规范的开发者。 网址https://262.ecma-international.org/6.0/ 阮一峰的 ES6 教程这是由阮一峰编写的一本关于 ES6 的入门书籍广受前端开发者欢迎。这本书以简单易懂的方式介绍了 ES6 的各种特性非常适合初学者和希望快速掌握 ES6 的开发者。 网址https://es6.ruanyifeng.com/#docs/let ❄️1. ES6 基本介绍
1.ES6 是什么?
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准 2015 年 6 月发布。ES6 设计目标达到 JavaScript 语言可以用来编写复杂的大型程序成为企业级开发语言ECMAScript 和 JavaScript 的关系ECMAScript 是 JavaScript 的规范/规则JavaScript 是ECMAScript 的一种实现
❄️2. 基本使用
2.1 let 声明变量
在ES6ECMAScript 2015中let 关键字被引入用来声明变量它的用法与 var 类似但有以下几个重要的区别
块级作用域let 声明的变量只在它所在的代码块内有效。不存在变量提升let 声明的变量不会被提升到作用域的顶部。暂时性死区在声明之前就使用 let 声明的变量会导致ReferenceError错误。
下面是 let 声明变量的几种基本用法
基本声明
let a;
let b 10;块级作用域示例
if (true) {let message Hello, World!;console.log(message); // Hello, World!
}
// 在这里访问 message 会报错因为 message 是在 if 块中声明的不存在变量提升
console.log(a); // 报错ReferenceError: a is not defined
let a I am not hoisted;只能声明一次,
let num2 600;
let num2 900;num2已经声明过了再次使用let声明会报错 Uncaught SyntaxError: redeclaration of let num2 暂时性死区示例
var tmp 123;
if (true) {tmp abc; // ReferenceError: Cannot access tmp before initializationlet tmp;
}在这个例子中尽管 tmp 在 let tmp; 声明之前已经被声明为一个全局变量但在 let 声明之前访问 tmp 会导致错误因为在 if 块中的 tmp 的暂时性死区内它还未被声明。 使用 let 可以帮助避免JavaScript中常见的一些错误并且使得代码更加安全和易于理解。 2.2 const 声明常量/只读变量 在ES6ECMAScript 2015中const 关键字用于声明一个只读的常量。这意味着一旦一个变量被声明为常量它的值就不能再被改变。下面是 const 声明常量的一些基本用法和规则 基本声明
const PI 3.14159;常量规则
必须初始化声明一个常量时必须同时初始化它的值否则会报错。const FOO; // SyntaxError: Missing initializer in const declaration不可重新赋值一旦声明常量的值就不能再被改变。const MAX_SIZE 100;
MAX_SIZE 200; // TypeError: Assignment to constant variable.2.3 解构赋值
1.基本介绍
解构赋值是对赋值运算符的扩展是一种针对数组或者对象进行模式匹配然后对其中的变量进行赋值主要有两种形式 数组解构和对象解构
2.数组解构 ES6ECMAScript 2016引入了数组解构Array Destructuring它是一种表达式可以方便地从数组中提取值并赋给变量。数组解构的语法形式是在一个赋值操作符的左侧使用一个数组字面量。 以下是数组解构的一些基本用法
//第一种方式
let arr [1, 2, 3];
let [a, b, c] arr;
//第二种方式
let [num1, num2, num3] [100, 200, 300];3.对象解构 ES6ECMAScript 2015同样引入了对象解构Object Destructuring它允许你将对象中的属性直接赋值给变量。对象解构的语法是在赋值操作符的左侧使用一个对象字面量。 以下是对象解构的一些基本用法
//第一种方式
let monster {name: 牛魔王, age: 800};
let {name, age} monster;
//第二种方式
let {name, age} {name: 牛魔王, age: 800};//也可以当做形参
function f1({name, age}) {
console.log(f1-name, name, , f1-age, age)
}
f1(monster);1.把 monster 对象的属性, 赋值给{name,age} 2.{name,age} 的取名 name 和 age 要和 monster 对象的属性名保持一致 3.使用{} 包括, 不要使用[] 4.{name,age} 顺序是无所谓 2.4 模板字符串
模板字符串使用反引号 字符串包裹可作为普通字符串可用来定义多行字符串即可以将换行字符串原生输出字符串插入变量和表达式, 使用 ${}字符串中调用函数
let str1 for(int i 0;i 10;i){
System.out.println(ii);
};let str2 教育名称${name};
let str3 12${1 2};2.5 对象拓展运算符 对象扩展运算符Spread Operator用三个点…表示允许你将一个对象的可枚举属性复制到另一个对象中。这在合并对象、传递参数等场景中非常有用。 合并对象,你可以使用扩展运算符来合并两个或多个对象。
const obj1 { a: 1, b: 2 };
const obj2 { b: 3, c: 4 };
const mergedObj { …obj1, …obj2 };
console.log(mergedObj); // { a: 1, b: 3, c: 4 }在这个例子中obj2 的属性 b 覆盖了 obj1 中的 b 属性。
2.6 箭头函数
1.基本介绍
箭头函数提供更加简洁的函数书写方式。基本语法是(参数列表) { 函数体 }箭头函数没有参数或有多个参数要用 () 括起来,箭头函数只有一个参数, 可以省略()箭头函数函数体有多行语句用 {} 包裹起来表示代码块函数体只有一行语句并且需要返回结果时可以省略 {}, 结果会自动返回箭头函数多用于匿名函数的定义
let f2 (n, m) {
var res 0
for (var i n; i m; i) {
res i
}
return res
};二. Promise
❄️1. 基本使用
1.Promise 基本介绍
传统的 Ajax 异步调用在需要多个操作的时候会导致多个回调函数嵌套导致代码不够直观就是常说的 Callback Hell为了解决上述的问题Promise 对象应运而生在 EMCAScript 2015 当中已经成为标准Promise 是异步编程的一种解决方案。从语法上说Promise 是一个对象从它可以获取异步操作的消息一句话: Promise 是异步编程的一种解决方案, 可以解决传统 Ajax 回调函数嵌套问题
2.需求分析/图解
3.执行效果
❄️2. 如何解决回调地狱问题 下面让我们详细探讨一下如何使用 Promise 来解决传统 Ajax 请求中的嵌套回调问题。 2.1回调地狱问题
在传统的异步编程模式中如果需要按顺序执行多个异步操作比如多个 Ajax 请求通常会写出如下嵌套回调的代码
// 假设我们使用的是 jQuery 的 $.ajax 方法
$.ajax({url: url1,success: function(response1) {// 处理 response1$.ajax({url: url2,success: function(response2) {// 处理 response2$.ajax({url: url3,success: function(response3) {// 处理 response3// 如果还有更多操作继续嵌套...},error: function(error3) {// 处理 error3}});},error: function(error2) {// 处理 error2}});},error: function(error1) {// 处理 error1}
});这种代码结构被称为“回调地狱”因为随着异步操作数量的增加代码变得越来越难以阅读和维护。
2.2 使用 Promise Promise 提供了一种更加优雅的方式来处理异步操作。以下是使用 Promise 改写上述代码的步骤 创建 Promise 对象对于每个异步操作创建一个返回 Promise 对象的函数。
function fetchUrl(url) {return new Promise((resolve, reject) {$.ajax({url: url,success: function(response) {resolve(response);},error: function(error) {reject(error);}});});
}链式调用 .then() 方法使用 .then() 方法来处理每个 Promise 的成功结果并在每个 .then() 方法中返回一个新的 Promise以便链式调用。
fetchUrl(url1).then(response1 {// 处理 response1// 可以返回新的 Promise 或值return fetchUrl(url2);}).then(response2 {// 处理 response2// 继续返回新的 Promisereturn fetchUrl(url3);}).then(response3 {// 处理 response3}).catch(error {// 处理任何在执行过程中出现的错误});在上面的代码中每个 fetchUrl 函数调用都返回一个新的 Promise 对象。当这个 Promise 成功解决resolved时.then() 方法会被调用并传入解决值。如果 Promise 被拒绝rejected.catch() 方法会被调用并传入拒绝的原因。
2.3Promise 的优势
代码扁平化Promise 通过链式调用来避免嵌套回调使代码更加扁平化。更好的错误处理.catch() 方法可以捕获链中任何 Promise 的错误而不是在每个回调中分别处理。可读性和可维护性链式调用使得异步代码的流程更加清晰易于理解和维护。 通过使用 Promise我们可以编写更加清晰和结构化的异步代码避免了回调地狱并提供了更强大的错误处理机制。
三. 模块化编程
❄️1. 基本介绍
传统非模块化开发有如下的缺点(1)命名冲突 (2)文件依赖Javascript 代码越来越庞大Javascript 引入模块化编程开发者只需要实现核心的业务逻辑其他都可以加载别人已经写好的模块Javascript 使用模块module的概念来实现模块化编程, 解决非模块化编程问题
2.模块化编程原理示意图
❄️2. CommonJS 模块编程 每个 js 文件就是一个模块有自己的作用域。在文件中定义的变量、函数、类/对象都是私有的对其他 js 文件不可见CommonJS 使用 module.exports{} / exports{}导出 模块 , 使用 let/const 名称 require(xx.js)导入模块 CommonJS 是一种模块规范最初被用于服务器端的 JavaScript 环境尤其是 Node.js。它定义了一种简单的方式来创建和消费模块。以下是 CommonJS 模块编程的基本概念和用法
1.模块定义
在 CommonJS 中一个模块是一个文件。模块可以通过 module.exports 对象来导出值也可以通过 exports 变量来导出多个成员。以下是导出一个函数的例子
// myModule.js
function myFunction() {// ...
}
module.exports myFunction;或者如果你想要导出多个函数或对象
// myModule.js
function myFunction() {// ...
}
function anotherFunction() {// ...
}
exports.myFunction myFunction;
exports.anotherFunction anotherFunction;2.模块引用 要使用一个模块你可以使用 require 函数来引入它。require 函数会返回模块导出的对象。
// main.js
const myModule require(./myModule);
myModule.myFunction();如果模块导出的是一个函数或单个值你可以直接使用它
// main.js
const myFunction require(./myModule);
myFunction();3.模块缓存 Node.js 会缓存通过 require 加载的模块。这意味着每次调用 require 时如果模块已经被加载过它会返回缓存的模块而不是重新加载。 特点 同步加载CommonJS 模块是同步加载的这意味着模块加载时会阻塞后续代码的执行直到模块加载完成。循环依赖CommonJS 可以处理模块间的循环依赖但是需要小心处理因为可能会出现只部分加载的情况。 以下是一个简单的 CommonJS 模块化编程的例子
// math.js
exports.add function(a, b) {return a b;
};
exports.subtract function(a, b) {return a - b;
};
// main.js
const math require(./math);
console.log(math.add(1, 2)); // 输出 3
console.log(math.subtract(5, 2)); // 输出 3在这个例子中math.js 模块导出了两个函数main.js 通过 require 引入了这个模块并使用了它的功能。 CommonJS 模块规范在 Node.js 和一些浏览器环境中得到了广泛的支持但是在浏览器环境中通常使用 ES6 Modules 或 AMD 作为模块化的解决方案。 ❄️3. ES6 模块编程 ES6 使用 (1)export {名称/对象/函数/变量/常量} (2) export 定义 (3) export default {}导出模块使用 import {} from xx.js / import名称 form xx.js 导入模块 ES6模块化编程是JavaScript语言的一个重要进步它为开发者提供了一种官方的、标准化的方式来组织和重用代码。在此之前JavaScript社区已经尝试了多种模块化方案如AMD、CommonJS等但它们都是非标准的或者在某些环境中有限制。ES6模块的引入标志着JavaScript在语言层面上对模块化的正式支持。 1. ES6模块的关键特性
导出Export与导入Import ES6模块通过export和import关键字来管理模块的对外接口和依赖关系。这使得模块之间的交互变得直观且易于理解。你可以导出单个变量、函数、类或者整个模块对象也可以导入一个模块中的特定部分或者整个模块。默认导出Default Export 默认导出允许一个模块导出一个没有名字的值这在使用模块时提供了更大的灵活性。每个模块只能有一个默认导出但可以与多个命名导出共存。编译时加载 与CommonJS的运行时加载不同ES6模块是在编译时进行加载的。这意味着模块的依赖关系在代码执行之前就已经确定这有助于提高性能并允许进行更多的编译时优化。树摇Tree Shaking 由于ES6模块的静态结构未使用的导出可以在打包过程中被移除这个过程被称为“树摇”。这有助于减少最终打包文件的体积提高应用的加载速度。命名空间导出Namespace Export ES6模块还支持命名空间导出允许你将多个导出聚合到一个对象中。这对于组织大量导出非常有用可以避免命名冲突。
2. 实践中的注意事项
浏览器支持虽然现代浏览器支持ES6模块但在使用时可能需要设置正确的MIME类型并在script标签中使用typemodule。服务器端渲染在Node.js等服务器端环境中可能需要使用特定的模块解析策略或转换工具如Babel来兼容ES6模块。打包工具在实际开发中通常会使用Webpack、Rollup等打包工具来处理模块依赖优化生产环境下的代码。 ES6模块化编程不仅提升了代码的可维护性和可重用性也为JavaScript的生态系统带来了标准化和一致性。随着现代前端框架和工具链的发展ES6模块已经成为编写现代JavaScript应用程序的基石。
