JavaScript ES6
JavaScript ES6
ECMAScript 6 是什么？
ECMAScript 6 也称为 ES6 和 ECMAScript 2015。
一些人把它称作 JavaScript 6。
本章介绍 ES6 中的一些新特性。
- JavaScript let
- JavaScript const
- 幂 (**)
- 默认参数值
- Array.find()
- Array.findIndex()
对 ES6（ECMAScript 2015）的浏览器支持
Safari 10 和 Edge 14 是首先完全支持 ES6 的浏览器：
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript let
let 语句允许您使用块作用域声明变量。
示例代码：
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>使用 let 声明变量</h1>
<p id="demo"></p>
<script>
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
使用 let 声明变量 10
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript const
const 语句允许您声明常量（具有常量值的 JavaScript 变量）。
常量类似于 let 变量，但不能更改值。
示例代码：
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>使用 const 声明变量</h1>
<p id="demo"></p>
<script>
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
使用 const 声明变量 10
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请在我们的 JavaScript Let / Const 章节中阅读更多关于 let 和 const 的内容。
指数运算符
取幂运算符（**）将第一个操作数提升到第二个操作数的幂。
示例代码：
var x = 5;
var z = x ** 2; // 结果是 25
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>** 运算符</h1>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>
</body>
</html>
运行结果：
** 运算符 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
x ** y 的结果与 Math.pow(x,y) 相同：
示例代码：
var x = 5;
var z = Math.pow(x,2); // 结果是 25
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>Math.pow()</h1>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>
</body>
</html>
运行结果：
Math.pow() 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
默认参数值
ES6 允许函数参数具有默认值。
示例代码：
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // 将返回 15
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>默认参数值</h1>
<p id="demo"></p>
<script>
function myFunction(x, y = 10) {
// 如果未通过或未定义，则 y 为 10
return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>
</body>
</html>
运行结果：
默认参数值 15
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。
此例查找（返回）第一个大于 18 的元素（的值）：
示例代码：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.find()</h1>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.find() 大于 18 的第一个值是：25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
Array.findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
此例确定大于 18 的第一个元素的索引：
示例代码：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.findIndex()</h1>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值的索引是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.findIndex() 大于 18 的第一个值的索引是：3
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
新的数字属性
ES6 将以下属性添加到 Number 对象：
- EPSILON
- MIN_SAFE_INTEGER
- MAX_SAFE_INTEGER
示例代码：
var x = Number.EPSILON;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>数字对象属性</h1>
<p>EPSILON</p>
<p id="demo"></p>
<script>
var x = Number.EPSILON;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
数字对象属性 EPSILON 2.220446049250313e-16
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
var x = Number.MIN_SAFE_INTEGER;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>数字对象属性</h1>
<p>MIN_SAFE_INTEGER</p>
<p id="demo"></p>
<script>
var x = Number.MIN_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
数字对象属性 MIN_SAFE_INTEGER -9007199254740991
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
var x = Number.MAX_SAFE_INTEGER;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>数字对象属性</h1>
<p>MAX_SAFE_INTEGER</p>
<p id="demo"></p>
<script>
var x = Number.MAX_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
数字对象属性 MAX_SAFE_INTEGER 9007199254740991
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
新的数字方法
ES6 为 Number 对象添加了 2 个新方法：
- Number.isInteger()
- Number.isSafeInteger()
Number.isInteger() 方法
如果参数是整数，则 Number.isInteger() 方法返回 true。
示例代码：
Number.isInteger(10); // 返回 true
Number.isInteger(10.5); // 返回 false
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>如果参数是整数，则 isInteger() 方法返回 true。</p>
<p>否则返回 false。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>
</body>
</html>
运行结果：
Javascript 数字方法 如果参数是整数，则 isInteger() 方法返回 true。 否则返回 false。 true false
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Number.isSafeInteger() 方法
安全整数是可以精确表示为双精度数的整数。
如果参数是安全整数，则 Number.isSafeInteger() 方法返回 true。
示例代码：
Number.isSafeInteger(10); // 返回 true
Number.isSafeInteger(12345678901234567890); // 返回 false
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>如果参数是安全整数，则 isSafeInteger() 方法返回 true。</p>
<p>否则返回 false。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>
</body>
</html>
运行结果：
Javascript 数字方法 如果参数是安全整数，则 isSafeInteger() 方法返回 true。 否则返回 false。 true false
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
安全整数指的是从 -(253 - 1) 到 +(253 - 1) 的所有整数。
这是安全的：9007199254740991。这是不安全的：9007199254740992。
新的全局方法
ES6 还增加了 2 个新的全局数字方法：
- isFinite()
- isNaN()
isFinite() 方法
如果参数为 Infinity 或 NaN，则全局 isFinite() 方法返回 false。
否则返回 true：
示例代码：
isFinite(10/0); // 返回 false
isFinite(10/1); // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>如果参数为 Infinity 或 NaN，则 isFinite() 方法返回 false。</p>
<p>否则返回 true。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>
</body>
</html>
运行结果：
Javascript 数字方法 如果参数为 Infinity 或 NaN，则 isFinite() 方法返回 false。 否则返回 true。 false true
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
isNaN() 方法
如果参数是 NaN，则全局 isNaN() 方法返回 true。否则返回 false：
示例代码：
isNaN("Hello"); // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>如果参数是 NaN，则 isNan() 方法返回 true。否则返回 false。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>
</body>
</html>
运行结果：
Javascript 数字方法 如果参数是 NaN，则 isNan() 方法返回 true。否则返回 false。 true false
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
箭头函数（Arrow Function）
箭头函数允许使用简短的语法来编写函数表达式。
您不需要 function 关键字、return 关键字以及花括号。
示例代码：
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 箭头函数</h1>
<p>使用箭头函数，您不必键入 function 关键字、return 关键字和花括号。</p>
<p>IE11 或更早版本不支持箭头功能。</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
运行结果：
Javascript 箭头函数 使用箭头函数，您不必键入 function 关键字、return 关键字和花括号。 IE11 或更早版本不支持箭头功能。 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
箭头功能没有自己的 this。它们不适合定义对象方法。
箭头功能未被提升。它们必须在使用前进行定义。
使用 const 比使用 var 更安全，因为函数表达式始终是常量值。
如果函数是单个语句，则只能省略 return 关键字和花括号。因此，保留它们可能是一个好习惯：
示例代码：
const x = (x, y) => { return x * y };
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 箭头函数</h1>
<p>IE11 或更早版本不支持箭头功能。</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
运行结果：
Javascript 箭头函数 IE11 或更早版本不支持箭头功能。 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
