后端程序员的前端必备【Vue】 - 07 ES6新语法

1 let定义变量

使用let定义变量能更加精准的确定变量的作用域

//for(var i = 0 ; i < 10 ; i++){}
for(let i = 0 ; i < 10 ; i++){}
console.log(i); 

2 const定义常量

使用const定义常量，常量一旦定义不可以改变

const a = 10;
a = 20;//Assignment to constant variable.

3 模板字符串

使用模板字符串可以避免大量的字符串拼接

var name = "cxk";
console.log("欢迎"+name+"登录中...");//字符串拼接
console.log(`欢迎${name}登录中...`);//模板字符串

4 方法默认值

类似于springmvc中接受参数拥有默认值

function f1(a=10 , b={name:'haha'}){console.log(a);console.log(b);
}
f1();  //没有传递参数，则使用默认值
f1("a","b"); //传递参数，则使用传递的参数

5 箭头函数

使用箭头函数可以简化复杂的代码结构(类似于java中lambda表达式)

//使用ES5的语法定义函数
//var f1 = function (a,b){
// 	return a+b;
// }
//使用ES6的语法定义函数
var f2 = (a,b) =>  a+b
console.log(f2(10,20));

箭头函数应用

//1、定义数组获取数组中所有的偶数
let arr = [1,2,3,4,5,6,7];
//使用传统方式
// arr = arr.filter(function(num){
// 	if(num % 2 == 0){
// 		return num;
// 	}
// })
//使用箭头函数
arr = arr.filter(num => num % 2 == 0)
console.log(arr);//2、定义数组获取名称包含‘a’字符，且长度大于6的元素
let arr = ['zhangsan','lisi','wangwu','zhaoliu'];
//使用传统方式
// arr = arr.filter(function(name){
// 	if(name.indexOf('a') > 0 && name.length > 6){
// 		return name;
// 	}
// })
//使用箭头函数
arr = arr.filter(name => name.indexOf('a')>-1 &&  name.length > 6 );
console.log(arr);

6 解构

定义：从一个大的数组或对象中提取个别值使用

6.1 对象解构

//对象解构：
//获取user对象中的name、age属性let user = {name:'zs',age:20,sex:'男'};
// let name = user.name;
// let age = user.age;
// console.log(name,age);//使用解构
// let {name,age} = user;
// console.log(name,age)//如果新对象的属性名不一致的时候需要指定名称
let {name:name1,age:age1} = user;
console.log(name1,age1)

6.2 数组解构

//数组解构
let produts =[{name:"小米",price:3999},{name:"华为",price:4999},{name:"苹果",price:6999},{name:"三星",price:5999},]let p1,p2;
[p1,p2] = produts;
console.log(p1);
console.log(p2);
//取出第三第四个对象
[,,p1,p2] = produts;
console.log(p1,p2);

6.2 使用解构实现变量交换

let a = 10;
let b = 20;
[a,b] = [b,a];
console.log(a,b);

7 Spread Operator

通过不定参数实现解构

• 常用于JSON对象

//数组拼接
let arr1 = [1,3,4,5];
let arr2 = [100,200];
let arr3 = [...arr1,...arr2];
console.log(arr3);//对象
let user = {name:'jack',gender:'男'};
let userInfo = {...user,age:30};
console.log(userInfo);

8 模块化编程

使用模块化编程可以减少大量的js库的引入，拆分的功能相互独立，可以单独测试(java中的解耦)

注意的点:

• 使用export default 向外暴露的成员，可以使用任意的变量来接收
• 在一个模块中，export default 只允许向外暴露1次
• 在一个模块中，可以同时使用 export default 和 export 向外暴露成员(方法、变量、对象)
• 目前浏览器上还不支持ES6的导入导出语法。需要在设置js的类型为module <script type="module">

导出模块

//导出add方法，default表示默认方法(有且仅有一个default导出)
export default function add(a,b){return a+b;
}
//导出其他方法
export function f1(){console.log("导出f1函数");
}//导出变量
export let username = 'admin';//导出对象
export let user = {name:'zs',age:30
}

导入模块

• 没有使用default修饰的内容必须写在{}中，且名称保持一致
• 导入default模块可以自己制定名字

<script type="module">//导入模块  导入default模块可以自己制定名字。其他的导入需要方法{}中，且名称保持一致import add2,{f1,username,user} from './js/test.js';console.log(add2(10,20));f1();console.log(username);console.log(user.name,user.age);
</script>