web学习 -- ES6标准

let

ES6新增的用于声明变脸的关键字

1）let声明的变量不允许重复声明

  var a = 1;
  var a = 2;
  console.log(a); //输出 2

  let b = 1;
  let b = 2;     //报错
  console.log(b) ;

2）let声明的变量存在块级作用域

  function f1() {
    let n = 5;
    if (true) {
      let n = 10;
      console.log(n); //输出 10
    }
    console.log(n); // 输出 5
  }

注：上面的两个代码块中拥有各自的变量n，不会相互影响。

  / 使用 var /
  var printNumTwo;
  for (var i = 0; i < 3; i++) {
    if(i === 2){
      printNumTwo = function() {
        return i;
      };
    }
  }
  console.log(printNumTwo());
  // returns 3
  
  / 使用 let /
  'use strict';
  let printNumTwo;
  for (let i = 0; i < 3; i++) {
    if (i === 2) {
      printNumTwo = function() {
        return i;
      };
    }
  }
  console.log(printNumTwo());
  // returns 2
  console.log(i);
  // returns "i is not defined"

3）let声明不存在变量提升
变量提升：在使用var声明变量时，变量可以放在声明之前使用，只不过使用还没有声明的变量时，其值为undefined。

但是使用let声明变量时，如果使用放在声明之前则会报错。

  console.log(a); //输出 undefined
  var a = 1;

  console.log(b); //报错
  let b = 1;     

const

const 声明的变量，不允许重复声明，有块作用域且是只读的

注：const实际保证的，并不是变量的值不得改动，而是变量指向的内存地址不得改动。即能保证简单类型的数据（数值、字符串、布尔值）等同于常量；对于复合类型（主要是对象和数组），变量指向的内存地址保存的只是指针，const只能保证指针固定，指向的数据结构不能保证不变

  "use strict";
  const s = [5, 6, 7];
  s = [1, 2, 3]; // 报错
  s[2] = 45; // 正常工作
  console.log(s); // returns [5, 6, 45]

Object.freeze

Object.freeze 保证复合类型的只读性

  let person = {
    name:"XiaoMing",
    review:"yes"
  };
  Object.freeze(person);
  person.review = "no"; //这条命令将会被忽略，因为此时person对象是只读的
  person.newProp = "age"; // 这条命令也将会被忽略
  console.log(obj); 
  // { name: "XiaoMing", review:"yes"}

箭头函数(Arrow Functions) 类似lamb

旧标准：

  const myFunc = function() {
    const myVar = "value";
    return myVar;
  }
  FBPosts.filter(function(post) {
    return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
  })

使用箭头函数;

  const myFunc = () => {
    const myVar = "value";
    return myVar;
  }

简化方式：

  const myFunc = () => "value"
  // 将输入的数乘以2，并返回
  const doubler = (item) => item * 2;
  FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)

函数默认值

  function greeting(name = "Anonymous") {
    return "Hello " + name;
  }
  console.log(greeting("John")); // 输出 Hello John
  console.log(greeting()); // 输出 Hello Anonymous

rest 参数(Rest Operator)

形式为：….变量名。
通过使用rest参数，可以向函数传入不同数量的参数
注：rest参数之后不能再有其他参数，否则程序报错

  function howMany(...args) {
    return "You have passed " + args.length + " arguments.";
  }
  console.log(howMany(0, 1, 2)); // 传入三个参数
  console.log(howMany("string", null, [1, 2, 3], { })); // 传入四个参数

注：
rest参数中的变量代表一个数组，所有数组特有的方法都可以用于这个变量

  function push(array, ...items) {
    items.forEach(function(item) {
      array.push(item);
      console.log(item);
    });
  }
  var a = [];
  push(a, 1, 2, 3)
  console.log(a)  //输出 [1， 2， 3]

扩展运算符 (Spread Operator)

扩展运算符其实就是rest参数中的那三个点…，其作用是将数组打散

  console.log(...[1, 2, 3])
  // 1 2 3
  console.log(1, ...[2, 3, 4], 5)
  // 1 2 3 4 5
  [...document.querySelectorAll('div')]
  // [<div>, <div>, <div>]

求数组最大值：

  const arr = [6, 89, 3, 45];
  const maximus = Math.max(...arr); // 返回 89

注:Math.max()方法只接受由逗号分隔的参数序列，比如Math.max(1, 2, 3)，所以我们需要apply()进行转化

解构赋值(Destructuring Assignment)

1）变量与对象简单映射
保持赋值的变量与对象属性名称一致

  var voxel = {x: 3.6, y: 7.4, z: 6.54 };
  var x = voxel.x; // x = 3.6
  var y = voxel.y; // y = 7.4
  var z = voxel.z; // z = 6.54

  const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54

赋值变量与对象属性不一致

  const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54

2）对嵌套对象解构赋值

  const a = {
    start: { x: 5, y: 6},
    end: { x: 6, y: -9 }
  };
  const { start : { x: startX, y: startY }} = a;
  console.log(startX, startY); // 5, 6

3）获取数组特定元素

  const [a, b] = [1, 2, 3, 4, 5, 6];
  console.log(a, b); // 1, 2

  const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
  console.log(a, b, c); // 1, 2, 5

4）搭配扩展运算符使用

  const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
  console.log(a, b); // 1, 2
  console.log(arr); // [3, 4, 5, 7]

5）将对象当参数传入
不用讲整个对象都传入函数，只传入需要的部分

  const profileUpdate = (profileData) => {
    const { name, age, nationality, location } = profileData;
    // 函数操作
  }
    const profileUpdate = ({ name, age, nationality, location }) => {
    // 函数操作
  }

模板字符串 (Template String)

ES6中引入了一种更强大的字符串写法，被称为模板字符串，用反引号( ` )标识

  const person = {
    name: "Zodiac Hasbro",
    age: 56
  };

  //用模板字符串方式书写的字符串，并将其赋给greeting变量
  const greeting = `Hello, my name is ${person.name}!
  I am ${person.age} years old.`;

  console.log(greeting); 
  // 输出：
  // Hello, my name is Zodiac Hasbro!
  // I am 56 years old.

注：

• 模板字符串的标识符是反引号(`) 而不是单引号(’)
• 输出的字符串是多行的，也不需要\n了
• 语法${}可以用来获取变量，化简了之前用+来进行字符串拼接的写法

class

class关键字只是语法糖

创建构造函数

  var Person = function(name){
    this.name = name;
  }
  var person1 = new Person('Jim');

  class Person {
    constructor(name){
      this.name = name;
    }
  }
  const person1 = new Person('Jim');

注：在由class定义的对象中，添加了构造函数constructor()，构造函数在new被调用时唤醒，创建一个新的对象。

get/set

在由class定义的对象中，存值函数和取值函数现在有了自己的关键字get和set

  class Book {
    constructor(author) {
      this._author = author;
    }
    // getter
    get writer(){
      return this._author;
    }
    // setter
    set writer(updatedAuthor){
      this._author = updatedAuthor;
    }
  }
  const lol = new Book('anonymous');
  console.log(lol.writer);  // anonymous
  lol.writer = 'wut';
  console.log(lol.writer);  // wut

注：调用存值和取值函数的方式是lol.writer