之前做vue和react的时候,发现文档什么的最新版本都建议用es6写法,对es6友好度更高,加之现在es6也越来越普及,兼容性问题直接用babel转码就好了,特别方便,于是我开始学着用es6写代码,下面总结下一般es6常用的新特性:

1,申明变量let和const:

  js由于没有块级作用域,变量在申明他们的函数体内以及这个函数体内嵌套的任何函数体内都是有定义的(申明提前),例如:

function test(){
  console.log(i); //undefined
  for(var i=0;i<10;i++){}
  console.log(i); //10
}

  es6通常用let和const申明变量,const是申明常亮(申明后值不可修改,修改会报错),let是变量,都是块级作用域,在{}内有效:

function test(){
  console.log(i); //报错
  for(let i=0;i<10;i++){}
  console.log(i);
}

  这样代码更加严谨,不用担心内部变量被外面修改用了,更加安全。

2,函数

  函数参数默认值:

  es5给函数参数指定默认值的时候如下:

//es5
function aa(num){
num=num||100;
return num;
}
console.log(aa()); //如果没有传入参数或者传入0的话,结果就变成了100,不是我们指定的值

  这样就会带来以上问题,结果跟我们设定的不一样,es6新特性解决了这个问题

//es6
function aa1(num=100){
return num;
}
console.log(aa1()); //没传入参数100
console.log(aa1(0)); //
console.log(aa1(200)); //

  箭头函数:

  箭头函数写法更加简洁,省略了function关键字申明,省略return,例如

[1,2,3].map( x => x + 1 )

//相当于:
[1,2,3].map(function(x){
return x + 1
})

   注意,箭头函数的this是定义时的this,不是运行时的,比如在vue中method找this.data的时候找不到,原因是this指向的不是运行时vue的实例,而是定义时的windos,例如

 $.each(['a','b','c'],function(i,n){
console.log(this); //n
}); $.each(['a','b','c'],(i,n)=>{
console.log(this); //window
});

3,模板字符串:

  第一:es5在字符串拼接的时候,常常会用+号把值和字符拼接起来,如果要拼接dom元素的话,会很麻烦,es6很好的解决了这个问题

//es5
const name='han meimei';
console.log('hellow '+name); //es6
const name1='han meimei';
console.log(`hellow ${name1}`); //注意,是键盘1左边那个字符符号,不是普通的单引号哦!

  第二:es5常用反斜杠(\)来做多行字符串的拼接,es6只需要用(`)就可以了,这样以后拼接dom串的时候就方便多啦!

//es5
var wrap="<div> \
<span>AAA</span>\
</div> \
";
console.log(wrap); //es6
var wrap1=`
<div>
<span>AAA</span>
</div>
`;
console.log(wrap1);

4,Promise

  Promise的出现是为了防止异步调用出现很多层回调函数,显得代码臃肿,可以通过链式调用的方式书写异步代码,保证了代码的线性逻辑,跟Jquery的Deferred用法类似,es7还推出了更加简洁的写法Async/await,关于es6 Promise用法,我之前一篇文章写过了,可以查阅

  ES6 Promise

5,Class 类

  es6新增加了class关键字来定义声明一个类,还多了extends继承关键字,使得类的声明的继承更加方便,像极了java语言,在es5中我们一般这样写:

       //es5
function Person(name){
this.name=name;
}
Person.prototype.sayName=function(){
console.log('name: '+this.name);
}
function Student(name,age){
Person.call(this,name); //调用父类构造函数
this.age=age;
}
Student.prototype.sayAge=function(){
console.log('age: '+this.age);
} Student.prototype=new Person(); //Student.prototype.constructor就是构造对象Person
Student.prototype.constructor=Student; //之前的构造器指向了Person,现在要重新指回来
//从而Student.prototype===stu.constructor.prototype,很多人忽略了这点
Student.prototype.sayAll=function(){
console.log('name: '+this.name);
console.log('age: '+this.age);
} var stu=new Student('tom',19);
console.log(Student.prototype===stu.constructor.prototype); //true
stu.sayName();
stu.sayAll();
//stu.sayAge(); //报错,因为Student.prototype=new Person();对原型重新赋了值

  es6更加简洁:

//定义类
class Person{
constructor(name){ //构造函数
this.name=name;
}
sayName(){
console.log('name: '+this.name);
}
}
//继承
class Student extends Person{ //这点和java语言很像,都是通过关键字extends
constructor(name,age){
super(name); //调用父类构造函数,这点跟java又一样
this.age=age;
}
sayAge() {
console.log('age: '+this.age);
}
sayAll() {
console.log('sayAll:');
console.log('name: '+this.name);
console.log('age: '+this.age);
}
}
var stu=new Student('jack',20);
console.log(Student.prototype===stu.constructor.prototype); //true
stu.sayName();
stu.sayAge();
stu.sayAll();

  es6用更加简洁的方式完美的实现了类的继承,特别好用!!!

6,export和import

  es6之前,都是用requireJS进行模块化开发,es6export导出模块、import导入模块,可以直接支持module了,现在的vue和react,都是用es6开发了,对于组件的引入就用到这个知识点了

        //全部导入
import people from './person' //整个模块导入并且使用as关键字重命名
//该模块的所有导出都会作为对象的属性存在
import * as person "./person.js"
console.log(person.sex)
console.log(person.num)
console.log(person.getNum()) //导入部分
import {name, age} from './person' // 导出默认, 有且只有一个默认
export default App //1.当用export default people导出时,就用 import people 导入(不带大括号) //2.一个文件里,有且只能有一个export default。但可以有多个export。 //3.当用export name 时,就用import { name }导入(记得带上大括号) //4.当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age } //5.当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用import * as example

7,Spread operator 展开运算符 

  Spread operator也是es6一个新特性,写法是...,也就是三个点

  用来组装数组

        //数组组装
const arr1=[1,2,3];
const arr2=[...arr1,4,5,6];
console.log(arr2); //[1, 2, 3, 4, 5, 6] //函数调用
function print(a,b,c){
console.log(a,b,c);
}
var arr=[1,2,3];
//es5
print.apply(null,arr);
//es6
print(...arr); //1 2 3 //替换push方法
//es5
var a1=[1,2,3];
var a2=[4,5,6];
Array.prototype.push.apply(a1,a2); //[1, 2, 3, 4, 5, 6]
//es6
a1.push(...a2); //[1, 2, 3, 4, 5, 6]

 

8,对象的扩展:

  初始化简写,键值对重名的情况:

           //es5
var a=1,b=2;
var obj={
a:a,
b:b
}
console.log(obj); //{a: 1, b: 2} //es6
let a=1,b=2;
let obj={
a,
b
}
console.log(obj); //{a: 1, b: 2}

  对象方法简写:

           //es5
var person={
run:function(){
console.log('run');
}
}
person.run(); //es6
let person={
run(){
console.log('run');
}
}
person.run();

  es6的Object.assign()这个方法来实现浅复制,类似于Jquery的$.extend,第一个参数是目标对象,后面的是被合并的源对象,然后返回目标对象,注意如果出现同名属性,会被最后一个值覆盖

        let obj = {
name1: 'foo'
};
let obj1 = {
name2: 'bar'
};
let obj2 = {
name3: 'baz'
};
Object.assign(obj,obj1,obj2);
console.log(obj); //为了不改变源对象本身,通常会把目标对象传为{},返回值作为新目标对象
var obj1={
name1: 'foo'
};
var obj2={
name2: 'bar'
};
var obj3={
name3: 'baz'
}
var obj=Object.assign({},obj1,obj2,obj3);
console.log(obj); //{name1: "foo", name2: "bar", name3: "baz"}

9,解构赋值

  为了简化提取数组或对象中的值,es6新加了解构的特性

  es5中提取对象信息方法常用如下:

        var people={
name:'Li Lei',
age:19
}
var name=people.name;
var age=people.age;
console.log('name:'+name);
console.log('age:'+age);

  es6简化的这个步骤,如下:

        //对象
const people={
name:'luo',
age:19
}
const {name,age}=people;
console.log(`${name}------${age}`); //数组
const color=['red','blue'];
const [first,second]=color;
console.log(first);
console.log(second);

  总体来说,es6新特性还有很多,但是日常开发中用到这些主要的已经够用了,我在之前的react和vue中就主要用到这几大模块,已经足够啦,还有很多有意思的细微的方法比如操作字符串,数组去重的等,都挺有意思的,回头等我慢慢挖掘!

常用es6特性归纳-(一般用这些就够了)的更多相关文章

  1. 9个常用ES6特性归纳(一般用这些就够了)

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应 ...

  2. 最常用的ES6特性(转)

    最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...

  3. 最常用的ES6特性

    遇到了要写出es6新特性的题目,所以查阅了资料来总结一下,点击查看原文. 进入正题,最常用的ES6特性有:let, const, class, extends, super, arrow functi ...

  4. ES6常用新特性

    https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...

  5. es6/es7/es8常用新特性总结(超实用)

    本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉.一直觉得node 数组. 对象.序列等的处理没有python方便,因 ...

  6. ES6常用七大特性

    ES6可谓是对JS语言的一个颠覆性改变,增加了Module改善JS一直被诟病的模块化.Promise解决异步函数的回调地狱.Class的面相对象编程... 在学习ES6的过程中,大家或多或少都有看过阮 ...

  7. ES6、7、8常用新特性总结(超实用)

    ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a ...

  8. ES6特性

    一.ES6特性: let, const, class, extends, super, arrow functions, template string, destructuring, default ...

  9. [C#] 剖析 AssemblyInfo.cs - 了解常用的特性 Attribute

    剖析 AssemblyInfo.cs - 了解常用的特性 Attribute [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5944391.html 序 ...

随机推荐

  1. linux 服务器安装mysql5.6

    1.移除CentOS默认的mysql-libs: whereis mysql 2.为了避免冲突,先移除CenttOS上默认的mysql-libs: yum remove mysql-libs 3.然后 ...

  2. 靠谱助手 BlueStacks

    靠谱助手  BlueStacks 安卓虚拟机

  3. Perl 数组

    Perl 数组 Perl 数组一个是存储标量值的列表变量,变量可以是不同类型. 数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取,实例如下: 实例 #!/usr/b ...

  4. xkl的各种沙雕低错

    13,特判判掉20分算不算? 12,linux用c++11编译: g++ -std=c++11 -o a a.cpp g++ a.cpp -std=c++11 -o a //g++ a.cpp -st ...

  5. 0908CSP-S模拟测试赛后总结

    我早就料到昨天会考两场2333 话说老师终于给模拟赛改名了啊. 距离NOIP祭日还有60天hhh. 以上是废话. %%%DeepinC无敌神 -rank1 zkt神.kx神.动动神 -rank2 有钱 ...

  6. skyline中大数据量的三维场景刷新速度问题

    我们做了一个的类似于TE Pro的桌面系统来代替TE Pro演示我们的大三维场景.我们的三维场景包括100平方公里的全要素场景,有建筑物,地面.小品.部件.植被等.在系统运行后,三维场景刷不起来,速 ...

  7. AtCoder ABC 130E Common Subsequence

    题目链接:https://atcoder.jp/contests/abc130/tasks/abc130_e 题目大意 给定一个长度为 N 的序列 S 和一个长度为 M 的序列 T,问 S 和 T 中 ...

  8. 网络安全系列 之 MySQL数据库安全

    目录 数据库安全使用规则 1. 数据库版本及运行要求 2. 通用加固项 3. 用户权限 4. 连接设置 5. ssl安全认证 6. 涉及操作系统相关配置 6.1 系统资源 6.2 文件权限 数据库安全 ...

  9. springboot-配置多数据源(AOP实现)(HikariCP + MybatisPlus + mysql + SqlServer)

    场景: springboot项目,默认使用HikariCP连接池 + MybatisPlus持久层框架 + mysql数据库等一套流程,现需求需去第三方sqlserver数据库拉取数据,直连数据库,不 ...

  10. USACO training course Mother's Milk /// DFS(有点意思) oj10120

    题目大意: 输入 A B C 为三个容器的容量 一开始A B是空的 C是满的 每一次倾倒只能在 盛的容器满 或 倒的容器空 时才停止 输出当A容器空时 C容器内剩余量的所有可能值 Sample Inp ...