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中接受參數(shù)擁有默認值

function f1(a=10 , b={name:'haha'}){
    console.log(a);
    console.log(b);
}
f1();  //沒有傳遞參數(shù)，則使用默認值
f1("a","b"); //傳遞參數(shù)，則使用傳遞的參數(shù)

5 箭頭函數(shù)

使用箭頭函數(shù)可以簡化復雜的代碼結構(類似于java中l(wèi)ambda表達式)

//使用ES5的語法定義函數(shù)
//var f1 = function (a,b){
// 	return a+b;
// }
//使用ES6的語法定義函數(shù)
var f2 = (a,b) =>  a+b
console.log(f2(10,20));

箭頭函數(shù)應用

//1、定義數(shù)組獲取數(shù)組中所有的偶數(shù)
let arr = [1,2,3,4,5,6,7];
//使用傳統(tǒng)方式
// arr = arr.filter(function(num){
// 	if(num % 2 == 0){
// 		return num;
// 	}
// })
//使用箭頭函數(shù)
arr = arr.filter(num => num % 2 == 0)
console.log(arr);

//2、定義數(shù)組獲取名稱包含‘a’字符，且長度大于6的元素
let arr = ['zhangsan','lisi','wangwu','zhaoliu'];
//使用傳統(tǒng)方式
// arr = arr.filter(function(name){
// 	if(name.indexOf('a') > 0 && name.length > 6){
// 		return name;
// 	}
// })
//使用箭頭函數(shù)
arr = arr.filter(name => name.indexOf('a')>-1 &&  name.length > 6 );
console.log(arr);

6 解構

定義：從一個大的數(shù)組或對象中提取個別值使用

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 數(shù)組解構

//數(shù)組解構
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 使用解構實現(xiàn)變量交換

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

7 Spread Operator

通過不定參數(shù)實現(xiàn)解構

• 常用于JSON對象

//數(shù)組拼接
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函數(shù)");
}

//導出變量
export let username = 'admin';

//導出對象
export let user = {
    name:'zs',
    age:30
}

導入模塊文章來源地址http://www.zghlxwxcb.cn/news/detail-443388.html

• 沒有使用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>

到了這里，關于后端程序員的前端必備【Vue】 - 07 ES6新語法的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！