ES2015+学习笔记系列（一）——ES6 基础类型

---

ES2015+学习笔记系列（一）——ES6 基础

let

1 .变量不能重复声明

2 .块级作用域

3 .不存在变量提升

4 .不影响作用域链

const 定义常量

1 .一定要赋初始值

2 .一般常量使用大写

3 .常量的值不能修改

4 .块级作用域

5 .对于数组和对象元素修改，不算对常量的修改，不会报错

const TEAM = ['UZI','Ming','Kasa'];
TEAM.push('Lifa');//控制台不会报错，因为常量指向的地址没有发生改变，虽然数组元素改变了

变量的解析赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称作解析赋值

1 .数组的解构

const jijie = ["春", "夏", "秋", "冬"];
let [a, b, c, d] = jijie;
console.log(a, b, c, d);

2 .对象的解构

const obj = {
  name: "张三",
  age: 18,
  fn: function () {
    console.log("testtest");
  },
};
let { name, age, fn } = obj;
console.log(name);
console.log(age);
console.log(fn);
fn();

模板字符串

ES6 引入新的声明字符串的方式“ `` ”

特性：

• 内容可以直接出现换行符
• 变量可以直接拼接 ${}

let fistName = "Lee";
let fullName = `${fistName}Alfa`;
console.log(fullName);

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样更简洁

let objName = "lifa";
let funTest = function () {
  console.log("fnTest");
};
// let objSimplify={
//     objName:objName,
//     funTest:funTest,
//     anotherFn:function(){
//         console.log('another');
//     }
// }
let objSimplify = {
  objName,
  funTest,
  another(){
      console.log(another);
  }
};
console.log(objSimplify);

箭头函数

ES6 允许使用箭头（=>）定义函数

特性：

1. this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值，即便是 call 也不可改变 this 的指向

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

3. 不能使用 arguments 对象

4. 箭头函数简写

• 省略小括号，当形参有且只有一个的时候

• 省略花括号，当代码体只有一条语句的时候，此时 return 必须省略，而且语句执行的结果就是函数的返回值

箭头函数适合与 this 无关的回调，定时器，数组的方法回调

箭头函数不适合与 this 有关的回调，事件回调，对象的方法

参数默认值

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

1. 形参初始值，具有默认值的参数，一般位置要靠后（潜规则）

2. 与解构赋值结合

function connect({ url = "127.0.0.1", host, username, port }) {
  console.log(url);
  console.log(host);
  console.log(username);
  console.log(port);
}
connect({
  host: "atguigu.com",
  username: "root",
  password: "root",
  port: 3306,
});

rest 参数

ES6 引入rest参数，用于获取函数的实参，用来替代 arguments，arguments 不是数组，而 rest 是数组

注意：rest 参数必须要放到参数最后

//ES5获取参数方式
function date1() {
  console.log(arguments);
}
date1("a", "b", "c", typeof arguments);//[Arguments] { '0': 'a', '1': 'b', '2': 'c', '3': 'object' }
//ES6方式
function date2(a, b, ...rest) {
  console.log(rest);
}
date2("aa", "bb", "cc", "dd");//[ 'cc', 'dd' ]

spread 扩展运算符（…）

…扩展运算符能将数组(或伪数组)转换为逗号分隔的参数序列

const dir = ['东','南','西','北'];
function dirFn(){
  console.log(arguments);
}
dirFn(dir);//[Arguments] { '0': [ '东', '南', '西', '北' ] }
dirFn(...dir);//[Arguments] { '0': '东', '1': '南', '2': '西', '3': '北' }

应用：

• 数组合并

const arr1 = ["a", "b"];
const arr2 = ["c", "d"];
const fullArr1 = arr1.concat(arr2); //[ 'a', 'b', 'c', 'd' ]
console.log(fullArr1);
const fullArr2 = [...arr1, ...arr2]; //[ 'a', 'b', 'c', 'd' ]
console.log(fullArr2);

• 数组克隆

• 将伪数组转换为真数组

function spreadFn() {
  console.log(arguments);//[Arguments] { '0': 'a', '1': 'b' }
  console.log([...arguments]);//[ 'a', 'b' ]
}
spreadFn("a", "b");