Node(2) ES6 新增语法特性

一、花样变量声明

var 关键字

// a.存在变量提升 console.log(score); var score = 99; // b.函数作用域 for(var i=0;i<10;i++){ } console.log(i); // c.可重新声明 var score = 98; console.log(score); // d.可重新赋值 score = 97; console.log(score);

let 关键字

// a.无变量提升 console.log(score); let score = 99; // b.块级作用域 for(let i=0;i<10;i++){ } console.log(i); // 报错 // c.不可重新声明 let score = 98; // 报错 // d.可重新赋值 score = 97; console.log(score);

const 关键字

// #声明必须赋值(常量一般全部大写) const PI; // 报错 console.log(PI); // a.无变量提升 console.log(PI); // 报错 const PI= 3.1415926; // b.块级作用域 { const SHAPE= 4; } console.log(SHAPE); // 报错 // c.不能重复声明 const PI = 3.15; // 报错 // d.不可重新赋值 PI= 4; // 报错 console.log(PI);

二、解构赋值

、对象解构赋值

对象解构赋值：将对象属性的值赋给变量；

Let’s Coding：

let obj = { name:"张三" , age:18 , sex:'男' , score:60 , grade:'初三' } // ES5：解构赋值 let name = obj.name ; let age = obj.age ; let sex = obj.sex ; console.log(name,age,sex); // ES6：解构赋值 // 1.自定义赋值 let {name:name1,age:age1,sex:sex1} = obj; console.log(name1,age1,sex1); // 2.全写 let {name:name,age:age,sex:sex} = obj; console.log(name,age,sex); // 3.简写(变量名需与对象属性名一致) let {name,age,sex} = obj; console.log(name,age,sex); // 4.默认值 let {name,age,sex,scories=10} = obj; console.log(name,age,sex,scories); // 5.默认值在编译时就赋值好了，在运行时会将对象的属性值重新赋给变量 let {age=20} = obj; console.log(age); // 18 // 补充：...another 表示出了name 属性之外的所有属性封存在另一个对象another中 let {name,...another} = obj; console.log(another);

数组解构赋值

数组解构赋值：将数组元素值依次赋值给变量；

Let’s Coding：

let array = [1,2,3,4]; // ES5：数组解构赋值 let one = array[0]; let two = array[1]; let three = array[2]; let four = array[3]; console.log(one,two,three,four); // ES6：数组解构赋值 // 1.依次赋值 let {one,two,three,four} = array ; console.log(one,two,three,four) ; // 2.多余变量 let {one,two,three,four,five}= array; console.log(one,two,three,four,five); // five：undefined // 3.默认值 let {one,two,three,four,five=50}= array; console.log(one,two,three,four,five);

解构赋值&&函数

Let’s Coding：

// ES5： // 声明函数+多个形参 function fun(name,age,sex){ console.log(name,age,sex); } fun('zs',18,'男'); // 对象参数 function fun(obj){ console.log(obj.name,obj.age,obj.sex); } fun({name:'zs',age:18,sex:'男'}); // ES6： function fun({name,age,sex}){ console.log(name,age,sex); } fun({name:'ls',age:19,sex:'男'});

三、箭头函数

箭头函数

箭头函数：匿名函数的简写； 注意：箭头函数中的this与普通函数中this有不同点；

Let’s Coding：

// 匿名函数： let fun = function(name){console.log(name);}; fun("张飒"); // 箭头函数 = 参数 -> 函数体； let fun = name -> console.log(name); /* 箭头函数简写规则： 1.function 改为 -> , 读作：goesto; 2.只有一个形参，小括号可省; 3.形参为0或>=2，括号不可省略; 4.函数体只有一句话，可省略大括号; 5.函数体只有一句话，且为return + 返回值，则return省; 6.函数体大于1句话，大括号不可省; */ // 无参数且函数体为一句话 let fun = () -> console.log('Are you Ok?'); // 单个参数，一句函数体 let fun = name -> console.log('name：Are you Ok?'); // 多个参数，一句函数体 let fun = (name,age) -> console.log(name,age); // 单个参数+return 语句 let fun = score -> score+10; // 多个参数+return+函数体 let fun = (name,age,score) -> { console.log(name,age,score); return score+10; };

四、对象成员的简写

Let’s Coding：

let name ='zs' ; let age = 18 ; let sex ='男' ; // ES5：对象成员简写 let obj = { name:name, age:age, sex:sex introduce:function(){ console.log("My name is:",name); } }; console.log(obj); // ES6：对象成员简写 let oo = { name, age, sexx:sex, // 别名赋值 introduce:function(){ console.log("My name is:",name); } };

五、模板字符串

新增模板字符串：``,保留原字符串格式；

Let’s Coding:

// ES5： let str = " one two three four, five six seven; "; // 报错 // ES6： let author = "八"; let str = ` one ${author} two three four, five six seven; `; console.log(str); // 函数 function fun(){console.log("123");}; console.log(`数字：${fun()}`);

六、(展开)运算符

展开运算符：...

对象展开运算符

Let’s Coding：

let song = { skill:"青花瓷", } let business = { skill:"money", num:999999999 } let people ={ ...song, // 将song的所有内容共享给people ...business // 将business的所有内容共享给people } console.log(people);

数组展开运算符

Let’s Coding：

// 数组拼接 let index = [1,2,3]; let score = [...array,60,70,80]; console.log(score); let sum = [...index , ...score]; console.log(sum); // 求最值 let max = Math.max.apply(Math,sum); console.log(max); max = Math.max(...sum); console.log(max);

七、数据类型 Set

新增数据类型 Set ：同数组存放数据，但不存放重复元素；

Let’s Coding:

// 重复项数组 let arr = [1,2,1,3,4,2]; // 去除重复 let set = new Set(arr); console.log(set); // 返回成数组 let only = [...set]; console.log(only); // 整理 let onlies = [...new Set(arr)]; console.log(onlies);

八、Promise

暂无

---

结语：今日事，今日毕；明日事，何其多。

赠诗：

明日复明日， 明日何其多。 我生待明日， 万事成蹉跎。 世人若被明日累， 春去秋来老将至。 朝看水东流， 暮看日西坠。 百年明日能几何？ 请君听我《明日歌》；