ES6 新语法

ES6 新语法

---

新的变量声明关键字

let 关键字声明变量:

1.预解析时不会作变量提升;

2.不能重复声明;

3.具有块级作用域;

4.可以重新赋值

   console.log(food);        //报错 没有变量提升
   let food = '糖醋里脊';    
   let food = '回锅肉';        
   console.log(food);      //报错 不能重复声明

   { let drink = '橙汁'; }
        console.log(drink);      //报错 有块级作用域

   let fruit = '苹果';
       fruit = '香蕉';
   console.log(fruit);      //打印出香蕉

const 关键字声明一个常量:

1 . 不可以重新赋值 ;

2 . 没有变量提升 ;

3 . 不能重复声明 ;

4 . 具有块作用域 ;

	 console.log(firstName);       //报错  常量没有预解析,不会变量提升
        
     const firstName = '谢';
     firstName = '王';
     console.log(firstName);       //报错 常量无法通过重新赋值进行修改
        
     const firstName = '李';       //报错  常量不能重复声明

     {const name = '小王'};
     console.log(name);            // 报错 常量具有块级作用域,

var 关键字声明变量:

1 . 有变量提升;

2 . 可以重复声明;后面覆盖前面的;

3 . 没有块级作用域;

4 . 可以重新赋值;

---

解构赋值

对象解构赋值:

let {name,age,sex} = { name:'谢总' , age:21 , sex:"man"};
console.log(name , age , sex);            // 谢总  21  man

let {name,age,sex} = { name:'谢总' , age:21 };
console.log(name , age , sex);            // 谢总  21  undefined

let {name = '暂无数据',age = '暂无数据',sex = '暂无数据' } = {name:'谢总' ,age:21 ,sex:"nan"};
console.log( name , age , sex );              // 谢总

let {name = '暂无数据',age = '暂无数据',sex = '暂无数据'} = { age:21 , sex:"nan"};
console.log( name );                      // 暂无数据

数组的解构赋值:

let [a,b,c] = [12 , 15 , 16];
console.log( a , b , c );        //12 15 16

let [d,e,f] = [12 , 15];
console.log( d , e , f );        //12 15 undefined

let [g , h] = [1 , [ 2 , 3 ] ];
console.log(g , h);              // 1  [2,3]
        
let [i = '暂无数据' , g = '暂无数据' , k = '暂无数据'] = [12 , 13]
console.log(i,g,k);              // 12  13  暂无数据

实际应用:

function test ( { name , age , sex} ){
	 console.log('他的名字是'+ name);
     console.log('他的年龄是'+ age);
}
var obj = { name:'谢总' , age:21 , sex:'男' };
test(obj);

---

箭头函数

匿名函数的简写形式

1.如果形参只有一个, 可以省略小括号.

2.如果没有形参个或者多个,不能省略小括号.

3.如果函数体只有一句话,大括号也是可以省略的.

4.如果函数体只有一句话,并且是返回值的那一句话, 那在省略大括号的同时也要省略return.

5.如果函数体不止一句话,就不能省略大括号.

let test = function (name){
	console.log('你好呀!!' + name );
}
test('老谢');				
//---------------------------------------------------------------------------------------

let test = name => console.log('你好呀!!' + name);
test('老谢');				//如果形参只有一个, 可以省略小括号.
						  //如果函数体只有一句话,大括号也是可以省略的.
//---------------------------------------------------------------------------------------
let test = (name , age) => {
     console.log('你好呀!!' + name);
     console.log('我今年' + age + '岁');
}
test('老谢', 36);      //如果函数体不止一句话,就不能省略大括号.

let test = function (){
	return 100;
}
test();				//如果函数体只有一句返回值,那在省略大括号的同时也要省略return.简写如下:
//---------------------------------------------------------------------------------------
let test = () => 100;
test();               

模板字符串

模板字符串 ( 用做字符串连接 )

	var name = ‘老邓’;
	var age = 19;
	var str = `大家好,我叫${name},今年${age}岁了!!!`;

对象属性简写

对象属性简写,属性名和属性值是同名的情况下,可以简写

const name = '老王';
const age = 40;
const sex = '男';
const score = 99;
//---------------------------------------------------------------------------------------
let obj1 = {
    name : name,
    age : age ,
    sex : sex
};
console.log(obj1);       // { name:'老王' , age:40 , sex:'男' }
//---------------------------------------------------------------------------------------
let obj2 = {
     name,
     age,
     sex 
};
console.log(obj2);       // { name:'老王' , age:40 , sex:'男' }
//---------------------------------------------------------------------------------------
let obj3 = {
     name,
     age,
     sex,
     fenshu:score
};						 // { name:'老王' , age:40 , sex:'男' , fenshu:99}

---

对象和数组的展开

对象的展开

  var obj1 = {name : '老李', age : '22', sex : '男' } ;   
  var obj2 = {number : 1 , score : 60};

  var obj3 = {...obj1 , ...obj2};
  console.log(obj3);

  var obj4 = {...obj2 , name : '老王' , score: 50 };
  console.log(obj4);               //如果有同名的属性,后面的会把前面的给覆盖.

数组的展开

  let arr1 = [2, 3, 4];
  let arr2 = [5, 6, 7];

  let arr3 = [...arr1, 4, 5];
  console.log(arr3);              // [ 2, 3, 4, 4, 5 ]
        						  //相同项不会被覆盖
  let arr4 = [...arr1, ...arr2];
  console.log(arr4);              // [ 2, 3, 4, 5, 6, 7 ]  相当于数组的拼接

  var arrNew1 = arr1.concat([5,6,7]);
  console.log(arrNew1);            // [ 2, 3, 4, 5, 6, 7 ]
  var arrNew2 = arr1.concat(arr2);
  console.log(arrNew2);            // [ 2, 3, 4, 5, 6, 7 ]             

​