您的位置:首页 > 新闻 > 热点要闻 > ES6 新特性有哪些

ES6 新特性有哪些

2024/10/5 14:38:29 来源:https://blog.csdn.net/weixin_64684095/article/details/140220541  浏览:    关键词:ES6 新特性有哪些

1. 变量声明 let/const

let 特性:1. 拥有块级作用域,这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量,只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量

const 特性:1. 也具有块级作用域。2. 声明时必须进行初始化赋值,且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组,虽然不能重新赋值整个对象或数组,但可以修改对象的属性值或数组的元素值。

2. 箭头函数

箭头函数为 JavaScript 编程带来了更简洁、更清晰的代码风格,并且在处理作用域和 this 问题时提供了更直观的方式。

箭头函数特性:1. 消除了函数的二义性。2. 简洁的语法。3. 箭头函数不会创建自己的 this 上下文,而是继承外层函数的 this 值。这在处理回调函数和对象方法时非常有用,可以避免 this 指向错误的问题。4. 箭头函数不能使用 new 操作符来创建实例,因为它们没有自己的 prototype 属性。5. 箭头函数没有自己的 arguments 对象,但可以通过剩余参数来获取参数。

let fn = () => {};

3. 模板字符串

ES6 中的模板字符串(template string)是一种增强版的字符串,用反引号(`)标识。模板字符串使得字符串的拼接和处理更加方便、灵活和易读,尤其在涉及多行文本和动态内容插入的情况下,可以减少代码的复杂性和冗余度。

模板字符串特性:1. 将变量名写在 ${} 之中,大括号内部可以放入任意的 JavaScript 表达式,包括运算、引用对象属性或调用函数等。2. 无需使用换行符 \n 或拼接,直接在反引号内换行即可,所有的空格和缩进都会被保留在输出之中。3. 如果要输出包含特殊字符(如换行符、Unicode 编码等)的原始字符串,可以使用 String.raw 方法。4. 在模板字符串中,如果需要使用反引号本身,要在前面用反斜杠转义,即 \`` 等价于 "。同样,如果要在模板字符串中引入字符 $和{,也需要用反斜杠转义,即 $和{`。

let job = "程序员",salary = "100";let say = `我的工作是${job}, 我每月可以挣${salary}大洋,真开心!`;

4. 解构赋值

ES6 中的解构赋值是一种方便的数据提取和赋值方式,它允许从数组或对象中提取值,并将其赋给变量。

数组的解构赋值

let [a, b, c] = [1, 2, 3];console.log(a); // 1console.log(b); // 2console.log(c); // 3// 可以跳过某些位置let [x, , z] = [4, 5, 6];console.log(x); // 4console.log(z); // 6// 可以使用剩余操作符 `...` 收集剩余的元素let [m, n, ...rest] = [7, 8, 9, 10, 11];console.log(m); // 7console.log(n); // 8console.log(rest); // [9, 10, 11]

对象的解构赋值

let { name, age } = { name: "John", age: 30 };console.log(name); // Johnconsole.log(age); // 30// 可以给变量起不同的名字let { name: myName, age: myAge } = { name: "Jane", age: 25 };console.log(myName); // Janeconsole.log(myAge); // 25// 可以设置默认值let { city = "New York" } = {};console.log(city); // New York

5. 扩展运算符

ES6 的扩展运算符(...)是一种方便的操作符,它主要有以下功能:

展开数组或对象

console.log(...[1, 2, 3]); // 输出:1 2 3console.log(1, ...[2, 3, 4], 5); // 输出:1 2 3 4 5let obj1 = { foo: "bar", x: 42 };let clonedObj = { ...obj1 };console.log(clonedObj); // 输出:{ foo: "bar", x: 42 }

数组拷贝

let arr = [1, 2, [3, 4]];let arr1 = [...arr];arr1[2].push(5);console.log(arr); // 输出:[1, 2, [3, 4, 5]]console.log(arr1); // 输出:[1, 2, [3, 4, 5]]

合并数组或对象

var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];var arr3 = [...arr1, ...arr2];console.log(arr3); // 输出:[0, 1, 2, 3, 4, 5]

函数参数传递

function sum(x, y, z) {return x + y + z;}const numbers = [1, 2, 3];console.log(sum(...numbers)); // 输出:6

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];console.log(first); // 输出:1console.log(rest); // 输出:[2, 3, 4, 5]

字符串转字符数组

const title = "china";const charts = [...title];console.log(charts); // 输出:['c', 'h', 'i', 'n', 'a']

数组去重(结合 Set)

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];const newNumbers = [...new Set(arrayNumbers)];console.log(newNumbers); // 输出:[1, 5, 9, 3, 7, 10, 4, 2]

6. 剩余参数

ES6 中的剩余参数语法允许将不定数量的参数表示为一个数组。

其语法形式为:在函数的最后一个命名参数前加上三个点(...),后面跟着参数名,例如:function(a, b,...theArgs){ // 函数体 } ,在这个例子中,theArgs 将收集该函数的第三个参数及以后的所有剩余参数。

function fun1(...theArgs) {alert(theArgs.length);}fun1(); // 弹出"0", 因为 theArgs 没有元素fun1(5); // 弹出"1", 因为 theArgs 只有一个元素fun1(5, 6, 7); // 弹出"3", 因为 theArgs 有三个元素function multiply(multiplier,...theArgs) {return theArgs.map(function(element) {return multiplier * element;});}var arr = multiply(2, 1, 2, 3);console.log(arr); // (2, 4, 6)function sortRestArgs(...theArgs) {var sortedArgs = theArgs.sort();return sortedArgs;}alert(sortRestArgs(5, 3, 7, 1)); // 弹出 1, 3, 5, 7// 剩余参数可以被解构function f(...(a, b, c)) {return a + b + c;}f(1) // NaN (b 和 c 是 undefined)f(1, 2, 3) // 6f(1, 2, 3, 4) // 6 (第四个参数没有被解构)

7. 类

ES6 引入了类(class)的概念,使面向对象编程在 JavaScript 中更加清晰和直观。

详情参考 前端 js 经典:class 类

8. 模块化

ES6 引入了模块化的概念,这使得 JavaScript 代码的组织和管理更加清晰和高效。

一个模块就是一个独立的 JavaScript 文件。模块内的变量、函数、类等默认是私有的,只有通过 export 关键字导出的部分才能被其他模块使用。

导出

// 导出单个变量或函数export const num = 42;export function add(a, b) {return a + b;}// 也可以将多个导出写在一处const str = "Hello";function subtract(a, b) {return a - b;}export { str, subtract };

导入

import { num, add } from "./module1";

9. promise

详情跳转 前端 JS 经典:Promise 详解

10. map/set

在 ES6 中,Map 和 Set 是两种新的数据结构,它们为数据的存储和操作提供了更强大和灵活的方式。

Map:Map 是键值对的集合,其中键可以是任何类型的值(包括对象),而不仅仅是字符串。

// 创建let myMap = new Map();myMap.set("key1", "value1");myMap.set(2, "value2");myMap.set({ name: "John" }, "value3");// 获取console.log(myMap.get("key1"));console.log(myMap.get(2));console.log(myMap.get({ name: "John" }));// 检查键是否存在console.log(myMap.has("key1"));// 删除键值对myMap.delete("key1");// 获取 Map 的大小console.log(myMap.size);// 遍历 Mapfor (let [key, value] of myMap) {console.log(key + ': ' value);}

Set:Set 是一种不允许重复值的数据结构。

// 创建let mySet = new Set();mySet.add(1);mySet.add(2);mySet.add(2); // 重复添加不会有效果mySet.add("Hello");// 检查元素是否存在console.log(mySet.has(1));// 删除元素mySet.delete(1);// 获取 Set 的大小console.log(mySet.size);// 遍历 Setfor (let item of mySet) {console.log(item);}

11. symbol

在 ES6 中,Symbol 是一种新的基本数据类型,它的主要目的是创建独一无二的值,通常用于对象的属性名,以避免属性名冲突。

let sym1 = Symbol();let sym2 = Symbol("description"); // 可以提供一个可选的描述字符串

12. 迭代器和生成器

在 ES6 中,迭代器(Iterator)和生成器(Generator)为处理数据的遍历和生成提供了更强大和灵活的方式。

迭代器(Iterator)

迭代器是一个具有 next() 方法的对象,每次调用 next() 方法都会返回一个对象,该对象包含两个属性:value (当前迭代的值)和 done (一个布尔值,表示迭代是否完成)。

// 创建一个简单的迭代器function createIterator(arr) {let index = 0;return {next() {if (index < arr.length) {return { value: arr[index++], done: false };} else {return { value: undefined, done: true };}},};}let iterator = createIterator([1, 2, 3]);console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());

生成器(Generator)

生成器是通过 function\* 定义的函数,可以通过 yield 表达式暂停和恢复执行,并且可以逐步生成一系列的值。

function* generateNumbers() {yield 1;yield 2;yield 3;}let generator = generateNumbers();console.log(generator.next());console.log(generator.next());console.log(generator.next());console.log(generator.next());

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com