[路飞]_es6新特性复盘(上）

let和块级作用域

以前块是没有独立作用域的 let是块级作用域，var是全局作用域

if(true){
  var foo='guaqiu5'
}
console.log(foo)
//外部还能访问到块内的foo
//这样是不安全的

//let声明的变量只有在块内才能访问到
if(true){
  let foo='guaqiu5'
}
console.log(foo)
//console:foo is not defined
//let场景
//适用于for循环的计数器
//循环注册事件
var ele=[{},{},{}];
for(var i=0;i<ele.length;i++)
  	ele[i].onclick=function(){
      console.log(i)
    }
 ele[0].onclick();
//会打印3 因为i用var声明，在全局区。

官方的bug不叫bug叫特性变量声明提升 var有这个特性 let没有这个特性 let和var还有变量提升的区别,

console.log(foo);
let foo='guaqiu5';

输出结果

const

在let的基础上加上一个只读的特性 const声明的成员不能修改，能修改恒量中的成员，不能修改内存地址。最佳实践:不用var 主用const 配合let

数组的解构

const arr=[100,200,300];
//传统获取数组的值
const foo=arr[0];
const bar=arr[1];
const baz=arr[2];
//新特性解构
const [foo,bar,baz]=arr;
//只获取arr[2]
const[, , baz]=arr;
//...只能用于最后一个元素
const[...baz]=arr

对象的解构

与数组解构类似

const obj={name:'guaqiu5',age:18}
//遇到重名的解决方案
const name='111';
const {name:ObjName}=obj

应用场景

const {log}=console
log(1);
log(2);
log(3);

简化代码减小代码体积

模版字符串字面量

传统字符串不支持换行需要用\n来表示换行模版字符串支持直接输入换行符，利于输出html字符串支持插值表达式（${variable}）嵌入数值

带标签的模板字符串

//带标签的模板字符串
const {log}=console;
const name="guaqiu5";
const age=20;
const sex=1;
function  myTagFunc(strings,name,age,sex){
    log(strings);
    log(strings[0]);
    log(strings[1]);
    log(strings[2]);
    log(strings[3]);
    const detailedSex=sex=1?'boy':'girl';
    return name+strings[0]+strings[1]+age+strings[2]+strings[3]+detailedSex;
}
const res=myTagFunc`${name} is a ${age} years old ${sex}`

log(res);

输出结果

字符串扩展方法

includes() startsWith() endsWith()

//include startsWith endsWith
const {log}=console;
const str=`Error: Foo is not defined.`
log(str.includes("Foo"));
log(str.startsWith("Error"));
log(str.endsWith("."));

函数默认值

//函数默认参数
//previous
const { log } = console;

function func1(value) {
    value === undefined ? value = "默认值" : value = value;
    log(value);
}
//func1()
//func1(1)
//current
function func2(value = "默认值") {
    log(value);
}
func2()
func2(22)

剩余参数

es6之前用arguments获得剩余参数，是一个对象 es6后用...args获取剩余参数，是一个数组

//剩余参数
function func1() {
    console.log(arguments);
}
//func1(1, 2, 3, 4);
function func2(...args) {
    console.log(args);
}
func2(1, 2, 3, 4);

展开数组

//展开数组
//傻傻的办法
const arr = [1, 2, 3, 4];
console.log(arr[0],
    arr[1],
    arr[2],
    arr[3]
);
//es6之前的办法 利于apply
console.log.apply(console, arr);
//es6之后的办法
console.log(...arr);

箭头函数

之前this是谁调用 this是谁箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

对象字面量加强

//对象字面量增强
//语法糖 value和key名重复，函数
//key为计算属性，之前必须得用索引器来添加，es6后可直接添加
//es6之前
const name = "guaqiu5";
const obj1 = {
    name: name,
    methods: function() {
        console.log(this);
    }
}
obj1[1 + 1] = "computed";
//obj1.methods();
//es6之后
const obj2 = {
    name,
    methods() {
        console.log(this);
    },
    [1 + 1]: "computed2"
}
obj2.methods();

对象扩展方法

//对象扩展方法 assign
const obj1 = {
    a: 1,
    b: 2,
    c: 3,
};
const obj2 = {
    a: 11,
    d: 3,
    e: 99
};
const res = Object.assign(obj1, obj2);
console.log(obj1);
console.log(res === obj1);
//应用场景
//对象复制
const obj3 = Object.assign({}, obj2);
console.log(obj3);