ES6新特性
1 let与const、块级作用域
-
在ES6之前JS是没有块级作用域的,const与let填补了这方面的空白,分别使用let、const声明变量和常量,const与let都是块级作用域。
-
使用var定义的变量为函数级作用域:
-
使用let与const定义的变量为块级作用域:
{ var i = 0; var i = 1; let j = 0; const k = 1; } console.log("i:" + i); // 正常输出 i = 1; //console.log("j:" + j); // 报错,Uncaught ReferenceError: j is not defined //console.log("k:" + k); // 报错,Uncaught ReferenceError: K is not defined
2 函数参数默认值
-
ES6支持在定义函数的时候为其设置默认值:传值覆盖,空值默认
格式:function 函数名称(参数名称1=值1,参数名称2=值2, …){}
// ES5 function method(name,age){ name = name || 'XXX'; age = age || 1; console.log(name + ":" + age); } method();// XXX:1 method('小明',16); // 小明:16 method('小明',0); // 小明:1,参数0表示为false // ES6 function method1(name = 'YYY',age = 1){ console.log(name + ":" + age); } method1();// YYY:1 method1('小张',16); // 小明:16 method1('小张',0); // 小明:0
3 箭头函数
-
箭头函数=>不只是关键字function的简写,类似于部分强类型语言中的lambda表达式
-
箭头函数用 => 符号来定义。
-
箭头函数相当于匿名函数,所以采用函数表达式的写法。
-
基本结构
匿名函数:function(参数){}
箭头函数:(参数)=>{}
-
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。
//常规函数表达式书写方式 let sum0 = function(x,y){ return x + y; } // 箭头函数 ()=>{} 完整写法 let sum1 = (x,y) => { return x + y; }
-
箭头函数例子:某些情况进一步简写
(1)当要执行的代码块只有一条return语句时,可省略大括号和return关键字:
(2)当传入的参数只有一个时,可以省略小括号:
(3)当不需要参数时,使用空的圆括号:
//某些情况简写 // (1)当要执行的代码块只有一条return语句时,可省略大括号和return关键字: let sum2 = (x,y) => x + y; // (2)当传入的参数只有一个时,可以省略小括号: let sum3 = function(x){ return x + x; } let sum4 = x => x + x; // (3)当不需要参数时,使用空的圆括号: let sum5 = function(){ return 100 + 100; } let sum6 = ()=> 100 + 100;
4 对象属性缩写
-
在ES6中允许我们在设置一个对象的属性(函数)的时候不指定属性名(函数名)。
-
当对象属性(函数)名称和外部变量(函数)名称,同名的情况下,可以省略属性名的重复书写以及冒号。
// 数据值 const name = "小明"; const age = 16; const city = "上海"; // 构建一个对象 const student = { // ES5语法 // 属性名:属性值, name: name, age: age, city: city, show: function() { console.log("show~~"); } } // 输出对象信息 console.log(student); // {name: "小明", age: 16, city: "上海"} student.show(); // 使用ES6,当属性名和外部变量名同名情况,可以直接写入变量名,更加简写 // 构建一个对象 const student1 = { // ES6语法,此时属性名就是变量名,属性的值就是变量的值。 name, age, city, show() { console.log("show~~"); } } // 输出对象信息 console.log(student1); // {name: "小明", age: 16, city: "上海"} student1.show();
5 模板字符串
-
ES6支持模板字符串,使得字符串的拼接更加的简洁、直观。
-
不使用模板字符串:
在ES5中字符串拼接通过【+】实现
let first = "张"; let last = "四"; let name = 'Your name is ' + first + ' ' + last + '.'
-
使用模板字符串:
ES6中使用反引号【``】来拼接字符串,使用【${}】来包含变量
let first = "张"; let last = "四"; let name = `Your name is ${first} ${last}.`;
6 模块化(Module)
-
导出(export)ES6允许在一个模块中使用export来导出多个变量或函数。
-
导出变量
ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个或多个变量。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gcnYFmC3-1655081733663)(ES6新特性.assets/image-20220405174204708.png)]
-
导出函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sFekEJ45-1655081733664)(ES6新特性.assets/image-20220405174300718.png)]
-
-
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hZEG7KMt-1655081733665)(ES6新特性.assets/image-20220405174357534.png)]
-
ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
-
在js文件中通过import引入另外的js文件,提示Uncaught SyntaxError: Unexpected string,或者Uncaught SyntaxError: Unexpected identifier错误,原因是import属于es6的语法,但是浏览器不支持es6语法,所以需要转换。后期的Vue中会接解决这个问题。
,防止函数的命名冲突。
- 在js文件中通过import引入另外的js文件,提示Uncaught SyntaxError: Unexpected string,或者Uncaught SyntaxError: Unexpected identifier错误,原因是import属于es6的语法,但是浏览器不支持es6语法,所以需要转换。后期的Vue中会接解决这个问题。