ES6一些新特性记录

1.箭头操作符

箭头操作符左边是需要输入的参数，右边是返回值

比如运用到js回调函数中可以使书写更加方便

var array=[1,3,5];
//标准写法
array.foreach(function(v,i,a){console.log(v);
});
//es6写法
array.foreach(v => console.log(v));

又比如一块简单的代码：

function (i){ return i + 1}     //es5写法
(i) => i + 1;

如果方程式比较复杂，则需要用{}把代码包起来。

//es5写法：
function (x, y){x++;y--;return x + y ;
}
//es6写法：
（x, y) => {x++; y--; return x + y}

2.增强对象字面量

es6新特性中对象字面量被增强了，使用更为简洁灵活

a.可以直接在对象字面量里定义原型

b.定义方法可以不用function关键字

c.直接调用父类方法

var human = {breath(){console.log('breathing')}
};
var worker = {//直接使用对象字面两定义原型为human，相当于继承human
  __proto__:human,company:Earth;//定义方法不再需要function
  work(){console.log("working")};};
human.breath();   //breathing
//调用继承来的human的breath方法
worker.breath();  //breathing

3.字符串模版

es6新特性中，可以使用反引号``来创建字符串，这种方法可以包含用$和花括号{}包裹的变量

//生成一个随机数
var num = Math.random();
//将这个数输出到控制台
console.log(`your num is ${num}`);

4.解构

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

5.let

var name = 'zach'

while (true) {var name = 'obama'console.log(name)  //obamabreak
}

console.log(name)  //obama

es5中只有全局作用域和函数作用域，这样带来了很多不合理的场景，比如上面demo中，内层变量覆盖外层变量，而let实际上为JS新增了块级作用域，用它所声明的变量，只在let命令所在的代码块内有效。

let name = "shark";
while(true){let name = "Jan";console.log(name);    //Janbreak;
}
console.log(name);      //shark

var另一个不合理场景就是：用来计数的循环变量，泄露为全局变量，比如

var a = [];
for( var i = 0; i <= 10; i++){a[i] = function(){console.log(i);}
};
a[6]();     //10

上面变量中，变量i是var声明的，在全局范围内有效，所以每一次循环，新的值都会覆盖旧的值，这就导致，最后循环结束时输出的是10.而使用let则不会出现这个问题。

var a = [];
for( let i = 0; i <= 10; i++){a[i] = function(){console.log(i);}
};
a[6]();  //5

因为let只在自己所在的块级作用域有效，所以i不会泄露成全局变量，最后输出的仍然是数组a中下标为6的值。

6.const

const也可以用来声明变量，只不过它声明的是变量，一旦声明就不能够改变

const PI = Math.PI
PI = 24;    //ERROR

当我们想去改变const声明的常量时，浏览器就会报错。

const有一个很好的应用场景，当我们使用第三方库声明的变量时，可以避免不小心重命名而导致出现的bug.

7.默认参数值

es6可以直接在定义函数时指定参数的默认值，而不需要逻辑运算符了

// 常规做法
function sayHello(){var name = name || "Jan";console.log('hello '+name);
}
// es6写法
function sayHello(name = "Jan"){console.log('hello ${name}');
}

// 常规 result：
sayHello():hello Jan ;
sayHello('Jack'):hello Jack ;

// es6 result
sayHello(): hello Jan ;
sayHello('Tony'): hello Tony ;

8.template语法

当我们要引入大段html到文档中时，传统的写法是：

$("#result").append("There are <b>" + basket.count + "</b> " +"items in your basket, " +"<em>" + basket.onSale +"</em> are on sale!"
);

我们需要引一大堆的+号用来连接文本与变量。而使用es6中模版字符串后，我们可以这样写

$('result').append('
There are <b>${basket.count}</b>
items in your basket<em>${basket.onSale}</em>
are on sale!
')

9.for of 值遍历

es5中我们都知道用for in 遍历数组，对象，es6中提供的for of与其功能相似，只不过它遍历的不是序号而是值。

var arr = [a, c, e, g];
for (v of arr){console.log(v);     //a , c , e ,g
}

转载于:https://www.cnblogs.com/sharkJan/p/7502126.html

ES6一些新特性记录相关推荐

ES6常用新特性---笔记一
ES6的新特性 1.定义函数不一定需要function 2.创建类,constructor 3.模块,JavaScript支持了原生的module,将不同的代码分别写在不同的文件,最后只需export ...
ES6 的新特性总结
ES6 的新特性总结关于声明变量由 var 变成 let 和 const 区别: var声明的变量会挂载到window上,let和const声明的变量不会 var声明的变量存在变量提升,而let和 ...
ES6 — ES11 新特性一篇通
一.ES6 1.1.let 变量不能重复声明有块级作用域不存在变量提升(必须先声明后使用) 不影响作用域链 <script>//声明变量let a;let b, c, d;let e ...
Dubbo 3.0新特性记录
前言 Dubbo更新了3.0版本,博主抱着好奇的心态一睹芳华.最终的感受就是dubbo3.0针对之前版本的问题进行了一系列的改造和提升.且Dubbo3.0的特性有些还在开发当中.一些已经提供的功能也尚 ...
ES6~ES12新特性
ES6新特性 let属性 <div class="item">记得刷卡</div> <script type="text/javascrip ...
es5和es6的区别、以及es6的新特性
es5和es6的区别系统库的引入 es5:ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用 es6:ES6里,可以使用import方法来直接实现系统库引用,不需要额 ...
html5语义化边框,Html5、Css3、ES6的新特性
html5的新特性 1.语义化标签有利于seo,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的html在没有css的情况下也能呈现较好的内容结构与代码结构方 ...
ES6/ES7新特性
ES6 一.let const let 声明的变量只在代码块内有效 for循环的计数器适合用let命令不存在变量提升.–即var变量在声明之前就能使用,值为undefine.let不允许暂时性死区 ...
ES6的新特性----Vue学习必备基础知识
学习Vue之前,ES6的基础常识是必须要了解的,下面列举了几种最重要的特性,学会了这些,Vue的学习就易如反掌了. 1.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.var ...

ES6一些新特性记录

ES6一些新特性记录

ES6一些新特性记录相关推荐

最新文章

热门文章