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语法的新特性的更多相关文章

  1. ES6 主要的新特性

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  2. 深入浅出:了解JavaScript的ES6、ES7新特性

    参照阮一峰博客:http://es6.ruanyifeng.com/#README es6常见题:https://blog.csdn.net/qq_39207948/article/details/8 ...

  3. ES6的十个新特性

    这里只讲 ES6比较突出的特性,因为只能挑出十个,所以其他特性请参考官方文档: /** * Created by zhangsong on 16/5/20. *///    ***********Nu ...

  4. ES6中常用新特性讲解

    1.不一样的变量声明:const和let ES6推荐使用let声明局部变量,相比之前的var(无论声明在何处,都会被视为声明在函数的最顶部) let和var声明的区别: var x = '全局变量'; ...

  5. 2.ES6引进的新特性——类Class

    为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...

  6. ES6/ES7/ES8新特性

    ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...

  7. 关于ES6的一些新特性的学习

    一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...

  8. ES6 开发常用新特性以及简述ES7

    一.关于变量 ES6新增:块级作用域变量 1.let定义块级作用域变量 没有变量的提升,必须先声明后使用 let声明的变量,不能与前面的let,var,conset声明的变量重名 { { consol ...

  9. ES6中的新特性

    本人最近学习es6一些方法,难免有些手痒,想着能不能将这些方法总结下,如下 1.数组的扩展 1)首先什么是伪数组 无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法 ...

随机推荐

  1. [置顶] apt-get update 更新失败----如何清除破损而且陈旧的PPA仓库 (W: Failed to fetch http://ppa.launchpad.net/jonathonf/pyt)

    我使用sudo apt-get update之后,更新失败,遇到如下错误. W: Failed to fetch http://ppa.launchpad.net/jonathonf/python-3 ...

  2. Julia - 函数的参数传递

    不定参数 不定参数的函数也称变参函数 函数的参数可以被定义成任意个 可以在最后一个参数后紧跟省略号“...”来定义变参函数 julia> bar(x, y, z...) = (x, y, z) ...

  3. Monkey Test 命令使用

    1.  命令使用 Monkey是一个命令列工具 ,可以运行在仿真器里或实际设备中.它向系统发送伪随机的使用者事件流,实现对正在开发的应用程序进行压力测试.Monkey包括许多选项,它们大致分为四大类: ...

  4. Ubuntu13.10:密码忘记了怎么办?

    重启ubuntu系统,开机时长按shift按键进入GRUB菜单,选择第二个高级模式. 新版的UBUNTU系统居然启用了GRUNB2.0的内核!虽然传说相当的牛X,但是用起来感觉就是非常看不清楚字体,要 ...

  5. 使用COM口的2、3针的通断作为中端源(有一个读图像的摄像头,当把卡插到位时触发中端,防止在插卡的过程中出现不稳定的图像)

    利用串口2读,串口3发数据的特点.建立不断的发送流,再从接收端接收.如果收到,则数据畅通,否则断开.相当于产生一个中断.这样电脑对外部事件可作出反应. using System;using Syste ...

  6. leetcode547

    public class Solution { private void dfs(int[,] M, int[] visited, int i) { ; j < M.GetLength(); j ...

  7. 初识tornado

    Tornado 参考:  http://www.cnblogs.com/wupeiqi/articles/5702910.html Tornado 是 FriendFeed 使用的可扩展的非阻塞式 w ...

  8. MySQL 复合索引

    一. 1.索引越少越好,在修改数据时,第个索引都要进行更新,降低写速度.2.最窄的字段放在键的左边3.避免file sort排序,临时表和表扫描. 二.复合索引的建立原则: 如果您很可能仅对一个列多次 ...

  9. 塔防游戏 Day1

    1. 创建地图 如上图所示,白色方块为可以放置塔楼的区域,粉红色区域为敌人的行走区域,绿色方块处为起始点,黄色方块点为终止点. 2. 控制游戏的视野 public class ViewScript : ...

  10. java中执行子类的构造方法时,会不会先执行父类的构造方法

    会,在创建子类的对象时,jvm会首先执行父类的构造方法,然后再执行子类的构造方法,如果是多级继承,会先执行最顶级父类的构造方法,然后依次执行各级个子类的构造方法.