Author Archives: admin

Array filter 对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略，同时，新创建的数组也不会包含这些元素。 //过滤掉小于 10 的数组元素： //代码： function isBigEnough(element, index, array) { return (element >= 10); } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // 12, 130, 44 map //将所有的数组元素转换为大写： var strings = [“hello”, “Array”, “WORLD”]; function makeUpperCase(v){ return v.toUpperCase(); } var uppers = strings.map(makeUpperCase); // uppers is now [“HELLO”, “ARRAY”, “WORLD”] // strings is unchanged some 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 true，如果发现这个元素，some 将返回 true，如果回调函数对每个元素执行后都返回 false ，some 将返回 false。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。 //检查是否有数组元素大于等于10： function isBigEnough(element, index, array) { return (element >= 10); } var passed = [2, 5, 8, 1, 4].some(isBigEnough); // passed is false passed = [12, 5, 8, 1, 4].some(isBigEnough); // passed is true every 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，如果发现这个元素，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略 //测试是否所有数组元素都大于等于10： function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); // passed is false passed = [12, 54, 18, 130, 44].every(isBigEnough); // passed is true forEach //打印数组内容： function printElt(element, index, array) { document.writeln(“[” + index + “] is ” + element + “<br />”); } [2, 5, 9].forEach(printElt); // Prints: // [0] is 2 // [1] is 5 // [2] is 9 lastIndexOf 语法 var index = array.lastIndexOf(searchElement[, fromIndex]); 参数说明 searchElement： 要搜索的元素 fromIndex ： 开始搜索的位置，默认为数组的长度（length），在这样的情况下，将搜索所有的数组元素。搜索是反方向进行的。 功能说明 比较 searchElement 和数组的每个元素是否绝对一致（===），当有元素符合条件时，返回当前元素的索引。如果没有发现，就直接返回 -1 。 //查找符合条件的元素： var array = [2, 5, 9, 2]; var index = array.lastIndexOf(2); // index is 3 index = array.lastIndexOf(7); // index is -1 index = array.lastIndexOf(2, 3); // index is 3 index = array.lastIndexOf(2, 2); // index is 0 index = array.lastIndexOf(2, -2); // index is 0 index = … Continue reading →

现在，所有主流浏览器都支持JavaScript modules！ 本文介绍了如何使用JS modules，如何负责任地部署它们以及Chrome团队如何努力使modules在将来变得更好。 什么是JS模块？ JS模块（也称为“ES模块”或“ECMAScript模块”）是一项主要的新功能，或者是新功能的集合。 您过去可能使用过userland JavaScript模块系统。 也许您在Node.js中使用过CommonJS，或者在AMD中使用过，或者在其他方面使用过。 所有这些模块系统都有一个共同点：它们允许您导入和导出内容。 JavaScript现在已经为此提供了标准化语法。 在模块内，您可以使用export关键字导出几乎所有内容。 您可以export const，function或任何其他变量绑定或声明。 只要在变量语句或声明前加上export前缀，就可以设置好： // ? lib.mjs export const repeat = (string) => `${string} ${string}`; export function shout(string) { return `${string.toUpperCase()}!`; } 然后，您可以使用import关键字从另一个module导入module。在这里，我们从lib module导入repeat和shout功能，并在我们的main module中使用它： // ? main.mjs import {repeat, shout} from ‘./lib.mjs’; repeat(‘hello’); // → ‘hello hello’ shout(‘Modules in action’); // → ‘MODULES IN ACTION!’ 您还可以从module导出default值： // ? lib.mjs export default function(string) { return `${string.toUpperCase()}!`; } 可以使用任何名称导入此类default导出： // ? main.mjs import shout from ‘./lib.mjs’; // ^^^^^ Modules与classic scripts略有不同： 默认情况下，模块具有严格模式。 模块中不支持HTML样式的注释语法，尽管它可以在classic scripts中使用。 // Don’t use HTML-style comment syntax in JavaScript! const x = 42; <!– TODO: Rename x to y. // Use a regular single-line comment instead: const x = 42; // TODO: Rename x to y. Modules具有词汇top-level范围。 这意味着，例如，运行var foo = 42;尽管在classic scripts中就是这种情况，但在modules中创建一个名为foo的全局变量并不能通过浏览器中的window.foo进行访问。 同样，modules内的this不引用全局this，而是undefined。（如果需要访问全局this，请使用globalThis。） 新的静态import和export语法仅在modules内可用-在classic scripts中不起作用。 Top-level await在modules中可用，但在classic scripts中不可用。 相关地，尽管classic scripts中的变量可以在异步函数之外命名为await，但是await不能在Modules中的任何位置用作变量名。 由于存在这些差异，相同的JavaScript代码在作为module scripts与classic scripts时可能会表现出不同的行为。因此，JavaScript运行时需要知道哪些scripts是modules。 在浏览器中使用JS modules 在网络上，可以通过将type属性设置为module来告诉浏览器将<script>元素视为modules。 <script type=”module” src=”main.mjs”></script> <script nomodule src=”fallback.js”></script> 了解type=”module”的浏览器将忽略具有nomodule属性的脚本。 这意味着您可以为支持modules的浏览器提供基于modules的有效负载，同时为其他浏览器提供备用。 即使只是为了表现，这种区分的能力也是惊人的！ 考虑一下：只有现代的浏览器才支持modules。 如果浏览器了解您的modules代码，则它还支持modules之前的功能，例如箭头函数或async-await。 您不再需要在modules捆绑包中转换这些功能！ 您可以为现代浏览器提供较小的，且未移植的，基于modules的有效负载。 只有旧版浏览器才能获取nomodule有效负载。 由于默认情况下modules是延迟的，因此您可能还希望以延迟的方式加载nomodule脚本： <script type=”module” src=”main.mjs”></script> <script nomodule defer src=”fallback.js”></script> JavaScript modules