ECMAScript 2015 是 JavaScript 的第二次重大修订。
ECMAScript 2015 也称为 ES6 和 ECMAScript 6。
本章介绍 ES6 最重要的特性。
let 关键字
const 关键字
箭头功能
运营商
为/为
地图对象
设置对象
课程
承诺
象征
默认参数
功能 其余参数
字符串.includes()
String.startsWith()
String.endsWith()
数组.from()
数组键()
数组查找()
数组查找索引()
新的数学方法
新数字属性
新的数字方法
新的全局方法
对象条目
JavaScript 模块
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 |
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
的更多信息。
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) => 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) => { 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>
JavaScript for/of
语句循环 通过可迭代对象的值。
for/of
可让您循环数据结构 可迭代的,例如数组、字符串、映射、节点列表等。
for/of
循环具有以下语法:
for (variable of iterable) {
// code block to be executed
}
变量 - 对于每次迭代,下一个属性的值为 分配给变量。 变量可以用以下方式声明 const
、let
或 var
。
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。
能够使用对象作为键是一个重要的 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 之间的区别的更多信息。
// 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 对象的模板。
使用关键字 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 类”一章中了解有关类的更多信息。
Promise 是链接“生成代码”和“使用代码”的 JavaScript 对象。
“生产代码”可能需要一些时间,“消费代码”必须等待结果。
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 */ }
);
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()
方法返回 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>
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>
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>
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(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(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(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(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(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>
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>
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()
方法返回 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()
方法返回 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()
方法将返回 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()
方法将返回 true
NaNfalse
:
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 模块。