博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6新语法(二)
阅读量:4645 次
发布时间:2019-06-09

本文共 3529 字,大约阅读时间需要 11 分钟。

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默认值与解构数组

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

1.5默认值与解构对象

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

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());

               直接作为事件处理函数

                 赋值为对象的方法

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);//undefinedvar 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]);

 

转载于:https://www.cnblogs.com/shineguang/p/11253290.html

你可能感兴趣的文章
转 小辉_Ray CORS(跨域资源共享)
查看>>
Linux安装postgresql
查看>>
MyBatis启动:MapperStatement创建
查看>>
【 全干货 】5 分钟带你看懂 Docker !
查看>>
[转]优化Flash性能
查看>>
popStar手机游戏机机对战程序
查看>>
Java Web项目结构
查看>>
lambda表达式树
查看>>
二次注入原理及防御
查看>>
会话记住已登录功能
查看>>
Linux内核分析——可执行程序的装载
查看>>
儿子和女儿——解释器和编译器的区别与联系
查看>>
第一阶段冲刺3
查看>>
父类引用指向子类对象
查看>>
网页如何实现下载功能
查看>>
IT男专用表白程序
查看>>
读《大道至简》第六章感想
查看>>
ef linq 中判断实体中是否包含某集合
查看>>
章三 链表
查看>>
Solution for Concurrent number of AOS' for this application exceeds the licensed number
查看>>