ES6

记下一些知识。。。。。

var 和 let 关键字之间的差异

var定义的同名变量，最后一次变量定义会覆盖前面的值，且不会报错。与var不同的是，当使用let的时候，同一名字的变量只能被声明一次。

请注意"use strict"。这代表着开启了严格模式，用于检测常见的代码错误以及"不安全"的行为，例如：

"use strict";
x = 3.14; // x 没有声明导致了报错

用 const 关键字声明只读变量

通过const声明的变量是只读的。这意味着通过const声明的变量只能被赋值一次，而不能被再次赋值。

使用了const关键字，你不能使用赋值操作符将数组标识（如s）指向另外一个数组。可以理解为s的值不能被修改，这个值即是数组的内存地址。因此修改数组里的值是可以的：是s[2]=5；

const s = [5, 7, 2];
function editInPlace() {
  "use strict";
    s[0]=2;
  // s = [2, 5, 7]; <- this is invalid
    s[1]=5;
    s[2]=7;

}

防止对象改变

通过之前的挑战可以看出,const声明并不会真的保护你的数据不被改变。为了确保数据不被改变，JavaScript 提供了一个函数Object.freeze来防止数据改变。

当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被忽略，却不会报错。

let obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad"; // obj 对象被冻结了，这个操作会被忽略
obj.newProp = "Test"; // 也会被忽略，不允许数据改变
console.log(obj);
// { name: "FreeCodeCamp", review:"Awesome"}

箭头函数

ES6 提供了其他写匿名函数的方式的语法糖。你可以使用箭头函数：

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

当不需要函数体，只返回一个值的时候，箭头函数允许你省略return关键字和外面的大括号。这样就可以将一个简单的函数简化成一个单行语句。

const myFunc= () => "value"

这段代码仍然会返回value。

// 给传入的数值乘以 2 并返回结果
const doubler = (item) => item * 2;

// 使用箭头函数的语法来计算squaredIntegers数组里正整数的平方（分数不是整数）。
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // 在这行以下修改代码
  arr=arr.filter(item=>{
    if(item>=0 && item%1==0)return true;
    return false;
    });
  const squaredIntegers=arr.map(num=>num*num);
  // 在这行以上修改代码
  return squaredIntegers;
};
// 测试你的代码
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

展开操作符--多参数

function howMany(...args){}

使用 spread 运算符展开数组项

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

...arr返回了一个“打开”的数组。或者说它 展开 了数组。

数组赋值

arr2 = [...arr1];

然而，展开操作符只能够在函数的参数中，或者数组之中使用

使用解构赋值从对象中分配变量

如果你想将voxel.x,voxel.y,voxel.z的值分别赋给a,b,c，可以用以下这种很棒的方式：

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

可以这样理解：“将x地址中的值拷贝到a当中去

用解构赋值从嵌套对象中分配变量

同样，我们可以将 嵌套的对象解构到变量中。

请看以下代码：

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

使用解构赋值从数组中分配变量

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

交换a,b的值

  [a,b]=[b,a];

 使用解构赋值配合 rest 操作符来重新分配数组元素

以下代码的结果与使用Array.prototype.slice()相同：

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

变量a与b分别获取了数组的前两个元素的值。之后，因为rest操作符的存在，arr获取了原数组剩余的元素的值，并构成了一个新的数组

使用解构赋值将对象作为函数的参数传递

在某些情况下，你可以在函数的参数里直接解构对象。

const profileUpdate = ({ name, age, nationality, location }) => {
  /* 对这些参数执行某些操作 */
}

使用模板字面量创建字符串

 

 

 请使用简单属性对象的语法来创建并返回一个Person对象。

const createPerson = (name, age, gender) => {
  "use strict";
  // 在这行以下修改代码
  ({name,age,gender});
  // 在这行以上修改代码
};
console.log(createPerson("Zodiac Hasbro", 56, "male")); // 返回正确的对象

 编写简洁的函数声明

sayHello() {
    return `Hello! My name is ${this.name}.`;
  }

 class关键字

class Vegetable{
    constructor(name){
      this.name=name;
    }
  }

getteer setter

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

默认导出

export default function add(x,y) {
  return x + y;
}

默认导入

import add from "math_functions";
add(5,4); //将会返回 9

 array

Array.find()和Array.findIndex()是ES6为数组新增的两个方法。

• Array.find()：找到满足条件的第一个元素返回，如果未找到，则返回undefined。
• Array.findIndex()：找到满足条件的第一个元素，返回其位置，如果未找到，则返回-1。

var ret1 = arr1.find((value, index, arr) => {
  return value > 4
})

var ret4 = arr1.findIndex((value, index, arr) => {
  return value > 14
})