ES6新特性1

2020-09-26

ES6新特性1

var没有块级作用域:

• 例如下面在if中的用var声明的变量，在外部是可以访问的

// var没有块级作用于
if (true) {
  var foo = 'lanpang';
}
console.log(foo); // lanpang

• 这种情况对于复杂代码是非常不好且不安全的
• for循环中其实有两个作用域

// for循环里其实是两个包裹的父子作用域
for (let i = 0; i < 3; i++) {
  let i = 666;
  console.log(i); // 666
}

• let 和 const 不会有变量提升
• const声明的常量是指变量的指针不变

// const 常量 常量指的是变量的指针是不变的 但变量指针指向的数据的属性是可以变的
const obj = {name: 'lanpang'};
obj.name = 'wang';
console.log(obj.name); // 'wang'
obj = {name: 'wang'}; // error const声明的变量的指针不可以改变

数组和对象的解构:

• 解构数组可以解构数组的特定位置，前面需要写上逗号

const arr = [111, 222, 333];
// const [one, two,three] = arr;
// console.log(one); // 111
// console.log(two); // 222
// console.log(three); // 333


const [, , three] = arr; // 只获取第三个成员

• 可以用...rest这种方法解构剩余所有项 rest则是一个数组

const [one, ...rest] = arr; // 第一个成员赋值给one 后面的所有成员赋值给rest
console.log(rest); // [222, 333];

• 对象解构的时候 如果当前作用域已经用相同的变量名，可以使用重命名的方式

const obj = { name: 'lanpang', age: 18 };

const name = 'wang';
const { name: objName } = obj; // 对象解构的重命名 因为外面作用域有一个name了 所以不能再解构name出来
console.log(objName);  // 'lanpang'
// 在name后面加冒号写一个新的变量名 就是对象解构的重命名

带标签的模板字符串:

• 可以在声明一个函数 这个函数的名字作为模板字符串的标签写在``之前
• 模板字符串会被拆解成参数传入这个函数中 第一个参数是按照插入变量分割后的模板字符串数组
• 后面的就是依次插入的变量名
• 注意：不可以用()包裹模板字符串！！！
• 这个函数的返回值就是带这个标签的模板字符串的值
• 带标签的模板字符串 可以对原来的模板字符串进行处理实现多语言 限制文字内容等处理

const name = 'lanpang';
const gender = true;

function myTagFunc(others, name, gender) {
  // 接收的第一个参数 这个参数是一个数组 存的按照变量分割后的数组
  // 剩下的就是在模板字符串中插入的变量值
  console.log(others); // ['hello, i am', ' is a ', '!'];
  console.log(name); // lanpang
  console.log(gender); // true
  return 123; // 这个方法返回的值就是带这个标签的模板字符串的值
}

const result = myTagFunc`hello, i am ${name} is a ${gender}!`;
console.log(result); // 123 

function tag(others, name, gender) {
  return others[0] + name + others[1] + gender + others[2];
}

const result2 = tag`hello, i am ${name} is a ${gender}!`;
console.log(result2); // hello, i am lanpang is a true!

// 带标签的模板字符串的作用就是对模板字符串进行加工
// 例如gender是性别 传入的是 true 可以根据这个判断是男女
function tag3(others, name, gender) {
  const sex = gender ? 'man' : 'woman';
  return others[0] + name + others[1] + sex + others[2];
}

const result3 = tag3`hello, i am ${name} is a ${gender}!`;
console.log(result3); // hello, i am lanpang is a man! 

函数形参的默认值:

• 可以在函数声明时用=直接赋值默认值
• 有默认值的参数一定要在函数形参的最后出现 否则就会出错

function isStudying(bool = true) {
  console.log(bool); // true
}
isStudying();

// 有默认值的参数一定要放到形参的最后
function isWorking(name, bool = true) {
  console.log(name); // lanpang
  console.log(bool); // true
}
isWorking('lanpang');

函数的剩余参数:

• 可用使用 ...args 的方式接受不定数量的参数形成一个数组
• 必须放到形参的最后一位且仅仅只能使用一次

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

foo(1, 2, 3, 4);

// 只能出现在形参的最后一位且只能使用一次
function bar(a, ...args) {
  console.log(a); // 1
  console.log(args); // [1,2,3,4];
}

bar(1, 2, 3, 4);

总结:

• let和const有些特性以前都没用过 这里有必要记一下
• 其他的也有一些以前没听说过的用法 例如带标签的模板字符串