ES6新语法

Posted 2022-05-19 shineguang

1.解构

        在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量，即将数组或对象中的值，拆成一个一个变量。

        解构：自动解析数组或对象中的值，并赋值给指定的变量。、

1.1数组解构

var arr = [3,4,5];
    var [a, b, c] = arr;
    console.log(a, b, c);
    
    //还可以忽略值 需要使用,占位
    var arr = [3,4,5];
    var [a,, c] = arr;
    console.log(a, c);

    //函数返回值为数组，进行解构
    function f5()
        return [1,2,3];
    
    var [a, b, c] = f5();
    console.log(a, b, c);

1.2对象解构

        将对象中的成员值，取出并赋值给多个变量(变量名与对象成员名一致)

 

var person = 
    "nickname": "老三",
    "age": 30,
    "sex": "男"
;
//解构时 中的变量名，不能加引号
var nickname, age, sex = person;
console.log(nickname, age, sex);
//可以忽略值  直接忽略 不需要占位
var nickname, sex = person;
console.log(nickname, sex);

 

1.3函数参数与解构

 

        函数参数使用解构数组或解构对象形式

 

//1.函数形参，使用解构数组形式，调用函数时需要传递数组实参
function f1([x,y,z])
      console.log(x,y,z);

var arr = [1,2,3];
f1(arr);

//相当于
/*
function f1(a)
      var [x,y,z] = a;
      console.log(x,y,z);

var arr = [1,2,3];
f1(arr);
*/

//2.函数形参，使用解构对象形式，调用函数时需要传递对象实参
function f2(nickname,age,sex)
      //变量名与对象成员名一致
      console.log(nickname,age,sex);

var obj = "nickname":"zhangsan", "age":40, "sex":"男";
f2(obj);

//相当于
/*
function f1(a)
      var nickname, age, sex = a;
      console.log(nickname,age,sex);

var obj = "nickname":"zhangsan", "age":40, "sex":"男";
f2(obj);
*/

 

1.4默认值与解构数组

         函数参数使用解构数组 并设置默认值

<script>
//1.函数参数使用解构数组，调用函数不传参数会报错
function fn([x, y, z])
      console.log(x, y, z);

fn(); //会报错
</script>

<script>
//2.函数参数使用解构数组，对整个数组设置默认值为空数组
function f1([x, y, z] = [])
      console.log(x, y, z);

f1(); //不报错  x y z 都是 undefined

//3.函数参数使用解构数组，对整个数组设置默认值,数组中每个变量对应一个默认值
function f2([x, y, z] = [1,2,3])
      console.log(x, y, z);

f2(); //不报错  x=1 y=2 z=3
f2([4,5,6]); // x=4 y=5 z=6


//4.函数参数使用解构数组，对整个数组设置默认值为空数组, 在解构数组中对每个变量设置一个默认值
function f3([x=1, y=2, z=3]=[])
      console.log(x, y, z);

f3(); //不报错  x=1 y=2 z=3
f3([4,5,6]); // x=4 y=5 z=6
</script>

1.5默认值与解构对象

         函数参数使用解构对象 并设置默认值

<script>
//1.函数参数使用解构对象，调用函数不传参数会报错
function fn(x, y, z)
      console.log(x, y, z);

fn(); //会报错
</script>

<script>
//2.函数参数使用解构对象，对整个对象设置默认值为空对象
function f1(x, y, z = )
      console.log(x, y, z);

f1(); //不报错  x y z 都是 undefined

//3.函数参数使用解构对象，对整个对象设置默认值,对象中每个变量对应一个默认值
function f2(x, y, z = "x":1,"y":2,"z":3)
      console.log(x, y, z);

f2(); //不报错  x=1 y=2 z=3
f2("x":4,"y":5,"z":6); // x=4 y=5 z=6


//4.函数参数使用解构对象，对整个对象设置默认值为空对象, 在解构对象中对每个变量设置一个默认值
function f3(x=1, y=2, z=3=)
      console.log(x, y, z);

f3(); //不报错  x=1 y=2 z=3
f3("x":4,"y":5,"z":6); // x=4 y=5 z=6
</script>

2.Symbol数据类型

            ES5数据类型：6种： string number boolean null undefined object

            ES6新增了一种数据类型：Symbol，表示独一无二的值，Symbol最大的用途是用来定义对象的唯一属性名

var symbol1 = Symbol();

var symbol2 = Symbol("Alice");

console.log(symbol1, symbol2) // 输出：Symbol() Symbol(Alice)

                Symbol类型的值是一个独一无二的值，Symbol函数的参数只是表示对当前Symbol值的描述，因此相同参数的Symbol函数的返回值是不相等的。

var attr_name = Symbol();
var obj = 
    [attr_name]: "Alice"
;
console.log(obj[attr_name]);

var obj = 
      [Symbol()]:"Alice"
;
console.log(obj);

               注：Symbol值作为对象属性名时，不能用点运算符。由于点运算符后面总是字符串，所以不会读取attr_name作为标识名所指代的那个值。

           使用[]方括号，里面的attr_name不带引号，表示attr_name是一个变量.

3.箭头函数

              ES6可以使用“箭头”（=>）定义函数，注意是普通函数，不要使用这种方式定义类（构造器）。

3.1语法

           具有一个参数并直接返回的函数

var f1 = a=>a;
//相当于  var f1 = function(a) return a;;
console.log(f1(‘hello‘));//‘hello‘

              没有参数的需要用在箭头前加上小括号

var f2 = () => ‘来了老弟‘;
console.log(f2());

              多个参数需要用到小括号，参数间逗号间隔

var f3 = (a, b) => a+b;
console.log(f3(3,4));//7

              函数体多条语句需要用到大括号

var f4 = (a, b) => 
      console.log(‘来了老弟‘);
      return a+b;

console.log(f4(5,6));//11

              返回对象时需要用小括号包起来，因为大括号被占用解释为代码块

var f5 = () => 
      return ("name":"老弟", "age":40);


//var f5 = () => ("name":"老弟", "age":40);
console.log(f5());

               直接作为事件处理函数

<input type="button" value="点击" id="btn">
<script>
    document.getElementById(‘btn‘).onclick = evt=>
          console.log(evt);//evt 事件对象
    
</script>

                 赋值为对象的方法

var obj = ;
obj.say = ()=>return "hello,我是obj的say方法";
console.log(obj.say());

                 作为回调函数

var f6 = (f)=>
    console.log(f(100));
;
// f6(a=>a);
var f7 = a=>a;
f6(f7);

1.2注意点

             typeof 判断箭头函数 结果为function

var f1 = a=>a;
console.log(typeof f1);//‘function‘

                 instanceof判断是否Function的实例，结果为true

var f1 = a=>a;
console.log(f1 instanceof Function);//true

                 箭头函数不绑定this, 内外this指向固定不变

var obj = 
      say:function()
          //非箭头函数
          var _this = this;
          var f1 = function()
              console.log(_this);//obj
            console.log(this);//window
        ;
          f1();
          //箭头函数
        var f2 = ()=>
            console.log(this);
        ;
          f2();
      
;
obj.say();

               箭头函数不能做构造函数，不能用new实例化，也没有prototype属性

var Person = ()=>;
console.log(Person.prototype);//undefined
var p = new Person();//报错

                不能使用arguments

var f1 = ()=>
    console.log(arguments);
;
f1(); //报错

                 箭头函数也支持默认参数、剩余参数、解构 

 

var f1 = (x=1,y)=>
      console.log(x, y); //3 4
;
f1(3,4);
var f2 = (...x)=>
      console.log(x); //[3,4]
;
f2(3,4);
var f3 = ([x,y]=[])=>
      console.log(x, y); //3 4
;
f3([3,4]);