前端学习1 ES6新特性

ES6新特性

1. 变量声明 let/const

let 特性：1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量。 const 特性：1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。

2. 箭头函数

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

let fn = () => {};

3.模板字符串

ES6 中的模板字符串用反引号（`）标识。模板字符串使得字符串的拼接和处理更加方便、灵活和易读，尤其在涉及多行文本和动态内容插入的情况下，可以减少代码的复杂性和冗余度。模板字符串特性：1. 将变量名写在 ${} 之中，大括号内部可以放入任意的 JavaScript 表达式，包括运算、引用对象属性或调用函数等。

let say = `我是来自${school}的学生, 我的名字叫做${name}。`;

4.解构赋值

ES6 中的解构赋值是一种方便的数据提取和赋值方式，它允许从数组或对象中提取值，并将其赋给变量，还可以用...收集剩余的元素

数组的解构赋值

let [a, b, ...rest] = [7, 8, 9, 10, 11];
 
console.log(a); // 7
 
console.log(b); // 8
 
console.log(rest); // [9, 10, 11]

对象的解构赋值

//其中myName和myAge为别名

let { name: myName, age: myAge } = { name: "Jane", age: 25 };
 
console.log(myName); // Jane
 
console.log(myAge); // 25

5.扩展运算符

ES6 的扩展运算符（...）是一种方便的操作符，它主要有以下功能：

展开数据或对象

console.log(1, ...[2, 3, 4], 5); // 输出：1 2 3 4 5

let obj1 = { foo: "bar", x: 42 };
 
let clonedObj = { ...obj1 };
 
console.log(clonedObj); // 输出：{ foo: "bar", x: 42 }

合并数据或对象

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

还可与解构赋值结合

字符串转字符数组

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

6. 剩余参数

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

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

7. 类

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

8. 模块化

ES6 引入了模块化的概念，这使得 JavaScript 代码的组织和管理更加清晰和高效。一个模块就是一个独立的 JavaScript 文件。模块内的变量、函数、类等默认是私有的，只有通过 export 关键字导出的部分才能被其他模块使用。

9. 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");

Set

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

let mySet = new Set();
 
mySet.add(1);
 
mySet.add(2);
 
mySet.add(2); // 重复添加不会有效果
 
mySet.add("Hello");

11.symbol

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

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());