专栏名称: 颜酱
前端酱
目录
相关文章推荐
今天看啥  ›  专栏  ›  颜酱

细心使用es6的语法

颜酱  · 掘金  ·  · 2021-01-21 17:53

文章预览

阅读 74

细心使用es6的语法

let/const

  • 块作用域里,和函数作用域类似,存在变量提升
  • let/const作用于块作用域
  • let也存在变量提升,但是 JS 不允许你在声明语句前使用,声明语句前都是暂时性死区
  • const声明必须赋值,普通值不可被修改,引用类型的值不可修改引用指向,但是可以对其中的属性修改
  • let/const 可以替换掉var
 console.log(name)
 var name =1
{
  // 这里会报错哟,因为块作用域存在变量提升,但是这里是暂时性死区,访问不到name
 console.log(name)
 let name =2
}
// 依旧是1,块作用域有自己的变量
console.log(name)
// 报错,没赋值
const a
const b =1
const obj = {a: 1}
// 报错,修改引用指向
obj = {b: 1}
const arr= [1,2]
// 这样是没问题的
arr[1]=3

复制代码

解构

  • 数组可以占位解构,注意严格和位置有关
  • 对象和位置无关,和属性名称有关,可以重命名属性名称,也可解析嵌套结构
// 占位赋值
const [a, , c] = [1, 2, 3];
// 位置无关,属性名有关,可以重新命名新变量
const { name, age: newAge } = { age: 10, name: "yan" };
// 10
console.log(newAge);

const school = {
  classes: {
    stu: { name: "Bob", age: 24 }
  }
};
// 可嵌套结构
const {
  classes: {
    stu: { name, age }
  }
} = school;
// 24
console.log(age);
复制代码

扩展运算符...

  • 对象中的扩展运算符,常用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
  • 数组中扩展运算,可以将一个数组转为用逗号分隔的参数序列,一般用途如下:
    • 把数组变成函数的参数
    • 合并数组
    • 利用 rest 参数(把零散的参数合并成一个数组,很适合用来处理参数不固定)
    • 把类数组(类数组是有 length 属性的对象)转化为数组
const me = { name: "yan", age: 24 };
const meCopy = { ...me };
// { name: "yan", age: 24 }
console.log(meCopy);
// ha he xi
console.log(...["ha", "he", "xi"]);

function multiple(x, y) {
  return x * y;
}
const arr = [2, 3];
// 6
multiple(...arr);

const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];
// 合并数组
const newArr = [...arr1, ...arr2];

// rest参数,很适合用来处理参数不固定
function add(...args) {
  let result = 1;
  for (var val of args) {
    result += val;
  }
  return result;
}
// 10
add(1, 2, 3, 4);

const arrayLike = { 0: "Bob", 1: "Lucy", 2: "Daisy", length: 3 };
// 类数组转化成数组,下面还有两种了解下
const arr = [...arrayLike];
// const arr = Array.prototype.slice.call(arrayLike);
// const arr = Array.from(arrayLike);
复制代码

模板字符``

  • 可用${}这样简单的方式嵌入变量
  • 在模板字符串中,空格、缩进、换行都会被保留 (超合适写 DOM 节点)
  • 模板字符串完全支持“运算”式的表达式,你可以在${}里完成一些计算
let name = 'yan'
let newName = `${name} jiang`
let list = `
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
`;
console.log(message); // 顺利输出,不存在报错

function add(a, b) {
  // 可做计算
  const finalString = `${a} + ${b} = ${a + b}`;
  console.log(finalString);
}
// 输出 '1 + 2 = 3'
add(1, 2);
复制代码

字符串的实用方法

  • 存在性判定。以前只能用indexOf>-1,现在可灵活使用includes、startsWith、endsWith
  • 自动重复。repeat方法让同一个字符串被连续复制多次
const son = 'ha'
const father = 'xi he ha'
 // true
father.includes(son)
// false
father.startsWith(son)
// true
father.endsWith(son)

const sourceCode = 'repeat '
// 复制3次
const repeated = sourceCode.repeat(3)
// 'repeat repeat repeat '
console.log(repeated)
复制代码
………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览
推荐文章