细心使用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 = 0; 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> `; 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)
