es6常见新语法

一.let声明变量

与我们的JavaScript中var声明变量有什么区别？

1. 作用域不同

{ var a = 0; // var声明的变量是全局变量 let b = 0; // let声明的变量是局部变量 } console.log(a); console.log(b); //b IS NOT defined：b没有定义

     2.声明次数不同

// var可以声明多次 // let只能声明一次 var m = 1; var m = 2; let n = 3; let n = 4; //SyntaxError: Identifier 'n' has already been declared（语法错误：n已 经声明过了） console.log(m); console.log(n);

      3.声明与使用顺序不同

// var 声明的变量会全局存储 // let 声明的变量只能在执行后才存储 console.log( X ); //没有报错，输出：undefined var X = "苹果"; console.log(Y); //Y IS NOT defined（y没有定义） let Y = "香蕉";

二.const声明常量

const 声明常量,为只读变量

 1. 一旦声明之后，其值是不允许改变的。

 2. 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错 误，声明常量丢失了初始化）。

const PI = 3.14; PI = 3.1415; //Assignment TO constant variable.（声明的是常量） console.log( PI );

三.解构赋值

解构赋值是对赋值运算符的扩展 它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

1. 数组解构

var arr = [1,2,3]; // 传统的js let a = arr[0]; let b = arr[1]; let c = arr[2]; console.log(a,b,c); //es6的解构 var [X,Y,z] = arr; console.log(X,Y,z);

        2.对象解构

var USER = { username : "吕布", weapon:"方天画戟", horse:"赤兔马" }; // 传统的js let mingzi = user.username; let wuqi = user.weapon; let zuoji = user.horse; console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji); //es6的解构 let {username,weapon,horse} = USER; // 注意：解构的变量名必须是对象中的属性 console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);

四.模板字符串

模板字符串相当于加强版的字符串 用反引号 `,除了作为普通字符串，还可以用来定义多行字符串 还可以在字符串中加入变量和表达式。

1. 定义多行字符串

                                                                                                      可以不再用\n了

let str = `hello, 啊哈哈哈 我的妈呀`; console.log(str);

                                                                                                   （注:这个符号`在键盘ESC 下面，注意用英文输入法）

      2.字符串插入变量和表达式

                                                                                                      可以不用+加号拼接字符串

let NAME = `张三`; let age = 18; // 传统的拼接字符串 var info1 = "我叫:"+ NAME +",我今年"+age+"岁！"; console.log(info1); // es6的拼接字符串 var info2 = `我叫:${name},我明年${age+1}岁！`; console.log(info2);

        3.字符串中调用函数

function test(){ return "吃喝玩乐"; }  let str = `悲催的人生，从${test()}开始`;  console.log( str );

       4.声明对象简写

let NAME = `张飞`; let age = 39; //传统 let user1 = { NAME : NAME, age : age }; console.log(user1); //es6新语法中的简写 let user2 = {NAME,age}; console.log(user2);

      5.定义方法简写

// 传统 let user1 = { say : function(){ console.log("大家好！"); } }; user1.say(); //es6 let user2 = { 3.7 对象拓展运算符 拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象 3.7.1 拷贝对象(深拷贝) 科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人 3.7.2 合并对象 吞噬合并（两个对象合并成一个对象） 3.8 函数的默认参数 形参处已声明，但不传入实参会怎样？ say(){ console.log("大家好啊！"); } }; user2.say();

五.对象拓展运算符

拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象.

1.拷贝对象(深拷贝)

let user1 = { name:"项羽", age:34 };  let user2 = {...user1}; // 深拷贝（克隆）  console.log(user1); console.log(user2);

2.合并对象

let user1 = { name:"项羽", age:34 };  let user2 = {head:"诸葛亮"};  let user = {...user1,...user2}; console.log( user );

3.函数的不定参数

                                                                                                          形参处已声明，但不传入实参会怎样？

function test( ...arg ){ console.log(`传入了${arg.length}个参数`); for(var i = 0 ;i<arg.length;i++){ console.log(arg[i]); } } test(1); test(1,2); test(1,2,3,4,5,6); test(); test("郭","嘉",28);

4.箭头函数

// 传统 var f1 = function(a){ return a*10; } console.log( f1(10) ); // es6 var f2 = a=>a*10; console.log( f2(20) ); // 当箭头函数一个参数时，（）可以省略 // 当箭头函数没有参数或者有多个参数，要用（）括起来 // 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块 // 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回 var f3 = (a,b) => { let sum = a+b; return sum; } console.log( f3(3,7) ); // 可以将f3进行简化 var f4 = (a,b) => a + b; console.log( f3(11,22) );

5.函数的默认参数

function test(name , age = 18){ console.log(`我叫${name}，我今年${age}岁`); } test("吕布",33); //我叫吕布，我今年33岁 test("貂蝉"); //我叫貂蝉，我今年18岁 test("关羽",null); //我叫关羽，我今年null岁 test("马超",""); //我叫马超，我今年岁 test("张飞",undefined); //我叫张飞，我今年18岁