Web前端 -- ES6

Web前端 -- ES6

let

申明变量的标识符，替代var标识，为了让js语法更贴近统一的编程规范

• let声明的变量，有作用域限制，var没有限制
• let声明的变量，在一个作用域内变量名只能申明一次，var没有限制
• let声明的变量，不存在变量提升，var存在(变量提升：只要代码中有声明，上面写的变量也会被初始化为undinfan)

const

申明常量的标识符

• 定义时必须赋值
• 定以赋值后无法进行修改

解构赋值

数组解构赋值

let [a,b,c] = [100,200,300];
========
a=100,b=200,c=300

//[]不能省略，不像python

对象解构赋值

let monster = {name:"牛魔王", age:800};
let {name，age} = monster;
========
name="牛魔王"，age=800

//{}不能省略且不能使用[]，{}中的变量要和对象属性名称一致才能取出，顺序不影响取值

模板字符串

使用反引号`将字符串包起（类似python f字符串）

• 可做普通字符串
• 可以用来定义多行字符串，既可以将换行字符串原生输出
• 字符串插入变量和表达式，使用${}
• 字符串中可调用函数

对象简写

属性简写

const age = 800;
const name = "牛魔王"；
//传统：
let monster = {name:name,age:age};
//es6
let monster = {name,age};

方法简写

//传统
let monster = {
    name:"红孩儿",
    age:100,
    sayHi: funtion (){
    	console.log("信息：name="，this.name，"age=",this.age);
	}
}
//es6
let monster = {
    name:"红孩儿",
    age:100,
    sayHi(){
    	console.log("信息：name="，this.name，"age=",this.age);
	}
}

对象操作

let cat1 = {name："小花猫",age：2}
//引用赋值(改变cat2时cat1同时改变,cat1与cat2指向同一对象)
let cat2 = cat1;
//拷贝对象(改变cat2时cat1不改变，cat1与cat2指向不同对象，cat2是新增对象)
let cat3 = {...cat1};

//合并对象
let monster = {name:"白骨精",age:100};
let car = {brand："奔驰",price:80000};
//此时monster_car是新增对象，同时拥monster与car的所有属性与值
let monster_car = {...monster,...car};

箭头函数

//基本语法
(参数列表) => { 函数体 }
//注意：
//1.箭头函数没有参数或有多个参数，必须有()，如果只有一个参数，可以省略()
//2.箭头函数整体有多行语句，用{}包裹代码块，如果只有一行语句，并且需要返回结果，可以省略{}与return关键字，结果会自动返回
//3.箭头函数常用与匿名函数定义（类似java匿名实现类）

//补充：函数可以传给一个变量

//箭头函数+对象解构
//1.对象结构
let monster = {
    name:"红孩儿",
    age:100,
    skill: ["红缨枪","三味真火"]
//2.箭头函数定义,这里注意形参中参数带有{},这个代表一个对象中的属性
let f = ({skill}) => {
    console.log("skill=",skill);
}
//3.箭头函数调用，这里会自动匹配monster中的skill属性，同时如果参数有多个可以匹配多个monster属性，顺序不影响调用
f(monster);