ES6语法的新特性

Posted 学无止境

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

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

以上是关于ES6语法的新特性的主要内容,如果未能解决你的问题,请参考以下文章

总结常见的ES6新语法特性。

ES6的新特性 — 新增关键字letconst

ES6解构

常见ES6新属性

ES6新特性箭头函数语法以及与ES5普通函数的不同

ES6的新特性(18)——async 函数