JavaScript ES6


目录

    显示目录

ECMAScript 2015 是 JavaScript 的第二次重大修订。

ECMAScript 2015 也称为 ES6 和 ECMAScript 6。

本章介绍 ES6 最重要的特性。

ES6 的新特性

  • let 关键字

  • const 关键字

  • 箭头功能

  • 运营商

  • 为/为

  • 地图对象

  • 设置对象

  • 课程

  • 承诺

  • 象征

  • 默认参数

  • 功能 其余参数

  • 字符串.includes()

  • String.startsWith()

  • String.endsWith()

  • 数组.from()

  • 数组键()

  • 数组查找()

  • 数组查找索引()

  • 新的数学方法

  • 新数字属性

  • 新的数字方法

  • 新的全局方法

  • 对象条目

  • JavaScript 模块


ES6 的浏览器支持 (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 关键字允许您使用以下方式声明变量 块范围。

例子

var x = 10;
// Here x is 10
{ 
  let x = 2;
    // Here x is 2
}
// Here x is 10

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  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>


在 JavaScript Let 一章中阅读有关 let 的更多信息。


JavaScript 常量

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>

<h2>Declaring a Variable Using const</h2>

<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>


在“JavaScript Const”一章中阅读有关 const 的更多信息。



箭头功能

箭头函数允许使用简短的语法来编写函数表达式。

您不需要 function 关键字、return 关键字和 大括号

例子

// ES5
var x = function(x, y) {
     
   return x * y;
}

// ES6
const x = (x, y) => x * y;
 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

箭头函数没有自己的 this。 它们不太适合定义对象方法

箭头函数不会被提升。它们必须使用之前定义。

使用 const 比使用 var 更安全,因为函数表达式是 始终是一个常数值。

如果函数是单个语句,则只能省略 return 关键字和大括号。 正因为如此,始终保留它们可能是一个好习惯:

例子

const x = (x, y) => { return x * y };
 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

在“JavaScript 箭头函数”一章中了解有关箭头函数的更多信息。


扩展 (...) 运算符

... 运算符将可迭代对象(如数组)扩展为更多元素:

例子

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

<p id="demo"></p>

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

... 运算符可用于将可迭代扩展为函数调用的更多参数:

例子

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "Spread" operator can be used to expand an iterable into more arguments for function calls:</p>

<p id="demo"></p>

<script>
const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

document.getElementById("demo").innerHTML = maxValue; 
</script>

</body>
</html>

For/Of 循环

JavaScript for/of 语句循环 通过可迭代对象的值。

for/of 可让您循环数据结构 可迭代的,例如数组、字符串、映射、节点列表等。

for/of 循环具有以下语法:

for (variable of iterable) {
      // code block to be executed
}

变量 - 对于每次迭代,下一个属性的值为 分配给变量。 变量可以用以下方式声明 constletvar

iterable - 具有可迭代属性的对象。

循环数组

例子

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>
<p>The for of statement loops through the values of any iterable object:</p>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

循环字符串

例子

let language = "JavaScript";
let text = "";


for (let x of language) {
  
  text += x + " ";
}
  

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>

<p>The for of statement loops through the values of an iterable object.</p>

<p id="demo"></p>

<script>
let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

在以下章节中了解更多信息:JavaScript Loop For/In/Of。


JavaScript 地图

能够使用对象作为键是一个重要的 Map 功能。

例子

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

在“JavaScript Maps”一章中了解有关 Map 对象以及 Map 和 Array 之间的区别的更多信息。


JavaScript 集

例子

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

在“JavaScript Sets”一章中了解有关 Set 对象的更多信息。


JavaScript 类

JavaScript 类是 JavaScript 对象的模板。

使用关键字 class 创建一个类。

始终添加名为 constructor() 的方法:

句法

class ClassName {
   constructor() { ... }
}

例子

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

上面的示例创建了一个名为“Car”的类。

该类有两个初始属性:“name”和“year”。

JavaScript 类不是对象。

它是 JavaScript 对象的模板


使用类

当你有一个类时,你可以使用该类来创建对象:

例子

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

在“JavaScript 类”一章中了解有关类的更多信息。


JavaScript 承诺

Promise 是链接“生成代码”和“使用代码”的 JavaScript 对象。

“生产代码”可能需要一些时间,“消费代码”必须等待结果。

Promise 语法

const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

使用 Promise 的示例

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

在“JavaScript Promises”一章中了解有关 Promises 的更多信息。


符号类型

JavaScript 符号是一种原始数据类型,就像数字、字符串或布尔值一样。

它代表一个唯一的“隐藏”标识符,其他代码无法意外访问。

例如,如果不同的编码者想要将 person.id 属性添加到属于第三方代码的 person 对象, 他们可以混合彼此的价值观。

使用Symbol()创建唯一标识符,解决了这个问题:

例子

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Using JavaScript Symbol()</h2>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;

document.getElementById("demo").innerHTML = person[id] + " " + person.id;
</script>

</body>
</html>

笔记

符号总是独一无二的。

如果您创建两个具有相同描述的符号,它们将具有不同的值:

Symbol("id") == Symbol("id"); // false

默认参数值

ES6 允许函数参数有默认值。

例子

function myFunction(x, y = 10) {	  // y is 10 if not passed or undefined	  return x + y;
}
myFunction(5); // will return 15

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Default Parameter Values</h2>
<p>If y is not passed or undefined, then y = 10:</p>

<p id="demo"></p>

<script>
function myFunction(x, y = 10) {
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>



功能 其余参数

剩余参数 (...) 允许函数将不定数量的参数视为数组:

例子

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Rest Parameter</h2>

<p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:</p>

<p id="demo"></p>

<script>
function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

字符串.includes()

如果字符串包含指定值,则 includes() 方法返回 true, 否则 false

例子

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

String.startsWith()

startsWith() 方法返回 true 如果字符串以指定值开头,否则 false

例子

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // Returns true

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

String.endsWith()

endsWith() 方法返回 true 如果字符串以指定值结尾,否则 false

例子

var text = "John Doe";
text.endsWith("Doe")    // Returns true

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

数组.from()

Array.from() 方法从任何具有一定长度的对象返回一个 Array 对象 属性或任何可迭代对象。

例子

从字符串创建数组:

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>

<p>Return an array object from any object with a length property or any iterable object.</p>

<p id="demo"></p>

<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

数组键()

keys() 方法返回一个带有数组键的 Array Iterator 对象。

例子

创建一个数组迭代器对象,包含数组的键:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>

<p>Return an Array Iterator object with the keys of the array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

数组查找()

find() 方法返回传递 a 的第一个数组元素的值 测试功能。

此示例查找(返回 的值)第一个较大的元素 超过 18:

例子

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.find(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

请注意,该函数有 3 个参数:

  • 物品价值

  • 项目索引

  • 数组本身


数组查找索引()

findIndex() 方法返回第一个数组元素的索引 通过测试功能。

此示例查找第一个大于 18 的元素的索引:

例子

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.findIndex(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

请注意,该函数有 3 个参数:

  • 物品价值

  • 项目索引

  • 数组本身


新的数学方法

ES6 在 Math 对象中添加了以下方法:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()


Math.trunc() 方法

Math.trunc(x) 返回 x 的整数部分:

例子

Math.trunc(4.9);    // returns 4
Math.trunc(4.7);    // returns 4
Math.trunc(4.4);    // returns 4
Math.trunc(4.2);    // returns 4
Math.trunc(-4.2);    // returns -4

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.trunc()</h2>

<p>Math.trunc(x) returns the integer part of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.trunc(4.7);
</script>

</body>
</html>

Math.sign() 方法

Math.sign(x) 如果 x 为负数、空值或正数,则返回:

例子

Math.sign(-4);    // returns -1
Math.sign(0);    // returns 0
Math.sign(4);    // returns 1

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.sign()</h2>

<p>Math.sign(x) returns if x is negative, null or positive:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.sign(4);
</script>

</body>
</html>

Math.cbrt() 方法

Math.cbrt(x) 返回 x 的立方根:

例子

Math.cbrt(8);    // returns 2
Math.cbrt(64);    // returns 4
Math.cbrt(125);    // returns 5

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.cbrt()</h2>

<p>Math.cbrt(x) returns the cube root of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.cbrt(8);
</script>

</body>
</html>

Math.log2() 方法

Math.log2(x) 返回 x 以 2 为底的对数:

例子

Math.log2(2);    // returns 1

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log2()</h2>

<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log2(8);
</script>

</body>
</html>

Math.log10() 方法

Math.log10(x) 返回 x 以 10 为底的对数:

例子

Math.log10(10);    // returns 1

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log10()</h2>

<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log10(1000);
</script>

</body>
</html>

新数字属性

ES6 向 Number 对象添加了以下属性:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

爱普西隆示例

let x = Number.EPSILON;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>EPSILON</p>

<p id="demo"></p>

<script>
let x = Number.EPSILON;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

MIN_SAFE_INTEGER 示例

let x = Number.MIN_SAFE_INTEGER;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MIN_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MIN_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

MAX_SAFE_INTEGER 示例

let x = Number.MAX_SAFE_INTEGER;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MAX_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MAX_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

新的数字方法

ES6 向 Number 对象添加了 2 个新方法:

  • Number.isInteger()

  • Number.isSafeInteger()


Number.isInteger() 方法

如果参数是整数,则 Number.isInteger() 方法返回 true

例子

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isInteger() Method</h2>

<p>The isInteger() method returns true if the argument is an integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>

Number.isSafeInteger() 方法

安全整数是可以精确表示为双精度数的整数。

如果参数是安全整数,则 Number.isSafeInteger() 方法返回 true

例子

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isSafeInteger() Method</h2>

<p>The isSafeInteger() method returns true if the argument is a safe integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>

安全整数是从 -(253 - 1) 到 +(253 - 1) 的所有整数。
这是安全的:9007199254740991。这是不安全的:9007199254740992。


新的全局方法

ES6 添加了 2 个新的全局编号方法:

  • isFinite()

  • isNaN()


isFinite() 方法

如果参数为 ,全局 isFinite() 方法将返回 false无穷大NaN

否则返回 true

例子

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isFinite() Method</h2>

<p>The isFinite() method returns false if the argument is Infinity or NaN.</p>
<p>Otherwise it returns true.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>

isNaN() 方法

如果参数为 ,全局 isNaN() 方法将返回 true NaN。否则返回 false

例子

isNaN("Hello");       // returns true

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isNaN() Method</h2>

<p>The isNan() method returns true if the argument is NaN. Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>

对象条目()

例子

创建一个数组迭代器,然后迭代键/值对:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

entries() 方法返回带有键/值对的 Array Iterator 对象:

[0,“香蕉”]
[1,“橙子”]
[2,“苹果”]
[3,“芒果”]

entries() 方法不会更改原始数组。


模块

模块以两种不同的方式导入:

从命名导出导入

从文件 person.js 导入命名导出:

import { name, age } from "./person.js";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

从默认导出导入

从文件 message.js 导入默认导出:

import message from "./message.js";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

了解有关模块的更多信息:JavaScript 模块。