Javascript 的ES5、ES6更新重要新特性整理
<p>前言</p><p>ES5发布于2009，ES6于2015，从2015开始使用年份命名，ES6即是ECMAScript 2015，目前大部分浏览器都已经支持ES6了，除了IE。</p>
<p> <img src="https://img2018.cnblogs.com/blog/1122011/202001/1122011-20200106164659182-1480420888.png" alt=""> </p>
<h2>ES5</h2>
<h4>1、 严格模式（use strict）</h4>
<p>这种模式，使得JavaScript在更严格的语法条件下运行：</p>
<p>(1)变量必须使用var声明；</p>
<p>(2)禁止自定义的函数中的this指向window</p>
<p>(3)创建 eval 作用域即为块级作用域</p>
<p>(4)对象不能有重名的属性</p>
<p>use strict可以在脚本或者函数开头声明，分别具有全局和函数作用域。</p>
<h4>2、 增加JSON对象</h4>
<p>JSON.stringify(obj/arr);</p>
<p>JSON.parse(json);</p>
<h4>3、 扩展了数组Array的方法</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Array.isArray() 方法检查对象是否为数组
Array.forEach(funName) 每个数组元素调用一次函数
Array.map(funName) 遍历数组返回一个新数组，返回加工后的值
Array.filter(funName) 遍历过滤出一个新的子数组，返回条件为true的值
Array.reduce(funName) 按funName方法处理数组，最后返回一个值，funName有两个参数，第一个是最后返回的归并值，第二个是元素
Array.reduceRight(funName) 同上，只是从最后一个数据开始计算
Array.every(funName) 遍历数组，检查是否每一个值都符合条件，返回bool
Array.some(funName) 遍历数组，检查是存在至少一个值符合条件，返回bool
Array.indexOf(value) 检索数组中的某个元素值并返回其位置,多个则返回第一个
Array.lastIndexOf(value) 同上，只是从最后开始检索</span></pre>
</div>
<h4>4、 对象增加属性 Getter 和 Setter</h4>
<p>允许使用类似于获取或设置属性的语法来定义对象方法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 创建对象：</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> person =<span style="color: rgba(0, 0, 0, 1)"> {
firstName: </span>"Bill"<span style="color: rgba(0, 0, 0, 1)">,
lastName : </span>"Gates"<span style="color: rgba(0, 0, 0, 1)">,
get fullName() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.firstName + " " + <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.lastName;
}
};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取对象</span>
person. fullName</pre>
</div>
<p> </p>
<h4>5、 函数扩展Function.prototype.bind(obj)</h4>
<p>可将函数内的this绑定为obj，并将函数返回；</p>
<p> </p>
<h2>ES6</h2>
<h4>1、 变量声明关键字let、const</h4>
<p>let 是在代码块内有效，var 是在全局范围内有效；</p>
<p>let 只能声明一次，var 可以声明多次；</p>
<p>let 不存在变量提升，var 会变量提升:</p>
<p>const 用来声明常量</p>
<h4>2、 许函数参数设置默认值</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span> testAdd(x, y = 10<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 当y不给值或者为undefined时值取10</span>
<span style="color: rgba(0, 0, 255, 1)">return</span> x +<span style="color: rgba(0, 0, 0, 1)"> y;
}</span></pre>
</div>
<h4>3、 箭头函数（Arrow Function）</h4>
<p>类似于匿名函数，但没有自己的 this，不适合定义对象方法；</p>
<p>如果只是单个语句，则可省略掉return和花括号(但保留一般更好一些)</p>
<p> 例：z = (x, y) => { return x * y };</p>
<h4>4、 class 关键字定义类</h4>
<p>class 的本质是 function，它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法；</p>
<p>(1) 声明</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class Example {
constructor(a) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.a =<span style="color: rgba(0, 0, 0, 1)"> a;
}
}</span></pre>
</div>
<p>(2) 实例化</p>
<p>let exam1 = Example(1);</p>
<p>(3) 修饰器decorator</p>
<p>类比java的注解，是一个函数，用来修改类的行为，在代码编译时产生作用</p>
<p>(4) 其他</p>
<p>类可以继承，使用extends;</p>
<p>constructor 方法是类的默认方法，创建类的实例化对象时被调用;</p>
<p>类定义不会被提升，必须在访问前对类进行定义;</p>
<p>类中方法不需要 function 关键字,类似于java；</p>
<p>Class 内部只有静态方法，没有静态属性；</p>
<p>ES6 引入了模块化，分export与import,模块自动开启了严格模式；</p>
<p>Promise 对象用于异步编程； </p>
<h4>5、 解构赋值</h4>
<p>是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值</p>
<p>示例：</p>
<p>数组</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">数组
let </span>= ;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">a,b,c变量值同时赋予了；</span>
let = ;
let = [];<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不完全解构，a = 1, b = undefined</span>
let = ;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">剩余运算符,a=1, b=</span>
<span style="color: rgba(0, 0, 0, 1)">（字符串是数组）
对象
let {a, b} </span>= {a : 1, b : 2};<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">a=1,b=2</span>
let {a : b} = {a : 1};<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">b=1</span>
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">rest = {c: 30, d: 40}</span></pre>
</div>
<p> </p>
<p>其他：</p>
<p>扩展了Array方法、对象</p>
<p>代理Proxy对象</p>
<p>function f(...values)可为函数设置不确定个数参数 ，values为最后所有参数的集合</p>
<p>增加for...of循环，用于替代 for..in 和 forEach()</p><br><br>
来源：https://www.cnblogs.com/aland-1415/p/12157193.html
頁:
[1]