ES6特性

前端 / 2021-01-07

ES6~

ECMAScript

let关键字

  • 变量不能重复声明
  • 块级作用域
  • 不存在变量提升
  • 不影响作用域链

let isOk=true;
let isOk=false;

{
    let name="luckyFang";
}
console.log(name);



console.log(time)
let time="2021-01-07";

能用let别用var

const关键字

  • 用于声明常量
  • 潜规则(大写)
  • 常量的值不能修改
  • 块级作用域
  • 对于数组和对象元素的修改,不算是对常量的修改
const list=["A","B","C","D"];
list.push("E"); //ok
list=100;

声明数组和对象尽量使用const

解构赋值

es6允许按照一定的模式从数组和对象中提取值,对变量进行赋值(解构赋值)

// 数组解构
const nameList=["张三","李四","王五","赵六"];
let[zhang,li,wang,liu]=nameList;
console.log(zhang);
console.log(li);
console.log(wang);
console.log(zhao);
// 对象解构
const lu={
    name:"luckyFang",
    age:"21",
    coding:function(){
        console.log("bug++");
    }
};

let {name,age,coding}=lu;

let{Coding}=lu;
Coding();

模板字符串

  • 内容可以直接出现换行符
  • 直接变量拼接
let str=`模板
字符
串`;
console.log(`我是${str}`);

方便好用,墙裂推荐!

简化对象写法


let name = "luckyFang";
let sayHello=function(){
    console.log("Hello!")
}


const Student={
    name,
    sayHello,
    func(){
        console.log("bug++")
    }
}

箭头函数

  • this是静态的(this始终指向函数声明所在作用域下的this)
  • 不能作为构造实例化对象
  • 不能使用arguments变量
  • 箭头函数适合于this无关的回调(定时器,数组方法回调),不适合于this有关的回调(dom事件回调,对象的方法)
let sum=(a,b)=>{
    return a+b;
}

console.log(sum(10,20));

function getName(){
    console.log(this.name)
}


let getName2=()=>{
    console.log(this.name)
}


window.name="Fang!";
const student={
    name:"luckyFang"
}


getName.call(student);
getName2.call(student);
luckyFang
Fang!

当有且只有一个形参的时候可以省略括号,当代码体只有一行语句时可以省略花括号。

函数参数初始值

function add(a,b,c=10){
    return a+b+c;
}

let result=add(1,2);
console.log(result);

rest参数

  • 可变参数
  • 必须要放到参数最后一个
function test(...args){
    console.log(args)
}
test("a","b","c");

扩展运算符

数组转换为参数序列


const list=["法外狂徒张三","嚣张跋扈李四","平平淡淡王五"];

function show(){
    console.log(arguments);
}

show(list)
show(...list) // equals ======> show("法外狂徒张三","嚣张跋扈李四","平平淡淡王五")

数组合并

const list1=["张三","李四","王五"];
const list2=["赵六","宋七"];

const list3 = list1.concat(list2);


const list4=[...list1,...list2];

console.log(list3)
console.log(list4)

数组克隆

const threeFlowers=["E","G","M"];

const clover = [...threeFlowers];

console.log(clover);

伪数组转换为数组

const divs=document.querySelectorAll("div");
const divArr =[...divs];
console.log(divArr);

symbol

  • symbol的值是唯一的
  • 不能与其他数据类型参与运算
  • symbol 定义的对象不能使用 for..in 遍历
let s = Symbol();
console.log(s,typeof s);

let s2=Symbol("luckyFang");
let s3=Symbol("luckyFang");

let s4=Symbol.for("luckyFang");

console.log(s4,typeof s4);

es6引入了原始数据类型 symbol 表示独一无二的值

let game={
    name:"俄罗斯方块"
}

let methods={
    up:Symbol(),
    down:Symbol()
};


game[methods.up]=function(){
    console.log("我可以上升");
}

game[methods.down]=function(){
    console.log("我可以下降")
}

console.log(game)

USONB

you are so niubility

  • u undefined
  • s string symbol
  • o object
  • n null number
  • b boolean