node.js对es6语法学习

1、es6模板字符串的使用（模板语法）

 

console.log(`${obj.newname}是${obj.name}的另外一个名字，还有就是她今年18岁啦`);

es6 提供一个语法表示一个字符串，使用的标识符是 反引号； 以前定义字符串使用的： '' ""

1、允许换行 2. 允许在模板字符串里面直接使用变量

2、es6对象简化语法

 

在对象当中会使用到已经定义过的变量，且名字相同时，我们可以直接调用，省略在对象中重新定义的方法。

对对象进行输出以验证省略重复的正确性

 

/*var name = 'andy';
var age = 12;
​
var userInfo = {
    id: 1,
    name: name,
    age: age
}
​
console.log(userInfo);*/
​
let id = 12;
let name = 'andy';
let age = 12;
​
let fn = function(){
    console.log(`my name is ${this.name}` );
}
​
// es6 写法
let userInfo = {
    id,
    // 如果我们的变量的名称和属性的名称一致，则可以直接只写变量名
    name, // name: name
    age,
    fn // 如果我们的函数的名称和属性的名称一致，直接写函数名即可
}
​
console.log(userInfo);
userInfo.fn();
​
​

3、ES6其他注意事项

注意： es6 语法特性如果是在nodejs的高版本执行没啥问题，高版本支持 es6；

如果是nodejs 低版本 4 5 不支持 es6（ECMAScript6 ECMAScript2015） 除了可以在nodejs 也可以在浏览器执行 注意：浏览器高版本才可以执行， 如果是 IE 678 肯定不认识，直接报错。

需求：浏览器对es6不兼容，如何解决呢？ 使用 babel 翻译器 考拉 less sass---考拉--- css es6----babel---es5（基本所有的浏览器全部支持）

在线编译网址：

Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器

4、ES6中函数形参的默认值

规律：声明不写参数，调用时可以在形参中写一个等式赋默认值，若在写了实参与此同时形参里面写了默认值，在最后输出结果为实参中递过来的值

// ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法
function func(x){
    x = x || 1;
    console.log(x);
}
func();

// ES6 做法，代码简洁易阅读
function func(x = 1){ // 注意当 x 为 undefined 时 x 赋值为 1
    console.log(x);
}
func();
​
function fun(name = 'nodejs', age = 12){
    console.log(name, age);
}
fun();   // 'nodejs', 12
fun("xiaoming", 15);    //"xiaoming", 15

5、解构赋值指定参数的默认值：简化代码

1、function func2({name, age} = {}){   //防止不传实参时候的报错
    console.log(name, age);
}
func2();   //undefined undefined
​
2、function func2({name="nodejs", age=11} = {}){    //指定默认值
    console.log(name, age);
}
func2();  //nodejs 11

10、三点运算符

利用在形参中写：“...+变量名”的方式去收集剩余的实参数据，注意在输出时要去除三个点，如下例子中的i;

 

6、扩展运算符（三点运算符即有合并又存在拆解的作用）

 解释：在声明函数当中对数组进行拆解以实参的形式传入形参当中，形参依据一一对应的关系输出前两个对应的变量，剩余的部分依据三点运算符去合并成一个新的数组

1、基本理解 let arr1 = [10, 20, 30];

function func(a, b, c){ console.log(a,b,c) }

func(...arr1); //等效于：func(10,20,30); 输出结果10 20 30

2、合并数组 let arr2 = [40, 50, 60]; let newArr = [...arr1,...arr2]; // 等效于 [ 10, 20, 30, 40, 50, 60 ] console.log(newArr); //[ 10, 20, 30, 40, 50, 60 ]

3、合并对象 let obj1 = { name:"nodejs", age:"11", }; let obj2 = { email:"nodejs@163.com", }; let newObj = {...obj1,...obj2}; // 等效于{ name: 'nodejs', age: '11', email: 'nodejs@163.com' } console.log(newObj); //{ name: 'nodejs', age: '11', email: 'nodejs@163.com' }

4、es6中另一个合并对象的方法

Object.assign()方法，第一个参数填写空数组，第二个参数填写要合并的变量，注意第一个参数里面可以有值存在

let newObj2 = Object.assign({},obj1,obj2); // 把第二个及第二个以上的参数都合并到第1个上面去。 console.log(newObj2); //{ name: 'nodejs', age: '11', email: 'nodejs@163.com' }