zoukankan      html  css  js  c++  java
  • ES6语法的新特性

    ES6 就是ECMAScript 6是新版本JavaScript语言的标准。虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法。目前ES6也是使用最多的最新的javaScript语言标准。要查看ES6的支持情况请点此

      在2009年ES5问世以后,javaScript的标准就一直没有更新。从那时起ES标准委员会就已经开始筹划新的ES标准,在2015年发布了ES6。ES6是ECMAScript 的第6个版本。

    经过持续几年的磨砺,它已成为 JS 有史以来最实质的升级,特性涵盖范围甚广, 小到受欢迎的语法糖,例如箭头函数(arrow functions)和简单的字符串插值(string interpolation),大到烧脑的新概念,例如代理(proxies)和生成器(generators) 。

    ES6将彻底改变程序员们编写JS代码的方式。接下来就来体验一下ES6的新特性带来便利之处吧!

    1.字符串文本内容,通常用于在自定义模板中

        let html="我是模板内容";
        let content=`<div><p>${html}</p></div>`;
        console.log(content)
    

    (注意) 模板内容是以"`"符号作为开头和结束字符。

    结果:

    2.数组的扩展,es6提供了对数组的扩展,对数组操作更加便利

        Array.from :把元素集合转换成数组

     let list=document.querySelectorAll('li');//li元素集合
        let arr=Array.from(list);//转换成数组
        arr.forEach(function (k,v) {//不管是对象还是数组还是集合都可以使用forEach遍历方法获得里面的数据
            k.innerText="我是值:"+v;
            console.log(k.innerText)
        })
    

      结果:

    Array.of :把字符串转换成字符数组

        let arr2=Array.of("zhansg","lis","校门");
        console.log(arr2); 

    结果:

    3.对对象的一些简写操作,对对象一些便利的书写方式

    原始案例:

        let  name="zhangs";
        let age=20;
        let person={
            name=name,
            age=age
        };
        console.log(person);
    

      es6语法糖书写方式

        let  name="zhangs";
        let age=20;
        let person={
            name,
            age
        };
        console.log(person);
    

     4.对象合并,对象合并在日常开发中经常用到,非常便利

        Object.assign(目标对象,合并对象1,合并对象2,........);

        let obj={name:"zhans"};
        let obj2={age:30};
        let obj3={sex:"男"};
        let sumobj={};
        let result= Object.assign(sumobj,obj,obj2,obj3);//使用Object.assign()方法合并对象
        console.log(result);

    结果:

    5.箭头操作符(lambda表达式语法)

     在Java&C#中lambda表达式是非常好用的,可以简化大量代码,在es6里面也有异曲同工之妙。

        let arr=[5,8,6,5,6,5,];
        //普通写法
        arr.forEach(function (v) {
            console.log(v);
        });
        //es6写法
        arr.forEach(v => console.log(v));//一行带过 适用于写返回值的时候
    

    6.解构

    自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。

    var [x,y]=getVal(),//函数返回值的解构
        [name,,age]=['wayou','male','secrect'];//数组解构
    
    function getVal() {
        return [ 1, 2 ];
    }
    
    console.log('x:'+x+', y:'+y);//输出:x:1, y:2 
    console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect 
    

      

    //对象解构
        let {name,age,sex} ={
            name:"张三",
            age:20,
            sex:"男"
        };
        console.log(name);
        console.log(age);
        console.log(sex);
    

     开发常用的就罗列几个出来,更多实例请参考:https://www.cnblogs.com/Wayou/p/es6_new_features.html

    总结:可以把后端的思想运用的前端来,也许以后就不没有前端了。

  • 相关阅读:
    Android广播接收器和Activity间传递数据
    Android广播接收器里弹出对话框
    Android本地广播
    setSupportActionBar()方法报错
    exec使用小计
    关于NSA的EternalBlue(永恒之蓝) ms17-010漏洞利用
    20154312 曾林 ExpFinal CTF Writeup
    20154312 曾林 EXP9 Web安全基础
    20154312 曾林 Exp8 web基础
    20154312 曾林 EXP7 网络欺诈防范
  • 原文地址:https://www.cnblogs.com/jiangxifanzhouyudu/p/8904605.html
Copyright © 2011-2022 走看看