ECMAScript 新特性(es6)的学习一

ECMAScript通常看作javaScript的标准化规范，实际上avascript是ECMAScript的扩展语言，ES只提供了最基本的语法，javascript语言本身指的就是ES,2015年开始ES保持每年一个版本的迭代解决了：
解决原有语法上的一些问题或者不足
对原有语法进行增强
全新的对象、全新的方法、全新的功能
全新的数据类型和数据结构

ES2015(es6) let与块级作用域
作用域——某个成员能够起作用的范围，在此之前，ES中只有两种作用域，全局和函数作用域，es6中增加了块级作用域let

Const
在let基础上多了[只读]，声明过后不允许再被修改

const name = "qsn";
name = "nick";

const声明的成员不能被修改，只是说不允许在声明了过后重新指向一个新的内存地址，并不是说不允许修改恒量中的属性成员

const obj = {};
obj.name = "qsn";

最佳实践：不用var,主用const,配合let

数组的解构

const arr = [100, 200, 300];
const [foo, bar, baz] = arr;
console.log(foo, bar, baz);

把 arr数组中的值分别给了foo,bar,baz。只复制一个时

const arr = [100, 200, 300];
const [, , baz] = arr;
console.log(baz);

表示从当前位置后的所有成员，只能在最后一个成员中使用
也可以给默认值

const arr = [100, 200, 300];
const [foo, bar, baz, more = "default value"] = arr;
console.log(foo, bar, baz, more);

对象的解构
对象的解构根据属性名匹配提取

const obj = { name: "zce", age: 18 };
const { name } = obj;
console.log(name);

当有同名的时候会出现报错

const obj = { name: "zce", age: 18 };
const name = "tom";
const { name } = obj;
console.log(name);

可以重命名

const obj = { name: "zce", age: 18 };
const name = "tom";
const { name: objName } = obj;
console.log(name);

模板字符串字面量

const name = "tom";
const msg = `hey,${name}`;
console.log(msg);

带标签的模板字符串

const name = "tom";
const gender = true;
function myTagFunc(strings, name, gender) {
  return strings[0] + name + strings[1] + gender + strings[2];
}
const result = myTagFunc`hey,${name} is a ${gender}.`;
console.log(result);

作用就是对模板字符串进行加工，比如gender直接是true或者false,可以在函数里对它进行处理再输出

字符串的扩展方法，
比较常用的includes(),startsWith(),endsWith(),这是一组方法，可以更方便的判断字符串中是否包含指定的内容
是否包含error：

const message = "Error:foo is not defined.";
console.log(message.startsWith("Error"));

是否是点结尾
是否包含foo

const message = "Error:foo is not defined.";
console.log(
  message.startsWith("Error"),
  message.endsWith("."),
  message.includes("foo")
);

参数默认值
多个参数时，带默认值的要放在最后一个

function foo(enable = true) {
  console.log("foo invoked-enable:");
  console.log(enable);
}
foo();

剩余参数
接收所有参数，只能放在参数的最后一位，只能使用一次

function foo(...args) {
  console.log(args);
}
foo(1, 2, 3, 4);

展开数组

const arr = ["foo", "bar", "baz"];
console.log(...arr);

箭头函数
箭头左边是参数，右边是函数体

const arr = [1, 2, 3, 4, 5, 6, 7];
arr.filter(function (item) {
  return item % 2;
});
arr.filter((i) => i % 2);

箭头函数与this
箭头函数不会改变this指向

const person = {
  name: "tom",
  sayHi: function () {
    console.log(`hi,my name is ${this.name}`);
  },
};
person.sayHi();

改成箭头函数后：

const person = {
  name: "tom",
  sayHi: () => {
    console.log(`hi,my name is ${this.name}`);
  },
};
person.sayHi();

解决办法一般在外面把箭头函数中没有this的机制，所以没有改变this的指向，异步调用的时候this会发生改变就可以用箭头函数

对象字面量增强

const bar = "345";
const obj = {
  foo: 123,
  //bar:bar,当属性名称和值一样时可以简写成一个
  bar,
  // method1:function(){
  //   console.log('method111');
  // }
  method1() {
    console.log("method111");
  },
};
console.log(obj);

对象属性的名称也可以自定义

const obj = {
  [1+1]:"aaaaaaaaa"
};
console.log(obj);

对象扩展方法
Object.assign:将多个源对象中的属性复制到一个目标对象中，可以传任意对象，第一个参数是目标对象（膨机的参数覆盖第一个参数），方法返回值也是目标对象

const source1 = {
  a: 123,
  b: 123,
};
const target = {
  a: 456,
  c: 456,
};
const result = Object.assign(target, source1);
console.log(target);
console.log(result === target);

还可以用来做对象拷贝

const source1 = {
  a: 123,
  b: 123,
};
const scource2 = Object.assign({}, source1);
console.log(scource2)

Object.is:判断两个值是否相等，一般还是建议用===
console.log(NaN === NaN, Object.is(NaN, NaN));