网站怎么做下载链接,怎么找公众号帮推广,网站开发的过程中遇到的难题,贵阳市观山湖区建设局网站认识ES6
概述
ES6表示ECMAScript规范的第六版#xff0c;正式名称为ECMAScript 2015#xff0c;ECMAScript是由ECMA国际标准组织制定的一项脚本语言的标准规范化#xff0c;引入了许多新特性和语法。
其中包括箭头函数、let和const声明、类、模板字符串、解构赋值、参数默…认识ES6
概述
ES6表示ECMAScript规范的第六版正式名称为ECMAScript 2015ECMAScript是由ECMA国际标准组织制定的一项脚本语言的标准规范化引入了许多新特性和语法。
其中包括箭头函数、let和const声明、类、模板字符串、解构赋值、参数默认值、展开操作符、Promise等等。这些新的特性让JavaScript更加现代化、灵活和易于使用。
ES6可以在大多数现代浏览器中使用也可以通过Babel等工具转换为ES5的语法以支持更旧的浏览器。除了浏览器之外ES6还可以在Node.js环境下使用。总的来说ES6已经成为现代JavaScript开发的标准被广泛应用于各种前端和后端项目中。
ES6的目的是使JavaScript语言适应更复杂的应用实现代码库之间的共享并迭代维护新版本成为企业级开发语言
关系
ECMAScript是JavaScript语言的国际标准
JavaScript是实现ECMAScript标准的脚本语言
关键字
let关键字 let关键字声明的变量只有所处的块级作用域有效而不是在整个函数作用域内有效 块级作用域是指花括号{}包含的代码块比如for循环或if语句中的代码块。其作用场景有两个方面
防止代码块内层变量覆盖外层变量
scriptif (true) {let a 10;console.log(a); //输出结果10}console.log(a); //报错a未定义
/script这段代码中使用了let关键字来声明变量a。let关键字声明的变量具有块级作用域即只在当前代码块内有效。在这个例子中a只在if语句的代码块中定义因此在代码块外部访问变量a时会报错提示变量未定义。
具体地说当执行到console.log(a)的时候因为a只存在于if语句的块级作用域中所以在块级作用域外部并不存在变量a导致此处的console.log(a)执行时出现了引用错误
防止循环变量变成全局变量
scriptfor (let i 0; i 2; i) {}console.log(i); //报错i未定义
/script
这段代码使用了let关键字来声明变量i。在JavaScript中let关键字声明的变量具有块级作用域因此在代码块外部无法访问该变量。在这个例子中for循环中的变量i只存在于for循环的代码块中当循环结束后变量i的作用域也就结束了外部无法再访问该变量。因此在代码块外部访问变量i时会报错提示变量未定义。
具体来说当执行到console.log(i)的时候因为i只存在于for循环的块级作用域中所以在块级作用域外部并不存在变量i导致此处的console.log(i)执行时出现了引用错误。
提示let关键字的好处是避免变量污染全局作用域提高代码可维护性,也可以避免var声明变量时存在的变量提升问题即在变量声明之前使用变量会导致不可预测的结果。
function foo() {let x 1; //只在 example 函数内部有效if (true) {let x 2; // 不同于外部的 x只在 if 语句块内有效console.log(x); //输出2}console.log(x); //输出1
}
在if语句的块级作用域内声明的变量x只在该作用域内有效不会影响到外部作用域的变量x因此输出结果为2和1。 let关键字声明的变量不存在变量提升 在JavaScript中使用var关键字声明的变量时变量可以先使用后声明即变量的声明语句会被提前至作用域的顶部但是变量的赋值语句仍然保留在原来的位置。这种现象称为变量提升。
而使用let关键字声明的变量则不会发生变量提升变量的声明和赋值必须在同一代码块内完成否则会报错。这意味着在使用let关键字声明变量之前该变量的上下文中必须不存在对该变量的引用或调用否则会抛出ReferenceError异常。
下面是一个简单的案例
scriptconsole.log(count); // 报错count未定义let count 0;
/script
在上述例子中使用let关键字声明了一个名为count的变量并将其初始化为0。但是在第一行调用count时由于使用let关键字声明的变量不存在变量提升count变量未被定义代码会抛出引用错误。 let关键字声明的变量具有暂时性死区特性 暂时性死区是指在代码块中例如函数、循环或块语句中使用let或const声明变量时变量在声明前无法被访问。在该变量声明之前的任何访问都将导致“ReferenceError”。
具体来说只要块级作用域内存在let命令它所声明的变量就“绑定”binding了这个区域不再受外部的影响。这意味着在变量声明前该变量是不能被访问或调用的。
以下是一个例子展示了let关键字声明的变量具有暂时性死区特性
script
let x 10;
if (true) {console.log(x); // 报错x未定义let x 20;
}
script在这个例子中变量x被定义为10并在if语句中使用let关键字重新声明并初始化为20。但是在if语句的块级作用域内x被绑定了该区域因此变量x在声明之前被访问会导致引用错误。这就是暂时性死区的特性
const关键字 const关键字声明常量的只有所处的块级作用域有效而不是在整个函数作用域内有效 下面是一个简单的例子演示了使用const关键字声明常量的作用域仅限于所在的块级作用域即大括号内。
function example() {const a 1;if (true) {const a 2;console.log(a); // 输出2}console.log(a); // 输出1
}example();在这个例子中我们在函数作用域内声明了一个常量a并在if语句的块级作用域内重新声明a。由于const声明的常量的作用域仅限于所在的块级作用域即大括号内所以第一个console.log语句输出2而第二个console.log语句输出1。 const关键字声明常量时必须赋值 使用 const 声明常量时必须同时进行赋值否则会抛出一个 SyntaxError 错误。这是因为 const 声明的变量是常量一旦被声明就不能再被修改。以下是一个使用 const 声明常量并赋值的例子
const PI 3.14159;
console.log(PI); //输出 3.14159 const关键字声明常量赋值后常量的值不能修改 使用 const 声明的常量的值不能被修改。以下是一个简单的案例
const PI 3.14159;
PI 3.14; // 尝试修改常量的值
console.log(PI); // 会抛出一个 TypeError 错误在上述代码中我们尝试将 PI 的值修改为 3.14但运行该代码时会抛出一个 TypeError 错误因为我们不能修改 const 声明的常量的值。
提示var、let、const关键字之间的区别都是用于声明变量或常量其中 var 是 ES5 中声明变量的方式而 let 和 const 是 ES6 中引入的声明变量和常量的方式。 var 和 let 声明的变量可以被重新赋值而 const 声明的常量不可被重新赋值。
解构赋值
概述 解构表示对数据结构进行分解赋值是指将某一数值赋给变量的过程 优点是编写的代码简洁易读、语义清晰、方便从数组或对象中提取值
数组的解构赋值 数组的解构赋值就是将数组中的值提取出来赋给另外的变量 数组的解构赋值是一种方便的方式可以让我们从数组中获取单个值或多个值然后将它们赋值给变量。它的基本语法如下
let arr [1, 2, 3, 4];
let [a, b, c, d] arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4//注意在浏览器控制台中输出上述代码的结果有可能会报错可以把let关键字去掉再运行
在上面的例子中我们定义了一个数组 arr然后使用数组解构赋值的方式将数组中的元素赋值给变量 a、b、c、d。这样我们就可以通过变量来获取数组中的元素了。
对象的解构赋值 对象的解构赋值允许使用变量的名字匹配对象的属性如果匹配成功就将对象中属性的值赋给变量 对象的解构赋值是一种方便的方式可以让我们从对象中获取单个属性或多个属性并将它们赋值给变量。它的基本语法如下
let obj { x: 1, y: 2 };
let { x, y } obj;
console.log(x); // 1
console.log(y); // 2
在上面的例子中我们定义了一个对象 obj然后使用对象解构赋值的方式将对象中的属性赋值给变量 x、y。这样我们就可以通过变量来获取对象中的属性了。
箭头函数
概述
箭头函数是ES6中引入的一种新的函数表达式它的语法更加简洁同时还具有一些特殊的功能
用于简化函数的定义语法有自已的特殊语法接收一定数量的参数并在其封闭的作用域的上下文即定义的函数或其他代码中操作
语法
基本定义语法
() { }
上述语法中() { } 是 ES6 中的箭头函数语法它表示一个没有参数的箭头函数并且函数体为空。具体来说箭头函数是一种更加简洁的函数表达式可以用一个箭头连接函数参数和函数体。例如
// 常规函数表达式
function add(a, b) {return a b;
}// 箭头函数表达式
const add (a, b) a b;
特点 箭头函数是匿名函数因此需要通过变量或常量来引用函数。例如 // 声明一个箭头函数并赋值给变量 add
const add (a, b) a b;// 使用 add 函数计算 1 2 的值
const result add(1, 2); // 3箭头函数可以省略函数体中的花括号 { }如果函数体只有一条语句那么可以直接返回这条语句的值。例如 // 等价于 function (a, b) { return a b; }
const add (a, b) a b;// 等价于 function (num) { return num % 2 0; }
const isEven num num % 2 0;箭头函数的参数列表可以省略小括号 ()但是只有当参数个数为1时可以省略。例如
// 等价于 function (num) { return num * num; }
const square num num * num;// 等价于 function () { console.log(Hello, world!); }
const logHello () console.log(Hello, world!);
箭头函数没有自己的 this 值它会继承外层作用域的 this 值因此在箭头函数中使用 this 时它会指向外层作用域的 this而不是箭头函数自己的 this。例如 const obj {name: Alice,greet: function() {setTimeout(() {console.log(Hello, ${this.name}!);}, 1000);},
};obj.greet(); // Hello, Alice! 1秒钟后输出 在上面的代码中我们定义了一个对象 obj它有一个名为 greet 的方法方法中使用了箭头函数来打印一条欢迎语句。由于箭头函数继承了 greet 方法的 this 值因此在箭头函数中使用 this.name 时它会指向 obj 的 name 属性即输出 Hello, Alice!
扩展在ES6之前JavaScript中的关键字this指向的对象是在运行时基于函数的执行环境绑定的在全局函数中关键字this指向的是window当函数被作为某个对象的方法调用时this关键字指向那个对象
剩余参数
概述
在 JavaScript 中剩余参数Rest Parameters是一种特殊的函数参数它允许我们在函数定义中传入任意数量的参数而这些参数都会被自动组织成一个数组并作为剩余参数传递给该函数。在函数体中我们可以像处理普通数组一样使用剩余参数也就是通过下标来获取数组元素或者使用数组的一些方法对其进行操作。
语法
function funcName(...args) {// function body
}
上述代码中的 ...args 表示任意数量的参数它们会被组织成一个数组 args。可以通过数组下标 args[0]、args[1] 等来引用这些参数。
除了在函数定义时使用剩余参数外我们还可以在调用函数时使用剩余参数来传入一个数组这时候需要在数组前面加上三个点 ...以表示将该数组转换成一系列的参数。例如
function funcName(arg1, arg2, ...restArgs) {// function body
}let arr [1, 2, 3, 4, 5];
funcName(...arr);
上述代码中的 ...restArgs 表示剩余参数它会包含数组 arr 中除了前两个元素以外的所有元素也就是 3、4、5。由于我们在调用函数时使用了 ...arr因此这个数组会被转换成一系列的参数即 arg1 为 1arg2 为 2restArgs 则为剩余的参数。
组合使用
剩余参数和解构赋值可以很好地组合在一起使用以便更方便地访问剩余参数中的元素。
例如我们可以在函数定义中使用解构赋值来获取剩余参数中的第一个和第二个元素然后在函数体内对它们进行操作。示例代码如下
function funcName(...[first, second, ...rest]) {console.log(first:, first); // 输出第一个元素console.log(second:, second); // 输出第二个元素console.log(rest:, rest); // 输出剩余的元素
}funcName(1, 2, 3, 4, 5);在上述代码中剩余参数 rest 包含了除了前两个参数以外的所有元素而我们通过解构赋值分别获取了剩余参数中的第一个和第二个元素分别赋值给了变量 first 和 second。
这样我们就可以在函数体内直接使用变量 first 和 second 来操作这两个元素而无需通过下标来访问它们。同时函数调用代码也变得更加简洁只需要传入一系列的参数即可无需手动创建一个数组。
项目
下面是一个利用关键字、解构赋值、箭头函数和剩余参数来实现一个简单的项目的示例。该项目可以将用户输入的一组数字求和并在控制台输出结果。
// 定义求和函数
const sum (...numbers) {let total 0; //使用关键字 let 声明变量 totalfor (let number of numbers) { //使用 for...of 循环遍历可迭代对象 numbers 中的元素。total number; //累加语句将 number 的值加到 total 中}return total; //函数返回值将计算得到的 total 作为函数返回值
}; //箭头函数的定义方式使用剩余参数语法 ... 来接收任意数量的参数。// 监听用户输入
const inputValues () {let input prompt(请输入一组数字用逗号分隔); //使用 prompt 方法显示一个提示框并接收用户输入的一组数字。let values input.split(,).map((value) parseInt(value.trim())); //使用 split 方法将用户输入的数字字符串按照逗号分隔成为一个数组然后使用 map 方法对数组中的每个元素进行处理去掉空格并将其转换为整数类型。let total sum(...values); 。。使用剩余参数语法 ...将数组 values 展开成为一个个数字拆分作为参数传递给 sum 函数并将计算结果赋值给变量 totalconsole.log(结果${total}); //使用模板字符串的语法将计算得到的结果输出到控制台中。
10. inputValues();调用函数开始监听用户输入并计算结果。
};inputValues(); // 调用函数开始监听输入并计算结果
上述代码中我们首先定义了一个求和函数 sum使用了箭头函数和剩余参数的特性用于接收用户输入的一组数字并计算它们的和。接下来我们定义了一个监听用户输入的函数 inputValues其中使用了关键字 let、解构赋值和数组的 map 方法将用户输入的一组逗号分隔的数字字符串转换成了数组然后将数组传递给 sum 函数计算结果。最后我们在函数内部使用了 console.log 方法将结果输出到控制台。
在调用 inputValues 函数时用户将会收到一个提示框要求输入一组数字用逗号分隔。用户输入完成后我们将监听到输入并将其转换成数字数组然后求和并将结果输出到控制台。
