ES6新特性

冷不防 2021-12-18 07:07 350阅读 0赞

**转自：[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513]**

**1.const 与 let 变量**

**2.模板字面量**

**3.解构**

数组对应数组 对象对应对象，提取值并赋值

const gemstone = {
      type: 'quartz',
      color: 'rose',
      karat: 21.29
    };
    const {type, color, karat} = gemstone;
    console.log(type, color, karat);

**4.对象字面量简写法**

属性名称和所分配的变量名称相同，从对象属性中删掉这些重复的变量名称

### **5.for...of循环** ###

//可以随时停止或退出for...of循环

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    for (const digit of digits) {
      if (digit % 2 === 0) {
        continue;
      }
      console.log(digit);
    }

**6.展开运算符**

const books = ["Don Quixote", "The Hobbit", "Alice in Wonderland", "Tale of Two Cities"];
    console.log(...books);
    Prints: Don Quixote The Hobbit Alice in Wonderland Tale of Two Cities

使用展开符来结合数组

const fruits = ["apples", "bananas", "pears"];
    const vegetables = ["corn", "potatoes", "carrots"];
    const produce = [...fruits,...vegetables];
    console.log(produce);
    ["apples", "bananas", "pears","corn", "potatoes", "carrots"]

剩余参数(可变参数)

用途1: 将变量赋数组值时:

const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
    const [total, subtotal, tax, ...items] = order;
    console.log(total, subtotal, tax, items);

用途2: 可变参数函数  
对于参数不固定的函数,ES6之前是使用参数对象(arguments)处理:

function sum() {
      let total = 0;  
      for(const argument of arguments) {
        total += argument;
      }
      return total;
    }

在ES6中使用剩余参数运算符则更为简洁,可读性提高

function sum(...nums) {
      let total = 0;  
      for(const num of nums) {
        total += num;
      }
      return total;
    }

**7.ES6箭头函数**

箭头函数把每个名字转换为大写形式

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
      name => name.toUpperCase()
    );

普通函数可以是函数声明或者函数表达式, 但是箭头函数始终都是表达式, 全程是箭头函数表达式, 因此因此仅在表达式有效时才能使用，包括：

*  存储在变量中，
 *  当做参数传递给函数，
 *  存储在对象的属性中。
    
        const greet = name => `Hello ${name}!`;
        greet('Asser');

**8.默认参数函数**

默认参数函数+解构

createSundae([undefined, ['Hot Fudge', 'Sprinkles', 'Caramel']]);