js-es6(变量的声明方式以及解构赋值、箭头函数、模板字符串、展开运算符)
ES6的新增
-
新增的声明关键字:let和const
- let和const
- 没有提升
- 不允许重复声明
- 块级作用域
- 暂时性死区
- 全局变量,不会绑定window
- const
- 不允许修改地址,可以改变值
- 作为常量使用
- 注意:复杂数据和一般数据的区别
- 不允许修改地址,可以改变值
- let和const
-
箭头函数
- 基础语法
var sayHello = (name)=>"hello"+name; sayHello("张三");
- 特点
0. 类似于无名函数,只能作为值使用- 没有自己的this
- 有且只有一个参数时,可以省略小括号
- 有且直接返回数据时,可以省略花括号和return
- 当,有且直接返回对象时,并,省略花括号和return时,需要将对象使用小括号括起来
- 语义化不好,伤害了代码的可读性
- 不能new
- 小范围的作为返回值,参数,值使用,比较方便
- 基础语法
-
函数的默认参数
- 在函数定义时的小括号中,可以给形参赋值,赋的这个值,就是当前参数的默认值
function fn(a="456"){ // a = a || "123"; console.log(a); } fn(); fn("hello");
-
解构赋值
- 解开结构,单独赋值
- 数组
- 数组是数据的有序集合,所以在解构赋值时,变量之间有顺序,从左向右依次解析,没有了,就是undefined
var [a,b,c] = ["hello","world",123];
- 对象
- 对象是数据的无序集合,所以在解构赋值时,变量之间没有顺序,找到对象中的key 了,就赋值,没有找到就是undefined
var {name,sex,age} = {name:"张三",age:18,sex:1}
- 字符,因为字符类似于数组
- 字符也算是数据的有序集合,所以在解构赋值时,变量之间有顺序,从左向右依次解析,没有了,就是undefined
var [a,b,c] = "hello";
-
模板字符串
-
回顾单双引号字符串的特点
- 不允许换行,如果要换行,必须每行都是完整的字符串,还得用+连接
-
字符串的新的表达方式:反引号:`
- 允许换行
- 可以不用+号拼接,在反引号内,使用${}包裹变量
- 也可以使用+号拼接,只是没必要了
-
如:
var str = `<ul> <li>"${name}"</li> <li>'${name}'</li> <li>${name}</li> <li>${1+1}</li> <li>${fn()}</li> <li>${false ? "hello" : "wrold"}</li> </ul>`; console.log(str); var obox = document.getElementById("box"); obox.innerHTML = str;
-
-
展开运算符
- ...
- 展开运算符必须在能够接收多个数据的位置使用
- 展开数组,要在能够接收多个数据时使用
- 传参,合并数组
// 快速实现数组合并 var arr2 = [2,3,4,arr]; var arr2 = [2,3,4,...arr]; console.log(arr2); // 函数的参数 function fn(a,b,c){ console.log(a,b,c) } fn(...[3,4,5]);
- 展开对象,要在能够接收多个键值对时使用
- 合并对象
var obj = { name:"admin", age:18 } var obj2 = { sex:"男", ...obj } console.log(obj2);
- 展开数组,要在能够接收多个数据时使用
-
对象的简单写法
- 当对象的value是变量,且key和这个变量重名时,可以缩写
- 当对象的value是函数时,可以直接:函数名(){}
var name = "admin"; var age = 18; var obj = { name, age, fn(){ console.log(this.name) } } console.log(obj) obj.fn()
所有程序员都是好编剧,所有计算机都是烂演员