ES6 笔记

let

变量不能重复声明

let name = "dudu";
let name = "dudu"; // Identifier 'name' has already been declared

块级作用域

{
   
  let age = 22;
}
console.log(age); // ReferenceError: age is not defined

不存在变量提升

console.log(address); // ReferenceError: Cannot access 'address' before initialization
let address = "花市区";

不影响作用域链

{
   
  let author = "Priest";
  function show() {
   
    console.log(author);
  }
  show(); // Priest
}

const

必须初始化

const NAME;
console.log(NAME); // SyntaxError: Missing initializer in const declaration

常量名建议大写

const AGE = 12;

常量值不能修改

const USER = "user";
USER = "name"; // TypeError: Assignment to constant variable.

块级作用域

{
   
  const PLAYER = "The Shy";
}
console.log(PLAYER); // ReferenceError: PLAYER is not defined

对于数组和对象的元素修改，不算做对常量的修改

const BIRTHDAYS = ["1208", "1003", "0903"];
BIRTHDAYS[2] = "1011";
console.log(BIRTHDAYS); // [ '1208', '1003', '1011' ]
const DUDU = {
    name: "dudu", age: 20 };
DUDU.age = 30;
console.log(DUDU); // { name: 'dudu', age: 30 }

解构赋值

按照一定模式从数组和对象中提取值，对变量进行赋值

// 数组的解构
let people = ["FeiDu", "TaoRan", "GuYun", "ShenYi"];
let [fei, tao, gu, shen] = people;
console.log(fei, tao, gu, shen); // FeiDu TaoRan GuYun ShenYi
// 对象的解构
let dudu = {
   
  name: "dudu",
  age: 20,
  gender: "male",
  show: function () {
   
    console.log("师兄我错了");
  },
};
let {
    name, age, show } = dudu;
console.log(name, age); // dudu 20
show(); // 师兄我错了
// 获取对象中的对象的属性
let props = {
   
  form: "form",
  scheduledTaskAdd: {
    roleCodeData: "roleCodeData" },
};
const {
   
  form,
  scheduledTaskAdd: {
    roleCodeData },
} = props;
console.log(form);
console.log(roleCodeData);

模板字符串

// 声明
let str = `dudu`;
console.log(str, typeof str); // dudu string
// 内容中可以直接换行
let domElement = `<div id="box1">
               <div class="box2"></div>
           </div>`;

// 可以拼接变量
let age = 22;
let msg = `我今年${
     age}岁`;
console.log(msg); // 我今年22岁

简化对象写法

let name = "dudu";
let show = function () {
   
  console.log("show~");
};
let dudu = {
   
  name,
  show,
  fn() {
   
    console.log("fn~");
  },
};
console.log(dudu.name); // dudu
dudu.show(); // show~

箭头函数

定义

let fn = (a, b) => {
   
  console.log(`fn = ${
     a + b}`);
};
fn(1, 2); // fn = 3

this 是静态的，始终指向函数声明时所在的作用域下的this的值

// 小坑：使用node单独执行js文件是没有window对象的，因为没有页面
window.name = "dudu";
function show1() {
   
  console.log(this.name);
}
let show2 = () => {
   
  console.log(this.name);
};
show1(); // dudu
show2(); // dudu
let fei = {
    name: "DUDU" };
show1.call(fei); // DUDU
show2.call(fei); // dudu 此时this没有变
// 适用于与this无关的方法回调：定时器，数组的回调

不能作为构造函数实例化对象

let Person = (name, age) => {
   
  this.name = name;
  this.age = age;
};
let p = new Person("zhou", 35); // TypeError: Person is not a constructor

不能使用 arguments 变量

let fn1 = (a) => {
   
  console.log(arguments);
};
fn1(1); // ReferenceError: arguments is not defined

简略写法

// 当形参有且只有一个时可以去掉小括号
let fn2 = (n) => {
   
  console.log(n);
};
fn2(2); // 2
// 当代码体只有一条语句可以省略 {} 此时return必须省略，函数的结果就是返回值
let fn3 = (n) => n * n;
console.log(fn3(3)); // 9

函数参数默认值设置

// 具有默认值的参数一般位置要靠后
function fn(a, b, c = 10) {