ES6语法笔记

2023-5-23

let与const关键字

let关键字声明变量

let 与 var 的第一个区别就是let关键字声明变量不能重复声明

let name = 'admin'
let name = 'byboy'; //Uncaught SyntaxError: Identifier 'name' has already been declared

let关键字定义的变量拥有块级作用域，在循环和分支语句中使用

{
  let uid = "byboy";
  console.log(uid); // byboy
}
console.log(uid); // Uncaught ReferenceError: uid is not defined

let定义的变量没有变量提升（区别与var）

console.log(a); // undefined
var a = 10;
console.log(a); // 10

console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 10;

const关键字声明常量

使用const关键字声明常量必须赋初始值
```
const NAME = 'byboy';
```

常量的值不允许修改

const a = 10;
a = 20; // Uncaught TypeError: Assignment to constant variable

const关键字定义的变量拥有块级作用域，在循环和分支语句中使用

{
  const uid = "byboy";
  console.log(uid); // byboy
}
console.log(uid); // Uncaught ReferenceError: uid is not defined

使用const关键字定义的数组或对象可以修改数组或对象中的元素
```
const list = [1, 2, 3, 4];
list[1] = 5;
console.log(list[1]); // 5
```

结构赋值

ES6 快速从数组和对象中提取值

// 定义一个数组
let list = [1, 2, 3];
// 对数组进行结构赋值
let [a, b, c] = list;
// 打印变量
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3


// 定义一个对象
const person = {
  name: "byboy",
  age: 20,
  skills: {
    eat: "I can eat.",
    drink: "I can drink water.",
    sleep: "I can sleep.",
  },
  code: function () {
    return "Ctrl + C";
  },
};
// 结构赋值
let {
  name,
  age,
  skills: { eat, drink, sleep },
  code,
} = person;
// 打印变量
console.log(name); // byboy
console.log(age); // 20
console.log(eat); // I can eat.
console.log(drink); // I can drink water.
console.log(sleep); // I can sleep.
console.log(code()); // Ctrl + C

模板字符串

使用 `` 声明

let str = `Today is a good day.`;
console.log(str);

可以使用换行符

let str = `Today is a good day.
Tomorrow is a good day.`;
console.log(str);

使用变量

let name = "byboy";
let msg = `${name} is a good man`;
console.log(msg); // byboy is a good man

简化对象写法

let name = "byboy";
let age = 20;
let code = function () {
  return "Ctrl + C";
};
// const person = {
//   name: name,
//   age: age,
//   code: code,
// };
// 简写如下
const person = {
  name,
  age,
  code,
};

箭头函数

ES6 函数的另外一种写法

// 普通函数
let add = function (a, b) {
  return a + b;
};
console.log(add(1, 2)); // 3

// 箭头函数
let sub = (a, b) => {
  return a - b;
};
console.log(sub(2, 1)); // 1

箭头函数的this是静态的，始终指向函数在声明时所在的作用域指向的对象

// 设置window对象的name属性
window.name = "byboy";

// 在全局作用域下面声明getName01和getName02 this指向window
let getName01 = function () {
  console.log(this);
  console.log(this.name);
};
let getName02 = () => {
  console.log(this);
  console.log(this.name);
};

getName01(); // window对象和byboy
getName02(); // window对象和byboy

const person = {
  name: "admin",
  age: 20,
};

// 使用call方法改变this指向
getName01.call(person); // person对象和admin
getName02.call(person); // window对象和byboy

体会this始终指向函数在声明时所在的作用域指向的对象

window.name = "byboy";
var age = 20;

const person = {
  name: "admin",
  age: 20,
  // eat函数没有被其他函数包裹，this指向的是全局作用域
  eat: () => {
    console.log(this);
    console.log(this.name);
    console.log(this.age);
  },
  sleep: function () {
    console.log(this);
  },
};
person.eat(); // window对象 byboy 20
person.sleep(); // {name: 'admin', age: 20, eat: ƒ, sleep: ƒ}

console.log("========================================");

let me = {
  name: "byboy",
  sayHello: function () {
    let r = () => {
      console.log(this);
      console.log(this.name);
    };
    r();
  },
};
me.sayHello(); // person对象 和 byboy

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

// 普通函数
let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
let byboy = new Person("byboy", 20);
console.log(byboy); // Person {name: 'byboy', age: 20}

// 箭头函数
let Person = (name, age) => {
  this.name = name;
  this.age = age;
};
let byboy = new Person("byboy", 20); // Uncaught TypeError: Person is not a constructor

箭头函数不能使用 arguments 变量

// 普通函数
let fn01 = function () {
  console.log(arguments);
};
fn01(1, 2, 3); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let fn02 = () => {
  console.log(arguments);
};
fn02(1, 2, 3); // Uncaught ReferenceError: arguments is not defined

箭头函数简写，当形参只有一个的时候可以省略 () ，当代码体只有一条retrun语句的时候可以省略 {} 和 return

let pow = (n) => {
  return n * n;
};

// 箭头函数简写
let pow = n => n * n;

总结：

箭头函数适合与this无关的回调，不适合与this有关的回调。

参数默认值

ES6允许给函数形参赋初始值

function add(a, b, c) {
  return a + b + c;
}
console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // NaN

function sub(a, b, c = 0) {
  return a - b - c;
}
console.log(sub(3, 2, 1)); // 0
console.log(sub(3, 2)); // 1

console.log("===========================================")

function connect({ host = "127.0.0.1", username, password, port = 3306 }) {
  console.log(host); // 127.0.0.1
  console.log(username); // root
  console.log(password); // 123456
  console.log(port); // 3306
}
let dataBase = {
  // host: "db.byboy.cn",
  username: "root",
  password: "123456",
  // port: "3306",
};
connect(dataBase);

rest参数

// ES5 获取实参的方式
function fn1() {
  console.log(arguments); // arguments对象，不能使用数组的方法，虽然它的访问像素组
  console.log(arguments[0]); // One
  console.log(arguments[1]); // Two
  console.log(arguments[2]); // Three
}
fn1("One", "Two", "Three");

// ES6 rest参数
function fn2(...args) {
  console.log(args); // 数组，可以使用数组的方法
  console.log(args[0]); // 1
  console.log(args[1]); // 2
  console.log(args[2]); // 3
}
fn2(1, 2, 3);

注意： 当函数有多个参数，且存在rest参数的时候，rest参数要放到形参的最后面

扩展运算符

扩展运算符：...

扩展运算符将一个数组转为用逗号分隔的参数序列

...运算符主要用于数组和对象的一些操作

let arr = [11, 22, 33, 44, 55];
console.log(...arr); // 11 22 33 44 55

函数调用

function add(a, b) {
  return a + b;
}
let num = [1, 2];
console.log(add(...num)); // 3

复制数组

let a = [1, 2];
let b = [...a];
console.log(b);

合并数组

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

将字符串转换成数组

let arr = [..."HelloWorld"];
console.log(arr); // (10) ['H', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd']

合并对象

let student = {
  name: "byboy",
  age: 20,
};
let typer = {
  name: "admin",
  gender: "male",
};
let byboy = { ...student, ...typer }; // 后面相同的属性覆盖前一个
console.log(byboy);

将伪数组转化成真数组

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
    let divs = document.querySelectorAll("div");
    console.log(divs); // NodeList(3) [div, div, div]
    let divArr = [...divs];
    console.log(divArr); // (3) [div, div, div]
  </script>
</body>

阅读剩余

THE END