From a204d6ff643fedea7d337a0359050c788a6dcfdb Mon Sep 17 00:00:00 2001 From: allo Date: Fri, 12 Aug 2022 09:33:34 +0800 Subject: [PATCH 1/3] prepare markdown convertion for some sections --- .../global_objects/regexp/lastindex/index.html | 5 +++-- files/zh-cn/web/manifest/index.html | 4 +--- files/zh-cn/web/mathml/authoring/index.html | 12 +----------- files/zh-cn/web/mathml/element/index.html | 2 -- .../zh-cn/web/mathml/element/msubsup/index.html | 6 ++++-- .../mathml_pythagorean_theorem/index.html | 4 +++- files/zh-cn/web/performance/index.html | 16 ++-------------- .../optimizing_startup_performance/index.html | 11 ----------- 8 files changed, 14 insertions(+), 46 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.html index e579667578741c..1e246032d31395 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.html @@ -20,11 +20,12 @@

描述

只有正则表达式使用了表示全局检索的 "g" 或者粘性检索的 "y" 标志时，该属性才会起作用。此时应用下面的规则：

- -
-

原文档信息

- - -
- -

From 210a9b59ecdee8b0a1784806ba54e3a1e7e67287 Mon Sep 17 00:00:00 2001 From: allo Date: Fri, 12 Aug 2022 09:39:38 +0800 Subject: [PATCH 2/3] move to .md for some sections --- .../a_re-introduction_to_javascript/{index.html => index.md} | 0 .../{index.html => index.md} | 0 .../equality_comparisons_and_sameness/{index.html => index.md} | 0 .../guide/expressions_and_operators/{index.html => index.md} | 0 .../web/javascript/guide/introduction/{index.html => index.md} | 0 .../javascript/guide/meta_programming/{index.html => index.md} | 0 files/zh-cn/web/javascript/guide/modules/{index.html => index.md} | 0 .../javascript/guide/numbers_and_dates/{index.html => index.md} | 0 .../guide/regular_expressions/assertions/{index.html => index.md} | 0 .../groups_and_backreferences/{index.html => index.md} | 0 .../javascript/guide/regular_expressions/{index.html => index.md} | 0 .../regular_expressions/quantifiers/{index.html => index.md} | 0 .../web/javascript/guide/text_formatting/{index.html => index.md} | 0 .../web/javascript/guide/using_promises/{index.html => index.md} | 0 .../inheritance_and_the_prototype_chain/{index.html => index.md} | 0 .../deprecated_and_obsolete_features/{index.html => index.md} | 0 .../web/javascript/reference/functions/{index.html => index.md} | 0 .../global_objects/array/reduceright/{index.html => index.md} | 0 .../global_objects/function/tostring/{index.html => index.md} | 0 .../reference/global_objects/json/{index.html => index.md} | 0 .../reference/global_objects/math/{index.html => index.md} | 0 .../reference/global_objects/math/log/{index.html => index.md} | 0 .../global_objects/object/defineproperty/{index.html => index.md} | 0 .../comparing_reflect_and_object_methods/{index.html => index.md} | 0 .../reference/global_objects/regexp/exec/{index.html => index.md} | 0 .../global_objects/regexp/lastindex/{index.html => index.md} | 0 .../global_objects/string/replace/{index.html => index.md} | 0 .../reference/global_objects/symbol/{index.html => index.md} | 0 .../reference/iteration_protocols/{index.html => index.md} | 0 .../reference/operators/exponentiation/{index.html => index.md} | 0 .../zh-cn/web/manifest/background_color/{index.html => index.md} | 0 files/zh-cn/web/manifest/{index.html => index.md} | 0 files/zh-cn/web/mathml/attribute/{index.html => index.md} | 0 files/zh-cn/web/mathml/authoring/{index.html => index.md} | 0 files/zh-cn/web/mathml/element/{index.html => index.md} | 0 files/zh-cn/web/mathml/element/mroot/{index.html => index.md} | 0 files/zh-cn/web/mathml/element/msqrt/{index.html => index.md} | 0 files/zh-cn/web/mathml/element/msub/{index.html => index.md} | 0 files/zh-cn/web/mathml/element/msubsup/{index.html => index.md} | 0 files/zh-cn/web/mathml/element/msup/{index.html => index.md} | 0 .../examples/mathml_pythagorean_theorem/{index.html => index.md} | 0 files/zh-cn/web/mathml/{index.html => index.md} | 0 files/zh-cn/web/media/autoplay_guide/{index.html => index.md} | 0 files/zh-cn/web/media/formats/containers/{index.html => index.md} | 0 .../zh-cn/web/media/formats/image_types/{index.html => index.md} | 0 files/zh-cn/web/media/formats/{index.html => index.md} | 0 .../zh-cn/web/media/formats/video_codecs/{index.html => index.md} | 0 files/zh-cn/web/media/{index.html => index.md} | 0 .../css_javascript_animation_performance/{index.html => index.md} | 0 files/zh-cn/web/performance/dns-prefetch/{index.html => index.md} | 0 files/zh-cn/web/performance/{index.html => index.md} | 0 .../optimizing_startup_performance/{index.html => index.md} | 0 52 files changed, 0 insertions(+), 0 deletions(-) rename files/zh-cn/web/javascript/a_re-introduction_to_javascript/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/equality_comparisons_and_sameness/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/expressions_and_operators/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/introduction/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/meta_programming/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/modules/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/numbers_and_dates/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/regular_expressions/assertions/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/regular_expressions/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/text_formatting/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/guide/using_promises/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/functions/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/array/reduceright/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/function/tostring/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/json/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/math/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/math/log/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/regexp/exec/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/string/replace/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/global_objects/symbol/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/iteration_protocols/{index.html => index.md} (100%) rename files/zh-cn/web/javascript/reference/operators/exponentiation/{index.html => index.md} (100%) rename files/zh-cn/web/manifest/background_color/{index.html => index.md} (100%) rename files/zh-cn/web/manifest/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/attribute/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/authoring/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/element/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/element/mroot/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/element/msqrt/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/element/msub/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/element/msubsup/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/element/msup/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/{index.html => index.md} (100%) rename files/zh-cn/web/mathml/{index.html => index.md} (100%) rename files/zh-cn/web/media/autoplay_guide/{index.html => index.md} (100%) rename files/zh-cn/web/media/formats/containers/{index.html => index.md} (100%) rename files/zh-cn/web/media/formats/image_types/{index.html => index.md} (100%) rename files/zh-cn/web/media/formats/{index.html => index.md} (100%) rename files/zh-cn/web/media/formats/video_codecs/{index.html => index.md} (100%) rename files/zh-cn/web/media/{index.html => index.md} (100%) rename files/zh-cn/web/performance/css_javascript_animation_performance/{index.html => index.md} (100%) rename files/zh-cn/web/performance/dns-prefetch/{index.html => index.md} (100%) rename files/zh-cn/web/performance/{index.html => index.md} (100%) rename files/zh-cn/web/performance/optimizing_startup_performance/{index.html => index.md} (100%) diff --git a/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.html b/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.md similarity index 100% rename from files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.html rename to files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.md diff --git a/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.md similarity index 100% rename from files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html rename to files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.md diff --git a/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.html b/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md similarity index 100% rename from files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.html rename to files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md diff --git a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/expressions_and_operators/index.html rename to files/zh-cn/web/javascript/guide/expressions_and_operators/index.md diff --git a/files/zh-cn/web/javascript/guide/introduction/index.html b/files/zh-cn/web/javascript/guide/introduction/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/introduction/index.html rename to files/zh-cn/web/javascript/guide/introduction/index.md diff --git a/files/zh-cn/web/javascript/guide/meta_programming/index.html b/files/zh-cn/web/javascript/guide/meta_programming/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/meta_programming/index.html rename to files/zh-cn/web/javascript/guide/meta_programming/index.md diff --git a/files/zh-cn/web/javascript/guide/modules/index.html b/files/zh-cn/web/javascript/guide/modules/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/modules/index.html rename to files/zh-cn/web/javascript/guide/modules/index.md diff --git a/files/zh-cn/web/javascript/guide/numbers_and_dates/index.html b/files/zh-cn/web/javascript/guide/numbers_and_dates/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/numbers_and_dates/index.html rename to files/zh-cn/web/javascript/guide/numbers_and_dates/index.md diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.html rename to files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.md diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.html rename to files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/regular_expressions/index.html rename to files/zh-cn/web/javascript/guide/regular_expressions/index.md diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.html rename to files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md diff --git a/files/zh-cn/web/javascript/guide/text_formatting/index.html b/files/zh-cn/web/javascript/guide/text_formatting/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/text_formatting/index.html rename to files/zh-cn/web/javascript/guide/text_formatting/index.md diff --git a/files/zh-cn/web/javascript/guide/using_promises/index.html b/files/zh-cn/web/javascript/guide/using_promises/index.md similarity index 100% rename from files/zh-cn/web/javascript/guide/using_promises/index.html rename to files/zh-cn/web/javascript/guide/using_promises/index.md diff --git a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md similarity index 100% rename from files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.html rename to files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md diff --git a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.html rename to files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md diff --git a/files/zh-cn/web/javascript/reference/functions/index.html b/files/zh-cn/web/javascript/reference/functions/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/functions/index.html rename to files/zh-cn/web/javascript/reference/functions/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.html b/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.html rename to files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.html b/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.html rename to files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/json/index.html b/files/zh-cn/web/javascript/reference/global_objects/json/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/json/index.html rename to files/zh-cn/web/javascript/reference/global_objects/json/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/index.html b/files/zh-cn/web/javascript/reference/global_objects/math/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/math/index.html rename to files/zh-cn/web/javascript/reference/global_objects/math/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/log/index.html b/files/zh-cn/web/javascript/reference/global_objects/math/log/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/math/log/index.html rename to files/zh-cn/web/javascript/reference/global_objects/math/log/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.html rename to files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html b/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html rename to files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.html b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.html rename to files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.html rename to files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.html b/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/string/replace/index.html rename to files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/symbol/index.html b/files/zh-cn/web/javascript/reference/global_objects/symbol/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/global_objects/symbol/index.html rename to files/zh-cn/web/javascript/reference/global_objects/symbol/index.md diff --git a/files/zh-cn/web/javascript/reference/iteration_protocols/index.html b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/iteration_protocols/index.html rename to files/zh-cn/web/javascript/reference/iteration_protocols/index.md diff --git a/files/zh-cn/web/javascript/reference/operators/exponentiation/index.html b/files/zh-cn/web/javascript/reference/operators/exponentiation/index.md similarity index 100% rename from files/zh-cn/web/javascript/reference/operators/exponentiation/index.html rename to files/zh-cn/web/javascript/reference/operators/exponentiation/index.md diff --git a/files/zh-cn/web/manifest/background_color/index.html b/files/zh-cn/web/manifest/background_color/index.md similarity index 100% rename from files/zh-cn/web/manifest/background_color/index.html rename to files/zh-cn/web/manifest/background_color/index.md diff --git a/files/zh-cn/web/manifest/index.html b/files/zh-cn/web/manifest/index.md similarity index 100% rename from files/zh-cn/web/manifest/index.html rename to files/zh-cn/web/manifest/index.md diff --git a/files/zh-cn/web/mathml/attribute/index.html b/files/zh-cn/web/mathml/attribute/index.md similarity index 100% rename from files/zh-cn/web/mathml/attribute/index.html rename to files/zh-cn/web/mathml/attribute/index.md diff --git a/files/zh-cn/web/mathml/authoring/index.html b/files/zh-cn/web/mathml/authoring/index.md similarity index 100% rename from files/zh-cn/web/mathml/authoring/index.html rename to files/zh-cn/web/mathml/authoring/index.md diff --git a/files/zh-cn/web/mathml/element/index.html b/files/zh-cn/web/mathml/element/index.md similarity index 100% rename from files/zh-cn/web/mathml/element/index.html rename to files/zh-cn/web/mathml/element/index.md diff --git a/files/zh-cn/web/mathml/element/mroot/index.html b/files/zh-cn/web/mathml/element/mroot/index.md similarity index 100% rename from files/zh-cn/web/mathml/element/mroot/index.html rename to files/zh-cn/web/mathml/element/mroot/index.md diff --git a/files/zh-cn/web/mathml/element/msqrt/index.html b/files/zh-cn/web/mathml/element/msqrt/index.md similarity index 100% rename from files/zh-cn/web/mathml/element/msqrt/index.html rename to files/zh-cn/web/mathml/element/msqrt/index.md diff --git a/files/zh-cn/web/mathml/element/msub/index.html b/files/zh-cn/web/mathml/element/msub/index.md similarity index 100% rename from files/zh-cn/web/mathml/element/msub/index.html rename to files/zh-cn/web/mathml/element/msub/index.md diff --git a/files/zh-cn/web/mathml/element/msubsup/index.html b/files/zh-cn/web/mathml/element/msubsup/index.md similarity index 100% rename from files/zh-cn/web/mathml/element/msubsup/index.html rename to files/zh-cn/web/mathml/element/msubsup/index.md diff --git a/files/zh-cn/web/mathml/element/msup/index.html b/files/zh-cn/web/mathml/element/msup/index.md similarity index 100% rename from files/zh-cn/web/mathml/element/msup/index.html rename to files/zh-cn/web/mathml/element/msup/index.md diff --git a/files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.html b/files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.md similarity index 100% rename from files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.html rename to files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.md diff --git a/files/zh-cn/web/mathml/index.html b/files/zh-cn/web/mathml/index.md similarity index 100% rename from files/zh-cn/web/mathml/index.html rename to files/zh-cn/web/mathml/index.md diff --git a/files/zh-cn/web/media/autoplay_guide/index.html b/files/zh-cn/web/media/autoplay_guide/index.md similarity index 100% rename from files/zh-cn/web/media/autoplay_guide/index.html rename to files/zh-cn/web/media/autoplay_guide/index.md diff --git a/files/zh-cn/web/media/formats/containers/index.html b/files/zh-cn/web/media/formats/containers/index.md similarity index 100% rename from files/zh-cn/web/media/formats/containers/index.html rename to files/zh-cn/web/media/formats/containers/index.md diff --git a/files/zh-cn/web/media/formats/image_types/index.html b/files/zh-cn/web/media/formats/image_types/index.md similarity index 100% rename from files/zh-cn/web/media/formats/image_types/index.html rename to files/zh-cn/web/media/formats/image_types/index.md diff --git a/files/zh-cn/web/media/formats/index.html b/files/zh-cn/web/media/formats/index.md similarity index 100% rename from files/zh-cn/web/media/formats/index.html rename to files/zh-cn/web/media/formats/index.md diff --git a/files/zh-cn/web/media/formats/video_codecs/index.html b/files/zh-cn/web/media/formats/video_codecs/index.md similarity index 100% rename from files/zh-cn/web/media/formats/video_codecs/index.html rename to files/zh-cn/web/media/formats/video_codecs/index.md diff --git a/files/zh-cn/web/media/index.html b/files/zh-cn/web/media/index.md similarity index 100% rename from files/zh-cn/web/media/index.html rename to files/zh-cn/web/media/index.md diff --git a/files/zh-cn/web/performance/css_javascript_animation_performance/index.html b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md similarity index 100% rename from files/zh-cn/web/performance/css_javascript_animation_performance/index.html rename to files/zh-cn/web/performance/css_javascript_animation_performance/index.md diff --git a/files/zh-cn/web/performance/dns-prefetch/index.html b/files/zh-cn/web/performance/dns-prefetch/index.md similarity index 100% rename from files/zh-cn/web/performance/dns-prefetch/index.html rename to files/zh-cn/web/performance/dns-prefetch/index.md diff --git a/files/zh-cn/web/performance/index.html b/files/zh-cn/web/performance/index.md similarity index 100% rename from files/zh-cn/web/performance/index.html rename to files/zh-cn/web/performance/index.md diff --git a/files/zh-cn/web/performance/optimizing_startup_performance/index.html b/files/zh-cn/web/performance/optimizing_startup_performance/index.md similarity index 100% rename from files/zh-cn/web/performance/optimizing_startup_performance/index.html rename to files/zh-cn/web/performance/optimizing_startup_performance/index.md From e112292bc1e67ac345ffa6a081ace5cd54f8de3c Mon Sep 17 00:00:00 2001 From: allo Date: Fri, 12 Aug 2022 09:39:47 +0800 Subject: [PATCH 3/3] convert to markdown for some sections --- files/zh-cn/web/api/console/warn/index.md | 2 +- .../web/api/document/compatmode/index.md | 2 +- .../zh-cn/web/api/element/blur_event/index.md | 2 +- .../web/api/element/scroll_event/index.md | 2 +- .../web/api/eventsource/eventsource/index.md | 2 +- files/zh-cn/web/api/fetch/index.md | 2 +- files/zh-cn/web/api/headers/delete/index.md | 2 +- .../web/api/htmlelement/offsetwidth/index.md | 2 +- .../navigator/mozislocallyavailable/index.md | 2 +- files/zh-cn/web/api/storage/clear/index.md | 2 +- files/zh-cn/web/api/storage/getitem/index.md | 2 +- files/zh-cn/web/api/storage/index.md | 2 +- .../window/domcontentloaded_event/index.md | 4 +- files/zh-cn/web/api/window/find/index.md | 2 +- .../web/api/window/showmodaldialog/index.md | 2 +- .../a_re-introduction_to_javascript/index.md | 914 ++--- files/zh-cn/web/javascript/closures/index.md | 4 +- .../web/javascript/data_structures/index.md | 2 +- .../index.md | 515 +-- .../index.md | 535 +-- .../control_flow_and_error_handling/index.md | 2 +- .../guide/expressions_and_operators/index.md | 1216 +++---- .../web/javascript/guide/functions/index.md | 4 +- .../guide/grammar_and_types/index.md | 8 +- .../guide/indexed_collections/index.md | 6 +- .../javascript/guide/introduction/index.md | 151 +- .../guide/iterators_and_generators/index.md | 2 +- .../guide/meta_programming/index.md | 535 ++- .../web/javascript/guide/modules/index.md | 489 +-- .../guide/numbers_and_dates/index.md | 526 +-- .../regular_expressions/assertions/index.md | 386 +- .../groups_and_backreferences/index.md | 295 +- .../guide/regular_expressions/index.md | 1327 ++++--- .../regular_expressions/quantifiers/index.md | 233 +- .../unicode_property_escapes/index.md | 2 +- .../javascript/guide/text_formatting/index.md | 273 +- .../javascript/guide/using_promises/index.md | 365 +- .../index.md | 446 +-- .../web/javascript/reference/classes/index.md | 4 +- .../deprecated_and_obsolete_features/index.md | 422 +-- .../the_legacy_iterator_protocol/index.md | 2 +- .../reference/errors/bad_octal/index.md | 2 +- .../reference/functions/arguments/index.md | 4 +- .../reference/functions/get/index.md | 2 +- .../javascript/reference/functions/index.md | 480 +-- .../functions/method_definitions/index.md | 2 +- .../global_objects/array/concat/index.md | 2 +- .../global_objects/array/every/index.md | 2 +- .../global_objects/array/foreach/index.md | 4 +- .../global_objects/array/indexof/index.md | 2 +- .../global_objects/array/join/index.md | 2 +- .../global_objects/array/reduceright/index.md | 403 +-- .../global_objects/array/some/index.md | 2 +- .../global_objects/array/values/index.md | 4 +- .../global_objects/atomics/notify/index.md | 2 +- .../global_objects/atomics/wait/index.md | 2 +- .../global_objects/bigint/bigint/index.md | 2 +- .../reference/global_objects/bigint/index.md | 2 +- .../global_objects/date/getday/index.md | 2 +- .../reference/global_objects/date/index.md | 12 +- .../global_objects/function/bind/index.md | 2 +- .../global_objects/function/call/index.md | 4 +- .../global_objects/function/name/index.md | 6 +- .../global_objects/function/tostring/index.md | 250 +- .../global_objects/generatorfunction/index.md | 2 +- .../reference/global_objects/json/index.md | 60 +- .../global_objects/math/floor/index.md | 2 +- .../reference/global_objects/math/index.md | 238 +- .../global_objects/math/log/index.md | 68 +- .../global_objects/math/random/index.md | 4 +- .../global_objects/number/tofixed/index.md | 2 +- .../object/defineproperty/index.md | 344 +- .../object/getprototypeof/index.md | 2 - .../object/isprototypeof/index.md | 2 +- .../global_objects/object/proto/index.md | 4 +- .../object/setprototypeof/index.md | 2 +- .../global_objects/object/tostring/index.md | 2 +- .../global_objects/parseint/index.md | 2 +- .../global_objects/promise/any/index.md | 2 +- .../global_objects/promise/resolve/index.md | 2 +- .../global_objects/promise/then/index.md | 2 +- .../global_objects/proxy/proxy/set/index.md | 2 +- .../index.md | 137 +- .../global_objects/regexp/exec/index.md | 215 +- .../reference/global_objects/regexp/index.md | 2 +- .../global_objects/regexp/lastindex/index.md | 100 +- .../global_objects/string/anchor/index.md | 2 +- .../global_objects/string/blink/index.md | 4 +- .../global_objects/string/charcodeat/index.md | 2 +- .../global_objects/string/fontcolor/index.md | 2 +- .../reference/global_objects/string/index.md | 2 +- .../string/lastindexof/index.md | 2 +- .../global_objects/string/replace/index.md | 315 +- .../global_objects/string/replaceall/index.md | 2 +- .../global_objects/string/split/index.md | 12 +- .../global_objects/string/substr/index.md | 2 +- .../reference/global_objects/symbol/index.md | 298 +- .../global_objects/undefined/index.md | 4 +- .../global_objects/unescape/index.md | 2 +- .../global_objects/weakmap/clear/index.md | 4 +- .../webassembly/global/index.md | 2 +- .../webassembly/instance/index.md | 2 +- .../webassembly/instantiate/index.md | 4 +- .../webassembly/memory/index.md | 2 +- .../webassembly/module/index.md | 2 +- .../global_objects/webassembly/table/index.md | 2 +- .../reference/iteration_protocols/index.md | 288 +- .../reference/lexical_grammar/index.md | 4 +- .../reference/operators/delete/index.md | 2 +- .../destructuring_assignment/index.md | 4 +- .../operators/exponentiation/index.md | 91 +- .../reference/operators/instanceof/index.md | 3 +- .../operators/optional_chaining/index.md | 4 +- .../reference/operators/this/index.md | 12 +- .../statements/async_function/index.md | 94 +- .../reference/statements/export/index.md | 2 +- .../statements/for-await...of/index.md | 2 +- .../reference/statements/for...in/index.md | 2 +- .../reference/statements/label/index.md | 2 +- .../reference/statements/return/index.md | 2 +- .../reference/statements/with/index.md | 4 +- .../javascript/reference/strict_mode/index.md | 4 +- .../web/javascript/typed_arrays/index.md | 2 +- .../web/manifest/background_color/index.md | 55 +- files/zh-cn/web/manifest/index.md | 320 +- files/zh-cn/web/mathml/attribute/index.md | 569 +-- files/zh-cn/web/mathml/authoring/index.md | 471 +-- files/zh-cn/web/mathml/element/index.md | 338 +- files/zh-cn/web/mathml/element/mroot/index.md | 55 +- files/zh-cn/web/mathml/element/msqrt/index.md | 53 +- files/zh-cn/web/mathml/element/msub/index.md | 69 +- .../zh-cn/web/mathml/element/msubsup/index.md | 81 +- files/zh-cn/web/mathml/element/msup/index.md | 77 +- .../mathml_pythagorean_theorem/index.md | 12 +- files/zh-cn/web/mathml/index.md | 78 +- files/zh-cn/web/media/autoplay_guide/index.md | 311 +- .../web/media/formats/containers/index.md | 2264 ++++++------ .../web/media/formats/image_types/index.md | 2340 ++++++------ files/zh-cn/web/media/formats/index.md | 118 +- .../web/media/formats/video_codecs/index.md | 3133 +++++++++-------- files/zh-cn/web/media/index.md | 117 +- .../index.md | 77 +- .../web/performance/dns-prefetch/index.md | 83 +- files/zh-cn/web/performance/index.md | 475 ++- .../optimizing_startup_performance/index.md | 103 +- .../web/security/same-origin_policy/index.md | 4 +- 146 files changed, 11284 insertions(+), 12195 deletions(-) diff --git a/files/zh-cn/web/api/console/warn/index.md b/files/zh-cn/web/api/console/warn/index.md index cfe3c274436ea8..c935d7b8c6315b 100644 --- a/files/zh-cn/web/api/console/warn/index.md +++ b/files/zh-cn/web/api/console/warn/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/Console/warn {{AvailableInWorkers}} -> **备注：**在火狐浏览器里，警告会有一个小感叹号图标在 Web 控制台信息前面。 +> **备注：** 在火狐浏览器里，警告会有一个小感叹号图标在 Web 控制台信息前面。 ## 语法 diff --git a/files/zh-cn/web/api/document/compatmode/index.md b/files/zh-cn/web/api/document/compatmode/index.md index a7a4f6ae644966..c4e661695e8128 100644 --- a/files/zh-cn/web/api/document/compatmode/index.md +++ b/files/zh-cn/web/api/document/compatmode/index.md @@ -36,7 +36,7 @@ mode = document.compatMode; - `"BackCompat"`：文档为怪异模式。 - `"CSS1Compat"`：文档不是怪异模式，意味着文档处于标准模式或者准标准模式。 -> **备注：**现在，这些模式都已经被标准化了，准标准模式已和标准模式相同，而标准模式成为了默认表现。标准模式和准标准模式这两个名字已经失去了意义，不再在规范文档中出现。 +> **备注：** 现在，这些模式都已经被标准化了，准标准模式已和标准模式相同，而标准模式成为了默认表现。标准模式和准标准模式这两个名字已经失去了意义，不再在规范文档中出现。 ## 例子 diff --git a/files/zh-cn/web/api/element/blur_event/index.md b/files/zh-cn/web/api/element/blur_event/index.md index a221076c0a0fea..d3334247e0e1ee 100644 --- a/files/zh-cn/web/api/element/blur_event/index.md +++ b/files/zh-cn/web/api/element/blur_event/index.md @@ -21,7 +21,7 @@ original_slug: Web/Events/blur - 默认行为 - : 无 -> **备注：**{{domxref("Document.activeElement")}} 的值随浏览器的不同而不同（{{bug(452307)}}）：IE10 把值设为焦点将要移向的对象，而 Firefox 和 Chrome 往往把值设为 `body`。 +> **备注：** {{domxref("Document.activeElement")}} 的值随浏览器的不同而不同（{{bug(452307)}}）：IE10 把值设为焦点将要移向的对象，而 Firefox 和 Chrome 往往把值设为 `body`。 ## 属性 diff --git a/files/zh-cn/web/api/element/scroll_event/index.md b/files/zh-cn/web/api/element/scroll_event/index.md index 1b9f107fa50558..879b16c5c3753f 100644 --- a/files/zh-cn/web/api/element/scroll_event/index.md +++ b/files/zh-cn/web/api/element/scroll_event/index.md @@ -22,7 +22,7 @@ element.onscroll = functionReference functionReference 是一个函数的引用。当该元素滚动时，会执行该函数。 -> **备注：**不要将 onscroll 与 {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}混淆。onwheel 是鼠标滚轮旋转， 而 onscroll 处理的是对象内部内容区的滚动事件。 +> **备注：** 不要将 onscroll 与 {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}混淆。onwheel 是鼠标滚轮旋转， 而 onscroll 处理的是对象内部内容区的滚动事件。 ## 示例 diff --git a/files/zh-cn/web/api/eventsource/eventsource/index.md b/files/zh-cn/web/api/eventsource/eventsource/index.md index 6f18cb3dc78bb5..3fa5585c76a865 100644 --- a/files/zh-cn/web/api/eventsource/eventsource/index.md +++ b/files/zh-cn/web/api/eventsource/eventsource/index.md @@ -46,7 +46,7 @@ evtSource.onmessage = function(e) { } ``` -> **备注：**你可以在 GitHub 查看完整示例 — 请查看 [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> **备注：** 你可以在 GitHub 查看完整示例 — 请查看 [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) ## 规范 diff --git a/files/zh-cn/web/api/fetch/index.md b/files/zh-cn/web/api/fetch/index.md index c89cc02a208a10..878416c8511816 100644 --- a/files/zh-cn/web/api/fetch/index.md +++ b/files/zh-cn/web/api/fetch/index.md @@ -21,7 +21,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch `fetch()` 方法由 [Content Security Policy](/en-US/docs/Security/CSP/CSP_policy_directives) 的 `connect-src`指令控制，而不是它请求的资源。 -> **备注：**{{domxref("fetch()")}} 方法的参数与 {{domxref("Request.Request","Request()")}} 构造器是一样的。 +> **备注：** {{domxref("fetch()")}} 方法的参数与 {{domxref("Request.Request","Request()")}} 构造器是一样的。 ## 语法 diff --git a/files/zh-cn/web/api/headers/delete/index.md b/files/zh-cn/web/api/headers/delete/index.md index 4f1e562dbd8034..b4d8321dc6129b 100644 --- a/files/zh-cn/web/api/headers/delete/index.md +++ b/files/zh-cn/web/api/headers/delete/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Headers/delete - header 名在 HTTP header 中是不存在的。 - header 被锁定了.​ -> **备注：**出于安全原因，部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. +> **备注：** 出于安全原因，部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. ## 语法 diff --git a/files/zh-cn/web/api/htmlelement/offsetwidth/index.md b/files/zh-cn/web/api/htmlelement/offsetwidth/index.md index 5a06462e5d2d75..7136184fba70e5 100644 --- a/files/zh-cn/web/api/htmlelement/offsetwidth/index.md +++ b/files/zh-cn/web/api/htmlelement/offsetwidth/index.md @@ -20,7 +20,7 @@ var offsetWidth =element.offsetWidth; `intElemOffsetWidth` is a variable storing an integer corresponding to the `offsetWidth` pixel value of the element. `offsetWidth` 是一个只读属性。 -> **备注：**这个属性将会 round(四舍五入) 为一个整数。如果你想要一个 fractional(小数) 值，请使用{{ domxref("element.getBoundingClientRect()") }}. +> **备注：** 这个属性将会 round(四舍五入) 为一个整数。如果你想要一个 fractional(小数) 值，请使用{{ domxref("element.getBoundingClientRect()") }}. ## 示例 diff --git a/files/zh-cn/web/api/navigator/mozislocallyavailable/index.md b/files/zh-cn/web/api/navigator/mozislocallyavailable/index.md index d016589e2692a4..1a987fe91b6804 100644 --- a/files/zh-cn/web/api/navigator/mozislocallyavailable/index.md +++ b/files/zh-cn/web/api/navigator/mozislocallyavailable/index.md @@ -31,7 +31,7 @@ if (available) { ### 备注 -> **备注：**查询的 URI 和当前页面的 URI 不同域的话，会抛出安全异常。 +> **备注：** 查询的 URI 和当前页面的 URI 不同域的话，会抛出安全异常。 ### 规范 diff --git a/files/zh-cn/web/api/storage/clear/index.md b/files/zh-cn/web/api/storage/clear/index.md index 5d2afdedbf683e..034fcece67812d 100644 --- a/files/zh-cn/web/api/storage/clear/index.md +++ b/files/zh-cn/web/api/storage/clear/index.md @@ -35,7 +35,7 @@ function populateStorage() { } ``` -> **备注：**一个实际的例子 [Web Storage Demo](https://github.com/mdn/web-storage-demo)。 +> **备注：** 一个实际的例子 [Web Storage Demo](https://github.com/mdn/web-storage-demo)。 ## 规范 diff --git a/files/zh-cn/web/api/storage/getitem/index.md b/files/zh-cn/web/api/storage/getitem/index.md index cc542d7ea5c1cc..4a0345929e1042 100644 --- a/files/zh-cn/web/api/storage/getitem/index.md +++ b/files/zh-cn/web/api/storage/getitem/index.md @@ -42,7 +42,7 @@ function setStyles() { } ``` -> **备注：**一个实际的例子 [Web Storage Demo](https://github.com/mdn/web-storage-demo)。 +> **备注：** 一个实际的例子 [Web Storage Demo](https://github.com/mdn/web-storage-demo)。 ## 规范 diff --git a/files/zh-cn/web/api/storage/index.md b/files/zh-cn/web/api/storage/index.md index b9f2a2a325e072..7f79726904f167 100644 --- a/files/zh-cn/web/api/storage/index.md +++ b/files/zh-cn/web/api/storage/index.md @@ -68,7 +68,7 @@ function setStyles() { } ``` -> **备注：**要运行完整的例子，可查看 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/)。 +> **备注：** 要运行完整的例子，可查看 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/)。 ## 规范 diff --git a/files/zh-cn/web/api/window/domcontentloaded_event/index.md b/files/zh-cn/web/api/window/domcontentloaded_event/index.md index 9d4cbed335c02b..a09c17dd72b738 100644 --- a/files/zh-cn/web/api/window/domcontentloaded_event/index.md +++ b/files/zh-cn/web/api/window/domcontentloaded_event/index.md @@ -31,9 +31,9 @@ document.addEventListener('DOMContentLoaded',function(){ 如果将 link 置于 script 之后，就会立即打印。 -> **备注：**同步 JavaScript 会暂停 DOM 的解析。 +> **备注：** 同步 JavaScript 会暂停 DOM 的解析。 -> **备注：**还有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪 +> **备注：** 还有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪 ## 加速中 diff --git a/files/zh-cn/web/api/window/find/index.md b/files/zh-cn/web/api/window/find/index.md index 792148581f9b76..fba491b6852549 100644 --- a/files/zh-cn/web/api/window/find/index.md +++ b/files/zh-cn/web/api/window/find/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/find --- {{ ApiRef() }} -> **备注：**`window.find()`可能会在未来版本的 Gecko 中被废弃。查看 {{Bug("672395")}} +> **备注：** `window.find()` 可能会在未来版本的 Gecko 中被废弃。查看 {{Bug("672395")}} ### 概述 diff --git a/files/zh-cn/web/api/window/showmodaldialog/index.md b/files/zh-cn/web/api/window/showmodaldialog/index.md index 5718383f19fdc7..a130cba4b4f530 100644 --- a/files/zh-cn/web/api/window/showmodaldialog/index.md +++ b/files/zh-cn/web/api/window/showmodaldialog/index.md @@ -30,7 +30,7 @@ returnVal = window.showModalDialog(uri[, arguments][, options]); | `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | If this argument's value is `on`, `yes`, or 1, the dialog window can be resized by the user; otherwise its size is fixed. The default value is `no`. | | `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | If this argument's value is `on`, `yes`, or 1, the dialog window has scroll bars; otherwise its size is fixed. The default value is `no`. | -> **备注：**Firefox does not implement the `dialogHide`, `edge`, `status`, or `unadorned` arguments. +> **备注：** Firefox does not implement the `dialogHide`, `edge`, `status`, or `unadorned` arguments. ## Compatibility diff --git a/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.md b/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.md index d66f0ee98ab990..5f9e5d4a7d2799 100644 --- a/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.md +++ b/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.md @@ -9,129 +9,136 @@ tags: - 高级 translation_of: Web/JavaScript/A_re-introduction_to_JavaScript --- -
{{jsSidebar}}
+{{jsSidebar}} -

为什么会有这一篇“重新介绍”呢？因为 {{Glossary("JavaScript")}} 堪称世界上被人误解最深的编程语言。虽然常被嘲为“玩具语言”，但在它看似简洁的外衣下，还隐藏着强大的语言特性。 JavaScript 目前广泛应用于众多知名应用中，对于网页和移动开发者来说，深入理解 JavaScript 就尤为必要。

+为什么会有这一篇“重新介绍”呢？因为 {{Glossary("JavaScript")}} 堪称[世界上被人误解最深的编程语言](http://javascript.crockford.com/javascript.html)。虽然常被嘲为“玩具语言”，但在它看似简洁的外衣下，还隐藏着强大的语言特性。 JavaScript 目前广泛应用于众多知名应用中，对于网页和移动开发者来说，深入理解 JavaScript 就尤为必要。 -

我们有必要先从这门语言的历史谈起。在 1995 年 Netscape 一位名为 Brendan Eich 的工程师创造了 JavaScript，随后在 1996 年初，JavaScript 首先被应用于 Netscape 2 浏览器上。最初的 JavaScript 名为 LiveScript，但是因为一个糟糕的营销策略而被重新命名，该策略企图利用 Sun Microsystem 的 Java 语言的流行性，将它的名字从最初的 LiveScript 更改为 JavaScript——尽管两者之间并没有什么共同点。这便是之后混淆产生的根源。

+我们有必要先从这门语言的历史谈起。在 1995 年 Netscape 一位名为 Brendan Eich 的工程师创造了 JavaScript，随后在 1996 年初，JavaScript 首先被应用于 Netscape 2 浏览器上。最初的 JavaScript 名为 LiveScript，但是因为一个糟糕的营销策略而被重新命名，该策略企图利用 Sun Microsystem 的 Java 语言的流行性，将它的名字从最初的 LiveScript 更改为 JavaScript——尽管两者之间并没有什么共同点。这便是之后混淆产生的根源。 -

几个月后，Microsoft 随 IE 3 发布推出了一个与之基本兼容的语言 JScript。又过了几个月，Netscape 将 JavaScript 提交至 Ecma International（一个欧洲标准化组织），{{Glossary("ECMAScript")}} 标准第一版便在 1997 年诞生了，随后在 1999 年以 ECMAScript 第三版的形式进行了更新，从那之后这个标准没有发生过大的改动。由于委员会在语言特性的讨论上发生分歧，ECMAScript 第四版尚未推出便被废除，但随后于 2009 年 12 月发布的 ECMAScript 第五版引入了第四版草案加入的许多特性。第六版标准已经于 2015 年 6 月发布。

+几个月后，Microsoft 随 IE 3 发布推出了一个与之基本兼容的语言 JScript。又过了几个月，Netscape 将 JavaScript 提交至 [Ecma International](http://www.ecma-international.org)（一个欧洲标准化组织），{{Glossary("ECMAScript")}} 标准第一版便在 1997 年诞生了，随后在 1999 年以 [ECMAScript 第三版](http://www.ecma-international.org/publications/standards/Ecma-262.htm)的形式进行了更新，从那之后这个标准没有发生过大的改动。由于委员会在语言特性的讨论上发生分歧，ECMAScript 第四版尚未推出便被废除，但随后于 2009 年 12 月发布的 ECMAScript 第五版引入了第四版草案加入的许多特性。第六版标准已经于 2015 年 6 月发布。 -
-

备注： 由于这种用法更常见，从这里开始，我们将使用 JavaScript 来指代 ECMAScript 。

-
+> **备注：** 由于这种用法更常见，从这里开始，我们将使用 JavaScript 来指代 ECMAScript 。 -

与大多数编程语言不同，JavaScript 没有输入或输出的概念。它是一个在宿主环境（host environment）下运行的脚本语言，任何与外界沟通的机制都是由宿主环境提供的。浏览器是最常见的宿主环境，但在非常多的其他程序中也包含 JavaScript 解释器，如 Adobe Acrobat、Adobe Photoshop、SVG 图像、Yahoo！的 Widget 引擎，Node.js 之类的服务器端环境，NoSQL 数据库（如开源的 Apache CouchDB）、嵌入式计算机，以及包括 GNOME（注：GNU/Linux 上最流行的 GUI 之一）在内的桌面环境等等。

+与大多数编程语言不同，JavaScript 没有输入或输出的概念。它是一个在宿主环境（host environment）下运行的脚本语言，任何与外界沟通的机制都是由宿主环境提供的。浏览器是最常见的宿主环境，但在非常多的其他程序中也包含 JavaScript 解释器，如 Adobe Acrobat、Adobe Photoshop、SVG 图像、Yahoo！的 Widget 引擎，[Node.js](http://nodejs.org) 之类的服务器端环境，NoSQL 数据库（如开源的 [Apache CouchDB](http://couchdb.apache.org)）、嵌入式计算机，以及包括 [GNOME](http://www.gnome.org)（注：GNU/Linux 上最流行的 GUI 之一）在内的桌面环境等等。 -

概览

+## 概览 -

JavaScript 是一种多范式的动态语言，它包含类型、运算符、标准内置（ built-in）对象和方法。它的语法来源于 Java 和 C，所以这两种语言的许多语法特性同样适用于 JavaScript。JavaScript 通过原型链而不是类来支持面向对象编程（有关 ES6 类的内容参考这里{{jsxref("Classes")}}，有关对象原型参考见此继承与原型链）。JavaScript 同样支持函数式编程——因为它们也是对象，函数也可以被保存在变量中，并且像其他对象一样被传递。

+JavaScript 是一种多范式的动态语言，它包含类型、运算符、标准内置（ built-in）对象和方法。它的语法来源于 Java 和 C，所以这两种语言的许多语法特性同样适用于 JavaScript。JavaScript 通过原型链而不是类来支持面向对象编程（有关 ES6 类的内容参考这里{{jsxref("Classes")}}，有关对象原型参考见此[继承与原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)）。JavaScript 同样支持函数式编程——因为它们也是对象，函数也可以被保存在变量中，并且像其他对象一样被传递。 -

先从任何编程语言都不可缺少的组成部分——“类型”开始。JavaScript 程序可以修改值（value），这些值都有各自的类型。JavaScript 中的类型包括：

+先从任何编程语言都不可缺少的组成部分——“类型”开始。JavaScript 程序可以修改值（value），这些值都有各自的类型。JavaScript 中的类型包括： -
    -
  • {{jsxref("Number")}}（数字）
    • -
  • {{jsxref("String")}}（字符串）
    • -
  • {{jsxref("Boolean")}}（布尔）
    • -
  • {{jsxref("Function")}}（函数）
    • -
  • {{jsxref("Object")}}（对象）
    • -
  • {{jsxref("Symbol")}}（ES2015 新增）
    • -
+- {{jsxref("Number")}}（数字） +- {{jsxref("String")}}（字符串） +- {{jsxref("Boolean")}}（布尔） +- {{jsxref("Function")}}（函数） +- {{jsxref("Object")}}（对象） +- {{jsxref("Symbol")}}（ES2015 新增） -

…哦，还有看上去有些…奇怪的 {{jsxref("undefined")}}（未定义）类型和 {{jsxref("null")}}（空）类型。此外还有 {{jsxref("Array")}}（数组）类型，以及分别用于表示日期和正则表达式的 {{jsxref("Date")}}（日期）和 {{jsxref("RegExp")}}（正则表达式），这三种类型都是特殊的对象。严格意义上说，Function（函数）也是一种特殊的对象。所以准确来说，JavaScript 中的类型应该包括这些：

+…哦，还有看上去有些…奇怪的 {{jsxref("undefined")}}（未定义）类型和 {{jsxref("null")}}（空）类型。此外还有 {{jsxref("Array")}}（数组）类型，以及分别用于表示日期和正则表达式的 {{jsxref("Date")}}（日期）和 {{jsxref("RegExp")}}（正则表达式），这三种类型都是特殊的对象。严格意义上说，Function（函数）也是一种特殊的对象。所以准确来说，JavaScript 中的类型应该包括这些： -
    -
  • {{jsxref("Number")}}（数字）
    • -
  • {{jsxref("String")}}（字符串）
    • -
  • {{jsxref("Boolean")}}（布尔）
    • -
  • {{jsxref("Symbol")}}（符号）（ES2015 新增）
    • -
  • {{jsxref("Object")}}（对象） -
      -
    • {{jsxref("Function")}}（函数）
      • -
    • {{jsxref("Array")}}（数组）
      • -
    • {{jsxref("Date")}}（日期）
      • -
    • {{jsxref("RegExp")}}（正则表达式）
      • -
    -
    • -
  • {{jsxref("null")}}（空）
    • -
  • {{jsxref("undefined")}}（未定义）
    • -
+- {{jsxref("Number")}}（数字） +- {{jsxref("String")}}（字符串） +- {{jsxref("Boolean")}}（布尔） +- {{jsxref("Symbol")}}（符号）（ES2015 新增） +- {{jsxref("Object")}}（对象） -

JavaScript 还有一种内置的 {{jsxref("Error")}}（错误）类型。但是，如果我们继续使用上面的分类，事情便容易得多；所以，现在，我们先讨论上面这些类型。

+ - {{jsxref("Function")}}（函数） + - {{jsxref("Array")}}（数组） + - {{jsxref("Date")}}（日期） + - {{jsxref("RegExp")}}（正则表达式） -

数字

+- {{jsxref("null")}}（空） +- {{jsxref("undefined")}}（未定义） -

根据语言规范，JavaScript 采用“遵循 IEEE 754 标准的双精度 64 位格式”（"double-precision 64-bit format IEEE 754 values"）表示数字。——在 JavaScript（除了{{jsxref("BigInt")}}）当中，并不存在整数/整型 (Integer)。因此在处理如下的场景时候，您一定要小心：

+JavaScript 还有一种内置的 {{jsxref("Error")}}（错误）类型。但是，如果我们继续使用上面的分类，事情便容易得多；所以，现在，我们先讨论上面这些类型。 -
console.log(3 / 2);             // 1.5,not 1
+## 数字
+
+根据语言规范，JavaScript 采用“遵循 IEEE 754 标准的双精度 64 位格式”（"double-precision 64-bit format IEEE 754 values"）表示数字。——在 JavaScript（除了{{jsxref("BigInt")}}）当中，**并不存在整数/整型 (Integer)。**因此在处理如下的场景时候，您一定要小心：
+
+```plain
+console.log(3 / 2);             // 1.5,not 1
 console.log(Math.floor(3 / 2)); // 1
-
+``` -

一个看上去是整数的东西，其实都是浮点数。

+一个看上去是整数的东西，其实都是浮点数。 -

当然，您也需要小心这种情况：

+当然，您也需要小心这种情况： -
0.1 + 0.2 = 0.30000000000000004
-
+```js +0.1 + 0.2 = 0.30000000000000004 +``` -

在具体实现时，整数值通常被视为 32 位整型变量，在个别实现（如某些浏览器）中也以 32 位整型变量的形式进行存储，直到它被用于执行某些 32 位整型不支持的操作，这是为了便于进行位操作。

+在具体实现时，整数值通常被视为 32 位整型变量，在个别实现（如某些浏览器）中也以 32 位整型变量的形式进行存储，直到它被用于执行某些 32 位整型不支持的操作，这是为了便于进行位操作。 -

JavaScript 支持标准的算术运算符，包括加法、减法、取模（或取余）等等。还有一个之前没有提及的内置对象 {{jsxref("Math")}}（数学对象），用以处理更多的高级数学函数和常数：

+JavaScript 支持标准的[算术运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators)，包括加法、减法、取模（或取余）等等。还有一个之前没有提及的内置对象 {{jsxref("Math")}}（数学对象），用以处理更多的高级数学函数和常数： -
Math.sin(3.5);
+```js
+Math.sin(3.5);
 var circumference = 2 * Math.PI * r;
-
+``` -

你可以使用内置函数 {{jsxref("Global_Objects/parseInt", "parseInt()")}} 将字符串转换为整型。该函数的第二个可选参数表示字符串所表示数字的基（进制）：

+你可以使用内置函数 {{jsxref("Global_Objects/parseInt", "parseInt()")}} 将字符串转换为整型。该函数的第二个可选参数表示字符串所表示数字的基（进制）： -
parseInt("123", 10); // 123
+```js
+parseInt("123", 10); // 123
 parseInt("010", 10); // 10
-
+``` -

一些老版本的浏览器会将首字符为“0”的字符串当做八进制数字，2013 年以前的 JavaScript 实现会返回一个意外的结果：

+一些老版本的浏览器会将首字符为“0”的字符串当做八进制数字，2013 年以前的 JavaScript 实现会返回一个意外的结果： -
parseInt("010");  //  8
-parseInt("0x10"); // 16
+```js +parseInt("010"); // 8 +parseInt("0x10"); // 16 +``` -

这是因为字符串以数字 0 开头，{{jsxref("Global_Objects/parseInt", "parseInt()")}}函数会把这样的字符串视作八进制数字；同理，0x 开头的字符串则视为十六进制数字。

+这是因为字符串以数字 0 开头，{{jsxref("Global_Objects/parseInt", "parseInt()")}}函数会把这样的字符串视作八进制数字；同理，0x 开头的字符串则视为十六进制数字。 -

如果想把一个二进制数字字符串转换成整数值，只要把第二个参数设置为 2 就可以了：

+如果想把一个二进制数字字符串转换成整数值，只要把第二个参数设置为 2 就可以了： -
parseInt("11", 2); // 3
-
+```js +parseInt("11", 2); // 3 +``` -

JavaScript 还有一个类似的内置函数 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}，用以解析浮点数字符串，与{{jsxref("Global_Objects/parseInt", "parseInt()")}}不同的地方是，parseFloat() 只应用于解析十进制数字。

+JavaScript 还有一个类似的内置函数 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}，用以解析浮点数字符串，与{{jsxref("Global_Objects/parseInt", "parseInt()")}}不同的地方是，`parseFloat()` 只应用于解析十进制数字。 -

一元运算符 + 也可以把数字字符串转换成数值：

+一元运算符 + 也可以把数字字符串转换成数值： -
+ "42";   // 42
+```js
++ "42";   // 42
 + "010";  // 10
-+ "0x10"; // 16
++ "0x10"; // 16 +``` -

如果给定的字符串不存在数值形式，函数会返回一个特殊的值 {{jsxref("NaN")}}（Not a Number 的缩写）：

+如果给定的字符串不存在数值形式，函数会返回一个特殊的值 {{jsxref("NaN")}}（Not a Number 的缩写）： -
parseInt("hello", 10); // NaN
-
+```js +parseInt("hello", 10); // NaN +``` -

要小心 NaN：如果把 NaN 作为参数进行任何数学运算，结果也会是 NaN：

+要小心 NaN：如果把 `NaN` 作为参数进行任何数学运算，结果也会是 `NaN`： -
NaN + 5; //NaN
-
+```js +NaN + 5; //NaN +``` -

可以使用内置函数 isNaN() 来判断一个变量是否为 NaN：

+可以使用内置函数 [`isNaN()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isNaN) 来判断一个变量是否为 `NaN`： -
isNaN(NaN); // true
-
+```js +isNaN(NaN); // true +``` -

JavaScript 还有两个特殊值：Infinity（正无穷）和 -Infinity（负无穷）：

+JavaScript 还有两个特殊值：[`Infinity`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Infinity)（正无穷）和 `-Infinity`（负无穷）： -
1 / 0; //  Infinity
+```js
+1 / 0; //  Infinity
 -1 / 0; // -Infinity
-
+``` -

可以使用内置函数 isFinite() 来判断一个变量是否是一个有穷数， 如果类型为Infinity, -Infinity 或 NaN 则返回 false：

+可以使用内置函数 [`isFinite()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isFinite) 来判断一个变量是否是一个有穷数， 如果类型为`Infinity`, `-Infinity` 或 `NaN 则返回 false`： -
isFinite(1/0); // false
+```js
+isFinite(1/0); // false
 isFinite(Infinity); // false
 isFinite(-Infinity); // false
 isFinite(NaN); // false
@@ -141,138 +148,153 @@ isFinite(2e64); // true
 
 isFinite("0"); // true
 // 如果是纯数值类型的检测，则返回 false：
-Number.isFinite("0"); // false
+Number.isFinite("0"); // false +``` -
-

备注： {{jsxref("Global_Objects/parseInt", "parseInt()")}} 和 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 函数会尝试逐个解析字符串中的字符，直到遇上一个无法被解析成数字的字符，然后返回该字符前所有数字字符组成的数字。但是运算符 "+"对字符串的转换方式与之不同， 只要字符串含有无法被解析成数字的字符，该字符串就将被转换成 NaN。可分别使用这两种方法解析“10.2abc”这一字符串，并比较得到的结果，来理解这两种方法的区别。

-
+> **备注：** {{jsxref("Global_Objects/parseInt", "parseInt()")}} 和 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 函数会尝试逐个解析字符串中的字符，直到遇上一个无法被解析成数字的字符，然后返回该字符前所有数字字符组成的数字。但是运算符 "+"对字符串的转换方式与之不同， 只要字符串含有无法被解析成数字的字符，该字符串就将被转换成 `NaN`。可分别使用这两种方法解析“10.2abc”这一字符串，并比较得到的结果，来理解这两种方法的区别。 -

字符串

+## 字符串 -

JavaScript 中的字符串是一串Unicode 字符序列。这对于那些需要和多语种网页打交道的开发者来说是个好消息。更准确地说，它们是一串 UTF-16 编码单元的序列，每一个编码单元由一个 16 位二进制数表示。每一个 Unicode 字符由一个或两个编码单元来表示。

+JavaScript 中的字符串是一串[Unicode 字符](/zh-CN/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode.E7.BC.96.E7.A0.81)序列。这对于那些需要和多语种网页打交道的开发者来说是个好消息。更准确地说，它们是一串 UTF-16 编码单元的序列，每一个编码单元由一个 16 位二进制数表示。每一个 Unicode 字符由一个或两个编码单元来表示。 -

如果想表示一个单独的字符，只需使用长度为 1 的字符串。

+如果想表示一个单独的字符，只需使用长度为 1 的字符串。 -

通过访问字符串的 length（编码单元的个数）属性，可以得到它的长度。

+通过访问字符串的 [`length`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length)（编码单元的个数）属性，可以得到它的长度。 -
"hello".length; // 5
-
+```js +"hello".length; // 5 +``` -

这是我们第一次碰到 JavaScript 对象。我们有没有提过你可以像 {{jsxref("Object", "object", "", 1)}} 一样使用字符串？是的，字符串也有 {{jsxref("String", "methods", "#Methods", 1)}}（方法）能让你操作字符串和获取字符串的信息。

+这是我们第一次碰到 JavaScript 对象。我们有没有提过你可以像 {{jsxref("Object", "object", "", 1)}} 一样使用字符串？是的，字符串也有 {{jsxref("String", "methods", "#Methods", 1)}}（方法）能让你操作字符串和获取字符串的信息。 -
"hello".charAt(0); // "h"
+```js
+"hello".charAt(0); // "h"
 "hello, world".replace("world", "mars"); // "hello, mars"
 "hello".toUpperCase(); // "HELLO"
-
+``` -

其他类型

+## 其他类型 -

与其他类型不同，JavaScript 中的 {{jsxref("null")}} 表示一个空值（non-value），必须使用 null 关键字才能访问，{{jsxref("undefined")}} 是一个“undefined（未定义）”类型的对象，表示一个未初始化的值，也就是还没有被分配的值。我们之后再具体讨论变量，但有一点可以先简单说明一下，JavaScript 允许声明变量但不对其赋值，一个未被赋值的变量就是 undefined 类型。还有一点需要说明的是，undefined 实际上是一个不允许修改的常量。

+与其他类型不同，JavaScript 中的 {{jsxref("null")}} 表示一个空值（non-value），必须使用 null 关键字才能访问，{{jsxref("undefined")}} 是一个“undefined（未定义）”类型的对象，表示一个未初始化的值，也就是还没有被分配的值。我们之后再具体讨论变量，但有一点可以先简单说明一下，JavaScript 允许声明变量但不对其赋值，一个未被赋值的变量就是 `undefined` 类型。还有一点需要说明的是，`undefined` 实际上是一个不允许修改的常量。 -

JavaScript 包含布尔类型，这个类型的变量有两个可能的值，分别是 true 和 false（两者都是关键字）。根据具体需要，JavaScript 按照如下规则将变量转换成布尔类型：

+JavaScript 包含布尔类型，这个类型的变量有两个可能的值，分别是 `true` 和 `false`（两者都是关键字）。根据具体需要，JavaScript 按照如下规则将变量转换成布尔类型： -
    -
  1. false、0、空字符串（""）、NaN、null 和 undefined 被转换为 false
    2. -
  2. 所有其他值被转换为 true
    3. -
+1. `false`、`0`、空字符串（`""`）、`NaN`、`null` 和 `undefined` 被转换为 `false` +2. 所有其他值被转换为 `true` -

也可以使用 Boolean() 函数进行显式转换：

+也可以使用 `Boolean()` 函数进行显式转换： -
Boolean(''); // false
+```js
+Boolean(''); // false
 Boolean(234); // true
-
+``` -

不过一般没必要这么做，因为 JavaScript 会在需要一个布尔变量时隐式完成这个转换操作（比如在 if 条件语句中）。所以，有时我们可以把转换成布尔值后的变量分别称为 真值（true values）——即值为 true 和 假值（false values）——即值为 false；也可以分别称为“真的”（truthy）和“假的”（falsy）。

+不过一般没必要这么做，因为 JavaScript 会在需要一个布尔变量时隐式完成这个转换操作（比如在 `if` 条件语句中）。所以，有时我们可以把转换成布尔值后的变量分别称为 真值（true values）——即值为 true 和 假值（false values）——即值为 false；也可以分别称为“真的”（truthy）和“假的”（falsy）。 -

JavaScript 支持包括 &&（逻辑与）、|| （逻辑或）和!（逻辑非）在内的一些逻辑运算符。下面会有所提到。

+JavaScript 支持包括 `&&`（逻辑与）、`||` （逻辑或）和`!`（逻辑非）在内的一些逻辑运算符。下面会有所提到。 -

变量

+## 变量 -

在 JavaScript 中声明一个新变量的方法是使用关键字 let 、const 和 var：

+在 JavaScript 中声明一个新变量的方法是使用关键字 [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) 、[`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) 和 [`var`](/zh-CN/docs/Web/JavaScript/Reference/Statements/var)： -

let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。

+**`let`** 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。 -
let a;
-let name = 'Simon';
+```js +let a; +let name = 'Simon'; +``` -

下面是使用 let 声明变量作用域的例子：

+下面是使用 **`let`** 声明变量作用域的例子： -
// myLetVariable 在这里 *不能* 被引用
+```js
+// myLetVariable 在这里 *不能* 被引用
 
-for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
+for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
   // myLetVariable 只能在这里引用
 }
 
-// myLetVariable 在这里 *不能* 被引用
+// myLetVariable 在这里 *不能* 被引用 +``` -

const 允许声明一个不可变的常量。这个常量在定义域内总是可见的。

+**`const`** 允许声明一个不可变的常量。这个常量在定义域内总是可见的。 -
const Pi = 3.14; // 设置 Pi 的值
-Pi = 1; // 将会抛出一个错误因为你改变了一个常量的值。
+```js +const Pi = 3.14; // 设置 Pi 的值 +Pi = 1; // 将会抛出一个错误因为你改变了一个常量的值。 +``` -

var 是最常见的声明变量的关键字。它没有其他两个关键字的种种限制。这是因为它是传统上在 JavaScript 声明变量的唯一方法。使用 var 声明的变量在它所声明的整个函数都是可见的。

+**`var`** 是最常见的声明变量的关键字。它没有其他两个关键字的种种限制。这是因为它是传统上在 JavaScript 声明变量的唯一方法。使用 **`var`** 声明的变量在它所声明的整个函数都是可见的。 -
var a;
+```js
+var a;
 var name = "simon";
-
+``` -

一个使用 var 声明变量的语句块的例子：

+一个使用 **`var` **声明变量的语句块的例子： -
// myVarVariable 在这里 *能* 被引用
+```js
+// myVarVariable 在这里 *能* 被引用
 
-for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
+for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
   // myVarVariable 整个函数中都能被引用
 }
 
-// myVarVariable 在这里 *能* 被引用
+// myVarVariable 在这里 *能* 被引用 +``` -

如果声明了一个变量却没有对其赋值，那么这个变量的类型就是 undefined。

+如果声明了一个变量却没有对其赋值，那么这个变量的类型就是 `undefined`。 -

JavaScript 与其他语言的（如 Java）的重要区别是在 JavaScript 中语句块（blocks）是没有作用域的，只有函数有作用域。因此如果在一个复合语句中（如 if 控制结构中）使用 var 声明一个变量，那么它的作用域是整个函数（复合语句在函数中）。 但是从 ECMAScript Edition 6 开始将有所不同的， let 和 const 关键字允许你创建块作用域的变量。

+JavaScript 与其他语言的（如 Java）的重要区别是在 JavaScript 中语句块（blocks）是没有作用域的，只有函数有作用域。因此如果在一个复合语句中（如 if 控制结构中）使用 var 声明一个变量，那么它的作用域是整个函数（复合语句在函数中）。 但是从 ECMAScript Edition 6 开始将有所不同的， [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) 和 [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) 关键字允许你创建块作用域的变量。 -

运算符

+## 运算符 -

JavaScript 的算术操作符包括 +、-、*、/ 和 % ——求余（与模运算相同）。赋值使用 = 运算符，此外还有一些复合运算符，如 += 和 -=，它们等价于 x = x operator y。

+JavaScript 的算术操作符包括 `+`、`-`、`*`、`/` 和 `%` ——求余（[与模运算相同](/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#求余_%28%29)）。赋值使用 `=` 运算符，此外还有一些复合运算符，如 `+=` 和 `-=`，它们等价于 `x = x operator y`。 -
x += 5; // 等价于 x = x + 5;
-
+```js +x += 5; // 等价于 x = x + 5; +``` -

可以使用 ++ 和 -- 分别实现变量的自增和自减。两者都可以作为前缀或后缀操作符使用。

+可以使用 `++` 和 `--` 分别实现变量的自增和自减。两者都可以作为前缀或后缀操作符使用。 -

+ 操作符还可以用来连接字符串：

+[`+` 操作符]()还可以用来连接字符串： -
"hello" + " world"; // hello world
-
+```js +"hello" + " world"; // hello world +``` -

如果你用一个字符串加上一个数字（或其他值），那么操作数都会被首先转换为字符串。如下所示：

+如果你用一个字符串加上一个数字（或其他值），那么操作数都会被首先转换为字符串。如下所示： -
"3" + 4 + 5; // 345
+```js
+"3" + 4 + 5; // 345
 3 + 4 + "5"; // 75
-
+``` -

这里不难看出一个实用的技巧——通过与空字符串相加，可以将某个变量快速转换成字符串类型。

+这里不难看出一个实用的技巧——通过与空字符串相加，可以将某个变量快速转换成字符串类型。 -

JavaScript 中的比较操作使用 <、>、<= 和 >=，这些运算符对于数字和字符串都通用。相等的比较稍微复杂一些。由两个“=（等号）”组成的相等运算符有类型自适应的功能，具体例子如下：

+JavaScript 中的[比较操作](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)使用 `<`、`>`、`<=` 和 `>=`，这些运算符对于数字和字符串都通用。相等的比较稍微复杂一些。由两个“`=`（等号）”组成的相等运算符有类型自适应的功能，具体例子如下： -
123 == "123" // true
+```js
+123 == "123" // true
 1 == true; // true
-
+``` -

如果在比较前不需要自动类型转换，应该使用由三个“=（等号）”组成的相等运算符：

+如果在比较前不需要自动类型转换，应该使用由三个“`=`（等号）”组成的相等运算符： -
1 === true; //false
+```js
+1 === true; //false
 123 === "123"; // false
-
+``` -

JavaScript 还支持 != 和 !== 两种不等运算符，具体区别与两种相等运算符的区别类似。

+JavaScript 还支持 `!=` 和 `!==` 两种不等运算符，具体区别与两种相等运算符的区别类似。 -

JavaScript 还提供了 位操作符。

+JavaScript 还提供了 [位操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators)。 -

控制结构

+## 控制结构 -

JavaScript 的控制结构与其他类 C 语言类似。可以使用 if 和 else 来定义条件语句，还可以连起来使用：

+JavaScript 的控制结构与其他类 C 语言类似。可以使用 `if` 和 `else` 来定义条件语句，还可以连起来使用： -
var name = "kittens";
+```js
+var name = "kittens";
 if (name == "puppies") {
   name += "!";
 } else if (name == "kittens") {
@@ -281,11 +303,12 @@ if (name == "puppies") {
   name = "!" + name;
 }
 name == "kittens!!"; // true
-
+``` -

JavaScript 支持 while 循环和 do-while 循环。前者适合常见的基本循环操作，如果需要循环体至少被执行一次则可以使用 do-while：

+JavaScript 支持 `while` 循环和 `do-while` 循环。前者适合常见的基本循环操作，如果需要循环体至少被执行一次则可以使用 `do-while`： -
while (true) {
+```js
+while (true) {
   // 一个无限循环！
 }
 
@@ -293,45 +316,54 @@ var input;
 do {
   input = get_input();
 } while (inputIsNotValid(input))
-
+``` -

JavaScript 的 for 循环与 C 和 Java 中的相同：使用时可以在一行代码中提供控制信息。

+JavaScript 的 [`for`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for) 循环与 C 和 Java 中的相同：使用时可以在一行代码中提供控制信息。 -
for (var i = 0; i < 5; i++) {
+```js
+for (var i = 0; i < 5; i++) {
   // 将会执行五次
 }
-
+``` -

JavaScript 也还包括其他两种重要的 for 循环： for...of

+JavaScript 也还包括其他两种重要的 for 循环： [`for`...`of`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) -
for (let value of array) {
+```js
+for (let value of array) {
   // do something with value
-}
+} +``` -

和 for...in ：

+和 [`for`...`in`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) ： -
for (let property in object) {
+```js
+for (let property in object) {
   // do something with object property
-}
+} +``` -

&& 和 || 运算符使用短路逻辑（short-circuit logic），是否会执行第二个语句（操作数）取决于第一个操作数的结果。在需要访问某个对象的属性时，使用这个特性可以事先检测该对象是否为空：

+`&&` 和 `||` 运算符使用短路逻辑（short-circuit logic），是否会执行第二个语句（操作数）取决于第一个操作数的结果。在需要访问某个对象的属性时，使用这个特性可以事先检测该对象是否为空： -
var name = o && o.getName();
-
+```js +var name = o && o.getName(); +``` -

或用于缓存值（当错误值无效时）：

+或用于缓存值（当错误值无效时）： -
var name = cachedName || (cachedName = getName());
-
+```js +var name = cachedName || (cachedName = getName()); +``` -

类似地，JavaScript 也有一个用于条件表达式的三元操作符：

+类似地，JavaScript 也有一个用于条件表达式的三元操作符： -
var allowed = (age > 18) ? "yes" : "no";
-
+```js +var allowed = (age > 18) ? "yes" : "no"; +``` -

在需要多重分支时可以使用基于一个数字或字符串的 switch 语句：

+在需要多重分支时可以使用基于一个数字或字符串的 `switch` 语句： -
switch(action) {
+```js
+switch(action) {
     case 'draw':
         drawIt();
         break;
@@ -341,11 +373,12 @@ do {
     default:
         doNothing();
 }
-
+``` -

如果你不使用 break 语句，JavaScript 解释器将会执行之后 case 中的代码。除非是为了调试，一般你并不需要这个特性，所以大多数时候不要忘了加上 break。

+如果你不使用 `break` 语句，JavaScript 解释器将会执行之后 `case` 中的代码。除非是为了调试，一般你并不需要这个特性，所以大多数时候不要忘了加上 `break。` -
switch(a) {
+```js
+switch(a) {
     case 1: // 继续向下
     case 2:
         eatIt();
@@ -353,50 +386,52 @@ do {
     default:
         doNothing();
 }
-
+``` -

default 语句是可选的。switch 和 case 都可以使用需要运算才能得到结果的表达式；在 switch 的表达式和 case 的表达式是使用 === 严格相等运算符进行比较的：

+`default` 语句是可选的。`switch` 和 `case` 都可以使用需要运算才能得到结果的表达式；在 `switch` 的表达式和 `case` 的表达式是使用 `===` 严格相等运算符进行比较的： -
switch(1 + 3){
+```js
+switch(1 + 3){
     case 2 + 2:
         yay();
         break;
     default:
         neverhappens();
 }
-
+``` -

对象

+## 对象 -

JavaScript 中的对象，Object，可以简单理解成“名称 - 值”对（而不是键值对：现在，ES 2015 的映射表（Map），比对象更接近键值对），不难联想 JavaScript 中的对象与下面这些概念类似：

+JavaScript 中的对象，Object，可以简单理解成“名称 - 值”对（而不是键值对：现在，ES 2015 的映射表（Map），比对象更接近键值对），不难联想 JavaScript 中的对象与下面这些概念类似： -
    -
  • Python 中的字典（Dictionary）
    • -
  • Perl 和 Ruby 中的散列/哈希（Hash）
    • -
  • C/C++ 中的散列表（Hash table）
    • -
  • Java 中的散列映射表（HashMap）
    • -
  • PHP 中的关联数组（Associative array）
    • -
+- Python 中的字典（Dictionary） +- Perl 和 Ruby 中的散列/哈希（Hash） +- C/C++ 中的散列表（Hash table） +- Java 中的散列映射表（HashMap） +- PHP 中的关联数组（Associative array） -

这样的数据结构设计合理，能应付各类复杂需求，所以被各类编程语言广泛采用。正因为 JavaScript 中的一切（除了核心类型，core object）都是对象，所以 JavaScript 程序必然与大量的散列表查找操作有着千丝万缕的联系，而散列表擅长的正是高速查找。

+这样的数据结构设计合理，能应付各类复杂需求，所以被各类编程语言广泛采用。正因为 JavaScript 中的一切（除了核心类型，core object）都是对象，所以 JavaScript 程序必然与大量的散列表查找操作有着千丝万缕的联系，而散列表擅长的正是高速查找。 -

“名称”部分是一个 JavaScript 字符串，“值”部分可以是任何 JavaScript 的数据类型——包括对象。这使用户可以根据具体需求，创建出相当复杂的数据结构。

+“名称”部分是一个 JavaScript 字符串，“值”部分可以是任何 JavaScript 的数据类型——包括对象。这使用户可以根据具体需求，创建出相当复杂的数据结构。 -

有两种简单方法可以创建一个空对象：

+有两种简单方法可以创建一个空对象： -
var obj = new Object();
-
+```js +var obj = new Object(); +``` -

和：

+和： -
var obj = {};
-
+```js +var obj = {}; +``` -

这两种方法在语义上是相同的。第二种更方便的方法叫作“对象字面量（object literal）”法。这种也是 JSON 格式的核心语法，一般我们优先选择第二种方法。

+这两种方法在语义上是相同的。第二种更方便的方法叫作“对象字面量（object literal）”法。这种也是 JSON 格式的核心语法，一般我们优先选择第二种方法。 -

“对象字面量”也可以用来在对象实例中定义一个对象：

+“对象字面量”也可以用来在对象实例中定义一个对象： -
var obj = {
+```js
+var obj = {
     name: "Carrot",
     _for: "Max",//'for' 是保留字之一，使用'_for'代替
     details: {
@@ -404,17 +439,19 @@ do {
         size: 12
     }
 }
-
+``` -

对象的属性可以通过链式（chain）表示方法进行访问：

+对象的属性可以通过链式（chain）表示方法进行访问： -
obj.details.color; // orange
+```js
+obj.details.color; // orange
 obj["details"]["size"]; // 12
-
+``` -

下面的例子创建了一个对象原型，Person，和这个原型的实例，You。

+下面的例子创建了一个对象原型，**`Person`**，和这个原型的实例，**`You`**。 -
function Person(name, age) {
+```js
+function Person(name, age) {
   this.name = name;
   this.age = age;
 }
@@ -423,223 +460,190 @@ obj["details"]["size"]; // 12
 var You = new Person('You', 24);
 // 我们创建了一个新的 Person，名称是 "You"
 // ("You" 是第一个参数，24 是第二个参数..)
-
+``` -

完成创建后，对象属性可以通过如下两种方式进行赋值和访问：

+完成创建后，对象属性可以通过如下两种方式进行赋值和访问： -
// 点表示法 (dot notation)
+```js
+// 点表示法 (dot notation)
 obj.name = 'Simon';
 var name = obj.name;
-
+``` -

和：

+和： -
// 括号表示法 (bracket notation)
+```js
+// 括号表示法 (bracket notation)
 obj['name'] = 'Simon';
 var name = obj['name'];
 // can use a variable to define a key
 var user = prompt('what is your key?')
-obj[user] = prompt('what is its value?')
+obj[user] = prompt('what is its value?') +``` -

这两种方法在语义上也是相同的。第二种方法的优点在于属性的名称被看作一个字符串，这就意味着它可以在运行时被计算，缺点在于这样的代码有可能无法在后期被解释器优化。它也可以被用来访问某些以预留关键字作为名称的属性的值：

+这两种方法在语义上也是相同的。第二种方法的优点在于属性的名称被看作一个字符串，这就意味着它可以在运行时被计算，缺点在于这样的代码有可能无法在后期被解释器优化。它也可以被用来访问某些以[预留关键字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)作为名称的属性的值： -
obj.for = 'Simon'; // 语法错误，因为 for 是一个预留关键字
+```js
+obj.for = 'Simon'; // 语法错误，因为 for 是一个预留关键字
 obj["for"] = 'Simon'; // 工作正常
-
+``` -
-

备注：从 ECMAScript 5 开始，预留关键字可以作为对象的属性名（reserved words may be used as object property names "in the buff"）。 这意味着当定义对象字面量时不需要用双引号了。参见 ES5 Spec.

-
+> **备注：** 从 ECMAScript 5 开始，预留关键字可以作为对象的属性名（reserved words may be used as object property names "in the buff"）。 这意味着当定义对象字面量时不需要用双引号了。参见 ES5 [Spec](http://es5.github.io/#x7.6.1). -

关于对象和原型的详情参见： Object.prototype. 解释对象原型和对象原型链可以参见：继承与原型链。

+关于对象和原型的详情参见： [Object.prototype](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype). 解释对象原型和对象原型链可以参见：[继承与原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)。 -
-

备注：从 ECMAScript 2015 开始，对象键可以在创建时使用括号表示法由变量定义。{[phoneType]: 12345} 可以用来替换 var userPhone = {}; userPhone[phoneType] = 12345 .

-
+> **备注：** 从 ECMAScript 2015 开始，对象键可以在创建时使用括号表示法由变量定义。{\[phoneType]: 12345} 可以用来替换 `var userPhone = {}; userPhone[phoneType] = 12345` . -

数组

+## 数组 -

JavaScript 中的数组是一种特殊的对象。它的工作原理与普通对象类似（以数字为属性名，但只能通过[] 来访问），但数组还有一个特殊的属性——length（长度）属性。这个属性的值通常比数组最大索引大 1。

+JavaScript 中的数组是一种特殊的对象。它的工作原理与普通对象类似（以数字为属性名，但只能通过`[]` 来访问），但数组还有一个特殊的属性——`length`（长度）属性。这个属性的值通常比数组最大索引大 1。 -

创建数组的传统方法是：

+创建数组的传统方法是： -
var a = new Array();
+```js
+var a = new Array();
 a[0] = "dog";
 a[1] = "cat";
 a[2] = "hen";
 a.length; // 3
-
+``` -

使用数组字面量（array literal）法更加方便：

+使用数组字面量（array literal）法更加方便： -
var a = ["dog", "cat", "hen"];
+```js
+var a = ["dog", "cat", "hen"];
 a.length; // 3
-
+``` -

注意，Array.length 并不总是等于数组中元素的个数，如下所示：

+注意，`Array.length `并不总是等于数组中元素的个数，如下所示： -
var a = ["dog", "cat", "hen"];
+```js
+var a = ["dog", "cat", "hen"];
 a[100] = "fox";
 a.length; // 101
-
+``` -

记住：数组的长度是比数组最大索引值多一的数。

+记住：数组的长度是比数组最大索引值多一的数。 -

如果试图访问一个不存在的数组索引，会得到 undefined：

+如果试图访问一个不存在的数组索引，会得到 `undefined`： -
typeof(a[90]); // undefined
-
+```js +typeof(a[90]); // undefined +``` -

可以通过如下方式遍历一个数组：

+可以通过如下方式遍历一个数组： -
for (var i = 0; i < a.length; i++) {
+```js
+for (var i = 0; i < a.length; i++) {
     // Do something with a[i]
 }
-
+``` -

ES2015 引入了更加简洁的 for...of 循环，可以用它来遍历可迭代对象，例如数组：

+ES2015 引入了更加简洁的 [`for`...`of`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) 循环，可以用它来遍历可迭代对象，例如数组： -
for (const currentValue of a) {
+```js
+for (const currentValue of a) {
   // Do something with currentValue
 }
-
+``` -

遍历数组的另一种方法是使用 for...in 循环， 然而这并不是遍历数组元素而是数组的索引。注意，如果哪个家伙直接向 Array.prototype 添加了新的属性，使用这样的循环这些属性也同样会被遍历。所以并不推荐使用这种方法遍历数组：

+遍历数组的另一种方法是使用 [`for...in`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) 循环， 然而这并不是遍历数组元素而是数组的索引。注意，如果哪个家伙直接向 `Array.prototype` 添加了新的属性，使用这样的循环这些属性也同样会被遍历。所以并不推荐使用这种方法遍历数组： -
for (var i in a) {
+```js
+for (var i in a) {
   // 操作 a[i]
 }
-
+``` -

ECMAScript 5 增加了另一个遍历数组的方法，forEach()：

+ECMAScript 5 增加了另一个遍历数组的方法，[`forEach()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)： -
["dog", "cat", "hen"].forEach(function(currentValue, index, array) {
+```js
+["dog", "cat", "hen"].forEach(function(currentValue, index, array) {
   // 操作 currentValue 或者 array[index]
 });
-
- -

如果想在数组后追加元素，只需要：

- -
a.push(item);
- -

除了 forEach() 和 push()，Array（数组）类还自带了许多方法。建议查看 Array 方法的完整文档。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
方法名称描述
a.toString()返回一个包含数组中所有元素的字符串，每个元素通过逗号分隔。
a.toLocaleString()根据宿主环境的区域设置，返回一个包含数组中所有元素的字符串，每个元素通过逗号分隔。
a.concat(item1[, item2[, ...[, itemN]]])返回一个数组，这个数组包含原先 a 和 item1、item2、……、itemN 中的所有元素。
a.join(sep)返回一个包含数组中所有元素的字符串，每个元素通过指定的 sep 分隔。
a.pop()删除并返回数组中的最后一个元素。
a.push(item1, ..., itemN)将 item1、item2、……、itemN 追加至数组 a。
a.reverse()数组逆序（会更改原数组 a）。
a.shift()删除并返回数组中第一个元素。
a.slice(start, end)返回子数组，以 a[start] 开头，以 a[end] 前一个元素结尾。
a.sort([cmpfn]) -

依据可选的比较函数 cmpfn 进行排序，如果未指定比较函数，则按字符顺序比较（即使被比较元素是数字）。

-
a.splice(start, delcount[, item1[, ...[, itemN]]]) -

从 start 开始，删除 delcount 个元素，然后插入所有的 item。

-
a.unshift(item1[, item2[, ...[, itemN]]]) -

将 item 插入数组头部，返回数组新长度（考虑 undefined）。

-
- -

函数

- -

学习 JavaScript 最重要的就是要理解对象和函数两个部分。最简单的函数就像下面这个这么简单：

- -
function add(x, y) {
+```
+
+如果想在数组后追加元素，只需要：
+
+```js
+a.push(item);
+```
+
+除了 `forEach()` 和 `push()`，Array（数组）类还自带了许多方法。建议查看 [Array 方法的完整文档](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)。
+
+| 方法名称                                             | 描述                                                                                                |
+| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `a.toString()`                                       | 返回一个包含数组中所有元素的字符串，每个元素通过逗号分隔。                                          |
+| `a.toLocaleString()`                                 | 根据宿主环境的区域设置，返回一个包含数组中所有元素的字符串，每个元素通过逗号分隔。                  |
+| `a.concat(item1[, item2[, ...[, itemN]]])`           | 返回一个数组，这个数组包含原先 `a` 和 `item1、item2、……、itemN` 中的所有元素。                      |
+| `a.join(sep)`                                        | 返回一个包含数组中所有元素的字符串，每个元素通过指定的 `sep` 分隔。                                 |
+| `a.pop()`                                            | 删除并返回数组中的最后一个元素。                                                                    |
+| `a.push(item1, ..., itemN)`                          | 将 `item1、item2、……、itemN` 追加至数组 `a`。                                                       |
+| `a.reverse()`                                        | 数组逆序（会更改原数组 `a`）。                                                                      |
+| `a.shift()`                                          | 删除并返回数组中第一个元素。                                                                        |
+| `a.slice(start, end)`                                | 返回子数组，以 `a[start]` 开头，以 `a[end]` 前一个元素结尾。                                        |
+| `a.sort([cmpfn])`                                    | 依据可选的比较函数 `cmpfn` 进行排序，如果未指定比较函数，则按字符顺序比较（即使被比较元素是数字）。 |
+| `a.splice(start, delcount[, item1[, ...[, itemN]]])` | 从 `start` 开始，删除 `delcount` 个元素，然后插入所有的 `item`。                                    |
+| `a.unshift(item1[, item2[, ...[, itemN]]])`          | 将 `item` 插入数组头部，返回数组新长度（考虑 `undefined`）。                                        |
+
+## 函数
+
+学习 JavaScript 最重要的就是要理解对象和函数两个部分。最简单的函数就像下面这个这么简单：
+
+```js
+function add(x, y) {
     var total = x + y;
     return total;
 }
-
+``` -

这个例子包括你需要了解的关于基本函数的所有部分。一个 JavaScript 函数可以包含 0 个或多个已命名的变量。函数体中的表达式数量也没有限制。你可以声明函数自己的局部变量。return 语句在返回一个值并结束函数。如果没有使用 return 语句，或者一个没有值的 return 语句，JavaScript 会返回 undefined。

+这个例子包括你需要了解的关于基本函数的所有部分。一个 JavaScript 函数可以包含 0 个或多个已命名的变量。函数体中的表达式数量也没有限制。你可以声明函数自己的局部变量。`return` 语句在返回一个值并结束函数。如果没有使用 `return` 语句，或者一个没有值的 `return` 语句，JavaScript 会返回 `undefined`。 -

已命名的参数更像是一个指示而没有其他作用。如果调用函数时没有提供足够的参数，缺少的参数会被 undefined 替代。

+已命名的参数更像是一个指示而没有其他作用。如果调用函数时没有提供足够的参数，缺少的参数会被 `undefined` 替代。 -
add(); // NaN
+```js
+add(); // NaN
 // 不能在 undefined 对象上进行加法操作
-
+``` -

你还可以传入多于函数本身需要参数个数的参数：

+你还可以传入多于函数本身需要参数个数的参数： -
add(2, 3, 4); // 5
+```js
+add(2, 3, 4); // 5
  // 将前两个值相加，4 被忽略了
-
+``` -

这看上去有点蠢。函数实际上是访问了函数体中一个名为 arguments 的内部对象，这个对象就如同一个类似于数组的对象一样，包括了所有被传入的参数。让我们重写一下上面的函数，使它可以接收任意个数的参数：

+这看上去有点蠢。函数实际上是访问了函数体中一个名为 [`arguments`](/zh-CN/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments) 的内部对象，这个对象就如同一个类似于数组的对象一样，包括了所有被传入的参数。让我们重写一下上面的函数，使它可以接收任意个数的参数： -
function add() {
+```js
+function add() {
     var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
+    for (var i = 0, j = arguments.length; i < j; i++) {
         sum += arguments[i];
     }
     return sum;
 }
 
 add(2, 3, 4, 5); // 14
-
+``` -

这跟直接写成 2 + 3 + 4 + 5 也没什么区别。我们还是创建一个求平均数的函数吧：

+这跟直接写成 `2 + 3 + 4 + 5` 也没什么区别。我们还是创建一个求平均数的函数吧： -
function avg() {
+```js
+function avg() {
     var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
+    for (var i = 0, j = arguments.length; i < j; i++) {
         sum += arguments[i];
     }
     return sum / arguments.length;
 }
-avg(2, 3, 4, 5); // 3.5
+avg(2, 3, 4, 5); // 3.5 +``` -

这个就有用多了，但是却有些冗长。为了使代码变短一些，我们可以使用剩余参数来替换 arguments 的使用。在这方法中，我们可以传递任意数量的参数到函数中同时尽量减少我们的代码。这个剩余参数操作符在函数中以：...variable 的形式被使用，它将包含在调用函数时使用的未捕获整个参数列表到这个变量中。我们同样也可以将 for 循环替换为 for...of 循环来返回我们变量的值。

+这个就有用多了，但是却有些冗长。为了使代码变短一些，我们可以使用[剩余参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters)来替换 arguments 的使用。在这方法中，我们可以传递任意数量的参数到函数中同时尽量减少我们的代码。这个**剩余参数操作符**在函数中以：**...variable** 的形式被使用，它将包含在调用函数时使用的未捕获整个参数列表到这个变量中。我们同样也可以将 **for** 循环替换为 **for...of** 循环来返回我们变量的值。 -
function avg(...args) {
+```js
+function avg(...args) {
   var sum = 0;
   for (let value of args) {
     sum += value;
@@ -648,51 +652,47 @@ avg(2, 3, 4, 5); // 3.5
} avg(2, 3, 4, 5); // 3.5 - - -
-

备注：在上面这段代码中，所有被传入该函数的参数都被变量 args 所持有。

+``` -

需要注意的是，无论“剩余参数操作符”被放置到函数声明的哪里，它都会把除了自己之前的所有参数存储起来。比如函数：function avg(firstValue, ...args) 会把传入函数的第一个值存入 firstValue，其他的参数存入 args。这是虽然一个很有用的语言特性，却也会带来新的问题。avg() 函数只接受逗号分开的参数列表 -- 但是如果你想要获取一个数组的平均值怎么办？一种方法是将函数按照如下方式重写：

-
+> **备注：** 在上面这段代码中，所有被传入该函数的参数都被变量 **args** 所持有。需要注意的是，无论“剩余参数操作符”被放置到函数声明的哪里，它都会把除了自己之前的所有参数存储起来。比如函数：function avg(**firstValue**, ...args) 会把传入函数的第一个值存入 **firstValue**，其他的参数存入 **args**。这是虽然一个很有用的语言特性，却也会带来新的问题。`avg()` 函数只接受逗号分开的参数列表 -- 但是如果你想要获取一个数组的平均值怎么办？一种方法是将函数按照如下方式重写： -
function avgArray(arr) {
+```js
+function avgArray(arr) {
     var sum = 0;
-    for (var i = 0, j = arr.length; i < j; i++) {
+    for (var i = 0, j = arr.length; i < j; i++) {
         sum += arr[i];
     }
     return sum / arr.length;
 }
 avgArray([2, 3, 4, 5]); // 3.5
-
+``` -

但如果能重用我们已经创建的那个函数不是更好吗？幸运的是 JavaScript 允许你通过任意函数对象的 apply() 方法来传递给它一个数组作为参数列表。

+但如果能重用我们已经创建的那个函数不是更好吗？幸运的是 JavaScript 允许你通过任意函数对象的 [`apply()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 方法来传递给它一个数组作为参数列表。 -
avg.apply(null, [2, 3, 4, 5]); // 3.5
-
+```js +avg.apply(null, [2, 3, 4, 5]); // 3.5 +``` -

传给 apply() 的第二个参数是一个数组，它将被当作 avg() 的参数列表使用，至于第一个参数 null，我们将在后面讨论。这也正说明了一个事实——函数也是对象。

+传给 `apply()` 的第二个参数是一个数组，它将被当作 `avg()` 的参数列表使用，至于第一个参数 `null`，我们将在后面讨论。这也正说明了一个事实——函数也是对象。 -
-

备注：通过使用展开语法，你也可以获得同样的效果。

+> **备注：** 通过使用[展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)，你也可以获得同样的效果。比如说：`avg(...numbers)` -

比如说：avg(...numbers)

-
+JavaScript 允许你创建匿名函数： -

JavaScript 允许你创建匿名函数：

- -
var avg = function() {
+```js
+var avg = function() {
     var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
+    for (var i = 0, j = arguments.length; i < j; i++) {
         sum += arguments[i];
     }
     return sum / arguments.length;
 };
-
+``` -

这个函数在语义上与 function avg() 相同。你可以在代码中的任何地方定义这个函数，就像写普通的表达式一样。基于这个特性，有人发明出一些有趣的技巧。与 C 中的块级作用域类似，下面这个例子隐藏了局部变量：

+这个函数在语义上与 `function avg()` 相同。你可以在代码中的任何地方定义这个函数，就像写普通的表达式一样。基于这个特性，有人发明出一些有趣的技巧。与 C 中的块级作用域类似，下面这个例子隐藏了局部变量： -
var a = 1;
+```js
+var a = 1;
 var b = 2;
 (function() {
     var b = 3;
@@ -701,11 +701,12 @@ var b = 2;
 
 a; // 4
 b; // 2
-
+``` -

JavaScript 允许以递归方式调用函数。递归在处理树形结构（比如浏览器 DOM）时非常有用。

+JavaScript 允许以递归方式调用函数。递归在处理树形结构（比如浏览器 [DOM](/zh-CN/docs/Web/API/Document_Object_Model)）时非常有用。 -
function countChars(elm) {
+```js
+function countChars(elm) {
     if (elm.nodeType == 3) { // 文本节点
         return elm.nodeValue.length;
     }
@@ -715,11 +716,12 @@ b; // 2
     }
     return count;
 }
-
+``` -

这里需要说明一个潜在问题——既然匿名函数没有名字，那该怎么递归调用它呢？在这一点上，JavaScript 允许你命名这个函数表达式。你可以命名立即调用的函数表达式（IIFE——Immediately Invoked Function Expression），如下所示：

+这里需要说明一个潜在问题——既然匿名函数没有名字，那该怎么递归调用它呢？在这一点上，JavaScript 允许你命名这个函数表达式。你可以命名立即调用的函数表达式（IIFE——Immediately Invoked Function Expression），如下所示： -
var charsInBody = (function counter(elm) {
+```js
+var charsInBody = (function counter(elm) {
     if (elm.nodeType == 3) { // 文本节点
         return elm.nodeValue.length;
     }
@@ -729,21 +731,20 @@ b; // 2
     }
     return count;
 })(document.body);
-
+``` -

如上所提供的函数表达式的名称的作用域仅仅是该函数自身。这允许引擎去做更多的优化，并且这种实现更可读、友好。该名称也显示在调试器和一些堆栈跟踪中，节省了调试时的时间。

+如上所提供的函数表达式的名称的作用域仅仅是该函数自身。这允许引擎去做更多的优化，并且这种实现更可读、友好。该名称也显示在调试器和一些堆栈跟踪中，节省了调试时的时间。 -

需要注意的是 JavaScript 函数是它们本身的对象——就和 JavaScript 其他一切一样——你可以给它们添加属性或者更改它们的属性，这与前面的对象部分一样。

+需要注意的是 JavaScript 函数是它们本身的对象——就和 JavaScript 其他一切一样——你可以给它们添加属性或者更改它们的属性，这与前面的对象部分一样。 -

自定义对象

+## 自定义对象 -
-

备注：关于 JavaScript 中面向对象编程更详细的信息，请参考 JavaScript 面向对象简介。

-
+> **备注：** 关于 JavaScript 中面向对象编程更详细的信息，请参考 [JavaScript 面向对象简介](/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)。 -

在经典的面向对象语言中，对象是指数据和在这些数据上进行的操作的集合。与 C++ 和 Java 不同，JavaScript 是一种基于原型的编程语言，并没有 class 语句，而是把函数用作类。那么让我们来定义一个人名对象，这个对象包括人的姓和名两个域（field）。名字的表示有两种方法：“名 姓（First Last）”或“姓，名（Last, First）”。使用我们前面讨论过的函数和对象概念，可以像这样完成定义：

+在经典的面向对象语言中，对象是指数据和在这些数据上进行的操作的集合。与 C++ 和 Java 不同，JavaScript 是一种基于原型的编程语言，并没有 class 语句，而是把函数用作类。那么让我们来定义一个人名对象，这个对象包括人的姓和名两个域（field）。名字的表示有两种方法：“名 姓（First Last）”或“姓，名（Last, First）”。使用我们前面讨论过的函数和对象概念，可以像这样完成定义： -
function makePerson(first, last) {
+```js
+function makePerson(first, last) {
     return {
         first: first,
         last: last
@@ -758,11 +759,13 @@ function personFullNameReversed(person) {
 
 var s = makePerson('Simon', 'Willison');
 personFullName(s); // "Simon Willison"
-personFullNameReversed(s); // "Willison, Simon"
+personFullNameReversed(s); // "Willison, Simon" +``` -

上面的写法虽然可以满足要求，但是看起来很麻烦，因为需要在全局命名空间中写很多函数。既然函数本身就是对象，如果需要使一个函数隶属于一个对象，那么不难得到：

+上面的写法虽然可以满足要求，但是看起来很麻烦，因为需要在全局命名空间中写很多函数。既然函数本身就是对象，如果需要使一个函数隶属于一个对象，那么不难得到： -
function makePerson(first, last) {
+```js
+function makePerson(first, last) {
     return {
         first: first,
         last: last,
@@ -776,20 +779,23 @@ personFullNameReversed(s); // "Willison, Simon"
} s = makePerson("Simon", "Willison"); s.fullName(); // "Simon Willison" -s.fullNameReversed(); // Willison, Simon +s.fullNameReversed(); // Willison, Simon +``` -

上面的代码里有一些我们之前没有见过的东西：关键字 this。当使用在函数中时，this 指代当前的对象，也就是调用了函数的对象。如果在一个对象上使用点或者方括号来访问属性或方法，这个对象就成了 this。如果并没有使用“点”运算符调用某个对象，那么 this 将指向全局对象（global object）。这是一个经常出错的地方。例如：

+上面的代码里有一些我们之前没有见过的东西：关键字 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this)。当使用在函数中时，`this` 指代当前的对象，也就是调用了函数的对象。如果在一个对象上使用[点或者方括号](https://developer.mozilla.org/en/JavaScript/Reference/Operators/Member_Operators)来访问属性或方法，这个对象就成了 `this`。如果并没有使用“点”运算符调用某个对象，那么 `this` 将指向全局对象（global object）。这是一个经常出错的地方。例如： -
s = makePerson("Simon", "Willison");
+```js
+s = makePerson("Simon", "Willison");
 var fullName = s.fullName;
 fullName(); // undefined undefined
-
+``` -

当我们调用 fullName() 时，this 实际上是指向全局对象的，并没有名为 first 或 last 的全局变量，所以它们两个的返回值都会是 undefined。

+当我们调用 `fullName()` 时，`this` 实际上是指向全局对象的，并没有名为 `first` 或 `last` 的全局变量，所以它们两个的返回值都会是 `undefined`。 -

下面使用关键字 this 改进已有的 makePerson函数：

+下面使用关键字 `this` 改进已有的 `makePerson`函数： -
function Person(first, last) {
+```js
+function Person(first, last) {
     this.first = first;
     this.last = last;
     this.fullName = function() {
@@ -800,15 +806,16 @@ fullName(); // undefined undefined
     }
 }
 var s = new Person("Simon", "Willison");
-
+``` -

我们引入了另外一个关键字：new，它和 this 密切相关。它的作用是创建一个崭新的空对象，然后使用指向那个对象的 this 调用特定的函数。注意，含有 this 的特定函数不会返回任何值，只会修改 this 对象本身。new 关键字将生成的 this 对象返回给调用方，而被 new 调用的函数称为构造函数。习惯的做法是将这些函数的首字母大写，这样用 new 调用他们的时候就容易识别了。

+我们引入了另外一个关键字：[`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，它和 `this` 密切相关。它的作用是创建一个崭新的空对象，然后使用指向那个对象的 `this` 调用特定的函数。注意，含有 `this` 的特定函数不会返回任何值，只会修改 `this` 对象本身。`new` 关键字将生成的 `this` 对象返回给调用方，而被 `new` 调用的函数称为构造函数。习惯的做法是将这些函数的首字母大写，这样用 `new` 调用他们的时候就容易识别了。 -

不过，这个改进的函数还是和上一个例子一样，在单独调用fullName() 时，会产生相同的问题。

+不过，这个改进的函数还是和上一个例子一样，在单独调用`fullName()` 时，会产生相同的问题。 -

我们的 Person 对象现在已经相当完善了，但还有一些不太好的地方。每次我们创建一个 Person 对象的时候，我们都在其中创建了两个新的函数对象——如果这个代码可以共享不是更好吗？

+我们的 Person 对象现在已经相当完善了，但还有一些不太好的地方。每次我们创建一个 Person 对象的时候，我们都在其中创建了两个新的函数对象——如果这个代码可以共享不是更好吗？ -
function personFullName() {
+```js
+function personFullName() {
     return this.first + ' ' + this.last;
 }
 function personFullNameReversed() {
@@ -820,11 +827,12 @@ function Person(first, last) {
     this.fullName = personFullName;
     this.fullNameReversed = personFullNameReversed;
 }
-
+``` -

这种写法的好处是，我们只需要创建一次方法函数，在构造函数中引用它们。那是否还有更好的方法呢？答案是肯定的。

+这种写法的好处是，我们只需要创建一次方法函数，在构造函数中引用它们。那是否还有更好的方法呢？答案是肯定的。 -
function Person(first, last) {
+```js
+function Person(first, last) {
     this.first = first;
     this.last = last;
 }
@@ -834,74 +842,84 @@ Person.prototype.fullName = function() {
 Person.prototype.fullNameReversed = function() {
     return this.last + ', ' + this.first;
 }
-
+``` -

Person.prototype 是一个可以被Person的所有实例共享的对象。它是一个名叫原型链（prototype chain）的查询链的一部分：当你试图访问 Person 某个实例（例如上个例子中的 s）一个没有定义的属性时，解释器会首先检查这个 Person.prototype 来判断是否存在这样一个属性。所以，任何分配给 Person.prototype 的东西对通过 this 对象构造的实例都是可用的。

+`Person.prototype` 是一个可以被`Person`的所有实例共享的对象。它是一个名叫原型链（prototype chain）的查询链的一部分：当你试图访问 `Person `某个实例（例如上个例子中的 s）一个没有定义的属性时，解释器会首先检查这个 `Person.prototype` 来判断是否存在这样一个属性。所以，任何分配给 `Person.prototype` 的东西对通过 `this` 对象构造的实例都是可用的。 -

这个特性功能十分强大，JavaScript 允许你在程序中的任何时候修改原型（prototype）中的一些东西，也就是说你可以在运行时 (runtime) 给已存在的对象添加额外的方法：

+这个特性功能十分强大，JavaScript 允许你在程序中的任何时候修改原型（prototype）中的一些东西，也就是说你可以在运行时 (runtime) 给已存在的对象添加额外的方法： -
s = new Person("Simon", "Willison");
+```js
+s = new Person("Simon", "Willison");
 s.firstNameCaps();  // TypeError on line 1: s.firstNameCaps is not a function
 
 Person.prototype.firstNameCaps = function() {
     return this.first.toUpperCase()
 }
 s.firstNameCaps(); // SIMON
-
+``` -

有趣的是，你还可以给 JavaScript 的内置函数原型（prototype）添加东西。让我们给 String 添加一个方法用来返回逆序的字符串：

+有趣的是，你还可以给 JavaScript 的内置函数原型（prototype）添加东西。让我们给 `String` 添加一个方法用来返回逆序的字符串： -
var s = "Simon";
+```js
+var s = "Simon";
 s.reversed(); // TypeError on line 1: s.reversed is not a function
 
 String.prototype.reversed = function() {
     var r = "";
-    for (var i = this.length - 1; i >= 0; i--) {
+    for (var i = this.length - 1; i >= 0; i--) {
         r += this[i];
     }
     return r;
 }
 s.reversed(); // nomiS
-
+``` -

定义新方法也可以在字符串字面量上用（string literal）。

+定义新方法也可以在字符串字面量上用（string literal）。 -
"This can now be reversed".reversed(); // desrever eb won nac sihT
-
+```js +"This can now be reversed".reversed(); // desrever eb won nac sihT +``` -

正如我前面提到的，原型组成链的一部分。那条链的根节点是 Object.prototype，它包括 toString() 方法——将对象转换成字符串时调用的方法。这对于调试我们的 Person 对象很有用：

+正如我前面提到的，原型组成链的一部分。那条链的根节点是 `Object.prototype`，它包括 `toString()` 方法——将对象转换成字符串时调用的方法。这对于调试我们的 `Person` 对象很有用： -
var s = new Person("Simon", "Willison");
+```js
+var s = new Person("Simon", "Willison");
 s; // [object Object]
 
 Person.prototype.toString = function() {
-    return '<Person: ' + this.fullName() + '>';
+    return '';
 }
-s.toString(); // <Person: Simon Willison>
-
+s.toString(); // +``` -

你是否还记得之前我们说的 avg.apply() 中的第一个参数 null？现在我们可以回头看看这个东西了。apply() 的第一个参数应该是一个被当作 this 来看待的对象。下面是一个 new 方法的简单实现：

+你是否还记得之前我们说的 `avg.apply()` 中的第一个参数 `null`？现在我们可以回头看看这个东西了。`apply()` 的第一个参数应该是一个被当作 `this` 来看待的对象。下面是一个 `new` 方法的简单实现： -
function trivialNew(constructor, ...args) {
+```js
+function trivialNew(constructor, ...args) {
     var o = {}; // 创建一个对象
     constructor.apply(o, args);
     return o;
 }
-
+``` -

这并不是 new 的完整实现，因为它没有创建原型（prototype）链。想举例说明 new 的实现有些困难，因为你不会经常用到这个，但是适当了解一下还是很有用的。在这一小段代码里，...args（包括省略号）叫作剩余参数（rest arguments）。如名所示，这个东西包含了剩下的参数。

+这并不是 `new` 的完整实现，因为它没有创建原型（prototype）链。想举例说明 new 的实现有些困难，因为你不会经常用到这个，但是适当了解一下还是很有用的。在这一小段代码里，`...args`（包括省略号）叫作[剩余参数（rest arguments）](/zh-CN/docs/Web/JavaScript/Reference/rest_parameters)。如名所示，这个东西包含了剩下的参数。 -

因此，调用

+因此，调用 -
var bill = trivialNew(Person, "William", "Orange");
+```js +var bill = trivialNew(Person, "William", "Orange"); +``` -

可认为和调用如下语句是等效的

+可认为和调用如下语句是等效的 -
var bill = new Person("William", "Orange");
+```js +var bill = new Person("William", "Orange"); +``` -

apply() 有一个姐妹函数，名叫 call，它也可以允许你设置 this，但它带有一个扩展的参数列表而不是一个数组。

+`apply()` 有一个姐妹函数，名叫 [`call`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)，它也可以允许你设置 `this`，但它带有一个扩展的参数列表而不是一个数组。 -
function lastNameCaps() {
+```js
+function lastNameCaps() {
     return this.last.toUpperCase();
 }
 var s = new Person("Simon", "Willison");
@@ -909,13 +927,14 @@ lastNameCaps.call(s);
 // 和以下方式等价
 s.lastNameCaps = lastNameCaps;
 s.lastNameCaps();
-
+``` -

内部函数

+### 内部函数 -

JavaScript 允许在一个函数内部定义函数，这一点我们在之前的 makePerson() 例子中也见过。关于 JavaScript 中的嵌套函数，一个很重要的细节是，它们可以访问父函数作用域中的变量：

+JavaScript 允许在一个函数内部定义函数，这一点我们在之前的 `makePerson()` 例子中也见过。关于 JavaScript 中的嵌套函数，一个很重要的细节是，它们可以访问父函数作用域中的变量： -
function parentFunc() {
+```js
+function parentFunc() {
   var a = 1;
 
   function nestedFunc() {
@@ -923,17 +942,19 @@ s.lastNameCaps();
     return a + b;
   }
   return nestedFunc(); // 5
-}
+} +``` -

如果某个函数依赖于其他的一两个函数，而这一两个函数对你其余的代码没有用处，你可以将它们嵌套在会被调用的那个函数内部，这样做可以减少全局作用域下的函数的数量，这有利于编写易于维护的代码。

+如果某个函数依赖于其他的一两个函数，而这一两个函数对你其余的代码没有用处，你可以将它们嵌套在会被调用的那个函数内部，这样做可以减少全局作用域下的函数的数量，这有利于编写易于维护的代码。 -

这也是一个减少使用全局变量的好方法。当编写复杂代码时，程序员往往试图使用全局变量，将值共享给多个函数，但这样做会使代码很难维护。内部函数可以共享父函数的变量，所以你可以使用这个特性把一些函数捆绑在一起，这样可以有效地防止“污染”你的全局命名空间——你可以称它为“局部全局（local global）”。虽然这种方法应该谨慎使用，但它确实很有用，应该掌握。

+这也是一个减少使用全局变量的好方法。当编写复杂代码时，程序员往往试图使用全局变量，将值共享给多个函数，但这样做会使代码很难维护。内部函数可以共享父函数的变量，所以你可以使用这个特性把一些函数捆绑在一起，这样可以有效地防止“污染”你的全局命名空间——你可以称它为“局部全局（local global）”。虽然这种方法应该谨慎使用，但它确实很有用，应该掌握。 -

闭包

+## 闭包 -

闭包是 JavaScript 中最强大的抽象概念之一——但它也是最容易造成困惑的。它究竟是做什么的呢？

+闭包是 JavaScript 中最强大的抽象概念之一——但它也是最容易造成困惑的。它究竟是做什么的呢？ -
function makeAdder(a) {
+```js
+function makeAdder(a) {
   return function(b) {
     return a + b;
   }
@@ -942,22 +963,23 @@ var add5 = makeAdder(5);
 var add20 = makeAdder(20);
 add5(6); // ?
 add20(7); // ?
-
+``` -

makeAdder 这个名字本身，便应该能说明函数是用来做什么的：它会用一个参数来创建一个新的“adder”函数，再用另一个参数来调用被创建的函数时，makeAdder 会将一前一后两个参数相加。

+`makeAdder` 这个名字本身，便应该能说明函数是用来做什么的：它会用一个参数来创建一个新的“adder”函数，再用另一个参数来调用被创建的函数时，`makeAdder` 会将一前一后两个参数相加。 -

从被创建的函数的视角来看的话，这两个参数的来源问题会更显而易见：新函数自带一个参数——在新函数被创建时，便钦定、钦点了前一个参数（如上方代码中的 a、5 和 20，参考 makeAdder 的结构，它应当位于新函数外部）；新函数被调用时，又接收了后一个参数（如上方代码中的 b、6 和 7，位于新函数内部）。最终，新函数被调用的时候，前一个参数便会和由外层函数传入的后一个参数相加。

+从被创建的函数的视角来看的话，这两个参数的来源问题会更显而易见：新函数自带一个参数——在新函数被创建时，便钦定、钦点了前一个参数（如上方代码中的 a、5 和 20，参考 `makeAdder` 的结构，它应当位于新函数外部）；新函数被调用时，又接收了后一个参数（如上方代码中的 b、6 和 7，位于新函数内部）。最终，新函数被调用的时候，前一个参数便会和由外层函数传入的后一个参数相加。 -

这里发生的事情和前面介绍过的内嵌函数十分相似：一个函数被定义在了另外一个函数的内部，内部函数可以访问外部函数的变量。唯一的不同是，外部函数已经返回了，那么常识告诉我们局部变量“应该”不再存在。但是它们却仍然存在——否则 adder 函数将不能工作。也就是说，这里存在 makeAdder 的局部变量的两个不同的“副本”——一个是 a 等于 5，另一个是 a 等于 20。那些函数的运行结果就如下所示：

+这里发生的事情和前面介绍过的内嵌函数十分相似：一个函数被定义在了另外一个函数的内部，内部函数可以访问外部函数的变量。唯一的不同是，外部函数已经返回了，那么常识告诉我们局部变量“应该”不再存在。但是它们却仍然存在——否则 `adder` 函数将不能工作。也就是说，这里存在 `makeAdder` 的局部变量的两个不同的“副本”——一个是 `a` 等于 5，另一个是 `a` 等于 20。那些函数的运行结果就如下所示： -
add5(6); // 返回 11
+```js
+add5(6); // 返回 11
 add20(7); // 返回 27
-
+``` -

下面来说说，到底发生了什么了不得的事情。每当 JavaScript 执行一个函数时，都会创建一个作用域对象（scope object），用来保存在这个函数中创建的局部变量。它使用一切被传入函数的变量进行初始化（初始化后，它包含一切被传入函数的变量）。这与那些保存的所有全局变量和函数的全局对象（global object）相类似，但仍有一些很重要的区别：第一，每次函数被执行的时候，就会创建一个新的，特定的作用域对象；第二，与全局对象（如浏览器的 window 对象）不同的是，你不能从 JavaScript 代码中直接访问作用域对象，也没有 可以遍历当前作用域对象中的属性 的方法。

+下面来说说，到底发生了什么了不得的事情。每当 JavaScript 执行一个函数时，都会创建一个作用域对象（scope object），用来保存在这个函数中创建的局部变量。它使用一切被传入函数的变量进行初始化（初始化后，它包含一切被传入函数的变量）。这与那些保存的所有全局变量和函数的全局对象（global object）相类似，但仍有一些很重要的区别：第一，每次函数被执行的时候，就会创建一个新的，特定的作用域对象；第二，与全局对象（如浏览器的 `window` 对象）不同的是，你不能从 JavaScript 代码中直接访问作用域对象，也没有 可以遍历当前作用域对象中的属性 的方法。 -

所以，当调用 makeAdder 时，解释器创建了一个作用域对象，它带有一个属性：a，这个属性被当作参数传入 makeAdder 函数。然后 makeAdder 返回一个新创建的函数（暂记为 adder）。通常，JavaScript 的垃圾回收器会在这时回收 makeAdder 创建的作用域对象（暂记为 b），但是，makeAdder 的返回值，新函数 adder，拥有一个指向作用域对象 b 的引用。最终，作用域对象 b 不会被垃圾回收器回收，直到没有任何引用指向新函数 adder。

+所以，当调用 `makeAdder` 时，解释器创建了一个作用域对象，它带有一个属性：`a`，这个属性被当作参数传入 `makeAdder` 函数。然后 `makeAdder` 返回一个新创建的函数（暂记为 `adder`）。通常，JavaScript 的垃圾回收器会在这时回收 `makeAdder` 创建的作用域对象（暂记为 `b`），但是，`makeAdder` 的返回值，新函数 `adder`，拥有一个指向作用域对象 `b` 的引用。最终，作用域对象 `b` 不会被垃圾回收器回收，直到没有任何引用指向新函数 `adder`。 -

作用域对象组成了一个名为作用域链（scope chain）的（调用）链。它和 JavaScript 的对象系统使用的原型（prototype）链相类似。

+作用域对象组成了一个名为作用域链（scope chain）的（调用）链。它和 JavaScript 的对象系统使用的原型（prototype）链相类似。 -

一个闭包，就是 一个函数 与其 被创建时所带有的作用域对象 的组合。闭包允许你保存状态——所以，它们可以用来代替对象。这个 StackOverflow 帖子里有一些关于闭包的详细介绍。

+一个**闭包**，就是 一个函数 与其 被创建时所带有的作用域对象 的组合。闭包允许你保存状态——所以，它们可以用来代替对象。[这个 StackOverflow 帖子里](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work)有一些关于闭包的详细介绍。 diff --git a/files/zh-cn/web/javascript/closures/index.md b/files/zh-cn/web/javascript/closures/index.md index aa7b8c86d7bd58..9175c72e261a70 100644 --- a/files/zh-cn/web/javascript/closures/index.md +++ b/files/zh-cn/web/javascript/closures/index.md @@ -176,7 +176,7 @@ console.log(Counter.value()); /* logs 1 */ 这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 `privateCounter` 变量和 `changeBy` 函数。 -> **备注：**你应该注意到我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量`Counter`。我们可以把这个函数储存在另外一个变量`makeCounter`中，并用他来创建多个计数器。 +> **备注：** 你应该注意到我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量`Counter`。我们可以把这个函数储存在另外一个变量`makeCounter`中，并用他来创建多个计数器。 ```js var makeCounter = function() { @@ -212,7 +212,7 @@ console.log(Counter2.value()); /* logs 0 */ 每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。 -> **备注：**以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。 +> **备注：** 以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。 ## 在循环中创建闭包：一个常见错误 diff --git a/files/zh-cn/web/javascript/data_structures/index.md b/files/zh-cn/web/javascript/data_structures/index.md index 8fad22f20deacb..d0df37c5b5238d 100644 --- a/files/zh-cn/web/javascript/data_structures/index.md +++ b/files/zh-cn/web/javascript/data_structures/index.md @@ -225,7 +225,7 @@ JavaScript 的字符串类型用于表示文本数据。它是一组 16 位的 访问器属性有一个或两个访问器函数（`get` 和 `set`）来存取数值。 -> **备注：** 注意它是访问器**属性**，而非访问器**方法**。我们可以将函数作为值赋给 JavaScript 对象的访问器（使得对象表现得像一个类）——但这不会使对象变成类。 +> **备注：** 它是访问器**属性**，而非访问器**方法**。我们可以将函数作为值赋给 JavaScript 对象的访问器（使得对象表现得像一个类）——但这不会使对象变成类。 访问器属性具有以下特性（attributes）： diff --git a/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.md index db7e8ee4d7abfe..aa0367aa1febab 100644 --- a/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.md +++ b/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.md @@ -7,145 +7,280 @@ tags: - 属性 translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties --- -
{{JsSidebar("More")}}
+{{JsSidebar("More")}} -

可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。可枚举的属性可以通过 for...in 循环进行遍历（除非该属性名是一个 Symbol）。属性的所有权是通过判断该属性是否直接属于某个对象决定的，而不是通过原型链继承的。一个对象的所有的属性可以一次性的获取到。有一些内置的方法可以用于判断、迭代/枚举以及获取对象的一个或一组属性，下表对这些方法进行了列举。对于部分不可用的类别，下方的示例代码对获取方法进行了演示。

+可枚举属性是指那些内部 “可枚举” 标志设置为 `true` 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 `true`，对于通过 [Object.defineProperty](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) 等定义的属性，该标识值默认为 `false`。可枚举的属性可以通过 [for...in](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) 循环进行遍历（除非该属性名是一个 [Symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol)）。属性的所有权是通过判断该属性是否直接属于某个对象决定的，而不是通过原型链继承的。一个对象的所有的属性可以一次性的获取到。有一些内置的方法可以用于判断、迭代/枚举以及获取对象的一个或一组属性，下表对这些方法进行了列举。对于部分不可用的类别，下方的示例代码对获取方法进行了演示。 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性的可枚举性和所有权 - 内置的判断、访问和迭代方法
作用自身对象自身对象及其原型链仅原型链
判断 - - - - - - - - - - - - - - - -
可枚举属性不可枚举属性可枚举属性及不可枚举属性
propertyIsEnumerable
- hasOwnProperty		hasOwnProperty 获取属性后使用 propertyIsEnumerable 过滤可枚举属性hasOwnProperty
- 		- - - - - - - - - - - - - - - -
可枚举属性不可枚举属性可枚举属性及不可枚举属性
需要额外代码实现需要额外代码实现in
- 		需要额外代码实现
访问 - - - - - - - - - - - - - - - -
可枚举属性不可枚举属性可枚举属性及不可枚举属性
Object.keys
- getOwnPropertyNames
- getOwnPropertySymbols		getOwnPropertyNames、getOwnPropertySymbols 获取属性后使用 propertyIsEnumerable 过滤可枚举属性getOwnPropertyNames
- getOwnPropertySymbols
- 		需要额外代码实现需要额外代码实现
迭代 - - - - - - - - - - - - - - - -
可枚举属性不可枚举属性可枚举属性及不可枚举属性
Object.keys
- getOwnPropertyNames
- getOwnPropertySymbols		getOwnPropertyNames、getOwnPropertySymbols 获取属性后使用 propertyIsEnumerable 过滤可枚举属性getOwnPropertyNames
- getOwnPropertySymbols
- 		- - - - - - - - - - - - - - - -
可枚举属性不可枚举属性可枚举属性及不可枚举属性
for..in
- （同时会排除 Symbol）		需要额外代码实现需要额外代码实现
- 		需要额外代码实现
 + 属性的可枚举性和所有权 - 内置的判断、访问和迭代方法 +
作用自身对象自身对象及其原型链仅原型链
判断 + + + + + + + + + + + + + + + +
可枚举属性不可枚举属性可枚举属性及不可枚举属性
+ propertyIsEnumerable
hasOwnProperty + 		+ hasOwnProperty + 获取属性后使用 + propertyIsEnumerable + 过滤可枚举属性 + + hasOwnProperty +
+ 		+ + + + + + + + + + + + + + + +
可枚举属性不可枚举属性可枚举属性及不可枚举属性
需要额外代码实现需要额外代码实现 + in +
+ 		需要额外代码实现
访问 + + + + + + + + + + + + + + + +
可枚举属性不可枚举属性可枚举属性及不可枚举属性
+ Object.keys
getOwnPropertyNames
getOwnPropertySymbols + 		+ getOwnPropertyNames、getOwnPropertySymbols 获取属性后使用 + propertyIsEnumerable + 过滤可枚举属性 + + getOwnPropertyNames
getOwnPropertySymbols +
+ 		需要额外代码实现需要额外代码实现
迭代 + + + + + + + + + + + + + + + +
可枚举属性不可枚举属性可枚举属性及不可枚举属性
+ Object.keys
getOwnPropertyNames
getOwnPropertySymbols + 		+ getOwnPropertyNames、getOwnPropertySymbols + 获取属性后使用 + propertyIsEnumerable + 过滤可枚举属性 + + getOwnPropertyNames
getOwnPropertySymbols +
+ 		+ + + + + + + + + + + + + + + +
可枚举属性不可枚举属性可枚举属性及不可枚举属性
+ for..in
（同时会排除 Symbol） + 		需要额外代码实现需要额外代码实现
+ 		需要额外代码实现
-
-

通过可枚举性和所有权获取对象的属性

+## 通过可枚举性和所有权获取对象的属性 -

注：以下实现并非使用于所有情况的最优算法，但可以快捷的展示语言特性。

+注：以下实现并非使用于所有情况的最优算法，但可以快捷的展示语言特性。 -
    -
  • 使用 SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1 时将发生判断操作。
    • -
  • 使用 SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); 时将发生迭代操作。 (或使用 filter()、map() 等方法)
    • -
+- 使用 `SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1` 时将发生判断操作。 +- 使用 `SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});` 时将发生迭代操作。 (或使用 `filter()`、`map()` 等方法) -
var SimplePropertyRetriever = {
+```js
+var SimplePropertyRetriever = {
     getOwnEnumerables: function(obj) {
         return this._getPropertyNames(obj, true, false, this._enumerable);
          // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
@@ -193,7 +328,7 @@ translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
         do {
             if (iterateSelfBool) {
                 Object.getOwnPropertyNames(obj).forEach(function(prop) {
-                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
                         props.push(prop);
                     }
                 });
@@ -206,104 +341,26 @@ translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
 
         return props;
     }
-};
+}; +``` -

统计表

+## 统计表 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
infor..inobj.hasOwnPropertyobj.propertyIsEnumerableObject.keysObject.getOwnPropertyNamesObject.getOwnPropertyDescriptorsReflect.ownKeys()
自身的可枚举属性truetruetruetruetruetruetruetrue
自身的不可枚举属性truefalsetruefalsefalsetruetruetrue
自身的 Symbol 键truefalsetruetruefalsefalsetruetrue
继承的可枚举属性truetruefalsefalsefalsefalsefalsefalse
继承的不可枚举属性truefalsefalsefalsefalsefalsefalsefalse
继承的 Symbol 键truefalsefalsefalsefalsefalsefalsefalse
-
+| | `in` | `for..in` | `obj.hasOwnProperty` | `obj.propertyIsEnumerable` | `Object.keys` | `Object.getOwnPropertyNames` | `Object.getOwnPropertyDescriptors` | `Reflect.ownKeys()` | +| ------------------ | ---- | --------- | -------------------- | -------------------------- | ------------- | ---------------------------- | ---------------------------------- | ------------------- | +| 自身的可枚举属性 | true | true | true | true | true | true | true | true | +| 自身的不可枚举属性 | true | false | true | false | false | true | true | true | +| 自身的 Symbol 键 | true | false | true | true | false | false | true | true | +| 继承的可枚举属性 | true | true | false | false | false | false | false | false | +| 继承的不可枚举属性 | true | false | false | false | false | false | false | false | +| 继承的 Symbol 键 | true | false | false | false | false | false | false | false | -

参见

+## 参见 -
    -
  • in
    • -
  • for..in
    • -
  • {{jsxref("Object.hasOwnProperty()")}}
    • -
  • {{jsxref("Object.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptors()")}}
    • -
+- [`in`](/zh-CN/docs/Web/JavaScript/Reference/Operators/in) +- [`for..in`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) +- {{jsxref("Object.hasOwnProperty()")}} +- {{jsxref("Object.propertyIsEnumerable()")}} +- {{jsxref("Object.getOwnPropertyNames()")}} +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.getOwnPropertyDescriptors()")}} diff --git a/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md b/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md index f6fdf4dc6acde5..1a3113feba7ec1 100644 --- a/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md +++ b/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md @@ -11,34 +11,31 @@ tags: - 非严格相等 translation_of: Web/JavaScript/Equality_comparisons_and_sameness --- -
{{jsSidebar("Intermediate")}}
+{{jsSidebar("Intermediate")}} -

ES2015 中有四种相等算法：

+ES2015 中有四种相等算法： -
    -
  • 抽象（非严格）相等比较 (==)
    • -
  • 严格相等比较 (===): 用于 Array.prototype.indexOf, Array.prototype.lastIndexOf, 和 case-matching
    • -
  • 同值零：用于 %TypedArray% 和 ArrayBuffer 构造函数、以及Map和Set操作，并将用于 ES2016/ES7 中的String.prototype.includes
    • -
  • 同值：用于所有其他地方
    • -
+- 抽象（非严格）相等比较 (`==`) +- 严格相等比较 (`===`): 用于 `Array.prototype.indexOf`, `Array.prototype.lastIndexOf`, 和 `case`-matching +- 同值零：用于 `%TypedArray%` 和 `ArrayBuffer `构造函数、以及`Map`和`Set`操作，并将用于 ES2016/ES7 中的`String.prototype.includes` +- 同值：用于所有其他地方 -

JavaScript 提供三种不同的值比较操作：

+JavaScript 提供三种不同的值比较操作： -
    -
  • 严格相等比较 (也被称作"strict equality", "identity", "triple equals")，使用 === ,
    • -
  • 抽象相等比较 ("loose equality"，"double equals") ，使用 ==
    • -
  • 以及 Object.is （ECMAScript 2015/ ES6 新特性）
    • -
+- 严格相等比较 (也被称作"strict equality", "identity", "triple equals")，使用 [===](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity) , +- 抽象相等比较 ("loose equality"，"double equals") ，使用 [==](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality) +- 以及 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) （ECMAScript 2015/ ES6 新特性） -

选择使用哪个操作取决于你需要什么样的比较。

+选择使用哪个操作取决于你需要什么样的比较。 -

简而言之，在比较两件事情时，双等号将执行类型转换; 三等号将进行相同的比较，而不进行类型转换 (如果类型不同，只是总会返回 false ); 而 Object.is 的行为方式与三等号相同，但是对于 NaN 和-0 和 +0 进行特殊处理，所以最后两个不相同，而 Object.is（NaN，NaN）将为 true。(通常使用双等号或三等号将 NaN 与 NaN 进行比较，结果为 false，因为 IEEE 754 如是说.) 请注意，所有这些之间的区别都与其处理原语有关; 这三个运算符的原语中，没有一个会比较两个变量是否结构上概念类似。对于任意两个不同的非原始对象，即便他们有相同的结构， 以上三个运算符都会计算得到 false 。

+简而言之，在比较两件事情时，双等号将执行类型转换; 三等号将进行相同的比较，而不进行类型转换 (如果类型不同，只是总会返回 false ); 而 Object.is 的行为方式与三等号相同，但是对于 NaN 和-0 和 +0 进行特殊处理，所以最后两个不相同，而 Object.is（NaN，NaN）将为 `true`。(通常使用双等号或三等号将 NaN 与 NaN 进行比较，结果为 false，因为 IEEE 754 如是说.) 请注意，所有这些之间的区别都与其处理原语有关; 这三个运算符的原语中，没有一个会比较两个变量是否结构上概念类似。对于任意两个不同的非原始对象，即便他们有相同的结构， 以上三个运算符都会计算得到 false 。 -

严格相等 ===

+## 严格相等 `===` -

全等操作符比较两个值是否相等，两个被比较的值在比较前都不进行隐式转换。如果两个被比较的值具有不同的类型，这两个值是不全等的。否则，如果两个被比较的值类型相同，值也相同，并且都不是 number 类型时，两个值全等。最后，如果两个值都是 number 类型，当两个都不是 NaN，并且数值相同，或是两个值分别为 +0 和 -0 时，两个值被认为是全等的。

+全等操作符比较两个值是否相等，两个被比较的值在比较前都不进行隐式转换。如果两个被比较的值具有不同的类型，这两个值是不全等的。否则，如果两个被比较的值类型相同，值也相同，并且都不是 number 类型时，两个值全等。最后，如果两个值都是 number 类型，当两个都不是 NaN，并且数值相同，或是两个值分别为 +0 和 -0 时，两个值被认为是全等的。 -
var num = 0;
+```js
+var num = 0;
 var obj = new String("0");
 var str = "0";
 var b = false;
@@ -53,99 +50,100 @@ console.log(obj === str); // false
 console.log(null === undefined); // false
 console.log(obj === null); // false
 console.log(obj === undefined); // false
-
+``` -

在日常中使用全等操作符几乎总是正确的选择。对于除了数值之外的值，全等操作符使用明确的语义进行比较：一个值只与自身全等。对于数值，全等操作符使用略加修改的语义来处理两个特殊情况：第一个情况是，浮点数 0 是不分正负的。区分 +0 和 -0 在解决一些特定的数学问题时是必要的，但是大部分情况下我们并不用关心。全等操作符认为这两个值是全等的。第二个情况是，浮点数包含了 NaN 值，用来表示某些定义不明确的数学问题的解，例如：正无穷加负无穷。全等操作符认为 NaN 与其他任何值都不全等，包括它自己。（等式 (x !== x) 成立的唯一情况是 x 的值为 NaN）

+在日常中使用全等操作符几乎总是正确的选择。对于除了数值之外的值，全等操作符使用明确的语义进行比较：一个值只与自身全等。对于数值，全等操作符使用略加修改的语义来处理两个特殊情况：第一个情况是，浮点数 0 是不分正负的。区分 +0 和 -0 在解决一些特定的数学问题时是必要的，但是大部分情况下我们并不用关心。全等操作符认为这两个值是全等的。第二个情况是，浮点数包含了 NaN 值，用来表示某些定义不明确的数学问题的解，例如：正无穷加负无穷。全等操作符认为 NaN 与其他任何值都不全等，包括它自己。（等式 `(x !== x)` 成立的唯一情况是 x 的值为 NaN） -

非严格相等 ==

+## 非严格相等 `==` -

相等操作符比较两个值是否相等，在比较前将两个被比较的值转换为相同类型。在转换后（等式的一边或两边都可能被转换），最终的比较方式等同于全等操作符 === 的比较方式。 相等操作符满足交换律。

+相等操作符比较两个值是否相等，在比较前将两个被比较的值转换为相同类型。在转换后（等式的一边或两边都可能被转换），最终的比较方式等同于全等操作符 === 的比较方式。 相等操作符满足交换律。 -

相等操作符对于不同类型的值，进行的比较如下图所示：

+相等操作符对于不同类型的值，进行的比较如下图所示： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
被比较值 B
UndefinedNullNumberStringBooleanObject
被比较值 AUndefinedtruetruefalsefalsefalseIsFalsy(B)
NulltruetruefalsefalsefalseIsFalsy(B)
NumberfalsefalseA === BA === ToNumber(B)A=== ToNumber(B) A== ToPrimitive(B)
StringfalsefalseToNumber(A) === BA === BToNumber(A) === ToNumber(B)ToPrimitive(B) == A
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === BToNumber(A) == ToPrimitive(B)
ObjectfalsefalseToPrimitive(A) == BToPrimitive(A) == BToPrimitive(A) == ToNumber(B) -

A === B

-
被比较值 B
UndefinedNullNumberStringBooleanObject
被比较值 AUndefinedtruetruefalsefalsefalseIsFalsy(B)
NulltruetruefalsefalsefalseIsFalsy(B)
NumberfalsefalseA === BA === ToNumber(B)A=== ToNumber(B)A== ToPrimitive(B)
StringfalsefalseToNumber(A) === BA === BToNumber(A) === ToNumber(B)ToPrimitive(B) == A
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === BToNumber(A) == ToPrimitive(B)
ObjectfalsefalseToPrimitive(A) == BToPrimitive(A) == BToPrimitive(A) == ToNumber(B) +

A === B

+
-

在上面的表格中，ToNumber(A) 尝试在比较前将参数 A 转换为数字，这与 +A（单目运算符 +）的效果相同。ToPrimitive(A)通过尝试调用 A 的A.toString() 和 A.valueOf() 方法，将参数 A 转换为原始值（Primitive）。

+在上面的表格中，`ToNumber(A)` 尝试在比较前将参数 A 转换为数字，这与 +A（单目运算符 +）的效果相同。`ToPrimitive(A)`通过尝试调用 A 的`A.toString()` 和 `A.valueOf()` 方法，将参数 A 转换为原始值（Primitive）。 -

一般而言，根据 ECMAScript 规范，所有的对象都与 undefined 和 null 不相等。但是大部分浏览器允许非常窄的一类对象（即，所有页面中的 document.all 对象），在某些情况下，充当效仿 undefined 的角色。相等操作符就是在这样的一个背景下。因此，IsFalsy(A) 方法的值为 true ，当且仅当 A 效仿 undefined。在其他所有情况下，一个对象都不会等于 undefined 或 null。

+一般而言，根据 ECMAScript 规范，所有的对象都与 `undefined `和 `null `不相等。但是大部分浏览器允许非常窄的一类对象（即，所有页面中的 `document.all `对象），在某些情况下，充当效仿 `undefined `的角色。相等操作符就是在这样的一个背景下。因此，`IsFalsy(A) `方法的值为 `true `，当且仅当 `A `效仿 `undefined`。在其他所有情况下，一个对象都不会等于 `undefined `或 `null`。 -
var num = 0;
+```js
+var num = 0;
 var obj = new String("0");
 var str = "0";
 var b = false;
@@ -162,15 +160,16 @@ console.log(null == undefined); // true
 // both false, except in rare cases
 console.log(obj == null);
 console.log(obj == undefined);
-
+``` -

有些开发者认为，最好永远都不要使用相等操作符。全等操作符的结果更容易预测，并且因为没有隐式转换，全等比较的操作会更快。

+有些开发者认为，最好永远都不要使用相等操作符。全等操作符的结果更容易预测，并且因为没有隐式转换，全等比较的操作会更快。 -

同值相等

+## 同值相等 -

同值相等解决了最后一个用例：确定两个值是否在任何情况下功能上是相同的。（这个用例演示了里氏替换原则的实例。）当试图对不可变（immutable）属性修改时发生出现的情况：

+同值相等解决了最后一个用例：确定两个值是否在任何情况下功能上是相同的。（这个用例演示了[里氏替换原则](http://zh.wikipedia.org/zh-cn/%E9%87%8C%E6%B0%8F%E6%9B%BF%E6%8D%A2%E5%8E%9F%E5%88%99)的实例。）当试图对不可变（immutable）属性修改时发生出现的情况： -
// 向 Nmuber 构造函数添加一个不可变的属性 NEGATIVE_ZERO
+```js
+// 向 Nmuber 构造函数添加一个不可变的属性 NEGATIVE_ZERO
 Object.defineProperty(Number, "NEGATIVE_ZERO",
                       { value: -0, writable: false, configurable: false, enumerable: false });
 
@@ -178,247 +177,81 @@ function attemptMutation(v)
 {
   Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
 }
-
- -

Object.defineProperty 在试图修改不可变属性时，如果这个属性确实被修改了则会抛出异常，反之什么都不会发生。例如如果 v 是 -0 ，那么没有发生任何变化，所以也不会抛出任何异常。但如果 v 是 +0 ，则会抛出异常。不可变属性和新设定的值使用 same-value 相等比较。

- -

同值相等由 Object.is 方法提供。

- -

零值相等

- -

与同值相等类似，不过会认为 +0 与 -0 相等。

- -

规范中的相等、严格相等以及同值相等

- -

在 ES5 中， == 相等在 Section 11.9.3, The Abstract Equality Algorithm； === 相等在 11.9.6, The Strict Equality Algorithm。（请参考这两个链接，他们很简洁易懂。提示：请先阅读严格相等的算法）ES5 也提供了 same-value 相等， Section 9.12, The SameValue Algorithm ，用在 JS 引擎内部。除了 11.9.6.4 和 9.12.4 在处理数字上的不同外，它基本和严格相等算法相同。ES6 简单地通过 Object.is 暴露了这个算法。

- -

我们可以看到，使用双等或三等时，除了 11.9.6.1 类型检查，严格相等算法是相等算法的子集因为 11.9.6.2–7 对应 11.9.3.1.a–f。

- -

理解相等比较的模型

- -

在 ES2015 以前，你可能会说双等和三等是“扩展”的关系。比如有人会说双等是三等的扩展版，因为他处理三等所做的，还做了类型转换。例如 6 == "6" 。反之另一些人可能会说三等是双等的扩展，因为他还要求两个参数的类型相同，所以增加了更多的限制。怎样理解取决于你怎样看待这个问题。

- -

但是这种比较的方式没办法把 ES2015 的 Object.is 排列到其中。因为 Object.is 并不比双等更宽松，也并不比三等更严格，当然也不是在他们中间。从下表中可以看出，这是由于 Object.is 处理 NaN 的不同。注意假如 Object.is(NaN, NaN) 被计算成 false ，我们就可以说他比三等更为严格，因为他可以区分 -0 和 +0 。但是对 NaN 的处理表明，这是不对的。 Object.is 应该被认为是有其特殊的用途，而不应说他和其他的相等更宽松或严格。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
判等
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
[1,2]"1,2"truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
- -

什么时候使用 Object.is 或是三等

- -

总的来说，除了对待NaN的方式，Object.is唯一让人感兴趣的，是当你需要一些元编程方案时，它对待 0 的特殊方式，特别是关于属性描述器，即你的工作需要去镜像Object.defineProperty的一些特性时。如果你的工作不需要这些，那你应该避免使用Object.is，使用===来代替。即使你需要比较两个NaN使其结果为true，总的来说编写使用NaN 检查的特例函数 (用旧版本 ECMAScript 的isNaN 方法) 也会比想出一些计算方法让Object.is不影响不同符号的 0 的比较更容易些。

- -

这里是一个会区别对待-0 和 +0 的内置方法和操作符不完全列表：

- -
-
- (一元负)
-
-

显而易见，对0 一元负操作得到-0。但表达式的抽象化可能在你没有意识到得情况下导致-0 延续传播。例如当考虑下例时：

- - 
let stoppingForce = obj.mass * -obj.velocity
- -

如果obj.velocity是0 (或计算结果为0), 一个-0就在上处产生并被赋值为stoppingForce 的值.

-
-
- Math.atan2, - Math.ceil, - Math.pow, - Math.round -
-
即使传入的参数中没有-0，这些方法的返回值都有可能是-0。例如当用 Math.pow计算-Infinity的任何负奇指数的幂都会得到-0。详情请参见这些方法各自的文档。
-
- Math.floor, - Math.max, - Math.min, - Math.sin, - Math.sqrt, - Math.tan -
-
当传入参数中有-0 时，这些方法也可能返回-0。例如， Math.min(-0, +0) 得出 -0。详情请参见这些方法各自的文档。
-
- ~, - <<, - >> -
-
这些操作符内部都使用了 ToInt32 算法。因为内部 32 位整数类型只有一个 0（没有符号区别），-0 的符号在反操作后并不会保留下来。例如Object.is(~~(-0), -0)和Object.is(-0 << 2 >> 2, -0) 都会得到 false.
-
- -

在未考虑 0 的符号的情况下依赖于Object.is是危险的。当然，如果本意就是区分-0 和 +0 的话，Object.is能按照期望完成工作。

- -

参考

- - +``` + +`Object.defineProperty` 在试图修改不可变属性时，如果这个属性确实被修改了则会抛出异常，反之什么都不会发生。例如如果 v 是 -0 ，那么没有发生任何变化，所以也不会抛出任何异常。但如果 v 是 +0 ，则会抛出异常。不可变属性和新设定的值使用 same-value 相等比较。 + +同值相等由 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 方法提供。 + +## 零值相等 + +与同值相等类似，不过会认为 +0 与 -0 相等。 + +## 规范中的相等、严格相等以及同值相等 + +在 ES5 中， [`==`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 相等在 [Section 11.9.3, The Abstract Equality Algorithm](http://ecma-international.org/ecma-262/5.1/#sec-11.9.3)； [`===`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 相等在 [11.9.6, The Strict Equality Algorithm](http://ecma-international.org/ecma-262/5.1/#sec-11.9.6)。（请参考这两个链接，他们很简洁易懂。提示：请先阅读严格相等的算法）ES5 也提供了 same-value 相等， [Section 9.12, The SameValue Algorithm](http://ecma-international.org/ecma-262/5.1/#sec-9.12) ，用在 JS 引擎内部。除了 11.9.6.4 和 9.12.4 在处理数字上的不同外，它基本和严格相等算法相同。ES6 简单地通过 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 暴露了这个算法。 + +我们可以看到，使用双等或三等时，除了 11.9.6.1 类型检查，严格相等算法是相等算法的子集因为 11.9.6.2–7 对应 11.9.3.1.a–f。 + +## 理解相等比较的模型 + +在 ES2015 以前，你可能会说双等和三等是“扩展”的关系。比如有人会说双等是三等的扩展版，因为他处理三等所做的，还做了类型转换。例如 6 == "6" 。反之另一些人可能会说三等是双等的扩展，因为他还要求两个参数的类型相同，所以增加了更多的限制。怎样理解取决于你怎样看待这个问题。 + +但是这种比较的方式没办法把 ES2015 的 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 排列到其中。因为 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 并不比双等更宽松，也并不比三等更严格，当然也不是在他们中间。从下表中可以看出，这是由于 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 处理 [`NaN`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN) 的不同。注意假如 `Object.is(NaN, NaN)` 被计算成 `false` ，我们就可以说他比三等更为严格，因为他可以区分 `-0` 和 `+0` 。但是对 [`NaN`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN) 的处理表明，这是不对的。 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 应该被认为是有其特殊的用途，而不应说他和其他的相等更宽松或严格。 + +| x | y | `==` | `===` | `Object.is` | +| ------------------- | ------------------- | ------- | ------- | ----------- | +| `undefined` | `undefined` | `true` | `true` | `true` | +| `null` | `null` | `true` | `true` | `true` | +| `true` | `true` | `true` | `true` | `true` | +| `false` | `false` | `true` | `true` | `true` | +| `"foo"` | `"foo"` | `true` | `true` | `true` | +| `0` | `0` | `true` | `true` | `true` | +| `+0` | `-0` | `true` | `true` | `false` | +| `0` | `false` | `true` | `false` | `false` | +| `""` | `false` | `true` | `false` | `false` | +| `""` | `0` | `true` | `false` | `false` | +| `"0"` | `0` | `true` | `false` | `false` | +| `"17"` | `17` | `true` | `false` | `false` | +| `[1,2]` | `"1,2"` | `true` | `false` | `false` | +| `new String("foo")` | `"foo"` | `true` | `false` | `false` | +| `null` | `undefined` | `true` | `false` | `false` | +| `null` | `false` | `false` | `false` | `false` | +| `undefined` | `false` | `false` | `false` | `false` | +| `{ foo: "bar" }` | `{ foo: "bar" }` | `false` | `false` | `false` | +| `new String("foo")` | `new String("foo")` | `false` | `false` | `false` | +| `0` | `null` | `false` | `false` | `false` | +| `0` | `NaN` | `false` | `false` | `false` | +| `"foo"` | `NaN` | `false` | `false` | `false` | +| `NaN` | `NaN` | `false` | `false` | `true` | + +## 什么时候使用 [`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 或是三等 + +总的来说，除了对待[`NaN`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN)的方式，[`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is)唯一让人感兴趣的，是当你需要一些元编程方案时，它对待 0 的特殊方式，特别是关于属性描述器，即你的工作需要去镜像[`Object.defineProperty`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)的一些特性时。如果你的工作不需要这些，那你应该避免使用[`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is)，使用[`===`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)来代替。即使你需要比较两个[`NaN`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN)使其结果为`true`，总的来说编写使用[`NaN`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN) 检查的特例函数 (用旧版本 ECMAScript 的[`isNaN 方法`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isNaN)) 也会比想出一些计算方法让[`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is)不影响不同符号的 0 的比较更容易些。 + +这里是一个会区别对待-0 和 +0 的内置方法和操作符不完全列表： + +- [`- (一元负)`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29) + - : 显而易见，对` 0 一元负操作得到``-0 `。但表达式的抽象化可能在你没有意识到得情况下导致-0 延续传播。例如当考虑下例时：`js let stoppingForce = obj.mass * -obj.velocity `如果`obj.velocity`是`0` (或计算结果为`0`), `一个-0`就在上处产生并被赋值为`stoppingForce 的值`. +- [`Math.atan2`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2), + [`Math.ceil`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil), + [`Math.pow`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/pow), + [`Math.round`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round) + - : 即使传入的参数中没有-0，这些方法的返回值都有可能是-0。例如当用 [`Math.pow`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/pow)计算`-Infinity`的任何负奇指数的幂都会得到`-0`。详情请参见这些方法各自的文档。 +- [`Math.floor`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), + [`Math.max`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/max), + [`Math.min`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/min), + [`Math.sin`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/sin), + [`Math.sqrt`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt), + [`Math.tan`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/tan) + - : 当传入参数中有-0 时，这些方法也可能返回-0。例如， `Math.min(-0, +0)` 得出 `-0`。详情请参见这些方法各自的文档。 +- [`~`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators), + [`<<`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators), + [`>>`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) + - : 这些操作符内部都使用了 ToInt32 算法。因为内部 32 位整数类型只有一个 0（没有符号区别），-0 的符号在反操作后并不会保留下来。例如`Object.is(~~(-0), -0)`和`Object.is(-0 << 2 >> 2, -0)` `都会得到 false`. + +在未考虑 0 的符号的情况下依赖于[`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is)`是危险的。当然，如果本意就是区分-0 和 +0 的话，`[`Object.is`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is)`能按照期望完成工作。` + +## 参考 + +- [JS 比较表](http://dorey.github.io/JavaScript-Equality-Table/) diff --git a/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md b/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md index 0745bee3cd7b69..91bca7b1b9152d 100644 --- a/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md +++ b/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md @@ -235,7 +235,7 @@ throw true; // Boolean type throw {toString: function() { return "I'm an object!"; } }; ``` -> **备注：**你可以在抛出异常时声明一个对象。那你就可以在 catch 块中查询到对象的属性。 +> **备注：** 你可以在抛出异常时声明一个对象。那你就可以在 catch 块中查询到对象的属性。 ```js // Create an object type UserException diff --git a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md index f12ff84b9935e8..68abf6d374a923 100644 --- a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md +++ b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md @@ -8,135 +8,77 @@ tags: - 表达式 translation_of: Web/JavaScript/Guide/Expressions_and_Operators --- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
- -

本章描述了 JavaScript 的表达式和运算符，包括了赋值，比较，算数，位运算，逻辑，字符串，三元等等。

- -

一个完整详细的运算符列表和表达式可以参见 reference.

- -

运算符

- -

JavaScript 拥有如下类型的运算符。本节描述了运算符和运算符的优先级。

- - - -

JavaScript 拥有二元和一元运算符， 和一个特殊的三元运算符（条件运算符）。一个二元运算符需要两个操作数，分别在运算符的前面和后面：

- -
操作数 1 运算符 操作数 2
-
- -

例如，3+4 或 x*y。

- -

一个一元运算符需要一个操作数，在运算符前面或后面：

- -
运算符 操作数
- -

或

- -
操作数 运算符
- -

例如，x++ 或 ++x。

- -

赋值运算符

- -

一个 赋值运算符 (assignment operator) 将它右边操作数的值赋给它左边的操作数。最简单的赋值运算符是等于（=），它将右边的操作数值赋给左边的操作数。那么 x = y 就是将 y 的值赋给 x。

- -

还有一些复合赋值操作符，它们是下表列出的这些操作的缩写：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
复合赋值运算符
名字简写的操作符含义
赋值 (Assignment)x = yx = y
加法赋值 (Addition assignment)x += yx = x + y
减法赋值 (Subtraction assignment)x -= yx = x - y
乘法赋值 (Multiplication assignment)x *= yx = x * y
除法赋值 (Division assignment)x /= yx = x / y
求余赋值 (Remainder assignment)x %= yx = x % y
求幂赋值 (Exponentiation assignment)x **= yx = x ** y
左移位赋值 (Left shift assignment)x <<= yx = x << y
右移位赋值 (Right shift assignment)x >>= yx = x >> y
无符号右移位赋值 (Unsigned right shift assignment)x >>>= yx = x >>> y
按位与赋值 (Bitwise AND assignment)x &= yx = x & y
按位异或赋值 (Bitwise XOR assignment)x ^= yx = x ^ y
按位或赋值 (Bitwise OR assignment)x |= yx = x | y
- -

解构

- -

对于更复杂的赋值，解构赋值语法是一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式。

- -
var foo = ["one", "two", "three"];
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
+
+本章描述了 JavaScript 的表达式和运算符，包括了赋值，比较，算数，位运算，逻辑，字符串，三元等等。
+
+一个完整详细的运算符列表和表达式可以参见 [reference](/zh-CN/docs/Web/JavaScript/Reference/Operators).
+
+## 运算符
+
+JavaScript 拥有如下类型的运算符。本节描述了运算符和运算符的优先级。
+
+- [赋值运算符（Assignment operators）](#赋值运算符)
+- [比较运算符（Comparison operators）](#比较运算符)
+- [算数运算符（Arithmetic operators）](#算术运算符)
+- [位运算符（Bitwise operators）](#位运算符)
+- [逻辑运算符（Logical operators）](#逻辑运算符)
+- [字符串运算符（String operators）](#字符串运算符)
+- [条件（三元）运算符（Conditional operator）](#conditional_operator)
+- [逗号运算符（Comma operator）](#comma_operator)
+- [一元运算符（Unary operators）](#delete)
+- [关系运算符（Relational operator）](#关系运算符)
+
+JavaScript 拥有二元和一元运算符， 和一个特殊的三元运算符（条件运算符）。一个二元运算符需要两个操作数，分别在运算符的前面和后面：
+
+```plain
+操作数 1 运算符 操作数 2
+```
+
+例如，`3+4` 或 `x*y`。
+
+一个一元运算符需要一个操作数，在运算符前面或后面：
+
+```plain
+运算符 操作数
+```
+
+或
+
+```plain
+操作数 运算符
+```
+
+例如，`x++` 或 `++x`。
+
+### 赋值运算符
+
+一个 [赋值运算符 (assignment operator)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators) 将它右边操作数的值赋给它左边的操作数。最简单的赋值运算符是等于（`=`），它将右边的操作数值赋给左边的操作数。那么 `x = y` 就是将 y 的值赋给 x。
+
+还有一些复合赋值操作符，它们是下表列出的这些操作的缩写：
+
+| 名字                                                                                                                                                      | 简写的操作符 | 含义          |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------- |
+| [赋值 (Assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment)                                                       | `x = y`      | `x = y`       |
+| [加法赋值 (Addition assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment)                                 | `x += y`     | `x = x + y`   |
+| [减法赋值 (Subtraction assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment)                           | `x -= y`     | `x = x - y`   |
+| [乘法赋值 (Multiplication assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment)                     | `x *= y`     | `x = x * y`   |
+| [除法赋值 (Division assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Division_assignment)                                 | `x /= y`     | `x = x / y`   |
+| [求余赋值 (Remainder assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment)                               | `x %= y`     | `x = x % y`   |
+| [求幂赋值 (Exponentiation assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment)                     | `x **= y`    | `x = x ** y`  |
+| [左移位赋值 (Left shift assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Left_shift_assignment)                           | `x <<= y`    | `x = x << y`  |
+| [右移位赋值 (Right shift assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Right_shift_assignment)                         | `x >>= y`    | `x = x >> y`  |
+| [无符号右移位赋值 (Unsigned right shift assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment) | `x >>>= y`   | `x = x >>> y` |
+| [按位与赋值 (Bitwise AND assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment)                         | `x &= y`     | `x = x & y`   |
+| [按位异或赋值 (Bitwise XOR assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_XOR_assignment)                       | `x ^= y`     | `x = x ^ y`   |
+| [按位或赋值 (Bitwise OR assignment)](/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment)                           | `x \|= y`    | `x = x \| y`  |
+
+#### 解构
+
+对于更复杂的赋值，[解构赋值](/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)语法是一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式。
+
+```js
+var foo = ["one", "two", "three"];
 
 // 不使用解构
 var one   = foo[0];
@@ -144,470 +86,239 @@ var two   = foo[1];
 var three = foo[2];
 
 // 使用解构
-var [one, two, three] = foo;
- -

比较运算符

- -

比较运算符比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字，字符串，逻辑，对象值。字符串比较是基于标准的字典顺序，使用 Unicode 值。在多数情况下，如果两个操作数不是相同的类型， JavaScript 会尝试转换它们为恰当的类型来比较。这种行为通常发生在数字作为操作数的比较。类型转换的例外是使用 === 和 !== 操作符，它们会执行严格的相等和不相等比较。这些运算符不会在检查相等之前转换操作数的类型。下面的表格描述了该示例代码中的各比较运算符

- -
var var1 = 3;
-var var2 = 4;
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
比较运算符
运算符描述返回 true 的示例
等于 Equal (==) -

如果两边操作数相等时返回 true。

- 		3 == var1 -

"3" == var1

- 3 == '3'
不等于 Not equal (!=)如果两边操作数不相等时返回 truevar1 != 4
- var2 != "3"
全等 Strict equal (===)两边操作数相等且类型相同时返回 true。 参见 {{jsxref("Object.is")}} and sameness in JS.3 === var1
不全等 Strict not equal (!==)两边操作数不相等或类型不同时返回 true。var1 !== "3"
- 3 !== '3'
大于 Greater than (>)左边的操作数大于右边的操作数返回 truevar2 > var1
- "12" > 2
大于等于 Greater than or equal (>=)左边的操作数大于或等于右边的操作数返回 truevar2 >= var1
- var1 >= 3
小于 Less than (<)左边的操作数小于右边的操作数返回 truevar1 < var2
- "2" < 12
小于等于 Less than or equal (<=)左边的操作数小于或等于右边的操作数返回 truevar1 <= var2
- var2 <= 5
- -
-

备注：（=>）不是运算符，而是箭头函数的标记符号 。

-
- -

算术运算符

- -

算术运算符使用数值 (字面量或者变量) 作为操作数并返回一个数值。标准的算术运算符就是加减乘除 (+ - * /)。当操作数是浮点数时，这些运算符表现得跟它们在大多数编程语言中一样（特殊要注意的是，除零会产生{{jsxref("Infinity")}}）。例如：

- -
1 / 2;  // 0.5
+var [one, two, three] = foo;
+```
+
+### 比较运算符
+
+[比较运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字，字符串，逻辑，对象值。字符串比较是基于标准的字典顺序，使用 Unicode 值。在多数情况下，如果两个操作数不是相同的类型， JavaScript 会尝试转换它们为恰当的类型来比较。这种行为通常发生在数字作为操作数的比较。类型转换的例外是使用 `===` 和 `!==` 操作符，它们会执行严格的相等和不相等比较。这些运算符不会在检查相等之前转换操作数的类型。下面的表格描述了该示例代码中的各比较运算符
+
+```js
+var var1 = 3;
+var var2 = 4;
+```
+
+| 运算符                                                                                                                                      | 描述                                                                                                                                                            | 返回 true 的示例                     |
+| ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| [等于 Equal](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality) (`==`)                                           | 如果两边操作数相等时返回 true。                                                                                                                                 | ` 3 == var1``"3" == var1``3 == '3' ` |
+| [不等于 Not equal](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality) (`!=`)                                   | 如果两边操作数不相等时返回 true                                                                                                                                 | `var1 != 4 var2 != "3"`              |
+| [全等 Strict equal](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity) (`===`)                                   | 两边操作数相等且类型相同时返回 true。 参见 {{jsxref("Object.is")}} and [sameness in JS](/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness). | `3 === var1`                         |
+| [不全等 Strict not equal](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity) (`!==`)                          | 两边操作数不相等或类型不同时返回 true。                                                                                                                         | `var1 !== "3" 3 !== '3'`             |
+| [大于 Greater than](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator) (`>`)                        | 左边的操作数大于右边的操作数返回 true                                                                                                                           | `var2 > var1 "12" > 2`               |
+| [大于等于 Greater than or equal](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator) (`>=`) | 左边的操作数大于或等于右边的操作数返回 true                                                                                                                     | `var2 >= var1 var1 >= 3`             |
+| [小于 Less than](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator) (`<`)                              | 左边的操作数小于右边的操作数返回 true                                                                                                                           | `var1 < var2 "2" < 12`               |
+| [小于等于 Less than or equal](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator) (`<=`)       | 左边的操作数小于或等于右边的操作数返回 true                                                                                                                     | `var1 <= var2 var2 <= 5`             |
+
+> **备注：** （**=>**）不是运算符，而是[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)的标记符号 。
+
+### 算术运算符
+
+算术运算符使用数值 (字面量或者变量) 作为操作数并返回一个数值。标准的算术运算符就是加减乘除 (+ - \* /)。当操作数是浮点数时，这些运算符表现得跟它们在大多数编程语言中一样（特殊要注意的是，除零会产生{{jsxref("Infinity")}}）。例如：
+
+```js
+1 / 2;  // 0.5
 1 / 2 == 1.0 / 2.0; // true
-
- -

除了标准的算术运算符（+， - ，* /），JavaScript 还提供了下表中的算术运算符。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
表 3.3 算术运算符
OperatorDescriptionExample
求余 (%)二元运算符。返回相除之后的余数。12 % 5 返回 2。
自增 (++)一元运算符。将操作数的值加一. 如果放在操作数前面 (++x), 则返回加一后的值; 如果放在操作数后面 (x++), 则返回操作数原值，然后再将操作数加一。 -

var x=3;

- -

console.log(++x); //4

- -

console.log(x); //4

- -

var y=3;

- -

console.log(y++); //3

- -

console.log(y); //4

-
自减 (--)一元运算符。将操作数的值减一. 前后缀两种用法的返回值类似自增运算符。 -

var x=3; console.log(--x); //输入 2,x=2

- -

var y=3;console.log(y--);//输出 3,x=2;

-
一元负值符 (-)一元运算符，返回操作数的负值。 -

var x=3; console.log(-x); //输入-3

-
-

一元正值符 (+)

- 		一元运算符，如果操作数在之前不是 number，试图将其转换为 number -

console.log( +'3' ); // 3

- -

console.log( '3' ); // '3'

- -

console.log(+true); // 1

-
指数运算符 (**)计算 base(底数) 的 exponent(指数) 次方, 表示为base^exponent -

2 ** 3 returns 8.
- 10 ** -1 returns 0.1.

-
- -

位运算符

- -

位运算符将它的操作数视为 32 位元的二进制串（0 和 1 组成）而非十进制八进制或十六进制数。例如：十进制数字 9 用二进制表示为 1001，位运算符就是在这个二进制表示上执行运算，但是返回结果是标准的 JavaScript 数值。

- -

下表总结了 JavaScript 的位运算符。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
位运算符
OperatorUsageDescription
按位与 ANDa & b -

在 a,b 的位表示中，每一个对应的位都为 1 则返回 1， 否则返回 0.

-
按位或 ORa | b在 a,b 的位表示中，每一个对应的位，只要有一个为 1 则返回 1， 否则返回 0.
按位异或 XORa ^ b在 a,b 的位表示中，每一个对应的位，两个不相同则返回 1，相同则返回 0.
按位非 NOT~ a反转被操作数的位。
左移 shifta << b将 a 的二进制串向左移动 b 位，右边移入 0.
算术右移a >> b -

把 a 的二进制表示向右移动 b 位，丢弃被移出的所有位。

- -

(译注：算术右移左边空出的位是根据最高位是 0 和 1 来进行填充的)

-
-

无符号右移

- -

(左边空出位用 0 填充)

- 		a >>> b把 a 的二进制表示向右移动 b 位，丢弃被移出的所有位，并把左边空出的位都填充为 0
- -

位逻辑运算符

- -

概念上来讲，位逻辑运算符工作流程如下：

- -
    -
  • 操作数被转换为 32bit 整數，以位序列（0 和 1 组成）表示。若超過 32bits，則取低位 32bit，如下所示：
    • -
- -
-  Before: 11100110111110100000000000000110000000000001
-  After:              10100000000000000110000000000001
-
- -
    -
  • 第一个操作数的每一位都与第二个操作数的对应位组对：第一位对应第一位，第二位对应第二位，以此类推。
    • -
  • 运算符被应用到每一对"位"上，最终的运算结果由每一对“位”的运算结果组合起来。
    • -
- -

例如，十进制数 9 的二进制表示是 1001，十进制数 15 的二进制表示是 1111.因此，当位运算符应用到这两个值时，结果如下：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
位运算符范例
表达式结果二进制描述
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
- -

注意位运算符“非”将所有的 32 位取反，而值的最高位 (最左边的一位) 为 1 则表示负数 (2-补码表示法)。

- -

移位运算符

- -

移位运算符带两个操作数：第一个是待移位的数，第二个是指定第一个数要被移多少位的数。移位的方向由运算符来控制。

- -

移位运算符把操作数转为 32bit 整数，然后得出一个与待移位数相同种类的值。

- -

移位运算符列表如下。

- -

移位运算符

- - - - - - - - - - - - - - - - - - - - - - - - - - -
运算符描述范例
<<
- (左移位)		将第一个操作数向左移动指定数量的位。左边移出位被抛弃. 左边移出的几位被丢弃。右边多出的空位由 0 补齐9<<2 产生 36，因为 1001 移位 2 比特向左变为 100100，它是 36。
>>
- (带符号右移)		将第一个操作数向右移动指定数量的位. 右边移出位被抛弃。左边多出的空位由原值的最左边数字补齐。9>>2 产生 2，因为 1001 移位 2 位向右变为 10，其是 2。同样，-9>>2 产生-3，由于符号被保留。
>>>
- (补零右移)		将第一个操作数向右移动指定数量的位. 右边移出位被抛弃。左边多出的空位由 0 补齐。19>>>2产生 4，因为 10011 移位 2 位向右变为 100，它是 4。对非负数值，补零右移和带符号右移产生相同结果。
- -

逻辑运算符

- -

逻辑运算符常用于布尔（逻辑）值之间; 当操作数都是布尔值时，返回值也是布尔值。 不过实际上&&和||返回的是一个特定的操作数的值，所以当它用于非布尔值的时候，返回值就可能是非布尔值。 逻辑运算符的描述如下。

- -

逻辑运算符

- - - - - - - - - - - - - - - - - - - - - - - - - - -
运算符范例描述
逻辑与 (&&)expr1 && expr2(逻辑与) 如果 expr1 能被转换为 false，那么返回 expr1；否则，返回expr2。因此，&&用于布尔值时，当操作数都为 true 时返回 true；否则返回 false.
逻辑或 (||)expr1 || expr2(逻辑或) 如果 expr1 能被转换为 true，那么返回 expr1；否则，返回expr2。因此，|| 用于布尔值时，当任何一个操作数为 true 则返回 true；如果操作数都是 false 则返回 false。
逻辑非 (!)!expr(逻辑非) 如果操作数能够转换为 true 则返回 false；否则返回 true。
- -

能被转换为false的值有null, 0, NaN, 空字符串 ("") 和undefined。（译者注：也可以称作”falsy“）

- -

下面是&&（逻辑"与"）操作符的示例。

- -
var a1 =  true && true;     // t && t returns true
-var a2 =  true && false;    // t && f returns false
-var a3 = false && true;     // f && t returns false
-var a4 = false && (3 == 4); // f && f returns false
-var a5 = "Cat" && "Dog";    // t && t returns Dog
-var a6 = false && "Cat";    // f && t returns false
-var a7 = "Cat" && false;    // t && f returns false
-
- -

下面是 ||（逻辑"或"）操作符的示例。

- -
var o1 =  true || true;     // t || t returns true
+```
+
+除了标准的算术运算符（+， - ，\* /），JavaScript 还提供了下表中的算术运算符。
+
+| Operator          | Description                                                                                                                                    | Example                                                                                                        |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| 求余 (`%`)        | 二元运算符。返回相除之后的余数。                                                                                                               | 12 % 5 返回 2。                                                                                                |
+| 自增 (`++`)       | 一元运算符。将操作数的值加一. 如果放在操作数前面 (`++x`), 则返回加一后的值; 如果放在操作数后面 (`x++`), 则返回操作数原值，然后再将操作数加一。 | ` var x=3;``console.log(++x); //4``console.log(x); //4``var y=3;``console.log(y++); //3``console.log(y); //4 ` |
+| 自减 (`--`)       | 一元运算符。将操作数的值减一. 前后缀两种用法的返回值类似自增运算符。                                                                           | var x=3; console.log(--x); //输入 2,x=2var y=3;console.log(y--);//输出 3,x=2;                                  |
+| 一元负值符 (`-`)  | 一元运算符，返回操作数的负值。                                                                                                                 | var x=3; console.log(-x); //输入-3                                                                             |
+| 一元正值符 (+)    | 一元运算符，如果操作数在之前不是 number，试图将其转换为 number                                                                                 | ` console.log( +'3' ); // 3``console.log( '3' ); // '3' `console.log(+true); // 1                              |
+| 指数运算符 (\*\*) | 计算 `base(底数)` 的 `exponent(`指数`) 次方`, 表示为`base^exponent`                                                                            | `2 ** 3` returns `8`. `10 ** -1` returns `0.1`.                                                                |
+|                   |                                                                                                                                                |                                                                                                                |
+
+### 位运算符
+
+位运算符将它的操作数视为 32 位元的二进制串（0 和 1 组成）而非十进制八进制或十六进制数。例如：十进制数字 9 用二进制表示为 1001，位运算符就是在这个二进制表示上执行运算，但是返回结果是标准的 JavaScript 数值。
+
+下表总结了 JavaScript 的位运算符。
+
+| Operator                                                                                     | Usage     | Description                                                                                                        |
+| -------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
+| 按位与[ AND](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND)   | `a & b`   | 在 a,b 的位表示中，每一个对应的位都为 1 则返回 1， 否则返回 0.                                                     |
+| 按位或[ OR](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR)     | `a \| b`  | 在 a,b 的位表示中，每一个对应的位，只要有一个为 1 则返回 1， 否则返回 0.                                           |
+| 按位异或[ XOR](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR) | `a ^ b`   | 在 a,b 的位表示中，每一个对应的位，两个不相同则返回 1，相同则返回 0.                                               |
+| 按位非[ NOT](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT)   | `~ a`     | 反转被操作数的位。                                                                                                 |
+| 左移[ shift](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift)    | `a << b`  | 将 a 的二进制串向左移动 b 位，右边移入 0.                                                                          |
+| 算术右移                                                                                     | `a >> b`  | 把 a 的二进制表示向右移动 b 位，丢弃被移出的所有位。(译注：算术右移左边空出的位是根据最高位是 0 和 1 来进行填充的) |
+| 无符号右移(左边空出位用 0 填充)                                                              | `a >>> b` | 把 a 的二进制表示向右移动 b 位，丢弃被移出的所有位，并把左边空出的位都填充为 0                                     |
+
+#### 位逻辑运算符
+
+概念上来讲，位逻辑运算符工作流程如下：
+
+- 操作数被转换为 32bit 整數，以位序列（0 和 1 组成）表示。若超過 32bits，則取低位 32bit，如下所示：
+
+```plain
+  Before: 11100110111110100000000000000110000000000001
+  After:              10100000000000000110000000000001
+```
+
+- 第一个操作数的每一位都与第二个操作数的对应位组对：第一位对应第一位，第二位对应第二位，以此类推。
+- 运算符被应用到每一对"位"上，最终的运算结果由每一对“位”的运算结果组合起来。
+
+例如，十进制数 9 的二进制表示是 1001，十进制数 15 的二进制表示是 1111.因此，当位运算符应用到这两个值时，结果如下：
+
+| 表达式    | 结果  | 二进制描述                                                        |
+| --------- | ----- | ----------------------------------------------------------------- |
+| `15 & 9`  | `9`   | `1111 & 1001 = 1001`                                              |
+| `15 \| 9` | `15`  | `1111 \| 1001 = 1111`                                             |
+| `15 ^ 9`  | `6`   | `1111 ^ 1001 = 0110`                                              |
+| `~15`     | `-16` | ` ~``00000000...`` 00001111 = ``1111``1111``...``11110000 `       |
+| `~9`      | `-10` | ` ~``00000000``...``0000`` 1001 = ``1111``1111``...``1111``0110 ` |
+
+注意位运算符“非”将所有的 32 位取反，而值的最高位 (最左边的一位) 为 1 则表示负数 (2-补码表示法)。
+
+#### 移位运算符
+
+移位运算符带两个操作数：第一个是待移位的数，第二个是指定第一个数要被移多少位的数。移位的方向由运算符来控制。
+
+移位运算符把操作数转为 32bit 整数，然后得出一个与待移位数相同种类的值。
+
+移位运算符列表如下。
+
+**移位运算符**
+
+| 运算符            | 描述                                                                                                | 范例                                                                                                     |
+| ----------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `<<` (左移位)     | 将第一个操作数向左移动指定数量的位。左边移出位被抛弃. 左边移出的几位被丢弃。右边多出的空位由 0 补齐 | `9<<2 产生 36，因为 1001 移位 2 比特向左变为 100100，它是 36。`                                          |
+| `>>` (带符号右移) | 将第一个操作数向右移动指定数量的位. 右边移出位被抛弃。左边多出的空位由原值的最左边数字补齐。        | `9>>2 产生 2，因为 1001 移位 2 位向右变为 10，其是 2。同样，-9>>2 产生-3，由于符号被保留。`              |
+| `>>>` (补零右移)  | 将第一个操作数向右移动指定数量的位. 右边移出位被抛弃。左边多出的空位由 0 补齐。                     | `19>>>2`产生 4，因为 10011 移位 2 位向右变为 100，它是 4。对非负数值，补零右移和带符号右移产生相同结果。 |
+
+### 逻辑运算符
+
+逻辑运算符常用于布尔（逻辑）值之间; 当操作数都是布尔值时，返回值也是布尔值。 不过实际上`&&`和`||`返回的是一个特定的操作数的值，所以当它用于非布尔值的时候，返回值就可能是非布尔值。 逻辑运算符的描述如下。
+
+**逻辑运算符**
+
+| 运算符                                                                                         | 范例               | 描述                                                                                                                                                                      |
+| ---------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [逻辑与](/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND)` (&&`)  | `expr1 && expr2`   | (逻辑与) 如果 expr1 能被转换为 false，那么返回 expr1；否则，返回`expr2`。因此`，&&`用于布尔值时，当操作数都为 true 时返回 true；否则返回 false.                           |
+| [逻辑或 ](/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR)(`\|\|`) | `expr1 \|\| expr2` | (逻辑或) 如果 expr1 能被转换为 true，那么返回 expr1；否则，返回`expr2`。因此，\|\| 用于布尔值时，当任何一个操作数为 true 则返回 true；如果操作数都是 false 则返回 false。 |
+| [逻辑非](/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT)` (!)`   | `!expr`            | (逻辑非) 如果操作数能够转换为 true 则返回 false；否则返回 true。                                                                                                          |
+
+能被转换为`false`的值有`null`, `0`, `NaN`, 空字符串 ("") 和`undefined`。（译者注：也可以称作”falsy“）
+
+下面是&&（逻辑"与"）操作符的示例。
+
+```js
+var a1 =  true && true;     // t && t returns true
+var a2 =  true && false;    // t && f returns false
+var a3 = false && true;     // f && t returns false
+var a4 = false && (3 == 4); // f && f returns false
+var a5 = "Cat" && "Dog";    // t && t returns Dog
+var a6 = false && "Cat";    // f && t returns false
+var a7 = "Cat" && false;    // t && f returns false
+```
+
+下面是 ||（逻辑"或"）操作符的示例。
+
+```js
+var o1 =  true || true;     // t || t returns true
 var o2 = false || true;     // f || t returns true
 var o3 =  true || false;    // t || f returns true
 var o4 = false || (3 == 4); // f || f returns false
 var o5 = "Cat" || "Dog";    // t || t returns Cat
 var o6 = false || "Cat";    // f || t returns Cat
 var o7 = "Cat" || false;    // t || f returns Cat
-
+``` -

下面是！（逻辑"非"）操作符的示例。

+下面是！（逻辑"非"）操作符的示例。 -
var n1 = !true;  // !t returns false
+```js
+var n1 = !true;  // !t returns false
 var n2 = !false; // !f returns true
 var n3 = !"Cat"; // !t returns false
-
+``` -

短路求值

+#### 短路求值 -

作为逻辑表达式进行求值是从左到右，它们是为可能的“短路”的出现而使用以下规则进行测试：

+作为逻辑表达式进行求值是从左到右，它们是为可能的“短路”的出现而使用以下规则进行测试： -
    -
  • false && anything // 被短路求值为 false
    • -
  • true || anything // 被短路求值为 true
    • -
+- `false` && _anything_ // 被短路求值为 false +- `true` || _anything_ // 被短路求值为 true -

逻辑的规则，保证这些评估是总是正确的。请注意，上述表达式的anything部分不会被求值，所以这样做不会产生任何副作用。

+逻辑的规则，保证这些评估是总是正确的。请注意，上述表达式的`anything`部分不会被求值，所以这样做不会产生任何副作用。 -

字符串运算符

+### 字符串运算符 -

除了比较操作符，它可以在字符串值中使用，连接操作符（+）连接两个字符串值相连接，返回另一个字符串，它是两个操作数串的结合。

+除了比较操作符，它可以在字符串值中使用，连接操作符（+）连接两个字符串值相连接，返回另一个字符串，它是两个操作数串的结合。 -

例如，

+例如， -
console.log("my " + "string"); // console logs the string "my string".
+```js +console.log("my " + "string"); // console logs the string "my string". +``` -

简写操作符 += 也可以用来拼接字符串，例如：

+简写操作符 `+=` 也可以用来拼接字符串，例如： -
var myString = "alpha";
+```js
+var myString = "alpha";
 
-myString += "bet"; // 返回 "alphabet"  
-
+myString += "bet"; // 返回 "alphabet" +``` -

条件（三元）运算符

+### 条件（三元）运算符 -

条件运算符是 JavaScript 中唯一需要三个操作数的运算符。运算的结果根据给定条件在两个值中取其一。语法为：

+[条件运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)是 JavaScript 中唯一需要三个操作数的运算符。运算的结果根据给定条件在两个值中取其一。语法为： -
条件 ? 值 1 : 值 2
-
+```plain +条件 ? 值 1 : 值 2 +``` -

如果条件为真，则结果取值 1。否则为值 2。你能够在任何允许使用标准运算符的地方使用条件运算符。

+如果`条件`为真，则结果取`值 1`。否则为`值 2`。你能够在任何允许使用标准运算符的地方使用条件运算符。 -

例如，

+例如， -
var status = (age >= 18) ? "adult" : "minor";
-
+```js +var status = (age >= 18) ? "adult" : "minor"; +``` -

当 age 大于等于 18 的时候，将“adult”赋值给 status；否则将“minor”赋值给 status。

+当 `age` 大于等于 18 的时候，将“adult”赋值给` status`；否则将“minor”赋值给 `status`。 -

逗号操作符

+### 逗号操作符 -

逗号操作符（,）对两个操作数进行求值并返回最终操作数的值。它常常用在 for 循环中，在每次循环时对多个变量进行更新。

+[逗号操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comma_Operator)（`,`）对两个操作数进行求值并返回最终操作数的值。它常常用在 `for` 循环中，在每次循环时对多个变量进行更新。 -

例如，假如 a 是一个二维数组，每个维度各有 10 个元素，以下代码利用逗号操作符来同时改变两个变量的值。这段代码的功能是打印出该二维数组的对角线元素的值：

+例如，假如 `a` 是一个二维数组，每个维度各有 10 个元素，以下代码利用逗号操作符来同时改变两个变量的值。这段代码的功能是打印出该二维数组的对角线元素的值： -
var x = [0,1,2,3,4,5,6,7,8,9]
+```js
+var x = [0,1,2,3,4,5,6,7,8,9]
 var a = [x, x, x, x, x];
 
-for (var i = 0, j = 9; i <= j; i++, j--)
-  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
+for (var i = 0, j = 9; i <= j; i++, j--) + console.log('a[' + i + '][' + j + ']= ' + a[i][j]); +``` -

一元操作符

+### 一元操作符 -

一元操作符仅对应一个操作数。

+一元操作符仅对应一个操作数。 -

delete

+#### `delete` -

delete操作符，删除一个对象的属性或者一个数组中某一个键值。语法如下：

+[`delete`](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)操作符，删除一个对象的属性或者一个数组中某一个键值。语法如下： -
delete objectName.property;
+```js
+delete objectName.property;
 delete objectName[index];
 delete property; // legal only within a with statement
-
+``` -

objectName是一个对象名，property 是一个已经存在的属性，index是数组中的一个已经存在的键值的索引值。

+`objectName`是一个对象名，`property` 是一个已经存在的属性，`index`是数组中的一个已经存在的键值的索引值。 -

第三行的形式只在with声明的状态下是合法的， 从对象中删除一个属性。

+第三行的形式只在[`with`](/zh-CN/docs/Web/JavaScript/Reference/Statements/with)声明的状态下是合法的， 从对象中删除一个属性。 -

你能使用 delete 删除各种各样的隐式声明， 但是被var声明的除外。

+你能使用 `delete` 删除各种各样的隐式声明， 但是被`var`声明的除外。 -

如果 delete 操作成功，属性或者元素会变成 undefined。如果 delete可行会返回true，如果不成功返回false。

+如果 `delete` 操作成功，属性或者元素会变成 `undefined`。如果 `delete`可行会返回`true`，如果不成功返回`false`。 -
x = 42;
+```js
+x = 42;
 var y = 43;
 myobj = new Number();
 myobj.h = 4;    // create property h
@@ -616,130 +327,147 @@ delete y;       // returns false (cannot delete if declared with var)
 delete Math.PI; // returns false (cannot delete predefined properties)
 delete myobj.h; // returns true (can delete user-defined properties)
 delete myobj;   // returns true (can delete if declared implicitly)
-
+``` -
删除数组元素
+##### 删除数组元素 -

删除数组中的元素时，数组的长度是不变的，例如删除a[3], a[4]，a[4]和 a[3] 仍然存在变成了undefined。

+删除数组中的元素时，数组的长度是不变的，例如删除`a[3]`, `a[4]`，` a[4]``和 a[3] ` 仍然存在变成了`undefined`。 -

delete 删除数组中的一个元素，这个元素就不在数组中了。例如，trees[3]被删除，trees[3] 仍然可寻址并返回undefined。

+`delete` 删除数组中的一个元素，这个元素就不在数组中了。例如，`trees[3]`被删除，`trees[3]` 仍然可寻址并返回`undefined`。 -
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+```js
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
 delete trees[3];
 if (3 in trees) {
   // 不会被执行
 }
-
+``` -

如果想让数组中存在一个元素但是是undefined值，使用undefined关键字而不是delete操作。如下： trees[3] 分配一个 undefined,但是这个数组元素仍然存在：

+如果想让数组中存在一个元素但是是`undefined`值，使用`undefined`关键字而不是`delete`操作。如下： `trees[3] 分配一个 undefined`,但是这个数组元素仍然存在： -
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+```js
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
 trees[3] = undefined;
 if (3 in trees) {
   // this gets executed（会被执行）
 }
-
+``` -

typeof

+#### `typeof` -

typeof 操作符 可通过下面 2 种方式使用：

+[typeof 操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) 可通过下面 2 种方式使用： -
typeof operand
+```js
+typeof operand
 typeof (operand)
-
+``` -

typeof 操作符返回一个表示 operand 类型的字符串值。operand 可为字符串、变量、关键词或对象，其类型将被返回。operand 两侧的括号为可选。

+typeof 操作符返回一个表示 operand 类型的字符串值。operand 可为字符串、变量、关键词或对象，其类型将被返回。operand 两侧的括号为可选。 -

假设你定义了如下的变量：

+假设你定义了如下的变量： -
var myFun = new Function("5 + 2");
+```js
+var myFun = new Function("5 + 2");
 var shape = "round";
 var size = 1;
 var today = new Date();
-
+``` -

typeof 操作符将会返回如下的结果：

+typeof 操作符将会返回如下的结果： -
typeof myFun;     // returns "function"
+```js
+typeof myFun;     // returns "function"
 typeof shape;     // returns "string"
 typeof size;      // returns "number"
 typeof today;     // returns "object"
 typeof dontExist; // returns "undefined"
-
+``` -

对于关键词 true 和 null， typeof 操作符将会返回如下结果：

+对于关键词 `true` 和 `null`， `typeof` 操作符将会返回如下结果： -
typeof true; // returns "boolean"
+```js
+typeof true; // returns "boolean"
 typeof null; // returns "object"
-
+``` -

对于一个数值或字符串， typeof 操作符将会返回如下结果：

+对于一个数值或字符串``， `typeof` 操作符将会返回如下结果： -
typeof 62;            // returns "number"
+```js
+typeof 62;            // returns "number"
 typeof 'Hello world'; // returns "string"
-
+``` -

对于属性值，typeof 操作符将会返回属性所包含值的类型：

+对于属性值，typeof 操作符将会返回属性所包含值的类型： -
typeof document.lastModified; // returns "string"
+```js
+typeof document.lastModified; // returns "string"
 typeof window.length;         // returns "number"
 typeof Math.LN2;              // returns "number"
-
+``` -

对于方法和函数，typeof 操作符将会返回如下结果：

+对于方法和函数，typeof 操作符将会返回如下结果： -
typeof blur;        // returns "function"
+```js
+typeof blur;        // returns "function"
 typeof eval;        // returns "function"
 typeof parseInt;    // returns "function"
 typeof shape.split; // returns "function"
-
+``` -

对于预定义的对象，typeof 操作符将会返回如下结果：

+对于预定义的对象，typeof 操作符将会返回如下结果： -
typeof Date;     // returns "function"
+```js
+typeof Date;     // returns "function"
 typeof Function; // returns "function"
 typeof Math;     // returns "object"
 typeof Option;   // returns "function"
 typeof String;   // returns "function"
-
+``` -

void

+#### `void` -

void 运算符运用方法如下：

+void 运算符运用方法如下： -
void (expression)
+```js
+void (expression)
 void expression
-
+``` -

void 运算符，表明一个运算没有返回值。expression 是 javaScript 表达式，括号中的表达式是一个可选项，当然使用该方式是一种好的形式。

+void 运算符，表明一个运算没有返回值。expression 是 javaScript 表达式，括号中的表达式是一个可选项，当然使用该方式是一种好的形式。 -

你可以使用 void 运算符指明一个超文本链接。该表达式是有效的，但是并不会在当前文档中进行加载。

+你可以使用 void 运算符指明一个超文本链接。该表达式是有效的，但是并不会在当前文档中进行加载。 -

如下创建了一个超链接文本，当用户单击该文本时，不会有任何效果。

+如下创建了一个超链接文本，当用户单击该文本时，不会有任何效果。 -
<a href="javascript:void(0)">Click here to do nothing</a>
+```html +Click here to do nothing +``` -

下面的代码创建了一个超链接，当用户单击它时，提交一个表单。

+下面的代码创建了一个超链接，当用户单击它时，提交一个表单。 -
<a href="javascript:void(document.form.submit())">
-Click here to submit</a>
+```html + +Click here to submit +``` -

关系运算符

+### 关系运算符 -

关系运算符对操作数进行比较，根据比较结果真或假，返回相应的布尔值。

+关系运算符对操作数进行比较，根据比较结果真或假，返回相应的布尔值。 -

in

+#### `in` -

in操作符，如果所指定的属性确实存在于所指定的对象中，则会返回true，语法如下：

+[`in`操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators/in)，如果所指定的**属性**确实存在于所指定的对象中，则会返回`true`，语法如下： -
propNameOrNumber in objectName
-
+```js +propNameOrNumber in objectName +``` -

在这里 propNameOrNumber可以是一个代表着属性名的字符串或者是一个代表着数组索引的数值表达式，而objectName则是一个对象名。

+在这里 `propNameOrNumber`可以是一个代表着属性名的字符串或者是一个代表着数组索引的数值表达式，而`objectName`则是一个对象名。 -

下面的例子是 in 操作的常见用法。

+下面的例子是 `in` 操作的常见用法。 -
// Arrays
+```js
+// Arrays
 var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
 0 in trees;        // returns true
 3 in trees;        // returns true
@@ -757,161 +485,109 @@ var myString = new String("coral");
 var mycar = {make: "Honda", model: "Accord", year: 1998};
 "make" in mycar;  // returns true
 "model" in mycar; // returns true
-
+``` -

instanceof

+#### `instanceof` -

如果所判别的对象确实是所指定的类型，则返回true。其语法如下：

+如果所判别的对象确实是所指定的类型，则返回`true`。其语法如下： -
objectName instanceof objectType
-
+```js +objectName instanceof objectType +``` -

objectName 是需要做判别的对象的名称，而objectType是假定的对象的类型，例如{{jsxref("Date")}}或 {{jsxref("Array")}}.

+`objectName` 是需要做判别的对象的名称，而`objectType`是假定的对象的类型，例如{{jsxref("Date")}}或 {{jsxref("Array")}}. -

当你需要确认一个对象在运行时的类型时，可使用instanceof. 例如，需要 catch 异常时，你可以针对抛出异常的类型，来做不同的异常处理。

+当你需要确认一个对象在运行时的类型时，可使用`instanceof`. 例如，需要 catch 异常时，你可以针对抛出异常的类型，来做不同的异常处理。 -

例如，下面的代码使用instanceof去判断 theDay是否是一个 Date 对象。因为 theDay是一个Date对象，所以 if中的代码会执行。

+例如，下面的代码使用`instanceof`去判断 `theDay`是否是一个 `Date` 对象。`因为 theDay`是一个`Date`对象，`所以 if`中的代码会执行。 -
var theDay = new Date(1995, 12, 17);
+```js
+var theDay = new Date(1995, 12, 17);
 if (theDay instanceof Date) {
   // statements to execute
 }
-
- -

运算符优先级

- -

运算符的优先级，用于确定一个表达式的计算顺序。在你不能确定优先级时，可以通过使用括号显式声明运算符的优先级。

- -

下表列出了描述符的优先级，从最高到最低。

- -

运算符优先级

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Operator typeIndividual operators
member. []
call / create instance() new
negation/increment! ~ - + ++ -- typeof void delete
multiply/divide* / %
addition/subtraction+ -
bitwise shift<< >> >>>
relational< <= > >= in instanceof
equality== != === !==
bitwise-and&
bitwise-xor^
bitwise-or|
logical-and&&
logical-or||
conditional?:
assignment= += -= *= /= %= <<= >>= >>>= &= ^= |=
comma,
- -

上表有一个更详细的版本，它包含了各操作符更详细的说明，可在 JavaScript 参考手册中找到。

- -

表达式

- -

表达式是一组代码的集合，它返回一个值。（译注：定义比较不好理解，看下面的举例就很好懂了。）

- -

每一个合法的表达式都能计算成某个值，但从概念上讲，有两种类型的表达式：有副作用的（比如赋值）和单纯计算求值的。

- -

表达式 x=7 是第一类型的一个例子。该表达式使用=运算符将值 7 赋予变量 x。这个表达式自己的值等于 7。

- -

代码 3 + 4 是第二个表达式类型的一个例子。该表达式使用 + 运算符把 3 和 4 加到一起但并没有把结果（7）赋值给一个变量。

- -

JavaScript 有以下表达式类型：

- -
    -
  • 算数：得出一个数字，例如 3.14159。（通常使用算数运算符）
    • -
  • 字符串：得出一个字符串，例如，"Fred" 或 "234"。（通常使用字符串运算符。）
    • -
  • 逻辑值：得出 true 或者 false。（经常涉及到逻辑运算符。）
    • -
  • 基本表达式: javascript 中基本的关键字和一般表达式。
    • -
  • 左值表达式：分配给左值。
    • -
- -

基本表达式

- -

this

- -

this关键字被用于指代当前的对象，通常，this指代的是方法中正在被调用的对象。用法如下：

- -
this["propertyName"]
+```
+
+### 运算符优先级
+
+运算符的优先级，用于确定一个表达式的计算顺序。在你不能确定优先级时，可以通过使用括号显式声明运算符的优先级。
+
+下表列出了描述符的优先级，从最高到最低。
+
+**运算符优先级**
+
+| Operator type          | Individual operators                      |
+| ---------------------- | ----------------------------------------- |
+| member                 | `. []`                                    |
+| call / create instance | `() new`                                  |
+| negation/increment     | `! ~ - + ++ -- typeof void delete`        |
+| multiply/divide        | `* / %`                                   |
+| addition/subtraction   | `+ -`                                     |
+| bitwise shift          | `<< >> >>>`                               |
+| relational             | `< <= > >= in instanceof`                 |
+| equality               | `== != === !==`                           |
+| bitwise-and            | `&`                                       |
+| bitwise-xor            | `^`                                       |
+| bitwise-or             | `\|`                                      |
+| logical-and            | `&&`                                      |
+| logical-or             | `\|\|`                                    |
+| conditional            | `?:`                                      |
+| assignment             | `= += -= *= /= %= <<= >>= >>>= &= ^= \|=` |
+| comma                  | `,`                                       |
+
+上表有一个更详细的版本，它包含了各操作符更详细的说明，可在 [JavaScript 参考手册](/zh-CN/docs/JavaScript/Reference/Operators/Operator_Precedence#Table)中找到。
+
+## 表达式
+
+表达式是一组代码的集合，它返回一个值。（译注：定义比较不好理解，看下面的举例就很好懂了。）
+
+每一个合法的表达式都能计算成某个值，但从概念上讲，有两种类型的表达式：有副作用的（比如赋值）和单纯计算求值的。
+
+表达式 x=7 是第一类型的一个例子。该表达式使用=运算符将值 7 赋予变量 x。这个表达式自己的值等于 7。
+
+代码 3 + 4 是第二个表达式类型的一个例子。该表达式使用 + 运算符把 3 和 4 加到一起但并没有把结果（7）赋值给一个变量。
+
+JavaScript 有以下表达式类型：
+
+- 算数：得出一个数字，例如 3.14159。（通常使用[算数运算符](#算术运算符)）
+- 字符串：得出一个字符串，例如，"Fred" 或 "234"。（通常使用[字符串运算符](#字符串运算符)。）
+- 逻辑值：得出 true 或者 false。（经常涉及到[逻辑运算符](#逻辑运算符)。）
+- 基本表达式: javascript 中基本的关键字和一般表达式。
+- 左值表达式：分配给左值。
+
+### 基本表达式
+
+#### `this`
+
+[`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this)关键字被用于指代当前的对象，通常，`this`指代的是方法中正在被调用的对象。用法如下：
+
+```js
+this["propertyName"]
 this.propertyName
-
+``` -

假设一个用于验证对象value属性的validate函数，传参有对象，最高值和最低值。

+假设一个用于验证对象`value`属性的`validate`函数，传参有对象，最高值和最低值。 -
function validate(obj, lowval, hival){
-  if ((obj.value < lowval) || (obj.value > hival))
+```js
+function validate(obj, lowval, hival){
+  if ((obj.value < lowval) || (obj.value > hival))
     console.log("Invalid Value!");
 }
-
+``` -

你可以在任何表单元素的onchange事件处理中调用validat函数，用this来指代当前的表单元素，用例如下：

+你可以在任何表单元素的`onchange`事件处理中调用`validat`函数，用`this`来指代当前的表单元素，用例如下： -
<p>Enter a number between 18 and 99:</p>
-<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">
-
+```html +

Enter a number between 18 and 99:

+ +``` -

分组操作符

+#### 分组操作符 -

分组操作符（）控制了表达式中计算的优先级。举例来说，你可以改变先乘除后加减的顺序，转而先计算加法。

+分组操作符（）控制了表达式中计算的优先级。举例来说，你可以改变先乘除后加减的顺序，转而先计算加法。 -
var a = 1;
+```js
+var a = 1;
 var b = 2;
 var c = 3;
 
@@ -924,58 +600,66 @@ a + (b * c)   // 7
 (a + b) * c   // 9
 
 // 这等价于
-a * c + b * c // 9
+a * c + b * c // 9 +``` -
数值推导
+##### 数值推导 -

Comprehensions 是一个带有实验性质的 JavaScript 特性，计划将在未来的 ECMAScript 版本中加入该特性。有两种类型的 comprehensions:

+Comprehensions 是一个带有实验性质的 JavaScript 特性，计划将在未来的 ECMAScript 版本中加入该特性。有两种类型的 comprehensions: -
-
{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
-
数列数值推导（非标准用法）
-
{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
-
生成器数值推导（译者注：生成器数值推导标准化可能不大，推荐使用 生成器函数）
-
+- {{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}} + - : 数列数值推导（非标准用法） +- {{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}} + - : 生成器数值推导（译者注：生成器数值推导标准化可能不大，推荐使用 [生成器函数](/zh-CN/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions)） -

Comprehensions 特性被许多编程语言所采用，该特性能够使你快速地通过一个已有的数组来创建出一个新的数组，比如：

+Comprehensions 特性被许多编程语言所采用，该特性能够使你快速地通过一个已有的数组来创建出一个新的数组，比如： -
[for (i of [ 1, 2, 3 ]) i*i ];
+```js
+[for (i of [ 1, 2, 3 ]) i*i ];
 // [ 1, 4, 9 ]
 
 var abc = [ "A", "B", "C" ];
 [for (letters of abc) letters.toLowerCase()];
-// [ "a", "b", "c" ]
+// [ "a", "b", "c" ] +``` -

左值表达式

+### 左值表达式 -

左值可以作为赋值的目标。

+左值可以作为赋值的目标。 -

new

+#### `new` -

你可以使用new operator 创建一个自定义类型或者是预置类型的对象实例。用法如下：

+你可以使用[`new` operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 创建一个自定义类型或者是`预置类型`的对象实例。用法如下： -
var objectName = new objectType([param1, param2, ..., paramN]);
-
+```js +var objectName = new objectType([param1, param2, ..., paramN]); +``` -

super

+super -

super 关键字可以用来调用一个对象父类的函数，它在用来调用一个类的父类的构造函数时非常有用，比如：

+[super ](/zh-CN/docs/Web/JavaScript/Reference/Operators/super)关键字可以用来调用一个对象父类的函数，它在用来调用一个[类](/zh-CN/docs/Web/JavaScript/Reference/Classes)的父类的构造函数时非常有用，比如： -
super([arguments]); // calls the parent constructor. super.functionOnParent([arguments]);
+```plain +super([arguments]); // calls the parent constructor. super.functionOnParent([arguments]); +``` -

扩展语句

+#### 扩展语句 -

扩展语句符允许一个表达式在原地展开， 当需要多个参数 (比如函数调用时) 或者多个值 (比如字面量数组) 。

+[扩展语句](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)符允许一个表达式在原地展开， 当需要多个参数 (比如函数调用时) 或者多个值 (比如字面量数组) 。 -

例如：现在你有一个数组，你想创建一个新数组，并将刚才那个作为它的一部分，用 array 的字面语法是不够的，你不得不写一些代码实现它，比如用些push, splice, concat 等等。但是用spread syntax 就没问题了：

+**例如：**现在你有一个数组，你想创建一个新数组，并将刚才那个作为它的一部分，用 array 的字面语法是不够的，你不得不写一些代码实现它，比如用些`push`, `splice`, `concat 等等。但是用`spread syntax 就没问题了： -
var parts = ['shoulder', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes'];
+```plain +var parts = ['shoulder', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +``` -

类似的，扩展语句也可以用在函数调用的时候：

+类似的，扩展语句也可以用在函数调用的时候： -
function f(x, y, z) { }
+```plain
+function f(x, y, z) { }
 var args = [0, 1, 2];
-f(...args);
+f(...args); +``` -
{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
+{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}} diff --git a/files/zh-cn/web/javascript/guide/functions/index.md b/files/zh-cn/web/javascript/guide/functions/index.md index d28aa15e411e10..72afd58f42dd10 100644 --- a/files/zh-cn/web/javascript/guide/functions/index.md +++ b/files/zh-cn/web/javascript/guide/functions/index.md @@ -143,7 +143,7 @@ function square(n) { return n*n } 函数域是指函数声明时的所在的地方，或者函数在顶层被声明时指整个程序。 -> **备注：**注意只有使用如上的语法形式（即 `function funcName(){}`）才可以。而下面的代码是无效的。就是说，函数提升仅适用于函数声明，而不适用于函数表达式。 +> **备注：** 只有使用如上的语法形式（即 `function funcName(){}`）才可以。而下面的代码是无效的。就是说，函数提升仅适用于函数声明，而不适用于函数表达式。 ```js example-bad console.log(square); // square is hoisted with an initial value undefined. @@ -465,7 +465,7 @@ var getCode = (function(){ getCode(); // Returns the secret code ``` -> **备注：**尽管有上述优点，使用闭包时仍然要小心避免一些陷阱。如果一个闭包的函数定义了一个和外部函数的某个变量名称相同的变量，那么这个闭包将无法引用外部函数的这个变量。 +> **备注：** 尽管有上述优点，使用闭包时仍然要小心避免一些陷阱。如果一个闭包的函数定义了一个和外部函数的某个变量名称相同的变量，那么这个闭包将无法引用外部函数的这个变量。 > > ```js > var createPet = function(name) { // Outer function defines a variable called "name" diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.md b/files/zh-cn/web/javascript/guide/grammar_and_types/index.md index bb2f319511636b..aed1ed9894a80e 100644 --- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.md +++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.md @@ -31,7 +31,7 @@ var Früh = "foobar"; 如果一条语句独占一行的话，那么分号是可以省略的。（译者注：并不建议这么做。）但如果一行中有多条语句，那么这些语句必须以分号分开。 -> **备注：**ECMAScript 规定了在语句的末尾自动插入分号（[ASI](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#自动分号补全)）。（如果想要了解更多信息，请参阅 JavaScript [词法语法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar) 。） +> **备注：** ECMAScript 规定了在语句的末尾自动插入分号（[ASI](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#自动分号补全)）。（如果想要了解更多信息，请参阅 JavaScript [词法语法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar) 。） 虽然不是必需的，但是在一条语句的末尾加上分号是一个很好的习惯。这个习惯可以大大减少代码中产生 bug 的可能性。 @@ -53,7 +53,7 @@ Javascript 源码从左往右被扫描并转换成一系列由 token 、控制 在代码执行过程中，注释将被自动跳过（不执行）。 -> **备注：**你可能会在一些 JavaScript 脚本中见到像这样`#!/usr/bin/env node`的第三种注释 +> **备注：** 你可能会在一些 JavaScript 脚本中见到像这样`#!/usr/bin/env node`的第三种注释 > > 这种注释我们称为**hashbang 注释 (hashbang comment)**，这种注释被用来指定执行 JaveScript 脚本的引擎的路径，查看这篇文章来了解更详细的信息：[Hashbang 注释](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#hashbang_注释) @@ -410,7 +410,7 @@ var fish = ["Lion", , "Angel"]; 如果你在元素列表的尾部添加了一个逗号，它将会被忽略。在下面的例子中，数组的长度是 3，并不存在 myList\[3] 这个元素（译注：这是指数组的第 4 个元素噢，作者是在帮大家复习数组元素的排序命名方法）。元素列表中其它所有的逗号都表示一个新元素（的开始）。 -> **备注：**尾部的逗号在早期版本的浏览器中会产生错误，因而编程时的最佳实践方式就是移除它们。 +> **备注：** 尾部的逗号在早期版本的浏览器中会产生错误，因而编程时的最佳实践方式就是移除它们。 (译注：而“现代”的浏览器似乎鼓励这种方式，这也很好解释原因。尾部逗号可以减少向数组的最后添加元素时，因为忘记为这最后一个元素加逗号 所造成的错误。) @@ -496,7 +496,7 @@ JavaScript 数字字面量包括多种基数的整数字面量和以 10 为基 对象字面值是封闭在花括号对 ({}) 中的一个对象的零个或多个"属性名 - 值"对的（元素）列表。 -> **警告：**你不能在一条语句的开头就使用对象字面值，这将导致错误或产生超出预料的行为， 因为此时左花括号（{）会被认为是一个语句块的起始符号。（译者：这 里需要对语句 statement、块 block 等基本名词的解释） +> **警告：** 你不能在一条语句的开头就使用对象字面值，这将导致错误或产生超出预料的行为， 因为此时左花括号（{）会被认为是一个语句块的起始符号。（译者：这 里需要对语句 statement、块 block 等基本名词的解释） 以下是一个对象字面值的例子。对象`car`的第一个元素（译注：即一个属性/值对）定义了属性`myCar`；第二个元素，属性`getCar`，引用了一个函数调用（即 CarTypes("Honda")）；第三个元素，属性`special`，使用了一个已有的变量（即 Sales）。 diff --git a/files/zh-cn/web/javascript/guide/indexed_collections/index.md b/files/zh-cn/web/javascript/guide/indexed_collections/index.md index 2b9ea68348760e..3b2b4c27edb176 100644 --- a/files/zh-cn/web/javascript/guide/indexed_collections/index.md +++ b/files/zh-cn/web/javascript/guide/indexed_collections/index.md @@ -41,7 +41,7 @@ var arr = []; arr.length = arrayLength; ``` -> **备注：**以上代码，数组长度（arrayLength）必须为一个数字（Number）。否则，将会创建一个只有单个（所输入的）元素的数组。 调用 `arr.length` 会返回数组长度，但是数组实际上包含了空的（`undefined`）元素。 因此在数组上使用 [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) 循环，将不会返回任何的值 。 +> **备注：** 以上代码，数组长度（arrayLength）必须为一个数字（Number）。否则，将会创建一个只有单个（所输入的）元素的数组。 调用 `arr.length` 会返回数组长度，但是数组实际上包含了空的（`undefined`）元素。 因此在数组上使用 [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) 循环，将不会返回任何的值 。 除了如上所示创建新定义的变量，数组 (array) 也可以作为一个属性 (property) 分配给一个新的或者已存在的对象 (object)： @@ -86,7 +86,7 @@ emp[1] = "Phil Lesh"; emp[2] = "August West"; ``` -> **备注：**如果你在以上代码中给数组操作符的是一个非整形数值，那么将作为一个代表数组的对象的属性 (property) 创建，而非作为数组的元素。 +> **备注：** 如果你在以上代码中给数组操作符的是一个非整形数值，那么将作为一个代表数组的对象的属性 (property) 创建，而非作为数组的元素。 ```js var arr = []; @@ -112,7 +112,7 @@ var myArray = ["Wind", "Rain", "Fire"]; 你可以用 `myArray[0]`引用第一个元素，`myArray[1]`引用第二个元素。元素的索引是从`0`开始的。 -> **备注：**数组操作符（方括号 \[ ]）也可以用来访问数组的属性 (在 JavaScript 中，数组也是对象)。例如： +> **备注：** 数组操作符（方括号 \[ ]）也可以用来访问数组的属性 (在 JavaScript 中，数组也是对象)。例如： ```js var arr = ["one", "two", "three"]; diff --git a/files/zh-cn/web/javascript/guide/introduction/index.md b/files/zh-cn/web/javascript/guide/introduction/index.md index e57227944603f1..975f8e4130740b 100644 --- a/files/zh-cn/web/javascript/guide/introduction/index.md +++ b/files/zh-cn/web/javascript/guide/introduction/index.md @@ -6,145 +6,122 @@ tags: - 指南 translation_of: Web/JavaScript/Guide/Introduction --- -
{{jsSidebar("JavaScript 指南")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+{{jsSidebar("JavaScript 指南")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}} -

本章节介绍了 JavaScript，并且讨论了它的一些基本概念。

+本章节介绍了 JavaScript，并且讨论了它的一些基本概念。 -

你应该已经掌握哪些知识？

+## 你应该已经掌握哪些知识？ -

我们假设你已经掌握了以下基础技能：

+我们假设你已经掌握了以下基础技能： -
    -
  • 对互联网和万维网（{{Glossary("WWW")}}）有基本的认识。
    • -
  • 熟悉超文本标记语言（{{Glossary("HTML")}}）。
    • -
  • 一些编程经验。如果您初识编程，请先试着看看主页列出的有关 JavaScript 的教程。
    • -
+- 对互联网和万维网（{{Glossary("WWW")}}）有基本的认识。 +- 熟悉超文本标记语言（{{Glossary("HTML")}}）。 +- 一些编程经验。如果您初识编程，请先试着看看主页列出的有关 [JavaScript](/zh-CN/docs/Web/JavaScript) 的教程。 -

去哪里获取有关 JavaScript 的信息？

+## 去哪里获取有关 JavaScript 的信息？ -

MDN 上的 JavaScript 文档包括以下内容：

+MDN 上的 JavaScript 文档包括以下内容： -
    -
  • 认识 Web 为初学者提供信息，并介绍一些关于编程和互联网的基本概念。
    • -
  • JavaScript 入门 （即本教程）提供 JavaScript 这门语言及其目标的概述。
    • -
  • JavaScript 参考 提供关于 JavaScript 的详细参考资料。
    • -
+- [认识 Web](/zh-CN/Learn) 为初学者提供信息，并介绍一些关于编程和互联网的基本概念。 +- [JavaScript 入门](/zh-CN/docs/Web/JavaScript/Guide) （即本教程）提供 JavaScript 这门语言及其目标的概述。 +- [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference) 提供关于 JavaScript 的详细参考资料。 -

如果你刚开始学习 JavaScript，请详细阅读 学习区（Learning area） 和 JavaScript 入门 的文章。如果你已经掌握了 JavaScript 基础知识， 你可以通过 JavaScript 参考 来了解更多关于单个（individual）对象和语句的细节。

+如果你刚开始学习 JavaScript，请详细阅读 [学习区（Learning area）](/zh-CN/Learn) 和 [JavaScript 入门](/zh-CN/docs/Web/JavaScript/Guide) 的文章。如果你已经掌握了 JavaScript 基础知识， 你可以通过 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference) 来了解更多关于单个（individual）对象和语句的细节。 -

什么是 JavaScript?

+## 什么是 JavaScript? -

JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单等）。另外还有高级的服务端 Javascript 版本，例如 Node.js，它可以让你在网页上添加更多功能，不仅仅是下载文件（例如在多台电脑之间的协同合作）。在宿主环境（例如 web 浏览器）中， JavaScript 能够通过其所连接的环境提供的编程接口进行控制。

+JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单等）。另外还有高级的服务端 Javascript 版本，例如 Node.js，它可以让你在网页上添加更多功能，不仅仅是下载文件（例如在多台电脑之间的协同合作）。在宿主环境（例如 web 浏览器）中， JavaScript 能够通过其所连接的环境提供的编程接口进行控制。 -

JavaScript 内置了一些对象的标准库，比如数组（Array），日期（Date），数学（Math）和一套核心语句，包括运算符、流程控制符以及声明方式等。JavaScript 的核心部分可以通过添加对象来扩展语言以适应不同用途；例如：

+JavaScript 内置了一些对象的标准库，比如数组（`Array`），日期（`Date`），数学（`Math`）和一套核心语句，包括运算符、流程控制符以及声明方式等。JavaScript 的核心部分可以通过添加对象来扩展语言以适应不同用途；例如： -
    -
  • 客户端的 JavaScript 通过提供对象，控制浏览器及其文档对象模型（DOM），来扩展语言核心。例如：客户端的拓展代码允许应用程序将元素放在某个 HTML 表单中，并且支持响应用户事件，比如鼠标点击、表单提交和页面导航。
    • -
  • 服务端的 JavaScript 则通过提供有关在服务器上运行 JavaScript 的对象来可扩展语言核心。例如：服务端版本直接支持应用和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。
    • -
+- 客户端的 JavaScript 通过提供对象，控制浏览器及其文档对象模型（DOM），来扩展语言核心。例如：客户端的拓展代码允许应用程序将元素放在某个 HTML 表单中，并且支持响应用户事件，比如鼠标点击、表单提交和页面导航。 +- \_\_服务端的 JavaScript 则通过提供有关在服务器上运行 JavaScript 的对象来可扩展语言核心。例如：服务端版本直接支持应用和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。 -

这意味着，在浏览器中，JavaScript 可以改变网页（DOM）的外观与样式。同样地，在服务器上，Node.js 中的 JavaScript 可以对浏览器上编写的代码发出的客户端请求做出响应。

+这意味着，在浏览器中，JavaScript 可以改变网页（DOM）的外观与样式。同样地，在服务器上，Node.js 中的 JavaScript 可以对浏览器上编写的代码发出的客户端请求做出响应。 -

JavaScript 和 Java

+## JavaScript 和 Java -

JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript 语言类似 Java 但是并没有 Java 的静态类型和强类型检查特性。JavaScript 遵循了 Java 的表达式语法，命名规范以及基础流程控制，这也是 JavaScript 从 LiveScript 更名的原因。

+JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript 语言类似 Java 但是并没有 Java 的静态类型和强类型检查特性。JavaScript 遵循了 Java 的表达式语法，命名规范以及基础流程控制，这也是 JavaScript 从 LiveScript 更名的原因。 -

与 Java 通过声明的方式构建类的编译时系统不同，JavaScript 采用基于少量的数据类型如数字、布尔、字符串值的运行时系统。JavaScript 拥有基于原型的对象模型提供的动态继承；也就是说，独立对象的继承是可以改变的。 JavaScript 支持匿名函数。 函数也可以作为对象的属性被当做宽松的类型方式执行。

+与 Java 通过声明的方式构建类的编译时系统不同，JavaScript 采用基于少量的数据类型如数字、布尔、字符串值的运行时系统。JavaScript 拥有基于原型的对象模型提供的动态继承；也就是说，独立对象的继承是可以改变的。 JavaScript 支持匿名函数。 函数也可以作为对象的属性被当做宽松的类型方式执行。 -

与 Java 相比，Javascript 是一门形式自由的语言。你不必声明所有的变量，类和方法。你不必关心方法是否是公有、私有或者受保护的，也不需要实现接口。无需显式指定变量、参数、方法返回值的数据类型。

+与 Java 相比，Javascript 是一门形式自由的语言。你不必声明所有的变量，类和方法。你不必关心方法是否是公有、私有或者受保护的，也不需要实现接口。无需显式指定变量、参数、方法返回值的数据类型。 -

Java 是基于类的编程语言，设计的初衷就是为了确保快速执行和类型安全。类型安全，举个例子，你不能将一个 Java 整数变量转化为一个对象引用，或者由 Java 字节码访问专有存储器。Java 基于类的模型，意味着程序包含专有的类及其方法。Java 的类继承和强类型要求紧耦合的对象层级结构。这些要求使得 Java 编程比 JavaScript 要复杂的多。

+Java 是基于类的编程语言，设计的初衷就是为了确保快速执行和类型安全。类型安全，举个例子，你不能将一个 Java 整数变量转化为一个对象引用，或者由 Java 字节码访问专有存储器。Java 基于类的模型，意味着程序包含专有的类及其方法。Java 的类继承和强类型要求紧耦合的对象层级结构。这些要求使得 Java 编程比 JavaScript 要复杂的多。 -

相比之下，JavaScript 传承了 HyperTalk 和 dBASE 语句精简、动态类型等精髓，这些脚本语言为更多开发者提供了一种语法简单、内置功能强大以及用最小需求创建对象的编程工具。

+相比之下，JavaScript 传承了 HyperTalk 和 dBASE 语句精简、动态类型等精髓，这些脚本语言为更多开发者提供了一种语法简单、内置功能强大以及用最小需求创建对象的编程工具。 - - - - - - - - - - - - - - - - - - - - - - -
JavaScript 和 Java 的对比
JavaScriptJava
面向对象。不区分对象类型。通过原型机制继承，任何对象的属性和方法均可以被动态添加。基于类系统。分为类和实例，通过类层级的定义实现继承。不能动态增加对象或类的属性或方法。
变量类型不需要提前声明 (动态类型)。变量类型必须提前声明 (静态类型)。
不能直接自动写入硬盘。可以直接自动写入硬盘。
+| JavaScript | Java | +| ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| 面向对象。不区分对象类型。通过原型机制继承，任何对象的属性和方法均可以被动态添加。 | 基于类系统。分为类和实例，通过类层级的定义实现继承。不能动态增加对象或类的属性或方法。 | +| 变量类型不需要提前声明 (动态类型)。 | 变量类型必须提前声明 (静态类型)。 | +| 不能直接自动写入硬盘。 | 可以直接自动写入硬盘。 | -

请查看章节 对象模型的详情 来了解更多 JavaScript 和 Java 的不同。

+请查看章节 [对象模型的详情](/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model) 来了解更多 JavaScript 和 Java 的不同。 -

JavaScript 和 ECMAScript 规范

+## JavaScript 和 ECMAScript 规范 -

JavaScript 的标准化组织是 ECMA ——这个欧洲信息与通信系统标准化协会提供基于 Javascript 的标准化方案（ECMA 原先是欧洲计算机制造商协会的首字母缩写）。这种标准化版本的 JavaScript 被称作 ECMAScript，在所有支持该标准的应用中以相同的方式工作。公司可以使用开放标准语言来开发他们自己的 JavaScript 实现版本。ECMAScript 标准在 ECMA－262 规范中进行文档化。 参照 JavaScript 的新特性 以便学习更多关于不同版本的 JavaScript 和 ECMAScript 规范版本。

+JavaScript 的标准化组织是 [ECMA](http://www.ecma-international.org/) ——这个欧洲信息与通信系统标准化协会提供基于 Javascript 的标准化方案（ECMA 原先是欧洲计算机制造商协会的首字母缩写）。这种标准化版本的 JavaScript 被称作 ECMAScript，在所有支持该标准的应用中以相同的方式工作。公司可以使用开放标准语言来开发他们自己的 JavaScript 实现版本。ECMAScript 标准在 ECMA－262 规范中进行文档化。 参照 [JavaScript 的新特性](/zh-CN/docs/Web/JavaScript/New_in_JavaScript) 以便学习更多关于不同版本的 JavaScript 和 ECMAScript 规范版本。 -

ECMA-262 标准也通过了 国际标准化组织（ISO）的 ISO-16262。你可以在这里找到该规范文件。 ECMAScript 规范并没有描述文档对象模型（DOM），该模型由 万维网联盟（W3C） 制定。DOM 定义了 HTML 文件对象被脚本操作的方法。为了更清楚地了解当使用 JavaScript 编程时用到的不同技术，请参阅 JavaScript 技术概述。

+ECMA-262 标准也通过了 国际标准化组织（[ISO](http://www.iso.ch/)）的 ISO-16262。你可以[在这里](http://www.ecma-international.org/publications/standards/Ecma-262.htm)找到该规范文件。 ECMAScript 规范并没有描述文档对象模型（[DOM](/zh-CN/docs/Web/API/Document_Object_Model)），该模型由 万维网联盟（[W3C](http://www.w3.org/)） 制定。DOM 定义了 HTML 文件对象被脚本操作的方法。为了更清楚地了解当使用 JavaScript 编程时用到的不同技术，请参阅 [JavaScript 技术概述](/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview)。 -

JavaScript 文献 和 ECMAScript 规范

+### JavaScript 文献 和 ECMAScript 规范 -

ECMAScript 规范是实现 ECMAScript 的一组需求;如果您想在 ECMAScript 实现或引擎 (如 Firefox 中的 SpiderMonkey 或 Chrome 中的 V8) 中实现符合标准的语言特性，那么它是非常有用的。

+ECMAScript 规范是实现 ECMAScript 的一组需求;如果您想在 ECMAScript 实现或引擎 (如 Firefox 中的 SpiderMonkey 或 Chrome 中的 V8) 中实现符合标准的语言特性，那么它是非常有用的。 -

ECMAScript 文档不是用来帮助脚本程序员的;使用 JavaScript 文档获取关于编写脚本的信息。

+ECMAScript 文档不是用来帮助脚本程序员的;使用 JavaScript 文档获取关于编写脚本的信息。 -

ECMAScript 规范使用了 JavaScript 程序员可能不熟悉的术语和语法。尽管 ECMAScript 中对语言的描述可能有所不同，但语言本身保持不变。JavaScript 支持 ECMAScript 规范中列出的所有功能。

+ECMAScript 规范使用了 JavaScript 程序员可能不熟悉的术语和语法。尽管 ECMAScript 中对语言的描述可能有所不同，但语言本身保持不变。JavaScript 支持 ECMAScript 规范中列出的所有功能。 -

JavaScript 文档描述了适合 JavaScript 程序员的语言方面。

+JavaScript 文档描述了适合 JavaScript 程序员的语言方面。 -

JavaScript 入门

+## JavaScript 入门 -

开始使用 JavaScript 很容易，你只需要一个现代 Web 浏览器。这篇教程包含了一些只在最新版本的火狐浏览器上才有的功能，所以建议大家使用最新版本的火狐浏览器。

+开始使用 JavaScript 很容易，你只需要一个现代 Web 浏览器。这篇教程包含了一些只在最新版本的火狐浏览器上才有的功能，所以建议大家使用最新版本的火狐浏览器。 -

火狐浏览器内置的 Web 控制台非常适合学习 JavaScript,Web 控制台包含两个输入模式——单行模式、多行模式。

+火狐浏览器内置的 Web 控制台非常适合学习 JavaScript,Web 控制台包含两个输入模式——单行模式、多行模式。 -

单行模式

+### 单行模式 -

Web 控制台 不仅可以展示当前已加载页面的信息，还包含一个可以在当前页面执行 Javascript 表达式的 命令行。

+[Web 控制台](/zh-CN/docs//Tools/Web_Console) 不仅可以展示当前已加载页面的信息，还包含一个可以在当前页面执行 Javascript 表达式的 [命令行。](/zh-CN/docs/Tools/Web_Console#The_command_line_interpreter) -

在火狐浏览器菜单栏的 “工具" => "浏览器工具" => "Web 开发者工具"( 在 Windows 和 Linux 上Ctrl+Shift+I ，Mac 上Cmd+Option+K)，选择"Web 开发者工具栏"的控制台选项卡，它会如期出现在浏览器窗口的底部。如图，最下一行就是可以执行输入的命令行，面板上可以显示执行结果：

+在火狐浏览器菜单栏的 “工具" => "浏览器工具" => "Web 开发者工具"( 在 Windows 和 Linux 上Ctrl+Shift+I ，Mac 上Cmd+Option+K)，选择"Web 开发者工具栏"的控制台选项卡，它会如期出现在浏览器窗口的底部。如图，最下一行就是可以执行输入的命令行，面板上可以显示执行结果： -

+![](2019-04-04_00-15-29.png) -

控制台的工作方式与 eval 完全相同：返回最后输入的表达式。为了简单起见，可以想象每次输入到控制台的东西实际上都被 console.log 所包围。

+控制台的工作方式与 eval 完全相同：返回最后输入的表达式。为了简单起见，可以想象每次输入到控制台的东西实际上都被 console.log 所包围。 -
console.log(eval('3 + 5'))
+```js +console.log(eval('3 + 5')) +``` -

多行模式

+### 多行模式 -

Web 控制台的单行模式非常适合用来测试单个的 JavaScript 表达式，对于复杂的 JavaScript 表达式或者一定规模的代码块就显得力不从心了。这正是多行模式要解决的！

+Web 控制台的单行模式非常适合用来测试单个的 JavaScript 表达式，对于复杂的 JavaScript 表达式或者一定规模的代码块就显得力不从心了。这正是[多行模式](https://firefox-source-docs.mozilla.org/devtools-user/web_console/the_command_line_interpreter/index.html#multi-line-mode)要解决的！ -

Hello world

+### Hello world -

让我们用 Web 控制台的多行模式来写一个“Hello World"程序吧！JavaScript code:

+让我们用 Web 控制台的多行模式来写一个“Hello World"程序吧！JavaScript code: -
+```js
 (function(){
   "use strict";
   function greetMe(yourName) {
     alert('Hello ' + yourName);
   }
-    
+
   greetMe('World');
 })();
-
-

输入完成后，按下Cmd+Enter或者Ctrl+Enter(或者单击运行按钮) 就可以在浏览器中看到执行结果了！

+``` + +输入完成后，按下Cmd+Enter或者Ctrl+Enter(或者单击运行按钮) 就可以在浏览器中看到执行结果了！ -

在接下来的章节里，我们将向你介绍 JavaScript 的语法以及语言特性，届时你将可以使用它编写更加复杂的程序。

+在接下来的章节里，我们将向你介绍 JavaScript 的语法以及语言特性，届时你将可以使用它编写更加复杂的程序。 -

但是现在请记住，始终将(function(){"use strict"; 添加到你的代码之前，始终将})();添加到你的代码之后。严格模式和IIFE这两篇文章详细解释了它们的作用。现在关于它们的作用你只要知道以下两点：

+但是现在请记住，始终将`(function(){"use strict"; `添加到你的代码之前，始终将`})();`添加到你的代码之后。[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)和[IIFE](/zh-CN/docs/Glossary/IIFE)这两篇文章详细解释了它们的作用。现在关于它们的作用你只要知道以下两点： -
    -
  1. 防止 JavaScript 的语义影响初学者
    2. -
  2. 防止控制台中的代码片段之间发生意料之外的交互
    3. -
+1. 防止 JavaScript 的语义影响初学者 +2. 防止控制台中的代码片段之间发生意料之外的交互 -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

+{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}} diff --git a/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md b/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md index aa330554eaf316..a0d14c12403892 100644 --- a/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md +++ b/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md @@ -68,7 +68,7 @@ while (!result.done) { console.log("Iterated over sequence of size: ", result.value); // 5 ``` -> **备注：**反射性地知道特定对象是否是迭代器是不可能的。 如果您需要这样做，请使用 [Iterables](#Iterables). +> **备注：** 反射性地知道特定对象是否是迭代器是不可能的。 如果您需要这样做，请使用 [Iterables](#Iterables). ## 生成器函数 diff --git a/files/zh-cn/web/javascript/guide/meta_programming/index.md b/files/zh-cn/web/javascript/guide/meta_programming/index.md index 1ae3d771c2b85f..b0ea9e4ada637d 100644 --- a/files/zh-cn/web/javascript/guide/meta_programming/index.md +++ b/files/zh-cn/web/javascript/guide/meta_programming/index.md @@ -8,15 +8,16 @@ tags: - Reflect translation_of: Web/JavaScript/Guide/Meta_programming --- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Iterators_and_Generators", "Web/JavaScript/Guide/Modules")}}
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Iterators_and_Generators", "Web/JavaScript/Guide/Modules")}} -

从 ECMAScript 2015 开始，JavaScript 获得了 {{jsxref("Proxy")}} 和 {{jsxref("Reflect")}} 对象的支持，允许你拦截并定义基本语言操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。借助这两个对象，你可以在 JavaScript 元级别进行编程。

+从 ECMAScript 2015 开始，JavaScript 获得了 {{jsxref("Proxy")}} 和 {{jsxref("Reflect")}} 对象的支持，允许你拦截并定义基本语言操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。借助这两个对象，你可以在 JavaScript 元级别进行编程。 -

代理

+## 代理 -

在 ECMAScript 6 中引入的 {{jsxref("Proxy")}} 对象可以拦截某些操作并实现自定义行为。例如获取一个对象上的属性：

+在 ECMAScript 6 中引入的 {{jsxref("Proxy")}} 对象可以拦截某些操作并实现自定义行为。例如获取一个对象上的属性： -
let handler = {
+```js
+let handler = {
   get: function(target, name){
     return name in target ? target[name] : 42;
 }};
@@ -25,186 +26,333 @@ let p = new Proxy({}, handler);
 p.a = 1;
 
 console.log(p.a, p.b); // 1, 42
-
+``` -

Proxy 对象定义了一个目标（这里是一个空对象）和一个实现了 get 陷阱的 handler 对象。这里，代理的对象在获取未定义的属性时不会返回 undefined，而是返回 42。

+`Proxy` 对象定义了一个目标（这里是一个空对象）和一个实现了 `get` 陷阱的 handler 对象。这里，代理的对象在获取未定义的属性时不会返回 `undefined`，而是返回 42。 -

更多例子参见 {{jsxref("Proxy")}} 页面 。

+更多例子参见 {{jsxref("Proxy")}} 页面 。 -

术语

+### 术语 -

在讨论代理的功能时会用到以下术语。

+在讨论代理的功能时会用到以下术语。 -
-
{{jsxref("Global_Objects/Proxy/handler","handler")}}
-
包含陷阱的占位符对象。
-
traps
-
提供属性访问的方法。这类似于操作系统中陷阱的概念。
-
target
-
代理虚拟化的对象。它通常用作代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）。
-
invariants
-
实现自定义操作时保持不变的语义称为不变量。如果你违反处理程序的不变量，则会抛出一个 {{jsxref("TypeError")}}。
-
+- {{jsxref("Global_Objects/Proxy/handler","handler")}} + - : 包含陷阱的占位符对象。 +- traps + - : 提供属性访问的方法。这类似于操作系统中陷阱的概念。 +- target + - : 代理虚拟化的对象。它通常用作代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）。 +- invariants + - : 实现自定义操作时保持不变的语义称为不变量。如果你违反处理程序的不变量，则会抛出一个 {{jsxref("TypeError")}}。 -

句柄和陷阱

+## 句柄和陷阱 -

以下表格中总结了 Proxy 对象可用的陷阱。详细的解释和例子请看参考页。

+以下表格中总结了 `Proxy` 对象可用的陷阱。详细的解释和例子请看[参考页](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler)。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Handler / trapInterceptionsInvariants
{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}{{jsxref("Object.getPrototypeOf()")}}
- {{jsxref("Reflect.getPrototypeOf()")}}
- {{jsxref("Object/proto", "__proto__")}}
- {{jsxref("Object.prototype.isPrototypeOf()")}}
- {{jsxref("Operators/instanceof", "instanceof")}}		 -
    -
  • getPrototypeOf方法一定返回一个对象或null.
    • -
  • 如果 target 不可扩展，Object.getPrototypeOf(proxy) 必须返回和 Object.getPrototypeOf(target)一样的值。
    • -
-
{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}{{jsxref("Object.setPrototypeOf()")}}
- {{jsxref("Reflect.setPrototypeOf()")}}		如果 target 不可扩展，prototype 参数必须与Object.getPrototypeOf(target)的值相同。
{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}{{jsxref("Object.isExtensible()")}}
- {{jsxref("Reflect.isExtensible()")}}		Object.isExtensible(proxy) 必须返回和Object.isExtensible(target)一样的值。
{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}{{jsxref("Object.preventExtensions()")}}
- {{jsxref("Reflect.preventExtensions()")}}		 如果Object.isExtensible(proxy) 值为 false，Object.preventExtensions(proxy) 只返回true。
{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}{{jsxref("Object.getOwnPropertyDescriptor()")}}
- {{jsxref("Reflect.getOwnPropertyDescriptor()")}}		 -
    -
  • getOwnPropertyDescripton 只能返回对象或者undefined.
    • -
  • A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
    • -
  • A property cannot be reported as non-existent, if it exists as an own property of the target object and the target object is not extensible.
    • -
  • A property cannot be reported as existent, if it does not exists as an own property of the target object and the target object is not extensible.
    • -
  • A property cannot be reported as non-configurable, if it does not exists as an own property of the target object or if it exists as a configurable own property of the target object.
    • -
  • The result of Object.getOwnPropertyDescriptor(target) can be applied to the target object using Object.defineProperty and will not throw an exception.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}{{jsxref("Object.defineProperty()")}}
- {{jsxref("Reflect.defineProperty()")}}		 -
    -
  • A property cannot be added, if the target object is not extensible.
    • -
  • A property cannot be added as or modified to be non-configurable, if it does not exists as a non-configurable own property of the target object.
    • -
  • A property may not be non-configurable, if a corresponding configurable property of the target object exists.
    • -
  • If a property has a corresponding target object property then Object.defineProperty(target, prop, descriptor) will not throw an exception.
    • -
  • In strict mode, a false return value from the defineProperty handler will throw a {{jsxref("TypeError")}} exception.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}Property query: foo in proxy
- Inherited property query: foo in Object.create(proxy)
- {{jsxref("Reflect.has()")}}		 -
    -
  • A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
    • -
  • A property cannot be reported as non-existent, if it exists as an own property of the target object and the target object is not extensible.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}Property access: proxy[foo]and proxy.bar
- Inherited property access: Object.create(proxy)[foo]
- {{jsxref("Reflect.get()")}}		 -
    -
  • The value reported for a property must be the same as the value of the corresponding target object property if the target object property is a non-writable, non-configurable data property.
    • -
  • The value reported for a property must be undefined if the corresponding target object property is non-configurable accessor property that has undefined as its [[Get]] attribute.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}Property assignment: proxy[foo] = bar and proxy.foo = bar
- Inherited property assignment: Object.create(proxy)[foo] = bar
- {{jsxref("Reflect.set()")}}		 -
    -
  • Cannot change the value of a property to be different from the value of the corresponding target object property if the corresponding target object property is a non-writable, non-configurable data property.
    • -
  • Cannot set the value of a property if the corresponding target object property is a non-configurable accessor property that has undefined as its [[Set]] attribute.
    • -
  • In strict mode, a false return value from the set handler will throw a {{jsxref("TypeError")}} exception.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}Property deletion: delete proxy[foo] and delete proxy.foo
- {{jsxref("Reflect.deleteProperty()")}}		A property cannot be deleted, if it exists as a non-configurable own property of the target object.
{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}Property enumeration / for...in: for (var name in proxy) {...}
- {{jsxref("Reflect.enumerate()")}}		The enumerate method must return an object.
{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}{{jsxref("Object.getOwnPropertyNames()")}}
- {{jsxref("Object.getOwnPropertySymbols()")}}
- {{jsxref("Object.keys()")}}
- {{jsxref("Reflect.ownKeys()")}}		 -
    -
  • The result of ownKeys is a List.
    • -
  • The Type of each result List element is either {{jsxref("String")}} or {{jsxref("Symbol")}}.
    • -
  • The result List must contain the keys of all non-configurable own properties of the target object.
    • -
  • If the target object is not extensible, then the result List must contain all the keys of the own properties of the target object and no other values.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}proxy(..args)
- {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}
- {{jsxref("Reflect.apply()")}}		There are no invariants for the handler.apply method.
{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}new proxy(...args)
- {{jsxref("Reflect.construct()")}}		结果一定是一个Object。
Handler / trapInterceptionsInvariants
+ {{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}} + + {{jsxref("Object.getPrototypeOf()")}}
{{jsxref("Reflect.getPrototypeOf()")}}
{{jsxref("Object/proto", "__proto__")}}
{{jsxref("Object.prototype.isPrototypeOf()")}}
{{jsxref("Operators/instanceof", "instanceof")}} + 		+
    +
  • + getPrototypeOf方法一定返回一个对象或null. +
    • +
  • + 如果 target 不可扩展，Object.getPrototypeOf(proxy) + 必须返回和 Object.getPrototypeOf(target)一样的值。 +
    • +
+
+ {{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}} + + {{jsxref("Object.setPrototypeOf()")}}
{{jsxref("Reflect.setPrototypeOf()")}} + 		+ 如果 target 不可扩展，prototype + 参数必须与Object.getPrototypeOf(target)的值相同。 +
+ {{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}} + + {{jsxref("Object.isExtensible()")}}
{{jsxref("Reflect.isExtensible()")}} + 		+ Object.isExtensible(proxy) + 必须返回和Object.isExtensible(target)一样的值。 +
+ {{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}} + + {{jsxref("Object.preventExtensions()")}}
{{jsxref("Reflect.preventExtensions()")}} + 		+ 如果Object.isExtensible(proxy) 值为 + false，Object.preventExtensions(proxy) 只返回true。 +
+ {{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}} + + {{jsxref("Object.getOwnPropertyDescriptor()")}}
{{jsxref("Reflect.getOwnPropertyDescriptor()")}} + 		+
    +
  • + getOwnPropertyDescripton + 只能返回对象或者undefined. +
    • +
  • + A property cannot be reported as non-existent, if it exists as a + non-configurable own property of the target object. +
    • +
  • + A property cannot be reported as non-existent, if it exists as an + own property of the target object and the target object is not + extensible. +
    • +
  • + A property cannot be reported as existent, if it does not exists as + an own property of the target object and the target object is not + extensible. +
    • +
  • + A property cannot be reported as non-configurable, if it does not + exists as an own property of the target object or if it exists as a + configurable own property of the target object. +
    • +
  • + The result of + Object.getOwnPropertyDescriptor(target) can be applied + to the target object using Object.defineProperty and + will not throw an exception. +
    • +
+
+ {{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}} + + {{jsxref("Object.defineProperty()")}}
{{jsxref("Reflect.defineProperty()")}} + 		+
    +
  • + A property cannot be added, if the target object is not extensible. +
    • +
  • + A property cannot be added as or modified to be non-configurable, if + it does not exists as a non-configurable own property of the target + object. +
    • +
  • + A property may not be non-configurable, if a corresponding + configurable property of the target object exists. +
    • +
  • + If a property has a corresponding target object property then + Object.defineProperty(target, prop, descriptor) will + not throw an exception. +
    • +
  • + In strict mode, a false return value from the + defineProperty handler will throw a + {{jsxref("TypeError")}} exception. +
    • +
+
+ {{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}} + + Property query: foo in proxy
Inherited property query: + foo in Object.create(proxy)
{{jsxref("Reflect.has()")}} + 		+
    +
  • + A property cannot be reported as non-existent, if it exists as a + non-configurable own property of the target object. +
    • +
  • + A property cannot be reported as non-existent, if it exists as an + own property of the target object and the target object is not + extensible. +
    • +
+
+ {{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}} + + Property access: proxy[foo]and proxy.bar
Inherited property access: Object.create(proxy)[foo]
{{jsxref("Reflect.get()")}} + 		+
    +
  • + The value reported for a property must be the same as the value of + the corresponding target object property if the target object + property is a non-writable, non-configurable data property. +
    • +
  • + The value reported for a property must be undefined if the + corresponding target object property is non-configurable accessor + property that has undefined as its [[Get]] attribute. +
    • +
+
+ {{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}} + + Property assignment: proxy[foo] = bar and + proxy.foo = bar
Inherited property assignment: + Object.create(proxy)[foo] = bar
{{jsxref("Reflect.set()")}} + 		+
    +
  • + Cannot change the value of a property to be different from the value + of the corresponding target object property if the corresponding + target object property is a non-writable, non-configurable data + property. +
    • +
  • + Cannot set the value of a property if the corresponding target + object property is a non-configurable accessor property that has + undefined as its [[Set]] attribute. +
    • +
  • + In strict mode, a false return value from the + set handler will throw a + {{jsxref("TypeError")}} exception. +
    • +
+
+ {{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}} + + Property deletion: delete proxy[foo] and + delete proxy.foo
{{jsxref("Reflect.deleteProperty()")}} + 		+ A property cannot be deleted, if it exists as a non-configurable own + property of the target object. +
+ {{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}} + + Property enumeration / for...in: + for (var name in proxy) {...}
{{jsxref("Reflect.enumerate()")}} + 		The enumerate method must return an object.
+ {{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}} + + {{jsxref("Object.getOwnPropertyNames()")}}
{{jsxref("Object.getOwnPropertySymbols()")}}
{{jsxref("Object.keys()")}}
{{jsxref("Reflect.ownKeys()")}} + 		+
    +
  • The result of ownKeys is a List.
    • +
  • + The Type of each result List element is either + {{jsxref("String")}} or {{jsxref("Symbol")}}. +
    • +
  • + The result List must contain the keys of all non-configurable own + properties of the target object. +
    • +
  • + If the target object is not extensible, then the result List must + contain all the keys of the own properties of the target object and + no other values. +
    • +
+
+ {{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}} + + proxy(..args)
{{jsxref("Function.prototype.apply()")}} and + {{jsxref("Function.prototype.call()")}}
{{jsxref("Reflect.apply()")}} + 		+ There are no invariants for the handler.apply method. +
+ {{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}} + + new proxy(...args)
{{jsxref("Reflect.construct()")}} + 		结果一定是一个Object。
-

撤销 Proxy

+## 撤销 `Proxy` -

{{jsxref("Proxy.revocable()")}} 方法被用来创建可撤销的 Proxy 对象。这意味着 proxy 可以通过 revoke 函数来撤销，并且关闭代理。此后，代理上的任意的操作都会导致{{jsxref("TypeError")}}。

+{{jsxref("Proxy.revocable()")}} 方法被用来创建可撤销的 `Proxy` 对象。这意味着 proxy 可以通过 `revoke` 函数来撤销，并且关闭代理。此后，代理上的任意的操作都会导致{{jsxref("TypeError")}}。 -
var revocable = Proxy.revocable({}, {
+```js
+var revocable = Proxy.revocable({}, {
   get: function(target, name) {
     return "[[" + name + "]]";
   }
@@ -217,28 +365,33 @@ revocable.revoke();
 console.log(proxy.foo); // TypeError is thrown
 proxy.foo = 1           // TypeError again
 delete proxy.foo;       // still TypeError
-typeof proxy            // "object", typeof doesn't trigger any trap
+typeof proxy // "object", typeof doesn't trigger any trap +``` -

反射

+## 反射 -

{{jsxref("Reflect")}} 是一个内置对象，它提供了可拦截 JavaScript 操作的方法。该方法和{{jsxref("Global_Objects/Proxy/handler","代理句柄")}}类似，但 Reflect 方法并不是一个函数对象。

+{{jsxref("Reflect")}} 是一个内置对象，它提供了可拦截 JavaScript 操作的方法。该方法和{{jsxref("Global_Objects/Proxy/handler","代理句柄")}}类似，但 `Reflect` 方法并不是一个函数对象。 -

Reflect 有助于将默认操作从处理程序转发到目标。

+`Reflect` 有助于将默认操作从处理程序转发到目标。 -

以 {{jsxref("Reflect.has()")}} 为例，你可以将 in 运算符作为函数：

+以 {{jsxref("Reflect.has()")}} 为例，你可以将 [`in` 运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/in)作为函数： -
Reflect.has(Object, "assign"); // true
-
+```js +Reflect.has(Object, "assign"); // true +``` -

更好的 apply 函数

+### 更好的 `apply` 函数 -

在 ES5 中，我们通常使用 {{jsxref("Function.prototype.apply()")}} 方法调用一个具有给定 this 值和 arguments 数组（或类数组对象）的函数。

+在 ES5 中，我们通常使用 {{jsxref("Function.prototype.apply()")}} 方法调用一个具有给定 `this` 值和 `arguments` 数组（或[类数组对象](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects)）的函数。 -
Function.prototype.apply.call(Math.floor, undefined, [1.75]);
+```js +Function.prototype.apply.call(Math.floor, undefined, [1.75]); +``` -

使用 {{jsxref("Reflect.apply")}}，这变得不那么冗长和容易理解：

+使用 {{jsxref("Reflect.apply")}}，这变得不那么冗长和容易理解： -
Reflect.apply(Math.floor, undefined, [1.75]);
+```js
+Reflect.apply(Math.floor, undefined, [1.75]);
 // 1;
 
 Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
@@ -248,17 +401,19 @@ Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index;
 // 4
 
 Reflect.apply(''.charAt, 'ponies', [3]);
-// "i"
+// "i" +``` -

检查属性定义是否成功

+### 检查属性定义是否成功 -

使用 {{jsxref("Object.defineProperty")}}，如果成功返回一个对象，否则抛出一个 {{jsxref("TypeError")}}，你将使用 {{jsxref("Statements/try...catch","try...catch")}} 块来捕获定义属性时发生的任何错误。因为 {{jsxref("Reflect.defineProperty")}} 返回一个布尔值表示的成功状态，你可以在这里使用 {{jsxref("Statements/if...else","if...else")}} 块：

+使用 {{jsxref("Object.defineProperty")}}，如果成功返回一个对象，否则抛出一个 {{jsxref("TypeError")}}，你将使用 {{jsxref("Statements/try...catch","try...catch")}} 块来捕获定义属性时发生的任何错误。因为 {{jsxref("Reflect.defineProperty")}} 返回一个布尔值表示的成功状态，你可以在这里使用 {{jsxref("Statements/if...else","if...else")}} 块： -
if (Reflect.defineProperty(target, property, attributes)) {
+```js
+if (Reflect.defineProperty(target, property, attributes)) {
   // success
 } else {
   // failure
 }
-
+``` -

{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}

+{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}} diff --git a/files/zh-cn/web/javascript/guide/modules/index.md b/files/zh-cn/web/javascript/guide/modules/index.md index cfc953cee5a26a..e8fb7231c07d3c 100644 --- a/files/zh-cn/web/javascript/guide/modules/index.md +++ b/files/zh-cn/web/javascript/guide/modules/index.md @@ -9,109 +9,96 @@ tags: - 模块 translation_of: Web/JavaScript/Guide/Modules --- -
{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}
+{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}} -

这篇指南会给你入门 JavaScript 模块的全部信息。

+这篇指南会给你入门 JavaScript 模块的全部信息。 -

模块化的背景

+## 模块化的背景 -

JavaScript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。过了几年，我们现在有了运行大量 JavaScript 脚本的复杂程序，还有一些被用在其他环境（例如 Node.js）。

+JavaScript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。过了几年，我们现在有了运行大量 JavaScript 脚本的复杂程序，还有一些被用在其他环境（例如 [Node.js](/zh-CN/docs/Glossary/Node.js)）。 -

因此，近年来，有必要开始考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制。Node.js 已经提供这个能力很长时间了，还有很多的 JavaScript 库和框架已经开始了模块的使用（例如，CommonJS 和基于 AMD 的其他模块系统 如 RequireJS， 以及最新的 Webpack 和 Babel）。

+因此，近年来，有必要开始考虑提供一种**将 JavaScript 程序拆分为可按需导入的单独模块**的机制。Node.js 已经提供这个能力很长时间了，还有很多的 JavaScript 库和框架已经开始了模块的使用（例如，[CommonJS](https://en.wikipedia.org/wiki/CommonJS) 和基于 [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) 的其他模块系统 如 [RequireJS](https://requirejs.org/)， 以及最新的 [Webpack](https://webpack.github.io/) 和 [Babel](https://babeljs.io/)）。 -

好消息是，最新的浏览器开始原生支持模块功能了，这是本文要重点讲述的。这会是一个好事情 —- 浏览器能够最优化加载模块，使它比使用库更有效率：使用库通常需要做额外的客户端处理。

+好消息是，最新的浏览器开始原生支持模块功能了，这是本文要重点讲述的。这会是一个好事情 —- 浏览器能够最优化加载模块，使它比使用库更有效率：使用库通常需要做额外的客户端处理。 -

浏览器支持

+## 浏览器支持 -

使用 JavaScript 模块依赖于 import 和 export，浏览器兼容性如下（绿色方框中的数字对应相应平台上支持该功能的发布版本）：

+使用 JavaScript 模块依赖于 `import` 和 `export`，浏览器兼容性如下（绿色方框中的数字对应相应平台上支持该功能的发布版本）： -

import

+### import -

{{Compat("javascript.statements.import")}}

+{{Compat("javascript.statements.import")}} -

export

+### export -

{{Compat("javascript.statements.export")}}

+{{Compat("javascript.statements.export")}} -

介绍一个例子

+## 介绍一个例子 -

为了演示模块的使用，我们创建了一个 simple set of examples ，你可以在 Github 上找到。这个例子演示了一个简单的模块的集合用来在 web 页面上创建了一个 {{htmlelement("canvas")}} 标签，在 canvas 上绘制 (并记录有关的信息) 不同形状。

+为了演示模块的使用，我们创建了一个 [simple set of examples](https://github.com/mdn/js-examples/tree/master/module-examples) ，你可以在 Github 上找到。这个例子演示了一个简单的模块的集合用来在 web 页面上创建了一个 {{htmlelement("canvas")}} 标签，在 canvas 上绘制 (并记录有关的信息) 不同形状。 -

这的确有点简单，但是保持足够简单能够清晰地演示模块。

+这的确有点简单，但是保持足够简单能够清晰地演示模块。 -
-

备注：如果你想去下载这个例子在本地运行，你需要通过本地 web 服务器去运行。

-
+> **备注：** 如果你想去下载这个例子在本地运行，你需要通过本地 web 服务器去运行。 -

基本的示例文件的结构

+## 基本的示例文件的结构 -

在我们的第一个例子 (see basic-modules) 文件结构如下：

+在我们的第一个例子 (see [basic-modules](https://github.com/mdn/js-examples/tree/master/module-examples/basic-modules)) 文件结构如下： -
index.html
+```plain
+index.html
 main.mjs
 modules/
     canvas.mjs
-    square.mjs
+ square.mjs +``` + +> **备注：** 在这个指南的全部示例项目的文件结构是基本相同的；需要熟悉上面的内容 -
-

备注：在这个指南的全部示例项目的文件结构是基本相同的；需要熟悉上面的内容

-
+modules 目录下的两个模块的描述如下： -

modules 目录下的两个模块的描述如下：

+- `canvas.mjs` — 包含与设置画布相关的功能： -
    -
  • canvas.mjs — 包含与设置画布相关的功能： + - `create()` — 在指定 ID 的包装器 {{htmlelement("div")}} 内创建指定 `width` 和 `height` 的画布，该 ID 本身附加在指定的父元素内。返回包含画布的 2D 上下文和包装器 ID 的对象。 + - `createReportList()` — 创建一个附加在指定包装器元素内的无序列表，该列表可用于将报告数据输出到。返回列表的 ID。 -
      -
    • create() — 在指定 ID 的包装器 {{htmlelement("div")}} 内创建指定 width 和 height 的画布，该 ID 本身附加在指定的父元素内。返回包含画布的 2D 上下文和包装器 ID 的对象。
      • -
    • createReportList() — 创建一个附加在指定包装器元素内的无序列表，该列表可用于将报告数据输出到。返回列表的 ID。
      • -
    -
    • -
  • square.mjs — 包含： -
      -
    • name — 包含字符串 'square' 的常量。
      • -
    • draw() — 在指定画布上绘制一个正方形，具有指定的大小，位置和颜色。返回包含正方形大小，位置和颜色的对象。
      • -
    • reportArea() — 在给定长度的情况下，将正方形区域写入特定报告列表。
      • -
    • reportPerimeter() — 在给定长度的情况下，将正方形的周长写入特定的报告列表。
      • -
    -
    • -
+- `square.mjs` — 包含： -
-

备注：在原生 JavaScript 模块中，扩展名 .mjs 非常重要，因为使用 MIME-type 为 javascript/esm 来导入文件（其他的 JavaScript 兼容 MIME-type 像 application/javascript 也可以），它避免了严格的 MIME 类型检查错误，像 "The server responded with a non-JavaScript MIME type"。除此之外，.mjs 的扩展名很明了（比如这个就是一个模块，而不是一个传统 JavaScript 文件），还能够和其他工具互相适用。看这个 Google's note for further details。

-
+ - `name` — 包含字符串 'square' 的常量。 + - `draw()` — 在指定画布上绘制一个正方形，具有指定的大小，位置和颜色。返回包含正方形大小，位置和颜色的对象。 + - `reportArea()` — 在给定长度的情况下，将正方形区域写入特定报告列表。 + - `reportPerimeter()` — 在给定长度的情况下，将正方形的周长写入特定的报告列表。 -

.mjs 与 .js

+> **备注：** 在原生 JavaScript 模块中，扩展名 `.mjs` 非常重要，因为使用 MIME-type 为 `javascript/esm` 来导入文件（其他的 JavaScript 兼容 MIME-type 像 `application/javascript` 也可以），它避免了严格的 MIME 类型检查错误，像 "The server responded with a non-JavaScript MIME type"。除此之外，`.mjs` 的扩展名很明了（比如这个就是一个模块，而不是一个传统 JavaScript 文件），还能够和其他工具互相适用。看这个 [Google's note for further details](https://v8.dev/features/modules#mjs)。 -

纵观此文，我们使用 .js 扩展名的模块文件，但在其它一些文章中，你可能会看到 .mjs 扩展名的使用。V8 推荐了这样的做法，比如有下列理由：

+## `.mjs` 与 `.js` -
    -
  • 比较清晰，这可以指出哪些文件是模块，哪些是常规的 JavaScript。
    • -
  • 这能保证你的模块可以被运行时环境和构建工具识别，比如 Node.js 和 Babel。
    • -
+纵观此文，我们使用 `.js` 扩展名的模块文件，但在其它一些文章中，你可能会看到 `.mjs` 扩展名的使用。[V8 推荐了这样的做法](https://v8.dev/features/modules#mjs)，比如有下列理由： -

但是我们决定继续使用 .js 扩展名，未来可能会更改。为了使模块可以在浏览器中正常地工作，你需要确保你的服务器能够正常地处理 Content-Type 头，其应该包含 JavaScript 的 MIME 类型 text/javascript。如果没有这么做，你可能会得到 一个严格 MIME 类型检查错误：“The server responded with a non-JavaScript MIME type（服务器返回了非 JavaScript MIME 类型）”，并且浏览器会拒绝执行相应的 JavaScript 代码。多数服务器可以正确地处理 .js 文件的类型，但是 .mjs 还不行。已经可以正常响应 .mjs 的服务器有 GitHub 页面 和 Node.js 的 http-server。

+- 比较清晰，这可以指出哪些文件是模块，哪些是常规的 JavaScript。 +- 这能保证你的模块可以被运行时环境和构建工具识别，比如 [Node.js](https://nodejs.org/api/esm.html#esm_enabling) 和 [Babel](https://babeljs.io/docs/en/options#sourcetype)。 -

如果你已经在使用相应的环境了，那么一切正常。或者如果你还没有，但你知道你在做什么（比如你可以配置服务器以为 .mjs 设置正确的 Content-Type）。但如果你不能控制提供服务，或者用于公开文件发布的服务器，这可能会导致混乱。

+但是我们决定继续使用 `.js` 扩展名，未来可能会更改。为了使模块可以在浏览器中正常地工作，你需要确保你的服务器能够正常地处理 `Content-Type` 头，其应该包含 JavaScript 的 MIME 类型 `text/javascript`。如果没有这么做，你可能会得到 一个严格 MIME 类型检查错误：“The server responded with a non-JavaScript MIME type（服务器返回了非 JavaScript MIME 类型）”，并且浏览器会拒绝执行相应的 JavaScript 代码。多数服务器可以正确地处理 `.js` 文件的类型，但是 `.mjs` 还不行。已经可以正常响应 `.mjs` 的服务器有 [GitHub 页面](https://pages.github.com/) 和 Node.js 的 [`http-server`](https://github.com/http-party/http-server#readme)。 -

为了学习和保证代码的可移植的目的，我们建议使用 .js。

+如果你已经在使用相应的环境了，那么一切正常。或者如果你还没有，但你知道你在做什么（比如你可以配置服务器以为 `.mjs` 设置正确的 `Content-Type`）。但如果你不能控制提供服务，或者用于公开文件发布的服务器，这可能会导致混乱。 -

如果你认为使用 .mjs 仅用于模块带来的清晰性非常重要，但不想引入上面描述的相应问题，你可以仅在开发过程中使用 .mjs，而在构建过程中将其转换为 .js。

+为了学习和保证代码的可移植的目的，我们建议使用 `.js`。 -

另注意：

+如果你认为使用 `.mjs` 仅用于模块带来的清晰性非常重要，但不想引入上面描述的相应问题，你可以仅在开发过程中使用 `.mjs`，而在构建过程中将其转换为 `.js`。 -
    -
  • 一些工具不支持 .mjs，比如 TypeScript。
    • -
  • <script type="module"> 属性用于指示引入的模块，你会在下面看到。
    • -
+另注意： -

导出模块的功能

+- 一些工具不支持 `.mjs`，比如 [TypeScript](https://www.typescriptlang.org/)。 +- ` +``` -

你导入模块功能的脚本基本是作为顶级模块。如果省略它，Firefox 就会给出错误“SyntaxError: import declarations may only appear at top level of a module。

+你导入模块功能的脚本基本是作为顶级模块。如果省略它，Firefox 就会给出错误“SyntaxError: import declarations may only appear at top level of a module。 -

你只能在模块内部使用 import 和export 语句；不是普通脚本文件。

+你只能在模块内部使用 `import` 和`export` 语句；不是普通脚本文件。 -
-

备注：您还可以将模块导入内部脚本，只要包含 type="module"，例如 <script type="module"> //include script here </script>。

-
+> **备注：** 你还可以将模块导入内部脚本，只要包含 `type="module"`，例如 ``。 -

其他模块与标准脚本的不同

+## 其他模块与标准脚本的不同 -
    -
  • 你需要注意本地测试 -- 如果你通过本地加载 HTML 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误，因为 JavaScript 模块安全性需要。你需要通过一个服务器来测试。
    • -
  • 另请注意，你可能会从模块内部定义的脚本部分获得与标准脚本中不同的行为。这是因为模块自动使用严格模式。
    • -
  • 加载一个模块脚本时不需要使用 defer 属性 (see <script> attributes) 模块会自动延迟加载。
    • -
  • 最后一个但不是不重要，你需要明白模块功能导入到单独的脚本文件的范围 -- 他们无法在全局获得。因此，你只能在导入这些功能的脚本文件中使用他们，你也无法通过 JavaScript console 中获取到他们，比如，在 DevTools 中你仍然能够获取到语法错误，但是你可能无法像你想的那样使用一些 debug 技术。
    • -
+- 你需要注意本地测试 -- 如果你通过本地加载 HTML 文件 (比如一个 `file://` 路径的文件), 你将会遇到 CORS 错误，因为 JavaScript 模块安全性需要。你需要通过一个服务器来测试。 +- 另请注意，你可能会从模块内部定义的脚本部分获得与标准脚本中不同的行为。这是因为模块自动使用严格模式。 +- 加载一个模块脚本时不需要使用 `defer` 属性 (see [` + + +

Enter your phone number (with area code) and then click "Check". +
The expected format is like ###-###-####.

+
+ +
+ + +``` + +{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}} diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md index 8490afa40df842..36e53448dd3e59 100644 --- a/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md +++ b/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md @@ -4,93 +4,136 @@ slug: Web/JavaScript/Guide/Regular_Expressions/Quantifiers translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers original_slug: Web/JavaScript/Guide/Regular_Expressions/量词 --- -

{{jsSidebar("JavaScript Guide")}}

+{{jsSidebar("JavaScript Guide")}} -

量词表示要匹配的字符或表达式的数量。

+量词表示要匹配的字符或表达式的数量。 -
{{EmbedInteractiveExample("pages/js/regexp-quantifiers.html", "taller")}}
+{{EmbedInteractiveExample("pages/js/regexp-quantifiers.html", "taller")}} -

类型

+## 类型 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CharactersMeaning
x* -

将前面的项“x”匹配 0 次或更多次。例如，/bo*/匹配“A ghost booooed”中的“boooo”和“A bird warbled”中的“b”，但在“A goat grunt”中没有匹配。

-
x+ -

将前一项“x”匹配 1 次或更多次。等价于{1,}。例如，/a+/匹配“candy”中的“a”和“caaaaaaandy”中的“a”。

-
x? -

将前面的项“x”匹配 0 或 1 次。例如，/e?le?/匹配 angel 中的 el 和 angle 中的 le。

- -

如果立即在任何量词*、+、?或{}之后使用，则使量词是非贪婪的 (匹配最小次数)，而不是默认的贪婪的 (匹配最大次数)。

-
x{n} -

其中“n”是一个正整数，与前一项“x”的 n 次匹配。例如，/a{2}/ 不匹配“candy”中的“a”，但它匹配“caandy”中的所有“a”，以及“caaandy”中的前两个“a”。

-
x{n,} -

其中，“n”是一个正整数，与前一项“x”至少匹配“n”次。例如，/a{2，}/不匹配“candy”中的“a”，但匹配“caandy”和“caaaaaaandy”中的所有 a。

-
x{n,m} -

其中，“n”是 0 或一个正整数，“m”是一个正整数，而 m > n 至少与前一项“x”匹配，最多与“m”匹配。例如，/a{1,3}/不匹配“cndy”中的“a”，“candy”中的“a”，“caandy”中的两个“a”，以及“caaaaaaandy”中的前三个“a”。注意，当匹配“caaaaaaandy”时，匹配的是“aaa”，即使原始字符串中有更多的“a”。

-
-

x*?
- x+?
- x??
- x{n}?
- x{n,}?
- x{n,m}?

- 		-

默认情况下，像 * 和 + 这样的量词是“贪婪的”，这意味着它们试图匹配尽可能多的字符串。?量词后面的字符使量词“非贪婪”：意思是它一旦找到匹配就会停止。例如，给定一个字符串“some <foo> <bar> new </bar> </foo> thing”:

- -
    -
  • /<.*>/ will match "<foo> <bar> new </bar> </foo>"
    • -
  • /<.*?>/ will match "<foo>"
    • -
-
CharactersMeaning
+ x* + +

+ 将前面的项“x”匹配 0 次或更多次。例如，/bo*/匹配“A ghost + booooed”中的“boooo”和“A bird warbled”中的“b”，但在“A goat + grunt”中没有匹配。 +

+
+ x+ + +

+ 将前一项“x”匹配 1 + 次或更多次。等价于{1,}。例如，/a+/匹配“candy”中的“a”和“caaaaaaandy”中的“a”。 +

+
+ x? + +

+ 将前面的项“x”匹配 0 或 1 次。例如，/e?le?/匹配 angel 中的 el 和 angle + 中的 le。 +

+

+ 如果立即在任何量词*、+、?或{}之后使用，则使量词是非贪婪的 + (匹配最小次数)，而不是默认的贪婪的 (匹配最大次数)。 +

+
+ x{n} + +

+ 其中“n”是一个正整数，与前一项“x”的 n 次匹配。例如，/a{2}/ 不匹配“candy”中的“a”，但它匹配“caandy”中的所有“a”，以及“caaandy”中的前两个“a”。 +

+
+ x{n,} + +

+ 其中，“n”是一个正整数，与前一项“x”至少匹配“n”次。例如，/a{2，}/不匹配“candy”中的“a”，但匹配“caandy”和“caaaaaaandy”中的所有 + a。 +

+
+ x{n,m} + +

+ 其中，“n”是 0 或一个正整数，“m”是一个正整数，而 m > n + 至少与前一项“x”匹配，最多与“m”匹配。例如，/a{1,3}/不匹配“cndy”中的“a”，“candy”中的“a”，“caandy”中的两个“a”，以及“caaaaaaandy”中的前三个“a”。注意，当匹配“caaaaaaandy”时，匹配的是“aaa”，即使原始字符串中有更多的“a”。 +

+
+

+ x*?
x+?
x??
x{n}?
x{n,}?
x{n,m}? +

+ 		+

+ 默认情况下，像 * 和 + + 这样的量词是“贪婪的”，这意味着它们试图匹配尽可能多的字符串。?量词后面的字符使量词“非贪婪”：意思是它一旦找到匹配就会停止。例如，给定一个字符串“some + <foo> <bar> new </bar> </foo> thing”: +

+
    +
  • + /<.*>/ will match "<foo> <bar> new + </bar> </foo>" +
    • +
  • /<.*?>/ will match "<foo>"
    • +
+
-

举例说明

+## 举例说明 -

重复模式

+### 重复模式 -
var wordEndingWithAs = /\w+a+/;
+```js
+var wordEndingWithAs = /\w+a+/;
 var delicateMessage = "This is Spartaaaaaaa";
 
-console.table(delicateMessage.match(wordEndingWithAs)); // [ "Spartaaaaaaa" ]
+console.table(delicateMessage.match(wordEndingWithAs)); // [ "Spartaaaaaaa" ] +``` -

计算字符集

+### 计算字符集 -
var singleLetterWord = /\b\w\b/g;
+```js
+var singleLetterWord = /\b\w\b/g;
 var notSoLongWord = /\b\w{1,6}\b/g;
 var loooongWord = /\b\w{13,}\b/g;
 
@@ -99,11 +142,12 @@ var sentence = "Why do I have to learn multiplication table?";
 console.table(sentence.match(singleLetterWord)); // ["I"]
 console.table(sentence.match(notSoLongWord));    // [ "Why", "do", "I", "have", "to", "learn", "table" ]
 console.table(sentence.match(loooongWord));      // ["multiplication"] 可选可选字符
-
+``` -

可选字符

+### 可选字符 -
var britishText = "He asked his neighbour a favour.";
+```js
+var britishText = "He asked his neighbour a favour.";
 var americanText = "He asked his neighbor a favor.";
 
 var regexpEnding = /\w+ou?r/g;
@@ -117,11 +161,12 @@ console.table(britishText.match(regexpEnding));
 
 console.table(americanText.match(regexpEnding));
 // ["neighbor", "favor"]
-
+``` -

贪婪 与 非贪婪的

+### 贪婪 与 非贪婪的 -
var text = "I must be getting somewhere near the centre of the earth.";
+```js
+var text = "I must be getting somewhere near the centre of the earth.";
 var greedyRegexp = /[\w ]+/;
 // [\w ]      a letter of the latin alphabet or a whitespace
 //      +     one or several times
@@ -134,19 +179,15 @@ var nonGreedyRegexp = /[\w ]+?/; // Notice the question mark
 console.log(text.match(nonGreedyRegexp));
 // "I"
 // The match is the smallest one possible
-
- -

See also

- - +``` + +## See also + +- [Regular expressions guide](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions) + + - [Character classes](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes) + - [Assertions](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions) + - [Unicode property escapes](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes) + - [Groups and ranges](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges) + +- [The `RegExp()` constructor](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp) diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md b/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md index 7daf8eb7357d83..b88c4438f351e2 100644 --- a/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md +++ b/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escape {{EmbedInteractiveExample("pages/js/regexp-unicode-property-escapes.html", "taller")}} -> **备注：**使用 Unicode 属性转义依靠 [`\u` 标识](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode)，`\u` 表示该字符串被视为一串 Unicode 代码点。参考 [`RegExp.prototype.nicode`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode). +> **备注：** 使用 Unicode 属性转义依靠 [`\u` 标识](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode)，`\u` 表示该字符串被视为一串 Unicode 代码点。参考 [`RegExp.prototype.nicode`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode). > **备注：** 某些 Unicode 属性比[字符类](/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes)(如 `\w` 只匹配拉丁字母 `a` 到 `z`) 包含更多的字符 ，但后者浏览器兼容性更好 (截至 2020 一月). diff --git a/files/zh-cn/web/javascript/guide/text_formatting/index.md b/files/zh-cn/web/javascript/guide/text_formatting/index.md index 19291b85367337..bc47cc9a906463 100644 --- a/files/zh-cn/web/javascript/guide/text_formatting/index.md +++ b/files/zh-cn/web/javascript/guide/text_formatting/index.md @@ -6,194 +6,164 @@ tags: - JavaScript translation_of: Web/JavaScript/Guide/Text_formatting --- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}} -

本章介绍在 Javascript 中如何使用字符串与文本内容。

+本章介绍在 Javascript 中如何使用字符串与文本内容。 -

字符串

+## 字符串 -

JavaScript 中的 {{Glossary("String")}} 类型用于表示文本型的数据。它是由无符号整数值（16bit）作为元素而组成的集合。字符串中的每个元素在字符串中占据一个位置. 第一个元素的 index 值是 0，下一个元素的 index 值是 1，以此类推。字符串的长度就是字符串中所含的元素个数.你可以通过 String 字面值或者 String 对象两种方式创建一个字符串。

+JavaScript 中的 {{Glossary("String")}} 类型用于表示文本型的数据。它是由无符号整数值（16bit）作为元素而组成的集合。字符串中的每个元素在字符串中占据一个位置. 第一个元素的 index 值是 0，下一个元素的 index 值是 1，以此类推。字符串的长度就是字符串中所含的元素个数.你可以通过 String 字面值或者 String 对象两种方式创建一个字符串。 -

String 字面量

+### String 字面量 -

可以使用单引号或双引号创建简单的字符串：

+可以使用单引号或双引号创建简单的字符串： -
'foo'
-"bar"
+```js +'foo' +"bar" +``` -

可以使用转义序列来创建更复杂的字符串：

+可以使用转义序列来创建更复杂的字符串： -

16 进制转义序列

+#### 16 进制转义序列 -

\x之后的数值将被认为是一个 16 进制数。

+\x 之后的数值将被认为是一个 16 进制数。 -
'\xA9' // "©"
-
+```js +'\xA9' // "©" +``` -

Unicode 转义序列

+#### Unicode 转义序列 -

Unicode 转义序列在\u之后需要至少 4 个字符。

+Unicode 转义序列在\u 之后需要至少 4 个字符。 -
'\u00A9' // "©"
+```js +'\u00A9' // "©" +``` -

Unicode 字元逸出

+#### Unicode 字元逸出 -

这是 ECMAScript 6 中的新特性。有了 Unicode 字元逸出，任何字符都可以用 16 进制数转义，这使得通过 Unicode 转义表示大于0x10FFFF的字符成为可能。使用简单的 Unicode 转义时通常需要分别写字符相应的两个部分（译注：大于 0x10FFFF 的字符需要拆分为相应的两个小于 0x10FFFF 的部分）来达到同样的效果。

+这是 ECMAScript 6 中的新特性。有了 Unicode 字元逸出，任何字符都可以用 16 进制数转义，这使得通过 Unicode 转义表示大于`0x10FFFF`的字符成为可能。使用简单的 Unicode 转义时通常需要分别写字符相应的两个部分（译注：大于 0x10FFFF 的字符需要拆分为相应的两个小于 0x10FFFF 的部分）来达到同样的效果。 -

请参阅 {{jsxref("String.fromCodePoint()")}} 或 {{jsxref("String.prototype.codePointAt()")}}。

+请参阅 {{jsxref("String.fromCodePoint()")}} 或 {{jsxref("String.prototype.codePointAt()")}}。 -
'\u{2F804}'
+```js
+'\u{2F804}'
 
 // the same with simple Unicode escapes
-'\uD87E\uDC04'
+'\uD87E\uDC04' +``` -

字符串对象

+### 字符串对象 -

{{jsxref("String")}} 对象是对原始 string 类型的封装 .

+{{jsxref("String")}} 对象是对原始 string 类型的封装 . -
const foo = new String('foo'); // 创建一个 String 对象
+```js
+const foo = new String('foo'); // 创建一个 String 对象
 console.log(foo); // 输出: [String: 'foo']
-typeof foo; // 返回 'object'
+typeof foo; // 返回 'object' +``` -

你可以在 String 字面值上使用 String 对象的任何方法—JavaScript 自动把 String 字面值转换为一个临时的 String 对象，然后调用其相应方法，最后丢弃此临时对象。在 String 字面值上也可以使用 String.length 属性。

+你可以在 String 字面值上使用 String 对象的任何方法—JavaScript 自动把 String 字面值转换为一个临时的 String 对象，然后调用其相应方法，最后丢弃此临时对象。在 String 字面值上也可以使用 String.length 属性。 -

除非必要， 应该尽量使用 String 字面值，因为 String 对象的某些行为可能并不与直觉一致。举例：

+除非必要， 应该尽量使用 String 字面值，因为 String 对象的某些行为可能并不与直觉一致。举例： -
const firstString = '2 + 2'; //创建一个字符串字面量
+```js
+const firstString = '2 + 2'; //创建一个字符串字面量
 const secondString = new String('2 + 2'); // 创建一个字符串对象
 eval(firstString); // 返回数字 4
-eval(secondString); // 返回包含 "2 + 2" 的字符串对象
+eval(secondString); // 返回包含 "2 + 2" 的字符串对象 +``` -

String 对象有一个属性 length，标识了字符串中 UTF-16 的码点个数。举例，下面的代码把 13 赋值给了helloLength，因为 "Hello, World!" 包含 13 个字符，每个字符用一个 UTF-16 码点表示。你可以通过数组的方式访问每一个码点，但你不能修改每个字符，因为字符串是不变的类数组对象：

+`String` 对象有一个属性 `length`，标识了字符串中 UTF-16 的码点个数。举例，下面的代码把 13 赋值给了`helloLength`，因为 "Hello, World!" 包含 13 个字符，每个字符用一个 UTF-16 码点表示。你可以通过数组的方式访问每一个码点，但你不能修改每个字符，因为字符串是不变的类数组对象： -
const hello = 'Hello, World!';
+```js
+const hello = 'Hello, World!';
 const helloLength = hello.length;
 hello[0] = 'L'; // 无效，因为字符串是不变的
-hello[0]; // 返回 "H"
- -

Characters whose Unicode scalar values are greater than U+FFFF (such as some rare Chinese/Japanese/Korean/Vietnamese characters and some emoji) are stored in UTF-16 with two surrogate code units each. For example, a string containing the single character U+1F600 "Emoji grinning face" will have length 2. Accessing the individual code units in such a string using brackets may have undesirable consequences such as the formation of strings with unmatched surrogate code units, in violation of the Unicode standard. (Examples should be added to this page after MDN bug 857438 is fixed.) See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.

- -

String对象有许多方法：举例来说有些方法返回字符串本身的变体，如 substring 和toUpperCase.

- -

下表总结了 {{jsxref("String")}} 对象的方法。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

String 对象方法

-
方法描述
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}返回字符串指定位置的字符或者字符编码。
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}分别返回字符串中指定子串的位置或最后位置。
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}返回字符串是否以指定字符串开始、结束或包含指定字符串。
{{jsxref("String.concat", "concat")}}连接两个字符串并返回新的字符串。
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}从指定的 Unicode 值序列构造一个字符串。这是一个 String 类方法，不是实例方法。
{{jsxref("String.split", "split")}}通过将字符串分离成一个个子串来把一个 String 对象分裂到一个字符串数组中。
{{jsxref("String.slice", "slice")}}从一个字符串提取片段并作为新字符串返回。
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}分别通过指定起始和结束位置，起始位置和长度来返回字符串的指定子集。
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}通过正则表达式来工作。
{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}} -

分别返回字符串的小写表示和大写表示。

-
{{jsxref("String.normalize", "normalize")}}按照指定的一种 Unicode 正规形式将当前字符串正规化。
{{jsxref("String.repeat", "repeat")}}将字符串内容重复指定次数后返回。
{{jsxref("String.trim", "trim")}}去掉字符串开头和结尾的空白字符。
- -

多行模板字符串

- -

模板字符串是一种允许内嵌表达式的 String 字面值。可以用它实现多行字符串或者字符串内插等特性。

- -

模板字符串使用反勾号 (` `) (grave accent) 包裹内容而不是单引号或双引号。模板字符串可以包含占位符. 占位符用美元符号和花括号标识 (${expression}).

- -

多行

- -

源代码中插入的任何新行开始字符都作为模板字符串的内容。使用一般的字符串时，为了创建多行的字符串不得不用如下语法：

- -
console.log("string text line 1\n\
+hello[0]; // 返回 "H"
+```
+
+Characters whose Unicode scalar values are greater than U+FFFF (such as some rare Chinese/Japanese/Korean/Vietnamese characters and some emoji) are stored in UTF-16 with two surrogate code units each. For example, a string containing the single character U+1F600 "Emoji grinning face" will have length 2. Accessing the individual code units in such a string using brackets may have undesirable consequences such as the formation of strings with unmatched surrogate code units, in violation of the Unicode standard. (Examples should be added to this page after MDN bug 857438 is fixed.) See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.
+
+`String`对象有许多方法：举例来说有些方法返回字符串本身的变体，如 `substring` 和`toUpperCase`.
+
+下表总结了 {{jsxref("String")}} 对象的方法。
+
+| 方法                                                                                                                                                                             | 描述                                                                          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| {{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}} | 返回字符串指定位置的字符或者字符编码。                                        |
+| {{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}                                                           | 分别返回字符串中指定子串的位置或最后位置。                                    |
+| {{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}} | 返回字符串是否以指定字符串开始、结束或包含指定字符串。                        |
+| {{jsxref("String.concat", "concat")}}                                                                                                                                 | 连接两个字符串并返回新的字符串。                                              |
+| {{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}                                           | 从指定的 Unicode 值序列构造一个字符串。这是一个 String 类方法，不是实例方法。 |
+| {{jsxref("String.split", "split")}}                                                                                                                                 | 通过将字符串分离成一个个子串来把一个 String 对象分裂到一个字符串数组中。      |
+| {{jsxref("String.slice", "slice")}}                                                                                                                                 | 从一个字符串提取片段并作为新字符串返回。                                      |
+| {{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}                                                                       | 分别通过指定起始和结束位置，起始位置和长度来返回字符串的指定子集。            |
+| {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}                         | 通过正则表达式来工作。                                                        |
+| {{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}                                               | 分别返回字符串的小写表示和大写表示。                                          |
+| {{jsxref("String.normalize", "normalize")}}                                                                                                                         | 按照指定的一种 Unicode 正规形式将当前字符串正规化。                           |
+| {{jsxref("String.repeat", "repeat")}}                                                                                                                                 | 将字符串内容重复指定次数后返回。                                              |
+| {{jsxref("String.trim", "trim")}}                                                                                                                                     | 去掉字符串开头和结尾的空白字符。                                              |
+
+### 多行模板字符串
+
+模板字符串是一种允许内嵌表达式的 String 字面值。可以用它实现多行字符串或者字符串内插等特性。
+
+模板字符串使用反勾号 (\` \`) ([grave accent](https://en.wikipedia.org/wiki/Grave_accent)) 包裹内容而不是单引号或双引号。模板字符串可以包含占位符. 占位符用美元符号和花括号标识 (`${expression}`).
+
+#### 多行
+
+源代码中插入的任何新行开始字符都作为模板字符串的内容。使用一般的字符串时，为了创建多行的字符串不得不用如下语法：
+
+```js
+console.log("string text line 1\n\
 string text line 2");
 // "string text line 1
-// string text line 2"
+// string text line 2" +``` -

为了实现同样效果的多行字符串，现在可以写成如下形式：

+为了实现同样效果的多行字符串，现在可以写成如下形式： -
console.log(`string text line 1
+```js
+console.log(`string text line 1
 string text line 2`);
 // "string text line 1
-// string text line 2"
+// string text line 2" +``` -

嵌入表达式

+#### 嵌入表达式 -

为了在一般的字符串中嵌入表达式，需要使用如下语法：

+为了在一般的字符串中嵌入表达式，需要使用如下语法： -
const five = 5;
+```js
+const five = 5;
 const ten = 10;
 console.log('Fifteen is ' + (five + ten) + ' and not ' + (2 * five + ten) + '.');
-// "Fifteen is 15 and not 20."
+// "Fifteen is 15 and not 20." +``` -

现在，使用模板字符串，可以使用语法糖让类似功能的实现代码更具可读性：

+现在，使用模板字符串，可以使用语法糖让类似功能的实现代码更具可读性： -
const five = 5;
+```js
+const five = 5;
 const ten = 10;
 console.log(`Fifteen is ${five + ten} and not ${2 * five + ten}.`);
-// "Fifteen is 15 and not 20."
+// "Fifteen is 15 and not 20." +``` -

更多信息，请阅读 JavaScript reference 中的 Template literals。

+更多信息，请阅读 [JavaScript reference](/zh-CN/docs/Web/JavaScript/Reference) 中的 [Template literals](/zh-CN/docs/Web/JavaScript/Reference/Template_literals)。 -

国际化

+## 国际化 -

{{jsxref("Intl")}} 对象是 ECMAScript 国际化 API 的命名空间，它提供了语言敏感的字符串比较，数字格式化和日期时间格式化功能. {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, 和 {{jsxref("DateTimeFormat")}} 对象的构造函数是Intl对象的属性。

+{{jsxref("Intl")}} 对象是 ECMAScript 国际化 API 的命名空间，它提供了语言敏感的字符串比较，数字格式化和日期时间格式化功能. {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, 和 {{jsxref("DateTimeFormat")}} 对象的构造函数是`Intl`对象的属性。 -

日期和时间格式化

+### 日期和时间格式化 -

{{jsxref("DateTimeFormat")}} 对象在日期和时间的格式化方面很有用。下面的代码把一个日期格式化为美式英语格式. (不同时区结果不同.)

+{{jsxref("DateTimeFormat")}} 对象在日期和时间的格式化方面很有用。下面的代码把一个日期格式化为美式英语格式. (不同时区结果不同.) -
const msPerDay = 24 * 60 * 60 * 1000;
+```js
+const msPerDay = 24 * 60 * 60 * 1000;
 
 // July 17, 2014 00:00:00 UTC.
 const july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));//2014-1970=44 年
@@ -205,13 +175,14 @@ const options = { year: "2-digit", month: "2-digit", day: "2-digit",
 const americanDateTime = new Intl.DateTimeFormat("en-US", options).format;
 
 console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
-
+``` -

数字格式化

+### 数字格式化 -

{{jsxref("NumberFormat")}} 对象在数字的格式化方面很有用，比如货币数量值。

+{{jsxref("NumberFormat")}} 对象在数字的格式化方面很有用，比如货币数量值。 -
var gasPrice = new Intl.NumberFormat("en-US",
+```js
+var gasPrice = new Intl.NumberFormat("en-US",
                         { style: "currency", currency: "USD",
                           minimumFractionDigits: 3 });
 
@@ -221,32 +192,34 @@ var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
                         { style: "currency", currency: "CNY" });
 
 console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一，三一四。二五
-
+``` -

定序

+### 定序 -

{{jsxref("Collator")}} 对象在字符串比较和排序方面很有用。

+{{jsxref("Collator")}} 对象在字符串比较和排序方面很有用。 -

举例，德语中有两种不同的排序方式 电话本（phonebook） 和 字典（dictionary）. 电话本排序强调发音，比如在排序前 “ä”, “ö”等被扩展为 “ae”, “oe”等发音。

+举例，德语中*有两种不同的排序方式 电话本（phonebook）* 和 字典（_dictionary）_. 电话本排序强调发音，比如在排序前 “ä”, “ö”等被扩展为 “ae”, “oe”等发音。 -
var names = ["Hochberg", "Hönigswald", "Holzman"];
+```js
+var names = ["Hochberg", "Hönigswald", "Holzman"];
 
 var germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");
 
 // as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
 console.log(names.sort(germanPhonebook.compare).join(", "));
 // logs "Hochberg, Hönigswald, Holzman"
-
+``` -

有些德语词包含变音，所以在字典中忽略变音进行排序是合理的 (除非待排序的单词只有变音部分不同：schon 先于 schön).

+有些德语词包含变音，所以在字典中忽略变音进行排序是合理的 (除非待排序的单词只有变音部分不同：_schon_ 先于 _schön_). -
var germanDictionary = new Intl.Collator("de-DE-u-co-dict");
+```js
+var germanDictionary = new Intl.Collator("de-DE-u-co-dict");
 
 // as if sorting ["Hochberg", "Honigswald", "Holzman"]:
 console.log(names.sort(germanDictionary.compare).join(", "));
 // logs "Hochberg, Holzman, Hönigswald"
-
+``` -

关于{{jsxref("Intl")}} API 的更多信息，请参考 Introducing the JavaScript Internationalization API。

+关于{{jsxref("Intl")}} API 的更多信息，请参考 [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/)。 -
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
+{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}} diff --git a/files/zh-cn/web/javascript/guide/using_promises/index.md b/files/zh-cn/web/javascript/guide/using_promises/index.md index d6ac04198b1078..5a6a002741530c 100644 --- a/files/zh-cn/web/javascript/guide/using_promises/index.md +++ b/files/zh-cn/web/javascript/guide/using_promises/index.md @@ -10,17 +10,18 @@ tags: - 指南 translation_of: Web/JavaScript/Guide/Using_promises --- -
{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}
+{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}} -

{{jsxref("Promise")}} 是一个对象，它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象，所以本教程将首先说明怎样使用 Promise，再说明如何创建 Promise。

+{{jsxref("Promise")}} 是一个对象，它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象，所以本教程将首先说明怎样使用 Promise，再说明如何创建 Promise。 -

本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了。

+本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了。 -

假设现在有一个名为 createAudioFileAsync() 的函数，它接收一些配置和两个回调函数，然后异步地生成音频文件。一个回调函数在文件成功创建时被调用，另一个则在出现异常时被调用。

+假设现在有一个名为 `createAudioFileAsync()` 的函数，它接收一些配置和两个回调函数，然后异步地生成音频文件。一个回调函数在文件成功创建时被调用，另一个则在出现异常时被调用。 -

以下为使用 createAudioFileAsync() 的示例：

+以下为使用 `createAudioFileAsync()` 的示例： -
// 成功的回调函数
+```js
+// 成功的回调函数
 function successCallback(result) {
   console.log("音频文件创建成功: " + result);
 }
@@ -30,67 +31,73 @@ function failureCallback(error) {
   console.log("音频文件创建失败: " + error);
 }
 
-createAudioFileAsync(audioSettings, successCallback, failureCallback)
+createAudioFileAsync(audioSettings, successCallback, failureCallback) +``` -

更现代的函数会返回一个 Promise 对象，使得你可以将你的回调函数绑定在该 Promise 上。

+更现代的函数会返回一个 Promise 对象，使得你可以将你的回调函数绑定在该 Promise 上。 -

如果函数 createAudioFileAsync() 被重写为返回 Promise 的形式，那么我们可以像下面这样简单地调用它：

+如果函数 `createAudioFileAsync()` 被重写为返回 Promise 的形式，那么我们可以像下面这样简单地调用它： -
const promise = createAudioFileAsync(audioSettings);
+```js
+const promise = createAudioFileAsync(audioSettings);
 promise.then(successCallback, failureCallback);
-
+``` -

或者简写为：

+或者简写为： -
createAudioFileAsync(audioSettings).then(successCallback, failureCallback);
-
+```js +createAudioFileAsync(audioSettings).then(successCallback, failureCallback); +``` -

我们把这个称为 异步函数调用，这种形式有若干优点，下面我们将会逐一讨论。

+我们把这个称为 _异步函数调用_，这种形式有若干优点，下面我们将会逐一讨论。 -

约定

+## 约定 -

不同于“老式”的传入回调，在使用 Promise 时，会有以下约定：

+不同于“老式”的传入回调，在使用 Promise 时，会有以下约定： -
    -
  • 在本轮 事件循环 运行完成之前，回调函数是不会被调用的。
    • -
  • 即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用。
    • -
  • 通过多次调用 then() 可以添加多个回调函数，它们会按照插入顺序进行执行。
    • -
+- 在本轮 [事件循环](/zh-CN/docs/Web/JavaScript/EventLoop#执行至完成) 运行完成之前，回调函数是不会被调用的。 +- 即使异步操作已经完成（成功或失败），在这之后通过 [`then()` ](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then)添加的回调函数也会被调用。 +- 通过多次调用 [`then()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 可以添加多个回调函数，它们会按照插入顺序进行执行。 -

Promise 很棒的一点就是链式调用（chaining）。

+Promise 很棒的一点就是**链式调用**（**chaining**）。 -

链式调用

+## 链式调用 -

连续执行两个或者多个异步操作是一个常见的需求，在上一个操作执行成功之后，开始下一个的操作，并带着上一步操作所返回的结果。我们可以通过创造一个 Promise 链来实现这种需求。

+连续执行两个或者多个异步操作是一个常见的需求，在上一个操作执行成功之后，开始下一个的操作，并带着上一步操作所返回的结果。我们可以通过创造一个 **Promise 链**来实现这种需求。 -

见证奇迹的时刻：then() 函数会返回一个和原来不同的新的 Promise：

+见证奇迹的时刻：`then()` 函数会返回一个和原来不同的**新的 Promise**： -
const promise = doSomething();
+```js
+const promise = doSomething();
 const promise2 = promise.then(successCallback, failureCallback);
-
+``` -

或者

+或者 -
const promise2 = doSomething().then(successCallback, failureCallback);
+```js +const promise2 = doSomething().then(successCallback, failureCallback); +``` -

promise2 不仅表示 doSomething() 函数的完成，也代表了你传入的 successCallback 或者 failureCallback 的完成，这两个函数也可以返回一个 Promise 对象，从而形成另一个异步操作，这样的话，在 promise2 上新增的回调函数会排在这个 Promise 对象的后面。

+`promise2` 不仅表示 `doSomething()` 函数的完成，也代表了你传入的 `successCallback` 或者 `failureCallback` 的完成，这两个函数也可以返回一个 Promise 对象，从而形成另一个异步操作，这样的话，在 `promise2` 上新增的回调函数会排在这个 Promise 对象的后面。 -

基本上，每一个 Promise 都代表了链中另一个异步过程的完成。

+基本上，每一个 Promise 都代表了链中另一个异步过程的完成。 -

在过去，要想做多重的异步操作，会导致经典的回调地狱：

+在过去，要想做多重的异步操作，会导致经典的回调地狱： -
doSomething(function(result) {
+```js
+doSomething(function(result) {
   doSomethingElse(result, function(newResult) {
     doThirdThing(newResult, function(finalResult) {
       console.log('Got the final result: ' + finalResult);
     }, failureCallback);
   }, failureCallback);
 }, failureCallback);
-
+``` -

现在，我们可以把回调绑定到返回的 Promise 上，形成一个 Promise 链：

+现在，我们可以把回调绑定到返回的 Promise 上，形成一个 Promise 链： -
doSomething().then(function(result) {
+```js
+doSomething().then(function(result) {
   return doSomethingElse(result);
 })
 .then(function(newResult) {
@@ -100,67 +107,71 @@ const promise2 = promise.then(successCallback, failureCallback);
   console.log('Got the final result: ' + finalResult);
 })
 .catch(failureCallback);
-
+``` -

then 里的参数是可选的，catch(failureCallback) 是 then(null, failureCallback) 的缩略形式。如下所示，我们也可以用箭头函数来表示：

+then 里的参数是可选的，`catch(failureCallback)` 是 `then(null, failureCallback)` 的缩略形式。如下所示，我们也可以用[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)来表示： -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => {
+```js
+doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => {
   console.log(`Got the final result: ${finalResult}`);
 })
 .catch(failureCallback);
-
+``` -

注意：一定要有返回值，否则，callback 将无法获取上一个 Promise 的结果。(如果使用箭头函数，() => x 比 () => { return x; } 更简洁一些，但后一种保留 return 的写法才支持使用多个语句。）。

+**注意：**一定要有返回值，否则，callback 将无法获取上一个 Promise 的结果。(如果使用箭头函数，`() => x` 比 `() => { return x; }` 更简洁一些，但后一种保留 `return` 的写法才支持使用多个语句。）。 -

Catch 的后续链式操作

+### Catch 的后续链式操作 -

有可能会在一个回调失败之后继续使用链式操作，即，使用一个 catch，这对于在链式操作中抛出一个失败之后，再次进行新的操作会很有用。请阅读下面的例子：

+有可能会在一个回调失败之后继续使用链式操作，即，使用一个 `catch`，这对于在链式操作中抛出一个失败之后，再次进行新的操作会很有用。请阅读下面的例子： -
new Promise((resolve, reject) => {
+```js
+new Promise((resolve, reject) => {
     console.log('初始化');
 
     resolve();
 })
-.then(() => {
+.then(() => {
     throw new Error('有哪里不对了');
 
     console.log('执行「这个」”');
 })
-.catch(() => {
+.catch(() => {
     console.log('执行「那个」');
 })
-.then(() => {
+.then(() => {
     console.log('执行「这个」，无论前面发生了什么');
 });
-
+``` -

输出结果如下：

+输出结果如下： -
初始化
+```plain
+初始化
 执行“那个”
 执行“这个”，无论前面发生了什么
-
+``` -

注意：因为抛出了错误 有哪里不对了，所以前一个 执行「这个」 没有被输出。

+**注意：**因为抛出了错误 **有哪里不对了**，所以前一个 **执行「这个」** 没有被输出。 -

错误传递

+## 错误传递 -

在之前的回调地狱示例中，你可能记得有 3 次 failureCallback 的调用，而在 Promise 链中只有尾部的一次调用。

+在之前的回调地狱示例中，你可能记得有 3 次 `failureCallback` 的调用，而在 Promise 链中只有尾部的一次调用。 -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => console.log(`Got the final result: ${finalResult}`))
+```js
+doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => console.log(`Got the final result: ${finalResult}`))
 .catch(failureCallback);
+```
 
-
- -

通常，一遇到异常抛出，浏览器就会顺着 Promise 链寻找下一个 onRejected 失败回调函数或者由 .catch() 指定的回调函数。这和以下同步代码的工作原理（执行过程）非常相似。

+通常，一遇到异常抛出，浏览器就会顺着 Promise 链寻找下一个 `onRejected` 失败回调函数或者由 `.catch()` 指定的回调函数。这和以下同步代码的工作原理（执行过程）非常相似。 -
try {
+```js
+try {
   let result = syncDoSomething();
   let newResult = syncDoSomethingElse(result);
   let finalResult = syncDoThirdThing(newResult);
@@ -168,11 +179,12 @@ const promise2 = promise.then(successCallback, failureCallback);
 } catch(error) {
   failureCallback(error);
 }
-
+``` -

在 ECMAScript 2017 标准的 async/await 语法糖中，这种异步代码的对称性得到了极致的体现：

+在 ECMAScript 2017 标准的 [`async/await`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function) 语法糖中，这种异步代码的对称性得到了极致的体现： -
async function foo() {
+```js
+async function foo() {
   try {
     const result = await doSomething();
     const newResult = await doSomethingElse(result);
@@ -181,179 +193,198 @@ const promise2 = promise.then(successCallback, failureCallback);
   } catch(error) {
     failureCallback(error);
   }
-}
+} +``` -

这个例子是在 Promise 的基础上构建的，例如，doSomething() 与之前的函数是相同的。你可以在这里阅读更多的与此语法相关的文章。

+这个例子是在 Promise 的基础上构建的，例如，`doSomething()` 与之前的函数是相同的。你可以在[这里](https://developers.google.com/web/fundamentals/getting-started/primers/async-functions)阅读更多的与此语法相关的文章。 -

通过捕获所有的错误，甚至抛出异常和程序错误，Promise 解决了回调地狱的基本缺陷。这对于构建异步操作的基础功能而言是很有必要的。

+通过捕获所有的错误，甚至抛出异常和程序错误，Promise 解决了回调地狱的基本缺陷。这对于构建异步操作的基础功能而言是很有必要的。 -

Promise 拒绝事件

+## Promise 拒绝事件 -

当 Promise 被拒绝时，会有下文所述的两个事件之一被派发到全局作用域（通常而言，就是{{domxref("window")}}；如果是在 web worker 中使用的话，就是 {{domxref("Worker")}} 或者其他 worker-based 接口）。这两个事件如下所示：

+当 Promise 被拒绝时，会有下文所述的两个事件之一被派发到全局作用域（通常而言，就是{{domxref("window")}}；如果是在 web worker 中使用的话，就是 {{domxref("Worker")}} 或者其他 worker-based 接口）。这两个事件如下所示： -
-
{{domxref("Window.rejectionhandled_event", "rejectionhandled")}}
-
当 Promise 被拒绝、并且在 reject 函数处理该 rejection 之后会派发此事件。
-
{{domxref("Window.unhandledrejection_event", "unhandledrejection")}}
-
当 Promise 被拒绝，但没有提供 reject 函数来处理该 rejection 时，会派发此事件。
-
+- {{domxref("Window.rejectionhandled_event", "rejectionhandled")}} + - : 当 Promise 被拒绝、并且在 `reject` 函数处理该 rejection 之后会派发此事件。 +- {{domxref("Window.unhandledrejection_event", "unhandledrejection")}} + - : 当 Promise 被拒绝，但没有提供 `reject` 函数来处理该 rejection 时，会派发此事件。 -

以上两种情况中，{{domxref("PromiseRejectionEvent")}} 事件都有两个属性，一个是 {{domxref("PromiseRejectionEvent.promise", "promise")}} 属性，该属性指向被驳回的 Promise，另一个是 {{domxref("PromiseRejectionEvent.reason", "reason")}} 属性，该属性用来说明 Promise 被驳回的原因。

+以上两种情况中，{{domxref("PromiseRejectionEvent")}} 事件都有两个属性，一个是 {{domxref("PromiseRejectionEvent.promise", "promise")}} 属性，该属性指向被驳回的 Promise，另一个是 {{domxref("PromiseRejectionEvent.reason", "reason")}} 属性，该属性用来说明 Promise 被驳回的原因。 -

因此，我们可以通过以上事件为 Promise 失败时提供补偿处理，也有利于调试 Promise 相关的问题。在每一个上下文中，该处理都是全局的，因此不管源码如何，所有的错误都会在同一个处理函数中被捕捉并处理。

+因此，我们可以通过以上事件为 Promise 失败时提供补偿处理，也有利于调试 Promise 相关的问题。在每一个上下文中，该处理都是全局的，因此不管源码如何，所有的错误都会在同一个处理函数中被捕捉并处理。 -

一个特别有用的例子：当你使用 {{Glossary("Node.js")}} 时，有些依赖模块可能会有未被处理的 rejected promises，这些都会在运行时打印到控制台。你可以在自己的代码中捕捉这些信息，然后添加与 {{domxref("Window.unhandledrejection_event", "unhandledrejection")}} 相应的处理函数来做分析和处理，或只是为了让你的输出更整洁。举例如下：

+一个特别有用的例子：当你使用 {{Glossary("Node.js")}} 时，有些依赖模块可能会有未被处理的 rejected promises，这些都会在运行时打印到控制台。你可以在自己的代码中捕捉这些信息，然后添加与 {{domxref("Window.unhandledrejection_event", "unhandledrejection")}} 相应的处理函数来做分析和处理，或只是为了让你的输出更整洁。举例如下： -
window.addEventListener("unhandledrejection", event => {
+```js
+window.addEventListener("unhandledrejection", event => {
   /* 你可以在这里添加一些代码，以便检查
      event.promise 中的 promise 和
      event.reason 中的 rejection 原因 */
 
   event.preventDefault();
 }, false);
-
+``` -

调用 event 的 {{domxref("Event.preventDefault", "preventDefault()")}} 方法是为了告诉 JavaScript 引擎当 Promise 被拒绝时不要执行默认操作，默认操作一般会包含把错误打印到控制台，Node 就是如此的。

+调用 event 的 {{domxref("Event.preventDefault", "preventDefault()")}} 方法是为了告诉 JavaScript 引擎当 Promise 被拒绝时不要执行默认操作，默认操作一般会包含把错误打印到控制台，Node 就是如此的。 -

理想情况下，在忽略这些事件之前，我们应该检查所有被拒绝的 Promise，来确认这不是代码中的 bug。

+理想情况下，在忽略这些事件之前，我们应该检查所有被拒绝的 Promise，来确认这不是代码中的 bug。 -

在旧式回调 API 中创建 Promise

+## 在旧式回调 API 中创建 Promise -

可以通过 Promise 的构造器从零开始创建 {{jsxref("Promise")}}。 这种方式（通过构造器的方式）应当只在封装旧 API 的时候用到。

+可以通过 Promise 的构造器从零开始创建 {{jsxref("Promise")}}。 这种方式（通过构造器的方式）应当只在封装旧 API 的时候用到。 -

理想状态下，所有的异步函数都已经返回 Promise 了。但有一些 API 仍然使用旧方式来传入的成功（或者失败）的回调。典型的例子就是 {{domxref("WindowTimers.setTimeout", "setTimeout()")}} 函数：

+理想状态下，所有的异步函数都已经返回 Promise 了。但有一些 API 仍然使用旧方式来传入的成功（或者失败）的回调。典型的例子就是 {{domxref("WindowTimers.setTimeout", "setTimeout()")}} 函数： -
setTimeout(() => saySomething("10 seconds passed"), 10000);
-
+```js +setTimeout(() => saySomething("10 seconds passed"), 10000); +``` -

混用旧式回调和 Promise 可能会造成运行时序问题。如果 saySomething 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 setTimeout。

+混用旧式回调和 Promise 可能会造成运行时序问题。如果 `saySomething` 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 `setTimeout`。 -

幸运地是，我们可以用 Promise 来封装它。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们：

+幸运地是，我们可以用 Promise 来封装它。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们： -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+```js
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
 
-wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
-
+wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback); +``` -

通常，Promise 的构造器接收一个执行函数 (executor)，我们可以在这个执行函数里手动地 resolve 和 reject 一个 Promise。既然 setTimeout 并不会真的执行失败，那么我们可以在这种情况下忽略 reject。

+通常，Promise 的构造器接收一个执行函数 (executor)，我们可以在这个执行函数里手动地 resolve 和 reject 一个 Promise。既然 `setTimeout` 并不会真的执行失败，那么我们可以在这种情况下忽略 reject。 -

组合

+## 组合 -

{{jsxref("Promise.resolve()")}} 和 {{jsxref("Promise.reject()")}} 是手动创建一个已经 resolve 或者 reject 的 Promise 快捷方法。它们有时很有用。

+{{jsxref("Promise.resolve()")}} 和 {{jsxref("Promise.reject()")}} 是手动创建一个已经 resolve 或者 reject 的 Promise 快捷方法。它们有时很有用。 -

{{jsxref("Promise.all()")}} 和 {{jsxref("Promise.race()")}} 是并行运行异步操作的两个组合式工具。

+{{jsxref("Promise.all()")}} 和 {{jsxref("Promise.race()")}} 是并行运行异步操作的两个组合式工具。 -

我们可以发起并行操作，然后等多个操作全部结束后进行下一步操作，如下：

+我们可以发起并行操作，然后等多个操作全部结束后进行下一步操作，如下： -
Promise.all([func1(), func2(), func3()])
-.then(([result1, result2, result3]) => { /* use result1, result2 and result3 */ });
+```js +Promise.all([func1(), func2(), func3()]) +.then(([result1, result2, result3]) => { /* use result1, result2 and result3 */ }); +``` -

可以使用一些聪明的 JavaScript 写法实现时序组合：

+可以使用一些聪明的 JavaScript 写法实现时序组合： -
[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
-.then(result3 => { /* use result3 */ });
+```js +[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve()) +.then(result3 => { /* use result3 */ }); +``` -

通常，我们递归调用一个由异步函数组成的数组时，相当于一个 Promise 链：

+通常，我们递归调用一个由异步函数组成的数组时，相当于一个 Promise 链： -
Promise.resolve().then(func1).then(func2).then(func3);
+```plain +Promise.resolve().then(func1).then(func2).then(func3); +``` -

我们也可以写成可复用的函数形式，这在函数式编程中极为普遍：

+我们也可以写成可复用的函数形式，这在函数式编程中极为普遍： -
const applyAsync = (acc,val) => acc.then(val);
-const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
-
+```js +const applyAsync = (acc,val) => acc.then(val); +const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x)); +``` -

composeAsync() 函数将会接受任意数量的函数作为其参数，并返回一个新的函数，该函数接受一个通过 composition pipeline 传入的初始值。这对我们来说非常有益，因为任一函数可以是异步或同步的，它们能被保证按顺序执行：

+`composeAsync()` 函数将会接受任意数量的函数作为其参数，并返回一个新的函数，该函数接受一个通过 composition pipeline 传入的初始值。这对我们来说非常有益，因为任一函数可以是异步或同步的，它们能被保证按顺序执行： -
const transformData = composeAsync(func1, func2, func3);
+```js
+const transformData = composeAsync(func1, func2, func3);
 const result3 = transformData(data);
-
+``` -

在 ECMAScript 2017 标准中，时序组合可以通过使用 async/await 而变得更简单：

+在 ECMAScript 2017 标准中，时序组合可以通过使用 `async/await` 而变得更简单： -
let result;
+```js
+let result;
 for (const f of [func1, func2, func3]) {
   result = await f(result);
 }
-/* use last result (i.e. result3) */
+/* use last result (i.e. result3) */ +``` -

时序

+## 时序 -

为了避免意外，即使是一个已经变成 resolve 状态的 Promise，传递给 then() 的函数也总是会被异步调用：

+为了避免意外，即使是一个已经变成 resolve 状态的 Promise，传递给 [`then()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 的函数也总是会被异步调用： -
Promise.resolve().then(() => console.log(2));
+```js
+Promise.resolve().then(() => console.log(2));
 console.log(1); // 1, 2
-
+``` -

传递到 then() 中的函数被置入到一个微任务队列中，而不是立即执行，这意味着它是在 JavaScript 事件队列的所有运行时结束了，且事件队列被清空之后，才开始执行：

+传递到 `then()` 中的函数被置入到一个微任务队列中，而不是立即执行，这意味着它是在 JavaScript 事件队列的所有运行时结束了，且事件队列被清空之后，才开始执行： -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+```js
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
 
-wait().then(() => console.log(4));
-Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
-console.log(1); // 1, 2, 3, 4
+wait().then(() => console.log(4)); +Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); +console.log(1); // 1, 2, 3, 4 +``` -

嵌套

+## 嵌套 -

简便的 Promise 链式编程最好保持扁平化，不要嵌套 Promise，因为嵌套经常会是粗心导致的。可查阅下一节的常见错误中的例子。

+简便的 Promise 链式编程最好保持扁平化，不要嵌套 Promise，因为嵌套经常会是粗心导致的。可查阅下一节的[常见错误](#常见错误)中的例子。 -

嵌套 Promise 是一种可以限制 catch 语句的作用域的控制结构写法。明确来说，嵌套的 catch 仅捕捉在其之前同时还必须是其作用域的 failureres，而捕捉不到在其链式以外或者其嵌套域以外的 error。如果使用正确，那么可以实现高精度的错误修复。

+嵌套 Promise 是一种可以限制 `catch` 语句的作用域的控制结构写法。明确来说，嵌套的 `catch` 仅捕捉在其之前同时还必须是其作用域的 failureres，而捕捉不到在其链式以外或者其嵌套域以外的 error。如果使用正确，那么可以实现高精度的错误修复。 -
doSomethingCritical()
-.then(result => doSomethingOptional()
-  .then(optionalResult => doSomethingExtraNice(optionalResult))
-  .catch(e => {console.log(e.message)})) // 即使有异常也会忽略，继续运行;(最后会输出)
-.then(() => moreCriticalStuff())
-.catch(e => console.log("Critical failure: " + e.message));// 没有输出
+```js +doSomethingCritical() +.then(result => doSomethingOptional() + .then(optionalResult => doSomethingExtraNice(optionalResult)) + .catch(e => {console.log(e.message)})) // 即使有异常也会忽略，继续运行;(最后会输出) +.then(() => moreCriticalStuff()) +.catch(e => console.log("Critical failure: " + e.message));// 没有输出 +``` -

注意，有些代码步骤是嵌套的，而不是一个简单的纯链式，这些语句前与后都被括号 () 包裹着。

+注意，有些代码步骤是嵌套的，而不是一个简单的纯链式，这些语句前与后都被括号 `()` 包裹着。 -

这个内部的 catch 语句仅能捕获到 doSomethingOptional() 和 doSomethingExtraNice() 的失败，之后就恢复到 moreCriticalStuff() 的运行。重要提醒：如果 doSomethingCritical() 失败，这个错误仅会被最后的（外部）catch 语句捕获到。

+这个内部的 `catch` 语句仅能捕获到 `doSomethingOptional()` 和 `doSomethingExtraNice()` 的失败，`之后就恢复到 moreCriticalStuff()` 的运行。重要提醒：如果 `doSomethingCritical()` 失败，这个错误仅会被最后的（外部）`catch` 语句捕获到。 -

常见错误

+## 常见错误 -

在编写 Promise 链时，需要注意以下示例中展示的几个错误：

+在编写 Promise 链时，需要注意以下示例中展示的几个错误： -
// 错误示例，包含 3 个问题！
+```js example-bad
+// 错误示例，包含 3 个问题！
 
 doSomething().then(function(result) {
   doSomethingElse(result) // 没有返回 Promise 以及没有必要的嵌套 Promise
-  .then(newResult => doThirdThing(newResult));
-}).then(() => doFourthThing());
-// 最后，是没有使用 catch 终止 Promise 调用链，可能导致没有捕获的异常
+ .then(newResult => doThirdThing(newResult)); +}).then(() => doFourthThing()); +// 最后，是没有使用 catch 终止 Promise 调用链，可能导致没有捕获的异常 +``` -

第一个错误是没有正确地将事物相连接。当我们创建新 Promise 但忘记返回它时，会发生这种情况。因此，链条被打破，或者更确切地说，我们有两个独立的链条竞争（同时在执行两个异步而非一个一个的执行）。这意味着 doFourthThing() 不会等待 doSomethingElse() 或 doThirdThing() 完成，并且将与它们并行运行，可能是无意的。单独的链也有单独的错误处理，导致未捕获的错误。

+第一个错误是没有正确地将事物相连接。当我们创建新 Promise 但忘记返回它时，会发生这种情况。因此，链条被打破，或者更确切地说，我们有两个独立的链条竞争（同时在执行两个异步而非一个一个的执行）。这意味着 `doFourthThing()` 不会等待 `doSomethingElse()` 或 `doThirdThing()` 完成，并且将与它们并行运行，可能是无意的。单独的链也有单独的错误处理，导致未捕获的错误。 -

第二个错误是不必要地嵌套，实现第一个错误。嵌套还限制了内部错误处理程序的范围，如果是非预期的，可能会导致未捕获的错误。其中一个变体是 Promise 构造函数反模式，它结合了 Promise 构造函数的多余使用和嵌套。

+第二个错误是不必要地嵌套，实现第一个错误。嵌套还限制了内部错误处理程序的范围，如果是非预期的，可能会导致未捕获的错误。其中一个变体是 [Promise 构造函数反模式](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it)，它结合了 Promise 构造函数的多余使用和嵌套。 -

第三个错误是忘记用 catch 终止链。这导致在大多数浏览器中不能终止的 Promise 链里的 rejection。

+第三个错误是忘记用 `catch` 终止链。这导致在大多数浏览器中不能终止的 Promise 链里的 rejection。 -

一个好的经验法则是总是返回或终止 Promise 链，并且一旦你得到一个新的 Promise，返回它。下面是修改后的平面化的代码：

+一个好的经验法则是总是返回或终止 Promise 链，并且一旦你得到一个新的 Promise，返回它。下面是修改后的平面化的代码： -
doSomething()
+```js example-good
+doSomething()
 .then(function(result) {
   return doSomethingElse(result);
 })
-.then(newResult => doThirdThing(newResult))
-.then(() => doFourthThing())
-.catch(error => console.log(error));
+.then(newResult => doThirdThing(newResult)) +.then(() => doFourthThing()) +.catch(error => console.log(error)); +``` -

注意：() => x 是 () => { return x; } 的简写。

+注意：`() => x` 是 `() => { return x; }` 的简写。 -

上述代码的写法就是具有适当错误处理的简单明确的链式写法。

+上述代码的写法就是具有适当错误处理的简单明确的链式写法。 -

使用 async/await 可以解决以上大多数错误，使用 async/await 时，最常见的语法错误就是忘记了 await 关键字。

+使用 [async/await](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function) 可以解决以上大多数错误，使用 `async/await` 时，最常见的语法错误就是忘记了 [`await`](/zh-CN/docs/Web/JavaScript/Reference/Operators/await) 关键字。 -

参见

+## 参见 - +- {{jsxref("Promise.then()")}} +- [`async`/`await`](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function) +- [Promises/A+ specification](https://promisesaplus.com/) +- [Venkatraman.R - JS Promise (Part 1, Basics)](https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53) +- [Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)](https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c) +- [Venkatraman.R - Tools for Promises Unit Testing](https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction) +- [Nolan Lawson: We have a problem with promises — Common mistakes with promises](http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) -

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

+{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}} diff --git a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md index c2ccad9a28bf9c..07fb9968568c22 100644 --- a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -15,31 +15,28 @@ tags: - 高级 translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain --- -
{{jsSidebar("Advanced")}}
+{{jsSidebar("Advanced")}} -

对于使用过基于类的语言 (如 Java 或 C++) 的开发者们来说，JavaScript 实在是有些令人困惑 —— JavaScript 是动态的，本身不提供一个 class 的实现。即便是在 ES2015/ES6 中引入了 class 关键字，但那也只是语法糖，JavaScript 仍然是基于原型的。

+对于使用过基于类的语言 (如 Java 或 C++) 的开发者们来说，JavaScript 实在是有些令人困惑 —— JavaScript 是动态的，本身不提供一个 `class` 的实现。即便是在 ES2015/ES6 中引入了 `class` 关键字，但那也只是语法糖，JavaScript 仍然是基于原型的。 -

当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

+当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 \_\_proto\_\_ ）指向它的构造函数的原型对象（**prototype**）。该原型对象也有一个自己的原型对象（\_\_proto\_\_），层层向上直到一个对象的原型对象为 `null`。根据定义，`null` 没有原型，并作为这个**原型链**中的最后一个环节。 -

几乎所有 JavaScript 中的对象都是位于原型链顶端的 {{jsxref("Object")}} 的实例。

+几乎所有 JavaScript 中的对象都是位于原型链顶端的 {{jsxref("Object")}} 的实例。 -

尽管这种原型继承通常被认为是 JavaScript 的弱点之一，但是原型继承模型本身实际上比经典模型更强大。例如，在原型模型的基础上构建经典模型相当简单。

+尽管这种原型继承通常被认为是 JavaScript 的弱点之一，但是原型继承模型本身实际上比经典模型更强大。例如，在原型模型的基础上构建经典模型相当简单。 -

基于原型链的继承

+## 基于原型链的继承 -

继承属性

+### 继承属性 -

JavaScript 对象是动态的属性“包”（指其自己的属性）。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

+JavaScript 对象是动态的属性“包”（指其自己的属性）。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。 -
-

备注：遵循 ECMAScript 标准，someObject.[[Prototype]] 符号是用于指向 someObject 的原型。从 ECMAScript 6 开始，[[Prototype]] 可以通过 {{jsxref("Object.getPrototypeOf()")}} 和 {{jsxref("Object.setPrototypeOf()")}} 访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性 __proto__。

+> **备注：** 遵循 ECMAScript 标准，`someObject.[[Prototype]]` 符号是用于指向 `someObject` 的原型。从 ECMAScript 6 开始，`[[Prototype]]` 可以通过 {{jsxref("Object.getPrototypeOf()")}} 和 {{jsxref("Object.setPrototypeOf()")}} 访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性 `__proto__`。但它不应该与构造函数 `func` 的 `prototype` 属性相混淆。被构造函数创建的实例对象的 `[[Prototype]]` 指向 `func` 的 `prototype` 属性。**`Object.prototype` **属性表示 {{jsxref("Object")}} 的原型对象。 -

但它不应该与构造函数 func 的 prototype 属性相混淆。被构造函数创建的实例对象的 [[Prototype]] 指向 func 的 prototype 属性。Object.prototype 属性表示 {{jsxref("Object")}} 的原型对象。

-
+这里演示当尝试访问属性时会发生什么： -

这里演示当尝试访问属性时会发生什么：

- -
// 让我们从一个函数里创建一个对象 o，它自身拥有属性 a 和 b 的：
+```js
+// 让我们从一个函数里创建一个对象 o，它自身拥有属性 a 和 b 的：
 let f = function () {
    this.a = 1;
    this.b = 2;
@@ -66,7 +63,7 @@ f.prototype.c = 4;
 
 // 综上，整个原型链如下：
 
-// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null
+// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null
 
 console.log(o.a); // 1
 // a 是 o 的自身属性吗？是的，该属性的值为 1
@@ -84,19 +81,21 @@ console.log(o.d); // undefined
 // d 是 o 的自身属性吗？不是，那看看它的原型上有没有
 // d 是 o.[[Prototype]] 的属性吗？不是，那看看它的原型上有没有
 // o.[[Prototype]].[[Prototype]] 为 null，停止搜索
-// 找不到 d 属性，返回 undefined
+// 找不到 d 属性，返回 undefined +``` -

代码来源链接：https://repl.it/@khaled_hossain_code/prototype

+代码来源链接： -

给对象设置属性会创建自有属性。获取和设置行为规则的唯一例外是当继承的属性带有 getter 或 setter 时。

+给对象设置属性会创建自有属性。获取和设置行为规则的唯一例外是当继承的属性带有 [getter 或 setter](/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters) 时。 -

继承方法

+### 继承方法 -

JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里，任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别，包括上面的“属性遮蔽”（这种情况相当于其他语言的方法重写）。

+JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里，任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别，包括上面的“属性遮蔽”（这种情况相当于其他语言的方法重写）。 -

当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象。

+当继承的函数被调用时，[this](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 指向的是当前继承的对象，而不是继承的函数所在的原型对象。 -
var o = {
+```js
+var o = {
   a: 2,
   m: function(){
     return this.a + 1;
@@ -113,24 +112,28 @@ p.a = 4; // 创建 p 的自身属性 'a'
 console.log(p.m()); // 5
 // 调用 p.m 时，'this' 指向了 p
 // 又因为 p 继承了 o 的 m 函数
-// 所以，此时的 'this.a' 即 p.a，就是 p 的自身属性 'a'
+// 所以，此时的 'this.a' 即 p.a，就是 p 的自身属性 'a' +``` -

在 JavaScript 中使用原型

+## 在 JavaScript 中使用原型 -

接下去，来仔细分析一下这些应用场景下， JavaScript 在背后做了哪些事情。

+接下去，来仔细分析一下这些应用场景下， JavaScript 在背后做了哪些事情。 -

正如之前提到的，在 JavaScript 中，函数（function）是允许拥有属性的。所有的函数会有一个特别的属性 —— prototype 。请注意，以下的代码是独立的（出于严谨，假定页面没有其他的 JavaScript 代码）。为了最佳的学习体验，我们强烈建议阁下打开浏览器的控制台（在 Chrome 和火狐浏览器中，按 Ctrl+Shift+I 即可），进入“console”选项卡，然后把如下的 JavaScript 代码复制粘贴到窗口中，最后通过按下回车键运行代码。

+正如之前提到的，在 JavaScript 中，函数（function）是允许拥有属性的。所有的函数会有一个特别的属性 —— `prototype` 。请注意，以下的代码是独立的（出于严谨，假定页面没有其他的 JavaScript 代码）。为了最佳的学习体验，我们强烈建议阁下打开浏览器的控制台（在 Chrome 和火狐浏览器中，按 Ctrl+Shift+I 即可），进入“console”选项卡，然后把如下的 JavaScript 代码复制粘贴到窗口中，最后通过按下回车键运行代码。 -
function doSomething(){}
+```js
+function doSomething(){}
 console.log( doSomething.prototype );
 // 和声明函数的方式无关，
 // JavaScript 中的函数永远有一个默认原型属性。
 var doSomething = function(){};
-console.log( doSomething.prototype );
+console.log( doSomething.prototype ); +``` -

在控制台显示的 JavaScript 代码块中，我们可以看到 doSomething 函数的一个默认属性 prototype。而这段代码运行之后，控制台应该显示类似如下的结果：

+在控制台显示的 JavaScript 代码块中，我们可以看到 doSomething 函数的一个默认属性 prototype。而这段代码运行之后，控制台应该显示类似如下的结果： -
{
+```js
+{
     constructor: ƒ doSomething(),
     __proto__: {
         constructor: ƒ Object(),
@@ -141,17 +144,21 @@ console.log( doSomething.prototype );
toString: ƒ toString(), valueOf: ƒ valueOf() } -} +} +``` -

我们可以给 doSomething 函数的原型对象添加新属性，如下：

+我们可以给 doSomething 函数的原型对象添加新属性，如下： -
function doSomething(){}
+```js
+function doSomething(){}
 doSomething.prototype.foo = "bar";
-console.log( doSomething.prototype );
+console.log( doSomething.prototype ); +``` -

可以看到运行后的结果如下：

+可以看到运行后的结果如下： -
{
+```js
+{
     foo: "bar",
     constructor: ƒ doSomething(),
     __proto__: {
@@ -163,21 +170,25 @@ console.log( doSomething.prototype );
toString: ƒ toString(), valueOf: ƒ valueOf() } -} +} +``` -

现在我们可以通过 new 操作符来创建基于这个原型对象的 doSomething 实例。使用 new 操作符，只需在调用 doSomething 函数语句之前添加 new。这样，便可以获得这个函数的一个实例对象。一些属性就可以添加到该原型对象中。

+现在我们可以通过 new 操作符来创建基于这个原型对象的 doSomething 实例。使用 new 操作符，只需在调用 doSomething 函数语句之前添加 new。这样，便可以获得这个函数的一个实例对象。一些属性就可以添加到该原型对象中。 -

请尝试运行以下代码：

+请尝试运行以下代码： -
function doSomething(){}
+```js
+function doSomething(){}
 doSomething.prototype.foo = "bar"; // add a property onto the prototype
 var doSomeInstancing = new doSomething();
 doSomeInstancing.prop = "some value"; // add a property onto the object
-console.log( doSomeInstancing );
+console.log( doSomeInstancing ); +``` -

运行的结果类似于以下的语句。

+运行的结果类似于以下的语句。 -
{
+```js
+{
     prop: "some value",
     __proto__: {
         foo: "bar",
@@ -192,19 +203,21 @@ console.log( doSomeInstancing );
valueOf: ƒ valueOf() } } -} +} +``` -

如上所示， doSomeInstancing 中的__proto__是 doSomething.prototype. 但这是做什么的呢？当你访问doSomeInstancing 中的一个属性，浏览器首先会查看doSomeInstancing 中是否存在这个属性。

+如上所示， `doSomeInstancing` 中的`__proto__`是 `doSomething.prototype`. 但这是做什么的呢？当你访问`doSomeInstancing` 中的一个属性，浏览器首先会查看`doSomeInstancing` 中是否存在这个属性。 -

如果 doSomeInstancing 不包含属性信息，那么浏览器会在 doSomeInstancing 的 __proto__ 中进行查找 (同 doSomething.prototype). 如属性在 doSomeInstancing 的 __proto__ 中查找到，则使用 doSomeInstancing 中 __proto__ 的属性。

+如果 `doSomeInstancing` 不包含属性信息，那么浏览器会在 `doSomeInstancing` 的 `__proto__` 中进行查找 (同 doSomething.prototype). 如属性在 `doSomeInstancing` 的 `__proto__` 中查找到，则使用 `doSomeInstancing` 中 `__proto__` 的属性。 -

否则，如果 doSomeInstancing 中 __proto__ 不具有该属性，则检查doSomeInstancing 的 __proto__ 的 __proto__ 是否具有该属性。默认情况下，任何函数的原型属性 __proto__ 都是 window.Object.prototype. 因此，通过doSomeInstancing 的 __proto__ 的 __proto__ ( 同 doSomething.prototype 的 __proto__ (同 Object.prototype)) 来查找要搜索的属性。

+否则，如果 `doSomeInstancing` 中 `__proto__` 不具有该属性，则检查`doSomeInstancing` 的 `__proto__` 的 `__proto__` 是否具有该属性。默认情况下，任何函数的原型属性 `__proto__` 都是 `window.Object.prototype.` 因此，通过`doSomeInstancing` 的 `__proto__` 的 `__proto__` ( 同 doSomething.prototype 的 `__proto__ `(同 `Object.prototype`)) 来查找要搜索的属性。 -

如果属性不存在 doSomeInstancing 的 __proto__ 的 __proto__ 中， 那么就会在doSomeInstancing 的 __proto__ 的 __proto__ 的 __proto__ 中查找。然而，这里存在个问题：doSomeInstancing 的 __proto__ 的 __proto__ 的 __proto__ 其实不存在。因此，只有这样，在 __proto__ 的整个原型链被查看之后，这里没有更多的 __proto__ ， 浏览器断言该属性不存在，并给出属性值为 undefined 的结论。

+如果属性不存在 `doSomeInstancing` 的 `__proto__` 的 `__proto__` 中， 那么就会在`doSomeInstancing` 的 `__proto__` 的 `__proto__` 的 `__proto__` 中查找。然而，这里存在个问题：`doSomeInstancing` 的 `__proto__` 的 `__proto__` 的 `__proto__` 其实不存在。因此，只有这样，在 `__proto__` 的整个原型链被查看之后，这里没有更多的 `__proto__` ， 浏览器断言该属性不存在，并给出属性值为 `undefined` 的结论。 -

让我们在控制台窗口中输入更多的代码，如下：

+让我们在控制台窗口中输入更多的代码，如下： -
function doSomething(){}
+```js
+function doSomething(){}
 doSomething.prototype.foo = "bar";
 var doSomeInstancing = new doSomething();
 doSomeInstancing.prop = "some value";
@@ -213,22 +226,26 @@ console.log("doSomeInstancing.foo:       " + doSomeInstancing.foo);
 console.log("doSomething.prop:           " + doSomething.prop);
 console.log("doSomething.foo:            " + doSomething.foo);
 console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);
-console.log("doSomething.prototype.foo:  " + doSomething.prototype.foo);
+console.log("doSomething.prototype.foo: " + doSomething.prototype.foo); +``` -

结果如下：

+结果如下： -
doSomeInstancing.prop:      some value
+```js
+doSomeInstancing.prop:      some value
 doSomeInstancing.foo:       bar
 doSomething.prop:           undefined
 doSomething.foo:            undefined
 doSomething.prototype.prop: undefined
-doSomething.prototype.foo:  bar
+doSomething.prototype.foo: bar +``` -

使用不同的方法来创建对象和生成原型链

+## 使用不同的方法来创建对象和生成原型链 -

使用语法结构创建的对象

+### 使用语法结构创建的对象 -
var o = {a: 1};
+```js
+var o = {a: 1};
 
 // o 这个对象继承了 Object.prototype 上面的所有属性
 // o 自身没有名为 hasOwnProperty 的属性
@@ -236,14 +253,14 @@ doSomething.prototype.foo:  bar
// 因此 o 继承了 Object.prototype 的 hasOwnProperty // Object.prototype 的原型为 null // 原型链如下： -// o ---> Object.prototype ---> null +// o ---> Object.prototype ---> null var a = ["yo", "whadup", "?"]; // 数组都继承于 Array.prototype // (Array.prototype 中包含 indexOf, forEach 等方法) // 原型链如下： -// a ---> Array.prototype ---> Object.prototype ---> null +// a ---> Array.prototype ---> Object.prototype ---> null function f(){ return 2; @@ -252,13 +269,15 @@ function f(){ // 函数都继承于 Function.prototype // (Function.prototype 中包含 call, bind 等方法) // 原型链如下： -// f ---> Function.prototype ---> Object.prototype ---> null +// f ---> Function.prototype ---> Object.prototype ---> null +``` -

使用构造器创建的对象

+### 使用构造器创建的对象 -

在 JavaScript 中，构造器其实就是一个普通的函数。当使用 new 操作符 来作用这个函数时，它就可以被称为构造方法（构造函数）。

+在 JavaScript 中，构造器其实就是一个普通的函数。当使用 [new 操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 来作用这个函数时，它就可以被称为构造方法（构造函数）。 -
function Graph() {
+```js
+function Graph() {
   this.vertices = [];
   this.edges = [];
 }
@@ -271,31 +290,35 @@ Graph.prototype = {
 
 var g = new Graph();
 // g 是生成的对象，他的自身属性有 'vertices' 和 'edges'。
-// 在 g 被实例化时，g.[[Prototype]] 指向了 Graph.prototype。
+// 在 g 被实例化时，g.[[Prototype]] 指向了 Graph.prototype。 +``` -

使用 Object.create 创建的对象

+### 使用 `Object.create` 创建的对象 -

ECMAScript 5 中引入了一个新方法：{{jsxref("Object.create()")}}。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数：

+ECMAScript 5 中引入了一个新方法：{{jsxref("Object.create()")}}。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数： -
var a = {a: 1};
-// a ---> Object.prototype ---> null
+```js
+var a = {a: 1};
+// a ---> Object.prototype ---> null
 
 var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
+// b ---> a ---> Object.prototype ---> null
 console.log(b.a); // 1 (继承而来)
 
 var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
+// c ---> b ---> a ---> Object.prototype ---> null
 
 var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty); // undefined，因为 d 没有继承 Object.prototype
+// d ---> null +console.log(d.hasOwnProperty); // undefined，因为 d 没有继承 Object.prototype +``` -

使用 class 关键字创建的对象

+### 使用 `class` 关键字创建的对象 -

ECMAScript6 引入了一套新的关键字用来实现 class。使用基于类语言的开发人员会对这些结构感到熟悉，但它们是不同的。JavaScript 仍然基于原型。这些新的关键字包括 {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}，{{jsxref("Classes/static", "static")}}，{{jsxref("Classes/extends", "extends")}} 和 {{jsxref("Operators/super", "super")}}。

+ECMAScript6 引入了一套新的关键字用来实现 [class](/zh-CN/docs/Web/JavaScript/Reference/Classes)。使用基于类语言的开发人员会对这些结构感到熟悉，但它们是不同的。JavaScript 仍然基于原型。这些新的关键字包括 {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}，{{jsxref("Classes/static", "static")}}，{{jsxref("Classes/extends", "extends")}} 和 {{jsxref("Operators/super", "super")}}。 -
"use strict";
+```js
+"use strict";
 
 class Polygon {
   constructor(height, width) {
@@ -317,15 +340,17 @@ class Square extends Polygon {
   }
 }
 
-var square = new Square(2);
+var square = new Square(2); +``` -

性能

+### 性能 -

在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。

+在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。 -

遍历对象的属性时，原型链上的每个可枚举属性都会被枚举出来。要检查对象是否具有自己定义的属性，而不是其原型链上的某个属性，则必须使用所有对象从 Object.prototype 继承的 hasOwnProperty 方法。下面给出一个具体的例子来说明它：

+遍历对象的属性时，原型链上的**每个**可枚举属性都会被枚举出来。要检查对象是否具有自己定义的属性，而不是其原型链上的某个属性，则必须使用所有对象从 `Object.prototype` 继承的 [`hasOwnProperty`](/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 方法。下面给出一个具体的例子来说明它： -
console.log(g.hasOwnProperty('vertices'));
+```js
+console.log(g.hasOwnProperty('vertices'));
 // true
 
 console.log(g.hasOwnProperty('nope'));
@@ -335,213 +360,67 @@ console.log(g.hasOwnProperty('addVertex'));
 // false
 
 console.log(g.__proto__.hasOwnProperty('addVertex'));
-// true
- -

hasOwnProperty 是 JavaScript 中唯一一个处理属性并且不会遍历原型链的方法。（译者注：原文如此。另一种这样的方法：Object.keys()）

- -

注意：检查属性是否为 undefined 是不能够检查其是否存在的。该属性可能已存在，但其值恰好被设置成了 undefined。

- -

错误实践：扩展原生对象的原型

- -

经常使用的一个错误实践是扩展 Object.prototype 或其他内置原型。

- -

这种技术被称为猴子补丁并且会破坏封装。尽管一些流行的框架（如 Prototype.js）在使用该技术，但仍然没有足够好的理由使用附加的非标准方法来混入内置原型。

- -

扩展内置原型的唯一理由是支持 JavaScript 引擎的新特性，如 Array.forEach。

- -

总结：4 个用于拓展原型链的方法

- -

下面列举四种用于拓展原型链的方法，以及他们的优势和缺陷。下列四个例子都创建了完全相同的 inst 对象（所以在控制台上的输出也是一致的），为了举例，唯一的区别是他们的创建方法不同。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
名称例子优势缺陷
New-initialization - 
- function foo(){}
- foo.prototype = {
-   foo_prop: "foo val"
- };
- function bar(){}
- var proto = new foo;
- proto.bar_prop = "bar val";
- bar.prototype = proto;
- var inst = new bar;
- console.log(inst.foo_prop);
- console.log(inst.bar_prop);
- 		支持目前以及所有可想象到的浏览器 (IE5.5 都可以使用)。 这种方法非常快，非常符合标准，并且充分利用 JIT 优化。为使用此方法，必须对相关函数初始化。 在初始化过程中，构造函数可以存储每个对象必须生成的唯一信息。但是，这种唯一信息只生成一次，可能会带来潜在的问题。此外，构造函数的初始化，可能会将不需要的方法放在对象上。然而，如果你只在自己的代码中使用，你也清楚（或有通过注释等写明）各段代码在做什么，这些在大体上都不是问题（事实上，通常是有益处的）。
Object.create - 
- function foo(){}
- foo.prototype = {
-   foo_prop: "foo val"
- };
- function bar(){}
- var proto = Object.create(
-   foo.prototype
- );
- proto.bar_prop = "bar val";
- bar.prototype = proto;
- var inst = new bar;
- console.log(inst.foo_prop);
- console.log(inst.bar_prop);
-
- - 
- function foo(){}
- foo.prototype = {
-   foo_prop: "foo val"
- };
- function bar(){}
- var proto = Object.create(
-   foo.prototype,
-   {
-     bar_prop: {
-       value: "bar val"
-     }
-   }
- );
- bar.prototype = proto;
- var inst = new bar;
- console.log(inst.foo_prop);
- console.log(inst.bar_prop)
- 		支持当前所有非微软版本或者 IE9 以上版本的浏览器。允许一次性地直接设置 __proto__ 属性，以便浏览器能更好地优化对象。同时允许通过 Object.create(null) 来创建一个没有原型的对象。不支持 IE8 以下的版本。然而，随着微软不再对系统中运行的旧版本浏览器提供支持，这将不是在大多数应用中的主要问题。 另外，这个慢对象初始化在使用第二个参数的时候有可能成为一个性能黑洞，因为每个对象的描述符属性都有自己的描述对象。当以对象的格式处理成百上千的对象描述的时候，可能会造成严重的性能问题。
-

Object.setPrototypeOf

- 		- 
- function foo(){}
- foo.prototype = {
-   foo_prop: "foo val"
- };
- function bar(){}
- var proto = {
-   bar_prop: "bar val"
- };
- Object.setPrototypeOf(
-   proto, foo.prototype
- );
- bar.prototype = proto;
- var inst = new bar;
- console.log(inst.foo_prop);
- console.log(inst.bar_prop);
-
- - 
- function foo(){}
- foo.prototype = {
-   foo_prop: "foo val"
- };
- function bar(){}
- var proto;
- proto=Object.setPrototypeOf(
-   { bar_prop: "bar val" },
-   foo.prototype
- );
- bar.prototype = proto;
- var inst = new bar;
- console.log(inst.foo_prop);
- console.log(inst.bar_prop)
- 		支持所有现代浏览器和微软 IE9+ 浏览器。允许动态操作对象的原型，甚至能强制给通过 Object.create(null) 创建出来的没有原型的对象添加一个原型。这个方式表现并不好，应该被弃用。如果你在生产环境中使用这个方法，那么快速运行 Javascript 就是不可能的，因为许多浏览器优化了原型，尝试在调用实例之前猜测方法在内存中的位置，但是动态设置原型干扰了所有的优化，甚至可能使浏览器为了运行成功，使用完全未经优化的代码进行重编译。 不支持 IE8 及以下的浏览器版本。
__proto__ - 
- function foo(){}
- foo.prototype = {
-   foo_prop: "foo val"
- };
- function bar(){}
- var proto = {
-   bar_prop: "bar val",
-   __proto__: foo.prototype
- };
- bar.prototype = proto;
- var inst = new bar;
- console.log(inst.foo_prop);
- console.log(inst.bar_prop);
-
- - 
- var inst = {
-   __proto__: {
-     bar_prop: "bar val",
-     __proto__: {
-       foo_prop: "foo val",
-       __proto__: Object.prototype
-     }
-   }
- };
- console.log(inst.foo_prop);
- console.log(inst.bar_prop)
- 		支持所有现代非微软版本以及 IE11 以上版本的浏览器。将 __proto__ 设置为非对象的值会静默失败，并不会抛出错误。应该完全将其抛弃因为这个行为完全不具备性能可言。 如果你在生产环境中使用这个方法，那么快速运行 Javascript 就是不可能的，因为许多浏览器优化了原型，尝试在调用实例之前猜测方法在内存中的位置，但是动态设置原型干扰了所有的优化，甚至可能使浏览器为了运行成功，使用完全未经优化的代码进行重编译。不支持 IE10 及以下的浏览器版本。
- -

prototype 和 Object.getPrototypeOf

- -

对于从 Java 或 C++ 转过来的开发人员来说，JavaScript 会有点让人困惑，因为它完全是动态的，都是运行时，而且不存在类（class）。所有的都是实例（对象）。即使我们模拟出的 “类”，也只是一个函数对象。

- -

你可能已经注意到我们的 function A 有一个叫做 prototype 的特殊属性。该特殊属性可与 JavaScript 的 new 操作符一起使用。对原型对象的引用被复制到新实例的内部 [[Prototype]] 属性。例如，当执行 var a1 = new A(); 时，JavaScript（在内存中创建对象之后，和在运行函数 A() 把 this 指向对象之前）设置 a1.[[Prototype]] = A.prototype;。然后当您访问实例的属性时，JavaScript 首先会检查它们是否直接存在于该对象上，如果不存在，则会 [[Prototype]] 中查找。这意味着你在 prototype 中定义的所有内容都可以由所有实例有效地共享，你甚至可以稍后更改部分 prototype，并在所有现有实例中显示更改（如果有必要的话）。

- -

像上面的例子中，如果你执行 var a1 = new A(); var a2 = new A(); 那么 a1.doSomething 事实上会指向 Object.getPrototypeOf(a1).doSomething，它就是你在 A.prototype.doSomething 中定义的内容。也就是说：Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething（补充：实际上，执行 a1.doSomething() 相当于执行 Object.getPrototypeOf(a1).doSomething.call(a1)==A.prototype.doSomething.call(a1)）

- -

简而言之， prototype 是用于类的，而 Object.getPrototypeOf() 是用于实例的（instances），两者功能一致。

- -

[[Prototype]] 看起来就像递归引用， 如 a1.doSomething、Object.getPrototypeOf(a1).doSomething、Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething 等等等， 直到它被找到或 Object.getPrototypeOf 返回 null。

- -

因此，当你执行：

- -
var o = new Foo();
- -

JavaScript 实际上执行的是：

- -
var o = new Object();
+// true
+```
+
+[`hasOwnProperty`](/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 是 JavaScript 中唯一一个处理属性并且**不会**遍历原型链的方法。（译者注：原文如此。另一种这样的方法：[`Object.keys()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)）
+
+注意：检查属性是否为 [`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 是**不能够**检查其是否存在的。该属性可能已存在，但其值恰好被设置成了 `undefined`。
+
+### 错误实践：扩展原生对象的原型
+
+经常使用的一个错误实践是扩展 `Object.prototype` 或其他内置原型。
+
+这种技术被称为猴子补丁并且会破坏封装。尽管一些流行的框架（如 Prototype.js）在使用该技术，但仍然没有足够好的理由使用附加的非标准方法来混入内置原型。
+
+扩展内置原型的**唯一**理由是支持 JavaScript 引擎的新特性，如 `Array.forEach`。
+
+## `prototype` 和 `Object.getPrototypeOf`
+
+对于从 Java 或 C++ 转过来的开发人员来说，JavaScript 会有点让人困惑，因为它完全是动态的，都是运行时，而且不存在类（class）。所有的都是实例（对象）。即使我们模拟出的 “类”，也只是一个函数对象。
+
+你可能已经注意到我们的 function A 有一个叫做 `prototype` 的特殊属性。该特殊属性可与 JavaScript 的 `new` 操作符一起使用。对原型对象的引用被复制到新实例的内部 `[[Prototype]]` 属性。例如，当执行 `var a1 = new A();` 时，JavaScript（在内存中创建对象之后，和在运行函数 `A()` 把 `this` 指向对象之前）设置 `a1.[[Prototype]] = A.prototype;`。然后当您访问实例的属性时，JavaScript 首先会检查它们是否直接存在于该对象上，如果不存在，则会 `[[Prototype]]` 中查找。这意味着你在 `prototype` 中定义的所有内容都可以由所有实例有效地共享，你甚至可以稍后更改部分 `prototype`，并在所有现有实例中显示更改（如果有必要的话）。
+
+像上面的例子中，如果你执行 `var a1 = new A(); var a2 = new A();` 那么 `a1.doSomething` 事实上会指向 `Object.getPrototypeOf(a1).doSomething`，它就是你在 `A.prototype.doSomething` 中定义的内容。也就是说：`Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething`（补充：实际上，执行 `a1.doSomething()` 相当于执行 `Object.getPrototypeOf(a1).doSomething.call(a1)==A.prototype.doSomething.call(a1)`）
+
+简而言之， `prototype` 是用于类的，而 `Object.getPrototypeOf()` 是用于实例的（instances），两者功能一致。
+
+`[[Prototype]]` 看起来就像**递归**引用， 如 `a1.doSomething`、`Object.getPrototypeOf(a1).doSomething`、`Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething` 等等等， 直到它被找到或 `Object.getPrototypeOf` 返回 `null`。
+
+因此，当你执行：
+
+```js
+var o = new Foo();
+```
+
+JavaScript 实际上执行的是：
+
+```js
+var o = new Object();
 o.__proto__ = Foo.prototype;
-Foo.call(o);
+Foo.call(o); +``` -

（或者类似上面这样的），然后，当你执行：

+（或者类似上面这样的），然后，当你执行： -
o.someProp;
+```js +o.someProp; +``` -

它检查 o 是否具有 someProp 属性。如果没有，它会查找 Object.getPrototypeOf(o).someProp，如果仍旧没有，它会继续查找 Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp。

+它检查 o 是否具有 `someProp` 属性。如果没有，它会查找 `Object.getPrototypeOf(o).someProp`，如果仍旧没有，它会继续查找 `Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp`。 -

结论

+## 结论 -

在使用原型继承编写复杂代码之前，理解原型继承模型是至关重要的。此外，请注意代码中原型链的长度，并在必要时将其分解，以避免可能的性能问题。此外，原生原型不应该被扩展，除非它是为了与新的 JavaScript 特性兼容。

+在使用原型继承编写复杂代码之前，理解原型继承模型是**至关重要**的。此外，请注意代码中原型链的长度，并在必要时将其分解，以避免可能的性能问题。此外，原生原型**不应该**被扩展，除非它是为了与新的 JavaScript 特性兼容。 -
-

备注：在英文原版中，以下内容已被移除。保留仅作参考。

-
+> **备注：** 在英文原版中，以下内容已被移除。保留仅作参考。 -

示例

+## 示例 -

B 继承自 A：

+`B` 继承自 `A`： -
function A(a){
+```js
+function A(a){
   this.varA = a;
 }
 
@@ -585,11 +464,10 @@ B.prototype = Object.create(A.prototype, {
 B.prototype.constructor = B;
 
 var b = new B();
-b.doSomething();
+b.doSomething(); +``` -

最重要的部分是：

+最重要的部分是： -
    -
  • 类型被定义在 .prototype 中
    • -
  • 用 Object.create() 来继承
    • -
+- 类型被定义在 `.prototype` 中 +- 用 `Object.create()` 来继承 diff --git a/files/zh-cn/web/javascript/reference/classes/index.md b/files/zh-cn/web/javascript/reference/classes/index.md index 092bb1c14b1879..12d8db8ed72d6c 100644 --- a/files/zh-cn/web/javascript/reference/classes/index.md +++ b/files/zh-cn/web/javascript/reference/classes/index.md @@ -213,7 +213,7 @@ Rectangle.prototype.prototypeWidth = 25; ### 字段声明 -> **警告：**公共和私有字段声明是 JavaScript 标准委员会[TC39](https://tc39.es/)提出的[实验性功能（第 3 阶段）](https://github.com/tc39/proposal-class-fields)。浏览器中的支持是有限的，但是可以通过[Babel](https://babeljs.io/)等系统构建后使用此功能。 +> **警告：** 公共和私有字段声明是 JavaScript 标准委员会[TC39](https://tc39.es/)提出的[实验性功能（第 3 阶段）](https://github.com/tc39/proposal-class-fields)。浏览器中的支持是有限的，但是可以通过[Babel](https://babeljs.io/)等系统构建后使用此功能。 #### 公有字段声明 @@ -253,7 +253,7 @@ class Rectangle { 从类外部引用私有字段是错误的。它们只能在类里面中读取或写入。通过定义在类外部不可见的内容，可以确保类的用户不会依赖于内部，因为内部可能在不同版本之间发生变化。 -> **备注：**私有字段仅能在字段声明中预先定义。 +> **备注：** 私有字段仅能在字段声明中预先定义。 私有字段不能通过在之后赋值来创建它们，这种方式只适用普通属性。 diff --git a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md index 86f6cc5821ae04..33877c69bf677c 100644 --- a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md +++ b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md @@ -8,280 +8,148 @@ tags: - 过时 translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features --- -
{{JsSidebar("More")}}
- -

本附录列出了那些已经废弃（仍然可用，但是已计划删除）或者过时（已被删除，无法使用）的 JavaScript 特性。

- -

废弃特性

- -

这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎，因为它们很可能会在未来的某个时间点被移除。应当将其从需要使用的代码中移除。

- -

RegExp 对象的属性

- -

下面的这些属性已经被废弃。注意，这和{{jsxref("String.replace", "替换字符串")}}中使用的同名标记没有直接关系。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性描述
{{jsxref("RegExp.n", "$1-$9")}} -

捕获分组的匹配结果。

-
{{jsxref("RegExp.input", "$_")}}input 属性的别名。
{{jsxref("RegExp.multiline", "$*")}}multiline 属性的别名。
{{jsxref("RegExp.lastMatch", "$&")}}lastMatch 属性的别名。
{{jsxref("RegExp.lastParen", "$+")}}lastParen 属性的别名。
{{jsxref("RegExp.leftContext", "$`")}}leftContext 属性的别名。
{{jsxref("RegExp.rightContext", "$'")}}rightContext 属性的别名。
{{jsxref("RegExp.input", "input")}}正则表达式的匹配结果。
{{jsxref("RegExp.lastMatch", "lastMatch")}}上次匹配结果的最后一个字符串。
{{jsxref("RegExp.lastParen", "lastParen")}}上次匹配中，最后一个捕获分组的匹配结果。
{{jsxref("RegExp.leftContext", "leftContext")}}上次匹配结果左边的字符串。
{{jsxref("RegExp.rightContext", "rightContext")}}上次匹配结果右边的字符串。
- -

应该使用下面这些 RegExp 实例上的同名属性来代替上面这些 RegExp 对象的属性：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性描述
{{jsxref("RegExp.global", "global")}}该正则是否开启了全局匹配模式。
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}该正则是否开启了忽略大小写模式。
{{jsxref("RegExp.lastIndex", "lastIndex")}}上次成功匹配的索引位置。
{{jsxref("RegExp.multiline", "multiline")}}该正则是否开启了多行模式。
{{jsxref("RegExp.source", "source")}}正则的源文本。
- -

RegExp 对象的方法

- -

{{jsxref("RegExp.compile", "compile()")}} 方法已被废弃。

- -

valueOf 方法已被废弃。使用 {{jsxref("Object.valueOf()")}} 代替它。

- -

Function 对象的属性

- -

{{jsxref("Global_Objects/Function/caller", "caller")}} 和 {{jsxref("Global_Objects/Function/arguments", "arguments")}} 属性已经废弃，因为它们会泄漏调用函数的对象。应当在函数内部使用 arguments 对象来代替函数的 arguments 属性。

- -

遗留的生成器

- -
    -
  • {{jsxref("Statements/Legacy_generator_function", "遗留的生成器函数声明")}}和 {{jsxref("Operators/Legacy_generator_function", "遗留的生成器函数表达式")}}已被废弃。使用 {{jsxref("Statements/function*", "function* 声明")}}和 {{jsxref("Operators/function*", "function* 表达式")}}代替它们。
    • -
  • {{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} 和 {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} 已被废弃。
    • -
- -

迭代器

- -
    -
  • 全局对象 {{jsxref("Global_Objects/StopIteration", "StopIteration")}} 已被废弃。
    • -
  • 全局对象 {{jsxref("Global_Objects/Iterator", "Iterator")}} 已被废弃。
    • -
- -

Object 对象的方法

- -
    -
  • {{jsxref("Object.watch", "watch")}} 方法和 {{jsxref("Object.unwatch", "unwatch")}} 方法已被废弃。使用 {{jsxref("Proxy")}} 并编写相应的捕获器代替它们。
    • -
  • __iterator__ 方法已被废弃。
    • -
  • {{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} 方法已被废弃。使用 {{jsxref("Proxy")}} 并编写相应的捕获器作为代替。
    • -
- -

Date 对象的方法

- -
    -
  • {{jsxref("Global_Objects/Date/getYear", "getYear")}} 方法和 {{jsxref("Global_Objects/Date/setYear", "setYear")}} 方法受千年虫问题（Year-2000-Problem）影响，已被 {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} 方法和 {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}} 方法代替。
    • -
  • 应当使用 {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} 方法代替已废弃的 {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} 方法。
    • -
  • {{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} 已被废弃。
    • -
- -

函数

- -
    -
  • {{jsxref("Operators/Expression_closures", "表达式闭包")}}已被废弃。请用普通{{jsxref("Operators/function", "函数")}}或{{jsxref("Functions/Arrow_functions", "箭头函数")}}代替它。
    • -
- -

Proxy

- - - -

转义序列

- -

字符串字面量（literal）和正则表达式字面量中的八进制转义序列（反斜杠 \ 后跟一到三位的八进制数字）已被废弃。

- -

{{jsxref("Global_Objects/escape", "escape")}} 函数和 {{jsxref("Global_Objects/unescape", "unescape")}}函数已被废弃。使用 {{jsxref("Global_Objects/encodeURI", "encodeURI")}}、{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}、{{jsxref("Global_Objects/decodeURI", "decodeURI")}} 或 {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} 对特殊字符进行转义序列编码和解码。

- -

String 对象的方法

- -
    -
  • HTML 封装方法，比如 {{jsxref("String.prototype.fontsize")}} 和 {{jsxref("String.prototype.big")}}，已被废弃。
    • -
  • {{jsxref("String.prototype.quote")}} 已在 Firefox 37 中被移除。
    • -
  • non standard flags parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.
    • -
  • {{jsxref("String.prototype.substr")}} probably won't be removed anytime soon, but it's defined in Annex B of the ECMA-262 standard, whose introduction states: "… Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. …"
    • -
- -

过时特性

- -

这些过时的特性已经完全被删除，不能在当前或者未来版本的 JavaScript 中使用了。

- -

Object 对象

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性描述
{{jsxref("Global_Objects/Object/count", "__count__")}}返回用户自定义对象上的可枚举自身属性的个数。
{{jsxref("Global_Objects/Object/Parent", "__parent__")}}指向一个对象的上下文。
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}在指定对象的上下文上执行一个包含 JavaScript 代码的字符串。
{{jsxref("Object.observe()")}}Asynchronously observing the changes to an object.
{{jsxref("Object.unobserve()")}}Remove observers.
{{jsxref("Object.getNotifier()")}}Creates an object that allows to synthetically trigger a change.
- -

函数

- - - - - - - - - - - - -
属性描述
{{jsxref("Global_Objects/Function/arity", "arity")}}形参的数量。
- -

Array 对象

- - - - - - - - - - - - - - - - -
属性描述
{{jsxref("Array.observe()")}}Asynchronously observing changes to Arrays.
{{jsxref("Array.unobserve()")}}Remove observers.
- -

Number 对象

- -
    -
  • {{jsxref("Number.toInteger()")}}
    • -
- -

ParallelArray 对象

- -
    -
  • {{jsxref("ParallelArray")}}
    • -
- -

声明

- -
    -
  • {{jsxref("Statements/for_each...in", "for each...in")}} 声明已被废弃。使用 {{jsxref("Statements/for...of", "for...of")}} 作为代替。
    • -
  • 解构 {{jsxref("Statements/for...in", "for...in")}} 声明已被废弃。使用 {{jsxref("Statements/for...of", "for...of")}} 作为代替。
    • -
  • let 区块和 let 表达式已被废弃。
    • -
- -

E4X

- -

详见 E4X。

- -

变量引用语法（Sharp variables）

- -

详见 JavaScript 中的变量引用语法。

+{{JsSidebar("More")}} + +本附录列出了那些已经废弃（仍然可用，但是已计划删除）或者过时（已被删除，无法使用）的 JavaScript 特性。 + +## 废弃特性 + +这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎，因为它们很可能会在未来的某个时间点被移除。应当将其从需要使用的代码中移除。 + +### RegExp 对象的属性 + +下面的这些属性已经被废弃。注意，这和{{jsxref("String.replace", "替换字符串")}}中使用的同名标记没有直接关系。 + +| 属性 | 描述 | +| ---------------------------------------------------------------- | ---------------------------------------- | +| {{jsxref("RegExp.n", "$1-$9")}} | 捕获分组的匹配结果。 | +| {{jsxref("RegExp.input", "$_")}} | `input` 属性的别名。 | +| {{jsxref("RegExp.multiline", "$*")}} | `multiline` 属性的别名。 | +| {{jsxref("RegExp.lastMatch", "$&")}} | `lastMatch` 属性的别名。 | +| {{jsxref("RegExp.lastParen", "$+")}} | `lastParen` 属性的别名。 | +| {{jsxref("RegExp.leftContext", "$`")}} | `leftContext` 属性的别名。 | +| {{jsxref("RegExp.rightContext", "$'")}} | `rightContext` 属性的别名。 | +| {{jsxref("RegExp.input", "input")}} | 正则表达式的匹配结果。 | +| {{jsxref("RegExp.lastMatch", "lastMatch")}} | 上次匹配结果的最后一个字符串。 | +| {{jsxref("RegExp.lastParen", "lastParen")}} | 上次匹配中，最后一个捕获分组的匹配结果。 | +| {{jsxref("RegExp.leftContext", "leftContext")}} | 上次匹配结果左边的字符串。 | +| {{jsxref("RegExp.rightContext", "rightContext")}} | 上次匹配结果右边的字符串。 | + +应该使用下面这些 `RegExp` 实例上的同名属性来代替上面这些 `RegExp` 对象的属性： + +| 属性 | 描述 | +| ------------------------------------------------------------ | -------------------------------- | +| {{jsxref("RegExp.global", "global")}} | 该正则是否开启了全局匹配模式。 | +| {{jsxref("RegExp.ignoreCase", "ignoreCase")}} | 该正则是否开启了忽略大小写模式。 | +| {{jsxref("RegExp.lastIndex", "lastIndex")}} | 上次成功匹配的索引位置。 | +| {{jsxref("RegExp.multiline", "multiline")}} | 该正则是否开启了多行模式。 | +| {{jsxref("RegExp.source", "source")}} | 正则的源文本。 | + +### RegExp 对象的方法 + +{{jsxref("RegExp.compile", "compile()")}} 方法已被废弃。 + +`valueOf` 方法已被废弃。使用 {{jsxref("Object.valueOf()")}} 代替它。 + +### Function 对象的属性 + +{{jsxref("Global_Objects/Function/caller", "caller")}} 和 {{jsxref("Global_Objects/Function/arguments", "arguments")}} 属性已经废弃，因为它们会泄漏调用函数的对象。应当在函数内部使用 `arguments` 对象来代替函数的 `arguments` 属性。 + +### 遗留的生成器 + +- {{jsxref("Statements/Legacy_generator_function", "遗留的生成器函数声明")}}和 {{jsxref("Operators/Legacy_generator_function", "遗留的生成器函数表达式")}}已被废弃。使用 {{jsxref("Statements/function*", "function* 声明")}}和 {{jsxref("Operators/function*", "function* 表达式")}}代替它们。 +- {{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} 和 {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} 已被废弃。 + +### 迭代器 + +- 全局对象 {{jsxref("Global_Objects/StopIteration", "StopIteration")}} 已被废弃。 +- 全局对象 {{jsxref("Global_Objects/Iterator", "Iterator")}} 已被废弃。 + +### Object 对象的方法 + +- {{jsxref("Object.watch", "watch")}} 方法和 {{jsxref("Object.unwatch", "unwatch")}} 方法已被废弃。使用 {{jsxref("Proxy")}} 并编写相应的捕获器代替它们。 +- `__iterator__` 方法已被废弃。 +- {{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} 方法已被废弃。使用 {{jsxref("Proxy")}} 并编写相应的捕获器作为代替。 + +### Date 对象的方法 + +- {{jsxref("Global_Objects/Date/getYear", "getYear")}} 方法和 {{jsxref("Global_Objects/Date/setYear", "setYear")}} 方法受千年虫问题（Year-2000-Problem）影响，已被 {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} 方法和 {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}} 方法代替。 +- 应当使用 {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} 方法代替已废弃的 {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} 方法。 +- {{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} 已被废弃。 + +### 函数 + +- {{jsxref("Operators/Expression_closures", "表达式闭包")}}已被废弃。请用普通{{jsxref("Operators/function", "函数")}}或{{jsxref("Functions/Arrow_functions", "箭头函数")}}代替它。 + +### Proxy + +- [`Proxy.create()`](/zh-CN/docs/Archive/Web/Old_Proxy_API) 和 [`Proxy.createFunction()`](/zh-CN/docs/Archive/Web/Old_Proxy_API) 已被废弃。使用 {{jsxref("Proxy")}} 即可。 +- 下列捕获器已经过时： + + - `hasOwn` ([bug 980565](https://bugzilla.mozilla.org/show_bug.cgi?id=980565), Firefox 33). + - `getEnumerablePropertyKeys` ([bug 783829](https://bugzilla.mozilla.org/show_bug.cgi?id=783829), Firefox 37) + - `getOwnPropertyNames` ([bug 1007334](https://bugzilla.mozilla.org/show_bug.cgi?id=1007334), Firefox 33) + - `keys` ([bug 1007334](https://bugzilla.mozilla.org/show_bug.cgi?id=1007334), Firefox 33) + +### 转义序列 + +字符串字面量（literal）和正则表达式字面量中的八进制转义序列（反斜杠 `\` 后跟一到三位的八进制数字）已被废弃。 + +{{jsxref("Global_Objects/escape", "escape")}} 函数和 {{jsxref("Global_Objects/unescape", "unescape")}}函数已被废弃。使用 {{jsxref("Global_Objects/encodeURI", "encodeURI")}}、{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}、{{jsxref("Global_Objects/decodeURI", "decodeURI")}} 或 {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} 对特殊字符进行转义序列编码和解码。 + +### String 对象的方法 + +- [HTML 封装方法](/zh-CN/docs/tag/HTML%20wrapper%20methods)，比如 {{jsxref("String.prototype.fontsize")}} 和 {{jsxref("String.prototype.big")}}，已被废弃。 +- {{jsxref("String.prototype.quote")}} 已在 Firefox 37 中被移除。 +- non standard `flags` parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated. +- {{jsxref("String.prototype.substr")}} probably won't be removed anytime soon, but it's defined in [Annex B](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr) of the ECMA-262 standard, whose [introduction](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers) states: "… Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. …" + +## 过时特性 + +这些过时的特性已经完全被删除，不能在当前或者未来版本的 JavaScript 中使用了。 + +### Object 对象 + +| 属性 | 描述 | +| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| {{jsxref("Global_Objects/Object/count", "__count__")}} | 返回用户自定义对象上的可枚举自身属性的个数。 | +| {{jsxref("Global_Objects/Object/Parent", "__parent__")}} | 指向一个对象的上下文。 | +| {{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}} | 在指定对象的上下文上执行一个包含 JavaScript 代码的字符串。 | +| {{jsxref("Object.observe()")}} | Asynchronously observing the changes to an object. | +| {{jsxref("Object.unobserve()")}} | Remove observers. | +| {{jsxref("Object.getNotifier()")}} | Creates an object that allows to synthetically trigger a change. | + +### 函数 + +| 属性 | 描述 | +| -------------------------------------------------------------------- | ------------ | +| {{jsxref("Global_Objects/Function/arity", "arity")}} | 形参的数量。 | + +### Array 对象 + +| 属性 | 描述 | +| ---------------------------------------- | ------------------------------------------- | +| {{jsxref("Array.observe()")}} | Asynchronously observing changes to Arrays. | +| {{jsxref("Array.unobserve()")}} | Remove observers. | + +### Number 对象 + +- {{jsxref("Number.toInteger()")}} + +### ParallelArray 对象 + +- {{jsxref("ParallelArray")}} + +### 声明 + +- {{jsxref("Statements/for_each...in", "for each...in")}} 声明已被废弃。使用 {{jsxref("Statements/for...of", "for...of")}} 作为代替。 +- 解构 {{jsxref("Statements/for...in", "for...in")}} 声明已被废弃。使用 {{jsxref("Statements/for...of", "for...of")}} 作为代替。 +- let 区块和 let 表达式已被废弃。 + +### E4X + +详见 [E4X](/zh-CN/docs/Archive/Web/E4X)。 + +### 变量引用语法（Sharp variables） + +详见 [JavaScript 中的变量引用语法](/zh-CN/docs/Archive/Web/Sharp_variables_in_JavaScript)。 diff --git a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.md b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.md index c3797dc92ff710..f1b364b58ddd2b 100644 --- a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.md +++ b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.md @@ -14,7 +14,7 @@ translation_of: >- --- {{jsSidebar("More")}} -> **警告：**非标准。旧式迭代器协议是一个特定于 SpiderMonkey 的功能，在 Firefox 58+ 中删除。对于面向未来的用法，请考虑使用 [for..of](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) 循环与[迭代协议](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols)。 +> **警告：** 非标准。旧式迭代器协议是一个特定于 SpiderMonkey 的功能，在 Firefox 58+ 中删除。对于面向未来的用法，请考虑使用 [for..of](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) 循环与[迭代协议](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols)。 ## 废弃的 Firefox 专用迭代器协议 diff --git a/files/zh-cn/web/javascript/reference/errors/bad_octal/index.md b/files/zh-cn/web/javascript/reference/errors/bad_octal/index.md index d6240aa0d8428a..509200badd135b 100644 --- a/files/zh-cn/web/javascript/reference/errors/bad_octal/index.md +++ b/files/zh-cn/web/javascript/reference/errors/bad_octal/index.md @@ -27,7 +27,7 @@ Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant. 请注意，不推荐使用八进制字面值和八进制转义序列，并会产生另外的弃用警告。 在 ECMAScript 6 和更高版本里，语法使用前导零后跟小写或大写拉丁字母“O”（0o 或 0O）。更多信息请查看 [lexical grammar](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Octal)。 -> **备注：**现在仅 **firefox** 会产生此错误。 +> **备注：** 现在仅 **firefox** 会产生此错误。 ## 示例 diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/index.md b/files/zh-cn/web/javascript/reference/functions/arguments/index.md index bb6042962b87e2..2c2928c24f1a03 100644 --- a/files/zh-cn/web/javascript/reference/functions/arguments/index.md +++ b/files/zh-cn/web/javascript/reference/functions/arguments/index.md @@ -46,7 +46,7 @@ const args = Array.from(arguments); const args = [...arguments]; ``` -> **警告：**对参数使用 slice 会阻止某些 JavaScript 引擎中的优化 (比如 V8 - [更多信息](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments))。如果你关心性能，尝试通过遍历 arguments 对象来构造一个新的数组。另一种方法是使用被忽视的`Array`构造函数作为一个函数： +> **警告：** 对参数使用 slice 会阻止某些 JavaScript 引擎中的优化 (比如 V8 - [更多信息](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments))。如果你关心性能，尝试通过遍历 arguments 对象来构造一个新的数组。另一种方法是使用被忽视的`Array`构造函数作为一个函数： > > ```js > var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments)); @@ -98,7 +98,7 @@ var args = [...arguments]; - [`arguments[@@iterator]`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator) - : 返回一个新的{{jsxref("Array/@@iterator", "Array 迭代器", "", 0)}} 对象，该对象包含参数中每个索引的值。 -> **备注：**在严格模式下，`arguments`对象已与过往不同。[`arguments[@@iterator]`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator)不再与函数的实际形参之间共享，同时 caller 属性也被移除。 +> **备注：** 在严格模式下，`arguments`对象已与过往不同。[`arguments[@@iterator]`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator)不再与函数的实际形参之间共享，同时 caller 属性也被移除。 ## 例子 diff --git a/files/zh-cn/web/javascript/reference/functions/get/index.md b/files/zh-cn/web/javascript/reference/functions/get/index.md index d96c029e8a977b..cd7be3deff11bb 100644 --- a/files/zh-cn/web/javascript/reference/functions/get/index.md +++ b/files/zh-cn/web/javascript/reference/functions/get/index.md @@ -101,7 +101,7 @@ Getters 给你一种方法来定义一个对象的属性，但是在访问它们 - 如果现在不需要该值。它将在稍后使用，或在某些情况下它根本不使用。 - 如果被使用，它将被访问几次，并且不需要重新计算，该值将永远不会被改变，或者不应该被重新计算。 -> **备注：**这意味着你不应该为你希望更改其值的属性使用懒 getter，因为 getter 不会重新计算该值。 +> **备注：** 这意味着你不应该为你希望更改其值的属性使用懒 getter，因为 getter 不会重新计算该值。 在以下示例中，对象具有一个 getter 属性。在获取属性时，该属性将从对象中删除并重新添加，但此时将隐式显示为数据属性。最后返回得到值。 diff --git a/files/zh-cn/web/javascript/reference/functions/index.md b/files/zh-cn/web/javascript/reference/functions/index.md index 919a906c752f29..c0885418a3b6d9 100644 --- a/files/zh-cn/web/javascript/reference/functions/index.md +++ b/files/zh-cn/web/javascript/reference/functions/index.md @@ -7,27 +7,20 @@ tags: - JavaScript translation_of: Web/JavaScript/Reference/Functions --- -
{{jsSidebar("Functions")}}
+{{jsSidebar("Functions")}}一般来说，一个函数是可以通过外部代码调用的一个“子程序”（或在递归的情况下由内部函数调用）。像程序本身一样，一个函数由称为函数体的一系列语句组成。值可以传递给一个函数，函数将返回一个值。在 JavaScript 中，函数是**头等 (**first-class**)**对象，因为它们可以像任何其他**对象**一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之，它们是[`Function`](/zh-cn/JavaScript/Reference/Global_Objects/Function)对象。 -
一般来说，一个函数是可以通过外部代码调用的一个“子程序”（或在递归的情况下由内部函数调用）。像程序本身一样，一个函数由称为函数体的一系列语句组成。值可以传递给一个函数，函数将返回一个值。
+有关更多示例和说明，请参阅[有关函数的 JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide/Functions)。 -
+## 描述 -
在 JavaScript 中，函数是头等 (first-class)对象，因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之，它们是Function对象。
+在 JavaScript 中，每个函数其实都是一个`Function`对象。查看{{jsxref("Function")}}页面`了解其`属性和方法。 -
+如果一个函数中没有使用 return 语句，则它默认返回`undefined`。要想返回一个特定的值，则函数必须使用 [`return`](/zh-cn/JavaScript/Reference/Statements/return) 语句来指定一个要返回的值。(使用[new](/zh-cn/JavaScript/Reference/Operators/new)关键字调用一个[构造函数](/zh-cn/JavaScript/Reference/Global_Objects/Object/constructor)除外)。 -

有关更多示例和说明，请参阅有关函数的 JavaScript 指南。

+调用函数时，传递给函数的值被称为函数的实参（值传递），对应位置的函数参数名叫作形参。如果实参是一个包含原始值 (数字，字符串，布尔值) 的变量，则就算函数在内部改变了对应形参的值，返回后，该实参变量的值也不会改变。如果实参是一个对象引用，则对应形参会和该实参指向同一个对象。假如函数在内部改变了对应形参的值，返回后，实参指向的对象的值也会改变： -

描述

- -

在 JavaScript 中，每个函数其实都是一个Function对象。查看{{jsxref("Function")}}页面了解其属性和方法。

- -

如果一个函数中没有使用 return 语句，则它默认返回undefined。要想返回一个特定的值，则函数必须使用 return 语句来指定一个要返回的值。(使用new关键字调用一个构造函数除外)。

- -

调用函数时，传递给函数的值被称为函数的实参（值传递），对应位置的函数参数名叫作形参。如果实参是一个包含原始值 (数字，字符串，布尔值) 的变量，则就算函数在内部改变了对应形参的值，返回后，该实参变量的值也不会改变。如果实参是一个对象引用，则对应形参会和该实参指向同一个对象。假如函数在内部改变了对应形参的值，返回后，实参指向的对象的值也会改变：

- -
 /* 定义函数 myFunc */
+```js
+ /* 定义函数 myFunc */
  function myFunc(theObject)
  {
    //实参 mycar 和形参 theObject 指向同一个对象。
@@ -55,280 +48,286 @@ translation_of: Web/JavaScript/Reference/Functions
   * 弹出 'Toyota',对象的属性已被修改。
   */
  console.log(mycar.brand);
-
+``` -

在函数执行时，this 关键字并不会指向正在运行的函数本身，而是指向调用该函数的对象。所以，如果你想在函数内部获取函数自身的引用，只能使用函数名或者使用arguments.callee属性 (严格模式下不可用)，如果该函数是一个匿名函数，则你只能使用后者。

+在函数执行时，[`this` 关键字](/zh-cn/JavaScript/Reference/Operators/this)并不会指向正在运行的函数本身，而是指向调用该函数的对象。所以，如果你想在函数内部获取函数自身的引用，只能使用函数名或者使用[arguments.callee](/zh-cn/JavaScript/Reference/Functions_and_function_scope/arguments/callee)属性 (**[严格模式](/zh-cn/JavaScript/Strict_mode)**下不可用)，如果该函数是一个匿名函数，则你只能使用后者。 -

函数定义

+## 函数定义 -

定义函数有多种方法：

+定义函数有多种方法： -

函数声明 (函数语句)

+### 函数声明 (函数语句) -

有一个特殊的语法来声明函数 (查看函数语句了解详情)：

+有一个特殊的语法来声明函数 (查看[函数语句](/zh-cn/JavaScript/Reference/Statements/function)了解详情)： -
function name([param[, param[, ... param]]]) { statements }
-
+```plain +function name([param[, param[, ... param]]]) { statements } +``` -
-
name
-
函数名。
-
param
-
传递给函数的参数的名称。
-
statements
-
组成函数体的声明语句。
-
+- `name` + - : 函数名。 +- `param` + - : 传递给函数的参数的名称。 +- `statements` + - : 组成函数体的声明语句。 -

函数表达式 (function expression)

+### 函数表达式 (`function` expression) -

函数表达式和函数声明非常相似，它们甚至有相同的语法（查看函数表达式了解详情）。一个函数表达式可能是一个更大的表达式的一部分。可以定义函数“名字”（例如可以在调用堆栈时使用）或者使用“匿名”函数。函数表达式不会提升，所以不能在定义之前调用。

+函数表达式和函数声明非常相似，它们甚至有相同的语法（查看[函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function)了解详情）。一个函数表达式可能是一个更大的表达式的一部分。可以定义函数“名字”（例如可以在调用堆栈时使用）或者使用“匿名”函数。函数表达式不会提升，所以不能在定义之前调用。 -
var myFunction = function name([param[, param[, ... param]]]) { statements }
-
+```plain +var myFunction = function name([param[, param[, ... param]]]) { statements } +``` -
-
name
-
函数名，可以省略。当省略函数名的时候，该函数就成为了匿名函数。
-
param
-
传递给函数的参数的名称。
-
statements
-
组成函数体的声明语句。
-
+- `name` + - : 函数名，可以省略。当省略函数名的时候，该函数就成为了匿名函数。 +- `param` + - : 传递给函数的参数的名称。 +- `statements` + - : 组成函数体的声明语句。 -

下面是匿名函数的一个例子（函数没有名字）：

+下面是**匿名**函数的一个例子（函数没有名字）： -
var myFunction = function() {
+```js
+var myFunction = function() {
     // statements
-}
+} +``` -

也可以在定义时为函数命名：

+也可以在定义时为函数**命名**： -
var myFunction = function namedFunction(){
+```js
+var myFunction = function namedFunction(){
     // statements
-}
+} +``` -

命名函数表达式的好处是当我们遇到错误时，堆栈跟踪会显示函数名，容易寻找错误。

+命名函数表达式的好处是当我们遇到错误时，堆栈跟踪会显示函数名，容易寻找错误。 -

可以看到，上面的两个例子都不以 function 开头。不以 function 开头的函数语句就是函数表达式定义。

+可以看到，上面的两个例子都不以 function 开头。不以 function 开头的函数语句就是函数表达式定义。 -

当函数只使用一次时，通常使用IIFE (Immediately Invokable Function Expressions)。

+当函数只使用一次时，通常使用**IIFE (_Immediately Invokable Function Expressions_)。** -
(function() {
+```js
+(function() {
     statements
-})();
+})(); +``` -

IIFE是在函数声明后立即调用的函数表达式。

+**IIFE**是在函数声明后立即调用的函数表达式。 -

函数生成器声明 (function* 语句)

+### 函数生成器声明 (`function*` 语句) -

函数声明有一种特殊的语法 (详情请查阅{{jsxref('Statements/function*', 'function* statement')}} )：

+函数声明有一种特殊的语法 (详情请查阅{{jsxref('Statements/function*', 'function* statement')}} )： -
function* name([param[, param[, ...param]]]) { statements }
+```plain +function* name([param[, param[, ...param]]]) { statements } +``` -
-
name
-
函数名称。
-
param
-
传递给函数的参数的名称。
-
statements
-
组成函数体的声明语句。
-
+- `name` + - : 函数名称。 +- `param` + - : 传递给函数的参数的名称。 +- `statements` + - : 组成函数体的声明语句。 -

函数生成器表达式 (function*表达式)

+### 函数生成器表达式 (`function*`表达式) -

构造函数表达式和函数声明类似，并且有着相同的语法 (详情请查阅 {{jsxref('Operators/function*', 'function* expression')}} ):

+构造函数表达式和函数声明类似，并且有着相同的语法 (详情请查阅 {{jsxref('Operators/function*', 'function* expression')}} ): -
function* [name]([param] [, param] [..., param]) { statements }
+```plain +function* [name]([param] [, param] [..., param]) { statements } +``` -
-
name
-
函数名称。函数名可以被省略，在这种情况下该函数将变成匿名函数。
-
param
-
传递给函数的参数的名称。
-
statements
-
组成函数体的声明语句。
-
+- `name` + - : 函数名称。函数名可以被省略，在这种情况下该函数将变成匿名函数。 +- `param` + - : 传递给函数的参数的名称。 +- `statements` + - : 组成函数体的声明语句。 -

箭头函数表达式 (=>)

+### 箭头函数表达式 (=>) -

箭头函数表达式有着更短的语法，并在词汇方面结合这个值 (详情请查阅 arrow functions ):

+箭头函数表达式有着更短的语法，并在词汇方面结合这个值 (详情请查阅 [arrow functions](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ): -
([param] [, param]) => { statements } param => expression
+```plain +([param] [, param]) => { statements } param => expression +``` -
-
param
-
参数名称。零参数需要用 () 表示. 只有一个参数时不需要括号. (例如 foo => 1)
-
statements or expression
-
多个声明 statements 需要用大括号括起来，而单个表达式时则不需要。表达式 expression 也是该函数的隐式返回值。
-
+- `param` + - : 参数名称。零参数需要用 () 表示. 只有一个参数时不需要括号. (例如 `foo => 1`) +- `statements or expression` + - : 多个声明 statements 需要用大括号括起来，而单个表达式时则不需要。表达式 expression 也是该函数的隐式返回值。 -

Function构造函数

+### `Function`构造函数 -
-

备注： 不推荐使用 Function 构造函数创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。

-
+> **备注：** 不推荐使用 `Function` 构造函数创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。 -

所有其他对象，{{jsxref("Function")}} 对象可以用 new 操作符创建：

+所有其他对象，{{jsxref("Function")}} 对象可以用 new 操作符创建： -
new Function (arg1, arg2, ... argN, functionBody)
+```plain +new Function (arg1, arg2, ... argN, functionBody) +``` -
-
arg1, arg2, ... argN
-
函数使用零个或多个名称作为正式的参数名称。每一个必须是一个符合有效的 JavaScript 标识符规则的字符串或用逗号分隔的字符串列表，例如“x”,“theValue”或“a,b”。
-
functionBody
-
一个构成的函数定义的，包含 JavaScript 声明语句的字符串。
-
+- `arg1, arg2, ... argN` + - : 函数使用零个或多个名称作为正式的参数名称。每一个必须是一个符合有效的 JavaScript 标识符规则的字符串或用逗号分隔的字符串列表，例如“x”,“theValue”或“a,b”。 +- `functionBody` + - : 一个构成的函数定义的，包含 JavaScript 声明语句的字符串。 -

把 Function 的构造函数当作函数一样调用 (不使用 new 操作符) 的效果与作为 Function 的构造函数调用一样。

+把 Function 的构造函数当作函数一样调用 (不使用 new 操作符) 的效果与作为 Function 的构造函数调用一样。 -

生成器函数的构造函数

+### 生成器函数的构造函数 -
-

备注： GeneratorFunction 不是一个全局对象，但可以从构造函数实例取得。(详情请查阅生成器函数).

-
+> **备注：** `GeneratorFunction` 不是一个全局对象，但可以从构造函数实例取得。(详情请查阅[生成器函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数)). -
-

备注： 不推荐使用构造器函数的构造函数 (GeneratorFunction constructor) 创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。

-
+> **备注：** 不推荐使用构造器函数的构造函数 (`GeneratorFunction` constructor) 创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。 -

所有其他对象，{{jsxref("GeneratorFunction")}} 对象可以用 new 操作符创建：

+所有其他对象，{{jsxref("GeneratorFunction")}} 对象可以用 new 操作符创建： -
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
+```plain +new GeneratorFunction (arg1, arg2, ... argN, functionBody) +``` -
-
arg1, arg2, ... argN
-
函数使用零个或多个名称作为正式的参数名称。每一个必须是一个符合有效的 JavaScript 标识符规则的字符串或用逗号分隔的字符串列表，例如“x”,“theValue”或“a,b”。
-
functionBody
-
一个构成的函数定义的，包含 JavaScript 声明语句的字符串。
-
+- `arg1, arg2, ... argN` + - : 函数使用零个或多个名称作为正式的参数名称。每一个必须是一个符合有效的 JavaScript 标识符规则的字符串或用逗号分隔的字符串列表，例如“x”,“theValue”或“a,b”。 +- `functionBody` + - : 一个构成的函数定义的，包含 JavaScript 声明语句的字符串。 -

把 Function 的构造函数当作函数一样调用 (不使用 new 操作符) 的效果与作为 Function 的构造函数调用一样。

+把 Function 的构造函数当作函数一样调用 (不使用 new 操作符) 的效果与作为 Function 的构造函数调用一样。 -

函数参数

+## 函数参数 -

默认参数

+### 默认参数 -

如果没有值或传入了未定义的值，默认函数参数允许形式参数使用默认值初始化。 参见：默认参数。

+如果没有值或传入了未定义的值，默认函数参数允许形式参数使用默认值初始化。 参见：[默认参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters)。 -

剩余参数

+### 剩余参数 -

剩余参数语法允许将数量不限的参数描述成一个数组。 参见：剩余参数。

+剩余参数语法允许将数量不限的参数描述成一个数组。 参见：[剩余参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters)。 -

arguments对象

+## `arguments`对象 -

你可以参阅在函数里使用arguments对象的函数参数。参见： arguments。

+你可以参阅在函数里使用`arguments`对象的函数参数。参见：[ arguments](/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments)。 -
    -
  • arguments: 一个包含了传递给当前执行函数参数的类似于数组的对象。
    • -
  • arguments.callee {{Deprecated_Inline}}: 当前正在执行的函数。
    • -
  • arguments.caller{{Deprecated_Inline}} : 调用当前执行函数的函数。
    • -
  • arguments.length: 传给函数的参数的数目。
    • -
+- [`arguments`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments): 一个包含了传递给当前执行函数参数的类似于数组的对象。 +- [`arguments.callee`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee) {{Deprecated_Inline}}: 当前正在执行的函数。 +- [`arguments.caller`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller){{Deprecated_Inline}} : 调用当前执行函数的函数。 +- [`arguments.length`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length): 传给函数的参数的数目。 -

方法函数定义

+## 方法函数定义 -

Getter 和 setter 函数

+### Getter 和 setter 函数 -

你可以在支持添加新属性的任何标准的内置对象或用户定义的对象内定义 getter(访问方法) 和 setter(设置方法)。使用对象字面量语法定义 getters 和 setters 方法。

+你可以在支持添加新属性的任何标准的内置对象或用户定义的对象内定义 getter(访问方法) 和 setter(设置方法)。使用对象字面量语法定义 getters 和 setters 方法。 -
-
get
-
-

当查找某个对象属性时，该对象属性将会与被调用函数绑定。

-
-
set
-
当试图设置该属性时，对象属性与被调用函数绑定。
-
+- [get](/zh-CN/docs/Web/JavaScript/Reference/Functions/get) + - : 当查找某个对象属性时，该对象属性将会与被调用函数绑定。 +- [set](/zh-CN/docs/Web/JavaScript/Reference/Functions/set) + - : 当试图设置该属性时，对象属性与被调用函数绑定。 -

方法定义语法

+### 方法定义语法 -

从 ECMAScript 6 开始，你可以用更短的语法定义自己的方法，类似于 getters 和 setters。详情请查阅 method definitions .

+从 ECMAScript 6 开始，你可以用更短的语法定义自己的方法，类似于 getters 和 setters。详情请查阅 [method definitions](/zh-CN/docs/Web/JavaScript/Reference/Functions/Method_definitions) . -
 var obj = {
+```js
+ var obj = {
    foo() {},
    bar() {}
  };
-
+``` -

构造函数 vs 函数声明 vs 函数表达式

+## 构造函数 vs 函数声明 vs 函数表达式 -

对比下面的例子：

+对比下面的例子： -

一个用Function构造函数定义的函数，被赋值给变量 multiply：

+一个用`Function`构造函数定义的函数，被赋值给变量 multiply： -
var multiply = new Function('x', 'y', 'return x * y');
+```js +var multiply = new Function('x', 'y', 'return x * y'); +``` -

一个名为multiply的函数声明：

+一个名为`multiply`的函数声明： -
function multiply(x, y) {
+```js
+function multiply(x, y) {
    return x * y;
 } // 没有分号
-
+``` -

一个匿名函数的函数表达式，被赋值给变量multiply：

+一个匿名函数的函数表达式，被赋值给变量`multiply`： -
 var multiply = function(x, y) {
+```js
+ var multiply = function(x, y) {
    return x * y;
  };
-
+``` -

一个命名为func_named的函数的函数表达式，被赋值给变量multiply：

+一个命名为`func_named`的函数的函数表达式，被赋值给变量`multiply`： -
var multiply = function func_name(x, y) {
+```js
+var multiply = function func_name(x, y) {
    return x * y;
-};
+}; +``` -

差别

+### 差别 -

虽然有一些细微的差别，但所起的作用都差不多：

+虽然有一些细微的差别，但所起的作用都差不多： -

函数名和函数的变量存在着差别。函数名不能被改变，但函数的变量却能够被再分配。函数名只能在函数体内使用。倘若在函数体外使用函数名将会导致错误（如果函数之前是通过一个 var 语句声明的则是 undefined）。例如：

+函数名和函数的变量存在着差别。函数名不能被改变，但函数的变量却能够被再分配。函数名只能在函数体内使用。倘若在函数体外使用函数名将会导致错误（如果函数之前是通过一个 var 语句声明的则是 undefined）。例如： -
var y = function x() {};
+```js
+var y = function x() {};
 alert(x); // throws an error
-
+``` -

当函数是通过 Function's toString method被序列化时，函数名同样也会出现。

+当函数是通过 [`Function`'s toString method](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString)被序列化时，函数名同样也会出现。 -

另一方面，被函数赋值的变量仅仅受限于它的作用域，该作用域确保包含着该函数被声明时的作用域。

+另一方面，被函数赋值的变量仅仅受限于它的作用域，该作用域确保包含着该函数被声明时的作用域。 -

正如第四个例子所展示的那样，函数名与被函数赋值的变量是不相同的。彼此之间没有关系。函数声明同时也创建了一个和函数名相同的变量。因此，与函数表达式定义不同，以函数声明定义的函数能够在它们被定义的作用域内通过函数名而被访问到：

+正如第四个例子所展示的那样，函数名与被函数赋值的变量是不相同的。彼此之间没有关系。函数声明同时也创建了一个和函数名相同的变量。因此，与函数表达式定义不同，以函数声明定义的函数能够在它们被定义的作用域内通过函数名而被访问到： -

使用用 'new Function'定义的函数没有函数名。 然而，在 SpiderMonkey JavaScript 引擎中，其函数的序列化形式表现的好像它拥有一个名叫"anonymous"的名称一样。比如，使用 alert(new Function()) 输出：

+使用用 '`new Function'定义的函数没有函数名。` 然而，在 [SpiderMonkey](/zh-CN/docs/Mozilla/Projects/SpiderMonkey) JavaScript 引擎中，其函数的序列化形式表现的好像它拥有一个名叫"anonymous"的名称一样。比如，使用 `alert(new Function())` 输出： -
function anonymous() {
-}
+```js +function anonymous() { +} +``` -

而实际上其函数并没有名称，anonymous 不是一个可以在函数内被访问到的变量。例如，下面的例子将会导致错误：

+而实际上其函数并没有名称，`anonymous` 不是一个可以在函数内被访问到的变量。例如，下面的例子将会导致错误： -
var foo = new Function("alert(anonymous);");
+```js
+var foo = new Function("alert(anonymous);");
 foo();
-
+``` -

和通过函数表达式定义或者通过 Function 构造函数定义的函数不同，函数声明定义的函数可以在它被声明之前使用。举个例子：

+和通过函数表达式定义或者通过 Function 构造函数定义的函数不同，函数声明定义的函数可以在它被声明之前使用。举个例子： -
foo(); // alerts FOO!
+```js
+foo(); // alerts FOO!
 function foo() {
    alert('FOO!');
-}
+} +``` -

函数表达式定义的函数继承了当前的作用域。换言之，函数构成了闭包。另一方面，Function 构造函数定义的函数不继承任何全局作用域以外的作用域 (那些所有函数都继承的)。

+函数表达式定义的函数继承了当前的作用域。换言之，函数构成了闭包。另一方面，Function 构造函数定义的函数不继承任何全局作用域以外的作用域 (那些所有函数都继承的)。 -

通过函数表达式定义的函数和通过函数声明定义的函数只会被解析一次，而 Function 构造函数定义的函数却不同。也就是说，每次构造函数被调用，传递给 Function 构造函数的函数体字符串都要被解析一次 。虽然函数表达式每次都创建了一个闭包，但函数体不会被重复解析，因此函数表达式仍然要快于"new Function(...)"。 所以 Function 构造函数应尽可能地避免使用。

+通过函数表达式定义的函数和通过函数声明定义的函数只会被解析一次，而 Function 构造函数定义的函数却不同。也就是说，每次构造函数被调用，传递给 Function 构造函数的函数体字符串都要被解析一次 。虽然函数表达式每次都创建了一个闭包，但函数体不会被重复解析，因此函数表达式仍然要快于"`new Function(...)`"。 所以 Function 构造函数应尽可能地避免使用。 -

有一点应该要注意的，在通过解析 Function 构造函数字符串产生的函数里，内嵌的函数表达式和函数声明不会被重复解析。例如：

+有一点应该要注意的，在通过解析 Function 构造函数字符串产生的函数里，内嵌的函数表达式和函数声明不会被重复解析。例如： -
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
-foo(); // 函数体字符串"function() {\n\talert(bar);\n}"的这一部分不会被重复解析。
+```js +var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // 函数体字符串"function() {\n\talert(bar);\n}"的这一部分不会被重复解析。 +``` -

函数声明非常容易（经常是意外地）转换为函数表达式。当它不再是一个函数声明：

+函数声明非常容易（经常是意外地）转换为函数表达式。当它不再是一个函数声明： -
    -
  • 成为表达式的一部分
    • -
  • 不再是函数或者脚本自身的“源元素”（source element）。“源元素”是脚本或函数体中的非嵌套语句。
    • -
+- 成为表达式的一部分 +- 不再是函数或者脚本自身的“源元素”（source element）。“源元素”是脚本或函数体中的非嵌套语句。 -
var x = 0;               // source element
+```js
+var x = 0;               // source element
 if (x === 0) {           // source element
    x = 10;               // 非 source element
    function boo() {}     // 非 source element
@@ -341,11 +340,12 @@ function foo() {         // source element
       y++;               //非 source element
    }
 }
-
+``` -

例子

+### 例子 -
// 函数声明
+```js
+// 函数声明
 function foo() {}
 
 // 函数表达式
@@ -368,13 +368,14 @@ function a() {
       function c() {}
    }
 }
-
+``` -

块级函数

+## 块级函数 -

从 ECMAScript 6 开始，在严格模式下，块里的函数作用域为这个块。ECMAScript 6 之前不建议块级函数在严格模式下使用。

+从 ECMAScript 6 开始，在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下，块里的函数作用域为这个块。ECMAScript 6 之前不建议块级函数在严格模式下使用。 -
'use strict';
+```js
+'use strict';
 
 function f() {
   return 1;
@@ -388,93 +389,100 @@ function f() {
 
 f() === 1; // true
 
-// f() === 2 in non-strict mode
+// f() === 2 in non-strict mode +``` -

非严格模式下的块级函数

+### 非严格模式下的块级函数 -

一句话：不要用。

+一句话：不要用。 -

在非严格模式下，块中的函数声明表现奇怪。例如：

+在非严格模式下，块中的函数声明表现奇怪。例如： -
if (shouldDefineZero) {
+```js
+if (shouldDefineZero) {
    function zero() {     // DANGER: 兼容性风险
       console.log("This is zero.");
    }
 }
-
+``` -

ECMAScript 6 中，如果shouldDefineZero是 false，则永远不会定义 zero，因为这个块从不执行。然而，这是标准的新的一部分。这是历史遗留问题，无论这个块是否执行，一些浏览器会定义 zero。

+ECMAScript 6 中，如果`shouldDefineZero`是 false，则永远不会定义 zero，因为这个块从不执行。然而，这是标准的新的一部分。这是历史遗留问题，无论这个块是否执行，一些浏览器会定义 zero。 -

在严格模式下，所有支持ECMAScript 6 的浏览器以相同的方式处理：只有在 shouldDefineZero 为 true 的情况下定义 zero，并且作用域只是这个块内。

+`在`[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)`下，所有支持`ECMAScript 6 的`浏览器以相同的方式处理：只有在 shouldDefineZero 为 true 的情况下定义 zero，并且作用域只是这个块内。` -

有条件地定义一个函数的一个更安全的方法是把函数表达式赋给一个变量：

+有条件地定义一个函数的一个更安全的方法是把函数表达式赋给一个变量： -
var zero;
+```js
+var zero;
 if (0) {
    zero = function() {
       console.log("This is zero.");
    };
 }
-
+``` -

示例

+## 示例 -

返回格式化数字

+### 返回格式化数字 -

下面的函数返回一个字符串，其中包含了一个格式化的、以一个由 0 开头并填充的数字。

+下面的函数返回一个字符串，其中包含了一个格式化的、以一个由 0 开头并填充的数字。 -
// 这个函数返回一个由 0 开头并填充的字符串
+```js
+// 这个函数返回一个由 0 开头并填充的字符串
 function padZeros(num, totalLen) {
    var numStr = num.toString();             // 用字符串返回值进行初始化
    var numZeros = totalLen - numStr.length; // 计算 zeros 顺序
-   for (var i = 1; i <= numZeros; i++) {
+   for (var i = 1; i <= numZeros; i++) {
       numStr = "0" + numStr;
    }
    return numStr;
-}
+} +``` -

下面的语句调用了 padZeros 函数：

+下面的语句调用了 padZeros 函数： -
var result;
+```js
+var result;
 result = padZeros(42,4); // returns "0042"
 result = padZeros(42,2); // returns "42"
-result = padZeros(5,4);  // returns "0005"
+result = padZeros(5,4); // returns "0005" +``` -

检测函数是否存在

+### 检测函数是否存在 -

你可以通过 typeof 操作符检测一个函数是否存在。在下面的例子中，用一个测试来演示检测 window 对象是否拥有一个 noFunc 函数的属性。如果存在，那就使用它；否则就采取其它的一些操作。

+你可以通过 **typeof** 操作符检测一个函数是否存在。在下面的例子中，用一个测试来演示检测 window 对象是否拥有一个 noFunc 函数的属性。如果存在，那就使用它；否则就采取其它的一些操作。 -
if ('function' === typeof window.noFunc) {
+```js
+if ('function' === typeof window.noFunc) {
    // use noFunc()
  } else {
    // do something else
- }
+ } +``` -

注意在 if 语句中，使用了 noFunc 的引用 -- 在函数名的后面没有括号“（）”，所以实际函数并没有被调用。

+注意在 if 语句中，使用了 noFunc 的引用 -- 在函数名的后面没有括号“（）”，所以实际函数并没有被调用。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

参阅

- -
    -
  • {{jsxref("Statements/function", "function statement")}}
    • -
  • {{jsxref("Operators/function", "function expression")}}
    • -
  • {{jsxref("Statements/function*", "function* statement")}}
    • -
  • {{jsxref("Operators/function*", "function* expression")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • -
  • {{jsxref("Functions/Default_parameters", "Default parameters")}}
    • -
  • {{jsxref("Functions/rest_parameters", "Rest parameters")}}
    • -
  • {{jsxref("Functions/arguments", "Arguments object")}}
    • -
  • {{jsxref("Functions/get", "getter")}}
    • -
  • {{jsxref("Functions/set", "setter")}}
    • -
  • {{jsxref("Functions/Method_definitions", "Method definitions")}}
    • -
  • Functions and function scope
    • -
+## 参阅 + +- {{jsxref("Statements/function", "function statement")}} +- {{jsxref("Operators/function", "function expression")}} +- {{jsxref("Statements/function*", "function* statement")}} +- {{jsxref("Operators/function*", "function* expression")}} +- {{jsxref("Function")}} +- {{jsxref("GeneratorFunction")}} +- {{jsxref("Functions/Arrow_functions", "Arrow functions")}} +- {{jsxref("Functions/Default_parameters", "Default parameters")}} +- {{jsxref("Functions/rest_parameters", "Rest parameters")}} +- {{jsxref("Functions/arguments", "Arguments object")}} +- {{jsxref("Functions/get", "getter")}} +- {{jsxref("Functions/set", "setter")}} +- {{jsxref("Functions/Method_definitions", "Method definitions")}} +- [Functions and function scope](/zh-CN/docs/Web/JavaScript/Reference/Functions_and_function_scope) diff --git a/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md index 1fd77c91cacdbb..5e435ab0408365 100644 --- a/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md +++ b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md @@ -65,7 +65,7 @@ var obj = { }; ``` -> **备注：**简写语法使用命名函数而不是匿名函数（如…`foo: function() {}`…）。命名函数可以从函数体调用（这对匿名函数是不可能的，因为没有标识符可以引用）。详细信息，请参阅{{jsxref("Operators/function","function","#Examples")}}。 +> **备注：** 简写语法使用命名函数而不是匿名函数（如…`foo: function() {}`…）。命名函数可以从函数体调用（这对匿名函数是不可能的，因为没有标识符可以引用）。详细信息，请参阅{{jsxref("Operators/function","function","#Examples")}}。 ### 生成器方法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/concat/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/concat/index.md index 4bca050e7fad89..8cf7ac86e87e8d 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/concat/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/concat/index.md @@ -39,7 +39,7 @@ var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) - 数据类型如字符串，数字和布尔（不是{{jsxref("Global_Objects/String", "String")}}，{{jsxref("Global_Objects/Number", "Number")}} 和 {{jsxref("Global_Objects/Boolean", "Boolean")}} 对象）：`concat`将字符串和数字的值复制到新数组中。 -> **备注：**数组/值在连接时保持不变。此外，对于新数组的任何操作（仅当元素不是对象引用时）都不会对原始数组产生影响，反之亦然。 +> **备注：** 数组/值在连接时保持不变。此外，对于新数组的任何操作（仅当元素不是对象引用时）都不会对原始数组产生影响，反之亦然。 ## 示例 diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md index 01df8e029c2379..032afd9da3e115 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/every **`every()`** 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。 -> **备注：**若收到一个空数组，此方法在任何情况下都会返回 `true`。 +> **备注：** 若收到一个空数组，此方法在任何情况下都会返回 `true`。 {{EmbedInteractiveExample("pages/js/array-every.html")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md index 2ed8ebd299c4bb..775d648f98a35d 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md @@ -122,7 +122,7 @@ items.forEach(function(item){ ### 打印出数组的内容 -> **备注：**为了在控制台中显示数组的内容，你可以使用 [`console.table()`](/zh-CN/docs/Web/API/Console/table) 来展示经过格式化的数组。下面的例子则是另一种使用 `forEach()` 的格式化的方法。 +> **备注：** 为了在控制台中显示数组的内容，你可以使用 [`console.table()`](/zh-CN/docs/Web/API/Console/table) 来展示经过格式化的数组。下面的例子则是另一种使用 `forEach()` 的格式化的方法。 下面的代码会为每一个数组元素输出一行记录： @@ -166,7 +166,7 @@ obj.sum; 因为 `thisArg` 参数（`this`）传给了 `forEach()`，每次调用时，它都被传给 `callback` 函数，作为它的 `this` 值。 -> **备注：**如果使用[箭头函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)来传入函数参数， `thisArg` 参数会被忽略，因为箭头函数在词法上绑定了 {{jsxref("Operators/this", "this")}} 值。 +> **备注：** 如果使用[箭头函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)来传入函数参数， `thisArg` 参数会被忽略，因为箭头函数在词法上绑定了 {{jsxref("Operators/this", "this")}} 值。 ### 对象复制器函数 diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/indexof/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/indexof/index.md index a6c1c9191a8d6d..ef3c787160e056 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/indexof/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/indexof/index.md @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf {{EmbedInteractiveExample("pages/js/array-indexof.html")}} -> **备注：**对于 String 方法，请参阅 {{jsxref("String.prototype.indexOf()")}}。 +> **备注：** 对于 String 方法，请参阅 {{jsxref("String.prototype.indexOf()")}}。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/join/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/join/index.md index 76f771f11137fa..9edaec35bf99db 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/join/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/join/index.md @@ -33,7 +33,7 @@ arr.join([separator]) 所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。 -> **警告：**如果一个元素为 `undefined` 或 `null`，它会被转换为空字符串。 +> **警告：** 如果一个元素为 `undefined` 或 `null`，它会被转换为空字符串。 ## 示例 diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md index 4b5ddec120bb9c..984c82310484ab 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md @@ -8,301 +8,226 @@ tags: - 方法 translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight --- -
{{JSRef}}
+{{JSRef}} -

reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

+**`reduceRight()`** 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。 -
{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}
+{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}} +对于从左至右遍历的相似方法请参阅 {{jsxref("Array.prototype.reduce()")}}. +## 语法 -

对于从左至右遍历的相似方法请参阅 {{jsxref("Array.prototype.reduce()")}}.

+```plain +arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue]) +``` -

语法

+### 参数 -
arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
+- `callback` + - : 一个回调函数，用于操作数组中的每个元素，它可接受四个参数：_ `accumulator` + _ : 累加器：上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果 `initialValue` 存在，累加器即为 `initialValue`，否则须为数组中的最后一个元素（详见下方 `initialValue` 处相关说明）。 + - `currentValue` + - : 当前元素：当前被处理的元素。 + - `index`{{optional_inline}} + - : 数组中当前被处理的元素的索引。 + - `array`{{optional_inline}} + - : 调用 `reduceRight()` 的数组。 +- `initialValue`{{optional_inline}} + - : 首次调用 `callback` 函数时，累加器 `accumulator` 的值。如果未提供该初始值，则将使用数组中的最后一个元素，并跳过该元素。如果不给出初始值，则需保证数组不为空。 + 否则，在空数组上调用 `reduce` 或 `reduceRight` 且未提供初始值（例如 `[].reduce( (acc, cur, idx, arr) => {} )` ）的话，会导致类型错误 [`TypeError: reduce of empty array with no initial value`](/zh-CN/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value)。 -

参数

+### 返回值 -
-
callback
-
一个回调函数，用于操作数组中的每个元素，它可接受四个参数： -
-
accumulator
-
累加器：上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果 initialValue 存在，累加器即为 initialValue，否则须为数组中的最后一个元素（详见下方 initialValue 处相关说明）。
-
currentValue
-
当前元素：当前被处理的元素。
-
index{{optional_inline}}
-
数组中当前被处理的元素的索引。
-
array{{optional_inline}}
-
调用 reduceRight() 的数组。
-
-
-
initialValue{{optional_inline}}
-
首次调用 callback 函数时，累加器 accumulator 的值。如果未提供该初始值，则将使用数组中的最后一个元素，并跳过该元素。如果不给出初始值，则需保证数组不为空。
- 否则，在空数组上调用 reduce 或 reduceRight 且未提供初始值（例如 [].reduce( (acc, cur, idx, arr) => {} ) ）的话，会导致类型错误 TypeError: reduce of empty array with no initial value。
-
+执行之后的返回值。 -

返回值

+## 描述 -

执行之后的返回值。

+`reduceRight` 为数组中每个元素调用一次 `callback` 回调函数，但是数组中被删除的索引或从未被赋值的索引会跳过。回调函数接受四个参数：初始值（或上次调用回调的返回值）、当前元素值、当前索引，以及调用迭代的当前数组。 -

描述

+可以像下面这样调用 `reduceRight` 的回调函数 `callback`： -

reduceRight 为数组中每个元素调用一次 callback 回调函数，但是数组中被删除的索引或从未被赋值的索引会跳过。回调函数接受四个参数：初始值（或上次调用回调的返回值）、当前元素值、当前索引，以及调用迭代的当前数组。

- -

可以像下面这样调用 reduceRight 的回调函数 callback：

- -
array.reduceRight(function(accumulator, currentValue, index, array) {
+```js
+array.reduceRight(function(accumulator, currentValue, index, array) {
   // ...
-});
+}); +``` -

首次调用回调函数时，accumulator 和 currentValue 的可能取值情况有两种：

+首次调用回调函数时，`accumulator` 和 `currentValue` 的可能取值情况有两种： -
    -
  • 如果在调用 reduceRight 时提供了 initialValue 参数，则 accumulator 等于 initialValue，currentValue 等于数组中的最后一个元素。
    • -
  • 如果没有提供 initialValue 参数，则 accumulator 等于数组最后一个元素， currentValue 等于数组中倒数第二个元素。
    • -
+- 如果在调用 `reduceRight` 时提供了 `initialValue` 参数，则 `accumulator` 等于 `initialValue`，`currentValue` 等于数组中的最后一个元素。 +- 如果没有提供 `initialValue` 参数，则 `accumulator` 等于数组最后一个元素， `currentValue` 等于数组中倒数第二个元素。 -

如果数组为空，但提供了 initialValue 参数，或如果数组中只有一个元素，且没有提供 initialValue 参数，将会直接返回 initialValue 参数或数组中的那一个元素。这两种情况下，都不会调用 callback 函数。

+如果数组为空，但提供了 `initialValue` 参数，或如果数组中只有一个元素，且没有提供 `initialValue` 参数，将会直接返回 `initialValue` 参数或数组中的那一个元素。这两种情况下，都不会调用 `callback` 函数。 -

如果数组为空，且没有提供 initialValue 参数，则会抛出一个 TypeError 错误。

+如果数组为空，且没有提供 `initialValue` 参数，则会抛出一个 `TypeError` 错误。 -

最终，首次调用时的情况可汇总为此表：

+最终，首次调用时的情况可汇总为此表： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
数组内元素数量是否提供 initialValue结果
> 1未提供accumulator 为数组中（下略）最后一个元素
- currentValue 为倒数第二个元素
提供accumulator 为 initialValue
- currentValue 为最后一个元素
= 1未提供直接返回数组中的唯一一个元素
= 0提供直接返回 initialValue
未提供抛出 TypeError 错误
数组内元素数量是否提供 initialValue结果
> 1未提供 + accumulator 为数组中（下略）最后一个元素
currentValue + 为倒数第二个元素 +
提供 + accumulator 为 initialValue
currentValue + 为最后一个元素 +
= 1未提供直接返回数组中的唯一一个元素
= 0提供直接返回 initialValue
未提供抛出 TypeError 错误
-

该函数的完整执行过程见下例：

+该函数的完整执行过程见下例： -
[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+```js
+[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
     return previousValue + currentValue;
 });
-
- -

一共会调用四次回调函数，每次调用的参数及返回值如下：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
callbackpreviousValuecurrentValueindexarray返回值
第一次调用433[0,1,2,3,4]7
第二次调用722[0,1,2,3,4]9
第三次调用911[0,1,2,3,4]10
第四次调用1000[0,1,2,3,4]10
+``` + +一共会调用四次回调函数，每次调用的参数及返回值如下： -

reduceRight 返回值是最后一次调用回调的返回值（10）。

+| `callback` | `previousValue` | `currentValue` | `index` | `array` | 返回值 | +| ---------- | --------------- | -------------- | ------- | ------------- | ------ | +| 第一次调用 | `4` | `3` | `3` | `[0,1,2,3,4]` | `7` | +| 第二次调用 | `7` | `2` | `2` | `[0,1,2,3,4]` | `9` | +| 第三次调用 | `9` | `1` | `1` | `[0,1,2,3,4]` | `10` | +| 第四次调用 | `10` | `0` | `0` | `[0,1,2,3,4]` | `10` | -

如果提供了一个 initialValue 参数，则结果如下：

+`reduceRight` 返回值是最后一次调用回调的返回值（`10`）。 -
[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+如果提供了一个 `initialValue` 参数，则结果如下：
+
+```js
+[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
     return previousValue + currentValue;
 }, 10);
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
callbackpreviousValuecurrentValueindexarray返回值
第一次调用1044[0,1,2,3,4]14
第二次调用1433[0,1,2,3,4]17
第三次调用1722[0,1,2,3,4]19
第四次调用1911[0,1,2,3,4]20
第五次调用2000[0,1,2,3,4]20
+``` -

这时，reduceRight 返回值为 20。

+| `callback` | `previousValue` | `currentValue` | `index` | `array` | 返回值 | +| ---------- | --------------- | -------------- | ------- | ------------- | ------ | +| 第一次调用 | `10` | `4` | `4` | `[0,1,2,3,4]` | `14` | +| 第二次调用 | `14` | `3` | `3` | `[0,1,2,3,4]` | `17` | +| 第三次调用 | `17` | `2` | `2` | `[0,1,2,3,4]` | `19` | +| 第四次调用 | `19` | `1` | `1` | `[0,1,2,3,4]` | `20` | +| 第五次调用 | `20` | `0` | `0` | `[0,1,2,3,4]` | `20` | -

示例

+这时，`reduceRight` 返回值为 20。 -

求一个数组中所有值的和

+## 示例 -
var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
+### 求一个数组中所有值的和
+
+```js
+var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
   return a + b;
 });
-// sum is 6
+// sum is 6 +``` -

扁平化（flatten）一个二维数组

+### 扁平化（flatten）一个二维数组 -
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+```js
+var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
     return a.concat(b);
 }, []);
 // flattened is [4, 5, 2, 3, 0, 1]
-
+``` -

运行一个带有回调每个函数将其结果传给下一个的异步函数列表

+### 运行一个带有回调每个函数将其结果传给下一个的异步函数列表 -
const waterfall = (...functions) => (callback, ...args) =>
+```js
+const waterfall = (...functions) => (callback, ...args) =>
   functions.reduceRight(
-    (composition, fn) => (...results) => fn(composition, ...results),
+    (composition, fn) => (...results) => fn(composition, ...results),
     callback
   )(...args);
 
-const randInt = max => Math.floor(Math.random() * max)
+const randInt = max => Math.floor(Math.random() * max)
 
-const add5 = (callback, x) => {
+const add5 = (callback, x) => {
   setTimeout(callback, randInt(1000), x + 5);
 };
-const mult3 = (callback, x) => {
+const mult3 = (callback, x) => {
   setTimeout(callback, randInt(1000), x * 3);
 };
-const sub2 = (callback, x) => {
+const sub2 = (callback, x) => {
   setTimeout(callback, randInt(1000), x - 2);
 };
-const split = (callback, x) => {
+const split = (callback, x) => {
   setTimeout(callback, randInt(1000), x, x);
 };
-const add = (callback, x, y) => {
+const add = (callback, x, y) => {
   setTimeout(callback, randInt(1000), x + y);
 };
-const div4 = (callback, x) => {
+const div4 = (callback, x) => {
   setTimeout(callback, randInt(1000), x / 4);
 };
 
 const computation = waterfall(add5, mult3, sub2, split, add, div4);
-computation(console.log, 5) // -> 14
+computation(console.log, 5) // -> 14
 
 // same as:
 
-const computation2 = (input, callback) => {
-  const f6 = x=> div4(callback, x);
-  const f5 = (x, y) => add(f6, x, y);
-  const f4 = x => split(f5, x);
-  const f3 = x => sub2(f4, x);
-  const f2 = x => mult3(f3, x);
+const computation2 = (input, callback) => {
+  const f6 = x=> div4(callback, x);
+  const f5 = (x, y) => add(f6, x, y);
+  const f4 = x => split(f5, x);
+  const f3 = x => sub2(f4, x);
+  const f2 = x => mult3(f3, x);
   add5(f2, input);
-}
+} +``` -

展示 reduce 与 reduceRight 之间的区别

+### 展示 `reduce` 与 `reduceRight` 之间的区别 -
var a = ['1', '2', '3', '4', '5'];
+```js
+var a = ['1', '2', '3', '4', '5'];
 var left  = a.reduce(function(prev, cur)      { return prev + cur; });
 var right = a.reduceRight(function(prev, cur) { return prev + cur; });
 
 console.log(left);  // "12345"
-console.log(right); // "54321"
+console.log(right); // "54321" +``` -

定义可组合函数

+### 定义可组合函数 -

组合函数的概念简单，它只是简单地结合了多个函数。它是一个从右向左流动的函数，用上一个函数的输出调用每个函数。

+组合函数的概念简单，它只是简单地结合了多个函数。它是一个从右向左流动的函数，用上一个函数的输出调用每个函数。 -
/**
+```js
+/**
  * Function Composition is way in which result of one function can
  * be passed to another and so on.
  *
@@ -313,25 +238,27 @@ console.log(right); // "54321"
* https://en.wikipedia.org/wiki/Function_composition */ -const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) +const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) // Increament passed number -const inc = (n) => n + 1 +const inc = (n) => n + 1 // Doubles the passed value -const double = (n) => n * 2 +const double = (n) => n * 2 // using composition function console.log(compose(double, inc)(2)); // 6 // using composition function -console.log(compose(inc, double)(2)); // 5 +console.log(compose(inc, double)(2)); // 5 +``` -

兼容旧环境（Polyfill）

+## 兼容旧环境（Polyfill） -

reduceRight 被添加到 ECMA-262 标准第 5 版，因此它在某些实现环境中可能不被支持。把下面的代码添加到脚本开头可以解决此问题，从而允许在那些没有原生支持 reduceRight 的实现环境中使用它。

+`reduceRight` 被添加到 ECMA-262 标准第 5 版，因此它在某些实现环境中可能不被支持。把下面的代码添加到脚本开头可以解决此问题，从而允许在那些没有原生支持 `reduceRight` 的实现环境中使用它。 -
// Production steps of ECMA-262, Edition 5, 15.4.4.22
+```js
+// Production steps of ECMA-262, Edition 5, 15.4.4.22
 // Reference: http://es5.github.io/#x15.4.4.22
 if ('function' !== typeof Array.prototype.reduceRight) {
   Array.prototype.reduceRight = function(callback /*, initialValue*/) {
@@ -342,19 +269,19 @@ if ('function' !== typeof Array.prototype.reduceRight) {
     if ('function' !== typeof callback) {
       throw new TypeError(callback + ' is not a function');
     }
-    var t = Object(this), len = t.length >>> 0, k = len - 1, value;
-    if (arguments.length >= 2) {
+    var t = Object(this), len = t.length >>> 0, k = len - 1, value;
+    if (arguments.length >= 2) {
       value = arguments[1];
     } else {
-      while (k >= 0 && !(k in t)) {
+      while (k >= 0 && !(k in t)) {
         k--;
       }
-      if (k < 0) {
+      if (k < 0) {
         throw new TypeError('reduceRight of empty array with no initial value');
       }
       value = t[k--];
     }
-    for (; k >= 0; k--) {
+    for (; k >= 0; k--) {
       if (k in t) {
         value = callback(value, t[k], k, t);
       }
@@ -362,18 +289,16 @@ if ('function' !== typeof Array.prototype.reduceRight) {
     return value;
   };
 }
-
+``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

相关链接

+## 相关链接 -
    -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
+- {{jsxref("Array.prototype.reduce()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md index 95c020384eb6e8..27a37c91b6d059 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/some **`some()`** 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。 -> **备注：**如果用一个空数组进行测试，在任何情况下它返回的都是`false`。 +> **备注：** 如果用一个空数组进行测试，在任何情况下它返回的都是`false`。 {{EmbedInteractiveExample("pages/js/array-some.html")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md index 016e8b08a2480a..93e708bd20aac0 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md @@ -61,7 +61,7 @@ iterator.next(); // Object { value: undefined, done: true } iterator.next().value; // undefined ``` -> **警告：**数组迭代器是一次性的，或者说临时对象 +> **警告：** 数组迭代器是一次性的，或者说临时对象 例子： @@ -89,7 +89,7 @@ arr[1] = 'n'; iterator.next().value; // "n" ``` -> **备注：**如果数组中元素改变，那么迭代器的值也会改变 +> **备注：** 如果数组中元素改变，那么迭代器的值也会改变 ## 规范 diff --git a/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md b/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md index 0503af8c14861c..d1e96699fefba3 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify 静态方法 **`Atomics.notify()`** 提醒一些在等待队列中休眠的代理。 -> **备注：**本操作仅在共享的 {{jsxref("Int32Array")}} 下可用。 +> **备注：** 本操作仅在共享的 {{jsxref("Int32Array")}} 下可用。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md b/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md index 18ba7cbf3b3da9..52ea4fe2f19a07 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/wait 静态方法 **`Atomics.wait()`** 确保了一个在 {{jsxref("Int32Array")}} 数组中给定位置的值没有发生变化、仍然是给定的值时进程将会睡眠，直到被唤醒或超时。该方法返回一个字符串，值为`"ok"`, `"not-equal"`, 或 `"timed-out"` 之一。 -> **备注：**这项操作仅允许同一个共享内存的 {{jsxref("Int32Array")}} 配合使用并且无法运行在主线程中。 +> **备注：** 这项操作仅允许同一个共享内存的 {{jsxref("Int32Array")}} 配合使用并且无法运行在主线程中。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/bigint/bigint/index.md b/files/zh-cn/web/javascript/reference/global_objects/bigint/bigint/index.md index 5d6c0d49d60ae5..33d7b860be75bb 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/bigint/bigint/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/bigint/bigint/index.md @@ -18,7 +18,7 @@ BigInt(value); - `value` - : 被创建的对象的数值。 可以是字符串或整数。 -> **备注：**: `BigInt()` 不与 {{JSxRef("Operators/new", "new")}} 运算符一起使用。 +> **备注：** `BigInt()` 不与 {{JSxRef("Operators/new", "new")}} 运算符一起使用。 ## 例子 diff --git a/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md b/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md index f5aeb925ca361b..3004b1597c073b 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md @@ -76,7 +76,7 @@ bigN * -1n `/` 操作符对于整数的运算也没问题。可是因为这些变量是 `BigInt` 而不是 `BigDecimal` ，该操作符结果会向零取整，也就是说不会返回小数部分。 -> **警告：**当使用 `BigInt` 时，带小数的运算会被取整。 +> **警告：** 当使用 `BigInt` 时，带小数的运算会被取整。 ```js const expected = 4n / 2n; diff --git a/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md b/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md index 5683ef72b7d526..a1871a66cb76cd 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md @@ -32,7 +32,7 @@ var weekday = Xmas95.getDay(); console.log(weekday); // 1 ``` -> **备注：**如果需要，可以使用{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}与一个额外的`options` 参数，从而返回这天的全称（如`"Monday"`）.使用此方法，结果会更加国际化： +> **备注：** 如果需要，可以使用{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}与一个额外的`options` 参数，从而返回这天的全称（如`"Monday"`）.使用此方法，结果会更加国际化： > > ```js > var options = { weekday: 'long'}; diff --git a/files/zh-cn/web/javascript/reference/global_objects/date/index.md b/files/zh-cn/web/javascript/reference/global_objects/date/index.md index bfe05177194ea4..f5a17de294ffd9 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/date/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/date/index.md @@ -23,7 +23,7 @@ new Date(dateString); new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]); ``` -> **备注：**创建一个新`Date`对象的唯一方法是通过{{jsxref("Operators/new", "new")}} 操作符，例如：`let now = new Date();` +> **备注：** 创建一个新`Date`对象的唯一方法是通过{{jsxref("Operators/new", "new")}} 操作符，例如：`let now = new Date();` > 若将它作为常规函数调用（即不加 {{jsxref("Operators/new", "new")}} 操作符），将返回一个字符串，而非 `Date` 对象。 ### 参数 @@ -42,7 +42,7 @@ new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds] - : 表示日期的字符串值。该字符串应该能被 {{jsxref("Date.parse()")}} 正确方法识别（即符合 [IETF-compliant RFC 2822 timestamps](http://tools.ietf.org/html/rfc2822#page-14) 或 [version of ISO8601](http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15)）。 - > **备注：**由于浏览器之间的差异与不一致性，强烈不推荐使用`Date`构造函数来解析日期字符串 (或使用与其等价的`Date.parse`)。对 RFC 2822 格式的日期仅有约定俗成的支持。 对 ISO 8601 格式的支持中，仅有日期的串 (例如 "1970-01-01") 会被处理为 UTC 而不是本地时间，与其他格式的串的处理不同。 + > **备注：** 由于浏览器之间的差异与不一致性，强烈不推荐使用`Date`构造函数来解析日期字符串 (或使用与其等价的`Date.parse`)。对 RFC 2822 格式的日期仅有约定俗成的支持。 对 ISO 8601 格式的支持中，仅有日期的串 (例如 "1970-01-01") 会被处理为 UTC 而不是本地时间，与其他格式的串的处理不同。 #### 分别提供日期与时间的每一个成员 @@ -65,11 +65,11 @@ new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds] ## 使用注释 -> **备注：**参数`monthIndex` 是从“0”开始计算的，这就意味着一月份为“0”，十二月份为“11”。 +> **备注：** 参数`monthIndex` 是从“0”开始计算的，这就意味着一月份为“0”，十二月份为“11”。 -> **备注：**当 Date 作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1) 等于 new Date(2014, 1, 1)，它们都表示日期 2014-02-01（注意月份是从 0 开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70) 等于 new Date(2013, 2, 1, 1, 10)，都表示同一个时间：`2013-03-01T01:10:00`。 +> **备注：** 当 Date 作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1) 等于 new Date(2014, 1, 1)，它们都表示日期 2014-02-01（注意月份是从 0 开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70) 等于 new Date(2013, 2, 1, 1, 10)，都表示同一个时间：`2013-03-01T01:10:00`。 -> **备注：**当 Date 作为构造函数调用并传入多个参数时，所定义参数代表的是当地时间。如果需要使用世界协调时 UTC，使用 `new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})` 和相同参数。 +> **备注：** 当 Date 作为构造函数调用并传入多个参数时，所定义参数代表的是当地时间。如果需要使用世界协调时 UTC，使用 `new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})` 和相同参数。 ## 简介 @@ -271,7 +271,7 @@ function printElapsedTime (fTest) { yourFunctionReturn = printElapsedTime(yourFunction); ``` -> **备注：**在支持 {{domxref("window.performance", "Web Performance API")}} 的高精细度（high-resolution）时间功能的浏览器中，{{domxref("Performance.now()")}} 提供的所经过的时间比 {{jsxref("Date.now()")}} 更加可靠、精确。 +> **备注：** 在支持 {{domxref("window.performance", "Web Performance API")}} 的高精细度（high-resolution）时间功能的浏览器中，{{domxref("Performance.now()")}} 提供的所经过的时间比 {{jsxref("Date.now()")}} 更加可靠、精确。 ### 获取自 Unix 起始时间以来经过的秒数 diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md index b600905390d593..aa73b520adf7a6 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md @@ -133,7 +133,7 @@ flower.bloom(); // 一秒钟后，调用 'declare' 方法 ### 作为构造函数使用的绑定函数 -> **警告：**这部分演示了 JavaScript 的能力并且记录了 `bind()` 的超前用法。以下展示的方法并不是最佳的解决方案，且可能不应该用在任何生产环境中。 +> **警告：** 这部分演示了 JavaScript 的能力并且记录了 `bind()` 的超前用法。以下展示的方法并不是最佳的解决方案，且可能不应该用在任何生产环境中。 绑定函数自动适应于使用 {{jsxref("Operators/new", "new")}} 操作符去构造一个由目标函数创建的新实例。当一个绑定函数是用来构建一个值的，原来提供的 `this` 就会被忽略。不过提供的参数列表仍然会插入到构造函数调用时的参数列表之前。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md index daa2e5320b74d6..9f59933e23be4f 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/call **`call()`** 方法使用一个指定的 `this` 值和单独给出的一个或多个参数来调用一个函数。 -> **备注：**该方法的语法和作用与 {{jsxref("Function.apply", "apply()")}} 方法类似，只有一个区别，就是 `call()` 方法接受的是**一个参数列表**，而 `apply()` 方法接受的是**一个包含多个参数的数组**。 +> **备注：** 该方法的语法和作用与 {{jsxref("Function.apply", "apply()")}} 方法类似，只有一个区别，就是 `call()` 方法接受的是**一个参数列表**，而 `apply()` 方法接受的是**一个包含多个参数的数组**。 {{EmbedInteractiveExample("pages/js/function-call.html")}} @@ -116,7 +116,7 @@ function display() { display.call(); // sData value is Wisen ``` -> **备注：**在严格模式下，`this` 的值将会是 `undefined`。见下文。 +> **备注：** 在严格模式下，`this` 的值将会是 `undefined`。见下文。 ```js 'use strict'; diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md index f89cb9f102cb7b..fd716157720d56 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/name {{js_property_attributes(0,0,1)}} -> **备注：**在非标准的 ES2015 之前的实现中，`configurable`属性也是`false` 。 +> **备注：** 在非标准的 ES2015 之前的实现中，`configurable`属性也是`false` 。 ## 示例 @@ -118,7 +118,7 @@ var fooInstance = new Foo(); console.log(fooInstance.constructor.name); // logs "Foo" ``` -> **警告：**脚本解释器只有在函数没有名为 name 的属性时才会设置内置的`Function.name`属性（参见 [9.2.11 of the ECMAScript2015 Language Specification](https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname)）。但是，ES2015 规定由关键字*static*修饰的静态方法也会被认为是类的属性（ECMAScript2015, [14.5.14.21.b](https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation) + [12.2.6.9](https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation)）。 +> **警告：** 脚本解释器只有在函数没有名为 name 的属性时才会设置内置的`Function.name`属性（参见 [9.2.11 of the ECMAScript2015 Language Specification](https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname)）。但是，ES2015 规定由关键字*static*修饰的静态方法也会被认为是类的属性（ECMAScript2015, [14.5.14.21.b](https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation) + [12.2.6.9](https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation)）。 因此，我们无法获取具有静态方法属性`name()`的几乎任何类的类名称： @@ -172,7 +172,7 @@ o[sym2].name; // "" ## JavaScript 压缩和 minifiers -> **警告：**当使用`Function.name`和那些 JavaScript 压缩器（minifiers）或混淆器进行源码转换时要小心。这些工具通常用作 JavaScript 构建管道的一部分，以在程序部署到生产之前减少程序的大小。但这种转换通常会在构建时更改函数的名称。 +> **警告：** 当使用`Function.name`和那些 JavaScript 压缩器（minifiers）或混淆器进行源码转换时要小心。这些工具通常用作 JavaScript 构建管道的一部分，以在程序部署到生产之前减少程序的大小。但这种转换通常会在构建时更改函数的名称。 例如下面的代码： diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md index e554364947b222..7e9c1168ed9340 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md @@ -7,185 +7,125 @@ tags: - Method translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString --- -
{{JSRef}}
+{{JSRef}} -

toString() 方法返回一个表示当前函数源代码的字符串。

+**`toString()`** 方法返回一个表示当前函数源代码的字符串。 -
{{EmbedInteractiveExample("pages/js/function-tostring.html")}}
+{{EmbedInteractiveExample("pages/js/function-tostring.html")}} -

语法

+## 语法 -
function.toString()
+```plain +function.toString() +``` -

返回值

+### 返回值 -

表示函数源代码的一个字符串

+表示函数源代码的一个字符串 -

描述

+## 描述 -

{{jsxref("Function")}}对象覆盖了从{{jsxref("Object")}}继承来的{{jsxref("Object.prototype.toString", "toString")}} 方法。对于用户定义的 {{jsxref("Function")}} 对象，toString方法返回一个字符串，其中包含用于定义函数的源文本段。

+{{jsxref("Function")}}对象覆盖了从{{jsxref("Object")}}继承来的{{jsxref("Object.prototype.toString", "toString")}} 方法。对于用户定义的 {{jsxref("Function")}} 对象，`toString`方法返回一个字符串，其中包含用于定义函数的源文本段。 -

在{{jsxref("Function")}}需要转换为字符串时，通常会自动调用函数的 toString 方法。

+在{{jsxref("Function")}}需要转换为字符串时，通常会自动调用函数的 `toString `方法。 -

若 this 不是 Function 对象，则 toString() 方法将抛出 {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object") 异常，比如 {{jsxref("Proxy")}} 对象就会抛出异常。

+若 `this` 不是 `Function `对象，则 `toString()` 方法将抛出 {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object") 异常，比如 {{jsxref("Proxy")}} 对象就会抛出异常。 -
Function.prototype.toString.call('foo'); // TypeError
-
+```js example-bad +Function.prototype.toString.call('foo'); // TypeError +``` -

如果是在内置函数或由 Function.prototype.bind 返回的函数上调用 toString()，则toString() 返回原生代码字符串，如下

+如果是在内置函数或由 `Function.prototype.bind `返回的函数上调用 `toString()`，则`toString()` 返回原生代码字符串，如下 -
"function () {\n    [native code]\n}"
-
+```js +"function () {\n [native code]\n}" +``` -

若是在由 Function 构造器生成的函数上调用 toString() ，则 toString() 返回创建后的函数源码，包括形参和函数体，函数名为 "anonymous"。

+若是在由 `Function` 构造器生成的函数上调用 `toString()` ，则 `toString()` 返回创建后的函数源码，包括形参和函数体，函数名为 "anonymous"。 -

示例

+## 示例 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - - - - - - - - - - - + set a(x) {} +}, "a").set + + + + + + + + + + + + + + + +
FunctionFunction.prototype.toString result
- 
-function f(){}
- 		- 
-"function f(){}"
-
- 
-class A { a(){} }
- 		- 
-"class A { a(){} }"
-
- 
-function* g(){}
- 		- 
-"function* g(){}"
-
- 
-a => a
- 		- 
-"a => a"
-
- 
-({ a(){} }.a)
- 		- 
-"a(){}"
-
- 
-({ *a(){} }.a)
- 		- 
-"*a(){}"
-
- 
-({ [0](){} }[0])
- 		- 
-"[0](){}"
-
- 
+
FunctionFunction.prototype.toString result
function f(){}
"function f(){}"
class A { a(){} }
"class A { a(){} }"
function* g(){}
"function* g(){}"
a => a
"a => a"
({ a(){} }.a)
"a(){}"
({ *a(){} }.a)
"*a(){}"
({ [0](){} }[0])
"[0](){}"
+ 
 Object.getOwnPropertyDescriptor({
-    get a(){}
-}, "a").get
- 		- 
-"get a(){}"
-
- 
+  get a() {}
+}, "a").get
+ 
"get a() {}"
+ 
 Object.getOwnPropertyDescriptor({
-    set a(x){}
-}, "a").set
- 		- 
-"set a(x){}"
-
- 
-Function.prototype.toString
- 		- 
-"function toString() { [native code] }"
-
- 
-(function f(){}.bind(0))
- 		- 
-"function () { [native code] }"
-
- 
-Function("a", "b")
- 		- 
-"function anonymous(a\n) {\nb\n}"
- 
"set a(x) {}"
Function.prototype.toString
 + 
"function toString() { [native code] }"
+ 
(function f(){}.bind(0))
"function () { [native code] }"
Function("a", "b")
"function anonymous(a\n) {\nb\n}"
-

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

相关链接

+## 相关链接 -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
+- {{jsxref("Object.prototype.toString()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/index.md b/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/index.md index 3f1ed3d6e889ca..41c99159ff5365 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/index.md @@ -39,7 +39,7 @@ new GeneratorFunction ([arg1[, arg2[, ...argN]],] functionBody) 传递给函数的所有参数按照它们被传递的顺序被视为要创建的函数中参数的标识符的名称。 -> **备注：**使用`GeneratorFunction`构造函数创建的{{jsxref("Statements/function*", "生成器函数")}}不会为其创建上下文创建闭包；它们始终在全局范围内创建。当运行它们时，它们只能访问自己的本地变量和全局变量，而不是从`GeneratorFunction`构造函数调用的范围的变量。这与使用{{jsxref("Global_Objects/eval", "eval")}}与生成函数表达式的代码不同。 +> **备注：** 使用`GeneratorFunction`构造函数创建的{{jsxref("Statements/function*", "生成器函数")}}不会为其创建上下文创建闭包；它们始终在全局范围内创建。当运行它们时，它们只能访问自己的本地变量和全局变量，而不是从`GeneratorFunction`构造函数调用的范围的变量。这与使用{{jsxref("Global_Objects/eval", "eval")}}与生成函数表达式的代码不同。 将`GeneratorFunction`构造函数调用为函数（不使用`new`运算符）与将其作为构造函数调用的效果相同。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/json/index.md b/files/zh-cn/web/javascript/reference/global_objects/json/index.md index 9e36226da4af38..7578f9cbd8eaed 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/json/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/json/index.md @@ -9,15 +9,15 @@ tags: - polyfill translation_of: Web/JavaScript/Reference/Global_Objects/JSON --- -
{{JSRef}}
+{{JSRef}} -

JSON对象包含两个方法：用于解析 JavaScript Object Notation ({{glossary("JSON")}}) 的 parse() 方法，以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法，JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。

+**`JSON`**对象包含两个方法：用于解析 [JavaScript Object Notation](http://json.org/) ({{glossary("JSON")}}) 的 `parse()` 方法，以及将对象/值转换为 JSON 字符串的 `stringify()` 方法。除了这两个方法，JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。 -

描述

+## 描述 -

JavaScript Object Notation

+### JavaScript Object Notation -

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 {{jsxref("null")}} 。它基于 JavaScript 语法，但与之不同：JavaScript 不是 JSON，JSON 也不是 JavaScript。参考 JSON：并不是 JavaScript 的子集。

+**JSON** 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 {{jsxref("null")}} 。它基于 JavaScript 语法，但与之不同：**JavaScript 不是 JSON，JSON 也不是 JavaScript**。参考 [JSON：并不是 JavaScript 的子集](http://timelessrepo.com/json-isnt-a-javascript-subset)。 @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/JSON
JavaScript 与 JSON 的区别

只有有限的一些字符可能会被转义；禁止某些控制字符； Unicode 行分隔符（U+2028）和段分隔符（U+2029）被允许 ; 字符串必须用双引号括起来。请参考下面的示例，可以看到 {{jsxref("JSON.parse()")}} 能够正常解析，但将其当作 JavaScript 解析时会抛出 {{jsxref("SyntaxError")}} 错误：

- 
+  
 let code = '"\u2028\u2029"';
 JSON.parse(code);  // 正常
 eval(code);  // 错误
@@ -53,9 +53,10 @@ eval(code);  // 错误
-

完整的 JSON 语法定义如下：

+完整的 JSON 语法定义如下： -
JSON = null
+```plain
+JSON = null
     or true or false
     or JSONNumber
     or JSONString
@@ -102,26 +103,25 @@ JSONArray = [ ]
          or [ ArrayElements ]
 ArrayElements = JSON
              or ArrayElements , JSON
-
+``` -

在JSONNumber（数字内部不允许包含空格）或JSONString（字符串内部的空格被解释为相应的字符，否则就有问题了）之外的任何位置可以有多余的空白字符。JSON 只支持这些空白字符： 制表符（U+0009），回车（U+000D），换行（U+000A）以及空格（U+0020）。

+在`JSONNumber`（数字内部不允许包含空格）或`JSONString`（字符串内部的空格被解释为相应的字符，否则就有问题了）之外的任何位置可以有多余的空白字符。JSON 只支持这些空白字符： 制表符（[U+0009](http://unicode-table.com/en/0009/)），回车（[U+000D](http://unicode-table.com/en/000D/)），换行（[U+00](http://unicode-table.com/en/0020/)0A）以及空格（[U+0020](http://unicode-table.com/en/0020/)）。 -

方法

+## 方法 -
-
{{jsxref("JSON.parse()")}}
-
解析 JSON 字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性，在返回之前进行某些修改。
-
{{jsxref("JSON.stringify()")}}
-
返回与指定值对应的 JSON 字符串，可以通过额外的参数，控制仅包含某些属性，或者以自定义方法来替换某些 key 对应的属性值。
-
+- {{jsxref("JSON.parse()")}} + - : 解析 JSON 字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性，在返回之前进行某些修改。 +- {{jsxref("JSON.stringify()")}} + - : 返回与指定值对应的 JSON 字符串，可以通过额外的参数，控制仅包含某些属性，或者以自定义方法来替换某些 key 对应的属性值。 -

Polyfill

+## Polyfill -

JSON对象可能不被老版本的浏览器支持。可以将下面的代码放到 JS 脚本最开始的位置，这样就可以在没有原生支持 JSON 对象的浏览器（如 IE6）中使用 JSON对象。

+`JSON`对象可能不被老版本的浏览器支持。可以将下面的代码放到 JS 脚本最开始的位置，这样就可以在没有原生支持 JSON 对象的浏览器（如 IE6）中使用 `JSON`对象。 -

以下算法是对原生JSON对象的模仿：

+以下算法是对原生`JSON`对象的模仿： -
if (!window.JSON) {
+```js
+if (!window.JSON) {
   window.JSON = {
     parse: function(sJSON) { return eval('(' + sJSON + ')'); },
     stringify: (function () {
@@ -142,7 +142,7 @@ ArrayElements = JSON
             return stringify(value.toJSON());
           } else if (isArray(value)) {
             var res = '[';
-            for (var i = 0; i < value.length; i++)
+            for (var i = 0; i < value.length; i++)
               res += (i ? ', ' : '') + stringify(value[i]);
             return res + ']';
           } else if (toString.call(value) === '[object Object]') {
@@ -159,20 +159,18 @@ ArrayElements = JSON
     })()
   };
 }
-
+``` -

业界更专业，更强大的JSON对象 polyfills 是 JSON2 和 JSON3。

+业界更专业，更强大的`JSON`对象 [polyfills](http://remysharp.com/2010/10/08/what-is-a-polyfill/) 是 [JSON2](https://github.com/douglascrockford/JSON-js) 和 [JSON3](http://bestiejs.github.com/json3)。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

相关链接

+## 相关链接 -
    -
  • {{jsxref("Date.prototype.toJSON()")}}
    • -
+- {{jsxref("Date.prototype.toJSON()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/floor/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/floor/index.md index 0f1692d6068e7d..e427f308eb4674 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/floor/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/floor/index.md @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor **`Math.floor()`** 返回小于或等于一个给定数字的最大整数。 -> **备注：**可以理解 **`Math.floor()`**为向下取整 +> **备注：** 可以理解 **`Math.floor()`**为向下取整 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/index.md index 44d5c0119ad0e9..8ceb949900e3eb 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/index.md @@ -9,134 +9,122 @@ tags: - 计算 translation_of: Web/JavaScript/Reference/Global_Objects/Math --- -
{{JSRef}}
- -

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

- -

Math 用于 {{jsxref("Number")}} 类型。它不支持 {{jsxref("BigInt")}}。

- -

描述

- -

与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。Math 的常量是使用 JavaScript 中的全精度浮点数来定义的。

- -

属性

- -
-
{{jsxref("Math.E")}}
-
欧拉常数，也是自然对数的底数，约等于 2.718。
-
{{jsxref("Math.LN2")}}
-
2 的自然对数，约等于 0.693。
-
{{jsxref("Math.LN10")}}
-
10 的自然对数，约等于 2.303。
-
{{jsxref("Math.LOG2E")}}
-
以 2 为底的 E 的对数，约等于 1.443。
-
{{jsxref("Math.LOG10E")}}
-
以 10 为底的 E 的对数，约等于 0.434。
-
{{jsxref("Math.PI")}}
-
圆周率，一个圆的周长和直径之比，约等于 3.14159。
-
{{jsxref("Math.SQRT1_2")}}
-
二分之一 ½ 的平方根，同时也是 2 的平方根的倒数 12，约等于 0.707。
-
{{jsxref("Math.SQRT2")}}
-
2 的平方根，约等于 1.414。
-
- -

方法

- -
-

备注：需要注意的是，三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 返回的值是弧度而非角度。

- -

若要转换，弧度除以 (Math.PI / 180) 即可转换为角度，同理，角度乘以这个数则能转换为弧度。

-
- -
-

备注：需要注意的是，很多 Math 函数都有一个精度，而且这个精度在不同实现中也是不相同的。这意味着不同的浏览器会给出不同的结果，甚至，在不同的系统或架构下，相同的 JS 引擎也会给出不同的结果！

-
- -
-
{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}
-
返回一个数的绝对值。
-
{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}
-
返回一个数的反余弦值。
-
{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}
-
返回一个数的反双曲余弦值。
-
{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}
-
返回一个数的反正弦值。
-
{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}
-
返回一个数的反双曲正弦值。
-
{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}
-
返回一个数的反正切值。
-
{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}
-
返回一个数的反双曲正切值。
-
{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}
-
返回 y/x 的反正切值。
-
{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}
-
返回一个数的立方根。
-
{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}
-
返回大于一个数的最小整数，即一个数向上取整后的值。
-
{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}
-
返回一个 32 位整数的前导零的数量。
-
{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}
-
返回一个数的余弦值。
-
{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}
-
返回一个数的双曲余弦值。
-
{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}
-
返回欧拉常数的参数次方，E^x，其中 x 为参数，E 是欧拉常数（2.718...，自然对数的底数）。
-
{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}
-
返回 exp(x) - 1 的值。
-
{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}
-
返回小于一个数的最大整数，即一个数向下取整后的值。
-
{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}
-
返回最接近一个数的单精度浮点型表示。
-
{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}
-
返回其所有参数平方和的平方根。
-
{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}
-
返回 32 位整数乘法的结果。
-
{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}
-
返回一个数的自然对数（㏒e，即 ㏑）。
-
{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}
-
返回一个数加 1 的和的自然对数（㏒e，即 ㏑）。
-
{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}
-
返回一个数以 10 为底数的对数。
-
{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}
-
返回一个数以 2 为底数的对数。
-
{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}
-
返回零到多个数值中最大值。
-
{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}
-
返回零到多个数值中最小值。
-
{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}
-
返回一个数的 y 次幂。
-
{{jsxref("Global_Objects/Math/random", "Math.random()")}}
-
返回一个 0 到 1 之间的伪随机数。
-
{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}
-
返回四舍五入后的整数。
-
{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}
-
返回一个数的符号，得知一个数是正数、负数还是 0。
-
{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}
-
返回一个数的正弦值。
-
{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}
-
返回一个数的双曲正弦值。
-
{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}
-
返回一个数的平方根。
-
{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}
-
返回一个数的正切值。
-
{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}
-
返回一个数的双曲正切值。
-
Math.toSource()
-
返回字符串 "Math"。
-
{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}
-
返回一个数的整数部分，直接去除其小数点及之后的部分。
-
- -

规范

+{{JSRef}} + +**`Math`** 是一个内置对象，它拥有一些数学常数属性和数学函数方法。`Math` 不是一个函数对象。 + +`Math` 用于 {{jsxref("Number")}} 类型。它不支持 {{jsxref("BigInt")}}。 + +## 描述 + +与其他全局对象不同的是，`Math` 不是一个构造器。`Math` 的所有属性与方法都是静态的。引用圆周率的写法是 `Math.PI`，调用正余弦函数的写法是 `Math.sin(x)`，`x` 是要传入的参数。`Math` 的常量是使用 JavaScript 中的全精度浮点数来定义的。 + +## 属性 + +- {{jsxref("Math.E")}} + - : 欧拉常数，也是自然对数的底数，约等于 `2.718`。 +- {{jsxref("Math.LN2")}} + - : `2` 的自然对数，约等于 `0.693`。 +- {{jsxref("Math.LN10")}} + - : `10` 的自然对数，约等于 `2.303`。 +- {{jsxref("Math.LOG2E")}} + - : 以 `2` 为底的 `E` 的对数，约等于 `1.443`。 +- {{jsxref("Math.LOG10E")}} + - : 以 `10` 为底的 `E` 的对数，约等于 `0.434`。 +- {{jsxref("Math.PI")}} + - : 圆周率，一个圆的周长和直径之比，约等于 `3.14159`。 +- {{jsxref("Math.SQRT1_2")}} + - : 二分之一 ½ 的平方根，同时也是 `2` 的平方根的倒数 12，约等于 `0.707`。 +- {{jsxref("Math.SQRT2")}} + - : `2` 的平方根，约等于 `1.414`。 + +## 方法 + +> **备注：** 需要注意的是，三角函数 `sin()`、`cos()`、`tan()`、`asin()`、`acos()`、`atan()` 和 `atan2()` 返回的值是*弧度*而非角度。若要转换，弧度除以 `(Math.PI / 180)` 即可转换为角度，同理，角度乘以这个数则能转换为弧度。 + +> **备注：** 需要注意的是，很多 `Math` 函数都有一个精度，而且这个精度在不同实现中也是不相同的。这意味着不同的浏览器会给出不同的结果，甚至，在不同的系统或架构下，相同的 JS 引擎也会给出不同的结果！ + +- {{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}} + - : 返回一个数的绝对值。 +- {{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}} + - : 返回一个数的反余弦值。 +- {{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}} + - : 返回一个数的反双曲余弦值。 +- {{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}} + - : 返回一个数的反正弦值。 +- {{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}} + - : 返回一个数的反双曲正弦值。 +- {{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}} + - : 返回一个数的反正切值。 +- {{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}} + - : 返回一个数的反双曲正切值。 +- {{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}} + - : 返回 `y/x` 的反正切值。 +- {{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}} + - : 返回一个数的立方根。 +- {{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}} + - : 返回大于一个数的最小整数，即一个数向上取整后的值。 +- {{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}} + - : 返回一个 32 位整数的前导零的数量。 +- {{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}} + - : 返回一个数的余弦值。 +- {{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} + - : 返回一个数的双曲余弦值。 +- {{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}} + - : 返回欧拉常数的参数次方，`E^x`，其中 `x` 为参数，`E` 是欧拉常数（2.718...，自然对数的底数）。 +- {{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} + - : 返回 `exp(x) - 1` 的值。 +- {{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}} + - : 返回小于一个数的最大整数，即一个数向下取整后的值。 +- {{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}} + - : 返回最接近一个数的[单精度浮点型](https://zh.wikipedia.org/wiki/%E5%96%AE%E7%B2%BE%E5%BA%A6%E6%B5%AE%E9%BB%9E%E6%95%B8)表示。 +- {{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}} + - : 返回其所有参数平方和的平方根。 +- {{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}} + - : 返回 32 位整数乘法的结果。 +- {{jsxref("Global_Objects/Math/log", "Math.log(x)")}} + - : 返回一个数的自然对数（㏒e，即 ㏑）。 +- {{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} + - : 返回一个数加 1 的和的自然对数（㏒e，即 ㏑）。 +- {{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} + - : 返回一个数以 10 为底数的对数。 +- {{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} + - : 返回一个数以 2 为底数的对数。 +- {{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}} + - : 返回零到多个数值中最大值。 +- {{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}} + - : 返回零到多个数值中最小值。 +- {{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}} + - : 返回一个数的 y 次幂。 +- {{jsxref("Global_Objects/Math/random", "Math.random()")}} + - : 返回一个 0 到 1 之间的伪随机数。 +- {{jsxref("Global_Objects/Math/round", "Math.round(x)")}} + - : 返回四舍五入后的整数。 +- {{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}} + - : 返回一个数的符号，得知一个数是正数、负数还是 0。 +- {{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}} + - : 返回一个数的正弦值。 +- {{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}} + - : 返回一个数的双曲正弦值。 +- {{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}} + - : 返回一个数的平方根。 +- {{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}} + - : 返回一个数的正切值。 +- {{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}} + - : 返回一个数的双曲正切值。 +- `Math.toSource()` + - : 返回字符串 `"Math"`。 +- {{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}} + - : 返回一个数的整数部分，直接去除其小数点及之后的部分。 + +## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

参见

+## 参见 -
    -
  • {{jsxref("Number")}}
    • -
+- {{jsxref("Number")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/log/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/log/index.md index 7eb9bc7ea18d3a..00c098f2107426 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/log/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/log/index.md @@ -3,66 +3,66 @@ title: Math.log() slug: Web/JavaScript/Reference/Global_Objects/Math/log translation_of: Web/JavaScript/Reference/Global_Objects/Math/log --- -

{{JSRef("Global_Objects", "Math")}}

+{{JSRef("Global_Objects", "Math")}} -

概述

+## 概述 -

Math.log() 函数返回一个数的自然对数，即：

+**`Math.log()`** 函数返回一个数的自然对数，即： -

∀x>0,Math.log(x)=ln(x)=the uniqueysuch thatey=x\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x

+∀x>0,Math.log(x)=ln(x)=the uniqueysuch thatey=x\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x -

语法

+## 语法 -
Math.log(x)
+```plain +Math.log(x) +``` -

参数

+### 参数 -
-
x
-
一个数字。
-
+- `x` + - : 一个数字。 -

描述

+## 描述 -

如果指定的 number 为负数，则返回值为 NaN。

+如果指定的 `number` 为负数，则返回值为 `NaN`。 -

由于 log 是 Math 的静态方法，所以应该像这样使用：Math.log()，而不是作为你创建的 Math 对象的方法。

+由于 `log` 是 `Math` 的静态方法，所以应该像这样使用：`Math.log()`，而不是作为你创建的 `Math` 对象的方法。 -

示例

+## 示例 -

例子 1:使用Math.log

+### 例子 1:使用`Math.log` -

下面的函数返回指定变量的自然对数：

+下面的函数返回指定变量的自然对数： -
Math.log(-1); // NaN, out of range
+```js
+Math.log(-1); // NaN, out of range
 Math.log(0); // -Infinity
 Math.log(1); // 0
-Math.log(10); // 2.302585092994046
+Math.log(10); // 2.302585092994046 +``` -

例子 2：使用 Math.log 时基于不同的底数

+### 例子 2：使用 `Math.log` 时基于不同的底数 -

下面的函数返回以 x 为底 y 的对数（即 logx y）：

+下面的函数返回以 `x` 为底 `y` 的对数（即 logx y）： -
function getBaseLog(x, y) {
+```js
+function getBaseLog(x, y) {
     return Math.log(y) / Math.log(x);
-}
+} +``` -

如果你运行 getBaseLog(10, 1000)，则会返回2.9999999999999996，非常接近实际答案：3，原因是浮点数精度问题。

+如果你运行 ` getBaseLog(10, 1000)，则会返回``2.9999999999999996，非常接近实际答案：3，原因是浮点数精度问题。 ` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

相关链接

+## 相关链接 - - -
    -
  • The {{jsxref("Global_Objects/Math", "Math")}} object it belongs to.
    • -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
+- The {{jsxref("Global_Objects/Math", "Math")}} object it belongs to. +- {{jsxref("Math.exp()")}} +- {{jsxref("Math.pow()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md index 2c6dceb9d0c1d4..7bf39a0a1f81df 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/random {{EmbedInteractiveExample("pages/js/math-random.html")}} -> **备注：**`Math.random()` *不能*提供像密码一样安全的随机数字。不要使用它们来处理有关安全的事情。使用 Web Crypto API 来代替，和更精确的{{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}} 方法。 +> **备注：** `Math.random()` *不能*提供像密码一样安全的随机数字。不要使用它们来处理有关安全的事情。使用 Web Crypto API 来代替，和更精确的{{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}} 方法。 ## 语法 @@ -59,7 +59,7 @@ function getRandomInt(min, max) { } ``` -> **备注：**也许很容易想到用 `Math.round()` 来实现，但是这会导致你的随机数处于一个不均匀的分布，这可能不符合你的需求。 +> **备注：** 也许很容易想到用 `Math.round()` 来实现，但是这会导致你的随机数处于一个不均匀的分布，这可能不符合你的需求。 ### 得到一个两数之间的随机整数，包括两个数在内 diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md index 296ec5b7fc30d0..78e475545451f6 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md @@ -35,7 +35,7 @@ numObj.toFixed(digits) 一个数值的字符串表现形式，不使用指数记数法，而是在小数点后有 digits（注：digits 具体值取决于传入参数）位数字。该数值在必要时进行四舍五入，另外在必要时会用 0 来填充小数部分，以便小数部分有指定的位数。 如果数值大于 1e+21，该方法会简单调用 {{jsxref("Number.prototype.toString()")}}并返回一个指数记数法格式的字符串。 -> **警告：**浮点数不能精确地用二进制表示所有小数。这可能会导致意外的结果，例如 `0.1 + 0.2 === 0.3` 返回 `false` . +> **警告：** 浮点数不能精确地用二进制表示所有小数。这可能会导致意外的结果，例如 `0.1 + 0.2 === 0.3` 返回 `false` . ## 示例 diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.md index d70a571c2f6983..c26f368c57d1eb 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/defineproperty/index.md @@ -11,127 +11,86 @@ tags: - 方法 translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty --- -
{{JSRef}}
+{{JSRef}} -

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

- -
-

备注：应当直接在 {{jsxref("Object")}} 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

-
- -
{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}
- - - -

语法

- -
Object.defineProperty(obj, prop, descriptor)
- -

参数

- -
-
obj
-
要定义属性的对象。
-
prop
-
要定义或修改的属性的名称或 {{jsxref("Symbol")}} 。
-
descriptor
-
要定义或修改的属性描述符。
-
- -

返回值

- -

被传递给函数的对象。

- -
-

备注：在 ES6 中，由于 Symbol 类型的特殊性，用 Symbol 类型的值来做对象的 key 与常规的定义或修改不同，而Object.defineProperty 是定义 key 为 Symbol 的属性的方法之一。

-
- -

描述

- -

该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（{{jsxref("Statements/for...in", "for...in")}} 或 {{jsxref("Object.keys")}} 方法），可以改变这些属性的值，也可以{{jsxref("Operators/delete", "删除")}}这些属性。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。

- -

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。

- -

这两种描述符都是对象。它们共享以下可选键值（默认值是指在使用 Object.defineProperty() 定义属性时的默认值）：

- -
-
configurable
-
当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
- 默认为 false。
-
enumerable
-
当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。
- 默认为 false。
-
- -

数据描述符还具有以下可选键值：

- -
-
value
-
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。
- 默认为 {{jsxref("undefined")}}。
-
writable
-
当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被{{jsxref("Operators/Assignment_Operators", "赋值运算符")}}改变。
- 默认为 false。
-
- -

存取描述符还具有以下可选键值：

- -
-
get
-
属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
- 默认为 {{jsxref("undefined")}}。
-
set
-
属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
- 默认为 {{jsxref("undefined")}}。
-
- -

描述符默认值汇总

- -
    -
  • 拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false。
    • -
  • 属性值和函数的键 value、get 和 set 字段的默认值为 undefined。
    • -
- -

描述符可拥有的键值

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
configurableenumerablevaluewritablegetset
数据描述符可以可以可以可以不可以不可以
存取描述符可以可以不可以不可以可以可以
- -

如果一个描述符不具有 value、writable、get 和 set 中的任意一个键，那么它将被认为是一个数据描述符。如果一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会产生一个异常。

- -

记住，这些选项不一定是自身属性，也要考虑继承来的属性。为了确认保留这些默认值，在设置之前，可能要冻结 {{jsxref("Object.prototype")}}，明确指定所有的选项，或者通过 {{jsxref("Object.create", "Object.create(null)")}} 将 {{jsxref("Object.prototype.__proto__", "__proto__")}} 属性指向 {{jsxref("null")}}。

- -
// 使用 __proto__
+**`Object.defineProperty()`** 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
+
+> **备注：** 应当直接在 {{jsxref("Object")}} 构造器对象上调用此方法，而不是在任意一个 `Object` 类型的实例上调用。
+
+{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}
+
+## 语法
+
+```plain
+Object.defineProperty(obj, prop, descriptor)
+```
+
+### 参数
+
+- `obj`
+  - : 要定义属性的对象。
+- `prop`
+  - : 要定义或修改的属性的名称或 {{jsxref("Symbol")}} 。
+- `descriptor`
+  - : 要定义或修改的属性描述符。
+
+### 返回值
+
+被传递给函数的对象。
+
+> **备注：** 在 ES6 中，由于 Symbol 类型的特殊性，用 Symbol 类型的值来做对象的 key 与常规的定义或修改不同，而`Object.defineProperty` 是定义 key 为 Symbol 的属性的方法之一。
+
+## 描述
+
+该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（{{jsxref("Statements/for...in", "for...in")}} 或 {{jsxref("Object.keys")}}[ ](/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/keys)方法），可以改变这些属性的值，也可以{{jsxref("Operators/delete", "删除")}}这些属性。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 `Object.defineProperty()` 添加的属性值是不可修改（immutable）的。
+
+对象里目前存在的属性描述符有两种主要形式：*数据描述符*和*存取描述符*。*数据描述符*是一个具有值的属性，该值可以是可写的，也可以是不可写的。*存取描述符*是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。
+
+这两种描述符都是对象。它们共享以下可选键值（默认值是指在使用 `Object.defineProperty()` 定义属性时的默认值）：
+
+- `configurable`
+  - : 当且仅当该属性的 `configurable` 键值为 `true` 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
+    **默认为** **`false`**。
+- `enumerable`
+  - : 当且仅当该属性的 `enumerable` 键值为 `true` 时，该属性才会出现在对象的枚举属性中。
+    **默认为 `false`**。
+
+数据描述符还具有以下可选键值：
+
+- `value`
+  - : 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。
+    **默认为 {{jsxref("undefined")}}**。
+- `writable`
+  - : 当且仅当该属性的 `writable` 键值为 `true` 时，属性的值，也就是上面的 `value`，才能被{{jsxref("Operators/Assignment_Operators", "赋值运算符")}}改变。
+    **默认为 `false`。**
+
+存取描述符还具有以下可选键值：
+
+- `get`
+  - : 属性的 getter 函数，如果没有 getter，则为 `undefined`。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 `this` 对象（由于继承关系，这里的`this`并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
+    **默认为 {{jsxref("undefined")}}**。
+- `set`
+  - : 属性的 setter 函数，如果没有 setter，则为 `undefined`。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 `this` 对象。
+    **默认为 {{jsxref("undefined")}}**。
+
+#### 描述符默认值汇总
+
+- 拥有布尔值的键 `configurable`、`enumerable` 和 `writable` 的默认值都是 `false`。
+- 属性值和函数的键 `value`、`get` 和 `set` 字段的默认值为 `undefined`。
+
+#### 描述符可拥有的键值
+
+|            | `configurable` | `enumerable` | `value` | `writable` | `get`  | `set`  |
+| ---------- | -------------- | ------------ | ------- | ---------- | ------ | ------ |
+| 数据描述符 | 可以           | 可以         | 可以    | 可以       | 不可以 | 不可以 |
+| 存取描述符 | 可以           | 可以         | 不可以  | 不可以     | 可以   | 可以   |
+
+如果一个描述符不具有 `value`、`writable`、`get` 和 `set` 中的任意一个键，那么它将被认为是一个数据描述符。如果一个描述符同时拥有 `value` 或 `writable` 和 `get` 或 `set` 键，则会产生一个异常。
+
+记住，这些选项不一定是自身属性，也要考虑继承来的属性。为了确认保留这些默认值，在设置之前，可能要冻结 {{jsxref("Object.prototype")}}，明确指定所有的选项，或者通过 {{jsxref("Object.create", "Object.create(null)")}} 将 {{jsxref("Object.prototype.__proto__", "__proto__")}} 属性指向 {{jsxref("null")}}。
+
+```js
+// 使用 __proto__
 var obj = {};
 var descriptor = Object.create(null); // 没有继承的属性
 // 默认没有 enumerable，没有 configurable，没有 writable
@@ -164,17 +123,19 @@ Object.defineProperty(obj, "key", withValue("static"));
 
 // 如果 freeze 可用，防止后续代码添加或删除对象原型的属性
 // （value, get, set, enumerable, writable, configurable）
-(Object.freeze||Object)(Object.prototype);
+(Object.freeze||Object)(Object.prototype); +``` -

示例

+## 示例 -

如果你想了解如何使用 Object.defineProperty 方法和类二进制标记语法，可以看看这些额外示例。

+如果你想了解如何使用 `Object.defineProperty` 方法和*类二进制标记*语法，可以看看这些[额外示例](/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples)。 -

创建属性

+### 创建属性 -

如果对象中不存在指定的属性，Object.defineProperty() 会创建这个属性。当描述符中省略某些字段时，这些字段将使用它们的默认值。

+如果对象中不存在指定的属性，`Object.defineProperty()` 会创建这个属性。当描述符中省略某些字段时，这些字段将使用它们的默认值。 -
var o = {}; // 创建一个新对象
+```js
+var o = {}; // 创建一个新对象
 
 // 在对象中添加一个属性与数据描述符的示例
 Object.defineProperty(o, "a", {
@@ -209,19 +170,20 @@ Object.defineProperty(o, "conflict", {
   get() { return 0xdeadbeef; }
 });
 // 抛出错误 TypeError: value appears only in data descriptors, get appears only in accessor descriptors
-
+``` -

修改属性

+### 修改属性 -

如果属性已经存在，Object.defineProperty()将尝试根据描述符中的值以及对象当前的配置来修改这个属性。如果旧描述符将其configurable 属性设置为false，则该属性被认为是“不可配置的”，并且没有属性可以被改变（除了单向改变 writable 为 false）。当属性不可配置时，不能在数据和访问器属性类型之间切换。

+如果属性已经存在，`Object.defineProperty()`将尝试根据描述符中的值以及对象当前的配置来修改这个属性。如果旧描述符将其`configurable` 属性设置为`false`，则该属性被认为是“不可配置的”，并且没有属性可以被改变（除了单向改变 writable 为 false）。当属性不可配置时，不能在数据和访问器属性类型之间切换。 -

当试图改变不可配置属性（除了 value 和 writable 属性之外）的值时，会抛出{{jsxref("TypeError")}}，除非当前值和新值相同。

+当试图改变不可配置属性（除了 `value` 和 `writable` 属性之外）的值时，会抛出{{jsxref("TypeError")}}，除非当前值和新值相同。 -

Writable 属性

+#### Writable 属性 -

当 writable 属性设置为 false 时，该属性被称为“不可写的”。它不能被重新赋值。

+当 `writable` 属性设置为 `false` 时，该属性被称为“不可写的”。它不能被重新赋值。 -
var o = {}; // 创建一个新对象
+```js
+var o = {}; // 创建一个新对象
 
 Object.defineProperty(o, 'a', {
   value: 37,
@@ -244,15 +206,17 @@ console.log(o.a); // logs 37. The assignment didn't work.
   });
   o.b = 3; // throws TypeError: "b" is read-only
   return o.b; // returns 2 without the line above
-}());
+}()); +``` -

如示例所示，试图写入非可写属性不会改变它，也不会引发错误。

+如示例所示，试图写入非可写属性不会改变它，也不会引发错误。 -

Enumerable 属性

+#### Enumerable 属性 -

enumerable 定义了对象的属性是否可以在 {{jsxref("Statements/for...in", "for...in")}} 循环和 {{jsxref("Object.keys()")}} 中被枚举。

+`enumerable` 定义了对象的属性是否可以在 {{jsxref("Statements/for...in", "for...in")}} 循环和 {{jsxref("Object.keys()")}} 中被枚举。 -
var o = {};
+```js
+var o = {};
 Object.defineProperty(o, "a", { value : 1, enumerable: true });
 Object.defineProperty(o, "b", { value : 2, enumerable: false });
 Object.defineProperty(o, "c", { value : 3 }); // enumerable 默认为 false
@@ -286,13 +250,15 @@ p.b // undefined
 p.c // undefined
 p.d // 4
 p[Symbol.for('e')] // 5
-p[Symbol.for('f')] // undefined
+p[Symbol.for('f')] // undefined +``` -

Configurable 属性

+#### Configurable 属性 -

configurable 特性表示对象的属性是否可以被删除，以及除 value 和 writable 特性外的其他特性是否可以被修改。

+`configurable` 特性表示对象的属性是否可以被删除，以及除 `value` 和 `writable` 特性外的其他特性是否可以被修改。 -
var o = {};
+```js
+var o = {};
 Object.defineProperty(o, 'a', {
   get() { return 1; },
   configurable: false
@@ -317,15 +283,17 @@ Object.defineProperty(o, 'a', {
 
 console.log(o.a); // logs 1
 delete o.a; // Nothing happens
-console.log(o.a); // logs 1
+console.log(o.a); // logs 1 +``` -

如果 o.a 的 configurable 属性为 true，则不会抛出任何错误，并且，最后，该属性会被删除。

+如果 `o.a` 的 `configurable` 属性为 `true`，则不会抛出任何错误，并且，最后，该属性会被删除。 -

添加多个属性和默认值

+### 添加多个属性和默认值 -

考虑特性被赋予的默认特性值非常重要，通常，使用点运算符和 Object.defineProperty() 为对象的属性赋值时，数据描述符中的属性默认值是不同的，如下例所示。

+考虑特性被赋予的默认特性值非常重要，通常，使用点运算符和 `Object.defineProperty()` 为对象的属性赋值时，数据描述符中的属性默认值是不同的，如下例所示。 -
var o = {};
+```js
+var o = {};
 
 o.a = 1;
 // 等同于：
@@ -346,13 +314,14 @@ Object.defineProperty(o, "a", {
   configurable: false,
   enumerable: false
 });
-
+``` -

自定义 Setters 和 Getters

+### 自定义 Setters 和 Getters -

下面的例子展示了如何实现一个自存档对象。当设置temperature 属性时，archive 数组会收到日志条目。

+下面的例子展示了如何实现一个自存档对象。当设置`temperature` 属性时，`archive` 数组会收到日志条目。 -
function Archiver() {
+```js
+function Archiver() {
   var temperature = null;
   var archive = [];
 
@@ -374,11 +343,13 @@ var arc = new Archiver();
 arc.temperature; // 'get!'
 arc.temperature = 11;
 arc.temperature = 13;
-arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+arc.getArchive(); // [{ val: 11 }, { val: 13 }] +``` -

下面这个例子中，getter 总是会返回一个相同的值。

+下面这个例子中，getter 总是会返回一个相同的值。 -
var pattern = {
+```js
+var pattern = {
     get: function () {
         return 'I alway return this string,whatever you have assigned';
     },
@@ -399,13 +370,15 @@ instance.myproperty = 'test';
 // 'I alway return this string,whatever you have assigned'
 console.log(instance.myproperty);
 // 'this is my name string'
-console.log(instance.myname);
+console.log(instance.myname); +``` -

继承属性

+### 继承属性 -

如果访问者的属性是被继承的，它的 get 和 set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值，该值会被所有对象共享。

+如果访问者的属性是被继承的，它的 `get` 和 `set` 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值，该值会被所有对象共享。 -
function myclass() {
+```js
+function myclass() {
 }
 
 var value;
@@ -422,11 +395,12 @@ var a = new myclass();
 var b = new myclass();
 a.x = 1;
 console.log(b.x); // 1
-
+``` -

这可以通过将值存储在另一个属性中解决。在 get 和 set 方法中，this 指向某个被访问和修改属性的对象。

+这可以通过将值存储在另一个属性中解决。在 `get` 和 `set` 方法中，`this` 指向某个被访问和修改属性的对象。 -
function myclass() {
+```js
+function myclass() {
 }
 
 Object.defineProperty(myclass.prototype, "x", {
@@ -441,11 +415,13 @@ Object.defineProperty(myclass.prototype, "x", {
 var a = new myclass();
 var b = new myclass();
 a.x = 1;
-console.log(b.x); // undefined
+console.log(b.x); // undefined +``` -

不像访问者属性，值属性始终在对象自身上设置，而不是一个原型。然而，如果一个不可写的属性被继承，它仍然可以防止修改对象的属性。

+不像访问者属性，值属性始终在对象自身上设置，而不是一个原型。然而，如果一个不可写的属性被继承，它仍然可以防止修改对象的属性。 -
function myclass() {
+```js
+function myclass() {
 }
 
 myclass.prototype.x = 1;
@@ -461,28 +437,26 @@ console.log(myclass.prototype.x); // 1
 a.y = 2; // Ignored, throws in strict mode
 console.log(a.y); // 1
 console.log(myclass.prototype.y); // 1
-
+``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- -

{{Compat}}

- -

参见

- -
    -
  • 属性的可枚举性和所有权
    • -
  • {{jsxref("Object.defineProperties()")}}
    • -
  • {{jsxref("Object.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptor()")}}
    • -
  • {{jsxref("Object.prototype.watch()")}}
    • -
  • {{jsxref("Object.prototype.unwatch()")}}
    • -
  • {{jsxref("Operators/get", "get")}}
    • -
  • {{jsxref("Operators/set", "set")}}
    • -
  • {{jsxref("Object.create()")}}
    • -
  • Additional Object.defineProperty examples
    • -
  • {{jsxref("Reflect.defineProperty()")}}
    • -
+## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [属性的可枚举性和所有权](/zh-CN/docs/Enumerability_and_ownership_of_properties) +- {{jsxref("Object.defineProperties()")}} +- {{jsxref("Object.propertyIsEnumerable()")}} +- {{jsxref("Object.getOwnPropertyDescriptor()")}} +- {{jsxref("Object.prototype.watch()")}} +- {{jsxref("Object.prototype.unwatch()")}} +- {{jsxref("Operators/get", "get")}} +- {{jsxref("Operators/set", "set")}} +- {{jsxref("Object.create()")}} +- [Additional `Object.defineProperty` examples](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples) +- {{jsxref("Reflect.defineProperty()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/getprototypeof/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/getprototypeof/index.md index 8e95ce5825e9d7..5c0d609a8a8a4b 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/getprototypeof/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/getprototypeof/index.md @@ -41,8 +41,6 @@ Object.getPrototypeOf(reg) === RegExp.prototype; // true ### 说明 -> **备注：** - JavaScript 中的 **[Object](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object)** 是构造函数（创建对象的包装器）。 ```js diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/isprototypeof/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/isprototypeof/index.md index c12d7deb1a0079..4b57caa041ac1c 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/isprototypeof/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/isprototypeof/index.md @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf **`isPrototypeOf()`** 方法用于测试一个对象是否存在于另一个对象的原型链上。 -> **备注：**`isPrototypeOf()` 与 {{jsxref("Operators/instanceof", "instanceof")}} 运算符不同。在表达式 "`object instanceof AFunction`"中，`object` 的原型链是针对 `AFunction.prototype` 进行检查的，而不是针对 `AFunction` 本身。 +> **备注：** `isPrototypeOf()` 与 {{jsxref("Operators/instanceof", "instanceof")}} 运算符不同。在表达式 "`object instanceof AFunction`"中，`object` 的原型链是针对 `AFunction.prototype` 进行检查的，而不是针对 `AFunction` 本身。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md index 1e4c3bd2a92ecc..5dcb900d1678a8 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md @@ -12,9 +12,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto --- {{JSRef}}{{Deprecated_header}} -> **警告：**通过现代浏览器的操作属性的便利性，可以改变一个对象的 `[[Prototype]]` 属性，这种行为在每一个 JavaScript 引擎和浏览器中都是一个非常慢且影响性能的操作，使用这种方式来改变和继承属性是对性能影响非常严重的，并且性能消耗的时间也不是简单的花费在 `obj.__proto__ = ...` 语句上，它还会影响到所有继承来自该 `[[Prototype]]` 的对象，如果你关心性能，你就不应该在一个对象中修改它的 \[\[Prototype]]。相反，创建一个新的且可以继承 `[[Prototype]]` 的对象，推荐使用 {{jsxref("Object.create()")}}。 +> **警告：** 通过现代浏览器的操作属性的便利性，可以改变一个对象的 `[[Prototype]]` 属性，这种行为在每一个 JavaScript 引擎和浏览器中都是一个非常慢且影响性能的操作，使用这种方式来改变和继承属性是对性能影响非常严重的，并且性能消耗的时间也不是简单的花费在 `obj.__proto__ = ...` 语句上，它还会影响到所有继承来自该 `[[Prototype]]` 的对象，如果你关心性能，你就不应该在一个对象中修改它的 \[\[Prototype]]。相反，创建一个新的且可以继承 `[[Prototype]]` 的对象，推荐使用 {{jsxref("Object.create()")}}。 -> **警告：**当 `Object.prototype.__proto__` 已被大多数浏览器厂商所支持的今天，其存在和确切行为仅在 ECMAScript 2015 规范中被标准化为传统功能，以确保 Web 浏览器的兼容性。为了更好的支持，建议只使用 {{jsxref("Object.getPrototypeOf()")}}。 +> **警告：** 当 `Object.prototype.__proto__` 已被大多数浏览器厂商所支持的今天，其存在和确切行为仅在 ECMAScript 2015 规范中被标准化为传统功能，以确保 Web 浏览器的兼容性。为了更好的支持，建议只使用 {{jsxref("Object.getPrototypeOf()")}}。 {{jsxref("Object.prototype")}} 的 `__proto__` 属性是一个访问器属性（一个 getter 函数和一个 setter 函数）, 暴露了通过它访问的对象的内部`[[Prototype]]` (一个对象或 {{jsxref("Global_Objects/null", "null")}})。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md index a09d3d28971e86..1396f04d42c8c6 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf --- {{JSRef}}**Object.setPrototypeOf()** 方法设置一个指定的对象的原型 ( 即，内部 \[\[Prototype]] 属性）到另一个对象或 {{jsxref("null")}}。 -> **警告：**由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的 `[[Prototype]]` 在**_各个_**浏览器和 JavaScript 引擎上都是一个很慢的操作。其在更改继承的性能上的影响是微妙而又广泛的，这不仅仅限于 `obj.__proto__ = ...` 语句上的时间花费，而且可能会延伸到**_任何_**代码，那些可以访问**_任何_** `[[Prototype]]` 已被更改的对象的代码。如果你关心性能，你应该避免设置一个对象的 `[[Prototype]]`。相反，你应该使用 {{jsxref("Object.create()")}} 来创建带有你想要的 `[[Prototype]]` 的新对象。 +> **警告：** 由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的 `[[Prototype]]` 在**_各个_**浏览器和 JavaScript 引擎上都是一个很慢的操作。其在更改继承的性能上的影响是微妙而又广泛的，这不仅仅限于 `obj.__proto__ = ...` 语句上的时间花费，而且可能会延伸到**_任何_**代码，那些可以访问**_任何_** `[[Prototype]]` 已被更改的对象的代码。如果你关心性能，你应该避免设置一个对象的 `[[Prototype]]`。相反，你应该使用 {{jsxref("Object.create()")}} 来创建带有你想要的 `[[Prototype]]` 的新对象。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.md index 57ad13b0232e3c..a05d06bf600b6a 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.md @@ -36,7 +36,7 @@ var o = new Object(); o.toString(); // 返回 [object Object] ``` -> **备注：**如 ECMAScript 5 和随后的 Errata 中所定义，从 JavaScript 1.8.5 开始，`toString()` 调用 {{jsxref("null")}} 返回`[object Null]`，{{jsxref("undefined")}} 返回 `[object Undefined]`。请参阅下面的[使用 `toString()` 检测对象类型](<#使用_tostring()_检测对象类型>)。 +> **备注：** 如 ECMAScript 5 和随后的 Errata 中所定义，从 JavaScript 1.8.5 开始，`toString()` 调用 {{jsxref("null")}} 返回`[object Null]`，{{jsxref("undefined")}} 返回 `[object Undefined]`。请参阅下面的[使用 `toString()` 检测对象类型](<#使用_tostring()_检测对象类型>)。 ## 示例 diff --git a/files/zh-cn/web/javascript/reference/global_objects/parseint/index.md b/files/zh-cn/web/javascript/reference/global_objects/parseint/index.md index 5f1acc2331ecd5..f3a344e5aabffc 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/parseint/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/parseint/index.md @@ -64,7 +64,7 @@ parseInt('123', 5) // 将'123'看作 5 进制数，返回十进制数 38 => 1*5^ 要将一个数字转换为特定的 `radix` 中的字符串字段，请使用 `thatNumber.toString(radix)` 函数。 -> **警告：**{{jsxref("BigInt")}}。警告：`parseInt` 将 {{jsxref("BigInt")}} 转换为 {{jsxref("Number")}}，并在这个过程中失去了精度。这是因为拖尾的非数字值，包括 "n"，会被丢弃。 +> **警告：** {{jsxref("BigInt")}}。警告：`parseInt` 将 {{jsxref("BigInt")}} 转换为 {{jsxref("Number")}}，并在这个过程中失去了精度。这是因为拖尾的非数字值，包括 "n"，会被丢弃。 ## 示例 diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md index 723d9865410cc4..eea2e097854c51 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/promise/any/index.md @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any `Promise.any()` 接收一个由 {{JSxRef("Promise")}} 所组成的可迭代对象，该方法会返回一个新的 `promise`，一旦可迭代对象内的任意一个 `promise` 变成了兑现状态，那么由该方法所返回的 `promise` 就会变成兑现状态，并且它的兑现值就是可迭代对象内的首先兑现的 `promise` 的兑现值。如果可迭代对象内的 `promise` 最终都没有兑现（即所有 `promise` 都被拒绝了），那么该方法所返回的 `promise` 就会变成拒绝状态，并且它的拒因会是一个 {{JSxRef("Global_Objects/AggregateError", "AggregateError")}} 实例，这是 {{JSxRef("Error")}} 的子类，用于把单一的错误集合在一起。 -> **警告：**`Promise.any()` 方法依然是实验性的，尚未被所有的浏览器完全支持。它当前处于 [TC39 第四阶段草案（Stage 4）](https://github.com/tc39/proposal-promise-any) +> **警告：** `Promise.any()` 方法依然是实验性的，尚未被所有的浏览器完全支持。它当前处于 [TC39 第四阶段草案（Stage 4）](https://github.com/tc39/proposal-promise-any) ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md index 8598b64aa23905..7b36afe5b00238 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve --- {{JSRef}}**`Promise.resolve(value)`**方法返回一个以给定值解析后的 {{jsxref("Promise")}} 对象。如果这个值是一个 promise ，那么将返回这个 promise ；如果这个值是 thenable（即带有 {{jsxref("Promise.then", "\"then\" ")}} 方法），返回的 promise 会“跟随”这个 thenable 的对象，采用它的最终状态；否则返回的 promise 将以此值完成。此函数将类 promise 对象的多层嵌套展平。 -> **警告：**不要在解析为自身的 thenable 上调用`Promise.resolve`。这将导致无限递归，因为它试图展平无限嵌套的 promise。一个例子是将它与 Angular 中的异步管道一起使用。在[此处](https://angular.io/guide/template-syntax#avoid-side-effects)了解更多信息。 +> **警告：** 不要在解析为自身的 thenable 上调用`Promise.resolve`。这将导致无限递归，因为它试图展平无限嵌套的 promise。一个例子是将它与 Angular 中的异步管道一起使用。在[此处](https://angular.io/guide/template-syntax#avoid-side-effects)了解更多信息。 例如下例代码 diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/then/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/then/index.md index dfe9b25b54b574..509f4829633722 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/promise/then/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/promise/then/index.md @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then {{EmbedInteractiveExample("pages/js/promise-then.html")}} -> **备注：**如果忽略针对某个状态的回调函数参数，或者提供非函数 (nonfunction) 参数，那么 `then` 方法将会丢失关于该状态的回调函数信息，但是并不会产生错误。如果调用 `then` 的 `Promise` 的状态（fulfillment 或 rejection）发生改变，但是 `then` 中并没有关于这种状态的回调函数，那么 `then` 将创建一个没有经过回调函数处理的新 `Promise` 对象，这个新 `Promise` 只是简单地接受调用这个 `then` 的原 `Promise` 的终态作为它的终态。 +> **备注：** 如果忽略针对某个状态的回调函数参数，或者提供非函数 (nonfunction) 参数，那么 `then` 方法将会丢失关于该状态的回调函数信息，但是并不会产生错误。如果调用 `then` 的 `Promise` 的状态（fulfillment 或 rejection）发生改变，但是 `then` 中并没有关于这种状态的回调函数，那么 `then` 将创建一个没有经过回调函数处理的新 `Promise` 对象，这个新 `Promise` 只是简单地接受调用这个 `then` 的原 `Promise` 的终态作为它的终态。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md index bfab0170804168..3973eea703ec41 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md @@ -39,7 +39,7 @@ const p = new Proxy(target, { - : 最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）。 - > **备注：**假设有一段代码执行 `obj.name = "jen"`， `obj` 不是一个 proxy，且自身不含 `name` 属性，但是它的原型链上有一个 proxy，那么，那个 proxy 的 `set()` 处理器会被调用，而此时，`obj` 会作为 receiver 参数传进来。 + > **备注：** 假设有一段代码执行 `obj.name = "jen"`， `obj` 不是一个 proxy，且自身不含 `name` 属性，但是它的原型链上有一个 proxy，那么，那个 proxy 的 `set()` 处理器会被调用，而此时，`obj` 会作为 receiver 参数传进来。 ### 返回值 diff --git a/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md b/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md index ea6c30090b1c04..3e6248855c8262 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md @@ -12,125 +12,24 @@ translation_of: >- Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods original_slug: Web/JavaScript/Reference/Global_Objects/Reflect/比较_Reflect_和_Object_方法 --- -
{{jssidebar}}
+{{jssidebar}} -

ES2015 中引入的 {{jsxref("Reflect")}} 对象是一个内置对象，提供了与 JavaScript 对象交互的方法。Reflect 上存在的一些静态函数也对应于 ES2015 之前的{{jsxref("Object")}}上可用的方法。尽管某些方法在行为上看似相似，但它们之间常常存在细微的差异。

+ES2015 中引入的 {{jsxref("Reflect")}} 对象是一个内置对象，提供了与 JavaScript 对象交互的方法。`Reflect` 上存在的一些静态函数也对应于 ES2015 之前的{{jsxref("Object")}}上可用的方法。尽管某些方法在行为上看似相似，但它们之间常常存在细微的差异。 -

下表详细介绍了Object 和 Reflect API 上可用方法之间的差异。请注意，如果 API 中不存在某种方法，则将其标记为 N/A。

+下表详细介绍了`Object` 和 `Reflect` API 上可用方法之间的差异。请注意，如果 API 中不存在某种方法，则将其标记为 N/A。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method NameObjectReflect
defineProperty() -

{{jsxref("Object.defineProperty()")}} 返回传递给函数的对象。如果未在对象上成功定义属性，则返回TypeError。

- 		-

如果在对象上定义了属性，则{{jsxref("Reflect.defineProperty()")}}返回true，否则返回false。

-
defineProperties() -

{{jsxref("Object.defineProperties()")}} 返回传递给函数的对象。如果未在对象上成功定义属性，则返回TypeError。

- 		N/A
set()N/A -

如果在对象上成功设置了属性，则{{jsxref("Reflect.set()")}}返回true，否则返回false。如果目标不是Object，则抛出TypeError

-
get()N/A -

{{jsxref("Reflect.get()")}}返回属性的值。如果目标不是Object，则抛出TypeError。

-
deleteProperty()N/A -

如果属性从对象中删除，则{{jsxref("Reflect.deleteProperty()")}}返回true，否则返回false。

-
getOwnPropertyDescriptor() -

如果传入的对象参数上存在{{jsxref("Object.getOwnPropertyDescriptor()")}} ，则会返回给定属性的属性描述符，如果不存在，则返回undefined。

- 		-

如果给定属性存在于对象上，则{{jsxref("Reflect.getOwnPropertyDescriptor()")}} 返回给定属性的属性描述符。如果不存在则返回undefined，如果传入除对象（原始值）以外的任何东西作为第一个参数，则返回TypeError

-
getOwnPropertyDescriptors() -

{{jsxref("Object.getOwnPropertyDescriptors()")}} 返回一个对象，其中包含每个传入对象的属性描述符。如果传入的对象没有拥有的属性描述符，则返回一个空对象。

- 		N/A
getPrototypeOf() -

{{jsxref("Object.getPrototypeOf()")}}返回给定对象的原型。如果没有继承的原型，则返回null。在 ES5 中为非对象抛出TypeError，但在 ES2015 中强制为非对象。

- 		-

{{jsxref("Reflect.getPrototypeOf()")}}返回给定对象的原型。如果没有继承的原型，则返回 null，并为非对象抛出TypeError。

-
setPrototypeOf() -

如果对象的原型设置成功，则{{jsxref("Object.setPrototypeOf()")}}返回对象本身。如果设置的原型不是Object或null，或者被修改的对象的原型不可扩展，则抛出TypeError。

- 		-

如果在对象上成功设置了原型，则{{jsxref("Reflect.setPrototypeOf()")}} 返回 true，否则返回 false（包括原型是否不可扩展）。如果传入的目标不是Object，或者设置的原型不是Object或null，则抛出TypeError。

-
isExtensible() -

如果对象是可扩展的，则 Object.isExtensible（）返回 true，否则返回 false。如果第一个参数不是对象（原始值），则在 ES5 中抛出TypeError。在 ES2015 中，它将被强制为不可扩展的普通对象并返回false。

- 		-

如果对象是可扩展的，则{{jsxref("Reflect.isExtensible()")}} 返回true，否则返回false。如果第一个参数不是对象（原始值），则抛出TypeError。

-
preventExtensions() -

{{jsxref("Object.preventExtensions()")}} 返回被设为不可扩展的对象。如果参数不是对象（原始值），则在 ES5 中抛出TypeError。在 ES2015 中，参数如为不可扩展的普通对象，然后返回对象本身。

- 		-

returns true if the object has been made non-extensible, and false if it has not. Throws a TypeError if the argument is not an object (a primitive).

- -

如果对象已变得不可扩展，则{{jsxref("Reflect.preventExtensions()")}} 返回true，否则返回false。如果参数不是对象（原始值），则抛出TypeError。

-
keys() -

{{jsxref("Object.keys()")}}返回一个字符串数组，该字符串映射到目标对象自己的（可枚举）属性键。如果目标不是对象，则在 ES5 中抛出TypeError，但将非对象目标强制为 ES2015 中的对象

- 		N/A
ownKeys()N/A -

{{jsxref("Reflect.ownKeys()")}}返回一个属性名称数组，该属性名称映射到目标对象自己的属性键。如果目标不是Object，则抛出TypeError。

-
+| Method Name | `Object` | `Reflect` | +| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `defineProperty()` | {{jsxref("Object.defineProperty()")}} 返回传递给函数的对象。如果未在对象上成功定义属性，则返回`TypeError`。 | 如果在对象上定义了属性，则{{jsxref("Reflect.defineProperty()")}}返回`true`，否则返回`false`。 | +| `defineProperties()` | {{jsxref("Object.defineProperties()")}} 返回传递给函数的对象。如果未在对象上成功定义属性，则返回`TypeError`。 | N/A | +| `set()` | N/A | 如果在对象上成功设置了属性，则{{jsxref("Reflect.set()")}}返回`true`，否则返回`false`。如果目标不是`Object`，则抛出`TypeError` | +| `get()` | N/A | {{jsxref("Reflect.get()")}}返回属性的值。如果目标不是`Object`，则抛出`TypeError`。 | +| `deleteProperty()` | N/A | 如果属性从对象中删除，则{{jsxref("Reflect.deleteProperty()")}}返回`true`，否则返回`false`。 | +| `getOwnPropertyDescriptor()` | 如果传入的对象参数上存在{{jsxref("Object.getOwnPropertyDescriptor()")}} ，则会返回给定属性的属性描述符，如果不存在，则返回`undefined`。 | 如果给定属性存在于对象上，则{{jsxref("Reflect.getOwnPropertyDescriptor()")}} 返回给定属性的属性描述符。如果不存在则返回`undefined`，如果传入除对象（原始值）以外的任何东西作为第一个参数，则返回`TypeError` | +| `getOwnPropertyDescriptors()` | {{jsxref("Object.getOwnPropertyDescriptors()")}} 返回一个对象，其中包含每个传入对象的属性描述符。如果传入的对象没有拥有的属性描述符，则返回一个空对象。 | N/A | +| `getPrototypeOf()` | {{jsxref("Object.getPrototypeOf()")}}返回给定对象的原型。如果没有继承的原型，则返回`null。`在 ES5 中为非对象抛出`TypeError`，但在 ES2015 中强制为非对象。 | {{jsxref("Reflect.getPrototypeOf()")}}返回给定对象的原型。如果没有继承的原型，则返回 null，并为非对象抛出`TypeError`。 | +| `setPrototypeOf()` | 如果对象的原型设置成功，则{{jsxref("Object.setPrototypeOf()")}}返回对象本身。如果设置的原型不是`Object`或`null`，或者被修改的对象的原型不可扩展，则抛出`TypeError`。 | 如果在对象上成功设置了原型，则{{jsxref("Reflect.setPrototypeOf()")}} 返回 true，否则返回 false（包括原型是否不可扩展）。如果传入的目标不是`Object`，或者设置的原型不是`Object`或`null`，则抛出`TypeError`。 | +| `isExtensible()` | 如果对象是可扩展的，则 Object.isExtensible（）返回 true，否则返回 false。如果第一个参数不是对象（原始值），则在 ES5 中抛出`TypeError`。在 ES2015 中，它将被强制为不可扩展的普通对象并返回`false`。 | 如果对象是可扩展的，则{{jsxref("Reflect.isExtensible()")}} 返回`true`，否则返回`false`。如果第一个参数不是对象（原始值），则抛出`TypeError`。 | +| `preventExtensions()` | {{jsxref("Object.preventExtensions()")}} 返回被设为不可扩展的对象。如果参数不是对象（原始值），则在 ES5 中抛出`TypeError`。在 ES2015 中，参数如为不可扩展的普通对象，然后返回对象本身。 | returns `true` if the object has been made non-extensible, and `false` if it has not. Throws a `TypeError` if the argument is not an object (a primitive).如果对象已变得不可扩展，则{{jsxref("Reflect.preventExtensions()")}} 返回`true`，否则返回`false`。如果参数不是对象（原始值），则抛出`TypeError`。 | +| `keys()` | {{jsxref("Object.keys()")}}返回一个字符串`数组`，该字符串映射到目标对象自己的（可枚举）属性键。如果目标不是对象，则在 ES5 中抛出`TypeError`，但将非对象目标强制为 ES2015 中的对象 | N/A | +| `ownKeys()` | N/A | {{jsxref("Reflect.ownKeys()")}}返回一个属性名称数组，该属性名称映射到目标对象自己的属性键。如果目标不是`Object`，则抛出`TypeError`。 | diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md index 3fbf295c212a74..925bbeb2cca48a 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md @@ -10,118 +10,125 @@ tags: - Regular Expressions translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec --- -
{{JSRef}}
+{{JSRef}} -

exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 {{jsxref("null")}}。

+**`exec() `**方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 {{jsxref("null")}}。 -

在设置了 {{jsxref("RegExp.global", "global")}} 或 {{jsxref("RegExp.sticky", "sticky")}} 标志位的情况下（如 /foo/g or /foo/y），JavaScript {{jsxref("RegExp")}} 对象是有状态的。他们会将上次成功匹配后的位置记录在 {{jsxref("RegExp.lastIndex", "lastIndex")}} 属性中。使用此特性，exec() 可用来对单个字符串中的多次匹配结果进行逐条的遍历（包括捕获到的匹配），而相比之下， {{jsxref("String.prototype.match()")}} 只会返回匹配到的结果。

+在设置了 {{jsxref("RegExp.global", "global")}} 或 {{jsxref("RegExp.sticky", "sticky")}} 标志位的情况下（如 `/foo/g` or `/foo/y`），JavaScript {{jsxref("RegExp")}} 对象是**有状态**的。他们会将上次成功匹配后的位置记录在 {{jsxref("RegExp.lastIndex", "lastIndex")}} 属性中。使用此特性，`exec()` 可用来对单个字符串中的多次匹配结果进行逐条的遍历（包括捕获到的匹配），而相比之下， {{jsxref("String.prototype.match()")}} 只会返回匹配到的结果。 -

如果你只是为了判断是否匹配（true 或 false），可以使用 {{jsxref("RegExp.test()")}} 方法，或者 {{jsxref("String.search()")}} 方法。

+如果你只是为了判断是否匹配（true 或 false），可以使用 {{jsxref("RegExp.test()")}} 方法，或者 {{jsxref("String.search()")}} 方法。 -
{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}
+{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}} +## 语法 +```plain +regexObj.exec(str) +``` -

语法

+### 参数 -
regexObj.exec(str)
+- `str` + - : 要匹配正则表达式的字符串。 -

参数

+### 返回值 -
-
str
-
要匹配正则表达式的字符串。
-
+如果匹配成功，`exec()` 方法返回一个数组（包含额外的属性 `index` 和 `input` ，参见下方表格），并更新正则表达式对象的 {{jsxref("RegExp.lastIndex", "lastIndex")}} 属性。完全匹配成功的文本将作为返回数组的第一项，从第二项起，后续每项都对应正则表达式内捕获括号里匹配成功的文本。 -

返回值

+如果匹配失败，`exec()` 方法返回 {{jsxref("null")}}，并将 {{jsxref("RegExp.lastIndex", "lastIndex")}} 重置为 0 。 -

如果匹配成功，exec() 方法返回一个数组（包含额外的属性 index 和 input ，参见下方表格），并更新正则表达式对象的 {{jsxref("RegExp.lastIndex", "lastIndex")}} 属性。完全匹配成功的文本将作为返回数组的第一项，从第二项起，后续每项都对应正则表达式内捕获括号里匹配成功的文本。

+## 描述 -

如果匹配失败，exec() 方法返回 {{jsxref("null")}}，并将 {{jsxref("RegExp.lastIndex", "lastIndex")}} 重置为 0 。

+考虑以下示例： -

描述

- -

考虑以下示例：

- -
// Match "quick brown" followed by "jumps", ignoring characters in between
+```js
+// Match "quick brown" followed by "jumps", ignoring characters in between
 // Remember "brown" and "jumps"
 // Ignore case
 var re = /quick\s(brown).+?(jumps)/ig;
 var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
-
+``` -

下表列出这个脚本的返回值：

+下表列出这个脚本的返回值： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
对象属性/索引描述例子
result[0]匹配的全部字符串Quick Brown Fox Jumps
[1], ...[n ]括号中的分组捕获[1] = Brown
- [2] = Jumps
index匹配到的字符位于原始字符串的基于 0 的索引值4
input原始字符串The Quick Brown Fox Jumps Over The Lazy Dog
relastIndex下一次匹配开始的位置25
ignoreCase是否使用了 "i" 标记使正则匹配忽略大小写true
global是否使用了 "g" 标记来进行全局的匹配。true
multiline -

是否使用了 "m" 标记使正则工作在多行模式（也就是，^ 和 $ 可以匹配字符串中每一行的开始和结束（行是由 \n 或 \r 分割的），而不只是整个输入字符串的最开始和最末尾处。）

- 		false
source正则匹配的字符串quick\s(brown).+?(jumps)
对象属性/索引描述例子
result[0]匹配的全部字符串Quick Brown Fox Jumps
+ [1], ...[n ] + 括号中的分组捕获 + [1] = Brown
[2] = Jumps +
index匹配到的字符位于原始字符串的基于 0 的索引值4
input原始字符串The Quick Brown Fox Jumps Over The Lazy Dog
relastIndex下一次匹配开始的位置25
ignoreCase是否使用了 "i" 标记使正则匹配忽略大小写true
global是否使用了 "g" 标记来进行全局的匹配。true
multiline +

+ 是否使用了 "m" 标记使正则工作在多行模式（也就是，^ 和 $ + 可以匹配字符串中每一行的开始和结束（行是由 \n 或 \r + 分割的），而不只是整个输入字符串的最开始和最末尾处。） +

+ 		false
source正则匹配的字符串quick\s(brown).+?(jumps)
-

示例

+## 示例 -

查找所有匹配

+### 查找所有匹配 -

当正则表达式使用 "g" 标志时，可以多次执行 exec 方法来查找同一个字符串中的成功匹配。当你这样做时，查找将从正则表达式的 {{jsxref("RegExp.lastIndex", "lastIndex")}} 属性指定的位置开始。（{{jsxref("RegExp.test", "test()")}} 也会更新 lastIndex 属性）。注意，即使再次查找的字符串不是原查找字符串时，{{jsxref("RegExp.lastIndex", "lastIndex")}} 也不会被重置，它依旧会从记录的 {{jsxref("RegExp.lastIndex", "lastIndex")}} 开始。

+当正则表达式使用 "`g`" 标志时，可以多次执行 `exec` 方法来查找同一个字符串中的成功匹配。当你这样做时，查找将从正则表达式的 {{jsxref("RegExp.lastIndex", "lastIndex")}} 属性指定的位置开始。（{{jsxref("RegExp.test", "test()")}} 也会更新 `lastIndex` 属性）。注意，即使再次查找的字符串不是原查找字符串时，{{jsxref("RegExp.lastIndex", "lastIndex")}} 也不会被重置，它依旧会从记录的 {{jsxref("RegExp.lastIndex", "lastIndex")}} 开始。 -

例如，你使用下面的脚本：

+例如，你使用下面的脚本： -
var myRe = /ab*/g;
+```js
+var myRe = /ab*/g;
 var str = 'abbcdefabh';
 var myArray;
 while ((myArray = myRe.exec(str)) !== null) {
@@ -129,39 +136,37 @@ while ((myArray = myRe.exec(str)) !== null) {
   msg += 'Next match starts at ' + myRe.lastIndex;
   console.log(msg);
 }
-
+``` -

脚本运行结果如下：

+脚本运行结果如下： -
Found abb. Next match starts at 3
+```plain
+Found abb. Next match starts at 3
 Found ab. Next match starts at 9
-
+``` -
-

警告：不要把正则表达式字面量（或者{{jsxref("RegExp")}}构造器）放在 while 条件表达式里。由于每次迭代时 {{jsxref("RegExp.lastIndex", "lastIndex")}} 的属性都被重置，如果匹配，将会造成一个死循环。并且要确保使用了'g'标记来进行全局的匹配，否则同样会造成死循环。

-
+> **警告：** 不要把正则表达式字面量（或者{{jsxref("RegExp")}}构造器）放在 `while` 条件表达式里。由于每次迭代时 {{jsxref("RegExp.lastIndex", "lastIndex")}} 的属性都被重置，如果匹配，将会造成一个死循环。并且要确保使用了'g'标记来进行全局的匹配，否则同样会造成死循环。 -

结合 RegExp 字面量使用 exec()

+### 结合 `RegExp` 字面量使用 `exec()` -

你也可以直接使用 exec() 而不是创建一个 {{jsxref("RegExp")}} 对象：

+你也可以直接使用 `exec()` 而不是创建一个 {{jsxref("RegExp")}} 对象： -
var matches = /(hello \S+)/.exec('This is a hello world!');
+```js
+var matches = /(hello \S+)/.exec('This is a hello world!');
 console.log(matches[1]);
-
+``` -

运行上面的代码，控制台会输出"hello world!" 字符串。

+运行上面的代码，控制台会输出"hello world!" 字符串。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

相关链接

+## 相关链接 - +- [Regular Expressions](/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions) chapter in the [JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide) +- {{jsxref("RegExp")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md b/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md index a98cf15962149b..6e886e3c0b7aa6 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md @@ -211,7 +211,7 @@ var url = "http://xxx.domain.com"; console.log(/[^.]+/.exec(url)[0].substr(7)); // logs "xxx" ``` -> **备注：**使用浏览器内建的[URL API](/en-US/docs/Web/API/URL_API)而非正则表达式来解析 URL 是更好的做法 +> **备注：** 使用浏览器内建的[URL API](/en-US/docs/Web/API/URL_API)而非正则表达式来解析 URL 是更好的做法 ## 规范 diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.md index 1e246032d31395..4e3fbf55a41056 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/lastindex/index.md @@ -8,50 +8,66 @@ tags: - Regular Expressions translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex --- -
- {{JSRef("Global_Objects", "RegExp")}}
-

概述

-

lastIndex 是正则表达式的一个可读可写的整型属性，用来指定下一次匹配的起始索引。

-
- {{js_property_attributes(1,0,0)}}
-

语法

-
lastIndex = regExpObj.lastIndex;
-

描述

-

只有正则表达式使用了表示全局检索的 "g" 或者粘性检索的 "y" 标志时，该属性才会起作用。此时应用下面的规则：

-
    -
  • 如果 lastIndex 大于字符串的长度，则 regexp.test 和 regexp.exec 将会匹配失败，然后 lastIndex 被设置为 0。
    • -
  • 如果 lastIndex 等于或小于字符串的长度，则该正则表达式匹配从 lastIndex 位置开始的字符串。 -
      -
    • 如果 regexp.test 和 regexp.exec 匹配成功，lastIndex 会被设置为紧随最近一次成功匹配的下一个位置。
      • -
    • 如果 regexp.test 和 regexp.exec 匹配失败，lastIndex 会被设置为 0
      • -
    -
    • -
-

示例

-

考虑下面的语句：

-
var re = /(hi)?/g;
- -

匹配空字符串

-
console.log(re.exec("hi"));
-console.log(re.lastIndex);
- -

返回 ["hi", "hi"] ，lastIndex 等于 2。

-
console.log(re.exec("hi"));
-console.log(re.lastIndex);
- -

返回 ["", undefined]，即一个数组，其第 0 个元素为匹配的字符串。此种情况下为空字符串，是因为 lastIndex 为 2（且一直是 2），"hi" 长度为 2。

-

规范

+{{JSRef("Global_Objects", "RegExp")}} + +## 概述 + +**`lastIndex`** 是正则表达式的一个可读可写的整型属性，用来指定下一次匹配的起始索引。 + +{{js_property_attributes(1,0,0)}} + +## 语法 + +```js +lastIndex = regExpObj.lastIndex; +``` + +## 描述 + +只有正则表达式使用了表示全局检索的 "`g`" 或者粘性检索的 "`y`" 标志时，该属性才会起作用。此时应用下面的规则： + +- 如果 `lastIndex` 大于字符串的长度，则 `regexp.test` 和 `regexp.exec` 将会匹配失败，然后 `lastIndex` 被设置为 0。 +- 如果 `lastIndex` 等于或小于字符串的长度，则该正则表达式匹配从 `lastIndex` 位置开始的字符串。 + + - 如果 `regexp.test` 和 `regexp.exec` 匹配成功，`lastIndex` 会被设置为紧随最近一次成功匹配的下一个位置。 + - 如果 `regexp.test` 和 `regexp.exec` 匹配失败，`lastIndex` 会被设置为 0 + +## 示例 + +考虑下面的语句： + +```js +var re = /(hi)?/g; +``` + +匹配空字符串 + +```js +console.log(re.exec("hi")); +console.log(re.lastIndex); +``` + +返回 `["hi", "hi"]` ，`lastIndex` 等于 2。 + +```js +console.log(re.exec("hi")); +console.log(re.lastIndex); +``` + +返回 `["", undefined]`，即一个数组，其第 0 个元素为匹配的字符串。此种情况下为空字符串，是因为 `lastIndex` 为 2（且一直是 2），"`hi`" 长度为 2。 + +## 规范 + {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

相关链接

-
    -
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • -
  • {{jsxref("RegExp.prototype.global")}}
    • -
  • {{jsxref("RegExp.prototype.multiline")}}
    • -
  • {{jsxref("RegExp.prototype.source")}}
    • -
  • {{jsxref("RegExp.prototype.sticky")}}
    • -
+## 相关链接 + +- {{jsxref("RegExp.prototype.ignoreCase")}} +- {{jsxref("RegExp.prototype.global")}} +- {{jsxref("RegExp.prototype.multiline")}} +- {{jsxref("RegExp.prototype.source")}} +- {{jsxref("RegExp.prototype.sticky")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md index a57db1c1de5467..a8627705eef0ab 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor ## 概述 -> **警告：**该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 +> **警告：** 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 **`anchor()`** 方法创建一个 {{HTMLElement("a")}} HTML 锚元素，被用作超文本靶标（hypertext target）。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md index fb533d8615c61a..75950b7658f209 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md @@ -5,9 +5,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/blink --- {{JSRef}} {{deprecated_header}} -**`blink()`**方法创建使字符串闪烁的 {{HTMLElement("blink")}} HTML 元素。 +**`blink()`** 方法创建使字符串闪烁的 {{HTMLElement("blink")}} HTML 元素。 -> **警告：**闪烁文本被多种普及标准否决。 ``元素自身是非标准的，并且已废弃！ +> **警告：** 闪烁文本被多种普及标准否决。 ``元素自身是非标准的，并且已废弃！ ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md index fe8ec79fe3799d..78ddedb422d80e 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md @@ -37,7 +37,7 @@ str.charCodeAt(index) Unicode 码点（code points）的范围从 `0` 到 `1114111` `(0x10FFFF）`。开头的 128 个 Unicode 编码单元和 ASCII 字符编码一样。（关于 Unicode 的更多信息，可查看 [JavaScript Guide](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode)。） -> **备注：**，`charCodeAt` 总是返回一个小于 65,536 的值。这是因为高位编码单元（higher code point）使用一对（低位编码 lower valued）代理伪字符（"surrogate" pseudo-characters）来表示，从而构成一个真正的字符。 +> **备注：** `charCodeAt` 总是返回一个小于 65,536 的值。这是因为高位编码单元（higher code point）使用一对（低位编码 lower valued）代理伪字符（"surrogate" pseudo-characters）来表示，从而构成一个真正的字符。 > > 因此，为了检查（或重现）`65536` 及以上编码字符的完整字符，需要在获取 `charCodeAt(i)` 的值的同时获取 `charCodeAt(i+1)` 的值（如同用两个字母操纵一个字符串），或者改为获取 `codePointAt(i)` 的值。参看下面例 2 和例 3。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md index 5ca07cfabdfad7..6cab3531ea2357 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor **`fontcolor()`**方法创建一个{{HTMLElement("font")}}的 HTML 元素让字符串被显示成指定的字体颜色。 -> **备注：**\元素已经在在[HTML5 中](/en-US/docs/Web/Guide/HTML/HTML5)被移除并且不应该在使用。替代的是，Web 开发者应该使用[CSS](/en-US/docs/Web/CSS)属性。 +> **备注：** \ 元素已经在在[HTML5 中](/en-US/docs/Web/Guide/HTML/HTML5)被移除并且不应该在使用。替代的是，Web 开发者应该使用[CSS](/en-US/docs/Web/CSS)属性。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/index.md index f0a318ab7b3c33..d2b1b410cc9f61 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/index.md @@ -72,7 +72,7 @@ new String(thing) | `\u{X}` ... `\u{XXXXXX}` | unicode codepoint {{experimental_inline}} | | `\xXX` | Latin-1 字符 (x 小写) | -> **备注：**和其他语言不同，javascript 的字符串不区分单引号和双引号，所以不论是单引号还是双引号的字符串，上面的转义字符都能运行 。 +> **备注：** 和其他语言不同，javascript 的字符串不区分单引号和双引号，所以不论是单引号还是双引号的字符串，上面的转义字符都能运行 。 ### 长字符串 diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/lastindexof/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/lastindexof/index.md index 943827438e2d72..9085dfa7df1466 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/lastindexof/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/lastindexof/index.md @@ -41,7 +41,7 @@ str.lastIndexOf(searchValue[, fromIndex]) 'canal'.lastIndexOf('', 2); // returns 2 ``` -> **备注：**`'abab'.lastIndexOf('ab', 2)` 将返回 2 而不是 0，因为 fromIndex 只限制待匹配字符串的开头。 +> **备注：** `'abab'.lastIndexOf('ab', 2)` 将返回 2 而不是 0，因为 fromIndex 只限制待匹配字符串的开头。 (例如'abadefgabm'.lastIndexOf('ab', 7) 返回 7，虽然查找的'ab'中的 b 已经在 index=8 的位置了从 index=7 的 a 处向左查找仍是能找到自身 a 加上其后连成 ab，因为 fromIndex 指的是待匹配字符串的开头那一个) diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md index 9fe50379eb5622..332d561ce758bf 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md @@ -9,197 +9,151 @@ tags: - String translation_of: Web/JavaScript/Reference/Global_Objects/String/replace --- -
{{JSRef}}
- -

replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

- -

原字符串不会改变。

- -
{{EmbedInteractiveExample("pages/js/string-replace.html")}}
- - - -

语法

- -
str.replace(regexp|substr, newSubStr|function)
- -

参数

- -
-
regexp (pattern)
-
一个{{jsxref("RegExp")}} 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
-
substr (pattern)
-
一个将被 newSubStr 替换的 {{jsxref("String","字符串")}}。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。
-
newSubStr (replacement)
-
用于替换掉第一个参数在原字符串中的匹配部分的{{jsxref("String", "字符串")}}。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
-
function (replacement)
-
一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。
-
- -

返回值

- -

一个部分或全部匹配由替代模式所取代的新的字符串。

- -

描述

- -

该方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串。

- -

在进行全局的搜索替换时，正则表达式需包含 g 标志。

- -

使用字符串作为参数

- -

替换字符串可以插入下面的特殊变量名：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
变量名代表的值
$$插入一个 "$"。
$&插入匹配的子串。
$`插入当前匹配的子串左边的内容。
$'插入当前匹配的子串右边的内容。
$n -

假如第一个参数是 {{jsxref("RegExp")}}对象，并且 n 是个小于 100 的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从 1 开始。如果不存在第 n 个分组，那么将会把匹配到到内容替换为字面量。比如不存在第 3 个分组，就会用“$3”替换匹配到的内容。

-
$<Name> 这里Name 是一个分组名称。如果在正则表达式中并不存在分组（或者没有匹配），这个变量将被处理为空字符串。只有在支持命名分组捕获的浏览器中才能使用。
- -

指定一个函数作为参数

- -

你可以指定一个函数作为第二个参数。在这种情况下，当匹配执行后，该函数就会执行。 函数的返回值作为替换字符串。 (注意：上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是，如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会被调用。

- -

下面是该函数的参数：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
变量名代表的值
match匹配的子串。（对应于上述的$&。）
p1,p2, ... -

假如 replace() 方法的第一个参数是一个{{jsxref("RegExp")}} 对象，则代表第 n 个括号匹配的字符串。（对应于上述的$1，$2等。）例如，如果是用 /(\a+)(\b+)/ 这个来匹配，p1 就是匹配的 \a+，p2 就是匹配的 \b+。

-
offset -

匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 'abcd'，匹配到的子字符串是 'bc'，那么这个参数将会是 1）

-
string被匹配的原字符串。
NamedCaptureGroup命名捕获组匹配的对象
- -

(精确的参数个数依赖于 replace() 的第一个参数是否是一个正则表达式（{{jsxref("RegExp")}}）对象，以及这个正则表达式中指定了多少个括号子串，如果这个正则表达式里使用了命名捕获， 还会添加一个命名捕获的对象)

- -

下面的例子将会使 newString 变成 'abc - 12345 - #$*%'：

- -
function replacer(match, p1, p2, p3, offset, string) {
+{{JSRef}}
+
+**`replace()`** 方法返回一个由替换值（`replacement`）替换部分或所有的模式（`pattern`）匹配项后的新字符串。模式可以是一个字符串或者一个[正则表达式](/zh-CN/docs/Web/JavaScript/Reference/RegExp)，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。**如果`pattern`是字符串，则仅替换第一个匹配项。**
+
+原字符串不会改变。
+
+{{EmbedInteractiveExample("pages/js/string-replace.html")}}
+
+## 语法
+
+```plain
+str.replace(regexp|substr, newSubStr|function)
+```
+
+### 参数
+
+- `regexp `(pattern)
+  - : 一个{{jsxref("RegExp")}} 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
+- `substr `(pattern)
+  - : 一个将被 `newSubStr` 替换的 {{jsxref("String","字符串")}}。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。
+- `newSubStr` (replacement)
+  - : 用于替换掉第一个参数在原字符串中的匹配部分的{{jsxref("String", "字符串")}}。该字符串中可以内插一些特殊的变量名。参考下面的[使用字符串作为参数](#使用字符串作为参数)。
+- `function` (replacement)
+  - : 一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的[指定一个函数作为参数](#指定一个函数作为参数)。
+
+### 返回值
+
+一个部分或全部匹配由替代模式所取代的新的字符串。
+
+## 描述
+
+该方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串。
+
+在进行全局的搜索替换时，正则表达式需包含 `g` 标志。
+
+### 使用字符串作为参数
+
+替换字符串可以插入下面的特殊变量名：
+
+| 变量名    | 代表的值                                                                                                                                                                                                                                                  |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `$$`      | 插入一个 "$"。                                                                                                                                                                                                                                            |
+| `$&`      | 插入匹配的子串。                                                                                                                                                                                                                                          |
+| `` $` ``  | 插入当前匹配的子串左边的内容。                                                                                                                                                                                                                            |
+| `$'`      | 插入当前匹配的子串右边的内容。                                                                                                                                                                                                                            |
+| `$n`      | 假如第一个参数是 {{jsxref("RegExp")}}对象，并且 n 是个小于 100 的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从 1 开始。如果不存在第 n 个分组，那么将会把匹配到到内容替换为字面量。比如不存在第 3 个分组，就会用“$3”替换匹配到的内容。 |
+| `$` | 这里*`Name`* 是一个分组名称。如果在正则表达式中并不存在分组（或者没有匹配），这个变量将被处理为空字符串。只有在支持命名分组捕获的浏览器中才能使用。                                                                                                       |
+
+### 指定一个函数作为参数
+
+你可以指定一个函数作为第二个参数。在这种情况下，当匹配执行后，该函数就会执行。 函数的返回值作为替换字符串。 (注意：上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是，如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会被调用。
+
+下面是该函数的参数：
+
+| 变量名            | 代表的值                                                                                                                                                                                                                   |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `match`           | 匹配的子串。（对应于上述的$&。）                                                                                                                                                                                           |
+| `p1,p2, ...`      | 假如 replace() 方法的第一个参数是一个{{jsxref("RegExp")}} 对象，则代表第 n 个括号匹配的字符串。（对应于上述的$1，$2 等。）例如，如果是用 `/(\a+)(\b+)/` 这个来匹配，`p1` 就是匹配的 `\a+`，`p2` 就是匹配的 `\b+`。 |
+| `offset`          | 匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 `'abcd'`，匹配到的子字符串是 `'bc'`，那么这个参数将会是 1）                                                                                                   |
+| `string`          | 被匹配的原字符串。                                                                                                                                                                                                         |
+| NamedCaptureGroup | 命名捕获组匹配的对象                                                                                                                                                                                                       |
+
+(精确的参数个数依赖于 `replace()` 的第一个参数是否是一个正则表达式（{{jsxref("RegExp")}}）对象，以及这个正则表达式中指定了多少个括号子串，如果这个正则表达式里使用了命名捕获， 还会添加一个命名捕获的对象)
+
+下面的例子将会使 `newString` 变成 `'abc - 12345 - #$*%'`：
+
+```js
+function replacer(match, p1, p2, p3, offset, string) {
   // p1 is nondigits, p2 digits, and p3 non-alphanumerics
   return [p1, p2, p3].join(' - ');
 }
 var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
 console.log(newString);  // abc - 12345 - #$*%
-
+``` -

示例

+## 示例 -

在 replace() 中使用正则表达式

+### 在 `replace()` 中使用正则表达式 -

在下面的例子中，replace() 中使用了正则表达式及忽略大小写标示。

+在下面的例子中，`replace()` 中使用了正则表达式及忽略大小写标示。 -
var str = 'Twas the night before Xmas...';
+```js
+var str = 'Twas the night before Xmas...';
 var newstr = str.replace(/xmas/i, 'Christmas');
 console.log(newstr);  // Twas the night before Christmas...
-
+``` -

在 replace() 中使用 global 和 ignore 选项

+### 在 `replace()` 中使用 `global` 和 `ignore` 选项 -

下面的例子中，正则表达式包含有全局替换 (g) 和忽略大小写 (i) 的选项，这使得 replace 方法用'oranges'替换掉了所有出现的"apples".

+下面的例子中，正则表达式包含有全局替换 (g) 和忽略大小写 (i) 的选项，这使得 replace 方法用'oranges'替换掉了所有出现的"apples". -
var re = /apples/gi;
+```js
+var re = /apples/gi;
 var str = "Apples are round, and apples are juicy.";
 var newstr = str.replace(re, "oranges");
 
 // oranges are round, and oranges are juicy.
 console.log(newstr);
-
+``` -

交换字符串中的两个单词

+### 交换字符串中的两个单词 -

下面的例子演示了如何交换一个字符串中两个单词的位置，这个脚本使用$1 和 $2 代替替换文本。

+下面的例子演示了如何交换一个字符串中两个单词的位置，这个脚本使用$1 和 $2 代替替换文本。 -
var re = /(\w+)\s(\w+)/;
+```js
+var re = /(\w+)\s(\w+)/;
 var str = "John Smith";
 var newstr = str.replace(re, "$2, $1");
 // Smith, John
 console.log(newstr);
-
+``` -

使用行内函数来修改匹配到的字符。

+### 使用行内函数来修改匹配到的字符。 -

在这个例子中，所有出现的大写字母转换为小写，并且在匹配位置前加一个连字符。重要的是，在返回一个替换了的字符串前，在匹配元素前进行添加操作是必要的。

+在这个例子中，所有出现的大写字母转换为小写，并且在匹配位置前加一个连字符。重要的是，在返回一个替换了的字符串前，在匹配元素前进行添加操作是必要的。 -

在返回前，替换函数允许匹配片段作为参数，并且将它和连字符进行连接作为新的片段。

+在返回前，替换函数允许匹配片段作为参数，并且将它和连字符进行连接作为新的片段。 -
function styleHyphenFormat(propertyName) {
+```js
+function styleHyphenFormat(propertyName) {
   function upperToHyphenLower(match) {
     return '-' + match.toLowerCase();
   }
   return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
 }
-
+``` -

运行 styleHyphenFormat('borderTop')，将返回 'border-top'。

+运行 ` styleHyphenFormat('borderTop')``， `将返回 'border-top'。 -

因为我们想在最终的替换中进一步转变匹配结果，所以我们必须使用一个函数。这迫使我们在使用{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}方法前进行评估。如果我们尝试不用一个函数进行匹配，那么使用{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} 方法将不会有效。

+因为我们想在最终的替换中进一步转变匹配结果，所以我们必须使用一个函数。这迫使我们在使用{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}方法前进行评估。如果我们尝试不用一个函数进行匹配，那么使用{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} 方法将不会有效。 -
var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());  // won't work
-
+```js +var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // won't work +``` -

这是因为 '$&'.toLowerCase() 会先被解析成字符串字面量（这会导致相同的'$&') 而不是当作一个模式。

+这是因为 `'$&'.toLowerCase()` 会先被解析成字符串字面量（这会导致相同的'$&') 而不是当作一个模式。 -

将华氏温度转换为对等的摄氏温度

+### 将华氏温度转换为对等的摄氏温度 -

下面的例子演示如何将华氏温度转换为对等的摄氏温度。华氏温度用一个数字加一个"F"来表示，这个函数将返回一个数字加"C"来表示的摄氏温度。例如，如果输入是 212F，这个函数将返回 100C。如果输入的数字是 0F，这个方法将返回 "-17.77777777777778C"。

+下面的例子演示如何将华氏温度转换为对等的摄氏温度。华氏温度用一个数字加一个"F"来表示，这个函数将返回一个数字加"C"来表示的摄氏温度。例如，如果输入是 212F，这个函数将返回 100C。如果输入的数字是 0F，这个方法将返回 "-17.77777777777778C"。 -

正则表达式 test 检查任何数字是否以 F 结尾。华氏温度通过第二个参数 p1 进入函数。这个函数基于华氏温度作为字符串传递给 f2c 函数设置成摄氏温度。然后 f2c() 返回摄氏温度。这个函数与 Perl 的 s///e 标志相似。

+正则表达式 test 检查任何数字是否以 F 结尾。华氏温度通过第二个参数 p1 进入函数。这个函数基于华氏温度作为字符串传递给 f2c 函数设置成摄氏温度。然后 f2c() 返回摄氏温度。这个函数与 Perl 的 s///e 标志相似。 -
function f2c(x)
+```js
+function f2c(x)
 {
   function convert(str, p1, offset, s)
   {
@@ -209,70 +163,71 @@ console.log(newstr);
   var test = /(\d+(?:\.\d*)?)F\b/g;
   return s.replace(test, convert);
 }
-
+``` -

使用行内函数和正则来避免循环

+### 使用行内函数和正则来避免循环 -

下例把某种模式的字符串转换为一个对象数组（其元素为对象）。

+下例把某种模式的字符串转换为一个对象数组（其元素为对象）。 -

输入：
- 一个由 x，- 和 _ 组成的字符串。

+**输入：** +一个由 x，- 和 \_ 组成的字符串。 -
x-x_
+```plain
+x-x_
 
 ---x---x---x---
 
 -xxx-xx-x-
 
 _x_x___x___x___
-
+``` -

输出：

+**输出：** -

一个数组对象。'x' 产生一个 'on' 状态，'-'（连接符）产生一个 'off' 状态，而 '_'（下划线）表示 'on' 状态的长度。

+一个数组对象。'x' 产生一个 'on' 状态，'-'（连接符）产生一个 'off' 状态，而 '\_'（下划线）表示 'on' 状态的长度。 -
[
+```js
+[
   { on: true, length: 1 },
   { on: false, length: 1 },
   { on: true, length: 2 }
   ...
-]
+] +``` -

代码片段：

+代码片段： -
var str = 'x-x_';
+```js
+var str = 'x-x_';
 var retArr = [];
 str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
   if (p1) { retArr.push({ on: true, length: p1.length }); }
   if (p2) { retArr.push({ on: false, length: 1 }); }
 });
 
-console.log(retArr);
+console.log(retArr); +``` -

该代码片段生成了一个数组，包含三个期望格式的对象，避免了使用 for 循环语句。

+该代码片段生成了一个数组，包含三个期望格式的对象，避免了使用 for 循环语句。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

Firefox 备注

+### Firefox 备注 -
    -
  • flags 是一个仅在 Gecko 中可用的非标准的第三方参数：str.replace(regexp|substr, newSubStr|function, flags)
    • -
  • 从 Gecko 27 {{geckoRelease(27)}} 开始，这个方法就被整合到了 ECMAScript 规范中。当 replace() 被使用全局 g 标志的正则表达式调用时，{{jsxref("RegExp.lastIndex")}} 属性将被重置为 0（{{bug(501739)}}）。
    • -
  • 从 Gecko 39 {{geckoRelease(39)}} 开始，flags 参数便被弃用，且在调用时会抛出一个控制台警告（{{bug(1142351)}}）。
    • -
  • 从 Gecko 47 {{geckoRelease(47)}} 开始，在非发行版本中已不再支持非标准的 flags 参数，并且不久后会完全移除该参数（{{bug(1245801)}}）。
    • -
  • 从 Gecko 49 {{geckoRelease(49)}} 开始，不再支持非标准的 flags 参数（{{bug(1108382)}}）。
    • -
+- `flags` 是一个仅在 Gecko 中可用的非标准的第三方参数：`str.replace(regexp|substr, newSubStr|function, flags)` +- 从 Gecko 27 {{geckoRelease(27)}} 开始，这个方法就被整合到了 ECMAScript 规范中。当 replace() 被使用全局 g 标志的正则表达式调用时，{{jsxref("RegExp.lastIndex")}} 属性将被重置为 0（{{bug(501739)}}）。 +- 从 Gecko 39 {{geckoRelease(39)}} 开始，`flags` 参数便被弃用，且在调用时会抛出一个控制台警告（{{bug(1142351)}}）。 +- 从 Gecko 47 {{geckoRelease(47)}} 开始，在非发行版本中已不再支持非标准的 `flags` 参数，并且不久后会完全移除该参数（{{bug(1245801)}}）。 +- 从 Gecko 49 {{geckoRelease(49)}} 开始，不再支持非标准的 `flags` 参数（{{bug(1108382)}}）。 -

参见

+## 参见 -
    -
  • {{jsxref("String.prototype.match()")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
+- {{jsxref("String.prototype.match()")}} +- {{jsxref("RegExp.prototype.exec()")}} +- {{jsxref("RegExp.prototype.test()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/replaceall/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/replaceall/index.md index 06581f3bdf2a84..c72c8841367fc8 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/replaceall/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/replaceall/index.md @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll const newStr = str.replaceAll(regexp|substr, newSubstr|function) ``` -> **备注：**当使用一个 \`regex\`时，您必须设置全局（“ g”）标志， +> **备注：** 当使用一个 \`regex\`时，您必须设置全局（“ g”）标志， > 否则，它将引发 `TypeError`：“必须使用全局 RegExp 调用 replaceAll”。 ### 参数 diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md index 6d7d74d05eb5b8..66c98e542ce062 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md @@ -18,11 +18,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split ## 语法 -```plain +```js str.split([separator[, limit]]) ``` -> **警告：**如果使用空字符串 (“) 作为分隔符，则字符串不是在每个用户感知的字符 (图形素集群) 之间，也不是在每个 Unicode 字符 (代码点) 之间，而是在每个 UTF-16 代码单元之间。这会摧毁代理对。还请参见[how do you get a string to a character array in javascript](https://stackoverflow.com/questions/4547609/how-do-you-get-a-string-to-a-character-array-in-javascript/34717402#34717402) +> **警告：** 如果使用空字符串 (“) 作为分隔符，则字符串不是在每个用户感知的字符 (图形素集群) 之间，也不是在每个 Unicode 字符 (代码点) 之间，而是在每个 UTF-16 代码单元之间。这会摧毁代理对。还请参见[how do you get a string to a character array in javascript](https://stackoverflow.com/questions/4547609/how-do-you-get-a-string-to-a-character-array-in-javascript/34717402#34717402) ### 参数 @@ -41,7 +41,7 @@ str.split([separator[, limit]]) 如果分隔符是包含捕获括号的正则表达式，则每次分隔符匹配时，捕获括号的结果（包括任何未定义的结果）将被拼接到输出数组中。但是，并不是所有浏览器都支持此功能。 -> **备注：**当字符串为空时，split（）返回一个包含一个空字符串的数组，而不是一个空数组，如果字符串和分隔符都是空字符串，则返回一个空数组。 +> **备注：** 当字符串为空时，split（）返回一个包含一个空字符串的数组，而不是一个空数组，如果字符串和分隔符都是空字符串，则返回一个空数组。 ## 示例 @@ -162,9 +162,9 @@ console.log(splits); //["c", "c,", "c", "c", "c"] ### 用 split() 来颠倒字符串顺序 -> **警告：**注意这并非一种很健壮的逆转字符串的方法： +> **警告：** 注意这并非一种很健壮的逆转字符串的方法： > -> ```plain +> ```js > const str = 'asdfghjkl'; > const strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa' > // split() returns an array on which reverse() and join() can be applied @@ -172,7 +172,7 @@ console.log(splits); //["c", "c,", "c", "c", "c"] > > 如果字符串包含图形素集群，即使使用 Unicode 感知的拆分 (use for example [esrever](https://github.com/mathiasbynens/esrever) instead)，也不能工作。 > -> ```plain +> ```js > const str = 'résumé'; > const strReverse = str.split(/(?:)/u).reverse().join(''); > // => "́emuśer" diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/substr/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/substr/index.md index 630a147beae102..f1b9b694a48f33 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/substr/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/string/substr/index.md @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/substr --- {{JSRef}} -> **警告：**尽管 `String.prototype.substr(…)` 没有严格被废弃 (as in "removed from the Web standards"), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非 JavaScript 核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 [`substring()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substring) 替代它。 +> **警告：** 尽管 `String.prototype.substr(…)` 没有严格被废弃 (as in "removed from the Web standards"), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非 JavaScript 核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 [`substring()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substring) 替代它。 **`substr()`** 方法返回一个字符串中从指定位置开始到指定字符数的字符。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/symbol/index.md b/files/zh-cn/web/javascript/reference/global_objects/symbol/index.md index 2efe9396ed4eb0..d03da823344a06 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/symbol/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/symbol/index.md @@ -7,167 +7,156 @@ tags: - Symbol translation_of: Web/JavaScript/Reference/Global_Objects/Symbol --- -
{{JSRef}}
+{{JSRef}} -

symbol 是一种基本数据类型（{{Glossary("Primitive", "primitive data type")}}）。Symbol() 函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。

+**symbol** 是一种基本数据类型（{{Glossary("Primitive", "primitive data type")}}）。`Symbol()` 函数会返回 **symbol** 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："`new Symbol()`"。 -

每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。更进一步的解析见—— glossary entry for Symbol。

+每个从 `Symbol()` 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。更进一步的解析见—— [glossary entry for Symbol](/zh-CN/docs/Glossary/Symbol)。 -
{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}
+{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}} +## 语法 +```plain +Symbol([description]) +``` -

语法

+### 参数 -
Symbol([description])
+- `description` {{optional_inline}} + - : 可选的，字符串类型。对 symbol 的描述，可用于调试但不是访问 symbol 本身。 -

参数

+## 描述 -
-
description {{optional_inline}}
-
可选的，字符串类型。对 symbol 的描述，可用于调试但不是访问 symbol 本身。
-
+直接使用`Symbol()`创建新的 symbol 类型，并用一个可选的字符串作为其描述。 -

描述

- -

直接使用Symbol()创建新的 symbol 类型，并用一个可选的字符串作为其描述。

- -
var sym1 = Symbol();
+```js
+var sym1 = Symbol();
 var sym2 = Symbol('foo');
 var sym3 = Symbol('foo');
-
+``` -

上面的代码创建了三个新的 symbol 类型。 注意，Symbol("foo") 不会强制将字符串 “foo” 转换成 symbol 类型。它每次都会创建一个新的 symbol 类型：

+上面的代码创建了三个新的 symbol 类型。 注意，`Symbol("foo")` 不会强制将字符串 “foo” 转换成 symbol 类型。它每次都会创建一个新的 symbol 类型： -
Symbol("foo") === Symbol("foo"); // false
+```js +Symbol("foo") === Symbol("foo"); // false +``` -

下面带有 {{jsxref("Operators/new", "new")}} 运算符的语法将抛出 {{jsxref("TypeError")}} 错误：

+下面带有 {{jsxref("Operators/new", "new")}} 运算符的语法将抛出 {{jsxref("TypeError")}} 错误： -
var sym = new Symbol(); // TypeError
+```js +var sym = new Symbol(); // TypeError +``` -

这会阻止创建一个显式的 Symbol 包装器对象而不是一个 Symbol 值。围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持。 然而，现有的原始包装器对象，如 new Boolean、new String以及new Number，因为遗留原因仍可被创建。

+这会阻止创建一个显式的 Symbol 包装器对象而不是一个 Symbol 值。围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持。 然而，现有的原始包装器对象，如 `new Boolean`、`new String`以及`new Number`，因为遗留原因仍可被创建。 -

如果你真的想创建一个 Symbol 包装器对象 (Symbol wrapper object)，你可以使用 Object() 函数：

+如果你真的想创建一个 **Symbol 包装器对象** (`Symbol wrapper object`)，你可以使用 `Object()` 函数： -
var sym = Symbol("foo");
+```js
+var sym = Symbol("foo");
 typeof sym;     // "symbol"
 var symObj = Object(sym);
-typeof symObj;  // "object"
- -

全局共享的 Symbol

- -

上面使用 Symbol() 函数的语法，不会在你的整个代码库中创建一个可用的全局的 symbol 类型。要创建跨文件可用的 symbol，甚至跨域（每个都有它自己的全局作用域），使用 {{jsxref("Symbol.for()")}} 方法和 {{jsxref("Symbol.keyFor()")}} 方法从全局的 symbol 注册表设置和取得 symbol。

- -

在对象中查找 Symbol 属性

- -

{{jsxref("Object.getOwnPropertySymbols()")}} 方法让你在查找一个给定对象的符号属性时返回一个 symbol 类型的数组。注意，每个初始化的对象都是没有自己的 symbol 属性的，因此这个数组可能为空，除非你已经在对象上设置了 symbol 属性。

- -

属性

- -
-
Symbol.length
-
长度属性，值为 0。
-
{{jsxref("Symbol.prototype")}}
-
symbol 构造函数的原型。
-
- -

众所周知的 symbols

- -

除了自己创建的 symbol，JavaScript 还内建了一些在 ECMAScript 5 之前没有暴露给开发者的 symbol，它们代表了内部语言行为。它们可以使用以下属性访问：

- -
-
- 迭代 symbols {{jsxref("Symbol.iterator")}} -
-
一个返回一个对象默认迭代器的方法。被 for...of 使用。
-
{{jsxref("Symbol.asyncIterator")}} {{experimental_inline}}
-
一个返回对象默认的异步迭代器的方法。被 for await of 使用。
-
- 正则表达式 symbols {{jsxref("Symbol.match")}} -
-
一个用于对字符串进行匹配的方法，也用于确定一个对象是否可以作为正则表达式使用。被 {{jsxref("String.prototype.match()")}} 使用。
-
{{jsxref("Symbol.replace")}}
-
一个替换匹配字符串的子串的方法。被 {{jsxref("String.prototype.replace()")}} 使用。
-
{{jsxref("Symbol.search")}}
-
一个返回一个字符串中与正则表达式相匹配的索引的方法。被 {{jsxref("String.prototype.search()")}} 使用。
-
{{jsxref("Symbol.split")}}
-
一个在匹配正则表达式的索引处拆分一个字符串的方法.。被 {{jsxref("String.prototype.split()")}} 使用。
-
- 其他 symbols {{jsxref("Symbol.hasInstance")}} -
-
一个确定一个构造器对象识别的对象是否为它的实例的方法。被 {{jsxref("Operators/instanceof", "instanceof")}} 使用。
-
{{jsxref("Symbol.isConcatSpreadable")}}
-
一个布尔值，表明一个对象是否应该 flattened 为它的数组元素。被 {{jsxref("Array.prototype.concat()")}} 使用。
-
{{jsxref("Symbol.unscopables")}}
-
拥有和继承属性名的一个对象的值被排除在与环境绑定的相关对象外。
-
{{jsxref("Symbol.species")}}
-
一个用于创建派生对象的构造器函数。
-
{{jsxref("Symbol.toPrimitive")}}
-
一个将对象转化为基本数据类型的方法。
-
{{jsxref("Symbol.toStringTag")}}
-
用于对象的默认描述的字符串值。被 {{jsxref("Object.prototype.toString()")}} 使用。
-
- -

方法

- -
-
{{jsxref("Symbol.for()", "Symbol.for(key)")}}
-
使用给定的 key 搜索现有的 symbol，如果找到则返回该 symbol。否则将使用给定的 key 在全局 symbol 注册表中创建一个新的 symbol。
-
{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
-
从全局 symbol 注册表中，为给定的 symbol 检索一个共享的？symbol key。
-
- -

Symbol 原型

- -

所有 Symbols 继承自 {{jsxref("Symbol.prototype")}}.

- -

实例属性

- -
-
{{jsxref("Symbol.prototype.description")}}
-
一个只读的字符串，意为对该 Symbol 对象的描述
-
- -

实例方法

- -
-
{{jsxref("Symbol.prototype.toSource")}}
-
返回该 Symbol 对象的源代码。该方法重写了 {{jsxref("Object.prototype.toSource")}} 方法
-
{{jsxref("Symbol.prototype.toString")}}
-
返回一个包含着该 Symbol 对象描述的字符串。该方法重写了 {{jsxref("Object.prototype.toString")}} 方法
-
{{jsxref("Symbol.prototype.valueOf")}}
-
返回该 Symbol 对象。该方法重写了 {{jsxref("Object.prototype.valueOf")}} 方法
-
{{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}
-
返回该 Symbol 对象。
-
- -

示例

- -

对 symbol 使用 typeof 运算符

- -

{{jsxref("Operators/typeof", "typeof")}}运算符能帮助你识别 symbol 类型

- -
typeof Symbol() === 'symbol'
+typeof symObj;  // "object"
+```
+
+### 全局共享的 Symbol
+
+上面使用 `Symbol()` 函数的语法，不会在你的整个代码库中创建一个可用的全局的 symbol 类型。要创建跨文件可用的 symbol，甚至跨域（每个都有它自己的全局作用域），使用 {{jsxref("Symbol.for()")}} 方法和 {{jsxref("Symbol.keyFor()")}} 方法从全局的 symbol 注册表设置和取得 symbol。
+
+### 在对象中查找 Symbol 属性
+
+{{jsxref("Object.getOwnPropertySymbols()")}} 方法让你在查找一个给定对象的符号属性时返回一个 symbol 类型的数组。注意，每个初始化的对象都是没有自己的 symbol 属性的，因此这个数组可能为空，除非你已经在对象上设置了 symbol 属性。
+
+## 属性
+
+- `Symbol.length`
+  - : 长度属性，值为 0。
+- {{jsxref("Symbol.prototype")}}
+  - : `symbol` 构造函数的原型。
+
+### 众所周知的 symbols
+
+除了自己创建的 symbol，JavaScript 还内建了一些在 ECMAScript 5 之前没有暴露给开发者的 symbol，它们代表了内部语言行为。它们可以使用以下属性访问：
+
+- 迭代 symbols {{jsxref("Symbol.iterator")}}
+  - : 一个返回一个对象默认迭代器的方法。被 [`for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 使用。
+- {{jsxref("Symbol.asyncIterator")}} {{experimental_inline}}
+  - : 一个返回对象默认的异步迭代器的方法。被 [`for await of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of) 使用。
+- 正则表达式 symbols {{jsxref("Symbol.match")}}
+  - : 一个用于对字符串进行匹配的方法，也用于确定一个对象是否可以作为正则表达式使用。被 {{jsxref("String.prototype.match()")}} 使用。
+- {{jsxref("Symbol.replace")}}
+  - : 一个替换匹配字符串的子串的方法。被 {{jsxref("String.prototype.replace()")}} 使用。
+- {{jsxref("Symbol.search")}}
+  - : 一个返回一个字符串中与正则表达式相匹配的索引的方法。被 {{jsxref("String.prototype.search()")}} 使用。
+- {{jsxref("Symbol.split")}}
+  - : 一个在匹配正则表达式的索引处拆分一个字符串的方法.。被 {{jsxref("String.prototype.split()")}} 使用。
+- 其他 symbols {{jsxref("Symbol.hasInstance")}}
+  - : 一个确定一个构造器对象识别的对象是否为它的实例的方法。被 {{jsxref("Operators/instanceof", "instanceof")}} 使用。
+- {{jsxref("Symbol.isConcatSpreadable")}}
+  - : 一个布尔值，表明一个对象是否应该 flattened 为它的数组元素。被 {{jsxref("Array.prototype.concat()")}} 使用。
+- {{jsxref("Symbol.unscopables")}}
+  - : 拥有和继承属性名的一个对象的值被排除在与环境绑定的相关对象外。
+- {{jsxref("Symbol.species")}}
+  - : 一个用于创建派生对象的构造器函数。
+- {{jsxref("Symbol.toPrimitive")}}
+  - : 一个将对象转化为基本数据类型的方法。
+- {{jsxref("Symbol.toStringTag")}}
+  - : 用于对象的默认描述的字符串值。被 {{jsxref("Object.prototype.toString()")}} 使用。
+
+## 方法
+
+- {{jsxref("Symbol.for()", "Symbol.for(key)")}}
+  - : 使用给定的 key 搜索现有的 symbol，如果找到则返回该 symbol。否则将使用给定的 key 在全局 symbol 注册表中创建一个新的 symbol。
+- {{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
+  - : 从全局 symbol 注册表中，为给定的 symbol 检索一个共享的？symbol key。
+
+## Symbol 原型
+
+所有 Symbols 继承自 {{jsxref("Symbol.prototype")}}.
+
+### 实例属性
+
+- {{jsxref("Symbol.prototype.description")}}
+  - : 一个只读的字符串，意为对该 Symbol 对象的描述
+
+### 实例方法
+
+- {{jsxref("Symbol.prototype.toSource")}}
+  - : 返回该 Symbol 对象的源代码。该方法重写了 {{jsxref("Object.prototype.toSource")}} 方法
+- {{jsxref("Symbol.prototype.toString")}}
+  - : 返回一个包含着该 Symbol 对象描述的字符串。该方法重写了 {{jsxref("Object.prototype.toString")}} 方法
+- {{jsxref("Symbol.prototype.valueOf")}}
+  - : 返回该 Symbol 对象。该方法重写了 {{jsxref("Object.prototype.valueOf")}} 方法
+- {{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}
+  - : 返回该 Symbol 对象。
+
+## 示例
+
+### 对 symbol 使用 typeof 运算符
+
+{{jsxref("Operators/typeof", "typeof")}}运算符能帮助你识别 symbol 类型
+
+```js
+typeof Symbol() === 'symbol'
 typeof Symbol('foo') === 'symbol'
 typeof Symbol.iterator === 'symbol'
-
+``` -

Symbol 类型转换

+### Symbol 类型转换 -

当使用 symbol 值进行类型转换时需要注意一些事情：

+当使用 symbol 值进行类型转换时需要注意一些事情： -
    -
  • 尝试将一个 symbol 值转换为一个 number 值时，会抛出一个 {{jsxref("TypeError")}} 错误 (e.g. +sym or sym | 0).
    • -
  • 使用宽松相等时，Object(sym) == sym returns true.
    • -
  • 这会阻止你从一个 symbol 值隐式地创建一个新的 string 类型的属性名。例如，Symbol("foo") + "bar" 将抛出一个 {{jsxref("TypeError")}} (can't convert symbol to string).
    • -
  • "safer" String(sym) conversion 的作用会像 symbol 类型调用 {{jsxref("Symbol.prototype.toString()")}} 一样，但是注意 new String(sym) 将抛出异常。
    • -
+- 尝试将一个 symbol 值转换为一个 number 值时，会抛出一个 {{jsxref("TypeError")}} 错误 (e.g. `+sym` or `sym | 0`). +- 使用宽松相等时，`Object(sym) == sym` returns `true.` +- 这会阻止你从一个 symbol 值隐式地创建一个新的 string 类型的属性名。例如，`Symbol("foo") + "bar"` 将抛出一个 {{jsxref("TypeError")}} (can't convert symbol to string). +- ["safer" `String(sym)` conversion](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) 的作用会像 symbol 类型调用 {{jsxref("Symbol.prototype.toString()")}} 一样，但是注意 `new String(sym)` 将抛出异常。 -

Symbols 与 for...in 迭代

+### Symbols 与 `for...in` 迭代 -

Symbols 在 for...in 迭代中不可枚举。另外，{{jsxref("Object.getOwnPropertyNames()")}} 不会返回 symbol 对象的属性，但是你能使用 {{jsxref("Object.getOwnPropertySymbols()")}} 得到它们。

+Symbols 在 [`for...in`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) 迭代中不可枚举。另外，{{jsxref("Object.getOwnPropertyNames()")}} 不会返回 symbol 对象的属性，但是你能使用 {{jsxref("Object.getOwnPropertySymbols()")}} 得到它们。 -
var obj = {};
+```js
+var obj = {};
 
 obj[Symbol("a")] = "a";
 obj[Symbol.for("b")] = "b";
@@ -176,41 +165,42 @@ obj.d = "d";
 
 for (var i in obj) {
    console.log(i); // logs "c" and "d"
-}
+} +``` -

Symbols 与 JSON.stringify()

+### Symbols 与 `JSON.stringify()` -

当使用 JSON.stringify() 时，以 symbol 值作为键的属性会被完全忽略：

+当使用 JSON.stringify() 时，以 symbol 值作为键的属性会被完全忽略： -
JSON.stringify({[Symbol("foo")]: "foo"});
-// '{}'
+```js +JSON.stringify({[Symbol("foo")]: "foo"}); +// '{}' +``` -

更多细节，请看 {{jsxref("JSON.stringify()")}}。

+更多细节，请看 {{jsxref("JSON.stringify()")}}。 -

Symbol 包装器对象作为属性的键

+### Symbol 包装器对象作为属性的键 -

当一个 Symbol 包装器对象作为一个属性的键时，这个对象将被强制转换为它包装过的 symbol 值：

+当一个 Symbol 包装器对象作为一个属性的键时，这个对象将被强制转换为它包装过的 symbol 值： -
var sym = Symbol("foo");
+```js
+var sym = Symbol("foo");
 var obj = {[sym]: 1};
 obj[sym];            // 1
-obj[Object(sym)];    // still 1
+obj[Object(sym)]; // still 1 +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

参考文档

+## 参考文档 - +- [Glossary: Symbol data type](/zh-CN/docs/Glossary/Symbol) +- {{jsxref("Operators/typeof", "typeof")}} +- [Data types and data structures](/zh-CN/docs/Web/JavaScript/Data_structures) +- ["ES6 In Depth: Symbols"（深入 ES6 Symbols ）on hacks.mozilla.org](https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/) diff --git a/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md b/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md index 4a2699e30e0460..d734541ecc01a8 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md @@ -30,7 +30,7 @@ test(); // 返回"undefined" 一个函数如果没有使用 return 语句指定{{jsxref("Statements/return", "返回")}}值，就会返回一个 undefined 值。 -> **警告：**但是它有可能在非全局作用域中被当作{{Glossary("Identifier", "标识符")}}（变量名）来使用 (因为 undefined 不是一个{{jsxref("Reserved_Words", "保留字")}}))，这样做是一个非常坏的主意，因为这样会使你的代码难以去维护和排错。 +> **警告：** 但是它有可能在非全局作用域中被当作{{Glossary("Identifier", "标识符")}}（变量名）来使用 (因为 undefined 不是一个{{jsxref("Reserved_Words", "保留字")}}))，这样做是一个非常坏的主意，因为这样会使你的代码难以去维护和排错。 > > ```js > // 不要这样做！ @@ -63,7 +63,7 @@ if (x === undefined) { } ``` -> **备注：**这里是必须使用严格相等操作符（===）而不是标准相等操作符（==），因为 x == undefined 会检查 x 是不是 null，但是严格相等不会检查（有点饶人，其实 === 会严格判断双方的类型、值等是否相等）。null 不等同于 undefined。移步{{jsxref("Operators/Comparison_Operators", "比较操作符")}}查看详情。 +> **备注：** 这里是必须使用严格相等操作符（===）而不是标准相等操作符（==），因为 x == undefined 会检查 x 是不是 null，但是严格相等不会检查（有点饶人，其实 === 会严格判断双方的类型、值等是否相等）。null 不等同于 undefined。移步{{jsxref("Operators/Comparison_Operators", "比较操作符")}}查看详情。 ### Typeof 操作符和 undefined diff --git a/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md b/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md index 579829591850ae..6a33cccb8e52fb 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/unescape 已废弃的**`unescape()`** 方法计算生成一个新的字符串，其中的十六进制转义序列将被其表示的字符替换。上述的转义序列就像{{jsxref("escape")}}里介绍的一样。因为 `unescape` 已经废弃，建议使用 {{jsxref("decodeURI")}}或者{{jsxref("decodeURIComponent")}} 替代本方法。 -> **备注：**不要使用`unescape`去解码 URLS，使用`decodeURI`或`decodeURIComponent`替代。 +> **备注：** 不要使用`unescape`去解码 URLS，使用`decodeURI`或`decodeURIComponent`替代。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakmap/clear/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakmap/clear/index.md index 2844306774c7e3..8a9bd5032d5255 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakmap/clear/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakmap/clear/index.md @@ -12,9 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear **`clear()`**用来从 `WeakMap` 对象中移除所有元素。但不再是 ECMAScript 和它的实现部分。 -> **警告：**Warning: -> -> ![WeakMap(no clear() any more).png]() +![WeakMap(no clear() any more).png]() ## 语法 diff --git a/files/zh-cn/web/javascript/reference/global_objects/webassembly/global/index.md b/files/zh-cn/web/javascript/reference/global_objects/webassembly/global/index.md index 63c45e2ed3a07c..f49c50992f4c8d 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/webassembly/global/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/webassembly/global/index.md @@ -64,7 +64,7 @@ WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) }); ``` -> **备注：**: 你可以在[running live on GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html) 查看例子; 也可以访问[source code](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). +> **备注：** 你可以在[running live on GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html) 查看例子; 也可以访问[source code](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). ## 规格 diff --git a/files/zh-cn/web/javascript/reference/global_objects/webassembly/instance/index.md b/files/zh-cn/web/javascript/reference/global_objects/webassembly/instance/index.md index 3d000fd1d525e8..d32789769612b7 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/webassembly/instance/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/webassembly/instance/index.md @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance ## 构造函数 -> **警告：**由于大型模块的实例化代价极高， 开发人员应只在必须同步实例化的时候，才使用`Instance()`；绝大多数情况应该使用异步方法{{jsxref("WebAssembly.instantiate()")}} . +> **警告：** 由于大型模块的实例化代价极高， 开发人员应只在必须同步实例化的时候，才使用`Instance()`；绝大多数情况应该使用异步方法{{jsxref("WebAssembly.instantiate()")}} . ```plain var myInstance = new WebAssembly.Instance(module, importObject); diff --git a/files/zh-cn/web/javascript/reference/global_objects/webassembly/instantiate/index.md b/files/zh-cn/web/javascript/reference/global_objects/webassembly/instantiate/index.md index bbb14f69f4929d..8396e5e9540323 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/webassembly/instantiate/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/webassembly/instantiate/index.md @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate - 第一种主要重载方式使用 WebAssembly 二进制代码的 [typed array](/en-US/docs/Web/JavaScript/Typed_arrays) 或{{jsxref("ArrayBuffer")}}形，一并进行编译和实例化。返回的 `Promise` 会携带已编译的 {{jsxref("WebAssembly.Module")}} 和它的第一个实例化对象 {{jsxref("WebAssembly.Instance")}}. - 第二种重载使用已编译的 {{jsxref("WebAssembly.Module")}} , 返回的 `Promise` 携带一个 `Module`的实例化对象 `Instance`. 如果这个 `Module` 已经被编译了或者是从缓存中获取的 ( [retrieved from cache](/en-US/docs/WebAssembly/Caching_modules)), 那么这种重载方式是非常有用的。 -> **警告：**此方法不是获取 (fetch) 和实例化 wasm 模块的最具效率方法。 如果可能的话，您应该改用较新的{{jsxref("WebAssembly.instantiateStreaming()")}}方法，该方法直接从原始字节码中直接获取，编译和实例化模块，因此不需要转换为{{jsxref("ArrayBuffer")}}。 +> **警告：** 此方法不是获取 (fetch) 和实例化 wasm 模块的最具效率方法。 如果可能的话，您应该改用较新的{{jsxref("WebAssembly.instantiateStreaming()")}}方法，该方法直接从原始字节码中直接获取，编译和实例化模块，因此不需要转换为{{jsxref("ArrayBuffer")}}。 ## 语法 @@ -92,7 +92,7 @@ fetch('simple.wasm').then(response => ); ``` -> **备注：**: 查看 GitHub([在线实例](https://mdn.github.io/webassembly-examples/js-api-examples/)) 的 [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) 中一个相似的例子，使用了我们的[`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1)库函数 +> **备注：** 查看 GitHub([在线实例](https://mdn.github.io/webassembly-examples/js-api-examples/)) 的 [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) 中一个相似的例子，使用了我们的[`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1)库函数 ### 第二种重载例子 diff --git a/files/zh-cn/web/javascript/reference/global_objects/webassembly/memory/index.md b/files/zh-cn/web/javascript/reference/global_objects/webassembly/memory/index.md index 2bb53f89645c9e..d6bdae986c803c 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/webassembly/memory/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/webassembly/memory/index.md @@ -26,7 +26,7 @@ var myMemory = new WebAssembly.Memory(memoryDescriptor); - _maximum {{optional_inline}}_ - : 以 WebAssembly 页面为单位，可允许 WebAssembly 内存的 `最大值`。当存在此属性时，此参数用于提示引擎预先保留内存。但是，引擎可能会忽略或限制此预留请求。通常情况下大多数 WebAssembly 模块不需要设置 `最大值`。 -> **备注：**: A WebAssembly 页面的大小为一个常量 65,536 字节，即 64KB。 +> **备注：** A WebAssembly 页面的大小为一个常量 65,536 字节，即 64KB。 ### 异常 diff --git a/files/zh-cn/web/javascript/reference/global_objects/webassembly/module/index.md b/files/zh-cn/web/javascript/reference/global_objects/webassembly/module/index.md index 671bc4b30e9120..48167637c9c8d3 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/webassembly/module/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/webassembly/module/index.md @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module ## 构造函数语法 -> **警告：**由于大型模块的编译可能很消耗资源，开发人员只有在绝对需要同步编译时，才使用 `Module()` 构造函数；其他情况下，应该使用异步 {{jsxref("WebAssembly.compile()")}} 方法。 +> **警告：** 由于大型模块的编译可能很消耗资源，开发人员只有在绝对需要同步编译时，才使用 `Module()` 构造函数；其他情况下，应该使用异步 {{jsxref("WebAssembly.compile()")}} 方法。 ```plain var myModule = new WebAssembly.Module(bufferSource); diff --git a/files/zh-cn/web/javascript/reference/global_objects/webassembly/table/index.md b/files/zh-cn/web/javascript/reference/global_objects/webassembly/table/index.md index 1614f4c350c946..e5b49b24931dc5 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/webassembly/table/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/webassembly/table/index.md @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table 这是一个包装了 WebAssemble Table 的 Javascript 包装对象，具有类数组结构，存储了多个函数引用。在 Javascript 或者 WebAssemble 中创建 Table 对象可以同时被 Javascript 或 WebAssemble 访问和更改。 -> **备注：**: Tables 对象目前只能存储函数引用，不过在将来可能会被扩展。 +> **备注：** Tables 对象目前只能存储函数引用，不过在将来可能会被扩展。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md index e528ef883fe5e0..658dea7f334d53 100644 --- a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md +++ b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md @@ -10,112 +10,118 @@ tags: - 迭代器协议 translation_of: Web/JavaScript/Reference/Iteration_protocols --- -
{{jsSidebar("More")}}
+{{jsSidebar("More")}} -

作为 ECMAScript 2015 的一组补充规范，迭代协议并不是新的内置实现或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。

+作为 ECMAScript 2015 的一组补充规范，迭代协议并不是新的内置实现或语法，而是*协议*。这些协议可以被任何遵循某些约定的对象来实现。 -

迭代协议具体分为两个协议：可迭代协议和迭代器协议。

+迭代协议具体分为两个协议：[可迭代协议](#可迭代协议)和[迭代器协议](#迭代器协议)。 -

可迭代协议

+## 可迭代协议 -

可迭代协议允许 JavaScript 对象定义或定制它们的迭代行为，例如，在一个 {{jsxref("Statements/for...of", "for..of")}} 结构中，哪些值可以被遍历到。一些内置类型同时是内置可迭代对象，并且有默认的迭代行为，比如 {{jsxref("Array")}} 或者 {{jsxref("Map")}}，而其他内置类型则不是（比如 {{jsxref("Object")}})）。

+**可迭代协议**允许 JavaScript 对象定义或定制它们的迭代行为，例如，在一个 {{jsxref("Statements/for...of", "for..of")}} 结构中，哪些值可以被遍历到。一些内置类型同时是[内置可迭代对象](#内置可迭代对象)，并且有默认的迭代行为，比如 {{jsxref("Array")}} 或者 {{jsxref("Map")}}，而其他内置类型则不是（比如 {{jsxref("Object")}})）。 -

要成为可迭代对象， 一个对象必须实现 @@iterator 方法。这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 {{jsxref("Symbol.iterator")}} 访问该属性：

+要成为**可迭代**对象， 一个对象必须实现 **`@@iterator`** 方法。这意味着对象（或者它[原型链](/zh-CN/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)上的某个对象）必须有一个键为 `@@iterator` 的属性，可通过常量 {{jsxref("Symbol.iterator")}} 访问该属性： - - - - - - - - - - - - - -
属性值
[Symbol.iterator] -

一个无参数的函数，其返回值为一个符合迭代器协议的对象。

-
+| 属性 | 值 | +| ------------------- | --------------------------------------------------------------------- | +| `[Symbol.iterator]` | 一个无参数的函数，其返回值为一个符合[迭代器协议](#迭代器协议)的对象。 | -

当一个对象需要被迭代的时候（比如被置入一个 {{jsxref("Statements/for...of", "for...of")}} 循环时），首先，会不带参数调用它的 @@iterator 方法，然后使用此方法返回的迭代器获得要迭代的值。

+当一个对象需要被迭代的时候（比如被置入一个 {{jsxref("Statements/for...of", "for...of")}} 循环时），首先，会不带参数调用它的 `@@iterator` 方法，然后使用此方法返回的**迭代器**获得要迭代的值。 -

值得注意的是调用此零个参数函数时，它将作为对可迭代对象的方法进行调用。 因此，在函数内部，this关键字可用于访问可迭代对象的属性，以决定在迭代过程中提供什么。

+值得注意的是调用此零个参数函数时，它将作为对可迭代对象的方法进行调用。 因此，在函数内部，`this`关键字可用于访问可迭代对象的属性，以决定在迭代过程中提供什么。 -

此函数可以是普通函数，也可以是生成器函数，以便在调用时返回迭代器对象。 在此生成器函数的内部，可以使用yield提供每个条目。

+此函数可以是普通函数，也可以是生成器函数，以便在调用时返回迭代器对象。 在此生成器函数的内部，可以使用`yield`提供每个条目。 -

迭代器协议

+## 迭代器协议 -

迭代器协议定义了产生一系列值（无论是有限个还是无限个）的标准方式。当值为有限个时，所有的值都被迭代完毕后，则会返回一个默认返回值。

+**迭代器协议**定义了产生一系列值（无论是有限个还是无限个）的标准方式。当值为有限个时，所有的值都被迭代完毕后，则会返回一个默认返回值。 -

只有实现了一个拥有以下语义（semantic）的 next() 方法，一个对象才能成为迭代器：

+只有实现了一个拥有以下语义（semantic）的 **`next()`** 方法，一个对象才能成为迭代器： - - - - - - - - - - + + + + + + + + + +
属性值
next -

一个无参数的或者可以接受一个参数的函数，返回一个应当拥有以下两个属性的对象：

- -
-
done（boolean）
-
-

如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）

- -

如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。

-
-
value
-
迭代器返回的任何 JavaScript 值。done 为 true 时可省略。
-
- -

next() 方法必须返回一个对象，该对象应当有两个属性： done 和 value，如果返回了一个非对象值（比如 false 或 undefined），则会抛出一个 {{jsxref("TypeError")}} 异常（"iterator.next() returned a non-object value"）。

-
属性值
next +

+ 一个无参数的或者可以接受一个参数的函数，返回一个应当拥有以下两个属性的对象： +

+
+
done（boolean）
+
+

+ 如果迭代器可以产生序列中的下一个值，则为 + false。（这等价于没有指定 + done 这个属性。） +

+

+ 如果迭代器已将序列迭代完毕，则为 + true。这种情况下，value + 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。 +

+
+
value
+
迭代器返回的任何 JavaScript 值。done 为 true 时可省略。
+
+

+ next() 方法必须返回一个对象，该对象应当有两个属性： + done 和 value，如果返回了一个非对象值（比如 + false 或 undefined），则会抛出一个 + {{jsxref("TypeError")}} 异常（"iterator.next() returned a non-object value"）。 +

+
-
-

备注：不可能判断一个特定的对象是否实现了迭代器协议，然而，创造一个同时满足迭代器协议和可迭代协议的对象是很容易的（如下面的示例中所示）。

+> **备注：** 不可能判断一个特定的对象是否实现了迭代器协议，然而，创造一个*同时*满足迭代器协议和可迭代协议的对象是很容易的（如下面的示例中所示）。这样做允许一个迭代器能被各种需要可迭代对象的语法所使用。因此，很少会只实现迭代器协议，而不实现可迭代协议。```js example-good +> var myIterator = { +> next: function() { +> // ... +> }, +> [Symbol.iterator]: function() { return this } +> } +> +> ``` +> +> ``` -

这样做允许一个迭代器能被各种需要可迭代对象的语法所使用。因此，很少会只实现迭代器协议，而不实现可迭代协议。

+## 使用迭代协议的例子 -
var myIterator = {
-    next: function() {
-        // ...
-    },
-    [Symbol.iterator]: function() { return this }
-}
-
+{{jsxref("String")}} 是一个内置的可迭代对象： -

使用迭代协议的例子

- -

{{jsxref("String")}} 是一个内置的可迭代对象：

- -
let someString = "hi";
+```js
+let someString = "hi";
 typeof someString[Symbol.iterator];          // "function"
-
+``` -

String 的默认迭代器会依次返回该字符串的各码点（code point）：

+`String` 的默认迭代器会依次返回该字符串的各码点（code point）： -
let iterator = someString[Symbol.iterator]();
+```js
+let iterator = someString[Symbol.iterator]();
 iterator + "";                               // "[object String Iterator]"
 
 iterator.next();                             // { value: "h", done: false }
 iterator.next();                             // { value: "i", done: false }
-iterator.next();                             // { value: undefined, done: true }
+iterator.next(); // { value: undefined, done: true } +``` -

一些内置的语法结构——比如{{jsxref("Operators/Spread_operator", "展开语法")}}——其内部实现也使用了同样的迭代协议：

+一些内置的语法结构——比如{{jsxref("Operators/Spread_operator", "展开语法")}}——其内部实现也使用了同样的迭代协议： -
[...someString]                              // ["h", "i"]
+```js +[...someString] // ["h", "i"] +``` -

我们可以通过提供自己的 @@iterator 方法，重新定义迭代行为：

+我们可以通过提供自己的 `@@iterator` 方法，重新定义迭代行为： -
// 必须构造 String 对象以避免字符串字面量 auto-boxing
+```js
+// 必须构造 String 对象以避免字符串字面量 auto-boxing
 var someString = new String("hi");
 someString[Symbol.iterator] = function() {
   return { // 只返回一次元素，字符串 "bye"，的迭代器对象
@@ -130,45 +136,46 @@ someString[Symbol.iterator] = function() {
     _first: true
   };
 };
-
+``` -

注意重新定义的 @@iterator 方法是如何影响内置语法结构的行为的：

+注意重新定义的 `@@iterator` 方法是如何影响内置语法结构的行为的： -
[...someString];                              // ["bye"]
+```js
+[...someString];                              // ["bye"]
 someString + "";                              // "hi"
-
+``` -

可迭代对象示例

+## 可迭代对象示例 -

内置可迭代对象

+### 内置可迭代对象 -

目前所有的内置可迭代对象如下：{{jsxref("String")}}、{{jsxref("Array")}}、{{jsxref("TypedArray")}}、{{jsxref("Map")}} 和 {{jsxref("Set")}}，它们的原型对象都实现了 @@iterator 方法。

+目前所有的内置可迭代对象如下：{{jsxref("String")}}、{{jsxref("Array")}}、{{jsxref("TypedArray")}}、{{jsxref("Map")}} 和 {{jsxref("Set")}}，它们的原型对象都实现了 ` @@``iterator ` 方法。 -

自定义可迭代对象

+### 自定义可迭代对象 -

我们可以实现一个自己的可迭代对象，就像这样：

+我们可以实现一个自己的可迭代对象，就像这样： -
var myIterable = {};
+```js
+var myIterable = {};
 myIterable[Symbol.iterator] = function* () {
     yield 1;
     yield 2;
     yield 3;
 };
 [...myIterable]; // [1, 2, 3]
-
+``` -

接受可迭代对象的内置 API

+### 接受可迭代对象的内置 API -

很多 API 接受可迭代对象作为参数，例如：

+很多 API 接受可迭代对象作为参数，例如： -
    -
  • {{jsxref("Map", "new Map([iterable])")}}
    • -
  • {{jsxref("WeakMap", "new WeakMap([iterable])")}}
    • -
  • {{jsxref("Set", "new Set([iterable])")}}
    • -
  • {{jsxref("WeakSet", "new WeakSet([iterable])")}}
    • -
+- {{jsxref("Map", "new Map([iterable])")}} +- {{jsxref("WeakMap", "new WeakMap([iterable])")}} +- {{jsxref("Set", "new Set([iterable])")}} +- {{jsxref("WeakSet", "new WeakSet([iterable])")}} -
new Map([[1, 'a'], [2, 'b'], [3, 'c']]).get(2); // "b"
+```plain
+new Map([[1, 'a'], [2, 'b'], [3, 'c']]).get(2); // "b"
 
 let myObj = {};
 
@@ -186,21 +193,20 @@ new WeakSet(function* () {
     yield myObj
     yield {}
 }()).has(myObj);           // true
-
+``` -

另外，还有…

+#### 另外，还有… -
    -
  • {{jsxref("Promise.all()", "Promise.all(iterable)")}}
    • -
  • {{jsxref("Promise.race()", "Promise.race(iterable)")}}
    • -
  • {{jsxref("Array.from()", "Array.from(iterable)")}}
    • -
+- {{jsxref("Promise.all()", "Promise.all(iterable)")}} +- {{jsxref("Promise.race()", "Promise.race(iterable)")}} +- {{jsxref("Array.from()", "Array.from(iterable)")}} -

需要可迭代对象的语法

+### 需要可迭代对象的语法 -

一些语句和表达式需要可迭代对象，比如 {{jsxref("Statements/for...of", "for...of")}} 循环、{{jsxref("Operators/Spread_syntax", "展开语法")}}、{{jsxref("Operators/yield*", "yield*")}}，和{{jsxref("Operators/Destructuring_assignment", "解构赋值")}}。

+一些语句和表达式需要可迭代对象，比如 {{jsxref("Statements/for...of", "for...of")}} 循环、{{jsxref("Operators/Spread_syntax", "展开语法")}}、{{jsxref("Operators/yield*", "yield*")}}，和{{jsxref("Operators/Destructuring_assignment", "解构赋值")}}。 -
for(let value of ["a", "b", "c"]){
+```js
+for(let value of ["a", "b", "c"]){
     console.log(value);
 }
 // "a"
@@ -217,29 +223,30 @@ gen().next(); // { value: "a", done: false }
 
 [a, b, c] = new Set(["a", "b", "c"]);
 a // "a"
+```
 
-
- -

格式不佳的可迭代对象

+### 格式不佳的可迭代对象 -

如果一个可迭代对象的 @@iterator 方法不能返回迭代器对象，那么可以认为它是一个格式不佳的（Non-well-formed）可迭代对象 。

+如果一个可迭代对象的 `@@iterator` 方法不能返回迭代器对象，那么可以认为它是一个*格式不佳*的（_Non-well-formed_）可迭代对象 。 -

使用这样的可迭代对象很可能会导致如下的运行时（runtime）异常，或者不可预料的表现：

+使用这样的可迭代对象很可能会导致如下的运行时（runtime）异常，或者不可预料的表现： -
var nonWellFormedIterable = {}
-nonWellFormedIterable[Symbol.iterator] = () => 1
+```js example-bad
+var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () => 1
 [...nonWellFormedIterable] // TypeError: [] is not a function
-
+``` -

迭代器示例

+## 迭代器示例 -

简单迭代器

+### 简单迭代器 -
function makeIterator(array) {
+```js
+function makeIterator(array) {
     let nextIndex = 0;
     return {
        next: function () {
-           return nextIndex < array.length ? {
+           return nextIndex < array.length ? {
                value: array[nextIndex++],
                done: false
            } : {
@@ -254,11 +261,12 @@ let it = makeIterator(['哟', '呀']);
 console.log(it.next().value); // '哟'
 console.log(it.next().value); // '呀'
 console.log(it.next().done);  // true
-
+``` -

无穷迭代器

+### 无穷迭代器 -
function idMaker() {
+```js
+function idMaker() {
     let index = 0;
     return {
        next: function() {
@@ -276,14 +284,15 @@ console.log(it.next().value); // 0
 console.log(it.next().value); // 1
 console.log(it.next().value); // 2
 // ...
-
+``` -

使用生成器

+### 使用生成器 -
function* makeSimpleGenerator(array) {
+```js
+function* makeSimpleGenerator(array) {
     let nextIndex = 0;
 
-    while(nextIndex < array.length) {
+    while(nextIndex < array.length) {
         yield array[nextIndex++];
     }
 }
@@ -309,11 +318,12 @@ console.log(gen.next().value); // 0
 console.log(gen.next().value); // 1
 console.log(gen.next().value); // 2
 // ...
-
+``` -

ES2015 类 class 中的迭代器

+### ES2015 类 class 中的迭代器 -
class SimpleClass {
+```js
+class SimpleClass {
   constructor(data) {
     this.data = data
   }
@@ -325,8 +335,8 @@ console.log(gen.next().value); // 2
     let index = 0;
 
     return {
-      next: () => {
-        if (index < this.data.length) {
+      next: () => {
+        if (index < this.data.length) {
           return {value: this.data[index++], done: false}
         } else {
           return {done: true}
@@ -341,13 +351,14 @@ const simple = new SimpleClass([1,2,3,4,5])
 for (const val of simple) {
   console.log(val)   // 1 2 3 4 5
 }
-
+``` -

生成器对象到底是一个迭代器，还是一个可迭代对象？

+## 生成器对象到底是一个迭代器，还是一个可迭代对象？ -

{{jsxref("Generator", "生成器")}}对象既是迭代器，也是可迭代对象：

+{{jsxref("Generator", "生成器")}}对象既是迭代器，也是可迭代对象： -
let aGeneratorObject = function* (){
+```js
+let aGeneratorObject = function* (){
     yield 1;
     yield 2;
     yield 3;
@@ -366,10 +377,9 @@ aGeneratorObject[Symbol.iterator]() === aGeneratorObject;
 // 返回 [1, 2, 3]
 
 console.log(Symbol.iterator in aGeneratorObject)
-// 返回 true，因为 @@iterator 方法是 aGeneratorObject 的一个属性
+// 返回 true，因为 @@iterator 方法是 aGeneratorObject 的一个属性 +``` -

参见

+## 参见 -
    -
  • 若想了解更多有关 ES2015 生成器的信息，请参考 {{jsxref("Statements/function*", "the function*")}} 的文档。
    • -
+- 若想了解更多有关 ES2015 生成器的信息，请参考 {{jsxref("Statements/function*", "the function*")}} 的文档。 diff --git a/files/zh-cn/web/javascript/reference/lexical_grammar/index.md b/files/zh-cn/web/javascript/reference/lexical_grammar/index.md index 7b1411222bb7c7..490ef289562d69 100644 --- a/files/zh-cn/web/javascript/reference/lexical_grammar/index.md +++ b/files/zh-cn/web/javascript/reference/lexical_grammar/index.md @@ -125,9 +125,9 @@ Hashbang 注释指定特定 JavaScript 解释器的路径要用于执行脚本 console.log("Hello world"); ``` -> **备注：**：JavaScript 中的 hashbang 注释模仿 [Unix 中的 shebangs]()，用于指定适当的解释器运行文件。 +> **备注：** JavaScript 中的 hashbang 注释模仿 [Unix 中的 shebangs]()，用于指定适当的解释器运行文件。 -> **警告：**尽管在 hashbang 注释之前的 [BOM](https://en.wikipedia.org/wiki/Byte_order_mark) 在浏览器中能工作，但不建议在具有 hashbang 的脚本中使用 BOM。当您尝试在 Unix/Linux 中运行脚本时，有 BOM 将不工作。因此，如果要直接从 shell 运行脚本，请使用没有 BOM 的 UTF-8。 +> **警告：** 尽管在 hashbang 注释之前的 [BOM](https://en.wikipedia.org/wiki/Byte_order_mark) 在浏览器中能工作，但不建议在具有 hashbang 的脚本中使用 BOM。当您尝试在 Unix/Linux 中运行脚本时，有 BOM 将不工作。因此，如果要直接从 shell 运行脚本，请使用没有 BOM 的 UTF-8。 您只能使用 `#!` 注释样式以指定 JavaScript 解释器。在所有其他情况下，只需使用 `//` 注释（或多行注释）。 diff --git a/files/zh-cn/web/javascript/reference/operators/delete/index.md b/files/zh-cn/web/javascript/reference/operators/delete/index.md index f98782133711d0..b1a63ca9e67e9d 100644 --- a/files/zh-cn/web/javascript/reference/operators/delete/index.md +++ b/files/zh-cn/web/javascript/reference/operators/delete/index.md @@ -132,7 +132,7 @@ function func(param) { console.log(delete func); // false ``` -> **备注：**下文在英文原版中已删除 +> **备注：** 下文在英文原版中已删除 任何使用 var 声明的变量都会被标记为不可设置的。在下面的例子中，salary 是不可设置的以及不能被删除的。在非严格模式下，下面的 delete 操作将会返回 false。 diff --git a/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md b/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md index 1cd6b905ada452..858c61f4ba0411 100644 --- a/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md +++ b/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md @@ -208,7 +208,7 @@ var a, b; ({a, b} = {a: 1, b: 2}); ``` -> **备注：**赋值语句周围的圆括号 `( ... )` 在使用对象字面量无声明解构赋值时是必须的。 +> **备注：** 赋值语句周围的圆括号 `( ... )` 在使用对象字面量无声明解构赋值时是必须的。 > > `{a, b} = {a: 1, b: 2}` 不是有效的独立语法，因为左边的 `{a, b}` 被认为是一个块而不是对象字面量。 > @@ -285,7 +285,7 @@ drawES2015Chart({ }); ``` -> **备注：**在上面的 **`drawES2015Chart`** 的函数签名中，解构的左手边被分配给右手边的空对象字面值：`{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}`。你也可以在没有右侧分配的情况下编写函数。但是，如果你忽略了右边的赋值，那么函数会在被调用的时候查找至少一个被提供的参数，而在当前的形式下，你可以直接调用 **`drawES2015Chart()`** 而不提供任何参数。如果你希望能够在不提供任何参数的情况下调用该函数，则当前的设计非常有用，而另一种方法在您确保将对象传递给函数时非常有用。 +> **备注：** 在上面的 **`drawES2015Chart`** 的函数签名中，解构的左手边被分配给右手边的空对象字面值：`{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}`。你也可以在没有右侧分配的情况下编写函数。但是，如果你忽略了右边的赋值，那么函数会在被调用的时候查找至少一个被提供的参数，而在当前的形式下，你可以直接调用 **`drawES2015Chart()`** 而不提供任何参数。如果你希望能够在不提供任何参数的情况下调用该函数，则当前的设计非常有用，而另一种方法在您确保将对象传递给函数时非常有用。 ### 解构嵌套对象和数组 diff --git a/files/zh-cn/web/javascript/reference/operators/exponentiation/index.md b/files/zh-cn/web/javascript/reference/operators/exponentiation/index.md index fd73ece00b03e6..12c8f06090effd 100644 --- a/files/zh-cn/web/javascript/reference/operators/exponentiation/index.md +++ b/files/zh-cn/web/javascript/reference/operators/exponentiation/index.md @@ -8,85 +8,88 @@ tags: - 运算符 translation_of: Web/JavaScript/Reference/Operators/Exponentiation --- -
{{jsSidebar("Operators")}}
+{{jsSidebar("Operators")}} -

求幂运算符（**）返回将第一个操作数加到第二个操作数的幂的结果。它等效于Math.pow，不同之处在于它也接受 BigInts 作为操作数。

+求幂运算符（`**`）返回将第一个操作数加到第二个操作数的幂的结果。它等效于`Math.pow`，不同之处在于它也接受 BigInts 作为操作数。 -
{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}
+{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}} +## 语法 +```plain +Operator: var1 ** var2 +``` -

语法

+## 简介 -
Operator: var1 ** var2
-
+求幂运算符是是**右结合的**: `a ** b ** c` 等于 `a ** (b ** c)`. -

简介

+在大多数语言里，比如 PHP、Python 等那些有一个幂运算符 (`**`) 的语言，幂运算符被定义有一个比一元运算符，比如一元的 `+` 和一元的 `-` 更高的运算顺序，但有一些例外。在 Bash 语言里，`**` 运算符被定义有一个比一元运算符更低的运算顺序。 -

求幂运算符是是右结合的: a ** b ** c 等于 a ** (b ** c).

+在 JavaScript 里，你不可能写出一个不明确的求幂表达式。这就是说，你不能立刻将一个一元运算符（`+/-/~/!/delete/void/typeof`）放在基数前，这样做只会导致一个语法错误。 -

在大多数语言里，比如 PHP、Python 等那些有一个幂运算符 (**) 的语言，幂运算符被定义有一个比一元运算符，比如一元的 + 和一元的 - 更高的运算顺序，但有一些例外。在 Bash 语言里，** 运算符被定义有一个比一元运算符更低的运算顺序。

- -

在 JavaScript 里，你不可能写出一个不明确的求幂表达式。这就是说，你不能立刻将一个一元运算符（+/-/~/!/delete/void/typeof）放在基数前，这样做只会导致一个语法错误。

- -
-2 ** 2;
+```js
+-2 ** 2;
 // 4 in Bash, -4 in other languages.
 // This is invalid in JavaScript, as the operation is ambiguous.
 
 
 -(2 ** 2);
 // -4 in JavaScript and the author's intention is unambiguous.
-
+``` -

注意有些编程语言用扬抑符 ^ 做乘方运算，但是 JavaScript 将这个符号作为了XOR 位逻辑运算符。

+注意有些编程语言用扬抑符 ^ 做乘方运算，但是 JavaScript 将这个符号作为了[XOR 位逻辑运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR)。 -

例子

+## 例子 -

基本求幂

+### 基本求幂 -
2 ** 3   // 8
+```js
+2 ** 3   // 8
 3 ** 2   // 9
 3 ** 2.5 // 15.588457268119896
 10 ** -1 // 0.1
 NaN ** 2 // NaN
-
+``` -

结合

+### 结合 -
2 ** 3 ** 2   // 512
+```js
+2 ** 3 ** 2   // 512
 2 ** (3 ** 2) // 512
-(2 ** 3) ** 2 // 64
+(2 ** 3) ** 2 // 64 +``` -

与一元运算符的用法

+### 与一元运算符的用法 -

取求幂表达式的值的相反数：

+取求幂表达式的值的相反数： -
-(2 ** 2) // -4
-
+```js +-(2 ** 2) // -4 +``` -

将求幂表达式的底数转化为一个负数：

+将求幂表达式的底数转化为一个负数： -
(-2) ** 2 // 4
-
+```js +(-2) ** 2 // 4 +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

See also

+## See also - +- [Addition operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Addition) +- [Subtraction operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Division operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Division) +- [Multiplication operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Remainder operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Increment operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Increment) +- [Decrement operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Unary negation operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Unary plus operator](/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/zh-cn/web/javascript/reference/operators/instanceof/index.md b/files/zh-cn/web/javascript/reference/operators/instanceof/index.md index 6ecd0b5dc90df3..610e1100f737ba 100644 --- a/files/zh-cn/web/javascript/reference/operators/instanceof/index.md +++ b/files/zh-cn/web/javascript/reference/operators/instanceof/index.md @@ -72,8 +72,7 @@ o3 instanceof C; // true 因为 C.prototype 现在在 o3 的原型链上 比如检测一个 `Nodes` 在另一个窗口中是不是 `SVGElement`，你可以使用`myNode instanceof myNode.ownerDocument.defaultView.SVGElement` -> **备注：** -> 在代码中使用 XPCOM `instanceof` 有特殊影响：如果查询接口成功执行后，`obj instanceof` _`xpcomInterface`_ (e.g. `Components.interfaces.nsIFile`) 调用`obj.QueryInterface(xpcomInterface)` 并且返回 `true` 。这种调用的副作用是在一次成功的 `instanceof` 测试后，你可以在 `obj` 上使用`xpcomInterface` 的属性。这与标准的 `JavaScript` 全局变量不同，即使 `obj` 来自不同的作用域，`obj instanceof xpcomInterface` 也可以按预期产生作用。 +> **备注：** 在代码中使用 XPCOM `instanceof` 有特殊影响：如果查询接口成功执行后，`obj instanceof` _`xpcomInterface`_ (e.g. `Components.interfaces.nsIFile`) 调用`obj.QueryInterface(xpcomInterface)` 并且返回 `true` 。这种调用的副作用是在一次成功的 `instanceof` 测试后，你可以在 `obj` 上使用`xpcomInterface` 的属性。这与标准的 `JavaScript` 全局变量不同，即使 `obj` 来自不同的作用域，`obj instanceof xpcomInterface` 也可以按预期产生作用。 ## 示例 diff --git a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md index 63b429f99c5368..210e538bf205cc 100644 --- a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md +++ b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md @@ -68,9 +68,9 @@ let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.secon let result = someInterface.customMethod?.(); ``` -> **备注：**如果存在一个属性名且不是函数，使用 `?.` 仍然会产生一个 {{JSxRef("TypeError")}} 异常 (`x.y is not a function`). +> **备注：** 如果存在一个属性名且不是函数，使用 `?.` 仍然会产生一个 {{JSxRef("TypeError")}} 异常 (` x.y`` is not a function`). -> **备注：**如果 `someInterface` 自身是 `null` 或者 `undefined` ，异常 {{JSxRef("TypeError")}} 仍会被抛出 `someInterface is null` 如果你希望允许 `someInterface` 也为 `null` 或者 `undefined` ，那么你需要像这样写 `someInterface?.customMethod?.()` +> **备注：** 如果 `someInterface` 自身是 `null` 或者 `undefined` ，异常 {{JSxRef("TypeError")}} 仍会被抛出 `someInterface is null` 如果你希望允许 `someInterface` 也为 `null` 或者 `undefined` ，那么你需要像这样写 `someInterface?.customMethod?.()` #### 处理可选的回调函数或者事件处理器 diff --git a/files/zh-cn/web/javascript/reference/operators/this/index.md b/files/zh-cn/web/javascript/reference/operators/this/index.md index 7cef263fd6ed8b..cb69c3eba48ada 100644 --- a/files/zh-cn/web/javascript/reference/operators/this/index.md +++ b/files/zh-cn/web/javascript/reference/operators/this/index.md @@ -46,7 +46,7 @@ console.log(window.b) // "MDN" console.log(b) // "MDN" ``` -> **备注：**你可以使用 {{jsxref("globalThis")}} 获取全局对象，无论你的代码是否在当前上下文运行。 +> **备注：** 你可以使用 {{jsxref("globalThis")}} 获取全局对象，无论你的代码是否在当前上下文运行。 ### 函数上下文 @@ -76,7 +76,7 @@ function f2(){ f2() === undefined; // true ``` -> **备注：**在第二个例子中，`this` 应是 [undefined](/zh-CN/docs/Glossary/undefined)，因为 `f2` 是被直接调用的，而不是作为对象的属性或方法调用的（如 `window.f2()`）。有一些浏览器最初在支持[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)时没有正确实现这个功能，于是它们错误地返回了`window`对象。 +> **备注：** 在第二个例子中，`this` 应是 [undefined](/zh-CN/docs/Glossary/undefined)，因为 `f2` 是被直接调用的，而不是作为对象的属性或方法调用的（如 `window.f2()`）。有一些浏览器最初在支持[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)时没有正确实现这个功能，于是它们错误地返回了`window`对象。 如果要想把 `this` 的值从一个环境传到另一个，就要用 [`call`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call) 或者[`apply`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 方法，如下方的示例所示。 @@ -100,7 +100,7 @@ class Example { new Example(); // ['constructor', 'first', 'second'] ``` -> **备注：**静态方法不是 this 的属性，它们只是类自身的属性。 +> **备注：** 静态方法不是 this 的属性，它们只是类自身的属性。 ### 派生类 @@ -110,7 +110,7 @@ new Example(); // ['constructor', 'first', 'second'] this = new Base(); ``` -> **警告：**在调用 `super()` 之前引用 `this` 会抛出错误。 +> **警告：** 在调用 `super()` 之前引用 `this` 会抛出错误。 派生类不能在调用 `super()` 之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数。 @@ -210,7 +210,7 @@ var foo = (() => this); console.log(foo() === globalObject); // true ``` -> **备注：**如果将`this`传递给`call`、`bind`、或者`apply`来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（`thisArg`）应该设置为`null`。 +> **备注：** 如果将`this`传递给`call`、`bind`、或者`apply`来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（`thisArg`）应该设置为`null`。 ```js // 接着上面的代码 @@ -347,7 +347,7 @@ console.log(o.average, o.sum); // logs 2, 6 当一个函数用作构造函数时（使用[new](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)关键字），它的`this`被绑定到正在构造的新对象。 -> **备注：**虽然构造函数返回的默认值是 `this` 所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回 `this` 对象）。 +> **备注：** 虽然构造函数返回的默认值是 `this` 所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回 `this` 对象）。 ```js /* diff --git a/files/zh-cn/web/javascript/reference/statements/async_function/index.md b/files/zh-cn/web/javascript/reference/statements/async_function/index.md index 477cce2ff77bb6..d6bd16dbd994c9 100644 --- a/files/zh-cn/web/javascript/reference/statements/async_function/index.md +++ b/files/zh-cn/web/javascript/reference/statements/async_function/index.md @@ -42,9 +42,9 @@ async function name([param[, param[, ... param]]]) { async 函数可能包含 0 个或者多个{{jsxref("Operators/await", "await")}}表达式。await 表达式会暂停整个 async 函数的执行进程并出让其控制权，只有当其等待的基于 promise 的异步操作被兑现或被拒绝之后才会恢复进程。promise 的解决值会被当作该 await 表达式的返回值。使用`async` / `await`关键字就可以在异步代码中使用普通的`try` / `catch`代码块。 -> **备注：**`await`关键字只在 async 函数内有效。如果你在 async 函数体之外使用它，就会抛出语法错误 {{jsxref("SyntaxError")}} 。 +> **备注：** `await`关键字只在 async 函数内有效。如果你在 async 函数体之外使用它，就会抛出语法错误 {{jsxref("SyntaxError")}} 。 -> **备注：**`async`/`await`的目的为了简化使用基于 promise 的 API 时所需的语法。`async`/`await`的行为就好像搭配使用了生成器和 promise。 +> **备注：** `async`/`await`的目的为了简化使用基于 promise 的 API 时所需的语法。`async`/`await`的行为就好像搭配使用了生成器和 promise。 async 函数一定会返回一个 promise 对象。如果一个 async 函数的返回值看起来不是 promise，那么它将会被隐式地包装在一个 promise 中。 @@ -197,31 +197,27 @@ setTimeout(parallel, 10000); // truly parallel: after 1 second, logs "fast", the setTimeout(parallelPromise, 13000); // same as parallel ``` -> **备注：** -> -> #### `await` and parallelism(并行) -> -> 在`sequentialStart`中，程序在第一个`await`停留了 2 秒，然后又在第二个`await`停留了 1 秒。直到第一个计时器结束后，第二个计时器才被创建。程序需要 3 秒执行完毕。 -> -> 在 `concurrentStart`中，两个计时器被同时创建，然后执行`await`。这两个计时器同时运行，这意味着程序完成运行只需要 2 秒，而不是 3 秒，即最慢的计时器的时间。 -> -> 但是 `await` 仍旧是顺序执行的，第二个 `await` 还是得等待第一个执行完。在这个例子中，这使得先运行结束的输出出现在最慢的输出之后。 -> -> 如果你希望并行执行两个或更多的任务，你必须像在`parallel`中一样使用`await Promise.all([job1(), job2()])`。 - -> **警告：** -> -> #### `async`/`await 和`Promise#then 对比以及错误处理 -> -> 大多数 async 函数也可以使用 Promises 编写。但是，在错误处理方面，async 函数更容易捕获异常错误 -> -> 上面例子中的`concurrentStart`函数和`concurrentPromise`函数在功能上都是等效的。在`concurrentStart`函数中，如果任一`await`ed 调用失败，它将自动捕获异常，async 函数执行中断，并通过隐式返回 Promise 将错误传递给调用者。 -> -> 在 Promise 例子中这种情况同样会发生，该函数必须负责返回一个捕获函数完成的`Promise`。在`concurrentPromise`函数中，这意味着它从`Promise.all([]).then()`返回一个 Promise。事实上，在此示例的先前版本忘记了这样做！ -> -> 但是，async 函数仍有可能然可能错误地忽略错误。 -> 以`parallel` async 函数为例。 如果它没有等待`await`（或返回）`Promise.all([])`调用的结果，则不会传播任何错误。 -> 虽然`parallelPromise`函数示例看起来很简单，但它根本不会处理错误！ 这样做需要一个类似于 `return Promise.all([])`处理方式。 +#### `await` and parallelism(并行) + +在`sequentialStart`中，程序在第一个`await`停留了 2 秒，然后又在第二个`await`停留了 1 秒。直到第一个计时器结束后，第二个计时器才被创建。程序需要 3 秒执行完毕。 + +在 `concurrentStart`中，两个计时器被同时创建，然后执行`await`。这两个计时器同时运行，这意味着程序完成运行只需要 2 秒，而不是 3 秒，即最慢的计时器的时间。 + +但是 `await` 仍旧是顺序执行的，第二个 `await` 还是得等待第一个执行完。在这个例子中，这使得先运行结束的输出出现在最慢的输出之后。 + +如果你希望并行执行两个或更多的任务，你必须像在`parallel`中一样使用`await Promise.all([job1(), job2()])`。 + +#### `async`/`await 和`Promise#then 对比以及错误处理 + +大多数 async 函数也可以使用 Promises 编写。但是，在错误处理方面，async 函数更容易捕获异常错误 + +上面例子中的`concurrentStart`函数和`concurrentPromise`函数在功能上都是等效的。在`concurrentStart`函数中，如果任一`await`ed 调用失败，它将自动捕获异常，async 函数执行中断，并通过隐式返回 Promise 将错误传递给调用者。 + +在 Promise 例子中这种情况同样会发生，该函数必须负责返回一个捕获函数完成的`Promise`。在`concurrentPromise`函数中，这意味着它从`Promise.all([]).then()`返回一个 Promise。事实上，在此示例的先前版本忘记了这样做！ + +但是，async 函数仍有可能然可能错误地忽略错误。 +以`parallel` async 函数为例。 如果它没有等待`await`（或返回）`Promise.all([])`调用的结果，则不会传播任何错误。 +虽然`parallelPromise`函数示例看起来很简单，但它根本不会处理错误！ 这样做需要一个类似于 `return Promise.all([])`处理方式。 ### 使用 async 函数重写 promise 链 @@ -255,29 +251,27 @@ async function getProcessedData(url) { 注意，在上述示例中，`return` 语句中没有 `await` 操作符，因为 `async function` 的返回值将被隐式地传递给 `{{jsxref("Promise.resolve")}}`。 -> **备注：** -> -> 返回值`隐式的传递给`{{jsxref("Promise.resolve")}}，并不意味着`return await promiseValue;和 return promiseValue;`在功能上相同。 -> -> 看下下面重写的上面代码，在`processDataInWorker`抛出异常时返回了 null： -> -> ```plain -> async function getProcessedData(url) { -> let v; -> try { -> v = await downloadData(url); -> } catch(e) { -> v = await downloadFallbackData(url); -> } -> try { -> return await processDataInWorker(v); // 注意 `return await` 和单独 `return` 的比较 -> } catch (e) { -> return null; -> } -> } -> ``` -> -> 简单地写上`return processDataInworker(v);将导致在 processDataInWorker(v)`出错时 function 返回值为{{jsxref("Promise")}}`而不是`返回 null。`return foo;`和`return await foo;`，有一些细微的差异：`return foo;`不管`foo`是 promise 还是 rejects 都将会直接返回`foo。相反地，`如果`foo`是一个{{jsxref("Promise")}}，`return await foo;`将等待`foo`执行 (resolve) 或拒绝 (reject)，如果是拒绝，将会在返回前抛出异常。 +返回值`隐式的传递给`{{jsxref("Promise.resolve")}}，并不意味着`return await promiseValue;和 return promiseValue;`在功能上相同。 + +看下下面重写的上面代码，在`processDataInWorker`抛出异常时返回了 null： + +```js +async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch(e) { + v = await downloadFallbackData(url); + } + try { + return await processDataInWorker(v); // 注意 `return await` 和单独 `return` 的比较 + } catch (e) { + return null; + } +} +``` + +简单地写上`return processDataInworker(v);` 将导致在 `processDataInWorker(v)` 出错时 function 返回值为{{jsxref("Promise")}}而不是返回 `null`。`return foo;` 和 `return await foo;`，有一些细微的差异：`return foo;`不管`foo`是 promise 还是 rejects 都将会直接返回`foo`。相反地，如果`foo`是一个{{jsxref("Promise")}}，`return await foo;`将等待`foo`执行 (resolve) 或拒绝 (reject)，如果是拒绝，将会在返回前抛出异常。 ## 规范 diff --git a/files/zh-cn/web/javascript/reference/statements/export/index.md b/files/zh-cn/web/javascript/reference/statements/export/index.md index 1c754eef493ca3..61fbc155c5d065 100644 --- a/files/zh-cn/web/javascript/reference/statements/export/index.md +++ b/files/zh-cn/web/javascript/reference/statements/export/index.md @@ -127,7 +127,7 @@ export { function1, function2 }; 但这里的 `function1` 和 `function2` 在当前模块中变得不可用。 -> **备注：**尽管与 import 等效，但以下语法在语法上无效： +> **备注：** 尽管与 import 等效，但以下语法在语法上无效： ```js import DefaultExport from 'bar.js'; // 有效的 diff --git a/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md b/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md index 043b78f03d752a..86d6935631860b 100644 --- a/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md +++ b/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Statements/for-await...of 类似于 {{jsxref("Operators/await", "await")}} 运算符一样，该语句只能在一个{{jsxref("Statements/async_function", "async function", "异步函数", 1)}} 内部使用。 -> **备注：**`for await...of` 不适用于不是异步可迭代的异步迭代器。 +> **备注：** `for await...of` 不适用于不是异步可迭代的异步迭代器。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/statements/for...in/index.md b/files/zh-cn/web/javascript/reference/statements/for...in/index.md index 095827cb22fd20..ad55bd3527cc56 100644 --- a/files/zh-cn/web/javascript/reference/statements/for...in/index.md +++ b/files/zh-cn/web/javascript/reference/statements/for...in/index.md @@ -24,7 +24,7 @@ for (variable in object) ### 数组迭代和 `for...in` -> **备注：**`for...in`不应该用于迭代一个关注索引顺序的 {{jsxref("Array")}}。 +> **备注：** `for...in`不应该用于迭代一个关注索引顺序的 {{jsxref("Array")}}。 ### 仅迭代自身的属性 diff --git a/files/zh-cn/web/javascript/reference/statements/label/index.md b/files/zh-cn/web/javascript/reference/statements/label/index.md index 60d998cc73ce68..f5ff066a79d9dd 100644 --- a/files/zh-cn/web/javascript/reference/statements/label/index.md +++ b/files/zh-cn/web/javascript/reference/statements/label/index.md @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Statements/label {{EmbedInteractiveExample("pages/js/statement-label.html")}} -> **备注：**使用标记的循环或语句块非常罕见。通常情况下，可以使用函数调用而不是（基于标记的）循环跳转。 +> **备注：** 使用标记的循环或语句块非常罕见。通常情况下，可以使用函数调用而不是（基于标记的）循环跳转。 ## 语法 diff --git a/files/zh-cn/web/javascript/reference/statements/return/index.md b/files/zh-cn/web/javascript/reference/statements/return/index.md index 3b393de7eb3de7..5fb1df2210bbd2 100644 --- a/files/zh-cn/web/javascript/reference/statements/return/index.md +++ b/files/zh-cn/web/javascript/reference/statements/return/index.md @@ -61,7 +61,7 @@ a + b; 控制台会警告“unreachable code after return statement”。 -> **备注：**从 Gecko 40 {{geckoRelease(40)}}开始，如果在一个 return 语句后发现无法访问的代码，控制台将会显示一个警告。 +> **备注：** 从 Gecko 40 {{geckoRelease(40)}}开始，如果在一个 return 语句后发现无法访问的代码，控制台将会显示一个警告。 ## 示例 diff --git a/files/zh-cn/web/javascript/reference/statements/with/index.md b/files/zh-cn/web/javascript/reference/statements/with/index.md index 7ee9344ac6613e..ed797cd0d10ee4 100644 --- a/files/zh-cn/web/javascript/reference/statements/with/index.md +++ b/files/zh-cn/web/javascript/reference/statements/with/index.md @@ -7,7 +7,7 @@ tags: - Statement translation_of: Web/JavaScript/Reference/Statements/with --- -> **警告：**不建议使用`with`语句，因为它可能是混淆错误和兼容性问题的根源。有关详细信息，请参阅下面“描述”一节中的“语意不明的弊端”部分。 +> **警告：** 不建议使用`with`语句，因为它可能是混淆错误和兼容性问题的根源。有关详细信息，请参阅下面“描述”一节中的“语意不明的弊端”部分。 {{jsSidebar("Statements")}}**with 语句** 扩展一个语句的作用域链。 @@ -28,7 +28,7 @@ with (expression) { JavaScript 查找某个未使用命名空间的变量时，会通过作用域链来查找，作用域链是跟执行代码的 context 或者包含这个变量的函数有关。'with'语句将某个对象添加到作用域链的顶部，如果在 statement 中有某个未使用命名空间的变量，跟作用域链中的某个属性同名，则这个变量将指向这个属性值。如果沒有同名的属性，则将拋出{{jsxref("ReferenceError")}}异常。 -> **备注：**不推荐使用`with`，在 ECMAScript 5 [严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中该标签已被禁止。推荐的替代方案是声明一个临时变量来承载你所需要的属性。 +> **备注：** 不推荐使用`with`，在 ECMAScript 5 [严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中该标签已被禁止。推荐的替代方案是声明一个临时变量来承载你所需要的属性。 ### 性能方面的利与弊 diff --git a/files/zh-cn/web/javascript/reference/strict_mode/index.md b/files/zh-cn/web/javascript/reference/strict_mode/index.md index d17627a707a61e..88dd60ac67bcca 100644 --- a/files/zh-cn/web/javascript/reference/strict_mode/index.md +++ b/files/zh-cn/web/javascript/reference/strict_mode/index.md @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode --- {{JsSidebar("More")}} -> **备注：**有时你会看到非严格模式，被称为“**[sloppy mode](https://developer.mozilla.org/docs/Glossary/Sloppy_mode)**”。这不是一个官方术语，但以防万一，你应该意识到这一点。 +> **备注：** 有时你会看到非严格模式，被称为“**[sloppy mode](https://developer.mozilla.org/docs/Glossary/Sloppy_mode)**”。这不是一个官方术语，但以防万一，你应该意识到这一点。 [ECMAScript 5](http://www.ecma-international.org/publications/standards/Ecma-262.htm)的**严格模式**是采用具有限制性 JavaScript 变体的一种方式，从而使代码隐式地脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。不支持严格模式与支持严格模式的浏览器在执行严格模式代码时会采用不同行为。所以在没有对运行环境展开**特性测试**来验证对于严格模式相关方面支持的情况下，就算采用了严格模式也不一定会取得预期效果。严格模式代码和非严格模式代码可以共存，因此项目脚本可以渐进式地采用严格模式。严格模式对正常的 JavaScript 语义做了一些更改。 @@ -102,7 +102,7 @@ delete Object.prototype; // 抛出 TypeError 错误 第四，在 Gecko 版本 34 之前，严格模式要求一个对象内的所有属性名在对象内必须唯一。正常模式下重名属性是允许的，最后一个重名的属性决定其属性值。因为只有最后一个属性起作用，当代码要去改变属性值而不是修改最后一个重名属性的时候，复制这个对象就产生一连串的 bug。在严格模式下，重名属性被认为是语法错误： -> **备注：**这个问题在 ECMAScript6 中已经不复存在 ({{bug(1041128)}})。 +> **备注：** 这个问题在 ECMAScript6 中已经不复存在 ({{bug(1041128)}})。 ```js "use strict"; diff --git a/files/zh-cn/web/javascript/typed_arrays/index.md b/files/zh-cn/web/javascript/typed_arrays/index.md index a875793681c508..0375958c54f182 100644 --- a/files/zh-cn/web/javascript/typed_arrays/index.md +++ b/files/zh-cn/web/javascript/typed_arrays/index.md @@ -129,7 +129,7 @@ var amountDueView = new Float32Array(buffer, 20, 1); 现在你就可以通过`amountDueView[0]`的方式访问数量。 -> **备注：**C 语言结构体的[数据对齐](http://en.wikipedia.org/wiki/Data_structure_alignment)与平台相关。因此需要防范和考虑不同平台的字节填充对齐。 +> **备注：** C 语言结构体的[数据对齐](http://en.wikipedia.org/wiki/Data_structure_alignment)与平台相关。因此需要防范和考虑不同平台的字节填充对齐。 ### 转换为普通数组 diff --git a/files/zh-cn/web/manifest/background_color/index.md b/files/zh-cn/web/manifest/background_color/index.md index d85c707488b50d..eba7c661663265 100644 --- a/files/zh-cn/web/manifest/background_color/index.md +++ b/files/zh-cn/web/manifest/background_color/index.md @@ -3,47 +3,44 @@ title: background_color slug: Web/Manifest/background_color translation_of: Web/Manifest/background_color --- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}
+{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} - - - - - - - - - - + + + + + + + + + +
-
-

wobuhuisuanmin

-
- -
Type
- 		String
MandatoryNo
+

wobuhuisuanmin

+
Type
+ 		String
MandatoryNo
-

被装载其样式表之前的 background_color 构件限定了用于应用页的占位符的背景颜色来显示。此值用于由用户代理来绘制一个快捷方式的背景颜色，当样式表加载之前清单是可用的。

+被装载其样式表之前的 `background_color` 构件限定了用于应用页的占位符的背景颜色来显示。此值用于由用户代理来绘制一个快捷方式的背景颜色，当样式表加载之前清单是可用的。 -

（原文：The background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.）

+（原文：The background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.） -

因此，background_color 应于 {{cssxref("background-color")}}网站样式表中的 CSS 属性匹配，以在启动 Web 应用程序和加载网站内容之间进行平滑过渡。

+因此，`background_color` 应于 {{cssxref("background-color")}}网站样式表中的 CSS 属性匹配，以在启动 Web 应用程序和加载网站内容之间进行平滑过渡。 -

（原文：Therefore background_color should match the {{cssxref("background-color")}} CSS property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.）

+（原文：Therefore `background_color` should match the {{cssxref("background-color")}} CSS property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.） -
-

注意：该 background_color 构件仅用于在从网络或存储介质加载主样式表时改善用户体验。{{cssxref("background-color")}} 当渐进式 Web 应用程序样式表可用时，用户代理不会将其用作 CSS 属性。

-
+> **备注：** 该 `background_color` 构件仅用于在从网络或存储介质加载主样式表时改善用户体验。{{cssxref("background-color")}} 当渐进式 Web 应用程序样式表可用时，用户代理不会将其用作 CSS 属性。 -

实例

+## 实例 -
"background_color": "red"
+```json +"background_color": "red" +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} diff --git a/files/zh-cn/web/manifest/index.md b/files/zh-cn/web/manifest/index.md index 27bc0d1e66c2b8..a2384cbf1b92f1 100644 --- a/files/zh-cn/web/manifest/index.md +++ b/files/zh-cn/web/manifest/index.md @@ -7,19 +7,22 @@ tags: - web app manifest translation_of: Web/Manifest --- -

Web 应用程序清单在一个 JSON 文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将 Web 应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

+[Web 应用程序清单]()在一个 JSON 文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将 Web 应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。 -

Web 应用程序清单是被称为渐进式 Web 应用程序 (PWA)的 Web 技术集合的一部分，它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能，比如离线可用和接收推送通知。

+Web 应用程序清单是被称为[渐进式 Web 应用程序 (PWA)](/zh-CN/docs/Web/Apps/Progressive)的 Web 技术集合的一部分，它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能，比如离线可用和接收推送通知。 - +## 部署一个 manifest -

Web 应用程序清单部署在您的 HTML 页面中，使用在你的文件的头部的一个链接标记：

+Web 应用程序清单部署在您的 HTML 页面中，使用在你的文件的头部的一个链接标记： -
<link rel="manifest" href="/manifest.json">
+```html + +``` -

manifest 范例

+## manifest 范例 -
{
+```json
+{
   "name": "HackerWeb",
   "short_name": "HackerWeb",
   "start_url": ".",
@@ -57,95 +60,72 @@ translation_of: Web/Manifest
     "platform": "play",
     "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
   }]
-}
+} +``` -

成员

+## 成员 -

background_color

+### `background_color` -

为 web 应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载 manifest，浏览器可以用来绘制 web 应用程序的背景颜色。在启动 web 应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

+为 web 应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载 manifest，浏览器可以用来绘制 web 应用程序的背景颜色。在启动 web 应用程序和加载应用程序的内容之间创建了一个平滑的过渡。 -
"background_color": "red"
+```json +"background_color": "red" +``` -
-

注意：background_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。

-
+> **备注：** background_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。 -

description

+### `description` -

提供有关 Web 应用程序的一般描述。

+提供有关 Web 应用程序的一般描述。 -
"description": "The app that helps you find the best food in town!"
+```json +"description": "The app that helps you find the best food in town!" +``` -

dir

+### `dir` -

指定名称、短名称和描述成员的主文本方向。与 lang 一起配置，可以帮助正确显示右到左文本。

+指定名称、短名称和描述成员的主文本方向。与 lang 一起配置，可以帮助正确显示右到左文本。 -
"dir": "rtl",
+```json
+"dir": "rtl",
 "lang": "ar",
-"short_name": "أنا من التطبيق!"
- -

可选值：

- -
    -
  • ltr (由左到右)
    • -
  • rtl (由右到左)
    • -
  • auto (由浏览器自动判断。
    • -
- -
-

注意：当省略时，默认为 auto

-
- -

display

- -

定义开发人员对 Web 应用程序的首选显示模式。

- -
"display": "standalone"
- -

有效值：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
显示模式描述后备显示模式
fullscreen全屏显示，所有可用的显示区域都被使用，并且不显示状态栏{{Glossary("chrome")}}。standalone
standalone让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的 UI 元素，但是可以包括其他 UI 元素，例如状态栏。minimal-ui
minimal-ui该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。 样式因浏览器而异。browser
browser该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。 这是默认的设置。(None)
- -
-

Note: 您可以使用显示模式媒体功能，根据显示模式选择性地将 CSS 应用到您的应用程序。 这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。

-
- -

icons

- -

指定可在各种环境中用作应用程序图标的图像对象数组。 例如，它们可以用来在其他应用程序列表中表示 Web 应用程序，或者将 Web 应用程序与OS的任务切换器和/或系统偏好集成在一起。

- -
"icons": [
+"short_name": "أنا من التطبيق!"
+```
+
+可选值：
+
+- `ltr` (由左到右)
+- `rtl` (由右到左)
+- `auto` (由浏览器自动判断。
+
+> **备注：** 当省略时，默认为 auto
+
+### `display`
+
+定义开发人员对 Web 应用程序的首选显示模式。
+
+```json
+"display": "standalone"
+```
+
+有效值：
+
+| 显示模式     | 描述                                                                                                                                                                                   | 后备显示模式 |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `fullscreen` | 全屏显示，所有可用的显示区域都被使用，并且不显示状态栏{{Glossary("chrome")}}。                                                                                                   | `standalone` |
+| `standalone` | 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的 UI 元素，但是可以包括其他 UI 元素，例如状态栏。 | `minimal-ui` |
+| `minimal-ui` | 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。 样式因浏览器而异。                                                                                                        | `browser`    |
+| `browser`    | 该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。 这是默认的设置。                                                                                              | (None)       |
+
+> **备注：** 您可以使用显示模式媒体功能，根据[显示模式](/docs/Web/CSS/@media/display-mode)选择性地将 CSS 应用到您的应用程序。 这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。
+
+### `icons`
+
+指定可在各种环境中用作应用程序图标的图像对象数组。 例如，它们可以用来在其他应用程序列表中表示 Web 应用程序，或者将 Web 应用程序与 OS 的任务切换器和/或系统偏好集成在一起。
+
+```json
+"icons": [
   {
     "src": "icon/lowres.webp",
     "sizes": "48x48",
@@ -163,79 +143,68 @@ translation_of: Web/Manifest
     "src": "icon/hd_hi.svg",
     "sizes": "72x72"
   }
-]
+] +``` -

图像对象可能包含以下值：

+图像对象可能包含以下值： - - - - - - - - - - - - - - - - - - - - - -
字段描述
sizes包含空格分隔的图像尺寸的字符串。
src图像文件的路径。 如果src是一个相对 URL，则基本 URL 将是 manifest 的 URL。
type提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。
+| 字段 | 描述 | +| ------- | ------------------------------------------------------------------------------ | +| `sizes` | 包含空格分隔的图像尺寸的字符串。 | +| `src` | 图像文件的路径。 如果`src`是一个相对 URL，则基本 URL 将是 manifest 的 URL。 | +| `type` | 提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。 | -

lang

+### `lang` -

指定name和short_name成员中的值的主要语言。 该值是包含单个语言标记的字符串。

+指定`name`和`short_name`成员中的值的主要语言。 该值是包含单个语言标记的字符串。 -
"lang": "en-US"
+```json +"lang": "en-US" +``` -

name

+### `name` -

为应用程序提供一个人类可读的名称，例如在其他应用程序的列表中或作为图标的标签显示给用户。

+为应用程序提供一个人类可读的名称，例如在其他应用程序的列表中或作为图标的标签显示给用户。 -
"name": "Google I/O 2017"
+```json +"name": "Google I/O 2017" +``` -

orientation

+### `orientation` -

定义所有 Web 应用程序顶级的默认方向 {{Glossary("Browsing context", "browsing contexts")}}.

+定义所有 Web 应用程序顶级的默认方向 {{Glossary("Browsing context", "browsing contexts")}}. -
​​"orientation": "portrait-primary"
+```json +​​"orientation": "portrait-primary" +``` -

方向可以是以下值之一：

+方向可以是以下值之一： -
    -
  • any
    • -
  • natural
    • -
  • landscape
    • -
  • landscape-primary
    • -
  • landscape-secondary
    • -
  • portrait
    • -
  • portrait-primary
    • -
  • portrait-secondary
    • -
+- `any` +- `natural` +- `landscape` +- `landscape-primary` +- `landscape-secondary` +- `portrait` +- `portrait-primary` +- `portrait-secondary` - +### `prefer_related_applications` -

指定一个布尔值，提示用户代理向用户指示指定的相关应用程序（请参见下文）可用，并建议通过 Web 应用程序。 只有当相关的本地应用程序确实提供了某些 Web 应用程序无法做到的事情时，才应该使用它。

+指定一个布尔值，提示用户代理向用户指示指定的相关应用程序（请参见下文）可用，并建议通过 Web 应用程序。 只有当相关的本地应用程序确实提供了某些 Web 应用程序无法做到的事情时，才应该使用它。 -
"prefer_related_applications": false
+```json +"prefer_related_applications": false +``` -
-

Note: 如果省略，默认设置为 false.

-
+> **备注：** 如果省略，默认设置为 `false`. - +### `related_applications` -

指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 - 例如可通过 Google Play Store 获取的原生 Android 应用程序。 这样的应用程序旨在替代提供类似或等同功能的 Web 应用程序 - 就像 Web 应用程序的本机应用程序版本一样。

+指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 - 例如可通过 Google Play Store 获取的原生 Android 应用程序。 这样的应用程序旨在替代提供类似或等同功能的 Web 应用程序 - 就像 Web 应用程序的本机应用程序版本一样。 -
"related_applications": [
+```json
+"related_applications": [
   {
     "platform": "play",
     "url": "https://play.google.com/store/apps/details?id=com.example.app1",
@@ -243,68 +212,59 @@ translation_of: Web/Manifest
   }, {
     "platform": "itunes",
     "url": "https://itunes.apple.com/app/example-app1/id123456789"
-  }]
+ }] +``` -

应用程序对象可能包含以下值：

+应用程序对象可能包含以下值： - - - - - - - - - - - - - - - - - - - - - -
MemberDescription
platform可以找到应用程序的平台。
url可以找到应用程序的 URL。
id用于表示指定平台上的应用程序的 ID。
+| Member | Description | +| ---------- | ----------------------------------- | +| `platform` | 可以找到应用程序的平台。 | +| `url` | 可以找到应用程序的 URL。 | +| `id` | 用于表示指定平台上的应用程序的 ID。 | -

scope

+### `scope` -

定义此 Web 应用程序的应用程序上下文的导航范围。 这基本上限制了 manifest 可以查看的网页。 如果用户在范围之外浏览应用程序，则返回到正常的网页。

+定义此 Web 应用程序的应用程序上下文的导航范围。 这基本上限制了 manifest 可以查看的网页。 如果用户在范围之外浏览应用程序，则返回到正常的网页。 -

如果scope是相对 URL，则基本 URL 将是 manifest 的 URL。

+如果`scope`是相对 URL，则基本 URL 将是 manifest 的 URL。 -
"scope": "/myapp/"
+```json +"scope": "/myapp/" +``` -

short_name

+### `short_name` -

为应用程序提供简短易读的名称。 这是为了在没有足够空间显示 Web 应用程序的全名时使用。

+为应用程序提供简短易读的名称。 这是为了在没有足够空间显示 Web 应用程序的全名时使用。 -
"short_name": "I/O 2017"
-
+```json +"short_name": "I/O 2017" +``` -

start_url

+### `start_url` -

指定用户从设备启动应用程序时加载的 URL。 如果以相对 URL 的形式给出，则基本 URL 将是 manifest 的 URL。

+指定用户从设备启动应用程序时加载的 URL。 如果以相对 URL 的形式给出，则基本 URL 将是 manifest 的 URL。 -
"start_url": "./?utm_source=web_app_manifest"
+```json +"start_url": "./?utm_source=web_app_manifest" +``` -

theme_color

+### `theme_color` -

定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式（例如，在 Android 的任务切换器上，主题颜色包围应用程序）。

+定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式（例如，在 Android 的任务切换器上，主题颜色包围应用程序）。 -
"theme_color": "aliceblue"
+```json +"theme_color": "aliceblue" +``` -

初始屏幕

+## 初始屏幕 -

在 Chrome 47 及更高版本中，从主屏幕启动的 Web 应用程序将显示启动画面。 这个启动画面是使用 Web 应用程序清单中的属性自动生成的，具体来说就是：name，background_color以及icons 中距设备最近 128dpi 的图标。

+在 Chrome 47 及更高版本中，从主屏幕启动的 Web 应用程序将显示启动画面。 这个启动画面是使用 Web 应用程序清单中的属性自动生成的，具体来说就是：`name`，`background_color`以及`icons` 中距设备最近 128dpi 的图标。 -

Mime 类型

+## Mime 类型 -

Manifests 应使用 application/manifest+json MIME 类型。但是，你不必非得这样做。

+Manifests 应使用 `application/manifest+json` MIME 类型。但是，你不必非得这样做。 -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/mathml/attribute/index.md b/files/zh-cn/web/mathml/attribute/index.md index 3d5656caa2d211..70d99a286f93cd 100644 --- a/files/zh-cn/web/mathml/attribute/index.md +++ b/files/zh-cn/web/mathml/attribute/index.md @@ -3,481 +3,100 @@ title: MathML attribute reference slug: Web/MathML/Attribute translation_of: Web/MathML/Attribute --- -

此页面是 MathML 属性的字母表。 每个属性的更多详细信息请看这里element pages。

+此页面是 MathML 属性的字母表。 每个属性的更多详细信息请看这里[element pages](/zh-CN/docs/MathML/Element)。 -

注意：

+注意： -
    -
  • MathML 的 {{ MathMLElement("mstyle") }} 和 {{ MathMLElement("math") }} 元素接受所有 MathML 的描述元素。
    • -
  • 请参阅 MathML 中值（values）和单位的注释值。
    • -
+- MathML 的 {{ MathMLElement("mstyle") }} 和 {{ MathMLElement("math") }} 元素接受所有 MathML 的描述元素。 +- 请参阅 MathML 中值（[values](/zh-CN/docs/MathML/Attributes/Values)）和单位的注释值。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
名（Name）元素接受的属性（Elements accepting attribute）描述（Description）
accent{{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }} -

布尔类型的值，指明操作符是否应该被视为 accent。

- -

原文：A Boolean value specifying whether the operator should be treated as an accent.

-
accentunder{{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }} -

布尔类型的值，指明操作符是否应该被视为 accent。

- -

原文：A Boolean value specifying whether the operator should be treated as an accent.

-
actiontype{{ MathMLElement("maction") }}字符串类型的值，指明元素发生的操作。
align{{ MathMLElement("mtable") }}
- {{ MathMLElement("munder") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}
- {{ MathMLElement("mstack") }}		Specifies different alignments of several elements (see element pages for details).
{{ unimplemented_inline() }} alignmentscope{{ MathMLElement("mtable") }}A Boolean value specifying whether table columns should act as alignment scopes or not.
{{ unimplemented_inline() }}
- altimg
- altimg-width
- altimg-height
- altimg-valign
- alttext		{{ MathMLElement("math") }}Visual and textual fall-back options.
bevelled{{ MathMLElement("mfrac") }}Specifies the style how the fraction should be displayed.
{{ unimplemented_inline() }} charalign{{ MathMLElement("mstack") }}Specifies the horizontal alignment of digits.
close{{ MathMLElement("mfenced") }}A string for the closing delimiter.
columnalign{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}, {{ MathMLElement("mlabeledtr") }}Specifies the horizontal alignment of table cells.
columnlines{{ MathMLElement("mtable") }}Specifies table column borders.
{{ unimplemented_inline() }} columnspacing{{ MathMLElement("mtable") }}Specifies the space between table columns.
columnspan{{ MathMLElement("mtd") }}A non-negative integer value that indicates on how many table columns does the cell extend.
{{ unimplemented_inline() }} columnwidth{{ MathMLElement("mtable") }}Specifies the width of table columns.
{{ unimplemented_inline() }} crossout{{ MathMLElement("mscarry") }}Specifies what kind of line is drawn to cross out carries.
{{ unimplemented_inline() }} decimalpoint{{ MathMLElement("mstyle") }}If the decimalpoint value is used to specify the alignment, this attribute is specifying the character for the alignment point within {{ MathMLElement("mstack") }} and {{ MathMLElement("mtable") }} columns.
denomalign{{ MathMLElement("mfrac") }}The alignment of the denominator under the fraction.
depth{{ MathMLElement("mpadded") }}Sets or increments the depth. See length.
dir{{ MathMLElement("math") }}, {{ MathMLElement("mi") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("mrow") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}The text direction. Possible values are either ltr (left to right) or rtl (right to left).
display{{ MathMLElement("math") }}Specifies the rendering mode. The values block and inline are allowed.
displaystyle{{ MathMLElement("mstyle") }}, {{ MathMLElement("mtable") }}A Boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas.
{{ unimplemented_inline() }} edge{{ MathMLElement("malignmark") }}
{{ unimplemented_inline() }} equalcolumns{{ MathMLElement("mtable") }}A Boolean value indicating whether to force all columns to have the same total height.
{{ unimplemented_inline() }} equalrows{{ MathMLElement("mtable") }}A Boolean value indicating whether to force all rows to have the same total height.
fence{{ MathMLElement("mo") }}A Boolean value specifying whether the operator is a fence (such as parentheses). There is no visual effect for this attribute.
{{ unimplemented_inline() }} form{{ MathMLElement("mo") }}Specifies the role of the operator in an enclosed expression.
frame{{ MathMLElement("mtable") }}Specifies borders of an entire {{ MathMLElement("mtable") }}. Possible values are: none (default), solid and dashed.
{{ unimplemented_inline() }} framespacing{{ MathMLElement("mtable") }}Specifies additional space added between the table and frame.
{{ unimplemented_inline() }} groupalign{{ MathMLElement("maligngroup") }}, {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}
height{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}Specifies the desired height. See lengths for possible values.
hrefAllUsed to set a hyperlink to a specified URI.
idAllSets up a unique identifier associated with the element.
{{ unimplemented_inline() }} indentalign{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentalignfirst{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentalignlast{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentshift{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentshiftfirst{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentshiftlast{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indenttarget{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} infixlinebreakstyle{{ MathMLElement("mstyle") }}Specifies the default linebreakstyle to use for infix operators.
largeop{{ MathMLElement("mo") }}Specifies whether the operator should be drawn larger than normal.
length{{ MathMLElement("msline") }}
{{ unimplemented_inline() }} linebreak{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} linebreakmultchar{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} linebreakstyle{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} lineleading{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
linethickness{{ MathMLElement("mfrac") }}The thickness of the horizontal fraction line.
{{ unimplemented_inline() }} location{{ MathMLElement("mscarries") }}
{{ unimplemented_inline() }} longdivstyle{{ MathMLElement("mlongdiv") }}Controls the style of the long division layout.
lspace{{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }}The amount of space before the operator (see length for values and units).
lquote{{ MathMLElement("ms") }}The opening quote character (depends on dir) to enclose the content. The default value is "&quot;".
mathbackgroundAllThe background color. You can use #rgb, #rrggbb and HTML color names.
mathcolorAllThe text color. You can use #rgb, #rrggbb and HTML color names.
mathsize{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}The size of the content. Starting with Gecko 20.0 {{geckoRelease("20")}} unitless values are allowed and are interpreted as N times of the default size.
mathvariant{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}The logical class of the identifier, which varies in typography.
maxsize{{ MathMLElement("mo") }}The maximum size of the operator.
{{ unimplemented_inline() }} minlabelspacing{{ MathMLElement("mtable") }}A length value specifing the minimum space between a label and the adjacent cell in the row.
minsize{{ MathMLElement("mo") }}The minimum size of the operator.
movablelimits{{ MathMLElement("mo") }}Specifies whether attached under- and overscripts move to sub- and superscript positions.
notation{{ MathMLElement("menclose") }}A list of notations, separated by white space, to apply to the child elements.
numalign{{ MathMLElement("mfrac") }}The alignment of the numerator over the fraction.
open{{ MathMLElement("mfenced") }}A string for the opening delimiter.
{{ unimplemented_inline() }} overflow{{ MathMLElement("math") }}If an expression is too long to fit in the allowed width, this attribute sets the preferred handling.
{{ unimplemented_inline() }} position{{ MathMLElement("msgroup") }}, {{ MathMLElement("msrow") }}, {{ MathMLElement("mscarries") }}, {{ MathMLElement("msline") }}
rowalign{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}Specifies the vertical alignment of table cells.
rowlines{{ MathMLElement("mtable") }}Specifies table row borders.
rowspacing{{ MathMLElement("mtable") }}Specifies the space between table rows.
rowspan{{ MathMLElement("mtd") }}A non-negative integer value that indicates on how many rows does the cell extend.
rspace{{ MathMLElement("mo") }}The amount of space after the operator.
rquote{{ MathMLElement("ms") }}The closing quote mark (depends on dir) to enclose the content. The default value is "&quot;".
scriptlevel{{ MathMLElement("mstyle") }}Controls mostly the font-size. The higher the scriptlevel, the smaller the font size.
scriptminsize{{ MathMLElement("mstyle") }}Specifies a minimum font size allowed due to changes in scriptlevel.
- Starting with Gecko 20.0 {{geckoRelease("20")}} unitless values and percent values are allowed and interpreted as multiple of "8pt".
scriptsizemultiplier{{ MathMLElement("mstyle") }}Specifies the multiplier to be used to adjust font size due to changes in scriptlevel.
selection{{ MathMLElement("maction") }}The child element which is addressed by the action.
separator{{ MathMLElement("mo") }}There is no visual effect for this attribute, but it specifies whether the operator is a separator (such as commas).
separators{{ MathMLElement("mfenced") }}A sequence of zero or more characters to be used for different separators.
{{ unimplemented_inline() }} shift{{ MathMLElement("msgroup") }}
{{ unimplemented_inline() }} side{{ MathMLElement("mtable") }}Specifies the position where {{ MathMLElement("mlabeledtr") }} label elements should be placed.
{{ unimplemented_inline() }} src{{ MathMLElement("mglyph") }}The location of the image resource.
{{ unimplemented_inline() }} stackalign{{ MathMLElement("mstack") }}
stretchy{{ MathMLElement("mo") }}Specifies whether the operator stretches to the size of the adjacent element.
subscriptshift{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msub") }}, {{ MathMLElement("msubsup") }}The minimum space by which to shift the subscript below the baseline of the expression.
supscriptshift{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msup") }}, {{ MathMLElement("msubsup") }}The minimum space by which to shift the superscript above the baseline of the expression.
symmetric{{ MathMLElement("mo") }}If stretchy is true, this attribute specifies whether the operator should be vertically symmetric around the imaginary math axis (centered fraction line).
voffset{{ MathMLElement("mpadded") }}Sets the vertical position of the child content.
width{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}Specifies the desired width. See lengths for possible values.
xmlns{{ MathMLElement("math") }}Specifies the URI for the MathML namespace (http://www.w3.org/1998/Math/MathML)
- -

+| 名（Name） | 元素接受的属性（Elements accepting attribute） | 描述（Description） | +| ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `accent` | {{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }} | 布尔类型的值，指明操作符是否应该被视为 accent。原文：A Boolean value specifying whether the operator should be treated as an accent. | +| `accentunder` | {{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }} | 布尔类型的值，指明操作符是否应该被视为 accent。原文：A Boolean value specifying whether the operator should be treated as an accent. | +| `actiontype` | {{ MathMLElement("maction") }} | 字符串类型的值，指明元素发生的操作。 | +| `align` | {{ MathMLElement("mtable") }} {{ MathMLElement("munder") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }} {{ MathMLElement("mstack") }} | Specifies different alignments of several elements (see element pages for details). | +| {{ unimplemented_inline() }} `alignmentscope` | {{ MathMLElement("mtable") }} | A Boolean value specifying whether table columns should act as alignment scopes or not. | +| {{ unimplemented_inline() }} `altimg` `altimg-width` `altimg-height` `altimg-valign` `alttext` | {{ MathMLElement("math") }} | Visual and textual fall-back options. | +| `bevelled` | {{ MathMLElement("mfrac") }} | Specifies the style how the fraction should be displayed. | +| {{ unimplemented_inline() }} `charalign` | {{ MathMLElement("mstack") }} | Specifies the horizontal alignment of digits. | +| `close` | {{ MathMLElement("mfenced") }} | A string for the closing delimiter. | +| `columnalign` | {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}, {{ MathMLElement("mlabeledtr") }} | Specifies the horizontal alignment of table cells. | +| `columnlines` | {{ MathMLElement("mtable") }} | Specifies table column borders. | +| {{ unimplemented_inline() }} `columnspacing` | {{ MathMLElement("mtable") }} | Specifies the space between table columns. | +| `columnspan` | {{ MathMLElement("mtd") }} | A non-negative integer value that indicates on how many table columns does the cell extend. | +| {{ unimplemented_inline() }} `columnwidth` | {{ MathMLElement("mtable") }} | Specifies the width of table columns. | +| {{ unimplemented_inline() }} `crossout` | {{ MathMLElement("mscarry") }} | Specifies what kind of line is drawn to cross out carries. | +| {{ unimplemented_inline() }} `decimalpoint` | {{ MathMLElement("mstyle") }} | If the `decimalpoint` value is used to specify the [alignment](#align), this attribute is specifying the character for the alignment point within {{ MathMLElement("mstack") }} and {{ MathMLElement("mtable") }} columns. | +| `denomalign` | {{ MathMLElement("mfrac") }} | The alignment of the denominator under the fraction. | +| `depth` | {{ MathMLElement("mpadded") }} | Sets or increments the depth. See [length](/zh-CN/docs/MathML/Attributes/Values). | +| `dir` | {{ MathMLElement("math") }}, {{ MathMLElement("mi") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("mrow") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }} | The text direction. Possible values are either ltr (left to right) or rtl (right to left). | +| `display` | {{ MathMLElement("math") }} | Specifies the rendering mode. The values `block` and `inline` are allowed. | +| `displaystyle` | {{ MathMLElement("mstyle") }}, {{ MathMLElement("mtable") }} | A Boolean value specifying whether more vertical space is used for displayed equations or, if set to `false`, a more compact layout is used to display formulas. | +| {{ unimplemented_inline() }} `edge` | {{ MathMLElement("malignmark") }} | | +| {{ unimplemented_inline() }} `equalcolumns` | {{ MathMLElement("mtable") }} | A Boolean value indicating whether to force all columns to have the same total height. | +| {{ unimplemented_inline() }} `equalrows` | {{ MathMLElement("mtable") }} | A Boolean value indicating whether to force all rows to have the same total height. | +| `fence` | {{ MathMLElement("mo") }} | A Boolean value specifying whether the operator is a fence (such as parentheses). There is no visual effect for this attribute. | +| {{ unimplemented_inline() }} `form` | {{ MathMLElement("mo") }} | Specifies the role of the operator in an enclosed expression. | +| `frame` | {{ MathMLElement("mtable") }} | Specifies borders of an entire {{ MathMLElement("mtable") }}. Possible values are: `none` (default), `solid` and `dashed`. | +| {{ unimplemented_inline() }} `framespacing` | {{ MathMLElement("mtable") }} | Specifies additional space added between the table and `frame`. | +| {{ unimplemented_inline() }} `groupalign` | {{ MathMLElement("maligngroup") }}, {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }} | | +| `height` | {{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }} | Specifies the desired height. See [lengths](/zh-CN/docs/MathML/Attributes/Values#Lengths) for possible values. | +| `href` | _All_ | Used to set a hyperlink to a specified URI. | +| `id` | _All_ | Sets up a unique identifier associated with the element. | +| {{ unimplemented_inline() }} `indentalign` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `indentalignfirst` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `indentalignlast` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `indentshift` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `indentshiftfirst` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `indentshiftlast` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `indenttarget` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `infixlinebreakstyle` | {{ MathMLElement("mstyle") }} | Specifies the default `linebreakstyle` to use for infix operators. | +| `largeop` | {{ MathMLElement("mo") }} | Specifies whether the operator should be drawn larger than normal. | +| `length` | {{ MathMLElement("msline") }} | | +| {{ unimplemented_inline() }} `linebreak` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `linebreakmultchar` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `linebreakstyle` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| {{ unimplemented_inline() }} `lineleading` | {{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }} | | +| `linethickness` | {{ MathMLElement("mfrac") }} | The thickness of the horizontal fraction line. | +| {{ unimplemented_inline() }} `location` | {{ MathMLElement("mscarries") }} | | +| {{ unimplemented_inline() }} `longdivstyle` | {{ MathMLElement("mlongdiv") }} | Controls the style of the long division layout. | +| `lspace` | {{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }} | The amount of space before the operator (see [length](/zh-CN/docs/MathML/Attributes/Values#Lengths) for values and units). | +| `lquote` | {{ MathMLElement("ms") }} | The opening quote character (depends on `dir`) to enclose the content. The default value is "`"`". | +| `mathbackground` | _All_ | The background color. You can use `#rgb`, `#rrggbb` and [HTML color names](/zh-CN/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords). | +| `mathcolor` | _All_ | The text color. You can use `#rgb`, `#rrggbb` and [HTML color names](/zh-CN/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords). | +| `mathsize` | {{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }} | The size of the content. Starting with Gecko 20.0 {{geckoRelease("20")}} unitless values are allowed and are interpreted as N times of the default size. | +| `mathvariant` | {{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }} | The logical class of the identifier, which varies in typography. | +| `maxsize` | {{ MathMLElement("mo") }} | The maximum size of the operator. | +| {{ unimplemented_inline() }} `minlabelspacing` | {{ MathMLElement("mtable") }} | A [length value](/zh-CN/docs/MathML/Attributes/Values) specifing the minimum space between a [label](Element/mlabeledtr) and the adjacent cell in the row. | +| `minsize` | {{ MathMLElement("mo") }} | The minimum size of the operator. | +| `movablelimits` | {{ MathMLElement("mo") }} | Specifies whether attached under- and overscripts move to sub- and superscript positions. | +| `notation` | {{ MathMLElement("menclose") }} | A list of notations, separated by white space, to apply to the child elements. | +| `numalign` | {{ MathMLElement("mfrac") }} | The alignment of the numerator over the fraction. | +| `open` | {{ MathMLElement("mfenced") }} | A string for the opening delimiter. | +| {{ unimplemented_inline() }} `overflow` | {{ MathMLElement("math") }} | If an expression is too long to fit in the allowed width, this attribute sets the preferred handling. | +| {{ unimplemented_inline() }} `position` | {{ MathMLElement("msgroup") }}, {{ MathMLElement("msrow") }}, {{ MathMLElement("mscarries") }}, {{ MathMLElement("msline") }} | | +| `rowalign` | {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }} | Specifies the vertical alignment of table cells. | +| `rowlines` | {{ MathMLElement("mtable") }} | Specifies table row borders. | +| `rowspacing` | {{ MathMLElement("mtable") }} | Specifies the space between table rows. | +| `rowspan` | {{ MathMLElement("mtd") }} | A non-negative integer value that indicates on how many rows does the cell extend. | +| `rspace` | {{ MathMLElement("mo") }} | The amount of space after the operator. | +| `rquote` | {{ MathMLElement("ms") }} | The closing quote mark (depends on `dir`) to enclose the content. The default value is "`"`". | +| `scriptlevel` | {{ MathMLElement("mstyle") }} | Controls mostly the font-size. The higher the `scriptlevel`, the smaller the font size. | +| `scriptminsize` | {{ MathMLElement("mstyle") }} | Specifies a minimum font size allowed due to changes in `scriptlevel`. Starting with Gecko 20.0 {{geckoRelease("20")}} unitless values and percent values are allowed and interpreted as multiple of "8pt". | +| `scriptsizemultiplier` | {{ MathMLElement("mstyle") }} | Specifies the multiplier to be used to adjust font size due to changes in `scriptlevel`. | +| `selection` | {{ MathMLElement("maction") }} | The child element which is addressed by the action. | +| `separator` | {{ MathMLElement("mo") }} | There is no visual effect for this attribute, but it specifies whether the operator is a separator (such as commas). | +| `separators` | {{ MathMLElement("mfenced") }} | A sequence of zero or more characters to be used for different separators. | +| {{ unimplemented_inline() }} `shift` | {{ MathMLElement("msgroup") }} | | +| {{ unimplemented_inline() }} `side` | {{ MathMLElement("mtable") }} | Specifies the position where {{ MathMLElement("mlabeledtr") }} label elements should be placed. | +| {{ unimplemented_inline() }} `src` | {{ MathMLElement("mglyph") }} | The location of the image resource. | +| {{ unimplemented_inline() }} `stackalign` | {{ MathMLElement("mstack") }} | | +| `stretchy` | {{ MathMLElement("mo") }} | Specifies whether the operator stretches to the size of the adjacent element. | +| `subscriptshift` | {{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msub") }}, {{ MathMLElement("msubsup") }} | The minimum space by which to shift the subscript below the baseline of the expression. | +| `supscriptshift` | {{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msup") }}, {{ MathMLElement("msubsup") }} | The minimum space by which to shift the superscript above the baseline of the expression. | +| `symmetric` | {{ MathMLElement("mo") }} | If `stretchy` is `true`, this attribute specifies whether the operator should be vertically symmetric around the imaginary math axis (centered fraction line). | +| `voffset` | {{ MathMLElement("mpadded") }} | Sets the vertical position of the child content. | +| `width` | {{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }} | Specifies the desired width. See [lengths](/zh-CN/docs/MathML/Attributes/Values#Lengths) for possible values. | +| `xlink:href` | _All_ | Can be used to set a hyperlink to a specfied URI. However, authors are encouraged to use the `href` attribute instead. | +| `xmlns` | {{ MathMLElement("math") }} | Specifies the URI for the MathML namespace ([`http://www.w3.org/1998/Math/MathML`](http://www.w3.org/1998/Math/MathML)) | diff --git a/files/zh-cn/web/mathml/authoring/index.md b/files/zh-cn/web/mathml/authoring/index.md index 976591fc8f8ff9..537ee3e14339a9 100644 --- a/files/zh-cn/web/mathml/authoring/index.md +++ b/files/zh-cn/web/mathml/authoring/index.md @@ -6,82 +6,94 @@ tags: - 起步 translation_of: Web/MathML/Authoring --- -
{{MathMLRef}}
+{{MathMLRef}} -

这个页面解释了如何利用 MathML 语言书写数学公式。就像 HTML，MathML 是用标签和属性描述的。当你的文档包含了高级结构比如说列表或表格的时候，HTML 会变得很冗长，但是幸好还有很多来自简单记号法的生成器，“所见即所得”编辑器以及别的内容管理系统可以帮助你编写 Web 网页。

+这个页面解释了如何利用 MathML 语言书写数学公式。就像 HTML，MathML 是用标签和属性描述的。当你的文档包含了高级结构比如说列表或表格的时候，HTML 会变得很冗长，但是幸好还有很多来自简单记号法的生成器，“所见即所得”编辑器以及别的内容管理系统可以帮助你编写 Web 网页。 -

数学公式记号法在结构方面更加复杂，像分数、平方根或者矩阵，很可能需要它们自己的标签。结果是，好的 MathML 编辑工具很重要，我们在下面描述一些工具。值得一说的是，Mozilla MathML 工作小组已经开发出了 TeXZilla，这是一个基于 JavaScript、支持 Unicode 编码的 LaTeX 转 MathML 转换器，is intended to be used in many scenarios described here。当然了，这个列表并不详尽，我们建议你自己去查看 W3C MathML 软件列表，你可以在那里找到很多别的工具。

+数学公式记号法在结构方面更加复杂，像分数、平方根或者矩阵，很可能需要它们自己的标签。结果是，好的 MathML 编辑工具很重要，我们在下面描述一些工具。值得一说的是，Mozilla MathML 工作小组已经开发出了 [TeXZilla](https://github.com/fred-wang/TeXZilla/)，这是一个基于 JavaScript、支持 Unicode 编码的 LaTeX 转 MathML 转换器，is intended to be used in many scenarios described here。当然了，这个列表并不详尽，我们建议你自己去查看 [W3C MathML 软件列表](https://www.w3.org/Math/Software/)，你可以在那里找到很多别的工具。 -

注意，根据设计，MathML 在 HTML5 中是完美整合的，而且你可以使用寻常的 Web 功能，比如说 CSS、DOM、JavaScript 或 SVG。这超出这个文档的范围了，但是任何拥有基础 Web 语言知识的人都能够轻松地学会用 MathML 综合这些功能。请阅读我们的文档以及 MathML 参考以了解详情。

+注意，根据设计，MathML 在 HTML5 中是完美整合的，而且你可以使用寻常的 Web 功能，比如说 CSS、DOM、JavaScript 或 SVG。这超出这个文档的范围了，但是任何拥有基础 Web 语言知识的人都能够轻松地学会用 MathML 综合这些功能。请阅读[我们的文档](/zh-CN/docs/Mozilla/MathML_Project#Sample_MathML_Documents)以及 [MathML 参考](/zh-CN/docs/Web/MathML)以了解详情。 -

使用 MathML

+## 使用 MathML -

HTML 网页中的 MathML

+#### HTML 网页中的 MathML -

你可以在 HTML5 文档内部使用 MathML 表达式：

+你可以在 HTML5 文档内部使用 MathML 表达式： -
<!DOCTYPE html>
-<html>
-<head>
- <title>MathML in HTML5</title>
-</head>
-<body>
+```html
+
+
+
+ MathML in HTML5
+
+
 
-  <h1>MathML in HTML5</h1>
+  
MathML in HTML5

 
-  <p>
+  

     Square root of two:
-    <math>
-      <msqrt>
-        <mn>2</mn>
-      </msqrt>
-    </math>
-  </p>
+    
+      
+        2
+      
+    
+  

 
-</body>
-</html>
+ + +``` -

浏览器不支持转换 MathML 的内容。建议在发布网页之前，把你的 MathML 内容标记转换成 MathML 表达式，比如说利用 ctop.xsl 样式表作为辅助。本页提到的工具可以生成 MathML 表达式。

+浏览器不支持转换 MathML 的内容。建议在发布网页之前，把你的 MathML 内容标记转换成 MathML 表达式，比如说利用 [ctop.xsl](https://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop) 样式表作为辅助。本页提到的工具可以生成 MathML 表达式。 -

对不支持 MathML 的浏览器的后备计划

+#### 对不支持 MathML 的浏览器的后备计划 -

不幸的是，一些浏览器不能呈现 MathML 方程式，或者只能有限地支持它。因此，你可能需要使用一个 MathML polyfill 以提供一些用于呈现的后备计划。如果你只需要基本的数学公式结构，比如说用在这个 MDN wiki 中的这些，那么，一个小型的 mathml.css 样式表就足够了。要想使用它，只需要在你的文档中插入一行内容：

+不幸的是，一些浏览器不能呈现 MathML 方程式，或者只能有限地支持它。因此，你可能需要使用一个 MathML polyfill 以提供一些用于呈现的后备计划。如果你只需要基本的数学公式结构，比如说用在这个 MDN wiki 中的这些，那么，一个小型的 [mathml.css](https://github.com/fred-wang/mathml.css) 样式表就足够了。要想使用它，只需要在你的文档中插入一行内容： -
<script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>
+```html + +``` -

如果你需要更多复杂的结构，你需要考虑使用更重一些的 MathJax 库作为一个 MathML polyfill：

+如果你需要更多复杂的结构，你需要考虑使用更重一些的 [MathJax](https://www.mathjax.org) 库作为一个 MathML polyfill： -
<script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>
+```html + +``` -

注意有两个脚本执行功能功能探测了 mspace 元素和 mpadded 元素（请看这几个页面的浏览器兼容性表）。还有一些类似的脚本，对于不支持 MathML 的浏览器，会在网页顶部显示一个警告，让用户选择一个后备计划：

+注意有两个脚本执行功能功能探测了 [mspace](/zh-CN/docs/Web/MathML/Element/mspace) 元素和 [mpadded](/zh-CN/docs/Web/MathML/Element/mpadded) 元素（请看这几个页面的浏览器兼容性表）。还有一些类似的脚本，对于不支持 MathML 的浏览器，会在网页顶部显示一个警告，让用户选择一个后备计划： -
<script src="http://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>
+```html + +``` -

如果你不想使用指向 Github 的链接，但是想在你的项目中整合这些铺垫，或者别的东西，你需要探测脚本以核实 MathML 支持的程度。举个例子，下面的函数通过检测 mspace 元素，核实了是否支持 MathML（你可以用 mpadded 替换 mspace）。

+如果你不想使用指向 Github 的链接，但是想在你的项目中整合这些铺垫，或者别的东西，你需要探测脚本以核实 MathML 支持的程度。举个例子，下面的函数通过检测 `mspace` 元素，核实了是否支持 MathML（你可以用 `mpadded` 替换 `mspace`）。 -
 function hasMathMLSupport() {
+```js
+ function hasMathMLSupport() {
   var div = document.createElement("div"), box;
-  div.innerHTML = "<math><mspace height='23px' width='77px'/></math>";
+  div.innerHTML = "";
   document.body.appendChild(div);
   box = div.firstChild.firstChild.getBoundingClientRect();
   document.body.removeChild(div);
-  return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;
-}
+ return Math.abs(box.height - 23) <= 1 && Math.abs(box.width - 77) <= 1; +} +``` -

作为替选，下面的用户代理字符串嗅探将允许侦测带原生 MathML 支持的渲染引擎（Geocko 和 WebKit）。注意，UA 字符串嗅探不是最可靠的方法，而且可能会在版本之间被破坏（break from version to version）：

+作为替选，下面的用户代理字符串嗅探将允许侦测带原生 MathML 支持的渲染引擎（Geocko 和 WebKit）。注意，UA 字符串嗅探不是最可靠的方法，而且可能会在版本之间被破坏（break from version to version）： -
var ua = navigator.userAgent;
-var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1;
-var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;
-
+```js +var ua = navigator.userAgent; +var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1; +var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1; +``` -

数学公式字体

+#### 数学公式字体 -

In order to get a good layout or to allow different style, it's important to have mathematical fonts available. It's always good to provide a link to MDN's Font Instructions, so that your visitors can verify whether they have appropriate fonts installed on their system. It's also good to provide a fallback with Web fonts.

+In order to get a good layout or to allow different style, it's important to have mathematical fonts available. It's always good to provide a link to [MDN's Font Instructions](/zh-CN/docs/Mozilla/MathML_Project/Fonts), so that your visitors can verify whether they have appropriate fonts installed on their system. It's also good to provide a fallback with Web fonts. -

Prior to Gecko 31.0 {{GeckoRelease("31.0")}}, it was a bit tedious to setup math fonts, see the font instructions for Mozilla 2.0. For Gecko 31.0 {{GeckoRelease("31.0")}}, this is much simpler and is compatible with any Web rendering engine with MathML support. For example, here is a minimal stylesheet to use Latin Modern for the text and Latin Modern Math for the mathematics:

+Prior to Gecko 31.0 {{GeckoRelease("31.0")}}, it was a bit tedious to setup math fonts, see the [font instructions for Mozilla 2.0](/zh-CN/docs/Mozilla/MathML_Project/FontsMozilla2.0#MathML_Font_Selection_with_CSS). For Gecko 31.0 {{GeckoRelease("31.0")}}, this is much simpler and is compatible with any Web rendering engine with MathML support. For example, here is a minimal stylesheet to use Latin Modern for the text and Latin Modern Math for the mathematics: -
@namespace url('http://www.w3.org/1999/xhtml');
+```css
+@namespace url('http://www.w3.org/1999/xhtml');
 @namespace m url('http://www.w3.org/1998/Math/MathML');
 
 body, m|mtext {
@@ -89,121 +101,117 @@ body, m|mtext {
 }
 m|math {
     font-family: Latin Modern Math;
-}
+} +``` -

You can then use the @font-face rule as usual to provide WOFF fallback for Latin Modern and Latin Modern Math. See this GitHub repository to get WOFF fonts and sample CSS stylesheets to use on your Web site and check its test page.

+You can then use the [@font-face](/zh-CN/docs/Web/CSS/@font-face) rule as usual to provide WOFF fallback for Latin Modern and Latin Modern Math. See this [GitHub repository to get WOFF fonts and sample CSS stylesheets](https://github.com/fred-wang/MathFonts) to use on your Web site and check [its test page](http://fred-wang.github.io/MathFonts/). -

XML 文档中的 MathML（XHTML、EPUB，等等）

+#### XML 文档中的 MathML（XHTML、EPUB，等等） -

If for some reason you need to use MathML in XML documents, be sure to satisfy the usual requirements: well-formed document, use of correct MIME type, MathML namespace "http://www.w3.org/1998/Math/MathML" on <math> roots. For example, the XHTML version of the previous example looks like this:
-

+If for some reason you need to use MathML in XML documents, be sure to satisfy the usual requirements: well-formed document, use of correct MIME type, MathML namespace `"http://www.w3.org/1998/Math/MathML"` on `` roots. For example, the XHTML version of the previous example looks like this: -
<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
-  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <title>XHTML+MathML Example</title>
-</head>
-<body>
+```xml
+
+
+
+
+ XHTML+MathML Example
+
+
 
-<h1>XHTML+MathML Example</h1>
+
XHTML+MathML Example

 
-  <p>
+  

     Square root of two:
-    <math xmlns="http://www.w3.org/1998/Math/MathML">
-      <msqrt>
-        <mn>2</mn>
-      </msqrt>
-    </math>
-  </p>
-
-</body>
-</html>
- -

Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.

- -

电子邮件和即时通讯客户端中的 MathML

- -

Modern mail clients may send and receive emails in the HTML5 format and thus can use MathML expressions. Be sure to have the "send as HTML" and "view as HTML" options enabled. In Thunderbird, you can use the "Insert HTML" command to paste your HTML+MathML code. MathBird is a convenient add-on for Thunderbird to insert such MathML expressions using the AsciiMath input syntax. Moreover, a LaTeX-to-MathML input box has also been integrated into SeaMonkey since version 2.28 and into Thunderbird since version 31. Again, the way MathML is handled and the quality of the MathML rendering depend on the mail clients. Even if your browser supports MathML, your Webmail may prevent you to send or receive mails with MathML inside.

- -

Gecko-based instant messaging clients can integrate a Javascript-based text-to-MathML converter (mentioned below) and then render the MathML expressions generated from the (plaintext) instant messages. For example, there is an Instantbird add-on that handles LaTeX expressions.

- -

从简单句法转换

- -

There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.

- -
    -
  • pros: -
      -
    • Writing mathematical expressions may only require a standard text editor.
      • -
    • Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.
      • -
    • This gives access to advanced features of LaTeX like macros.
      • -
    -
    • -
  • cons: -
      -
    • This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc
      • -
    • The interface is not user-friendly: only code editor without immediate display of the mathematical expression.
      • -
    • None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.
      • -
    -
    • -
- -

客户端转换

- -

In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.

- -
    -
  • pros: -
      -
    • This is very easy setup: only a few Javascript and CSS files to upload and/or a link to add to your document header.
      • -
    • This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.
      • -
    -
    • -
  • cons: -
      -
    • This won't work if the visitor has Javascript disabled.
      • -
    • The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.
      • -
    • The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "<" for tags or "$" for money amounts)
      • -
    • You may need to synchronize the Javascript converter with other Javascript programs on your page.
      • -
    -
    • -
- -

TeXZilla has an <x-tex> custom element, that can be used to write things like

- -
<x-tex>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex>
- -

and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional Javascript parsing of expressions at load time as all the other tools in this section do.

- -

One simple client-side conversion tools is ASCIIMathML. Just download the ASCIIMathML.js script and copy it to your Web site. Then on your Web pages, add a <script> tag to load ASCIIMathML and the mathematical expressions delimited by ` (grave accent) will be automatically parsed and converted to MathML:

- -
<html>
-<head>
+    
+      
+        2
+      
+    
+  

+
+
+
+```
+
+Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.
+
+#### 电子邮件和即时通讯客户端中的 MathML
+
+Modern mail clients may send and receive emails in the HTML5 format and thus can use MathML expressions. Be sure to have the "send as HTML" and "view as HTML" options enabled. In Thunderbird, you can use the "Insert HTML" command to paste your HTML+MathML code. [MathBird](http://disruptive-innovations.com/zoo/MathBird/) is a convenient add-on for Thunderbird to insert such MathML expressions using the AsciiMath input syntax. Moreover, a LaTeX-to-MathML input box has also been integrated into [SeaMonkey](https://www.seamonkey-project.org/) since version 2.28 and into [Thunderbird](https://www.mozilla.org/thunderbird/) since version 31. Again, the way MathML is handled and the quality of the MathML rendering [depend on the mail clients](http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121). Even if your browser supports MathML, your Webmail may prevent you to send or receive mails with MathML inside.
+
+Gecko-based instant messaging clients can integrate a Javascript-based text-to-MathML converter (mentioned below) and then render the MathML expressions generated from the (plaintext) instant messages. For example, there is an [Instantbird add-on](https://addons.instantbird.org/en-US/instantbird/addon/340) that handles LaTeX expressions.
+
+## 从简单句法转换
+
+There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.
+
+- pros:
+
+  - Writing mathematical expressions may only require a standard text editor.
+  - Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.
+  - This gives access to advanced features of LaTeX like macros.
+
+- cons:
+
+  - This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc
+  - The interface is not user-friendly: only code editor without immediate display of the mathematical expression.
+  - None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.
+
+### 客户端转换
+
+In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.
+
+- pros:
+
+  - This is very easy setup: only a few Javascript and CSS files to upload and/or a link to add to your document header.
+  - This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.
+
+- cons:
+
+  - This won't work if the visitor has Javascript disabled.
+  - The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.
+  - The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "<" for tags or "$" for money amounts)
+  - You may need to synchronize the Javascript converter with other Javascript programs on your page.
+
+[TeXZilla](https://github.com/fred-wang/TeXZilla) has an [\](https://github.com/fred-wang/x-tex) custom element, that can be used to write things like
+
+```plain
+\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1
+```
+
+and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional [Javascript parsing of expressions at load time](https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page) as all the other tools in this section do.
+
+One simple client-side conversion tools is [ASCIIMathML](http://www1.chapman.edu/~jipsen/mathml/asciimath.html). Just download the [ASCIIMathML.js](https://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js) script and copy it to your Web site. Then on your Web pages, add a `
 ...
-</head>
-<body>
+
+
 ...
-<p>blah blah `x^2 + y^2 = r^2` blah ...
+
blah blah `x^2 + y^2 = r^2` blah ...
 ...
-
+``` -

LaTeXMathML is a similar script that allows to parse more LaTeX commands. The installation is similar: copy LaTeXMathML.js and LaTeXMathML.standardarticle.css, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:

+[LaTeXMathML](https://math.etsu.edu/LaTeXMathML/) is a similar script that allows to parse more LaTeX commands. The installation is similar: copy [LaTeXMathML.js](https://math.etsu.edu/LaTeXMathML/LaTeXMathML.js) and [LaTeXMathML.standardarticle.css](https://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css), add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML: -
<head>
+```html
+
 ...
-<script type="text/javascript" src="LaTeXMathML.js"></script>
-<link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" />
+
+
 ...
-</head>
+
 
-<body>
+
 ...
 
-<div class="LaTeX">
+

 \documentclass[12pt]{article}
 
 \begin{document}
@@ -220,144 +228,145 @@ This is a sample LaTeXML document.
   $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
 
 \end{document}
-</div>
-...
+ +... +``` -

jqMath is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like √{∑↙{n=1}↖{+∞} 6/n^2} = π to write ∑ n = 1 + ∞ 6 n 2 = π . The installation is similar: download and copy the relevant Javascript and CSS files on your Web site and reference them in your page header (see the COPY-ME.html file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.

+[jqMath](https://mathscribe.com/author/jqmath.html) is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like `√{∑↙{n=1}↖{+∞} 6/n^2} = π` to write ∑ n = 1 + ∞ 6 n 2 = π . The installation is similar: download and copy the relevant [Javascript and CSS files](https://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip) on your Web site and reference them in your page header (see the `COPY-ME.html` file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support. -

Another way to work around the lack of MathML support in some browsers is to use MathJax. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:

+Another way to work around the lack of MathML support in some browsers is to use [MathJax](https://www.mathjax.org/). However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is: -
...
-    <script type="text/x-mathjax-config">
+```html
+...
+    
+    
+  
+  
    \[ \tau = \frac{x}{y} + \sqrt{3} \]
 ...
-
+``` + +Note that [the dollar delimiters are not used by default](http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters). To use the ASCIIMathML input instead, just replace `TeX-AMS-MML_HTMLorMML` by `AM-MML_HTMLorMML`. MathJax has many other features, see the [MathJax documentation](http://docs.mathjax.org/en/latest/) for further details. + +### 命令行程序 -

Note that the dollar delimiters are not used by default. To use the ASCIIMathML input instead, just replace TeX-AMS-MML_HTMLorMML by AM-MML_HTMLorMML. MathJax has many other features, see the MathJax documentation for further details.

+An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server. -

命令行程序

+- pros: -

An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server.

+ - You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server. + - Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB. + - You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml. -
    -
  • pros: -
      -
    • You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server.
      • -
    • Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB.
      • -
    • You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml.
      • -
    -
    • -
  • cons: -
      -
    • This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms.
      • -
    • You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious.
      • -
    • Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application.
      • -
    -
    • -
+- cons: -

TeXZilla can be used from the command line and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet.

+ - This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms. + - You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious. + - Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application. -

If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like itex2MML or Blahtex. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:

+[TeXZilla](https://github.com/fred-wang/TeXZilla) can be used [from the command line](https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line) and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet. -
wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
+If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like [itex2MML](https://golem.ph.utexas.edu/~distler/blog/itex2MML.html) or [Blahtex](http://gva.noekeon.org/blahtexml/). The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:
+
+```bash
+wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
 tar -xzf itexToMML.tar.gz; \
 cd itex2MML/itex-src;
 make
 sudo make install
-
+``` -

Now suppose that you have a HTML page with TeX fragments delimited by dollars:

+Now suppose that you have a HTML page with TeX fragments delimited by dollars: -
input.html
+```html
+input.html
 
 ...
-</head>
-<body>
-  <p>$\sqrt{a^2-3c}$</p>
-  <p>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$</p>
-</body>
-</html>
-
+ + +

$\sqrt{a^2-3c}$

+

$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$

+ + +``` -

Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do

+Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do -
cat input.html | itex2MML > output.html
+```plain +cat input.html | itex2MML > output.html +``` -

There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example TeX4ht is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source:

+There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example [TeX4ht](https://www.tug.org/tex4ht/) is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source: -
   mk4ht mzlatex foo.tex # Linux/Mac platforms
+```plain
+   mk4ht mzlatex foo.tex # Linux/Mac platforms
    mzlatex foo.tex       # Windows platform
-
+``` + +Note that [tex4ebook](https://github.com/michal-h21/tex4ebook) relies on TeX4ht to generate EPUB documents. + +[LaTeXML](https://dlmf.nist.gov/LaTeXML/) is another tool that can generate HTML5 and EPUB documents. Windows users can watch this [video tutorial](https://www.youtube.com/watch?v=Dg881w2e-lI). Given a foo.tex LaTeX file, you can use these simple commands: + +```plain + latexmlc --dest foo.html foo.tex # Generate a HTML5 document foo.html + latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub +``` -

Note that tex4ebook relies on TeX4ht to generate EPUB documents.

+To handle the case of browsers without MathML support, you can use the `--javascript` parameter to tell LaTeXML to include one of the [fallback scripts](#fallback_for_browsers_without_mathml_support): -

LaTeXML is another tool that can generate HTML5 and EPUB documents. Windows users can watch this video tutorial. Given a foo.tex LaTeX file, you can use these simple commands:

+```html + latexmlc --dest foo.html --javascript=http://fred-wang.github.io/mathml.css/mspace.js foo.tex # Add the CSS fallback + latexmlc --dest foo.html --javascript=http://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback +``` -
  latexmlc --dest foo.html foo.tex # Generate a HTML5 document foo.html
-  latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub
+If your LaTeX document is big, you might want to split it into several small pages rather than putting everything in a single large page. For example, this will split the pages at the `\section` level: -

To handle the case of browsers without MathML support, you can use the --javascript parameter to tell LaTeXML to include one of the fallback scripts:

+```plain + latexmlc --dest foo.html --splitat=section foo.tex +``` -
  latexmlc --dest foo.html --javascript=http://fred-wang.github.io/mathml.css/mspace.js foo.tex  # Add the CSS fallback
-  latexmlc --dest foo.html --javascript=http://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback
-
+### 服务器端转换 -

If your LaTeX document is big, you might want to split it into several small pages rather than putting everything in a single large page. For example, this will split the pages at the \section level:

+- pros: -
  latexmlc --dest foo.html --splitat=section foo.tex
-
+ - Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion. -

服务器端转换

+- cons: -
    -
  • pros: -
      -
    • Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion.
      • -
    -
    • -
  • cons: -
      -
    • This might be a bit more difficult to set up, since you need some admin right on your server.
      • -
    -
    • -
+ - This might be a bit more difficult to set up, since you need some admin right on your server. -

TeXZilla can be used as a Web server in order to perform server-side LaTeX-to-MathML conversion. LaTeXML can also be used as a deamon to run server-side. Mathoid is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.

+[TeXZilla](https://github.com/fred-wang/TeXZilla) can be [used as a Web server](https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#using-texzilla-as-a-web-server) in order to perform server-side LaTeX-to-MathML conversion. [LaTeXML](https://dlmf.nist.gov/LaTeXML/) can also be used as a deamon to run server-side. [Mathoid](https://github.com/gwicke/mathoid) is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion. -

Instiki is a Wiki that integrates itex2MML to do server-side conversion. In future versions, MediaWiki will support server-side conversion too.

+[Instiki](http://instiki.org/show/HomePage) is a Wiki that integrates itex2MML to do server-side conversion. In future versions, [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) will support server-side conversion too. -

图形接口

+## 图形接口 -

Input Box

+### Input Box -

TeXZilla has several interfaces, including a CKEditor plugin used on MDN, an online demo, a Firefox add-on or a FirefoxOS Webapp. It has also been integrated into SeaMonkey since version 2.28 and into Thunderbird since version 31. Abiword contains a small equation editor, based on itex2MML. Finally, Bluegriffon has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.

+[TeXZilla](https://github.com/fred-wang/TeXZilla) has several interfaces, including a [CKEditor plugin](https://ckeditor.com/addon/texzilla) used on MDN, an [online demo](http://fred-wang.github.io/TeXZilla/), a [Firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/texzilla/) or a [FirefoxOS Webapp](https://marketplace.firefox.com/app/texzilla-1/). It has also been integrated into [SeaMonkey](https://www.seamonkey-project.org/) since version 2.28 and into [Thunderbird](https://www.mozilla.org/thunderbird/) since version 31.[ Abiword](http://abisource.org/) contains a small equation editor, based on itex2MML. Finally, [Bluegriffon](http://www.bluegriffon.com/) has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax. -

BlueGriffon

+![BlueGriffon](mathml-shot1.png) -

所见即所得编辑器

+### 所见即所得编辑器 -

Firemath is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.

+[Firemath](https://www.firemath.info/) is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page. -

LyX is a graphical LaTeX editor, which has built-in support for XHTML+MathML export and can be configured to use similar LaTeX-to-(X)HTML converters. You can for example, you can configure it to use LaTeXML HTML5/EPUB export.

+[LyX](https://www.lyx.org/) is a graphical LaTeX editor, which has built-in support for XHTML+MathML export and can be configured to use similar LaTeX-to-(X)HTML converters. You can for example, you can configure it to [use LaTeXML HTML5/EPUB export](https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx). -

OpenOffice and LibreOffice have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml.

+[OpenOffice](https://www.openoffice.org/) and [LibreOffice](https://libreoffice.org/) have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called `content.xml`. -

Open Office Math

+![Open Office Math](openoffice.png) -

Amaya is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as a+2 is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.

+[Amaya](https://www.w3.org/Amaya/) is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as `a+2` is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla. -

可选的字符、手写识别

+## 可选的字符、手写识别 -

Inftyreader is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the Windows Math Input Panel

+[Inftyreader](https://www.inftyreader.org/) is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the [Windows Math Input Panel](https://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations) -

or the online converter Web Equation.

+or the online converter [Web Equation](http://webdemo.visionobjects.com/). diff --git a/files/zh-cn/web/mathml/element/index.md b/files/zh-cn/web/mathml/element/index.md index aaf91d576d7af9..19dfca2546c5e7 100644 --- a/files/zh-cn/web/mathml/element/index.md +++ b/files/zh-cn/web/mathml/element/index.md @@ -6,227 +6,177 @@ tags: - MathML 参考 translation_of: Web/MathML/Element --- -

{{MathMLRef}}

+{{MathMLRef}} -

这是一份按字母排序的 MathML 呈现型元素列表。

+这是一份按字母排序的 MathML **呈现型**元素列表。 -

呈现型标记（presentation markup）相关条目被用来描述数学记号的布局结构，而内容型标记（content markup）则用于提供潜在的数学含义，MathML 解析器不支持渲染内容型标记（见 {{bug(276028)}}）。若想了解更多关于内容型标记的信息，可以考虑阅读 MathML 3 规范的第四章。

+**呈现型标记**（**presentation markup**）相关条目被用来描述数学记号的布局结构，而**内容型标记**（**content markup**）则用于提供潜在的数学含义，MathML 解析器不支持渲染内容型标记（见 {{bug(276028)}}）。若想了解更多关于内容型标记的信息，可以考虑阅读 [MathML 3 规范](http://www.w3.org/TR/MathML3/)的[第四章](http://www.w3.org/TR/MathML3/chapter4.html)。 -

MathML 元素实现了 {{domxref("MathMLElement")}} 类。

+MathML 元素实现了 {{domxref("MathMLElement")}} 类。 -

MathML 呈现型元素（字母排序）

+## MathML 呈现型元素（字母排序） -

math

+### math -
    -
  • {{MathMLElement("math")}}（顶层元素）
    • -
+- {{MathMLElement("math")}}（顶层元素） -

A

+### A -
    -
  • {{MathMLElement("maction")}}（将动作绑定到子表达式）
    • -
  • {{MathMLElement("maligngroup")}}（对齐分组）
    • -
  • {{MathMLElement("malignmark")}}（对齐点）
    • -
+- {{MathMLElement("maction")}}（将动作绑定到子表达式） +- {{MathMLElement("maligngroup")}}（对齐分组） +- {{MathMLElement("malignmark")}}（对齐点） -

E

+### E -
    -
  • {{MathMLElement("menclose")}}（被包裹的内容）
    • -
  • {{MathMLElement("merror")}}（被包裹的语法错误消息）
    • -
+- {{MathMLElement("menclose")}}（被包裹的内容） +- {{MathMLElement("merror")}}（被包裹的语法错误消息） -

F

+### F -
    -
  • {{MathMLElement("mfenced")}}（圆括号）{{deprecated_inline}}
    • -
  • {{MathMLElement("mfrac")}}（因子 Fraction）
    • -
+- {{MathMLElement("mfenced")}}（圆括号）{{deprecated_inline}} +- {{MathMLElement("mfrac")}}（因子 Fraction） -

G

+### G -
    -
  • {{MathMLElement("mglyph")}}（显示非标准符号）
    • -
+- {{MathMLElement("mglyph")}}（显示非标准符号） -

I

+### I -
    -
  • {{MathMLElement("mi")}}（标识符 Identifier）
    • -
+- {{MathMLElement("mi")}}（标识符 Identifier） -

L

+### L -
    -
  • {{MathMLElement("mlabeledtr")}}（表格或矩阵中，带标记的行）
    • -
  • {{MathMLElement("mlongdiv")}}（长除法记号）
    • -
+- {{MathMLElement("mlabeledtr")}}（表格或矩阵中，带标记的行） +- {{MathMLElement("mlongdiv")}}（长除法记号） -

M

+### M -
    -
  • {{MathMLElement("mmultiscripts")}}（Prescript 和张量指标 tensor indice）
    • -
+- {{MathMLElement("mmultiscripts")}}（Prescript 和张量指标 tensor indice） -

N

+### N -
    -
  • {{MathMLElement("mn")}}（数字）
    • -
+- {{MathMLElement("mn")}}（数字） -

O

+### O -
    -
  • {{MathMLElement("mo")}}（运算符 Operator）
    • -
  • {{MathMLElement("mover")}}（上标）
    • -
+- {{MathMLElement("mo")}}（运算符 Operator） +- {{MathMLElement("mover")}}（上标） -

P

+### P -
    -
  • {{MathMLElement("mpadded")}}（在内容周围增设空白）
    • -
  • {{MathMLElement("mphantom")}}（保留空白占位的不可见内容）
    • -
+- {{MathMLElement("mpadded")}}（在内容周围增设空白） +- {{MathMLElement("mphantom")}}（保留空白占位的不可见内容） -

R

+### R -
    -
  • {{MathMLElement("mroot")}}（带指定根数的根号）
    • -
  • {{MathMLElement("mrow")}}（分组后的子表达式）
    • -
+- {{MathMLElement("mroot")}}（带指定根数的根号） +- {{MathMLElement("mrow")}}（分组后的子表达式） -

S

+### S -
    -
  • {{MathMLElement("ms")}}（字符串字面量）
    • -
  • {{MathMLElement("mscarries")}}（附注 Annotation，比如进位）
    • -
  • {{MathMLElement("mscarry")}}（单进位， {{MathMLElement("mscarries")}} 的子元素）
    • -
  • {{MathMLElement("msgroup")}}（{{MathMLElement("mstack")}} 和 {{MathMLElement("mlongdiv")}} 元素内的行组）
    • -
  • {{MathMLElement("msline")}}（在 {{MathMLElement("mstack")}} 元素内的水平行）
    • -
  • {{MathMLElement("mspace")}}（空白）
    • -
  • {{MathMLElement("msqrt")}}（不带根数的平方根）
    • -
  • {{MathMLElement("msrow")}}（在 {{MathMLElement("mstack")}} 元素中的行）
    • -
  • {{MathMLElement("mstack")}}（堆叠式对齐）
    • -
  • {{MathMLElement("mstyle")}}（改变样式）
    • -
  • {{MathMLElement("msub")}}（下角标）
    • -
  • {{MathMLElement("msup")}}（上角标）
    • -
  • {{MathMLElement("msubsup")}}（上下角标对）
    • -
- -

T

- -
    -
  • {{MathMLElement("mtable")}}（表格或矩阵）
    • -
  • {{MathMLElement("mtd")}}（表格或矩阵中的单元格）
    • -
  • {{MathMLElement("mtext")}}（文本）
    • -
  • {{MathMLElement("mtr")}}（表格或矩阵中的行）
    • -
- -

U

- -
    -
  • {{MathMLElement("munder")}}（下标）
    • -
  • {{MathMLElement("munderover")}}（上标 - 下标对）
    • -
- -

其他元素

- - - -

MathML 呈现型元素（类别分类）

- -

顶层元素

- -
    -
  • {{MathMLElement("math")}}
    • -
- -

字符/符号元素

- -
    -
  • {{MathMLElement("mglyph")}}
    • -
  • {{MathMLElement("mi")}}
    • -
  • {{MathMLElement("mn")}}
    • -
  • {{MathMLElement("mo")}}
    • -
  • {{MathMLElement("ms")}}
    • -
  • {{MathMLElement("mspace")}}
    • -
  • {{MathMLElement("mtext")}}
    • -
- -

通用布局元素

- -
    -
  • {{MathMLElement("menclose")}}
    • -
  • {{MathMLElement("merror")}}
    • -
  • {{MathMLElement("mfenced")}} {{deprecated_inline}}
    • -
  • {{MathMLElement("mfrac")}}
    • -
  • {{MathMLElement("mpadded")}}
    • -
  • {{MathMLElement("mphantom")}}
    • -
  • {{MathMLElement("mroot")}}
    • -
  • {{MathMLElement("mrow")}}
    • -
  • {{MathMLElement("msqrt")}}
    • -
  • {{MathMLElement("mstyle")}}
    • -
- -

边标和角标元素

- -
    -
  • {{MathMLElement("mmultiscripts")}}
    • -
  • {{MathMLElement("mover")}}
    • -
  • {{MathMLElement("mprescripts")}}
    • -
  • {{MathMLElement("msub")}}
    • -
  • {{MathMLElement("msubsup")}}
    • -
  • {{MathMLElement("msup")}}
    • -
  • {{MathMLElement("munder")}}
    • -
  • {{MathMLElement("munderover")}}
    • -
  • {{MathMLElement("none")}}
    • -
- -

表格数学

- -
    -
  • {{MathMLElement("maligngroup")}}
    • -
  • {{MathMLElement("malignmark")}}
    • -
  • {{MathMLElement("mlabeledtr")}}
    • -
  • {{MathMLElement("mtable")}}
    • -
  • {{MathMLElement("mtd")}}
    • -
  • {{MathMLElement("mtr")}}
    • -
- -

初等数学

- -
    -
  • {{MathMLElement("mlongdiv")}}
    • -
  • {{MathMLElement("mscarries")}}
    • -
  • {{MathMLElement("mscarry")}}
    • -
  • {{MathMLElement("msgroup")}}
    • -
  • {{MathMLElement("msline")}}
    • -
  • {{MathMLElement("msrow")}}
    • -
  • {{MathMLElement("mstack")}}
    • -
- -

尚无分类的元素

- -
    -
  • {{MathMLElement("maction")}}
    • -
- -

语义附注元素

- - - -

请参阅

- - +- {{MathMLElement("ms")}}（字符串字面量） +- {{MathMLElement("mscarries")}}（附注 Annotation，比如进位） +- {{MathMLElement("mscarry")}}（单进位， {{MathMLElement("mscarries")}} 的子元素） +- {{MathMLElement("msgroup")}}（{{MathMLElement("mstack")}} 和 {{MathMLElement("mlongdiv")}} 元素内的行组） +- {{MathMLElement("msline")}}（在 {{MathMLElement("mstack")}} 元素内的水平行） +- {{MathMLElement("mspace")}}（空白） +- {{MathMLElement("msqrt")}}（不带根数的平方根） +- {{MathMLElement("msrow")}}（在 {{MathMLElement("mstack")}} 元素中的行） +- {{MathMLElement("mstack")}}（堆叠式对齐） +- {{MathMLElement("mstyle")}}（改变样式） +- {{MathMLElement("msub")}}（下角标） +- {{MathMLElement("msup")}}（上角标） +- {{MathMLElement("msubsup")}}（上下角标对） + +### T + +- {{MathMLElement("mtable")}}（表格或矩阵） +- {{MathMLElement("mtd")}}（表格或矩阵中的单元格） +- {{MathMLElement("mtext")}}（文本） +- {{MathMLElement("mtr")}}（表格或矩阵中的行） + +### U + +- {{MathMLElement("munder")}}（下标） +- {{MathMLElement("munderover")}}（上标 - 下标对） + +### 其他元素 + +- {{MathMLElement("semantics")}}（语义附注的容器） +- [``](/zh-CN/docs/Web/MathML/Element/semantics#annotation)（数据附注） +- [``](/zh-CN/docs/Web/MathML/Element/semantics#annotation-xml)（XML 附注） + +## MathML 呈现型元素（类别分类） + +### 顶层元素 + +- {{MathMLElement("math")}} + +### 字符/符号元素 + +- {{MathMLElement("mglyph")}} +- {{MathMLElement("mi")}} +- {{MathMLElement("mn")}} +- {{MathMLElement("mo")}} +- {{MathMLElement("ms")}} +- {{MathMLElement("mspace")}} +- {{MathMLElement("mtext")}} + +### 通用布局元素 + +- {{MathMLElement("menclose")}} +- {{MathMLElement("merror")}} +- {{MathMLElement("mfenced")}} {{deprecated_inline}} +- {{MathMLElement("mfrac")}} +- {{MathMLElement("mpadded")}} +- {{MathMLElement("mphantom")}} +- {{MathMLElement("mroot")}} +- {{MathMLElement("mrow")}} +- {{MathMLElement("msqrt")}} +- {{MathMLElement("mstyle")}} + +### 边标和角标元素 + +- {{MathMLElement("mmultiscripts")}} +- {{MathMLElement("mover")}} +- {{MathMLElement("mprescripts")}} +- {{MathMLElement("msub")}} +- {{MathMLElement("msubsup")}} +- {{MathMLElement("msup")}} +- {{MathMLElement("munder")}} +- {{MathMLElement("munderover")}} +- {{MathMLElement("none")}} + +### 表格数学 + +- {{MathMLElement("maligngroup")}} +- {{MathMLElement("malignmark")}} +- {{MathMLElement("mlabeledtr")}} +- {{MathMLElement("mtable")}} +- {{MathMLElement("mtd")}} +- {{MathMLElement("mtr")}} + +### 初等数学 + +- {{MathMLElement("mlongdiv")}} +- {{MathMLElement("mscarries")}} +- {{MathMLElement("mscarry")}} +- {{MathMLElement("msgroup")}} +- {{MathMLElement("msline")}} +- {{MathMLElement("msrow")}} +- {{MathMLElement("mstack")}} + +### 尚无分类的元素 + +- {{MathMLElement("maction")}} + +## 语义附注元素 + +- [``](/zh-CN/docs/Web/MathML/Element/semantics#annotation) +- [``](/zh-CN/docs/Web/MathML/Element/semantics#annotation-xml) +- {{MathMLElement("semantics")}} + +## 请参阅 + +- [MathML](/zh-CN/docs/Web/MathML) +- [MathML 属性参考](/zh-CN/docs/Web/MathML/Attribute) diff --git a/files/zh-cn/web/mathml/element/mroot/index.md b/files/zh-cn/web/mathml/element/mroot/index.md index 791608b297c61b..beff92bae9cfaa 100644 --- a/files/zh-cn/web/mathml/element/mroot/index.md +++ b/files/zh-cn/web/mathml/element/mroot/index.md @@ -3,49 +3,46 @@ title: slug: Web/MathML/Element/mroot translation_of: Web/MathML/Element/mroot --- -
{{MathMLRef}}
+{{MathMLRef}} -

MathML 的<mroot>元素用来表示一个有明确根指数的根式。它接受两个参数，语法如下：<mroot> base index </mroot>。

+MathML 的**``**元素用来表示一个有明确根指数的根式。它接受两个参数，语法如下：**` base index `**。 -

属性

+## 属性 -
-
class, id, style
-
供样式表使用。
-
href
-
用来设置标签点击后跳转的链接。
-
mathbackground
-
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
-
mathcolor
-
用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用#rgb、#rrggbb或者HTML 颜色名。
-
+- class, id, style + - : 供[样式表](/zh-CN/docs/CSS)使用。 +- href + - : 用来设置标签点击后跳转的链接。 +- mathbackground + - : 用来设置标签的背景色，可以使用**`#rgb`**、**`#rrggbb`**或者[HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 +- mathcolor + - : 用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用**`#rgb`**、**`#rrggbb`**或者[HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 -

例子

+## 例子 -

下述代码表示：x

+下述代码表示：![x](/files/3200/mroot.png) -

您的浏览器的渲染结果：x 3

+您的浏览器的渲染结果：x 3 -
<math>
+```html
+
 
- <mroot>
-    <mi>x</mi>
-    <mn>3</mn>
- </mroot>
+ 
+    x
+    3
+ 
 
-</math>
-
+ +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

相关链接

+## 相关链接 -
    -
  • {{ MathMLElement("msqrt") }} (Square root without an index)
    • -
+- {{ MathMLElement("msqrt") }} (Square root without an index) diff --git a/files/zh-cn/web/mathml/element/msqrt/index.md b/files/zh-cn/web/mathml/element/msqrt/index.md index 3137e5d19e7b07..2ee348832987dc 100644 --- a/files/zh-cn/web/mathml/element/msqrt/index.md +++ b/files/zh-cn/web/mathml/element/msqrt/index.md @@ -3,48 +3,45 @@ title: slug: Web/MathML/Element/msqrt translation_of: Web/MathML/Element/msqrt --- -
{{MathMLRef}}
+{{MathMLRef}} -

MathML<msqrt>元素用于表示一个平方根（不显示根指数）。它只接受一个参数，语法如下：<msqrt> base </msqrt>。

+MathML**``**元素用于表示一个平方根（不显示根指数）。它只接受一个参数，语法如下：**` base `**。 -

属性

+## 属性 -
-
class, id, style
-
供样式表使用。
-
href
-
用来设置标签点击后跳转的链接
-
mathbackground
-
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
-
mathcolor
-
用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用#rgb、#rrggbb或者HTML 颜色名。
-
+- class, id, style + - : 供[样式表](/zh-CN/docs/CSS)使用。 +- href + - : 用来设置标签点击后跳转的链接 +- mathbackground + - : 用来设置标签的背景色，可以使用**`#rgb`**、**`#rrggbb`**或者[HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 +- mathcolor + - : 用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用**`#rgb`**、**`#rrggbb`**或者[HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 -

例子

+## 例子 -

下述代码表示： root-x

+下述代码表示： ![root-x](/files/3201/msqrt.png) -

您的浏览器的渲染结果： x

+您的浏览器的渲染结果： x -
<math>
+```html
+
 
-  <msqrt>
-    <mi>x</mi>
-  </msqrt>
+  
+    x
+  
 
-</math>
-
+ +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

相关链接

+## 相关链接 -
    -
  • {{ MathMLElement("mroot") }} (Radical with an index)
    • -
+- {{ MathMLElement("mroot") }} (Radical with an index) diff --git a/files/zh-cn/web/mathml/element/msub/index.md b/files/zh-cn/web/mathml/element/msub/index.md index e099de8edc6c27..3106b3c8fab2c0 100644 --- a/files/zh-cn/web/mathml/element/msub/index.md +++ b/files/zh-cn/web/mathml/element/msub/index.md @@ -3,59 +3,54 @@ title: slug: Web/MathML/Element/msub translation_of: Web/MathML/Element/msub --- -
{{MathMLRef}}
+{{MathMLRef}} -

MathML<msub>元素用来为表达式加下标，语法如下：<msub> base subscript </msub>。

+MathML**``**元素用来为表达式加下标，语法如下：**` base subscript `**。 -

属性

+## 属性 -
-
class, id, style
-
供样式表使用。
-
href
-
用来设置标签点击后跳转的链接。
-
mathbackground
-
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
-
mathcolor
-
用来设置标签文字的颜色，同样可以使用#rgb、#rrggbb或者HTML 颜色名。
-
subscriptshift
-
用来设置下标相对于表达式的基线的最小距离，它是一个长度值。
-
+- class, id, style + - : 供[样式表](/zh-CN/docs/CSS)使用。 +- href + - : 用来设置标签点击后跳转的链接。 +- mathbackground + - : 用来设置标签的背景色，可以使用**`#rgb`**、**`#rrggbb`**或者[HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 +- mathcolor + - : 用来设置标签文字的颜色，同样可以使用**`#rgb`**、**`#rrggbb`**或者[HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 +- subscriptshift + - : 用来设置下标相对于表达式的基线的最小距离，它是一个[长度值](/zh-CN/docs/MathML/Attributes/Values#Lengths)。 -

例子

+## 例子 -

下述代码表示：x1

+下述代码表示：![x1](/files/3202/msub.png) -

您的浏览器的渲染结果： X 1

+您的浏览器的渲染结果： X 1 -
<math>
+```html
+
 
-  <msub>
-    <mi>X</mi>
-    <mn>1</mn>
-  </msub>
+  
+    X
+    1
+  
 
-</math>
-
+ +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

关于 Gecko 的特殊说明

+## 关于 Gecko 的特殊说明 -
    -
  • 从 Gecko 26.0 {{geckoRelease("26")}}开始，不允许使用<none />作为子元素。The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application of the superscriptshift attribute has been fixed (see {{bug("827713")}} for details).
    • -
+- 从 Gecko 26.0 {{geckoRelease("26")}}开始，不允许使用\作为子元素。The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application ` of the ``superscriptshift` attribute has been fixed (see {{bug("827713")}} for details). -

相关链接

+## 相关链接 -
    -
  • {{ MathMLElement("msup") }} (Superscript)
    • -
  • {{ MathMLElement("msubsup") }} (Subscript-superscript pair)
    • -
  • {{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)
    • -
+- {{ MathMLElement("msup") }} (Superscript) +- {{ MathMLElement("msubsup") }} (Subscript-superscript pair) +- {{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices) diff --git a/files/zh-cn/web/mathml/element/msubsup/index.md b/files/zh-cn/web/mathml/element/msubsup/index.md index 120b2de835d9a7..7595d911d11a18 100644 --- a/files/zh-cn/web/mathml/element/msubsup/index.md +++ b/files/zh-cn/web/mathml/element/msubsup/index.md @@ -6,64 +6,59 @@ tags: - MathML 参考 translation_of: Web/MathML/Element/msubsup --- -
{{MathMLRef}}
+{{MathMLRef}} -

MathML <msubsup> 元素用于为表达式同时附加上角标和下角标。

+MathML `` 元素用于为表达式同时附加上角标和下角标。 -

它的语法如下：<msubsup> base subscript superscript </msubsup>。

+它的语法如下：` base subscript superscript `。 -

属性

+## 属性 -
-
class、id、style
-
供样式使用。
-
href
-
Used to set a hyperlink to a specified URI.
-
mathbackground
-
背景颜色。支持 #rgb、#rrggbb 和 HTML 颜色名称。
-
mathcolor
-
文本颜色。支持 #rgb、#rrggbb 和 HTML 颜色名称。
-
subscriptshift {{deprecated_inline}}
-
The minimum space by which to shift the subscript below the baseline of the expression, as a length value.
- This attribute is deprecated and will be removed in the future.
-
superscriptshift {{deprecated_inline}}
-
The minimum space by which to shift the superscript above the baseline of the expression, as a length value.
- This attribute is deprecated and will be removed in the future.
-
+- `class`、`id`、`style` + - : 供[样式](/zh-CN/docs/CSS)使用。 +- `href` + - : Used to set a hyperlink to a specified URI. +- `mathbackground` + - : 背景颜色。支持 `#rgb`、`#rrggbb` 和 [HTML 颜色名称](/zh-CN/docs/CSS/color_value#Color_Keywords)。 +- `mathcolor` + - : 文本颜色。支持 `#rgb`、`#rrggbb` 和 [HTML 颜色名称](/zh-CN/docs/CSS/color_value#Color_Keywords)。 +- `subscriptshift` {{deprecated_inline}} + - : The minimum space by which to shift the subscript below the baseline of the expression, as a [length value.](/zh-CN/docs/MathML/Attributes/Values#Lengths) + This attribute is deprecated and will be removed in the future. +- `superscriptshift` {{deprecated_inline}} + - : The minimum space by which to shift the superscript above the baseline of the expression, as a [length value.](/zh-CN/docs/MathML/Attributes/Values#Lengths) + This attribute is deprecated and will be removed in the future. -

示例

+## 示例 -

示例渲染结果：

+示例渲染结果： -x1 +![x1](msubsup.png) -

当前浏览器中的渲染结果： ∫ 0 1

+当前浏览器中的渲染结果： ∫ 0 1 -
<math displaystyle="true">
+```html
+
 
-  <msubsup>
-    <mo> &#x222B;<!-- 积分符号 --> </mo>
-    <mn> 0 </mn>
-    <mn> 1 </mn>
-  </msubsup>
+  
+     ∫ 
+     0 
+     1 
+  
 
-</math>
-
+ +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 +{{Compat}} +## 参见 -

{{Compat}}

- -

参见

- -
    -
  • {{ MathMLElement("msub") }}（上标）
    • -
  • {{ MathMLElement("msup") }}（下标）
    • -
  • {{ MathMLElement("mmultiscripts") }}（Prescript 和 tensor indice）
    • -
+- {{ MathMLElement("msub") }}（上标） +- {{ MathMLElement("msup") }}（下标） +- {{ MathMLElement("mmultiscripts") }}（Prescript 和 tensor indice） diff --git a/files/zh-cn/web/mathml/element/msup/index.md b/files/zh-cn/web/mathml/element/msup/index.md index 227a892d0622e2..f2d7d612cd4fde 100644 --- a/files/zh-cn/web/mathml/element/msup/index.md +++ b/files/zh-cn/web/mathml/element/msup/index.md @@ -7,64 +7,57 @@ tags: - MathML 参考 translation_of: Web/MathML/Element/msup --- -
{{MathMLRef}}
+{{MathMLRef}} -

MathML <msup> 元素用于为表达式加上标。

+MathML **``** 元素用于为表达式加上标。 -

语法如下：<msup> base superscript </msup>。

+语法如下：` base superscript `。 -

属性

+## 属性 -
-
class, id, style
-
用来供样式表使用。
-
href
-
用来设置标签点击后跳转的链接。
-
mathbackground
-
用来设置背景色，可以使用 #rgb、#rrggbb 或者 HTML 颜色名。
-
mathcolor
-
用来设置文字颜色，同样可以使用 #rgb、#rrggbb 或者 HTML 颜色名。
-
superscriptshift {{deprecated_inline}}
-
用来设置上标相对于表达式的基线的最小距离，它是一个长度值。
- 此属性已被弃用，且将在未来被删除。
-
+- `class`, `id`, `style` + - : 用来供[样式表](/zh-CN/docs/Web/CSS)使用。 +- `href` + - : 用来设置标签点击后跳转的链接。 +- `mathbackground` + - : 用来设置背景色，可以使用 `#rgb`、`#rrggbb` 或者 [HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 +- `mathcolor` + - : 用来设置文字颜色，同样可以使用 `#rgb`、`#rrggbb` 或者 [HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 +- `superscriptshift` {{deprecated_inline}} + - : 用来设置上标相对于表达式的基线的最小距离，它是一个[长度值](/zh-CN/docs/MathML/Attributes/Values#Lengths)。 + 此属性已被弃用，且将在未来被删除。 -

例子

+## 例子 -

下述代码表示：x1

+下述代码表示：![x1](/files/3203/msup.png) -

您的浏览器的渲染结果： X 2

+您的浏览器的渲染结果： X 2 -
<math>
+```html
+
 
-  <msup>
-    <mi>X</mi>
-    <mn>2</mn>
-  </msup>
+  
+    X
+    2
+  
 
-</math>
-
+ +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 +{{Compat}} +### Gecko 说明 -

{{Compat}}

+- 从 Gecko 26.0 {{geckoRelease("26")}} 开始，不再支持使用 \ 作为子元素。并且渲染结果和 {{MathMLElement("msub")}} 和 {{MathMLElement("mmultiscripts")}} 这些等价配置更加接近，同时修复了一个关于 superscriptshift 属性错误使用的问题 (参阅 {{bug("827713")}}). -

Gecko 说明

+## 参见 -
    -
  • 从 Gecko 26.0 {{geckoRelease("26")}} 开始，不再支持使用 <none /> 作为子元素。并且渲染结果和 {{MathMLElement("msub")}} 和 {{MathMLElement("mmultiscripts")}} 这些等价配置更加接近，同时修复了一个关于 superscriptshift 属性错误使用的问题 (参阅 {{bug("827713")}}).
    • -
- -

参见

- -
    -
  • {{ MathMLElement("msub") }}（下标）
    • -
  • {{ MathMLElement("msubsup") }}（上下标）
    • -
  • {{ MathMLElement("mmultiscripts") }}（四角标，张量式标记）
    • -
+- {{ MathMLElement("msub") }}（下标） +- {{ MathMLElement("msubsup") }}（上下标） +- {{ MathMLElement("mmultiscripts") }}（四角标，张量式标记） diff --git a/files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.md b/files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.md index 73997e41837cd3..b6509777b7b82e 100644 --- a/files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.md +++ b/files/zh-cn/web/mathml/examples/mathml_pythagorean_theorem/index.md @@ -8,14 +8,14 @@ tags: - 数学 translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem --- -
{{MathMLRef}}
+{{MathMLRef}} -

现在，我们来证明毕达哥拉斯定理（勾股定理）：

+现在，我们来证明毕达哥拉斯定理（勾股定理）： -

命题：在一个直角三角形中，斜边的平方等于其他两边的平方之和。

+**命题**：在一个直角三角形中，斜边的平方等于其他两边的平方之和。 -

例如，设 a 和 b 为两直角边，c 为斜边，那么 a 2 + b 2 = c 2 。

+例如，设 a 和 b 为两直角边，c 为斜边，那么 a 2 + b 2 = c 2 。 -

证明： 我们可以通过代数证明来展示大正方形面积等于内正方形（斜边的平方）加上四个三角形的面积：

+\***\*证明：\*\*** 我们可以通过代数证明来展示大正方形面积等于内正方形（斜边的平方）加上四个三角形的面积： - ( a + b ) 2 = c 2 + 4 ⋅ ( 1 2 a b ) a 2 + 2 a b + b 2 = c 2 + 2 a ba 2 + b 2 = c 2 +( a + b ) 2 = c 2 + 4 ⋅ ( 1 2 a b ) a 2 + 2 a b + b 2 = c 2 + 2 a ba 2 + b 2 = c 2 diff --git a/files/zh-cn/web/mathml/index.md b/files/zh-cn/web/mathml/index.md index 8676e0aba4dd96..8e4f71360e1743 100644 --- a/files/zh-cn/web/mathml/index.md +++ b/files/zh-cn/web/mathml/index.md @@ -11,63 +11,47 @@ tags: - 数学 translation_of: Web/MathML --- -
{{MathMLRef}}
+{{MathMLRef}} -

Mathematical Markup Language (MathML) 是一个用于描述数学公式、符号的一种 XML 标记语言。

+**Mathematical Markup Language (MathML)** 是一个用于描述数学公式、符号的一种 [XML](/zh-CN/docs/XML) 标记语言。 -

在这里你可以找到有关的文档、例子和工具来帮助你使用这个强大的技术。如果想快速了解这项技术，请看Slides for the innovation fairs at Mozilla Summit 2013。

+在这里你可以找到有关的文档、例子和工具来帮助你使用这个强大的技术。如果想快速了解这项技术，请看[Slides for the innovation fairs at Mozilla Summit 2013](http://fred-wang.github.io/MozSummitMathML/index.html)。 -
-
-

MathML 参考文档

+## MathML 参考文档 -
-
MathML 元素参考
-
MathML 元素的细节和在桌面浏览器与移动设备浏览器上的兼容性情况。
-
MathML 属性参考
-
关于 MathML 属性的参考文档。用这些属性可以修改这些元素的显示效果。
-
MathML 例子
-
可以让你理解如何使用 MathML 的例子。
-
编写 MathML
-
编写 MathML 的一些建议和提示，包括建议使用的编辑器以及如何将编辑器的输出集成到网页中去。
-
+- [MathML 元素参考](/zh-CN/docs/Web/MathML/Element) + - : MathML 元素的细节和在桌面浏览器与移动设备浏览器上的兼容性情况。 +- [MathML 属性参考](/zh-CN/docs/Web/MathML/Attribute) + - : 关于 MathML 属性的参考文档。用这些属性可以修改这些元素的显示效果。 +- [MathML 例子](/zh-CN/docs/Web/MathML/Examples) + - : 可以让你理解如何使用 MathML 的例子。 +- [编写 MathML](/zh-CN/docs/Web/MathML/Authoring) + - : 编写 MathML 的一些建议和提示，包括建议使用的编辑器以及如何将编辑器的输出集成到网页中去。 -

查看全部...

-
+[查看全部...](/zh-CN/docs/tag/MathML) -
-

从社区获得帮助

+## 从社区获得帮助 - +- [IRC 频道](irc://irc.mozilla.org/%23mathml) +- [Mozilla 贡献者的 Wiki](https://wiki.mozilla.org/MathML:Home_Page) +- [W3C Math 主页](https://www.w3.org/Math/) +- [www-math w3.org 邮件存档](https://lists.w3.org/Archives/Public/www-math/) -

工具

+## 工具 - +- [W3C Validator](http://validator.w3.org) +- [Mathzilla Firefox 拓展收藏集](https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/) +- [TeXZilla](https://github.com/fred-wang/TeXZilla) - 基于 Javascript 的 LaTeX to MathML 转换器（[在线 demo](https://fred-wang.github.io/TeXZilla/)，[Firefox OS webapp](http://r-gaia-cs.github.io/TeXZilla-webapp/)，[Firefox 拓展](https://addons.mozilla.org/en-US/firefox/addon/texzilla/)，[在网页、JS 程序中使用，等等](https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla)） +- [LaTeXML](http://dlmf.nist.gov/LaTeXML/) - 将 LaTeX 文档转换为 HTML+MathML 网页 +- [Web Equation](http://webdemo.visionobjects.com/home.html#equation) - 将手写的公式转换为 MathML 或 LaTeX +- [MathJax](https://www.mathjax.org/) - 跨浏览器的 JavaScript 数学渲染引擎。若要强制 MathJax 使用原生 MathML，可以试试[这个 Mozilla 拓展](https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/)、这个 [Safari 拓展](https://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz)，或是这个 [UserScript 脚本](https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/)。 -

相关主题

+## 相关主题 - -
-
+- [CSS](/zh-CN/docs/Web/CSS) +- [HTML](/zh-CN/docs/Web/HTML) +- [SVG](/zh-CN/docs/Web/SVG) -

浏览器兼容性

+## 浏览器兼容性 - - -

{{Compat("mathml.elements.math", 0)}}

+{{Compat("mathml.elements.math", 0)}} diff --git a/files/zh-cn/web/media/autoplay_guide/index.md b/files/zh-cn/web/media/autoplay_guide/index.md index 8dbe4b5c0a2fef..037f978890c70e 100644 --- a/files/zh-cn/web/media/autoplay_guide/index.md +++ b/files/zh-cn/web/media/autoplay_guide/index.md @@ -4,263 +4,268 @@ slug: Web/Media/Autoplay_guide translation_of: Web/Media/Autoplay_guide original_slug: Web/媒体/Autoplay_guide --- -

网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。在这篇文章中，我们将介绍各种媒体和 Web Audio APIs 的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。

+网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。在这篇文章中，我们将介绍各种媒体和 Web Audio APIs 的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。 -

Autoplay blocking is not applied to {{HTMLElement("video")}} elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be audible, and autoplay blocking applies to them. Inaudible media are not affected by autoplay blocking.

+Autoplay blocking is _not_ applied to {{HTMLElement("video")}} elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be **audible**, and autoplay blocking applies to them. **Inaudible** media are not affected by autoplay blocking. -

自动播放 和 自动播放暂停

+## 自动播放 和 自动播放暂停 -

The term autoplay refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin. This includes both the use of HTML attributes to autoplay media as well as the user of JavaScript code to start playback outside the context of handling user input.

+The term **autoplay** refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin. This includes both the use of HTML attributes to autoplay media as well as the user of JavaScript code to start playback outside the context of handling user input. -

That means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy:

+That means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy: -
<audio src="/music.mp4" autoplay>
+```html +