From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../a_re-introduction_to_javascript/index.html | 949 +++++++++++++++++++++ .../uk/web/javascript/about_javascript/index.html | 61 ++ files/uk/web/javascript/closures/index.html | 471 ++++++++++ files/uk/web/javascript/data_structures/index.html | 305 +++++++ .../index.html | 330 +++++++ files/uk/web/javascript/eventloop/index.html | 152 ++++ .../control_flow_and_error_handling/index.html | 465 ++++++++++ .../guide/dokladno_pro_objectnu_model/index.html | 760 +++++++++++++++++ files/uk/web/javascript/guide/functions/index.html | 655 ++++++++++++++ .../javascript/guide/grammar_and_types/index.html | 716 ++++++++++++++++ files/uk/web/javascript/guide/index.html | 131 +++ .../guide/indexed_collections/index.html | 578 +++++++++++++ .../web/javascript/guide/introduction/index.html | 147 ++++ .../guide/iterators_and_generators/index.html | 214 +++++ .../guide/loops_and_iteration/index.html | 355 ++++++++ .../javascript/guide/numbers_and_dates/index.html | 383 +++++++++ .../guide/regular_expressions/index.html | 635 ++++++++++++++ .../web/javascript/guide/using_promises/index.html | 363 ++++++++ .../guide/working_with_objects/index.html | 490 +++++++++++ .../index.html" | 925 ++++++++++++++++++++ files/uk/web/javascript/index.html | 119 +++ .../inheritance_and_the_prototype_chain/index.html | 306 +++++++ .../uk/web/javascript/memory_management/index.html | 204 +++++ .../javascript/new_in_javascript/1.7/index.html | 38 + .../uk/web/javascript/new_in_javascript/index.html | 73 ++ .../oglyad_tehnologiy_javascript/index.html | 87 ++ .../reference/classes/constructor/index.html | 119 +++ .../reference/classes/extends/index.html | 112 +++ .../uk/web/javascript/reference/classes/index.html | 418 +++++++++ .../javascript/reference/classes/static/index.html | 137 +++ .../deprecated_and_obsolete_features/index.html | 293 +++++++ .../the_legacy_iterator_protocol/index.html | 76 ++ .../reference/errors/cant_delete/index.html | 59 ++ .../errors/deprecated_tolocaleformat/index.html | 93 ++ .../uk/web/javascript/reference/errors/index.html | 31 + .../errors/invalid_for-in_initializer/index.html | 77 ++ .../reference/errors/json_bad_parse/index.html | 112 +++ .../errors/more_arguments_needed/index.html | 46 + .../errors/negative_repetition_count/index.html | 48 ++ .../reference/errors/not_a_constructor/index.html | 91 ++ .../reference/errors/not_a_function/index.html | 124 +++ .../errors/resulting_string_too_large/index.html | 53 ++ .../functions/arguments/@@iterator/index.html | 77 ++ .../functions/arguments/caller/index.html | 55 ++ .../reference/functions/arguments/index.html | 282 ++++++ .../functions/arguments/length/index.html | 85 ++ .../javascript/reference/functions/get/index.html | 175 ++++ .../web/javascript/reference/functions/index.html | 605 +++++++++++++ .../functions/method_definitions/index.html | 219 +++++ .../javascript/reference/functions/set/index.html | 152 ++++ .../index.html" | 211 +++++ .../index.html" | 362 ++++++++ .../global_objects/array/@@iterator/index.html | 116 +++ .../global_objects/array/@@species/index.html | 72 ++ .../global_objects/array/@@unscopables/index.html | 76 ++ .../global_objects/array/array/index.html | 87 ++ .../global_objects/array/concat/index.html | 168 ++++ .../global_objects/array/copywithin/index.html | 188 ++++ .../global_objects/array/entries/index.html | 96 +++ .../global_objects/array/every/index.html | 195 +++++ .../reference/global_objects/array/fill/index.html | 155 ++++ .../global_objects/array/filter/index.html | 235 +++++ .../reference/global_objects/array/find/index.html | 233 +++++ .../global_objects/array/findindex/index.html | 187 ++++ .../reference/global_objects/array/flat/index.html | 150 ++++ .../global_objects/array/flatmap/index.html | 152 ++++ .../global_objects/array/foreach/index.html | 290 +++++++ .../reference/global_objects/array/from/index.html | 242 ++++++ .../global_objects/array/includes/index.html | 135 +++ .../reference/global_objects/array/index.html | 431 ++++++++++ .../global_objects/array/indexof/index.html | 260 ++++++ .../global_objects/array/isarray/index.html | 131 +++ .../reference/global_objects/array/join/index.html | 114 +++ .../reference/global_objects/array/keys/index.html | 82 ++ .../global_objects/array/lastindexof/index.html | 166 ++++ .../global_objects/array/length/index.html | 139 +++ .../reference/global_objects/array/map/index.html | 349 ++++++++ .../global_objects/array/observe/index.html | 89 ++ .../reference/global_objects/array/of/index.html | 100 +++ .../reference/global_objects/array/pop/index.html | 118 +++ .../global_objects/array/prototype/index.html | 185 ++++ .../reference/global_objects/array/push/index.html | 136 +++ .../global_objects/array/reduce/index.html | 578 +++++++++++++ .../global_objects/array/reduceright/index.html | 364 ++++++++ .../global_objects/array/reverse/index.html | 89 ++ .../global_objects/array/shift/index.html | 141 +++ .../global_objects/array/slice/index.html | 242 ++++++ .../reference/global_objects/array/some/index.html | 206 +++++ .../reference/global_objects/array/sort/index.html | 274 ++++++ .../global_objects/array/splice/index.html | 162 ++++ .../global_objects/array/tolocalestring/index.html | 182 ++++ .../global_objects/array/tosource/index.html | 72 ++ .../global_objects/array/tostring/index.html | 80 ++ .../global_objects/array/unobserve/index.html | 89 ++ .../global_objects/array/unshift/index.html | 123 +++ .../global_objects/array/values/index.html | 93 ++ .../global_objects/asyncfunction/index.html | 128 +++ .../asyncfunction/prototype/index.html | 59 ++ .../global_objects/bigint/asintn/index.html | 78 ++ .../global_objects/bigint/asuintn/index.html | 77 ++ .../global_objects/bigint/bigint/index.html | 64 ++ .../reference/global_objects/bigint/index.html | 302 +++++++ .../bigint/tolocalestring/index.html | 123 +++ .../global_objects/bigint/tostring/index.html | 93 ++ .../global_objects/bigint/valueof/index.html | 57 ++ .../global_objects/boolean/boolean/index.html | 75 ++ .../reference/global_objects/boolean/index.html | 157 ++++ .../global_objects/boolean/prototype/index.html | 82 ++ .../global_objects/boolean/tosource/index.html | 58 ++ .../global_objects/boolean/tostring/index.html | 99 +++ .../global_objects/boolean/valueof/index.html | 94 ++ .../global_objects/date/@@toprimitive/index.html | 73 ++ .../reference/global_objects/date/date/index.html | 135 +++ .../global_objects/date/getdate/index.html | 64 ++ .../global_objects/date/getday/index.html | 77 ++ .../global_objects/date/getfullyear/index.html | 68 ++ .../global_objects/date/gethours/index.html | 65 ++ .../global_objects/date/getmilliseconds/index.html | 61 ++ .../global_objects/date/getminutes/index.html | 61 ++ .../global_objects/date/getmonth/index.html | 74 ++ .../global_objects/date/getseconds/index.html | 63 ++ .../global_objects/date/gettime/index.html | 109 +++ .../date/gettimezoneoffset/index.html | 97 +++ .../global_objects/date/getutcdate/index.html | 60 ++ .../global_objects/date/getutcday/index.html | 62 ++ .../global_objects/date/getutcfullyear/index.html | 65 ++ .../global_objects/date/getutchours/index.html | 61 ++ .../date/getutcmilliseconds/index.html | 63 ++ .../global_objects/date/getutcminutes/index.html | 59 ++ .../global_objects/date/getutcmonth/index.html | 61 ++ .../global_objects/date/getutcseconds/index.html | 61 ++ .../global_objects/date/getyear/index.html | 107 +++ .../reference/global_objects/date/index.html | 269 ++++++ .../reference/global_objects/date/now/index.html | 86 ++ .../reference/global_objects/date/parse/index.html | 198 +++++ .../global_objects/date/setdate/index.html | 79 ++ .../global_objects/date/setfullyear/index.html | 77 ++ .../global_objects/date/sethours/index.html | 82 ++ .../global_objects/date/setmilliseconds/index.html | 70 ++ .../global_objects/date/setminutes/index.html | 80 ++ .../global_objects/date/setmonth/index.html | 83 ++ .../global_objects/date/setseconds/index.html | 78 ++ .../global_objects/date/settime/index.html | 71 ++ .../global_objects/date/setutcdate/index.html | 70 ++ .../global_objects/date/setutcfullyear/index.html | 76 ++ .../global_objects/date/setutchours/index.html | 78 ++ .../date/setutcmilliseconds/index.html | 70 ++ .../global_objects/date/setutcminutes/index.html | 76 ++ .../global_objects/date/setutcmonth/index.html | 74 ++ .../global_objects/date/setutcseconds/index.html | 74 ++ .../global_objects/date/setyear/index.html | 74 ++ .../global_objects/date/todatestring/index.html | 81 ++ .../global_objects/date/togmtstring/index.html | 64 ++ .../global_objects/date/toisostring/index.html | 93 ++ .../global_objects/date/tojson/index.html | 69 ++ .../date/tolocaledatestring/index.html | 154 ++++ .../global_objects/date/tolocalestring/index.html | 178 ++++ .../date/tolocaletimestring/index.html | 152 ++++ .../global_objects/date/tosource/index.html | 49 ++ .../global_objects/date/tostring/index.html | 110 +++ .../global_objects/date/totimestring/index.html | 68 ++ .../global_objects/date/toutcstring/index.html | 109 +++ .../reference/global_objects/date/utc/index.html | 153 ++++ .../global_objects/date/valueof/index.html | 65 ++ .../global_objects/error/columnnumber/index.html | 44 + .../global_objects/error/error/index.html | 63 ++ .../global_objects/error/filename/index.html | 47 + .../reference/global_objects/error/index.html | 216 +++++ .../global_objects/error/linenumber/index.html | 56 ++ .../global_objects/error/message/index.html | 57 ++ .../reference/global_objects/error/name/index.html | 57 ++ .../global_objects/error/prototype/index.html | 114 +++ .../global_objects/error/stack/index.html | 125 +++ .../global_objects/error/tosource/index.html | 59 ++ .../global_objects/error/tostring/index.html | 98 +++ .../reference/global_objects/eval/index.html | 323 +++++++ .../reference/global_objects/evalerror/index.html | 98 +++ .../global_objects/evalerror/prototype/index.html | 89 ++ .../global_objects/function/apply/index.html | 239 ++++++ .../global_objects/function/arguments/index.html | 92 ++ .../global_objects/function/arity/index.html | 31 + .../global_objects/function/bind/index.html | 329 +++++++ .../global_objects/function/call/index.html | 168 ++++ .../global_objects/function/caller/index.html | 82 ++ .../global_objects/function/displayname/index.html | 80 ++ .../reference/global_objects/function/index.html | 155 ++++ .../global_objects/function/isgenerator/index.html | 56 ++ .../global_objects/function/length/index.html | 91 ++ .../global_objects/function/name/index.html | 223 +++++ .../global_objects/function/prototype/index.html | 99 +++ .../global_objects/function/tosource/index.html | 70 ++ .../global_objects/function/tostring/index.html | 233 +++++ .../reference/global_objects/generator/index.html | 138 +++ .../global_objects/generator/next/index.html | 114 +++ .../global_objects/generator/return/index.html | 101 +++ .../global_objects/generator/throw/index.html | 100 +++ .../global_objects/generatorfunction/index.html | 114 +++ .../generatorfunction/prototype/index.html | 65 ++ .../reference/global_objects/globalthis/index.html | 87 ++ .../javascript/reference/global_objects/index.html | 193 +++++ .../reference/global_objects/infinity/index.html | 79 ++ .../global_objects/internalerror/index.html | 83 ++ .../internalerror/prototype/index.html | 62 ++ .../reference/global_objects/isfinite/index.html | 88 ++ .../reference/global_objects/isnan/index.html | 190 +++++ .../reference/global_objects/json/index.html | 158 ++++ .../reference/global_objects/json/parse/index.html | 133 +++ .../global_objects/json/stringify/index.html | 321 +++++++ .../reference/global_objects/map/index.html | 201 +++++ .../reference/global_objects/math/abs/index.html | 104 +++ .../reference/global_objects/math/acos/index.html | 110 +++ .../reference/global_objects/math/acosh/index.html | 91 ++ .../reference/global_objects/math/asin/index.html | 103 +++ .../reference/global_objects/math/asinh/index.html | 92 ++ .../reference/global_objects/math/atan/index.html | 106 +++ .../reference/global_objects/math/atan2/index.html | 119 +++ .../reference/global_objects/math/atanh/index.html | 92 ++ .../reference/global_objects/math/cbrt/index.html | 100 +++ .../reference/global_objects/math/ceil/index.html | 174 ++++ .../reference/global_objects/math/clz32/index.html | 113 +++ .../reference/global_objects/math/cos/index.html | 83 ++ .../reference/global_objects/math/cosh/index.html | 93 ++ .../reference/global_objects/math/e/index.html | 85 ++ .../reference/global_objects/math/exp/index.html | 76 ++ .../reference/global_objects/math/expm1/index.html | 85 ++ .../reference/global_objects/math/floor/index.html | 164 ++++ .../global_objects/math/fround/index.html | 114 +++ .../reference/global_objects/math/hypot/index.html | 119 +++ .../reference/global_objects/math/imul/index.html | 97 +++ .../reference/global_objects/math/index.html | 153 ++++ .../reference/global_objects/math/ln10/index.html | 66 ++ .../reference/global_objects/math/ln2/index.html | 70 ++ .../reference/global_objects/math/log/index.html | 113 +++ .../reference/global_objects/math/log10/index.html | 92 ++ .../global_objects/math/log10e/index.html | 66 ++ .../reference/global_objects/math/log1p/index.html | 94 ++ .../reference/global_objects/math/log2/index.html | 102 +++ .../reference/global_objects/math/log2e/index.html | 66 ++ .../reference/global_objects/math/max/index.html | 102 +++ .../reference/global_objects/math/min/index.html | 98 +++ .../reference/global_objects/math/pi/index.html | 64 ++ .../reference/global_objects/math/pow/index.html | 117 +++ .../global_objects/math/random/index.html | 113 +++ .../reference/global_objects/math/sign/index.html | 116 +++ .../reference/global_objects/math/sin/index.html | 78 ++ .../reference/global_objects/math/sinh/index.html | 93 ++ .../reference/global_objects/math/sqrt/index.html | 81 ++ .../global_objects/math/sqrt1_2/index.html | 65 ++ .../reference/global_objects/math/sqrt2/index.html | 65 ++ .../reference/global_objects/math/tan/index.html | 83 ++ .../reference/global_objects/math/tanh/index.html | 85 ++ .../reference/global_objects/math/trunc/index.html | 128 +++ .../index.html" | 194 +++++ .../reference/global_objects/nan/index.html | 91 ++ .../reference/global_objects/null/index.html | 93 ++ .../object/__definegetter__/index.html | 101 +++ .../object/__definesetter__/index.html | 116 +++ .../object/__lookupgetter__/index.html | 89 ++ .../object/__lookupsetter__/index.html | 89 ++ .../global_objects/object/assign/index.html | 273 ++++++ .../global_objects/object/constructor/index.html | 237 +++++ .../global_objects/object/count/index.html | 44 + .../global_objects/object/create/index.html | 406 +++++++++ .../object/defineproperties/index.html | 198 +++++ .../object/defineproperty/index.html | 501 +++++++++++ .../global_objects/object/entries/index.html | 157 ++++ .../global_objects/object/eval/index.html | 46 + .../global_objects/object/freeze/index.html | 256 ++++++ .../global_objects/object/fromentries/index.html | 112 +++ .../global_objects/object/getnotifier/index.html | 52 ++ .../object/getownpropertydescriptor/index.html | 159 ++++ .../object/getownpropertydescriptors/index.html | 118 +++ .../object/getownpropertynames/index.html | 175 ++++ .../object/getownpropertysymbols/index.html | 91 ++ .../object/getprototypeof/index.html | 98 +++ .../object/hasownproperty/index.html | 158 ++++ .../reference/global_objects/object/index.html | 267 ++++++ .../reference/global_objects/object/is/index.html | 128 +++ .../global_objects/object/isextensible/index.html | 112 +++ .../global_objects/object/isfrozen/index.html | 178 ++++ .../global_objects/object/isprototypeof/index.html | 125 +++ .../global_objects/object/issealed/index.html | 139 +++ .../global_objects/object/keys/index.html | 171 ++++ .../global_objects/object/nosuchmethod/index.html | 166 ++++ .../global_objects/object/object/index.html | 84 ++ .../global_objects/object/observe/index.html | 153 ++++ .../global_objects/object/parent/index.html | 41 + .../object/preventextensions/index.html | 139 +++ .../object/propertyisenumerable/index.html | 149 ++++ .../global_objects/object/proto/index.html | 127 +++ .../global_objects/object/seal/index.html | 151 ++++ .../object/setprototypeof/index.html | 220 +++++ .../object/tolocalestring/index.html | 111 +++ .../global_objects/object/tosource/index.html | 132 +++ .../global_objects/object/tostring/index.html | 148 ++++ .../global_objects/object/unobserve/index.html | 102 +++ .../global_objects/object/unwatch/index.html | 71 ++ .../global_objects/object/valueof/index.html | 115 +++ .../global_objects/object/values/index.html | 104 +++ .../global_objects/object/watch/index.html | 153 ++++ .../reference/global_objects/parsefloat/index.html | 111 +++ .../reference/global_objects/parseint/index.html | 215 +++++ .../global_objects/promise/all/index.html | 232 +++++ .../global_objects/promise/allsettled/index.html | 67 ++ .../global_objects/promise/any/index.html | 86 ++ .../global_objects/promise/catch/index.html | 189 ++++ .../global_objects/promise/finally/index.html | 103 +++ .../reference/global_objects/promise/index.html | 232 +++++ .../global_objects/promise/promise/index.html | 77 ++ .../global_objects/promise/prototype/index.html | 69 ++ .../global_objects/promise/race/index.html | 177 ++++ .../global_objects/promise/resolve/index.html | 137 +++ .../global_objects/promise/then/index.html | 297 +++++++ .../index.html" | 73 ++ .../reference/global_objects/proxy/index.html | 399 +++++++++ .../reference/global_objects/rangeerror/index.html | 141 +++ .../global_objects/rangeerror/prototype/index.html | 89 ++ .../global_objects/referenceerror/index.html | 108 +++ .../referenceerror/prototype/index.html | 90 ++ .../reference/global_objects/reflect/index.html | 82 ++ .../global_objects/regexp/exec/index.html | 227 +++++ .../reference/global_objects/regexp/index.html | 699 +++++++++++++++ .../global_objects/regexp/source/index.html | 170 ++++ .../global_objects/regexp/test/index.html | 151 ++++ .../reference/global_objects/set/index.html | 242 ++++++ .../global_objects/string/@@iterator/index.html | 78 ++ .../global_objects/string/anchor/index.html | 83 ++ .../reference/global_objects/string/big/index.html | 73 ++ .../global_objects/string/blink/index.html | 70 ++ .../global_objects/string/bold/index.html | 66 ++ .../global_objects/string/charat/index.html | 316 +++++++ .../global_objects/string/charcodeat/index.html | 161 ++++ .../global_objects/string/codepointat/index.html | 142 +++ .../global_objects/string/concat/index.html | 89 ++ .../global_objects/string/endswith/index.html | 90 ++ .../global_objects/string/fixed/index.html | 62 ++ .../global_objects/string/fontcolor/index.html | 81 ++ .../global_objects/string/fontsize/index.html | 80 ++ .../global_objects/string/fromcharcode/index.html | 109 +++ .../global_objects/string/fromcodepoint/index.html | 171 ++++ .../global_objects/string/includes/index.html | 125 +++ .../reference/global_objects/string/index.html | 374 ++++++++ .../global_objects/string/indexof/index.html | 154 ++++ .../global_objects/string/italics/index.html | 65 ++ .../global_objects/string/lastindexof/index.html | 107 +++ .../global_objects/string/length/index.html | 105 +++ .../global_objects/string/link/index.html | 72 ++ .../global_objects/string/localecompare/index.html | 173 ++++ .../global_objects/string/match/index.html | 194 +++++ .../global_objects/string/matchall/index.html | 143 ++++ .../global_objects/string/normalize/index.html | 226 +++++ .../global_objects/string/padend/index.html | 66 ++ .../global_objects/string/padstart/index.html | 84 ++ .../global_objects/string/quote/index.html | 77 ++ .../reference/global_objects/string/raw/index.html | 117 +++ .../global_objects/string/repeat/index.html | 119 +++ .../global_objects/string/replace/index.html | 240 ++++++ .../global_objects/string/replaceall/index.html | 169 ++++ .../global_objects/string/search/index.html | 107 +++ .../global_objects/string/slice/index.html | 116 +++ .../global_objects/string/small/index.html | 70 ++ .../global_objects/string/split/index.html | 220 +++++ .../global_objects/string/startswith/index.html | 96 +++ .../global_objects/string/strike/index.html | 67 ++ .../global_objects/string/string/index.html | 64 ++ .../reference/global_objects/string/sub/index.html | 68 ++ .../global_objects/string/substr/index.html | 118 +++ .../global_objects/string/substring/index.html | 181 ++++ .../reference/global_objects/string/sup/index.html | 66 ++ .../string/tolocalelowercase/index.html | 106 +++ .../string/tolocaleuppercase/index.html | 107 +++ .../global_objects/string/tolowercase/index.html | 74 ++ .../global_objects/string/tosource/index.html | 56 ++ .../global_objects/string/tostring/index.html | 65 ++ .../global_objects/string/touppercase/index.html | 88 ++ .../global_objects/string/trim/index.html | 84 ++ .../global_objects/string/trimend/index.html | 80 ++ .../global_objects/string/trimstart/index.html | 115 +++ .../global_objects/string/valueof/index.html | 64 ++ .../global_objects/symbol/asynciterator/index.html | 86 ++ .../global_objects/symbol/description/index.html | 67 ++ .../global_objects/symbol/hasinstance/index.html | 81 ++ .../reference/global_objects/symbol/index.html | 466 ++++++++++ .../symbol/isconcatspreadable/index.html | 99 +++ .../global_objects/symbol/iterator/index.html | 116 +++ .../global_objects/symbol/match/index.html | 71 ++ .../global_objects/symbol/matchall/index.html | 78 ++ .../global_objects/symbol/replace/index.html | 66 ++ .../global_objects/symbol/search/index.html | 66 ++ .../global_objects/symbol/species/index.html | 69 ++ .../global_objects/symbol/split/index.html | 66 ++ .../global_objects/symbol/symbol/index.html | 83 ++ .../global_objects/symbol/toprimitive/index.html | 75 ++ .../global_objects/symbol/tostringtag/index.html | 99 +++ .../global_objects/symbol/unscopables/index.html | 89 ++ .../global_objects/syntaxerror/index.html | 115 +++ .../syntaxerror/prototype/index.html | 88 ++ .../reference/global_objects/typeerror/index.html | 118 +++ .../global_objects/typeerror/prototype/index.html | 87 ++ .../reference/global_objects/undefined/index.html | 140 +++ .../reference/global_objects/uneval/index.html | 68 ++ .../reference/global_objects/urierror/index.html | 116 +++ .../global_objects/urierror/prototype/index.html | 88 ++ .../epsilon/index.html" | 67 ++ .../index.html" | 186 ++++ .../isfinite/index.html" | 86 ++ .../isinteger/index.html" | 94 ++ .../isnan/index.html" | 100 +++ .../issafeinteger/index.html" | 95 +++ .../max_safe_integer/index.html" | 78 ++ .../max_value/index.html" | 64 ++ .../min_safe_integer/index.html" | 62 ++ .../min_value/index.html" | 66 ++ .../nan/index.html" | 59 ++ .../negative_infinity/index.html" | 82 ++ .../number/index.html" | 63 ++ .../parsefloat/index.html" | 88 ++ .../parseint/index.html" | 83 ++ .../positive_infinity/index.html" | 82 ++ .../prototype/index.html" | 89 ++ .../toexponential/index.html" | 89 ++ .../tofixed/index.html" | 95 +++ .../tolocalestring/index.html" | 154 ++++ .../toprecision/index.html" | 88 ++ .../tosource/index.html" | 54 ++ .../tostring/index.html" | 97 +++ .../valueof/index.html" | 67 ++ files/uk/web/javascript/reference/index.html | 50 ++ .../reference/lexical_grammar/index.html | 673 +++++++++++++++ .../reference/operators/addition/index.html | 81 ++ .../operators/addition_assignment/index.html | 77 ++ .../operators/arithmetic_operators/index.html | 313 +++++++ .../operators/array_comprehensions/index.html | 198 +++++ .../reference/operators/assignment/index.html | 61 ++ .../reference/operators/async_function/index.html | 115 +++ .../reference/operators/await/index.html | 126 +++ .../reference/operators/bitwise_and/index.html | 111 +++ .../operators/bitwise_and_assignment/index.html | 60 ++ .../reference/operators/bitwise_not/index.html | 99 +++ .../operators/bitwise_operators/index.html | 559 ++++++++++++ .../reference/operators/bitwise_or/index.html | 113 +++ .../operators/bitwise_or_assignment/index.html | 61 ++ .../reference/operators/bitwise_xor/index.html | 113 +++ .../operators/bitwise_xor_assignment/index.html | 61 ++ .../reference/operators/class/index.html | 122 +++ .../reference/operators/comma_operator/index.html | 90 ++ .../operators/conditional_operator/index.html | 109 +++ .../reference/operators/decrement/index.html | 82 ++ .../reference/operators/delete/index.html | 298 +++++++ .../reference/operators/division/index.html | 75 ++ .../operators/division_assignment/index.html | 61 ++ .../reference/operators/equality/index.html | 125 +++ .../reference/operators/exponentiation/index.html | 102 +++ .../operators/exponentiation_assignment/index.html | 60 ++ .../operators/expression_closures/index.html | 78 ++ .../reference/operators/function/index.html | 154 ++++ .../reference/operators/function_star_/index.html | 90 ++ .../operators/generator_comprehensions/index.html | 174 ++++ .../reference/operators/greater_than/index.html | 114 +++ .../operators/greater_than_or_equal/index.html | 99 +++ .../reference/operators/grouping/index.html | 90 ++ .../javascript/reference/operators/in/index.html | 150 ++++ .../reference/operators/increment/index.html | 80 ++ .../web/javascript/reference/operators/index.html | 273 ++++++ .../reference/operators/inequality/index.html | 97 +++ .../reference/operators/instanceof/index.html | 186 ++++ .../reference/operators/left_shift/index.html | 73 ++ .../operators/left_shift_assignment/index.html | 60 ++ .../reference/operators/less_than/index.html | 99 +++ .../operators/less_than_or_equal/index.html | 101 +++ .../reference/operators/logical_and/index.html | 142 +++ .../reference/operators/logical_not/index.html | 105 +++ .../operators/logical_operators/index.html | 252 ++++++ .../reference/operators/logical_or/index.html | 151 ++++ .../reference/operators/multiplication/index.html | 73 ++ .../operators/multiplication_assignment/index.html | 60 ++ .../reference/operators/new.target/index.html | 97 +++ .../javascript/reference/operators/new/index.html | 197 +++++ .../nullish_coalescing_operator/index.html | 166 ++++ .../operators/operator_precedence/index.html | 332 +++++++ .../operators/optional_chaining/index.html | 194 +++++ .../operators/pipeline_operator/index.html | 87 ++ .../operators/property_accessors/index.html | 157 ++++ .../reference/operators/remainder/index.html | 77 ++ .../operators/remainder_assignment/index.html | 61 ++ .../reference/operators/right_shift/index.html | 74 ++ .../operators/right_shift_assignment/index.html | 60 ++ .../reference/operators/spread_syntax/index.html | 253 ++++++ .../reference/operators/strict_equality/index.html | 105 +++ .../operators/strict_inequality/index.html | 99 +++ .../reference/operators/subtraction/index.html | 67 ++ .../operators/subtraction_assignment/index.html | 60 ++ .../reference/operators/super/index.html | 184 ++++ .../javascript/reference/operators/this/index.html | 408 +++++++++ .../reference/operators/typeof/index.html | 278 ++++++ .../reference/operators/unary_negation/index.html | 77 ++ .../reference/operators/unary_plus/index.html | 78 ++ .../operators/unsigned_right_shift/index.html | 74 ++ .../unsigned_right_shift_assignment/index.html | 60 ++ .../javascript/reference/operators/void/index.html | 123 +++ .../reference/operators/yield/index.html | 121 +++ .../reference/operators/yield_star_/index.html | 162 ++++ .../index.html" | 453 ++++++++++ .../index.html" | 282 ++++++ .../index.html" | 244 ++++++ .../index.html" | 418 +++++++++ .../index.html" | 296 +++++++ .../reference/statements/async_function/index.html | 272 ++++++ .../reference/statements/block/index.html | 132 +++ .../reference/statements/break/index.html | 151 ++++ .../reference/statements/class/index.html | 119 +++ .../reference/statements/const/index.html | 232 +++++ .../reference/statements/continue/index.html | 164 ++++ .../reference/statements/debugger/index.html | 78 ++ .../reference/statements/default/index.html | 117 +++ .../reference/statements/do...while/index.html | 101 +++ .../reference/statements/empty/index.html | 105 +++ .../reference/statements/export/index.html | 205 +++++ .../reference/statements/for-await...of/index.html | 253 ++++++ .../reference/statements/for...in/index.html | 149 ++++ .../reference/statements/for...of/index.html | 319 +++++++ .../javascript/reference/statements/for/index.html | 165 ++++ .../reference/statements/function/index.html | 179 ++++ .../reference/statements/function_star_/index.html | 268 ++++++ .../reference/statements/if...else/index.html | 173 ++++ .../web/javascript/reference/statements/index.html | 130 +++ .../reference/statements/label/index.html | 182 ++++ .../javascript/reference/statements/let/index.html | 272 ++++++ .../reference/statements/return/index.html | 159 ++++ .../reference/statements/switch/index.html | 295 +++++++ .../reference/statements/throw/index.html | 198 +++++ .../reference/statements/try...catch/index.html | 319 +++++++ .../javascript/reference/statements/var/index.html | 226 +++++ .../reference/statements/while/index.html | 104 +++ .../reference/statements/with/index.html | 107 +++ .../javascript/reference/strict_mode/index.html | 364 ++++++++ .../reference/template_literals/index.html | 259 ++++++ .../reference/trailing_commas/index.html | 171 ++++ .../index.html" | 352 ++++++++ .../index.html" | 494 +++++++++++ 540 files changed, 79184 insertions(+) create mode 100644 files/uk/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/uk/web/javascript/about_javascript/index.html create mode 100644 files/uk/web/javascript/closures/index.html create mode 100644 files/uk/web/javascript/data_structures/index.html create mode 100644 files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/uk/web/javascript/eventloop/index.html create mode 100644 files/uk/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html create mode 100644 files/uk/web/javascript/guide/functions/index.html create mode 100644 files/uk/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/uk/web/javascript/guide/index.html create mode 100644 files/uk/web/javascript/guide/indexed_collections/index.html create mode 100644 files/uk/web/javascript/guide/introduction/index.html create mode 100644 files/uk/web/javascript/guide/iterators_and_generators/index.html create mode 100644 files/uk/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/uk/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/uk/web/javascript/guide/regular_expressions/index.html create mode 100644 files/uk/web/javascript/guide/using_promises/index.html create mode 100644 files/uk/web/javascript/guide/working_with_objects/index.html create mode 100644 "files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" create mode 100644 files/uk/web/javascript/index.html create mode 100644 files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/uk/web/javascript/memory_management/index.html create mode 100644 files/uk/web/javascript/new_in_javascript/1.7/index.html create mode 100644 files/uk/web/javascript/new_in_javascript/index.html create mode 100644 files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html create mode 100644 files/uk/web/javascript/reference/classes/constructor/index.html create mode 100644 files/uk/web/javascript/reference/classes/extends/index.html create mode 100644 files/uk/web/javascript/reference/classes/index.html create mode 100644 files/uk/web/javascript/reference/classes/static/index.html create mode 100644 files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html create mode 100644 files/uk/web/javascript/reference/errors/cant_delete/index.html create mode 100644 files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html create mode 100644 files/uk/web/javascript/reference/errors/index.html create mode 100644 files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html create mode 100644 files/uk/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/uk/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/uk/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/uk/web/javascript/reference/errors/not_a_constructor/index.html create mode 100644 files/uk/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/caller/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/uk/web/javascript/reference/functions/get/index.html create mode 100644 files/uk/web/javascript/reference/functions/index.html create mode 100644 files/uk/web/javascript/reference/functions/method_definitions/index.html create mode 100644 files/uk/web/javascript/reference/functions/set/index.html create mode 100644 "files/uk/web/javascript/reference/functions/\321\200\320\265\321\210\321\202\320\260_\320\277\320\260\321\200\320\260\320\274\320\265\321\202\321\200\321\226\320\262/index.html" create mode 100644 "files/uk/web/javascript/reference/functions/\321\201\321\202\321\200\321\226\320\273\320\272\320\276\320\262\321\226_\321\204\321\203\320\275\320\272\321\206\321\226\321\227/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/array/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/observe/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/unobserve/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/date/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/error/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/stack/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/globalthis/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/json/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/map/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/atanh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/clz32/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/cosh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log1p/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 "files/uk/web/javascript/reference/global_objects/math/\320\267\320\260\320\276\320\272\321\200\321\203\320\263\320\265\320\273\320\275\320\275\321\217/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/null/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/count/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/eval/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/fromentries/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/object/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/parent/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/unobserve/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/unwatch/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/watch/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/any/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/promise/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 "files/uk/web/javascript/reference/global_objects/promise/\320\262\321\226\320\264\321\205\320\270\320\273\320\265\320\275\320\276/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/exec/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/source/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/set/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/anchor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/big/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/blink/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/bold/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/codepointat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fixed/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fontsize/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/italics/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/localecompare/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/matchall/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/padend/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/padstart/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/quote/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/replaceall/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/search/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/small/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/strike/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/string/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/sub/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/sup/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/trimend/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/trimstart/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/description/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/match/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/replace/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/search/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/species/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/split/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/epsilon/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isfinite/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isinteger/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isnan/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/issafeinteger/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_safe_integer/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_value/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_safe_integer/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_value/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/nan/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/negative_infinity/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/number/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parsefloat/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parseint/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/positive_infinity/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/prototype/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toexponential/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tofixed/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tolocalestring/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toprecision/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tosource/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tostring/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/valueof/index.html" create mode 100644 files/uk/web/javascript/reference/index.html create mode 100644 files/uk/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/uk/web/javascript/reference/operators/addition/index.html create mode 100644 files/uk/web/javascript/reference/operators/addition_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/arithmetic_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/array_comprehensions/index.html create mode 100644 files/uk/web/javascript/reference/operators/assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/async_function/index.html create mode 100644 files/uk/web/javascript/reference/operators/await/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_and/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_not/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_or/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_xor/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/class/index.html create mode 100644 files/uk/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/decrement/index.html create mode 100644 files/uk/web/javascript/reference/operators/delete/index.html create mode 100644 files/uk/web/javascript/reference/operators/division/index.html create mode 100644 files/uk/web/javascript/reference/operators/division_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/equality/index.html create mode 100644 files/uk/web/javascript/reference/operators/exponentiation/index.html create mode 100644 files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/expression_closures/index.html create mode 100644 files/uk/web/javascript/reference/operators/function/index.html create mode 100644 files/uk/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/uk/web/javascript/reference/operators/generator_comprehensions/index.html create mode 100644 files/uk/web/javascript/reference/operators/greater_than/index.html create mode 100644 files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html create mode 100644 files/uk/web/javascript/reference/operators/grouping/index.html create mode 100644 files/uk/web/javascript/reference/operators/in/index.html create mode 100644 files/uk/web/javascript/reference/operators/increment/index.html create mode 100644 files/uk/web/javascript/reference/operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/inequality/index.html create mode 100644 files/uk/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/uk/web/javascript/reference/operators/left_shift/index.html create mode 100644 files/uk/web/javascript/reference/operators/left_shift_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/less_than/index.html create mode 100644 files/uk/web/javascript/reference/operators/less_than_or_equal/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_and/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_not/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_or/index.html create mode 100644 files/uk/web/javascript/reference/operators/multiplication/index.html create mode 100644 files/uk/web/javascript/reference/operators/multiplication_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/new.target/index.html create mode 100644 files/uk/web/javascript/reference/operators/new/index.html create mode 100644 files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/uk/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/uk/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/uk/web/javascript/reference/operators/remainder/index.html create mode 100644 files/uk/web/javascript/reference/operators/remainder_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/right_shift/index.html create mode 100644 files/uk/web/javascript/reference/operators/right_shift_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/uk/web/javascript/reference/operators/strict_equality/index.html create mode 100644 files/uk/web/javascript/reference/operators/strict_inequality/index.html create mode 100644 files/uk/web/javascript/reference/operators/subtraction/index.html create mode 100644 files/uk/web/javascript/reference/operators/subtraction_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/super/index.html create mode 100644 files/uk/web/javascript/reference/operators/this/index.html create mode 100644 files/uk/web/javascript/reference/operators/typeof/index.html create mode 100644 files/uk/web/javascript/reference/operators/unary_negation/index.html create mode 100644 files/uk/web/javascript/reference/operators/unary_plus/index.html create mode 100644 files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html create mode 100644 files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/void/index.html create mode 100644 files/uk/web/javascript/reference/operators/yield/index.html create mode 100644 files/uk/web/javascript/reference/operators/yield_star_/index.html create mode 100644 "files/uk/web/javascript/reference/operators/\320\264\320\265\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\320\267\320\260\321\206\321\226\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200_\321\200\320\276\320\267\320\277\320\260\320\272\321\203\320\262\320\260\320\275\320\275\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\320\276\321\200\321\226\320\262\320\275\321\217\320\275\320\275\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\321\200\320\270\321\201\320\262\320\276\321\224\320\275\320\275\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\321\226\320\275\321\226\321\206\321\226\320\260\320\273\321\226\320\267\320\260\321\206\321\226\321\217_\320\276\320\261\342\200\231\321\224\320\272\321\202\321\226\320\262/index.html" create mode 100644 files/uk/web/javascript/reference/statements/async_function/index.html create mode 100644 files/uk/web/javascript/reference/statements/block/index.html create mode 100644 files/uk/web/javascript/reference/statements/break/index.html create mode 100644 files/uk/web/javascript/reference/statements/class/index.html create mode 100644 files/uk/web/javascript/reference/statements/const/index.html create mode 100644 files/uk/web/javascript/reference/statements/continue/index.html create mode 100644 files/uk/web/javascript/reference/statements/debugger/index.html create mode 100644 files/uk/web/javascript/reference/statements/default/index.html create mode 100644 files/uk/web/javascript/reference/statements/do...while/index.html create mode 100644 files/uk/web/javascript/reference/statements/empty/index.html create mode 100644 files/uk/web/javascript/reference/statements/export/index.html create mode 100644 files/uk/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/uk/web/javascript/reference/statements/for...in/index.html create mode 100644 files/uk/web/javascript/reference/statements/for...of/index.html create mode 100644 files/uk/web/javascript/reference/statements/for/index.html create mode 100644 files/uk/web/javascript/reference/statements/function/index.html create mode 100644 files/uk/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/uk/web/javascript/reference/statements/if...else/index.html create mode 100644 files/uk/web/javascript/reference/statements/index.html create mode 100644 files/uk/web/javascript/reference/statements/label/index.html create mode 100644 files/uk/web/javascript/reference/statements/let/index.html create mode 100644 files/uk/web/javascript/reference/statements/return/index.html create mode 100644 files/uk/web/javascript/reference/statements/switch/index.html create mode 100644 files/uk/web/javascript/reference/statements/throw/index.html create mode 100644 files/uk/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/uk/web/javascript/reference/statements/var/index.html create mode 100644 files/uk/web/javascript/reference/statements/while/index.html create mode 100644 files/uk/web/javascript/reference/statements/with/index.html create mode 100644 files/uk/web/javascript/reference/strict_mode/index.html create mode 100644 files/uk/web/javascript/reference/template_literals/index.html create mode 100644 files/uk/web/javascript/reference/trailing_commas/index.html create mode 100644 "files/uk/web/javascript/reference/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\320\270_\320\277\320\265\321\200\320\265\320\261\320\276\321\200\321\203/index.html" create mode 100644 "files/uk/web/javascript/\320\277\320\265\321\200\320\265\320\262\321\226\321\200\320\272\320\260_\320\275\320\260_\321\200\321\226\320\262\320\275\321\226\321\201\321\202\321\214_\321\202\320\260_\320\276\320\264\320\275\320\260\320\272\320\276\320\262\321\226\321\201\321\202\321\214/index.html" (limited to 'files/uk/web/javascript') diff --git a/files/uk/web/javascript/a_re-introduction_to_javascript/index.html b/files/uk/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..83db347460 --- /dev/null +++ b/files/uk/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,949 @@ +--- +title: Повторне введення в JavaScript (JS-підручник) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +
{{jsSidebar}}
+ +

Вступ

+ +

Чому повторне введення? Тому що {{Glossary ("JavaScript")}} відомий тим, що він є найпопулярнішою у світі мовою програмування. Його часто висміюють як іграшку, але під його шаром оманливої простоти чекають потужні мовні особливості. JavaScript зараз використовується неймовірним числом популярних додатків, які показують, що більш глибоке знання цієї технології є важливим вмінням для будь-якого веб-розробника або розробника мобільних пристроїв.

+ +

Варто почати з огляду історії мови. JavaScript був створений у 1995 році Бренданом Айком, коли він був інженером у Netscape. JavaScript був вперше випущений з Netscape 2 на початку 1996 року. Спочатку він мав назву LiveScript, але він був перейменований у злополучному маркетинговому рішенні, яке спробувало скористатися популярністю Java-мови Sun Microsystem - незважаючи на те, що вони мають мало спільного. З тих пір це стало джерелом плутанини.

+ +

Трохи пізніше Microsoft випустила дуже схожу та практично сумісну мову JScript який йшов разом з Internet Explorer 3. Через пару місяців Netscape відправила мову JavaScript до Ecma International, Європейську організацію, яка займається стандартами, яка випустила першу версію стандарту {{Glossary("ECMAScript")}} в 1997 року. Стандарт отримав значуще оновлення в  ECMAScript edition 3 в 1999 році, і залишається найстабільнішим до сьогоднішнього дня. Четверта версія була відхилена, через проблеми з ускладненням в мові. Більшість речей з четвертого видання послужили основою для стандарту ECMAScript edition 5, оприлюднений в грудні  2009 року, і для 6-го основного видання стандарту, оприлюдненого в червні  2015 року.

+ +
+

На замітку:  На далі по тексту ми будемо називати мову ECMAScript як "JavaScript".

+
+ +

На відміну від більшості мов програмування, JavaScript не наслідує концепцію введення(input) та виведенн(output). Він спроектований таким чином, щоб запускатися як мова сценаріїв, вбудованих в середовище виконання. Найпопулярніше середовище виконання це браузер, однак інтепретатори JavaScript присутні також в Adobe Acrobat, Adobe Photoshop, SVG images, Yahoo's Widget engine, і навіть в серверному середовищі наприклад Node.js.

+ +

Загальний огляд

+ +

JavaScript це мультіпарадігматична, динамічна мова з типами та операторами, стандартними вбудованими об'єктами  та методами. ЇЇ синтаксис базован на мовах Java та C - взагалі, більша частина структури цих мов закладена в JavaScript. JavaScript підтримує об'єктно-орієнтований підхід  через прототипи об'єктів, замість класів (дивись більше про  успадкування через прототипи та ES2015 {{jsxref("Classes")}}). JavaScript також підтримує функціональне програмування — тому що  функції це  об'єкти, їх можна тримати в змінних та передавати як будь-які інші об'єкти.

+ +

Давайте почнемо огляд з блоків будови будь-якої мови: з типів. програми JavaScript керують значеннями-даними та ці значення належать до якогось типу. JavaScript має наступні типи данних:

+ + + +

... О, ще й  {{jsxref("undefined")}} та {{jsxref("null")}}, які є ... досить відокремленими типами. Та {{jsxref("Array")}}, який є спеціальним видом об'єкту. Також {{jsxref("Date")}} та{{jsxref("RegExp")}}, які є вбудованними видами об'єктів. Та, якщо бути технічно акуратними, функція це всього-навсього спеціальний тип об'єкту. Тож діаграмма типів має виглядати наступним чином:

+ + + +

Також є вбудований {{jsxref("Error")}} тип. На першій діаграммі усе видається простішим, та далі ми обговоримо усі типи, що були описані.

+ +

Числа (Numbers)

+ +

Numbers в JavaScript є "значення подвійної точністі 64-бітового формату IEEE 754", згідно специфікаціїї. Це має деякі цікаві наслідки. В JavaScript немає цілих чисел (integer), тож вам треба бути уважнішими з аріфметикою в порівнянні з математикою мов C або Java. Таким чином, ціле число насправді є неявним плаваючим.

+ +

Також, обережніше з такими випадками:

+ +
0.1 + 0.2 == 0.30000000000000004;
+
+ +

На практиці, цілі (integer) значення представляються як 32-бітні цілі, та деякі реалізації навіть зберігають їх таким чином до тих пір, поки не буде потреби виконати інструкцію, дійсну для числа (Number), але не для 32-бітного цілого числа. Це може бути важливо для побітових (bit-wise) операцій.

+ +

Підтримуються стандартні арифметичні оператори (arithmetic operators), включаючи додавання, віднімання, модуль (або залишок) тощо. Існує також вбудований об'єкт, про який ми не згадували раніше, так званий {{jsxref ("Math")}}, який забезпечує розширені математичні функції та константи:

+ +
Math.sin(3.5);
+var circumference = 2 * Math.PI * r;
+
+ +

Ви можете конвертувати рядки (string) в цілі числа (integer) за допомогою вбудованої {{jsxref("Global_Objects/parseInt", "parseInt()")}} функції. Вона приймає опційним другим аргументом основу системи числення (яку бажано передавати завжди):

+ +
parseInt('123', 10); // 123
+parseInt('010', 10); // 10
+
+ +

У браузерах попередніх версій рядки, що починаються з "0", розглядаються, як числа з основою 8 (radix 8), але це вже не є стандартом з 2013 року.  Вас може здивувати результат наступних дій в старших браузерах:

+ +
parseInt('010');  //  8
+parseInt('0x10'); // 16
+
+ +

В цьому зразку коду ми бачимо  {{jsxref("Global_Objects/parseInt", "parseInt()")}} функції приймають перший string як число в вісімковій системі (octal) через передуючий "0", да другий string приймається як число в шістнадцятковій системі (hexadecimal) через передуючий  "0x". Шістнадцяткова нотація все ще оброблюється в нових браузерахю Тількі вісімкову було прибрано з мови.

+ +

Якщо бажаєте конвертувати бінарне число в звичайне ціле (integer), просто зміність базу (base):

+ +
parseInt('11', 2); // 3
+
+ +

Таким же чином, ви можете конвертувати числа із плаваючою комою, використавши вбудовані функції {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}. На відміну від своїх двоюрідних сестер {{jsxref("Global_Objects/parseInt", "parseInt()")}} , parseFloat() завжди використовує десятичну базу.

+ +

Ви також можете використовувати унарний операнд + для конвертації в числа (numbers):

+ +
+ '42';   // 42
++ '010';  // 10
++ '0x10'; // 16
+
+ +

Спеціальне значення, що називається {{jsxref("NaN")}} (скорочення від  "Not a Number" - не число) повертається якщо строка є не-числом (non-numeric):

+ +
parseInt('hello', 10); // NaN
+
+ +

NaN токсичний! Якщо ви зробите його вхідними даними для будь-якої математичної операції - результатом буде також NaN:

+ +
NaN + 5; // NaN
+
+ +

Вы можете тестувати NaN, використовуючи вбудовану функцію  {{jsxref("Global_Objects/isNaN", "isNaN()")}}:

+ +
isNaN(NaN); // true
+
+ +

JavaScript також має спеціальні значення {{jsxref("Infinity")}} та -Infinity:

+ +
 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+
+ +

Ви можете тестувати Infinity, -Infinity таNaN значення, використвовуючи вбудовані вбудовані функції {{jsxref("Global_Objects/isFinite", "isFinite()")}}:

+ +
isFinite(1 / 0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+
+ +
{{jsxref("Global_Objects/parseInt", "parseInt()")}} та {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} функції розкладають string допоки не зустрінуть символ, що не є валідним для заданого числового формату, потім повертає число, що було розгорнуто із string до цієї точки. Однак оператор "+" конвертує string до NaN якщо було виявлене некоректне значення. Просто спробуйте зробити парсінг для "10.2abc" кожним з методів у консолі та ви зрозумієте різницю краще.
+ +

Строки (Strings)

+ +

Строки в JavaScript є послідовністю знаків - Unicode characters. Це радісна новина для усіх, хто мав справи з інтернаціоналізацією ( internationalization). Якщо бути точнішими, це послідовність одиниць кодування UTF-16; кожна така одиниця представлена 16-бітовим числом. Кожний  Unicode знак представлен однією чи двома одиницями коду.

+ +

Якщо бажаєте представити строку із одного символа-знака, ви просто використовуєте строку, що складається з одного символа.

+ +

Що дізнатись довжину строки (в одиницях коду), зверніться до його  length властивості:

+ +
'hello'.length; // 5
+
+ +

Ось наша перша зустріч з об'єктами JavaScript! Ви помітили, що ви можете використовувати строку як {{jsxref("Object", "objects", "", 1)}} також? У строк є {{jsxref("String", "methods", "#Methods", 1)}} які дозволяють Вам керувати строками та мати доступ до інформації про строку:

+ +
'hello'.charAt(0); // "h"
+'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
+'hello'.toUpperCase(); // "HELLO"
+
+ +

Інші типи

+ +

JavaScript розрізняє {{jsxref("null")}}, якие є значенням, що показує свідому відсутність значення (та доступне лише через ключеве слово null), та {{jsxref("undefined")}}, яке є значенням типу undefined та вказує на неініціалізоване значення, яке ще не отримало присвоєння значення. Ми поговоримо про змінні пізніше, а зараз зазначимо, що в JavaScript можлива об'ява змінної без присвоєння значення. Якщо ви зробите це, тип змінної буде undefined. Взагалі, undefined  це константа.

+ +

В JavaScript є булевий тип, з можливими значеннями true та false (обидва є ключовими словами) Будь-яке значення може бути перетворено в булевий тип, згідно наступних правил:

+ +
    +
  1. false, 0, пуста строка (""), NaN, null, таundefined стають false.
  2. +
  3. все інше - true.
  4. +
+ +

Ви можете зробити цю конвертацію безпосередньо за допомогою Boolean() функції:

+ +
Boolean('');  // false
+Boolean(234); // true
+
+ +

Однак, це майже не використовується, тому що JavaScript буде мовчки виконувати це перетворення коли очікується булеве значення, як в if твердженні (дивися нижче). Тому ми інколи говоримо просто "вірне значення" та "хибне значення", маючи на увазі значення, що стає true та false відповідно, при перетворенні на булеве. Як альтернативу, такі значення можна назвати відповідно "правдоподібними" та "хибними".

+ +

Підтримуються такі булеві операції як && (логічний ТА), || (логічній АБО), та! (логічний НІ); дивися про це нижче.

+ +

Змінні

+ +

Нові змінні в JavaScript оголошуються за допомогою одного з трьох ключових слів: letconst, або var
+
+ let дозволяє оголосити змінну рівня блоку. Оголошена таким чином змінна доступна на рівні функціонального блоку, до якого вона входить

+ +
let a;
+let name = 'Simon';
+
+ +

Наступний приклад демонструє область осяжності (scope) змінної, що оголошена за допомогою let:

+ +
// myLetVariable is *not* visible out here
+
+for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
+  // myLetVariable is only visible in here
+}
+
+// myLetVariable is *not* visible out here
+
+
+ +

const дозволяє оголосити змінні, чиї значення не збираються бути змінені. Такі змінні доступні з функційного блоку, де були оголошені.

+ +
const Pi = 3.14; // змінна Pi встановлена
+Pi = 1; // викине помилку (error), тому що ви не можете змінювати постійні змінні (сonstant variable).
+ +


+ var є самим загальним ключовим словом оголошень змінних. Він не має обмежень, що мають попередні два ключових слова. Це тому що це був єдиний спосіб оголошувати змінні в JavaScript. Змінна, що оголошена за допомогою var доступна із функційного блоку, де була оголошена.

+ +
var a;
+var name = 'Simon';
+ +

Наступний приклад демонструє область осяжності (scope) змінної, що оголошена за допомогою var:

+ +
// myVarVariable *є* видимою звідси
+
+for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
+  // myVarVariable є видимою для усієї функції
+}
+
+// myVarVariable *є* видимою звідси
+
+ +

Якщо ви оголосити змінну без присвоєння їй значення, її тип буде undefined.

+ +

Важлива різниця між JavaScript та іншими мовами, такими як Java це те, що в JavaScript, блоки не мають області осяжності (scope); тільки функції мають область осяжності. Тому, якщо змінна визначена у складі виразу за допомогою var  (наприклад, всередені структури контроля if), вона буде видимою для зовнішньої функції. Однак, починаючи з ECMAScript 2015, let таconst оголошення дозволяють створювати блочно-обмежені змінні.

+ +

Оператори

+ +

Числові оператори JavaScript це +, -, *, / та% що є оператором решти (що не слід плутати з модулем числа (modulo).) Значення присвоюються за допомогою =, та є також вирази компоновочного присвоєння такі як  += and -=. Це розширення виразу x = x operator y.

+ +
x += 5;
+x = x + 5;
+
+ +

Ви можете використовувати  ++ and -- щоб збільшувати та зменьшувати відповідно. Вони можуть бути як в префіксному так і в  постфіксному положенні відносно значень.

+ +

+ оператор також робить складання строк:

+ +
'hello' + ' world'; // "hello world"
+
+ +

Якщо ви додаєте строку до числа (або інше значення) усе конвертуюеться насамперед в строку. Це може Вас здивувати:

+ +
'3' + 4 + 5;  // "345"
+ 3 + 4 + '5'; // "75"
+
+ +

Додавання пустої строки до якогось значення є зручним шляхом конвертування цього значення у строку.

+ +

Порівняння в JavaScript робляться за допомогою <, >, <= and >=. Це працює як для строк, так і для чисел. Рівність менш прямолінійна. Оператор подвійне-рівно (double-equals) призводить до примусової конвертації (coercion), якщо значення порівняння різних типів, інколи - з дивним результатом:

+ +
123 == '123'; // true
+1 == true; // true
+
+ +

Щоб запобігти коерції, використовуйте потрійне-рівне:

+ +
123 === '123'; // false
+1 === true;    // false
+
+ +

Є також оператори != та!==.

+ +

JavaScript також має  побітові операції. Якщо хочете їх використовувати - вони до Ваших послуг.

+ +

Control structures

+ +

JavaScript має схожий набір структур контроля з іншими мовами сімейства C. Ствердження умов підтримуються за допомогою if та else; Можете організовувати їх у ланцюги за бажанням:

+ +
var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' meow';
+} else {
+  name += '!';
+}
+name == 'kittens meow';
+
+ +

JavaScript має while цикли та do-while цикли. Перший добре підходить для загального цикла; другий для циклів, де Ви бажаєте бути впевненими що тіло циклу буде виконано хоча б раз:

+ +
while (true) {
+  // an infinite loop!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input));
+
+ +

 for цикл в JavaScript це теж саме, що і в С та Java мовах: це дозволяє впровадити усю інформацію про цикл в єдиній лінії коду.

+ +
for (var i = 0; i < 5; i++) {
+  // Буде виконано 5 разів
+}
+
+ +

JavaScript також має два інших відомих варіанта циклу: for...of

+ +
for (let value of array) {
+  // робиться щось з value
+}
+
+ +

та for...in:

+ +
for (let property in object) {
+  // робиться щось з property object
+}
+
+ +

Оператори && та || використовують логіку скороченого обчислення  , це означає що чи буде обчислюватись другий операнд залежить від результату обчислення першого операнда. Дуже зручно перевіряти об'єкти на належність до null перед доступом до його атрибутів:

+ +
var name = o && o.getName();
+
+ +

Або для кешування значень (коли хибні значення є недійсними):

+ +
var name = cachedName || (cachedName = getName());
+
+ +

JavaScript має тернарний оператор для виразів умов:

+ +
var allowed = (age > 18) ? 'yes' : 'no';
+
+ +

Твердження switch може бути використано для багатогілкових умов на основі чисели чи строк:

+ +
switch (action) {
+  case 'draw':
+    drawIt();
+    break;
+  case 'eat':
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+
+ +

Якщо не додати break твердження, виконання "провалиться" на наступний рівень. Це досить рідко може бути тим, чого ви хотіли — насправді варто конкретно позначити навмисний "прорив" коментарем, якщо ви дійсно мали на увазі це для сприяння налагодженню (debugging):

+ +
switch (a) {
+  case 1: // провал нижче
+  case 2:
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+
+ +

Завершення за допомогою default за бажанням. Ви можете мати вирази в обидвах частинах switch та cases якщо бажаєте; порівняння буде робитися за допомогою оператора ===:

+ +
switch (1 + 3) {
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    neverhappens();
+}
+
+ +

Об'єкти

+ +

JavaScript об'єкти можна уявляти як прості колекції пар ім'я-значення (name-value pairs). Таким чином, вони схожі на:

+ + + +

Те, що ця структура даних настільки широко використовується, є свідченням її універсальності . Через те, що усе (основні типи даних) в JavaScript це об'єкт, будь-яка програма JavaScript, природно, передбачає велику кількість пошукових запитів хеш-таблиць. Як добре, що запити такі швидкі!

+ +

 частина "ім'я" це строка JavaScript, а "значення" може бути будь яким з типів  JavaScript — включно об'єктами. Це дозволяє Вам будувати структури даних необмеженої складності.

+ +

Є два основних способи створити пустий об'єкт:

+ +
var obj = new Object();
+
+ +

Та:

+ +
var obj = {};
+
+ +

Це семантично одинаково; другий спосіб називається синтаксис буквального об'єкта (object literal syntax), та є більш зручним. Цей синтаксис також базовий для формату JSON та повинен бути бажаним завжди.

+ +

Синтаксис буквального об'єкту може бути використаний щоб ініціалізувати об'єкт у всій повноті:

+ +
var obj = {
+  name: 'Carrot',
+  'for': 'Max',
+  details: {
+    color: 'orange',
+    size: 12
+  }
+}
+
+ +

Доступ до атрибутів може бути у вигляді ланцюга:

+ +
obj.details.color; // orange
+obj['details']['size']; // 12
+
+ +

Наступний приклад створює об'єкт-прототип, Person та екземпляр цього прототипу, You.

+ +
function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Define an object
+var You = new Person('You', 24);
+// We are creating a new person named "You"
+// (that was the first parameter, and the age..)
+
+ +

Після створення, до властивостей об'єкта можна отримати доступ одним із двох способів:

+ +
obj.name = 'Simon';
+var name = obj.name;
+
+ +

та...

+ +
obj['name'] = 'Simon';
+var name = obj['name'];
+
+ +

Вони також семантично рівнозначні. Другий метод має перевагу в тому, що ім'я властивості надається у вигляді рядка, а значить, його можна обчислити під час виконання. Однак використання цього методу запобігає застосуванню деяких оптимізацій двигуна JavaScript та мініфікаторів. Він також може бути використаний для встановлення та отримання властивостей із іменами, зарезервованими словами:

+ +
obj.for = 'Simon'; // Syntax error, тому що 'for' зарезервоване слово
+obj['for'] = 'Simon'; // спрацьовує добре
+
+ +
+

Починаючи з ECMAScript 5, зарезервовані слова можна використовувати  як імена властивостей об'єкта "в буфі". Це означає, що при визначенні об’єктних літералів їх не потрібно "вбирати" в лапки. Див. Специфікацію ES5.

+
+ +

Детальніше про об'єкти та прототипи див. : Object.prototype. Пояснення прототипів  об’єктів та ланцюгів прототипів об'єктів див .: Inheritance and the prototype chain.

+ +

Масиви

+ +

Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called 'length'. This is always one more than the highest index in the array.

+ +

One way of creating arrays is as follows:

+ +
var a = new Array();
+a[0] = 'dog';
+a[1] = 'cat';
+a[2] = 'hen';
+a.length; // 3
+
+ +

A more convenient notation is to use an array literal:

+ +
var a = ['dog', 'cat', 'hen'];
+a.length; // 3
+
+ +

Note that array.length isn't necessarily the number of items in the array. Consider the following:

+ +
var a = ['dog', 'cat', 'hen'];
+a[100] = 'fox';
+a.length; // 101
+
+ +

Remember — the length of the array is one more than the highest index.

+ +

If you query a non-existent array index, you'll get a value of undefined returned:

+ +
typeof a[90]; // undefined
+
+ +

If you take the above into account, you can iterate over an array using the following:

+ +
for (var i = 0; i < a.length; i++) {
+  // Do something with a[i]
+}
+
+ +

You can iterate over an array using a for...in loop. Note that if someone added new properties to Array.prototype, they will also be iterated over by this loop.  Therefore this method is "not" recommended.

+ +

Another way of iterating over an array that was added with ECMAScript 5 is forEach():

+ +
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+  // Do something with currentValue or array[index]
+});
+
+ +

If you want to append an item to an array simply do it like this:

+ +
a.push(item);
+ +

Arrays come with a number of methods. See also the full documentation for array methods.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method nameDescription
a.toString()Returns a string with the toString() of each element separated by commas.
a.toLocaleString()Returns a string with the toLocaleString() of each element separated by commas.
a.concat(item1[, item2[, ...[, itemN]]])Returns a new array with the items added on to it.
a.join(sep)Converts the array to a string — with values delimited by the sep param
a.pop()Removes and returns the last item.
a.push(item1, ..., itemN)Adds one or more items to the end.
a.reverse()Reverses the array.
a.shift()Removes and returns the first item.
a.slice(start[, end])Returns a sub-array.
a.sort([cmpfn])Takes an optional comparison function.
a.splice(start, delcount[, item1[, ...[, itemN]]])Lets you modify an array by deleting a section and replacing it with more items.
a.unshift(item1[, item2[, ...[, itemN]]])Prepends items to the start of the array.
+ +

Функції

+ +

Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:

+ +
function add(x, y) {
+  var total = x + y;
+  return total;
+}
+
+ +

This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like, and can declare its own variables which are local to that function. The return statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns undefined.

+ +

The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to undefined.

+ +
add(); // NaN
+// You can't perform addition on undefined
+
+ +

You can also pass in more arguments than the function is expecting:

+ +
add(2, 3, 4); // 5
+// added the first two; 4 was ignored
+
+ +

That may seem a little silly, but functions have access to an additional variable inside their body called arguments, which is an array-like object holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:

+ +
function add() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    sum += arguments[i];
+  }
+  return sum;
+}
+
+add(2, 3, 4, 5); // 14
+
+ +

That's really not any more useful than writing 2 + 3 + 4 + 5 though. Let's create an averaging function:

+ +
function avg() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+
+ +
This is pretty useful, but it does seem a little verbose. To diminish this code a bit more we can look at substituting the use of the arguments array through Spread syntax. In this way we can pass in any number of arguments into the function while keeping our code minimal. The spread operator is used in function declarations with the format: ...[variable]  and it will include within that variable the entire list of uncaptured arguments that the function was called with.  We will also replace the for loop with a for...of loop to return the values within our variable.
+ +
+ +
function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+
+ +
+
In the above code the variable args holds all the values that were passed into the function. 
+
+It is important to note that wherever the spread operator is placed in a function declaration it will store all arguments after its declaration, but not before.
+ +
a.e. function avg(firstValue, ...args) will store the first value passed into the function in the firstValue variable and the remaining arguments in args
+
+ +
Another useful function but it does lead us to a new problem. The avg() function takes a comma separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:
+ +
+ +
function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j = arr.length; i < j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5
+
+ +

But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function and call it with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function object.

+ +
avg.apply(null, [2, 3, 4, 5]); // 3.5
+
+ +

The second argument to apply() is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.

+ +

JavaScript lets you create anonymous functions.

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

This is semantically equivalent to the function avg() form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:

+ +
var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2
+
+ +

JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.

+ +
function countChars(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += countChars(child);
+  }
+  return count;
+}
+
+ +

This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named IIFEs (Immediately Invoked Function Expressions) as shown below:

+ +
var charsInBody = (function counter(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += counter(child);
+  }
+  return count;
+})(document.body);
+
+ +

The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.

+ +

Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the Objects section.

+ +

Custom objects

+ +
For a more detailed discussion of object-oriented programming in JavaScript, see Introduction to Object Oriented JavaScript.
+ +

In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement.) Instead, JavaScript uses functions as classes. Let's consider a person object with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objects that we've discussed previously, we could display the data like this:

+ +
function makePerson(first, last) {
+  return {
+    first: first,
+    last: last
+  };
+}
+function personFullName(person) {
+  return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+  return person.last + ', ' + person.first;
+}
+
+s = makePerson('Simon', 'Willison');
+personFullName(s); // "Simon Willison"
+personFullNameReversed(s); // "Willison, Simon"
+
+ +

This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an object. Since functions are objects, this is easy:

+ +
function makePerson(first, last) {
+  return {
+    first: first,
+    last: last,
+    fullName: function() {
+      return this.first + ' ' + this.last;
+    },
+    fullNameReversed: function() {
+      return this.last + ', ' + this.first;
+    }
+  };
+}
+
+s = makePerson('Simon', 'Willison');
+s.fullName(); // "Simon Willison"
+s.fullNameReversed(); // "Willison, Simon"
+
+ +

There's something here we haven't seen before: the this keyword. Used inside a function, this refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using dot notation or bracket notation on an object, that object becomes this. If dot notation wasn't used for the call, this refers to the global object.

+ +

Note that this is a frequent cause of mistakes. For example:

+ +
s = makePerson('Simon', 'Willison');
+var fullName = s.fullName;
+fullName(); // undefined undefined
+
+ +

When we call fullName() alone, without using s.fullName(), this is bound to the global object. Since there are no global variables called first or last we get undefined for each one.

+ +

We can take advantage of the this keyword to improve our makePerson function:

+ +
function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = function() {
+    return this.first + ' ' + this.last;
+  };
+  this.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+  };
+}
+var s = new Person('Simon', 'Willison');
+
+ +

We have introduced another keyword: new. new is strongly related to this. It creates a brand new empty object, and then calls the function specified, with this set to that new object. Notice though that the function specified with this does not return a value but merely modifies the this object. It's new that returns the this object to the calling site. Functions that are designed to be called by new are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with new.

+ +

The improved function still has the same pitfall with calling fullName() alone.

+ +

Our person objects are getting better, but there are still some ugly edges to them. Every time we create a person object we are creating two brand new function objects within it — wouldn't it be better if this code was shared?

+ +
function personFullName() {
+  return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+  return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = personFullName;
+  this.fullNameReversed = personFullNameReversed;
+}
+
+ +

That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:

+ +
function Person(first, last) {
+  this.first = first;
+  this.last = last;
+}
+Person.prototype.fullName = function() {
+  return this.first + ' ' + this.last;
+};
+Person.prototype.fullNameReversed = function() {
+  return this.last + ', ' + this.first;
+};
+
+ +

Person.prototype is an object shared by all instances of Person. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of Person that isn't set, JavaScript will check Person.prototype to see if that property exists there instead. As a result, anything assigned to Person.prototype becomes available to all instances of that constructor via the this object.

+ +

This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:

+ +
s = new Person('Simon', 'Willison');
+s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function firstNameCaps() {
+  return this.first.toUpperCase();
+};
+s.firstNameCaps(); // "SIMON"
+
+ +

Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to String that returns that string in reverse:

+ +
var s = 'Simon';
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function reversed() {
+  var r = '';
+  for (var i = this.length - 1; i >= 0; i--) {
+    r += this[i];
+  }
+  return r;
+};
+
+s.reversed(); // nomiS
+
+ +

Our new method even works on string literals!

+ +
'This can now be reversed'.reversed(); // desrever eb won nac sihT
+
+ +

As mentioned before, the prototype forms part of a chain. The root of that chain is Object.prototype, whose methods include toString() — it is this method that is called when you try to represent an object as a string. This is useful for debugging our Person objects:

+ +
var s = new Person('Simon', 'Willison');
+s; // [object Object]
+
+Person.prototype.toString = function() {
+  return '<Person: ' + this.fullName() + '>';
+}
+
+s.toString(); // "<Person: Simon Willison>"
+
+ +

Remember how avg.apply() had a null first argument? We can revisit that now. The first argument to apply() is the object that should be treated as 'this'. For example, here's a trivial implementation of new:

+ +
function trivialNew(constructor, ...args) {
+  var o = {}; // Create an object
+  constructor.apply(o, args);
+  return o;
+}
+
+ +

This isn't an exact replica of new as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, ...args (including the ellipsis) is called the "rest arguments" — as the name implies, this contains the rest of the arguments.

+ +

Calling

+ +
var bill = trivialNew(Person, 'William', 'Orange');
+ +

is therefore almost equivalent to

+ +
var bill = new Person('William', 'Orange');
+ +

apply() has a sister function named call, which again lets you set this but takes an expanded argument list as opposed to an array.

+ +
function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person('Simon', 'Willison');
+lastNameCaps.call(s);
+// Is the same as:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+
+ +

Inner functions

+ +

JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier makePerson() function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:

+ +
function betterExampleNeeded() {
+  var a = 1;
+  function oneMoreThanA() {
+    return a + 1;
+  }
+  return oneMoreThanA();
+}
+
+ +

This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.

+ +

This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.

+ +

Замикання

+ +

This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?

+ +
function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?
+
+ +

The name of the makeAdder() function should give it away: it creates new 'adder' functions, each of which when called with one argument adds it to the argument that it was created with.

+ +

What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they do still exist — otherwise the adder functions would be unable to work. What's more, there are two different "copies" of makeAdder()'s local variables — one in which a is 5 and one in which a is 20. So the result of those function calls is as follows:

+ +
x(6); // returns 11
+y(7); // returns 27
+
+ +

Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' object is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which is accessible as this and in browsers as window) these scope objects cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope object, for example.

+ +

So when makeAdder() is called, a scope object is created with one property: a, which is the argument passed to the makeAdder() function. makeAdder() then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for makeAdder() at this point, but the returned function maintains a reference back to that scope object. As a result, the scope object will not be garbage collected until there are no more references to the function object that makeAdder() returned.

+ +

Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.

+ +

A closure is the combination of a function and the scope object in which it was created. Closures let you save state — as such, they can often be used in place of objects. You can find several excellent introductions to closures.

+ +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/uk/web/javascript/about_javascript/index.html b/files/uk/web/javascript/about_javascript/index.html new file mode 100644 index 0000000000..430be4a307 --- /dev/null +++ b/files/uk/web/javascript/about_javascript/index.html @@ -0,0 +1,61 @@ +--- +title: Про JavaScript +slug: Web/JavaScript/About_JavaScript +tags: + - JavaScript + - Вступ + - Початківець +translation_of: Web/JavaScript/About_JavaScript +--- +
{{JsSidebar}}
+ +

Що таке JavaScript?

+ +

JavaScript® (зазвичай скорочено JS) це легка, інтерпретована, об'єктно-орієнтована мова програмування з функціями першого класу, що також відома як найкраща мова скриптів для веб-сторінок, проте також часто використовувана в багатьох не-браузерних середовищах. Це також базована на прототипах, мульти парадигмова динамічна мова скриптів, що підтримує об'єктно-орієнтовані, імперативні та функціональні стилі програмування.

+ +

JavaScript працює на клієнтській стороні Вебу і може використовуватись для програмування поведінки сторінки відповідно до події, що на ній відбувається. JavaScript легка для вивчення, проте водночас це потужна мова скриптів, яка широко застосовується для контролю поведінки веб-сторінок.

+ +

Contrary to popular misconception, JavaScript is not "Interpreted Java". In a nutshell, JavaScript is a dynamic scripting language supporting prototype based object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. Language constructs, such as if statements, for and while loops, and switch and try ... catch blocks function the same as in these languages (or nearly so).

+ +

JavaScript can function as both a procedural and an object oriented language. Objects are created programmatically in JavaScript, by attaching methods and properties to otherwise empty objects at run time, as opposed to the syntactic class definitions common in compiled languages like C++ and Java. Once an object has been constructed it can be used as a blueprint (or prototype) for creating similar objects.

+ +

JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for ... in), and source code recovery (JavaScript programs can decompile function bodies back into their source text).

+ +

For a more in depth discussion of JavaScript programming follow the JavaScript resources links below.

+ +

What JavaScript implementations are available?

+ +

The Mozilla project provides two JavaScript implementations. The first ever JavaScript was created by Brendan Eich at Netscape, and has since been updated to conform to ECMA-262 Edition 5 and later versions. This engine, code named SpiderMonkey, is implemented in C/C++. The Rhino engine, created primarily by Norris Boyd (also at Netscape) is a JavaScript implementation written in Java. Like SpiderMonkey, Rhino is ECMA-262 Edition 5 compliant.

+ +

Several major runtime optimizations such as TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey were added to the SpiderMonkey JavaScript engine over time. Work is always ongoing to improve JavaScript execution performance.

+ +

Besides the above implementations, there are other popular JavaScript engines such as:-

+ + + +

Each of Mozilla's JavaScript engines expose a public API which application developers can use to integrate JavaScript into their software. By far, the most common host environment for JavaScript is web browsers. Web browsers typically use the public API to create host objects responsible for reflecting the DOM into JavaScript.

+ +

Another common application for JavaScript is as a (Web) server side scripting language. A JavaScript web server would expose host objects representing a HTTP request and response objects, which could then be manipulated by a JavaScript program to dynamically generate web pages. Node.js is a popular example of this.

+ +

JavaScript resources

+ +
+
SpiderMonkey
+
Information specific to Mozilla's implementation of JavaScript in C/C++ engine (aka SpiderMonkey), including how to embed it in applications.
+
+ +
+
Rhino
+
Information specific to the JavaScript implementation written in Java (aka Rhino).
+
Language resources
+
Pointers to published JavaScript standards.
+
A re-introduction to JavaScript
+
JavaScript guide and JavaScript reference.
+
+ +

JavaScript® is a trademark or registered trademark of Oracle in the U.S. and other countries.

diff --git a/files/uk/web/javascript/closures/index.html b/files/uk/web/javascript/closures/index.html new file mode 100644 index 0000000000..1abe835739 --- /dev/null +++ b/files/uk/web/javascript/closures/index.html @@ -0,0 +1,471 @@ +--- +title: Closures +slug: Web/JavaScript/Closures +tags: + - Замикання +translation_of: Web/JavaScript/Closures +--- +
{{jsSidebar("Intermediate")}}
+ +

Замикання - це функції, що посилаються на незалежні (вільні) змінні (змінні, які використовуються локально, але визначені в обмеженій області видимості). Іншими словами, ці функції "пам'ятають" середовище, в якому вони були створені.

+ +

Лексичне середовище

+ +

Розглянемо наступне:

+ +
+
function init() {
+  var name = "Mozilla"; // name - це локальна змінна, створена в функції init
+  function displayName() { // displayName() - це внутрішня функція, замикання
+    alert(name); // використовує змінну, оголошену в батьківській функції
+  }
+  displayName();
+}
+init();
+
+ +

init() створює локальну змінну name та функцію displayName(). displayName() є вкладеною функцією, що оголошена всередині init() та є доступною тільки в тілі цієї функції. displayName() не має локальних змінних, проте вкладені функції мають доступ до змінних зовнішніх функцій саме тому displayName() може використовувати імена змінних, оголошених в батьківській функції init().

+ +

{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 200)}}

+ +

Запустіть цей код і побачите, що alert() всередині  функції displayName() успішно відображає змінну name, оголошену в батьківській функції. Це є прикладом лексичного середовища (lexical environment), яке описує, яким чином парсер звертається до змінних, коли функції вкладені. Слово лексичне  посилається на факт, що лексичне середовище використовує розташування, де в коді  була створена змінна задля визначення середовища, де ця змінна доступна. Вкладені функції мають доступ до змінних, оголошених у їх зовнішній області.

+ +

Замикання

+ +

Тепер розглянемо наступний приклад:

+ +
function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+
+ +

Результат запуску цього коду буде таким самим, як і в попередньому прикладі функції init(): рядок  "Mozilla" буде відображений в спливаючому повідомленні alert(). Цікавою відмінністю є те, що внутрішня функція displayName() буде повернена з зовнішньої функції перш ніж вона буде виконана. 

+ +

Той факт, що цей код досі працює, може здаватись неочевидним. В деяких мовах програмування локальні змінні існують лише протягом часу виконання функції. Як тільки makeFunc() завершила своє виконання, слід очікувати, що змінна name не буде більше існувати. Однак у JavaScript цей підхід інакший, оскільки даний код працює, як і очікувалось.

+ +

Це відбувається тому що ці функції в JavaScript утворюють замикання. Замикання це комбінація функції і лексичного середовища (або просто середовища), всередині якого функція була оголошена. Середовище складається з будь-яких локальних змінних, які були в області видимості в той час, коли замикання було створене. В цьому випадку, myFunc є посиланням на екземпляр функції displayName створений, коли makeFunc була виконана. Екземпляр displayName включає посилання на власне лексичне середовище в середині якого існує змінна name. З цієї причини, коли myFunc викликається, змінна name залишається доступною для використання і "Mozilla" передається до alert. ​​​​​​

+ +

Ось трохи цікавіший приклад — a makeAdder function:

+ +
function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+
+ +

У цьому прикладі ми визначили функцію makeAdder(x), яка приймає єдиний аргумент x і повертає нову функцію. Функція, яку вона повертає, приймає єдиний аргумент y, і повертає суму  x і y.

+ +

По суті, makeAdder це фабрика функцій — вона створює функції, які можуть додавати певне значення до свого аргументу. У наведеному вище прикладі ми використовуємо нашу фабричну функцію для створення двох нових функцій — одна додає 5 до свого аргументу, і інша додає 10.

+ +

add5 і add10 є прикладами замикання. Вони поділяють одне визначення тіла функції, але зберігають різні лексичні середовища. В лексичному середовищі add5  x - це 5, а в лексичному середовищі add10 x- це 10.

+ +

Замикання на практиці

+ +

Замикання корисні, оскільки вони дозволяють зв'язати деякі дані (лексичне середовище) з функцією, яка працює з цими даними. Це має очевидні паралелі з об'єктно-орієнтованим програмуванням, де об'єкти дозволяють нам зв'язати деякі дані (властивості об'єкта) з одним або декількома методами.

+ +

Отже, замикання можна використовувати всюди, де  зазвичай використовується об'єкт з одним єдиним методом. 

+ +

Ситуації, в яких ви можливо захочете зробити це, особливо поширені в web-розробці. Велика частина front-end коду, написана на JavaScript, основана на обробці подій. Ви визначаєте деяку поведінку, а потім прикріплюєте її до події, яка запускається користувачем (наприклад, клік або натискання клавіші). Код, як правило, прив'язується до події як зворотній виклик (callback) - функція, яка виконується у відповідь на виникнення події.

+ +

Наприклад припустимо, що ми хочемо додати кілька кнопок на сторінку, які змінюватимуть розмір тексту. Один із способів зробити це - вказати font-size елементу body у пікселях, а потім встановити розмір інших елементів на сторінці (таких як заголовки) за допомогою відносних одиниць виміру em:

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+ +

Такі інтерактивні кнопки розміру тексту можуть змінювати властивість font-size елемента body, і налаштування будуть підхоплені іншими елементами на сторінці завдяки відносним одиницям.

+ +

Ось JavaScript:

+ +
function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+
+ +

 Тепер size12, size14, і size16 є функціями, які будуть змінювати розмір тексту елемента body відповідно до 12, 14 та 16 пікселів. Ми можемо прив'язати їх до кнопок таким чином:

+ +
document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+
+ +
<a href="#" id="size-12">12</a>
+<a href="#" id="size-14">14</a>
+<a href="#" id="size-16">16</a>
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}

+ +

Емуляція приватних методів з замиканнями

+ +

В таких мовах як Java є можливість об'являти методи приватними, що означає їх здатність бути викликаними лише іншими методами того ж класу.  

+ +

JavaScript не має власного способу зробити це, але є можливість емуляції приватних методів використовуючи замикання. Приватні методи корисні не лише для обмеження доступу до коду: вони також забезпечують потужний спосіб управління глобальним простором імен, зберігаючи несуттєві методи від захаращення публічного інтерфейсу до вашого коду.

+ +

Ось як визначити деякі загальнодоступні функції, які можуть отримати доступ до приватних функцій та змінних, використовуючи замикання, також відомі як модель модуля (module pattern).

+ +
var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+console.log(counter.value()); // logs 0
+counter.increment();
+counter.increment();
+console.log(counter.value()); // logs 2
+counter.decrement();
+console.log(counter.value()); // logs 1
+
+ +

Тут багато чого відбувається. В попередніх пригладах кожне замикання мало своє власне оточення. Тут, однак, існує одне лексичне середовище, яке поділяють три функції: counter.increment, counter.decrement, and counter.value.

+ +

Спільне лексичне середовище створюється в тілі анонімної функції, яка викликається одразу після створення. Навколишнє середовище містить два приватні складові: змінну privateCounter і функцію  changeBy. Жодна із цих приватних складових не може бути доступна безпосередньо за межами анонімної функції. Натомість до них мають бути доступні три загальнодоступні функції, які повертаються з анонімної обгортки.

+ +

Ці три  функції - це замикання, які мають одне і те ж середовище. Завдяки лексичному оточенню JavaScript, кожна з них має доступ до змінної privateCounter та функції changeBy.

+ +

Ми визначаємо анонімну функцію, яка створює лічильник, а потім ми викликаємо її негайно і присвоюємо результат змінній лічильника.Ми можемо зберігати цю функцію в окремій змінній makeCounter і використовувати її для створення декількох лічильників

+ +
var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* Alerts 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* Alerts 2 */
+counter1.decrement();
+alert(counter1.value()); /* Alerts 1 */
+alert(counter2.value()); /* Alerts 0 */
+
+ +

Зауважте, як кожен з двох лічильників підтримує свою незалежність від іншого. Його середовище під час виклику функції makeCounter () щоразу відрізняється. Змінна замикання privateCounter містить кожен раз інший екземпляр.

+ +

Використання замикання таким чином забезпечує ряд переваг, які зазвичай пов'язані з об'єктно-орієнтованим програмуванням, зокрема приховування даних та інкапсуляція.

+ +

Ланцюжок замикань

+ +

Кожне замикання має три оточення:

+ + + +

Поширеною помилкою є не усвідомлення того, що у випадку, коли зовнішня функція сама є вкладеною функцією, доступ до оточення її зовнішньої функції включає вкладене оточення  її як зовнішньої функції - ефективно створюючи ланцюг областей оточення. Для демонстрації розглянемо наступний приклад коду.

+ +
// global scope
+var e = 10;
+function sum(a){
+  return function(b){
+    return function(c){
+      // outer functions scope
+      return function(d){
+        // local scope
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+console.log(sum(1)(2)(3)(4)); // log 20
+
+// You can also write without anonymous functions:
+
+// global scope
+var e = 10;
+function sum(a){
+  return function sum2(b){
+    return function sum3(c){
+      // outer functions scope
+      return function sum4(d){
+        // local scope
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+var s = sum(1);
+var s1 = s(2);
+var s2 = s1(3);
+var s3 = s2(4);
+console.log(s3) //log 20
+
+ +

У наведеному вище прикладі є низка вкладених функцій, всі з яких мають доступ до області оточення зовнішніх функцій. У цьому контексті можна сказати, що замикання мають доступ до всіх зовнішніх областей функцій.

+ +

Creating closures in loops: A common mistake

+ +

До введення ключового слова let у ECMAScript 2015, загальна проблема із замиканням виникала, коли вони створювалися всередині циклу. Розглянемо наступний приклад: 

+ +
<p id="help">Helpful notes will appear here</p>
+<p>E-mail: <input type="text" id="email" name="email"></p>
+<p>Name: <input type="text" id="name" name="name"></p>
+<p>Age: <input type="text" id="age" name="age"></p>
+
+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}

+ +

Масив helpText визначає три корисні підказки, кожну пов'язану з ID поля Input. Цикл циклично перераховує ці визначення, підключаючи подію onfocus до кожного, що показує пов'язаний метод help.

+ +

Якщо ви спробуєте цей код, ви побачите, що він не працює, як очікувалося. Незалежно від того, на якому полі ви зосереджені, відображатиметься повідомлення про ваш вік.

+ +

Причиною цього є те, що функції, призначені для фокусування, - це замикання; вони складаються з визначення функції та захопленого оточення з області видимосты функцій setupHelp.  Три замикання були створені циклом, але кожне ділиться тим самим єдиним середовищем, яке має змінну зі змінними значеннями (item.help).

+ +

Коли виконуються зворотні виклики onfocus, доступ до item.help в цей момент викликає таку поведінку (дійсно, оскільки значення змінної доступно / обчислюється лише під час виконання), оскільки цикл до цього часу виконувався, а об'єкт змінної елемента (розділений усіма трьома замиканнями) був залишений, вказуючи на останній запис у списку довідкового тексту.

+ +

Одне рішення в цьому випадку - використовувати більше замикань: зокрема, використовувати фабрику функцій, як описано раніше:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}

+ +

Це працює як очікувалося. Замість того, щоб зворотні виклики мали спільний доступ до одного середовища, функція makeHelpCallback створює нове середовище для кожного з них, в якій довідка посилається на відповідний рядок із масиву helpText.

+ +

Ще один спосіб написати вищезгадане - використання  анонімних  замикань:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    (function() {
+       var item = helpText[i];
+       document.getElementById(item.id).onfocus = function() {
+         showHelp(item.help);
+       }
+    })(); // Immediate event listener attachment with the current value of item (preserved until iteration).
+  }
+}
+
+setupHelp();
+ +

Якщо ви не хочете більше використовувати замикання, можете скористатися ключовим словом let з ES6:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    let item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+ +

Цей приклад використовує let замість var, таким чином кожне замикання прив'язує блочну  змінну,це означає, що додаткові замикання не потрібні.

+ +

Іншою альтернативою може бути використання forEach () для повторення масиву helpText та приєднання слухача до кожного <p>, як показано:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  helpText.forEach(function(text) {
+    document.getElementById(text.id).onfocus = function() {
+      showHelp(text.help);
+    }
+  });
+}
+
+setupHelp();
+
+ +

Performance considerations

+ +

Нерозумно створювати функції в межах інших функцій, якщо замикання не потрібне для конкретного завдання, оскільки це негативно вплине на продуктивність сценарію як з точки зору швидкості обробки, так і споживання пам'яті.

+ +

Наприклад, при створенні нового об'єкта / класу методи, як правило, повинні бути пов'язані з прототипом об'єкта, а не визначені в конструкторі об'єктів. Причина полягає в тому, що щоразу, коли конструктор викликається, методи отримують перепризначення (тобто для кожного створення об'єкта).

+ +

Розглянемо наступний непрактичний, але показовий випадок:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+
+ +

Попередній код не використовує переваги замикань, а тому може виглядати:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+
+ +

Однак переробляти прототип не рекомендується, тому наступний приклад ще кращий, оскільки він додається до існуючого прототипу:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+
+ +

Код вище також може бути записаний чистіше з тим же результатом:

+ +
function MyObject(name, message) {
+    this.name = name.toString();
+    this.message = message.toString();
+}
+(function() {
+    this.getName = function() {
+        return this.name;
+    };
+    this.getMessage = function() {
+        return this.message;
+    };
+}).call(MyObject.prototype);
+
+ +

In the three previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See Details of the Object Model for more details.  У трьох попередніх прикладах успадкований прототип може бути спільним для всіх об'єктів, і визначення методів не повинно виникати при кожному створенні об'єкта. Докладніше див. Деталі Об'єктної Моделі (Details of the Object Model).

diff --git a/files/uk/web/javascript/data_structures/index.html b/files/uk/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..ae52c4dbdc --- /dev/null +++ b/files/uk/web/javascript/data_structures/index.html @@ -0,0 +1,305 @@ +--- +title: Типи та структури даних у JavaScript +slug: Web/JavaScript/Data_structures +tags: + - JavaScript + - Types +translation_of: Web/JavaScript/Data_structures +--- +
{{jsSidebar("More")}}
+ +

Усі мови програмування мають вбудовані структури даних, які, втім, у різних мовах дещо відрізняються. У цій статті ми розглянемо наявні у JavaScript структури даних та їх властивості, а також створення на їх основі інших структур. За можливості наведемо порівняння з іншими мовами.

+ +

Динамічна типізація

+ +

JavaScript є мовою з нестрогою типізацією або ж динамічною мовою. Оголошення змінної в JavaScript не визначає типу даних, а отже всяка змінна з отриманням нового значення отримує і новий тип. Звідси випливає, що тип з'ясовується перед виконанням певної операції, позаяк від нього залежить і результат:

+ +
// Одразу по оголошенню змінна foo разом з початковим значенням отримує тип Number
+var foo = 42;
+
+console.log(foo + 1);  // виводить 43
+
+// Змінна отримує нове значення й тепер має тип String
+foo = 'bar';
+
+console.log(foo + 1);  // виводить "bar1"
+
+// Разом із значенням true тип змінної foo обертається на Boolean
+foo = true;
+
+ +

Типи даних

+ +

Згідно з останнім стандартом ECMAScript у мові є сім типів даних:

+ + + +

Прості величини

+ +

Усі типи даних, окрім об'єкта, передають незмінювані величини (можна встановити нове значення змінної, але неможливо змінити того значення, яке вона вже має). На відміну від, наприклад, мови C, рядки є незмінюваними. Такі величини називають {{Glossary("Primitive", "простими")}} або «примітивними».

+ +

Тип boolean

+ +

Тип Boolean передає два логічних значення: true та false.

+ +

Тип null

+ +

Тип Null, власне, передає лише одне-єдине значення: null. Див. також {{jsxref("null")}} та {{Glossary("Null")}}.

+ +

Тип undefined

+ +

Змінна, допоки не отримає нового (початкового), має значення undefined. Див. також {{jsxref("Global_Objects/undefined", "undefined")}} та {{Glossary("Undefined")}}.

+ +

Тип number

+ +

Відповідно до стандарту ECMAScript, існує лише один тип чисел: 64-розрядне число подвійної точності з рухомою комою в форматі IEEE 754 (приймає значення від -(253 -1) до 253 -1). Для цілих чисел немає окремого типу даних. Окрім чисел з рухомою комою цей формат підтримує три особливих значення: +Infinity, -Infinity та {{jsxref("Global_Objects/NaN", "NaN")}} (так зване «не число»).

+ +

To check for the largest available value or smallest available value within +/-Infinity, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}} and starting with ECMAScript 6, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.

+ +

The number type has only one integer that has two representations: 0 is represented as -0 and +0. ("0" is an alias for +0). In the praxis, this has almost no impact. For example +0 === -0 is true. However, you are able to notice this when you divide by zero:

+ +
> 42 / +0
+Infinity
+> 42 / -0
+-Infinity
+
+ +

Although a number often represents only its value, JavaScript provides some binary operators. These can be used to represent several Boolean values within a single number using bit masking. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans or an object with Boolean values assigned to named properties). Bit masking also tends to make code more difficult to read, understand, and maintain. It may be necessary to use such techniques in very constrained environments, like when trying to cope with the storage limitation of local storage or in extreme cases when each bit over the network counts. This technique should only be considered when it is the last measure that can be taken to optimize size.

+ +

Тип string

+ +

JavaScript's {{jsxref("Global_Objects/String", "String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it.

+ +

Unlike in languages like C, JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. However, it is still possible to create another string based on an operation on the original string. For example:

+ + + +

Beware of "stringly-typing" your code!

+ +

It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:

+ + + +

With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.

+ +

Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.

+ +

Тип symbol

+ +

Symbols are new to JavaScript in ECMAScript Edition 6. A Symbol is a unique and immutable primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called atoms. For more details see {{Glossary("Symbol")}} and the {{jsxref("Symbol")}} object wrapper in JavaScript.

+ +

Об'єкти

+ +

In computer science, an object is a value in memory which is possibly referenced by an {{Glossary("Identifier", "identifier")}}.

+ +

Properties

+ +

In JavaScript, objects can be seen as a collection of properties. With the object literal syntax, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.

+ +

There are two types of object properties which have certain attributes: The data property and the accessor property.

+ +

Data property

+ +

Associates a key with a value and has the following attributes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributes of a data property
AttributeTypeDescriptionDefault value
[[Value]]Any JavaScript typeThe value retrieved by a get access of the property.undefined
[[Writable]]BooleanIf false, the property's [[Value]] can't be changed.false
[[Enumerable]]BooleanIf true, the property will be enumerated in for...in loops. See also Enumerability and ownership of propertiesfalse
[[Configurable]]BooleanIf false, the property can't be deleted and attributes other than [[Value]] and [[Writable]] can't be changed.false
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)
AttributeTypeDescription
Read-onlyBooleanReversed state of the ES5 [[Writable]] attribute.
DontEnumBooleanReversed state of the ES5 [[Enumerable]] attribute.
DontDeleteBooleanReversed state of the ES5 [[Configurable]] attribute.
+ +

Accessor property

+ +

Associates a key with one or two accessor functions (get and set) to retrieve or store a value and has the following attributes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributes of an accessor property
AttributeTypeDescriptionDefault value
[[Get]]Function object or undefinedThe function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed. See also get.undefined
[[Set]]Function object or undefinedThe function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed. See also set.undefined
[[Enumerable]]BooleanIf true, the property will be enumerated in for...in loops.false
[[Configurable]]BooleanIf false, the property can't be deleted and can't be changed to a data property.false
+ +
+

Note: Attribute is usually used by JavaScript engine, so you can't directly access it(see more about Object.defineProperty()).That's why the attribute is put in double square brackets instead of single.

+
+ +

"Normal" objects, and functions

+ +

A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for hashmaps.

+ +

Functions are regular objects with the additional capability of being callable.

+ +

Dates

+ +

When representing dates, the best choice is to use the built-in Date utility in JavaScript.

+ +

Indexed collections: Arrays and typed Arrays

+ +

Arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from Array.prototype which provides to them a handful of convenient methods to manipulate arrays. For example, indexOf (searching a value in the array) or push (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.

+ +

Typed Arrays are new to JavaScript with ECMAScript Edition 6 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:

+ +

{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}

+ +

Keyed collections: Maps, Sets, WeakMaps, WeakSets

+ +

These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.

+ +

One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.

+ +

Usually, to bind data to a DOM node, one could set properties directly on the object or use data-* attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.

+ +

Structured data: JSON

+ +

JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.

+ +

More objects in the standard library

+ +

JavaScript has a standard library of built-in objects. Please have a look at the reference to find out about more objects.

+ +

З'ясування типу за допомогою оператора typeof

+ +

The typeof operator can help you to find the type of your variable. Please read the reference page for more details and edge cases.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення.
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}} 
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html new file mode 100644 index 0000000000..b176c24495 --- /dev/null +++ b/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html @@ -0,0 +1,330 @@ +--- +title: Перелічуваність та належність властивостей +slug: Web/JavaScript/Enumerability_and_ownership_of_properties +tags: + - JavaScript + - Посібник +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +
{{JsSidebar("More")}}
+ +

Перелічуваними називаються властивості, чий внутрішній прапор перелічуваності має значення true, що є значенням за замовчуванням для властивостей, створених простим присвоєнням або за допомогою ініціалізатора властивості (властивості, визначені за допомогою Object.defineProperty та подібного, за замовчуванням мають значення перелічуваності false). Перелічувані властивості з'являються у циклах for...in, якщо тільки ключ властивості не є символом. Належність властивостей визначається тим, чи належить властивість безпосередньо до об'єкта, а не до його ланцюга прототипів. Властивості об'єкта також можна отримати всі загалом. Існують численні вбудовані засоби виявлення, перебору/переліку та отримання властивостей об'єкта, а у таблиці нижче наведено, які з них є доступними. Далі наведено зразок коду, який демонструє, як отримати відсутні категорії.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Перелічуваність та належність властивостей - вбудовані методи виявлення, отримання та перебору
ФункціональністьВласний об'єктВласний об'єкт та його ланцюг прототипівЛише ланцюг прототипів
Виявлення + + + + + + + + + + + + + + + +
ПерелічуваніНеперелічуваніПерелічувані та неперелічувані
+

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

+ +

(за винятком символів)

+
Недоступні без додаткового кодуНедоступні без додаткового коду
+
Недоступні без додаткового коду
+
+ +

Отримання властивостей за перелічуваністю/належністю

+ +

Зауважте, що це не найефективніший алгоритм для усіх випадків, але він корисний для швидкої демонстрації.

+ + + +
var SimplePropertyRetriever = {
+    getOwnEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Або скористайтесь for..in, відфільтрувавши методом hasOwnProperty, або просто цим: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Або просто скористайтесь: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Або можна використати невідфільтрований результат for..in
+    },
+    getOwnAndPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Приватні статичні фукнції зворотного виклику для перевірки властивостей
+    _enumerable: function(obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable: function(obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable: function(obj, prop) {
+        return true;
+    },
+    // Натхненний http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function(prop) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};
+ +

Таблиця виявлення

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
infor..inobj.hasOwnPropertyobj.propertyIsEnumerableObject.keysObject.getOwnPropertyNamesObject.getOwnPropertyDescriptorsReflect.ownKeys()
Перелічуваніtruetruetruetruetruetruetruetrue
Неперелічуваніtruefalsetruefalsefalsetruetruetrue
Символиtruefalsetruetruefalsefalsetruetrue
Успадковані перелічуваніtruetruefalsefalsefalsefalsefalsefalse
Успадковані неперелічуваніtruefalsefalsefalsefalsefalsefalsefalse
Успадковані символиtruefalsefalsefalsefalsefalsefalsefalse
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/eventloop/index.html b/files/uk/web/javascript/eventloop/index.html new file mode 100644 index 0000000000..ab47fd4b48 --- /dev/null +++ b/files/uk/web/javascript/eventloop/index.html @@ -0,0 +1,152 @@ +--- +title: Модель конкурентності та цикл подій +slug: Web/JavaScript/EventLoop +tags: + - JavaScript + - обробники подій + - події + - цикл подій + - черга +translation_of: Web/JavaScript/EventLoop +--- +
{{JsSidebar("Advanced")}}
+ +

JavaScript має модель одночасності, що базується на циклі подій, який є відповідальним за виконання коду, збір та обробку подій та виконання підзадач з черги. Ця модель доволі сильно відрізняється від моделей у інших мовах, таких як С та Java.

+ +

Концепції виконання

+ +

Наступні розділи пояснють теоретичну модель. Сучасні імплементації JavaScript реалізують і значно оптимізують описану семантику.

+ +

Візуальне відображення

+ +

Стек, купа, черга

+ +

Стек

+ +

Виклики функцій утворюють стек фреймів (frames).

+ +
function foo(b) {
+  var a = 10;
+  return a + b + 11;
+}
+
+function bar(x) {
+  var y = 3;
+  return foo(x * y);
+}
+
+console.log(bar(7)); // вертає 42
+
+ +

Коли викликається bar, утворюється перший фрейм, який містить аргументи та локальні змінні функції bar. Коли bar викликає foo, створюється другий фрейм та розміщується над першим, він містить аргументи та локальні змінні функції foo. Коли foo повертає значення, верхній фрейм виштовхується зі стеку (залишаючи лише фрейм виклику bar). Коли bar повертає значення, стек стає порожнім.

+ +

Купа

+ +

Об'єкти розподіляються у купі, яка є лише назвою для позначення великої (здебільшого не структурованої) області пам'яті.

+ +

Черга

+ +

Процес виконання JavaScript використовує чергу повідомлень, яка є списком повідомлень, що мають бути опрацьовані. Кожне повідомлення має пов'язану функцію, яка викликається для обробки цього повідомлення 

+ +

В певний момент {{anch("Цикл_подій", "циклу подій")}} процес виконання починає обробку повідомлень з черги, починаючи з найстаршого. Для цього повідомлення видаляється з черги, а його пов'язана функція викликається з повідомленням в якості вхідного параметра. Як завжди, виклик функції створює новий фрейм стеку для цієї функції.

+ +

Опрацювання функцій продовжується, доки стек знову не стане порожнім. Тоді цикл подій опрацює наступне повідомлення у черзі (якщо воно є).

+ +

Цикл подій

+ +

Цикл подій отримав свою назву через те, як він зазвичай реалізується. Як правило, це схоже на:

+ +
while (queue.waitForMessage()) {
+  queue.processNextMessage();
+}
+ +

queue.waitForMessage синхронно чекає на прибуття повідомлення (якщо воно вже не надійшло і не чекає на обробку).

+ +

"Виконання до завершення"

+ +

Кожне повідомлення обробляється до завершення, перш, ніж обробляти будь-яке інше повідомлення.

+ +

Це надає деякі приємні властивості для вашої програми, в тому числі той факт, що, коли виконується функція, вона не може бути попередньо вилучена і виконається до кінця перш, ніж буде запущено будь-який інший код (і зможе змінювати дані, якими користується функція). Це відрізняється, наприклад, від C, де, якщо функція виконується у потоці, її можна зупинити в будь-якій точці, щоб запустити інший код в іншому потоці.

+ +

Зворотним боком цієї моделі є те, що, якщо обробка повідомлення займає надто багато часу, веб-застосунок не може обробити взаємодії користувача, як-от натискання чи прокручування. Веб-переглядач пом'якшує це діалоговим вікном "a script is taking too long to run" (виконання сценарію займає забагато часу). Гарною практикою є робити обробку повідомлень короткою і, за можливості, розбивати одне повідомлення на декілька.

+ +

Додавання повідомлень

+ +

У веб-переглядачах повідомлення додаються щоразу, коли виникає подія, до якої приєднаний прослуховувач подій. Якщо прослуховувача немає, подія втрачається. Отже, натискання на елементі з обробником подій натискання додасть повідомлення, так само з будь-якою іншою подією.

+ +

Функція setTimeout викликається з двома аргументами: повідомлення, що додається до черги, та значення часу (необов'язкове; за замовчуванням 0). Значення часу відображає (мінімальну) затримку, після якої повідомлення буде, власне, додане до черги. Якщо в черзі немає інших повідомлень, це повідомлення буде оброблене одразу після затримки. Однак, якщо там є повідомлення, повідомленню setTimeout доведеться зачекати, доки не будуть оброблені інші повідомлення. З цієї причини другий аргумент вказує мінімальний, а не гарантований час.

+ +

Ось приклад, який демонструє цю концепцію (setTimeout не виконується негайно після того, як його таймер завершився): 

+ +
const s = new Date().getSeconds();
+
+setTimeout(function() {
+  // виводить "2", тобто, функція зворотного виклику не запустилась одразу через 500 мілісекунд.
+  console.log("Функція запустилась через " + (new Date().getSeconds() - s) + " секунд");
+}, 500)
+
+while (true) {
+  if (new Date().getSeconds() - s >= 2) {
+    console.log("Добре, виконувалось 2 секунди")
+    break;
+  }
+}
+ +

Нульові затримки

+ +

Нульова затримка насправді не означає, що зворотній виклик запуститься через нуль мілісекунд. Виклик {{domxref ("WindowTimers.setTimeout", "setTimeout")}} із затримкою в 0 (нуль) мілісекунд не виконує функцію зворотного виклику після заданого інтервалу.

+ +

Виконання залежить від кількості задач, що чекають у черзі. У наведеному нижче прикладі повідомлення "це просто повідомлення" буде написане у консоль раніше, ніж буде оброблене повідомлення у зворотному виклику, оскільки затримка - це мінімальний час, необхідний для обробки запиту (а не гарантований час).

+ +

Загалом, setTimeout має чекати, доки виконається весь код для повідомлень у черзі, незважаючи на те, що ви вказали певний часовий ліміт для своєї функції setTimeout.

+ +
(function() {
+
+  console.log('це початок');
+
+  setTimeout(function cb() {
+    console.log('Зворотний виклик 1: це повідомлення зворотного виклику');
+  });
+
+  console.log('це просто повідомлення');
+
+  setTimeout(function cb1() {
+    console.log('Зворотний виклик 2: це повідомлення зворотного виклику');
+  }, 0);
+
+  console.log('це кінець');
+
+})();
+
+// "це початок"
+// "це просто повідомлення"
+// "це кінець"
+// "Зворотний виклик 1: це повідомлення зворотного виклику"
+// "Зворотний виклик 2: це повідомлення зворотного виклику"
+
+ +

Декілька процесів виконання, що спілкуються між собою

+ +

Веб-виконавець або iframe перехресного походження має свій стек, купу та чергу повідомлень. Два різних процеси виконання можуть спілкуватися надсиланням повідомлень за допомогою методу postMessage. Цей метод додає повідомлення до іншого процесу виконання, якщо останній прослуховує події message.

+ +

Жодного блокування

+ +

Дуже цікавою властивістю моделі циклу подій є те, що JavaScript, на відміну від багатьох інших мов, ніколи не блокує. Управління введенням/виводом зазвичай здійснюється за допомогою подій та зворотних викликів, тому, коли програма чекає на результат запиту IndexedDB чи запиту XHR, вона може опрацьовувати інші події, такі як введення даних користувачем.

+ +

Існують спадкові винятки, такі як alert або синхронний XHR, але вважається гарною практикою їх уникати. Будьте обережні: існують винятки з винятку (але зазвичай це помилки реалізації, а не що-небудь інше).

+ +

Специфікації

+ + + + + + + + + + + + + +
Специфікація
{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}
Node.js Event Loop
diff --git a/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html b/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..c055e31dc0 --- /dev/null +++ b/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,465 @@ +--- +title: Управління потоком виконання та обробка помилок +slug: Web/JavaScript/Guide/Control_flow_and_error_handling +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
+ +

JavaScript підтримує компактний набір інструкцій, зокрема інструкцій для управління потоком, які можна використати, щоб включити інтерактивність до вашого додатку. Цей розділ надає огляд таких інструкцій.

+ +

Довідник JavaScript містить вичерпні дані про інструкції, описані у цьому розділі. Символ крапки з комою (;) розділяє інструкції у JavaScript-коді.

+ +

Будь-який вираз у JavaScript також являється інструкцією. Повну інформацію про вирази дивіться у розділі Вирази та оператори.

+ +

Блокова інструкція

+ +

Найбільш базовою інструкцією є блокова, що об'єднує кілька інструкцій в одну. Блок обмежується парою фігурних дужок:

+ +
{
+  інструкція_1;
+  інструкція_2;
+  .
+  .
+  .
+  інструкція_n;
+}
+
+ +

Приклад

+ +

Блокова інструкція зазвичай використовується поряд з інструкціями для управління потоком виконання (наприклад, if, for, while).

+ +
while (x < 10) {
+  x++;
+}
+
+ +

У даному випадку, { x++; } є блоковою інструкцією.

+ +
+

Важливо: JavaScript до ECMAScript2015 не мав блокової області видимості. Змінні, об'явлені всередині блоку, були видимі в області меж зовнішньої функції або ж усього скрипта. І ефект від їхнього зміни поширювався за межі блоку. Інакше кажучи, блокові інструкції не створювали області видимості.

+ +

"Поодинокі" блоки у JavaScript можуть мати зовсім інші наслідки, ніж у мовах C чи Java. Наприклад:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // в результаті - 2
+
+ +

В результаті отримуємо 2, тому що інструкція var x всередині блоку перебуває в одній області видимості з інструкцією var x перед блоком. У C чи Java подібний код поверне 1.

+ +

Починаючи з ECMAScript2015, декларації змінних let і const мають блокову область видимості. Докладніше на довідкових сторінках {{jsxref("Statements/let", "let")}} і {{jsxref("Statements/const", "const")}}.

+
+ +

Умовні інструкції

+ +

Умовною інструкцією називається набір команд, що виконаються, якщо певна умова буде істинною. JavaScript підтримує два види умовних інструкцій: if...else та switch.

+ +

Інструкція if...else

+ +

Використовуйте if, щоб виконати інструкцію, якщо логічна умова являється істинною. Використовуйте необов'яковий else, щоб виконати інструкцію, якщо умова являється хибною. Інструкція if виглядає так:

+ +
if (умова) {
+  інструкція_1;
+} else {
+  інструкція_2;
+}
+ +

Тут умова може бути будь-яким виразом, що зводиться до true чи false (дивіться розділ Boolean для роз'яснення, що і як обчислюється до true чи false). Якщо умова обчислюється до true, виконується інструкція_1; інакше виконується інструкція_2. інструкція_1 та інструкція_2 можуть бути будь-якими, включаючи вкладені інструкції if.

+ +

Можна також суміщувати інструкції у вигляді else if, щоб послідовно перевірити кілька умов, як-от, наприклад:

+ +
if (умова_1) {
+  інструкція_1;
+} else if (умова_2) {
+  інструкція_2;
+} else if (умова_n) {
+  інструкція_n;
+} else {
+  інструкція_остання;
+}
+
+ +

У випадку наявності кількох таких умов буде виконано лише найперший обчислений до true. Щоб виконати кілька інструкцій, слід об'єднати їх у блок ({ ... }) .

+ +

Найкращі практики

+ +

Загалом, хорошою практикою вважається завжди використовувати блоки інструкцій, особливо при вкладенні інструкцій if:

+ +
if (умова) {
+  інструкція_1_виконується_якщо_умова_правильна;
+  інструкція_2_виконується_якщо_умова_правильна;
+} else {
+  інструкція_3_виконується_якщо_умова_хибна;
+  інструкція_4_виконується_якщо_умова_хибна;
+}
+
+ +
Не рекомендується використовувати звичайні присвоєння в умовних виразах, бо присвоєння можна сплутати з порівнянням при перегляді коду.
+ +
+ +
Наприклад, не слід писати ось так:
+ +
// Ймовірно, буде прочитано як "x == y"
+if (x = y) {
+  /* statements here */
+}
+
+ +

Якщо все ж таки потрібно використати присвоєння всередині умовного виразу, загальною практикою є додавання зайвих дужок навколо присвоєння, як-от:

+ +
if ((x = y)) {
+  /* інструкції тут */
+}
+
+ +

Хибні значення

+ +

Наступні значення обчислюються до false (також знані як {{Glossary("Falsy")}} значення):

+ + + +

Всі інші значення (включно з усіма об'єктами), обчислюються до true при передачі в умовний вираз.

+ +
+

Увага: не плутайте примітивні булеві значення true та false із істинними і хибними значеннями об'єкту {{jsxref("Boolean")}}. Наприклад:

+ +
var b = new Boolean(false);
+if (b) // цей умовний вираз буде істинним
+if (b == true) // цей умовний вираз буде хибним
+
+
+ +

Приклад

+ +

У наведеному далі прикладі функція checkData повертає true, якщо в об'єкті  Text три символи, а інакше вона показує сповіщення та повертає false.

+ +
function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert('Enter exactly three characters. ' +
+    document.form1.threeChar.value + ' is not valid.');
+    return false;
+  }
+}
+
+ +

Інструкція switch

+ +

Інструкція switch дозволяє програмі оцінити вираз і спробувати співставити значення виразу з міткою case. Якщо відповідність знайдено  , програма виконує пов'язану з цим інструкцію.

+ +

Інструкція switch виглядає наступним чином:

+ +
switch (expression) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}
+ +

JavaScript розуміє switch інструкцію наступним чином:

+ + + +

Інструкція break

+ +

Необов'язкова інструкція break, пов’язана із кожним пунктом case, забезпечує те, що програма виходить з конструкції switch, якщо виконується відповідна умова, і продовжує виконання інструкцій після конструкції switch. Якщо break не використовується, програма продовжує виконання інструкції наступних пунктів всередині switch, не перевіряючи умови.

+ +
Приклад
+ +

У наступному прикладі, якщо fruittype дорівнює "Bananas", програма виконує пов'язану з пукнтом "Bananas" інструкцію. Коли виникає break, програма припиняє switch та виконує наступну після switch інструкцію. Якщо break б була опущена, інструкції для пункту "Cherries" також би виконалися.

+ +
switch (fruittype) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+    console.log('Mangoes are $0.56 a pound.');
+    break;
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+   console.log('Sorry, we are out of ' + fruittype + '.');
+}
+console.log("Is there anything else you'd like?");
+ +

Інструкції для обробки винятків

+ +

Використовуючи інструкцію throw , можна викидати виключення і обробляти їх за допомогою інструкцій try...catch.

+ + + +

Типи винятків

+ +

В якості виключення у JavaScript можна викинути практично будь-який об'єкт. Тим не менш, не всі викинуті об'єкти створено однаковими. Позаяк доволі звичною практикою є викидати числа чи стрічки в якості помилок, часто краще використовувати якийсь із типів винятків, спеціально створених для цих потреб:

+ + + +

Оператор throw

+ +

Скористайтеся оператором throw, щоб викинути виняток. Коли викидаєте виняток, ви вказуєте вираз, що містить значення, яке викидається:

+ +
throw expression;
+
+ +

Ви можете викинути будь-який вираз, не тільки вирази окремих типів. Наступний код викидає кілька винятків різних типів:

+ +
throw 'Error2';   // тип String
+throw 42;         // тип Number
+throw true;       // тип Boolean
+throw {toString: function() { return "Я об'єкт!"; } };
+
+ +
Примітка: Ви можете вказати об'єкт, коли викидаєте виняток. Після цього ви можете звертатися до властивостей об'єкта у блоці catch.
+ +
// Створити об'єкт UserException
+function UserException(message) {
+  this.message = message;
+  this.name = 'UserException';
+}
+
+// Гарненько оформити виняток у разі використання в якості рядка
+// (наприклад, у консолі помилок)
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Створити екземпляр об'єкта та викинути його
+throw new UserException('Значення завелике');
+ +

Інструкція try...catch

+ +

Інструкція try...catch позначає блок інструкцій, які програма спробує виконати, і вказує одну чи більше реакцій на викинутий виняток. Коли викидається виняток, інструкція try...catch його ловить.

+ +

Інструкція try...catch складається з блока try, що містить одну чи більше інструкцій, і блоку catch, що містить інструкції до виконання у разі, якщо у блоці try буде викинуто виняток.

+ +

Інакше кажучи, ми хочемо, щоб блок try успішно виконався. Але якщо так не станеться, ми хочемо, щоб управління перейшло до блоку catch. Практично, якщо будь-яка з інструкцій всередині блоку try (або всередині функції, викликаної зсередини блоку try) викидає виняток, управління одразу передається до блоку catch. У разі, якщо блок try не викинув жодного винятку, блок catch пропускається. А блок finally виконується після виконання try та catch і до інструкцій, що слідують після Інструкції try...catch.

+ +

Наступний приклад містить інструкцію try...catch. У прикладі викликається функція, що повертає назву місяця з масиву, керуючись номером, переданим у функцію. Якщо число не відповідає номерові місяця (112), викидається виняток зі стрічкою "InvalidMonthNo" в якості значення, а інструкції, описані у блоці catch, встановлюють значення змінної monthName у 'unknown'.

+ +
function getMonthName(mo) {
+  mo = mo - 1; // Коригуємо порядковий номер місяця для використання в якості
+               // індекса масиву (1 = Jan, 12 = Dec)
+  var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
+                'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw 'InvalidMonthNo'; // тут застосуємо ключове слово throw
+  }
+}
+
+try { // інструкції, які ми намагаємося виконати
+  monthName = getMonthName(myMonth); // функція може викинути виняток
+}
+catch (e) {
+  monthName = 'unknown';
+  logMyErrors(e); // передаємо значення винятку в обробник помилок (наприклад, вашу власну функцію)
+}
+
+ +

Блок catch

+ +

Блок catch можна використовувати для обробки всіх винятків, що можуть виникнути при виконання блоку try.

+ +
catch (catchID) {
+  інструкції
+}
+ +

Блок catch задає ідентифікатор (catchID у прикладі вище), що містить значення, вказане оператором throw. За допомогою цього ідентифікатора можна отримати інформацію про виняток, який було викинуто.

+ +

JavaScript створює цей ідентифікатор, як тільки управління переходить до блоку catch. Ідентифікатор існує доти, доки виконується catch. Як тільки блок catch завершує роботу, ідентифікатор знищується.

+ +

Наприклад, наступний код викидає виняток. Коли це відбувається, управління передається до блоку catch.

+ +
try {
+  throw 'myException'; // створює виняток
+}
+catch (e) {
+  // інструкції для обробки якихось винятків
+  logMyErrors(e); // передає об'єкт винятку до обробника помилок
+}
+
+ +
+

Найкращі практики: Під час запису помилок до консолі всередині блоку catch для потреб зневадження рекомендується використовувати console.error() замість console.log(). Це одразу форматує повідомлення як помилку, і також додає його до загального списку помилок, що трапилися на сторінці. 

+
+ +

Блок finally

+ +

Блок finally містить інструкції для виконання після завершення роботи блоку try...catch. Блок finally також виконається перед кодом, що слідує безпосередньо за оператором try…catch…finally.

+ +

Також важливо зауважити, що блок finally буде виконано незалежно від того, чи було викинуто виняток. Однак, якщо виняток таки було викинуто, інструкції блоку finally буде виконано, навіть якщо жоден блок catch не обробив викинутий виняток.

+ +

Блок finally можна використовувати, щоб заставити скрипт "м'яко впасти", коли трапляється виняток. Наприклад - для того, щоб звільнити ресурс, взятий скриптом.

+ +

Приклад, наведений далі, відкриває файл і виконує певні дії з ним. (JavaScript на сервері дозволяє отримувати доступ до файлів.) Якщо викидається виняток, поки файл було відкрито, блок finally закриває файл перед тим, як скрипт впаде. Застосування finally тут гарантує, що файл ні в якому разі не залишиться відкритим, навіть якщо трапиться помилка.

+ +
openMyFile();
+try {
+  writeMyFile(theData); // Це може викинути помилку
+} catch(e) {
+  handleError(e); // Обробити помилку, якщо вона трапиться
+} finally {
+  closeMyFile(); // Завжди закривати ресурс
+}
+
+ +

Якщо блок finally повертає якесь значення, це значення стає результатом роботи всього блоку try-catch-finally, незалежно від будь-яких інструкцій return всередині try чи catch:

+ +
function f() {
+  try {
+    console.log(0);
+    throw 'bogus';
+  } catch(e) {
+    console.log(1);
+    return true; // ця інструкція чекатиме
+                 // допоки не виконається блок finally
+    console.log(2); // недосяжний код
+ } finally {
+    console.log(3);
+    return false; // переписує попередній "return"
+    console.log(4); // недосяжний код
+  }
+  // тепер виконується "return false"
+  console.log(5); // недосяжний код
+}
+f(); // console 0, 1, 3; returns false
+
+ +

Переписування значень "return" блоком finally також стосується винятків, викинутих (можливо, повторно) всередині блоку catch :

+ +
function f() {
+  try {
+    throw 'bogus';
+  } catch(e) {
+    console.log('упіймано внутрішній "bogus"');
+    throw e; // ця інструкція чекатиме,
+             // допоки не виконається бльок finally
+  } finally {
+    return false; // переписує попередній "throw"
+  }
+  // тепер виконується "return false"
+}
+
+try {
+  f();
+} catch(e) {
+  // цей код ніколи не виконається, бо "throw"
+  // усередині "catch" переписано
+  // "return"ом у "finally"
+  console.log('упіймано зовнішній "bogus"');
+}
+
+// ВИВІД:
+// упіймано внутрішній "bogus"
+ +

Вкладені інструкції try...catch

+ +

Можна вкладати одну чи більше інструкцій try...catch. Якщо внутрішня інструкція try...catch не має блоку catch, мусить бути блок finally, і блок catch зовнішної інструкції try...catch буде перевірено на збіг. За детальнішою інфорацією див. nested try-blocks на сторінці try...catch.

+ +

Обробка об'єктів Error

+ +

Залежно від типу помилки, ви зможете використати властивості 'name' і 'message' для покращеного повідомлення. 'name' переважно називає клас, похідний від класу Error (напр., 'DOMException' або 'Error'), а 'message' традиційно дає стисліше повідомлення, ніж те, що виходить після конвертування об'єкта помилки у string.

+ +

Якщо ви викидаєте влавні винятки, то для користі з цих властивостей (напр., щоб ваш блок catch відрізняв ваші винятки від системних) сожете скористатися конструктором Error. Наприклад:

+ +
function doSomethingErrorProne() {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('Повідомлення'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+} catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'Повідомлення' або JavaScript error message)
+}
+ +

Обіцянки (Promises)

+ +

Починаючи з ECMAScript2015, JavaScript дістав підтримку об'єктів {{jsxref("Promise")}}, що дає змогу контролювати плин відкладених і асинхронних операцій.

+ +

Обіцянка (Promise) має один зі станів:

+ + + +

+ +

Завантаження образу з допомогою XHR

+ +

Простий приклад використання Обіцянки (Promise) і XMLHttpRequest для завантаження образу міститься в репозиторії MDN GitHub js-examples repository. Ви також можете бачити її в дії: see it in action. Кожен крок прокоментовано, що дає змогу зблизька побачити архітектуру Обіцянок (Promises) і XHR. Тут наведено розкоментовану версію, що показує плин Обіцянки (Promise) , тож ви можете схопити ідею:

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}
+ +

За деталями звертайтеся до сторінки {{jsxref("Promise")}} і посібника Using Promises.

+ +
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git a/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html b/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html new file mode 100644 index 0000000000..5e756710dd --- /dev/null +++ b/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html @@ -0,0 +1,760 @@ +--- +title: Докладно про об'єктну модель +slug: Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model +tags: + - Guide + - Intermediate + - JavaScript + - Object +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
+ +

JavaScript - це об'єктна мова, що заснована на прототипах, а не на класах. У зв'язку з цим може бути менш очевидно, як саме JavaScript  дозволяє створювати ієрархії об'єктів із наслідуванням їх властивостей та значень. Цей розділ є спробою дещо прояснити цей механізм.

+ +

Вміст цього розділу розрахований на те, що ви вже, принаймні, дещо знайомі з мовою JavaScript, і застосовували його функції для створення простих об'єктів.

+ +

Мови з класовою та прототипною моделлю

+ +

Об'єктно-орієнтовані мови з класовою моделлю, такі як Java і C++, засновані на концепції двох окремих сутностей: класів та екземплярів.

+ + + +

Мови з прототипною моделлю наслідування, такі як JavaScript, не розділяють ці сутності: у них просто є об'єкти. Такі мови реалізовують поняття об'єкту-прототипу — об'єкту, що використовується як зразок, з якого вибираються початкові властивості для нового об'єкту. Будь-який об'єкт може вказати власні властивості, як в момент створення, так і під час виконання. Ну і на додачу, будь-який об'єкт можна задати в якості прототипу з іншого об'єкту — таким чином перший об'єкт розділить свої властивості з другим.

+ +

Задання і визначення класу

+ +

У мовах із класовою моделлю, класс задається у окремому визначенні класу. У цому визначенні можна вказати особливі методи, що називаються конструкторами, щоб створити екземпляри класу. Метод-конструктор може задати початкові значення властивостей екземпляру, і виконати якісь інші задачі прямо у момент створення. Для створення екземплярів застосовується оператор new у комбінації із методом-конструктором.

+ +

JavaScript слідує подібній моделі, проте не має відокремленого від конструктора визначення класу. Натомість, ви одразу задаєте функцію-конструктор, щоб створити об'єкти із відповідним початковим набором властивостей та значень. Будь-яка JavaScript-функція може використовуватись як конструктор. Для створення нового об'єкту так само використовується оператор new із фукнцією-конструктором.

+ +

 

+ +
+

Зауважте, що ECMAScript 2015 вводить визначення класу:

+ +
+

Класи JavaScript, введені стандартом ECMAScript 2015, є лише синтаксичним цукром поверх уже наявного у JavaScript прототипного наслідування. Тобто ці класи не вводять у JavaScript нової моделі наслідуваня.

+
+
+ +

 

+ +

Дочірні класи і наслідування

+ +

У мові з класовою моделлю наслідкування ієрархія класів створюється через визначення класу. У цьому визначенні можна окремо вказати, що новий клас являється дочірнім стосовно уже наявного класу. Дочірній клас отримає всі властивості батьківського і може привнести нові (або ж змінити успадковані). Наприклад, припустимо, що клас Employee включає в себе лише поля name та dept, і Manager - це дочірній клас Employee, що додає властивість reports. У цьому випадку, екземпляр класу Manager матиме три властивості: name, dept, та reports.

+ +

JavaScript реалізовує наслідування дещо інакше. Він дозволяє пов'язувати об'єкт-прототип із будь-якою фукнцією-конструктором. Тобто ви можете точнісінько реалізувати приклад EmployeeManager, проте використовуючи дещо інші терміни. Спершу ви визначаєте конструктор Employee, задаючи властивості name та dept. Далі ви визначаєте фукнцію-конструктор Manager, що викликає конструктор Employee та задає властивість reports. Насамкінець, призначаєте новий об'єкт, отриманий з Employee.prototype в якості прототипу конструктора Manager. Надалі, при створенні екземпляра Manager він наслідує властивості name і dept з об'єкту Employee.

+ +

Додавання і видалення властивостей

+ +

Зазвичай у мовах із класовою моделлю наслідування класи створюються під час компіляції, а екземпляри класів - під час компіляції чи виконання програми. Після того, як його було визначено, не можна змінити кількість або тип його властивостей. Однак, у JavaScript можна додавати чи видаляти властивості будь-якого об'єкту безпосередньо під час виконання програми. Якщо додати нову властивість до об'єкту-прототипу певного набору об'єктів, вони всі також отримають цю властивість.

+ +

Підсумок відмінностей класової і прототипної моделей

+ +

Наступна таблиця надає короткий підсумок цих відмінностей. Решта розділу розкриває деталі застосування JavaScript-конструкторів і прототипів для створення ієрархії об'єктів, та порівнює це із тим, як би це робилось у Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Порівняння мови із класовою моделлю наслідування (Java) і прототипною (JavaScript)
Класова модель (Java)Прототипна модель (JavaScript)
Клас та його екземпляр - окремі сутності.Всі об'єкти можуть наслідувати інші об'єкти.
Визначення класу описує його; екземпляри створюються методами-конструкторами.Функції-конструктори і описують, і створюють набори об'єктів.
Окремий об'єкт створюється оператором new.Так само.
Ієрархія об'єктів формується при визначенні класів, шляхом задання нащадків для уже наявних класів.Ієрархія об'єктів формується шляхом призначення об'єкту прототипом функції-конструктора.
Властивості наслідуються згідно ланцюжка класів.Властивості наслідуються згідно ланцюжка прототипів.
Визначення класу задає всі властивості всіх екземплярів класу. Неможливо динамічно додавати властивості під час виконання програми.Функція-конструктор чи прототип задають лише початковий набір властивостей. Можна додавати чи видаляти властивості як окремого об'єкту, так певного їх набору.
+ +

Приклад із робітником "Employee"

+ +

Надалі у розділі ієрархія робітників, що показана на наступному зображенні.

+ +
+
+

Проста ієрархія об'єктів, сформована із наступних елементів:

+ +

+
+ +
+
    +
  • Employee має поля name (із порожнім рядком в якості значення за замовчуванням) та dept (у якого значення за замовчуванням — "general").
  • +
  • Manager заснований на Employee. Він додає властивість reports  (за замовчуванням містить порожній масив для об'єктів Employee).
  • +
  • WorkerBee також заснований на Employee. Він додає властивість projects (за замовчуванням містить порожній масив, призначений для рядків).
  • +
  • SalesPerson заснований на WorkerBee. Він додає властивість quota (за замовчуванням — число 100). Він також перевизначае властивість dept, надаючи їй нове значенням "sales" (що означає, що всі SalesPerson відносяться до одного відділу).
  • +
  • Engineer заснований на WorkerBee. Він додає властивість machine (значення за замовчуванням — порожній рядок) і перевизначає властивість dept, задаючи їй значення "engineering".
  • +
+
+
+ +

Створення ієрархії

+ +

Існує декілька способів задати відповідні функції-конструктори, щоб реалізувати ієрархію робітників. Який спосіб обрати — значною мірою залежить від того, які можливості ви хочете отримати від вашого додатку.

+ +

Цей розділ показує, як використовувати дуже прості (і відносно негнучкі) визначення, і таким чином демонструє, як отримати робочий механізм наслідування. У цих визначеннях не можна задати жодного значення при створенні об'єкту — він отримає властивості із значеннями за замовчуванням, які можна буде змінити пізніше.

+ +

У реальному додатку ви б, ймовірно, визначали конструктор, що дозволяє задавати значення в момент створення об'єкту (докладніше у Більш гнучкі конструктори). А наразі ці прості визначення покажуть, як загалом відбувається наслідування.

+ +

Наступні визначення Employee у Java та JavaScript ідентичні. Єдина відмінність — у Java необхідно явно вказувати тип кожної властивості, на відміну від JavaScript (так як Java — мова із сильною типізацією, а JavaScript — із слабкою).

+ +
+

JavaScript

+ +
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+ +


+ Java

+ +
public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

Визначення Manager і WorkerBee показують різницю у заданні батьківського об'єкту. У JavaScript ви додаєте екземпляр прототипу в якості значення поля prototype функції-конструктора, а потім перевизначаєте prototype.constructor, щоб це поле вказувало на функцію-конструктор. Ви можете це зробити в будь-якому місці після визначення конструктора. У Java надклас задається всередині визначення класу, і його ніяк не можна змінити зовні визначення класу.

+ +
+

JavaScript

+ +
function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype =
+    Object.create(Employee.prototype);
+Manager.prototype.constructor = Manager;
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype =
+    Object.create(Employee.prototype);
+WorkerBee.prototype.constructor = WorkerBee;
+
+ +


+ Java

+ +
public class Manager extends Employee {
+   public Employee[] reports =
+       new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+
+
+ +

 

+ +

Визначення Engineer та SalesPerson створюють об'єкти, що наслідуються вже від WorkerBee, а, отже, і від Employee. Об'єкти цих типів мають властивості всіх об'єктів вище у ланцюжку наслідування. Надодачу, ці визначення перевизначають успадковані значення поля dept, змінюючи їх відповідно до нового типу.

+ +
+

JavaScript

+ +
function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype =
+    Object.create(WorkerBee.prototype);
+SalesPerson.prototype.constructor = SalesPerson;
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype =
+    Object.create(WorkerBee.prototype);
+Engineer.prototype.constructor = Engineer;
+
+ +


+ Java

+ +
public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+
+
+ +

Таким чином, ви можете створювати екземпляри об'єктів із уже заданими значеннями для своїх властивостей. Наступна схема ілюструє застосування цих JavaScript-визначень для створення нових об'єктів, і демонструє значення їх властивостей.

+ +
+

Зауважте, що: термін екземпляр має специфічний технічний зміст у мовах із класовою моделлю. У цих мовах екземпляр являється окремою реалізацією класу і корінним чином відрізняється від його визначення. У JavaScript, "екземпляр" не має такого особливого змісту, бо сам JavaScript не має такої значної відмінності класів від їх реалізацій. Однак, у контексті JavaScript, "екземпляр" може неформально позначати об'єкт, створений певною функцією-конструктором. Тому, згідно наступного прикладу, можна неформально стверджувати, що jane є екземпляром класу Engineer. Так само, хоча терміни предок, нащадок, дочірній і батьківський класи не мають формального смісту в JavaScript, їх можна застосовувати для позначення об'єктів, що знаходяться вище чи нижче у ланцюжку прототипів.

+
+ +

Створення об'єктів за допомогою простих визначень

+ +
+

Ієрархія об'єктів

+ +

Наступна ієрархія створена за допомогою коду у правій частині.

+ +

+ +

Окремі об'єкти = Jim, Sally, Mark, Fred, Jane, etc.
+ "Екземпляри", створені конструктором

+ +
var jim = new Employee;
+// Дужки можна опустити, якщо
+// конструктор не приймає аргументів.
+// jim.name має значення ''
+// jim.dept має значення 'general'
+
+var sally = new Manager;
+// sally.name має значення ''
+// sally.dept має значення 'general'
+// sally.reports має значення []
+
+var mark = new WorkerBee;
+// mark.name має значення ''
+// mark.dept має значення 'general'
+// mark.projects має значення []
+
+var fred = new SalesPerson;
+// fred.name має значення ''
+// fred.dept має значення 'sales'
+// fred.projects має значення []
+// fred.quota має значення 100
+
+var jane = new Engineer;
+// jane.name має значення ''
+// jane.dept має значення 'engineering'
+// jane.projects має значення []
+// jane.machine має значення ''
+
+
+ +

Властивості (поля) об'єкту

+ +

Ця секція описує, як об'єкти наслідують властивості інших об'єктів у ланцюжку прототипів, і що відбувається, якщо додати властивість під час виконання програми.

+ +

Наслідування властивостей

+ +

Припустимо, такою інструкцією ви створили екземпляр WorkerBee — об'єкт mark:

+ +
var mark = new WorkerBee;
+
+ +

Коли JavaScript бачить оператор new, він створює загальний об'єкт і неявно встановлює WorkerBee.prototype значенням внутрішньої властивості [[Prototype]], і передає цей новий об'єкт як значення this до фукнції-конструктора WorkerBee. Внутрішня властивість [[Prototype]] визначає ланцюжок прототипів для виводу значень полів. Коли ці властивості задані, JavaScript повертає новий об'єкт, а інструкція присвоєння задає його в якості значення змінної mark.

+ +

Описаний процес явно не встановлює значення об'єкту mark для властивостей (локальні значення), які mark наслідує з ланцюжка прототипів. Коли ви запитуєте значення властивості, JavaScript в першу чергу перевіряє наявність цього значення у об'єкті, і повертає його, якщо знаходить. Якщо ж ні, JavaScript перевіряє весь ланцюжок прототипів (за допомогою властивості [[Prototype]]). Якщо об'єкт у ланцюжку має таку властивість - буде повернуто її значення (або повідомлення, що об'єкт не має такої властивості, якщо її все-таки не було знайдено). Таким чином, об'єкт mark має наступні властивості і значення:

+ +
mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+
+ +

З конструктора Employee об'єкту mark призначено локальні значення для властивостей name та dept, а з конструктора WorkerBee — значення властивості projects. Таким чином ми отримуємо наслідування властивостей і їх значень у JavaScript. Деякі тонкощі цього процесу додатково висвітлені у Іще раз про наслідування властивостей.

+ +

Так як ці конструктори не дозволяють задати специфічні для екземпляру значення, це являється загальним прикладом. В якості значень властивостей взяті значення за замовчуванням, що розповсюджуються на всі об'єкти, створені на основі WorkerBee. Звісно, значення цих властивостей можна змінити. Наприклад, так можна встановити їх значення для об'єкту mark:

+ +
mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];
+ +

Додавання властивостей

+ +

У JavaScript, можна додавати властивості до об'єкту безпосередно під час виконання. Ви не обмежені застосуванням лише властивостей, наданих конструктором. Щоб додати нову властивість до окремого об'єкту, просто призначте йому нове значення, як наведено далі:

+ +
mark.bonus = 3000;
+
+ +

Тепер об'єкт mark містить властивість bonus, проте більше ніхто із WorkerBee її не має.

+ +

Якщо додати нову властивість до об'єкту-прототипу іншого конструктора, то ця властивість з'явиться у всіх об'єктів, що наслідують властивості від прототипу. Наприклад, ось так можна додати властивість specialty всім робітникам:

+ +
Employee.prototype.specialty = 'none';
+
+ +

Як тільки JavaScript виконає інструкцію, об'єкт mark матиме властивість specialty із значенням "none". Наступна схема ілюструє ефект від додавання цієї властивості до прототипу Employee і її перевизначення у прототипі Engineer.

+ +


+ Додавання властивостей

+ +

Більш гнучкі конструктори

+ +

Наведені раніше функції-конструктори не дозволяють задавати значення під час створенні екземпляру. Як і у Java, можна надати конструктору аргументи для ініціалізації значень властивостей у об'єктів. Наступна схема показує один із способів це зробити.

+ +


+ Задання властивостей у конструкторі, варіант 1

+ +

Таблиця далі показує визначення цих об'єктів у Java і JavaScript.

+ +
+

JavaScript

+ +

Java

+
+ +
+
function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +
public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+
+
+ +
+
function WorkerBee(projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

 

+ +

 

+ +

 

+ +
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+ +
+
+function Engineer(mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+ +

 

+ +

 

+ +

 

+ +
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

Ці JavaScript-визначення застосовують особливу ідіому для задання значення за замовчуванням:

+ +
this.name = name || '';
+
+ +

Логічний оператор АБО у JavaScript (||) обчислює перше значення. Якщо результат можна привести до true, оператор повертає його, а інакше - значення другого аргументу. Таким чином, ця стрічка коду перевіряє, чи name має якесь корисне значення для властивості name. Якщо так — this.name отримує її значення, а інакше значенням this.name стає порожній рядок. У розділі ця ідіома застосовується для стислості; однак вона може бути неочевидною на перший погляд.

+ +
+

Зауважте, що: це може працювати не так, як очікується, якщо конструктор викликається із аргументами, що приводяться до false (число 0 і порожній рядок (""). У цьому випадку буде обрано значення за замовчуванням.

+
+ +

Таким чином можливо задати значення для властивостей на місці, безпосередньо під час створення екземпляру об'єкту. Наступною інструкцією ви можете створити новий екземпляр Engineer:

+ +
var jane = new Engineer('belau');
+
+ +

Властивості Jane тепер виглядають так:

+ +
jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+
+ +

Зауважте, що таким визначенням ви не можете задати первинне значення для наслідуваного поля name. Для задання значення наслідуваним властивостям у JavaScript, необхідно додати трохи більше коду до фукнції-конструктора.

+ +

Поки що фукнція-конструктор створила загальний об'єкт, задала на місці властивості і значення нового об'єкту. Можна зробити, щоб конструктор додавав властивості безпосередньо викликаючи конструктор об'єкта, вищого у ієрархії прототипів. Власне, як зображено у наступній схемі.

+ +


+ Задання властивостей у конструкторі, варіант 2

+ +

Розгляньмо детальніше одне із цих визначень. Ось новий конструктор Engineer:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+ +

Припустимо, ви ось так створюєте новий об'єкт Engineer:

+ +
var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+
+ +

Тут JavaScript виконує наступні кроки:

+ +
    +
  1. Оператор new створює загальний об'єкт і задає Engineer.prototype значенням його властивості __proto__ .
  2. +
  3. Оператор new передає новий об'єкт у конструктор Engineer в якості значення this.
  4. +
  5. Конструктор створює нову властивість base для цього об'єкту і присвоює їй значення конструктора WorkerBee. Так конструктор WorkerBee стає методом об'єкту Engineer. Назва властивості base не є чимось особливим. Ви можете використати будь-яке дозволене ім'я властивості, а base просто звучить змістовно для даного випадку.
  6. +
  7. Конструктор викликає метод base, передаючи в нього два своїх аргументи ("Doe, Jane" і ["navigator", "javascript"]) і новий рядок "engineering". Явно вказаний "engineering" у конструкторі означає, що всі об'єкти Engineer матимуть одне значення для наслідуваної властивості dept, і це значення заміщує успадковане від Employee.
  8. +
  9. Так як метод base належить Engineer, всередині виклику base JavaScript прив'язує значення this до об'єкту, створеного на першому етапі. Таким чином функція WorkerBee, в свою чергу, передає аргументи "Doe, Jane" та "engineering" до конструктора Employee. Після повернення з конструктора Employee функція WorkerBee задає останнім аргументом поле projects.
  10. +
  11. Після повернення з методу base конструктор Engineer ініціалізовує властивість machine об'єкту значенням "belau".
  12. +
  13. Після повернення з конструктору JavaScript присвоює новий об'єкт змінній jane.
  14. +
+ +

Може скластися враження, що, викликавши конструтктор WorkerBee зсередини конструктора Engineer, ви вкажете наслідування відповідно для об'єктів Engineer. Насправді виклик конструктора WorkerBee гарантує, що об'єкт Engineer матиме всі властивості, вказані у всіх викликаних конструкторах. Однак, якщо пізніше додати нові властивості до прототипів Employee чи WorkerBee, вони не будуть успадковані об'єктом Engineer. Припустимо, у нас є наступні інструкції:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+
+ +

Об'єкт jane не наслідує властивість specialty. Вам все ще необхідно явно вказувати прототип для гарантії динамічного наслідування. Натомість розглянемо такий набір інструкцій:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+
+ +

Тепер значенням властивості specialty об'єкту jane являється "none".

+ +

Іншим способом наслідування являється використання методів call() чи apply(). Ось дві еквівалентні ділянки коду:

+ +
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+ +
function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+
+ +

Використання методу call() дає більш чисту реалізацію, так як base більше не потрібен.

+ +

Іще раз про наслідування властивостей

+ +

У попередніх частинах було описано, як конструктори і прототипи JavaScript дозволяють реалізовувати ієрархію та наслідування. Ця частина розглядає деякі тонкощі, які, можливо, не були очевидними у наведеному вище тексті.

+ +

Локальні і успадковані змінні

+ +

Коли ви викликаєте властивість, JavaScript виконує наступні кроки (як описано вище у главі):

+ +
    +
  1. Перевіряє наявність цієї змінної прямо в об'єкті, і повертає її значення, якщо знаходить.
  2. +
  3. Якщо її немає серед локальних змінних - перевіряє ланцюжок прототипів (використовуючи властивість __proto__).
  4. +
  5. Якщо прототип у ланцюжку має значення вказаної властивості — повертає це значення.
  6. +
  7. Якщо вказана властивість не знайдена — значить, об'єкт її не має.
  8. +
+ +

Результат виконання цих кроків залежить від того, як ви задаєте значення і об'єкти.  Перший приклад мав такі визначення:

+ +
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

Припустимо, враховуючи ці визначення, що наступною інструкцією ви створили екземпляр WorkerBee у змінній amy:

+ +
var amy = new WorkerBee;
+
+ +

Об'єкт amy має одну локальну змінну — projects. Значення властивостей name та dept насправді не належать amy, і тому виводяться через поле її поле __proto__. Отже, amy має такі значення властивостей:

+ +
amy.name == '';
+amy.dept == 'general';
+amy.projects == [];
+
+ +

Тепер припустимо, що ви змінили значення властивості name у прототипі, асоційованому з Employee:

+ +
Employee.prototype.name = 'Unknown';
+
+ +

На перший погляд, можна очікувати, що нове значення пошириться на всі екземпляри Employee. Однак, це не так.

+ +

При створенні будь-якого екземпляру об'єкту Employee, цей екземпляр отримає локальне значення для властивості name (порожній рядок). Тобто, коли ми задаємо прототип WorkerBee шляхом створення нового об'єкту Employee, WorkerBee.prototype має локальне значення властивості name. Отже, коли JavaScript шукає властивість name об'єкту amy (екземпляр WorkerBee), він знаходить місцеве значення властивості у WorkerBee.prototype. І тому він не намагається шукати далі в ланцюжку прототипів до Employee.prototype.

+ +

Якщо ви хочете змінити значення властивості під час виконання, та ще й так, щоб воно поширилось на всіх нащадків  об'єкту, слід визначати це значення не у конструкторі об'єкту, а у прототипі конструктора. Припустимо, наприклад, що ви змінили попередній варіант реалізації на такий:

+ +
function Employee() {
+  this.dept = 'general';    // Зауважте, що тут немає this.name (локальної змінної)
+}
+Employee.prototype.name = '';    // Одна копія
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = 'Unknown';
+
+ +

У цьому випадку, властивість amy name стане "Unknown".

+ +

Як ілюструють ці приклади, якщо вам потрібно і мати значення за замовчуванням для властивостей об'єктів, і можливість змінювати ці значення за замовчуванням під час виконання, слід задавати властивості у прототипі конструктора, а не у самому конструкторі.

+ +

Визначення відносин екземпляру

+ +

Пошук властивості у JavaScript виконується серед власних властивостей об'єкту, і, якщо властивість з даним іменем не була знайдена, пошук переходить всередину особливої властивості __proto__. Це відбувається рекурсивно, і цей процес називається "пошук у ланцюжку прототипів".

+ +

Властивість __proto__ встановлюється у момент конструювання об'єкту; вказує вона на властивість prototype конструктора. Тобто вираз new Foo() створює об'єкт із__proto__ == Foo.prototype. Відповідно, зміни у Foo.prototype впливають на пошук властивості всіх об'єктів, створених через new Foo().

+ +

Кожен об'єкт має властивість __proto__ (за винятком Object); кожна функція має властивість prototype. Тобто об'єкти можуть відноситись один до одного згідно "прототипного наслідування". Перевірити наслідування можна, порівнюючи властивість __proto__ об'єкту із об'єктом prototype функції. JavaScript надає скорочення: оператор instanceof порівнює об'єкт і функцію, і повертає true, якщо об'єкт є нащадком прототипу функції. Наприклад:

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

Для більш докладного прикладу, припустимо, що у нас є набір визначень із показаних у Наслідування властивостей. Створімо об'єкт Engineer:

+ +
var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
+
+ +

Наступні вирази стосовно цього об'єкту являються істинними:

+ +
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

Враховуючи це, ми можемо ось так написати функцію instanceOf:

+ +
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
Зверніть увагу, що: ця реалізація додатково перевіряє відношення об'єкту до типу "xml",  щоб обійти особливість уявлення XML-об'єктіву останніх версіях JavaScript. Дивіться {{ bug(634150) }}, якщо вам потрібна докладніша інформація.
+ +

Наступні вирази із визначеною вище функцією instanceOf являються істинними:

+ +
instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+
+ +

Проте такий приклад в результаті видасть false:

+ +
instanceOf(chris, SalesPerson)
+
+ +

Глобальна інформація у конструкторах

+ +

Потрібно бути уважним при створенні конструкторів, якщо ви задаєте в них якісь глобальні дані. Наприклад, припустимо, нам потрібно автоматично задавати унікальний ID кожному новому робітнику. Ви можете об'явити Employee так:

+ +
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+ +

Згідно цього визначення Employee, під час створення нового екземпляру конструктор призначає йому наявний ID, і потім підвищує на 1 глобальний лічильник ID. Тобто, якщо виконати наступні інструкції, victoria.id буде 1, а harry.id — 2:

+ +
var victoria = new Employee('Pigbert, Victoria', 'pubs');
+var harry = new Employee('Tschopik, Harry', 'sales');
+
+ +

На перший погляд все чудово. Однак, idCounter змінюється кожного разу, коли створюється екземпляр Employee, байдуже для чого. Якщо створити всю ієрархію Employee, наведену у цьому розділі, конструктор Employee буде викликано кожного разу при заданні прототипу. Припустимо, у нас є наступний код:

+ +
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer('Wood, Mac');
+
+ +

Далі припустимо, що визначення, що опущені тут мають властивість base і викликають констуктор, що знаходиться вище у ланцюжку прототипів. У цьому випадку, у момент створення об'єкту mac, mac.id буде 5.

+ +

Залежно від застосування, таке додаткове збільшення лічильника може мати, чи не мати значення. Якщо для вас важливе справжнє значення лічильника, один із варіантів рішення матиме такий вигляд конструктора:

+ +
function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

При створенні екземпляру Employee для застосування в якості прототипу аргументи не задаються. Згідно цього визначення конструктора, коли ми не передаємо аргументи, конструктор не задає значення id та не оновлює лічильник. Таким чином, щоб отримати Employee із призначеним id, необхідно задати ім'я робітника. У цьому випадку mac.id буде дорівнювати 1.

+ +

Інший варіант  створювати копію об'єкту-прототипу Employee, щоб потім присвоювати її WorkerBee:

+ +
WorkerBee.prototype = Object.create(Employee.prototype);
+// instead of WorkerBee.prototype = new Employee
+
+ +

Відсутність множинного успадкування

+ +

Деякі об'єктно-орієнтовані мови програмування дозволяють множинне успадкування. Це означає, що об'єкт може наслідувати поля і властивості від незалежних батьківських об'єктів. JavaScript не підтримує такий тип наслідування.

+ +

Наслідування значення властивості відбувається в момент виконання програми, коли JavaScript шукає значення властивості у ланцюжку прототипів об'єкту. Так як об'єкт має лише один прототип, JavaScript не може виконувати наслідування від більш ніж одного прототипного ланцюжка.

+ +

У JavaScript ми можемо мати функцію-конструктор, що викликає два чи більше інших конструкторів під час виконання. Це дає певну ілюзію множинного наслідування. Наприклад, припустимо, у нас є такі інструкції:

+ +
function Hobbyist(hobby) {
+   this.hobby = hobby || 'scuba';
+}
+
+function Engineer(name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, 'engineering', projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
+
+ +

Далі припустимо, що визначення WorkerBee відповідає вказаному вище у розділі. У цьому випадку об'ект dennis матиме такі значення властивостей:

+ +
dennis.name == 'Doe, Dennis';
+dennis.dept == 'engineering';
+dennis.projects == ['collabra'];
+dennis.machine == 'hugo';
+dennis.hobby == 'scuba';
+
+ +

Тобто dennis отримує поле hobby з конструктора Hobbyist. Однак, якщо ми потім додамо нову властивість до прототипу конструктора Hobbyist:

+ +
Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
+
+ +

Об'єкт dennis не успадковує цю нову властивість.

+ +
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
diff --git a/files/uk/web/javascript/guide/functions/index.html b/files/uk/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..fcc14568b3 --- /dev/null +++ b/files/uk/web/javascript/guide/functions/index.html @@ -0,0 +1,655 @@ +--- +title: Функції +slug: Web/JavaScript/Guide/Functions +translation_of: Web/JavaScript/Guide/Functions +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}

+ +

Функції є одним з фундаментальних блоків у JavaScript. Функція є процедурою JavaScript, це набір команд, які виконують ту чи іншу задачу, або розраховують значення. Щоб використати функцію, ви маєте десь її визначити у тій області видимості, звідки ви бажаєте її викликати.

+ +

Щоб дізнатись більше, дивіться exhaustive reference chapter about JavaScript functions.

+ +

Визначення функції

+ +

Оголошення функції

+ +

Визначення функції (також називається оголошенням функції, або функціональним оператором) складається з ключового слова function , після чого слідує:

+ + + +

Для прикладу, наступний код визначає просту функцію на ім'я square:

+ +
function square(number) {
+  return number * number;
+}
+ +

Функція square приймає один параметр number. Функція складається з однієї команди, що повертає результат множення агрумента (number) самого на себе. Оператор return визначає, яке значення повертає функція:

+ +
return number * number;
+
+ +

Примітивні параметри (такі, як число) передаються функціям за значенням; значення передається до функції, але якщо функція змінює значення параметра, ця зміна не відображається глобально або у функції виклику.

+ +

Якщо ви передаєте об'єкт (тобто, непримітивне значення, наприклад, {{jsxref ("Array")}} або визначений користувачем об'єкт) у якості параметра, і функція змінює властивості об'єкта, ця зміна видима за межами функції, як показано на наступному прикладі:

+ +
function myFunc(theObject) {
+  theObject.make = 'Toyota';
+}
+
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+var x, y;
+
+x = mycar.make; // x отримує значення "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y отримує значення "Toyota"
+                // (властивість make була змінена функцією)
+
+ +

Функціональні вирази

+ +

Хоча оголошення функцій вище синтаксично є виразом, функції також можуть бути створені за допомогою функціональних виразів. Така функція може бути анонімною; їй не обов'язково мати ім'я. Наприклад, square можна визначити як:

+ +
var square = function(number) { return number * number; };
+var x = square(4); // x gets the value 16
+ +

Проте, ім'я може бути надане у функціональному виразі, і може бути використане всередині функції, щоб звернутися до самої себе, або в налагоджувач, щоб визначити функцію в трасуванні стеку:

+ +
var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); };
+
+console.log(factorial(3));
+
+ +

Функціональні вирази зручні при передачі функції як аргументу до іншої функції. Наступний приклад показує функцію map, яка повинна отримати функцію як перший аргумент, а масив як другий аргумент.

+ +
function map(f, a) {
+  var result = [], // Створення нового масиву
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

У наступному коді наша функція приймає функцію, визначену функціональним виразом, та виконує її для кожного елемента масиву, отриманого в якості другого аргументу.

+ +
function map(f, a) {
+  var result = []; // Створення нового масиву
+  var i; //  Оголошення змінної
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+      return result;
+}
+var f = function(x) {
+   return x * x * x;
+}
+var numbers = [0,1, 2, 5,10];
+var cube = map(f,numbers);
+console.log(cube);
+ +

Функція повертає: [0, 1, 8, 125, 1000].

+ +

У JavaScript функція може бути визначена на основі умови. Наприклад, наступне визначення функції визначає myFunc тільки якщо num дорівнює 0:

+ +
var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}
+ +

На додаток до визначення функцій, як описано тут, ви також можете використовувати конструктор {{jsxref ("Function")}} для створення функцій з текстового рядка під час виконання, як і {{jsxref("eval", "eval()")}}.

+ +

Метод - це функція, яка є властивістю об'єкта. Докладніше про об'єкти та методи у  Working with objects.

+ +

Виклик функцій

+ +

Визначення функції не виконує її. Визначення функції просто називає функцію і вказує, що робити, коли викликається функція. Виклик функції, власне, виконує вказані дії з вказаними параметрами. Наприклад, якщо ви визначили функцію  square, ви можете викликати її наступним чином:

+ +
square(5);
+
+ +

Наведений вираз викликає функцію з аргументом 5. Функція виконує свої команди та повертає значення 25.

+ +

Функції повинні бути в області видимості під час виклику, але оголошення функції може підніматись (бути записаним нижче виклику), як у цьому прикладі:

+ +
console.log(square(5));
+/* ... */
+function square(n) { return n * n; }
+
+ +

Областю видимості функції є функція, в якій вона оголошена, або вся програма, якщо вона оголошена на верхньому рівні.

+ +
+

Примітка: Це працює тільки при визначенні функції за допомогою наведеного вище синтаксису (тобто function funcName(){}). Наведений нижче код не буде працювати. Це означає, що підняття функції працює тільки для оголошення функції, а не для функціонального виразу.

+
+ +
console.log(square); // square піднімається з початковим значенням undefined.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+
+ +

Аргументи функції не обмежені рядками та числами. Ви можете передавати цілі об'єкти у функцію. Функція show_props() (визначена у Working with objects) є прикладом функції, яка приймає об'єкт у якості аргумента.

+ +

Функція може викликати сама себе. Наприклад, ось функція, яка обчислює факторіал рекурсивно:

+ +
function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+
+ +

Далі ви можете обчислити факторіали від одного до п'яти наступним чином:

+ +
var a, b, c, d, e;
+a = factorial(1); // a отримує значення 1
+b = factorial(2); // b отримує значення 2
+c = factorial(3); // c отримує значення 6
+d = factorial(4); // d отримує значення 24
+e = factorial(5); // e отримує значення 120
+
+ +

Є й інші способи виклику функцій. Часто бувають випадки, коли функцію потрібно назвати динамічно, або кількість аргументів функції може змінюватись, або контекстом виклику функції повинен бути заданий певний об'єкт, визначений під час виконання. Виявляється, що функції самі є об'єктами, і ці об'єкти, у свою чергу, мають методи (див. об'єкт {{jsxref("Function")}}). Один з них, метод {{jsxref("Function.apply", "apply()")}} , може бути використаний для досягнення цієї мети.

+ +

Область видимості функції

+ +

Змінні, визначені всередині функції, недоступні ззовні цієї функції, бо змінна визначається тільки у області видимості функції. Проте, функція може звертатись до усіх змінних та функцій, визначених у області видимості, де вона оголошена. Іншими словами, функція, оголошена у глобальній області видимості, може звертатись до усіх змінних, оголошених у глобальній області видимості. Функція, оголошена всередині іншої функції, має доступ до усіх змінних, оголошених у батьківській функції, а також до будь-якої змінної, до якої має доступ батьківська функція.

+ +
// Ці змінні визначені у глобальній області видимості
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Ця функція визначена у глобальній області видимості
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Повертає 60
+
+// Приклад вкладеної функції
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' scored ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Повертає "Chamahk scored 5"
+
+ +

Область видимості та стек функції

+ +

Рекурсія

+ +

A function can refer to and call itself. There are three ways for a function to refer to itself:

+ +
    +
  1. the function's name
  2. +
  3. arguments.callee
  4. +
  5. an in-scope variable that refers to the function
  6. +
+ +

For example, consider the following function definition:

+ +
var foo = function bar() {
+   // statements go here
+};
+
+ +

Within the function body, the following are all equivalent:

+ +
    +
  1. bar()
  2. +
  3. arguments.callee()
  4. +
  5. foo()
  6. +
+ +

A function that calls itself is called a recursive function. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). For example, the following loop:

+ +
var x = 0;
+while (x < 10) { // "x < 10" is the loop condition
+   // do stuff
+   x++;
+}
+
+ +

can be converted into a recursive function and a call to that function:

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+
+ +

However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (e.g. the DOM) is more easily done using recursion:

+ +
function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i < node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+
+ +

Compared to the function loop, each recursive call itself makes many recursive calls here.

+ +

It is possible to convert any recursive algorithm to a non-recursive one, but often the logic is much more complex and doing so requires the use of a stack. In fact, recursion itself uses a stack: the function stack.

+ +

The stack-like behavior can be seen in the following example:

+ +
function foo(i) {
+  if (i < 0)
+    return;
+  console.log('begin: ' + i);
+  foo(i - 1);
+  console.log('end: ' + i);
+}
+foo(3);
+
+// Output:
+
+// begin: 3
+// begin: 2
+// begin: 1
+// begin: 0
+// end: 0
+// end: 1
+// end: 2
+// end: 3
+ +

Nested functions and closures

+ +

You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a closure. A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).

+ +

Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.

+ +

To summarize:

+ + + + + +

The following example shows nested functions:

+ +
function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // returns 13
+b = addSquares(3, 4); // returns 25
+c = addSquares(4, 5); // returns 41
+
+ +

Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:

+ +
function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
+result = fn_inside(5); // returns 8
+
+result1 = outside(3)(5); // returns 8
+
+ +

Preservation of variables

+ +

Notice how x is preserved when inside is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to outside. The memory can be freed only when the returned inside is no longer accessible.

+ +

This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.

+ +

Multiply-nested functions

+ +

Functions can be multiply-nested, i.e. a function (A) containing a function (B) containing a function (C). Both functions B and C form closures here, so B can access A and C can access B. In addition, since C can access B which can access A, C can also access A. Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called scope chaining. (Why it is called "chaining" will be explained later.)

+ +

Consider the following example:

+ +
function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+
+ +

In this example, C accesses B's y and A's x. This can be done because:

+ +
    +
  1. B forms a closure including A, i.e. B can access A's arguments and variables.
  2. +
  3. C forms a closure including B.
  4. +
  5. Because B's closure includes A, C's closure includes A, C can access both B and A's arguments and variables. In other words, C chains the scopes of B and A in that order.
  6. +
+ +

The reverse, however, is not true. A cannot access C, because A cannot access any argument or variable of B, which C is a variable of. Thus, C remains private to only B.

+ +

Name conflicts

+ +

When two arguments or variables in the scopes of a closure have the same name, there is a name conflict. More inner scopes take precedence, so the inner-most scope takes the highest precedence, while the outer-most scope takes the lowest. This is the scope chain. The first on the chain is the inner-most scope, and the last is the outer-most scope. Consider the following:

+ +
function outside() {
+  var x = 5;
+  function inside(x) {
+    return x * 2;
+  }
+  return inside;
+}
+
+outside()(10); // returns 20 instead of 10
+
+ +

The name conflict happens at the statement return x and is between inside's parameter x and outside's variable x. The scope chain here is {inside, outside, global object}. Therefore inside's x takes precedences over outside's x, and 20 (inside's x) is returned instead of 10 (outside's x).

+ +

Closures

+ +

Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the inner function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.

+ +
var pet = function(name) {   // The outer function defines a variable called "name"
+  var getName = function() {
+    return name;             // The inner function has access to the "name" variable of the outer function
+  }
+  return getName;            // Return the inner function, thereby exposing it to outer scopes
+}
+myPet = pet('Vivie');
+
+myPet();                     // Returns "Vivie"
+
+ +

It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.

+ +
var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+
+ +

In the code above, the name variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent" and "encapsulated" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.

+ +
var getCode = (function() {
+  var apiCode = '0]Eal(eh&2';    // A code we do not want outsiders to be able to modify...
+
+  return function() {
+    return apiCode;
+  };
+}());
+
+getCode();    // Returns the apiCode
+
+ +

There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.

+ +
var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+
+ +

Using the arguments object

+ +

The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:

+ +
arguments[i]
+
+ +

where i is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be arguments[0]. The total number of arguments is indicated by arguments.length.

+ +

Using the arguments object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use arguments.length to determine the number of arguments actually passed to the function, and then access each argument using the arguments object.

+ +

For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:

+ +
function myConcat(separator) {
+   var result = ''; // initialize list
+   var i;
+   // iterate through arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+ +

You can pass any number of arguments to this function, and it concatenates each argument into a string "list":

+ +
// returns "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+
+ +
+

Note: The arguments variable is "array-like", but not an array. It is array-like in that it has a numbered index and a length property. However, it does not possess all of the array-manipulation methods.

+
+ +

See the {{jsxref("Function")}} object in the JavaScript reference for more information.

+ +

Function parameters

+ +

Starting with ECMAScript 2015, there are two new kinds of parameters: default parameters and rest parameters.

+ +

Default parameters

+ +

In JavaScript, parameters of functions default to undefined. However, in some situations it might be useful to set a different default value. This is where default parameters can help.

+ +

In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are undefined. If in the following example, no value is provided for b in the call, its value would be undefined when evaluating a*b and the call to multiply would have returned NaN. However, this is caught with the second line in this example:

+ +
function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5
+
+ +

With default parameters, the check in the function body is no longer necessary. Now, you can simply put 1 as the default value for b in the function head:

+ +
function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5
+ +

For more details, see default parameters in the reference.

+ +

Rest parameters

+ +

The rest parameter syntax allows us to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x => multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Arrow functions

+ +

An arrow function expression (previously, and now incorrectly known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "ES6 In Depth: Arrow functions".

+ +

Two factors influenced the introduction of arrow functions: shorter functions and lexical this.

+ +

Shorter functions

+ +

In some functional patterns, shorter functions are welcome. Compare:

+ +
var a = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map(s => s.length);
+
+console.log(a3); // logs [8, 6, 7, 9]
+
+ +

Lexical this

+ +

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

+ +
function Person() {
+  // The Person() constructor defines `this` as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

In ECMAScript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over.

+ +
function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}
+ +

Alternatively, a bound function could be created so that the proper this value would be passed to the growUp() function.

+ +

Arrow functions capture the this value of the enclosing context, so the following code works as expected.

+ +
function Person() {
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

Predefined functions

+ +

JavaScript has several top-level, built-in functions:

+ +
+
{{jsxref("Global_Objects/eval", "eval()")}}
+
+

The eval() method evaluates JavaScript code represented as a string.

+
+
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
+
+

The uneval() method creates a string representation of the source code of an {{jsxref("Object")}}.

+
+
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
+
+

The global isFinite() function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.

+
+
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
+
+

The isNaN() function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the isNaN function has interesting rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 2015, or you can use typeof to determine if the value is Not-A-Number.

+
+
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
+
+

The parseFloat() function parses a string argument and returns a floating point number.

+
+
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
+
+

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

+
+
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
+
+

The decodeURI() function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
+
+

The decodeURIComponent() method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.

+
+
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
+
+

The encodeURI() method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

+
+
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
+
+

The encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

+
+
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
+
+

The deprecated escape() method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.

+
+
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
+
+

The deprecated unescape() method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because unescape() is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.

+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}

diff --git a/files/uk/web/javascript/guide/grammar_and_types/index.html b/files/uk/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..415aaaff62 --- /dev/null +++ b/files/uk/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,716 @@ +--- +title: Граматика та типи +slug: Web/JavaScript/Guide/Grammar_and_types +tags: + - JavaScript + - 'l10n:priority' + - Посібник +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

+ +

В цьому розділі розглядаються основи граматики JavaScript, оголошення змінних, типи даних і літерали.

+ +

Основи

+ +

Більшість свого синтаксису JavaScript запозичає у Java, C та C++, але на нього вплинули також Awk, Perl і Python.

+ +

Мова JavaScript чутлива до регістру і використовує набір символів Unicode. Наприклад, слово Früh (що німецькою означає "рано") може використовуватись як ім'я змінної.

+ +
let Früh = "foobar"
+ +

Проте, змінна früh не одне й те саме, що Früh, тому що мова JavaScript чутлива до регістру.

+ +

У JavaScript команди називаються інструкціями і розділяються крапкою з комою (;).

+ +

Немає необхідності ставити крапку з комою після інструкції, якщо вона написана на своєму власному рядку. Проте, якщо ви бажаєте мати більш, ніж одну інструкцію в рядку, тоді потрібно їх відділяти крапкою з комою.

+ +
+

ECMAScript також має правила для автоматичної вставки крапки з комою (ASI, Automatic semicolon insertion) в кінці інструкцій. (Щоб отримати більше інформації, перегляньте детальну довідку щодо лексичної граматики JavaScript.)

+
+ +

Однак, вважається найкращою практикою завжди ставити крапку з комою після інструкції, навіть якщо вона не вимагається. Ця практика зменшує шанси отримати помилки у коді.

+ +

Текст скрипта у JavaScript сканується зліва направо та конвертується у послідовність вхідних елементів, якими є токени, керівні символи, символи розриву рядка, коментарі, або пробільні символи. (Символи пробілів, табуляції та символи нового рядка вважаються пробільними символами).

+ +

Коментарі

+ +

Синтаксис коментарів такий самий, як у C++ та багатьох інших мовах програмування:

+ +
// однорядковий коментар
+
+/* а це довший,
+* багаторядковий коментар
+*/
+
+/* Однак, не можна, /* вкладати коментарі */ SyntaxError */
+ +

Коментарі поводяться як пробіли та відкидаються під час виконання скрипта.

+ +
+

Заувага: Ви можете також побачити третій тип синтаксису коментарів на початку деяких файлів JavaScript, який виглядає приблизно так: #!/usr/bin/env node.

+ +

Цей синтаксис називається шебанг, це спеціальний коментар, який використовується, щоб вказати шлях до певного рушія JavaScript, який має виконати скрипт. Дивіться коментарі шебанг для більш детальної інформації.

+
+ +

Оголошення

+ +

Існують три види оголошення змінних у JavaScript.

+ +
+
{{jsxref("Statements/var", "var")}}
+
Оголошує змінну та необов'язково ініціалізує її значенням.
+
{{jsxref("Statements/let", "let")}}
+
Оголошує локальну змінну блочної області видимості, необов'язково ініціалізуючи її значенням.
+
{{jsxref("Statements/const","const")}}
+
Оголошує константу блочної області видимості, доступну тільки для читання.
+
+ +

Змінні

+ +

Ви використовуєте змінні, як символічні імена для значень у вашій програмі. Назви змінних, ідентифікатори, відповідають певним правилам.

+ +

Ідентифікатори JavaScript повинні починатися з літери, знаку підкреслення (_) або знаку долара ($). Наступні символи можуть також бути цифрами (0-9).

+ +

Оскільки мова JavaScript чутлива до регістру, літери включають у себе символи від "A" до "Z" (у верхньому регістрі) та символи від  "a" до "z" (у нижньому регістрі).

+ +

Ви можете використовувати більшу частину літер ISO 8859-1 або Юнікоду, такі як å та ü у ідентифікаторах. (Для більш детальної інформації дивіться цю статтю.) Ви також можете використовувати екрановані послідовності Юнікоду в якості символів у ідентифікаторах.

+ +

Деякі приклади допустимих назв: Number_hits, temp99, $credit та _name.

+ +

Оголошення змінних

+ +

Ви можете оголосити змінну двома шляхами:

+ + + +

Ви також можете просто присвоїти змінній значення. Наприклад, x = 42. Ця форма створює неоголошену глобальну змінну. Вона також генерує попередження у JavaScript. Неоголошені глобальні змінні можуть привести до неочікуваної поведінки. Тому не рекомендується використовувати неоголошені глобальні змінні.

+ +

Обчислення змінних

+ +

Змінна, оголошена за допомогою var або let, без початкового значення, має значення {{jsxref("undefined")}}.

+ +

Спроба звернення до неоголошеної змінної призведе до викидання винятку {{jsxref("ReferenceError")}}:

+ +
var a;
+console.log('Значення a дорівнює ' + a); // Значення a дорівнює undefined
+
+console.log('Значення b дорівнює ' + b); // Значення b дорівнює undefined
+var b;
+// Це може спантеличити, доки ви не прочитаєте 'Підняття змінних' нижче
+
+console.log('Значення c дорівнює ' + c); // Uncaught ReferenceError: c is not defined
+
+let x;
+console.log('Значення x дорівнює ' + x); // Значення x дорівнює undefined
+
+console.log('Значення y дорівнює ' + y); // Uncaught ReferenceError: y is not defined
+let y; 
+ +

Можна використати undefined, щоб з'ясувати, чи має змінна значення. У наступному коді змінній input не присвоюється значення, і умова в операторі if набуває значення true.

+ +
var input;
+if (input === undefined) {
+  doThis();
+} else {
+  doThat();
+}
+ +

Значення undefined поводить себе як false, коли використовується в булевому контексті. Наприклад, наступний код виконує функцію myFunction, оскільки елемент myArray дорівнює undefined:

+ +
var myArray = [];
+if (!myArray[0]) myFunction(); 
+ +

Значення undefined перетворюється на NaN, коли використовується у числовому контексті.

+ +
var a;
+a + 2;  // Обчислюється як NaN
+ +

Коли ви обчислюєте змінну {{jsxref("null")}}, значення null поводить себе як 0 у числовому контексті, та як false - у булевому. Наприклад:

+ +
var n = null;
+console.log(n * 32); // Виведе 0 у консоль
+ +

 Область видимості змінної

+ +

Коли ви оголошуєте змінну за межами будь-яких функцій, вона називається глобальною змінною, позаяк доступна для будь-якого іншого коду у поточному документі. Коли ви оголошуєте змінну всередині функції, вона називається локальною змінною, позаяк доступна лише в межах цієї функції.

+ +

JavaScript до ECMAScript 2015 не має блочної області видимості. Точніше, змінна, оголошена всередині блоку, є локальною для функції (або глобальної області видимості), в якій розміщено цей блок.

+ +

Наприклад, наступний код виведе 5, тому що областю видимості x є глобальний контекст (або контекст функції, якщо код є частиною функції). Область видимості x не обмежується найближчим блоком конструкції if.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // x дорівнює 5
+ +

Ця поведінка змінюється при використанні ключового слова let, (представленого в ECMAScript 2015).

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined
+ +

Підняття змінних

+ +

Ще однією особливістю змінних у JavaScript є те, що ви можете посилатися на змінну, оголошену пізніше, і це не призведе до винятку.

+ +

Ця концепція має назву підняття (hoisting). Змінні у JavaScript, в певному сенсі, "піднімаються" на вершину функції або інструкції у коді. Однак, підняті змінні повертають значення undefined. Тому, навіть якщо ви оголосите та ініціалізуєте змінну після використання або посилання на цю змінну, вона все одно поверне undefined.

+ +
/**
+* Приклад 1
+*/
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+* Приклад 2
+*/
+// поверне значення undefined
+var myvar = 'моє значення';
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = 'локальна змінна';
+})();
+ +

Наведені вище приклади будуть тлумачитися так само, як:

+ +
/**
+* Приклад 1
+*/
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+* Приклад 2
+*/
+var myvar = 'моє значення';
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = 'локальна змінна';
+})();
+ +

Враховуючи підняття, всі оголошення через var всередині функції мають знаходитись якомога ближче до вершини функції. Така практика покращує зрозумілість коду.

+ +

В ECMAScript 2015 let та const підіймаються, але не ініціалізуються. Результатом посилання на змінну в блоці до оголошення цієї змінної буде {{jsxref("ReferenceError")}}, тому що змінна перебуває у "тимчасовій мертвій зоні" від початку блоку до обробки її оголошення.

+ +
console.log(x); // ReferenceError
+let x = 3;
+ +

Підняття функції

+ +

У випадку з функціями, лише оголошення функцій піднімаються, але не функціональні вирази.

+ +
/* Оголошення функції */
+
+foo(); // "ква"
+
+function foo() {
+  console.log('ква');
+}
+
+/* Функціональний вираз */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log('кря');
+};
+ +

Глобальні змінні

+ +

Глобальні змінні насправді є властивостями глобального об'єкта.

+ +

На веб-сторінках глобальним об'єктом є window, тому ви можете присвоювати значення та звертатись до глобальних змінних за допомогою синтаксису window.змінна.

+ +

Відповідно, ви можете звертатись до глобальних змінних, оголошених в одному вікні або фреймі, з іншого вікна або фрейму, вказавши при цьому ім'я цього вікна чи фрейму. Наприклад, якщо в документі оголошена змінна під назвою phoneNumber, ви можете звернутися до неї з iframe так: parent.phoneNumber.

+ +

Константи

+ +

Ви можете створити іменовану константу, призначену лише для читання, за допомогою ключового слова {{jsxref("Statements/const", "const")}}.

+ +

Синтаксис ідентифікатора константи такий самий, як і синтаксис будь-якого ідентифікатора змінної: він повинен починатися з літери, підкреслення або знака долара ($) та може містити букви, цифри або символи підкреслення.

+ +
const PI = 3.14;
+ +

Константа не може змінювати значення за допомогою присвоювання або повторно оголошуватися протягом виконання скрипта. Вона повинна бути ініціалізована початковим значенням.

+ +

Правила області видимості для констант такі ж, як для let-змінних блочної області видимості. Якщо ключове слово const не вказане, ідентифікатор вважається ідентифікатором змінної.

+ +

Не можна оголошувати константу з таким самим ім'ям, як функція або змінна в тій самій області видимості. Наприклад:

+ +
// ЦЕ СПРИЧИНИТЬ ПОМИЛКУ
+function f() {};
+const f = 5;
+
+// ЦЕ ТАКОЖ СПРИЧИНИТЬ ПОМИЛКУ
+function f() {
+  const g = 5;
+  var g;
+
+  //інструкції
+}
+ +

Однак, властивості об'єктів, присвоєних константам, не захищені, тому наступна інструкція виконується без проблем.

+ +
const MY_OBJECT = {'key': 'значення'};
+MY_OBJECT.key = 'іншезначення';
+ +

Вміст будь-якого масиву також не захищений, тому наступна інструкція виконується без проблем.

+ +
const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); //виведе ['HTML','CSS','JAVASCRIPT'];
+
+ +

Структури та типи даних

+ +

Типи даних

+ +

Останній стандарт ECMAScript визначає вісім типів даних:

+ + + +

Хоча цих типів даних відносно мало, вони дозволяють виконувати корисні функції у ваших застосунках. {{jsxref("Object", "Об'єкти")}} та {{jsxref("Function", "функції")}} - це інші фундаментальні елементи мови. Об'єкти можна розглядати, як іменовані контейнери для значень, а функції - як процедури, які може виконувати скрипт. 

+ +

Перетворення типів даних

+ +

JavaScript - це мова з динамічною типізацією. Це означає, що при оголошенні змінної не потрібно вказувати, якого вона типу. Це також означає, що типи даних автоматично перетворюються за необхідності під час виконання скрипта. 

+ +

Наприклад, ви можете визначити змінну таким чином:

+ +
var answer = 42;
+ +

А пізніше цій же змінній можна присвоїти значення рядкового типу даних, наприклад:

+ +
answer = 'Дякуємо за рибу...';
+ +

Оскільки JavaScript динамічно типізована мова, таке присвоєння не спричиняє повідомлення про помилку.

+ +

Числа та оператор '+'

+ +

У виразах, що включають числові й рядкові значення з оператором +, JavaScript перетворює числові значення на рядки. Наприклад:

+ +
x = 'Відповідь - ' + 42 // "Відповідь - 42"
+y = 42 + ' - це відповідь' // "42 - це відповідь"
+ +

З усіма іншими операторами JavaScript не перетворює числові значення на рядки. Наприклад:

+ +
'37' - 7 // 30
+'37' + 7 // "377"
+ +

Перетворення рядків на числа

+ +

У випадку, коли значення, що представляє число, є в пам'яті у вигляді рядка, існують методи для перетворення.

+ + + +

parseInt повертає тільки цілі числа, тому його використання для десяткових чисел обмежене.

+ +
+

Крім того, найкращою практикою для parseInt є завжди включати параметр radix (основа). Параметр radix вказує, яка система числення має використовуватись.

+
+ +
parseInt('101', 2) // 5
+ +

Альтернативним методом отримання числа з рядка є використання оператора + (унарний плюс):

+ +
'1.1' + '1.1' // '1.11.1'
+(+'1.1') + (+'1.1') // 2.2
+// Зауважте: дужки не обов'язкові, вони додаються для ясності
+ +

Літерали

+ +

Літерали (англ. literal - "буквальний") відображають значення у JavaScript. Це фіксовані значення, не змінні, які ви буквально вказуєте у сценарії. У цьому розділі описані наступні типи літералів:

+ + + +

Масивові літерали

+ +

Масивовий літерал - це список з нуля чи більше виразів, які представляють елементи масиву, вкладений у квадратні дужки ([]). Коли ви створюєте масив, використовуючи масивовий літерал, він ініціалізується вказаними значеннями в якості своїх елементів, а його довжина дорівнює кількості вказаних аргументів.

+ +

Наступний приклад створює масив coffees (кава) з трьома елементами та довжиною, що дорівнює три:

+ +
let coffees = ['Французька', 'Колумбійська', 'Кона'];
+ +
+

Заувага: Літерал масиву - це тип об'єктного ініціалізатора. Дивіться Використання об'єктних ініціалізаторів.

+
+ +

Якщо масив створюється за допомогою літералів у скрипті верхнього рівня, JavaScript інтерпретує масив кожного разу, коли обчислює вираз, що містить літерал масиву. На додачу, літерал, що використовується у функції, створюється кожного разу, коли викликається функція.

+ +
+

Заувага:  Літерали масиву також є об'єктами Array. Більш детальну інформацію щодо об'єктів Array дивіться у статтях {{jsxref("Array")}} та Індексовані колекції.

+
+ +

Додаткові коми у масивних літералах

+ +

Вам не обов'язково вказувати всі елементи у масивному літералі. Якщо помістити дві коми поспіль, масив заповнить невказані елементи значеннями undefined. Наступний приклад створює масив fish (риба):

+ +
let fish = ['Крилатка', , 'Лящ'];
+ +

Цей масив має два елементи зі значеннями та один порожній елемент:

+ + + +

Якщо в кінці списку елементів ви додаєте кінцеву кому, вона ігнорується.

+ +

У наступному прикладі довжина масиву дорівнює трьом. Не існує елемента myList[3]. Усі інші коми у списку позначають новий елемент.

+ +
+

Заувага: коми в кінці можуть створювати помилки у старих версіях веб-переглядачів, тому краще їх видаляти.

+
+ +
let myList = ['дім', , 'школа', ];
+ +

У наступному прикладі довжина масиву становить чотири, а елементи myList[0] та myList[2] відсутні.

+ +
let myList = [ ,'дім', , 'школа'];
+ +

У наступному прикладі довжина масиву становить чотири, а елементи myList[1] та myList[3] відсутні. Ігнорується лише остання кома.

+ +
let myList = ['дім', , 'школа', , ];
+ +

Розуміння поведінки додаткових ком важливе для розуміння JavaScript як мови. 

+ +

Однак, при написанні власного коду, варто однозначно оголошувати відсутні елементи як undefined. Це підвищить зрозумілість та надійність вашого коду.

+ +

Булеві літерали

+ +

Тип Boolean має два значення літералів: true та false.

+ +
+

Будьте обережні: Не плутайте примітивні булеві значення true та false зі значеннями true та false об'єкта {{jsxref("Boolean")}}.

+Об'єкт Boolean - це обгортка навколо примітивного булевого типу даних. Дивіться {{jsxref("Boolean")}} для отримання додаткової інформації.
+ +

Числові літерали

+ +

Типи Number та BigInt можна виразити у десятковій (основа 10), шістнадцятковій (основа 16), вісімковій (основа 8) та двійковій (основа 2) формі.

+ + + +

Деякі приклади числових літералів:

+ +
0, 117, -345, 123456789123456789n             (десятковий, основа 10)
+015, 0001, -0o77, 0o777777777777n             (вісімковий, основа 8)
+0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn  (шістнадцятковий, "hex" чи основа 16)
+0b11, 0b0011, -0b11, 0b11101001010101010101n  (двійковий, основа 2)
+ +

Для отримання додаткової інформації дивіться Числові літерали в довідці про лексичну граматику.

+ +

Літерали з рухомою крапкою

+ +

Літерал з рухомою крапкою може мати такі частини:

+ + + +

Порядок позначається через "e" або "E", за яким іде ціле число, яке може мати знак ("+" або "-" перед ним). Літерал з рухомою крапкою повинен мати принаймні одну цифру, а також або десяткову крапку, або "e" (чи "E").

+ +

Якщо стисло, синтаксис наступний:

+ +
[(+|-)][цифри].[цифри][(E|e)[(+|-)]цифри]
+ +

Наприклад:

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+ +

Об'єктні літерали

+ +

Об'єктні літерали - це список з нуля або більше пар імен властивостей та асоційованих з ними значень об'єкта, взятих у фігурні дужки  ({}).

+ +
+

Не використовуйте об'єктні літерали на початку інструкції! Це призведе до помилки (або не поводитиметься так, як ви очікували), оскільки { буде інтерпретуватися як початок блоку.

+
+ +

Нижче наведений приклад об’єктного літералу. Перший елемент об'єкта car (автомобіль) визначає властивість myCar та присвоює йому новий рядок "Saturn"; другому елементу, властивості getCar, негайно присвоюється результат виклику функції (carTypes("Honda")); третій елемент, властивість special, використовує існуючу змінну (sales).

+ +
var sales = 'Toyota';
+
+function carTypes(name) {
+  if (name === 'Honda') {
+    return name;
+  } else {
+    return "Вибачте, ми не продаємо автомобілі " + name + ".";
+  }
+}
+
+var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota 
+ +

Крім того, ви можете використовувати числовий або рядковий літерал в якості імені властивості, чи вкладати один об'єкт у інший. У наступному прикладі використовуються ці можливості.

+ +
var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+ +

Іменем властивості об'єкта може бути будь-який рядок, в тому числі порожній. Якщо ім'я властивості не є дозволеним ідентифікатором JavaScript або числом, воно має бути записане в лапках.

+ +

До імен властивостей, які не є дозволеними ідентифікаторами, не можна звертатись через крапку (.), але можна звертатись та присвоювати значення за допомогою подібної до масиву нотації ("[]").

+ +
var unusualPropertyNames = {
+  '': 'Порожній рядок',
+  '!': 'Бум!'
+}
+console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames['']);  // Порожній рядок
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames['!']); // Бум!
+ +

Покращені об'єктні літерали

+ +

У ES2015 об'єктні літерали розширюються для підтримки встановлення прототипу при конструюванні, скороченого запису присвоєнь типу foo: foo, визначення методів, здійснення викликів super та обчислення імен властивостей з виразами.

+ +

Разом вони також зближують об'єктні літерали та оголошення класів (class) і дозволяють об'єктно-орієнтованому дизайну користуватися деякими з тих самих зручностей.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Скорочений запис для ‘handler: handler’
+    handler,
+    // Методи
+    toString() {
+     // Виклики super
+     return 'd ' + super.toString();
+    },
+    // Обчислювані (динамічні) імена властивостей
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

Літерали регулярних виразів (RegExp)

+ +

Літерал регулярного виразу (який докладно визначається пізніше) - це шаблон, записаний між слешами. Нижче наведено приклад літерала регулярного виразу:

+ +
var re = /ab+c/;
+ +

Рядкові літерали

+ +

Рядковий літерал - це нуль або більше символів всередині подвійних (") або одинарних (') лапок. Рядок повинен бути позначений лапками одного типу (тобто, або двома одинарними лапками, або двома подвійними лапками).

+ +

Нижче наведено приклади рядкових літералів:

+ +
'раз'
+"два"
+'1234'
+'один рядок \n другий рядок'
+"Мар'яна має кота"
+ +

Ви можете викликати будь-який з методів об'єкта {{jsxref("String")}} на рядковому літералі. JavaScript автоматично перетворює рядковий літерал на тимчасовий об'єкт String, викликає метод, а потім прибирає тимчасовий об'єкт String. Ви також можете використовувати властивість String.length з рядковим літералом:

+ +
// Надрукує кількість символів у рядку, враховуючи пробіли.
+console.log("Мар'яна має кота".length)  // В цьому випадку, 16.
+ +

У ES2015 також доступні шаблонні літерали. Шаблонні літерали пишуться у зворотніх лапках  (`) (гравіс) замість одинарних або подвйних лапок.

+ +

Шаблонні рядки надають синтаксичний цукор для конструювання рядків. (Це схоже на функції інтерполяції рядків у Perl, Python та інших).

+ +

За бажанням може бути додано тег, що дозволить налаштовувати побудову рядка, уникаючи атак типу впровадження або конструюючи структури даних більш високого рівня з вмісту рядка.

+ +
// Створення базового рядкового літералу
+`У JavaScript '\n' - це символ переводу рядка.`
+
+// Багаторядковий запис
+`У JavaScript шаблонні рядки можуть бути записані
+у кількох рядках, а текст в одинарних
+чи подвійних лапках не може.`
+
+// Інтерполяція рядків
+var name = 'Боб', time = 'сьогодні';
+`Привіт, ${name}, як ти ${time}?`
+
+// Створення префіксу HTTP-запиту, який інтерпретує заміни та конструювання
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+ +

Вам варто використовувати рядкові літерали, якщо немає потреби використовувати конкретно об'єкт String. Дивіться {{jsxref("String")}} для більш детальної інформації про об'єкти String.

+ +

Використання спеціальних символів у рядках

+ +

Окрім звичайних символів, ви можете також включати до рядків спеціальні символи, як показано в наступному прикладі.

+ +
'один рядок \n другий рядок'
+ +

Наступна таблиця наводить спеціальні символи, які можна використовувати у рядках JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Таблиця: спеціальні символи JavaScript
СимволЗначення
\0Нуль-символ
\bПовернення на крок
\fЗміна сторінки
\nНовий рядок
\rПовернення каретки
\tГоризонтальна табуляція
\vВертикальна табуляція
\'Апостроф або одинарні лапки
\"Подвійні лапки
\\Зворотній слеш
\XXXСимвол у кодуванні Latin-1, який містить до трьох цифр у вісімковій системі числення XXX між 0 та 377. Наприклад, \251 - це вісімкова послідовність для знаку охорони авторського права.
\xXXСимвол у кодуванні Latin-1, вказаний двома цифрами у шістнадцятковій системі числення XX між 00 та FF. Наприклад, \xA9 - це шістнадцяткова послідовність  для знаку охорони авторського права.
\uXXXXСимвол Юнікоду, вказаний чотирма цифрами у шістнадцятковій системі числення XXXX. Наприклад, \u00A9 - це Юнікодова послідовність для знаку охорони авторського права. Дивіться екрановані послідовності Юнікоду.
\u{XXXXX}Екранування кодів символів Юнікоду. Наприклад, \u{2F804} - це те саме, що й прості екранування Юнікоду \uD87E\uDC04.
+ +

Екранування символів

+ +

Для символів, не перелічених у таблиці, зворотній слеш перед символом ігнорується, але таке використання не рекомендоване, і його слід уникати.

+ +

Ви можете вставити лапки у рядок, поcтавивши перед ними зворотній слеш. Це називається екрануванням лапок. Наприклад:

+ +
var quote = "Він читав \"Кремацію Сема Маꥳ\" Р.Дж. Сервіса.";
+console.log(quote);
+ +

Результатом цього буде:

+ +
Він читав "Кремацію Сема Маꥳ" Р.Дж. Сервіса.
+ +

Щоб включити у рядок сам зворотний слеш, ви маєте його екранувати. Наприклад, щоб присвоїти рядкові шлях до файлу c:\temp, використовуйте наступне:

+ +
var home = 'c:\\temp';
+ +

Ви також можете екранувати розрив рядка, поставивши перед ним зворотній слеш. І зворотній слеш, і розрив рядка видаляються зі значення рядка.

+ +
var str = 'цей текст \
+розбито \
+на кілька \
+рядків.'
+console.log(str);   // цей текст розбито на кілька рядків.
+ +

Хоча у JavaScript немає синтаксису "heredoc", ви можете наблизитися до нього, додавши в кінці кожного рядка екранування розриву рядка та екранування символа нового рядка:

+ +
var poem =
+'Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo.'
+ +

ECMAScript 2015 вводить новий тип літералів, а саме шаблонні літерали. Це додає багато нових функцій, в тому числі багаторядковий запис!

+ +
var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.` 
+ +

Більше інформації

+ +

Цей розділ фокусується на базовому синтаксисі оголошень та типів. Щоб дізнатися більше про мовні конструкції JavaScript, дивіться також наступні розділи цього посібника:

+ + + +

У наступному розділі ми розглянемо конструкції потоку керування та обробку помилок.

+ +

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/uk/web/javascript/guide/index.html b/files/uk/web/javascript/guide/index.html new file mode 100644 index 0000000000..868d0b7864 --- /dev/null +++ b/files/uk/web/javascript/guide/index.html @@ -0,0 +1,131 @@ +--- +title: Посібник JavaScript +slug: Web/JavaScript/Guide +tags: + - Guide + - JavaScript + - 'l10n:priority' + - Посібник +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("JavaScript Guide")}}
+ +

Посібник з JavaScript показує, як використовувати мову JavaScript, і надає її попередній огляд. Та якщо ви шукаєте детальну інформацію щодо особливостей мови, зазирніть у Довідник з JavaScript.

+ +

Розділи

+ +

Цей посібник поділено на декілька розділів:

+ + + + + + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/uk/web/javascript/guide/indexed_collections/index.html b/files/uk/web/javascript/guide/indexed_collections/index.html new file mode 100644 index 0000000000..0c4dfaef25 --- /dev/null +++ b/files/uk/web/javascript/guide/indexed_collections/index.html @@ -0,0 +1,578 @@ +--- +title: Indexed collections +slug: Web/JavaScript/Guide/Indexed_collections +translation_of: Web/JavaScript/Guide/Indexed_collections +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}
+ +

У цьому розділ представлено набір даних, упорядкованих за значенням індексу. Це включає масиви та подібні до масиву конструкції, такі як об'єкти {{jsxref("Array")}} та {{jsxref("TypedArray")}} .

+ +

Об'єкт Array

+ +

Масив - це упорядкований набір значень, на який ви посилаєтесь з ім'ям та індексом.

+ +

Наприклад, розглянемо масив під назвою emp, який містить імена працівників, індексовані їх числовим номером співробітника. Так emp[1] буде працівником номер один, emp[2] працівником номером два, тощо.

+ +

У JavaScript немає явного типу даних масиву. Однак ви можете використовувати заздалегідь заданий об’єкт Array та його методи для роботи з масивами у ваших програмах. Об'єкт Array має методи маніпулювання масивами різними способами, такими як з'єднання(joining), реверсування(reversing) та сортування. Він має властивість визначати довжину масиву та інші властивості для використання з регулярними виразами.

+ +

Створення масиву

+ +

Наступні операції створюють еквівалентні масиви:

+ +
let arr = new Array(element0, element1, ..., elementN)
+let arr = Array(element0, element1, ..., elementN)
+let arr = [element0, element1, ..., elementN]
+
+ +

element0, element1, ..., elementN - це список значень елементів масиву. Коли ці значення задані, масив ініціалізується з ними як елементами масиву. Властивість довжина (length) масиву встановлюється рівною кількості аргументів.

+ +

Синтаксис дужки називається "літералом масиву" або "ініціалізатором масиву". Він коротший, ніж інші форми створення масиву, і тому загалом кращий. Докладніше див. Літерали масиву.

+ +

Для створення масиву з ненульовою довжиною, але без будь-яких елементів, може бути використане будь-яке з наведеного нижче:

+ +
// This...
+let arr = new Array(arrayLength)
+
+// ...буде такий саме масив як цей
+let arr = Array(arrayLength)
+
+// Це має точно такий же ефект
+let arr = []
+arr.length = arrayLength
+
+ +
+

Примітка: У наведеному вище коді, arrayLength повинен бути типу Number. У іншому випадку, буде створений масив з єдиним елементом (з наданим значенням). Виклик arr.length поверне arrayLength, але масив у дійсності убде містити порожні (undefined) елементи. Запуск циклу {{jsxref("Statements/for...in","for...in")}} для масиву не поверне жодного з елементів масиву.

+
+ +

Крім нещодавно означеної змінної, як показано вище, масиви також можуть бути призначені як властивість для нового або існуючого об'єкта:

+ +
let obj = {}
+// ...
+obj.prop = [element0, element1, ..., elementN]
+
+// або
+let obj = {prop: [element0, element1, ...., elementN]}
+
+ +

Якщо Ви хочете ініціалізувати масив з єдиним елементом, а цей елемент є Number, ви повинні використовувати синтаксис квадратних дужок. Коли одне значення Number передається конструктору або функції Array(), воно інтерпретується як arrayLength, а не як окремий елемент.

+ +
let arr = [42]       // Створює масив тільки з одним елементом:
+                     // числом 42.
+
+let arr = Array(42)  // Створює масив без жодного елементу
+                     // і довжина масиву arr.length встановлена в 42.
+                     //
+                     // Це еквівалентно наступному:
+let arr = []
+arr.length = 42
+
+ +

Виклик Array(N) призводить до RangeError, якщо N - це не ціле число, тобто дробова частина якого не дорівнює нулю. Наступний приклад ілюструє таку поведінку.

+ +
let arr = Array(9.3)   // RangeError: Invalid array length
+
+ +

Якщо ваш код потребує створення масивів з окремими елементами довільного типу даних, безпечніше використовувати літерали масиву. Крім того, спершу створіть порожній масив, перш ніж додати до нього один елемент.

+ +

У ES2015 ви можете використовувати статичний метод {{jsxref("Array.of")}} для створення масивів з одним елементом.

+ +
let wisenArray = Array.of(9.3)   // wisenArray містить тільки один елемент 9.3
+ +

Заповнення масиву

+ +

Ви можете заповнити масив, призначивши значення його елементам. Наприклад:

+ +
let emp = []
+emp[0] = 'Casey Jones'
+emp[1] = 'Phil Lesh'
+emp[2] = 'August West'
+
+ +
+

Примітка: Якщо ви подасте неціле значення для оператора масиву в наведеному вище коді, буде створено властивість в об'єкті, що представляє масив, замість елемента масиву.

+ +
let arr = []
+arr[3.4] = 'Oranges'
+console.log(arr.length)                 // 0
+console.log(arr.hasOwnProperty(3.4))    // true
+
+
+ +

Ви також можете заповнити масив під час його створення:

+ +
let myArray = new Array('Hello', myVar, 3.14159)
+// або
+let myArray = ['Mango', 'Apple', 'Orange']
+
+ +

Звернення до елементів масиву

+ +

Ви звертаєтеся на елементи масиву, використовуючи порядковий номер елемента. Наприклад, припустимо, Ви означуєте такий масив:

+ +
let myArray = ['Wind', 'Rain', 'Fire']
+
+ +

Потім Ви звертаєтеся до першого елементу масиву як до myArray[0], а до другого елементу масиву як до myArray[1]. Індекс елементів починається з нуля.

+ +
+

Примітка: Оператор масиву (квадратні дужки) також використовуються для доступу до властивостей масиву. (Масиви також є об'єктами в JavaScript). Наприклад:

+ +
let arr = ['one', 'two', 'three']
+arr[2]          // three
+arr['length']   // 3
+
+
+ +

Довжина масиву

+ +

На рівні реалізації масиви JavaScript фактично зберігають свої елементи як стандартні властивості об'єкта, використовуючи індекс масиву як ім'я властивості.

+ +

Властивість length особлива. Вона завжди повертає індекс останнього елемента плюс один. (У наведеному нижче прикладі 'Dusty' індексується на рівні 30, тому cats.length повертає 30 + 1).

+ +

Пам'ятайте, що індекси масиву JavaScript базуються на 0: вони починаються з 0, а не 1. Це означає, що властивість length буде на один більше, ніж найвищий індекс, що зберігається в масиві:

+ +
let cats = []
+cats[30] = ['Dusty']
+console.log(cats.length) // 31
+
+ +

Ви також можете записати значення у властивість length .

+ +

Введення значення, коротшого за кількість збережених елементів, скорочує масив. Написання 0 спустошує масив повністю:

+ +
let cats = ['Dusty', 'Misty', 'Twiggy']
+console.log(cats.length)  // 3
+
+cats.length = 2
+console.log(cats)  // logs "Dusty, Misty" - Twiggy видалено
+
+cats.length = 0
+console.log(cats)  // logs []; масив cats array - порожній
+
+cats.length = 3
+console.log(cats)  // logs [ <3 пустих елементи> ]
+
+ +

Ітерація з масивами

+ +

Поширена операція - це перебір значень масиву, з обробкою кожного елементу. Найпростіший спосіб зробити це наступним чином:

+ +
let colors = ['red', 'green', 'blue']
+for (let i = 0; i < colors.length; i++) {
+  console.log(colors[i])
+}
+
+ +

Якщо ви знаєте, що жоден з елементів вашого масиву не повертає false в булевому контексті, наприклад, якщо ваш масив складається з вузлів DOM, Ви можете використовувати більш ефективну ідіому:

+ +
let divs = document.getElementsByTagName('div')
+for (let i = 0, div; div = divs[i]; i++) {
+  /* Process div in some way */
+}
+
+ +

Це дозволяє уникнути накладних перевірок довжини масиву та гарантує, що змінна div для додаткової зручності переназначається поточному елементу на кожній ітерації .

+ +

Метод  {{jsxref("Array.forEach", "forEach()")}} забезпечує інший спосіб ітерації з масивом:

+ +
let colors = ['red', 'green', 'blue']
+colors.forEach(function(color) {
+  console.log(color)
+})
+// red
+// green
+// blue
+
+ +

Крім того, ви можете скоротити код для параметра forEach за допомогою функції стрілок ES2015:

+ +
let colors = ['red', 'green', 'blue']
+colors.forEach(color => console.log(color))
+// red
+// green
+// blue
+
+ +

Функція, передана forEach , виконується один раз для кожного елемента масиву, при цьому елемент масиву передається як аргумент функції. Не присвоєні значення не перебираються в циклі forEach.

+ +

Зауважте, що елементи масиву, опущені при означенні масиву, не перебираються під час ітерації forEach, але пеербираються, коли вручну елемнту було присвоєно undefined:

+ +
let array = ['first', 'second', , 'fourth']
+
+array.forEach(function(element) {
+  console.log(element)
+})
+// first
+// second
+// fourth
+
+if (array[2] === undefined) {
+  console.log('array[2] is undefined')  // true
+}
+
+array = ['first', 'second', undefined, 'fourth']
+
+array.forEach(function(element) {
+  console.log(element)
+})
+// first
+// second
+// undefined
+// fourth
+
+ +

Оскільки елементи JavaScript зберігаються як стандартні властивості об'єкта, не рекомендується проводити повторення через масиви JavaScript, використовуючи цикли {{jsxref("Statements/for...in","for...in")}} , оскільки будуть перебрані як нормальні елементи так і всі властивості масиву.

+ +

Методи масивів

+ +

Об'єкт {{jsxref("Array")}} має наступні методи:

+ +

{{jsxref("Array.concat", "concat()")}} з'єднує два або більше масива і повертає новий масив.

+ +
let myArray = new Array('1', '2', '3')
+myArray = myArray.concat('a', 'b', 'c')
+// myArray тепер такий ["1", "2", "3", "a", "b", "c"]
+
+ +

{{jsxref("Array.join", "join(delimiter = ',')")}} об'єднує всі елементи масиву в рядок.

+ +
let myArray = new Array('Wind', 'Rain', 'Fire')
+let list = myArray.join(' - ') // list є "Wind - Rain - Fire"
+
+ +

{{jsxref("Array.push", "push()")}} додає один або більше елементів в кінець масиву і повертає отриману довжину length масиву.

+ +
let myArray = new Array('1', '2')
+myArray.push('3')  // myArray тепер ["1", "2", "3"]
+
+ +

{{jsxref("Array.pop", "pop()")}} видаляє останній елемент з масиву і повертає цей елемент.

+ +
let myArray = new Array('1', '2', '3')
+let last = myArray.pop()
+// myArray тепер ["1", "2"], last = "3"
+
+ +

{{jsxref("Array.shift", "shift()")}} видаляє перший елемент з масиву і повертає цей елемент.

+ +
let myArray = new Array('1', '2', '3')
+let first = myArray.shift()
+// myArray тепер ["2", "3"], first є "1"
+
+ +

{{jsxref("Array.unshift", "unshift()")}}  додає один або більше елементів до передньої частини масиву і повертає нову довжину масиву.

+ +
let myArray = new Array('1', '2', '3')
+myArray.unshift('4', '5')
+// myArray став ["4", "5", "1", "2", "3"]
+
+ +

{{jsxref("Array.slice", "slice(start_index, upto_index)")}} виймає частину масиву і повертає новий масив.

+ +
let myArray = new Array('a', 'b', 'c', 'd', 'e')
+myArray = myArray.slice(1, 4)  // починаючи з 1-го вимйає елементи до 4-го
+                               // повертає [ "b", "c", "d"]
+
+ +

{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}}  видаляє елементи з масиву та (необов'язково) замінює їх. Він повертає елементи, вилучені з масиву.

+ +
let myArray = new Array('1', '2', '3', '4', '5')
+myArray.splice(1, 3, 'a', 'b', 'c', 'd')
+// myArray тепер ["1", "a", "b", "c", "d", "5"]
+// Цей код стартує з першого індексу (or where the "2" was),
+// видаляє 3 елементи, а тоді вставляє всі підряд
+// на це місце.
+
+ +

{{jsxref("Array.reverse", "reverse()")}} транспонує масив: перший елемент масиву стає останнім, а останній стає першим. Він повертає посилання на масив.

+ +
let myArray = new Array('1', '2', '3')
+myArray.reverse()
+// транспонований масив myArray = ["3", "2", "1"]
+
+ +

{{jsxref("Array.sort", "sort()")}} сортує елементи масиву на місці та повертає посилання на масив.

+ +
let myArray = new Array('Wind', 'Rain', 'Fire')
+myArray.sort()
+// відсортований масив myArray = ["Fire", "Rain", "Wind"]
+
+ +

sort() також може скористатися функцією зворотного виклику для визначення порівняння елементів масиву.

+ +

Метод sort (та інші нижче), які приймають функцію зворотного виклику, відомі як ітераційні методи, оскільки певним чином вони перебирають весь масив. Кожен з них бере необов'язковий другий аргумент під назвою thisObject. Якщо  thisObject передається, він стає значенням ключового слова this всередині тіла функції зворотного виклику. Якщо це не передбачено, як і в інших випадках, коли функція викликається поза явним контекстом об'єкта, this стосуватиметься глобального об'єкта (window) при використанні функції вказівника зворотного виклику, або undefined при використанні нормальної функції зворотного виклику.

+ +

Функція зворотного виклику викликається двома аргументами, які є елементами масиву.

+ +

Функція нижче порівнює два значення і повертає одне з трьох значень:

+ +

Наприклад, наступне буде сортувати за останньою літерою рядка:

+ +
let sortFn = function(a, b) {
+  if (a[a.length - 1] < b[b.length - 1]) return -1;
+  if (a[a.length - 1] > b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn)
+// відсортований масив myArray = ["Wind","Fire","Rain"]
+ + + +

{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} шукає масив для searchElement та повертає індекс першого збігу.

+ +
let a = ['a', 'b', 'a', 'b', 'a']
+console.log(a.indexOf('b'))     // пише 1
+
+// Тепер спробуйте ще раз, починаючи з останнього співпадіння
+console.log(a.indexOf('b', 2))  // пише 3
+console.log(a.indexOf('z'))     // пише -1, оскільки 'z' не було знайдено
+
+ +

{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} працює як indexOf, але починає з кінця і шукає у зворотному порядку.

+ +
let a = ['a', 'b', 'c', 'd', 'a', 'b']
+console.log(a.lastIndexOf('b'))     // пише 5
+
+// Тепер спробуйте ще раз, починаючи з останнього співпадіння
+console.log(a.lastIndexOf('b', 4))  // пише 1
+console.log(a.lastIndexOf('z'))     // пише -1
+
+ +

{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} виконує callback на кожному елементі масиву і повертає undefined.

+ +
let a = ['a', 'b', 'c']
+a.forEach(function(element) { console.log(element) })
+// logs each item in turn
+
+ +

{{jsxref("Array.map", "map(callback[, thisObject])")}} повертає новий масив повернутого значення при виконанні зворотного виклику callback на кожному елементі масиву.

+ +
let a1 = ['a', 'b', 'c']
+let a2 = a1.map(function(item) { return item.toUpperCase() })
+console.log(a2) // logs ['A', 'B', 'C']
+
+ +

{{jsxref("Array.filter", "filter(callback[, thisObject])")}} повертає новий масив, що містить елементи, для яких callback повернув true.

+ +
let a1 = ['a', 10, 'b', 20, 'c', 30]
+let a2 = a1.filter(function(item) { return typeof item === 'number'; })
+console.log(a2)  // logs [10, 20, 30]
+
+ +

{{jsxref("Array.every", "every(callback[, thisObject])")}} повертає true, якщо callback повертає true для кожного елемента масиву.

+ +
function isNumber(value) {
+  return typeof value === 'number'
+}
+let a1 = [1, 2, 3]
+console.log(a1.every(isNumber))  // logs true
+let a2 = [1, '2', 3]
+console.log(a2.every(isNumber))  // logs false
+
+ +

{{jsxref("Array.some", "some(callback[, thisObject])")}} повертає true , якщо callback повертає true для принаймні одного елемента в масиві.

+ +
function isNumber(value) {
+  return typeof value === 'number'
+}
+let a1 = [1, 2, 3]
+console.log(a1.some(isNumber))  // logs true
+let a2 = [1, '2', 3]
+console.log(a2.some(isNumber))  // logs true
+let a3 = ['1', '2', '3']
+console.log(a3.some(isNumber))  // logs false
+
+ +

{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}}  застосовує callback(accumulator, currentValue[, currentIndex[, array]]) для кожного значення масиву з метою зменшення списку елементів до одного значення. Функція зменшення повертає кінцеве значення, повернене функцією callback .

+ +

Якщо вказано initialValue , тоді callback викликається initialValue як значення першого параметра, а значення першого елемента в масиві - як значення другого параметра.

+ +

Якщо initialValue не вказана, першими двома параметрами callback будуть перший і другий елементи масиву. При кожному наступному виклику значенням першого параметра буде будь-який callback , повернутий при попередньому виклику, а значення другого параметра буде наступним значенням масиву.

+ +

Якщо для callback  потрібен доступ до індексу оброблюваного елемента, для доступу до всього масиву вони доступні як необов'язкові параметри.

+ +
let a = [10, 20, 30]
+let total = a.reduce(function(accumulator, currentValue) { return accumulator + currentValue }, 0)
+console.log(total) // Prints 60
+
+ +

{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} працює подібно  reduce(), але починається з останнього елемента.

+ +

reduce та reduceRight - найменш очевидний із ітеративних методів масиву. Їх слід використовувати для алгоритмів, що поєднують два значення рекурсивно, щоб зменшити послідовність до одного значення.

+ +

Багатовимірні масиви

+ +

Масиви можуть бути вкладені, тобто масив може містити інший масив як елемент. Використовуючи цю характеристику масивів JavaScript, можна створити багатовимірні масиви.

+ +

Наступний код створює багатовимірний масив.

+ +
let a = new Array(4)
+for (let i = 0; i < 4; i++) {
+  a[i] = new Array(4)
+  for (let j = 0; j < 4; j++) {
+    a[i][j] = '[' + i + ', ' + j + ']'
+  }
+}
+
+ +

Цей приклад створює масив із таких рядків:

+ +
Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
+Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
+Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
+Row 3: [3, 0] [3, 1] [3, 2] [3, 3]
+
+ +

Масиви та регулярні вирази

+ +

Коли масив є результатом збігу між регулярним виразом і рядком, масив повертає властивості та елементи, які надають інформацію про збіг. Масив - це повернене значення {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, і {{jsxref("Global_Objects/String/split","String.split()")}}. Інформацію про використання масивів з регулярними виразами див Regular Expressions.

+ +

Робота з масиво-подібними об'єктами

+ +

Деякі об`єкти JavaScript, такі як NodeList повертають  document.getElementsByTagName() або об'єкт {{jsxref("Functions/arguments","arguments")}}, доступний в тілі функції, який виглядає і поводиться як масиви на поверхні, але не ділиться всіма їх методами. Наприклад, об'єкт arguments забезпечує атрибут {{jsxref("Global_Objects/Function/length","length")}} але не реалізує метод {{jsxref("Array.forEach", "forEach()")}}.

+ +

Методи прототипу масиву можна викликати для інших об’єктів, подібних до масиву. наприклад:

+ +
function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item)
+  })
+}
+
+ +

Методи прототипу масиву також можна використовувати і для рядків, оскільки вони забезпечують послідовний доступ до своїх символів аналогічно масивам:

+ +
Array.prototype.forEach.call('a string', function(chr) {
+  console.log(chr)
+})
+
+ +

Типізовані масиви

+ +

JavaScript typed arrays є схожими на масив об'єктів і забезпечують механізм доступу до необроблених бінарних даних. Як ви вже знаєте, об'єкт {{jsxref("Array")}} динамічно росте і скорочується і може мати будь-яке значення JavaScript. Рушії JavaScript виконують оптимізацію, щоб ці масиви були швидкими. Однак, оскільки веб-застосунки стають все більш потужними, додаючи такі функції, як маніпулювання аудіо та відео, доступ до необроблених даних за допомогою WebSockets тощо, стало зрозуміло, що є випадки, коли корисним буде код JavaScript для швидкого та легкого маніпулювати необробленими бінарними даними в типізованих масивах.

+ +

Буфери та представлення: типізовані архітектури масивів

+ +

Щоб досягти максимальної гнучкості та ефективності, JavaScript типізовані масиви розділили реалізацію на буфери (buffers) та представлення(views). Буфер (реалізований об'єктом {{jsxref ("ArrayBuffer")}}) - це об'єкт, що представляє фрагмент даних; він не має формату, про який можна говорити, і не пропонує механізму доступу до його вмісту. Для доступу до пам'яті, що міститься в буфері, вам потрібно скористатися представленням. Представлення забезпечує контекст - тобто тип даних, початкове зміщення та кількість елементів - який перетворює дані у фактично набраний масив.

+ +

Typed arrays in an ArrayBuffer

+ +

ArrayBuffer

+ +

{{jsxref("ArrayBuffer")}} - це тип даних, який використовується для репрезентації загального буфера даних бінарних даних фіксованої довжини. Ви не можете безпосередньо маніпулювати вмістом ArrayBuffer; натомість ви створюєте типізоване представлення масиву або {{jsxref("DataView")}} який представляє буфер у певному форматі, і використовують його для читання та запису вмісту буфера.

+ +

Типізоване представлення масиву

+ +

Типізовані представлення масивів мають самостійно описові назви та надають представлення для всіх звичайних числових типів, таких як  Int8, Uint32, Float64 і так далі. Існує один спеціальний вид типізованого представлення масиву Uint8ClampedArray. Він фіксує значення між 0 та 255.  Це корисно, наприклад, для обробки даних Canvas.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeValue RangeSize in bytesDescriptionWeb IDL typeEquivalent C type
{{jsxref("Int8Array")}}-128 to 12718-bit two's complement signed integerbyteint8_t
{{jsxref("Uint8Array")}}0 to 25518-bit unsigned integeroctetuint8_t
{{jsxref("Uint8ClampedArray")}}0 to 25518-bit unsigned integer (clamped)octetuint8_t
{{jsxref("Int16Array")}}-32768 to 32767216-bit two's complement signed integershortint16_t
{{jsxref("Uint16Array")}}0 to 65535216-bit unsigned integerunsigned shortuint16_t
{{jsxref("Int32Array")}}-2147483648 to 2147483647432-bit two's complement signed integerlongint32_t
{{jsxref("Uint32Array")}}0 to 4294967295432-bit unsigned integerunsigned longuint32_t
{{jsxref("Float32Array")}}1.2×10-38 to 3.4×1038432-bit IEEE floating point number (7 significant digits e.g., 1.1234567)unrestricted floatfloat
{{jsxref("Float64Array")}}5.0×10-324 to 1.8×10308864-bit IEEE floating point number (16 significant digits e.g., 1.123...15)unrestricted doubledouble
{{jsxref("BigInt64Array")}}-263 to 263-1864-bit two's complement signed integerbigintint64_t (signed long long)
{{jsxref("BigUint64Array")}}0 to 264-1864-bit unsigned integerbigintuint64_t (unsigned long long)
+ +

For more information, see JavaScript typed arrays and the reference documentation for the different {{jsxref("TypedArray")}} objects.

+ +

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}

diff --git a/files/uk/web/javascript/guide/introduction/index.html b/files/uk/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..8f1d97d352 --- /dev/null +++ b/files/uk/web/javascript/guide/introduction/index.html @@ -0,0 +1,147 @@ +--- +title: Вступ +slug: Web/JavaScript/Guide/Introduction +tags: + - JavaScript + - Вступ + - Початківець + - Путівник +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

Цей розділ розповідає про мову JavaScript та деякі засадничі її поняття.

+ +

Необхідний рівень підготовки

+ +

Цей навчальний посібник передбачає, що ви маєте деякі початкові знання:

+ + + +

Де знайти інформацію з JavaScript

+ +

Документація з JavaScript на ресурсі MDN містить таке:

+ + + +

Якщо ви новачок у JavaScript, почніть із вивчення статей, розміщених у навчальній секції (learning area) та Посібника з JavaScript. Опанувавши основи, можете використовувати Довідник з JavaScript для отримання більш детальної інформації про конкретні об'єкти та вирази (конструкції мови).

+ +

Що таке JavaScript?

+ +

JavaScript — кроссплатформна об'єктно-зорієнтована мова сценаріїв (скриптів). Рушій JavaScript підключається до об'єктів свого середовища виконання (зазвичай, веб-переглядача) та надає можливість керування ними.

+ +

Мова JavaScript має стандартну бібліотеку об'єктів (таких як Array, Date та Math) і основний набір елементів мови програмування, таких як оператори, керівні структури та вирази.

+ +

Ядро JavaScript може бути розширене для різних потреб шляхом доповнення його додатковими об'єктами. Наприклад:

+ + + +

JavaScript та Java

+ +

Мови програмування JavaScript та Java у окремих рисах схожі між собою, але все одно докорінно відрізняються одна від одної. Мова JavaScript чимось нагадує Java, але, на відміну від останньої, не має чіткої типізації даних та строгого контролю за типами.

+ +

JavaScript наслідує синтаксис більшості виразів Java, також наслідуються угоди про іменування та основні конструкції керування перебігом виконання сценарію. Це і стало причиною того, що свого часу назву мови змінили з LiveScript на JavаScript.

+ +

На відміну від системи часу коміляції декларативно побудованих класів у Java, мова JavaScript підтримує систему часу виконання, що ґрунтується на невеликій кількості типів даних, представлених числовим типом, логічними, та рядковими значеннями. JavaScript має об'єктну модель, що спирається на прототипи, замість більш поширеної, побудованої на класах, об'єктної моделі, властивої мові Java. Модель на базі прототипів надає можливість динамічного спадкування; тобто успадковане може бути різним для різних об'єктів. Також у JavaScript реалізована підтримка функцій без будь-яких особливих декларативних вимог. Функції можуть бути властивостями об'єктів, функціями, що виконуються, та слабко типізованими методами.

+ +

Для JavaScript властива вільніша форма мови, ніж для Java. Вас не зобов'язують оголошувати всі змінні, класи та методи. JavaScript-програміста не турбує питання, є метод відкритим (public), закритим (private), чи захищеним (protected). Для змінних, параметрів, та типів, що повертаються функціями, не вказується явним чином їх тип.

+ +

Java — це мова програмування, яка базується на класах, розроблена для швидкого виконання та забезпечення захищеності типів. Захищеність типів означає, що не можна, наприклад, привести тип integer до типу object reference, або отримати доступ до закритої пам'яті, маніпулюючи з байткодом Java. Базована на класах об'єктна модель означає, що програма повністю складається із класів та їх методів. Успадкування класів у Java та строга типізація взагалі вимагають існування тісно пов'язаних між собою ієрархій об'єктів. Ці вимоги роблять програмування на Java більш складним, ніж JavaScript-програмування.

+ +

На противагу цьому, JavaScript, за своїм духом, близька до невеликих мов із динамічною типізацією, таких, як HyperTalk та dBASE. Ці скриптові мови надають інструменти програмування для більш широкого загалу користувачів, завдяки простоті синтаксису, вбудованим функціональним можливостям зі спеціалізації, та мінімальним вимогам до створення об'єктів.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript у порівнянні з Java
Мова JavaScriptМова Java
+

Об'єктно орієнтована. Не має відмінностей між типами об'єктів. Спадкування здійснюється через механізм прототипів, а властивості та методи можуть бути динамічно додані до будь-якого об'єкту.

+
+

Базується на класах. Об'єкти поділяються на класи та екземпляри. Спадкування реалізоване через ієрархію класів. До класів та екземплярів не можна динамічно додавати властивості та методи.

+
Для змінних не декларуються типи даних (динамічна типізація).Для змінних необхідне декларування типів даних (статична типізація)
Не може автоматично вести запис до жорсткого диску.Може автоматично вести запис до жорсткого диску.
+ +

Щоб отримати більше інформації щодо відмінностей між JavaScript та Java, відвідайте цей розділ: Докладно про об'єктну модель.

+ +

JavaScript та специфікація ECMAScript

+ +

JavaScript стандартизований Європейською асоціаіцєю з стандартизації інформаційних та комунікаційних систем — Ecma International (спершу складноскорот ECMA позначав European Computer Manufacturers Association). Ця стандартизована версія JavaScript, що має назву ECMAScript, однаково працює у всіх застосунках, що підтримують стандарт. Різні компанії можуть використовувати цей відкритий стандарт для розробки своїх реалізацій JavaScript. ECMAScript стандарт задокументований у специфікації ECMA-262. Див. Нове у JavaScript, щоб довідатись більше про різні версії JavaScript та про редакції специфікації ECMAScript.

+ +

Стандарт ECMA-262 також затверджений ISO (International Organization for Standardization), як ISO-16262. Ви можете знайти специфікацію на сайті Ecma International website. Специфікація ECMAScript не описує об'єктну модель документа Document Object Model (DOM), яка стандартизована World Wide Web Consortium (W3C). DOM визначає спосіб, у який об'єкти HTML-документа стають доступними із вашого скрипта. Для отримання більш повного уявлення про технології, що використовуються при програмуванні на JavaScript, зверніться до статті Огляд технологій JavaScript.

+ +

Документація з JavaScript та специфікація ECMAScript

+ +

Специфікація ECMAScript є низкою вимог до реалізації ECMAScript. Цих вимог слід дотримуватись, щоб запровадити відповідні стандартам можливості мови у реалізації ECMAScript, або, щоб створити рушій (наприклад, SpiderMonkey у Firefox або v8 у Chrome).

+ +

Документ ECMAScript не призначений для того, щоб надавати допомогу у програмуванні скриптів. Для отримання інформації про написання скриптів слід використовувати документацію JavaScript.

+ +

У специфікації ECMAScript використовується термінологія і синтаксис, з якими JavaScript-програмісти можуть бути і не знайомі. Не зважаючи на те, що опис мови у ECMAScript може бути дещо іншим, сама мова залишається такою самою. JavaScript підтримує весь функціонал, закладений у специфікації ECMAScript.

+ +

Документація JavaScript описує аспекти мови, які використовує програміст JavaScript.

+ +

Початок роботи із JavaScript

+ +

Розпочати працювати з JavaScript дуже просто: все, що вам потрібно — сучасний переглядач. У даному посібнику розглядаються деякі можливості JavaScript, які, на даний час, реалізовані лише в останніх версіях Firefox, тому рекомендується використовувати саму останню версію Firefox.

+ +

До Firefox вбудовано два інструменти, що роблять його використання дуже зручним для експериментів із JavaScript: Web Console та Scratchpad.

+ +

Веб-консоль — Web Console

+ +

Web Console надає інформацію про поточну завантажену веб-сторінку, а також містить вбудовану командну стрічку (command line), у якій ви маєте змогу виконувати інструкції JavaScript у поточній сторінці.

+ +

Щоб відкрити Web Console (Ctrl + Shift + K), оберіть пункт "Веб-консоль" із меню "Розробник" у меню Firefox. Вона з'явиться у нижній частині вікна переглядача. Внизу консолі, по всій її довжині, розміщено командну стрічку, до якої ви можете вводити команди та вирази JavaScript. Результати їх виконання одразу з'являться у панелі, що знаходиться вище:

+ +

+ +

Чернетка — Scratchpad

+ +

Веб-консоль чудово підходить для виконання окремих рядків JavaScript, і, хоча, ви й можете вводити й виконувати рядки по одному, це не дуже зручно, і ви не можете зберігати зразки свого коду з використанням Веб-консолі. Таким чином, для виконання більш складних прикладів, є кращий інструмент — Чернетка (Scratchpad).

+ +

Щоб відкрити Scratchpad (Shift + F4), оберіть "Чернетка" ("Scracthpad") у меню "Розробник" із меню Firefox. Він відкривається у окремому вікні і є редактором, який можна використовувати для запису і виконання JavaScript у переглядачі. Ви також можете зберегти скрипти до диску і завантажувати їх з диска.

+ +

+ +

Hello World

+ +

Щоб розпочати роботу з JavaScript, відкрийте Scratchpad та напишіть свою першу програму "Hello world":

+ +
function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+
+ +

Натисніть Ctrl + R, щоб побачити, як цей код буде виконано у переглядачі!

+ +

На наступних сторінках цього посібника буде розглянуто синтаксис та можливості мови JavaScript, що дозволить вам створювати більш складні застосунки.

+ +

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

diff --git a/files/uk/web/javascript/guide/iterators_and_generators/index.html b/files/uk/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..144a8c9ee0 --- /dev/null +++ b/files/uk/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,214 @@ +--- +title: Ітератори та генератори +slug: Web/JavaScript/Guide/Iterators_and_Generators +tags: + - JavaScript + - Посібник +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}
+ +

Обробка кожного елемента колекції є дуже розповсюдженою операцією. JavaScript надає численні способи перебору колекції, від простих циклів {{jsxref("Statements/for","for")}} до {{jsxref("Global_Objects/Array/map","map()")}} та {{jsxref("Global_Objects/Array/filter","filter()")}}. Ітератори та генератори додають концепцію перебору безпосередньо у базову мову та надають механізм налаштування поведінки циклів {{jsxref("Statements/for...of","for...of")}}.

+ +

Більш детально дивіться у статтях:

+ + + +

Ітератори

+ +

У JavaScript ітератор - це об'єкт, який визначає послідовність та, за бажанням, значення, що повертається по її завершенні. Якщо конкретніше, то ітератор - це будь-який об'єкт, що реалізує протокол ітератора, маючи метод next(), який повертає об'єкт з двома властивостями: value, наступне значення послідовності; та done, що дорівнює true, якщо останнє значення послідовності вже було отримане. Якщо поруч з done присутнє значення value, воно є поверненим значенням ітератора.

+ +

Як тільки ітератор був створений, його можна явно обходити, викликаючи метод next(). Перебір ітератора називають споживанням ітератора, бо, загалом, це можна зробити лише один раз. Після того, як завершувальне значення було видане, додаткові виклики next() мають просто вертати {done: true}.

+ +

Найтиповішим ітератором у Javascript є ітератор масиву, який просто повертає по черзі кожне значення відповідного масиву. Хоча легко уявити, що усі ітератори можна виразити у вигляді масивів, це не так. Масиви мають бути розташовані у пам'яті цілком, але ітератори споживаються лише за необхідності і, таким чином, можуть виражати послідовності необмеженого розміру, такі як діапазон цілих чисел між 0 та Infinity (нескінченністю).

+ +

Ось приклад, який може робити саме це. Він дозволяє створювати ітератор простого діапазону, який визначає послідовність цілих чисел від start (включно) до end (не включно) з проміжком step. Його кінцеве повернене значення є розміром створеної послідовності, що відслідковується змінною iterationCount.

+ +
function makeRangeIterator(start = 0, end = Infinity, step = 1) {
+    let nextIndex = start;
+    let iterationCount = 0;
+
+    const rangeIterator = {
+       next: function() {
+           let result;
+           if (nextIndex < end) {
+               result = { value: nextIndex, done: false }
+               nextIndex += step;
+               iterationCount++;
+               return result;
+           }
+           return { value: iterationCount, done: true }
+       }
+    };
+    return rangeIterator;
+}
+ +

Далі використання ітератора виглядає наступним чином:

+ +
let it = makeRangeIterator(1, 10, 2);
+
+let result = it.next();
+while (!result.done) {
+ console.log(result.value); // 1 3 5 7 9
+ result = it.next();
+}
+
+console.log("Перебрано послідовність розміром: ", result.value); // [повертає 5 чисел з інтервалу від 0 до 10]
+
+
+ +
+

Неможливо знати, чи певний об'єкт є ітератором. Якщо вам необхідно це зробити, використовуйте ітерабельні об'єкти.

+
+ +

Функції-генератори

+ +

Хоча користувацькі ітератори є потужним інструментом, їхнє створення вимагає обережного програмування через необхідність явно підтримувати їхній внутрішній стан. Функції-генератори надають потужну альтернативу: вони дозволяють визначати алгоритм перебору написанням єдиної функції, виконання якої не є безперервним. Функції-генератори пишуться за допомогою синтаксису {{jsxref("Statements/function*","function*")}}. При першому виклику функції-генератори не виконують свій код, замість цього вони повертають ітератор під назвою Generator. Коли значення споживається викликом методу об'єкта Generator next, функція-генератор виконується до тих пір, поки не зустріне ключове слово yield.

+ +

Функція може викликатись будь-яку бажану кількість раз та кожен раз вертатиме новий об'єкт Generator, однак, кожний об'єкт Generator може перебиратись лише один раз.
+
+ Тепер ми можемо адаптувати наведений вище приклад. Поведінка коду ідентична, але ця реалізація набагато простіша у написанні та читанні.

+ +
function* makeRangeIterator(start = 0, end = 100, step = 1) {
+    let iterationCount = 0;
+    for (let i = start; i < end; i += step) {
+        iterationCount++;
+        yield i;
+    }
+    return iterationCount;
+}
+ +

Ітерабельні об'єкти

+ +

Об'єкт є ітерабельним, якщо він визначає свою ітераційну поведінку, наприклад, через які значення проходитиме цикл {{jsxref("Statements/for...of", "for...of")}}. Деякі вбудовані типи, такі як {{jsxref("Array")}} або {{jsxref("Map")}}, мають визначену за замовчуванням ітераційну поведінку, в той час, як інші типи (такі як {{jsxref("Object")}}) її не мають.

+ +

Для того, щоб бути ітерабельним, об'єкт повинен реалізувати метод @@iterator, тобто, цей об'єкт (або один з об'єктів у його ланцюжку прототипів) повинен мати властивість з ключем {{jsxref("Symbol.iterator")}}.
+
+ Може бути можливо перебрати ітерабельний об'єкт більше одного разу, або лише один раз. Який варіант обирати, вирішує програміст. Ітерабельні об'єкти, які можна перебрати лише один раз (наприклад, об'єкти Generator) традиційно повертають this зі свого методу @@iterator, тоді як ті, які можна перебирати багаторазово, повинні повертати новий ітератор на кожний виклик @@iterator.

+ +
function* makeIterator() {
+    yield 1;
+    yield 2;
+}
+
+const it = makeIterator();
+
+for(const itItem of it) {
+    console.log(itItem);
+}
+
+console.log(it[Symbol.iterator]() === it) // true;
+
+// Це приклад показує, що генератор(ітератор) є ітерабельним об'єктом, метод якого @@iterator повертає сам об'єкт (it),
+// і з цієї причини цей об'єкт (it) можна перебирати лише один раз
+
+
+// Якщо ми змінимо метод @@iterator об'єкта "it" на функцію/генератор, що вертає новий ітератор/генератор, цей об'єкт (it)
+// можна буде перебирати багато разів
+
+it[Symbol.iterator] = function* () {
+  yield 2;
+  yield 1;
+};
+
+ +

Створені користувачем ітерабельні об'єкти

+ +

Ми можемо створювати власні ітерабельні об'єкти наступним чином:

+ +
var myIterable = {
+    *[Symbol.iterator]() {
+        yield 1;
+        yield 2;
+        yield 3;
+    }
+}
+
+for (let value of myIterable) {
+    console.log(value);
+}
+// 1
+// 2
+// 3
+
+або
+
+[...myIterable]; // [1, 2, 3]
+
+ +

Вбудовані ітерабельні об'єкти

+ +

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} та {{jsxref("Set")}} усі є вбудованими ітерабельними об'єктами, тому що всі їхні прототипи мають метод {{jsxref("Symbol.iterator")}}.

+ +

Синтаксис, що очікує на ітерабельний об'єкт

+ +

Деякі оператори та вирази очікують на ітерабельні об'єкти, наприклад, цикли {{jsxref("Statements/for...of","for-of")}}, {{jsxref("Operators/yield*","yield*")}}.

+ +
for (let value of ['а', 'б', 'в']) {
+    console.log(value);
+}
+// "а"
+// "б"
+// "в"
+
+[...'абв']; // ["а", "б", "в"]
+
+function* gen() {
+  yield* ['а', 'б', 'в'];
+}
+
+gen().next(); // { value: "а", done: false }
+
+[a, b, c] = new Set(['а', 'б', 'в']);
+a; // "а"
+
+
+ +

Просунуті генератори

+ +

Генератори обчислюють значення, які видають, на вимогу, це дозволяє їм ефективно відображати послідовності, затратні для обчислення, чи навіть нескінченні послідовності, як було продемонстровано вище.

+ +

Метод {{jsxref("Global_Objects/Generator/next","next()")}} також приймає значення, які можуть використовуватись для модифікації внутрішнього стану генератора. Значення, передане у метод next() буде отримане оператором yield. Зауважте, що значення, передане у перший метод next(), завжди ігнорується.

+ +

Ось генератор Фібоначчі, який використовує next(x), щоб перезапустити послідовність:

+ +
function* fibonacci() {
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true) {
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = current + fn1;
+    var reset = yield current;
+    if (reset) {
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+ +

Ви можете змусити генератор викинути виняток, викликавши його метод {{jsxref("Global_Objects/Generator/throw","throw()")}} та передавши значення винятку, яке він має викинути. Цей виняток буде викинутий з поточного призупиненого контексту генератора, так, якби поточний оператор зупинки yield був оператором throw значення.

+ +

Якщо виняток не перехоплений всередині генератора, він поширюватиметься до виклику throw(), і наступні виклики методу next() отримають властивість done, що дорівнює true.

+ +

Генератори мають метод {{jsxref("Global_Objects/Generator/return","return(value)")}}, який повертає надане значення та завершує сам генератор.

+ +

{{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/uk/web/javascript/guide/loops_and_iteration/index.html b/files/uk/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..1b76102c0d --- /dev/null +++ b/files/uk/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,355 @@ +--- +title: Цикли та ітерації +slug: Web/JavaScript/Guide/Loops_and_iteration +tags: + - JavaScript + - Інструкція + - Синтаксис + - Цикл +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +

Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава посібника JavaScript  представляє різні ітераційні оператори, доступні в JavaScript.

+ +

Ви можете уявити цикли комп'ютерною версією гри, де ви кажете комусь зробити X кроків в одному напрямку, а потім Y кроків в іншому; наприклад, ідею піти 5 кроків на схід можна задати циклом:

+ +
var step;
+for (step = 0; step < 5; step++) {
+  // Іти 5 разів від значення 0 до 4.
+  console.log('Іти на схід 1 крок');
+}
+
+ +

Є багато різних видів циклів, але вони всі роблять істотно одне і те ж саме: вони повторюють дію певну кількість разів (можливо, 0 разів!) . Механізми різних циклів пропонують різні способи задати початкову і кінцеву точку циклу. Є різні ситуації, які легко вирішуються тим чи іншим циклом.

+ +

Оператори циклів у JavaScript:

+ + + +

Оператор for

+ +

Цикл {{jsxref("statements/for","for")}} повторюється, доки певний вираз не стане false. Цикл for у JavaScript подібний до циклу  for у мовах Java і C. Має такий вигляд:

+ +
for ([початковийВираз(initialExpression)]; [умова(condition)]; [приріст(incrementExpression)])
+  інструкція(statement)
+
+ +

Коли цикл for виконується, відбувається наступне:

+ +
    +
  1. Виконується вираз initialExpression, якщо він заданий. Цей вираз зазвичай ініціалізує один або кілька лічильників, але синтаксис допускає вирази будь-якого рівня складності. Цей вираз також дозволяє оголошувати змінні.
  2. +
  3. Оцінюється вираз condition. Якщо вираз приймає значення  true,  ітерація циклу виконується, якщо false - цикл завершується.
  4. +
  5. Виконується statement. Щоб виконати кілька інструкцій, використовуйте ({ ... }), щоб згрупувати їх.
  6. +
  7. Потім виконується  вираз incrementExpression.
  8. +
  9. Далі все повертається до кроку 2.
  10. +
+ +

Приклад

+ +

Наступна функція містить вираз for, що рахує цифри вибраних варіантів в прокручуваному списку (елемента  {{HTMLElement("select")}} , що дозволяє мультивибір). Вираз for  оголошує змінну i і задає їй значення 0. Перевіряється чи i менша чим кількість виборів в елементі <select> , виконує наступний вираз ifта збільшує i на одиницю після кожного кроку цикла.

+ +
<form name="selectForm">
+  <p>
+    <label for="musicTypes">Виберіть деякі музичні жанри, а потім натисніть на кнопку нижче:</label>
+    <select id="musicTypes" name="musicTypes" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classical</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="Скільки ви вибрали?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function() {
+  alert('Кількість вибраних варіагьів: ' + howMany(document.selectForm.musicTypes));
+});
+</script>
+
+
+ +

Оператор do...while

+ +

Оператор {{jsxref("statements/do...while", "do...while")}} повторює дії поки певна умова не прийме значення false. Оператор do...while виглядатиме наступним чином:

+ +
do
+  statement
+while (condition);
+
+ +

statement завжди виконується принаймні один раз перед тим як умова буде перевірена (і потім знову поки умова не прийме false). Щоб виконати кілька виразів необхідно використати ({ ... })  щоб згрупувати ці вирази.  Якщо condition приймає значення true, тіло цикла виконується повторно. В кінці всіх виконань вираз перевіряється. Коли вираз приймає false, ітерації цикла do...while зупиняються.

+ +

Приклади

+ +

В наступному прикладі цикл do ітерується принаймні один раз і повторюється доки i менша чим 5.

+ +
var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

Оператор while

+ +

Вираз {{jsxref("statements/while","while")}} виконується доти доки спеціальна умова приймає значення true. Вираз while виглядає наступним чином:

+ +
while (condition)
+  statement
+
+ +

Якщо умова стає false, statement перестає виконуватись і відбувається вихід із цикла.

+ +

Вираз перевіряється перед тим як виконається тіло цикла. Якщо вираз повертає true, statement виконується і умова тестується заново. Якщо вираз повертає false, виконання зупиняється і відбувається вихід з циклу while.

+ +

Щоб виконати кілька виразів в циклі використовуйте ({ ... }), щоб згрупувати їх.

+ +

Приклад 1

+ +

Наступний цикл while виконує цикл доти доки n менше трьох:

+ +
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

З кожною ітерацією, цикл збільшує n, та додає це до значення x. Тому, x і n приймають наступні значення:

+ + + +

Після третьої ітерації умова n < 3 більше не true, тому цикл припиняється.

+ +

Приклад 2

+ +

Уникайте безкінечних циклів. Переконайтесь, що вираз в циклі прийме значення false; інакше вихід з цикла ніколи не відбудеться. Вираз в наступному циклі while виконуватиметься постійно тому, що умова ніколи не стане false:

+ +
while (true) {
+  console.log('Hello, world!');
+}
+ +

Оператор labeled

+ +

 {{jsxref("statements/label","label")}} забезпечує вираз з ідентифікатором, що дозволяє вам зсилатися до цього місця з будь-якого місця вашої програми. Наприклад, ви можете використати label, щоб позначити цикл, а потім скористатися операторами break або continue, щоб вказати, чи повинна програма переривати цей цикл або продовжувати його виконання.

+ +

Синтаксис оператора виглядає наступним чином:

+ +
label :
+   statement
+
+ +

Значення label може бути будь-яким ідентифікатором JavaScript, що не є зарезервованим словом. statement, який ви ідентифікуєте може бути будь-яким виразом.

+ +

Приклад

+ +

В цьому прикладі позначка markLoop ідентифікує цикл while.

+ +
markLoop:
+while (theMark == true) {
+   doSomething();
+}
+ +

Оператор break

+ +

Використовуйте оператор {{jsxref("statements/break","break")}} для виходу з циклу, switch, чи в поєднанні з оператором label.

+ + + +

Синтаксис оператора break виглядає наступним чином:

+ +
break [label];
+
+ +

Перша форма синтаксису завершує перший батьківський цикл, або оператор switch; Друга форма завершує певний оператор позначений за допомогоюю label.

+ +

Приклад 1

+ +

Наступний приклад проходиться по елементам масива доки не знайде індекс елемента значення якого співпадає із значенням theValue:

+ +
for (var i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Приклад 2: Переривання позначки

+ +
var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Зовнішні цикли: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Внутрішні цикли: ' + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

Оператор continue

+ +

Оператор {{jsxref("statements/continue","continue")}} може використовуватись для перезапуску while, do-while, for, чи виразу label.

+ + + +

Синтаксис оператора continue виглядає наступним чином:

+ +
continue [label];
+
+ +

Приклад 1

+ +

Наступний приклад показує цикл while з оператором continue, що виконується коли значення i дорівнює трьом. Тоді як, n приймає значення 1, 3, 7, 12.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+  console.log(n);
+}
+//1,3,7,12
+
+
+var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+     // continue;
+  }
+  n += i;
+  console.log(n);
+}
+// 1,3,6,10,15
+
+ +

Приклад 2

+ +

Вираз позначений checkiandj містить вираз позначений checkj. Якщо continue зустрічається програма зупинить ітерацію checkj і почнеться з наступної ітерації. Кожен раз як continue зустрічається, checkj переітеровується поки вираз не поверне false. Коли false повертається, решта виразу checkiandj виконується іcheckiandj переітеровується доки умова не поверне false. Колиfalse повертається програма продовжує  вираз слідуючогоcheckiandj.

+ +

Якщо continue має label checkiandj, програма буде продовжуватись зверху виразаcheckiandj.

+ +
var i = 0;
+var j = 10;
+checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }
+ +

Оператор for...in

+ +

Оператор {{jsxref("statements/for...in","for...in")}} ітерує певну змінну по усіх перечислювальних властивостях об'єкта. Для кожної окремої властивості JavaScript виконує певний вираз. Операторfor...in виглядає наступним чином:

+ +
for (variable in object) {
+  statements
+}
+
+ +

Приклад

+ +

Наступна функція приймає як аргумент об'єкт і ім'я об'єкта. Потім вона ітерує всі властивості і повертає рядок, де перераховуються всі імена властивостей та їх значення.

+ +
function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
+  }
+  result += '<hr>';
+  return result;
+}
+
+ +

Для об'єкту car з властивостями make і model, result результат буде:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Масиви

+ +

Також це може підходити для ітерування елементів {{jsxref("Array")}}, Оператор for...in буде повертати ім'я визначених користувачем властивостей і додаткових номерних індексів. Таким чином, краще використовувати традиційний цикл {{jsxref("statements/for","for")}} з номерними індексами коли ітеруєте масив, так як for...in ітерує властивості окрім елементів масиву, якщо ви змінюєте об'єкт масиву, наприклад, додаючи нові властивості чи методи.

+ +

Оператор for...of

+ +

Оператор {{jsxref("statements/for...of","for...of")}} створює цикл, що проходиться по ітерованому об'єкту (включно з {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, об'єкт {{jsxref("functions/arguments","arguments")}} і т.д), викликаючи в кожній ітерації функцію з виразами для значення кожної окремої властивості.

+ +
for (variable of object) {
+  statement
+}
+ +

Наступний приклад показує різницю між циклами for...of і {{jsxref("statements/for...in","for...in")}}. У той час як for...in проходиться по іменах властивостей, цикл for...of проходиться по значеннях цих властивостей:

+ +
var arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (var i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (var i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

+ +
+
+
diff --git a/files/uk/web/javascript/guide/numbers_and_dates/index.html b/files/uk/web/javascript/guide/numbers_and_dates/index.html new file mode 100644 index 0000000000..71b7acd1bc --- /dev/null +++ b/files/uk/web/javascript/guide/numbers_and_dates/index.html @@ -0,0 +1,383 @@ +--- +title: Числа та дати +slug: Web/JavaScript/Guide/Numbers_and_dates +tags: + - Date + - JavaScript + - Math + - Number + - Дати + - Обчислення + - Посібник + - Числа +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}
+ +

У даному розділі представлені концепції, об'єкти та функції, які використовуються, щоб працювати та виконувати розрахунки з числами та датами у JavaScript. Це враховує використання чисел, записаних у різних системах числення, в тому числі десятковій, двійковій та шістнадцятковій, а також використання глобального об'єкта {{jsxref("Math")}} для виконання найрізноманітніших математичних операцій над числами.

+ +

Числа

+ +

У JavaScript, числа реалізовані у 64-бітному бінарному форматі IEEE 754 з подвійною точністю (тобто, число між ±2−1022 та ±2+1023, або приблизно від ±10−308 до ±10+308, з числовою точністю у 53 біти). Цілі значення до ±253 − 1 можуть бути відображені точно.

+ +

Додатково числовий тип має три символьні значення: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} та {{jsxref("NaN")}} (not-a-number - не число).

+ +

Нещодавнім доповненням JavaScript є тип {{jsxref("BigInt")}}, який дає можливість оперувати з дуже великими цілими числами. Хоча існують застереження у використанні BigInt; наприклад, ви не можете змішувати та співставляти значення BigInt та {{jsxref("Number")}} в рамках однієї операції, і ви не можете використовувати об'єкт {{jsxref("Math")}} зі значеннями BigInt.

+ +

У статті Типи та структури даних в JavaScript числовий тип даних описаний в контексті інших примітивних типів JavaScript.

+ +

Ви можете використовувати чотири типа числових літералів: десяткові, двійкові, вісімкові та шістнадцятковий.

+ +

Десяткові числа

+ +
1234567890
+42
+
+// Будьте уважні при використанні нулів на початку числа
+
+0888 // 888 розбирається як десяткове число
+0777 // розбирається як вісімкове число у нестрогому режимі (десяткове число 511)
+ +

Зверніть увагу, що десятковий літерал може починатися з нуля (0) за яким розташована інша десяткова цифра, але, якщо кожна цифра після 0 менша за 8, то число розбирається як вісімкове.

+ +

Двійкові числа

+ +

Синтаксис двійковичх чисел використовує нуль попереду, за яким розташована латинська буква "B" (0b або 0B). Якщо цифри після 0b не є 0 або 1, викидається наступний виняток SyntaxError: "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Вісімкові числа

+ +

Синтаксис вісімкових чисел теж використовує нуль попереду. Якщо числа після 0 не входять у діапазон від 0 до 7, то число буде інтерпретоване як десяткове.

+ +
var n = 0755; // 493
+var m = 0644; // 420
+ +

Строгий режим у ECMAScript 5 забороняє вісімковий синтаксис. Вісімковий синтаксис не є частиною ECMAScript 5, але він підтримується всіма переглядачами додаванням нуля попереду вісімкового числа: 0644 === 420, а "\045" === "%". У ECMAScript 2015 вісімкові значення підтримуються, якщо вони мають префікс 0o, наприклад: 

+ +
var a = 0o10; // ES2015: 8
+ +

Шістнадцяткові числа

+ +

Синтаксис шістнадцяткових чисел використовує нуль попереду, за яким розташована латинська літера "X" (0x або 0X). Якщо числа після 0x не входять у діапазон (0123456789ABCDEF), то буде викинутий наступний виняток SyntaxError: "Identifier starts immediately after numeric literal".

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+ +

Експоненціальний запис

+ +
1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10
+ +

Об'єкт Number

+ +

Вбудований об'єкт {{jsxref("Число", "Number")}} має властивості для числових констант, такі як масимальне числове значення, не-число (not-a-number) та нескінченність. Ви не можете змінювати значення цих властивостей і використовуєте їх наступним чином:

+ +
var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+ +

Ви завжди посилаєтесь на властивість попередньо визначенного об'єкта Number, як це показано вище, а не на властивість об'єкта Number, створеного вами.

+ +

Наступна таблиця підсумовує властивості об'єкта Number.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Властивості Number
ВластивістьОпис
{{jsxref("Число.MAX_VALUE", "Number.MAX_VALUE")}}Найбільше число, доступне для відображення (±1.7976931348623157e+308)
{{jsxref("Число.MIN_VALUE", "Number.MIN_VALUE")}} +

Найменше число, доступне для відображення (±5e-324)

+
{{jsxref("Число.NaN", "Number.NaN")}}Спеціальне значення "не-число" (not-a-number)
{{jsxref("Число.NEGATIVE_INFINITY", "Number.NEGATIVE_INFINITY")}}Спеціальне значення від'ємна нескінченність; повертається при переповненні
{{jsxref("Число.POSITIVE_INFINITY", "Number.POSITIVE_INFINITY")}}Спеціальне значення додатна нескінченність; повертається при переповненні
{{jsxref("Число.EPSILON", "Number.EPSILON")}}Різниця між 1 та найменшим числом, більшим за 1, що може бути представлене об'єктом {{jsxref("Число", "Number")}} (2.220446049250313e-16)
{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}Мінімальне ціле безпечне число у JavaScript (−253 + 1 або −9007199254740991)
{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}Максимальне ціле безпечне число у JavaScript (+253 − 1 або +9007199254740991)
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Методи Number
МетодОпис
{{jsxref("Число.parseFloat()", "Number.parseFloat()")}}Розбирає рядковий аргумент та повертає число з плаваючою крапкою, яке вдалося розпізнати.
+ Аналог глобальної функції {{jsxref("parseFloat", "parseFloat()")}}.
{{jsxref("Число.parseInt()", "Number.parseInt()")}}Розбирає рядковий аргумент та поверає ціле число в заданій системі числення.
+ Аналог глобальної функції {{jsxref("parseInt", "parseInt()")}}.
{{jsxref("Число.isFinite()", "Number.isFinite()")}}Визначає, чи є передане значення скінченним числом.
{{jsxref("Число.isInteger()", "Number.isInteger()")}}Визначає, чи є передане значення цілим числом.
{{jsxref("Число.isNaN()", "Number.isNaN()")}}Визначає, чи є передане значення {{jsxref("Global_Objects/NaN", "NaN")}}. Більш надійніша версія оригінальної глобальної функції  {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}Визначає, чи є передане значення безпечним цілим числом.
+ +

Прототип Number надає методи для отримання інформації з об'єктів Number різноманітних форматів. Наступна таблиця наводить методи Number.prototype.

+ + + + + + + + + + + + + + + + + + + + + + + +
Методи Number.prototype
МетодиОпис
{{jsxref("Число.toExponential", "toExponential()")}}Повертає рядок, що експоненціальний запис числа.
{{jsxref("Число.toFixed", "toFixed()")}}Повертає рядок, що містить запис числа у форматі з нерухомою крапкою.
{{jsxref("Число.toPrecision", "toPrecision()")}}Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою крапкою.
+ +

Об'єкт Math

+ +

Вбудований об'єкт {{jsxref("Math")}} має властивості та методи для математичних констант та функцій. Наприклад, властивість PI об'єкту Math має значення пі (3.141...), яке використовується у застосунку так:

+ +
Math.PI
+ +

Аналогічно, стандартні математичні функції є методами об'єкта Math. Сюди входять тригонометричні, логарифмічні, експоненціальні та інші функції. Наприклад, якби вам знадобилась тригонометрична функція сінус, ви б написали

+ +
Math.sin(1.56)
+ +

Зверніть увагу, що всі тригонометричні методи об'єкта Math в якості аргументів приймають величини в радіанах.

+ +

В даній таблиці наведені методи об'єкта Math.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Методи Math
МетодиОпис
{{jsxref("Math.abs", "abs()")}}Абсолютне значення
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Стандартні тригонометричні функції; з аргументом в радіанах
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Обернені тригонометричні функції; повертають значення в радіанах.
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Гіперболічні функції; аргумент - гіперболічний кут.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Зворотні, гіперболічні функцій; повертають гіперболічний кут.
+

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

+
Експоненційні та логарифмічні фукнції.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Повертає найбільне/найменше ціле, яке менше/більше або дорівнює аргументу.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Повертає мінімальне або максимальне (відповідно) значення зі списку розділених комою чисел, переданих як аргумент.
{{jsxref("Math.random", "random()")}}Повертає випадкове число в інтервалі між 0 та 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Фукнції округлення та обрізання.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}} +

Квадратний корінь, кубічний корінь, корінь квадратний з суми квадратів аргументів.

+
{{jsxref("Math.sign", "sign()")}}Знак числа, що вказує, чи є число додатним, від'ємним, чи нулем.
{{jsxref("Math.clz32", "clz32()")}},
+ {{jsxref("Math.imul", "imul()")}}
Кількість перших нульових бітів у 32-бітному двійковому представлені.
+ Результат C-подібного 32-бітного множення двох аргументів.
+ +

На відміну від багатьох інших об'єктів, вам не потрібно створювати екземпляри об'єкта Math. Завжди слід використоввати вбудований глобальний об'єкт Math безпосередньо.

+ +

Об'єкт Date

+ +

JavaScript не має окремого типу даних для дат. Однак, ви можете скористатись об'єктом {{jsxref("Date")}} та його методами для роботи з датою та часом у вашому проекті. Об'єкт Date має величезну кількість методів для встановлення, отримання та маніпулювання датами, але не має жодних властивостей.

+ +

JavaScript оперує датами подібно до Java. Ці дві мови програмування мають багато подібних методів та зберігають дату як кількість мілісекунд, що минули з 00:00:00 1 січня 1970 року, в той час, як часова мітка Unix позначає кількість секунд, що минули з 00:00:00 1 січня 1970 року.

+ +

Інтервал значень, які може приймати об'єкт Date, знаходиться від -100,000,000 до 100,000,000 днів відносно 1 січня 1970 року за UTC.

+ +

Щоб створити об'єкт Date:

+ +
var dateObjectName = new Date([parameters]);
+ +

де dateObjectName - це ім'я створеного об'єкта Date; це може бути як новий об'єкт, так і властивість вже існуючого об'єкта.

+ +

Виклик Date без оператора new повертає теперішню дату та час у вигляді рядка.

+ +

Параметри (parameters) у наведеному записі можуть бути одним з наступних значень:

+ + + +

Методи об'єкта Date

+ +

Методи об'єкта Date для роботи з датами та часом підпадають під такі категорії:

+ + + +

За допомогою методів "get" та "set" можна встановлювати та отримувати значення секунд, хвилин, годин, днів місяця, днів тижня, місяць та рік окремо. Зверніть увагу на метод getDay, який повертає день тижня, але не існує відповідного методу setDay, оскільки день тижня визначається автоматично. Всі ці методи використовують цілі числа для представлення відповідних даних наступним чином:

+ + + +

Припустимо, ви визначаєте наступну дату:

+ +
var Xmas95 = new Date('December 25, 1995');
+ +

Тоді Xmas95.getMonth() повертає 11, а Xmas95.getFullYear() повертає 1995.

+ +

Методи getTime та setTime зручні для порівняння дат. Метод getTime повертає кількість мілесекунд від 00:00:00, 1 січня 1970 року.

+ +

Наприклад, наступний код показує, скільки днів залишилось у цьому році:

+ +
var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Встановлюємо день та місяць
+endYear.setFullYear(today.getFullYear()); // Встановлюємо цей рік
+var msPerDay = 24 * 60 * 60 * 1000; // Кількість мілісекунд в одному дні
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //Повертає кількість днів, які залишилися в цьому році
+ +

Цей приклад створює об'єкт Date на ім'я today, який містить в собі сьогоднішню дату. Далі він створює об'єкт Date на ім'я endYear, якому присвоюється поточний рік. Потім, використовуючи кількість мілісекунд в одному дні, вираховує кількість днів між today та endYear, використовуючи getTime та округливши результат до цілого значення кількості днів.

+ +

Метод parse корисний для присвоєння рядкових значень існуючим об'єктам Date. Наприклад, наступний код використовує parse та setTime для присвоєння дати об'єкту IPOdate:

+ +
var IPOdate = new Date();
+IPOdate.setTime(Date.parse('Aug 9, 1995'));
+ +

Приклад

+ +

У наступному прикладі, функція JSClock() повертає час у форматі цифрового годинника.

+ +
function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = '' + ((hour > 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = '12';
+  temp += ((minute < 10) ? ':0' : ':') + minute;
+  temp += ((second < 10) ? ':0' : ':') + second;
+  temp += (hour >= 12) ? ' P.M.' : ' A.M.';
+  return temp;
+}
+ +

Функція JSClock спочатку створює новий об'єкт Date, який називається time; оскільки жодних аргументів не надано, час створюється на основі поточної дати та часу. Далі викликами методів getHours, getMinutes та getSeconds присвоюються значення поточної години, хвилини та секунди змінним hour, minute та second.

+ +

Наступні чотири інструкції створюють рядкове значення на основі значення часу. Перша інструкція створює змінну temp, присвоюючи їй значення за допомогою умовного виразу: якщо hour більше за 12, то (hour - 12), інакше просто hour, у випадку ж коли hour дорівнює 0, він набуває значення 12.

+ +

Наступна інструкція додає значення minute до змінної temp. Якщо значення minute менше за 10, умовний вираз додає рядок з нулем попереду; інакше додається рядок з двокрапкою для розмежування. Далі аналогічним чином інструкція додає до temp секунди.

+ +

Зрештою, умовний вираз додає "P.M." до temp, якщо hour дорівнює або більший за 12; інакше, додається "A.M.".

+ +

{{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/uk/web/javascript/guide/regular_expressions/index.html b/files/uk/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..e41b342ac7 --- /dev/null +++ b/files/uk/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,635 @@ +--- +title: Регулярні Вирази +slug: Web/JavaScript/Guide/Regular_Expressions +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
+ +

Регулярні вирази це шаблони, що використовуються для пошуку збігу,співпадіння в тексті чи строках. В JavaScript регулярні вирази також є обʼєктами. Ці шаблони використовуются для пошуку збігу у тексті. Пропоную розібратись з  регулярними виразами JavaScript детальніше.

+ +

Створення регулярних виразів

+ +

Ви можете створювати регулярні вирази двома способами:

+ +

Використовуючи літерал регулярного виразу, який складається з шаблону між символами "/" слеш:

+ +
var re = /ab+c/;
+
+ +

Цей спосіб підійде для статичних, простих виразів, використовуйте його для покращення продуктивності.

+ +

Або через створення обʼєкта {{jsxref("RegExp")}}:

+ +
var re = new RegExp("ab+c");
+
+ +

В такому випадку створюєтся об'єкт з методами {{jsxref("RegExp.exec", "exec")}} та {{jsxref("RegExp.test", "test")}} класу {{jsxref("RegExp")}}, та методами з {{jsxref("String")}} классу, а саме {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}, та {{jsxref("String.split", "split")}}. 

+ +

Використовуйте цей спосіб у випадках, коли вам відомо, що шаблон регулярного виразу буде змінюватись. Наприклад для очікування дій користувача з подальшим виконанням якоїсь функції тощо, або для побудови URL маршутів.

+ +

Створення шаблону регулярного виразу

+ +

Шаблон регулярного виразу складається зі звичайних символів, наприклад /abc/, або комбінації звичайних та спеціальних символів – /ab*c/ або /Chapter (\d+)\.\d*/. Останій приклад містить дужки, які використовуються як запамʼятовуючий пристрiй. Збіг з цією частиною шаблону запамʼятовується для подальшого використання, більш докладно про це в розділі {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.

+ +

Використання простих шаблонів

+ +

Прості шаблони складаються з символів, для яких потрібно знайти прямий збіг. Наприклад, шаблон /abc/ збігається з комбінацією символів в рядку тільки у випадку, коли символи 'abc' опиняються поруч саме в такому порядку. Збіг буде успішним у рядках типу "Hi, do you know your abc's?" та "The latest airplane designs evolved from slabcraft." В обох випадках шаблон збігається з підрядком 'abc'. В рядку 'Grab crab' збігу не буде, так як він містить підрядок 'abc', що не збігається точно з послідовністю 'abc'.

+ +

Використання спеціальних символів

+ +

Коли пошук збігу вимагає чогось більшого ніж прямий збіг, наприклад пошук одного чи більше символу 'b', або пошуку пробілів, шаблон включає спеціальні символи. Так, шаблон /ab*c/ збігається з будь-якою символьною комбінацією, де за символом 'a' може бути багато повторів символу 'b' (* значить 0 чи більше випадків) за яким відразу йде символ 'c'. В рядку "cbbabbbbcdebc," шаблон збігається з підрядком 'abbbbc'.

+ +

Наступна таблиця містить повний перелік та опис спеціальних символів, які використовуються в регулярних виразах.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Спеціальні символи, що використовуються в регулярних виразах.
СимволЗначення
\ +

Відповідає одному з наступних правил:
+
+ Зворотній слеш означає що наступний символ є спеціальним та не сприймається буквально. Наприклад, 'b' без передуючого '\' збігається з літерою 'b' у нижньому регістрі. Але вираз '\b' не відповідає жодному збігу; він утворює спеціальний символ, що збігається з межею слова.
+
+ Так, шаблон /a*/ покладається на спецсимвол '*', щоб знайти збіг з 0 чи більше символів 'a'. На відміну від цього, щаблон /a\*/ усуває сприйняття '*', як спецсимвол, та дозволяє отримати збіг 'a*'.
+
+ Не забувайте екранувати символ '\' подвійним ' '\\' використовуючи його в нотації RegExp("pattern"), так як '\' є екрануючим символом в рядках.

+
^Шукати збіг окрім перед символом переносу рядка чи кінця строки.
+
+ Наприклад, /^A/ не має збігу з "an A", але має збіг в рядку "An E".
+
+ Символ '^' має також і інші значення, коли він вказуєтся на початку шаблону регулярного виразу. Ознайомтесь з розділом доповнений набір символів для отримання деталей та прикладів.
$ +

Вказує що на забігу має завершитись строка. 

+ +

Наприклад, /t$/ не збігається з 't' в "eater", але має збіг в "eat".

+
* +

Збіг повторюється 0 чи більше разів. Еквівалент {0,}.

+ +

Наприклад, /bo*/ збігається з 'boooo' в "A ghost booooed" та з 'b' in "A bird warbled", але не має збігу в "A goat grunted".

+
+ +

Відповідає попередньому символу, що повторюється щонайменше 1 чи більше разів. Еквівалент {1,}.

+ +

Наприклад, /a+/ збігається з 'a' в "candy" та з усіма 'a' в "caaaaaaandy", але не має збігів у "cndy".

+
?Пошук збігу 0 чи 1 раз. Еквівалент {0,1}.
+
+ Наприклад, /e?le?/ відповідає 'el' в "angel" та 'le' в "angle", а також 'l' в "oslo".
+
+ Якщо вказуєтся одразу після специмволів *, +, ?, або {}, робить їх більш суворими (збіг з найменш можливою кількістю символів), на відміну від типових результатів, на відміну від несуворих пошуків (збіг з максимально можливою кількістю символів). Наприклад, застосування /\d+/ (пошук повторення десятичної цифри багато разів) до "123abc" знайде "123". Але застосування /\d+?/ зробить його суворим і результом збігу буде перша цифра "1".
+  
. +

(дрібна крапка) вказує пошук будь-якого одного символу, окрім початку строки.

+ +

Наприклад, /.n/ відповідає 'an' та 'on' в рядку "nay, an apple is on the tree", але не знайде збігів у  'nay'.

+
(x) +

Пошук 'x' і запам'ятати збіг. Ці дужки також називають захоплюючи дужки.
+
+ '(foo)' та '(bar)' в шаблоні /(foo) (bar) \1 \2/ збігаються з першими двома словами в рядку "foo bar foo bar" та запамʼятовують їх.  А \1 та \2 в шаблоні відповідають двом останім словам. Зауважте, що \1, \2, \n використовуються в порівняльній частині регулярного виразу. В зміній частині регулярного виразу потрібно використовувати синтакс $1, $2, $n: 'bar foo'.replace( /(...) (...)/, '$2 $1' ).

+
(?:x)Відповідає 'x', але не запамʼятовує збіг. Такий випадок називається незахоплючими дужками, і дозволяє вам визначати під-вирази для роботи з операторами ругулярних виразів. Розглянемо приклад /(?:foo){1,2}/. Якщо б шаблон був /foo{1,2}/, символи {1,2} застосовувались би тільки до останього символу 'o' в 'foo'. В незахоплюючих дужках {1,2} застосовується до всього слова 'foo'.
x(?=y) +

Відповідає 'x' тільки якщо за 'x' йде 'y'. Це називається випередження.

+ +

Наприклад, /Jack(?=Sprat)/ збігатиметься з 'Jack' тількя якщо за ним йде 'Sprat'. /Jack(?=Sprat|Frost)/ збігається з 'Jack' тільки якщо за ним йде 'Sprat' або 'Frost'. Проте, а ні 'Sprat', а ні 'Frost' не є частиною результату збігу.

+
x(?!y) +

Відповідає 'x' тільки якщо за 'x' не йде 'y'. Це називається відʼємним випередженням.

+ +

Наприклад, /\d+(?!\.)/ матиме збіг з числом тільки якщо за ним відсутня десяткова точка. Регулярний вираз /\d+(?!\.)/.exec("3.141") матиме збіг з '141', але не з '3.141'.

+
x|y +

Відповідає 'x' або 'y'.

+ +

Наприклад, /green|red/ збігається з 'green' в "green apple" та з 'red' в "red apple."

+
{n}Відповідає точній кількості n повторень попереднього виразу. N повино бути додатним цілим числом.
+
+ Наприклад, /a{2}/ не матиме збігів для 'a' в "candy," але збігатиметься з усіма a в "caandy," та двом першим a в "caaandy."
{n,m} +

Де n та m – додатні цілі числа та n <= m. Відповідає що найменше n та до m включно повторень передуючого виразу. Якщо m немає, вважається що m = ∞.

+ +

Наприклад, /a{1,3}/ не збігається з рядком "cndy", відповідає 'a' в "candy," та першим двом a в "caandy," а також першим трьом a в "caaaaaaandy". Зауважте що під час порівняння "caaaaaaandy", відповідає лише "aaa", навіть якщо оригінальний рядок містить довший рядок з a.

+
[xyz]Набір символів. Відповідає збігу з будь-яким із символів шаблону, включаючи керуючі послідовності. Спеціальні символи такі як точка (.) та зірочка (*) не є спецсимволами в середині набору символів та не потребують екранування. Ви можете задавати послідовності використовуючи дефіс, як в наступному прикладі.
+
+ Шаблон [a-d], що представляє теж саме що й [abcd], збігається з 'b' в "brisket" та з 'c' в "city". Шаблони /[a-z.]+/ та /[\w.]+/ збігаються зі всім рядком "test.i.ng".
[^xyz] +

Відʼємний або компліментарний набір змін. Цей вираз відповідає збігу з будь-чим що не міститься в квадратних дужках. Ви можете зазначити діапазон використовуючи дефіс. Все що працює зі звичайним набором символів спрацює і в цьому випадку.

+ +

Наприклад, [^abc] теж саме що й [^a-c]. Вони відповідають збігу 'r' в "brisket" та 'h' в "chop."

+
[\b]Відповідає символу backspace (U+0008). Потрібно використовувати квадратні дужки, якщо ви бажаєте отримати збіг з літералом backspace. (Не треба плутати з \b.)
\b +

Відповідає межі слова. Межа слова відповідає позиції де літерному символу не передує або слідує за ним інший літерний символ. Зауважте, що межа слова не включається до збігу. Іншими словами його довжина дорівнює нулю. (Не треба плутати з [\b].)

+ +

Приклади:
+ /\bm/ відповідає 'm' в "moon" ;
+ /oo\b/ не збігається з 'oo' в "moon", тому що за 'oo' йде символ 'n', який є літерним символом;
+ /oon\b/ збігається з 'oon' в "moon", тому що 'oon' є кінцем рядка, тож за ним не йде літерний символ;
+ /\w\b\w/ ніколи не буде мати збігу, тому що за літерним символом ніколи не буде йти не-літерний символ разом з літерним символом.

+ +
+

Примітка: Рушій регулярних виразів JavaScript визначає особливий набір символів що є літерними символами. Будь-який символ не з цього переліка вважається розділовим знаком - межею слова. Цей набір символів є доволі обмеженим: він складається тільки з символів латинської абетки в верхньому та нижньому регістрах, цифр та символу підкресленя. Акцентовані літери, такі як "é" або "ü", несподівано, вважаються розділовими знаками.

+
+
\B +

Відповідає межі не-слова. Цей літерал відповідає позиції де попередній та наступний символи є символами одного типу: Тож обидва символи повині бути літерними, або не-літерними символами. Початок та кінець рядка вважаються не-літерними символами.

+ +

Наприклад, /\B../ відповідає 'oo' в "noonday", та /y\B./ збігається з 'ye' в "possibly yesterday."

+
\cX +

Де X є символом в діапазоні від A до Z. Відповідає керуючим символам в рядку.

+ +

Наприклад, /\cM/ відповідає control-M (U+000D) в рядку.

+
\d +

Відповідає цифровому символу. Еквівалент [0-9].

+ +

Наприклад, /\d/ або /[0-9]/ збігатиметься з '2' в "B2 is the suite number."

+
\D +

Відповідає не-цифровому символу. Еквівалент [^0-9].

+ +

Наприклад, /\D/ або /[^0-9]/ збігатиметься з 'B' в "B2 is the suite number."

+
\fВідповідає символу прогону сторінки (U+000C).
\nВідповідає символу переводу рядка (U+000A).
\rВідповідає символу повернення каретки (U+000D).
\s +

Відповідає одиничному пробільному символу, включаючи пробіл, табуляцію, прогін сторінки, перевод рядка. Еквівалент [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Наприклад, /\s\w*/ збігається з ' bar' в "foo bar."

+
\S +

Відповідає одиничному непробільному символу. Еквівалент [^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Наприклад, /\S\w*/ відповідає 'foo' в "foo bar."

+
\tВідповідає табуляції (U+0009).
\vВідповідає вертикальній табуляції (U+000B).
\w +

Відповідає будь-якому літерно-цифровому символу включаючи символ підкреслювання. Еквівалент [A-Za-z0-9_].

+ +

Наприклад, /\w/ відповідає 'a' в "apple," '5' в "$5.28," та '3' в "3D."

+
\W +

Відповідає будь-якому не-літерному символу. Еквівалент [^A-Za-z0-9_].

+ +

Наприклад, /\W/ або /[^A-Za-z0-9_]/ відповідає '%' в "50%."

+
\n +

Де n є додатним цілим числом, зворотнє посилання на останій збіг підрядка з n-х відповідних круглих дужок шаблона регулярного виразу (рахуючи від лівої дужки).

+ +

Наприклад, /apple(,)\sorange\1/ відповідає 'apple, orange,' в "apple, orange, cherry, peach."

+
\0Відповідає символу NULL (U+0000). Не використовуйте цей символ разом з іншими цифрами, тому що \0<digits> є вісімковою керуючою послідовністю.
\xhhВідповідає символу з кодом hh (два шістнадцяткові знаки)
\uhhhhВідповідає символу з кодом hhhh (чотири шістнадцяткові знаки).
\u{hhhh}(тільки разом з прапором u) Відповідає символу Юнікод з коом hhhh (шістнадцяткові знаки).
+ +

Екранований ввід користувача буде вважатись літерною послідовністю після застосування регулярного виразу для простої заміни:

+ +
function escapeRegExp(string){
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& - підстановка результату
+}
+ +

Використання дужок

+ +

Дужки навколо будь-якої частини регулярного виразу означають, що ця частина порівнюванного рядка буде збережена. Після цього, ця частина рядка може бути вкликана для повторного використання, більш докладно у {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.

+ +

Наприклад, шаблон /Chapter (\d+)\.\d*/ показує додатково екрановані та спеціальні символи частини шаблону, яку потрібно запамʼятати. Він відповідає точному збігу слова 'Chapter ' за яким йде один чи більше цифрових символів (\d означає будь-який цифровий символ, а + означає 1 чи більше разів), за якими йде десяткова точка (яка сама по собі є спеціальним символом; додавання слеша \ перед точкою дозволяє зробити її звичайним символом '.'), за якою йде будь-яке число, що повторюється від 0 та більше разів (\d означає числовий символ, * означає 0 та більше разів). На додачу, дужки використовуються для того, щоб запамʼятати першу послідовність числових символів.

+ +

Цей шаблон в рядку "Open Chapter 4.3, paragraph 6" знайде числовий символ '4' та запамʼятає його. Шаблон не знайде збігів в "Chapter 3 and 4", тому що рядок не містить точку після '3'.

+ +

Для пошуку відповідності підрядка в дужках без його запамʼятовування. додавайте на початку шаблона в дужках комбінацію ?:. Наприклад, (?:\d+) відповідає одному чи білше числовому символу але без їх запамʼятовування.

+ +

Робота з регулярними виразами

+ +

Регулярні вирази використовуються разом з методами RegExp: test та exec, а також з методами String: mathc, replace, search та split. Ці методи детально описані в  JavaScript reference.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Методи, які використовують регулярні вирази
МетодОпис
{{jsxref("RegExp.exec", "exec")}}Метод RegExp, який виконує пошук віповідностей у рядку. Він повертає список знайдених відповідностей.
{{jsxref("RegExp.test", "test")}}Метод RegExp, який перевіряє, чи рядок містить відповідність регулярному виразу. Повертає true або false.
{{jsxref("String.match", "match")}}Метод String який виконує пошук відповідностей у рядку. Повертає список знайдених відповідностей, або null за невдачі.
{{jsxref("String.search", "search")}}Метод String який перевіряє , чи рядок містить відповідність регулярному виразу. Повертає індекс відповідності або -1 в разі невдачі.
{{jsxref("String.replace", "replace")}}Метод String який виконує пошук відповідності у рядку і заміну знайдених підрядків на заданий рядок заміни.
{{jsxref("String.split", "split")}}Метод String який застосовує регулярний вираз чи рядок-розділювач для розбиття рядку на список підрядків..
+ +

Коли Вам потрібно дізнатися чи міститься шаблон у рядку, використовуйте методи test або search, для детальнішої інформації використовуйте методи exec чи match (виконуються повільніше). Якщо методи exec або match знаходять відповідність вони повертають список і оновлюють властивості пов'язаного об'єкта регулярного виразу, а також передвизначеного об'єкта регулярного виразу, RegExp. В протилежному випадку, метод exec повертає null (який приводиться до false).

+ +

В наступному прикладі, скрипт використовує метод exec для знаходження віповідності у рядку.

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+
+ +

Якщо у Вас немє потреби мати доступ до властивостей регулярного виразу, альтернативний шлях створення myArray - у такому скрипті:

+ +
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+
+ +

Ще один варіант цього скрипта, на випадок, якщо Вам потрібно сконструювати регулярний вираз з рядка:

+ +
var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+
+ +

Скрипти в цих прикладах знаходять відповідність, повертають список з результатами пошуку а також оновлюють властивості, показані в наступній таблиці.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Результати виконання регулярного виразу
Об'єктВластивість чи індексОписУ цьому прикладі
myArrayВідповідний рядок та всі запам'ятовані підрядки.["dbbd", "bb"]
indexІндекс відповідності на основі 0 у вхідному рядку.1
inputПочатковий рядок."cdbbdbsbz"
[0]Останні відповідні символи."dbbd"
myRelastIndexІндекс з якого починати наступне порівняння. (Ця властивість встановлюється лише якщо регулярний вираз використовує g опцію, описану в {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)5
sourceТекст шаблону. Оновлений під час створення регулярного виразу, а не викионання."d(b+)d"
+ +

Як показано у другій формі цього прикладу, ви можете використовувати регулярні вирази створені через ініціалізатор об'єкта без привласнення їх до змінної. Однак якщо ви робите це, то кожен випадок це регулярний вирах. По цій причині, якщо ви використовуєте цю фору без привласнення до змінної, то у ви не зможете використовувати властивості регулярних виразів. Для прикладу, представте, що у вас є наступний скрипт:

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + myRe.lastIndex);
+
+// "Значення lastIndex є 5"
+
+ +

Однак, якщо ви маєте цей скрипт:

+ +
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
+
+// "Значення lastIndex є 0"
+
+ +

Випадки /d(b+)d/g  у цих двох виразах є різними об'єктами регулярних виразів, отже мають різні значення для їх lastIndex властивості. Якщо вам треба мати доступ до властивостей регулярного виразу, який був створений через ініціалізатор об'єкту, то спочатку вам треба привласнити його до змінної.

+ +

Використання збігів підрядків у дужках

+ +

Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, /a(b)c/ matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the Array elements [1], ..., [n].

+ +

The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.

+ +

The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the $1 and $2 in the replacement to denote the first and second parenthesized substring matches.

+ +
var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+
+ +

This prints "Smith, John".

+ +

Advanced searching with flags

+ +

Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Regular expression flags
FlagDescription
gGlobal search.
iCase-insensitive search.
mMulti-line search.
yPerform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}
+ +

To include a flag with the regular expression, use this syntax:

+ +
var re = /pattern/flags;
+
+ +

or

+ +
var re = new RegExp("pattern", "flags");
+
+ +

Note that the flags are an integral part of a regular expression. They cannot be added or removed later.

+ +

For example, re = /\w+\s/g creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.

+ +
var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+
+ +

This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:

+ +
var re = /\w+\s/g;
+
+ +

with:

+ +
var re = new RegExp("\\w+\\s", "g");
+
+ +

and get the same result.

+ +

The m flag is used to specify that a multiline input string should be treated as multiple lines. If the m flag is used, ^ and $ match at the start or end of any line within the input string instead of the start or end of the entire string.

+ +

Examples

+ +

The following examples show some uses of regular expressions.

+ +

Changing the order in an input string

+ +

The following example illustrates the formation of regular expressions and the use of string.split() and string.replace(). It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.

+ +
// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// New array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—second memorized portion
+// followed by comma space followed by first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push("---------- After Split by Regular Expression");
+
+var i, len;
+for (i = 0, len = nameList.length; i < len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Display the new array.
+output.push("---------- Names Reversed");
+for (i = 0, len = bySurnameList.length; i < len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push("---------- Sorted");
+for (i = 0, len = bySurnameList.length; i < len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+
+ +

Using special characters to verify input

+ +

In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.

+ +

Within non-capturing parentheses (?: , the regular expression looks for three numeric characters \d{3} OR | a left parenthesis \( followed by three digits \d{3}, followed by a close parenthesis \), (end non-capturing parenthesis )), followed by one dash, forward slash, or decimal point and when found, remember the character ([-\/\.]), followed by three digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}.

+ +

The Change event activated when the user presses Enter sets the value of RegExp.input.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <script type="text/javascript">
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phoneInput.value + " isn't a phone number with area code!");
+        else
+          window.alert("Thanks, your phone number is " + OK[0]);
+      }
+    </script>
+  </head>
+  <body>
+    <p>Enter your phone number (with area code) and then click "Check".
+        <br>The expected format is like ###-###-####.</p>
+    <form action="#">
+      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
+    </form>
+  </body>
+</html>
+
+ +
{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
diff --git a/files/uk/web/javascript/guide/using_promises/index.html b/files/uk/web/javascript/guide/using_promises/index.html new file mode 100644 index 0000000000..d3b986e51a --- /dev/null +++ b/files/uk/web/javascript/guide/using_promises/index.html @@ -0,0 +1,363 @@ +--- +title: Використання промісів +slug: Web/JavaScript/Guide/Using_promises +tags: + - JavaScript + - Promise + - Посібник + - Проміс + - асинхронний +translation_of: Web/JavaScript/Guide/Using_promises +--- +
{{jsSidebar("JavaScript Guide")}}
+ +
{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}
+ +

{{jsxref("Promise")}} (з англ. - "обіцянка", далі - "проміс") - це об'єкт, що відображає кінцеве завершення або невдачу асинхронної операції. Оскільки більшість людей є споживачами раніше створенних промісів, цей посібник спочатку пояснить споживання повернених промісів, а далі пояснить, як їх створювати.

+ +

Проміс, по суті, є поверненим об'єктом, до якого ви прикріплюєте функції зворотного виклику, замість того, щоб передавати їх у функцію.

+ +

Уявіть собі функцію createAudioFileAsync(), яка асинхронно генерує звуковий файл, маючи конфігураційний запис та дві функції зворотного виклику, одна викликається, якщо аудіофайл був успішно створений, а інша викликається, якщо виникає помилка.

+ +

Ось код, який використовує createAudioFileAsync():

+ +
function successCallback(result) {
+  console.log("Аудіофайл створений за адресою: " + result);
+}
+
+function failureCallback(error) {
+  console.log("Під час створення аудіофайлу виникла помилка: " + error);
+}
+
+createAudioFileAsync(audioSettings, successCallback, failureCallback);
+
+ +

Замість цього, сучасні функції повертають проміс, до якого ви можете приєднати функції зворотного виклику:

+ +

Якщо переписати функцію createAudioFileAsync(), щоб вона повертала проміс, її використання буде ось таким простим:

+ +
createAudioFileAsync(audioSettings).then(successCallback, failureCallback);
+ +

Це скорочений запис для:

+ +
const promise = createAudioFileAsync(audioSettings);
+promise.then(successCallback, failureCallback);
+ +

Ми називаємо це асинхронним викликом функції.  Ця конвенція має декілька переваг. Ми дослідимо кожну з них.

+ +

Гарантії

+ +

На відміну від старомодних колбеків, проміс постачається з певними гарантіями:

+ + + +

Однією з величезних переваг промісів є ланцюгування.

+ +

Ланцюгування

+ +

Типовою потребою є виконання двох або більше асинхронних операцій одна за одною, коли кожна наступна операція починається, коли попередня успішно завершується, з результатом з попереднього кроку. Ми досягаємо цього, створюючи ланцюжок промісів.

+ +

Ось вам магія: функція then() повертає новий проміс, що відрізняється від оригіналу:

+ +
const promise = doSomething();
+const promise2 = promise.then(successCallback, failureCallback);
+
+ +

або

+ +
const promise2 = doSomething().then(successCallback, failureCallback);
+
+ +

Цей другий проміс (promise2) представляє собою завершення не тільки doSomething(), але й successCallback або failureCallback, які ви передали, вони, в свою чергу, можуть бути іншими асинхронними функціями, що повертають проміс. В цьому випадку будь-які функції зворотного виклику, додані до promise2, стають в чергу за промісом, що повертається successCallback чи failureCallback.

+ +

По суті, кожен проміс відображає завершення іншого асинхроннго кроку в ланцюжку.

+ +

В старі часи виконання декількох асинхронних операцій підряд призвело б до класичної піраміди смерті з колбеків:

+ +
doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Ось фінальний результат: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+
+ +

З сучасними функціями замість цього ми приєднуємо наші функції зворотного виклику до промісів, що повертаються, формуючи ланцюжок промісів.

+ +
doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Ось фінальний результат: ' + finalResult);
+})
+.catch(failureCallback);
+
+ +

Аргументи до then є необов'язковими, а catch(failureCallback) - це скорочений запис для  then(null, failureCallback). Ви можете побачити це, виражене за допомогою стрілкових функцій:

+ +
doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => {
+  console.log(`Ось фінальний результат: ${finalResult}`);
+})
+.catch(failureCallback);
+
+ +

Важливо: Завжди повертайте результати, інакше функції зворотного виклику не перехоплять результат попереднього проміса (у стрілкових функціях () => x є скороченим записом для () => { return x; }).

+ +

Ланцюгування після catch

+ +

Ланцюгувати після невдачі можливо, наприклад, catch є корисним у разі виконання нових операцій навіть після того, як операція у ланцюжку завершилась неуспішно. Дивіться наступний приклад:

+ +
new Promise((resolve, reject) => {
+    console.log('Початковий');
+
+    resolve();
+})
+.then(() => {
+    throw new Error('Щось пішло не так');
+
+    console.log('Зробити це');
+})
+.catch(() => {
+    console.log('Зробити те');
+})
+.then(() => {
+    console.log('Зробити це, що б не відбувалось раніше');
+});
+
+
+ +

Це виведе наступний текст:

+ +
Початковий
+Зробити те
+Зробити це, що б не відбувалось раніше
+
+ +

Зауважте: Текст "Зробити це" не був виведений, тому що помилка "Щось пішло не так" спричинила відхилення.

+ +

Спливання помилок

+ +

Ви, можливо, пригадуєте, що тричі бачили failureCallback раніше, у піраміді смерті, у порівнянні з лише одним викликом наприкінці ланцюжку промісів.

+ +
doSomething()
+.then(result => doSomethingElse(value))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => console.log(`Ось фінальний результат: ${finalResult}`))
+.catch(failureCallback);
+
+ +

Якщо виникає виняток, переглядач передивляється ланцюжок у пошуках обробників catch або onRejected. Це дуже схоже на модель того, як працює синхронний код:

+ +
try {
+  let result = syncDoSomething();
+  let newResult = syncDoSomethingElse(result);
+  let finalResult = syncDoThirdThing(newResult);
+  console.log(`Ось фінальний результат: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+
+ +

Ця симетрія з асинхронним кодом сягає кульмінації в синтаксичному цукрі async/await в ECMAScript 2017:

+ +
async function foo() {
+  try {
+    let result = await doSomething();
+    let newResult = await doSomethingElse(result);
+    let finalResult = await doThirdThing(newResult);
+    console.log(`Ось фінальний результат: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+
+ +

Він будується на промісах, наприклад, doSomething() - це та сама функція, що й раніше. Ви можете прочитати більше про синтаксис тут.

+ +

Проміси виправляють фундаментальну хибу з пірамідою смерті, перехоплюючи всі помилки, навіть викинуті винятки та помилки программування. Це критично важливо для функціональної композиції асинхронних операцій.

+ +

Події відхилення промісів

+ +

Коли проміс відхиляється, одна з двох подій надсилається у глобальну область видимості (загалом, це або window, або, при використанні у веб-виконавці, це Worker або інший інтерфейс на базі виконавців). Ці дві події наступні:

+ +
+
rejectionhandled
+
Надсилається, коли проміс відхиляється, після того, як відхилення було оброблене функцією виконавця reject.
+
unhandledrejection
+
Надсилається, коли проміс відхиляється, але немає доступного обробника відхилення.
+
+ +

У обох випадках подія (типу PromiseRejectionEvent) має в якості полів властивість promise, яка вказує відхилений проміс, та властивість reason, яка передає надану причину відхилення проміса.

+ +

Це робить можливою резервну обробку помилок для промісів, а також допомагає відлагоджувати проблеми в управлінні промісами. Ці обробники є глобальними за контекстом, тому усі помилки потраплятимуть в однакові обробники подій, незалежно від джерела.

+ +

Один випадок особливої корисності: при написанні коду для {{Glossary("Node.js")}}, зазвичай, модулі, які ви включаєте у свій проект, можуть мати необроблені відхилені проміси. Вони виводяться у консоль середовищем виконання Node. Ви можете перехопити їх для аналізу та обробити у своєму коді — або просто уникнути захаращення ними виводу даних — додавши обробник події unhandledrejection, ось так:

+ +
window.addEventListener("unhandledrejection", event => {
+  /* Ви можете почати тут, додавши код, щоб дослідити
+     вказаний проміс через event.promise та причину у
+     event.reason */
+
+  event.preventDefault();
+}, false);
+ +

Викликавши метод події preventDefault(), ви кажете середовищу виконання JavaScript не виконувати дію за замовчуванням, коли відхилений проміс лишається необробленим. Ця дія зазвичай містить виведення помилки у консоль, а це якраз випадок для Node.

+ +

В ідеалі, звісно, ви маєте досліджувати відхилені проміси, щоб бути певними, що жоден з них не є насправді помилкою коду, перед тим, як відкидати ці події.

+ +

Створення промісу на основі старого API зі зворотним викликом

+ +

{{jsxref("Promise","Проміс")}} може бути створенний з нуля за допогою свого конструктора. Це необхідно лише для обгортки старих API.

+ +

В ідеальному світі всі асинхронні функції повертали б проміси. На жаль, деякі API досі очікують старомодну передачу функцій зворотного виклику для успіху та/або невдачі. Найбільш очевидним прикладом є функція {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :

+ +
setTimeout(() => saySomething("Пройшло 10 секунд"), 10000);
+
+ +

Змішування старомодних зворотних викликів та промісів є проблематичним. Якщо saySomething завершиться невдачею або міститиме помилку программування, ніщо її не перехопить.

+ +

На щастя, ми можемо обгорнути saySomething у проміс. Найкращою практикою вважається обгортати проблематичні функції на якомога нижчому рівні і вже ніколи не звертатись до них прямо.

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait(10000).then(() => saySomething("10 секунд")).catch(failureCallback);
+
+ +

По суті, конструктор промісу приймає функцію виконання, яка дозволяє вирішити або відхилити проміс вручну. Оскільки setTimeout, насправді, ніколи не завершується невдало, ми пропускаємо функцію відхилення в цьому випадку.

+ +

Композиція

+ +

Методи {{jsxref("Promise.resolve()")}} та {{jsxref("Promise.відхилено", "Promise.reject()")}} є скороченими записами для створення вручну вже вирішених або відхилених промісів відповідно. Інколи це може бути корисно.

+ +

Методи {{jsxref("Promise.all()")}} та {{jsxref("Promise.race()")}} є двома інструментами композиції для паралельного виконання асинхронних операції.

+ +

Ми можемо почати операції паралельно та чекати, доки вони усі не завершаться ось так:

+ +
Promise.all([func1(), func2(), func3()])
+.then(([result1, result2, result3]) => { /* використати result1, result2 та result3 */ });
+ +

Послідовна композиція можлива з використанням певного розумного JavaScript:

+ +
[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
+.then(result3 => { /* використати result3 */ });
+ +

По суті, ми зменшуємо масив асинхронних функцій до ланцюжка промісів, еквівалентного: 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));
+ +

Функція composeAsync() прийме будь-яку кількість функцій в якості аргументів і поверне нову функцію, яка приймає початкове значення, що має пройти крізь конвеєр композиції:

+ +
const transformData = composeAsync(func1, func2, func3);
+const result3 = transformData(data);
+
+ +

В ECMAScript 2017 послідовну композицію можна виконати простіше, за допомогою async/await:

+ +
let result;
+for (const f of [func1, func2, func3]) {
+  result = await f(result);
+}
+/* використати останній результат (тобто, result3) */
+ +

Хронометраж

+ +

Щоб уникнути сюрпризів, функції, передані до then(), ніколи не викликатимуться синхронно, навіть для вже вирішеного проміса:

+ +
Promise.resolve().then(() => console.log(2));
+console.log(1); // 1, 2
+
+ +

Замість негайного виконання, передані функції ставляться у чергу мікрозадач. Це означає, що вони виконуються пізніше, коли черга стає порожньою в кінці поточного виконання циклу подій JavaScript, тобто, досить скоро:

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

Вкладеність

+ +

Прості ланцюжки промісів найкраще тримати рівними, без вкладень, оскільки вкладення можуть бути результатом недбалої композиції. Дивіться типові помилки.

+ +

Вкладеність є контролюючою структурою для обмеження області видимості блоків catch. Зокрема, вкладений catch перехоплює лише помилки своєї області видимості та нижче, але не ті помилки, що знаходяться вище у ланцюжку поза вкладеною областю видимості. При правильному використанні це надає більшу точність у виявленні помилок:

+ +
doSomethingCritical()
+.then(result => doSomethingOptional(result)
+  .then(optionalResult => doSomethingExtraNice(optionalResult))
+  .catch(e => {})) // Ігнорувати, якщо не працює щось другорядне; продовжити.
+.then(() => moreCriticalStuff())
+.catch(e => console.error("Критична помилка: " + e.message));
+ +

Зауважте, що необов'язкові кроки тут вкладені, не для відступів, але для передбачливого розташування зовнішніх дужок ( та ) навколо.

+ +

Внутрішній нейтралізуючий блок catch перехоплює помилки тільки від doSomethingOptional() та doSomethingExtraNice(), після чого виконання коду продовжується у moreCriticalStuff(). Що важливо, якщо функція doSomethingCritical() завершується невдало, її помилка перехоплюється тільки кінцевим (зовнішнім) блоком catch.

+ +

Типові помилки

+ +

Ось деякі типові помилки, яких варто остерігатися при складанні ланцюжків промісів. Декілька з цих помилок проявляються у наступному прикладі:

+ +
// Поганий приклад! Помічено 3 помилки!
+
+doSomething().then(function(result) {
+  doSomethingElse(result) // Забули повернути проміс з внутрішнього ланцюжка + непотрібне вкладення
+  .then(newResult => doThirdThing(newResult));
+}).then(() => doFourthThing());
+// Забули завершити ланцюжок блоком catch!
+</pre>
+ +

Перша помилка - не завершувати ланцюжки як слід. Це відбувається, коли ми створюємо новий проміс, але забуваємо його повернути. Як наслідок, ланцюг переривається, чи, скоріше, ми отримуємо два конкуруючі ланцюжки. Це означає, що doFourthThing() не чекатиме на завершення doSomethingElse() чи doThirdThing() і запуститься паралельно з ними, скоріше за все, ненавмисно. В окремих ланцюжках також окремо обробляються помилки, що призводить до неперехоплених помилок.

+ +

Друга помилка - непотрібна вкладеність, що уможливлює першу помилку. Вкладеність також обмежує область видимості внутрішніх обробників помилок, а це — якщо зроблене ненавмисно — може призвести до неперехоплених помилок. Варіантом цього є антишаблон конструювання промісів, який поєднує вкладення з надлишковим використанням конструктора промісів для загортання коду, який вже використовує проміси.

+ +

Третя помилка - забувати завершувати ланцюжки блоком catch. Незавершені ланцюжки промісів призводять до неперехоплених відхилень промісів у більшості переглядачів.

+ +

Гарний практичний підхід - завжди або повертати, або завершувати ланцюжки промісів, і, як тільки ви отримуєте новий проміс, повертати його негайно, щоб вирівняти ланцюжок:

+ +
doSomething()
+.then(function(result) {
+  return doSomethingElse(result);
+})
+.then(newResult => doThirdThing(newResult))
+.then(() => doFourthThing())
+.catch(error => console.error(error));
+ +

Зауважте, що () => x є скороченням для () => { return x; }.

+ +

Тепер ми маємо єдиний, детермінований ланцюжок з правильною обробкою помилок.

+ +

Використання async/await вирішує більшість, якщо не всі ці проблеми — натомість, найпоширенішою помилкою при використанні цього синтаксису є забуте ключове слово await.

+ +

Коли зустрічаються задачі та проміси

+ +

Якщо ви стикаєтеся з ситуаціями, коли у вас є проміси та задачі (такі, як події або зворотні виклики), які запускаються у непередбачуваному порядку, можливо, вам буде корисно скористатись мікрозадачами, щоб перевірити статус або збалансувати проміси, коли створення промісів залежить від певних умов.

+ +

Якщо ви вважаєте, що мікрозадачі могли б вирішити цю проблему, дивіться посібник з мікрозадач, щоб дізнатись, як використовувати метод queueMicrotask(), щоб поставити функцію у чергу як мікрозадачу.

+ +

Дивіться також

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

diff --git a/files/uk/web/javascript/guide/working_with_objects/index.html b/files/uk/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..214bae97aa --- /dev/null +++ b/files/uk/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,490 @@ +--- +title: Робота з об'єктами +slug: Web/JavaScript/Guide/Working_with_Objects +tags: + - JavaScript + - Object + - Документ + - Об'єкт + - Посібник +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}
+ +

Мова JavaScript базується на простій, заснованій на об'єктах парадигмі. Об'єкт - це колекція властивостей, а властивість - це асоціація між іменем (або ключем) та значенням. Значення властивості може бути функцією, в цьому випадку властивість відома як метод. На додачу до об'єктів, попередньо визначених у веб-переглядачі, ви можете визначати власні об'єкти. Цей розділ описує, як використовувати об'єкти, властивості, функції та методи, і як створювати власні об'єкти.

+ +

Огляд об'єктів

+ +

Об'єкти у JavaScript, як і у багатьох інших мовах програмування, можна порівняти з об'єктами у реальному житті. Концепію об'єктів у JavaScript можна зрозуміти на прикладі матеріальних об'єктів з реального життя.

+ +

У JavaScript об'єкт - це окрема сутність з властивостями та типом. Порівняємо його, для прикладу, з чашкою. Чашка - це об'єкт з властивостями. Чашка має колір, дизайн, вагу, матеріал, з якого вона зроблена, і т.д. Так само, об'єкти JavaScript можуть мати властивості, які визначають їхні характеристики.

+ +

Об'єкти та властивості

+ +

Об'єкт JavaScript має асоційовані з ним властивості. Властивість об'єкта можна описати як змінну, прикріплену до об'єкта. Властивості об'єкта - це, загалом, те саме, що й звичайні змінні JavaScript, але прикріплені до об'єктів. Властивості об'єкта визначають характеристики об'єкта. Ви звертаєтесь до властивостей об'єкта через просту крапкову нотацію:

+ +
objectName.propertyName
+
+ +

Як усі змінні JavaScript, і ім'я об'єкта (яке може бути звичайною змінною), і ім'я властивості чутливі до регістру. Ви можете визначити властивість, присвоївши їй значення. Наприклад, створимо об'єкт на ім'я myCar (моя машина) та дамо йому властивості make (виробник), model (модель) та year (рік) ось так:

+ +
var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+
+ +

Наведений приклад також міг бути написаний за допомогою об'єктного ініціалізатора, який є списком з нуля чи більше розділених комами пар імен властивостей об'єкта та асоційованих з ними значень, записаний у фігурних дужках ({}):

+ +
var myCar = {
+    make: 'Ford',
+    model: 'Mustang',
+    year: 1969
+};
+
+ +

Неприсвоєні властивості об'єкта мають значення {{jsxref("undefined")}} (а не {{jsxref("null")}}).

+ +
myCar.color; // undefined
+ +

До властивостей об'єктів JavaScript також можна звертатись чи присвоювати їх за допомогою дужкової нотації (щоб дізнатись більше, дивіться доступ до властивостей). Об'єкти іноді називають асоціативними масивами, оскільки кожна властивість асоціюється з рядковим значенням, яке можна використати для доступу до неї. Отже, для прикладу, ви можете звертатись до властивостей об'єкта myCar наступним чином:

+ +
myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+
+ +

Ім'я властивості об'єкта може бути будь-яким дозволеним рядком JavaScript чи будь-чим, що можна привести до рядка, в тому числі порожній рядок. Однак, будь-яке ім'я властивості, яке не є дозволеним ідентифікатором JavaScript (наприклад, ім'я властивості, що містить пробіл чи дефіс, або починається з цифри) доступне тільки через позначення у квадратних дужках. Ця нотація також дуже корисна, коли імена властивостей мають бути динамічно визначені (коли ім'я властивості не визначене до початку виконання). Приклади наступні:

+ +
// створюємо одночасно чотири змінні, розділені комами,
+// та присвоюємо їм значення
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'крапковий синтаксис';
+myObj['date created']   = 'рядок з пробілом';
+myObj[str]              = 'рядкове значення';
+myObj[rand]             = 'випадкове число';
+myObj[obj]              = 'об\'єкт';
+myObj['']               = 'навіть порожній рядок';
+
+console.log(myObj);
+
+ +

Будь ласка, зауважте, що усі ключі, позначені у квадратних дужках, перетворюються на рядки, якщо тільки вони не є символами, оскільки імена властивостей (ключів) об'єктів JavaScript можуть бути тільки рядками або символами (в якийсь момент також будуть додані приватні імена, з розвитком пропозиції щодо полів класу, але вони не використовуватимуться у формі []). Наприклад, у наведеному вище коді, коли ключ obj додається до об'єкта myObj, JavaScript викличе метод {{jsxref("Object.toString", "obj.toString()")}} та використає отриманий рядок як новий ключ.

+ +

Ви також можете звернутись до властивості, використавши рядкове значення, що зберігається у змінній:

+ +
var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+
+ +

Ви можете використати дужкову нотацію з циклом for...in для перебору усіх перелічуваних властивостей об'єкта. Для ілюстрації того, як це працює, наступна функція відображає властивості об'єкта, коли ви передаєте об'єкт та ім'я об'єкта в якості аргументів у функцію:

+ +
function showProps(obj, objName) {
+  var result = ``;
+  for (var i in obj) {
+    // obj.hasOwnProperty() відфільтровує властивості від ланцюга прототипів об'єкта
+    if (obj.hasOwnProperty(i)) {
+      result += `${objName}.${i} = ${obj[i]}\n`;
+    }
+  }
+  return result;
+}
+
+ +

Отже, виклик функції showProps(myCar, "myCar") поверне наступне:

+ +
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+ +

Перелік властивостей об'єкта

+ +

Починаючи з ECMAScript 5, існують три вбудовані методи перелічити / продивитись властивості об'єкта:

+ + + +

До ECMAScript 5 не існувало вбудованого способу перелічити усі властивості об'єкта. Однак, цього можна досягти наступною функцією:

+ +
function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null;
+           objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+        result = result.concat(
+            Object.getOwnPropertyNames(objectToInspect)
+        );
+    }
+
+	return result;
+}
+
+ +

Це може бути корисним для виявлення "схованих" властивостей (властивостей у ланцюгу прототипів, які недоступні через об'єкт, тому що інша властивість з таким самим іменем зустрічається у ланцюгу раніше). Список лише доступних властивостей можна легко зробити, прибравши дублікати у масиві.

+ +

Створення нових об'єктів

+ +

JavaScript має чимало попередньо визначених об'єктів. На додачу, ви можете створювати свої власні об'єкти. Ви можете створити об'єкт за допомогою об'єктного ініціалізатора. Або ви можете спочатку створити функцію-конструктор, після чого створювати об'єкти, використовуючи оператор new.

+ +

Використання об'єктних ініціалізаторів

+ +

На додачу до створення об'єктів за допомогою функції-конструктора, ви можете створювати об'єкти, використовуючи об'єктний ініціалізатор. Використання об'єктних ініціалізаторів іноді називають створенням об'єктів літеральною нотацією. "Об'єктний ініціалізатор" відповідає термінології, що використовується у мові C++.

+ +

Синтаксис об'єкта, що використовує об'єктний ініціалізатор, наступний:

+ +
var obj = { property_1:   value_1,   // property_# може бути ідентифікатором...
+            2:            value_2,   // або числом...
+            // ...,
+            'property n': value_n }; // або рядком
+
+ +

де obj - ім'я нового об'єкта, кожне ім'я property_i є ідентифікатором (або числом, або рядковим літералом), а кожне значення value_i є виразом, чиє значення присвоюється властивості property_i. Змінна obj та присвоєння є необов'язковими; якщо вам непотрібно звертатись до цього об'єкта будь-де, вам непотрібно присвоювати його змінній. (Зауважте, що вам може знадобитись загорнути об'єктний літерал у круглі дужки, якщо об'єкт з'являється там, де очікується інструкція, щоб літерал не був прийнятий за блочну інструкцію.)

+ +

Об'єктні ініціалізатори є виразами, а кожний об'єктний ініціалізатор створює новий об'єкт, коли виконується інструкція, де він знаходиться. Ідентичні об'єктні ініціалізатори створюють окремі об'єкти, які не вважатимуться рівними. Об'єкти створюються так, ніби відбувся виклик new Object(); тобто, об'єкти, створені об'єктними літералами, є екземплярами Object.

+ +

Наступна інструкція створює об'єкт та присвоює його змінній x тільки за умови, що вираз cond є правдивим:

+ +
if (cond) var x = {greeting: 'привітик'};
+
+ +

Наступний приклад створює об'єкт myHonda з трьома властивостями. Зауважте, що властивість engine також є об'єктом зі своїми властивостями.

+ +
var myHonda = {color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+
+ +

Ви також можете використовувати об'єктні ініціалізатори для створення масивів. Дивіться масивні літерали.

+ +

Використання функції-конструктора

+ +

Також ви можете створити об'єкт, виконавши ці два кроки:

+ +
    +
  1. Визначити тип об'єкта, написавши функцію-конструктор. Загальноприйнято, і на це є причини, писати їх з великої літери.
  2. +
  3. Створити екземпляр об'єкта за допомогою new.
  4. +
+ +

Щоб визначити тип об'єкта, створіть функцю для типу об'єкта, яка визначає його ім'я, властивості та методи. Наприклад, припустимо, ви хочете створити тип об'єкта для автомобілів. Ви хочете, щоб цей тип об'єкта називався Car, і ви хочете, щоб він мав властивості для виробника, моделі та року. Щоб це зробити, ви б написали наступну функцію:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

Зверніть увагу на використання this для присвоєння значень властивостям об'єкта на основі значень, переданих у функцію.

+ +

Тепер ви можете створити об'єкт на ім'я mycar наступним чином:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+
+ +

Ця інструкція створює об'єкт mycar та присвоює вказані значення його властивостям. Тоді значенням mycar.make є рядок "Eagle", mycar.year дорівнює цілому число 1993 і т.д.

+ +

Ви можете створити довільне число об'єктів Car викликами new. Наприклад,

+ +
var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+
+ +

Об'єкт може мати властивість, яка сама є іншим об'єктом. Наприклад, припустимо, ви визначаєте об'єкт person (людина) наступним чином:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+
+ +

і далі створюєте два екземпляра об'єкта person наступним чином:

+ +
var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+
+ +

Тоді ви можете переписати визначення Car, щоб включити властивість owner (власник), яка приймає об'єкт person ось так:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

Тепер, щоб створити нові об'єкти, ви зробите наступне:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+
+ +

Зверніть увагу, що, замість передачі літералу рядка чи цілого числа під час створення нових об'єктів, наведені вище інструкції передають об'єкти rand та ken в якості значень власників. Тепер, якщо вам потрібно дізнатись ім'я власника car2, ви можете звернутись до наступної властивості:

+ +
car2.owner.name
+
+ +

Зауважте, що ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція

+ +
car1.color = 'чорний';
+
+ +

додає властивість color (колір) до car1, та присвоює їй значення "чорний." Однак, це не впливає на всі інші об'єкти. Щоб додати нову властивість до усіх об'єктів того самого типу, ви маєте додати властивість до визначення типу об'єкта Car.

+ +

Використання методу Object.create

+ +

Об'єкти також можна створювати методом {{jsxref("Object.create()")}}. Цей метод може бути дуже корисним, тому що дозволяє обирати прототип для об'єкта, який ви хочете створити, без необхідності визначати функцію-конструктор.

+ +
// Властивості об'єкта Animal (тварина) та інкапсуляція методу
+var Animal = {
+  type: 'Безхребетні', // Значення властивості за замовчуванням
+  displayType: function() {  // Метод, що виводитиме тип тварини
+    console.log(this.type);
+  }
+};
+
+// Створити нову тварину з назвою animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // виведе: Безхребетні
+
+// Створити нову тварину з назвою fish (риба)
+var fish = Object.create(Animal);
+fish.type = 'Риби';
+fish.displayType(); // виведе: Риби
+ +

Наслідування

+ +

Усі об'єкти у JavaScript успадковуються від принаймні одного іншого об'єкта. Об'єкт, від якого наслідується інший об'єкт, відомий як прототип, а успадковані властивості можна знайти у об'єкті конструктора prototype. Щоб дізнатись більше, дивіться Наслідування та ланцюжок прототипів.

+ +

Індексування властивостей об'єкта

+ +

Ви можете звернутись до властивості об'єкта або за іменем властивості, або за його оригінальним індексом. Якщо ви з самого початку визначили властивість за іменем, ви завжди маєте звертатись до неї за іменем, а якщо ви визначили властивість за індексом, ви завжди маєте звертатись до неї за індексом.

+ +

Це обмеження працює, коли ви створюєте об'єкт та його властивості функцією-конструктором (як ми робили раніше з типом об'єкта Car) та коли ви явно визначаєте окремі властивості (наприклад, myCar.color = "червоний"). Якщо ви початково визначили властивість об'єкта з індексом, як от myCar[5] = "25 mpg", ви далі звертаєтесь до властивості лише у вигляді myCar[5].

+ +

Винятком з цього правила є подібний до масиву об'єкт з HTML, такий як подібний до масиву об'єкт forms. Ви завжди можете посилатись на об'єкти у цих подібних до масивів об'єктах або за їхнім порядковим номером (в залежності від їхнього розташування у документі), або за іменем (якщо воно визначене). Наприклад, якщо другий тег <FORM> у документі має атрибут NAME, що дорівнює "myForm", ви можете звернутись до форми document.forms[1], або document.forms["myForm"], або document.forms.myForm.

+ +

Визначення властивостей для типу об'єкта

+ +

Ви можете додати властивість до попередньо визначеного типу об'єкта за допомогою властивості prototype. Це визначає властивість, спільну для усіх об'єктів вказаного типу, а не лише для одного екземпляру об'єкта. Наступний код додає властивість color (колір) до усіх об'єктів типу Car (автомобіль), після чого присвоює значення властивості color об'єкта car1.

+ +
Car.prototype.color = null;
+car1.color = 'чорний';
+
+ +

Щоб дізнатись більше, дивіться властивість prototype об'єкта Function у довіднику JavaScript.

+ +

Визначення методів

+ +

Метод - це функція, асоційована з об'єктом, або, простіше кажучи, метод - це властивість об'єкта, яка є функцією. Методи визначаються так само, як звичайні функції, за винятком того, що вони мають бути асоційовані з властивістю об'єкта. Дивіться більше подробиць у визначенні методів. Приклад наступний:

+ +
objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...зробити щось
+  }
+
+  // ТАКЕ ТЕЖ ПРАЦЮЄ
+
+  myOtherMethod(params) {
+    // ...зробити щось інше
+  }
+};
+
+ +

де objectName - це існуючий об'єкт, methodname - це ім'я, яке ви присвоюєте методу, а functionName - це ім'я функції.

+ +

Далі ви можете викликати метод у контексті об'єкта наступним чином:

+ +
object.methodname(params);
+
+ +

Ви можете визначати методи для типу об'єкта, додавши визначення методів у конструктор об'єкта. Ви можете визначити функцію, що буде форматувати та відображати властивості попередньо визначених об'єктів Car; наприклад,

+ +
function displayCar() {
+  var result = `Чудовий автомобіль ${this.year} ${this.make} ${this.model}`;
+  pretty_print(result);
+}
+
+ +

де pretty_print - функція, що відображатиме горизонтальне правило та рядок. Зверніть увагу на використання this для посилання на об'єкт, до якого належить метод.

+ +

Ви можете зробити цю функцію методом Car, додавши інструкцію

+ +
this.displayCar = displayCar;
+
+ +

до визначення об'єкта. Отже, повне визначення Car виглядатиме так

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+
+ +

Тоді ви можете викликати метод displayCar для кожного об'єкта наступним чином:

+ +
car1.displayCar();
+car2.displayCar();
+
+ +

Використання this у посиланнях на об'єкт

+ +

JavaScript має спеціальне ключове слово this, яке ви можете використати всередині метода, щоб вказати на поточний об'єкт. Наприклад, припустимо, ви маєте 2 об'єкта, Manager та Intern. Кожен об'єкт має свої власні name (ім'я), age (вік) та job (роботу). У функції sayHi(), зверніть увагу, є this.name. Додані до 2-х об'єктів, вони можуть бути викликані та повернуть 'Привіт, мене звуть', а далі додають значення name з цього конкретного об'єкта. Як показано нижче. 

+ +
const Manager = {
+  name: "Джон",
+  age: 27,
+  job: "Програміст"
+}
+const Intern= {
+  name: "Бен",
+  age: 21,
+  job: "Програміст-інтерн"
+}
+
+function sayHi() {
+    console.log('Привіт, мене звуть', this.name)
+}
+
+// додаємо функцію sayHi до обох об'єктів
+Manager.sayHi = sayHi;
+Intern.sayHi = sayHi;
+
+Manager.sayHi() // Привіт, мене звуть Джон
+Intern.sayHi() // Привіт, мене звуть Бен
+
+ +

this посилається на об'єкт, в якому знаходиться. Ви можете створити нову функцію під назвою howOldAmI(), яка виводить повідомлення про те, скільки цій людині років. 

+ +
function howOldAmI (){
+  console.log('Мені ' + this.age + ' років.')
+}
+Manager.howOldAmI = howOldAmI;
+Manager.howOldAmI() // Мені 27 років.
+
+ +

Визначення гетерів та сетерів

+ +

Гетер - це метод, який отримує значення конкретної властивості. Сетер - це метод, який присвоює значення конкретній властивості. Ви можете визначати гетери та сетери на будь-якому існуючому базовому об'єкті чи об'єкті, створеному користувачем, якщо він підтримує додавання нових властивостей. 

+ +

Гетери та сетери можуть бути або

+ + + +

При визначенні гетерів та сетерів за допомогою об'єктних ініціалізаторів вам потрібно лише додати перед методом-гетером get, а перед методом-сетером set. Звісно, гетер не повинен очікувати на параметри, а сетер очікує рівно на один параметер (нове значення, яке треба присвоїти). Наприклад:

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8 <-- В цьому місці запускається метод get b().
+o.c = 50;         //   <-- В цьому місці запускається метод set c(x).
+console.log(o.a); // 25
+
+ +

Властивості об'єкта o наступні:

+ + + +

Будь ласка, зауважте, що імена функцій гетерів та сетерів, визначені у об'єктному літералі за допомогою "[gs]et властивість()" (на відміну від __define[GS]etter__ ), не є іменами самих гетерів, хоча синтаксис [gs]et propertyName(){ } і міг ввести вас в оману.

+ +

Гетери та сетери також можуть бути додані до об'єкта в будь-який момент після створення за допомогою методу Object.defineProperties. Першим параметром цього методу є об'єкт, на якому ви хочете визначити гетер чи сетер. Другим параметром є об'єкт, чиї імена властивостей є іменами гетерів чи сетерів і чиї значення властивостей є об'єктами для визначення функцій гетерів чи сетерів. Ось приклад, який визначає такі самі гетер та сетер, які використовувались у попередньому прикладі:

+ +
var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Запускає сетер, який присвоює 10 / 2 (5) властивості 'a'
+console.log(o.b); // Запускає гетер, який видає a + 1, тобто 6
+
+ +

Яку з двох форм обирати, залежить від вашого стилю програмування та наявної задачі. Якщо ви вже користуєтесь об'єктним ініціалізатором при визначенні прототипу, ви, скоріше за все, обиратимете першу форму. Ця форма є більш компактною та природньою. Однак, якщо ви додаєте гетери та сетери пізніше — оскільки не писали прототип чи окремий об'єкт — тоді друга форма є єдино можливою. Друга форма, можливо, найкраще відображає динамічну природу JavaScript — але вона може зробити код важким для читання та розуміння.

+ +

Видалення властивостей

+ +

Ви можете видалити неуспадковані властивості оператором delete. Наступний код демонструє, як прибрати властивість.

+ +
// Створює новий об'єкт, myobj, з двома властивостями, a та b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Прибирає властивість a, залишивши у myobj лише властивість b.
+delete myobj.a;
+console.log ('a' in myobj); // виведе: "false"
+
+ +

Ви також можете використати delete, щоб видалити глобальну змінну, якщо ключове слово var не використовувалось для оголошення змінної:

+ +
g = 17;
+delete g;
+
+ +

Порівняння об'єктів

+ +

У JavaScript об'єкти належать до типу посилань. Два окремі об'єкти ніколи не дорівнюють один одному, навіть якщо мають однакові властивості. Лише порівняння об'єкта з самим собою поверне true.

+ +
// Дві змінні, два окремих об'єкти з однаковими властивостями
+var fruit = {name: 'яблуко'};
+var fruitbear = {name: 'яблуко'};
+
+fruit == fruitbear; // вертає false
+fruit === fruitbear; // вертає false
+ +
// Дві змінні, один об'єкт
+var fruit = {name: 'яблуко'};
+var fruitbear = fruit;  // Присвоїти fruitbear посилання на об'єкт fruit
+
+// Тут fruit та fruitbear вказують на один об'єкт
+fruit == fruitbear; // вертає true
+fruit === fruitbear; // вертає true
+
+fruit.name = 'виноград';
+console.log(fruitbear); // output: { name: "виноград" }, замість { name: "яблуко" }
+
+ +

Щоб дізнатись більше щодо операторів порівняння, дивіться Оператори порівняння.

+ +

Див. також

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}

diff --git "a/files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" "b/files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" new file mode 100644 index 0000000000..fdfbc0659b --- /dev/null +++ "b/files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" @@ -0,0 +1,925 @@ +--- +title: Вирази та оператори +slug: Web/JavaScript/Guide/Вирази_та_оператори +tags: + - JavaScript + - Оператори + - Посібник + - вирази +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
+ +

Цей розділ описує вирази та оператори JavaScript, такі як присвоювання, порівняння, арифметичні оператори, бітові, логічні, рядкові, тернарний та інші.

+ +

Повний та детальний список операторів та виразів також доступний за посиланням.

+ +

Оператори

+ +

JavaScript має наступні типи операторів. Ця секція описує оператори, а також містить інформацію щодо їхніх пріоритетів.

+ + + +

JavaScript має як бінарні, так і унарні оператори, а також один особливий тернарний оператор - умовний оператор. Бінарному оператору потрібні два операнди - один перед оператором, інший після оператора:

+ +
операнд1 оператор операнд2
+
+ +

Наприклад, 3+4 чи x*y.

+ +

Унарний оператор потребує лише одного операнду до чи після оператора:

+ +
оператор операнд
+
+ +

чи

+ +
операнд оператор
+
+ +

Наприклад, x++ чи ++x.

+ +

Оператори присвоєння

+ +

Оператор присвоєння присвоює своєму лівому операнду значення на підставі значення правого операнда. Простим оператором присвоєння є оператор дорівнює (=), який присвоює значення свого правого операнда лівому операнду. Таким чином, x = y присвоює значення змінної y змінній x.

+ +

Також існують складені оператори присвоєння, які є скороченнями для операцій, перелічених у наступній таблиці:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Складені оператори присвоювання
НазваОператор скороченого записуЗначення
Присвоєнняx = yx = y
Присвоєння з додаваннямx += yx = x + y
Присвоєння з відніманнямx -= yx = x - y
Присвоєння з множеннямx *= yx = x * y
Присвоєння з діленнямx /= yx = x / y
Присвоєння остачіx %= yx = x % y
Присвоєння з піднесенням до степеня{{experimental_inline}}x **= yx = x ** y
Присвоєння з лівим зсувомx <<= yx = x << y
Присвоєння з правим зсувомx >>= yx = x >> y
Присвоєння з беззнаковим правим зсувомx >>>= yx = x >>> y
Присвоєння з побітовим Іx &= yx = x & y
Присвоєння з виключним побітовим АБОx ^= yx = x ^ y
Присвоєння з побітовим АБОx |= yx = x | y
+ +

Деструктуризація

+ +

Для більш складних присвоювань використовується синтаксис деструктуризації. Це вираз JavaScript, який надає можливість витягувати дані з масивів та об'єктів, використовуючи синтаксис, що віддзеркалює конструкцію масивів та об'єктних літералів. 

+ +
var foo = ['один', 'два', 'три'];
+
+// без деструктуризації
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// із деструктуризацією
+var [one, two, three] = foo;
+
+ +

Оператори порівняння

+ +

Оператор порівняння порівнює свої операнди та повертає логічне значення, базуючись на істинності порівняння. Операнди можуть бути числовими, рядковими, логічними значеннями або об'єктами. Рядки порівнюються згідно стандартного лексикографічного порядку, з використанням значень Unicode. У більшості випадків, якщо два операнди не належать до одного типу, JavaScript намагається привести їх до належного для порівняння типу. Зазвичай це призводить до числового порівняння операндів. Єдиними винятками у конвертації типів під час порівняння є оператори === та !==, які виконують перевірку на строгу рівність та строгу нерівність. Ці оператори не намагаються перед перевіркою на рівність привести операнди до спільного типу. Наступна таблиця наводить оператори порівняння у контексті цього фрагменту коду:

+ +
var var1 = 3;
+var var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Оператори порівняння
ОператорОписПриклади, які повертають true
Рівність (==)Повертає true, якщо оператори рівні.3 == var1 +

"3" == var1

+ 3 == '3'
Нерівність (!=)Повертає true, якщо оператори нерівні.var1 != 4
+ var2 != "3"
Строга рівність (===)Повертає true якщо оператори рівні та належать до одного типу. Дивіться також {{jsxref("Object.is")}} та однаковість у JS.3 === var1
Строга нерівність (!==)Повертає true, якщо оператори належать до одного типу, але нерівні, або належать до різних типів.var1 !== "3"
+ 3 !== '3'
Більше ніж (>)Повертає true, якщо лівий операнд більший за правий.var2 > var1
+ "12" > 2
Більше чи дорівнює (>=)Повертає true, якщо значення лівого операнда більше або дорівнює значенню правого операнда.var2 >= var1
+ var1 >= 3
Менше ніж (<)Повертає true, якщо лівий операнд менший за правий.var1 < var2
+ "2" < 12
Менше чи дорівнює (<=)Повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.var1 <= var2
+ var2 <= 5
+ +
+

Заувага: (=>) не оператор, а позначення для стрілкових функцій.

+
+ +

Арифметичні оператори

+ +

Арифметичний оператор приймає числові значення (літерали чи змінні) в якості операндів та повертає єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/). Ці оператори працюють так само, як і в більшості інших мов програмування при використанні з числами з рухомою комою (зокрема, зауважте, що ділення на нуль повертає {{jsxref("Infinity")}}). Наприклад:

+ +
1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // це дорівнює true
+
+ +

На додачу до стандартних арифметичних операцій (+, -, * /), JavaScript надає арифметичні операції, перечислені у наведеній нижче таблиці:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Арифметичні оператори
ОператорОписПриклад
Остача (%)Бінарний оператор. Повертає цілочисельну остачу від ділення двох операндів.12 % 5 повертає 2.
Інкремент (++)Унарний оператор. Додає до операнда одиницю. Якщо використовується як префіксний оператор (++x), повертає значення операнда після додавання одиниці; якщо використовується як постфіксний оператор (x++), повертає значення операнда перед додаванням одиниці.Якщо x дорівнює 3, тоді ++x присвоює x значення 4 та повертає 4, в той час, як x++ повертає 3 і лише тоді присвоює x значення 4.
Декремент (--)Унарний оператор. Віднімає одиницю від свого операнда. Повернене значення аналогічне поверненому значенню оператора інкременту.Якщо x дорівнює 3, тоді --x присвоює x значення 2 та повертає 2, в той час, як x-- повертає 3 і тільки тоді присвоює x значення 2.
Унарний мінус (-)Унарний оператор. Повертає операнд з протилежним знаком.Якщо x дорівнює 3, то -x повертає -3.
Унарний плюс (+)Унарний оператор. Намагається перетворити операнд на число, якщо він не є числом.+"3" повертає 3.
+ +true повертає 1.
Піднесення до степеня (**) {{experimental_inline}}Підносить основу степеня до показника степеня, тобто, основапоказник2 ** 3 повертає 8.
+ 10 ** -1 повертає 0.1.
+ +

Бітові оператори

+ +

Бітовий оператор опрацьовує свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові або вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.

+ +

Наступна таблиця наводить перелік бітових операторів JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Бітові оператори
ОператорЗастосуванняОпис
Побітове І (AND)a & bПовертає одиницю на кожній позиції, де відповідні біти обох операндів дорівнюють одиницям.
Побітове АБО (OR)a | bПовертає нуль на кожній позиції, де відповідні біти обох операндів дорівнюють нулям.
Виключне побітове АБО (XOR)a ^ bПовертає нуль на кожній позиції, де відповідні біти однакові.
+ [Повертає один на кожній позиції, де відповідні біти мають різні значення.]
Побітове НЕ (NOT)~ aВиконує інверсію бітів операнду.
Лівий зсувa << bЗсуває a у двійковому представленні на b бітів ліворуч, заповнюючи позиції справа нулями.
Правий зсув з розширенням знакуa >> bЗсуває a у двійковому представленні на b бітів праворуч, відкидаючи зсунуті біти.
Правий зсув із заповненням нулямиa >>> bЗсуває a у двійковому представленні на b бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.
+ +

Побітові логічні оператори

+ +

Концептуально побітові логічні оператори працюють наступним чином:

+ + + +

Наприклад, бінарним представленням числа дев'ять є 1001, а бінарним представленням п'ятнадцяти є 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, відображають від'ємні числа (формат доповняльного коду).

+ +

Оператори бітового зсуву

+ +

Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.

+ +

Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа та повертають результат того самого типу, до якого належить лівий операнд.

+ +

Оператори зсуву наведені у наступній таблиці.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Оператори бітового зсуву
ОператорОписПриклад
Лівий зсув
+ (<<)
Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.9<<2 вертає 36, тому що число 1001, зсунуте на 2 біти ліворуч, стає 100100, тобто, 36.
Правий зсув з розширенням знаку (>>) +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта.

+
9>>2 вертає 2, тому що число 1001, зсунуте на 2 біти праворуч, стає 10, тобто 2. Аналогічно, -9>>2 вертає -3,  тому що знак зберігається.
Правий зсув із заповненням нулями(>>>) +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями.

+
19>>>2 вертає 4, тому що число 10011, зсунуте на 2 бітів праворуч, стає 100, тобто 4. Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат.
+ +

Логічні оператори

+ +

Логічні оператори застосовуються до булевих (логічних) значень; в цьому випадку вони повертають значення типу Boolean. Однак, оператори && та || насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу. Логічні оператори описані у наведеній нижче таблиці.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Логічні оператори
ОператорЗастосуванняОпис
Логічне І (&&)expr1 && expr2Вертає вираз expr1, якщо він може бути перетворений на false; інакше, повертає expr2. Таким чином, при використанні з булевими значеннями && вертає true, якщо обидва операнди дорівнюють true; інакше, вертає false.
Логічне АБО (||)expr1 || expr2Вертає вираз expr1, якщо він може бути перетворений на true; інакше, вертає expr2. Таким чином, при використанні з булевими значеннями || вертає true, якщо будь-який з операндів дорівнює true; якщо обидва дорівнюють false, вертає false.
Логічне НЕ (!)!exprВертає false, якщо його єдиний операнд може бути перетворений на true; інакше, вертає true.
+ +

Прикладами виразів, які можуть бути перетворені на false, є ті, які повертають null, 0, NaN, порожній рядок ("") або undefined.

+ +

Наступний код демонструє приклади оператора && (логічне І).

+ +
var a1 =  true && true;     // t && t вертає true
+var a2 =  true && false;    // t && f вертає false
+var a3 = false && true;     // f && t вертає false
+var a4 = false && (3 == 4); // f && f вертає false
+var a5 = 'Кіт' && 'Пес';    // t && t вертає Пес
+var a6 = false && 'Кіт';    // f && t вертає false
+var a7 = 'Кіт' && false;    // t && f вертає false
+
+ +

Наступний код демонструє приклади оператора || (логічне АБО).

+ +
var o1 =  true || true;     // t || t вертає true
+var o2 = false || true;     // f || t вертає true
+var o3 =  true || false;    // t || f вертає true
+var o4 = false || (3 == 4); // f || f вертає false
+var o5 = 'Кіт' || 'Пес';    // t || t вертає Кіт
+var o6 = false || 'Кіт';    // f || t вертає Кіт
+var o7 = 'Кіт' || false;    // t || f вертає Кіт
+
+ +

Наступний код демонструє приклади оператора ! (логічне НЕ).

+ +
var n1 = !true;  // !t вертає false
+var n2 = !false; // !f вертає true
+var n3 = !'Кіт'; // !t вертає false
+
+ +

Коротке замикання обчислення

+ +

Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:

+ + + +

Правила логіки гарантують, що ці обчислення завжди будуть правильними. Зауважте, що частина виразу будь-що не обчислюється, тому будь-які побічні ефекти від цих обчислень не відбудуться.

+ +

Рядкові оператори

+ +

На додачу до операторів порівняння, які можуть застосовуватись до рядкових значень, оператор конкатенації (+) об'єднує значення двох рядків, повертаючи інший рядок, який є об'єднанням рядків двох операндів.

+ +

Наприклад,

+ +
console.log('мій ' + 'рядок'); // консоль виводить рядок "мій рядок".
+ +

Скорочений оператор присвоєння += також може застосовуватись для конкатенації рядків.

+ +

Наприклад,

+ +
var mystring = 'алфа';
+mystring += 'віт'; // повертає "алфавіт" та присвоює це значення mystring.
+ +

Умовний (тернарний) оператор

+ +

Умовний оператор - єдиний оператор у JavaScript, який приймає три операнди. У оператора може бути одне чи два значення, в залежності від умови. Використовує наступний синтакс:

+ +
умова ? значення1 : значення2
+
+ +

Якщо умова дорівнює true, оператор повертає значення1.  В іншому випадку - значення2. Умовний оператор можна використовувати будь-де, де використовується звичайний оператор. Наприклад:

+ +
var status = (age >= 18) ? 'дорослий' : 'неповнолітній';
+
+ +

Ця інструкція присвоює значення "дорослий" змінній status, якщо значення age (вік) більше чи дорівнює 18. Інакше, вона присвоює змінній status значення "неповнолітній".

+ +

Оператор кома

+ +

Оператор кома (,) просто обчислює обидва свої операнди та повертає значення останнього операнда. Цей оператор найчастіше використовується всередині циклу for, що дозволяє оновлювати більше однієї змінної на кожному проході циклу.

+ +

Наприклад, якщо a є двовимірним масивом з 10 елементами по кожній стороні, наступний код використовує оператор кома, щоб оновити дві змінні одночасно. Код виводить значення діагональних елементів масиву:

+ +
for (var i = 0, j = 9; i <= j; i++, j--)
+  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
+
+ +

Унарні оператори

+ +

Унарна операція - це операція лише з одним операндом.

+ +

delete

+ +

Оператор delete видаляє об'єкт, властивість об'єкта або елемент за вказаним індексом у масиві. Синтаксис наступний:

+ +
delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // працює лише всередині конструкції with
+
+ +

де objectName є іменем об'єкта, property - існуюча властивість, а index - ціле число, що вказує розташування елемента у масиві.

+ +

Четверта форма працює лише всередині блоку with для видалення властивості об'єкта.

+ +

Ви можете використовувати оператор delete для видалення змінних, оголошених неявно, але не тих, що були оголошені оператором var.

+ +

Якщо оператор delete відпрацьовує успішно, значенням властивості чи елемента стає undefined. Оператор delete повертає true, якщо операція можлива; він повертає false, якщо операція неможлива.

+ +
x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // створює властивість h
+delete x;       // вертає true (можна видалити властивість, оголошену неявно)
+delete y;       // вертає false (не можна видалити властивість, оголошену через var)
+delete Math.PI; // вертає false (не можна видаляти попередньо визначені властивості)
+delete myobj.h; // вертає true (можна видалити властивість, визначену користувачем)
+delete myobj;   // вертає true (можна видалити, якщо властивість оголошена неявно)
+
+ +
Видалення елементів масиву
+ +

Коли ви видаляєте елемент масиву, це не впливає на довжину масиву. Для прикладу, якщо ви видалите a[3], a[4] досі є a[4], а a[3] дорівнює undefined.

+ +

Коли оператор delete видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі trees[3] видаляється оператором delete. Однак, адреса trees[3] досі доступна та повертає undefined.

+ +
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+delete trees[3];
+if (3 in trees) {
+  // це не виконається
+}
+
+ +

Якщо вам потрібно, щоб елемент існував, але мав значення undefined, скористайтесь ключовим словом undefined замість оператора delete. У наступному прикладі trees[3] присвоюється значення undefined, але елемент масиву досі існує:

+ +
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+trees[3] = undefined;
+if (3 in trees) {
+  // це виконається
+}
+
+ +

typeof

+ +

Оператор typeof використовується наступним чином:

+ +
typeof операнд
+typeof (операнд)
+
+ +

Оператор typeof повертає рядок, що вказує тип необчисленого операнда. Операнд є рядком, змінною, ключовим словом чи об'єктом, для якого треба повернути тип. Круглі дужки є необов'язковими.

+ +

Припустимо, ви визначили наступні змінні:

+ +
var myFun = new Function('5 + 2');
+var shape = 'коло';
+var size = 1;
+var foo = ['Яблуко', 'Манго', 'Апельсин'];
+var today = new Date();
+
+ +

Оператор typeof вертає наступні результати для цих змінних:

+ +
typeof myFun;       // вертає "function"
+typeof shape;       // вертає "string"
+typeof size;        // вертає "number"
+typeof foo;         // вертає "object"
+typeof today;       // вертає "object"
+typeof doesntExist; // вертає "undefined"
+
+ +

Для ключових слів true та null оператор typeof вертає наступні результати:

+ +
typeof true; // вертає "boolean"
+typeof null; // вертає "object"
+
+ +

Для числа та рядка оператор typeof вертає наступні результати:

+ +
typeof 62;            // вертає "number"
+typeof 'Hello world'; // вертає "string"
+
+ +

Для значень властивостей оператор typeof вертає тип значення, яке містить ця властивість:

+ +
typeof document.lastModified; // вертає "string"
+typeof window.length;         // вертає "number"
+typeof Math.LN2;              // вертає "number"
+
+ +

Для методів та функцій оператор typeof вертає наступні результати:

+ +
typeof blur;        // вертає "function"
+typeof eval;        // вертає "function"
+typeof parseInt;    // вертає "function"
+typeof shape.split; // вертає "function"
+
+ +

Для попередньо визначених об'єктів оператор typeof вертає наступні результати:

+ +
typeof Date;     // вертає "function"
+typeof Function; // вертає "function"
+typeof Math;     // вертає "object"
+typeof Option;   // вертає "function"
+typeof String;   // вертає "function"
+
+ +

void

+ +

Оператор void використовується наступним чином:

+ +
void (вираз)
+void вираз
+
+ +

Оператор void вказує, що вираз має бути обчислений без повернення значення. Вираз є виразом JavaScript, який треба обчислити. Дужки, що оточують вираз, є необов'язковими, але вживати їх є гарним стилем.

+ +

Ви можете скористатись оператором void, щоб вказати вираз як гіпертекстове посилання. Вираз обчислюється, але не завантажується на місці відкритого документа.

+ +

Наступний код створює гіпертекстове посилання, яке нічого не робить, коли користувач на нього натискає. Коли користувач натискає на посилання, void(0) обчислюється як undefined, що не має жодного ефекту у JavaScript.

+ +
<a href="javascript:void(0)">Натисніть сюди, щоб нічого не робити</a>
+
+ +

Наступний код створює гіпертекстове посилання, яке відправляє форму, коли користувач натискає на нього.

+ +
<a href="javascript:void(document.form.submit())">
+Натисніть сюди, щоб відправити</a>
+ +

Оператори відношення

+ +

Оператор відношення порівнює свої операнди та повертає значення Boolean, на підставі того, чи є порівняння істиною.

+ +

in

+ +

Оператор in повертає true, якщо вказана властивість існує на вказаному об'єкті. Синтаксис наступний:

+ +
propNameOrNumber in objectName
+
+ +

де propNameOrNumber є рядковим або числовим виразом, який відображає ім'я властивості або індекс у масиві, а objectName є ім'ям об'єкта.

+ +

Наступний приклад демонструє варіанти використання оператора in.

+ +
// Масиви
+var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+0 in trees;        // вертає true
+3 in trees;        // вертає true
+6 in trees;        // вертає false
+'лавр' in trees;    // вертає false (ви маєте вказати індекс,
+                   // а не значення за цим індексом)
+'length' in trees; // вертає true (length є властивістю масиву)
+
+// вбудовані об'єкти
+'PI' in Math;          // вертає true
+var myString = new String('корал');
+'length' in myString;  // вертає true
+
+// Користувацькі об'єкти
+var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
+'make' in mycar;  // вертає true
+'model' in mycar; // вертає true
+
+ +

instanceof

+ +

Оператор instanceof повертає true, якщо вказаний об'єкт належить до вказаного типу. Синтаксис наступний:

+ +
objectName instanceof objectType
+
+ +

де objectName є ім'ям об'єкта, який порівнюється з objectType, а objectType є типом об'єкта, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.

+ +

Використовуйте instanceof, коли вам необхідно підтвердити тип об'єкта під час виконання. Наприклад, перехоплюючи винятки, ви можете зробити відгалуження до іншого коду обробки винятків, в залежності від типу викинутого винятку.

+ +

Наприклад, наступний код використовує instanceof для визначення того, чи theDay є об'єктом Date. Оскільки theDay є об'єктом Date, інструкції у блоці if будуть виконані.

+ +
var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // інструкції для виконання
+}
+
+ +

Пріоритет операторів

+ +

Пріоритет операторів визначає порядок, у якому вони застосовуються під час обчислення виразу. Ви можете змінити пріоритет оператора, використавши дужки.

+ +

Наступна таблиця наводить пріоритети операторів, від найвищого до найнижчого.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Пріоритет операторів
Тип оператораОкремі оператори
властивість. []
виклик / створення екземпляра() new
заперечення / інкремент! ~ - + ++ -- typeof void delete
множення / ділення* / %
додавання / віднімання+ -
бітовий зсув<< >> >>>
відношення< <= > >= in instanceof
рівність== != === !==
побітове-і&
виключне-побітове-або^
побітове-або|
логічне-і&&
логічне-або||
умовний?:
присвоєння= += -= *= /= %= <<= >>= >>>= &= ^= |=
кома,
+ +

Більш детальну версію цієї таблиці, доповнену посиланнями на додаткові подробиці щодо кожного оператора, можна знайти у довіднику з JavaScript.

+ +

Вирази

+ +

Виразом є будь-яка одиниця коду, яка вирішується з певним значенням.

+ +

Кожний синтаксично коректний вираз вирішується з якимось значенням, але, концептуально, існують два типи виразів: з побічними ефектами (наприклад: ті, що присвоюють значення змінній) та такі, що обчислюються і, таким чином, вирішуються з певним значенням.

+ +

Вираз x = 7 є прикладом першого типу. Цей вираз використовує оператор = для присвоєння семи змінній x. Сам вираз обчислюється з результатом сім.

+ +

Код 3 + 4 є прикладом другого типу виразів. Цей вираз за допомогою оператора + складає три та чотири без присвоєння результату, семи, змінній.
+
+ JavaScript має наступні категорії виразів:

+ + + +

Первинні вирази

+ +

Базові ключові слова та загальні вирази у JavaScript.

+ +

this

+ +

Використовуйте ключове слово this для посилання на поточний об'єкт. Загалом, this у методі посилається на об'єкт, що його викликав. Використовуйте this або з крапкою, або з дужковою нотацією:

+ +
this['propertyName']
+this.propertyName
+
+ +

Припустимо, функція на ім'я validate перевіряє властивість об'єкта value, маючи найменше та найбільше значення:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival))
+    console.log('Некоректне значення!');
+}
+
+ +

Ви можете викликати validate в кожному обробнику подій елементів форми onChange, використовуючи this, щоб передати йому елемент форми, як у наступному прикладі:

+ +
<p>Введіть число між 18 та 99:</p>
+<input type="текст" name="вік" size=3 onChange="validate(this, 18, 99);">
+
+ +

Оператор групування

+ +

Оператор групування ( ) контролює пріоритет обчислення у виразах. Наприклад, ви можете змінити обчислення спочатку множення та ділення, а потім додавання та віднімання, щоб обчислити спочатку додавання.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// пріоритет за замовчуванням
+a + b * c     // 7
+// обчислюється наступним чином
+a + (b * c)   // 7
+
+// тепер змінюємо пріоритет
+// додавання перед множенням
+(a + b) * c   // 9
+
+// що є рівнозначним
+a * c + b * c // 9
+
+ +

Лівосторонні вирази

+ +

Значення зліва є призначенням присвоєння.

+ +

new

+ +

Ви можете скористатись оператором new, щоб створити екземпляр визначеного користувачем типу об'єкта або одного з вбудованих типів. Використовуйте new наступним чином:

+ +
var objectName = new objectType([param1, param2, ..., paramN]);
+
+ +

super

+ +

Ключове слово super використовується для виклику функцій батьківського об'єкта. Воно корисне для використання з класами, для виклику батьківського конструктора, наприклад.

+ +
super([arguments]); // викликає батьківський конструктор.
+super.functionOnParent([arguments]);
+
+ +

Оператор розпакування

+ +

Оператор розпакування дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).

+ +

Приклад: Сьогодні, якщо ви маєте масив та бажаєте створити новий масив, використавши існуючий масив як його частину, синтаксису масивного літералу більше недостатньо, і вам доводиться повертатись до імперативного коду, використовуючи комбінацію з push, splice, concat, і т. д. З оператором розпакування все стає набагато лаконічнішим:

+ +
var parts = ['плечі', 'коліна'];
+var lyrics = ['голова', ...parts, 'та', 'пальці'];
+ +

Схожим чином оператор розпакування працює з викликами функцій:

+ +
function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);
+ +
{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
diff --git a/files/uk/web/javascript/index.html b/files/uk/web/javascript/index.html new file mode 100644 index 0000000000..51c10dc7dc --- /dev/null +++ b/files/uk/web/javascript/index.html @@ -0,0 +1,119 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - Вчити + - Мова + - Посібник +translation_of: Web/JavaScript +--- +
{{JsSidebar}}
+ +

JavaScript (JS) — це невибаглива до ресурсів мова програмування з {{Glossary("First-class Function", "функціями першого класу")}}, код якої інтерпретується та компілюється під час виконання. Хоча JavaScript насамперед відома як скриптова мова для веб-сторінок, вона також використовується у багатьох небраузерних середовищах на кшталт Node.js, Apache CouchDB та Adobe Acrobat. JavaScript — {{Glossary("Prototype-based programming", "прототип-орієнтована")}} {{glossary("Dynamic_programming_language", "динамічна мова")}}, що має декілька парадигм та підтримує {{glossary("OOP", "об'єктно-орієнтований")}}, імперативний та декларативний (тобто функціональне програмування) стилі. Розгорнуте визначення та докладний опис JavaScript читайте за посиланням.

+ +

Ця частина сайту присвячена безпосередньо мові JavaScript, і вона не стосується тонкощів, пов'язаних з веб-сторінками чи іншим оточенням, у якому виконується JavaScript. Специфічну інформацію щодо {{Glossary("API","API")}} для Веб-сторінок дивіться, будь ласка, у підрозділах Web APIs та DOM.

+ +

Стандартом для JavaScript є ECMAScript. Станом на 2012 рік усі сучасні браузери вже мали повну підтримку ECMAScript 5.1. Застарілі браузери підтримують щонайменше ECMAScript 3. 17 червня 2015 року ECMA International випустила шосту базову версію ECMAScript з офіційною назвою ECMAScript 2015, яка у попередніх обговореннях йменувалася ECMAScript 6 або ES6. Відтоді стандарти ECMAScript оновлюються раз на рік. Ця документація посилається на найсвіжішу версію чернетки, тобто ECMAScript 2019 на цей час.

+ +

Не варто плутати JavaScript з мовою програмування Java. Обидві мови "Java" та "JavaScript" є товарними знаками чи зареєстрованими торговими марками Oracle у Сполучених Штатах та інших країнах. Проте ці дві мови програмування мають великі розбіжності у синтаксисі, семантиці та застосуванні.

+ +
+
+

Навчальні посібники

+ +

Навчайтесь програмуванню на JavaScript за допомогою путівників та посібників.

+ +

Для повних новачків

+ +

Якщо ви не маєте взагалі ніякого досвіду програмування на JavaScript, але маєте бажання навчитись, починайте з підрозділу JavaScript у нашому Просторі навчальних матеріалів. Цей підрозділ складається з наступних лекцій:

+ +
+
Перші кроки з JavaScript
+
Відповіді на деякі фундаментальні питання на кшталт "JavaScript — це що?", "На що він схожий?" та "Які має можливості?" з оглядом ключових компонентів  JavaScript, таких як змінні, рядки, числа та масиви.
+
Блоки, з яких складається JavaScript
+
Продовжуємо огляд ключових компонентів  JavaScript, цього разу спрямовуючи нашу увагу на зазвичай вживані типові блоки коду, такі як умовні викази, цикли, функції та події.
+
Знайомство з об'єктами у JavaScript
+
Якщо ви маєте бажання надалі вдосконалювати свій рівень знань мови та створювати більш ефективний код, важливо розумітися на об'єктно-орієнтованій природі  JavaScript, і ця лекція має стати вам у пригоді.
+
+ +

Путівник з JavaScript

+ +
+
Путівник з JavaScript
+
Детальний путівник з JavaScript для осіб, які
+ вже мають досвід програмування на JavaScript чи іншій мові.
+
+ +

Середній рівень

+ +
+
Клієнтський веб-API
+
Під час написання клієнтського JavaScript для веб-сайтів або додатків не хочеться дуже заглиблюватись лише для того, щоб почати використовувати API — інтерфейсами для управління браузером та операційною системою, на якій виконується сайт, чи просто даними інших веб-сайтів чи сервісів. У цьому розділі ми розкриваємо, що являють собою ці API, і як використовувати деякі з найбільш загальних інтерфейсів, з якими доведеться часто мати справу у вашій розробницькій діяльності. 
+
Введення у JavaScript наново
+
Огляд для осіб, які вважають, що знають JavaScript.
+
+ +
+
Структури даних у JavaScript
+
Огляд структур даних, наявних у JavaScript.
+
Порівняння рівностей та тотожність
+
JavaScript пропонує три шляхи для порівняння значень: строга рівність з застосуванням ===, нестрога з == та метод {{jsxref("Global_Objects/Object/is", "Object.is()")}}.
+
+ +

Просунутий рівень

+ +
+
Успадкування та ланцюг прототипів
+
Розтлумачення успадкування на базі прототипів, яке здебільшого невірно розуміють та недооцінюють.
+
Суворий режим
+
Використання будь-якої змінної без попередньої декларації у суворому режимі заборонено. Цей режим грунтується на ECMAScript 5 з низкою обмежень для поліпшення швидкості й стабільності та спрощення зневадження (дослідження) коду.
+
Типізовані масиви у JavaScript
+
Типізовані масиви у JavaScript надають механізм доступу до необроблених бінарних даних.
+
Керування пам'яттю
+
Життєвий цикл пам'яті та збирання сміття у JavaScript.
+
Мультипотокова модель та Цикл подій
+
JavaScript має мультипотокову подель, яка грунтується на "циклі подій".
+
+
+ +
+

Документація

+ +

Перегляньте повну документацію по JavaScript.

+ +
+
Стандартні об'єкти
+
Ознайомтесь зі стандартними вбудованими об'єктами {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}} та ін.
+
Вирази та оператори
+
Дізнайтесь більше про особливості поведінки у JavaScript операторів {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, пріоритети операторів тощо.
+
Викази та декларації
+
Усвідомте, як працюють {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}} та інші викази й ключовики JavaScript.
+
Функції
+
Навчіться застосовувати функції JavaScript для розробки власних додатків.
+
+ +

Інструменти та ресурси

+ +

Корисні інструменти для створення та зневадження (дослідження) вашого коду JavaScript.

+ +
+
Інструменти розробника у Firefox
+
Блокнот, КонсольПрофілювання JavaScript, Зневаджувач та ін.
+
Оболонки JavaScript
+
Надають Вам можливіть швидко протестувати сніпети JavaScript.
+
TogetherJS
+
+

Спрощують командну роботу. Додайте TogetherJS до Вашого сайту, і Ваші відвідувачі матимуть можливість  допомагати одне одному у реальному часі.

+
+
Stack Overflow
+
Питання з тегом "JavaScript" на ресурсі Stack Overflow.
+
Версії JavaScript та примітки до випуску
+
Переглядайте історію розвитку компонентів JavaScript та поточний статус їхньої підтримки.
+
JSFiddle
+
Наживо редагуйте JavaScript, CSS й HTML та миттєво отримуйте результати. Використовуйте зовнішні ресурси та співпрацюйте з вашою командою онлайн.
+
Plunker
+
Plunker — це онлайн-спільнота для створення, співпраці і обміном вашими ідеями у галузі веб-розробки. Редагуйте ваш JavaScript, CSS і HTML файли, та одразу отримуйте результат і файлову структуру.
+
+
+
diff --git a/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..365b96ee79 --- /dev/null +++ b/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,306 @@ +--- +title: Наслідування та ланцюжок прототипів +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

JavaScript є дещо незвичним для розробників із досвідом у клас-орієнтованих мовах програмування (таких як Java чи C++), оскільки він є динамічним і не надає реалізації класу на рівні мови (ключове слово class введене в ES2015, але є синтаксичним цукром, тому JavaScript залишається прототип-орієнтованою мовою).

+ +

Якщо йдеться про наслідування, то JavaScript має лише одну конструкцію: обʼєкти. Кожен обʼєкт містить у якості прихованої властивості посилання на інший обʼєкт, який називається прототипом даного. Цей прототип у свою чергу має свій прототип, і так далі, поки не досягаємо обʼєкта, прототипом якого є null. За визначенням, null не має прототипу і слугує фінальним значенням у цьому ланцюжку прототипів.

+ +

Майже всі обʼєкти в JavaScript є екземплярами {{jsxref("Object")}}, який стоїть на вершині ланцюжка прототипів.

+ +

Прототипна модель наслідування нерідко розглядається як одна зі слабкостей JavaScript, але фактично вона є потужнішою за класичну. Класичну модель, наприклад, досить нескладно побудувати на основі прототипної.

+ +

 

+ +

Наслідування за допомогою ланцюжка прототипів

+ +

Наслідування властивостей

+ +

Обʼєкти в JavaScript є динамічними "наборами" властивостей (будемо називати їх власними властивостями). Обʼєкти в JavaScript містять посилання на свій обʼєкт-прототип. При зверненні до будь-якої властивості обʼєкта пошук цієї властивості відбувається не лише всередині обʼєкта, але і в його прототипі, і у прототипі прототипа, і так далі, поки властивість із заданим імʼям не буде знайдена, або не буде досягнуто кінця ланцюжка прототипів.

+ +
+

Відповідно до стандарту ECMAScript, запис someObject.[[Prototype]] використовується для вказання прототипа someObject. Починаючи з ECMAScript 2015, доступ до [[Prototype]] отримують за допомогою {{jsxref("Object.getPrototypeOf()")}} та {{jsxref("Object.setPrototypeOf()")}}. Це еквівалентно властивості JavaScript __proto__, яка не відповідає стандарту, але де-факто імплементована у більшості браузерів.

+ +

Ви не повинні плутати це з func.prototype, властивістю функції, яка натомість визначає, що [[Prototype]] має бути присвоєний усім екземплярам обʼєктів, створених цією функцією як конструктором. Властивість Object.prototype представляє прототип {{jsxref("Object")}}.

+
+ +

Ось що відбувається при спробі звернення до властивості:

+ +
// За допомогою функції f створимо обʼєкт o із власними властивостями a і b:
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// додаємо властивості у прототип фунції f
+ f.prototype.b = 3;
+ f.prototype.c = 4;
+
+// не присвоюйте значення f.prototype = {b:3,c:4}; це зруйнує ланцюжок прототипів
+// o.[[Prototype]] має властивості b та c.
+// o.[[Prototype]].[[Prototype]] це Object.prototype.
+// Нарешті, o.[[Prototype]].[[Prototype]].[[Prototype]] це null.
+// Це кінець ланцюжка прототипів, оскільки null,
+// за визначенням, не має [[Prototype]].
+// Отже, повністю ланцюжок прототипів виглядатиме так:
+// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null
+
+console.log(o.a); // 1
+// Чи є 'a' власною влативістю для o? Так, і її значення 1.
+
+console.log(o.b); // 2
+// Чи є 'b' власною властивістю для o? Так, і її значення 2.
+// Прототип також має властивість 'b', але вона не відвідується.
+// Це називається "затінюванням властивості".
+
+console.log(o.c); // 4
+// Чи є 'c' власною властивістю для o? Ні, перевіряємо його прототип.
+// Чи є 'c' власною властивістю для o.[[Prototype]]? Так, і її значення 4.
+
+console.log(o.d); // undefined
+// Чи є 'd' власною властивістю для o? Ні, перевіряємо його прототип.
+// Чи є 'd' власною властивістю для o.[[Prototype]]? Ні, перевіряємо його прототип.
+// o.[[Prototype]].[[Prototype]] це null, закінчуємо пошук,
+// властивості не знайдено, повертаємо undefined.
+ +

Посилання на код

+ +

Присвоєння значення властивості обʼєкта створює власну властивість. Єдиним винятком є той випадок, коли властивість успадковується разом із геттером або сеттером.

+ +

Успадкування "методів"

+ +

JavaScript не має "методів" у тому вигляді, як у клас-орієнтованих мовах. У JavaScript будь-яку функцію можна додати до обʼєкта в якості властивості. Успадкована фукція поводиться так само як і будь-яка інша властивість, включаючи затінювання властивостей, як було показано вище (в даному випадку це є певною формою заміщення методу).

+ +

Коли виконується успадкована функція, значення this вказує на обʼєкт, що її наслідує, а не на обʼєкт-прототип, у якому функція є власною властивістю.

+ +
var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Коли тут викликається o.m, 'this' вказує на o
+
+var p = Object.create(o);
+// p є обʼєктом, що наслідує від o
+
+p.a = 4; // створюється власна властивість 'a' для p
+console.log(p.m()); // 5
+// коли викликається p.m, 'this' вказує на p.
+// Тобто коли p наслідує функцію m обʼєкта o,
+// 'this.a' означає p.a, власну властивість 'a' обʼєкта p
+
+ +

Різні способи створення обʼєктів та результуючого ланцюжка прототипів

+ +

Обʼєкти, що створені за допомогою синтаксичних конструкцій

+ +
var o = {a: 1};
+
+// The newly created object o has Object.prototype as its [[Prototype]]
+// o has no own property named 'hasOwnProperty'
+// hasOwnProperty is an own property of Object.prototype.
+// So o inherits hasOwnProperty from Object.prototype
+// Object.prototype has null as its prototype.
+// o ---> Object.prototype ---> null
+
+var b = ['yo', 'whadup', '?'];
+
+// Arrays inherit from Array.prototype
+// (which has methods indexOf, forEach, etc.)
+// The prototype chain looks like:
+// b ---> Array.prototype ---> Object.prototype ---> null
+
+function f() {
+  return 2;
+}
+
+// Functions inherit from Function.prototype
+// (which has methods call, bind, etc.)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

За допомогою конструктора

+ +

Конструктор в JavaScript це "просто" функція, яка може бути викликана з новим оператором.

+ +
function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v) {
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g is an object with own properties 'vertices' and 'edges'.
+// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
+
+ +

За допомогою Object.create

+ +

У ECMAScript 5 введений новий метод: {{jsxref("Object.create()")}}. Виклик цього методу створює новий об'єкт. Прототип цього об'єкту це перший аргумент функції:

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty);
+// undefined, because d doesn't inherit from Object.prototype
+
+ +
+

With the class keyword

+ +

ECMAScript 2015 introduced a new set of keywords implementing classes. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.

+ +
'use strict';
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+
+ +

Продуктивність

+ +

The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.

+ +

Also, when iterating over the properties of an object, every enumerable property that is on the prototype chain will be enumerated.

+ +

To check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnProperty method which all objects inherit from Object.prototype.

+ +

hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain.

+ +

Note: It is not enough to check whether a property is undefined. The property might very well exist, but its value just happens to be set to undefined.

+
+ +

Bad practice: Extension of native prototypes

+ +

One mis-feature that is often used is to extend Object.prototype or one of the other built-in prototypes.

+ +

This technique is called monkey patching and breaks encapsulation. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional non-standard functionality.

+ +

The only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like Array.forEach.

+ +

Приклад 

+ +

B shall inherit from A:

+ +
function A(a) {
+  this.varA = a;
+}
+
+// What is the purpose of including varA in the prototype when A.prototype.varA will always be shadowed by
+// this.varA, given the definition of function A above?
+A.prototype = {
+  varA: null,  // Shouldn't we strike varA from the prototype as doing nothing?
+      // perhaps intended as an optimization to allocate space in hidden classes?
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables
+      // would be valid if varA wasn't being initialized uniquely for each instance
+  doSomething: function() {
+    // ...
+  }
+};
+
+function B(a, b) {
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB: {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething: {
+    value: function() { // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+
+ +

The important parts are:

+ + + +

prototype та Object.getPrototypeOf

+ +

JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.

+ +

You probably already noticed that our function A has a special property called prototype. This special property works with the JavaScript new operator. The reference to the prototype object is copied to the internal [[Prototype]] property of the new instance. For example, when you do var a1 = new A(), JavaScript (after creating the object in memory and before running function A() with this defined to it) sets a1.[[Prototype]] = A.prototype. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in [[Prototype]]. This means that all the stuff you define in prototype is effectively shared by all instances, and you can even later change parts of prototype and have the changes appear in all existing instances, if you wanted to.

+ +

If, in the example above, you do var a1 = new A(); var a2 = new A(); then a1.doSomething would actually refer to Object.getPrototypeOf(a1).doSomething, which is the same as the A.prototype.doSomething you defined, i.e. Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething.

+ +

In short, prototype is for types, while Object.getPrototypeOf() is the same for instances.

+ +

[[Prototype]] is looked at recursively, i.e. a1.doSomething, Object.getPrototypeOf(a1).doSomething, Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething etc., until it's found or Object.getPrototypeOf returns null.

+ +

So, when you call

+ +
var o = new Foo();
+ +

JavaScript actually just does

+ +
var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);
+ +

(or something like that) and when you later do

+ +
o.someProp;
+ +

it checks whether o has a property someProp. If not, it checks Object.getPrototypeOf(o).someProp, and if that doesn't exist it checks Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp, and so on.

+ +
+

Висновки

+ +

It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features.

+
diff --git a/files/uk/web/javascript/memory_management/index.html b/files/uk/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..0022a81129 --- /dev/null +++ b/files/uk/web/javascript/memory_management/index.html @@ -0,0 +1,204 @@ +--- +title: Керування пам'яттю +slug: Web/JavaScript/Memory_Management +tags: + - JavaScript + - Збирання сміття + - пам'ять + - продуктивність +translation_of: Web/JavaScript/Memory_Management +--- +
{{JsSidebar("Advanced")}}
+ +

У низькорівневих мовах, наприклад C, існують примітивні функції для ручного керування пам'яттю, такі як malloc() та free(). В той же час JavaScript автоматично виділяє пам'ять при створенні об'єктів та звільняє її, коли вони більше не використовуються (збирання сміття). Ця автоматичність є потенційним джерелом плутанини: вона може дати розробникам хибне враження, що їм не потрібно хвилюватись щодо керування пам'яттю.

+ +

Життєвий цикл пам'яті

+ +

Незалежно від мови програмування, життєвий цикл пам'яті завжди приблизно той самий:

+ +
    +
  1. Виділення потрібної пам'яті
  2. +
  3. Використання виділеної пам'яті (читання, запис)
  4. +
  5. Вивільнення виділеної пам'яті, коли вона більше не потрібна
  6. +
+ +

Друга частина в усіх мовах є явною. Перша та остання частини є явними у низькорівневих мовах, але, як правило, неявні у мовах високого рівня, таких як JavaScript.

+ +

Виділення пам'яті у JavaScript

+ +

Ініціалізація значень

+ +

Щоб не турбувати розробника виділеннями пам'яті, JavaScript автоматично виділяє пам'ять, коли оголошуються початкові значення.

+ +
var n = 123; // виділяє пам'ять для числа
+var s = 'блабла'; // виділяє пам'ять для рядка
+
+var o = {
+  a: 1,
+  b: null
+}; // виділяє пам'ять для об'єкта та значень, що він містить
+
+// (як з об'єктом) виділяє пам'ять для масиву та
+// значень, що він містить
+var a = [1, null, 'аовл'];
+
+function f(a) {
+  return a + 2;
+} // виділяє пам'ять для функції (об'єкт, який можна викликати)
+
+// функціональні вирази також виділяють пам'ять для об'єкта
+someElement.addEventListener('click', function() {
+  someElement.style.backgroundColor = 'blue';
+}, false);
+
+ +

Виділення пам'яті через виклики функцій

+ +

Виклики деяких функцій виділяють пам'ять під об'єкт.

+ +
var d = new Date(); // виділяє пам'ять під об'єкт Date
+
+var e = document.createElement('div'); // видділяє пам'ять під елемент DOM
+ +

Деякі методи виділяють пам'ять для нових значень чи об'єктів:

+ +
var s = 'йцуке';
+var s2 = s.substr(0, 3); // s2 - новий рядок
+// Оскільки рядки є незмінними,
+// JavaScript може вирішити не виділяти пам'ять,
+// а лише зберегти діапазон [0, 3].
+
+var a = ['ouais ouais', 'nan nan'];
+var a2 = ['generation', 'nan nan'];
+var a3 = a.concat(a2);
+// новий масив з 4 елементів, що є
+// поєданням елементів a та a2.
+
+ +

Використання значень

+ +

Використання значень, по суті, означає читання та запис у виділеній пам'яті. Це можна зробити зчитуванням та записом значення змінної чи властивості об'єкта, чи навіть передачею аргументу у функцію.

+ +

Звільнення пам'яті, коли вона більше не потрібна

+ +

Більшість проблем керування пам'яттю виникають на цій стадії. Найскладніший аспект цього етапу полягає у визначенні, коли виділена пам'ять більше не потрібна. 

+ +

Низькорівневі мови вимагають, щоб розробник вручну визначав, у якій точці програми виділена пам'ять більше не потрібна, та звільняв її.

+ +

Деякі високорівневі мови, такі як JavaScript, використовують форму автоматичного керування пам'яттю, відому як збирання сміття (ЗС). Збирач сміття відслідковує виділення пам'яті та визначає момент, коли блок виділеної пам'яті більше не потрібний, і повертає його. Цей автоматичний процес є неточним, оскільки загальна проблема визначення, чи потрібна наразі та чи інша ділянка пам'яті, є нерозв'язною.

+ +

Збирання сміття

+ +

Як було зазначено вище, загальна проблема автоматичного визначення того, що якась ділянка пам'яті "більше не потрібна", є нерозв'язною. Як наслідок, збирачі сміття впроваджують обмеження вирішення загальної проблеми. Цей розділ пояснює концепції,  необхідні для розуміння головних алгоритмів збирання сміття та відповідних обмежень.

+ +

Посилання

+ +

Головна концепція, на яку покладаються алгоритми збирачів сміття - це концепція посилань. У контексті керування пам'яттю об'єкт посилається на інший об'єкт, якщо звертається до нього (явно чи неявно). Наприклад, об'єкт JavaScript має посилання на свій прототип (неявне посилання) та на значення своїх властивостей (явне посилання).

+ +

У цьому контексті поняття "об'єкта" є ширшим, ніж звичайні об'єкти JavaScript, і містить також області видимості функцій (або глобальну область видимості).

+ +

Збирання сміття через підрахунок посилань

+ +

Це найпримітивніший алгоритм збирання сміття. Цей алгоритм звужує проблему з визначення того, чи об'єкт досі є потрібним, до визначення того, чи мають інші об'єкти досі посилання на даний об'єкт. Об'єкт називається "сміттям", або підлягає збиранню, якщо на нього вказує нуль посилань.

+ +

Приклад

+ +
var x = {
+  a: {
+    b: 2
+  }
+};
+// Створено 2 об'єкта. Один має посилання у іншому як одна з його властивостей.
+// Інший має посилання через присвоєння його змінній 'x'.
+// Зрозуміло, що жоден з них не може бути прибраний.
+
+
+var y = x;      // Змінна 'y' - друга сутність, що має посилання на об'єкт.
+
+x = 1;          // Тепер об'єкт, що початково був присвоєний 'x', має унікальне посилання,
+                // втілене у змінній 'y'.
+
+var z = y.a;    // Посилання на властивість 'a' об'єкта.
+                //   Цей об'єкт тепер має 2 посилання: одне у вигляді властивості,
+                //   інше у вигляді змінної 'z'.
+
+y = 'mozilla';  // Об'єкт, що початково був присвоєний 'x', тепер має нуль посилань.
+                //   Він може бути прибраний.
+                //   Однак, на його властивість 'a' досі посилається
+                //   змінна 'z', тому її не можна вивільнити.
+
+z = null;       // Властивість 'a' об'єкта, що початково був присвоєний x,
+                //   має нуль посилань. Об'єкт тепер може бути прибраний.
+
+ +

Обмеження: Циклічні посилання

+ +

Існує обмеження у випадку циклічних посилань. У наступному прикладі два об'єкти створені з властивостями, в яких вони посилаются один на одного, таким чином створюючи цикл. Вони вийдуть за межі області видимості, коли завершиться виклик функції. В цей момент вони стають непотрібними, і їхня виділена пам'ять має бути повернена. Однак, алгоритм, що підраховує посилання, не вважатиме їх готовими для повернення, оскільки кожен з двох об'єктів має принаймні одне посилання, що вказує на нього, в результаті жоден з них не позначається для збирання сміття. Циклічні посилання є типовою причиною витоків пам'яті.

+ +
function f() {
+  var x = {};
+  var y = {};
+  x.a = y;        // x посилається на y
+  y.a = x;        // y посилається на x
+
+  return 'йцуке';
+}
+
+f();
+
+ +

Приклад з реального життя

+ +

Internet Explorer 6 та 7 відомі тим, що їхні збирачі сміття для об'єктів DOM працюють на основі підрахунку посилань. Цикли є типовою помилкою, що призводить до витоків пам'яті:

+ +
var div;
+window.onload = function() {
+  div = document.getElementById('myDivElement');
+  div.circularReference = div;
+  div.lotsOfData = new Array(10000).join('*');
+};
+
+ +

У наведеному прикладі DOM-елемент "myDivElement" має циклічне посилання на самого себе у властивості "circularReference". Якщо ця властивість не буде явно видалена чи обнулена, збирач сміття, що підраховує посилання, завжди матиме принаймні одне наявне посилання і триматиме DOM-елемент у пам'яті, навіть якщо він був видалений з DOM-дерева. Якщо DOM-елемент містить великий об'єм даних (проілюстровано у наведеному прикладі властивістю "lotsOfData"), пам'ять, зайнята цими даними, ніколи не буде вивільнена, що може призвести до проблем, пов'язаних з пам'яттю, наприклад, переглядач ставатиме все повільнішим.

+ +

Алгоритм маркування та прибирання (mark-and-sweep)

+ +

Цей алгоритм звужує визначення "об'єкта, який більше не потрібен" до "недосяжного об'єкта".

+ +

Даний алгоритм використовує набір об'єктів, що називаються коренями. У JavaScript корінь є глобальним об'єктом. Періодично збирач сміття починатиме від цих коренів, знаходитиме усі об'єкти, що мають посилання у коренях, далі усі об'єкти, що мають посилання у них, і т. д. Таким чином, починаючи від коренів, збирач сміття знайде усі досяжні об'єкти та збере усі недосяжні об'єкти.

+ +

Цей алгоритм є покращенням попереднього, оскільки об'єкт, що має нуль посилань, є об'єктивно недосяжним. Протилежне не є істиною, як ми бачили на прикладі циклічних посилань.

+ +

Станом на 2012 рік усі сучасні переглядачі використовують збирачі сміття з алгоритмом маркування та прибирання. Усі покращення в галузі збирання сміття у JavaScript (генераційне/інкрементне/конкурентне/паралельне збирання сміття) за останні кілька років є покращеннями реалізації даного алгоритму, а не покращеннями самого алгоритму збирання сміття чи скороченням його визначення моменту, коли "об'єкт більше не потрібен".

+ +

Циклічні посилання більше не є проблемою

+ +

У наведеному вище прикладі, коли завершується виклик функції, два об'єкти більше не мають посилань з жодного ресурсу, досяжного з глобального об'єкта. Як наслідок, збирач сміття визнає їх недосяжними та поверне виділену під них пам'ять.

+ +

Обмеження: Ручне вивільнення пам'яті

+ +

Бувають випадки, коли було б зручно власноруч визначити, коли й яка пам'ять буде звільнена. Щоб звільнити пам'ять об'єкта, його треба зробити явно недосяжним.

+ +

Станом на 2019 рік немає можливості явно чи програмно запустити збирання сміття у JavaScript.

+ +

Node.js

+ +

Node.js пропонує додаткові можливості та інструменти для конфігурування та відлагодження проблем з пам'яттю, які можуть бути недоступні для JavaScript, що виконується у середовищі переглядача.

+ +

Прапори рушія V8

+ +

Максимальний розмір доступної пам'яті купи може бути збільшений за допомогою прапору:

+ +

node --max-old-space-size=6000 index.js

+ +

Ми також можемо викликати збирач сміття для відлагодження проблем з пам'яттю, використовуючи прапор та Chrome Debugger:

+ +
node --expose-gc --inspect index.js
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/new_in_javascript/1.7/index.html b/files/uk/web/javascript/new_in_javascript/1.7/index.html new file mode 100644 index 0000000000..ac7a93e3fd --- /dev/null +++ b/files/uk/web/javascript/new_in_javascript/1.7/index.html @@ -0,0 +1,38 @@ +--- +title: Нове у JavaScript 1.7 +slug: Web/JavaScript/New_in_JavaScript/1.7 +tags: + - JavaScript + - версії +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7 +--- +
{{jsSidebar("New_in_JS")}}
+ +

Нижче наведений журнал змін для JavaScript 1.7. Ця версія була додана у Firefox 2 (жовтень 2006).

+ +

JavaScript 1.7 є оновленням мови, що запроваджує декілька нових функцій, зокрема, генератори, ітератори, let-вирази та деструктуризаційне присвоювання.

+ +

Використання JavaScript 1.7

+ +

Для використання деяких нових функцій JavaScript 1.7 вам необхідно вказати, що ви бажаєте використовувати JavaScript 1.7. У коді HTML чи XUL використовуйте:

+ +
<script type="application/javascript;version=1.7"></script>
+ +

Якщо ви використовуєте оболонку JavaScript, вам необхідно встановити версію, яку ви бажаєте використовувати, за допомогою перемикача -version 170 в командному рядку, або функцією version():

+ +
version(170);
+
+ +

Функції, які потребують використання нових ключових слів "yield" та "let" вимагають зазначити версію 1.7, тому що існуючий код може використовувати ці ключові слова в якості змінних чи імен функцій. Функції, які не запроваджують нових ключових слів (деструктуризаційне присвоювання та заповнення масивів) можуть використовуватись без вказання версії JavaScript.

+ +

Нові функції JavaScript 1.7

+ +

Наведена функціональність, додана з JavaScript 1.7, раніше не була частиною стандарту ECMA-262. У новіших версіях Firefox реалізацію було оновлено для роботи з семантикою, зазначеною у 6-й версії ECMAScript. Будь ласка, дивіться різницю у статтях за посиланнями.

+ + diff --git a/files/uk/web/javascript/new_in_javascript/index.html b/files/uk/web/javascript/new_in_javascript/index.html new file mode 100644 index 0000000000..081bcc5623 --- /dev/null +++ b/files/uk/web/javascript/new_in_javascript/index.html @@ -0,0 +1,73 @@ +--- +title: Нове у JavaScript +slug: Web/JavaScript/New_in_JavaScript +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - Versions +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +
{{jsSidebar("New_in_JS")}}
+ +

This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.

+ +

ECMAScript версії

+ +
+
Language resources
+
Learn more about the ECMAScript standards on which the JavaScript language is based on.
+
ECMAScript 5 support
+
Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.
+
ECMAScript 2015 support
+
Implementation status for the draft ECMA-262 Edition 6 (ES2015) in Mozilla-based engines and products.
+
ECMAScript 2016 support
+
Implementation status for the upcoming ECMA-262 Edition 7 (ES2016) in Mozilla-based engines and products.
+
+ +

JavaScript release notes

+ +
+
Firefox JavaScript changelog
+
See this changelog for JavaScript features implemented in Firefox 5 and later.
+
+ +

JavaScript версії

+ +

Deprecated ({{deprecated_inline}}). The explicit versioning and opt-in of language features was Mozilla-specific and is in process of being removed. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as ES2015.

+ +

JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.

+ +
+
JavaScript 1.1
+
Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.
+
JavaScript 1.2
+
Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.
+
JavaScript 1.3
+
Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.
+ Standardization work to be compliant with ECMA-262 1st and 2nd Edition.
+
JavaScript 1.4
+
Version shipped in Netscape's server side JavaScript. Released in 1999.
+
JavaScript 1.5
+
Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.
+ Standardization work to be compliant with ECMA-262 3rd Edition.
+
JavaScript 1.6
+
Version shipped in Firefox 1.5. Released in November 2005.
+ Includes ECMAScript for XML (E4X), new Array methods plus String and Array generics.
+
JavaScript 1.7
+
Version shipped in Firefox 2. Released in October 2006.
+ Includes generators, iterators, array comprehensions, let expressions, and destructuring assignment.
+
JavaScript 1.8
+
Version shipped in Firefox 3. Released in June 2008.
+ Includes expression closures, generator expressions and Array.reduce()
+
JavaScript 1.8.1
+
Version shipped in Firefox 3.5. Released on June 30, 2009.
+ Includes the TraceMonkey JIT and supports native JSON.
+
JavaScript 1.8.2
+
Version shipped in Firefox 3.6. Released June 22, 2009.
+ Includes only minor changes.
+
JavaScript 1.8.5
+
Version shipped in Firefox 4. Released July 27, 2010.
+ Includes many new features for ECMA-262 Edition 5 compliance.
+ This is the last JavaScript version.
+
diff --git a/files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html b/files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html new file mode 100644 index 0000000000..cb9564fe7b --- /dev/null +++ b/files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html @@ -0,0 +1,87 @@ +--- +title: Огляд технологій JavaScript +slug: Web/JavaScript/oglyad_tehnologiy_JavaScript +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +
{{JsSidebar("Introductory")}}
+ +

Introduction

+ +

Whereas HTML defines a webpage's structure and content and CSS sets the formatting and appearance, JavaScript adds interactivity to a webpage and creates rich web applications.

+ +

However, the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the Web APIs, including the DOM (Document Object Model).

+ +

JavaScript, the core language (ECMAScript)

+ +

The core language of JavaScript is standardized by the ECMA TC39 committee as a language named ECMAScript.

+ +

This core language is also used in non-browser environments, for example in node.js.

+ +

What falls under the ECMAScript scope?

+ +

Among other things, ECMAScript defines:

+ + + +

Browser support

+ +

As of October 2016, the current versions of the major Web browsers implement ECMAScript 5.1 and ECMAScript 2015, but older versions (still in use) implement ECMAScript 5 only.

+ +

Future

+ +

The major 6th Edition of ECMAScript was officially approved and published as a standard on June 17, 2015 by the ECMA General Assembly. Since then ECMAScript Editions are published on a yearly basis.

+ +

Internationalization API

+ +

The ECMAScript Internationalization API Specification is an addition to the ECMAScript Language Specification, also standardized by Ecma TC39. The internationalization API provides collation (string comparison), number formatting, and date-and-time formatting for JavaScript applications, letting the applications choose the language and tailor the functionality to their needs. The initial standard was approved in December 2012; the status of implementations in browsers is tracked in the documentation of the Intl object. The Internationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.

+ +

DOM APIs

+ +

WebIDL

+ +

The WebIDL specification provides the glue between the DOM technologies and ECMAScript.

+ +

The Core of the DOM

+ +

The Document Object Model (DOM) is a cross-platform, language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The {{glossary("W3C")}} standardizes the Core Document Object Model, which defines language-agnostic interfaces that abstract HTML and XML documents as objects, and also defines mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find:

+ + + +

From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".

+ +

HTML DOM

+ +

HTML, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the meaning of elements. The HTML DOM includes such things as the className property on HTML elements, or APIs such as {{ domxref("document.body") }}.

+ +

The HTML specification also defines restrictions on documents; for example, it requires all children of a ul element, which represents an unordered list, to be li elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.

+ +

Looking for the Document object, Window object, and the other DOM elements? Read the DOM documentation.

+ +

Other notable APIs

+ + + +

Browser support

+ +

As every web developer has experienced, the DOM is a mess. Browser support uniformity varies a lot from feature to feature, mainly because many important DOM features have very unclear, specifications (if any), and different web browsers add incompatible features for overlapping use cases (like the Internet Explorer event model). As of June 2011, the W3C and particularly the WHATWG are defining older features in detail to improve interoperability, and browsers in turn can improve their implementations based on these specifications.

+ +

One common, though perhaps not the most reliable, approach to cross-browser compatibility is to use JavaScript libraries, which abstract DOM features and keep their APIs working the same in different browsers. Some of the most widely used frameworks are jQuery, prototype, and YUI.

diff --git a/files/uk/web/javascript/reference/classes/constructor/index.html b/files/uk/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..488a9c1829 --- /dev/null +++ b/files/uk/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,119 @@ +--- +title: Конструктор +slug: Web/JavaScript/Reference/Classes/constructor +tags: + - Classes + - ECMAScript6 + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +
{{jsSidebar("Classes")}}
+ +

Метод constructor — це особливий метод, призначений для створення й започаткування (ініціалізації) новоствореного примірника класу.

+ +

Синтаксис

+ +
constructor([аргументи]) { … }
+ +

Опис

+ +

Клас може мати лише один метод з іменем «constructor». Спроба оголосити декілька методів «constructor» для одного класу матиме наслідком помилку {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}.

+ +

Метод constructor може звернутися до однойменного методу батьківського класу (надкласу) через ключове слово {{jsxref("Operators/super", "super")}}.

+ +

За відсутності оголошеного методу constructor буде використано типовий започаткувач (конструктор).

+ +

Приклади

+ +

Використання методу constructor

+ +

Цей шмат коду взято з classes sample (переглянути наживо):

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Наступний рядок здійснює виклик успадкованого від Polygon
+    // конструктора, передаючи до нього власні параметри.
+    super(length, length);
+
+    // Завважте, що в класах-нащадках виклик super() завжди має передувати
+    // найпершому звертанню до this. Інакше матимете помилку.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

Інший приклад

+ +

Погляньте також на цей приклад:

+ +
class Polygon {
+    constructor() {
+        this.name = "Polygon";
+    }
+}
+
+class Square extends Polygon {
+    constructor() {
+        super();
+    }
+}
+
+let newInstance = new Square();
+console.log(newInstance.name);  // виводить "Polygon"
+ +

Типові конструктори

+ +

Якщо метод constructor не оголошено, буде використано типовий конструктор. Для первинного класу (що не успадковує інших) то є метод з порожнім тілом:

+ +
constructor() {}
+
+ +

Натомість для вторинного класу (що успадковує якийсь інший клас) типовим конструктором є такий:

+ +
constructor(...args) {
+  super(...args);
+}
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES6')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.classes.constructor")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/classes/extends/index.html b/files/uk/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..fb64cf21aa --- /dev/null +++ b/files/uk/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,112 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - ECMAScript 2015 + - JavaScript + - Класи +translation_of: Web/JavaScript/Reference/Classes/extends +--- +
{{jsSidebar("Classes")}}
+ +

Ключове слово extends використовується у оголошеннях класів або у виразах класів для створення дочірнього класу від іншого класу.

+ +
{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}
+ + + +

Синтаксис

+ +
class ChildClass extends ParentClass { ... }
+ +

Опис

+ +

Ключове слово extends може використовуватись для створення підкласів з користувацьких класів, як і з вбудованих об'єктів.

+ +

Значенням .prototype батьківського класу має бути {{jsxref("Object")}} або {{jsxref("null")}}.

+ +

Приклади

+ +

Використання extends

+ +

Перший приклад створює клас на ім'я Square (квадрат) з класу на ім'я Polygon (багатокутник). Даний приклад взятий з цього зразка (джерело).

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Тут він викликає конструктор батьківського класу
+    // та надає значення ширини й довжини багатокутника
+    super(length, length);
+    // Заувага: У похідному класі super() має викликатися до
+    // використання 'this'. Інакше виникне помилка посилання.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}
+ +

Використання extends із вбудованими об'єктами

+ +

Цей приклад розширює вбудований об'єкт {{jsxref("Date")}}. Даний приклад взяти з цього зразка (джерело).

+ +
class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}
+ +

Розширення null

+ +

Розширення {{jsxref("null")}} працює, як для звичайних класів, за винятком того, що прототип не успадковується від {{jsxref("Object.prototype")}}.

+ +
class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+
+new nullExtends(); //ReferenceError: this is not defined
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.classes.extends")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/classes/index.html b/files/uk/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..ec1694bfd1 --- /dev/null +++ b/files/uk/web/javascript/reference/classes/index.html @@ -0,0 +1,418 @@ +--- +title: Класи +slug: Web/JavaScript/Reference/Classes +tags: + - ECMAScript 2015 + - JavaScript + - Класи + - конструктори + - наслідування +translation_of: Web/JavaScript/Reference/Classes +--- +
{{JsSidebar("Classes")}}
+ +

Класи в JavaScript були додані в стандарті ECMAScript 6 і є насамперед синтаксичним цукром для існуючого прототипного наслідування у JavaScript. Синтаксис класів не впроваджує нову модель об'єктно-орієнтованого наслідування у JavaScript.

+ +

Визначення класів

+ +

Класи - це, по факту, "особливі функції", і так само, як ви можете визначити функціональний вираз та оголошення функції, синтаксис класу складається з двох компонентів: виразу класу and оголошення класу.

+ +

Оголошення класу

+ +

Одним зі способів визначення класу є оголошення класу. Для оголошення класу використовується ключове слово class з назвою класу (у прикладі нижче "Rectangle").

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Підняття

+ +

Важлива відмінність між оголошеннями функції та класу полягає в тому, що оголошення функції {{Glossary("Hoisting", "піднімається")}}, а оголошення класу ні. Спочатку необхідно оголосити клас, і тільки потім звертатись до нього, інакше подібний код викине помилку {{jsxref("ReferenceError")}}:

+ +
const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+
+ +

Вираз класу

+ +

Вираз класу - це інший спосіб визначення класу. Вираз класу може бути іменованим або неіменованим. Ім'я, надане іменованому виразу класу, є локальним для тіла класу. (Хоча його можна отримати через властивість класу (не екземпляра) {{jsxref("Function.name", "name")}}).

+ +
// не іменований
+let Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// виведе "Rectangle"
+
+// іменований
+let Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// виведе "Rectangle2"
+
+ +
+

Заувага: Вирази класів підпадають під такі самі обмеження підняття, які описані у розділі {{anch("Оголошення класу")}}.

+
+ +

Тіло класу та визначення методів

+ +

Тіло класу - це та частина, що знаходиться у фігурних дужках {}. Тут ви визначаєте складові класу, такі як методи або конструктор.

+ +

Строгий режим

+ +

Код у тілі класу виконується у строгому режимі, тобто, код, записаний тут, є предметом більш строгого синтаксису заради підвищення продуктивності. Деякі помилки, які пройшли б непоміченими, будуть викидатися, а певні ключові слова є зарезервованими для майбутніх версій ECMAScript.

+ +

Конструктор

+ +

Метод constructor - це спеціальний метод для створення та ініціалізації об'єктів, створених ключовим словом class. У класі може бути лише один спеціальний метод з ім'ям "constructor". Якщо клас містить більше одного метода constructor, виникне помилка {{jsxref("SyntaxError")}}.

+ +

Конструктор може звертатися до конструктора батьківського класу за допомогою ключового слова super.

+ +

Методи прототипу

+ +

Дивіться також визначення методів

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+  // гетер
+  get area() {
+    return this.calcArea();
+  }
+  // метод
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Rectangle(10, 10);
+
+console.log(square.area); // 100
+ +

Статичні методи

+ +

Ключове слово static визначає статичний метод класу. Статичні методи класу викликаються без створення екземпляра свого класу і не можуть бути викликані через екземпляр класу. Статичні методи часто використовують для створеня функцій-утиліт для застосунків.

+ +
class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static distance(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.hypot(dx, dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+p1.distance; //undefined
+p2.distance; //undefined
+
+console.log(Point.distance(p1, p2)); // 7.0710678118654755
+ +

Пакування через прототипні та статичні методи

+ +

Коли статичний або прототипний метод викликається без значення для this, значенням this всередині метода буде undefined. Ця поведінка буде такою самою навіть якщо директива "use strict" не задана, тому що код в межах тіла класу завжди виконується у строгому режимі.

+ +
class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // Animal {}
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // class Animal
+let eat = Animal.eat;
+eat(); // undefined
+ +

Якщо наведений приклад написаний з використанням традиційного синтаксису функцій, то автоматичне пакування при викликах методів відбуватиметься у нестрогому режимі, на основі початкового значення this. Якщо початковим значенням є undefinedthis буде присвоєний глобальний об'єкт.

+ +

Автопакування не відбудеться у строгому режимі, значення this залишиться незмінним.

+ +
function Animal() { }
+
+Animal.prototype.speak = function() {
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // global object
+
+let eat = Animal.eat;
+eat(); // global object
+ +

Властивості екземпляра

+ +

Властивості екземпляра повинні визначатися всередині методів класу:

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Статичні (на боці класу) властивості-значення та прототипні властивості-значення повинні визначатися за межами оголошення класу:

+ +
Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;
+ +

Оголошення полів класу

+ +
+

Оголошення публічних та приватних полів є експериментальною функціональністю (stage 3), запропонованою на TC39, комітеті стандартів JavaScript. Підтримка у переглядачах є обмеженою, але функціональність можна використовувати через збирачі пакетів з системами на кшталт Babel.

+
+ +

Оголошення публічних полів

+ +

З синтаксисом оголошення полів JavaScript наведений вище приклад можна записати наступним чином:

+ +
class Rectangle {
+  height = 0;
+  width;
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

З оголошенням полів заздалегідь оголошення класу стає більш самозадокументованим, а поля завжди присутні.

+ +

Як бачимо, оголошені поля можуть мати або не мати значення за замовчуванням.

+ +

Оголошення приватних полів

+ +

З використанням приватних полів визначення можна вдосконалити наступним чином.

+ +
class Rectangle {
+  #height = 0;
+  #width;
+  constructor(height, width) {
+    this.#height = height;
+    this.#width = width;
+  }
+}
+ +

Буде помилкою посилатися на приватні поля поза межами класу; вони доступні для читання або запису тільки всередині тіла класу. Визначаючи щось, невидиме за межами класу, ви забезпечуєте умови, за яких користувачі ваших класів не зможуть покладатися на внутрішні властивості, які можуть змінюватись між версіями.

+ +

Приватні поля можуть оголошуватися лише одразу при оголошенні полів.

+ +

Приватні поля не можуть створюватись пізніше через присвоювання, як це роблять нормальні властивості.

+ +

Щоб дізнатись більше, дивіться також поля класу.

+ +

Створення підкласу за допомогою extends

+ +

Ключове слово extends використовують у оголошенні класу або у виразі класу, щоб створити клас, як дочірній від іншого класу.

+ +
class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} видає звуки.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name) {
+    super(name); // викликати конструктор суперкласу та передати параметром ім'я
+  }
+
+  speak() {
+    console.log(`${this.name} гавкає.`);
+  }
+}
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні гавкає.
+ +

Якщо у підкласі присутній конструктор, він має спочатку викликати super(), перед використанням "this".

+ +

Можна також розширювати через extend традиційні "класи" на основі функцій:

+ +
function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(`${this.name} видає звуки.`);
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(`${this.name} гавкає.`);
+  }
+}
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні гавкає.
+
+//Заувага: Для однойменних методів, дочірній метод переважає над батьківським
+ +

Зауважте, що класи не можуть розширювати звичайні об'єкти (не конструктори). Якщо бажаєте успадкуватись від звичайного об'єкта, можете натомість використати {{jsxref("Object.setPrototypeOf()")}}:

+ +
const Animal = {
+  speak() {
+    console.log(`${this.name} видає звуки.`);
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Якщо ви цього не зробите, то отримаєте помилку, викликавши speak
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні видає звуки.
+ +

Species

+ +

Можливо, ви захочете повернути об'єкти {{jsxref("Array")}} у своєму похідному класі масиву MyArray. Шаблон species дозволяє перевизначати початкові конструктори.

+ +

Наприклад, використовуючи такі методи, як {{jsxref("Array.map", "map()")}}, що повертає конструктор за замовчуванням, ви хочете, щоб ці методи повертали батьківський об'єкт Array замість об'єкту MyArray. Символ {{jsxref("Symbol.species")}} дозволяє це зробити:

+ +
class MyArray extends Array {
+  // Заміщення Symbol.species батьківським конструктором Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+
+ +

Виклик методів суперкласу за допомогою super

+ +

Ключове слово super використовують для виклику відповідних методів суперкласу. Це одна з переваг над прототипним наслідуванням.

+ +
class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' видає звуки.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' ричить.');
+  }
+}
+
+ +

Домішки

+ +

Абстрактні підкласи, або домішки, це шаблони для створення класів. В ECMAScript підклас може мати лише один суперклас, тому множинне наслідування, наприклад, кількох класів інструментів, неможливе. Функціональність має бути надана суперкласом. 

+ +

У ECMAScript для реалізації домішок може використовуватись функція з суперкласом в якості параметра та підкласом, що розширює цей суперклас, в якості значення, що повертається:

+ +
let calculatorMixin = Base => class extends Base {
+  calc() { }
+};
+
+let randomizerMixin = Base => class extends Base {
+  randomize() { }
+};
+
+ +

Клас, що використовує ці домішки, може бути записаний так:

+ +
class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.classes")}}

+ +

Запуск у Чернетці

+ +

Клас не можна перевизначати. Якщо ви працюєте з кодом у Чернетці (меню Firefox Інструменти > Веб-розробка > Чернетка), і 'Запускаєте' визначення класу з тим самим ім'ям двічі, ви отримаєте дивну помилку SyntaxError: redeclaration of let <ім'я-класу>.

+ +

Щоб перезапустити визначення, використовуйте меню Чернетки Виконати > Перезавантажити і запустити.
+ Будь ласка, голосуйте за помилку #1428672.

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/classes/static/index.html b/files/uk/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..3f676d3d6e --- /dev/null +++ b/files/uk/web/javascript/reference/classes/static/index.html @@ -0,0 +1,137 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +tags: + - ECMAScript 2015 + - JavaScript + - Static + - Класи + - Статичний +translation_of: Web/JavaScript/Reference/Classes/static +--- +
{{jsSidebar("Classes")}}
+ +

Ключове слово static визначає статичний метод класу. Статичні методи не викликаються на екземплярах класу. Вони натомість викликаються на самому класі. Часто це допоміжні функції, такі як функції для створення чи клонування об'єктів.

+ +
{{EmbedInteractiveExample("pages/js/classes-static.html")}}
+ + + +

Синтаксис

+ +
static methodName() { ... }
+ +

Опис

+ +

Виклики статичного методу виконуються безпосередньо через клас, і неможливі на екземплярах класу. Статичні методи часто застосовуються для створення різноманітних допоміжних функцій.

+ +

Виклик статичних методів

+ +

З іншого статичного методу

+ +

Щоб звернутися до статичного методу зсередини іншого статичного методу в межах одного класу, можна використати ключове слово this.

+ +
class StaticMethodCall {
+  static staticMethod() {
+    return 'Викликано статичний метод';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' зсередини іншого статичного методу';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Викликано статичний метод'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Викликано статичний метод зсередини іншого статичного методу'
+ +

Зсередини конструктора класу, чи інших звичайних методів

+ +

Статичні методи недоступні напряму за ключовим словом this зсередини нестатичних методів. Слід викликати їх, використовуючи ім'я класу: CLASSNAME.STATIC_METHOD_NAME(); або ж звертаючись до методу як до властивості конструктора: this.constructor.STATIC_METHOD_NAME().

+ +
class StaticMethodCall {
+  constructor() {
+    console.log(StaticMethodCall.staticMethod());
+    // 'Викликано статичний метод.'
+
+    console.log(this.constructor.staticMethod());
+    // 'Викликано статичний метод.'
+  }
+
+  static staticMethod() {
+    return 'Викликано статичний метод.';
+  }
+}
+ +

Приклади

+ +

Наступний приклад демонструє декілька аспектів:

+ +
    +
  1. Яким чином статичний метод реалізується у класі.
  2. +
  3. Що цей клас із статичним членом може наслідуватись підкласом.
  4. +
  5. Як статичний метод викликати можна, а як — ні.
  6. +
+ +
class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (Створення екземпляру предка ніяк не вплинуло на метод нащадка)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.classes.static")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html new file mode 100644 index 0000000000..bb1159f6d0 --- /dev/null +++ b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html @@ -0,0 +1,293 @@ +--- +title: Deprecated and obsolete features +slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features +tags: + - Deprecated + - JavaScript + - NeedsTranslation + - Obsolete + - TopicStub +translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features +--- +

{{JsSidebar("More")}}

+ +

This page lists features of JavaScript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).

+ +

Deprecated features

+ +

These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.

+ +

RegExp properties

+ +

the following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("RegExp.n", "$1-$9")}} +

Parenthesized substring matches, if any.
+ Warning: Using these properties can result in problems, since browser extensions can modify them. Avoid them!

+
{{jsxref("RegExp.input", "$_")}}See input.
{{jsxref("RegExp.multiline", "$*")}}See multiline.
{{jsxref("RegExp.lastMatch", "$&")}}See lastMatch.
{{jsxref("RegExp.lastParen", "$+")}}See lastParen.
{{jsxref("RegExp.leftContext", "$`")}}See leftContext.
{{jsxref("RegExp.rightContext", "$'")}}See rightContext.
{{jsxref("RegExp.input", "input")}}The string against which a regular expression is matched.
{{jsxref("RegExp.lastMatch", "lastMatch")}}The last matched characters.
{{jsxref("RegExp.lastParen", "lastParen")}}The last parenthesized substring match, if any.
{{jsxref("RegExp.leftContext", "leftContext")}}The substring preceding the most recent match.
{{jsxref("RegExp.rightContext", "rightContext")}}The substring following the most recent match.
+ +

The following are now properties of RegExp instances, no longer of the RegExp object:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("RegExp.global", "global")}}Whether or not to test the regular expression against all possible matches in a string, or only against the first.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Whether or not to ignore case while attempting a match in a string.
{{jsxref("RegExp.lastIndex", "lastIndex")}}The index at which to start the next match.
{{jsxref("RegExp.multiline", "multiline")}}Whether or not to search in strings across multiple lines.
{{jsxref("RegExp.source", "source")}}The text of the pattern.
+ +

RegExp methods

+ + + +

Function properties

+ + + +

Legacy generator

+ + + +

Iterator

+ + + +

Object methods

+ + + +

Date methods

+ + + +

Functions

+ + + +

Proxy

+ + + +

Escape sequences

+ + + +

String methods

+ + + +

Obsolete features

+ +

These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.

+ +

Object

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("Global_Objects/Object/count", "__count__")}}Returns the number of enumerable properties directly on a user-defined object.
{{jsxref("Global_Objects/Object/Parent", "__parent__")}}Points to an object's context.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Evaluates a string of JavaScript code in the context of the specified object.
{{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.
+ +

Function

+ + + + + + + + + + + + +
PropertyDescription
{{jsxref("Global_Objects/Function/arity", "arity")}}Number of formal arguments.
+ +

Array

+ + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("Array.observe()")}}Asynchronously observing changes to Arrays.
{{jsxref("Array.unobserve()")}}Remove observers.
+ +

Number

+ + + +

ParallelArray

+ + + +

Statements

+ + + +

E4X

+ +

See E4X for more information.

+ +

Sharp variables

+ +

See Sharp variables in JavaScript for more information.

diff --git a/files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html new file mode 100644 index 0000000000..3dce39dba0 --- /dev/null +++ b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html @@ -0,0 +1,76 @@ +--- +title: Протокол застарілого ітератора +slug: >- + Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol +tags: + - ECMAScript 2015 + - JavaScript + - застарілий ітератор +translation_of: >- + Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol +--- +
{{jsSidebar("More")}}
+ +
Нестандартний. Протокол застарілого ітератора був особливою функціональністю SpiderMonkey, яка була прибрана у Firefox 58+. Для використання у майбутньому розгляньте цикли for..of та протокол ітератора.
+ +

Протокол застарілого ітератора лише для Firefox

+ +

Firefox, до версії 26, реалізовував інший протокол ітератора, схожий на стандартний Протокол ітератора ES2015.

+ +

Об'єкт є застарілим ітератором, коли реалізує метод next() з наступною семантикою, та викидає {{jsxref("Global_Objects/StopIteration", "StopIteration")}} в кінці перебору.

+ + + + + + + + + + + + +
ВластивістьЗначення
nextФункція з нулем аргументів, яка повертає значення.
+ +

Різниця між протоколами ітератора ES2015 та застарілого ітератора

+ + + +

Простий приклад зі старим протоколом

+ +
function makeIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex < array.length){
+               return array[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // перебір завершено
+    }
+}
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/errors/cant_delete/index.html b/files/uk/web/javascript/reference/errors/cant_delete/index.html new file mode 100644 index 0000000000..91369f763c --- /dev/null +++ b/files/uk/web/javascript/reference/errors/cant_delete/index.html @@ -0,0 +1,59 @@ +--- +title: 'TypeError: property "x" is non-configurable and can''t be deleted' +slug: Web/JavaScript/Reference/Errors/Cant_delete +tags: + - JavaScript + - TypeError + - Строгий режим + - помилка +translation_of: Web/JavaScript/Reference/Errors/Cant_delete +--- +
{{jsSidebar("Errors")}}
+ +

Повідомлення

+ +
TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
+TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+TypeError: Cannot delete property 'x' of #<Object> (Chrome)
+
+ +

Тип помилки

+ +

{{jsxref("TypeError")}} тільки у строгому режимі.

+ +

Що сталось?

+ +

Була спроба видалити властивість, але ця властивість недоступна для налаштування. Атрибут configurable котролює, чи властивість об'єкта може бути видалена, та чи можна змінювати її атрибути (інші, крім writable).

+ +

Ця помилка виникає лише у строгому режимі. У нестрогому режимі оператор повертає false.

+ +

Приклади

+ +

Властивості, недоступні для налаштування, не є дуже поширеними, але їх можна створити за допомогою {{jsxref("Object.defineProperty()")}} або {{jsxref("Object.freeze()")}}.

+ +
'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+delete obj.score;  // TypeError
+
+'use strict';
+var obj = {};
+Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
+delete obj.foo;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+
+ +

Існують також кілька недоступних для налаштування властивостей, вбудованих у JavaScript. Можливо, ви намагались видалити математичну константу.

+ +
'use strict';
+delete Math.PI;  // TypeError
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html new file mode 100644 index 0000000000..226aba7150 --- /dev/null +++ b/files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html @@ -0,0 +1,93 @@ +--- +title: 'Warning: Date.prototype.toLocaleFormat is deprecated' +slug: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat +tags: + - Error + - JavaScript + - застереження +translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat +--- +
{{jsSidebar("Errors")}}
+ +

Застереження JavaScript "Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead" виникає, коли використовується нестандартний метод {{jsxref("Date.prototype.toLocaleFormat")}}.

+ +

Повідомлення

+ +
Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+
+ +

Тип помилки

+ +

Застереження. Виконання JavaScript не буде зупинене.

+ +

Що сталось?

+ +

Нестандартний метод {{jsxref("Date.prototype.toLocaleFormat")}} застарів та більше не рекомендований до використання. Він використовує рядок форматування в такому ж форматі, який очікується функцією strftime() у C. Функція більше недоступна у Firefox 58+.

+ +

Приклади

+ +

Застарілий синтаксис

+ +

Метод {{jsxref("Date.prototype.toLocaleFormat")}} застарів та буде прибраний (без кросбраузерної підтримки, доступний лише у Firefox).

+ +
var today = new Date();
+var date = today.toLocaleFormat('%A, %e. %B %Y');
+
+console.log(date);
+// У німецькій локалі
+// "Freitag, 10. März 2017"
+ +

Альтернативний стандартний синтаксис за допомогою ECMAScript Intl API

+ +

Стандарт ECMA-402 (ECMAScript Intl API) визначає стандартні об'єкти та методи, які вможливлюють чутливе до мови форматування дати та часу (доступні у Chrome 24+, Firefox 29+, IE11+, Safari10+).

+ +

Ви тепер можете або використати метод {{jsxref("Date.prototype.toLocaleDateString")}}, якщо ви бажаєте просто відформатувати одну дату.

+ +
var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('de-DE', options);
+
+console.log(date);
+// "Freitag, 10. März 2017"
+
+ +

Або ви можете скористатись об'єктом {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}, який дозволяє кешувати об'єкт, в якому більшість обчислень вже зроблені, тому форматування відбувається швидко. Це корисно, якщо у вас є цикл дат для форматування.

+ +
var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date => console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+
+ +

Альтернативний стандартний синтаксис з використанням методів Date

+ +

Об'єкт {{jsxref("Date")}} пропонує декілька методів для створення налаштованого рядка дати.

+ +
(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+
+ +

Можна перетворити на:

+ +
let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/errors/index.html b/files/uk/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/uk/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +

{{jsSidebar("Errors")}}

+ +

Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a name and a message.

+ +

Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.

+ +

List of errors

+ +

In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!

+ +

{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}

+ +

See also

+ + diff --git a/files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html new file mode 100644 index 0000000000..f856c96758 --- /dev/null +++ b/files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html @@ -0,0 +1,77 @@ +--- +title: 'SyntaxError: for-in loop head declarations may not have initializers' +slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer +tags: + - Error + - JavaScript + - SyntaxError + - Строгий режим + - помилка +translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer +--- +
{{jsSidebar("Errors")}}
+ +

Виняток, що викидається лише у строгому режимі JavaScript, "for-in loop head declarations may not have initializers", виникає, коли шапка циклу for...in містить вираз ініціалізації, наприклад |for (var i = 0 in obj)|. Це не дозволено у циклах for-in у строгому режимі.

+ +

Повідомлення

+ +
SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
+SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+
+ +

Тип помилки

+ +

{{jsxref("SyntaxError")}} лише у строгому режимі.

+ +

Що сталось?

+ +

Шапка циклу for...in містить вираз ініціалізації. Тобто, було оголошено змінну та присвоєно їй значення |for (var i = 0 in obj)|. У нестрогому режимі таке оголошення просто ігнорується та сприймається як |for (var i in obj)|. Однак, у строгому режимі викидається помилка SyntaxError.

+ +

Приклади

+ +

Цей приклад викидає помилку SyntaxError:

+ +
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+
+ +

Правильний цикл for-in

+ +

Ви можете прибрати ініціалізатор (i = 0) з шапки циклу for-in.

+ +
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+
+ +

Перебір масиву

+ +

Цикл for...in не варто використовувати для перебору масиву. Чи намагались ви використати цикл for замість for-in для перебору {{jsxref("Array", "масиву")}}? Цикл for також дозволяє використання ініціалізатора:

+ +
var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/errors/json_bad_parse/index.html b/files/uk/web/javascript/reference/errors/json_bad_parse/index.html new file mode 100644 index 0000000000..a4f20078c6 --- /dev/null +++ b/files/uk/web/javascript/reference/errors/json_bad_parse/index.html @@ -0,0 +1,112 @@ +--- +title: 'SyntaxError: JSON.parse: bad parsing' +slug: Web/JavaScript/Reference/Errors/JSON_bad_parse +tags: + - JSON + - JavaScript + - Method + - Property + - SyntaxError + - Помилки +translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse +--- +
{{jsSidebar("Errors")}}
+ +

Повідомлення

+ +
SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+
+ +

Тип помилки

+ +

{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}

+ +

Що трапилося?

+ +

Метод {{jsxref("JSON.parse()")}} здійснює розбір JSON в переданому рядку. Він викидає цю помилку, якщо рядок містить неправильний JSON (виявлено неналежний синтаксис).

+ +

Приклади

+ +

JSON.parse() не дозволяє використовувати прикінцеві коми

+ +

Обидва наведені рядки викидають SyntaxError:

+ +
JSON.parse('[1, 2, 3, 4,]');
+JSON.parse('{"foo": 1,}');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+
+ +

Задля належного розбору JSON оминайте використання прикінцевих ком:

+ +
JSON.parse('[1, 2, 3, 4]');
+JSON.parse('{"foo": 1}');
+ +

Ім'я властивості має бути рядком в подвійних лапках

+ +

Не можна використовувати одинарні лапки, як-от 'foo':

+ +
JSON.parse("{'foo': 1}");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data
+ +

Натомість має бути "foo":

+ +
JSON.parse('{"foo": 1}');
+ +

Провідні нулі та десяткові крапки

+ +

Не можна вказувати провідні нулі (як у числі 01) та розділові крапки без якнайменше одного десяткового знака:

+ +
JSON.parse('{"foo": 01}');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"foo": 1.}');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+
+ +

Провідні нулі приберіть, а на місці відсутніх десяткових знаків (якщо жодного значущого немає) напишіть просто нуль:

+ +
JSON.parse('{"foo": 1}');
+JSON.parse('{"foo": 1.0}');
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/errors/more_arguments_needed/index.html b/files/uk/web/javascript/reference/errors/more_arguments_needed/index.html new file mode 100644 index 0000000000..c0ede70788 --- /dev/null +++ b/files/uk/web/javascript/reference/errors/more_arguments_needed/index.html @@ -0,0 +1,46 @@ +--- +title: 'TypeError: More arguments needed' +slug: Web/JavaScript/Reference/Errors/More_arguments_needed +translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed +--- +
{{jsSidebar("Errors")}}
+ +

Помилка

+ +
TypeError: Object.create requires more than 0 arguments
+TypeError: Object.setPrototypeOf requires more than 1 argument
+TypeError: Object.defineProperties requires more than 0 arguments
+
+ +

Тип помилки

+ +

{{jsxref("TypeError")}}.

+ +

Щось пішло не так?

+ +

Для виконання функції потрібні аргументи функції. Справа в тому, що для виконання функції потрібні параметри, ви повинні вказати їх на початок визову функції, в дужках.

+ +

Приклади

+ +

Визов Object.create() функції потребує щонайменьше один! аргумент.

+ +

Визов Object.setPrototypeOf({}) методу(функції) потребує два! аргументи.

+ +
var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+
+ +

Це можливо виправити вказавши аргументи функції під час визову, наприклад:

+ +
var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);
+ +

Дивись також

+ + diff --git a/files/uk/web/javascript/reference/errors/negative_repetition_count/index.html b/files/uk/web/javascript/reference/errors/negative_repetition_count/index.html new file mode 100644 index 0000000000..7d0dc1abfb --- /dev/null +++ b/files/uk/web/javascript/reference/errors/negative_repetition_count/index.html @@ -0,0 +1,48 @@ +--- +title: 'RangeError: repeat count must be non-negative' +slug: Web/JavaScript/Reference/Errors/Negative_repetition_count +tags: + - Error + - JavaScript + - RangeError + - String + - помилка + - рядок +translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count +--- +
{{jsSidebar("Errors")}}
+ +

Повідомлення

+ +
RangeError: argument out of range
+RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+
+ +

Тип помилки

+ +

{{jsxref("RangeError")}}

+ +

Що сталось?

+ +

Був викликаний метод {{jsxref("String.prototype.repeat()")}}. Він має параметр count, що вказує, скільки разів потрібно повторити рядок. Його значення має бути від 0 та менше за позитивну {{jsxref("Infinity","нескінченність")}}, та не може бути від'ємним числом. Діапазон дозволених значень можна описати так: [0, +∞).

+ +

Приклади

+ +

Помилкове використання

+ +
'абв'.repeat(-1); // RangeError 
+ +

Правильне використання

+ +
'абв'.repeat(0);    // ''
+'абв'.repeat(1);    // 'абв'
+'абв'.repeat(2);    // 'абвабв'
+'абв'.repeat(3.5);  // 'абвабвабв' (count буде перетворений на ціле число)
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/errors/not_a_constructor/index.html b/files/uk/web/javascript/reference/errors/not_a_constructor/index.html new file mode 100644 index 0000000000..cf4e4a383a --- /dev/null +++ b/files/uk/web/javascript/reference/errors/not_a_constructor/index.html @@ -0,0 +1,91 @@ +--- +title: 'TypeError: "x" is not a constructor' +slug: Web/JavaScript/Reference/Errors/Not_a_constructor +translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor +--- +
{{jsSidebar("Errors")}}
+ +

Повідомлення

+ +
TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+
+ +

Тип помилки

+ +

{{jsxref("TypeError")}}

+ +

В чому справа?

+ +

Була спроба використати об'єкт чи змінну як конструктор, але сам об'єкт чи змінна не є конструктором. Дивись {{Glossary("constructor")}} чи new operator для більш детальної інформації.

+ +

У JavaScript існує багато глобальних об'єктів, наприклад {{jsxref("String")}} чи {{jsxref("Array")}}, які можуть створюватись конструкторами використовуючи синтаксис new. Однак, деякі глобальні об'єкти не можуть, їх властивості і методи статичні. Наступні об'єкти являються стандартом JavaScript, вони вбудовані і не мають конструкторів: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.

+ +

Генератори функцій не можуть використовуватись також.

+ +

Приклади

+ +

Помилкові випадки

+ +
var Car = 1;
+new Car();
+// TypeError: Car не має конструктора
+
+new Math();
+// TypeError: Math не є конструктором
+
+new Symbol();
+// TypeError: Symbol не є конструктором
+
+function* f() {};
+var obj = new f;
+// TypeError: f не є конструктором
+
+ +

Конструктор Car

+ +

Для того щоб створити класс-конструктор, потрібно вказати його як функцію. В дужках ви можете вказати його статичні методи, наприклад виробника, модель, рік створення автомобілю. Щоб зробити це опишіть свою модель наступним чином:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

Тепер ви можете створювати об'єкти классу Car, наприклад mycar:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+ +

Обіцянка

+ +

Спроба повернути з функції екземляр класу, з виконанням його методу, під час виконання якоїсь функції(з ходу), вам не потрібно використовувати синтаксис типу new Promise(...).

+ +

Це є помилкою(виклик конктруктору класу Promise поза синтаксисом), виконання коду буде зупинено з помилкою TypeError: this is not a constructor вийняток:

+ +
return new Promise.resolve(true);
+
+ +

Замість цього використовуй статичні методи  класу Promise.resolve() чи Promise.reject() static methods:

+ +
// Це допустимо, але дуже нечитабельний синтаксис:
+return new Promise((resolve, reject) => { resolve(true); })
+
+// Замість цього, просто використовуйте статичні методи класу Promise:
+return Promise.resolve(true);
+return Promise.reject(false);
+
+ +

Дивись також

+ + diff --git a/files/uk/web/javascript/reference/errors/not_a_function/index.html b/files/uk/web/javascript/reference/errors/not_a_function/index.html new file mode 100644 index 0000000000..6130a8bef2 --- /dev/null +++ b/files/uk/web/javascript/reference/errors/not_a_function/index.html @@ -0,0 +1,124 @@ +--- +title: 'TypeError: "x" не є функцією' +slug: Web/JavaScript/Reference/Errors/Not_a_function +tags: + - JavaScript + - TypeError + - Помилки +translation_of: Web/JavaScript/Reference/Errors/Not_a_function +--- +
{{jsSidebar("Errors")}}
+ +

Повідомлення

+ +
TypeError: "x" не є функцією
+
+ +

Тип помилки

+ +

{{jsxref("TypeError")}}.

+ +

Що пішло не так?

+ +

Була спроба викликати значення з функції, але значення насправді не є функцією. Деякий код очікує, що ви надішлете функцію, але це не відбулося.

+ +

Можило в назві функції є опечатка? Можливо метод, що викликаєтся на об'єкті не має цієї функції? Наприклад, об'єкти JavaScript не мають функції map , але об'єкт масиву JavaScript має.

+ +

Є багато вбудованих функцій, які потребують функцій зворотнього виклику. Вам доведеться надати функцію, щоб ці методи працювали належним чином:

+ + + +

Приклади

+ +

Помилка в назві фунції

+ +

В цьому випадку, що трапляється занадто часто, в назві методу є помилка:

+ +
var x = document.getElementByID('foo');
+// TypeError: document.getElementByID is not a function
+
+ +

Правильна назва функції є getElementById:

+ +
var x = document.getElementById('foo');
+
+ +

Функція, що викликана на неправильному об'єкті

+ +

Для деяких методів вам необхідно надати функцію зворотнього виклику, і вона буде працювати тільки на певних об'єктах. Наприклад, використано {{jsxref("Array.prototype.map()")}}, який буде працювати лише з об'єктом {{jsxref("Array")}}.

+ +
var obj = {a: 13, b: 37, c: 42};
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function
+ +

Використовуйте замість цього масив:

+ +
var numbers = [1, 4, 9];
+
+numbers.map(function(num) {
+  return num * 2;
+});
+
+// Array [2, 8, 18]
+
+ +

Функція має назву, що співпадає з існуючою раніш властивістю

+ +

Іноді під час створення класу ви можете мати властивість та функцію з тим самим ім'ям. Після виклику функції компілятор вважає, що функція перестає існувати.

+ +
var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.name = "Ralph";
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.name = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
+
+ +

Використовуйте інше ім'я властивості:

+ +
var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.dogName = "Ralph"; //Using this.dogName instead of .name
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.dogName = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
+
+ +

Дивись також

+ + diff --git a/files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html new file mode 100644 index 0000000000..3ece6370b3 --- /dev/null +++ b/files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html @@ -0,0 +1,53 @@ +--- +title: 'RangeError: repeat count must be less than infinity' +slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large +tags: + - Error + - JavaScript + - RangeError + - String + - помилка + - рядок +translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large +--- +
{{jsSidebar("Errors")}}
+ +

Повідомлення

+ +
RangeError: argument out of range (Edge)
+RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+
+RangeError: Invalid count value (Chrome)
+
+ +

Тип помилки

+ +

{{jsxref("RangeError")}}

+ +

Що сталось?

+ +

Був викликаний метод {{jsxref("String.prototype.repeat()")}}. Він має параметр count, що вказує, скільки разів потрібно повторити рядок. Його значення має бути від 0 та менше за позитивну {{jsxref("Infinity","нескінченність")}}, та не може бути від'ємним числом. Діапазон дозволених значень можна описати так: [0, +∞).

+ +

Отриманий в результаті рядок також не може бути більшим за максимальний розмір рядка, який може відрізнятись між рушіями JavaScript. У Firefox (SpiderMonkey) максимальний розмір рядка дорівнює 228 -1 (0xFFFFFFF).

+ +

Приклади

+ +

Помилкове використання

+ +
'абв'.repeat(Infinity); // RangeError
+'а'.repeat(2**28);      // RangeError
+
+ +

Правильне використання

+ +
'абв'.repeat(0);    // ''
+'абв'.repeat(1);    // 'абв'
+'абв'.repeat(2);    // 'абвабв'
+'абв'.repeat(3.5);  // 'абвабвабв' (count буде перетворений на ціле число)
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html new file mode 100644 index 0000000000..247d90c724 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html @@ -0,0 +1,77 @@ +--- +title: 'arguments[@@iterator]()' +slug: Web/JavaScript/Reference/Functions/arguments/@@iterator +tags: + - JavaScript + - arguments + - Властивість + - функції +translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator +--- +
{{jsSidebar("Functions")}}
+ +

Початковим значенням властивості @@iterator є та сама функція, що є початковим значенням властивості {{jsxref("Array.prototype.values")}}.

+ +

Синтаксис

+ +
arguments[Symbol.iterator]()
+ +

Приклади

+ +

Перебір за допомогою циклу for...of

+ +
function f() {
+  // ваш переглядач має підтримувати цикл for..of
+  // та оголошення змінних у циклах for через let
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}{{Spec2('ES6')}}Початкове визначення.
{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}{{Spec2('ES6')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}{{Spec2('ESDraft')}}
{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.functions.arguments.@@iterator")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/functions/arguments/caller/index.html b/files/uk/web/javascript/reference/functions/arguments/caller/index.html new file mode 100644 index 0000000000..3695367816 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/arguments/caller/index.html @@ -0,0 +1,55 @@ +--- +title: arguments.caller +slug: Web/JavaScript/Reference/Functions/arguments/caller +tags: + - Functions + - JavaScript + - arguments + - Властивість + - застаріла +translation_of: Archive/Web/JavaScript/arguments.caller +--- +
{{jsSidebar("Functions")}}
+ +

{{obsolete_header}}

+ +

Застаріла властивість arguments.caller використовувалась, щоб надавати функцію, яка викликала поточну функцію, що виконується. Ця властивість була прибрана та більше не працює.

+ +

Опис

+ +

Ця властивість більше недоступна, але ви можете скористатись {{jsxref("Function.caller")}}.

+ +
function whoCalled() {
+   if (whoCalled.caller == null)
+      console.log('Я викликана з глобальної області видимості.');
+   else
+      console.log('Функція ' + whoCalled.caller + ' викликала мене!');
+}
+ +

Приклади

+ +

Наступний код використовувався для перевірки значення arguments.caller у функції, але він більше не працює.

+ +
function whoCalled() {
+   if (arguments.caller == null)
+      console.log('Я викликана з глобальної області видимості.');
+   else
+      console.log('Функція ' + arguments.caller + ' викликала мене!');
+}
+
+ +

Специфікації

+ +

Не є частиною жодного стандарту. Реалізована у JavaScript 1.1 та прибрана у {{bug(7224)}} через потенційну вразливість для безпеки.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.functions.arguments.caller")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/functions/arguments/index.html b/files/uk/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..90a2963025 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,282 @@ +--- +title: Об'єкт arguments +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - JavaScript + - аргументи + - методи + - функції +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +
+
{{jsSidebar("Functions")}}
+
+ +

Подібний до масиву об'єкт arguments описує аргументи, які було передано у функцію.

+ +

Синтаксис

+ +
arguments
+
+ +

Опис

+ +

Об'єкт arguments — це локальна змінна, яка доступна всередині кожної функції. Цей об'єкт містить інформацію про кількість та значення всіх параметрів, що їх було передано до функції під час її виклику. Для читання чи змінювання значень аргументів можна скористатися синтаксисом доступу до елементів масиву, де індекс першого переданого аргументу починається з 0.

+ +

Для прикладу, якщо в функцію передано три аргументи, звернутися до них можна так:

+ +
arguments[0]
+arguments[1]
+arguments[2]
+
+ +

Значення можна не лише читати, а й змінювати таким чином:

+ +
arguments[1] = 'new value';
+
+ +

Об'єкт arguments не є {{jsxref("Array", "масивом")}}. Він подібний до масиву, але не має жодних властивостей масиву, крім length (довжини). Наприклад, він не має методу pop. Проте його можна перетворити на справжній масив:

+ +
var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+
+ +

Також можна скористатися методом {{jsxref("Array.from()")}} або оператором розпакування, щоб перетворити arguments на справжній масив:

+ +
var args = Array.from(arguments);
+
+// ES2015
+var args = [...arguments];
+
+ +
+

Застосування методу slice до arguments заважає оптимізації в деяких рушіях JavaScript (наприклад, V8). Отже, якщо вас це обходить, створюйте новий масив шляхом перебору елементів псевдомасиву arguments. Можна також скористатися конструктором Array як функцією:

+ +
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
+
+
+ +

Об'єкт arguments корисний в тих випадках, коли кількість аргументів функції заздалегідь невідома. Існує чимало прикладів того, коли функцію можна викликати із різною множиною аргументів, реалізуючи таким чином поведінку на кшталт «перевантаження», яке в чистому вигляді відсутнє в JavaScript. Очевидно, що така «перевантажена» функція не завше може задовольнитися переліком формальних аргументів однієї сигнатури. Саме тут arguments може стати в нагоді.

+ +

Завважте, що властивість arguments.length — це кількість фактичних (а не формальних) аргументів, які дійсно було передано до функції. Натомість для визначення кількості формальних параметрів, оголошених сигнатурою функції, скористайтесь властивістю Function.length.

+ +

Як свідчить typeof, arguments є об'єктом:

+ +
console.log(typeof arguments);  // 'object'
+ +

Тип кожного окремого аргументу можна визначити за допомогою typeof та індексації псевдомасиву arguments:

+ +
console.log(typeof arguments[0]);  // значення typeof конкретного аргументу
+ +

Властивості

+ +
+
arguments.callee
+
Посилання на функцію, що саме виконується.
+
arguments.caller {{ Obsolete_inline() }}
+
Посилання на функцію, з якої здійснили виклик поточної (яка саме виконується).
+
arguments.length
+
Кількість аргументів, що було фактично передано до функції.
+
arguments[@@iterator]
+
Вертає новий ітератор масиву, що містить значення за кожним індексом в arguments.
+
+ +

Приклади

+ +

Функція, що з'єднує кілька рядків

+ +

В цьому прикладі наведно функцію, яка з'єднує кілька рядків в один. Єдиний формальний аргумент функції — це рядок, що виступатиме розділовою послідовністю символів між складовими, що підлягають з'єднуванню. Це можна втілити наступним чином:

+ +
function myJoin(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}
+ +

Отже, можна передавати довільну кількість аргументів, послідовність яких (окрім першого, що виступає розділовою послідовністю символів) перетворюється на масив, а тоді з'єднується за допомогою {{jsxref("Array.join()")}}.

+ +

Отож маємо:

+ +
// вертає "камінь, ножиці, папір"
+myJoin(", ", "камінь", "ножиці", "папір");
+
+// вертає "я; дух; одвічна стихія; потопа"
+myJoin("; ", "я", "дух", "одвічна стихія", "потопа");
+
+// вертає "Чому Пінгвіни Живуть Зимою Без Своїх Фантазій"
+myJoin(" ", "Чому", "Пінгвіни", "Живуть", "Зимою", "Без", "Своїх", "Фантазій");
+ +

Функція, що створює HTML-списки

+ +

В наступному прикладі наведено функцію, що створює HTML-розмітку списку. Єдиний формальний аргумент функції — текстовий рядок, що визначає різновид списку ("o" для впорядкованого списку, чи то пак — нумерованого, — або "u" для невпорядкованого). Решта аргументів, визначатиме власне елементи списку. Одна з можливих реалізацій виглядає наступним чином:

+ +
function list(type) {
+  var markup = "<" + type + "l>";
+
+  for (var i = 1; i < arguments.length; i++) {
+    markup += "<li>" + arguments[i] + "</li>";
+  }
+  markup += "</" + type + "l>";
+
+  return markup
+}
+ +

До функції можна передати будь-яку кількість аргументів, створивши список з довільною кількістю елементів. Наприклад, так:

+ +
var markup = list("u", "Крижина", "Стежина", "Чужина");
+
+console.log(markup);  // виводить "<ul><li>Крижина</li><li>Стежина</li><li>Чужина</li><ul>"
+
+ +

Решта, типові та деструктуризовані параметри

+ +

Об'єкт arguments можна використовувати в поєднанні з рештою, типовими та деструктуризованими параметрами.

+ +
function foo(...args) {
+  return arguments;
+}
+
+foo(1, 2, 3);  // вертає {"0": 1, "1": 2, "2": 3}
+
+ +

І хоча присутність решти, типових чи деструктуризованих параметрів не змінює поведінки об'єкта arguments в суворому режимі, в звичайному режимі все ж є невеличка різниця. За відсутності решти, типових чи деструктуризованих параметрів функція, яка виконується в звичайному (не в суворому) режимі, передбачає збереження зв'язку між значеннями формальних параметрів та значеннями, що їх містить об'єкт arguments:

+ +
function foo(a) {
+  arguments[0] = 99;  // змінюючи arguments[0] ми також змінюємо a
+  console.log(a);
+}
+
+foo(10);  // 99
+ +

І навпаки:

+ +
function foo(a) {
+  a = 99;  // змінюючи a ми також змінюємо arguments[0]
+  console.log(arguments[0]);
+}
+
+foo(10);  // 99
+ +

Натомість, наявність таких (решти, типових чи деструктуризованих) параметрів той зв'язок порушує:

+ +
function foo(a = 55) {
+  arguments[0] = 99;  // змінюючи arguments[0] ми більше не впливаємо на a
+  console.log(a);
+}
+
+foo(10); // 10
+ +

І навпаки:

+ +
function foo(a = 55) {
+  a = 99;  // змінюючи a ми більше не впливаємо на arguments[0]
+  console.log(arguments[0]);
+}
+
+foo(10); // 10
+ +

Ба більше:

+ +
function foo(a = 55) {
+  console.log(arguments[0]);
+}
+
+foo();  // undefined
+ +

Ясна річ, цей зв'язок поширюється лише на значення змінних, а не на вміст об'єктів:

+ +
function foo(object = {}) {
+  object.value = 222;
+  console.debug(arguments[0].value);
+}
+
+foo({value: 111});  // Object {value: 222}
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/functions/arguments/length/index.html b/files/uk/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..77246c5b4e --- /dev/null +++ b/files/uk/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,85 @@ +--- +title: arguments.length +slug: Web/JavaScript/Reference/Functions/arguments/length +tags: + - JavaScript + - arguments + - Властивість + - функції +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +
{{jsSidebar("Functions")}}
+ +

Властивість arguments.length містить кількість аргументів, переданих у функцію.

+ +

Синтаксис

+ +
arguments.length
+ +

Опис

+ +

Властивість arguments.length надає кількість аргументів, які фактично передані у функцію. Вона може бути більшою або меншою, ніж визначена кількість параметрів (дивіться {{jsxref("Function.length")}}).

+ +

Приклади

+ +

Використання arguments.length

+ +

В цьому прикладі ми визначаємо функцію, яка рахує суму двох або більше аргументів.

+ +
function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i < arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+
+ +
+

Зауважте різницю між {{jsxref("Function.length")}} та arguments.length

+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.functions.arguments.length")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/functions/get/index.html b/files/uk/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..00b002aad0 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/get/index.html @@ -0,0 +1,175 @@ +--- +title: гетер +slug: Web/JavaScript/Reference/Functions/get +tags: + - ECMAScript 2015 + - ECMAScript 5 + - JavaScript + - функції +translation_of: Web/JavaScript/Reference/Functions/get +--- +
{{jsSidebar("Functions")}}
+ +

Синтаксис get прив'язує властивість об'єкта до функції, яка викликатиметься під час звернення до властивості.

+ +
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+ + + +

Синтаксис

+ +
{get prop() { ... } }
+{get [expression]() { ... } }
+ +

Параметри

+ +
+
prop
+
Ім'я властивості, яка прив'язується до наданої функції.
+
expression
+
Починаючи з ECMAScript 2015, ви також можете використовувати вираз для обчислюваного імені властивості, яка прив'язується до наданої функції.
+
+ +

Опис

+ +

Іноді потрібно надати доступ до властивості, яка повертає динамічно обчислюване значення, або ви можете захотіти відобразити статус внутрішньої змінної без потреби використовувати явні виклики методів. У JavaScript це можна здійснити використанням гетера.

+ +

Змінна не може одночасно мати прив'язаний гетер та містити значення, але можливо використати гетер в поєднанні з сетером, щоб створити свого роду псевдовластивість.

+ +

Пам'ятайте наступне, працюючи з синтаксисом get:

+ + + +

Приклади

+ +

Визначення гетерів на нових об'єктах у об'єктних ініціалізаторах

+ +

Це створить псевдовластивість latest для об'єкта obj, яка повертатиме останній елемент масиву у log.

+ +
const obj = {
+  log: ['приклад','тест'],
+  get latest() {
+    if (this.log.length === 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "тест"
+
+ +

Зауважте, що спроба присвоїти значення latest не змінить її.

+ +

Видалення гетера оператором delete

+ +

Якщо вам потрібно прибрати гетер, ви можете його просто {{jsxref("Operators/delete", "видалити")}}:

+ +
delete obj.latest;
+
+ +

Визначення гетера на існуючому об'єкті за допомогою defineProperty

+ +

Щоб додати гетер до існуючого об'єкта пізніше в будь-який момент, використовуйте {{jsxref("Object.defineProperty()")}}.

+ +
const o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Запускає гетер, який вертає a + 1 (тобто 1)
+ +

Використання обчислюваного імені властивості

+ +
const expr = 'foo';
+
+const obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"
+ +

Розумні / самопереписувані / ліниві гетери

+ +

Гетери дають можливість визначити властивість об'єкта, але вони не обчислюють значення властивості до звернення. Гетер відкладає вартість обчислення значення, доки значення не знадобиться. Якщо воно ніколи не знадобиться, ви ніколи за це не заплатите.

+ +

Додаткова техніка оптимізації, що полягає у відкладені обчислення значення властивості та кешуванні її для пізнішого звернення, створює розумні (або "мемоізовані") гетери. Значення обчислюється під час першого виклику гетера, після чого кешується, а отже, наступні виклики повертають кешоване значення, не переобчислюючи його. Це неймовірно корисно у наступних ситуаціях:

+ + + +
+

Це означає, що не варто писати лінивий гетер для властивості, чиє значення ви плануєте змінювати, бо, якщо гетер лінивий, він не буде його переобчислювати.

+ +

Зауважте, що гетери не є ані “лінивими”, ані “мемоізованими” від природи; ви маєте реалізувати цю техніку, якщо вам потрібна така поведінка.

+
+ +

У наступному прикладі об'єкт має гетер як особисту властивість. Під час отримання властивості вона видаляється з об'єкта та повторно додається, але цього разу неявно, як властивість-значення. Наприкінці повертається значення.

+ +
get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},
+ +

Для коду Firefox, дивіться також модуль XPCOMUtils.jsm, який визначає функцію defineLazyGetter().

+ +

get проти defineProperty

+ +

Хоча ключове слово get та метод {{jsxref("Object.defineProperty()")}} дають схожі результати, існує тонка різниця між ними при використанні з {{jsxref("classes", "класами")}}.

+ +

При використанні get, властивість буде визначена на прототипі екземпляру, в той час як {{jsxref("Object.defineProperty()")}} визначає властивість на екземплярі, до якого застосовується.

+ +
class Example {
+  get hello() {
+    return 'привіт';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "привіт"
+
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+
+console.log(
+  Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(obj), 'hello'
+  )
+);
+// { configurable: true, enumerable: false, get: function get hello() { return 'привіт'; }, set: undefined }
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікації
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.functions.get")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/functions/index.html b/files/uk/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..c8edad0b53 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/index.html @@ -0,0 +1,605 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +translation_of: Web/JavaScript/Reference/Functions +--- +
AEA{{jsSidebar("Functions")}}
+ +

Загалом функція - це "підпрограма", що може бути викликана за допомогою зовнішнього (або внутрішнього у випадку рекурсії) коду. Так само, як і програма, функція складається з послідовності інструкцій, що називаються тілом функції. Функція приймає значення і вертає також значення.
+
+ В JavaScript, функції - це об'єкти першого класу (first-class objects). Вони можуть мати властивості (properties) та методи (methods) так само, як і будь-які інші об'єкти. Вирізняє їх від інших об'єктів те, як вони викликаються. Загалом, функції є функціональними об'єктами (Function objects).
+
+ Додаткові приклади і пояснення, див. також на JavaScript guide about functions.

+ +

Опис

+ +

Кожна функція в JavaScript є об'єктом. Перегляньте {{jsxref("Function")}}, для отримання інформації про властивості та методи, об'єктів функцій.

+ +

Функції не те ж саме, що й процедури. Функція завжди повертає значення, а процедура може не завжди повертати значення.

+ +

Щоб повернути значення інше ніж default (за замовчуванням), функція мусить мати return оператор, який визначає яке значення має бути повернуто. Функція без оператора return буде повертати значення, яке встановлене за замовчуванням(default).
+
+ У випадку, коли конструктор (constructor) викликається з оператором new, дефолтним значенням стає значення параметра this. Для всіх інших функцій значення, яке буде повертатися за замовчуванням буде {{jsxref("undefined")}}.

+ +

Параметри, що передаються при виклику функції, називаютьсяаргументами. Аргументи передаються в функцію за значенням. При зміні значення аргументу, ця зміна жодним чином не відображається в глобальній області видимості або в функціі виклику.
+
+ However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:

+ +
/* Оголошення функції 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Оголошення змінної 'mycar';
+  * створення і ініціалізація нового об'єкту;
+  * присвоєння об'єкту до 'mycar'
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Виведе 'Honda' */
+ console.log(mycar.brand);
+
+ /* Pass object reference to the function */
+ myFunc(mycar);
+
+ /*
+  * Logs 'Toyota' as the value of the 'brand' property
+  * of the object, as changed to by the function.
+  */
+ console.log(mycar.brand);
+
+ +

The this keyword does not refer to the currently executing function, so you must refer to Function objects by name, even within the function body.

+ +

Оголошення функцій

+ +

Є кілька способів оголошення функції:

+ +

The function declaration (function statement)

+ +

Існує спеціальний синтаксис для оголошення функцій (докладніше див. function statement): 

+ +
function name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Назва функціі.
+
+ +
+
param
+
Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.
+
+ +
+
statements
+
Інструкціі, що складають тіло функціі.
+
+ +

The function expression (function expression)

+ +

Функціональний вираз схожиий на оголошення функції (function declaration) і має такий самий синтаксис (докладніше див. function expression):

+ +
function [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Назва функції. Може бути пропущена, тоді функція стане анонімною.
+
+ +
+
param
+
Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.
+
statements
+
Інструкціі, що складають тіло функціі.
+
+ +

The generator function declaration (function* statement)

+ +
+

Примітка:  Generator functions є експериментальною технологією, частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.

+
+ +

There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Назва функції.
+
+ +
+
param
+
Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.
+
+ +
+
statements
+
Інструкціі, що складають тіло функціі.
+
+ +

The generator function expression (function* expression)

+ +
+

Примітка:  Generator functions є експериментальною технологією, частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.

+
+ +

A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):

+ +
function* [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Назва функції. Може бути пропущена, тоді функція стане анонімною.
+
+ +
+
param
+
Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.
+
statements
+
Інструкціі, що складають тіло функціі.
+
+ +

The arrow function expression (=>)

+ +
+

Примітка: Стрілочні функції (arrow function expressions) є експериментальною технологією, частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.

+
+ +

Стрілочні функції (arrow function expression) мають коротший синтаксис і лексично прив'язують значення this (докладніше див. arrow functions):

+ +
([param[, param]]) => {
+   statements
+}
+
+param => expression
+
+ +
+
param
+
Назва аргументу. Якщо функція не має аргументів, це позначається скобками (). Якщо функція приймає тільки один аргумент, скобки можна опустити (як в foo => 1).
+
statements or expression
+
Декілька інструкції повинні бути в квадратних скобках. Якщо тіло функції містить тільки одну інструкцію, скобки можна опустити. Ця інструкція також є неявним зворотним значенням функції. 
+
+ +

The Function constructor

+ +
+

Примітка: Використання конструктора Function для створення  функцій не рекомендується, оскільки воно потребує перетворення тіла функції на строку. Це може перешкоджати деяким оптимізаціям  JS двіжка та створювати інші проблеми.

+
+ +

Як і всі інші об'єкти, об'єкти {{jsxref("Function")}} можна створювати за допомогою оператора  new:

+ +
new Function (arg1, arg2, ... argN, functionBody)
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.
+
+ +
+
functionBody
+
Cтрока, що містить інструкції, що складають тіло функції.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

The GeneratorFunction constructor

+ +
+

Note: GeneratorFunction не є глобальним об'єктом, але може бути отриманий з generator function instance (докладніше див. {{jsxref("GeneratorFunction")}}):

+
+ +
+

Примітка: Використання конструктора GeneratorFunction для створення  функцій не рекомендується, оскільки воно потребує перетворення тіла функції на строку. Це може перешкоджати деяким оптимізаціям  JS двіжка та створювати інші проблеми.

+
+ +

Як і всі інші об'єкти, об'єкти {{jsxref("GeneratorFunction")}}  можна створювати за допомогою оператора  new:

+ +
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
+
+ +
+
functionBody
+
A string containing the JavaScript statements comprising the function definition.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

Параметри функції

+ +
+

Примітка: Default and rest parameters є експериментальною технологією, частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.

+
+ +

Default parameters

+ +

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. For more details, see default parameters.

+ +

Rest parameters

+ +

The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see rest parameters.

+ +

Об'єкт arguments

+ +

До аргументів функції можна звернутися всередині самої функції за допомогою об'єкта arguments. (Докладніше див. arguments)

+ + + +

Defining method functions

+ +

Getter and setter functions

+ +

You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

+ +
+
get
+
+

Binds an object property to a function that will be called when that property is looked up.

+
+
set
+
Binds an object property to a function to be called when there is an attempt to set that property.
+
+ +

Method definition syntax

+ +
+

Note: Method definitions are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.

+
+ +

Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See method definitions for more information.

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Function constructor vs. function declaration vs. function expression

+ +

Compare the following:

+ +

A function defined with the Function constructor assigned to the variable multiply:

+ +
function multiply(x, y) {
+   return x * y;
+}
+
+ +

A function expression of an anonymous function assigned to the variable multiply:

+ +
var multiply = function(x, y) {
+   return x * y;
+};
+
+ +

A function expression of a function named func_name assigned to the variable multiply:

+ +
var multiply = function func_name(x, y) {
+   return x * y;
+};
+
+ +

Відмінності

+ +

All do approximately the same thing, with a few subtle differences:

+ +

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or undefined if the function name was previously declared via a var statement). For example:

+ +
var y = function x() {};
+alert(x); // throws an error
+
+ +

The function name also appears when the function is serialized via Function's toString method.

+ +

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.

+ +

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:

+ +

A function defined by 'new Function' does not have a function name. However, in the SpiderMonkey JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, alert(new Function()) outputs:

+ +
function anonymous() {
+}
+
+ +

Since the function actually does not have a name, anonymous is not a variable that can be accessed within the function. For example, the following would result in an error:

+ +
var foo = new Function("alert(anonymous);");
+foo();
+
+ +

Unlike functions defined by function expressions or by the Function constructor, a function defined by a function declaration can be used before the function declaration itself. For example:

+ +
foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+
+ +

A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a Function constructor does not inherit any scope other than the global scope (which all functions inherit).

+ +

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should generally be avoided whenever possible.

+ +

It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a Function constructor 's string aren't parsed repeatedly. For example:

+ +
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
+ +

A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:

+ + + +
var x = 0;               // source element
+if (x == 0) {            // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y == 10) {     // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+
+ +

Приклади

+ +
// function declaration
+function foo() {}
+
+// function expression
+(function bar() {})
+
+// function expression
+x = function hello() {}
+
+
+if (x) {
+   // function expression
+   function world() {}
+}
+
+
+// function declaration
+function a() {
+   // function declaration
+   function b() {}
+   if (0) {
+      // function expression
+      function c() {}
+   }
+}
+
+ +

Conditionally defining a function

+ +

Functions can be conditionally defined using either //function statements// (an allowed extension to the ECMA-262 Edition 3 standard) or the Function constructor. Please note that such function statements are no longer allowed in ES5 strict. Additionally, this feature does not work consistently cross-browser, so you should not rely on it.

+ +

In the following script, the zero function is never defined and cannot be invoked, because 'if (0)' evaluates its condition to false:

+ +
if (0) {
+   function zero() {
+      document.writeln("This is zero.");
+   }
+}
+
+ +

If the script is changed so that the condition becomes 'if (1)', function zero is defined.

+ +

Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.

+ +

Note: Some JavaScript engines, not including SpiderMonkey, incorrectly treat any function expression with a name as a function definition. This would lead to zero being defined, even with the always-false if condition. A safer way to define functions conditionally is to define the function anonymously and assign it to a variable:

+ +
if (0) {
+   var zero = function() {
+      document.writeln("This is zero.");
+   }
+}
+
+ +

Приклади

+ +

Returning a formatted number

+ +

The following function returns a string containing the formatted representation of a number padded with leading zeros.

+ +
// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i <= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+
+ +

The following statements call the padZeros function.

+ +
var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+
+ +

Determining whether a function exists

+ +

You can determine whether a function exists by using the typeof operator. In the following example, a test is peformed to determine if the window object has a property called noFunc that is a function. If so, it is used; otherwise some other action is taken.

+ +
 if ('function' == typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+
+ +

Note that in the if test, a reference to noFunc is used—there are no brackets "()" after the function name so the actual function is not called.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}New: Arrow functions, Generator functions, default parameters, rest parameters.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}}
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator function39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow function{{CompatNo}}{{CompatGeckoDesktop("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator function{{CompatUnknown}}39{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow function{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Також див.

+ + diff --git a/files/uk/web/javascript/reference/functions/method_definitions/index.html b/files/uk/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..3930fff286 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,219 @@ +--- +title: Method definitions +slug: Web/JavaScript/Reference/Functions/Method_definitions +tags: + - ECMAScript 2015 + - JavaScript + - Об'єкт + - Синтаксис + - Скорочення + - функції +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +

Починаючи з ECMAScript 2015, з'явився скорочений спосіб визначення методів для обєктів. Який допоможе вам простіше привязати функцію до імя методу обєкта.

+ +
{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}
+ + + +

Синтаксис

+ +
var obj = {
+  property( parameters… ) {},
+  *generator( parameters… ) {},
+  async property( parameters… ) {},
+  async* generator( parameters… ) {},
+
+  // з обчисленими ключами:
+  [property]( parameters… ) {},
+  *[generator]( parameters… ) {},
+  async [property]( parameters… ) {},
+
+  // порівняйте getter/setter синтаксис:
+  get property() {},
+  set property(value) {}
+};
+
+ +

Опис

+ +

Скорочений синтаксис подібний до синтаксису getter і setter оголошенних в ECMAScript 2015.

+ +

Отже, цей код:

+ +
var obj = {
+  foo: function() {
+    /* код */
+  },
+  bar: function() {
+    /* код */
+  }
+};
+
+ +

Ви здатні скоротити до:

+ +
var obj = {
+  foo() {
+    /* код */
+  },
+  bar() {
+    /* код */
+  }
+};
+
+
+ +

Генераторні методи

+ +

Генераторні методи також можуть бути визначенні за допомогою скороченного синтаксису. Користуючить ними:

+ + + +
// Використовуючи названу властивіть
+var obj2 = {
+  g: function* () {
+    var index = 0;
+    while (true)
+      yield index++;
+  }
+};
+
+// Ідентичний обєкт використовуючи скорочений синтаксис
+var obj2 = {
+  * g() {
+    var index = 0;
+    while (true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1
+ +

Async методи

+ +

{{jsxref("Statements/async_function", "Async methods", "", 1)}} також можуть бути визначенні використовуючи скорочення.

+ +
// Використовуючи названу властивіть
+var obj3 = {
+  f: async function () {
+    await some_promise;
+  }
+};
+
+// Ідентичний обєкт використовуючи скорочений синтаксис
+var obj3 = {
+  async f() {
+    await some_promise;
+  }
+};
+
+ +

Async генераторні методи

+ +

Генераторні методи також можуть бути {{jsxref("Statements/async_function", "async", "", 1)}}.

+ +
var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// Ідентичний обєкт використовуючи скорочений синтаксис
+var obj4 = {
+  async* f() {
+   yield 1;
+   yield 2;
+   yield 3;
+  }
+};
+ +

Визначенні методи за допомогою скорочення - не є конструкторами

+ +

Любі визначенні методи за допомогою скорочення не є конструктором і викинуть {{jsxref("TypeError")}}, якщо ви попробуєте створити екземпляр обєкту за допомогою них.

+ +
var obj = {
+  method() {}
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
+
+ +

Приклади

+ +

Базові випадки

+ +
var obj = {
+  a: 'foo',
+  b() { return this.a; }
+};
+console.log(obj.b()); // "foo"
+
+ +

Обчисленні імена властивостей

+ +

Скороченний синтаксис також підтримує обчисленні імена властивостей.

+ +
var bar = {
+  foo0: function() { return 0; },
+  foo1() { return 1; },
+  ['foo' + 2]() { return 2; }
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2016')}}Changed that generator methods should also not have a [[Construct]] trap and will throw when used with new.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
+ +

Підтримка браузерів

+ + + +

{{Compat("javascript.functions.method_definitions")}}

+ +

Дивитися також

+ + diff --git a/files/uk/web/javascript/reference/functions/set/index.html b/files/uk/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..b26e0e2824 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/set/index.html @@ -0,0 +1,152 @@ +--- +title: сетер +slug: Web/JavaScript/Reference/Functions/set +tags: + - ECMAScript 2015 + - ECMAScript 5 + - JavaScript + - set + - функції +translation_of: Web/JavaScript/Reference/Functions/set +--- +
{{jsSidebar("Functions")}}
+ +

Оператор set прив'язує властивість об'єкта до функції, яка буде викликана під час спроби присвоїти значення даній властивості.

+ +

{{EmbedInteractiveExample("pages/js/functions-setter.html")}}

+ + + +

Синтаксис

+ +
{set prop(val) { . . . }}
+{set [expression](val) { . . . }}
+ +

Параметри

+ +
+
prop
+
Ім'я властивості, котра має бути прив'язана до даної функції.
+
+ +
+
val
+
Псевдонім змінної, що містить значення, для якого виконується спроба присвоїти його властивості prop.
+
expression
+
Починаючи від ECMAScript 2015, можна також використовувати вираз для обчислюваного імені властивості, до якої буде прив'язана дана функція.
+
+ +

Опис

+ +

У JavaScript сетер можна використати для виконання функції під час здійснення спроби змінити певну властивість. Найчастіше сетери використовуються у поєднанні з ґетерами для створення свого роду псевдовластивостей. Не можна водночас мати сетера на властивості, яка містить фактичне значення.

+ +

Зауважте особливість використання синтаксису set:

+ +
+ +
+ +

Приклади

+ +

Визначення сетерів на нових об'єктах у об'єктних ініціалізаторах

+ +

Наступний код визначає псевдовластивість current об'єкта language. Коли current присвоюється значення, це змінює log на таке саме значення:

+ +
const language = {
+  set current(name) {
+    this.log.push(name);
+  },
+  log: []
+}
+
+language.current = 'EN';
+console.log(language.log); // ['EN']
+
+language.current = 'UA';
+console.log(language.log); // ['EN', 'UA']
+
+ +

Зверніть увагу, що  властивість current не визначена, і будь-які спроби звернутись до неї повернуть значення undefined.

+ +

Видалення сетера оператором delete

+ +

Якщо вам потрібно прибрати сетер, ви можете його просто {{jsxref("Operators/delete", "видалити")}}:

+ +
delete o.current;
+
+ +

Визначення сетера на існуючому об'єкті за допомогою defineProperty

+ +

Щоб додати сетер до існуючого об'єкта, використовуйте {{jsxref("Object.defineProperty()")}}.

+ +
const o = {a: 0};
+
+Object.defineProperty(o, 'b', {
+ set: function(x) { this.a = x / 2; }
+});
+
+o.b = 10;
+// Запускає сетер, який присвоює 10 / 2 (5) властивості 'a'
+
+console.log(o.a)
+// 5
+ +

Використання обчислюваного імені властивості

+ +
const expr = 'foo';
+
+const obj = {
+  baz: 'bar',
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz);
+// "bar"
+
+obj.foo = 'baz';
+// запустити сетер
+
+console.log(obj.baz);
+// "baz"
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.functions.set")}}

+ +
+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/functions/\321\200\320\265\321\210\321\202\320\260_\320\277\320\260\321\200\320\260\320\274\320\265\321\202\321\200\321\226\320\262/index.html" "b/files/uk/web/javascript/reference/functions/\321\200\320\265\321\210\321\202\320\260_\320\277\320\260\321\200\320\260\320\274\320\265\321\202\321\200\321\226\320\262/index.html" new file mode 100644 index 0000000000..f117aecc60 --- /dev/null +++ "b/files/uk/web/javascript/reference/functions/\321\200\320\265\321\210\321\202\320\260_\320\277\320\260\321\200\320\260\320\274\320\265\321\202\321\200\321\226\320\262/index.html" @@ -0,0 +1,211 @@ +--- +title: Залишкові параметри +slug: Web/JavaScript/Reference/Functions/решта_параметрів +tags: + - JavaScript + - Rest + - параметри + - функції +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +
{{jsSidebar("Functions")}}
+ +
Синтаксис залишкових параметрів дозволяє представити невизначену кількість аргументів у вигляді масиву.
+ +
+ +

{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}

+ + + +

Синтаксис

+ +
function f(a, b, ...theArgs) {
+  // ...
+}
+
+ +

Опис

+ +

Перед останнім параметром функції може стояти ..., в результаті решта аргументів (наданих користувачем) будуть розміщені у  "стандартному" масиві JavaScript.

+ +

Лише останній параметр може бути "залишковим".

+ +
function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("один", "два", "три", "чорити", "п'ять", "шість");
+
+// Виведе:
+// a, один
+// b, два
+// manyMoreArgs, ["три", "чотири", "п'ять", "шість"]
+ +

Різниця між залишковими параметрами та об'єктом arguments

+ +

Існують три основні відмінності між залишковими параметрами та об'єктом {{jsxref("Functions/arguments", "arguments")}}:

+ + + +

Від arguments до масиву

+ +

Залишкові параметри були запроваджені, щоб зменшити кількість шаблонного коду, спричиненого об'єктом arguments.

+ +
// До появи залишкових параметрів, "arguments" можна було перетворити на масив таким чином:
+
+function f(a, b) {
+
+  let normalArray = Array.prototype.slice.call(arguments);
+  // -- або --
+  let normalArray = [].slice.call(arguments);
+  // -- або --
+  let normalArray = Array.from(arguments);
+
+  let first = normalArray.shift(); // OK, вертає перший аргумент
+  let first = arguments.shift(); // ERROR (arguments не є справжнім масивом)
+}
+
+// Тепер ми легко можемо отримати звичайний масив за допомогою залишкових параметрів
+
+function f(...args) {
+  let normalArray = args;
+  let first = normalArray.shift(); // OK, вертає перший аргумент
+}
+ +

Приклади

+ +

Використання залишкових параметрів

+ +

У цьому прикладі перший аргумент відповідає "a", а другий "b", отже, ці іменовані аргументи можуть використовуватись як звичайні.

+ +

Однак, третій аргумент, "manyMoreArgs", буде масивом, який містить 3-й, 4-й, 5-й, 6-й ... n-й -- стільки аргументів, скільки надасть користувач.

+ +
function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("один", "два", "три", "чотири", "п'ять", "шість");
+
+// a, один
+// b, два
+// manyMoreArgs, ["три", "чотири", "п'ять", "шість"]
+ +

Нижче... хоча тут всього одне значення, останній аргумент все одно додається у масив.

+ +
// використовуємо ту саму функцію з наведеного вище прикладу
+
+myFun("один", "два", "три");
+
+// a, один
+// b, два
+// manyMoreArgs, ["три"]
+ +

Нижче... третій аргумент не був переданий, але "manyMoreArgs" все одно є масивом (хоча й порожнім).

+ +
// використовуємо ту саму функцію з наведеного вище прикладу
+
+myFun("один", "два");
+
+// a, один
+// b, два
+// manyMoreArgs, []
+ +

Кількість аргументів

+ +

Оскільки theArgs є масивом, кількість його елементів надається властивістю length:

+ +
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1()         // 0
+fun1(5)        // 1
+fun1(5, 6, 7)  // 3
+ +

Звичайний параметр та залишкові параметри

+ +

У наступному прикладі залишковий параметр використовується, щоб зібрати усі аргументи після першого у масиві. Далі кожен з них помножується на перший параметр, і масив повертається:

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+let arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Використання з об'єктом arguments

+ +

Методи Array можуть використовуватись на залишкових параметрах, але не на об'єкті arguments:

+ +
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // виводить [1, 3, 5, 7]
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // цього ніколи не станеться
+}
+
+// викидає TypeError: arguments.sort is not a function
+console.log(sortArguments(5, 3, 7, 1));
+
+ +

Щоб скористатись методами Array на об'єкті arguments, він спочатку має бути перетворений на справжній масив.

+ +
function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // [1, 3, 5, 7]
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}
+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.functions.rest_parameters")}}

+
+
+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/functions/\321\201\321\202\321\200\321\226\320\273\320\272\320\276\320\262\321\226_\321\204\321\203\320\275\320\272\321\206\321\226\321\227/index.html" "b/files/uk/web/javascript/reference/functions/\321\201\321\202\321\200\321\226\320\273\320\272\320\276\320\262\321\226_\321\204\321\203\320\275\320\272\321\206\321\226\321\227/index.html" new file mode 100644 index 0000000000..f1638d8d84 --- /dev/null +++ "b/files/uk/web/javascript/reference/functions/\321\201\321\202\321\200\321\226\320\273\320\272\320\276\320\262\321\226_\321\204\321\203\320\275\320\272\321\206\321\226\321\227/index.html" @@ -0,0 +1,362 @@ +--- +title: Стрілкові функції +slug: Web/JavaScript/Reference/Functions/Стрілкові_функції +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +
{{jsSidebar("Functions")}}
+ +

Вирази стрілкових функцій мають більш короткий синтаксис, аніж функціональні вирази і не мають свого власного this, arguments, super, і new.target. Вони не можуть бути використані як конструктор і завжди анонімні.

+ +

Синтаксис

+ +

Basic Syntax

+ +
(параметр1,параметр2, …, параметрN) => { оператори }
+(параметр1, параметр2, …, параметрN) => вираз
+// еквівалентно до запису: (параметр1,параметр2, …, параметрN) => { return вираз; }
+
+// Якщо у функції тільки один параметр, то дужки не обов'язкові:
+(параметр) => { оператори }
+параметр => { оператори }
+параметр => вираз
+
+
+// Список параметрів для функції без параметрів повинен бути записаний у парі фігурних дужок.
+() => { оператори }
+
+ +

Advanced Syntax

+ +
// Візьміть тіло функції у дужки, якщо вона повертає об'єкт
+params => ({foo: bar})
+
+// Залишкові параметри та параметри за замовчуванням підтримуються як і в звичайних функціях
+(параметр1, параметр2, ...залишкові параметри) => { оператори }
+(параметр1 = значення_за_замовчуванням, параметр2, …, параметрN = значення_за_замовчуваннямN) => { оператори }
+
+// Деструктиризація в списку параметрів також підтримується:
+let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+f();
+// 6
+
+ +

Опис

+ +

Див. також "ES6 In Depth: Arrow functions" on hacks.mozilla.org.

+ +

Появу стрілкових функцій зумовили два фактори: можливість більш короткого запису і випадки, коли сутність this не обов'язкова.

+ +

Коротший запис

+ +
var materials = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+materials.map(function(material) {
+  return material.length;
+}); // [8, 6, 7, 9]
+
+materials.map((material) => {
+  return material.length;
+}); // [8, 6, 7, 9]
+
+materials.map(material => material.length); // [8, 6, 7, 9]
+
+ +

Спільний this

+ +

До появи стрілкових функцій кожна нова функція мала власне значення this :

+ + + +

Це все було далеким від ідеалів об'єктно-орієнтованого програмування.

+ +
function Person() {
+  // The Person() constructor defines `this` as an instance of itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In non-strict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

В ECMAScript 3/5 ця проблема вирішувалась шляхом присвоєння значення this змінній, оголошеній всередині функції.

+ +
function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `that` variable of which
+    // the value is the expected object.
+    that.age++;
+  }, 1000);
+}
+ +

Або можна створити bound function (прив'язану функцію), в яку передати значення this для функції (функція growUp() в прикладі вище).

+ +

Стрілкова функція не має власного контексту this, а використовує this з контексту вище. Тому в коді, наведеному нижче, this для функції setInterval має таке ж значення, як і this зовнішньої функції:

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

Relation with strict mode

+ +

Given that this comes from the surrounding lexical context, strict mode rules with regard to this are ignored.

+ +
var f = () => { 'use strict'; return this; };
+f() === window; // or the global object
+ +

All other strict mode rules apply normally.

+ +

Invoked through call or apply

+ +

Since arrow functions do not have their own this, the methods call() or apply() can only pass in parameters. thisArg is ignored.

+ +
var adder = {
+  base: 1,
+
+  add: function(a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v => v + this.base;
+    var b = {
+      base: 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // This would log to 2
+console.log(adder.addThruCall(1)); // This would log to 2 still
+ +

No binding of arguments

+ +

Arrow functions do not have their own arguments object. Thus, in this example, arguments is simply a reference to the arguments of the enclosing scope:

+ +
var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
+  return f(10);
+}
+
+foo(1); // 2
+ +

In most cases, using rest parameters is a good alternative to using an arguments object.

+ +
function foo(n) {
+  var f = (...args) => args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11
+ +

Arrow functions used as methods

+ +

As stated previously, arrow function expressions are best suited for non-method functions. Let's see what happens when we try to use them as methods:

+ +
'use strict';
+var obj = {
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+obj.b(); // prints undefined, Window {...} (or the global object)
+obj.c(); // prints 10, Object {...}
+ +

Arrow functions do not have their own this. Another example involving {{jsxref("Object.defineProperty()")}}:

+ +
'use strict';
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () => {
+    console.log(this.a, typeof this.a, this);
+    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+  }
+});
+
+ +

Use of the new operator

+ +

Arrow functions cannot be used as constructors and will throw an error when used with new.

+ +
var Foo = () => {};
+var foo = new Foo(); // TypeError: Foo is not a constructor
+ +

Use of prototype property

+ +

Arrow functions do not have a prototype property.

+ +
var Foo = () => {};
+console.log(Foo.prototype); // undefined
+
+ +

Use of the yield keyword

+ +

The yield keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.

+ +

Тіло функції

+ +

Arrow functions can have either a "concise body" or the usual "block body".

+ +

In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit return statement.

+ +
var func = x => x * x;
+// concise body syntax, implied "return"
+
+var func = (x, y) => { return x + y; };
+// with block body, explicit "return" needed
+
+ +

Повернення літерала об'єкта

+ +

Keep in mind that returning object literals using the concise body syntax params => {object:literal} will not work as expected.

+ +
var func = () => { foo: 1 };
+// Calling func() returns undefined!
+
+var func = () => { foo: function() {} };
+// SyntaxError: function statement requires a name
+ +

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).

+ +

Remember to wrap the object literal in parentheses.

+ +
var func = () => ({foo: 1});
+ +

Розрив рядка

+ +

An arrow function cannot contain a line break between its parameters and its arrow.

+ +
var func = ()
+           => 1;
+// SyntaxError: expected expression, got '=>'
+ +

Порядок розбору

+ +

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions.

+ +
let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () => {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() => {});    // ok
+
+ +

Ще приклади

+ +
// An empty arrow function returns undefined
+let empty = () => {};
+
+(() => 'foobar')();
+// Returns "foobar"
+// (this is an Immediately Invoked Function Expression
+// see 'IIFE' in glossary)
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) => a > b ? a : b;
+
+// Easy array filtering, mapping, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// More concise promise chains
+promise.then(a => {
+  // ...
+}).then(b => {
+  // ...
+});
+
+// Parameterless arrow functions that are visually easier to parse
+setTimeout( () => {
+  console.log('I happen sooner');
+  setTimeout( () => {
+    // deeper code
+    console.log('I happen later');
+  }, 1);
+}, 1);
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Початкова виознака.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.functions.arrow_functions")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..3ab9407b4e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,116 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Ітератор + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +
{{JSRef}}
+ +

Початковим значенням властивості @@iterator є та сама функція, яка є початковим значенням властивості {{jsxref("Array.prototype.values()", "values()")}}.

+ +

Синтаксис

+ +
arr[Symbol.iterator]()
+ +

Значення, що повертається

+ +

Початкове значення, що надається ітератором {{jsxref("Array.prototype.values()", "values()")}}. За замовчуванням, використання arr[Symbol.iterator] поверне функцію {{jsxref("Array.prototype.values()", "values()")}}.

+ +

Приклад

+ +

Перебір за допомогою циклу for...of

+ +
var arr = ['a', 'b', 'c', 'd', 'e'];
+var eArr = arr[Symbol.iterator]();
+// ваш переглядач має підтримувати цикл for..of
+// та змінні, оголошені через let, у циклах for
+// також можна використати const та var
+for (let letter of eArr) {
+  console.log(letter);
+}
+
+ +

Альтернативний перебір

+ +
var arr = ['а', 'б', 'в', 'г', 'ґ'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // а
+console.log(eArr.next().value); // б
+console.log(eArr.next().value); // в
+console.log(eArr.next().value); // г
+console.log(eArr.next().value); // ґ
+
+ +

Випадок використання позначення через квадратні дужки

+ +

Використовувати цей синтаксис замість позначення через крапку (Array.prototype.values()) зручно, коли ви не знаєте заздалегідь, яким буде об'єкт. Якщо ви маєте функцію, що приймає ітератор та перебирає значення, але не знаєте, чи матиме цей об'єкт метод [Iterable].prototype.values. Це може бути вбудований об'єкт, такий як String, або користувацький об'єкт.

+ +
function logIterable(it) {
+  var iterator = it[Symbol.iterator]();
+  // ваш переглядач має підтримувати цикл for..of
+  // та змінні, оголошені через let, у циклах for
+  // також можна використати const та var
+  for (let letter of iterator) {
+      console.log(letter);
+  }
+}
+
+// Масив
+logIterable(['а', 'б', 'в']);
+// а
+// б
+// в
+
+// рядок
+logIterable('абв');
+// а
+// б
+// в
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.@@iterator")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/@@species/index.html b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..df18a2a627 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,72 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@species +tags: + - Array + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +
{{JSRef}}
+ +

Властивість-аксесор Array[@@species] повертає конструктор Array.

+ +

Синтаксис

+ +
Array[Symbol.species]
+
+ +

Значення, що повертається

+ +

Конструктор {{jsxref("Array")}}.

+ +

Опис

+ +

Властивість-аксесор species повертає конструктор за замовчуванням для об'єктів Array. Конструктори підкласів можуть його заміщувати, змінюючи присвоєння конструктора.

+ +

Приклади

+ +

Species у звичайних об'єктах

+ +

Властивість species повертає функцію-конструктор за замовчуванням, для об'єктів Array це конструктор Array:

+ +
Array[Symbol.species]; // функція Array()
+ +

Species у похідних об'єктах

+ +

У похідному об'єкті колекцій (наприклад, у вашому користувацькому масиві MyArray), species для MyArray поверне конструктор MyArray. Однак, ви, можливо, захочете переписати цю поведінку, щоб повертати батьківські об'єкти Array у методах свого похідного класу:

+ +
class MyArray extends Array {
+  // Переписати Symbol.species у MyArray на батьківський конструктор Array
+  static get [Symbol.species]() { return Array; }
+}
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.@@species")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..2ded6c458e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,76 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Властивість + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +
{{JSRef}}
+ +

Символьна властивість @@unscopable містить імена властивостей, що не були включені у стандарт ECMAScript до версії ES2015. Ці властивості виключені з прив'язок оператора with.

+ +

Опис

+ +

Стандартні властивості масивів, що виключені з прив'язок with, наступні:

+ + + +

Дивіться {{jsxref("Symbol.unscopables")}}, щоб дізнатись, як задати unscopables для ваших власних об'єктів.

+ +

{{js_property_attributes(0,0,1)}}

+ +

Приклади

+ +

Використання у оточеннях with

+ +

Наступний код чудово працює у ES5 та більш ранніх версіях. Однак, у ECMAScript 2015 та пізніших версіях був запроваджений метод {{jsxref("Array.prototype.keys()")}}. Це означає, що всередині середовищ with "keys" тепер буде методом, а не змінною. Саме тут вступає у гру вбудована символьна властивість @@unscopables Array.prototype[@@unscopables], яка не дає деяким методам масивів потрапити у область видимості with.

+ +
var keys = [];
+
+with (Array.prototype) {
+  keys.push('something');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+ +

Специфікації

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.@@unscopables")}}

+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/array/index.html b/files/uk/web/javascript/reference/global_objects/array/array/index.html new file mode 100644 index 0000000000..84bcbb52a0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/array/index.html @@ -0,0 +1,87 @@ +--- +title: Конструктор Array() +slug: Web/JavaScript/Reference/Global_Objects/Array/Array +tags: + - JavaScript + - Конструктор + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +
{{JSRef}}
+ +

Конструктор Array() використовується для створення об'єктів {{jsxref("Array")}}.

+ +

Синтаксис

+ +
[element0, element1, ..., elementN]
+
+new Array(element0, element1[, ...[, elementN]])
+new Array(arrayLength)
+ +

Параметри

+ +
+
elementN
+
Масив JavaScript ініціалізується наданими елементами, окрім випадку, коли у конструктор Array передається єдиний аргумент, і цей аргумент - число (дивіться нижче параметр arrayLength). Зауважте, що цей особливий випадок стосується лише масивів JavaScript, створених конструктором Array, а не масивних літералів, створених дужковим синтаксисом.
+
arrayLength
+
Якщо єдиним аргументом, переданим у конструктор Array є ціле число між 0 та 232-1 (включно), це створює новий масив JavaScript, в якого властивості length присвоюється це число (Заувага: мається на увазі масив довжиною arrayLength з порожних елементів, а не елементів, заповнених значеннями undefined). Якщо аргумент є будь-яким іншим числом, викидається виняток {{jsxref("RangeError")}}.
+
+ +

Приклади

+ +

Нотація масивного літералу

+ +

Масиви можна створювати за допомогою літералів:

+ +
let fruits = ['Яблуко', 'Банан'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Яблуко"
+
+ +

Конструктор масиву з єдиним параметром

+ +

Масиви можна створювати за допомогою конструктора з єдиним числовим параметром. Властивості масиву length присвоюється це число, а всі елементи масиву є порожніми.

+ +
let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+
+ +

Конструктор масиву з кількома параметрами

+ +

Якщо у конструктор передається більше одного параметра, створюється новий об'єкт {{jsxref("Array")}} з наданими елементами.

+ +
let fruits = new Array('Яблуко', 'Банан');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Яблуко"
+
+ +

Специфікації

+ + + + + + + + + + + + +
СпецифікаціяСтатус
{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.Array")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/concat/index.html b/files/uk/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..5b56573f93 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,168 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Method + - Prototype + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +
{{JSRef}}
+ +

Метод concat() повертає новий масив, що складається із масиву, в контексті якого метод був викликаний, поєднаного із масивом (масивами) та/або іншими значеннями, що були передані як аргументи.

+ + + +

{{EmbedInteractiveExample("pages/js/array-concat.html")}}

+ + + + + +

Синтаксис

+ +
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
+ +

Параметри

+ +
+
valueN
+
Масиви та/або значення, які поєднуються в новий масив. Якщо всі параметри valueN пропущені, метод concat повертає дрібну копію існуючого масиву, на якому був викликаний. Додаткову інформацію дивіться нижче в описі.
+
+ +

Повернене значення

+ +

Новий екземпляр об'єкта {{jsxref("Array")}}.

+ +

Опис

+ +

Метод concat створює новий масив, який складається із елементів об'єкта, на якому метод був викликаний, а також із елементів кожного аргумента (якщо цей аргумент - масив) або з самого аргумента (якщо він не є масивом). Метод не заходить у аргументи вкладених масивів.

+ +

Метод concat не змінює this або будь-який з масивів, що передані як аргументи, але натомість повертає дрібну копію, яка містить копії тих самих елементів, об'єднані з початкових масивів. Елементи початкових масивів копіюються в новий масив таким чином:

+ + + +
+

Примітка: об'єднання масиву (масивів) чи значення (значень) не змінить початкові дані. Більше того, будь-яка операція над новим масивом (тільки якщо елемент не є посиланням на об'єкт) не матиме жодного впливу на початкові масиви, і навпаки.

+
+ +

Приклади

+ +

Об'єднання двох масивів

+ +

Наступний код об'єднує два масиви:

+ +
const letters = ['a', 'b', 'c'],
+const numeric = [1, 2, 3];
+
+letters.concat(numeric);
+// Результат: ['a', 'b', 'c', 1, 2, 3]
+
+ +

Об'єднання трьох масивів

+ +

Наступний код об'єднує три масиви:

+ +
var num1 = [1, 2, 3],
+    num2 = [4, 5, 6],
+    num3 = [7, 8, 9];
+
+var numbers = num1.concat(num2, num3);
+
+console.log(numbers);
+// Результат: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+ +

Об'єднання значень у масив

+ +

Наступний код об'єднує три значення у масив:

+ +
var letters = ['a', 'b', 'c'];
+
+var alphaNumeric = letters.concat(1, [2, 3]);
+
+console.log(alphaNumeric);
+// Результат: ['a', 'b', 'c', 1, 2, 3]
+
+ + + +

Об'єднанная вкладених масивів

+ +

Наступний код об'єднує вкладені масиви та демонструє утримання посилань:

+ +
const num1 = [[1]];
+const num2 = [2, [3]];
+
+const numbers = num1.concat(num2);
+
+console.log(numbers);
+// результат: [[1], 2, [3]]
+
+// змінити перший елемент num1
+num1[0].push(4);
+
+console.log(numbers);
+// результат: [[1, 4], 2, [3]]
+ + + +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване в JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ESDraft')}}
+ +

Сумісність із веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.concat")}}

+ +
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..b2d5e837e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,188 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +tags: + - ECMAScript 2015 + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +
{{JSRef}}
+ +

Метод copyWithin() додає дрібну копію частини масиву в іншу позицію в тому ж масиві та повертає його без зміни довжини.

+ +
{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}
+ + + +

Синтаксис

+ +
arr.copyWithin(target[, start[, end]])
+
+ +

Параметри

+ +
+
target
+
Індекс (нумерується з 0), куди потрібно скопіювати послідовність. Якщо індекс є від'ємним, target буде рахуватися з кінця масиву.
+
Якщо значення target дорівнює або більше за arr.length, нічого не скопіюється. Якщо індекс target більший за start, скопійована послідовність буде обрізана відповідно до arr.length.
+
start {{optional_inline}}
+
Індекс (нумерується з 0), з якого потрібно починати копіювання елементів. Якщо він від'ємний, start буде рахуватися з кінця.
+
Якщо параметр start не заданий, copyWithin буде копіювати, починаючи з індекса 0. 
+
end {{optional_inline}}
+
Індекс (нумерується з 0), на якому потрібно закінчити копіювання елементів. copyWithin копіює до, але не включаючи, end. Якщо індекс від'ємний, end буде рахуватися з кінця.
+
Якщо параметр end не заданий, copyWithin буде копіювати до останнього індекса (за замовченням arr.length).
+
+ +

Значення, яке повертається

+ +

Змінений масив.

+ +

Опис

+ +

Метод copyWithin працює, як memmove у C та C++, і є дуже продуктивним методом для зсунення даних у {{jsxref("Array", "масиві")}}. Це особливо стосується метода {{jsxref("TypedArray/copyWithin", "TypedArray")}} з такою ж самою назвою. Послідовність копіюється та вставляється однією операцією; вставлена послідовність міститиме скопійовані значення, навіть коли ділянки копіювання та вставки накладаються.

+ +

Функція copyWithin є навмисно загальною, вона не вимагає, щоб її this був об'єктом {{jsxref("Array")}}.

+ +

Метод copyWithin є методом модифікації. Він не змінює довжину об'єкта this, але він змінює його зміст та створює нові властивості в разі необхідності.

+ +

Приклади

+ +
[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// ES2015 типізовані масиви є підкласами Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// На платформах, які ще не сумісні з ES2015:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+
+ +

Поліфіл

+ +
if (!Array.prototype.copyWithin) {
+  Object.defineProperty(Array.prototype, 'copyWithin', {
+    value: function(target, start/*, end*/) {
+    // Кроки 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Кроки 3-5.
+    var len = O.length >>> 0;
+
+    // Кроки 6-8.
+    var relativeTarget = target >> 0;
+
+    var to = relativeTarget < 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Кроки 9-11.
+    var relativeStart = start >> 0;
+
+    var from = relativeStart < 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Кроки 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end >> 0;
+
+    var final = relativeEnd < 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Крок 15.
+    var count = Math.min(final - from, len - to);
+
+    // Кроки 16-17.
+    var direction = 1;
+
+    if (from < to && to < (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Крок 18.
+    while (count > 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Крок 19.
+    return O;
+  },
+  configurable: true,
+  writable: true
+  });
+}
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2016')}}
{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.copyWithin")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/entries/index.html b/files/uk/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..b55d83c2e5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,96 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Array + - ECMAScript6 + - JavaScript + - Ітератор + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +
{{JSRef}}
+ +

Метод entries() повертає новий об'єкт ітератора масиву (Array Iterator), який містить пари ключ-значення для кожного індексу в масиві.

+ +
{{EmbedInteractiveExample("pages/js/array-entries.html")}}
+ + + +

Синтаксис

+ +
array.entries()
+ +

Значення, яке повертається

+ +

Новий об'єкт ітератора {{jsxref("Array", "масиву")}}.

+ +

Приклади

+ +

Ітерування за індексом та елементом

+ +
const a = ['a', 'b', 'c'];
+
+for (const [index, element] of a.entries())
+  console.log(index, element);
+
+// 0 'a'
+// 1 'b'
+// 2 'c'
+
+ +

Використання циклу for…of

+ +
var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.entries")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/every/index.html b/files/uk/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..4eb5b229f0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,195 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +
{{JSRef}}
+ +

Метод every() перевіряє, чи всі елементи масиву відповідають умові, що задана функцією, яка передається як аргумент. Повертає булеве значення.

+ +
function isBigEnough(element, index, array) {
+  return element >= 10;
+}
+
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+ +

Синтаксис

+ +
arr.every(callback(element[, index[, array]])[, thisArg])
+ +

Параметри

+ +
+
callback
+
Функція, яка перевіряє кожен елемент масиву. Приймає три аргументи: +
+
element
+
Поточний елемент, який обробляється в масиві.
+
index {{Optional_inline}}
+
Індекс поточного елемента, який обробляється в масиві.
+
array {{Optional_inline}}
+
Масив для якого був викликаний метод every.
+
+
+
thisArg{{Optional_inline}}
+
Значення, що використовується як this при виконанні callback.
+
+ +

Вертає

+ +

true, якщо функція callback повернула {{Glossary("truthy", "правдиве")}} значення для кожного елементу масиву; інакше, false.

+ +

Опис

+ +

Метод every виконує функцію callback один раз для кожного елементу масиву поки не знайдено хоча б один елемент, функція callback якого повертає {{Glossary("falsy", "хибне")}} значення. Якщо такий елемент знайдено, метод every одразу повертає false. В іншому ж випадку, якщо функція callback повернула {{Glossary("truthy", "правдиве")}} значення для усіх елементів, every повертає true.  Функція callback викликається тільки для тих індексів масиву, які мають присвоєні значення; вона не викликається для тих індексів, котрі були видалені або котрим ніколи не присвоювалися значення.

+ +

Функція callback викликається з трьома аргументами: значення елементу, індекс елементу в масиві і масив по якому робиться перебір.

+ +

Якщо параметр thisArg переданий в every, то він буде використовуватися функцією callback як значення this, коли та буде викликана. В іншому випадку буде передано значення undefined як її значення this. Значення this зрештою видиме для функції callback і визначається відповідно до звичайних правил для визначення this яке видиме функцією.

+ +

Метод every не змінює масив, на якому він був викликаний.

+ +

Діапазон елементів, які обробляються методом every() встановлюється перед першим виконанням функції callback. Елементи, які додаються в масив після того, як метод every()був викликаний, не будуть обходитися функцією callback. Якщо існуючі елементи масиву змінилися, то їхні значення, які передаються в функцію callback будуть значеннями на момент обходу їх методом every(); якщо існуючі елементи масиву видалили, то метод every() обходити їх не буде.

+ +

Метод every схожий за дією на математичний символ "для кожного \forall \!\,". Зокрема, для порожнього масиву він повертає true. (Всі елементи порожнього набору задовольняють будь-якому заданому стану.)

+ +

Приклади

+ +

Перевірка значення кожного елементу масиву

+ +

Даний приклад перевіряє чи всі елементи масиву більші ніж 10.

+ +
function isBigEnough(element, index, array) {
+  return element >= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+
+ +

Викристання стрілочних функцій

+ +

Стрілочні функції надають коротший синтаксис для такої ж самої перевірки.

+ +
[12, 5, 8, 130, 44].every(x => x >= 10); // false
+[12, 54, 18, 130, 44].every(x => x >= 10); // true
+ +

Поліфіл

+ +

Метод every був доданий до ECMA-262 стандарту у 5-ій версії; як такий він може бути не реалізований в усіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод every у тих версіях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у  ECMA-262, 5-ій версії, за умови, що Object і TypeError мають свої первинні значення і що callbackfn.call прирівнюється до первинного значення {{jsxref("Function.prototype.call")}}

+ +
if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this дорівнює null або не визначений');
+    }
+
+    // 1. Нехай O буде результатом виклику ToObject з передачею значення
+    //    this в якості аргумента.
+    var O = Object(this);
+
+    // 2. Нехай lenValue буде результатом виклику внутрішнього метода O
+    //    Get з аргументом "length".
+    // 3. Нехай len буде результатом ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Якщо IsCallable(callbackfn) повертає false, викинути виняток TypeError.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. Якщо thisArg було передано, хай T буде thisArg; інакше хай T буде undefined.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Нехай k дорівнює 0.
+    k = 0;
+
+    // 7. Повторювати, доки k < len
+    while (k < len) {
+
+      var kValue;
+
+      // а. Нехай Pk буде ToString(k).
+      //   Це неявно для операндів LHS оператора in
+      // б. Нехай kPresent буде результатом виклику внутрішнього метода
+      //    O HasProperty з аргументом Pk.
+      //    Цей крок можна поєднати з в
+      // в. Якщо kPresent дорівнює true, тоді
+      if (k in O) {
+
+        // i. Нехай kValue буде результатом виклику внутрішнього метода
+        //    O Get з аргументом Pk.
+        kValue = O[k];
+
+        // ii. Нехай testResult буде результатом виклику внутрішнього метода
+        //      callbackfn Call з T в якості значення this і списком аргументів,
+        //      який містить kValue, k, та O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. Якщо ToBoolean(testResult) дорівнює false, повернути false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізовано у JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.every")}}

+ +
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/fill/index.html b/files/uk/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..666360dc76 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +
{{JSRef}}
+ +

Метод fill() заповнює (змінює) всі елементи масиву з початкового індексу (за замовчуванням нуль) до кінцевого індексу (за замовчуванням довжина масиву) статичним значенням. Метод повертає змінений масив.

+ +
{{EmbedInteractiveExample("pages/js/array-fill.html")}}
+ + + +

Синтаксис

+ +
arr.fill(value[, start[, end]])
+
+ +

Параметри

+ +
+
value
+
Величина, якою потрібно заповнити масив.
+
start {{optional_inline}}
+
Початковий індекс, за замовчуванням 0.
+
end {{optional_inline}}
+
Кінцевий індекс, за замовчуванням this.length.
+
+ +

Значення, яке повертається

+ +

Змінений масив.

+ +

Опис

+ +

Метод fill приймає три аргументи: value, start та end. Аргументи start та end є необов'язковими й за замовчуванням дорівнюють 0 та значенню length об'єкта this.

+ +

Якщо значення start є від'ємним, воно сприймається як length+start, де length - це довжина масиву. Якщо значення end є від'ємним, воно сприймається як length+end.

+ +

Метод fill є навмисно загальним, він не вимагає, щоб значенням this був об'єкт Array.

+ +

fill є методом модифікації, він змінить сам об'єкт this та поверне його, а не просто його копію.

+ +

Коли у fill передається об'єкт, він копіює посилання та заповнює масив посиланнями на цей об'єкт.

+ +

Приклади

+ +
[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Об'єкти за посиланнями.
+var arr = Array(3).fill({}) // [{}, {}, {}];
+arr[0].hi = "привіт"; // [{ hi: "привіт" }, { hi: "привіт" }, { hi: "привіт" }]
+
+ +

Поліфіл

+ +
if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Кроки 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Кроки 3-5.
+      var len = O.length >>> 0;
+
+      // Кроки 6-7.
+      var start = arguments[1];
+      var relativeStart = start >> 0;
+
+      // Крок 8.
+      var k = relativeStart < 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Кроки 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end >> 0;
+
+      // Крок 11.
+      var final = relativeEnd < 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Крок 12.
+      while (k < final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Крок 13.
+      return O;
+    }
+  });
+}
+
+ +

Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують Object.defineProperty, краще взагалі не використовувати поліфіли методів Array.prototype, оскільки ви не зможете зробити їх не перелічуваними.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.fill")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/filter/index.html b/files/uk/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..e36b7abc4d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,235 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript5 + - JavaScript + - Prototype + - polyfill + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

Метод filter() створює новий масив з усіма елементами, що пройшли перевірку вказаною функцією.

+ +
{{EmbedInteractiveExample("pages/js/array-filter.html")}}
+ + + +

Синтаксис

+ +
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
+ +

Параметри

+ +
+
callback
+
Функція-присудок, що перевіряє кожен елемент масиву та повертає true, щоб зберегти елемент, або false, щоб видалити. Приймає три аргументи:
+
+
+
element
+
Значення чергового елемента масиву.
+
index{{optional_inline}}
+
Індекс чергового елемента в масиві.
+
array{{optional_inline}}
+
Масив, до якого застосовано filter().
+
+
+
thisArg{{optional_inline}}
+
Значення, що використовується як this, коли викликається callback.
+
+ +

Вертає

+ +

Новий масив з елементами, що пройшли пере́вірку. Якщо жоден елемент не пройшов перевірку, повертає порожній масив.

+ +

Опис

+ +

Метод filter() перебирає всі елементи масиву за зростанням індексу, викликає для кожного функцію callback, та створює новий масив зі значень, для яких виклик callback повертає {{glossary("Truthy", "істинне значення")}}. Метод оминає властивості, які було видалено або не було започатковано — в розріджених масивах.

+ +

Функція callback викликається з трьома аргументами:

+ + + +

Якщо для filter() вказано параметр thisArg, його буде використано як this для функції callback. Інакше буде використано значення {{jsxref("undefined")}}. Зрештою, значення this для функції callback визначатиметься відповідно до загальних правил.

+ +

Метод filter() не змінює масив, на якому його викликано.

+ +

Множина індексів елементів, що їх перебиратиме filter(), з'ясовується ще до першого виклику callback. Елементи, додані після здійснення виклику filter(), буде знехтувано. Якщо наявні елементи масиву було змінено або видалено, до функції callback потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом callback. Видалені елементи опрацьовано не буде.

+ +

Приклади

+ +

Вилучення замалих чисел

+ +

Наведений приклад за допомогою метода filter() створює новий масив, що міститиме лише числа, які перевищують 10:

+ +
function isBigEnough(value) {
+  return value >= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered дорівнює [12, 130, 44]
+
+ +

Фільтрування неправильних записів з JSON

+ +

Цей приклад використовує метод filter(), щоб створити відфільтрований JSON з усіх елементів, які мають ненульове, числове значення id:

+ +
var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function isNumber(obj) {
+  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
+}
+
+function filterByID(item) {
+  if (isNumber(item.id) && item.id !== 0) {
+    return true;
+  }
+  invalidEntries++;
+  return false;
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Відфільтрований масив\n', arrByID);
+// Відфільтрований масив
+// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Кількість неправильних записів = ', invalidEntries);
+// Кількість неправильних записів = 5
+ +

Пошук у масиві

+ +

Цей приклад використовує filter(), щоб відфільтрувати масив за пошуковим критерієм:

+ +
var fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос'];
+
+/**
+ * Фільтрувати елементи масиву за пошуковим критерієм (запитом)
+ */
+function filterItems(arr, query) {
+  return arr.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+  })
+}
+
+console.log(filterItems(fruits, 'ко'));  // ['яблуко', 'кокос']
+console.log(filterItems(fruits, 'ан'));  // ['банан', 'манго']
+ +

Реалізація ES2015

+ +
const fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос'];
+
+/**
+* Фільтрувати елементи масиву за пошуковим критерієм (запитом)
+*/
+const filterItems = (arr, query) => {
+  return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1);
+};
+
+console.log(filterItems(fruits, 'ко')); // ['яблуко', 'кокос']
+console.log(filterItems(fruits, 'ан')); // ['банан', 'манго']
+ +

Запасний варіант (поліфіл)

+ +

Метод filter() був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наведений нижче код на початку ваших скриптів, це дозволить використовувати filter() у версіях ECMA-262, які не підтримують його початково. Цей алгоритм є точним еквівалентом впровадженого у 5-й версії ECMA-262, за умови, що fn.call відповідає початковому значенню {{jsxref("Function.prototype.bind()")}}, і {{jsxref("Array.prototype.push()")}} не було змінено.

+ +
if (!Array.prototype.filter) {
+    Array.prototype.filter = function(func, thisArg) {
+        'use strict';
+        if (!((typeof func === 'Function' || typeof func === 'function') && this) )
+            throw new TypeError();
+
+        var len = this.length >>> 0,
+            res = new Array(len),  // попередньо створений масив
+            t = this, c = 0, i = -1;
+
+        var kValue;
+        if (thisArg === undefined){
+          while (++i !== len){
+            // перевіряє, чи заданий ключ
+            if (i in this){
+              kValue = t[i]; // у цьому випадку t змінюється у функції callback
+              if (func(t[i], i, t)){
+                res[c++] = kValue;
+              }
+            }
+          }
+        }
+        else {
+          while (++i !== len) {
+            // перевіряє, чи заданий ключ
+            if (i in this){
+              kValue = t[i];
+              if (func.call(thisArg, t[i], i, t)){
+                res[c++] = kValue;
+              }
+            }
+          }
+        }
+
+        res.length = c; // зменшити масив до правильного розміру
+        return res;
+    };
+}
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Початкова виознака. Запроваджено у JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +
{{Compat("javascript.builtins.Array.filter")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/find/index.html b/files/uk/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..a08566da73 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,233 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - JavaScript + - Method + - Prototype + - polyfill + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +
{{JSRef}}
+ +

Метод find() повертає значення першого елемента в масиві, що задовільняє передану функцію тестування. Інакше вертається {{jsxref("undefined")}}.

+ +

{{EmbedInteractiveExample("pages/js/array-find.html")}}

+ + + +

Зверніть увагу також на метод {{jsxref("Array.prototype.findIndex", "findIndex()")}}, що натомість повертає індекс знайденого елемента масиву, а не значення.

+ +

Якщо вам необхідно знайти позицію елемента або дізнатись, чи існує елемент в масиві, використовуйте {{jsxref("Array.prototype.indexOf()")}} або {{jsxref("Array.prototype.includes()")}}.

+ +

Синтаксис

+ +
arr.find(callback(element[, index[, array]])[, thisArg])
+ +

Параметри

+ +
+
callback
+
Функція, що виконується для кожного значення в масиві і приймає три аргументи: +
+
element
+
Значення поточного елемента масиву.
+
index{{optional_inline}}
+
Індекс поточного елемента масиву.
+
array{{optional_inline}}
+
Масив, для якого було викликано find.
+
+
+
thisArg {{Optional_inline}}
+
Необов'язковий об'єкт, що використовується в якості this при виконанні callback.
+
+ +

Вертає

+ +

Значення першого елемента в масиві, який задовольняє надану перевірочну функцію. Інакше повертається {{jsxref("undefined")}}.

+ +

Опис

+ +

Метод find виконує функцію callback один раз для кожного елемента в масиві, аж поки не буде знайдено такий, для якого callback повертає правдиве значення. Щойно такий елемент знайдено, find одразу ж повертає значення цього елемента. В іншому випадку, find  повертає {{jsxref("undefined")}}. Функція callback викликається для кожного індексу масиву з 0 по length - 1 і виконується для усіх елементів, не лише для тих, які мають присвоєні значення. Це означає, що цей метод може бути менш ефективним для розріджених масивів у порівнянні з методами, які обробляють лише ті, елементи, яким присвоєні значення.

+ +

Функція callback викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт Array, перебір якого здійснюється.

+ +

Якщо параметр thisArg передано до find, його буде використано як this для кожного виклику callback. Якщо його не передано, тоді використовуватиметься {{jsxref("undefined")}}.

+ +

Метод find() не змінює масив, для якого викликається.

+ +

Діапазон елементів, що їх має обробити find, визначається ще до першого виклику функції callback. Тому callback не обробляє елементи, додані до масиву після того, як почалося виконання find. Якщо існуючий, ще не опрацьований елемент масиву, змінюється функцією callback, його значення, що передається до callback, буде значенням на той момент, коли find доходить до індексу цього елемента. Видалені елементи все одно опрацьовуються.

+ +

Приклади

+ +

Знайти об'єкт в масиві за однією з його властивостей

+ +
var inventory = [
+    {name: 'яблука', quantity: 2},
+    {name: 'банани', quantity: 0},
+    {name: 'вишні', quantity: 5}
+];
+
+function findCherries(fruit) {
+    return fruit.name === 'вишні';
+}
+
+console.log(inventory.find(findCherries));
+// виводить { name: 'вишні', quantity: 5 }
+
+ +

Використання стрілочної функції ES2015

+ +
const inventory = [
+    {name: 'яблука', quantity: 2},
+    {name: 'банани', quantity: 0},
+    {name: 'вишні', quantity: 5}
+];
+
+const result = inventory.find( fruit => fruit.name === 'вишні' );
+
+console.log(result) // { name: 'вишні', quantity: 5 }
+
+ +

Знайти просте число у масиві

+ +

Наступний приклад знаходить елемент у масиві, який є простим числом (або повертає {{jsxref("undefined")}}, якщо простого числа немає):

+ +
function isPrime(element, index, array) {
+  var start = 2;
+  while (start <= Math.sqrt(element)) {
+    if (element % start++ < 1) {
+      return false;
+    }
+  }
+  return element > 1;
+}
+
+[4, 6, 8, 12].find(isPrime);  // вертає undefined, простих чисел не знайдено
+[4, 5, 8, 12].find(isPrime);  // вертає 5
+
+ +

Наступні приклади демонструють, що неіснуючі та видалені елементи теж опрацьовуються, і що значення, передане до функції зворотного виклику - це їхнє значення на момент перевірки.

+ +
// Створити масив без елементів за індексами 2, 3 та 4
+const array = [0,1,,,,5,6];
+
+// Виводить всі індекси, не лише ті, які мають присвоєні значення
+array.find(function(value, index) {
+  console.log('Індекс ' + index + ' має значення ' + value);
+});
+
+// Виводить всі індекси, в тому числі видалені
+array.find(function(value, index) {
+
+  // Видалити елемент 5 в першій ітерації
+  if (index == 0) {
+    console.log('Видалення елемента array[5] зі значенням ' + array[5]);
+    delete array[5];
+  }
+  // Елемент 5 перевіряється, хоч і був видалений
+  console.log('Індекс ' + index + ' має значення ' + value);
+});
+// очікуваний результат:
+// Видалення елемента array[5] зі значенням 5
+// Індекс 0 має значення 0
+// Індекс 1 має значення 1
+// Індекс 2 має значення undefined
+// Індекс 3 має значення undefined
+// Індекс 4 має значення undefined
+// Індекс 5 має значення undefined
+// Індекс 6 має значення 6
+
+ +

Запасний варіант (поліфіл)

+ +

Цей метод був доданий у ECMAScript 2015, тож, можливо, поки наявний не у всякій реалізації JavaScript. Проте, ви можете використати наступний код для забезпечення запасного варіанту Array.prototype.find:

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Нехай O дорівнює ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('предикат має бути функцією');
+      }
+
+      // 4. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+      var thisArg = arguments[1];
+
+      // 5. Нехай k дорівнює 0.
+      var k = 0;
+
+      // 6. Повторювати, поки k < len
+      while (k < len) {
+        // a. Нехай Pk дорівнює ! ToString(k).
+        // b. Нехай kValue дорівнює ? Get(O, Pk).
+        // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. Якщо testResult дорівнює true, повернути kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Збільшити k на 1.
+        k++;
+      }
+
+      // 7. Повернути undefined.
+      return undefined;
+    }
+  });
+}
+
+ +

Якщо вам потрібно забезпечити підтримку вкрай застарілих рушіїв JavaScript, в яких відсутня підтримка Object.defineProperty, було б краще взагалі не додавати методів до Array.prototype через відсутність можливості заборонити їх перебір.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціїСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ES2015')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.find")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/findindex/index.html b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..550a072e19 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,187 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +
{{JSRef}}
+ +

Метод findIndex() повертає індекс першого елемента у масиві, який задовольняє надану перевірочну функцію. Інакше повертаєтсья -1, зазначаючи, що жодний елемент не пройшов перевірку.

+ +
{{EmbedInteractiveExample("pages/js/array-findindex.html")}}
+ + + +

Дивіться також метод {{jsxref("Array.find", "find()")}}, який повертає значення елемента масиву замість індексу.

+ +

Синтаксис

+ +
arr.findIndex(callback(element[, index[, array]])[, thisArg])
+ +

Параметри

+ +
+
callback
+
Функція, яка виконується на кожному значенні масиву, поки не поверне true, зазначаючи, що відповідний елемент знайдений. Вона приймає три аргументи: +
+
element
+
Поточний елемент масиву, який обробляється.
+
index{{optional_inline}}
+
Індекс поточного елементу, що обробляється.
+
array{{optional_inline}}
+
Масив, для якого був викликаний метод findIndex.
+
+
+
thisArg{{optional_inline}}
+
Необов'язковий об'єкт для використання у якості this під час виконання callback.
+
+ +

Значення, що повертається

+ +

Індекс першого елемента у масиві, який успішно пройшов перевірку. Інакше -1.

+ +

Опис

+ +

Метод findIndex виконує функцію callback один раз для кожного індексу 0..length-1 (включно) у масиві, поки не знайде той, для якого callback поверне правдиве значення (таке, що приводиться до true).

+ +

Якщо такий елемент знайдено, findIndex негайно повертає його індекс. Якщо функція зворотного виклику так і не повертає правдиве значення (або довжина масиву length дорівнює 0), findIndex повертає -1. На відміну від інших методів масивів, таких як {{jsxref("Array.some")}}, callback викликається навіть для індексів, що не мають значень.

+ +

callback викликається з трьома аргументами:

+ +
    +
  1. Значення елемента
  2. +
  3. Індекс елемента
  4. +
  5. Об'єкт Array, який перебирається
  6. +
+ +

Якщо параметр thisArg передається до findIndex, він буде використаний у якості this всередині кожного виклику callback. Якщо він не наданий, то використовується {{jsxref("undefined")}}.

+ +

Діапазон елементів, які опрацьовує findIndex, встановлюється до першого виклику callback. callback не обробляє елементи, додані до масиву після того, як почалося виконання findIndex. Якщо існуючий, ще не опрацьований елемент масиву змінюється функцією callback, його значення, що передається до callback буде значенням на той момент, коли findIndex доходить до індексу цього елементу. Видалені елементи все одно опрацьовуються.

+ +

Приклади

+ +

Знайти індекс простого числа у масиві

+ +

Наступний приклад повертає індекс першого елементу у масиві, який є простим числом, або -1, якщо там нема жодного простого числа.

+ +
function isPrime(element, index, array) {
+  var start = 2;
+  while (start <= Math.sqrt(element)) {
+    if (element % start < 1) {
+      return false;
+    } else {
+      start++;
+    }
+  }
+  return element > 2;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не знайдено
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 (array[2] дорівнює 7)
+
+ +

Знайти індекс, використувуючи стрілочну функцію

+ +

Наступний приклад знаходить індекс фрукта, використувуючи стрілочну функцію:

+ +
const fruits = ["яблуко", "банан", "диня", "чорниці", "грейпфрут"];
+
+const index = fruits.findIndex(fruit => fruit === "чорниці");
+
+console.log(index); // 3
+console.log(fruits[index]); // чорниці
+
+ +

Поліфіл

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Нехай O дорівнює ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('предикат має бути функцією');
+      }
+
+      // 4. Якщо наданий thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+      var thisArg = arguments[1];
+
+      // 5. Нехай k дорівнює 0.
+      var k = 0;
+
+      // 6. Повторювати, поки k < len
+      while (k < len) {
+        // a. Нехай Pk дорівнює ! ToString(k).
+        // b. Нехай kValue дорівнює ? Get(O, Pk).
+        // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. Якщо testResult дорівнює true, повернути k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Збільшити k на 1.
+        k++;
+      }
+
+      // 7. Повернути -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+
+ +

Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують Object.defineProperty, краще взагалі не використовувати поліфіли методів Array.prototype, оскільки ви не зможете зробити їх не перелічуваними.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.findIndex")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/flat/index.html b/files/uk/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..ff20a8d058 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,150 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +
{{JSRef}}
+ +

Метод flat() створює новий масив який містить всі елементи вкладених масивів до вказаної глибини.

+ + + + + +

Синтакс

+ +
var newArray = arr.flat([depth]);
+ +

Параметри

+ +
+
depth {{optional_inline}}
+
Глибина, що вказує до якого рівня вкладеності масивів має відбуватись вирівнювання. За замовчуванням 1.
+
+ +

Вихідне значення

+ +

Новий масив, що містить елементи вкладених масивів.

+ +

Приклади

+ +

Вирівнювання вкладених масивів

+ +
var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+
+ +

Вирівнювання і прогалини в масиві

+ +

Метод flat видаляє порожні елементи масивів:

+ +
var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+
+ +

Альтернатива

+ +

reduce і concat

+ +
var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+
+//вирівняти один рівень масиву
+arr1.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4]
+
+//або
+const flatSingle = arr => [].concat(...arr);
+ +
//щоб здійснити глибоке вирівнювання, використовуйте рекурсію з reduce і concat
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+
+function flattenDeep(arr1) {
+   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
+}
+flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+
+ +
//глибоке вирівнювання без рекурсії, використовуючи stack
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // викидаємо значення зі стеку
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // додаємо елементи масиву, не змінюючи вхідного масиву
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  //перевертаємо масив, щоб порядок сортування відповідав вхідному
+  return res.reverse();
+}
+flatten(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+ +
//глибоке вирівнювання з рекурсією
+function flatten(array) {
+  var flattend = [];
+  (function flat(array) {
+    array.forEach(function(el) {
+      if (Array.isArray(el)) flat(el);
+      else flattend.push(el);
+    });
+  })(array);
+  return flattend;
+}
+ + + +

Специфікації

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
Array.prototype.flat proposalFinished (4)
+ +

Сумісність з браузерами

+ +
+ + +

{{Compat("javascript.builtins.Array.flat")}}

+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..58033475d1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +tags: + - Array + - JavaScript + - flatMap + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +
{{JSRef}}
+ +

Метод flatMap() спочатку виконує надану функцію на кожному елементі, а після цього вирівнює отриманий результат і зберігає його у новий масив. Це аналогічно послідовному виклику {{jsxref("Array.prototype.map","map()")}} та {{jsxref("Array.prototype.flat","flat()")}} з глибиною 1, але flatMap() буває доволі корисним, оскільки об'єднання обох методів у один є трохи ефективнішим.

+ + + + + +

Синтаксис

+ +
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
+    // повернути елемент для нового масиву new_array
+}[, thisArg])
+ +

Параметри

+ +
+
callback
+
Функція, яка створює елемент для нового масиву. Приймає три аргументи: +
+
+
currentValue
+
Поточний елемент масиву, що обробляється.
+
index{{optional_inline}}
+
Індекс поточного елемента, що обробляється.
+
array{{optional_inline}}
+
Масив, для якого був викликаний метод flatMap.
+
+
+
thisArg{{optional_inline}}
+
Значення, що використовується як this під час виконання callback.
+
+ +

Значення, що повертається

+ +

Новий масив, в якому кожний елемент є результатом виклику функції callback, вирівняний до глибини 1.

+ +

Опис

+ +

Дивіться детальний опис функції зворотного виклику у {{jsxref("Array.prototype.map()")}}. Метод flatMap є ідентичним послідовному виклику методів map та flat з глибиною 1.

+ +

Приклади

+ +

map() та flatMap()

+ +
let arr1 = [1, 2, 3, 4];
+
+arr1.map(x => [x * 2]);
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x => [x * 2]);
+// [2, 4, 6, 8]
+
+// вирівнюється тільки один рівень
+arr1.flatMap(x => [[x * 2]]);
+// [[2], [4], [6], [8]]
+
+ +

В той час як наведений вище результат міг бути отриманий використанням самого map, нижче приклад, який краще демонструє використання flatMap.

+ +

Давайте створимо список слів зі списку речень.

+ +
let arr1 = ["Сьогодні сонячно у", "", "Львові"];
+
+arr1.map(x => x.split(" "));
+// [["Сьогодні","сонячно","у"],[""],["Львові"]]
+
+arr1.flatMap(x => x.split(" "));
+// ["Сьогодні","сонячно","у", "", "Львові"]
+ +

Зверніть увагу, що довжина результуючого списку може відрізнятися від довжини початкового списку.

+ +

Для додавання та видалення елементів під час виконання map()

+ +

Метод flatMap можна використовувати, щоб додавати та видаляти елементи (змінювати кількість елементів) під час виконання map. Іншими словами, він дозволяє кожен з множини елементів перетворювати на множину елементів (обробляючи кожен елемент окремо), а не завжди 1-1. В цьому плані він протилежність метода filter. Просто поверніть 1-елементний масив, щоб залишити елемент, багатоелементний масив, щоб додати елементи, або порожній масив, щоб видалити елемент.

+ +
// Припустимо, ми бажаємо видалити всі від'ємні числа та розбити непарні числа на парне число та 1
+let a = [5, 4, -3, 20, 17, -33, -4, 18]
+//       |\  \  x   |  | \   x   x   |
+//      [4,1, 4,   20, 16, 1,       18]
+
+a.flatMap( (n) =>
+  (n < 0) ?      [] :
+  (n % 2 == 0) ? [n] :
+                 [n-1, 1]
+)
+
+// очікуваний результат: [4, 1, 4, 20, 16, 1, 18]
+
+ +

Альтернатива

+ +

reduce() та concat()

+ +
var arr1 = [1, 2, 3, 4];
+
+arr1.flatMap(x => [x * 2]);
+// є еквівалентом
+arr1.reduce((acc, x) => acc.concat([x * 2]), []);
+// [2, 4, 6, 8]
+
+ +

Зауважте, однак, що цей метод краще не застосовувати для великих масивів, бо він буде неефективним: на кожній ітерації він створює новий тимчасовий масив, який треба прибирати збирачу сміття, і він копіює елементи з поточного масива-накопичувача у новий масив замість того, щоб просто додати нові елементи у існуючий масив.

+ + + +

Специфікації

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКомент
Array.prototype.flatMapЗавершено (4)
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.flatMap")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/foreach/index.html b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..97a354787f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,290 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +tags: + - ECMAScript5 + - JavaScript + - Method + - Prototype + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +
{{JSRef}}
+ +

Метод forEach() виконує надану функцію один раз для кожного елемента масиву.

+ +

{{EmbedInteractiveExample("pages/js/array-foreach.html")}}

+ + + +

Синтаксис

+ +
arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
+ +

Параметри

+ +
+
callback
+
Функція, що виконується для кожного елемента. Приймає три аргументи:
+
+
+
currentValue
+
Черговий елемент масиву, що обробляється.
+
index {{optional_inline}}
+
Індекс чергового елемента в масиві.
+
array {{optional_inline}}
+
Масив, для якого було викликано forEach().
+
+
+
thisArg {{optional_inline}}
+
+

Значення, що використовується як this при виконанні callback.

+
+
+ +

Вертає

+ +

undefined.

+ +

Опис

+ +

Метод forEach() викликає надану функцію callback для кожного елемента масиву у порядку зростання. Оминає властивості, які було видалено або не було започатковано (тобто, в розріджених масивах, дивіться приклад, наведений нижче).

+ +

Функція callback викликається з трьома аргументами:

+ +
    +
  1. значення елемента;
  2. +
  3. індекс елемента;
  4. +
  5. масив, що перебирається.
  6. +
+ +

Якщо для forEach() вказано параметр thisArg, його буде використано як this для функції callback. Зрештою значення this для функції callback визначатиметься відповідно до загальних правил.

+ +

Множина індексів елементів, що їх перебиратиме forEach() з'ясовується ще до першого виклику callback. Елементи, додані після здійснення виклику forEach(), буде знехтувано (callback для жодного з них не викликатиметься). Якщо змінити або видалити якийсь з елементів масиву, до функції callback потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом callback. Якщо елемент видалено до відвідування, відвідано не буде. Якщо вже відвіданий елемент видалено упродовж перебирання (наприклад, за допомогою {{jsxref("Array.prototype.shift()", "shift()")}}), подальші елементи будуть пропущені — дивіться приклади нижче у статті.

+ +

Метод forEach() виконує функцію callback один раз для кожного елемента масиву. На відміну від {{jsxref("Array.prototype.map()", "map()")}} чи {{jsxref("Array.prototype.reduce()", "reduce()")}}, він завжди вертає значення {{jsxref("undefined")}}, тож продовжити ланцюжок викликів після нього неможливо. Досить типовим є виклик forEach() наприкінці ланцюжка методів з метою виконання додаткових дій.

+ +

Сам метод forEach() не змінює масив, на якому його викликано, втім усередині функції callback це можливо.

+ +
+

Заувага: Зупинити чи перервати цикл forEach() неможливо без викидання винятку. Якщо вам це потрібно, метод forEach() — не ліпший вибір. 

+ +

Завчасне переривання може бути виконане за допомогою:

+ + + +

Методи масивів: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} та {{jsxref("Array.prototype.findIndex()", "findIndex()")}} перевіряють елементи масиву функцією-предикатом, яка повертає правдиве значення, якщо наступна ітерація необхідна.

+
+ +

Приклади

+ +

Операція не виконується для неініціалізованих значень (розріджені масиви)

+ +
const arraySparse = [1,3,,7];
+let numCallbackRuns = 0;
+
+arraySparse.forEach(function(element){
+  console.log(element);
+  numCallbackRuns++;
+});
+
+console.log("numCallbackRuns: ", numCallbackRuns);
+
+// 1
+// 3
+// 7
+// numCallbackRuns: 3
+// коментар: як бачите, пропущене значення між 3 та 7 не викликало функцію.
+ +

Перетворення циклу for на forEach

+ +
const items = ['щось', 'то', 'має', 'бути'];
+const copy = [];
+
+// було
+for (let i = 0; i < items.length; i++) {
+  copy.push(items[i])
+}
+
+// стане
+items.forEach(function(item) {
+  copy.push(item)
+});
+ +

Друк вмісту масиву

+ +
+

Заувага: Для того, щоб відобразити вміст масиву у консолі, ви можете скористатись методом {{domxref("Console/table", "console.table()")}}, який виведе відформатовану версію масиву. Наступний приклад ілюструє інший спосіб це зробити, за допомогою forEach().

+
+ +

Наведений код виводить значення кожного елемента масиву з нового рядка:

+ +
function logArrayElements(element, index, array) {
+  console.log('array[' + index + '] = ' + element);
+}
+
+// Завважте, що індекс 2 буде пропущено,
+// позаяк елемента на тому місці в масиві немає.
+[2, 5, , 9].forEach(logArrayElements);
+
+// Буде виведено у консоль:
+// array[0] = 2
+// array[1] = 5
+// array[3] = 9
+
+ +

Використання thisArg

+ +

Наведений приклад змінює властивості об'єкта відповідно до кожного елемента в отриманому масиві:

+ +
function Counter() {
+  this.sum = 0;
+  this.count = 0;
+}
+
+Counter.prototype.add = function(array) {
+  array.forEach(function(entry) {
+    this.sum += entry;
+    ++this.count;
+  }, this);
+  // ^---- Зверніть увагу!
+};
+
+const obj = new Counter();
+obj.add([2, 5, 9]);
+obj.count;
+// 3
+obj.sum;
+// 16
+
+ +

Оскільки для forEach() вказано параметр thisArg, для кожного виклику callback (тут безіменної функції) він вживатиметься як this.

+ +
+

Якщо передавати аргумент функції за допомогою стрілкового запису функції, то параметр thisArg можна не вказувати, позаяк стрілкова функція лексично прив'язує значення {{jsxref("Operators/this", "this")}}.

+
+ +

Функція копіювання об'єкта

+ +

Наступний код створює копію наданого об'єкта. Існує чимало способів створення копії об'єкта. Наведений приклад є лише одним з них і насправді призначений лише для наочного пояснення того, як працює Array.prototype.forEach() на прикладі використання нових функцій ECMAScript 5 з Object.* для роботи з керованими властивостями:

+ +
function copy(obj) {
+  const copy = Object.create(Object.getPrototypeOf(obj));
+  const propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(name) {
+    const desc = Object.getOwnPropertyDescriptor(obj, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+const obj1 = {a: 1, b: 2};
+const obj2 = copy(obj1);  // obj2 тепер схожий на obj1
+
+ +

Якщо масив змінено під час перебору, інші елементи може бути пропущено

+ +

Наведений приклад виводить у консоль послідовно "перший", "другий" та "четвертий". Коли перебір сягне другого елемента (що має значення "другий"), виклик words.shift() видалить перший елемент масиву, а всі, що лишаться, посунуться на одне місце ліворуч — "четвертий" стане наступним (після поточного), і "третій" таким чином буде пропущено:

+ +
var words = ['перший', 'другий', 'третій', 'четвертий'];
+
+words.forEach(function(word) {
+  console.log(word);
+
+  if (word === 'другий') {
+    words.shift();
+  }
+});
+
+// перший
+// другий
+// четвертий
+
+ +

Вирівнювання масиву

+ +

Даний приклад наведено суто для навчальння. Якщо вам потрібно вирівняти масив вбудованими методами, ви можете скористатись методом {{jsxref("Array.prototype.flat()")}} (очікується у ES2019 та вже реалізований у деяких переглядачах).

+ +
/**
+* Вирівнює переданий масив у одномірний
+*
+* @params {array} arr
+* @returns {array}
+*/
+function flatten(arr) {
+  const result = [];
+
+  arr.forEach((i) => {
+    if (Array.isArray(i)) {
+      result.push(...flatten(i))
+    } else {
+      result.push(i)
+    }
+  });
+
+  return result;
+}
+
+// Використання
+const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
+
+flatten(problem) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}{{Spec2('ES5.1')}}Початкова виознака. Запроваджено у JavaScript 1.6.
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.forEach")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/from/index.html b/files/uk/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..7cfb6325b8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,242 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript6 + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +
{{JSRef}}
+ +

Метод Array.from() створює новий екземпляр Array (дрібну копію) з подібного до масиву або ітерабельного об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/array-from.html")}}
+ + + +

Синтаксис

+ +
Array.from(arrayLike[, mapFn[, thisArg]])
+ +

Параметри

+ +
+
arrayLike
+
Подібний до масиву або ітерабельний об'єкт, який треба перетворити на масив.
+
mapFn {{Optional_inline}}
+
Функція Map для виклику на кожному елементі масиву.
+
thisArg {{Optional_inline}}
+
Значення this для функції mapFn.
+
+ +

Значення, яке повертається

+ +

Новий екземпляр {{jsxref("Array")}}.

+ +

Опис

+ +

Array.from() дозволяє створювати масиви з:

+ + + +

Array.from() має необов'язковий параметр mapFn, який дозволяє виконати функцію {{jsxref("Array.prototype.map", "map")}} на кожному елементі масиву (або об'єкта підкласу), який створюється. Іншими словами, Array.from(obj, mapFn, thisArg) має той самий результат, що й Array.from(obj).map(mapFn, thisArg), тільки він не створює проміжний масив. Це особливо важливо для певних підкласів масивів, таких як типізовані масиви, оскільки проміжний масив обов'язково урізав би значення для перетворення у відповідний тип.

+ +

Властивість length методу from() дорівнює 1.

+ +

У ES2015, синтаксис класів дозволяє створення підкласів як для вбудованих класів, так і для тих, що створені користувачем; в результаті статичні методи, такі як Array.from "успадковуються" підкласами класу Array і створюють нові екземпляри підкласу, а не класу Array.

+ +

Приклади

+ +

Масив з рядка

+ +
Array.from('foo');
+// [ "f", "o", "o" ]
+ +

Масив з об'єкта Set

+ +
const set = new Set(['foo', 'bar', 'baz', 'foo']);
+Array.from(set);
+// [ "foo", "bar", "baz" ]
+ +

Масив з об'єкта Map

+ +
const map = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(map);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];
+
+ +

Масив з подібного до масиву об'єкта (arguments)

+ +
function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [ 1, 2, 3 ]
+ +

Використання стрілкових функцій та Array.from()

+ +
// Використання стрілкової функції в якості функції map
+// для маніпулювання елементами
+Array.from([1, 2, 3], x => x + x);
+// [2, 4, 6]
+
+
+// Генерування послідовності чисел
+// Оскільки масив ініціалізується значенням `undefined` на кожній позиції,
+// значення `v` нижче дорівнюватиме `undefined`
+Array.from({length: 5}, (v, i) => i);
+// [0, 1, 2, 3, 4]
+
+ +

Генератор послідовності (range)

+ +
// Функція генератора послідовності (зазвичай відома як "range", напр. у Clojure, PHP та ін.)
+const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
+
+// Згенерувати числа у діапазоні 0..4
+range(0, 4, 1);
+// [0, 1, 2, 3, 4]
+
+// Згенерувати числа у діапазоні 1..10 з кроком 2
+range(1, 10, 2);
+// [1, 3, 5, 7, 9]
+
+// Згенерувати алфавіт з допомогою Array.from, користуючись тим, що він впорядкований як послідовність
+range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
+// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+
+ +

Поліфіл

+ +

Метод Array.from був доданий до стандарту ECMA-262 у 6-й версії (ES2015); таким чином, він може не існувати у інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод Array.from у реалізаціях, які не мають його вбудованої підтримки. Цей алгоритм саме той, що визначений у ECMA-262, у 6-й версії, за умови, що Object та TypeError мають свої первинні значення і callback.call дорівнює первинному значенню {{jsxref("Function.prototype.call")}}. На додаток, оскільки справжні ітерабельні об'єкти не можуть мати поліфілу, ця реалізація не підтримує загальні ітерабельні об'єкти, визначені у 6-й версії ECMA-262.

+ +
// Функціональні кроки ECMA-262, версія 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // Властивість length метода from дорівнює 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Нехай C дорівнює значенню this.
+      var C = this;
+
+      // 2. Нехай items дорівнює ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. Якщо mapfn дорівнює undefined, тоді нехай mapping дорівнює false.
+      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. інакше
+        // 5. а Якщо IsCallable(mapfn) дорівнює false, викинути виняток TypeError.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. б. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+        if (arguments.length > 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Нехай lenValue дорівнює Get(items, "length").
+      // 11. Нехай len дорівнює ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. Якщо IsConstructor(C) дорівнює true, тоді
+      // 13. а. Нехай A дорівнює результату виклику внутрішнього метода С [[Construct]]
+      // зі списком аргументів, що містить єдиний елемент len.
+      // 14. a. Інакше, нехай A дорівнює ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Нехай k дорівнює 0.
+      var k = 0;
+      // 17. Повторювати, доки k < len… (також кроки a - h)
+      var kValue;
+      while (k < len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Нехай putStatus дорівнює Put(A, "length", len, true).
+      A.length = len;
+      // 20. Повернути A.
+      return A;
+    };
+  }());
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}{{Spec2('ES2015')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.from")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/includes/index.html b/files/uk/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..3030f78d9f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - Array + - JavaScript + - Method + - Prototype + - polyfill + - Довідка + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +
{{JSRef}}
+ +

Метод includes() з'ясовує, чи масив містить елемент із вказаним значенням, та вертає відповідно true або false.

+ +

{{EmbedInteractiveExample("pages/js/array-includes.html")}}

+ + + +

Синтаксис

+ +
arr.includes(valueToFind[, fromIndex])
+ +

Параметри

+ +
+
valueToFind
+
Значення елемента, який слід знайти.
+
+ +
+

Примітка: При порівнянні рядків та літер, includes() чутливий до регістру.

+
+ +
+
fromIndex {{optional_inline}}
+
Позиція у масиві, з якої потрібно починати пошук valueToFind; перша літера шукатиметься за індексом fromIndex, якщо fromIndex є позитивним значенням, або за індексом array.length + fromIndex, якщо fromIndex від'ємний (використовуючи {{interwiki("wikipedia", "Модуль_(математика)", "абсолютну величину")}} fromIndex як кількість літер з кінця масиву, де потрібно починати пошук). За замовчуванням дорівнює 0.
+
+ +

Вертає

+ +

Значення {{jsxref("Boolean")}}, яке дорівнює true, якщо значення valueToFind знайдене у масиві (або у частині масиву, якщо заданий параметр fromIndex). Всі нульові значення вважаються рівними, незалежно від знаку (тому -0 вважатиметься рівним і 0, і +0), але false не вважається тим самим, що й 0.

+ +
+

Примітка: Технічно кажучи, includes() використовує алгоритм sameValueZero для визначення того, чи знайдено заданий елемент.

+
+ +

Приклади

+ +
[1, 2, 3].includes(2);      // true
+[1, 2, 3].includes(4);      // false
+[1, 2, 3].includes(3, 3);   // false
+[1, 2, 3].includes(3, -1);  // true
+[1, 2, NaN].includes(NaN);  // true
+
+ +

fromIndex більший або дорівнює довжині масиву

+ +

Якщо fromIndex дорівнює або перевищує довжину масиву, пошук не здійснюється й завжди вертається false:

+ +
var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);    // вертає false
+arr.includes('c', 100);  // вертає false
+ +

Обчислений індекс менший за 0

+ +

Якщо значення fromIndex від'ємне, використовується обчислений індекс для визначення позиції, з якої починати пошук valueToFind у масиві. Якщо обчислений індекс менший або дорівнює -1 * array.length, пошук здійснюється у всьому масиві.

+ +
// Довжина масиву дорівнює 3
+// fromIndex дорівнює -100
+// Обчислений індекс дорівнює 3 + (-100) = -97
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -100); // true
+arr.includes('b', -100); // true
+arr.includes('c', -100); // true
+arr.includes('a', -2); // false
+ +

Застосування includes() як загального метода

+ +

Реалізація метода includes() є зумисне узагальненою. Об'єкт, на який вказує this, не обов'язково повинен належати до класу Array, тож використання includes() можна поширити на інші масивоподібні об'єкти. В наведеному нижче прикладі його застосовано до об'єкта {{jsxref("Functions/arguments", "arguments")}}:

+ +
(function() {
+  console.log([].includes.call(arguments, 'a'));  // виводить true
+  console.log([].includes.call(arguments, 'd'));  // виводить false
+})('a','b','c');
+
+ + + +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ESDraft')}}
{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ES7')}}Початкова виознака.
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.includes")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/index.html b/files/uk/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..18045d9c84 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,431 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - JavaScript + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +
{{JSRef}}
+ +

Array є глобальним об'єктом, що використовується для створення масивів; які є високорівневими, спископодібними об'єктами.

+ +

Створення масиву

+ +
var fruits = ["Яблуко", "Банан"];
+
+console.log(fruits.length);
+// 2
+
+ +

Доступ до елементів масиву (за індексом)

+ +
var first = fruits[0];
+// Яблуко
+
+var last = fruits[fruits.length - 1];
+// Банан
+
+ +

Обхід елементів масиву

+ +
fruits.forEach(function (item, index, array) {
+  console.log(item, index);
+});
+// Яблуко 0
+// Банан 1
+
+ +

Додавання в кінець масиву

+ +
var newLength = fruits.push("Апельсин");
+// ["Яблуко", "Банан", "Апельсин"]
+
+ +

Видалення елемента з кінця масиву

+ +
var last = fruits.pop(); // видалити Апельсин (з кінця)
+// ["Яблуко", "Банан"];
+
+ +

Видалення елемента з початку масиву

+ +
var first = fruits.shift(); // видалити Яблуко з початку
+// ["Банан"];
+
+ +

Додавання елемента до початку масиву

+ +
var newLength = fruits.unshift("Полуниця") // додади до початку
+// ["Полуниця", "Банан"];
+
+ +

Пошук індексу елемента в масиві

+ +
fruits.push("Манго");
+// ["Полуниця", "Банан", "Манго"]
+
+var pos = fruits.indexOf("Банан");
+// 1
+
+ +

Видалення елемента масиву за його індексом (позицією)

+ +
var removedItem = fruits.splice(pos, 1); // ось, як видаляється елемент
+// ["Полуниця", "Манго"]
+
+ +

Видалення елементів починаючи з певного індексу

+ +
var vegetables = ['Капуста', 'Ріпа', 'Редька', 'Морква'];
+console.log(vegetables);
+// ["Капуста", "Ріпа", "Редька", "Морква"]
+
+var pos = 1, n = 2;
+
+var removedItems = vegetables.splice(pos, n);
+// ось так видаляються елементи, n визначає кількість елементів на видалення,
+// від цієї позиції (pos) в напрямку кінця масиву.
+
+console.log(vegetables);
+// ["Капуста", "Морква"] (початковий масив змінено)
+
+console.log(removedItems);
+// ["Ріпа", "Редька"]
+ +

Копіювання масиву

+ +
var shallowCopy = fruits.slice(); // ось так робиться копія
+// ["Полуниця", "Манго"]
+
+ +

Синтаксис

+ +
[element0, element1, ..., elementN]
+new Array(element0, element1[, ...[, elementN]])
+new Array(arrayLength)
+
+ +
+
+

Параметри

+
+
+ +

elementN

+ +
+
Масив у JavaScript ініціалізується за допомогою наперед заданих елементів, за виключенням тієї ситуації коли в конструктор Array передається тільки один аргумент і він є числом (див. параметр arrayLength нижче). Зверніть увагу на те, що це спрацьовує лише у тому випадку, якщо масив створено за допомогою  конструктора Array, а не через літерали масивів створених з допомогою синтаксу квадратних дужок.
+
arrayLength
+
Якщо єдиним аргументом (вхідним параметром) конструктора Array є ціле число від 0 до 232-1 (включно), буде повернено новий JavaScript-масив з властивістю length рівною цьому числу.  Зверніть увагу, що цей масив матиме пусті слоти, а не слоти зі значеннями undefined. Якщо аргументом буде будь-яке інше число, виникне виняток RangeError.
+
+ +

Опис

+ +

Масиви - це спископодібні об'єкти, чий прототип має методи для операцій обходу та зміни масиву. Ані довжина масиву, ані типи його елементів не є незмінними. Довжина масиву може змінитись будь-коли, як і позиція даних в масиві; тому їх використання залежить від рішення програміста. Взагалі, це зручні характеристики; але якщо ці особливості не є бажаними для ваших конкретних цілей, ви можете розглянути можливість використання типізованих масивів.

+ +

Масиви не можуть використовувати рядки у якості індексів елементів (як асоціативні масиви), а тільки цілі числа(індекси). Присвоєння або звернення через не цілочисельні значення, з використанням квадратних дужок (або через крапку), не присвоїть або не отримає елемент з самого списку масиву, але присвоїть чи отримає доступ до змінної, пов'язаної з колекцією властивостей об'єкта(властивості) цього масиву. Об'єктні властивості масиву та список елементів масиву є відокремленими, і операції обходу та зміни цього масиву не застосовуються до цих іменованих властивостей.

+ +

Доступ до елементів масиву

+ +

Масиви в JavaScript індексуються з нуля: перший елемент масиву має індекс, який дорівнює 0, а індекс останнього елемента відповідає значенню властивості масиву {{jsxref("Array.length", "length")}} мінус 1. Використання неправильного індексу повертає undefined.

+ +
var arr = ['це перший елемент', 'це другий елемент'];
+console.log(arr[0]);              // виводить 'це перший елемент'
+console.log(arr[1]);              // виводить 'це другий елемент'
+console.log(arr[arr.length - 1]); // виводить 'це другий елемент'
+
+ +

Елементи масиву є властивостями об'єкта, так само, як toString є властивістю, але спроби звернутися до елемента масиву наступним чином згенерує синтаксичну помилку через неправильне ім'я властивості:

+ +
console.log(arr.0); // є синтаксична помилка
+
+ +

В масивах JavaScript немає нічого особливого, що призводить до цього. До властивостей JavaScript, які починаються з цифри, не можна звертатися через крапку; необхідно звертатися через квадратні дужки. Наприклад, якщо ви маєте об'єкт з властивістю під назвою '3d', до неї можна звертатися тільки через квадратні дужки. Приклад:

+ +
var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // є синтаксична помилка
+console.log(years[0]);  // працює вірно
+
+ +
renderer.3d.setTexture(model, 'character.png');     // є синтаксична помилка
+renderer['3d'].setTexture(model, 'character.png');  // працює вірно
+
+ +

Зверніть увагу, що '3d' має писатися в лапках. Індекси масивів JavaScript також можна писати в лапках (напр., years['2'] замість years[2]), хоча це не обов'язково. Індекс 2 у years[2] примусово перетворюється на рядок рушієм JavaScript через неявне перетворення toString. Саме через це '2' та '02' займали б два різні слоти в об'єкті years і наступний приклад дорівнював би true:

+ +
console.log(years['2'] != years['02']);
+
+ +

Схожим чином до властивостей об'єкта, які є зарезервованими словами (!) можна звертатися тільки через рядкові значення у квадратних дужках (але до них можна звертатися через крапку у firefox 40.0a2 наприклад):

+ +
var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['array']);
+
+ +

Зв'язок між length та числовими властивостями

+ +

У масивах JavaScript властивість {{jsxref("Array.length", "length")}} та числові властивості взаємопов'язані. Декілька з вбудованих методів масивів (напр., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, і т.д.) враховують значення властивості {{jsxref("Array.length", "length")}} під час виконання. Інші методи (напр., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, і т.д.) призводять до зміни властивості масиву {{jsxref("Array.length", "length")}}.

+ +
var fruits = [];
+fruits.push('банан', 'яблуко', 'персик');
+
+console.log(fruits.length); // 3
+
+ +

Присвоєння властивості до масиву JavaScript змінить властивість масиву {{jsxref("Array.length", "length")}} відповідним чином, якщо властивість є коректним індексом масиву, і цей індекс знаходиться поза поточними межами масиву:

+ +
fruits[5] = 'манго';
+console.log(fruits[5]); // 'манго'
+console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+
+ +

Збільшення значення {{jsxref("Array.length", "length")}}.

+ +
fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+
+ +

Однак, зменшення значення властивості {{jsxref("Array.length", "length")}} видаляє елементи.

+ +
fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+
+ +

Це пояснюється далі на сторінці {{jsxref("Array.length")}}.

+ +

Створення масиву з використанням результату пошуку збігів

+ +

Пошук збігів між регулярним виразом та рядком може створити масив JavaScript. Цей масив має властивості та елементи, які надають інформацію про збіг. Такий масив повертається методами {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}} та {{jsxref("String.replace")}}. Щоб краще пояснити ці властивості та елементи, подивіться на наступний приклад, а тоді зверніться до таблиці нижче:

+ +
// Пошук послідовності з однієї d, далі одна або більше b, далі одна d
+// Запам'ятати всі b і d, яка йде за ними
+// Ігнорувати регістр
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+
+ +

Властивості та елементи, які повертаються в результаті даного пошуку збігів:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Властивість/ЕлементОписПриклад
inputВластивість тільки для читання, відображає початковий рядок, в якому виконується пошук збігів з регулярним виразом.cdbBdbsbz
indexВластивість тільки для читання, індекс збігу у рядку, нумерується з нуля.1
[0]Елемент тільки для читання, який містить символи останнього збігу.dbBd
[1], ...[n]Елементи тільки для читання, які містять підрядки збігу, що заключені у дужки, якщо такі є у регулярному виразі. Кількість можливих підрядків у дужках є необмеженою.[1]: bB
+ [2]: d
+ +

Властивості

+ +
+
Array.length
+
Властивість length конструктора Array, дорівнює 1.
+
{{jsxref("Array.prototype")}}
+
Дозволяє додавати властивості до усіх масивів.
+
+ +

Методи

+ +
+
{{jsxref("Array.from()")}}
+
Створює новий екземпляр Array з подібного до масиву або ітерабельного об'єкта.
+
{{jsxref("Array.isArray()")}}
+
Повертає true, якщо змінна є масивом, якщо ні, то повертає false.
+
{{jsxref("Array.of()")}}
+
Створює новий екземпляр Array з кількістю аргументів, заданих через змінну, незважаючи на кількість або тип аргументів.
+
+ +

Екземпляри Array

+ +

Всі екземпляри Array наслідуються від {{jsxref("Array.prototype")}}. Прототип конструктора Array може бути змінений, що вплине на всі екземпляри Array.

+ +

Властивості

+ +
{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Властивості')}}
+ +

Методи

+ +

Методи модифікації

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_модифікації')}}
+ +

Методи доступу

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_доступу')}}
+ +

Методи перебору

+ +
{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_перебору')}}
+ +

Загальні методи масивів

+ +
+

Загальні методи масивів є нестандартними, застарілими і будуть прибрані найближчим часом.

+
+ +

Іноді ви б хотіли застосувати методи масивів на рядках або інших подібних до масиву об'єктах (таких як {{jsxref("Functions/arguments", "arguments", "", 1)}} у функції). В такому випадку, ви розглядаєте рядок як масив символів (чи не об'єкт масиву як масив). Наприклад, для того, щоб перевірити, що кожний символ у змінній str є літерою, ви б написали:

+ +
function isLetter(character) {
+  return character >= 'a' && character <= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("Рядок '" + str + "' містить тільки літери!");
+}
+
+ +

Такий запис є доволі марнотратним, і у JavaScript 1.6 було запроваджено загальне скорочення:

+ +
if (Array.every(str, isLetter)) {
+  console.log("Рядок '" + str + "' містить тільки літери!");
+}
+ +

{{jsxref("Global_Objects/String", "Загальні методи", "#String_generic_methods", 1)}} також доступні у {{jsxref("String", "рядках")}}.

+ +

Вони не є частиною стандартів ECMAScript і не підтримуються не Gecko оглядачами. У якості стандартної альтернативи, ви можете перетворити ваш об'єкт на справжній масив з допомогою методу {{jsxref("Array.from()")}}; хоча цей метод може не підтримуватися у старих оглядачах:

+ +
if (Array.from(str).every(isLetter)) {
+  console.log("Рядок '" + str + "' містить тільки літери!");
+}
+ +

Приклади

+ +

Створення масиву

+ +

Наступний приклад створює масив msgArray довжиною 0, потім додає значення елементам msgArray[0] та msgArray[99], змінюючи довжину масиву на 100.

+ +
var msgArray = [];
+msgArray[0] = 'Привіт';
+msgArray[99] = 'світ';
+
+if (msgArray.length === 100) {
+  console.log('Довжина масиву 100.');
+}
+
+ +

Створення двовимірного масиву

+ +

Наступний код створює шахівницю у вигляді двовимірного масиву рядків. Перший хід робиться копіюванням 'п' з (6,4) до (4,4). Стара позиція (6,4) робиться порожньою.

+ +
var board = [
+  ['Т','Н','С','Ф','К','С','Н','Т'],
+  ['П','П','П','П','П','П','П','П'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['п','п','п','п','п','п','п','П'],
+  ['т','н','с','ф','к','с','н','т'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Перемістити королівського пішака вперед на 2
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+
+ +

Ось результат:

+ +
Т,Н,С,Ф,К,С,Н,Т
+П,П,П,П,П,П,П,П
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+п,п,п,п,п,п,п,п
+т,н,с,ф,к,с,н,т
+
+Т,Н,С,Ф,К,С,Н,Т
+П,П,П,П,П,П,П,П
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,п, , ,
+ , , , , , , ,
+п,п,п,п, ,п,п,п
+т,н,с,ф,к,с,н,т
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}Додано нові методи: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}
{{SpecName('ES6', '#sec-array-objects', 'Array')}}{{Spec2('ES6')}}Додано нові методи: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}{{Spec2('ESDraft')}}Додано новий метод: {{jsxref("Array.prototype.includes()")}}
+ +

Сумісність з веб-оглядачами

+ + + +

{{Compat("javascript.builtins.Array")}}

+ +
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/indexof/index.html b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..049c3ab869 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,260 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +
{{JSRef}}
+ +

Метод indexOf() повертає перший індекс, за яким даний елемент був знайдений в масиві, а якщо він відсутній, то повертає -1.

+ +
+

Примітка: Щодо метода String, дивіться {{jsxref("String.prototype.indexOf()")}}.

+
+ +
var a = [2, 9, 9];
+a.indexOf(2); // 0
+a.indexOf(7); // -1
+
+if (a.indexOf(7) === -1) {
+  // елемент не існує у масиві
+}
+
+ +

Синтаксис

+ +
arr.indexOf(searchElement[, fromIndex])
+ +

Параметри

+ +
+
searchElement
+
Елемент, який потрібно знайти.
+
fromIndex {{optional_inline}}
+
Індекс, з якого починається пошук. Якщо індекс більше або дорівнює довжині масиву, повертається  -1, що означає, що масив не буде шукатися. Якщо значення показника є від'ємним числом, то воно трактується як зміщення від кінця масиву.
+
Примітка: якщо наданий індекс від'ємний, масив все ще ітерується спереду назад. Якщо індекс  рівний 0, то буде проведений пошук по всьому масиву. За замовчуванням: 0 (виконується пошук по всьому масиву).
+
+ +

Значення, яке повертається

+ +

Перший індекс елемента в масиві; якщо не знайдено, то -1.

+ +

Опис

+ +

indexOf() порівнює searchElement з елементами Масиву, використовуючи строгу рівність (той самий метод, що використовується з допомогою === або потрійним дорівнює).

+ +

Приклад

+ +

Використання indexOf()

+ +

У наступному прикладі indexOf() використовується для пошуку значень в масиві.

+ +
var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+
+ +

Пошук всіх відопвідностей на елементі

+ +
var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+
+ +

Пошук, чи існує елемент в масиві, і його оновлення 

+ +
function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('Оновлений набір овочів : ' + veggies);
+    } else if (veggies.indexOf(veggie) > -1) {
+        console.log(veggie + ' вже існує у наборі овочів.');
+    }
+}
+
+var veggies = ['картопля', 'помідор', 'чилі', 'зелений перець'];
+
+updateVegetablesCollection(veggies, 'шпинат');
+// Оновлений набір овочів: картопля,помідор,чилі,зелений перець,шпинат
+updateVegetablesCollection(veggies, 'шпинат');
+// шпинат вже існує у наборі овочів.
+
+ +

Поліфіл

+ +

indexOf() був доданий в стандарт ECMA-262 в 5-му виданні; як такий він може бути присутнім не у всіх браузерах. Це можна обійти, використовуючи наступний код на початку скриптів. Це дозволить вам використовувати метод indexOf(), коли ще немає вбудованої підтримки в браузері. Цей алгоритм збігається із зазначеною в ECMA-262, 5-е видання, припускаючи, що{{jsxref("Global_Objects/TypeError", "TypeError")}} і {{jsxref("Math.abs()")}} має свої оригінальні значення.

+ +
if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function indexOf(member, startFrom) {
+    /*
+   У спрощеному режимі, якщо змінна `this` має значення null або
+ undefined, то вона встановлюється в об'єкт window. В іншому випадку
+ `this` автоматично перетворюється в об'єкт. У строгому режимі, якщо
+ змінна 'this' має значення null або undefined, генерується 'TypeError'.
+    */
+    if (this == null) {
+      throw new TypeError("Array.prototype.indexOf() - can't convert `" + this + "` to object");
+    }
+
+    var
+      index = isFinite(startFrom) ? Math.floor(startFrom) : 0,
+      that = this instanceof Object ? this : new Object(this),
+      length = isFinite(that.length) ? Math.floor(that.length) : 0;
+
+    if (index >= length) {
+      return -1;
+    }
+
+    if (index < 0) {
+      index = Math.max(length + index, 0);
+    }
+
+    if (member === undefined) {
+      /*
+        Оскільки `member` не визначено, ключі, які не існують,
+        будуть мати те ж значення, що і `member`, і, отже, повинні
+        бути перевірені.
+      */
+      do {
+        if (index in that && that[index] === undefined) {
+          return index;
+        }
+      } while (++index < length);
+    } else {
+      do {
+        if (that[index] === member) {
+          return index;
+        }
+      } while (++index < length);
+    }
+
+    return -1;
+  };
+}
+ +

Однак, якщо ви більше зацікавлені у всіх маленьких технічних бітах, визначених стандартом ECMA, і менше стурбовані продуктивністю або лаконічністю, то ви можете знайти це більш описове заповнення більш корисним.

+ +
// Кроки продукції ECMA-262, Edition 5, 15.4.4.14
+// Посилання: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Нехай o є результатом виклику ToObject, що передає це
+    //    значення в якості аргументу.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. Нехай lenValue є результатом виклику Get,
+    //    внутрішнього методу o з аргументом "length".
+    // 3. Нехай len буде ToUint32(lenValue).
+    var len = o.length >>> 0;
+
+    // 4. Якщо len рівне 0, return -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // Якщо аргумент fromIndex був переданий, let n =
+    // ToInteger(fromIndex); інакше let n = 0.
+    var n = fromIndex | 0;
+
+    // 6. Якщо n >= len, return -1.
+    if (n >= len) {
+      return -1;
+    }
+
+    // 7. Якщо n >= 0, то нехай k дорівнює n.
+    // 8. Інакше, n<0, нехай k дорівнює len - abs(n).
+    //    Якщо k менше, ніж 0, тоді нехай k дорівнює 0.
+    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Повторювати, доки k < len
+    while (k < len) {
+      // а. Нехай Pk дорівнює ToString(k). Це неочевидно для лівосторонніх операндів оператора in
+      // б. Нехай kPresent буде результатом виклику
+      //    внутрішнього метода o HasProperty з аргументом Pk.
+      //    Цей крок можна поєднати з в
+      // в. Якщо kPresent дорівнює true, тоді
+      //    i.  Нехай elementK буде результатом виклику
+      //        внутрішнього метода o Getwith з аргументом ToString(k).
+      //   ii.  Нехай те саме буде результатом застосування
+      //        Алгоритму Строгого Порівняння (Strict Equality Comparison Algorithm)
+      //        до searchElement та elementK.
+      //  iii.  Якщо те саме дорівнює true, повернути k.
+      if (k in o && o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізовано у JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.indexOf")}}

+
+ +

Примітки щодо сумісності

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/isarray/index.html b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..8f7b888535 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,131 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - JavaScript + - Method + - polyfill + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +
{{JSRef}}
+ +
Метод Array.isArray() з'ясовує, чи є передане значення {{jsxref("Array", "масивом")}}.
+ +
+ +
Array.isArray([1, 2, 3]);    // true
+Array.isArray({foo: 123});   // false
+Array.isArray('foobar');     // false
+Array.isArray(undefined);    // false
+
+ +

Синтакс

+ +
Array.isArray(value)
+ +

Параметри

+ +
+
value
+
Значення, яке має бути перевірено.
+
+ +

Вертає

+ +

Значення true, якщо value є {{jsxref("Array", "масивом")}}; false — якщо ні.

+ +

Опис

+ +

Якщо передане значення є {{jsxref("Array", "масивом")}}, повертається true, інакше повертається false.

+ +

Більш докладні відомості дивіться у статті «Як з'ясувати абсолютно точно, чи є об'єкт у JavaScript масивом». При використанні екземпляра {{jsxref("TypedArray")}} завжди повертається false.

+ +

Приклади

+ +
//Всі наведені далі виклики вертають true:
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// Маловідомий факт: Array.prototype сам є масивом:
+Array.isArray(Array.prototype);
+
+//Всі наведені далі виклики вертають false:
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray(new Uint8Array(32));
+Array.isArray({ __proto__: Array.prototype });
+ +

instanceof проти isArray

+ +

Для перевірки, чи є об'єкт екземпляром Array, метод Array.isArray підходить краще, ніж instanceof, тому що він працює між фреймами (iframes).

+ +
var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// Коректна перевірка екземпляра Array
+Array.isArray(arr);  // true
+// Вважається небезпечним, бо не працює між фреймами
+arr instanceof Array; // false
+ +

Запасний варіант (поліфіл)

+ +

Наступний код, запущений перед будь-яким іншим кодом, створить метод Array.isArray(), якщо він недоступний початково.

+ +
if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Початкова виознака. Запроваджено у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.isArray")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/join/index.html b/files/uk/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..116fb03bec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,114 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - JavaScript + - Method + - Prototype + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +
{{JSRef}}
+ +

Метод join() створює та повертає рядок, що об'єднує всі елементи масиву (або подібного до масиву об'єкта), розділені комами або заданим роздільником. Якщо масив містить лише один елемент, то він буде повернений без роздільника.

+ +
{{EmbedInteractiveExample("pages/js/array-join.html")}}
+ + + +

Синтаксис

+ +
arr.join([separator])
+ +

Параметри

+ +
+
separator {{optional_inline}}
+
Визначає рядок, що розділить кожну пару сусідніх елементів масиву. Роздільник перетворюється на рядок, якщо це необхідно. Якщо він пропущений, елементи масиву будуть розділені комою (","). Якщо separator є порожнім рядком, усі елементи будуть обʼєднані без жодних знаків між ними.
+
+ +

Вертає

+ +

Рядок з усіма обʼєднаними елементами масиву. Якщо arr.length дорівнює  0, буде повернений порожній рядок.

+ +

Опис

+ +

Рядкові представлення усіх елементів масиву поєднуються в один рядок.

+ +
+

Якщо елемент дорівнює undefined або null, він перетворюється на порожній рядок.

+
+ +

Приклади

+ +

Обʼєднання масиву різними шляхами

+ +

В наступному прикладі створюється масив a із трьома елементами, після чого поєднується чотири рази: використовуючи роздільник за замовчуванням, кому та пробіл, плюс, порожній рядок.

+ +
var a = ['Вітер', 'Вода', 'Вогонь'];
+a.join();      // 'Вітер,Вода,Вогонь'
+a.join(', ');  // 'Вітер, Вода, Вогонь'
+a.join(' + '); // 'Вітер + Вода + Вогонь'
+a.join('');    // 'ВітерВодаВогонь'
+ +

Обʼєднання подібного до масиву об'єкта

+ +

В наступному прикладі подібний до масиву об'єкт (arguments) об'єднується шляхом виклику {{jsxref("Function.prototype.call")}} для Array.prototype.join.

+ +
function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s); // '1,a,true'
+}
+f(1, 'a', true);
+//очікуваний результат: "1,a,true"
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Запроваджено у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.join")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/keys/index.html b/files/uk/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..d631dea894 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,82 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Довідка + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +
{{JSRef}}
+ +

Метод keys() вертає новий об'єкт перебирача ключів (індексів) масиву.

+ + + +

{{EmbedInteractiveExample("pages/js/array-keys.html")}}

+ + + + + +

Синтаксис

+ +
arr.keys()
+ +

Вертає

+ +

Новий об'єкт перебирача {{jsxref("Array")}}.

+ +

Приклади

+ +

Перебирач ключів розрідженого масиву не оминає прогалин

+ +
var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys);  // виводить ['0', '2']
+console.log(denseKeys);   // виводить [0, 1, 2]
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ES2015')}}Початкова виознака.
{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.keys")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..97ae6e5457 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,166 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +
{{JSRef}}
+ +

Метод lastIndexOf() повертає останній індекс, за яким заданий елемент було знайдено у масиві, або -1, якщо елемент не знайдено. Пошук відбувається в зворотному порядку, починаючи з індексу fromIndex.

+ +
{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}
+ + + +

Синтаксис

+ +
arr.lastIndexOf(searchElement[, fromIndex])
+
+ +

Параметри

+ +
+
searchElement
+
Елемент, який потрібно знайти у масиві.
+
fromIndex {{optional_inline}}
+
Індекс, з якого починається пошук у зворотному порядку. За замовченням дорівнює довжині масиву мінус один (arr.length - 1), тобто пошук відбуватиметься у всьому масиві. Якщо індекс більше або дорівнює довжині масиву, пошук відбуватиметься у всьому масиві. Якщо індекс є від'ємним, він вважається відступом від кінця масиву. Зверніть увагу, що навіть якщо індекс є від'ємним, пошук все одно відбувається з кінця масиву. Якщо обчислений індекс є від'ємним, повертається -1, тобто пошук не відбувається.
+
+ +

Значення, яке повертається

+ +

Останній індекс елемента у масиві; -1, якщо елемент не знайдений.

+ +

Опис

+ +

Метод lastIndexOf порівнює searchElement з елементами масиву, використовуючи строгу рівність (метод, що використовує оператор === або потрійне дорівнює).

+ +

Приклади

+ +

Використання lastIndexOf

+ +

Наступний приклад використовує lastIndexOf, щоб знайти значення у масиві.

+ +
var numbers = [2, 5, 9, 2];
+numbers.lastIndexOf(2);     // 3
+numbers.lastIndexOf(7);     // -1
+numbers.lastIndexOf(2, 3);  // 3
+numbers.lastIndexOf(2, 2);  // 0
+numbers.lastIndexOf(2, -2); // 0
+numbers.lastIndexOf(2, -1); // 3
+
+ +

Знаходження всіх позицій входжень елемента

+ +

Наступний приклад використовує lastIndexOf, щоб знайти всі індекси елемента у заданому масиві, використовуючи {{jsxref("Array.prototype.push", "push")}}, щоб додати їх до іншого масиву по мірі знаходження.

+ +
var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+
+ +

Зверніть увагу, що ми маємо окремо обробити випадок idx == 0, тому що елемент завжди буде знайдений, незважаючи на параметр  fromIndex, якщо це перший елемент масиву. В цьому відмінність від методу {{jsxref("Array.prototype.indexOf", "indexOf")}}.

+ +

Поліфіл

+ +

Метод lastIndexOf був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній в інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати lastIndexOf у реалізаціях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у 5-й версії ECMA-262, за умови, що {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}} та {{jsxref("Math.min")}} мають свої початкові значення.

+ +
// Функціональні кроки ECMA-262, версії 5, 15.4.4.15
+// Довідка: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length >>> 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length > 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
+        n = (n > 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
+      if (k in t && t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+
+ +

Знову ж таки, зауважте, що ця реалізація прагне повної сумісності з lastIndexOf у Firefox на рушії JavaScript SpiderMonkey, в тому числі у декількох можливих граничних ситуаціях. Якщо ви плануєте використовувати її у застосунках з реального життя, то можете обраховувати from менш складним кодом, якщо знехтуєте цими ситуаціями.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.lastIndexOf")}}

+
+ +

Примітки щодо сумісності

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/length/index.html b/files/uk/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..c407dc290b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,139 @@ +--- +title: array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Властивість + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +
{{JSRef}}
+ +

Властивість length об'єкта, який є екземпляром типу Array, встановлює або повертає кількість елементів у цьому масиві. Значення є цілим беззнаковим 32-бітним числом, що завжди є більшим за найбільший індекс у масиві.

+ +

{{EmbedInteractiveExample("pages/js/array-length.html")}}

+ + + +

Опис

+ +

Значенням властивості length є ціле додатне число, менше за 2 в степені 32 (232).

+ +
var namelistA = new Array(4294967296); //2 в степені 32 = 4294967296
+var namelistC = new Array(-100) //від'ємне число
+
+console.log(namelistA.length); //RangeError: Invalid array length
+console.log(namelistC.length); //RangeError: Invalid array length
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; //встановити довжину масиву меншу, ніж 2 в степені 32
+console.log(namelistB.length);
+
+//4294967295
+ +

Ви можете присвоїти значення властивості length, щоб скоротити масив. Коли ви розширюєте масив, змінюючи його довжину (властивість length), збільшується кількість фактичних елементів; наприклад, якщо ви присвоїли length 3, коли елементів насправді 2, масив тепер містить 3 елементи, в результаті третій є неітерабельним порожнім елементом.

+ +
var arr = [1, 2];
+console.log(arr);
+// [ 1, 2 ]
+
+arr.length = 5; // встановити довжину 5, маючи 2 елементи.
+console.log(arr);
+// [ 1, 2, <3 порожні елементи> ]
+
+arr.forEach(element => console.log(element));
+// 1
+// 2
+ +

Таким чином, поле length не обов'язково вказує на кількість визначених значень у масиві. Дивіться також Зв'язок між length та числовими властивостями.

+ +

{{js_property_attributes(1, 0, 0)}}

+ + + +

Приклади

+ +

Циклічне проходження по масиву

+ +

В наступному прикладі, проходження по масиву numbers відбувається зважаючи на властивість length. Значення кожного елементу подвоюється.

+ +
var numbers = [1, 2, 3, 4, 5];
+
+for (var i = 0; i < numbers.length; i++) {
+  numbers[i] *= 2;
+}
+// numbers тепер [2, 4, 6, 8, 10]
+
+ +

Скорочення масиву

+ +

Наступний приклад скорочує масив statesUS до довжини 3, якщо його поточна довжина більша, ніж 3.

+ +
var numbers = [1, 2, 3, 4, 5];
+
+if (numbers.length > 3) {
+  numbers.length = 3;
+}
+
+console.log(numbers); // [1, 2, 3]
+console.log(numbers.length); // 3
+ +

Створення порожнього масиву фіксованої довжини

+ +
var numbers = [];
+numbers.length = 10;
+console.log(numbers); // [empty × 10]
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ESDraft')}}
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript.builtins.Array.length")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/map/index.html b/files/uk/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..2c71a1fe6f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,349 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод + - поліфіл + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +
{{JSRef}}
+ +

Метод map() створює новий масив з результатами виклику наданої функції на кожному елементі масиву, який викликав метод.

+ +

{{EmbedInteractiveExample("pages/js/array-map.html")}}

+ + + +

Синтаксис

+ +
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
+    // Повернути елемент нового масиву new_array
+}[, thisArg])
+ +

Параметри

+ +
+
callback
+
Функція, яка повертає елемент нового масиву. Приймає три аргументи:
+
+
+
currentValue
+
Поточний елемент масиву.
+
index{{optional_inline}}
+
Індекс поточного елементу масиву
+
array{{optional_inline}}
+
Сам масив, на якому був викликаний map.
+
+
+
thisArg{{optional_inline}}
+
Значення, що буде використане як this при виконанні callback.
+
+ +

Значення, що повертається (return value)

+ +

Новий масив, кожен елемент якого є результатом функції callback.

+ +

Опис

+ +

Метод map викликає передану callback-функцію один раз для кожного елементу масиву, в заданому порядку, та створює новий масив з результатів. callback викликаться тільки для індексів яким відповідають значення, включно з undefined. Функція не викликається для елеметів значення яких відсутні (мається на увазі, індекси які не були явно задані, які були видалені або яким не було присвоєне значення).

+ +

Остільки map створює новий масив, викликати його, якщо ви не збираєтесь використовувати повернений масив, є антишаблоном; скористайтесь натомість forEach або for-of. Ознаки того, що вам не підходить метод map: А) Ви не використовуєте масив, який він повертає, і/або Б) Ви не повертаєте значення у функції callback.

+ +

callback викликається з трьома аргументами: значення елемента, індекс елемента, та масив на якому операцію було викликано.

+ +

Якщо thisArg параметр переданий в map, він буде використовуватись як ключове слово this  для callback-функції. В іншому випадку, значення {{jsxref("undefined")}} буде використане як this. Значення this, яке спостерігається в callback-функції, в кінцевому рахунку визначається згідно звичайних правил для визначення this, видимого з функції.

+ +

map не змінює масив, на якому був викликаний (хоча callback, якщо був викликаний, може змінити).

+ +

Діапазон елементів, які обробляє метод map, визначений до того як callback-функція буде визвана вперше. Елементи які будуть додані до масиву після виклику map, не будуть оброблені callback-функцією. Якщо існуючі в масиві елементи змінені або видалені, їхні значення при потраплянні в callback-функцію, будуть такими якими вони є на той час коли map обробляє їх. Елементи які були видалені до і після того як map був визваний, ігноруються. 

+ +

Згідно з алгоритмом, визначеним у специфікації, якщо масив на якому було викликано map, розріджений, то масив на виході теж буде розрідженим, залишаючи ті ж самі індекси пустими.

+ +

Приклади

+ +

Перетворення масиву з числами в масив квадратних коренів

+ +

Наступний код бере масив з числами і створює новий масив, який складається з квадратних коренів чисел з першого масиву.

+ +
var numbers = [1, 4, 9];
+var roots = numbers.map(function(num) {
+return Math.sqrt(num)
+});
+// roots тепер [1, 2, 3]
+// numbers залишається [1, 4, 9]
+
+ +

Використання map для переформатування об'єктів в масиві

+ +

Наступний код використовує масив з об'єктами щоб створити новий масив з переформатованими об'єктами.

+ +
var kvArray = [{key:1, value:10},
+               {key:2, value:20},
+               {key:3, value: 30}];
+
+var reformattedArray = kvArray.map(obj =>{
+   var rObj = {};
+   rObj[obj.key] = obj.value;
+   return rObj;
+});
+// reformattedArray тепер [{1:10}, {2:20}, {3:30}],
+
+// kvArray залишається:
+// [{key:1, value:10},
+//  {key:2, value:20},
+//  {key:3, value: 30}]
+
+ +

Перетворення масиву чисел використовуючи функцію з аргументом

+ +

Наступний код показує як map працює коли функція що потребує один аргумент, використовує його.  Аргумент буде автоматично присвоєний з кожного елементу масиву коли map буде проходитись по оригінальному масиву..

+ +
var numbers = [1, 4, 9];
+var doubles = numbers.map(function(num) {
+  return num * 2;
+});
+
+// doubles тепер [2, 8, 18]
+// numbers залишається [1, 4, 9]
+
+ +

Загальне використання map

+ +

Цей приклад показує як використовувати map на рядках ({{jsxref("String")}}) щоб отримати масив байтів в ASCII кодуванні яке відображає значення літер:

+ +
var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) {
+   return x.charCodeAt(0);
+});
+// a тепер дорівнює [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+
+ +

Загальне використання map з querySelectorAll

+ +

Даний приклад показує, як виконати перебір набору об'єктів, отриманих методом querySelectorAll. Тому що метод querySelectorAll повертає NodeList, який є колекцією об'єктів.

+ +

У даному випадку ми повертаємо значення всіх вибраних опцій на екрані:

+ +
var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+
+ +

Це простіше зробити методом {{jsxref("Array.from()")}}.

+ +

Хитрий спосіб використання

+ +

(натхненний цим блог-постом)

+ +

Загальноприйнято використовувати функцію callback з одним аргументом (елемент по якому проходиться функція). Деякі функції також використовуються з одним аргументом, хоча можуть приймати і більше додаткових аргументів, що не є обов'язковими. Це може призводити до неочікуваної поведінки.

+ +

Розглянемо:

+ +
["1", "2", "3"].map(parseInt);
+ +

Хоча можна було б очікувати [1, 2, 3], справжнім результатом буде [1, NaN, NaN].

+ +

Метод parseInt часто використовується з одним аргументом, але приймає два. Перший - це вираз, а другий - основа системи числення для функції зворотного виклику. Array.prototype.map передає 3 аргументи:

+ + + +

Третій аргумент ігнорується методом parseInt, але не другий, звідси й можлива плутанина. Ось стислий огляд кроків перебору:

+ +
// parseInt(string, radix) -> map(parseInt(value, index))
+/*  first iteration (index is 0): */ parseInt("1", 0); // 1
+/* second iteration (index is 1): */ parseInt("2", 1); // NaN
+/*  third iteration (index is 2): */ parseInt("3", 2); // NaN
+ +

Поговоримо про рішення.

+ +
function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Результатом є масив чисел (як і очікувалось)
+
+// Те саме, але з використанням лаконічного стрілкового синтаксису
+['1', '2', '3'].map( str => parseInt(str) );
+
+// Простіший спосіб досягти вищевказаного
+['1', '2', '3'].map(Number); // [1, 2, 3]
+
+// На відміну від parseInt(), Number() також поверне десятковий або експоненціальний запис:
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+// Для порівняння, якщо використати parseInt() для попереднього масиву:
+['1.1', '2.2e2', '3e300'].map( str => parseInt(str) ); // [1, 2, 3]
+ +

Ще один варіант результату метода map, що викликається з parseInt в якості параметра, виглядає наступним чином:

+ +
var xs = ['10', '10', '10'];
+
+xs = xs.map(parseInt);
+
+console.log(xs);
+// Результат 10,NaN,2 може бути неочікуваним, з огляду вищеописане.
+ +

Масив містить значення undefined

+ +

Коли повертається undefined або нічого не повертається:

+ +
var numbers = [1, 2, 3, 4];
+var filteredNumbers = numbers.map(function(num, index) {
+  if(index < 2) {
+     return num;
+  }
+});
+// filteredNumbers дорівнює [1, 2, undefined, undefined]
+// numbers досі дорівнює [1, 2, 3, 4]
+ +

Поліфіл

+ +

Метод map був доданий до ECMA-262 стандарту в 5-тій редакції; тому він може бути присутнім не у всіх реалізаціях стандарту. Ви можете обійти це, вставляючи наступний код на початок вашого скритпу, дозволяючи використовувати map в реалізаціях які ще його не підтримують. Цей алгоритм є точно таким який вказаний в  ECMA-262, 5му виданні, передбачаючи що {{jsxref("Object")}}, {{jsxref("TypeError")}}, і {{jsxref("Array")}} мають свої власні значення  і що callback.call обчислює початкове значення {{jsxref("Function.prototype.call")}}.

+ +
// Функціональні кроки ECMA-262, версія 5, 15.4.4.19
+// Довідка: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback, thisArg) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Нехай O дорівнює результату виклику ToObject з |this|
+    //    в якості аргументу.
+    var O = Object(this);
+
+    // 2. Нехай lenValue дорівнює результату виклику внутрішнього методу O
+    //    Get з аргументом "length".
+    // 3. Нехай len дорівнює ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Якщо IsCallable(callback) дорівнює false, викинути виняток TypeError.
+    // Див.: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Нехай A дорівнює новому масиву, створеному виразом new Array(len),
+    //    де Array - це стандартний вбудований конструктор з таким ім'ям,
+    //    а len дорівнює значенню len.
+    A = new Array(len);
+
+    // 7. Нехай k дорівнює 0
+    k = 0;
+
+    // 8. Повторювати, доки k < len
+    while (k < len) {
+
+      var kValue, mappedValue;
+
+      // а. Нехай Pk дорівнює ToString(k).
+      //   Цей метод неявно застосовується до лівого операнда оператора in
+      // б. Нехай kPresent дорівнює результату виклику внутрішнього методу O
+      //    HasProperty з аргументом Pk.
+      //   Цей крок можна об'єднати з в
+      // в. Якщо kPresent дорівнює true, тоді
+      if (k in O) {
+
+        // і. Нехай kValue дорівнює результату виклику внутрішнього методу O
+        //    Get з аргументом Pk.
+        kValue = O[k];
+
+        // ii. Нехай mappedValue дорівнює результату виклику внутрішнього
+        //     методу callback Call з T у якості значення this та списком
+        //     аргументів, що містить kValue, k та O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Викликати внутрішній метод A DefineOwnProperty з аргументами
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // та false.
+
+        // У переглядачах, що підтримують Object.defineProperty, використовуйте:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // Для найкращої підтримки переглядачів, використовуйте:
+        A[k] = mappedValue;
+      }
+      // г. Збільшити k на 1.
+      k++;
+    }
+
+    // 9. повернути A
+    return A;
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}{{Spec2('ES5.1')}} +

Початкове визначення. Реалізоване в JavaScript 1.6.

+
{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.map")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/observe/index.html b/files/uk/web/javascript/reference/global_objects/array/observe/index.html new file mode 100644 index 0000000000..3e3a386c83 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/observe/index.html @@ -0,0 +1,89 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Reference/Global_Objects/Array/observe +tags: + - JavaScript + - Масив + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Array.observe +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод Array.observe() використовувався для асинхронного спостереження за змінами у масивах, схоже на  {{jsxref("Object.observe()")}} у об'єктах. Він надавав послідовність змін в порядку виникнення. Як і Object.observe(), він викликається з допустимим списком типів ["add", "update", "delete", "splice"]. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете натомість використати більш загальний об'єкт {{jsxref("Proxy")}}.

+ +

Синтаксис

+ +
Array.observe(arr, callback)
+ +

Параметри

+ +
+
arr
+
Масив для спостереження.
+
callback
+
Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом: +
+
changes
+
Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін: +
    +
  • name: Ім'я властивості, яка була змінена.
  • +
  • object: Змінений масив після того, як відбулась зміна.
  • +
  • type: Строка, що вказує тип зміни. Один з "add", "update", "delete", або "splice".
  • +
  • oldValue: Тільки для типів "update" та "delete". Значення перед зміною.
  • +
  • index: Тільки для типу "splice". Індекс, за яким відбулася зміна.
  • +
  • removed: Тільки для типу "splice". Масив видалених елементів.
  • +
  • addedCount: Тільки для типу "splice". Кількість доданих елементів.
  • +
+
+
+
+
+ +

Опис

+ +

Функція callback викликається кожен раз, коли у arr відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.

+ +
+

Зміни, зроблені методами масивів, такими як Array.prototype.pop(), будуть записані як "splice". Зміни, пов'язані з призначенням величин за індексом, які не змінюють довжину масиву, можуть бути записані як "update".

+
+ +

Приклади

+ +

Логування різних типів змін

+ +
var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c'], addedCount: 3}]
+
+ +

Специфікації

+ +

Strawman proposal specification.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.observe")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/of/index.html b/files/uk/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..457b8696bf --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,100 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - ECMAScript6 + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +
{{JSRef}}
+ +

Метод Array.of() створює новий екземпляр Array з заданої кількості аргументів, незважаючи на кількість або тип аргументів.

+ +

Різниця між Array.of() та конструктором Array полягає у поводженні з цілочисельними аргументами: Array.of(7) створює масив з єдиним елементом 7, в той час як Array(7) створює порожній масив з величиною властивості length, що дорівнює 7 (Зауважте: мається на увазі масив з 7 порожніми елементами, а не елементами, що дорівнюють undefined).

+ +
Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // масив з 7-ми порожніх елементів
+Array(1, 2, 3);    // [1, 2, 3]
+
+ +

Синтаксис

+ +
Array.of(element0[, element1[, ...[, elementN]]])
+ +

Параметри

+ +
+
elementN
+
Елементи, з яких треба створити масив.
+
+ +

Значення, яке повертається

+ +

Новий екземпляр {{jsxref("Array")}}.

+ +

Опис

+ +

Ця функція є частиною стандарту ECMAScript 2015. Щоб дізнатися більше, дивіться проект Array.of та Array.from та поліфіл Array.of.

+ +

Приклади

+ +
Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+
+ +

Поліфіл

+ +

Виконання цього коду перед будь-яким іншим кодом створить метод Array.of(), якщо він не підтримується початково.

+ +
if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+    // Або
+    let vals = []
+    for(let prop in arguments){
+        vals.push(arguments[prop])
+    }
+    return vals.slice()
+}
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.of")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/pop/index.html b/files/uk/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..7be2a9f433 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,118 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +
{{JSRef}}
+ +

Метод pop() видаляє останній елемент масиву та повертає цей елемент.

+ +

{{EmbedInteractiveExample("pages/js/array-pop.html")}}

+ + + +

Синтаксис

+ +
arr.pop()
+
+ +

Значення, що повертається

+ +

Видалений елемент масиву; {{jsxref("undefined")}}, якщо масив був порожній.

+ +

Опис

+ +

Метод pop видаляє останній елемент масиву та повертає його.

+ +

Метод pop є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} до об'єктів, схожих на масиви. Об'єкти, які не мають властивості length, що відображає останній елемент в серії послідовних числових властивостей, які починаються з нуля, можуть поводити себе неправильно.

+ +

Якщо ви викличите pop() на порожньому масиві, він поверне {{jsxref("undefined")}}.

+ +

Метод {{jsxref("Array.prototype.shift()")}} має схожу з pop поведінку, але застосовується до першого елемента масиву.

+ +

Приклади

+ +

Видалення останнього елемента масиву

+ +

Наступний код створює масив myFish , який містить чотири елементи, а потім видаляє останній елемент.

+ +
var myFish = ['янгол', 'клоун', 'мандарин', 'осетер'];
+
+console.log(myFish); // ['янгол', 'клоун', 'мандарин', 'осетер']
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['янгол', 'клоун', 'мандарин' ]
+
+console.log(popped); // 'осетер'
+
+ +

Використання apply( ) або call ( ) на подібних до масиву об'єктах

+ +

Наступний код створює подібний до масиву об'єкт myFish, який має чотири елементи та параметр довжини length, потім видаляє його останній елемент та зменшує параметр length.

+ +
var myFish = {0:'янгол', 1:'клоун', 2:'мандарин', 3:'осетер', length: 4};
+
+var popped = Array.prototype.pop.call(myFish); //такий самий синтаксис для apply( )
+
+console.log(myFish); // {0:'янгол', 1:'клоун', 2:'мандарин', length: 3}
+
+console.log(popped); // 'осетер'
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментарі
{{SpecName('ES3')}}{{Spec2('ES3')}}Первинне визначення. Реалізовано у JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.pop")}}

+ +
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/prototype/index.html b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..a4af191650 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,185 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Property + - Джава Скріпт + - Масив + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{JSRef}}
+ +

Поле Array.prototype представляє собою прототип для конструктора {{jsxref("Array")}} і дозволяє вам додавати нові поля і методи до всіх об'єктів-масивів (Array).

+ +
// Якщо JavaScript не реалізовує метод first() початково,
+// додайте новий метод, який буде повертати перший елемент масиву.
+
+if (!Array.prototype.first) {
+  Array.prototype.first = function() {
+    return this[0];
+  }
+}
+
+ +

Опис

+ +

Екземпляри {{jsxref("Array")}} успадковуються від Array.prototype. Як і з всіх конструкторів, ви можете змінити прототип конструктора об'єкта, щоб внести зміни у всі екземпляри {{jsxref("Array")}}. Для прикладу, це використовується для {{Glossary("Polyfill", "polyfilling")}}.

+ +

Маловідомий факт: Array.prototype сам є масивом {{jsxref("Array")}}:

+ +
Array.isArray(Array.prototype); // true
+
+ +

{{js_property_attributes(0, 0, 0)}}

+ +

Властивості

+ +
+
Array.prototype.constructor
+
Визначає функцію, що створює прототип об'єкта.
+
{{jsxref("Array.prototype.length")}}
+
Відображає кількість елементів в масиві.
+
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+
Символ, який містить назви властивостей, які повинні бути виключені з області зв'язування with.
+
+ +

Методи

+ +

Методи модифікації

+ +

Ці методи модифікують масив:

+ +
+
{{jsxref("Array.prototype.copyWithin()")}}
+
Копіює послідовність елементів масиву всередині масиву.
+
{{jsxref("Array.prototype.fill()")}}
+
Заповнює всі елементи масиву від початкового індексу до кінцевого статичними значеннями.
+
{{jsxref("Array.prototype.pop()")}}
+
Видаляє та повертає останній елемент масиву.
+
{{jsxref("Array.prototype.push()")}}
+
Додає один чи більше елементів  в кінець масиву та повертає нову довжину масиву.
+
{{jsxref("Array.prototype.reverse()")}}
+
Змінює порядок елементів масиву на протилежний, викорустовуючи той самий масив — перший стає останнім, а останній - першим.
+
{{jsxref("Array.prototype.shift()")}}
+
Видаляє та повертає перший елемент масиву.
+
{{jsxref("Array.prototype.sort()")}}
+
Сортує елементи всередині масиву, та повертає цей масив.
+
{{jsxref("Array.prototype.splice()")}}
+
Добавляє і/або видаляє елементи з масиву.
+
{{jsxref("Array.prototype.unshift()")}}
+
Добавляє один або більше елементів у початок масиву та повертає нову довжину масиву.
+
+ +

Методи доступу

+ +

Ці методи не модифікують масив та повертають якесь його представлення.

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
Повертає новий масив, який складається з цього масиву, об'єднаного з іншим(и) масив(ом/ами) та/або іншими значеннями.
+
{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}
+
Визначає, чи масив містить певний елемент,  повертаючи, відповідно, true або false.
+
{{jsxref("Array.prototype.indexOf()")}}
+
Повертає перший (останній) індекс елемента всередині даного масиву, який дорівнює вказаному значенню, або -1 якщо нічого не було знайдено.
+
{{jsxref("Array.prototype.join()")}}
+
Об'єднує всі елементи масиву у рядок.
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
Повертає останній (найбільший) індекс елемента всередині даного масиву, який рівний вказаному значенню, або -1 якщо нічого не було знайдено.
+
{{jsxref("Array.prototype.slice()")}}
+
Витягує частину масиву та повертає новий масив.
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає літерал масиву, який відображає вказаний масив; ви можете використовувати це значення для створення нового масиву. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Array.prototype.toString()")}}
+
Повертає рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
Повертає локалізований рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toLocaleString()")}}.
+
+ +

Методи  перебору

+ +

Декілька методів приймають у якості аргументів функції, які будуть викликані у процесі обробки масиву. Коли ці методи викликаються, довжина поля length вибраного масиву запам'ятовується, і будь-які елементи, додані поза цією довжиною зсередини функції зворотнього виклику (callback), не будуть обходитися. Інші зміни до масиву (встановлення значення елементу або його видалення) можуть впливати на результат операції, якщо метод після цього звертається до зміненого елемента. Хоча специфічна поведінка цих методів у даних випадках є добре визначеною, не варто на неї надто покладатися, щоб не заплутати тих, хто може прочитати ваш код. Якщо вам необхідно змінити даний масив, краще скопіюйте його у новий масив.

+ +
+
{{jsxref("Array.prototype.entries()")}}
+
Повертає новий об'єкт Array Iterator, який містить пари ключ/значення для кожного індекса в даному масиві.
+
{{jsxref("Array.prototype.every()")}}
+
Повертає true, якщо кожен елемент у цьому масиві виконує умови переданої тест-функції.
+
{{jsxref("Array.prototype.filter()")}}
+
Створює новий масив зі всіма елементами цього масиву, для яких передана функція фільтрації повертае true.
+
{{jsxref("Array.prototype.find()")}}
+
Повертає знайдене у масиві значення, якщо елемент у цьому масиві виконує умови переданої тест-функції або undefined якщо елемента не знайдено.
+
{{jsxref("Array.prototype.findIndex()")}}
+
Повертає знайдений у масиві індекс, якщо елемент у цьому масиві виконує умови переданої тест-функції або -1 якщо елемента не знайдено.
+
{{jsxref("Array.prototype.forEach()")}}
+
Викликає функцію для кожного елементу масиву.
+
{{jsxref("Array.prototype.keys()")}}
+
Повертає новий об'єкт Array Iterator, який містить ключі для кожного індекса в даному масиві.
+
{{jsxref("Array.prototype.map()")}}
+
Створює новий масив з результатами виклику на кожному елементі масиву переданої функції.
+
{{jsxref("Array.prototype.reduce()")}}
+
Застосовує функцію над акумулятором та кожним значенням даного масиву (зліва направо), щоб скоротити його до єдиного значення.
+
{{jsxref("Array.prototype.reduceRight()")}}
+
Застосовує функцію над акумулятором та кожним значенням даного масиву (справа наліво), щоб скоротити його до єдиного значення.
+
{{jsxref("Array.prototype.some()")}}
+
Повертає true, якщо принаймні один елемент у цьому масиві виконує умови переданої тест-функції.
+
{{jsxref("Array.prototype.values()")}}
+
Повертає новий об'єкт Array Iterator, який містить значення для кожного індекса в масиві.
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+
Повертає новий об'єкт Array Iterator, який містить значення для кожного індекса в масиві.
+
+ +

Загальні методи (нестандартні)

+ +

Багато методів на JavaScript об'єкті Array спроектовані таким чином, щоб їх можна було застосувати на всіх об'ектах, які "виглядають як" масиви. Таким чином, вони можуть бути використані на будь-якому об'єкті, у якого є поле length, а також тих об'єктах, доступ до яких можна отримати завдяки числовим назвам полів (як з індексацією масиву array[5]). Деякі методи, такі як {{jsxref("Array.join", "join")}}, лише зчитують довжину (length) і числові поля об'єктів, на яких вони викликаються. Інші, такі як {{jsxref("Array.reverse", "reverse")}}, вимагають, щоб числові поля об'єкту та поле length були доступні для редагування; тому ці методи можуть не викликатися на об'єктах типу {{jsxref("String")}}, який не дозволяє редагувати його поле length або синтезовані числові поля.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}Додані методи copyWithin(), fill(), entries(), keys(), values(), find(), findIndex().
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}}Доданий метод includes().
+ +

Сумісність із веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.prototype")}}

+ +
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/push/index.html b/files/uk/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..af185f399f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,136 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +
{{JSRef}}
+ +

Метод push() додає один або більше елементів у кінець масиву та повертає нову довжину масиву.

+ +
{{EmbedInteractiveExample("pages/js/array-push.html")}}
+ + + +

Синтаксис

+ +
arr.push(element1[, ...[, elementN]])
+ +

Параметри

+ +
+
elementN
+
Елементи, що додаються у кінець масиву.
+
+ +

Повернене значення

+ +

Нова {{jsxref("Array.length", "length")}} властивість об'єкта, на якому був визваний цей метод.

+ +

Опис

+ +

Метод push додає значення у масив.

+ +

push було навмисно створено загальним методом. Він може використовуватися з {{jsxref("Function.call", "call()")}} або {{jsxref("Function.apply", "apply()")}} на об'єктах, подібних до масивів. Метод push спирається на властивість length, щоб розуміти, з якого місця починати додавання заданих значень. Якщо властивість length неможливо перетворити на число, використовується індекс рівний 0. До цього також належить випадок, коли властивості length взагалі не існує, y цьому разі length також буде створено.

+ +

Хоча {{jsxref("Global_Objects/String", "strings", "", 1)}} - це найближчі, масивоподібні об'єкти, з ними неможливо використовувати цей метод, оскільки рядки є незмінними.  Аналогічно до найближчого, масивоподібного об'єкта {{jsxref("Functions/arguments", "arguments", "", 1)}}.

+ +

Приклади

+ +

Додавання елементів у масив

+ +

Наступний приклад створює sports масив з двома елементами, потім у нього додаються еще два елементи. Змінна total містить нову довжину масиву.

+ +
var sports = ['soccer', 'baseball'];
+var total = sports.push('football', 'swimming');
+
+console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
+console.log(total);  // 4
+
+ +

Поєднання двох масивів

+ +

Цей приклад використовує {{jsxref("Function.apply", "apply()")}} для того, щоб запушити усі елементи з другого масиву.

+ +

Не використовуйте цей метод, якщо другий масив (moreVegs у цьому прикладі) занадто великий, оскільки максимальна кількість параметрів, які може вмістити одна функція обмежена, як доводить це практика. Дивиться {{jsxref("Function.apply", "apply()")}} для отримання більш докладної інформації.

+ +
var vegetables = ['parsnip', 'potato'];
+var moreVegs = ['celery', 'beetroot'];
+
+// Merge the second array into the first one
+// Equivalent to vegetables.push('celery', 'beetroot');
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']
+
+ +

Використання об'єкта у масивоподібний спосіб

+ +

Як зазначено вище, push було навмисно створено загаліним методом, і це може зіграти нам на користь. Array.prototype.push добре працює на об'єктах, як це показує наш приклад. Зауважте, що ми не створюємо масив для зберігання колекції об'єктів. Натомість ми зберігаємо колекцію у самому об'єкті та використовуємо метод call на Array.prototype.push, щоб змусити його думати, начебто ми використовуємо його на масиві, і це працює, завдяки тому, що JavaScript дозволяє нам встановлювати контекст використання, як нам зручно.

+ +
var obj = {
+    length: 0,
+
+    addElem: function addElem(elem) {
+        // obj.length is automatically incremented
+        // every time an element is added.
+        [].push.call(this, elem);
+    }
+};
+
+// Let's add some empty objects just to illustrate.
+obj.addElem({});
+obj.addElem({});
+console.log(obj.length);
+// → 2
+
+ +

Зверніть увагу, що obj хоч і не є масивом, метод push успішно збільшив його властивість length так само, наче б ми мали справу зі справжнім масивом.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціїСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване в JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ESDraft')}}
+ +

Сумісність з браузерами

+ +
+ + +

{{Compat("javascript.builtins.Array.push")}}

+
+ +

Дивиться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/reduce/index.html b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..0f9ce6e0e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,578 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +tags: + - ECMAScript 5 + - JavaScript + - Reduce + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +
{{JSRef}}
+ +

Метод reduce() виконує функцію reducer (функцію вказуєте ви) для кожного елемента масиву та повертає єдине значення.

+ +
{{EmbedInteractiveExample("pages/js/array-reduce.html")}}
+ + + +

Функія reducer отримує чотири параметри:

+ +
    +
  1. Accumulator (acc) - Акумулятор
  2. +
  3. Current Value (cur) - Поточне значення
  4. +
  5. Current Index (idx) - Поточний індекс
  6. +
  7. Source Array (src) - Вхідний масив
  8. +
+ +

Функція reducer повертає значення та присовює його акумулятору. Значення аккумулятора запам'ятовується через усі ітерації і повертається наприкінці як єдиний результат.

+ +

Синтакс

+ +
arr.reduce(callback( accumulator, currentValue[, index[, array]] )[,
+initialValue])
+ +

Параметри

+ +
+
callback
+
Фунція, що виконується з кожним елементом масиву (приймає 4 аргументи): +
+
accumulator
+
Акумулює значення, які повертає callback. В акумуляторі зберігається попереднє значення результату виклику callback функції або initialValue, якщо воно було надано (дивись нижче).
+
currentValue
+
Поточний елемент, над яким виконується дія.
+
currentIndex{{optional_inline}}
+
Індекс поточного елемента, над яким виконується дія. Починається із 0 індексу, якщо, було надано значення initialValue, інакше з 1 .
+
array{{optional_inline}}
+
Масив, для якого було викликано reduce().
+
+
+
initialValue{{optional_inline}}
+
Значення, що буде використане як перший аргумент під час виклику callback функції. Якщо це значення не було задане, буде використано перший елемент масиву. Виклик reduce() на порожньому масиві без вказання initial value призведе до помилки.
+
+ +

Значення, яке буде повернене

+ +

Значення, що зберігається в акумуляторі після останньої ітерації.

+ +

Опис

+ +

reduce() виконує callback функцію один раз для кожного елемента масиву за виключенням дірок (порожніх елементів). Функція отримує чотири аргументи:

+ + + +

При першому виклику callback функції accumulator і currentValue можуть мати одне із двох значень. Якщо значення initialValue задане при виклику reduce(), значення accumulator дорівнюватиме значенню initialValue, а currentValue дорівнюватиме першому елементу масиву. Якщо значення initialValue не задане, accumulator буде рівним першому елементу масиву, а currentValue -- другому.

+ +
+

Примітка: Якщо значення initialValue не задане, reduce() виконуватиме callback функцію починаючи з індексу 1, пропустивши перший індекс. Якщо initialValue задане, виконання почнеться із 0-го індексу.

+
+ +

Якщо масив порожній і значення initialValue не задане, буде створено помилку {{jsxref("TypeError")}}. Якщо масив складається тільки з одного елемента (незалежно від його позиції) і значення initialValue не задане, або якщо значення initialValue задане, але масив порожній, буде повернуто єдине наявне значення, а функція callback не буде викликана.

+ +

Зазвичай безпечніше вказувати початкове значення (initialValue), адже без нього можливі три різні результати (див. приклад).

+ +
var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
+var maxCallback2 = ( max, cur ) => Math.max( max, cur );
+
+// reduce() без initialValue
+[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
+[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
+[                      ].reduce( maxCallback ); // TypeError
+
+// map/reduce; краще рішення, працюватиме також для порожніх чи великих масивів
+[ { x: 22 }, { x: 42 } ].map( el => el.x )
+                        .reduce( maxCallback2, -Infinity );
+
+ +

Як працює reduce()

+ +

Нехай відбувся наступний виклик reduce():

+ +
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
+  return accumulator + currentValue;
+});
+
+ +

callback буде викликано чотири рази із наступними аргументами та значеннями, поверненими при кожному виклику:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorcurrentValuecurrentIndexarrayповернене
+ значення
перший виклик011[0, 1, 2, 3, 4]1
другий виклик122[0, 1, 2, 3, 4]3
третій виклик333[0, 1, 2, 3, 4]6
четвертий виклик644[0, 1, 2, 3, 4]10
+ +

Значення, повернене reduce() буде значенням, отриманим при останньому виклику callback (10).

+ +

The value returned by reduce() would be that of the last callback invocation (10).

+ +

Можна також задати {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} замість повної функції. Наступний код згенерує такий самий результат, як код у попередньому блоці.

+ +
[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue );
+
+ +

Якщо початкове значення (initialValue) задати як другий аргумент функції reduce(), результат буде наступним:

+ +
[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
+    return accumulator + currentValue;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorcurrentValuecurrentIndexarrayповернене значення
перший виклик1000[0, 1, 2, 3, 4]10
другий виклик1011[0, 1, 2, 3, 4]11
третій виклик1122[0, 1, 2, 3, 4]13
четвертий виклик1333[0, 1, 2, 3, 4]16
+

п'ятий виклик

+
1644[0, 1, 2, 3, 4]20
+ +

Значення, повернене функцією reduce() у цьому випадку дорівнюватиме 20.

+ +

Приклади

+ +

Сума усіх елементів масиву

+ +
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
+  return accumulator + currentValue;
+}, 0);
+// sum is 6
+
+
+ +

Приклад вище, реалізований за допомогою arrow function:

+ +
var total = [ 0, 1, 2, 3 ].reduce(
+  ( accumulator, currentValue ) => accumulator + currentValue,
+  0
+);
+ +

Сума значень у масиві об'єктів

+ +

Щоб підсумувати значення, що знаходяться у масиві об'єктів, Ви повинні вказати початкове значення для того, щоб для кожного із елементів була викликана Ваша функція.

+ +
var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue.x;
+},initialValue)
+
+console.log(sum) // logs 6
+
+ +

Також за допомогою arrow function: 

+ +
var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulator, currentValue) => accumulator + currentValue.x
+    ,initialValue
+);
+
+console.log(sum) // logs 6
+ +

Сплюснути (flatten) масив масивів

+ +

Сплющення (flattening) - процес, у результаті якого із масиву масивів отримуємо один масив, що містить елементи усіх вкладених масивів.

+ +
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  function(accumulator, currentValue) {
+    return accumulator.concat(currentValue);
+  },
+  []
+);
+// flattened is [0, 1, 2, 3, 4, 5]
+
+ +

Також за допомогою arrow function:

+ +
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  ( accumulator, currentValue ) => accumulator.concat(currentValue),
+  []
+);
+
+ +

Підрахунок кількості однакових значень у об'єкті

+ +
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
+
+var countedNames = names.reduce(function (allNames, name) {
+  if (name in allNames) {
+    allNames[name]++;
+  }
+  else {
+    allNames[name] = 1;
+  }
+  return allNames;
+}, {});
+// countedNames is:
+// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+
+ +

Групування об'єктів за властивістю (property)

+ +
var people = [
+  { name: 'Alice', age: 21 },
+  { name: 'Max', age: 20 },
+  { name: 'Jane', age: 20 }
+];
+
+function groupBy(objectArray, property) {
+  return objectArray.reduce(function (acc, obj) {
+    var key = obj[property];
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(obj);
+    return acc;
+  }, {});
+}
+
+var groupedPeople = groupBy(people, 'age');
+// groupedPeople is:
+// {
+//   20: [
+//     { name: 'Max', age: 20 },
+//     { name: 'Jane', age: 20 }
+//   ],
+//   21: [{ name: 'Alice', age: 21 }]
+// }
+
+ +

Bonding arrays contained in an array of objects using the spread operator and initialValue

+ +
// friends - an array of objects
+// where object field "books" - list of favorite books
+var friends = [{
+  name: 'Anna',
+  books: ['Bible', 'Harry Potter'],
+  age: 21
+}, {
+  name: 'Bob',
+  books: ['War and peace', 'Romeo and Juliet'],
+  age: 26
+}, {
+  name: 'Alice',
+  books: ['The Lord of the Rings', 'The Shining'],
+  age: 18
+}];
+
+// allbooks - list which will contain all friends' books +
+// additional list contained in initialValue
+var allbooks = friends.reduce(function(accumulator, currentValue) {
+  return [...accumulator, ...currentValue.books];
+}, ['Alphabet']);
+
+// allbooks = [
+//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+//   'Romeo and Juliet', 'The Lord of the Rings',
+//   'The Shining'
+// ]
+ +

Видалення повторюваних значень у масиві

+ +
let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
+let result = arr.sort().reduce((accumulator, current) => {
+    const length = accumulator.length
+    if (length === 0 || accumulator[length - 1] !== current) {
+        accumulator.push(current);
+    }
+    return accumulator;
+}, []);
+console.log(result); //[1,2,3,4,5]
+
+ +

Запуск Promises у послідовності

+ +
/**
+ * Runs promises from array of functions that can return promises
+ * in chained manner
+ *
+ * @param {array} arr - promise arr
+ * @return {Object} promise object
+ */
+function runPromiseInSequence(arr, input) {
+  return arr.reduce(
+    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
+    Promise.resolve(input)
+  );
+}
+
+// promise function 1
+function p1(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 2);
+  });
+}
+
+// function 3  - will be wrapped in a resolved promise by .then()
+function f3(a) {
+ return a * 3;
+}
+
+// promise function 4
+function p4(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 4);
+  });
+}
+
+const promiseArr = [p1, p2, f3, p4];
+runPromiseInSequence(promiseArr, 10)
+  .then(console.log);   // 1200
+
+ +

Function composition enabling piping

+ +
// Building-blocks to use for composition
+const double = x => x + x;
+const triple = x => 3 * x;
+const quadruple = x => 4 * x;
+
+// Function composition enabling pipe functionality
+const pipe = (...functions) => input => functions.reduce(
+    (acc, fn) => fn(acc),
+    input
+);
+
+// Composed functions for multiplication of specific values
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Usage
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+
+
+ +

write map using reduce

+ +
if (!Array.prototype.mapUsingReduce) {
+  Array.prototype.mapUsingReduce = function(callback, thisArg) {
+    return this.reduce(function(mappedArray, currentValue, index, array) {
+      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
+      return mappedArray;
+    }, []);
+  };
+}
+
+[1, 2, , 3].mapUsingReduce(
+  (currentValue, index, array) => currentValue + index + array.length
+); // [5, 7, , 10]
+
+
+ +

Polyfill

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.21
+// Reference: http://es5.github.io/#x15.4.4.21
+// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+if (!Array.prototype.reduce) {
+  Object.defineProperty(Array.prototype, 'reduce', {
+    value: function(callback /*, initialValue*/) {
+      if (this === null) {
+        throw new TypeError( 'Array.prototype.reduce ' +
+          'called on null or undefined' );
+      }
+      if (typeof callback !== 'function') {
+        throw new TypeError( callback +
+          ' is not a function');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // Steps 3, 4, 5, 6, 7
+      var k = 0;
+      var value;
+
+      if (arguments.length >= 2) {
+        value = arguments[1];
+      } else {
+        while (k < len && !(k in o)) {
+          k++;
+        }
+
+        // 3. If len is 0 and initialValue is not present,
+        //    throw a TypeError exception.
+        if (k >= len) {
+          throw new TypeError( 'Reduce of empty array ' +
+            'with no initial value' );
+        }
+        value = o[k++];
+      }
+
+      // 8. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kPresent be ? HasProperty(O, Pk).
+        // c. If kPresent is true, then
+        //    i.  Let kValue be ? Get(O, Pk).
+        //    ii. Let accumulator be ? Call(
+        //          callbackfn, undefined,
+        //          « accumulator, kValue, k, O »).
+        if (k in o) {
+          value = callback(value, o[k], k, o);
+        }
+
+        // d. Increase k by 1.
+        k++;
+      }
+
+      // 9. Return accumulator.
+      return value;
+    }
+  });
+}
+
+ +

If you need to support truly obsolete JavaScript engines that don't support Object.defineProperty(), it's best not to polyfill Array.prototype methods at all, as you can't make them non-enumerable.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.8.
{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.builtins.Array.reduce")}}

+
+ +

See also

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..2471147574 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,364 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +
{{JSRef}}
+ +

Метод reduceRight() застосовує функцію до акумулятора та кожного елемента масиву (справа наліво), зменшуючи його до єдиного значення.

+ +
{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}
+ + + +

Дивіться також {{jsxref("Array.prototype.reduce()")}}, який виконується зліва направо.

+ +

Синтаксис

+ +
arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
+ +

Параметри

+ +
+
callback
+
Функція, яка виконується на кожному елементі масиву. Приймає чотири аргументи: +
+
accumulator
+
Значення, яке було повернене з попереднього виклику функції, або initialValue, якщо є. (Дивіться нижче.)
+
currentValue
+
Поточний елемент масиву, що опрацьовується.
+
index{{optional_inline}}
+
Індекс поточного елемента масиву.
+
array{{optional_inline}}
+
Масив, для якого було викликано reduceRight().
+
+
+
initialValue{{optional_inline}}
+
Значення, що використовується в якості акумулятора для першого виклику callback. Якщо початкового значення нема, то буде використаний та пропущений останній елемент масиву. Виклик reduce або reduceRight на порожньому масиві без початкового значення створить виняток TypeError.
+
+ +

Значення, яке повертається

+ +

Значення, що є результатом зменшення.

+ +

Опис

+ +

Метод reduceRight виконує функцію зворотного виклику один раз для кожного елемента у масиві, крім порожніх елементів, отримуючи чотири аргументи: початкове значення (або значення від попереднього виклику функції), значення поточного елемента, поточний індекс та масив, обхід якого виконується.

+ +

Виклик функції callback у reduceRight виглядатиме десь так:

+ +
array.reduceRight(function(accumulator, currentValue, index, array) {
+  // ...
+});
+
+ +

Коли функція викликається вперше, accumulator та currentValue можуть мати одне з двох значень. Якщо значення initialValue було надане під час виклику reduceRight, тоді accumulator дорівнюватиме initialValue, а currentValue останньому елементу масиву. Якщо значення initialValue не визначено, тоді accumulator дорівнюватиме останньому елементу масиву, а currentValue передостанньому.

+ +

Якщо масив порожній, а initialValue не надано, то буде викинуто виняток {{jsxref("TypeError")}}. Якщо масив має лише один елемент (незалежно від позиції), і немає значення initialValue, або якщо initialValue надано, але масив порожній, це єдине значення повернеться без виклику callback.

+ +

Для прикладу, функція може виглядати так:

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
+  return accumulator + currentValue;
+});
+
+ +

Функція зворотного виклику буде виконана чотири рази, аргументи та значення, які повертаються, наведені нижче:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorcurrentValueindexarrayвертає
перший виклик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 буде тим, яке вертає останній виклик callback (10).

+ +

А якби ви надали значення initialValue, результат виглядав би так:

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
+  return accumulator + currentValue;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorcurrentValueindexarrayвертає
перший виклик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.

+ +

Приклади

+ +

Знайти суму елементів масиву

+ +
var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
+  return a + b;
+});
+// сума дорівнює 6
+
+ +

Вирівняти масив масивів

+ +
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// Результат [4, 5, 2, 3, 0, 1]
+
+
+ +

Виконати послідовно набір асинхронних функцій з функціями зворотного виклику, щоб кожна передавала свій результат у наступну

+ +
const waterfall = (...functions) => (callback, ...args) =>
+  functions.reduceRight(
+    (composition, fn) => (...results) => fn(composition, ...results),
+    callback
+  )(...args);
+
+const randInt = max => Math.floor(Math.random() * max)
+
+const add5 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x + 5);
+};
+const mult3 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x * 3);
+};
+const sub2 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x - 2);
+};
+const split = (callback, x) => {
+  setTimeout(callback, randInt(1000), x, x);
+};
+const add = (callback, x, y) => {
+  setTimeout(callback, randInt(1000), x + y);
+};
+const div4 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x / 4);
+};
+
+const computation = waterfall(add5, mult3, sub2, split, add, div4);
+computation(console.log, 5) // -> 14
+
+// те саме, що й:
+
+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

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

Визначення композиції функцій

+ +

Концепція композиції функцій проста - вона об'єднує функції. Це послідовний, справа наліво, виклик кожної функції з результатом попередньої.

+ +
/**
+ * Композиція функцій - це підхід, в якому результат однієї функції
+ * передається у іншу і т.д.
+ *
+ * h(x) = f(g(x))
+ *
+ * Виконання функцій відбувається справа наліво
+ *
+ * https://uk.wikipedia.org/wiki/Композиція_функцій
+ */
+
+const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
+
+// Збільшує передане число на 1
+const inc = (n) => n + 1
+
+// Подвоює передане значення
+const double = (n) => n * 2
+
+// використання композиції функцій
+console.log(compose(double, inc)(2)); // 6
+
+// використання композиції функцій
+console.log(compose(inc, double)(2)); // 5
+
+ +

Поліфіл

+ +

Метод reduceRight був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати метод reduceRight у версіях, які не підтримують його початково.

+ +
// Функціональні кроки ECMA-262, версія 5, 15.4.4.22
+// Довідка: http://es5.github.io/#x15.4.4.22
+if ('function' !== typeof Array.prototype.reduceRight) {
+  Array.prototype.reduceRight = function(callback /*, initialValue*/) {
+    'use strict';
+    if (null === this || 'undefined' === typeof this) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined');
+    }
+    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) {
+      value = arguments[1];
+    } else {
+      while (k >= 0 && !(k in t)) {
+        k--;
+      }
+      if (k < 0) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k--];
+    }
+    for (; k >= 0; k--) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.
{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.reduceRight")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/reverse/index.html b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..e1d3dade19 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,89 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - JavaScript + - Method + - Prototype + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +
{{JSRef}}
+ +

Метод reverse() перевертає масив на місці, змінюючи послідовність елементів на протилежну. Тобто, перший елемент стає останнім, а останній — першим.

+ +

{{EmbedInteractiveExample("pages/js/array-reverse.html")}}

+ + + +

Синтаксис

+ +
a.reverse()
+ +

Вертає

+ +

Перевернутий масив.

+ +

Опис

+ +

Метод reverse() змінює масив, для якого його викликано, спротилежнюючи послідовність елементів, і вертає посилання на той масив.

+ +

Метод reverse є навмисно загальним; його можна викликати або застосувати до об'єктів, які схожі на масиви. Об'єкти, які не мають властивості length, що відображає останню з серії послідовних, числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.

+ +

Приклади

+ +

Перевертання елементів у масиві

+ +

У наведеному прикладі започатковується масив a з трьома елементами, а тоді їх порядок спротилежнюється. Виклик методу reverse() повертає посилання на перевернутий масив а.

+ +
var a = ['спершу', 'було', 'слово'];
+var reversed = a.reverse();
+
+console.log(reversed === a);  // виводить true
+console.log(a);               // виводить ['слово', 'було', 'спершу']
+console.log(reversed);        // виводить ['слово', 'було', 'спершу']
+
+ +

Перевертання елементів у подібному до масиву об'єкті

+ +

Наступний приклад створює подібний до масиву об'єкт a, що містить три елементи та властивість довжини, а тоді перевертає цей об'єкт. Виклик методу reverse() повертає посилання на перевернутий об'єкт a.

+ +
const a = {0: 1, 1: 2, 2: 3, length: 3};
+
+console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
+
+Array.prototype.reverse.call(a); //такий самий синтаксис для apply()
+
+console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.reverse")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/shift/index.html b/files/uk/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..7c3d20f114 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,141 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +
{{JSRef}}
+ +

Метод shift() видаляє перший елемент з масиву і повертає цей елемент. Цей метод змінює довжину масиву.

+ +
var a = [1, 2, 3];
+a.shift();
+
+console.log(a); // [2, 3]
+ +

Синтаксис

+ +
arr.shift()
+ +

Повернене значення

+ +

Видалений елемент.

+ +

Опис

+ +

Метод shift видаляє елемент із нульовим індексом і  зсуває значення з послідовними індексами назад, потім повертає видалене значення. Якщо {{jsxref("Array.length", "length")}} властивість рівна 0, {{jsxref("undefined")}} повертається.

+ +

shift є загальним навмисно; Цей метод може бути {{jsxref("Function.call", "викликаний", "", 1)}} чи {{jsxref("Function.apply", "застосований", "", 1)}} до схожих із масивами об'єктів. Об'єкти, які не містять length властивості, що відображає кінець послідовного ряду, базовані на нулі числові властивості можуть себе вести беззмістовним чином.

+ +

Приклади

+ +

Видалення елементу з масиву

+ +

Поданий нижче код відображає myFish масив до і після видалення його першого елементу. Також він відображає видалений елемент.

+ +
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish before: ' + myFish);
+// "myFish before: angel,clown,mandarin,surgeon"
+
+var shifted = myFish.shift();
+
+console.log('myFish after: ' + myFish);
+// "myFish after: clown,mandarin,surgeon"
+
+console.log('Removed this element: ' + shifted);
+// "Removed this element: angel"
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяCтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Впроваджено в JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ESDraft')}}
+ +

Браузерна сумісність

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
БраузерChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Базова підтримка{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatVersionUnknown}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
БраузерAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Дивись також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/slice/index.html b/files/uk/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..0e3b098fda --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,242 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +
{{JSRef}}
+ +

Метод slice() повертає дрібну копію частини масиву у новий масив, починаючи з begin і до end (не включаючи end), де begin та end є індексами елементів масиву. Початковий масив не змінюється.

+ +
{{EmbedInteractiveExample("pages/js/array-slice.html")}}
+ + + +

Синтаксис

+ +
arr.slice([begin[, end]])
+
+ +

Параметри

+ +
+
begin {{optional_inline}}
+
Індекс на основі нуля, з якого починається копіювання.
+
Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. slice(-2) копіює останні два елементи послідовності.
+
Якщо begin не надано, slice починається з індексу 0.
+
Якщо begin більший за довжину послідовності, повертається порожній масив.
+
end {{optional_inline}}
+
Індекс на основі нуля до якого вібувається копіювання. slice копіює до, але не включаючи end.
+
Наприклад, slice(1,4) копіює з другого по четвертий елемент (елементи за індексами 1, 2 та 3).
+
Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. slice(2,-1) копіює з третього елемента по другий з кінця.
+
Якщо end пропущений, slice копіює до кінця послідовності (arr.length).
+
Якщо end більший за довжину послідовності, slice копіює до кінця послідовності (arr.length).
+
+ +

Значення, що повертається

+ +

Новий масив, який містить скопійовані елементи.

+ +

Опис

+ +

slice не змінює початковий масив. Він повертає дрібну копію елементів початкового масиву. Елементи початкового масиву копіюються у повернений масив наступним чином:

+ + + +

Якщо новий елемент додано у якийсь з масивів, інший масив не зміниться.

+ +

Приклади

+ +

Повернути частину існуючого масиву

+ +
var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго'];
+var citrus = fruits.slice(1, 3);
+
+// fruits містить ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго']
+// citrus містить ['Апельсин','Лимон']
+
+ +

Використання slice

+ +

У наступному прикладі slice створює новий масив newCar з myCar. Обидва містять посилання на об'єкт myHonda. Коли колір myHonda змінюється на фіолетовий, обидва масиви відображають зміну.

+ +
// Використання slice, створення newCar з myCar.
+var myHonda = { color: 'червоний', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
+var myCar = [myHonda, 2, 'чудовий стан', 'придбана 1997'];
+var newCar = myCar.slice(0, 2);
+
+// Вивести значення myCar, newCar та колір myHonda
+// з обох масивів.
+console.log('myCar = ' + JSON.stringify(myCar));
+console.log('newCar = ' + JSON.stringify(newCar));
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+// Змінити колір myHonda.
+myHonda.color = 'фіолетовий';
+console.log('Новий колір Honda ' + myHonda.color);
+
+// Вивести колір myHonda з обох масивів.
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+ +

Скрипт запише:

+ +
myCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'чудовий стан', 'придбана 1997']
+newCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = червоний
+newCar[0].color = червоний
+Новий колір Honda фіолетовий
+myCar[0].color = фіолетовий
+newCar[0].color = фіолетовий
+
+ +

Подібні до масиву об'єкти

+ +

Метод slice також може перетворювати подібні до масиву об'єкти/колекції на нові об'єкти Array. Ви просто прив'язуєте метод до об'єкта. {{jsxref("Functions/arguments", "Аргументи")}} всередині функції є прикладом подібного до масиву об'єкта.

+ +
function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Прив'язати можна функцією .call з {{jsxref("Function.prototype")}}, також можна скоротити запис, використовуючи  [].slice.call(arguments) замість Array.prototype.slice.call. В будь-якому випадку, все можна спростити за допомогою {{jsxref("Function.prototype.bind", "bind")}}.

+ +
var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Оптимізація кросбраузерної поведінки

+ +

Хоча об'єкти середовища виконання (такі як об'єкти DOM) за специфікацією не зобов'язані відповідати поведінці Mozilla при перетворенні методом Array.prototype.slice, і IE < 9 цього не робить, версії IE починаючи від 9-ї дозволяють це. Використання шима дозволяє  створити надійну кросбраузерну поведінку. Поки інші сучасні переглядачі підтримують цю можливість, як нині роблять IE, Mozilla, Chrome, Safari та Opera, розробники, які читають (підтримують для об'єктів DOM) slice-код, що покладається на цей шим, не будуть введені в оману семантикою; вони спокійно можуть покладатися на семантику, щоб реалізувати тепер вже де-факто стандартну поведінку. (Шим також виправляє роботу IE з другим аргументом slice(), коли він явно заданий як {{jsxref("null")}}/{{jsxref("undefined")}}, чого більш ранні версії IE також не дозволяли, але всі сучасні переглядачі, в тому числі IE >= 9, зараз дозволяють.)

+ +
/**
+ * Шим для "виправлення" слабкої підтримки IE (IE < 9) використання slice
+ * на об'єктах середовища, таких як NamedNodeMap, NodeList та HTMLCollection
+ * (технічно, оскільки об'єкти середовища були залежні від реалізації,
+ * принаймні до ES2015, IE не мав потреби у цій функціональності.)
+ * Також працює для рядків, виправляє IE < 9, дозволяючи явно задане значення
+ * undefined другим аргументом (як у Firefox) та запобігає помилкам
+ * при виклику на інших об'єктах DOM.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Не можна використовувати з елементами DOM у IE < 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Не працює у IE < 9
+    // Працюватиме для справжніх масивів, подібних до масивів об'єктів,
+    // NamedNodeMap (атрибутів, сутностей, нотацій),
+    // NodeList (напр., getElementsByTagName), HTMLCollection (напр., childNodes),
+    // і не схибить на інших об'єктах DOM (як на елементах DOM у IE < 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE < 9 не любить undefined в якості аргументу end
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // Для об'єктів Array використовуємо рідну функцію slice
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end);
+      }
+
+      // Для подібних до масивів об'єктів робимо це самостійно.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Обробляємо від'ємне значення "begin"
+      var start = begin || 0;
+      start = (start >= 0) ? start : Math.max(0, len + start);
+
+      // Обробляємо від'ємне значення "end"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end < 0) {
+        upTo = len + end;
+      }
+
+      // Очікуваний розмір нового масиву
+      size = upTo - start;
+
+      if (size > 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i < size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i < size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}{{Spec2('ES5.1')}}
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізовано у JavaScript 1.2.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.slice")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/some/index.html b/files/uk/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..934df016e0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,206 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +tags: + - ECMAScript5 + - Довідка + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +
{{JSRef}}
+ +

Метод some() з'ясовує, чи містить масив хоч один елемент, для якого зазначена функція callback повертає true (або значення, що зводиться до true). Повертає значення типу Boolean.

+ +
+

Зауваження: для порожнього масиву цей метод незмінно повертає false.

+
+ +
{{EmbedInteractiveExample("pages/js/array-some.html")}}
+ + + +

Синтаксис

+ +
arr.some(callback(element[, index[, array]])[, thisArg])
+ +

Параметри

+ +
+
callback
+
Функція, яка перевіряє елементи. Приймає три аргументи: +
+
element
+
Значення чергового елемента масиву.
+
index {{Optional_inline}}
+
Індекс чергового елемента в масиві.
+
array{{Optional_inline}}
+
Масив, до якого застосовано some().
+
+
+
thisArg{{Optional_inline}}
+
Значення, що використовується як this коли викликається callback.
+
+ +

Повертає

+ +

true, якщо функція повертає {{Glossary("truthy", "істинне")}} значення принаймні для одного з елементів масива. Інакше false.

+ +

Опис

+ +

Метод some() викликає функцію callback для кожного елемента в масиві один за одним, доки не знайде такий, для якого callback повертає істинне значення (значення, яке стає true внаслідок перетворення на Boolean). Щойно такий елемент знайдено, some() негайно повертає true, не перевіряючи решту елементів. Якщо таких елементів не знайдено, метод some() повертає false.

+ +

Зауважте, що callback викликається лише для індексів масиву, яким надано значення. Тож індекси без встановлених значень, а також видалені елементи будуть знехтувані.

+ +

Функція callback викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт масиву, для якого викликано метод some().

+ +

Якщо для some() визначено параметр thisArg, його буде використано як значення this для функції callback. В іншому випадку, буде використано значення {{jsxref("undefined")}}. Зрештою, значення this для функції callback буде визначено відповідно до загальних правил.

+ +

Метод some() не змінює масив, для якого його викликано.

+ +

Межі індексів елементів, які буде перевірено, встановлюються перед найпершим викликом callback. Тож всі елементи, додані в кінець масиву вже під час виконання some(), будуть знехтувані. Якщо значення котрогось елемента буде змінено зсередини callback, наступний виклик callback (якщо такий буде) це врахує. Видалені елементи перевірено не буде.

+ +

Приклади

+ +

Перевірка елементів масива

+ +

В цьому прикладі виклик some() перевіряє, чи містить масив числа більші від 10:

+ +
function isBiggerThan10(element, index, array) {
+  return element > 10;
+}
+
+[2, 5, 8, 1, 4].some(isBiggerThan10);   // вертає false
+[12, 5, 8, 1, 4].some(isBiggerThan10);  // вертає true
+
+ +

Перевірка елементів масива стрілковою функцією

+ +

Те саме, що і в попередньому прикладі, але із синтаксисом стрілкової функції:

+ +
[2, 5, 8, 1, 4].some(x => x > 10);   // вертає false
+[12, 5, 8, 1, 4].some(x => x > 10);  // вертає true
+
+ +

Перевірка наявності певного значення в масиві

+ +

Щоб відтворити поведінку метода {{jsxref("Array.prototype.includes()", "includes()")}}, функція повертає true, щойно знаходить шукане значення в масиві:

+ +
var fruits = ['яблуко', 'груша', 'персик', 'банан'];
+
+function contains(array, value) {
+  return array.some(function(v) {
+    return value === v;
+  });
+}
+
+contains(fruits, 'вишня');  // вертає false
+contains(fruits, 'банан');  // вертає true
+ +

Перевірка наявності певного значення в масиві стрілковою функцією

+ +
var fruits = ['яблуко', 'груша', 'персик', 'банан'];
+
+function contains(array, value) {
+  return array.some(v => value === v);
+}
+
+contains(fruits, 'вишня');  // вертає false
+contains(fruits, 'банан');  // вертає true
+ +

Зведення всякого значення до Boolean

+ +
var TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(value) {
+  'use strict';
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);    // вертає false
+getBoolean('false');  // вертає false
+getBoolean(1);        // вертає true
+getBoolean('true');   // вертає true
+ +

Запасний варіант (поліфіл)

+ +

Цей метод було стандартизовано 5-им випуском ECMA-262. Для рушіїв, що не мають підтримки цього метода, стане в пригоді наведене нижче рішення. Цей алгоритм аналогічно відповідає вимогам 5-го випуску ECMA-262 за умови, що {{jsxref("Object")}} і {{jsxref("TypeError")}} не було змінено, а виклик callback.call() відповідає очікуваному {{jsxref("Function.prototype.call()")}}:

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.17
+// Reference: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun, thisArg) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length >>> 0;
+
+    for (var i = 0; i < len; i++) {
+      if (i in t && fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}{{Spec2('ES5.1')}}Початкова виознака. Запроваджено у JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.some")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/sort/index.html b/files/uk/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..2f592898bd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,274 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +
{{JSRef}}
+ +

Метод sort() відсортовує елементи масиву на місці та повертає відсортований масив. За замовчуванням порядок сортування будується на перетворенні елементів у рядки, а потім на порівнянні іхньої послідовності значень кодових одиниць UTF-16.

+ +

Часова та просторова складність такого сортування не може гарантуватися, оскільки вона залежить від реалізації.

+ +
{{EmbedInteractiveExample("pages/js/array-sort.html")}}
+ + + +

Синтаксис

+ +
arr.sort([compareFunction])
+
+ +

Параметри

+ +
+
compareFunction {{optional_inline}}
+
Вказує функцію, яка визначає порядок сортування. Якщо не вказувати, елементи масиву будуть перетворені на рядки, а потім відсортовані згідно до значення кодових точок Unicode кожного символу.
+
+
+
firstEl
+
Перший елемент для порівняння.
+
secondEl
+
Другий елемент для порівняння.
+
+
+
+ +

Повернене значення

+ +

Відсортований масив. Зверніть увагу на те, що масив сортується на місці, без створення копії.

+ +

Опис

+ +

Якщо compareFunction не передається, усі визначені (non-undefined) елементи масиву відсортовуються через перетворення у рядки та порівняння цих рядків в UTF-16 порядку кодових точок. Наприклад, "banana" іде перед "cherry". У числовому сортуванні, 9 іде перед 80, але оскільки числа перетворюються на рядки, "80" іде перед "9" в Unicode порядку. Усі undefined елементи відсортуються у кінець масиву. 

+ +
+

Примітка : В UTF-16, Unicode символи вище за \uFFFF кодуються як дві сурогатні кодові одиниці, діапазону \uD800-\uDFFF. Значення кожної кодової одиниці враховується для порівняння окремо. Таким чином, символ створений сурогатною парою \uD655\uDE55 буде відсортований перед символом \uFF3A.

+
+ +

Якщо compareFunction передається, усі визначені (non-undefined) елементи масиву відсортовуються згідно до поверненого значення функції порівняння (усі undefined елементи масиву відсортовуються у кінець масиву, без виклику compareFunction). Якщо a та b є двома елементами, що порівнюються, тоді: 

+ + + +

Таким чином, функція порівняння має наступний вигляд:

+ +
function compare(a, b) {
+  if (a is less than b by some ordering criterion) {
+    return -1;
+  }
+  if (a is greater than b by the ordering criterion) {
+    return 1;
+  }
+  // a must be equal to b
+  return 0;
+}
+
+ +

Для того, щоб порівняти числа замість рядків, функція порівняння може просто відняти b з a. Наступна функція відсортовує масив у порядку зростання (якщо тільки вона не містить Infinity та NaN):

+ +
function compareNumbers(a, b) {
+  return a - b;
+}
+
+ +

Метод sort зручно використовувати з {{jsxref("Operators/function", "function expressions", "", 1)}}:

+ +
var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+
+ +

ES2015 надає {{jsxref("Functions/Arrow_functions", "arrow function expressions", "", 1)}} за допомогою навіть коротшого синтаксису. 

+ +
let numbers = [4, 2, 5, 1, 3];
+numbers.sort((a, b) => a - b);
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+ +

Об'єкти можна сортувати, використовуючи значення однієї зі своїх властивостей. 

+ +
var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// sort by value
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+
+// sort by name
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
+  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
+  if (nameA < nameB) {
+    return -1;
+  }
+  if (nameA > nameB) {
+    return 1;
+  }
+
+  // names must be equal
+  return 0;
+});
+ +

Приклади

+ +

Створення, відображення, та сортування масиву

+ +

У наступному прикладі створюються чотири масиви і відображаються спершу початковий, потім відсортованний масиви. Числові масиви сортуються без функції порівняння, а відсортовані потім - з нею.

+ +
var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('Sorted:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Sorted without a compare function:', numberArray.sort());
+console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Sorted without a compare function:', numericStringArray.sort());
+console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Sorted without a compare function:', mixedNumericArray.sort());
+console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));
+
+ +

Цей приклад буде мати наступний вивід. Згідно до нього, при використанні функції порівняння, числа сортуються належним чином, як самі числа, так і рядки з числами.

+ +
stringArray: Blue,Humpback,Beluga
+Sorted: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+Sorted without a compare function: 1,200,40,5
+Sorted with compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Sorted without a compare function: 700,80,9
+Sorted with compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Sorted without a compare function: 1,200,40,5,700,80,9
+Sorted with compareNumbers: 1,5,9,40,80,200,700
+
+ +

Сортування не-ASCII символів

+ +

Для сортування рідків, які містять символи, що не входять до ASCII, наприклад, рядків з діакритичними знаками (e, é, è, a, ä, тощо), чи рядків мовою іншою за англійську, використовується {{jsxref("String.localeCompare")}}. Ця функція може порівнювати ці символи таким чином, що вони з'являються у правильному порядку. 

+ +
var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+
+ +

Сортування за допомогою функції map()

+ +

Функція compareFunction може викликатися багато разів на елемент всередені масиву. В залежності від характеру compareFunction, це може призводити до високих накладних витрат. Чим більше роботи виконує compareFunction, чим більше елементів їй треба відсортувати, тим доцільнішим буде використання функції map задля цієї задачі. Map() працює наступним чином: функція перебирає масив лише один раз, потім вона перетягує фактичні значення для сортування у тимчасовий масив, відсортовує цей масив, а потім перебирає його для того, щоб досягти правильного порядку. 

+ +
// the array to be sorted
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// temporary array holds objects with position and sort-value
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// sorting the mapped array containing the reduced values
+mapped.sort(function(a, b) {
+  if (a.value > b.value) {
+    return 1;
+  }
+  if (a.value < b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// container for the resulting order
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+
+ +

У відкритому доступі є бібліотека під назвою mapsort, яка застосовує цей підхід. 

+ +

Специфікація

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Специфікація СтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}} +

Початкове визначення.

+
{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ESDraft')}}
+ +

Сумісність з браузерами

+ +
+ + +

{{Compat("javascript.builtins.Array.sort")}}

+
+ +

Дивиться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/splice/index.html b/files/uk/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..0565d3f266 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,162 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Array + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +
{{JSRef}}
+ +

Метод splice() змінює вміст масиву, видаляючи існуючі та/або додаючи нові елементи.

+ +

{{EmbedInteractiveExample("pages/js/array-splice.html")}}

+ + + +

Синтаксис

+ +
var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
+
+ +

Параметри

+ +
+
start
+
Індекс елемента, з якого розпочнеться зміна масиву. Якщо індекс більший за розмір масиву, start буде рівним довжині масиву. Якщо індекс від'ємний, позначатиме кількість елементів з кінця масиву (починаючи з -1, тобто -n означатиме індекс n-го елемента з кінця, і таким чином є еквівалентом array.length - n). Якщо абсолютна величина start є більшою за довжину масиву, зміни почнуться з індексу 0.
+
deleteCount{{optional_inline}}
+
Число, що вказує на кількість елементів масиву, які необхідно видалити, починаючи з індексу start.
+
Якщо аргумент deleteCount не заданий, або його значення більше чи дорівнює arr.length - start (тобто, більше чи дорівнює кількості елементів, які залишились у масиві, починаючи зі start), тоді будуть видалені всі елементи, починаючи зі start і до кінця масиву.
+
Якщо deleteCount рівний 0 або від'ємний, жоден елемент не буде видалений. У цьому випадку необхідно вказати хоча б один новий елемент для вставки (див. нижче).
+
item1, item2, ...{{optional_inline}}
+
Елементи, що будуть додані до масиву, починаючи з індексу start. Якщо не вказати жодного нового елемента, splice() лише видалить елементи з масиву.
+
+ +

Значення, що повертається

+ +

Масив видалених елементів. Якщо видалено лише один елемент, метод поверне масив з одним елементом. Якщо жоден з елементів не видалявся, метод повертає пустий масив.

+ +

Опис

+ +

Якщо задана кількість елементів для вставлення відрізняється від кількості елементів на видалення, довжина масиву зміниться після виконання функції.

+ +

Приклади

+ +

Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum"

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish дорівнює ["angel", "clown", "drum", "mandarin", "sturgeon"] 
+// removed дорівнює [], жодний елемент не було видалено
+
+ +

Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum" та "guitar"

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum', 'guitar');
+
+// myFish дорівнює ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
+// removed дорівнює [], жодний елемент не було видалено
+ +

Видалення 1 елемента, починаючи з індексу 3

+ +
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed дорівнює ["mandarin"]
+// myFish дорівнює ["angel", "clown", "drum", "sturgeon"]
+ +

Видалення 1 елементу, починаючи з індексу 2, і вставлення "trumpet"

+ +
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish дорівнює ["angel", "clown", "trumpet", "sturgeon"]
+// removed дорівнює ["drum"]
+ +

Видалення 2-ох елементів, починаючи з індексу 0, і вставлення у масив елементів "parrot", "anemone" і "blue"

+ +
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish дорівнює ["parrot", "anemone", "blue", "trumpet", "sturgeon"] 
+// removed дорівнює ["angel", "clown"]
+ +

Видалення 2-ох елементів, починаючи з індексу 2

+ +
var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(2, 2);
+
+// myFish дорівнює ["parrot", "anemone", "sturgeon"] 
+// removed дорівнює ["blue", "trumpet"]
+
+ +

Видалення 1-го елемента, починаючи з індексу -2

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish дорівнює ["angel", "clown", "sturgeon"]
+// removed дорівнює ["mandarin"]
+ +

Видалення всіх елементів, починаючи з індексу 2 (включно).

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish дорівнює ["angel", "clown"] 
+// removed дорівнює ["mandarin", "sturgeon"]
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізовано у JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачів

+ + + +

{{Compat("javascript.builtins.Array.splice")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..75448b5e72 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,182 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +
{{JSRef}}
+ +

Метод toLocaleString() повертає рядок, що відображає елементи масиву. Елементи перетворюються у рядки, використовуючи свої методи toLocaleString, і ці рядки розділяються символами, що відповідають локалі (наприклад, комою “,”).

+ +
{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}
+ +

Синтаксис

+ +
arr.toLocaleString([locales[, options]]);
+
+ +

Параметри

+ +
+
locales {{optional_inline}}
+
Рядок з міткою мови BCP 47 або масив таких рядків. Щодо загального вигляду та інтерпретації аргументу locales дивіться  {{jsxref("Intl")}}.
+
options {{optional_inline}}
+
Об'єкт з властивостями конфігурації, для числових значень дивіться {{jsxref("Number.prototype.toLocaleString()")}}, а для дат {{jsxref("Date.prototype.toLocaleString()")}}.
+
+ +

Значення, що повертається

+ +

Текстовий рядок, що відображає елементи масиву.

+ +

Приклади

+ +

Використання locales та options

+ +

Елементи масиву перетворюються на рядки, використовуючи свої методи toLocaleString.

+ + + +

Завжди відображати знак валюти для рядків та чисел у масиві prices:

+ +
var prices = ['¥7', 500, 8123, 12];
+prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "¥7,¥500,¥8,123,¥12"
+
+ +

Більше прикладів дивіться на сторінках {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} та {{jsxref("DateTimeFormat")}}.

+ +

Поліфіл

+ +
// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Нехай O дорівнює ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Нехай len дорівнює ? ToLength(? Get(A, "length")).
+      var len = a.length >>> 0;
+
+      // 3. Нехай separator дорівнює рядковому значенню
+      //    роздільника елементів списку згідно поточної
+      //    локалі середовища виконання (це значення
+      //    визначається реалізацією).
+      // ЗАУВАГА: В даному випадку ми використовуємо кому
+      var separator = ',';
+
+      // 4. Якщо len дорівнює нулю, повернути порожінй рядок.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Нехай firstElement дорівнює ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. Якщо firstElement дорівнює undefined або null, тоді
+      //  a. Нехай R дорівнює порожньому рядку.
+      // 7. Інакше,
+      //  a. Нехай R дорівнює ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Нехай k дорівнює 1.
+      var k = 1;
+
+      // 9. Повторювати, доки k < len
+      while (k < len) {
+        // а. Нехай S дорівнює рядковому значенню, утвореному
+        //   об'єднанням R та separator.
+        var s = r + separator;
+
+        // б. Нехай nextElement дорівнює ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // в. Якщо nextElement дорівнює undefined або null, тоді
+        //   i. Нехай R дорівнє порожньому рядку.
+        // г. Інакше,
+        //   i. Нехай R дорівнює ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // ґ. Нехай R дорівнює рядковому значенню, утвореному
+        //   об'єднанням S та R.
+        r = s + r;
+
+        // д. Збільшити k на 1.
+        k++;
+      }
+
+      // 10. Повернути R.
+      return r;
+    }
+  });
+}
+
+ +

Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують Object.defineProperty, краще взагалі не використовувати поліфіли методів Array.prototype, оскільки ви не зможете зробити їх не перелічуваними.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ESDraft')}}Початкове визначення було надане у ECMAScript 3.
{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}}Це визначення замінює визначення, надане у ECMA-262.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.toLocaleString")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/tosource/index.html b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..d493fe0e4f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,72 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSource +tags: + - Array + - JavaScript + - Масив + - метод + - нестандартний +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +
Метод toSource() повертає рядкове представлення першокоду масиву.
+ +

Синтаксис

+ +
arr.toSource()
+ +

Значення, що повертається

+ +

Рядкове представлення першокоду масиву.

+ +

Опис

+ +

Метод toSource() повертає наступні значення:

+ + + +

Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді. Ви можете викликати toSource() під час налагодження для дослідження вмісту масиву.

+ +

Приклади

+ +

Досліджуємо першокод масиву

+ +

Для дослідження першокоду масиву:

+ +
var alpha = new Array('a', 'б', 'в');
+
+alpha.toSource();
+//повертає ['a', 'б', 'в']
+
+ +

Специфікації

+ +

Не є частиною жодного стандарту. Реалізовано у JavaScript 1.3.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.toSource")}}

+ +
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/tostring/index.html b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..53505797f4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,80 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +
{{JSRef}}
+ +

Метод toString() повертає рядкове представлення заданого масиву та його елементів.

+ +
{{EmbedInteractiveExample("pages/js/array-tostring.html")}}
+ +

Синтаксис

+ +
arr.toString()
+ +

Значення, що повертається

+ +

Рядкове представлення елементів масиву.

+ +

Опис

+ +

Об'єкт {{jsxref("Array")}} заміщує метод toString об'єкта {{jsxref("Object")}}. Для об'єктів Array метод toString об'єднує масив та повертає один рядок, що містить усі елементи масиву, розділені комами.

+ +

JavaScript викликає метод toString автоматично, коли масив потрібно відобразити у вигляді текстового значення або при посиланні на масив у поєднанні рядків.

+ +

Семантика ECMAScript 5

+ +

Введений у JavaScript 1.8.5 (Firefox 4) та сумісний з семантикою 5-ї версії ECMAScript, метод toString() є загальним і може використовуватися з будь-яким об'єктом. Буде викликаний метод {{jsxref("Object.prototype.toString()")}}, який поверне значення результату.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.toString")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html new file mode 100644 index 0000000000..308a8a01d6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html @@ -0,0 +1,89 @@ +--- +title: Array.unobserve() +slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve +tags: + - Array + - JavaScript + - Масив + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Array.unobserve +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод Array.unobserve() використовувався для видалення спостерігачів, встановлених методом {{jsxref("Array.observe()")}}, але він застарів та був прибраний з переглядачів. Ви можете натомість скористатись більш загальним об'єктом {{jsxref("Proxy")}}.

+ +

Синтаксис

+ +
Array.unobserve(arr, callback)
+ +

Параметри

+ +
+
arr
+
Масив, де треба припинити спостереження.
+
callback
+
Посилання на спостерігач, який треба припинити викликати кожен раз, коли у масиві arr відбувається зміна.
+
+ +

Опис

+ +

Метод Array.unobserve() має викликатися після {{jsxref("Array.observe()")}}, щоб прибрати спостерігач з масиву.

+ +

Параметр callback має бути посиланням на функцію, а не анонімною функцією, бо це посилання буде використано, щоб прибрати попередній спостерігач. Немає сенсу викликати Array.unobserve() з анонімною функцією зворотного виклику, вона не прибере жоден спостерігач.

+ +

Приклади

+ +

Припинення спостереження за масивом

+ +
var arr = [1, 2, 3];
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Array.observe(arr, observer);
+​
+arr.push(4);
+// [{type: "splice", object: <arr>, index: 3, removed:[], addedCount: 1}]
+
+Array.unobserve(arr, observer);
+
+arr.pop();
+// Функція зворотного виклику не викликалась
+ +

Використання анонімної функції

+ +
var persons = ['Халід', 'Ахмед', 'Мухаммед'];
+
+Array.observe(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.shift();
+// [{type: "splice", object: <arr>, index: 0, removed: [ "Халід" ], addedCount: 0 }]
+
+Array.unobserve(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.push('Абдулла');
+// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }]
+// Функція зворотного виклику викликатиметься завжди
+
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.unobserve")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/unshift/index.html b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..0621da3662 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,123 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +tags: + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +
{{JSRef}}
+ +

Метод unshift() додає один або декілька елементів на початок масиву і повертає новий розмір масиву.

+ +

{{EmbedInteractiveExample("pages/js/array-unshift.html")}}

+ +

Синтаксис

+ +
arr.unshift([element1[, ...[, elementN]]])
+ +

Параметри

+ +
+
elementN
+
Елементи для додавання в початок масиву.
+
+ +

Результат

+ +

Нова властивість {{jsxref("Array.length", "length")}} об'єкту, для якого було викликано функцію.

+ +

Опис

+ +

Метод unshift вставляє задані значення в початок масиву.

+ + + +

Метод unshift є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} у об'єктах, схожих на масиви. Об'єкти, які не мають властивості length, що відображає останню з серії послідовних числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.

+ +

Будь ласка, зауважте, якщо у параметри передається більше одного значення, вони всі вставляються на початку об'єкта, саме в тому порядку, в якому були передані у параметри. Отже, виклик unshift з n аргументів за один раз, або виклик n разів з 1 аргументом (наприклад, у циклі), не дадуть однаковий результат. Наприклад:

+ +
let arr = [4, 5, 6];
+
+arr.unshift(1, 2, 3);
+console.log(arr);
+// [1, 2, 3, 4, 5, 6]
+
+arr = [4, 5, 6]; // скидаємо значення масиву
+
+arr.unshift(1);
+arr.unshift(2);
+arr.unshift(3);
+
+console.log(arr);
+// [3, 2, 1, 4, 5, 6]
+ + + +

Приклади

+ +
var arr = [1, 2];
+
+arr.unshift(0); // результатом виклику буде значення 3, нова довжина масиву
+// arr дорівнює [0, 1, 2]
+
+arr.unshift(-2, -1); // нова довжина масиву дорівнює 5
+// arr дорівнює [-2, -1, 0, 1, 2]
+
+arr.unshift([-4, -3]); // нова довжина масиву дорівнює 6
+// arr дорівнбє [[-4, -3], -2, -1, 0, 1, 2]
+
+arr.unshift([-7, -6], [-5]); // нова довжина масиву дорівнює 8
+// arr дорівнює [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Назва специфікаціїСтатусКоментарій
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізовано в JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.unshift")}}

+ +
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/array/values/index.html b/files/uk/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..8df5438b95 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,93 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Ітератор + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +
{{JSRef}}
+ +

Метод values() повертає новий об'єкт ітератора масиву (Array Iterator), який містить значення кожного елемента масиву.

+ +

{{EmbedInteractiveExample("pages/js/array-values.html")}}

+ +
var a = ['a', 'б', 'в', 'г', 'ґ'];
+var iterator = a.values();
+
+console.log(iterator.next().value); // а
+console.log(iterator.next().value); // б
+console.log(iterator.next().value); // в
+console.log(iterator.next().value); // г
+console.log(iterator.next().value); // ґ
+ +

Синтаксис

+ +
arr.values()
+ +

Значення, що повертається

+ +

Новий об'єкт ітератора масиву.

+ +

Приклади

+ +

Перебір за допомогою циклу for...of

+ +
var arr = ['а', 'б', 'в', 'г', 'ґ'];
+var iterator = arr.values();
+
+for (let letter of iterator) {
+  console.log(letter);
+}
+
+ +

Array.prototype.values є реалізацією за замовчуванням для Array.prototype[Symbol.iterator].

+ +
Array.prototype.values === Array.prototype[Symbol.iterator]      //true
+ +

TODO: please write about why we need it, use cases.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Array.values")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html b/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html new file mode 100644 index 0000000000..d07be9a438 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html @@ -0,0 +1,128 @@ +--- +title: AsyncFunction +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction +tags: + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction +--- +
{{JSRef}}
+ +

Конструктор AsyncFunction створює новий об'єкт {{jsxref("Statements/async_function", "асинхронної функції")}}. У JavaScript кожна асинхронна функція насправді є об'єктом AsyncFunction.

+ +

Зауважте, що AsyncFunction не є глобальним об'єктом. Його можна отримати за допомогою наступного коду:

+ +
Object.getPrototypeOf(async function(){}).constructor
+
+ +

Синтаксис

+ +
new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody)
+ +

Параметри

+ +
+
arg1, arg2, ... argN
+
Імена, що використовуватиме функція як формальні імена аргументів. Кожне має бути рядком, що відповідає коректному ідентифікатору JavaScript, або списком таких рядків, розділених комою; наприклад, "x", "theValue" або "a,b".
+
functionBody
+
Рядок, що містить інструкції JavaScript, які складають визначення функції.
+
+ +

Опис

+ +

Об'єкти {{jsxref("Statements/async_function", "асинхронних функцій")}}, створені конструктором AsyncFunction, розбираються, коли створюється функція. Це менш ефективно, ніж оголосити асинхронну функцію через {{jsxref("Statements/async_function", "async function")}} та викликати її у вашому коді, тому що такі функції розбираються з рештою коду.

+ +

Усі аргументи, передані у функцію, сприймаються як імена ідентифікаторів параметрів функції, яка має бути створена, у тому порядку, в якому вони передані.

+ +
+

Заувага: {{jsxref("Statements/async_function", "асинхронні функції")}}, створені конструктором AsyncFunction, не утворюють замикань з контекстом свого створення; вони завжди створюються у глобальній області видимості.

+ +

Під час виконання вони матимуть доступ тільки до власних локальних змінних та до глобальних, але не до змінних області видимості, в якій був викликаний конструктор AsyncFunction.

+ +

Це відрізняється від використання {{jsxref("Global_Objects/eval", "eval")}} з кодом виразу асинхронної функції.

+
+ +

Використання конструктора AsyncFunction в якості функції (без оператора new) має такий самий ефект, як і виклик його в якості конструктора.

+ +

Властивості

+ +
+
AsyncFunction.length
+
Властивість length конструктора AsyncFunction (її значення дорівнює 1).
+
{{jsxref("AsyncFunction.prototype")}}
+
Дозволяє додавати властивості до усіх об'єктів асинхронних функцій.
+
+ +

Прототип AsyncFunction

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Властивості')}}
+ +

Екземпляри AsyncFunction

+ +

Екземпляри AsyncFunction успадковують методи та властивості від {{jsxref("AsyncFunction.prototype")}}.

+ +

Як в усіх конструкторах, ви можете змінювати об'єкт конструктора prototype, щоб вносити зміни до усіх екземплярів AsyncFunction.

+ +

Приклади

+ +

Створення асинхронної функції конструктором AsyncFunction

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+
+let a = new AsyncFunction('a',
+                          'b',
+                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
+
+a(10, 20).then(v => {
+  console.log(v); // виводить 30 через 4 секунди
+});
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}{{Spec2('ESDraft')}}Початкове визначення у ES2017.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.AsyncFunction")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html new file mode 100644 index 0000000000..c2df6c31db --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,59 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +tags: + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +--- +
{{JSRef}}
+ +

Властивість AsyncFunction.prototype відображає прототип об'єкта {{jsxref("AsyncFunction")}}.

+ +

Опис

+ +

Об'єкти {{jsxref("AsyncFunction")}} успадковуються від AsyncFunction.prototype. AsyncFunction.prototype не може бути змінений.

+ +

Властивості

+ +
+
AsyncFunction.constructor
+
Початковим значенням є {{jsxref("AsyncFunction")}}.
+
AsyncFunction.prototype[@@toStringTag]
+
Вертає "AsyncFunction".
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}{{Spec2('ESDraft')}}Початкове визначення у ES2017.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.AsyncFunction.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html b/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html new file mode 100644 index 0000000000..23dc106391 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html @@ -0,0 +1,78 @@ +--- +title: BigInt.asIntN() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN +tags: + - BigInt + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN +--- +
{{JSRef}}
+ +

Статичний метод BigInt.asIntN використовується для обертання значення BigInt до цілого числа зі знаком у діапазоні між -2width-1 та 2width-1-1.

+ +
{{EmbedInteractiveExample("pages/js/bigint-asintn.html", "taller")}}
+ + + +

Синтаксис

+ +
BigInt.asIntN(width, bigint);
+ +

Параметри

+ +
+
width
+
Кількість бітів, доступних для розміру цілого числа.
+
bigint
+
Ціле число, яке треба затиснути, щоб вмістити у надані біти.
+
+ +

Повертає

+ +

Значення bigint за модулем 2width у вигляді цілого числа зі знаком.

+ +

Приклади

+ +

Щоб залишатись у 64-бітному діапазоні

+ +

Метод BigInt.asIntN() може бути корисним, якщо потрібно залишатись у діапазоні 64-бітної арифметики.

+ +
const max = 2n ** (64n - 1n) - 1n;
+
+BigInt.asIntN(64, max);
+// ↪ 9223372036854775807n
+
+BigInt.asIntN(64, max + 1n);
+// ↪ -9223372036854775807n
+// від'ємне число, через переповнення
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bigint.asintn', 'BigInt.asIntN()')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.BigInt.asIntN")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html new file mode 100644 index 0000000000..87e7d50cd9 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html @@ -0,0 +1,77 @@ +--- +title: BigInt.asUintN() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN +tags: + - BigInt + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN +--- +
{{JSRef}}
+ +

Статичний метод BigInt.asUintN використовується для обертання значення BigInt до цілого беззнакового числа у діапазоні між 0 та 2width-1.

+ +
{{EmbedInteractiveExample("pages/js/bigint-asuintn.html", "taller")}}
+ + + +

Синтаксис

+ +
BigInt.asUintN(width, bigint);
+ +

Параметри

+ +
+
width
+
Кількість бітів, доступних для розміру цілого числа.
+
bigint
+
Ціле число, яке треба затиснути, щоб вмістити у надані біти.
+
+ +

Повертає

+ +

Значення bigint за модулем 2width у вигляді цілого беззнакового числа.

+ +

Приклади

+ +

Щоб залишатись у 64-бітному діапазоні

+ +

Метод BigInt.asUintN() може бути корисним, якщо потрібно залишатись у межах 64-бітної арифметики.

+ +
const max = 2n ** 64n - 1n;
+
+BigInt.asUintN(64, max);
+// ↪ 18446744073709551615n
+
+BigInt.asUintN(64, max + 1n);
+// ↪ 0n
+// нуль, через переповнення
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bigint.asuintn', 'BigInt.asUintN()')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.BigInt.asUintN")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html b/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html new file mode 100644 index 0000000000..5181816ae3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html @@ -0,0 +1,64 @@ +--- +title: Конструктор BigInt() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +tags: + - BigInt + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +--- +
{{JSRef}}
+ +

Конструктор BigInt() повертає значення типу bigint.

+ +

Синтаксис

+ +
BigInt(value);
+
+ +

Параметри

+ +
+
value
+
Числове значення об'єкта, що створюється. Може бути рядком або цілим числом.
+
+ +
+

Заувага: BigInt() не використовується з оператором {{JSxRef("Operators/new", "new")}}.

+
+ +

Приклади

+ +

Створення нового об'єкта BigInt

+ +
BigInt(123);
+// 123n
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bigint-constructor', 'BigInt constructor')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.BigInt.BigInt")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/bigint/index.html b/files/uk/web/javascript/reference/global_objects/bigint/index.html new file mode 100644 index 0000000000..89ced05a5d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/index.html @@ -0,0 +1,302 @@ +--- +title: BigInt +slug: Web/JavaScript/Reference/Global_Objects/BigInt +tags: + - BigInt + - JavaScript + - Довідка + - Клас +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt +--- +
{{JSRef}}
+ +

BigInt є вбудованим об'єктом, який надає можливість відображати неушкодженими числа, більші за 253 - 1, тобто, за найбільше число, яке може надійно відобразити JavaScript за допомогою {{Glossary("Primitive", "примітиву")}} Number та яке передається константою Number.MAX_SAFE_INTEGER. BigInt може використовуватись для довільно великих цілих чисел.

+ +
+
+ +

Опис

+ +

BigInt утворюється додаванням n у кінець цілочисельного літералу — 10n — або викликом функції BigInt().

+ +
const theBiggestInt = 9007199254740991n
+
+const alsoHuge = BigInt(9007199254740991)
+// ↪ 9007199254740991n
+
+const hugeString = BigInt("9007199254740991")
+// ↪ 9007199254740991n
+
+const hugeHex = BigInt("0x1fffffffffffff")
+// ↪ 9007199254740991n
+
+const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111")
+// ↪ 9007199254740991n
+
+ +

Тип BigInt певними рисами схожий на Number, але також відрізняється у кількох ключових моментах — він не може використовуватись з методами вбудованого об'єкта Math та не може змішуватись з екземплярами Number у операціях; вони мають бути приведені до одного типу. Однак, будьте обережні, перетворюючи значення туди й назад, бо BigInt може втратити точність при перетворенні на Number.

+ +

Інформація про тип

+ +

При перевірці на typeof, BigInt видасть "bigint":

+ +
typeof 1n === 'bigint'           // true
+typeof BigInt('1') === 'bigint'  // true
+
+ +

При загортанні у Object, BigInt вважатиметься звичайним типом "object":

+ +
typeof Object(1n) === 'object'  // true
+
+ +

Оператори

+ +

Наступні оператори можна використовувати з BigInt (або з загорнутими у об'єкт BigInt): +, *, -, **, %.

+ +

Бітові оператори також підтримуються, окрім >>> (правий зсув із заповненням нулями), оскільки числа BigInt мають знак.

+ +

Також не підтримується унарний оператор (+), щоб не ламати asm.js.

+ +
const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER)
+// ↪ 9007199254740991n
+
+const maxPlusOne = previousMaxSafe + 1n
+// ↪ 9007199254740992n
+
+const theFuture = previousMaxSafe + 2n
+// ↪ 9007199254740993n, тепер це працює!
+
+const multi = previousMaxSafe * 2n
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n
+// ↪ 18014398509481972n
+
+const mod = multi % 10n
+// ↪ 2n
+
+const bigN = 2n ** 54n
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+
+ +

Оператор / також працює, як і очікується, з повними числами.

+ +

Однак, оскільки це BigInt, а не BigDecimal, ця операція округлить результат в бік 0 (іншими словами, вона не поверне десяткових знаків).

+ +
+

Дробова частина результату операції буде обрізана при використанні з BigInt.

+
+ +
const expected = 4n / 2n
+// ↪ 2n
+
+const rounded = 5n / 2n
+// ↪ 2n, а не 2.5n
+
+
+ +

Порівняння

+ +

BigInt не є строго рівним Number, але є нестрого рівним:

+ +
0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true
+ +

Number та BigInt можна порівнювати звичайним чином:

+ +
1n < 2
+// ↪ true
+
+2n > 1
+// ↪ true
+
+2 > 2
+// ↪ false
+
+2n > 2
+// ↪ false
+
+2n >= 2
+// ↪ true
+ +

Їх можна змішувати у масивах та сортувати:

+ +
const mixed = [4n, 6, -12n, 10, 4, 0, 0n]
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort() // звичайна поведінка при сортуванні
+// ↪  [ -12n, 0, 0n, 10, 4n, 4, 6 ]
+
+mixed.sort((a, b) => a - b)
+// не спрацює, оскільки віднімання не працює при змішуванні типів
+// TypeError: can't convert BigInt to number
+
+// сортування з потрібним порівнянням чисел
+mixed.sort((a, b) => (a < b) ? -1 : ((a > b) ? 1 : 0)
+// ↪  [ -12n, 0, 0n, 4n, 4, 6, 10 ]
+
+ +

Зауважте, що порівняння чисел BigInt, загорнутих у об'єкт, працюють так само, як з іншими об'єктами, вони рівні тільки при порівнянні одного й того ж самого об'єкта:

+ +
0n === Object(0n)          // false
+Object(0n) === Object(0n)  // false
+
+const o = Object(0n)
+o === o                    // true
+
+ +

Умовні конструкції

+ +

BigInt поводиться так само, як і Number, у тих випадках, де:

+ + + +
if (0n) {
+  console.log('Привіт з if!')
+} else {
+  console.log('Привіт з else!')
+}
+
+// ↪ "Привіт з else!"
+
+0n || 12n
+// ↪ 12n
+
+0n && 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+
+ +

Конструктор

+ +
+
BigInt()
+
Створює нове значення bigint.
+
+ +

Статичні методи

+ +
+
BigInt.asIntN()
+
Обертає значення BigInt до цілого числа зі знаком у діапазоні між -2width-1 та 2width-1 - 1.
+
BigInt.asUintN()
+
Обертає значення BigInt до беззнакового цілого числа у діапазоні між 0 та 2width - 1.
+
+ +

Методи екземплярів

+ +
+
BigInt.prototype.toLocaleString()
+
Повертає рядок, який відображає число у відповідності до налаштувань мови. Заміщує метод Object.prototype.toLocaleString().
+
BigInt.prototype.toString()
+
Вертає рядкове представлення вказаного об'єкта з вказаною основою системи числення. Заміщує метод Object.prototype.toString().
+
BigInt.prototype.valueOf()
+
Вертає загорнуте примітивне значення вказаного об'єкта. Заміщує метод Object.prototype.valueOf().
+
+ +

Рекомендації щодо використання

+ +

Перетворення типів

+ +

Оскільки перетворення між Number та BigInt можуть призвести до втрати точності, рекомендується використовувати лише BigInt, коли очікуються значення, більші за 253, і не переключатись між двома типами.

+ +

Криптографія

+ +

Операції, що підтримуються на об'єктах BigInt, не є операціями сталого часу. Таким чином, об'єкти BigInt непридатні для використання у криптографії.

+ +

Використання у JSON

+ +

Використання JSON.stringify() з будь-яким значенням BigInt спричинить TypeError, оскільки значення BigInt не серіалізуються у JSON за замовчуванням. Однак, ви можете за необхідності реалізувати свій власний метод toJSON:

+ +
BigInt.prototype.toJSON = function() { return this.toString()  }
+ +

Тепер JSON.stringify, замість викидання винятку, повертає ось такий рядок:

+ +
JSON.stringify(BigInt(1))
+// '"1"'
+ +

Приклади

+ +

Обчислення простих чисел

+ +
// Повертає true, якщо передане значення BigInt є простим числом
+function isPrime(p) {
+  for (let i = 2n; i * i <= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true
+}
+
+// Приймає BigInt в якості аргументу, повертає n-не просте число як BigInt
+function nthPrime(nth) {
+  let maybePrime = 2n
+  let prime = 0n
+
+  while (nth >= 0n) {
+    if (isPrime(maybePrime)) {
+      nth--
+      prime = maybePrime
+    }
+    maybePrime++
+  }
+
+  return prime
+}
+
+nthPrime(20n)
+// ↪ 73n
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName("ESDraft", "#sec-bigint-objects", "BigInt objects")}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.BigInt")}}

+ +

Хід реалізації

+ +

Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у Test262, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.

+ +
{{EmbedTest262ReportResultsTable("BigInt")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html new file mode 100644 index 0000000000..b5f9480b8f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html @@ -0,0 +1,123 @@ +--- +title: BigInt.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString +tags: + - BigInt + - Intl + - JavaScript + - Інтернаціоналізація + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString +--- +
{{JSRef}}
+ +

Метод toLocaleString() повертає рядок, що відображає об'єкт BigInt у відповідності до налаштувань мови.

+ +
{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}
+ + + +

Синтаксис

+ +
bigIntObj.toLocaleString([locales [, options]])
+ +

Параметри

+ +

Аргументи locales та options налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи locales та options, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.

+ +
Дивіться конструктор Intl.NumberFormat(), щоб дізнатись подробиці щодо цих параметрів та їхнього використання.
+ +

Повертає

+ +

Рядок, що відображає надане значення BigInt у відповідності до налаштувань мови.

+ +

Швидкодія

+ +

При форматуванні великої кількості чисел краще створити об'єкт {{jsxref("NumberFormat")}} та використовувати функцію, надану його властивістю {{jsxref("NumberFormat.format")}}.

+ +

Приклади

+ +

Використання toLocaleString

+ +

При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням та з початковими параметрами.

+ +
var bigint = 3500n;
+
+bigint.toLocaleString();
+// Відображає "3,500" у форматі U.S. English
+
+ +

Використання locales

+ +

Цей приклад демонструє деякі варіації локалізованих форматів чисел. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу locales:

+ +
var bigint = 123456789123456789n;
+
+// В німецькій мові крапка розділяє тисячі
+console.log(bigint.toLocaleString('de-DE'));
+// → 123.456.789.123.456.789
+
+// Арабська у більшості арабськомовних країн використовує Індо-арабські цифри
+console.log(bigint.toLocaleString('ar-EG'));
+// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩
+
+// Індія використовує роздільники тисячі/лакх/крор
+console.log(bigint.toLocaleString('en-IN'));
+// → 1,23,45,67,89,12,34,56,789
+
+// ключ розширення nu налаштовує систему нумерації, наприклад, китайську десяткову
+console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六,七八九,一二三,四五六,七八九
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(bigint.toLocaleString(['ban', 'id']));
+// → 123.456.789.123.456.789
+
+ +

Використання options

+ +

Результат методу toLocaleString можна налаштувати за допомогою аргументу options:

+ +
var bigint = 123456789123456789n;
+
+// налаштування формату валюти
+console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456.789.123.456.789,00 €
+
+// японська єна не використовує дробові розряди
+console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ¥123,456,789,123,456,789
+
+// обмежити трьома значущими цифрами
+console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,00,00,00,00,00,00,000
+
+ +

Специфікації

+ + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bigint.prototype.tolocalestring', 'BigInt.prototype.toLocaleString()')}}
{{SpecName('ES Int Draft', '#sup-bigint.prototype.tolocalestring', 'BigInt.prototype.toLocaleString()')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.BigInt.toLocaleString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html b/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html new file mode 100644 index 0000000000..60576ed564 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html @@ -0,0 +1,93 @@ +--- +title: BigInt.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/toString +tags: + - BigInt + - JavaScript + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString +--- +
{{JSRef}}
+ +

Метод toString() вертає рядкове представлення вказаного об'єкта {{jsxref("BigInt")}}. Кінцевий символ "n" не є частиною рядка.

+ +
{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}
+ + + +

Синтаксис

+ +
bigIntObj.toString([radix])
+ +

Параметри

+ +
+
radix{{optional_inline}}
+
Необов'язковий. Ціле число в діапазоні від 2 до 36, яке вказує основу системи числення для відображення чисел.
+
+ +

Повертає

+ +

Рядкове представлення вказаного об'єкта {{jsxref("BigInt")}}.

+ +

Винятки

+ +
+
{{jsxref("RangeError")}}
+
Якщо методу toString() надано основу, меншу за 2 чи більшу за 36, викидається {{jsxref("RangeError")}}.
+
+ +

Опис

+ +

Об'єкт {{jsxref("BigInt")}} заміщує метод toString() об'єкта {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів {{jsxref( "BigInt")}} метод toString() вертає рядкове представлення об'єкта у вказаній системі числення.

+ +

Метод toString() розбирає перший аргумент та намагається повернути рядкове представлення числа з вказаною основою radix. Для основ, більших за 10, літери алфавіту вказують числа, більші за 9. Наприклад, для шістнадцяткових чисел (основа 16) використовуються літери від a до f.

+ +

Якщо аргумент radix не вказаний, основа вважається рівною 10.

+ +

Якщо значення bigIntObj від'ємне, знак зберігається. Це відбувається, навіть якщо основа дорівнює 2; повернений рядок - це додатне двійкове представлення числа bigIntObj зі знаком - попереду, а не bigIntObj у форматі доповняльного коду.

+ +

Приклади

+ +

Використання toString

+ +
17n.toString();      // '17'
+66n.toString(2);     // '1000010'
+254n.toString(16);   // 'fe'
+-10n.toString(2);    // -1010'
+-0xffn.toString(2);  // '-11111111'
+
+ +

Від'ємний нуль у BigInt

+ +

У BigInt не існує від'ємного нуля, оскільки не існує від'ємних нулів у цілих числах. -0.0 є концепцією IEEE для чисел з плаваючою крапкою, яка присутня у JavaScript лише у типі {{jsxref("Число", "Number")}}.

+ +
(-0n).toString();      // '0'
+BigInt(-0).toString(); // '0'
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bigint.prototype.tostring', 'BigInt.prototype.toString()')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.BigInt.toString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html b/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html new file mode 100644 index 0000000000..c3c998995c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html @@ -0,0 +1,57 @@ +--- +title: BigInt.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +tags: + - BigInt + - JavaScript + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +--- +
{{JSRef}}
+ +

Метод valueOf() вертає загорнуте примітивне значення об'єкта {{jsxref("BigInt")}}.

+ +
{{EmbedInteractiveExample("pages/js/bigint-valueof.html","shorter")}}
+ + + +

Синтаксис

+ +
bigIntObj.valueOf()
+ +

Повертає

+ +

BigInt, що відображає примітивне значення вказаного об'єкта {{jsxref("BigInt")}}.

+ +

Приклади

+ +

Використання valueOf

+ +
typeof Object(1n); // object
+typeof Object(1n).valueOf(); // bigint
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bigint.prototype.valueof', 'BigInt.prototype.valueOf()')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.BigInt.valueOf")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html b/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html new file mode 100644 index 0000000000..e34eca39fc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html @@ -0,0 +1,75 @@ +--- +title: Конструктор Boolean() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +tags: + - Boolean + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +--- +
{{JSRef}}
+ +

Конструктор Boolean() використовується для створення об'єктів {{jsxref("Boolean")}}.

+ +
{{EmbedInteractiveExample("pages/js/boolean-constructor.html","shorter")}}
+ + + +

Синтаксис

+ +
new Boolean([value])
+ +

Параметри

+ +
+
value {{optional_inline}}
+
Початкове значення об'єкта Boolean.
+
+ +

Приклади

+ +

Створення об'єктів Boolean з початковим значенням false

+ +
var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+
+ +

Створення об'єктів Boolean з початковим значенням true

+ +
var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-boolean-constructor', 'Boolean constructor')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Boolean.Boolean")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/boolean/index.html b/files/uk/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..221625ff80 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,157 @@ +--- +title: Boolean +slug: Web/JavaScript/Reference/Global_Objects/Boolean +tags: + - Boolean + - JavaScript + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +
{{JSRef}}
+ +

Об'єкт Boolean - це об'єкт-обгортка для значень булевого типу.

+ +

Синтаксис

+ +
new Boolean([value])
+ +

Параметри

+ +
+
value
+
Необов'язковий. Початкове значення об'єкту Boolean.
+
+ +

Опис

+ +

Значення, передане як перший параметр, перетворюється в логічне значення, якщо це необхідно. Якщо значення опущено або являється 0, -0, {{jsxref("null")}}, false, {{jsxref("NaN")}}, {{jsxref("undefined")}}, або порожнім рядком (""), об'єкт міститиме значення false. Всі інші значення, включаючи будь-який об'єкт або рядок "false", створюють об'єкт із  значенням true.

+ +

Не плутайте примітивні Boolean значення true та false з true та false значеннями об'єкту Boolean.

+ +

Будь-який об'єкт, значення якого не {{jsxref("undefined")}} чи {{jsxref("null")}}, в тому числі об'єкт Boolean із значенням  false, прирівнюється до true при передачі до умовного виразу. Для прикладу, умова в наступному {{jsxref("Statements/if...else", "if")}} виразі прирівнюється до true:

+ +
var x = new Boolean(false);
+if (x) {
+  // цей код виконуватиметься
+}
+
+ +

Ця поведінка не властива примітивам Boolean. Для прикладу, умова в наступному {{jsxref("Statements/if...else", "if")}} виразі прирівнюється до false:

+ +
var x = false;
+if (x) {
+  // цей код не виконуватиметься
+}
+
+ +

Не використовуйте об'єкт Boolean для перетворення не булевого значення в булеве. Замість цього використайте Boolean як функцію, щоб досягнути цього:

+ +
var x = Boolean(expression);     // рекомендовано
+var x = new Boolean(expression); // не варто використовувати
+
+ +

Якщо ви вказали будь-який об'єкт, включаючи об'єкт Boolean із значенням false в якості значення нового Boolean об'єкту, цей об'єкт матиме значення true.

+ +
var myFalse = new Boolean(false);   // значення false
+var g = Boolean(myFalse);       // значення true
+var myString = new String('Hello'); // строковий об'єкт
+var s = Boolean(myString);      // значення true
+
+ +

Не використовуйте об'єкт Boolean замість примітиву Boolean.

+ +

Властивості

+ +
+
Boolean.length
+
+

Поле довжини із значенням 1.

+
+
{{jsxref("Boolean.prototype")}}
+
Представляє прототип конструктора Boolean.
+
+ +

Методи

+ +

Хоча глобальний Boolean об'єкт не містить жодних власних методів, він успадковує деякі методи через ланцюжок прототипів.

+ +

Екземпляри Boolean

+ +

Всі екземпляриBoolean успадковуються від {{jsxref("Boolean.prototype")}}. Як і у всіх конструкторів, об'єкт прототипу визначає успадковані властивості та методи екземплярів.

+ +

Властивості

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Методи')}}
+ +

Приклади

+ +

Створення об'єктів Boolean з початковим значенням false

+ +
var bNoParam = Boolean();
+var bZero = Boolean(0);
+var bNull = Boolean(null);
+var bEmptyString = Boolean('');
+var bfalse = Boolean(false);
+
+ +

Створення об'єктів Boolean з початковим значенням true

+ +
var btrue = Boolean(true);
+var btrueString = Boolean('true');
+var bfalseString = Boolean('false');
+var bSuLin = Boolean('Su Lin');
+var bArrayProto = Boolean([]);
+var bObjProto = Boolean({});
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Впроваджено в JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ESDraft')}} 
+ +

Сумісність з веб переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Boolean")}}

+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html new file mode 100644 index 0000000000..4ae7e48bcb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html @@ -0,0 +1,82 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +tags: + - Boolean + - JavaScript + - Властивість + - Поле + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +
{{JSRef}}
+ +

Поле Boolean.prototype представляє прототип конструктора {{jsxref("Boolean")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
+ + + +

Опис

+ +

Екземпляри {{jsxref("Boolean")}} наслідуються від Boolean.prototype. Ви можете використовувати об'єкт прототипа конструктора, щоб додавати свої поля та методи до всіх екземплярів {{jsxref("Boolean")}}.

+ +

Властивості

+ +
+
Boolean.prototype.constructor
+
Повертає функцію, що створила прототип екземпляра. За замовчування це функція {{jsxref("Boolean")}}.
+
+ +

Методи

+ +
+
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає строку, що містить сирець об'єкту {{jsxref("Boolean")}}; використавши її ви можете створити еквівалентний об'єкт. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Boolean.prototype.toString()")}}
+
Повертає строку "true" чи "false" залежно від значення об'єкту. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Boolean.prototype.valueOf()")}}
+
Повертає примітив значення об'єкту {{jsxref("Boolean")}}. Перевизначає метод {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ +
+ + +

{{Compat("javascript.builtins.Boolean.prototype")}}

+
diff --git a/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html new file mode 100644 index 0000000000..0630c09cde --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html @@ -0,0 +1,58 @@ +--- +title: Boolean.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +tags: + - Boolean + - JavaScript + - Нестандарт + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

Метод toSource() повертає строку, що представляє сирцевий код об'єкту.

+ +

Синтаксис

+ +
booleanObj.toSource()
+Boolean.toSource()
+ +

Результат

+ +

Строка, що представляє сирцевий код об'єкту.

+ +

Опис

+ +

Метод toSource повертає наступні значення:

+ + + +

Цей метод зазвичай викликається всередині у JavaScript, а не прямо у коді.

+ +

Специфікації

+ +

Не є частиною жодного стандарту. Реалізовано у JavaScript 1.3.

+ +

Підтримка у браузерах

+ +
+ + +

{{Compat("javascript.builtins.Boolean.toSource")}}

+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html new file mode 100644 index 0000000000..307d61dd93 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html @@ -0,0 +1,99 @@ +--- +title: Boolean.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString +tags: + - Boolean + - JavaScript + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString +--- +
{{JSRef}}
+ +

Метод toString() повертає рядкове подання об'єкта Boolean.

+ +
{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}
+ + + +

Синтаксис

+ +
bool.toString()
+ +

Вертає

+ +

Рядок, що є поданням відповідного значення типу {{jsxref("Boolean")}}.

+ +

Опис

+ +

Об'єкт {{jsxref("Boolean")}} перевизначає метод toString об'єкта {{jsxref("Object")}}, а не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів Boolean метод toString повертає рядкове подання об'єкта.

+ +

JavaScript викликає метод toString автоматично, коли треба подати {{jsxref("Boolean")}} як рядкове значення (наприклад, для злучення із іншим рядком).

+ +

Для {{glossary("primitive", "простих значень")}} та об'єктів типу {{jsxref("Boolean")}}, вбудований метод toString повертає рядок "true" або "false" залежно від значення Boolean.

+ +

Приклади

+ +

Застосування toString

+ +

Наведений приклад засвідчує перетворення простих значень та об'єктів типу Boolean на рядки з відповідним вмістом:

+ +
var objTrue = new Boolean(true);
+var objFalse = new Boolean(false);
+var valTrue = true;
+var valFalse = false;
+
+console.log("true" === true.toString());    // виводить true
+console.log("false" === false.toString());  // виводить true
+
+console.log("true" === objTrue.toString());    // виводить true
+console.log("false" === objFalse.toString());  // виводить true
+console.log("true" === valTrue.toString());    // виводить true
+console.log("false" === valFalse.toString());  // виводить true
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкова виознака.
{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Boolean.toString")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html new file mode 100644 index 0000000000..b375d67dec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html @@ -0,0 +1,94 @@ +--- +title: Boolean.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +tags: + - Boolean + - JavaScript + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +--- +
{{JSRef}}
+ +

Метод valueOf() повертає {{glossary("primitive", "просте значення")}} об'єкта {{jsxref("Boolean")}}.

+ +
{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}
+ + + +

Синтаксис

+ +
bool.valueOf()
+ +

Вертає

+ +

Просте значення об'єкта {{jsxref("Boolean")}}.

+ +

Опис

+ +

Метод valueOf об'єкта {{jsxref("Boolean")}} повертає просте значення об'єкта Boolean, а якщо змінна вже містить просте значення, то повертає його без змін:

+ +
var obj = new Boolean(true);
+var val = true;
+
+console.log(obj.valueOf() === true);  // виводить true
+console.log(obj.valueOf() === obj);   // виводить false
+
+console.log(val.valueOf() === true);  // виводить true
+console.log(val.valueOf() === val);   // виводить true
+ +

Цей метод зазвичай викликається всередині JavaScript, а не в коді у явний спосіб.

+ +

Приклади

+ +

Застосування valueOf

+ +
var x = new Boolean(false);
+var y = x.valueOf();  // x — об'єкт, а y — просте значення
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкова виознака. Запроваджено у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Boolean.valueOf")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html b/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html new file mode 100644 index 0000000000..3bb645c604 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html @@ -0,0 +1,73 @@ +--- +title: 'Date.prototype[@@toPrimitive]' +slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive +--- +
{{JSRef}}
+ +

Метод [@@toPrimitive]() перетворює об'єкт Date на просте значення.

+ +

Синтаксис

+ +
Date()[Symbol.toPrimitive](hint);
+
+ +

Повертає

+ +

Просте значення наданого об'єкта {{jsxref("Date")}}. В залежності від аргументу, метод може повернути або рядок, або число.

+ +

Опис

+ +

Метод [@@toPrimitive]() об'єкта {{jsxref("Date")}} повертає просте значення, яке належить або до числового, або до рядкового типу.

+ +

Якщо hint дорівнює "string" або "default", [@@toPrimitive]() намагається викликати метод {{jsxref("Object.prototype.toString()", "toString")}}. Якщо властивість toString не існує, він намагається викликати метод {{jsxref("Object.prototype.valueOf()", "valueOf")}}, а якщо valueOf також не існує, [@@toPrimitive]() викидає помилку {{jsxref("TypeError")}}.

+ +

Якщо hint дорівнює "number", [@@toPrimitive]() спрочатку намагається викликати valueOf, а якщо не вдається, він викликає toString.

+ +

JavaScript викликає метод [@@toPrimitive]() для перетворення об'єкта на просте значення. Вам рідко знадобиться викликати метод [@@toPrimitive]() власноруч; JavaScript автоматично викликає його, коли зустрічає об'єкт там, де очікується просте значення.

+ +

Приклади

+ +

Повернення простих значень дати

+ +
const testDate = new Date(1590757517834);
+// "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"
+
+testDate[Symbol.toPrimitive]('string');
+// Returns "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"
+
+testDate[Symbol.toPrimitive]('number');
+// Returns "1590757517834"
+
+testDate[Symbol.toPrimitive]('default');
+// Returns "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.@@toPrimitive")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/date/index.html b/files/uk/web/javascript/reference/global_objects/date/date/index.html new file mode 100644 index 0000000000..690a85f842 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/date/index.html @@ -0,0 +1,135 @@ +--- +title: Конструктор Date() +slug: Web/JavaScript/Reference/Global_Objects/Date/Date +tags: + - Date + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Date/Date +--- +
{{JSRef}}
+ +

Створює екземпляр об'єкта JavaScript Date, який відображає єдиний момент часу у незалежному від платформи форматі. Об'єкти Date містять число, яке відображає кількість мілісекунд від 1 січня 1970 року (UTC).

+ +
{{EmbedInteractiveExample("pages/js/date-constructor.html")}}
+ + + +

Синтаксис

+ +
new Date()
+new Date(value)
+new Date(dateString)
+new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])
+
+ +
+

Заувага: Єдиним правильним способом створити новий екземпляр об'єкта Date є використання оператора {{jsxref("new")}}. Якщо ви просто викличете безпосередньо об'єкт Date, наприклад, так now = Date(), то повернеться рядок, а не об'єкт Date.

+
+ +

Параметри

+ +

Існують чотири основні форми конструктора Date():

+ +
    +
  1. +

    Без параметрів

    + +

    Коли не надано жодних параметрів, новостворений об'єкт Date відображає поточну дату та час на момент його створення.

    +
  2. +
  3. +

    Значення часу або часова мітка

    + +
    +
    value
    +
    Ціле число, що відображає кількість мілісекунд від 1 січня 1970 року, 00:00:00 UTC (час ECMAScript, еквівалент часу UNIX), при цьому високосні секунди ігноруються. Пам'ятайте, що більшість функцій часової мітки UNIX мають точність лише до найближчої секунди.
    +
    +
  4. +
  5. +

    Рядок з часовою міткою

    + +
    +
    dateString
    +
    Рядкове значення дати, надане у форматі, що розпізнається методом {{jsxref("Date.parse()")}}. (Ці формати є часовими мітками стандарту RFC 2822, що відповідають IEНF, а також рядками у варіації формату ISO8601.) +
    +

    Заувага: Розбір рядків дати за допомогою конструктора Date (та методу Date.parse(), який працює так само) наполегливо не рекомендується через відмінності та невідповідності між переглядачами.

    + +
      +
    • Підтримка формату рядків RFC 2822 є лише домовленістю.
    • +
    • Підтримка форматів ISO 8601 відрізняється в тому, що рядки, які містять лише дату (наприклад, "1970-01-01"), сприймаються як UTC, а не як локальний формат.
    • +
    +
    +
    +
    +
  6. +
  7. +

    Значення окремих компонентів дати та часу

    + +

    Маючи принаймні рік та місяць, ця форма Date() вертає об'єкт Date, чиї значення компонентів (рік, місяць, день, години, хвилини, секунди та мілісекунди) усі взяті з наступних параметрів. Будь-яким відсутнім полям надається найменше можливе значення (1 для дня (day) та 0 для усіх інших компонентів).

    + +
    +
    year
    +
    +

    Ціле число, що відображає рік.

    + +

    Значення з 0 по 99 відповідають рокам з 1900 по 1999. Усі інші значення дорівнюють вказаному року.

    +
    +
    monthIndex
    +
    Ціле число, що відображає місяць, починаючи з 0 для січня, по 11 для грудня.
    +
    day {{optional_inline}}
    +
    Ціле число, що відображає день місяця. За замовчуванням 1.
    +
    hours {{optional_inline}}
    +
    Ціле число, що відображає значення години. За замовчуванням 0 (північ).
    +
    minutes {{optional_inline}}
    +
    Ціле число, що відображає значення хвилин. За замовчуванням 0 хвилин з початку години.
    +
    seconds {{optional_inline}}
    +
    Ціле число, що відображає значення секунд. За замовчуванням 0 секунд з початку хвилини.
    +
    milliseconds {{optional_inline}}
    +
    Ціле число, що відображає значення мілісекунд. За замовчуванням 0 мілісекунд з початку секунди.
    +
    +
  8. +
+ +

Приклади

+ +

Кілька способів створити об'єкт Date

+ +

Наступні приклади демонструють кілька способів створити дати JavaScript:

+ +
+

Заувага: Розбір рядків дати за допомогою конструктора Date (а також методу Date.parse, вони еквівалентні) наполегливо не рекомендується через відмінності та невідповідності між переглядачами.

+
+ +
let today = new Date()
+let birthday = new Date('December 17, 1995 03:24:00')
+let birthday = new Date('1995-12-17T03:24:00')
+let birthday = new Date(1995, 11, 17)            // нумерація місяців починається з 0
+let birthday = new Date(1995, 11, 17, 3, 24, 0)
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date-constructor', 'Date')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.Date")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getdate/index.html b/files/uk/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..431044f4df --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,64 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +
{{JSRef}}
+ +

Метод getDate() повертає день місяця для вказаної дати згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getdate.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getDate()
+ +

Повертає

+ +

Ціле число між 1 та 31, що відображає день місяця для наданої дати згідно з місцевим часом.

+ +

Приклади

+ +

Використання getDate()

+ +

Друга інструкція, наведена нижче, присвоює значення 25 змінній day на основі значення об'єкта {{jsxref("Date")}} на ім'я Xmas95.

+ +
var Xmas95 = new Date('December 25, 1995 23:15:30');
+var day = Xmas95.getDate();
+
+console.log(day); // 25
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getDate")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getday/index.html b/files/uk/web/javascript/reference/global_objects/date/getday/index.html new file mode 100644 index 0000000000..9c4a6fe852 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getday/index.html @@ -0,0 +1,77 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDay +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +
{{JSRef}}
+ +

Метод getDay() повертає день тижня для вказаної дати згідно з місцевим часом, де 0 означає неділю. Щоб отримати день місяця, дивіться {{jsxref("Date.prototype.getDate()")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-getday.html", "shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getDay()
+ +

Повертає

+ +

Ціле число між 0 та 6, що відповідає дню тижня для наданої дати згідно з місцевим часом: 0 - неділя, 1 - понеділок, 2 - вівторок і т.д.

+ +

Приклади

+ +

Використання getDay()

+ +

Друга інструкція, наведена нижче, присвоює значення 1 змінній weekday на основі значення об'єкта {{jsxref("Date")}} на ім'я Xmas95. 25 грудня 1995 року - це понеділок.

+ +
var Xmas95 = new Date('December 25, 1995 23:15:30');
+var weekday = Xmas95.getDay();
+
+console.log(weekday); // 1
+
+ +
+

Заувага: За необхідності можна отримати повну назву дня (наприклад, "понеділок") за допомогою методу {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} з параметром options. З цим методом інтернаціоналізація стає простішою:

+ +
var options = { weekday: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// Monday
+console.log(new Intl.DateTimeFormat('uk', options).format(Xmas95));
+// понеділок
+
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getDay")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..cc94ae8146 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,68 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +
{{JSRef}}
+ +

Метод getFullYear() повертає рік вказаної дати згідно з місцевим часом.

+ +

Використовуйте цей метод замість методу {{jsxref("Date.prototype.getYear()", "getYear()")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-getfullyear.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getFullYear()
+ +

Повертає

+ +

Число, що відповідає року наданої дати згідно з місцевим часом.

+ +

Опис

+ +

Значення, яке повертає getFullYear(), є абсолютним числом. Для дат між роками 1000 та 9999 getFullYear() повертає чотиризначне число, наприклад, 1995. Використовуйте цю функцію, щоб бути певними, що рік узгоджується з роками після 2000.

+ +

Приклади

+ +

Використання getFullYear()

+ +

Наступний приклад присвоює чотиризначне значення поточного року змінній year.

+ +
var today = new Date();
+var year = today.getFullYear();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getFullYear")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/gethours/index.html b/files/uk/web/javascript/reference/global_objects/date/gethours/index.html new file mode 100644 index 0000000000..090762146c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/gethours/index.html @@ -0,0 +1,65 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/getHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +
{{JSRef}}
+ +

Метод getHours() повертає годину вказаної дати згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-gethours.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getHours()
+ +

Повертає

+ +

Ціле число між 0 та 23, яке відображає годину наданої дати згідно з місцевим часом.

+ +

Приклади

+ +

Використання getHours()

+ +

Друга інструкція, наведена нижче, присвоює значення 23 змінній hours на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я Xmas95.

+ +
let Xmas95 = new Date('December 25, 1995 23:15:30');
+let hours = Xmas95.getHours();
+
+console.log(hours); // 23
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getHours")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html new file mode 100644 index 0000000000..bef2c69b6d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +
{{JSRef}}
+ +

Метод getMilliseconds() повертає мілісекунди у вказаній даті згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getMilliseconds()
+ +

Повертає

+ +

Число між 0 та 999, що відображає мілісекунди для наданої дати згідно з місцевим часом.

+ +

Приклади

+ +

Використання getMilliseconds()

+ +

Наступний приклад присвоює значення мілісекунд поточного часу змінній milliseconds:

+ +
var today = new Date();
+var milliseconds = today.getMilliseconds();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getMilliseconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html new file mode 100644 index 0000000000..7cd9470003 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +
{{JSRef}}
+ +

Метод getMinutes() повертає хвилини у вказаній даті згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getminutes.html","shorter")}}
+ +

Синтаксис

+ +
dateObj.getMinutes()
+ +

Повертає

+ +

Ціле число між 0 та 59, що відображає хвилини у наданій даті згідно з місцевим часом.

+ +

Приклади

+ +

Використання getMinutes()

+ +

Друга інструкція, наведена нижче, присвоює 15 змінній minutes на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я Xmas95.

+ +
var Xmas95 = new Date('December 25, 1995 23:15:30');
+var minutes = Xmas95.getMinutes();
+
+console.log(minutes); // 15
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getMinutes")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html new file mode 100644 index 0000000000..1e1b620d75 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +
{{JSRef}}
+ +

Метод getMonth() повертає місяць у вказаній даті згідно з місцевим часом, як значення на основі нуля (де нуль позначає перший місяць року).

+ +
{{EmbedInteractiveExample("pages/js/date-getmonth.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getMonth()
+ +

Повертає

+ +

Ціле число між 0 та 11, що відображає місяць у наданій даті згідно з місцевим часом. 0 відповідає січню, 1 лютому, і так далі.

+ +

Приклади

+ +

Використання getMonth()

+ +

Друга інструкція, наведена нижче, присвоює значення 11 змінній month, на основі значення об'єкта {{jsxref("Date")}} на ім'я Xmas95.

+ +
var Xmas95 = new Date('December 25, 1995 23:15:30');
+var month = Xmas95.getMonth();
+
+console.log(month); // 11
+
+ +
+

Заувага: За необхідності можна отримати повну назву місяця (наприклад, "січень") за допомогою методу Intl.DateTimeFormat() з параметром options. З цим методом інтернаціоналізація стає простішою:

+ +
var options = { month: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// December
+console.log(new Intl.DateTimeFormat('uk', options).format(Xmas95));
+// грудень
+
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getMonth")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html new file mode 100644 index 0000000000..b96c2f068d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html @@ -0,0 +1,63 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +
{{JSRef}}
+ +

Метод getSeconds() повертає секунди у вказаній даті згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getseconds.html", "shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getSeconds()
+ +

Повертає

+ +

Ціле число між 0 та 59, що відображає секунди у наданій даті згідно з місцевим часом.

+ +

Приклади

+ +

Використання getSeconds()

+ +

Друга інструкція, наведена нижче, присвоює значення 30 змінній seconds, на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я Xmas95.

+ +
var Xmas95 = new Date('December 25, 1995 23:15:30');
+var seconds = Xmas95.getSeconds();
+
+console.log(seconds); // 30
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getSeconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/gettime/index.html b/files/uk/web/javascript/reference/global_objects/date/gettime/index.html new file mode 100644 index 0000000000..58fce8fef3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/gettime/index.html @@ -0,0 +1,109 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTime +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +
 {{JSRef}}
+ +

Метод getTime() повертає кількість мілісекунд* з початку часу Unix.

+ +

* JavaScript використовує мілісекунди як одиницю вимірювання, тоді як час Unix вимірюється у секундах.

+ +

getTime() завжди використовує UTC для подання часу. Наприклад, у клієнтському оглядачі в одному часовому поясі getTime() буде таким самим, як і в оглядачі у будь-якому іншому часовому поясі.

+ +
Ви можете скористатись цим методом, щоб допомогти присвоїти дату та час іншому об'єкту {{jsxref("Date")}}. Цей метод функціонально еквівалентний методу {{jsxref("Date.valueof", "valueOf()")}}.
+ +
+ +
{{EmbedInteractiveExample("pages/js/date-gettime.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.getTime()
+ +

Повертає

+ +

Число, що відображає кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та наданою датою.

+ +

Зменшена точність часу

+ +

Для захисту від атак за часом чи за цифровими відбитками точність new Date().getTime() може бути округлена, в залежності від налаштувань переглядача. У Firefox параметр privacy.reduceTimerPrecision за замовчуванням увімкнений та дорівнює 20 мс у Firefox 59; у 60 він дорівнює 2 мс.

+ +
// зменшена точність часу (2 мс) у Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// зменшена точність часу з увімкненим параметром `privacy.resistFingerprinting`
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+
+ +

У Firefox ви також можете увімкнути privacy.resistFingerprinting, точність дорівнюватиме або 100 мс, або значенню privacy.resistFingerprinting.reduceTimerPrecision.microseconds, в залежності від того, що більше.

+ +

Приклади

+ +

Використання getTime() для копіювання дати

+ +

Створення об'єкта дати з ідентичним значенням часу.

+ +
// Оскільки місяці нумеруються з нуля, birthday дорівнює 10 січня 1995
+var birthday = new Date(1994, 12, 10);
+var copy = new Date();
+copy.setTime(birthday.getTime());
+
+ +

Вимірюємо час виконання

+ +

Віднімання між двома викликами getTime() на новозгенерованих об'єктах {{jsxref("Date")}} дасть проміжок часу між цими двома викликами. Це можна використати, щоб обчислити час виконання деяких операцій. Дивіться також {{jsxref("Date.now()")}}, щоб запобігти створенню непотрібних екземплярів {{jsxref("Date")}}.

+ +
var end, start;
+
+start = new Date();
+for (var i = 0; i < 1000; i++) {
+  Math.sqrt(i);
+}
+end = new Date();
+
+console.log('Операція зайняла ' + (end.getTime() - start.getTime()) + ' мсек');
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getTime")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html new file mode 100644 index 0000000000..35360a9a7e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html @@ -0,0 +1,97 @@ +--- +title: Date.prototype.getTimezoneOffset() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +--- +
{{JSRef}}
+ +

Метод getTimezoneOffset() повертає різніцю, у хвилинах, між поточним місцевим часовим поясом (налаштування системи хоста) та UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}
+ + + +

Синтаксис

+ +
dateObj.getTimezoneOffset()
+ +

Повертає

+ +

Число, що відображає зсув часового поясу, в хвилинах, від дати, що базується на поточних налаштуваннях системи, до UTC.

+ +

Опис

+ +

Зсув часового поясу - це різниця, у хвилинах, між місцевим часом та UTC (Coordinated Universal Time, Всесвітній координований час).

+ +

Зауважте, це означає, що зсув є додатнім, якщо локальний часовий пояс розташований за UTC, та від'ємним, якщо він розташований попереду. Наприклад, для часового поясу UTC+10:00 (Австралійський східний стандартний час, Час Чаморро), результатом буде -600.

+ + + + + + + + + + + + + + + + + + +
Локальний часовий поясUTC-8UTCUTC+3
Значення, що повертається4800-180
+ +

Зсув часового поясу, який повертається, стосується об'єкта Date, на якому викликається метод.

+ +

Якщо в системі налаштований перехід на літній час, зсув буде змінюватись, в залежності від дати та часу, які містить об'єкт Date, та дати та часу, на які впливає перехід на літній час.

+ +

Приклади

+ +

Використання getTimezoneOffset()

+ +
// Отримати зсув поточного часового поясу для хостового пристрою
+let x = new Date();
+let currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
+// -3
+
+// Отримати зсув часового поясу для Міжнародного дня праці (1 травня) у 2016 р.
+// Будьте обережні, конструктор Date() рахує місяці з 0, тому травень
+// передається числом 4 (а не 5)
+let labourDay = new Date(2016, 4, 1)
+let labourDayOffset = labourDay.getTimezoneOffset() / 60;
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getTimezoneOffset")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html new file mode 100644 index 0000000000..61ef05a778 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html @@ -0,0 +1,60 @@ +--- +title: Date.prototype.getUTCDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +--- +
{{JSRef}}
+ +

Метод getUTCDate() повертає день місяця у вказаній даті згідно з всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}
+ +

Синтаксис

+ +
dateObj.getUTCDate()
+ +

Повертає

+ +

Ціле число між 1 та 31, що відображає день місяця у наданій даті згідно з всесвітнім часом.

+ +

Приклади

+ +

Використання getUTCDate()

+ +

Наступний приклад присвоює значення дня поточної дати змінній day.

+ +
var today = new Date();
+var day = today.getUTCDate();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCDate")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html new file mode 100644 index 0000000000..61081ed52f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html @@ -0,0 +1,62 @@ +--- +title: Date.prototype.getUTCDay() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +--- +
{{JSRef}}
+ +

Метод getUTCDay() повертає день тижня у вказаній даті згідно з всесвітнім часом, де 0 означає неділю.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}
+ + + +

Синтаксис

+ +
dateObj.getUTCDay()
+ +

Повертає

+ +

Ціле число, що відповідає дню тижня для наданої дати, згідно з всесвітнім часом: 0 - неділя, 1 - понеділок, 2 - вівторок, і так далі.

+ +

Приклади

+ +

Використання getUTCDay()

+ +

Наступний приклад присвоює день тижня поточної дати змінній weekday.

+ +
var today = new Date();
+var weekday = today.getUTCDay();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCDay")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html new file mode 100644 index 0000000000..04416642dc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html @@ -0,0 +1,65 @@ +--- +title: Date.prototype.getUTCFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +--- +
{{JSRef}}
+ +

Метод getUTCFullYear() повертає рік у вказаній даті згідно з всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}
+ + + +

Синтаксис

+ +
dateObj.getUTCFullYear()
+ +

Повертає

+ +

Число, що відображає рік у вказаній даті згідно з всесвітнім часом.

+ +

Опис

+ +

Значення, яке повертає getUTCFullYear(), є абсолютним числом, сумісним з 2000-м роком, наприклад, 1995.

+ +

Приклади

+ +

Використання getUTCFullYear()

+ +

Наступний приклад присвоює чотиризначне значення поточного року змінній year.

+ +
var today = new Date();
+var year = today.getUTCFullYear();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCFullYear")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html b/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html new file mode 100644 index 0000000000..a784f057a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getUTCHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +--- +
{{JSRef}}
+ +

Метод getUTCHours() повертає години вказаної дати згідно з всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}
+ + + +

Синтаксис

+ +
dateObj.getUTCHours()
+ +

Повертає

+ +

Ціле число між 0 та 23, що відображає години у вказаній даті згідно з всесвітнім часом.

+ +

Приклади

+ +

Використання getUTCHours()

+ +

Наступний приклад присвоює значення години поточного часу змінній hours.

+ +
var today = new Date();
+var hours = today.getUTCHours();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCHours")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html new file mode 100644 index 0000000000..cc3cd766f8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html @@ -0,0 +1,63 @@ +--- +title: Date.prototype.getUTCMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +tags: + - Date + - JavaScript + - Method + - Prototype + - Дата + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +--- +
{{JSRef}}
+ +

Метод getUTCMilliseconds() повертає значення мілісекунд у об'єкті часу.

+ +

{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html","shorter")}}

+ +

Синтаксис

+ +
dateObj.getUTCMilliseconds()
+ +

Вертає

+ +

Ціле число між 0 та 999, що позначає мілісекунди у наданому об'єкті дати. Цей метод є колегою інших методів на основі UTC, що повертають значення годин, хвилин, і т. д.; цей метод повертає значення мілісекунд.

+ +

Не слід плутати його з часом Unix. Щоб отримати повну кількість мілісекунд від 1970/01/01, скористайтесь методом ".getTime()".

+ +

Приклади

+ +

Використання getUTCMilliseconds()

+ +

Наведений приклад присвоює значення мілісекунд поточного часу змінній milliseconds:

+ +
var today = new Date();
+var milliseconds = today.getUTCMilliseconds();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html new file mode 100644 index 0000000000..5fb37f435c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html @@ -0,0 +1,59 @@ +--- +title: Date.prototype.getUTCMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +--- +
{{JSRef}}
+ +

Метод getUTCMinutes() повертає хвилини у вказаній даті згідно з всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}
+ +

Синтаксис

+ +
dateObj.getUTCMinutes()
+ +

Повертає

+ +

Ціле число між 0 та 59, що відображає хвилини у наданій даті згідно з всесвітнім часом.

+ +

Приклади

+ +

Використання getUTCMinutes()

+ +

Наступний приклад присвоює значення хвилин поточного часу змінній minutes.

+ +
var today = new Date();
+var minutes = today.getUTCMinutes();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCMinutes")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html new file mode 100644 index 0000000000..3775a65caa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getUTCMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +--- +
{{JSRef}}
+ +

Метод getUTCMonth() повертає місяць вказаної дати згідно з всесвітнім часом, як значення на основі нуля (де нуль позначає перший місяць року).

+ +
{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}
+ + + +

Синтаксис

+ +
dateObj.getUTCMonth()
+ +

Повертає

+ +

Ціле число між 0 та 11, що відповідає місяцю у наданій даті згідно з всесвітнім часом. 0 - січень, 1 - лютий, 2 - березень, і так далі.

+ +

Приклади

+ +

Використання getUTCMonth()

+ +

Наступний приклад присвоює значення місяця поточної дати змінній month.

+ +
var today = new Date();
+var month = today.getUTCMonth();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCMonth")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html new file mode 100644 index 0000000000..04f184043f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getUTCSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +tags: + - Date + - JavaScript + - Method + - Prototype + - Дата + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +--- +
{{JSRef}}
+ +

Метод getUTCSeconds() повертає секунди на зазначену дату відповідно до всесвітнього часу.

+ +

{{EmbedInteractiveExample("pages/js/date-getutcseconds.html", "shorter")}}

+ +

Синтаксис

+ +
dateObj.getUTCSeconds()
+ +

Вертає

+ +

Ціле число, між 0 та 59, яке позначає секунди на зазначену дату відповідно до всесвітнього часу.

+ +

Приклади

+ +

Використання getUTCSeconds()

+ +

Наведений код призначає секундну частину поточної дати змінній seconds:

+ +
var today = new Date();
+var seconds = today.getUTCSeconds();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getUTCSeconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/getyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getyear/index.html new file mode 100644 index 0000000000..a358ac4c2b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getyear/index.html @@ -0,0 +1,107 @@ +--- +title: Date.prototype.getYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getYear +tags: + - Date + - JavaScript + - Довідка + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод getYear() повертає рік у вказаній даті згідно з місцевим часом. Оскільки getYear() не повертає повне значення року ("проблема 2000 року"), він більше не використовується та був замінений на метод {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}.

+ +

Синтаксис

+ +
dateObj.getYear()
+ +

Повертає

+ +

Число, що відображає рік у наданій даті, згідно з місцевим часом, мінус 1900.

+ +

Опис

+ + + +

Для врахування років до та після 2000, слід використовувати {{jsxref("Date.prototype.getFullYear", "getFullYear()")}} замість getYear(), щоб вказувалось повне значення року.

+ +

Зворотна сумісність

+ +

Поведінка у JavaScript 1.2 та старших версіях

+ +

Метод getYear() повертає або 2-значне, або 4-значне значення року:

+ + + +

Приклади

+ +

Роки між 1900 та 1999

+ +

Друга інструкція присвоює значення 95 змінній year.

+ +
var Xmas = new Date('December 25, 1995 23:15:00');
+var year = Xmas.getYear(); // повертає 95
+
+ +

Роки, більші за 1999

+ +

Друга інструкція присвоює значення 100 змінній year.

+ +
var Xmas = new Date('December 25, 2000 23:15:00');
+var year = Xmas.getYear(); // повертає 100
+
+ +

Роки, менші за 1900

+ +

Друга інструкція присвоює значення -100 змінній year.

+ +
var Xmas = new Date('December 25, 1800 23:15:00');
+var year = Xmas.getYear(); // повертає -100
+
+ +

Присвоєння та отримання років між 1900 та 1999

+ +

Третя інструкція присвоює значення 95 змінній year, що означає рік 1995.

+ +
var Xmas = new Date('December 25, 2015 23:15:00');
+Xmas.setYear(95);
+var year = Xmas.getYear(); // повертає 95
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.getYear")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/index.html b/files/uk/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..61c26eb1d8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,269 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - JavaScript + - Time + - Дата + - Час Unix +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +
{{JSRef}}
+ +
Об'єкт JavaScript Date відображає єдиний момент у часі у  незалежному від платформи форматі. Об'єкти Date містять число, яке відображає кількість мілісекунд від 1 січня 1970 року за UTC.
+ +
+ +
+

TC39 працює над об'єктом Temporal, новим API для дати та часу.
+ Читайте більше щодо нього у блозі Igalia та заповнюйте опитування. Він потребує відгуків реальних веб-розробників, але поки що не готовий для повноцінного використання!

+
+ +

Опис

+ +

Час ECMAScript та часові мітки

+ +

Дата JavaScript вказується як кількість мілісекунд, що пройшли від 1 січня 1970 року за UTC. Ця дата та час не є тим самим, що й час UNIX (кількість секунд, що пройшли від опівночі 1 січня 1790 року за UTC), який є базовим значенням для дати та часу, що записуються комп'ютером.

+ +

Заувага: Важливо пам'ятати, що, тоді як значення часу в серці об'єкта Date є значенням UTC, базові методи з отримання дати та часу, або їхніх елементів, усі працюють у локальному (тобто, системному) часовому поясі та зсуві.

+ +

Варто зауважити, що максимальне значення Date не співпадає з максимальним безпечним цілим числом (Number.MAX_SAFE_INTEGER дорівнює 9,007,199,254,740,991). Натомість, ECMA-262 визначає, що максимум ±100,000,000 (сто мільйонів) днів відносно 1 січня 1970 року за UTC (тобто, 20 квітня 271821 до н.е. ~ 13 вересня 275760 н.е.) можуть бути представлені стандартним об'єктом Date (що дорівнює ±8,640,000,000,000,000 мілісекундам).

+ +

Формат дати та перетворення часових поясів

+ +

Існує велика кількість методів для отримання дати у різних форматах, а також для виконання перетворень часових поясів. Особливо корисні функції, які виводять дату та час у всесвітньому координованому часі (Coordinated Universal Time, UTC), глобальному стандартному часі, визначеному Всесвітнім часовим стандартом (World Time Standard). (Цей час історично відомий як середній час за Гринвічем, бо UTC пролякає вздовж меридіану, що включає Лондон — та сусідній Гринвіч — у Великій Британії.) Пристрій користувача надає місцевий час.

+ +

Над додачу до методів для читання та зміни окремих компонентів місцевої дати та часу (таких, як {{jsxref("Date.getDay", "getDay()")}} та {{jsxref("Date.setHours", "setHours()")}}), також існують версії тих самих методів, які читають та змінюють дату та час, використовуючи час UTC (такі, як {{jsxref("Date.getUTCDay()", "getUTCDay()")}} та {{jsxref("Date.setUTCHours", "setUTCHours()")}}).

+ +

Конструктор

+ +
+
{{jsxref("Date/Date", "Date()")}}
+
Створює новий об'єкт Date.
+
+ +

Статичні методи

+ +
+
{{jsxref("Date.now()")}}
+
Вертає ціле число, що позначає поточний час — кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC без врахування високосних секунд.
+
{{jsxref("Date.parse()")}}
+
Розбирає рядкове представлення дати та повертає кількість мілісекунд між 00:00:00 за UTC 1 січня 1970 та зазначеною миттю у часі, ігноруючи високосні секунди.
+
+
+

Заувага: Розбір рядків з датою (часом) за допомогою метода Date.parse є рішуче небажаним через наявні розбіжності поміж переглядачами.

+
+
+
{{jsxref("Date.UTC()")}}
+
Приймає ті самі параметри, що й найдовша форма конструктора (тобто, від 2 до 7), та вертає кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC, ігноруючи високосні секунди.
+
+ +

Методи екземплярів

+ +
+
{{jsxref("Date.prototype.getDate()")}}
+
Повертає день місяця (131) для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.getDay()")}}
+
Повертає день тижня (06) для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.getFullYear()")}}
+
Повертає рік (4 цифри для 4-значних років) вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.getHours()")}}
+
Повертає годину (023) у вказаній даті згідно з місцевим часом.
+
{{jsxref("Date.prototype.getMilliseconds()")}}
+
Повертає мілісекунди (0999) у вказаній даті згідно з місцевим часом.
+
{{jsxref("Date.prototype.getMinutes()")}}
+
Повертає хвилини (059) у вказаній даті згідно з місцевим часом.
+
{{jsxref("Date.prototype.getMonth()")}}
+
Повертає місяць (011) у вказаній даті згідно з місцевм часом.
+
{{jsxref("Date.prototype.getSeconds()")}}
+
Повертає секунди (059) у вказаній даті згідно з місцевим часом.
+
{{jsxref("Date.prototype.getTime()")}}
+
Повертає числове значення вказаної дати у вигляді кількості мілісекунд від 1 січня 1970 року 00:00:00 за UTC. (Для більш ранніх дат повертаються від'ємні значення.)
+
{{jsxref("Date.prototype.getTimezoneOffset()")}}
+
Повертає зсув часового поясу у хвилинах для місцевих налаштувань.
+
{{jsxref("Date.prototype.getUTCDate()")}}
+
Повертає день місяця (131) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getUTCDay()")}}
+
Повертає день тижня (06) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getUTCFullYear()")}}
+
Повертає рік (4 цифри для 4-значних років) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getUTCHours()")}}
+
Повертає години (023) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
+
Повертає мілісекунди (0999) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getUTCMinutes()")}}
+
Повертає хвилини (059) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getUTCMonth()")}}
+
Повертає місяць (011) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getUTCSeconds()")}}
+
Повертає секунди (059) у вказаній даті згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.getYear()")}}
+
Повертає рік (зазвичай, 2–3 цифри) у вказаній даті згідно з місцевим часом. Використовуйте замість нього {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.
+
{{jsxref("Date.prototype.setDate()")}}
+
Встановлює день місяця для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.setFullYear()")}}
+
Встановлює повне значення року (наприклад, 4 цифри для 4-значних років) для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.setHours()")}}
+
Встановлює години для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.setMilliseconds()")}}
+
Встановлює мілісекунди для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.setMinutes()")}}
+
Встановлює хвилини для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.setMonth()")}}
+
Встановлює місяць для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.setSeconds()")}}
+
Встановлює секунди для вказаної дати згідно з місцевим часом.
+
{{jsxref("Date.prototype.setTime()")}}
+
Встановлює об'єкту {{jsxref("Date")}} час, переданий кількістю мілісекунд від 1 січня 1970 року 00:00:00 за UTC. Використовуйте від'ємні значення для більш ранніх дат.
+
{{jsxref("Date.prototype.setUTCDate()")}}
+
Встановлює день місяця для вказаної дати згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.setUTCFullYear()")}}
+
Встановлює повне значення року (наприклад, 4 цифри для 4-значних років) для вказаної дати згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.setUTCHours()")}}
+
Встановлює години для вказаної дати згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
+
Встановлює мілісекунди для вказаної дати згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.setUTCMinutes()")}}
+
Встановлює хвилини для вказаної дати згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.setUTCMonth()")}}
+
Встановлює місяць для вказаної дати згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.setUTCSeconds()")}}
+
Встановлює секунди для вказаної дати згідно зі всесвітнім часом.
+
{{jsxref("Date.prototype.setYear()")}}
+
Встановлює рік (зазвичай, 2–3 цифри) для вказаної дати згідно з місцевим часом. Використовуйте замість нього {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.
+
{{jsxref("Date.prototype.toDateString()")}}
+
Повертає елементи дати об'єкта {{jsxref("Date")}} у вигляді зручного для читання рядка, наприклад, 'Thu Apr 12 2018'.
+
{{jsxref("Date.prototype.toISOString()")}}
+
Перетворює дату на рядок згідно з розширеним форматом ISO 8601.
+
{{jsxref("Date.prototype.toJSON()")}}
+
Повертає рядок, що відображає об'єкт {{jsxref("Date")}}, використовуючи {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Призначений для використання методом {{jsxref("JSON.stringify()")}}.
+
{{jsxref("Date.prototype.toGMTString()")}}
+
Повертає рядок, що відображає об'єкт {{jsxref("Date")}} на основі часового поясу GMT (UTC). Використовуйте замість нього {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.
+
{{jsxref("Date.prototype.toLocaleDateString()")}}
+
Повертає рядкове представлення елементів дати у відповідності до системних налаштувань.
+
Date.prototype.toLocaleFormat()
+
Перетворює дату на рядок, використовуючи рядок форматування.
+
{{jsxref("Date.prototype.toLocaleString()")}}
+
Повертає рядкове представлення дати відповідно до мовних налаштувань. Заміщує метод {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Date.prototype.toLocaleTimeString()")}}
+
Повертає рядкове представлення часу у відповідності до мовних налаштувань.
+
{{jsxref("Date.prototype.toString()")}}
+
Повертає рядкове представлення вказаного об'єкта {{jsxref("Date")}}. Заміщує метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Date.prototype.toTimeString()")}}
+
Повертає елементи часу об'єкта {{jsxref("Date")}} у вигляді зручного для читання рядка.
+
{{jsxref("Date.prototype.toUTCString()")}}
+
Перетворює дату на рядок, використовуючи часових пояс UTC.
+
{{jsxref("Date.prototype.valueOf()")}}
+
Повертає просте значення об'єкта {{jsxref("Date")}}. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.
+
+ +
+ +

Приклади

+ +

Кілька способів створити екземпляр Date

+ +

Наступні приклади демонструють кілька способів створення дат JavaScript:

+ +
+

Заувага: Розбір рядків з датою за допомогою конструктора Date (або методу Date.parse, що є одне й те саме) є рішуче небажаним через наявні розбіжності поміж переглядачами.

+
+ +
let today = new Date()
+let birthday = new Date('December 17, 1995 03:24:00')
+let birthday = new Date('1995-12-17T03:24:00')
+let birthday = new Date(1995, 11, 17)            // місяці нумеруються з 0
+let birthday = new Date(1995, 11, 17, 3, 24, 0)
+let birthday = new Date(628021800000)            // передаємо часову мітку
+
+ +

 Щоб отримати день, місяць та рік, або час

+ +
let [month, date, year]    = ( new Date() ).toLocaleDateString().split("/")
+let [hour, minute, second] = ( new Date() ).toLocaleTimeString().slice(0,7).split(":")
+ +

Двозначний рік відповідає рокам 1900-1999

+ +

Для створення та отримання дат між 0 та 99 роками, слід використовувати методи {{jsxref("Date.prototype.setFullYear()")}} та {{jsxref("Date.prototype.getFullYear()")}}.

+ +
let date = new Date(98, 1);  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Застарілий метод, тут 98 також обертається на 1998
+date.setYear(98);            // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);        // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+
+ +

Обчислення тривалості

+ +

У наведених прикладах показано, як визначити час, що пройшов між двома датами JavaScript.

+ +

Через різну тривалість доби (внаслідок переходів між літнім та зимовим часом), місяців та років, вираження обчисленої тривалості в одиницях, більших за години, хвилини та секунди, зустрічає багато проблем та потребує вдумливого дослідження перед застосуванням.

+ +
// Використання об'єктв Date
+var start = Date.now();
+
+// Тут якісь обчислення, тривалість яких слід з'ясувати
+doSomethingForALongTime();
+let end = Date.now()
+let elapsed = end - start // час, що пройшов, у мілісекундах
+
+ +
// Використання вбудованих методів
+let start = new Date()
+
+// Подію, час якої необхідно обчислити:
+doSomethingForALongTime()
+let end = new Date()
+let elapsed = end.getTime() - start.getTime() // час, що пройшов, у мілісекундах
+
+ +
// Щоб перевірити функцію та отримати її результат
+function printElapsedTime(fTest) {
+  let nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now()
+
+  console.log(`Тривалість: ${ String(nEndTime - nStartTime) } мілісекунд`);
+  return vReturn
+}
+
+let yourFunctionReturn = printElapsedTime(yourFunction)
+
+ +
+

Заувага: У переглядачах з підтримкою часу високої роздільності {{domxref("window.performance", "Web Performance API", "", 1)}}, метод {{domxref("Performance.now()")}} може забезпечити вищу точність та надійність вимірювання тривалості, ніж {{jsxref("Date.now()")}}.

+
+ +

Отримання кількості секунд з початку епохи ECMAScript

+ +
let seconds = Math.floor(Date.now() / 1000)
+
+ +

У цьому випадку важливо повернути тільки ціле число, тому просте ділення не підійде. Також важливо повернути лише секунди, які вже пройшли. (Тому цей код використовує {{jsxref("Math.floor()")}}, а не {{jsxref("Math.round()")}}.)

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}
+ +

Підтримка веб-переглядачами

+ + + +
{{Compat("javascript.builtins.Date.Date")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/now/index.html b/files/uk/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..7e03cfbcef --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,86 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Global_Objects/Date/now +tags: + - JavaScript + - Method + - UTC + - polyfill + - Дата + - Довідка + - Час Unix +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +
{{JSRef}}
+ +

Статичний метод Date.now() вертає кількість мілісекунд від 1 січня 1970 року о 00:00:00 за UTC.

+ +

{{EmbedInteractiveExample("pages/js/date-now.html")}}

+ +

Синтаксис

+ +
var timeInMs = Date.now();
+ +

Вертає

+ +

{{jsxref("Число")}}, що позначає кількість мілісекунд від початку епохи за часом Unix.

+ +

Запасний варіант (поліфіл)

+ +

Цей метод було стандартизовано 5-им випуском ECMA-262. Для рушіїв, що не мають підтримки цього метода, стане в пригоді таке рішення:

+ +
if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+
+ +

Приклади

+ +

Зменшена точність часу

+ +

Для захисту від атак за часом чи за цифровими відбитками, точність Date.now() може бути округлена, в залежності від налаштувань переглядача.
+ У Firefox параметр privacy.reduceTimerPrecision за замовчуванням увімкнений та дорівнює 20 мс у Firefox 59; у 60 він дорівнюватиме 2 мс.

+ +
// зменшена точність часу (2 мс) у Firefox 60
+Date.now()
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+// зменшена точність часу з увімкненим параметром `privacy.resistFingerprinting`
+Date.now();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+ +

У Firefox ви також можете увімкнути privacy.resistFingerprinting, точність дорівнюватиме або 100 мс, або значенню privacy.resistFingerprinting.reduceTimerPrecision.microseconds, в залежності від того, що більше.

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.now")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/parse/index.html b/files/uk/web/javascript/reference/global_objects/date/parse/index.html new file mode 100644 index 0000000000..a83c917192 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/parse/index.html @@ -0,0 +1,198 @@ +--- +title: Date.parse() +slug: Web/JavaScript/Reference/Global_Objects/Date/parse +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse +--- +
{{JSRef}}
+ +

Метод Date.parse() розбирає рядкове представлення дати та повертає кількість мілісекунд від 1 січня 1970 року, 00:00:00 за UTC, або NaN, якщо рядок неможливо розібрати чи, в окремих випадках, він містить недозволені значення (наприклад, 2015-02-31).

+ +

Не рекомендується використовувати Date.parse, оскільки у версіях до ES5 розбір був повністю залежним від реалізації. Досі існують багато відмінностей у тому, як різні хости розбирають рядки з датами, тому вони мають розбиратися вручну (можна скористатись бібліотекою, якщо очікується багато різних форматів).

+ +
{{EmbedInteractiveExample("pages/js/date-parse.html")}}
+ + + +

Синтаксис

+ +

Прямий виклик:

+ +
Date.parse(dateString)
+
+ +

Неявний виклик:

+ +
new Date(dateString)
+
+ +

Параметри

+ +
+
dateString
+
Рядок, що відображає спрощену версію розширеного календарного формату дати ISO 8601. (Можна використовувати й інші формати, але результат залежитиме від реалізації.)
+
+ +

Повертає

+ +

Число, що відображає кількість мілісекунд від 1 січня 1970 року, 00:00:00 за UTC, і дату, отриману розбором наданого рядкового представлення дати. Якщо аргумент не відображає дозволене значення дати, повертається {{jsxref("NaN")}}.

+ +

Опис

+ +

Метод parse() приймає рядок з датою (наприклад, "2011-10-10T14:48:00") та повертає число мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.

+ +

Ця функція корисна для присвоєння дати на основі рядкових значень, наприклад, у поєднанні з методом {{jsxref("Date.prototype.setTime()", "setTime()")}} та об'єктом {{jsxref("Global_Objects/Date", "Date")}}.

+ +

Рядковий формат дати та часу

+ +

Стандартне рядкове представлення дати та часу є спрощенням розширеного календарного формату дати ISO 8601. (Дивіться більше подробиць у розділі Date Time String Format специфікації ECMAScript.)

+ +

Наприклад, "2011-10-10" (лише дата), "2011-10-10T14:48:00" (дата та час) або "2011-10-10T14:48:00.000+09:00" (дата та час з мілісекундами та часовим поясом) можуть бути та будуть розібрані. Коли зсув часового поясу відсутній, форми, що містять лише дату, інтерпретуються як час UTC, а форми з датою та часом інтерпретуються як місцевий час.

+ +

Хоча специфікатори часового поясу використовуються під час розбору рядків для інтерпретації аргументу, значення, що повертається, завжди буде кількістю мілісекунд між 1 січня 1970 року 00:00:00 за UTC та точкою у часі, відображеною аргументом, або ж NaN.

+ +

Оскіьки parse() - статичний метод {{jsxref("Date")}}, він викликається як Date.parse(), а не як метод екземпляра {{jsxref("Date")}}.

+ +

Використання специфічних реалізацій форматів дати

+ +
+

Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.

+
+ +

Специфікація ECMAScript зазначає: Якщо рядок не відповідає стандартному формату, функція може застосовувати будь-яку специфічно реалізовану евристику чи специфічно реалізований алгоритм розбору. Рядки, які неможливо розібрати, чи дати, що містять недозволені значення елементів у рядках формату ISO, змусять метод Date.parse() повернути {{jsxref("NaN")}}.

+ +

Однак, недозволені значення у рядках дат, які не розпізнаються в якості спрощеного формату ISO, визначеного у ECMA-262, можуть повернути або не повернути {{jsxref("NaN")}}, в залежності від переглядача, наданих значень і т.д.:

+ +
// Рядок не формату ISO з недозволеними значеннями у даті
+new Date('23/25/2014');
+
+ +

це буде сприйнято як локальна дата 25 листопада 2015 у Firefox 30 та як неправильна дата у Safari 7.

+ +

Однак, якщо рядок розпізнається як рядок формату ISO та містить недозволені значення, він поверне {{jsxref("NaN")}} в усіх переглядачах, сумісних з ES5 та пізнішими версіями:

+ +
// Рядок ISO з недозволеними значеннями
+new Date('2014-25-23').toISOString();
+// викидає "RangeError: invalid date" в усіх переглядачах, сумісних з ES5
+
+ +

Специфічну реалізацію SpiderMonkey можна знайти у jsdate.cpp. Рядок "10 06 2014" є прикладом невідповідності формату ISO, і тому використовується особливий алгоритм. Дивіться також цей короткий опис того, як працює розбір.

+ +
new Date('10 06 2014');
+
+ +

це буде сприйматись як локальна дата 6 жовтня 2014, а не як 10 червня 2014.

+ +

Інші приклади:

+ +
new Date('foo-bar 2014').toString();
+// повертає: "Invalid Date"
+
+Date.parse('foo-bar 2014');
+// повертає: NaN
+
+ +

Відмінності у отриманому часовому поясі

+ +
+

Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.

+
+ +

Отримавши нестандартний рядок дати "March 7, 2014", parse() припускає, що він відноситься до місцевого часового поясу, але отримавши рядок у спрощеній версії розширеного календарного формату ISO 8601, наприклад, "2014-03-07", він припускає часовий пояс UTC (ES5 та ECMAScript 2015). Таким чином, об'єкти {{jsxref("Date")}}, отримані за допомогою цих рядків, можуть відображати різні моменти часу, в залежності від версії ECMAScript, яка підтримується, якщо тільки у системі не встановлений місцевий часовий пояс UTC. Це означає, що два рядки дат, що виглядають еквівалентними, можуть повернути два різних значення, в залежності від формату рядка, який перетворюється.

+ +

Приклади

+ +

Використання Date.parse()

+ +

Усі наступні виклики повертають 1546300800000. Перший, у відповідності до ES5, застосує час UTC, а інші вказують часовий пояс UTC через специфікацію дати ISO (Z та +00:00)

+ +
Date.parse("2019-01-01")
+Date.parse("2019-01-01T00:00:00.000Z")
+Date.parse("2019-01-01T00:00:00.000+00:00")
+
+ +

Наступний виклик, який не вказує часовий пояс, поверне 2019-01-01 о 00:00:00 у локальному часовому поясі системи.

+ +
Date.parse("2019-01-01T00:00:00")
+
+ +

Нестандартні рядки дат

+ +
+

Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.

+
+ +

Якщо IPOdate є існуючим об'єктом {{jsxref("Date")}}, йому можна призначити дату 9 серпня 1995 (за локальним часом) наступним чином:

+ +
IPOdate.setTime(Date.parse('Aug 9, 1995'));
+
+ +

Ще кілька прикладів розбору нестандартних рядків дат:

+ +
Date.parse('Aug 9, 1995');
+
+ +

Повертає 807937200000 у часовому поясі GMT-0300 та інші значення у інших часових поясах, оскільки рядок не вказує часовий пояс і не відповідає формату ISO, тому часовий пояс береться локальний.

+ +
Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
+
+ +

Повертає 807926400000, незалежно від локального часового поясу, оскільки вказано GMT (UTC).

+ +
Date.parse('Wed, 09 Aug 1995 00:00:00');
+
+ +

Повертає 807937200000 у часовому поясі GMT-0300 та інші значення у інших часових поясах, оскільки аргумент не містить вказівника часового поясу, і не відповідає формату ISO, а отже, сприймається як локальний.

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
+
+ +

Повертає 0, незалежно від локального часового поясу, оскільки вказано GMT (UTC).

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00');
+
+ +

Повертає 14400000 у часовому поясі GMT-0400 та інші значення у інших часових поясах, оскільки часовий пояс не вказано, а рядок не відповідає формату ISO, тому використовується локальний часовий пояс.

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
+
+ +

Повертає 14400000, незалежно від локального часового поясу, оскільки вказано GMT (UTC).

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.parse")}}

+ +

Примітки щодо сумісності

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setdate/index.html b/files/uk/web/javascript/reference/global_objects/date/setdate/index.html new file mode 100644 index 0000000000..4a34fb17fa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setdate/index.html @@ -0,0 +1,79 @@ +--- +title: Date.prototype.setDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/setDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate +--- +
{{JSRef}}
+ +

Метод setDate() встановлює день об'єкта {{jsxref("Date")}} відносно початку наразі встановленого місяця.

+ +
{{EmbedInteractiveExample("pages/js/date-setdate.html")}}
+ + + +

Синтаксис

+ +
dateObj.setDate(dayValue)
+ +

Параметри

+ +
+
dayValue
+
Ціле число, що відображає день місяця.
+
+ +

Повертає

+ +

Число мілісекунд між 1 січня 1970 00:00:00 за UTC та наданою датою (об'єкт {{jsxref("Date")}} також змінюється на місці).

+ +

Опис

+ +

Якщо значення dayValue знаходиться за межами значень діапазону днів місяця, setDate() оновить об'єкт {{jsxref("Date")}} відповідно.

+ +

Наприклад, якщо для dayValue надано 0, дата буде встановлена останнім днем попереднього місяця.

+ +

Якщо для dayValue надане від'ємне число, дата присвоїться зворотнім відліком від останнього дня попереднього місяця. -1 поверне дату, що на 1 день менша за останній день попереднього місяця.

+ +

Приклади

+ +

Використання setDate()

+ +
var theBigDay = new Date(1962, 6, 7); // 1962-07-07 (7 липня 1962)
+theBigDay.setDate(24);  // 1962-07-24 (24 липня 1962)
+theBigDay.setDate(32);  // 1962-08-01 (1 серпня 1962)
+theBigDay.setDate(22);  // 1962-08-22 (22 серпня 1962)
+theBigDay.setDate(0);   // 1962-07-31 (31 липня 1962)
+theBigDay.setDate(98);  // 1962-10-06 (6 жовтня 1962)
+theBigDay.setDate(-50); // 1962-08-11 (11 серпня 1962)
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setDate")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html new file mode 100644 index 0000000000..9eb3d1c695 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html @@ -0,0 +1,77 @@ +--- +title: Date.prototype.setFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +--- +
{{JSRef}}
+ +

Метод setFullYear() встановлює повне значення року вказаній даті згідно з місцевим часом. Повертає нову часову мітку.

+ +
{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}
+ + + +

Синтаксис

+ +
dateObj.setFullYear(yearValue[, monthValue[, dateValue]])
+ +

Параметри

+ +
+
yearValue
+
Ціле число, що передає числове значення року, наприклад, 1995.
+
monthValue
+
Необов'язковий. Ціле число між 0 та 11, що відображає місяці з січня по грудень.
+
dateValue
+
Необов'язковий. Ціле число між 1 та 31, що відображає день місяця. Якщо ви вказуєте параметр dateValue, ви повинні також вказати monthValue.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметри monthValue та dateValue, використовуються значення, що повертають методи {{jsxref("Date.prototype.getMonth()", "getMonth()")}} та {{jsxref("Date.prototype.getDate()", "getDate()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setFullYear() пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вказуєте 15 в якості monthValue, рік збільшується на 1 (yearValue + 1), а 3 використовується як значення місяця.

+ +

Приклади

+ +

Використання setFullYear()

+ +
var theBigDay = new Date();
+theBigDay.setFullYear(1997);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setFullYear")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/sethours/index.html b/files/uk/web/javascript/reference/global_objects/date/sethours/index.html new file mode 100644 index 0000000000..8c63be9bb4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/sethours/index.html @@ -0,0 +1,82 @@ +--- +title: Date.prototype.setHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/setHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours +--- +
{{JSRef}}
+ +

Метод setHours() встановлює години вказаної дати згідно з місцевим часом та повертає кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та часом у оновленому екземплярі {{jsxref("Date")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-sethours.html")}}
+ + + +

Синтаксис

+ +
dateObj.setHours(hoursValue[, minutesValue[, secondsValue[, msValue]]])
+ +

Версії до JavaScript 1.3

+ +
dateObj.setHours(hoursValue)
+ +

Параметри

+ +
+
hoursValue
+
В ідеалі, ціле число між 0 та 23, що відображає години. Якщо надано значення, більше за 23, дата та час будуть збільшені на додаткові години.
+
minutesValue
+
Необов'язковий. В ідеалі, ціле число між 0 та 59, що відображає хвилини. Якщо надано значення, більше за 59, дата та час будуть збільшені на додаткові хвилини.
+
secondsValue
+
Необов'язковий. В ідеалі, ціле число між 0 та 59, що відображає секунди. Якщо надано значення, більше за 59, дата та час будуть збільшені на додаткові секунди. Якщо ви вказуєте параметр secondsValue, ви також повинні вказати minutesValue.
+
msValue
+
Необов'язковий. В ідеалі, ціле число між 0 та 999, що відображає мілісекунди. Якщо надано значення, більше за 999, дата та час будуть збільшені на додаткові мілісекунди. Якщо ви вказуєте параметр msValue, ви також повинні вказати minutesValue та secondsValue.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметри minutesValue, secondsValue та msValue, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} та {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setHours() пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості secondsValue, хвилини будуть збільшені на 1 (minutesValue + 1), а 40 буде значенням секунд.

+ +

Приклади

+ +

Використання setHours()

+ +
var theBigDay = new Date();
+theBigDay.setHours(7);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setHours")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html new file mode 100644 index 0000000000..5cdcd65fa9 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html @@ -0,0 +1,70 @@ +--- +title: Date.prototype.setMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +--- +
{{JSRef}}
+ +

Метод setMilliseconds() встановлює мілісекунди у вказаній даті згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}
+ + + +

Синтаксис

+ +
dateObj.setMilliseconds(millisecondsValue)
+ +

Параметри

+ +
+
millisecondsValue
+
Число між 0 та 999, що відображає мілісекунди.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви вказуєте число, що знаходиться за межами очікуваного діапазону, інформація про дату у об'єкті {{jsxref("Date")}} оновлюється відповідно. Наприклад, якщо ви вкажете 1005, кількість секунд збільшиться на 1, а 5 буде значенням мілісекунд.

+ +

Приклади

+ +

Використання setMilliseconds()

+ +
var theBigDay = new Date();
+theBigDay.setMilliseconds(100);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setMilliseconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html new file mode 100644 index 0000000000..8dae7118e8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html @@ -0,0 +1,80 @@ +--- +title: Date.prototype.setMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +--- +
{{JSRef}}
+ +

Метод setMinutes() встановлює хвилини для вказаної дати згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}
+ + + +

Синтаксис

+ +
dateObj.setMinutes(minutesValue[, secondsValue[, msValue]])
+ +

Версії до JavaScript 1.3

+ +
dateObj.setMinutes(minutesValue)
+ +

Параметри

+ +
+
minutesValue
+
Ціле число між 0 та 59, що відображає хвилини.
+
secondsValue
+
Необов'язковий. Ціле число між 0 та 59, що відображає секунди.
+
msValue
+
Необов'язковий. Ціле число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр msValue, ви також повинні вказати secondsValue.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметри secondsValue та msValue, використовуються значення, що повертають методи {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} та {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setMinutes() пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості secondsValue, хвилини будуть збільшені на 1 (minutesValue + 1), а 40 буде значенням секунд.

+ +

Приклади

+ +

Використання setMinutes()

+ +
var theBigDay = new Date();
+theBigDay.setMinutes(45);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setMinutes")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html new file mode 100644 index 0000000000..6776be81f5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.setMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth +--- +
{{JSRef}}
+ +

Метод setMonth() встановлює місяць для вказаної дати згідно зі встановленим значенням року.

+ +
{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}
+ +

Синтаксис

+ +
dateObj.setMonth(monthValue[, dayValue])
+ +

Версії до JavaScript 1.3

+ +
dateObj.setMonth(monthValue)
+ +

Параметри

+ +
+
monthValue
+
Ціле число на основі нуля, що позначає зсув у місяцях від початку року. Отже, 0 позначає січень, 11 - грудень, -1 позначає грудень попереднього року, а 12 - січень наступного року.
+
dayValue
+
Необов'язковий. Ціле число від 1 до 31, що позначає день місяця.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметр dayValue, використовується значення, яке повертає метод {{jsxref("Date.prototype.getDate()", "getDate()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setMonth() пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості monthValue, рік буде збільшений на 1, а 3 буде значенням місяця.

+ +

Поточний день місяця впливатиме на поведінку цього методу. Концептуально, він додасть кількість днів, надану поточним значенням дня місяця, до першого дня нового місяця, вказаного у параметрі, щоб повернути нову дату. Наприклад, якщо існуючим значенням є 31-ше серпня 2016, виклик setMonth зі значенням 1 поверне 2 березня 2016. Все тому, що у лютому 2016 було 29 днів.

+ +

Приклади

+ +

Використання setMonth()

+ +
var theBigDay = new Date();
+theBigDay.setMonth(6);
+
+// Стережіться переходів у кінці місяця
+var endOfMonth = new Date(2016, 7, 31);
+endOfMonth.setMonth(1);
+console.log(endOfMonth); //Wed Mar 02 2016 00:00:00
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setMonth")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html new file mode 100644 index 0000000000..7940ff72b8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html @@ -0,0 +1,78 @@ +--- +title: Date.prototype.setSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +--- +
{{JSRef}}
+ +

Метод setSeconds() встановлює секунди для вказаної дати згідно з місцевим часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}
+ + + +

Синтаксис

+ +
dateObj.setSeconds(secondsValue[, msValue])
+ +

Версії до JavaScript 1.3

+ +
dateObj.setSeconds(secondsValue)
+ +

Параметри

+ +
+
secondsValue
+
Ціле число між 0 та 59, що відображає секунди.
+
msValue
+
Необов'язковий. Число між 0 та 999, що відображає мілісекунди.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметр msValue, використовується значення, яке повертає метод {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setSeconds() пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості secondsValue, хвилини у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 40 буде значенням секунд.

+ +

Приклади

+ +

Використання setSeconds()

+ +
var theBigDay = new Date();
+theBigDay.setSeconds(30);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setSeconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/settime/index.html b/files/uk/web/javascript/reference/global_objects/date/settime/index.html new file mode 100644 index 0000000000..a7ef57235d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/settime/index.html @@ -0,0 +1,71 @@ +--- +title: Date.prototype.setTime() +slug: Web/JavaScript/Reference/Global_Objects/Date/setTime +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime +--- +
{{JSRef}}
+ +

Метод setTime() встановлює об'єкту {{jsxref("Date")}} час, переданий кількістю мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-settime.html")}}
+ + + +

Синтаксис

+ +
dateObj.setTime(timeValue)
+ +

Параметри

+ +
+
timeValue
+
Ціле число, що відображає кільксть мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датой (власне, значення аргументу).

+ +

Опис

+ +

Використовуйте setTime(), щоб присвоїти дату та час іншому об'єкту {{jsxref("Date")}}.

+ +

Приклади

+ +

Застосування setTime()

+ +
var theBigDay = new Date('July 1, 1999');
+var sameAsBigDay = new Date();
+sameAsBigDay.setTime(theBigDay.getTime());
+
+ +

Специфікації

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setTime")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html new file mode 100644 index 0000000000..10cd4fabd6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html @@ -0,0 +1,70 @@ +--- +title: Date.prototype.setUTCDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +--- +
{{JSRef}}
+ +

Метод setUTCDate() встановлює день місяця для вказаної дати згідно зі всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}
+ + + +

Синтаксис

+ +
dateObj.setUTCDate(dayValue)
+ +

Параметри

+ +
+
dayValue
+
Ціле число від 1 до 31, що відображає день місяця.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setUTCDate() пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 40 в якості dayValue, а значенням місяця у об'єкті {{jsxref("Date")}} є червень, день буде змінений на 10, а місяць буде збільшений до липня.

+ +

Приклади

+ +

Використання setUTCDate()

+ +
var theBigDay = new Date();
+theBigDay.setUTCDate(20);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setUTCDate")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html new file mode 100644 index 0000000000..7a95d10e06 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html @@ -0,0 +1,76 @@ +--- +title: Date.prototype.setUTCFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +--- +
{{JSRef}}
+ +

Метод setUTCFullYear() встановлює повне значення року для вказаної дати згідно зі всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}
+ + + +

Синтаксис

+ +
dateObj.setUTCFullYear(yearValue[, monthValue[, dayValue]])
+ +

Параметри

+ +
+
yearValue
+
Ціле число, що вказує числове значення року, наприклад, 1995.
+
monthValue
+
Необов'язковий. Ціле число між 0 та 11, що відображає місяці з січня по грудень.
+
dayValue
+
Необов'язковий. Ціле число між 1 та 31, що відображає день місяця. Якщо ви вказуєте параметр dayValue, ви повинні також вказати monthValue.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметри monthValue та dayValue, використовуються значення, що повертають методи {{jsxref("Date.prototype.getUTCMonth()", "getUTCMonth()")}} та {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setUTCFullYear() пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості monthValue, рік буде збільшений на 1 (yearValue + 1), а 3 буде значенням місяця.

+ +

Приклади

+ +

Використання setUTCFullYear()

+ +
var theBigDay = new Date();
+theBigDay.setUTCFullYear(1997);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setUTCFullYear")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html b/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html new file mode 100644 index 0000000000..d5a0a800f3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html @@ -0,0 +1,78 @@ +--- +title: Date.prototype.setUTCHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +--- +
{{JSRef}}
+ +

Метод setUTCHours() встановлює години для вказаної дати згідно зі всесвітнім часом та повертає кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC до часу, представленого оновленим екземпляром {{jsxref("Date")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}
+ + + +

Синтаксис

+ +
dateObj.setUTCHours(hoursValue[, minutesValue[, secondsValue[, msValue]]])
+ +

Параметри

+ +
+
hoursValue
+
Ціле число між 0 та 23, що відображає години.
+
minutesValue
+
Необов'язковий. Ціле число між 0 та 59, що відображає хвилини.
+
secondsValue
+
Необов'язковий. Ціле число між 0 та 59, що відображає секунди. Якщо ви вказуєте параметр secondsValue, ви також повинні вказати minutesValue.
+
msValue
+
Необов'язковий. Число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр msValue, ви повинні також вказати minutesValue та secondsValue.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметри minutesValue, secondsValue та msValue, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} та {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setUTCHours() пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості secondsValue, хвилини будуть збільшені на 1 (minutesValue + 1), а 40 буде значенням секунд.

+ +

Приклади

+ +

Використання setUTCHours()

+ +
var theBigDay = new Date();
+theBigDay.setUTCHours(8);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setUTCHours")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html new file mode 100644 index 0000000000..bcdc48d289 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html @@ -0,0 +1,70 @@ +--- +title: Date.prototype.setUTCMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +--- +
{{JSRef}}
+ +

Метод setUTCMilliseconds() встановлює мілісекунди для вказаної дати згідно зі всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}
+ + + +

Синтаксис

+ +
dateObj.setUTCMilliseconds(millisecondsValue)
+ +

Параметри

+ +
+
millisecondsValue
+
Число між 0 та 999, що відображає мілісекунди.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setUTCMilliseconds() пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 1100 в якості millisecondsValue, секунди у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 100 буде значенням мілісекунд.

+ +

Приклади

+ +

Використання setUTCMilliseconds()

+ +
var theBigDay = new Date();
+theBigDay.setUTCMilliseconds(500);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html new file mode 100644 index 0000000000..5f1ff13d74 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html @@ -0,0 +1,76 @@ +--- +title: Date.prototype.setUTCMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +--- +
{{JSRef}}
+ +

Метод setUTCMinutes() встановлює хвилини для вказаної дати згідно зі всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}
+ + + +

Синтаксис

+ +
dateObj.setUTCMinutes(minutesValue[, secondsValue[, msValue]])
+ +

Параметри

+ +
+
minutesValue
+
Ціле число між 0 та 59, що відображає хвилини.
+
secondsValue
+
Необов'язковий. Ціле число між 0 та 59, що відображає секунди.
+
msValue
+
Необов'язковий. Число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр msValue, ви також повинні вказати параметр secondsValue.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметри secondsValue та msValue, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} та {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setUTCMinutes() пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості secondsValue, хвилини будуть збільшені на 1 (minutesValue + 1), а 40 буде значенням секунд.

+ +

Приклади

+ +

Використання setUTCMinutes()

+ +
var theBigDay = new Date();
+theBigDay.setUTCMinutes(43);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setUTCMinutes")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html new file mode 100644 index 0000000000..75e684e958 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.setUTCMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +--- +
{{JSRef}}
+ +

Метод setUTCMonth() встановлює місяць для вказаної дати згідно зі всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}
+ + + +

Синтаксис

+ +
dateObj.setUTCMonth(monthValue[, dayValue])
+ +

Параметри

+ +
+
monthValue
+
Ціле число між 0 та 11, що відображає місяці з січня по грудень.
+
dayValue
+
Необов'язковий. Ціле число з 1 по 31, що відображає день місяця.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо ви не вказуєте параметр dayValue, буде використане значення, що повертає метод {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setUTCMonth() пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості monthValue, рік буде збільшений на 1, а 3 буде значенням місяця.

+ +

Приклади

+ +

Використання setUTCMonth()

+ +
var theBigDay = new Date();
+theBigDay.setUTCMonth(11);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setUTCMonth")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html new file mode 100644 index 0000000000..b00f94ca28 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.setUTCSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +--- +
{{JSRef}}
+ +

Метод setUTCSeconds() встановлює секунди для вказаної дати згідно зі всесвітнім часом.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}
+ + + +

Синтаксис

+ +
dateObj.setUTCSeconds(secondsValue[, msValue])
+ +

Параметри

+ +
+
secondsValue
+
Ціле число між 0 та 59, що відображає секунди.
+
msValue
+
Необов'язковий. Число між 0 та 999, що відображає мілісекунди.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленим часом.

+ +

Опис

+ +

Якщо ви не вказуєте параметр msValue, буде використане значення, що повертає метод {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

+ +

Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, setUTCSeconds() пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості secondsValue, хвилини у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 40 буде значенням секунд.

+ +

Приклади

+ +

Використання setUTCSeconds()

+ +
var theBigDay = new Date();
+theBigDay.setUTCSeconds(20);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setUTCSeconds")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/setyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setyear/index.html new file mode 100644 index 0000000000..806d80f3d6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setyear/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.setYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setYear +tags: + - Date + - JavaScript + - Довідка + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод setYear() встановлює рік для вказаної дати згідно з місцевим часом. Оскільки setYear() не встановлює повне значення року ("проблема 2000 року"), він більше не використовується та був замінений на метод {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.

+ +

Синтаксис

+ +
dateObj.setYear(yearValue)
+ +

Параметри

+ +
+
yearValue
+
Ціле число.
+
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.

+ +

Опис

+ +

Якщо yearValue є числом між 0 та 99 (включно), тоді рік для dateObj встановлюється як 1900 + yearValue. Інакше, рік для dateObj встановлюється як yearValue.

+ +

Приклади

+ +

Використання setYear()

+ +

Перші два рядки встановлюють значенням року 1996. Третій встановлює рік 2000.

+ +
var theBigDay = new Date();
+
+theBigDay.setYear(96);
+theBigDay.setYear(1996);
+theBigDay.setYear(2000);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.setYear")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html b/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html new file mode 100644 index 0000000000..385c08865c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.toDateString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString +--- +
{{JSRef}}
+ +

Метод toDateString() повертає елементи дати об'єкта {{jsxref("Date")}}, англійською мовою, у наступному форматі, розділені пробілами:

+ +
    +
  1. Перші три літери назви дня тижня
  2. +
  3. Перші три літери назви місяця
  4. +
  5. Двозначний день місяця, заповнений зліва нулем за необхідності
  6. +
  7. Чотиризначне (принаймні) значення року, заповнене зліва нулями за необхідності
  8. +
+ +

Приклад: "Thu Jan 01 1970".

+ +
{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}
+ + + +

Синтаксис

+ +
dateObj.toDateString()
+ +

Повертає

+ +

Рядкове відображення елементів дати наданого об'єкта {{jsxref("Date")}} у читабельній формі англійською мовою.

+ +

Опис

+ +

Екземпляри {{jsxref("Date")}} відображають конкретну точку в часі. Виклик {{jsxref("Date.prototype.toString()", "toString()")}} поверне дату, відформатовану у читабельній для людини формі англійською мовою. У SpiderMonkey вона складається з елементів дати (день, місяць та рік), за якими йдуть елементи часу (години, хвилини, секунди та часовий пояс). Іноді необхідно отримати рядок, що містить час; це можна зробити за допомогою методу toTimeString().

+ +

Метод toDateString() є особливо корисним, оскільки сумісні рушії, що реалізують ECMA-262, можуть відрізнятись у тому, які рядки повертає метод {{jsxref("Date.prototype.toString()", "toString()")}} для об'єктів {{jsxref("Date")}}, оскільки формат є залежним від реалізації, і прості методи обрізання рядків можуть не створити сумісні результати на різних рушіях.

+ +

Приклади

+ +

Базове використання toDateString()

+ +
var d = new Date(1993, 5, 28, 14, 39, 7);
+
+console.log(d.toString());     // виводить Mon Jun 28 1993 14:39:07 GMT+0300 (Eastern European Summer Time)
+console.log(d.toDateString()); // виводить Mon Jun 28 1993
+
+ +
+

Заувага: Місяці нумеруються з 0, коли використовуються в якості аргументу {{jsxref("Date")}} (тому 0 відповідає січню, а 11 - грудню).

+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toDateString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html new file mode 100644 index 0000000000..a2f855e80f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html @@ -0,0 +1,64 @@ +--- +title: Date.prototype.toGMTString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toGMTString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод toGMTString() перетворює дату на рядок, використовуючи Інтернет-конвенції Середнього часу за Гринвічем (англ. Greenwich Mean Time, GMT). Точний формат значення, що повертає toGMTString(), може різнитись, в залежності від платформи та переглядача, загалом, він має відображати зручний для читання рядок дати.

+ +
+

Заувага: метод toGMTString() застарів та більше не рекомендований для використання. Він залишається доступним лише для зворотної сумісності; будь ласка, використовуйте натомість {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.

+
+ +

Синтаксис

+ +
dateObj.toGMTString()
+ +

Повертає

+ +

Рядкове відображення наданої дати згідно з Інтернет-конвенціями Середнього часу за Гринвічем (GMT).

+ +

Приклади

+ +

Простий приклад

+ +

У цьому прикладі метод toGMTString() перетворює дату на GMT (UTC) за допомогою зсуву часового поясу операційної системи та повертає рядкове значення схожої форми. Точний формат залежить від платформи.

+ +
var today = new Date();
+var str = today.toGMTString();  // не рекомендований! використовуйте toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toGMTString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html b/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html new file mode 100644 index 0000000000..c6aef43afd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html @@ -0,0 +1,93 @@ +--- +title: Date.prototype.toISOString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString +tags: + - Date + - JavaScript + - Довідка + - метод + - поліфіл +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString +--- +
{{JSRef}}
+ +

Метод toISOString() повертає рядок у спрощеному розширеному форматі ISO (ISO 8601), який завжди містить 24 або 27 символів (YYYY-MM-DDTHH:mm:ss.sssZ або ±YYYYYY-MM-DDTHH:mm:ss.sssZ, відповідно). Часовий пояс завжди UTC з нульовим зсувом, що позначається суфіксом "Z".

+ +
{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}
+ + + +

Синтаксис

+ +
dateObj.toISOString()
+ +

Повертає

+ +

Рядкове представлення наданої дати у форматі ISO 8601 згідно зі всесвітнім часом.

+ +

Поліфіл

+ +

Цей метод був стандартизований у 5-й версії ECMA-262. Рушії, що не були оновлені, щоб підтримувати цей метод, можуть обійти його відсутність за допомогою наступного шиму:

+ +
if (!Date.prototype.toISOString) {
+  (function() {
+
+    function pad(number) {
+      if (number < 10) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad(this.getUTCMonth() + 1) +
+        '-' + pad(this.getUTCDate()) +
+        'T' + pad(this.getUTCHours()) +
+        ':' + pad(this.getUTCMinutes()) +
+        ':' + pad(this.getUTCSeconds()) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  })();
+}
+
+ +

Приклади

+ +

Використання toISOString()

+ +
let today = new Date('05 October 2011 14:48 UTC')
+
+console.log(today.toISOString())  // Повертає 2011-10-05T14:48:00.000Z
+
+ +

Наведений вище приклад використовує розбір нестандартного рядкового значення, яке, можливо, не буде коректно розібране у не Mozilla-переглядачах.

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toISOString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/tojson/index.html b/files/uk/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..6e03a8664e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,69 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON +tags: + - Date + - JavaScript + - Method + - Prototype + - Дата + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +
{{JSRef}}
+ +

Метод toJSON() подає об'єкт {{jsxref("Date")}} у вигляді рядка.

+ +

{{EmbedInteractiveExample("pages/js/date-tojson.html")}}

+ + + +

Синтаксис

+ +
dateObj.toJSON()
+ +

Вертає

+ +

Рядок, що містить текстовий запис зазначеної дати.

+ +

Опис

+ +

Кожний об'єкт {{jsxref("Date")}} позначає певну мить у часі. Виклик toJSON() вертає рядок (за допомогою {{jsxref("Date.prototype.toISOString()", "toISOString()")}}), що являє собою текстовий запис дати, яку позначає об'єкт {{jsxref("Date")}}. Зазвичай цей метод вживається для перетворення об'єктів на текст упродовж серіалізації у {{Glossary("JSON")}}.

+ +

Приклади

+ +

Використання toJSON()

+ +
var jsonDate = (new Date()).toJSON();
+var backToDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toJSON")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html new file mode 100644 index 0000000000..6f60fe1595 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html @@ -0,0 +1,154 @@ +--- +title: Date.prototype.toLocaleDateString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +tags: + - Date + - JavaScript + - Інтернаціоналізація + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +--- +
{{JSRef}}
+ +

Метод toLocaleDateString() повертає рядкове представлення елементів дати у відповідності до налаштувань мови. Нові аргументи locales та options дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись, а також дозволяють налаштовувати поведінку функції. У старших реалізаціях, що ігнорують аргументи locales та options, мовні налаштування та форма рядка, що повертається, повністю залежать від реалізації.

+ +
{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}
+ + + +

Синтаксис

+ +
dateObj.toLocaleDateString([locales [, options]])
+ +

Параметри

+ +

Аргументи locales та options налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи locales та options, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.

+ +

Дивіться конструктор Intl.DateTimeFormat(), щоб дізнатись подробиці щодо цих параметрів та їхнього використання.

+ +

Значенням за замовчуванням для кожної властивості компонента дати-часу є {{jsxref("undefined")}}, але, якщо властивості weekday, year, month, day усі дорівнюють {{jsxref("undefined")}}, тоді year, month та day вважаються числовими значеннями.

+ +

Повертає

+ +

Рядкове відображення елементів дати наданого екземпляра {{jsxref("Global_Objects/Date", "Date")}} у відповідності до налаштувань мови.

+ +

Швидкодія

+ +

При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.

+ +

Приклади

+ +

Використання toLocaleDateString()

+ +

При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.

+ +
var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleDateString() без аргументів залежить від реалізації,
+// мова та часовий пояс за замовчуванням
+console.log(date.toLocaleDateString());
+// → "12/11/2012" при використанні мови en-US з часовим поясом America/Los_Angeles
+
+ +

Перевірка підтримки аргументів locales та options

+ +

Аргументи locales та options ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:

+ +
function toLocaleDateStringSupportsLocales() {
+  try {
+    new Date().toLocaleDateString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+
+ +

Використання locales

+ +

Цей приклад демонструє деякі варіації локалізованих форматів дат. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу locales:

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// наведені приклади припускають використання локального часового поясу для мови;
+// для US це America/Los_Angeles
+
+// В американській англійській використовується порядок місяць-день-рік
+console.log(date.toLocaleDateString('en-US'));
+// → "12/19/2012"
+
+// У британській англійській використовується порядок день-місяць-рік
+console.log(date.toLocaleDateString('en-GB'));
+// → "20/12/2012"
+
+// Корейська мова використовує порядок рік-місяць-день
+console.log(date.toLocaleDateString('ko-KR'));
+// → "2012. 12. 20."
+
+// Подія для перської, важко вручну привести дату до календаря сонячної хіджри
+console.log(date.toLocaleDateString('fa-IR'));
+// → "۱۳۹۱/۹/۳۰"
+
+// Арабська у більшості арабськомовних країн використовує справжні арабські цифри
+console.log(date.toLocaleDateString('ar-EG'));
+// → "٢٠‏/١٢‏/٢٠١٢"
+
+// для японської мови застосунки можуть використати японський календар,
+// де 2012-й був 24-м роком епохи Хейсей
+console.log(date.toLocaleDateString('ja-JP-u-ca-japanese'));
+// → "24/12/20"
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(date.toLocaleDateString(['ban', 'id']));
+// → "20/12/2012"
+ +

Використання options

+ +

Результат методу toLocaleDateString() можна налаштувати за допомогою аргументу options:

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// вивести день тижня разом з довгою датою
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleDateString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// застосунок може використати час UTC, так, щоб це було видно
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleDateString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+
+ +

Специфікації

+ + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}
{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toLocaleDateString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html new file mode 100644 index 0000000000..292dc6472f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html @@ -0,0 +1,178 @@ +--- +title: Date.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +tags: + - Date + - JavaScript + - Інтернаціоналізація + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +--- +
{{JSRef}}
+ +

Метод toLocaleString() повертає рядкове представлення дати згідно налаштувань мови.

+ +

Нові аргументи locales та options дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись та налаштовувати поведінку функції.

+ +

У старших реалізаціях, які ігнорують аргументи locales та options, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.

+ +
{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}
+ + + +

Синтаксис

+ +
dateObj.toLocaleString([locales[, options]])
+ +

Параметри

+ +

Аргументи locales та options налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи locales та options, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.

+ +

Дивіться конструктор {{jsxref("DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.

+ +

Значенням за замовчуванням для кожної властивості компонента дати-часу є {{jsxref("undefined")}}. Але, якщо властивості weekday, year, month, day усі дорівнюють {{jsxref("undefined")}}, тоді year, month, та day вважаються числовими значеннями.

+ +

Повертає

+ +

Рядкове представлення наданої дати згідно правил встановленої мови.

+ +

Швидкодія

+ +

При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.

+ +

Приклади

+ +

Використання toLocaleString()

+ +

При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.

+ +
let date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleString() без аргументів залежить від реалізації,
+// мова та часовий пояс за замовчуванням
+console.log(date.toLocaleString());
+// → "12/11/2012, 7:00:00 PM" при використанні мови en-US з часовим поясом America/Los_Angeles
+
+ +

Перевірка підтримки аргументів locales та options

+ +

Аргументи locales та options ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:

+ +
function toLocaleStringSupportsLocales() {
+  try {
+    new Date().toLocaleString('i');
+  } catch (e) {
+    return e instanceof RangeError;
+  }
+  return false;
+}
+
+ +

Використання locales

+ +

Цей приклад демонструє деякі варіації локалізованих форматів дати та часу. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу locales:

+ +
let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// наведені приклади припускають використання локального часового поясу для мови;
+// для US це America/Los_Angeles
+
+// американська англійська використовує порядок місяць-день-рік та 12-годинний формат часу з AM/PM
+console.log(date.toLocaleString('en-US'));
+// → "12/19/2012, 7:00:00 PM"
+
+// британська англійська використовує порядок день-місяць-рік та 24-годинний формат часу без AM/PM
+console.log(date.toLocaleString('en-GB'));
+// → "20/12/2012 03:00:00"
+
+// корейська мова використовує порядок рік-місяць-день та 12-годинний формат часу з AM/PM
+console.log(date.toLocaleString('ko-KR'));
+// → "2012. 12. 20. 오후 12:00:00"
+
+// арабська у більшості арабськомовних країн використовує справжні арабські цифри
+console.log(date.toLocaleString('ar-EG'));
+// → "٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص"
+
+// для японської мови застосунки можуть використати японський календар,
+// де 2012-й був 24-м роком епохи Хейсей
+console.log(date.toLocaleString('ja-JP-u-ca-japanese'));
+// → "24/12/20 12:00:00"
+
+// При запиті мови, яка, можливо, не підтримується, наприклад
+// балійської, додайте запасні мови (в даному випадку це індонезійська)
+console.log(date.toLocaleString(['ban', 'id']));
+// → "20/12/2012 11.00.00"
+ +

Використання options

+ +

Результат методу toLocaleString() можна налаштувати за допомогою аргументу options:

+ +
let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// вивести день тижня разом з довгою датою
+let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+
+console.log(date.toLocaleString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// застосунок може використати час UTC, так, щоб це було видно
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+
+console.log(date.toLocaleString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+
+// іноді навіть в американській англійській потрібен 24-годинний час
+console.log(date.toLocaleString('en-US', { hour12: false }));
+// → "12/19/2012, 19:00:00"
+
+ +

Уникайте порівнювати відформатовану дату зі статичними значеннями

+ +

Як правило, відформатовані значення, що повертає метод toLocaleString(), сумісні між собою. Однак, це може змінитись у майбутньому, і не гарантовано для усіх мов; варіації у форматах виводу визначаються дизайном та дозволені специфікацією.

+ +

З найбільш помітного, переглядачі IE та Edge вставляють двонаправлені керівні символи навколо дат, щоб виведений текст правильно поєднувався з іншим текстом.

+ +

З цієї причини ви не можете гарантовано порівняти результати toLocaleString() зі статичним значенням:

+ +
"1/1/2019, 01:00:00" === new Date("2019-01-01T01:00:00Z").toLocaleString("en-US");
+// true у Firefox та інших
+// false у IE та Edge
+ +
+

Заувага: Більше подробиць та прикладів дивіться у цьому обговоренні на StackOverflow.

+
+ +

Специфікації

+ + + + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}
{{SpecName('ES Int Draft', '#sup-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toLocaleString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html new file mode 100644 index 0000000000..b94070a1fd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html @@ -0,0 +1,152 @@ +--- +title: Date.prototype.toLocaleTimeString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +tags: + - Date + - JavaScript + - Інтернаціоналізація + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +--- +
{{JSRef}}
+ +

Метод toLocaleTimeString() повертає рядкове представлення елементів часу наданої дати згідно налаштувань мови. Нові аргументи locales та options дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись, а також дозволяють налаштовувати поведінку функції. У старших реалізаціях, що ігнорують аргументи locales та options, мовні налаштування та форма рядка, що повертається, повністю залежать від реалізації.

+ +
{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}
+ + + +

Синтаксис

+ +
dateObj.toLocaleTimeString([locales[, options]])
+ +

Параметри

+ +

Аргументи locales та options налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи locales та options, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.

+ +

Дивіться конструктор {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.

+ +

Значенням за замовчуванням для кожної властивості компонента дати-часу є undefined, але, якщо властивості hour, minute, second усі дорівнюють {{jsxref("undefined")}}, тоді hourminute та second вважаються числовими значеннями.

+ +

Повертає

+ +

Рядкове відображення елементів часу наданого екземпляра {{jsxref("Global_Objects/Date", "Date")}} згідно правил встановленої мови.

+ +

Швидкодія

+ +

При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.

+ +

Приклади

+ +

Використання toLocaleTimeString()

+ +

При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.

+ +
var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleTimeString() без аргументів залежить від реалізації,
+// мова та часовий пояс за замовчуванням
+console.log(date.toLocaleTimeString());
+// → "7:00:00 PM" при використанні мови en-US з часовим поясом America/Los_Angeles
+
+ +

Перевірка підтримки аргументів locales та options

+ +

Аргументи locales та options ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:

+ +
function toLocaleTimeStringSupportsLocales() {
+  try {
+    new Date().toLocaleTimeString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+
+ +

Використання locales

+ +

Цей приклад демонструє деякі варіації локалізованих форматів часу. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу locales:

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// наведені приклади припускають використання локального часового поясу для мови;
+// для US це America/Los_Angeles
+
+// американська англійська використовує 12-годинний формат часу з AM/PM
+console.log(date.toLocaleTimeString('en-US'));
+// → "7:00:00 PM"
+
+// британська англійська використовує 24-годинний часовий формат без AM/PM
+console.log(date.toLocaleTimeString('en-GB'));
+// → "03:00:00"
+
+// корейська мова використовує 12-годинний часовий формат з AM/PM
+console.log(date.toLocaleTimeString('ko-KR'));
+// → "오후 12:00:00"
+
+// арабська у більшості арабськомовних країн використовує справжні арабські цифри
+console.log(date.toLocaleTimeString('ar-EG'));
+// → "٧:٠٠:٠٠ م"
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(date.toLocaleTimeString(['ban', 'id']));
+// → "11.00.00"
+
+ +

Використання options

+ +

Результат методу toLocaleTimeString() можна налаштувати за допомогою аргументу options:

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// застосунок може використати час UTC, так, щоб це було видно
+var options = { timeZone: 'UTC', timeZoneName: 'short' };
+console.log(date.toLocaleTimeString('en-US', options));
+// → "3:00:00 AM UTC"
+
+// іноді навіть американській англійській потрібен 24-годинний час
+console.log(date.toLocaleTimeString('en-US', { hour12: false }));
+// → "19:00:00"
+
+// показати лише години та хвилини, використати options та мову за замовчуванням - передати порожній масив
+console.log(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+// → "20:01"
+
+
+ +

Специфікації

+ + + + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}
{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toLocaleTimeString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/tosource/index.html b/files/uk/web/javascript/reference/global_objects/date/tosource/index.html new file mode 100644 index 0000000000..1ac73ec7a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tosource/index.html @@ -0,0 +1,49 @@ +--- +title: Date.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Date/toSource +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод toSource() повертає рядкове представлення першокоду об'єкта.

+ +

Синтаксис

+ +
dateObj.toSource()
+Date.toSource()
+ +

Повертає

+ +

Рядкове представлення першокоду наданого об'єкта {{jsxref("Global_Objects/Date", "Date")}}.

+ +

Приклади

+ +

Вбудована функція

+ +

Для вбудованого об'єкта {{jsxref("Date")}} toSource() повертає наступний рядок, який вказує, що першокод недоступний:

+ +
function Date() {
+    [native code]
+}
+
+ +

Специфікації

+ +

Не є частиною жодного стандарту.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toSource")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/tostring/index.html b/files/uk/web/javascript/reference/global_objects/date/tostring/index.html new file mode 100644 index 0000000000..c3c2c9a0b8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tostring/index.html @@ -0,0 +1,110 @@ +--- +title: Date.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +--- +
{{JSRef}}
+ +

Метод toString() повертає рядкове представлення вказаного об'єкта {{jsxref("Date")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-tostring.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.toString()
+ +

Повертає

+ +

Рядкове представлення наданої дати.

+ +

Опис

+ +

Екземпляри {{jsxref("Date")}} успадковують метод toString() від {{jsxref("Date.prototype")}}, а не від {{jsxref("Object.prototype")}}. Date.prototype.toString() повертає рядкове представлення об'єкта Date у форматі, вказаному у ECMA-262, який можна підсумувати наступним чином:

+ + + +

Приклад: "Sat Sep 01 2018 14:53:26 GMT+1400 (LINT)"

+ +

До появи ECMAScript 2018 (версії 9) формат рядка, який повертав метод Date.prototype.toString, залежав від реалізації. Тому не можна покладатися на те, що рядок буде у вказаному форматі.

+ +

Метод toString() автоматично викликається, коли дата має бути передана у вигляді текстового значення, наприклад, console.log(new Date()), або коли дата використовується в об'єднанні з рядком, як ось var today = 'Сьогодні ' + new Date().

+ +

toString() є загальним методом, він не вимагає, щоб його this був екземпляром {{jsxref("Date")}}. Однак, він повинен мати внутрішню властивість [[TimeValue]], яку неможливо створити за допомогою вбудованих методів javascript, тому він обмежений використанням з екземплярами {{jsxref("Date")}}. Якщо метод викликається не на екземплярі Date, викидається {{jsxref("TypeError")}}.

+ +

Приклади

+ +

Використання toString()

+ +

Наступний код присвоює значення toString() об'єкта {{jsxref("Date")}} змінній myVar:

+ +
var x = new Date();
+var myVar = x.toString(); // присвоює рядкове значення myVar у такому форматі:
+                          // Mon Sep 08 1998 14:36:22 GMT-0700 (PDT)
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html b/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html new file mode 100644 index 0000000000..40f658864c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html @@ -0,0 +1,68 @@ +--- +title: Date.prototype.toTimeString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +--- +
{{JSRef}}
+ +

Метод toTimeString() повертає елементи часу об'єкта {{jsxref("Date")}} у зручній для читання формі англійською мовою.

+ +
{{EmbedInteractiveExample("pages/js/date-totimestring.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.toTimeString()
+ +

Повертає

+ +

Рядкове відображення елементів часу наданої дати у зручній для читання формі англійською мовою.

+ +

Опис

+ +

Екземпляри {{jsxref("Date")}} відображають конкретну точку в часі. Виклик {{jsxref("Date.prototype.toString()", "toString()")}} поверне дату, відформатовану у зручній для читання формі англійською мовою. У SpiderMonkey вона складається з елементів дати (день, місяць та рік), за якими йдуть елементи часу (години, хвилини, секунди та часовий пояс). Іноді необхідно отримати рядок, що містить час; це можна зробити за допомогою методу toTimeString().

+ +

Метод toTimeString() є особливо корисним, оскільки сумісні рушії, що реалізують ECMA-262 можуть відрізнятись у тому, які рядки повертає метод {{jsxref("Date.prototype.toString()", "toString()")}} для об'єктів {{jsxref("Date")}}, оскільки формат є залежним від реалізації, і прості методи обрізання рядків можуть не створити сумісні результати на різних рушіях.

+ +

Приклади

+ +

Базове використання toTimeString()

+ +
var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT)
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toTimeString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html new file mode 100644 index 0000000000..077f04aaad --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html @@ -0,0 +1,109 @@ +--- +title: Date.prototype.toUTCString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +--- +
{{JSRef}}
+ +

Метод toUTCString() перетворює дату на рядок, використовуючи часовий пояс UTC.

+ +

Заснований на rfc7231 та змінений згідно з ecma-262 toUTCString, він може мати від'ємні значення у версії 2021.

+ +
{{EmbedInteractiveExample("pages/js/date-toutcstring.html","shorter")}}
+ + + +

Синтаксис

+ +
dateObj.toUTCString()
+ +

Повертає

+ +

Рядкове представлення наданої дати з використанням часового поясу UTC.

+ +

Опис

+ +

Значення, яке повертає toUTCString(), є рядком у формі Www, dd Mmm yyyy hh:mm:ss GMT, де:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
РядокОпис
WwwДень тижня у вигляді трьох літер (наприклад, Sun, Mon, ...)
ddДвозначний день місяця, з першим нулем, якщо необхідно
MmmМісяць у вигляді трьох літер (наприклад, Jan, Feb, ...)
yyyyРік, чотири або більше цифр, з першими нулями, якщо необхідно
hhГодини, дві цифри з першим нулем, якщо необхідно
mmХвилини, дві цифри з першим нулем, якщо необхідно
ssСекунди, дві цифри з першим нулем, якщо необхідно
+ +

До появи ECMAScript 2018, формат значення, яке поверталось, залежив від платформи. Найпоширенішим варіантом була дата у форматі RFC-1123, що є трохи оновленою версією дати у форматі RFC-822.

+ +

Приклади

+ +

Використання toUTCString()

+ +
let today = new Date('Wed, 14 Jun 2017 00:00:00 PDT');
+let UTCstring = today.toUTCString(); // Wed, 14 Jun 2017 07:00:00 GMT
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.toUTCString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/utc/index.html b/files/uk/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..6abb78eb6d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,153 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Reference/Global_Objects/Date/UTC +tags: + - UTC + - Дата + - Довідка + - Час Unix +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +
{{JSRef}}
+ +

Метод Date.UTC() приймає той самий перелік параметрів, що й найдовша форма конструктора {{jsxref("Date")}}, та повертає кількість мілісекунд між 00:00:00 першого січня 1970 року та миттю у часі (за UTC), що відповідає переданим параметрам.

+ +
{{EmbedInteractiveExample("pages/js/date-utc.html")}}
+ + + +

Синтаксис

+ +
Date.UTC(year, month[, day[, hour[, minute[, second[, millisecond]]]]])
+ +

Параметри

+ +
+
year
+
Ціле число, що позначає рік. Значення в проміжку 0-99 позначає рік 20-го сторіччя (1900-1999), а всі решта значень — як є (абсолютне значення).
+
month
+
Ціле число між 0 та 11, позначає місяць.
+
day {{optional_inline}}
+
Ціле число між 1 та 31, позначає день місяця.
+
hour {{optional_inline}}
+
Ціле число між 0 та 23, позначає годину.
+
minute {{optional_inline}}
+
Ціле число між 0 та 59, позначає хвилини.
+
second {{optional_inline}}
+
Ціле число між 0 та 59, позначає секунди.
+
millisecond {{optional_inline}}
+
Ціле число між 0 та 999, позначає мілісекунди.
+
+ +

Повертає

+ +

Ціле число, що являє собою кількість мілісекунд між 00:00:00 першого січня 1970 року та моментом часу (за UTC), що відповідає переданим параметрам.

+ +

Опис

+ +

Метод приймає параметри, що позначають окремі складники дати й часу, та повертає кількість мілісекунд між північчю (00:00:00) першого січня 1970-го року за UTC та вказаною миттю у часі. Всі дати раніше за точку відліку (перше січня 1970-го року) позначаються від'ємними числами.

+ +

Зауважте, що лік місяців (другий параметр метода) починається з нуля, а не з одиниці.

+ +

Вказуйте повний рік від Різдва Христового; наприклад 1998. Якщо вказано значання між 0 та 99, його буде перетворено на рік 20-го сторіччя (себто 1900 + year); наприклад, 91 позначає 1991 рік.

+ +

Між методом UTC() та конструктором {{jsxref("Date")}} є дві відмінності:

+ + + +
+

Заувага: Якщо значення одного чи декількох вказаних складників виходить за прийнятні межі (скажімо, вказано 13-й місяць чи 70 хвилин), буде скориговано суміжні складники. Себто виклик Date.UTC(2013, 13, 1) є тотожним до Date.UTC(2014, 1, 1) і так само відповідає даті 2014-02-01T00:00:00Z. Те саме стосується інших значень: виразам Date.UTC(2013, 2, 1, 0, 70) та Date.UTC(2013, 2, 1, 1, 10) однаково відповідає дата 2013-03-01T01:10:00Z.

+
+ +

Позаяк UTC() є статичним методом класу {{jsxref("Date")}}, він зазвичай викликається через ім'я класу — Date.UTC(), а не через наявний об'єкт.

+ +

Приклади

+ +

Використання Date.UTC()

+ +

Наведений приклад створює об'єкт типу {{jsxref("Date")}} зі складників дати й часу, що тлумачаться як UTC, а не місцевий час:

+ +
var independenceDateAsMs = Date.UTC(91, 7, 24, 9, 0, 0);
+console.log(independenceDateAsMs);  // 683024400000
+
+var independenceDate = new Date(independenceDateAsMs);
+console.log(independenceDate);  // Sat Aug 24 1991 12:00:00 GMT+0300 (EEST)
+
+ +

Такий приклад засвідчує, що дати раніше точки відліку (північ першого січня 1970-го року) позначаються від'ємними числами:

+ +
var ms = Date.UTC(1969, 11, 31, 23, 59, 59, 999);
+console.log(ms);  // -1
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}{{Spec2('ES5.1')}}
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкова виознака. Запроваджено у JavaScript 1.0.
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.UTC")}}

+ +

Сумісність

+ +

Відсутність обов'язкових аргументів Date.UTC

+ +

За відсутності одного чи обох обов'язкових аргументів метод Date.UTC має повертати {{Glossary("NaN")}}. Така поведінка визначена специфікацією ECMAScript 2017. Web-рушії, які не підтримували цю поведінку, було оновлено (див. {{bug(1050755)}}, ecma-262 #642).

+ +
Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox <54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+
+ +

Див. також

+ + + +

Дізнатись більше

+ + diff --git a/files/uk/web/javascript/reference/global_objects/date/valueof/index.html b/files/uk/web/javascript/reference/global_objects/date/valueof/index.html new file mode 100644 index 0000000000..6a8f4682d5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/valueof/index.html @@ -0,0 +1,65 @@ +--- +title: Date.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf +--- +
{{JSRef}}
+ +

Метод valueOf() повертає просте значення об'єкта {{jsxref("Date")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-valueof.html")}}
+ +

Синтаксис

+ +
dateObj.valueOf()
+ +

Повертає

+ +

Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та наданою датою.

+ +

Опис

+ +

Метод valueOf() повертає просте значення об'єкта {{jsxref("Date")}} у вигляді числового типу, кількість мілісекунд від опівночі 01 січня, 1970 року за UTC.

+ +

Цей метод функціонально еквівалентний методу {{jsxref("Date.prototype.getTime()")}}.

+ +

Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді.

+ +

Приклади

+ +

Використання valueOf()

+ +
var x = new Date(56, 6, 17);
+var myVar = x.valueOf();      // присвоює -424713600000 змінній myVar
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Date.valueOf")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html new file mode 100644 index 0000000000..966facf100 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html @@ -0,0 +1,44 @@ +--- +title: Error.prototype.columnNumber +slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +tags: + - Error + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +--- +
{{JSRef}} {{non-standard_header}}
+ +

Властивість columnNumber містить номер стовпця у рядку файла, який спричинив помилку.

+ +

Приклади

+ +

Використання columnNumber

+ +
var e = new Error('Could not parse input');
+throw e;
+console.log(e.columnNumber) // 0
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Нестандартна властивість.

+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.columnNumber")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/error/index.html b/files/uk/web/javascript/reference/global_objects/error/error/index.html new file mode 100644 index 0000000000..4f16905d5a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/error/index.html @@ -0,0 +1,63 @@ +--- +title: Конструктор Error() +slug: Web/JavaScript/Reference/Global_Objects/Error/Error +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Error +--- +
{{JSRef}}
+ +

Конструктор Error створює об'єкт помилки.

+ +

Синтаксис

+ +
new Error([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message{{Optional_Inline}}
+
Зрозумілий людині опис помилки.
+
fileName {{Non-standard_Inline}}{{Optional_Inline}}
+
Значення властивості fileName створеного об'єкта Error. За замовчуванням містить ім'я файлу, код з якого запустив конструктор Error().
+
lineNumber {{Non-standard_Inline}}{{Optional_Inline}}
+
Значення властивості lineNumber створеного об'єкта Error. За замовчуванням містить номер рядка, де відбувся виклик конструктора Error().
+
+ +

Опис

+ +

Коли Error використовується як функція -- без  {{JSxRef("Operators/new", "new")}}, він повертає об'єкт Error. Таким чином, простий виклик Error матиме той самий результат, що й конструювання об'єкта Error через ключове слово new.

+ +
// це...
+const x = Error('Я був створений викликом функції!')
+
+​​​​// ...має ту саму функціональність, що й це:
+const y = new Error('Я був зконструйований ключовим словом "new"!')
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-error-constructor', 'Error constructor')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Error.Error")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/filename/index.html b/files/uk/web/javascript/reference/global_objects/error/filename/index.html new file mode 100644 index 0000000000..046a345326 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/filename/index.html @@ -0,0 +1,47 @@ +--- +title: Error.prototype.fileName +slug: Web/JavaScript/Reference/Global_Objects/Error/fileName +tags: + - Error + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName +--- +
{{JSRef}} {{non-standard_header}}
+ +

Властивість fileName містить шлях до файлу, який спричинив помилку.

+ +

Опис

+ +

Ця нестандартна властивість містить шлях до файлу, який спричинив дану помилку. При виклику в контексті відладчика, наприклад, у інструментах розробника Firefox, повертається "debugger eval code".

+ +

Приклади

+ +

Використання fileName

+ +
var e = new Error('Could not parse input');
+throw e;
+// e.fileName може виглядати як "file:///C:/example.html"
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Нестандартна властивість.

+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.fileName")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/index.html b/files/uk/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..9df5ca1354 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,216 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Global_Objects/Error +tags: + - Error + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +
{{JSRef}}
+ +

Об'єкти Error викидаються, коли виникає помилка виконання. Об'єкт Error також можна використовувати як базовий об'єкт для винятків, створених користувачем. Дивіться нижче стандартні вбудовані типи помилок.

+ +

Опис

+ +

Помилки виконання спричиняють створення й викидання нових об'єктів Error.

+ +

Типи помилок

+ +

Окрім загального конструктора Error, у JavaScript існують сім інших базових конструкторів помилок. Щодо обробки винятків на боці клієнта, дивіться розділ Оператори обробки винятків.

+ +
+
{{jsxref("EvalError")}}
+
Створює екземпляр помилки, що виникає під час використання глобальної функції {{jsxref("eval", "eval()")}}.
+
{{jsxref("InternalError")}} {{non-standard_inline}}
+
Створює екземпляр помилки, що виникає, коли викидається внутрішня помилка рушія JavaScript. Наприклад, "too much recursion".
+
{{jsxref("RangeError")}}
+
Створює екземпляр помилки, що виникає, коли значення чисельної змінної або параметра знаходиться поза межами дозволеного діапазону.
+
{{jsxref("ReferenceError")}}
+
Створює екземпляр помилки, що виникає при зверненні за недійсним посиланням.
+
{{jsxref("SyntaxError")}}
+
Створює екземпляр синтаксичної помилки, яка виникає під час аналізу коду у {{jsxref("eval", "eval()")}}.
+
{{jsxref("TypeError")}}
+
Створює екземпляр помилки, що виникає при використанні змінної або параметра невідповідного типу.
+
{{jsxref("URIError")}}
+
Створює екземпляр помилки, що виникає, коли до {{jsxref("encodeURI", "encodeURI()")}} або {{jsxref("decodeURI", "decodeURI()")}} передаються неправильні параметри.
+
+ +

Конструктор

+ +
+
Error()
+
Створює об'єкти Error.
+
+ +

Властивості

+ +
+
Error.prototype
+
Дозволяє додавати властивості до екземплярів Error.
+
+ +

Методи

+ +

Глобальний об'єкт Error не має власних методів, однак, він успадковує деякі методи через ланцюжок прототипів.

+ +

Нестандартні методи

+ +

{{Non-standard_Header}}

+ +
+
{{JSxRef("Error.captureStackTrace()")}} {{Non-standard_Inline}}
+
Функція V8, яка створює властивість {{JSxRef("Error.prototype.stack", "stack")}} на екземплярі Error.
+
+ +

Екземпляри Error

+ +
{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Опис')}}
+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Методи')}}
+ +

Приклади

+ +

Викидання загальної помилки

+ +

Зазвичай ви створюєте об'єкт Error для того, щоб викинути його з допомогою ключового слова {{jsxref("Statements/throw", "throw")}}. Ви можете обробити помилку, використовуючи конструкцію {{jsxref("Statements/try...catch", "try...catch")}}:

+ +
try {
+  throw new Error('Ой-ой!');
+} catch (e) {
+  console.error(e.name + ': ' + e.message);
+}
+
+ +

Обробка специфічної помилки

+ +

Ви можете обробляти лише окремі типи помилок, перевіряючи тип помилки з допомогою властивості {{jsxref("Object.prototype.constructor", "constructor")}} або, якщо ви пишете для сучасних рушіїв JavaScript, ключовим словом {{jsxref("Operators/instanceof", "instanceof")}}:

+ +
try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.error(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    console.error(e.name + ': ' + e.message);
+  }
+  // ... і т.д.
+}
+
+ +

Користувацькі типи помилок

+ +

Ви, можливо, захочете визначити свої власні типи помилок, успадкувавши їх від Error, щоб мати можливість викидати новий об'єкт помилки через throw new MyError() та використовувати instanceof MyError для перевірки типу помилки у обробнику винятків. В результаті отримуємо більш чистий та послідовний код обробки помилок. 

+ +

Дивіться всебічну дискусію "What's a good way to extend Error in JavaScript?" на StackOverflow.

+ +

Користувацький клас помилки у ES6

+ +
+

Babel до 7-ї версії може працювати з методами класу CustomError, але тільки якщо вони оголошені через  Object.defineProperty(). Інакше старі версії Babel та інші транспілятори не зможуть коректно обробити наступний код без додаткових налаштувань.

+
+ +
+

Деякі веб-переглядачі включають конструктор CustomError у трасування стеку при використанні класів ES2015.

+
+ +
class CustomError extends Error {
+  constructor(foo = 'bar', ...params) {
+    // Передати залишкові параметри (в тому числі параметри розробника) до батьківського конструктора
+    super(...params)
+
+    // Підтримує правильне трасування стеку в точці, де була викинута помилка (працює лише на V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+
+    this.name = 'CustomError'
+    // Користувацька інформація для налагодження
+    this.foo = foo
+    this.date = new Date()
+  }
+}
+
+try {
+  throw new CustomError('baz', 'bazMessage')
+} catch(e) {
+  console.error(e.name)    //CustomError
+  console.error(e.foo)     //baz
+  console.error(e.message) //bazMessage
+  console.error(e.stack)   //stacktrace
+}
+ +

Користувацький об'єкт помилки у ES5

+ +
+

Всі веб-переглядачі включають конструктор CustomError у трасування стеку при використанні прототипного оголошення.

+
+ +
function CustomError(foo, message, fileName, lineNumber) {
+  var instance = new Error(message, fileName, lineNumber);
+  instance.name = 'CustomError';
+  instance.foo = foo;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if (Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch(e){
+  console.error(e.name); //CustomError
+  console.error(e.foo); //baz
+  console.error(e.message); //bazMessage
+}
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Error")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html b/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html new file mode 100644 index 0000000000..e539638c46 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html @@ -0,0 +1,56 @@ +--- +title: Error.prototype.lineNumber +slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +tags: + - Error + - JavaScript + - Prototype + - Властивість + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +--- +
{{JSRef}} {{non-standard_header}}
+ +

Властивість lineNumber містить номер рядка у файлі, що спричинив помилку.

+ +

Приклади

+ +

Використання lineNumber

+ +
var e = new Error('Could not parse input');
+throw e;
+console.log(e.lineNumber) // 2
+
+ +

Альтернативний приклад використання події error 

+ +
window.addEventListener('error', function(e) {
+  console.log(e.lineNumber); // 5
+});
+var e = new Error('Could not parse input');
+throw e;
+
+ +

Це нестандартна властивість, їй бракує всебічної підтримки. Дивіться таблицю сумісності з браузерами нижче.

+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Нестандартна властивість.

+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.lineNumber")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/message/index.html b/files/uk/web/javascript/reference/global_objects/error/message/index.html new file mode 100644 index 0000000000..318f8eb532 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/message/index.html @@ -0,0 +1,57 @@ +--- +title: Error.prototype.message +slug: Web/JavaScript/Reference/Global_Objects/Error/message +tags: + - Error + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Error/message +--- +
{{JSRef}}
+ +

Властивість message - це зрозумілий людині опис помилки.

+ +

Опис

+ +

Ця властивість містить стислий опис помилки, якщо він був наданий. Рушій SpiderMonkey активно використовує властивість message для винятків. Властивість message у поєднанні з властивістю {{jsxref("Error.prototype.name", "name")}} використовується методом {{jsxref("Error.prototype.toString()")}} для створення рядкового представлення помилки.

+ +

За замовчуванням, властивість message є порожнім рядком, але ця поведінка може бути заміщена, наприклад, передачею повідомлення першим аргументом у {{jsxref("Error", "конструктор Error")}}.

+ +

Приклади

+ +

Викидання користувацької помилки

+ +
var e = new Error('Could not parse input');
+// e.message дорівнює 'Could not parse input'
+throw e;
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}
+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.message")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/name/index.html b/files/uk/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..bf868bf365 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,57 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Reference/Global_Objects/Error/name +tags: + - Error + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +
{{JSRef}}
+ +

Властивість name містить ім'я типу помилки. Початкове значення дорівнює "Error".

+ +

Опис

+ +

За замовчуванням екземплярам {{jsxref("Error")}} надається ім'я "Error". Властивість name, на додаток до властивості {{jsxref("Error.prototype.message", "message")}}, використовується методом {{jsxref("Error.prototype.toString()")}} для створення рядкового представлення помилки.

+ +

Приклади

+ +

Викидання користувацької помилки

+ +
var e = new Error('Malformed input'); // e.name дорівнює 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString() поверне 'ParseError: Malformed input'
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}
+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.name")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/prototype/index.html b/files/uk/web/javascript/reference/global_objects/error/prototype/index.html new file mode 100644 index 0000000000..64c7b5eff5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/prototype/index.html @@ -0,0 +1,114 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Reference/Global_Objects/Error/prototype +tags: + - Error + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +
{{JSRef}}
+ +

Властивість Error.prototype є прототипом для конструктора {{jsxref("Error")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("Error")}} та екземпляри {{jsxref("Global_Objects/Error", "базових конструкторів помилок", "#Типи_помилок", 1)}} успадковуються від Error.prototype. Як в усіх функціях-конструкторах, ви можете використовувати прототип конструктора, щоб додавати властивості чи методи до усіх екземплярів, створених цим конструктором. 

+ +

Властивості

+ +

Стандартні властивості

+ +
+
Error.prototype.constructor
+
Функція, яка створила прототип екземпляра.
+
{{jsxref("Error.prototype.message")}}
+
Повідомлення помилки.
+
{{jsxref("Error.prototype.name")}}
+
Ім'я помилки.
+
+ +

Спеціальні розширення

+ +

{{non-standard_header}}

+ +

Microsoft

+ +
+
Error.description
+
Опис помилки. Властивість схожа на {{jsxref("Error.prototype.message", "message")}}.
+
Error.number
+
Номер помилки.
+
+ +

Mozilla

+ +
+
{{jsxref("Error.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку.
+
{{jsxref("Error.prototype.lineNumber")}}
+
Номер рядка у файлі, що спричинив помилку.
+
{{jsxref("Error.prototype.columnNumber")}}
+
Номер стовпця у файлі, де виникла помилка.
+
{{jsxref("Error.prototype.stack")}}
+
Трасування стеку.
+
+ +

Методи

+ +
+
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає рядок з кодом, що спричинить створення заданого об'єкта {{jsxref("Error")}}; ви можете використати це значення, щоб створити новий об'єкт. Заміщує метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Error.prototype.toString()")}}
+
Повертає рядок, що представляє заданий об'єкт. Заміщує метод {{jsxref("Object.prototype.toString()")}}.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення Реалізовано у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Error.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/stack/index.html b/files/uk/web/javascript/reference/global_objects/error/stack/index.html new file mode 100644 index 0000000000..04bb1ff642 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/stack/index.html @@ -0,0 +1,125 @@ +--- +title: Error.prototype.stack +slug: Web/JavaScript/Reference/Global_Objects/Error/Stack +tags: + - Error + - JavaScript + - Prototype + - Властивість + - нестандартна +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack +--- +
{{JSRef}} {{non-standard_header}}
+ +

Нестандартна властивість stack об'єктів {{jsxref("Error")}} надає звіт про те, які функції були викликані, в якому порядку, з якого рядка файлу та з якими аргументами. Текстовий рядок стеку ведеться з останніх викликів до більш ранніх, і аж до початкового виклику у глобальній області видимості.

+ +

Опис

+ +

Кожний крок буде відокремлений новим рядком, де перша частина є іменем функції (якщо це не виклик з глобальної області видимості), далі через символ (@) розташування файлу (окрім випадку, коли функція є конструктором помилки під час викидання помилки), двокрапка та, якщо доступне розташування файлу, номер рядка. (Зауважте, що об'єкт {{jsxref("Error")}} також має властивості fileName, lineNumber та columnNumber для отримання цієї інформації про помилку, що викидається (але тільки про помилку, а не стек її викликів).)

+ +

Зауважте, що це формат, який використовується у Firefox. Не існує стандартного формату. Однак, Safari 6+ та Opera 12- використовують дуже схожий формат. Переглядачі на рушії JavaScript V8 (такі, як Chrome, Opera 15+, Android Browser) та IE10+, з іншого боку, використовують інший формат (дивіться архів документів MSDN щодо error.stack).

+ +

Значення аргументів у стеку: До версії Firefox 14 після імені функції були б записані значення аргументів, перетворені у рядок, у круглих дужках, одразу перед знаком (@). І якщо об'єкти (або масиви) були б виведені у вигляді "[object Object]", і, таким чином, не могли бути перетворені назад у справжні об'єкти, то скалярні величини можна відновити (хоча, можливо — це досі доступно у Firefox 14 — легше використовувати arguments.callee.caller.arguments, а ім'я функції можна отримати через arguments.callee.caller.name). "undefined" записується як "(void 0)". Зауважте, що, якщо рядкові аргументи були передані з такими символами як "@", "(", ")" (або вони присутні в іменах файлів), на них не можна покладатись для розбиття рядка на окремі частини. Таким чином, у Firefox 14 та пізніших версіях це вже не є такою проблемою.

+ +

Різні веб-переглядачі встановлюють це значення в різні моменти. Наприклад, Firefox встановлює його при створенні об'єкта {{jsxref("Error")}}, в той час як PhantomJS встановлює його лише при викиданні об'єкта {{jsxref("Error")}}, а реалізація у архівних документах MSDN, схоже, співпадає з PhantomJS.

+ +

Приклад

+ +

Наступна HTML-розмітка демонструє використання властивості stack .

+ +
<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Приклад трасування стеку</title>
+<body>
+<script>
+function trace() {
+  try {
+    throw new Error('myError');
+  }
+  catch(e) {
+    alert(e.stack);
+  }
+}
+function b() {
+  trace();
+}
+function a() {
+  b(3, 4, '\n\n', undefined, {});
+}
+a('перший виклик, першийАргумент');
+</script>
+
+ +

За умови, що наведена розмітка збережена як C:\example.html у файловій системі Windows, вона створить діалогове вікно оповіщення з наступним текстом:

+ +

Firefox 30 та новіші містять номер стовпця:

+ +
trace@file:///C:/example.html:9:17
+b@file:///C:/example.html:16:13
+a@file:///C:/example.html:19:13
+@file:///C:/example.html:21:9
+ +

З Firefox 14 по Firefox 29:

+ +
trace@file:///C:/example.html:9
+b@file:///C:/example.html:16
+a@file:///C:/example.html:19
+@file:///C:/example.html:21
+ +

Firefox 13 та старші натомість виведуть наступний текст:

+ +
Error("myError")@:0
+trace()@file:///C:/example.html:9
+b(3,4,"\n\n",(void 0),[object Object])@file:///C:/example.html:16
+a("перший виклик, першийАргумент")@file:///C:/example.html:19
+@file:///C:/example.html:21
+ +

Стек коду у eval() та Function()

+ +

Починаючи з Firefox 30, стек помилки коду у викликах Function() та eval() тепер створює звіти з більш детальною інформацією щодо номеру рядків та стовпчиків у цих викликах. Виклики Function позначаються записом "> Function", а виклики eval записом "> eval".

+ +
try {
+  new Function('throw new Error()')();
+} catch (e) {
+  console.log(e.stack);
+}
+
+// anonymous@file:///C:/example.html line 7 > Function:1:1
+// @file:///C:/example.html:7:6
+
+
+try {
+  eval("eval('FAIL')");
+} catch (x) {
+  console.log(x.stack);
+}
+
+// @file:///C:/example.html line 7 > eval line 1 > eval:1:1
+// @file:///C:/example.html line 7 > eval:1:1
+// @file:///C:/example.html:7:6
+
+ +

Ви також можете скористатися директивою //# sourceURL, щоб присвоїти ім'я коду, що передається. Дивіться також Відладка коду у eval() та Function() у статтях на сторінці Debugger, а також цей пост.

+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Нестандартна властивість.

+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.stack")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/tosource/index.html b/files/uk/web/javascript/reference/global_objects/error/tosource/index.html new file mode 100644 index 0000000000..7c86a836c7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/tosource/index.html @@ -0,0 +1,59 @@ +--- +title: Error.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Error/toSource +tags: + - Error + - JavaScript + - Prototype + - метод + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

Метод toSource() повертає код, який може створити таку саму помилку.

+ +

Синтаксис

+ +
e.toSource()
+ +

Значення, яке повертається

+ +

Текстовий рядок з кодом, що викликає помилку.

+ +

Опис

+ +

Виклик методу toSource екземпляра {{jsxref("Error")}} (або інших базових типів) поверне текстовий рядок з кодом для створення помилки. Цей рядок може бути обчислений для створення (приблизно) такого самого об'єкта. Звісно, рядок з кодом відповідає структурі конструктора {{jsxref("Error")}}. Для прикладу:

+ +
(newname(message ,fileName,lineNumber))
+
+ +

де наведені атрибути відповідають аналогічним властивостям екземпляра помилки.

+ +
+

Примітка: Зауважте, що властивості, які використовуються методом toSource при створенні текстового рядка, можуть змінюватися і не точно відображатимуть функцію, що використовувалась для створення екземпляра помилки, або ім'я файлу, або номер рядка, де виникла помилка.

+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Реалізовано у JavaScript 1.3.

+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.toSource")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/error/tostring/index.html b/files/uk/web/javascript/reference/global_objects/error/tostring/index.html new file mode 100644 index 0000000000..f8e12300e8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/tostring/index.html @@ -0,0 +1,98 @@ +--- +title: Error.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Error/toString +tags: + - Error + - JavaScript + - метод + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString +--- +
{{JSRef}}
+ +

Метод toString() повертає текстовий рядок, що представляє заданий об'єкт {{jsxref("Error")}}.

+ +

Синтаксис

+ +
e.toString()
+ +

Значення, яке повертається

+ +

Текстовий рядок, що представляє об'єкт {{jsxref("Error")}}.

+ +

Опис

+ +

Об'єкт {{jsxref("Error")}} заміщує метод {{jsxref("Object.prototype.toString()")}}, що успадковується усіма об'єктами. Його семантика наступна (за умови, що {{jsxref("Object")}} та {{jsxref("String")}} мають свої початкові значення):

+ +
Error.prototype.toString = function() {
+  'use strict';
+
+  var obj = Object(this);
+  if (obj !== this) {
+    throw new TypeError();
+  }
+
+  var name = this.name;
+  name = (name === undefined) ? 'Error' : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? '' : String(msg);
+
+  if (name === '') {
+    return msg;
+  }
+  if (msg === '') {
+    return name;
+  }
+
+  return name + ': ' + msg;
+};
+
+ +

Приклади

+ +
var e = new Error('fatal error');
+console.log(e.toString()); // 'Error: fatal error'
+
+e.name = undefined;
+console.log(e.toString()); // 'Error: fatal error'
+
+e.name = '';
+console.log(e.toString()); // 'fatal error'
+
+e.message = undefined;
+console.log(e.toString()); // ''
+
+e.name = 'привіт';
+console.log(e.toString()); // 'привіт'
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}
+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.Error.toString")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/eval/index.html b/files/uk/web/javascript/reference/global_objects/eval/index.html new file mode 100644 index 0000000000..8f9fae1236 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/eval/index.html @@ -0,0 +1,323 @@ +--- +title: eval() +slug: Web/JavaScript/Reference/Global_Objects/eval +tags: + - JavaScript + - eval + - Обчислення JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +
{{jsSidebar("Objects")}}
+ +

Функція eval() обчислює код JavaScript, представлений у вигляді рядка.

+ +
+

Застереження: Виконання коду JavaScript з текстового рядка - це неймовірний ризик для безпеки. Зловмиснику занадто легко запустити який завгодно код, коли ви використовуєте eval(). Дивіться Ніколи не використовуйте eval()! нижче.

+
+ +
{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}
+ + + +

Синтаксис

+ +
eval(string)
+ +

Параметри

+ +
+
string
+
Рядок, що відображає вираз, інструкцію чи послідовність інструкцій JavaScript. Вираз може містити змінні та властивості існуючих об'єктів.
+
+ +

Значення, що повертається

+ +

Значення, отримане в результаті обчислення наданого коду. Якщо значення порожнє, повертається {{jsxref("undefined")}}.

+ +

Опис

+ +

Функція eval() є методом глобального об'єкта.

+ +

Аргументом функції eval() є рядок. Якщо у рядку представлений вираз, eval() обчислює цей вираз. Якщо у аргументі представлено одну чи більше інструкцій JavaScript, eval() обчислює ці інструкції. Не викликайте eval() для обчислення арифметичного виразу; JavaScript обчислює арифметичні вирази автоматично.

+ +

Якщо ви створили арифметичний вираз у вигляді рядка, ви можете скористатись eval(), щоб обчислити його пізніше. Припустимо, ви маєте змінну x. Ви можете відкласти обчислення виразу, що містить x, присвоївши рядкове значення виразу, скажімо, "3 * x + 2", змінній, а потім викликати eval() пізніше у скрипті.

+ +

Якщо аргумент eval() не є рядком, eval() повертає аргумент без змін. У наступному прикладі вказано конструктор String, і eval() повертає об'єкт String, а не обчислений рядок.

+ +
eval(new String('2 + 2')); // повертає об'єкт String, який містить "2 + 2"
+eval('2 + 2');             // повертає 4
+
+ +

Ви можете обійти це обмеження загальним методом, використавши toString().

+ +
var expression = new String('2 + 2');
+eval(expression.toString());            // повертає 4
+
+ +

Якщо ви використовуєте функцію eval опосередковано, викликаючи її через інше посилання, ніж evalзгідно ECMAScript 5, вона працює у глобальній області видимості, а не у локальній. Це означає, для прикладу, що оголошення функції створюють глобальні функції, і що обчислюваний код не має доступу до локальних змінних у області видимості, з якої він викликається.

+ +
function test() {
+  var x = 2, y = 4;
+  console.log(eval('x + y'));  // Прямий виклик, використовує локальну область видимості, результат 6
+  var geval = eval; // еквівалентно виклику eval у глобальній області видимості
+  console.log(geval('x + y')); // Непрямий виклик, використовує глобальну область видимості, викидає ReferenceError, бо `x` undefined
+  (0, eval)('x + y'); // інший приклад непрямого виклику
+}
+
+ +

Ніколи не використовуйте eval!

+ +

eval() - небезпечна функція, яка виконує переданий код з привілеями того, хто викликає функцію. Якщо ви запустите eval() з рядком, який міг бути уражений зловмисником, ви можете в результаті запустити шкідливий код на машині користувача з дозволами вашої сторінки / розширення. Ще важливіше, що код третьої сторони бачить область видимості, у якій було запущено eval(), що може призвести до можливих атак, способами, до яких схожий {{jsxref("Global_Objects/Function", "конструктор Function")}} не сприйнятливий.

+ +

Також метод eval() повільніший, ніж його альтернативи, оскільки йому доводиться викликати інтерпретатор JS, в той час, як багато інших конструкцій оптимізуються сучасними рушіями JS.

+ +

Додатково, сучасні інтерпретатори JavaScript перетворюють код JavaScript на машинний код. Це означає, що будь-яке йменування змінних знищується. Тому будь-яке використання eval змусить переглядач виконувати довгі, затратні пошуки імен змінних, щоб зрозуміти, де ця змінна існує у машинному коді, та присвоїти їй значення. До того ж, до змінної можуть бути внесені нові зміни через eval(), наприклад, зміна типу цієї змінної, змушуючи переглядач переобчислювати весь згенерований машинний код, щоб надолужити зміни. Однак, на щастя, існує дуже гарна альтернатива eval: просто використовуйте window.Function. Приклад того, як можна перетворити код з використанням шкідливого eval() на код з використанням Function(), дивіться нижче.

+ +

Поганий код з eval:

+ +
function looseJsonParse(obj){
+    return eval(obj);
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+
+ +

Покращений код без eval:

+ +
function looseJsonParse(obj){
+    return Function('"use strict";return (' + obj + ')')();
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+
+ +

Порівнюючи ці два фрагменти коду, можна подумати, що вони працюють однаково, але не забувайте: код з eval набагато повільніший. Зверніть увагу на c: new Date() у обчислюваному об'єкті. У функції без eval об'єкт обчислюється у глобальній області видимості, тому переглядач може спокійно припускати, що Date посилається на window.Date, а не на локальну змінну на ім'я Date. Але у коді, що використовує eval(), переглядач не може цього припускати, бо що, як ваш код виглядає наступним чином:

+ +
function Date(n){
+    return ["Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота","Неділя"][n%7 || 0];
+}
+function looseJsonParse(obj){
+    return eval(obj);
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+
+ +

Таким чином, у версії з eval() переглядач змушений запускати затратний пошук, щоб перевірити, чи немає десь локальних змінних на ім'я Date(). Це страшенно неефективно, у порівнянні з Function().

+ +

У цих обставинах, що як вам дійсно потрібно, щоб функція Date могла викликатися з коду всередині Function()? Чи доведеться відступити та повернутися до eval()? Ні! Нізащо. Натомість, спробуйте наступний підхід.

+ +
function Date(n){
+    return ["Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота","Неділя"][n%7 || 0];
+}
+function runCodeWithDateFunction(obj){
+    return Function('"use strict";return (' + obj + ')')()(
+        Date
+    );
+}
+console.log(runCodeWithDateFunction(
+   "function(Date){ return Date(5) }"
+))
+
+ +

Наведений код може виглядати неефективно повільним через потрійну вкладеність функції, але проаналізуємо переваги наведеного вище методу:

+ + + +

І нарешті, розглянемо мініфікацію. Використовуючи Function(), як це показано вище, ви можете мініфікувати рядок коду, що передається у runCodeWithDateFunction набагато ефективніше, тому що імена аргументів функції також можуть бути мініфіковані, як показано у мініфікованому коді нижче.

+ +
console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
+return"Понеділок Вівторок Середа Четвер П'ятниця Субота Неділя".split(" ")[a%7||0]}));
+ +

Існують також інші безпечніші (та швидші!) альтернативи eval() чи Function() для типових випадків використання.

+ +

Звернення до властивостей

+ +

Не слід використовувати eval() для перетворення імен властивостей на властивості. Розглянемо наступний приклад, де властивість об'єкта, до якої звертаються, невідома до початку виконання коду. Це можна зробити через eval:

+ +
var obj = { a: 20, b: 30 };
+var propName = getPropName();  // повертає "a" або "b"
+
+eval( 'var result = obj.' + propName );
+
+ +

Однак, метод eval() тут не обов'язковий. Насправді, його використання тут не рекомендоване. Натомість, скористайтесь зверненням до властивостей, це набагато швидше та безпечніше:

+ +
var obj = { a: 20, b: 30 };
+var propName = getPropName();  // повертає "a" або "b"
+var result = obj[ propName ];  //  obj[ "a" ] - це те саме, що й obj.a
+ +

Ви навіть можете скористатись цим методом, щоб звернутись до вкладених властивостей. З eval() це виглядало б наступним чином:

+ +
var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // повертає, наприклад, "a.b.c"
+
+eval( 'var result = obj.' + propPath );
+
+ +

Уникнути eval() тут можна, розбивши шлях до властивості на масив та пройшовши у циклі через властивості:

+ +
function getDescendantProp(obj, desc) {
+  var arr = desc.split('.');
+  while (arr.length) {
+    obj = obj[arr.shift()];
+  }
+  return obj;
+}
+
+var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // повертає, наприклад, "a.b.c"
+var result = getDescendantProp(obj, propPath);
+ +

Призначення властивості таким чином працює схоже:

+ +
function setDescendantProp(obj, desc, value) {
+  var arr = desc.split('.');
+  while (arr.length > 1) {
+    obj = obj[arr.shift()];
+  }
+  return obj[arr[0]] = value;
+}
+
+var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // повертає, наприклад, "a.b.c"
+var result = setDescendantProp(obj, propPath, 1);  // obj.a.b.c тепер дорівнюватиме 1
+ +

Використовуйте функції замість обчислення фрагментів коду

+ +

JavaScript має функції першого класу, це означає, що ви можете передавати функції як аргументи до інших API, зберігати їх у змінних та властивостях об'єктів, і так далі. Багато API об'єктів DOM створені з метою такого використання, тому ви можете (і маєте) написати:

+ +
// замість setTimeout(" ... ", 1000) використовуйте:
+setTimeout(function() { ... }, 1000);
+
+// замість elt.setAttribute("onclick", "...") використовуйте:
+elt.addEventListener('click', function() { ... } , false); 
+ +

Замикання також корисні як спосіб створення параметризованих функцій без поєднання рядків.

+ +

Розбір JSON (перетворення рядків на об'єкти JavaScript)

+ +

Якщо рядок, для якого ви викликаєте eval(), містить дані (наприклад, масив: "[1, 2, 3]"), як протилежність коду, вам слід розглянути перехід на JSON, це дозволить рядку використовувати підмножину синтаксису JavaScript для представлення даних. Дивіться також Завантаження JSON та JavaScript у розширеннях.

+ +

Зауважте, що, оскільки синтаксис JSON є обмеженим, у порівнянні з синтаксисом JavaScript, багато з чинних літералів JavaScript не розбиратимуться як JSON. Наприклад, прикінцеві коми не дозволені у JSON, а імена властивостей (ключі) у об'єкті повинні бути заключені у лапки. Обов'язково використовуйте серіалізатор JSON для створення рядків, які пізніше будуть розібрані як JSON.

+ +

Передавайте дані замість коду

+ +

Наприклад, розширення, створене для збирання вмісту веб-сторінок, може мати правила збирання, визначені у XPath, замість коду JavaScript.

+ +

Запускайте код з обмеженими привілеями

+ +

Якщо ви мусите запускати код, розгляньте варіант запуску з обмеженими привілеями. Ця порада стосується здебільшого розширень та XUL-застосунків, які можуть використовувати для цього Components.utils.evalInSandbox.

+ +

Приклади

+ +

Використання eval

+ +

У наступному коді обидві інструкції, які містять eval(), повертають 42. Перша обчислює рядок "x + y + 1"; друга обчислює рядок "42".

+ +
var x = 2;
+var y = 39;
+var z = '42';
+eval('x + y + 1'); // повертає 42
+eval(z);           // повертає 42
+
+ +

Використання eval для обчислення рядка інструкцій JavaScript

+ +

Наступний приклад використовує eval(), щоб обчислити рядок str. Цей рядок складається з інструкцій JavaScript, які виводять повідомлення та присвоюють змінній z значення 42, якщо x дорівнює п'яти, інакше присвоюють z значення 0. Коли виконується друга інструкція, eval() спричинить виконання цих інструкцій, а також обчислить набір інструкцій та поверне значення, що було присвоєне z.

+ +
var x = 5;
+var str = "if (x == 5) {console.log('z дорівнює 42'); z = 42;} else z = 0;";
+
+console.log('z дорівнює ', eval(str));
+ +

Якщо ви визначаєте декілька значень, то повертається останнє.

+ +
var x = 5;
+var str = "if (x == 5) {console.log('z дорівнює 42'); z = 42; x = 420; } else z = 0;";
+
+console.log('x дорівнює ', eval(str)); // z дорівнює 42  x дорівнює 420
+
+ +

Останній вираз обчислюється

+ +

eval() повертає значення останнього обчисленого виразу.

+ +
var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }';
+var a = true;
+var b = eval(str);  // повертає 2
+
+console.log('b дорівнює : ' + b);
+
+a = false;
+b = eval(str);  // повертає 3
+
+console.log('b дорівнює : ' + b);
+ +

eval як функція визначення рядка, потребує "(" та ")" на початку та в кінці

+ +
var fctStr1 = 'function a() {}'
+var fctStr2 = '(function a() {})'
+var fct1 = eval(fctStr1)  // повертає undefined
+var fct2 = eval(fctStr2)  // повертає функцію
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-eval-x', 'eval')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.eval")}}

+ +

Примітки щодо Firefox

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/evalerror/index.html b/files/uk/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..0a6f515a8e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,98 @@ +--- +title: EvalError +slug: Web/JavaScript/Reference/Global_Objects/EvalError +tags: + - Error + - EvalError + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +
{{JSRef}}
+ +

Об'єкт EvalError позначає помилку, пов'язану з використанням глобальної функції {{jsxref("Global_Objects/eval", "eval()")}}. Цей виняток більше не викидається у JavaScript, однак, об'єкт EvalError залишено для сумісності.

+ +

Синтаксис

+ +
new EvalError([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message
+
Необов'язковий. Зрозумілий людині опис помилки.
+
fileName {{non-standard_inline}}
+
Необов'язковий. Ім'я файлу, код з якого спричинив виняток.
+
lineNumber {{non-standard_inline}}
+
Необов'язковий. Номер рядка в коді, що спричинив виняток.
+
+ +

Властивості

+ +
+
EvalError.prototype
+
Дозволяє додавати властивості до об'єктів EvalError.
+
+ +

Методи

+ +

Сам EvalError не має власних методів, але успадковує деякі методи через ланцюжок прототипів.

+ +

Екземпляри EvalError

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Методи')}}
+ +

Приклади

+ +

EvalError не використовується у нинішній специфікації ECMAScript, а отже, не викидатиметься під час виконання. Однак, сам об'єкт залишається для зворотної сумісності з більш ранніми версіями специфікації.

+ +

Створення EvalError

+ +
try {
+  throw new EvalError('Привіт', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Привіт"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}
+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.EvalError")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html new file mode 100644 index 0000000000..e7f4230c60 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html @@ -0,0 +1,89 @@ +--- +title: EvalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +tags: + - Error + - EvalError + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +
{{JSRef}}
+ +

Властивість EvalError.prototype є прототипом для конструктора {{jsxref("EvalError")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("EvalError")}} успадковуються від EvalError.prototype. Ви можете використати прототип, щоб додати властивості та методи до усіх екземплярів.

+ +

Властивості

+ +
+
EvalError.prototype.constructor
+
Функція, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("EvalError")}} повинен мати власну властивість message, у SpiderMonkey він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
+
Трасування стеку. Успадковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("EvalError")}} не містить власних методів, екземпляри {{jsxref("EvalError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.EvalError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/apply/index.html b/files/uk/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..78183d8102 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,239 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +tags: + - Function + - JavaScript + - Довідка + - Функція + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +
{{JSRef}}
+ +

Метод apply() викликає функцію із заданим значенням this та аргументами, переданими у вигляді масиву (або подібного до масиву об'єкта).

+ +
+

Заувага: Хоча синтаксис цієї функції є майже ідентичним до синтаксису {{jsxref("Function.call", "call()")}}, фундаментальна відмінність полягає в тому, що метод call() приймає список аргументів, тоді як метод apply() приймає єдиний масив аргументів.

+
+ +
+

Заувага: Коли першим аргументом є undefined або null, схожий результат можна отримати за допомогою оператора розпакування масивів.

+
+ +

{{EmbedInteractiveExample("pages/js/function-apply.html")}}

+ + + +

Синтаксис

+ +
function.apply(thisArg, [argsArray])
+ +

Параметри

+ +
+
thisArg
+
Значення this, передане для виклику у функцію function. Зазначте, що this може не бути фактичним значенням, яке бачить метод: якщо метод є функцією не у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}, {{jsxref("null")}} та {{jsxref("undefined")}} будуть замінені глобальним об'єктом, а прості значення будуть запаковані. Цей аргумент є обов'язковим.
+
argsArray
+
Необов'язковий. Подібний до масиву об'єкт, що визначає аргументи, з якими функція має бути викликана, або {{jsxref("null")}} чи {{jsxref("undefined")}}, якщо жодних аргументів не має бути передано у функцію. Починаючи з ECMAScript 5, ці аргументи можуть бути загальними подібними до масиву об'єктами замість масиву. Дивіться нижче інформацію щодо {{anch("Сумісність_з_веб-переглядачами", "сумісності з веб-переглядачами")}}.
+
+ +

Значення, яке повертається

+ +

Результат виконання функції з вказаним значенням this та аргументами.

+ +

Опис

+ +

Ви можете присвоїти інший об'єкт this, коли викликаєте існуючу функцію. this посилається на поточний об'єкт, з якого здійснюється виклик. З apply ви можете написати метод один раз, а потім успадковувати його в іншому об'єкті, без необхідності переписувати метод для нового об'єкта.

+ +

Метод apply дуже схожий на {{jsxref("Function.call", "call()")}}, за виключенням типу аргументів, які він підтримує. Ви використовуєте масив аргументів замість списку аргументів (параметрів). З методом apply ви також можете використовувати літерал масиву, для прикладу, func.apply(this, ['їсти', 'банани']), або об'єкт {{jsxref("Array")}}, для прикладу, func.apply(this, new Array('їсти', 'банани')).

+ +

Ви також можете використати об'єкт {{jsxref("Functions/arguments", "arguments")}} як параметр argsArray. arguments - локальна змінна функції. Вона може використовуватись для всіх не заданих аргументів об'єкта, який викликається. Таким чином, вам не потрібно знати аргументи об'єкта, що викликається, коли ви використовуєте метод apply. Ви можете скористатись об'єктом arguments, щоб передати усі аргументи. Далі об'єкт, який викликається, відповідає за обробку аргументів.

+ +

З появою 5-ї версії ECMAScript, ви також можете використовувати будь-який подібний до масиву об'єкт, отже, на практиці це означає, що він має поле length та цілі числа в якості параметрів у діапазоні (0...length-1). Як приклад, ви тепер можете використати {{domxref("NodeList")}} або власноруч написаний об'єкт виду { 'length': 2, '0': 'їсти', '1': 'банани' }.

+ +
+

Чимало більш старих переглядачів, в тому числі Chrome <17 та Internet Explorer <9, не приймають подібні до масиву об'єкти і викидатимуть виняток.

+
+ +

Приклади

+ +

Використання apply для додавання масиву до іншого масиву

+ +

Ми можемо використати метод push, щоб додати елемент до масиву. І, оскільки push приймає змінну кількість аргументів, ми також можемо додати кілька елементів за раз. Але, якщо ми передамо у push масив, він додасть, власне, масив єдиним елементом, замість того, щоб додати окремі елементи, і ми отримаємо масив всередині масиву. Що, як ми не цього хотіли? Метод concat має поведінку, яка нам потрібна в цьому випадку, але він не додає елементи у існуючий масив, а створює та повертає новий масив. Але ми хотіли додати елементи у існуючий масив... Що ж робити? Писати цикл? Звісно, ні.

+ +

На допомогу приходить apply!

+ +
var array = ['a', 'b'];
+var elements = [0, 1, 2];
+array.push.apply(array, elements);
+console.info(array); // ["a", "b", 0, 1, 2]
+ +
+ +

Використання apply та вбудовані функції

+ +

Розумне використання методу apply дозволяє використовувати вбудовані функції для деяких задач, які в іншому випадку ймовірно були б написані циклічним обходом значень масиву. Як приклад, ми збираємося використати Math.max/Math.min, щоб знайти максимальне/мінімальне значення масиву.

+ +
// мінімальне/максимальне число в масиві
+var numbers = [5, 6, 2, 3, 7];
+
+// використання Math.min/Math.max з apply
+var max = Math.max.apply(null, numbers);
+// Це практично дорівнює Math.max(numbers[0], ...)
+// або Math.max(5, 6, ...)
+
+var min = Math.min.apply(null, numbers);
+
+// в порівнянні з простим алгоритмом на основі цикла
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i < numbers.length; i++) {
+  if (numbers[i] > max) {
+    max = numbers[i];
+  }
+  if (numbers[i] < min) {
+    min = numbers[i];
+  }
+}
+
+ +

Але будьте обережні: використовуючи apply таким способом, ви ризикуєте перевищити ліміт кількості аргументів рушія JavaScript. Наслідки застосування функції, в якій забагато аргументів (більше, ніж десятки тисяч аргументів), різняться між різними рушіями (JavaScriptCore має жорстко закодований ліміт аргументів 65536) тому, що ліміт (а насправді, навіть природа будь-якої поведінки надмірно великого стеку) є невизначеним. Деякі рушії викинуть виняток. Ще гірше, інші довільно обмежать кількість аргументів, які будуть насправді передані до застосованої функції. Для ілюстрації останнього випадку: якби такий рушій мав обмеження у чотири аргументи (справжні ліміти, звісно, значно більші), то замість цілого масиву у наведеному вище випадку до apply були б передані аргументи 5, 6, 2, 3

+ +

Якщо ваш масив значень може вирости до десятків тисяч значень, використовуйте гібридну стратегію: застосовуйте вашу функцію до фрагментів масиву, по одному за раз:

+ +
function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                arr.slice(i, Math.min(i+QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);
+
+
+ +

Використання методу apply для ланцюгового виконання конструкторів

+ +

Ви можете використовувати apply для ланцюгового виконання {{jsxref("Operators/new", "конструкторів", "", 1)}} до об'єкта, подібно до Java. У наступному прикладі ми створимо глобальний метод {{jsxref("Function")}} під назвою construct, котрий дозволить використовувати подібний до масиву об'єкт з конструктором замість списку аргументів.

+ +
Function.prototype.construct = function(aArgs) {
+  var oNew = Object.create(this.prototype);
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+
+ +
+

Заувага: Метод Object.create(), що використовується вище, є відносно новим. В якості альтернативних методів, будь ласка, розгляньте наступні підходи:

+ +

Використання {{jsxref("Object/proto", "Object.__proto__")}}:

+ +
Function.prototype.construct = function (aArgs) {
+  var oNew = {};
+  oNew.__proto__ = this.prototype;
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+ +

Замикання:

+ +
Function.prototype.construct = function(aArgs) {
+  var fConstructor = this, fNewConstr = function() {
+    fConstructor.apply(this, aArgs);
+  };
+  fNewConstr.prototype = fConstructor.prototype;
+  return new fNewConstr();
+};
+ +

Конструктор {{jsxref("Function")}}:

+ +
Function.prototype.construct = function (aArgs) {
+  var fNewConstr = new Function("");
+  fNewConstr.prototype = this.prototype;
+  var oNew = new fNewConstr();
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+
+ +

Приклад використання:

+ +
function MyConstructor() {
+  for (var nProp = 0; nProp < arguments.length; nProp++) {
+    this['property' + nProp] = arguments[nProp];
+  }
+}
+
+var myArray = [4, 'Всім привіт!', false];
+var myInstance = MyConstructor.construct(myArray);
+
+console.log(myInstance.property1);                // виведе 'Всім привіт!'
+console.log(myInstance instanceof MyConstructor); // виведе 'true'
+console.log(myInstance.constructor);              // виведе 'MyConstructor'
+
+ +
+

Заувага: Цей не рідний метод Function.construct не буде працювати з деякими вбудованими конструкторами; такими, як {{jsxref("Date")}}, наприклад. У таких випадках, ви маєте використовувати метод {{jsxref("Function.prototype.bind")}} (наприклад, уявіть собі такий масив, що використовується з конструктором {{jsxref("Global_Objects/Date", "Date")}}: [2012, 11, 4]; у такому випадку вам доведеться написати щось по типу: new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))(). Це не найкращий підхід, і, мабуть, не варто це робити у будь-якому виробничому середовищі).

+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізовано у JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Function.apply")}}

+ +
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/arguments/index.html b/files/uk/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..009473b14d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,92 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Global_Objects/Function/arguments +tags: + - Function + - JavaScript + - arguments + - Властивість + - застаріла +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +
{{JSRef}} {{deprecated_header}}
+ +

Властивість function.arguments посилається на подібний до масиву об'єкт, який відображає аргументи, передані у функцію. Використовуйте натомість просту змінну {{jsxref("Functions/arguments", "arguments")}}. Ця властивість заборонена у строгому режимі.

+ +

Опис

+ +

Синтаксис function.arguments є застарілим. Рекомендуємий спосіб звернутися до об'єкта {{jsxref("Functions/arguments", "arguments")}}, що доступний всередині функцій, це просто скористатись змінною  {{jsxref("Functions/arguments", "arguments")}}.

+ +

У випадку рекурсії, тобто, якщо функція f з'являється кілька разів у стеку викликів, значення f.arguments відображає аргументи, що відповідають останньому виклику функції.

+ +

Значення властивості arguments зазвичай дорівнює null, якщо немає незавершеного виклику функції у процесі (тобто, функція була викликана, але досі не повернула значення).

+ +

Приклади

+ +
function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('до: ' + g.arguments[0]);
+  if (n > 0) { f(n); }
+  console.log('після: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('повернено: ' + g.arguments);
+
+// Результат
+
+// до: 1
+// до: 0
+// після: 0
+// після: 1
+// повернено: null
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0. Застаріло через {{jsxref("Functions/arguments", "arguments")}} у ES3.
{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}{{Spec2('ES5.1')}}Об'єкт {{jsxref("Functions/arguments", "arguments")}}
{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}{{Spec2('ES6')}}Об'єкт {{jsxref("Functions/arguments", "arguments")}}
{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}{{Spec2('ESDraft')}}Об'єкт {{jsxref("Functions/arguments", "arguments")}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.arguments")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/arity/index.html b/files/uk/web/javascript/reference/global_objects/function/arity/index.html new file mode 100644 index 0000000000..bef46fef72 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/arity/index.html @@ -0,0 +1,31 @@ +--- +title: Function.arity +slug: Web/JavaScript/Reference/Global_Objects/Function/arity +tags: + - JavaScript + - Властивість + - Функція + - застаріла +translation_of: Archive/Web/JavaScript/Function.arity +--- +
{{JSRef}}{{Obsolete_Header}}
+ +

Властивість arity повертала кількість аргументів, очікуваних функцією, однак, вона більше не існує та була замінена властивістю {{jsxref("Function.prototype.length")}}.

+ +

Специфікації

+ +

Реалізовано JavaScript 1.2. Застаріла у JavaScript 1.4.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.arity")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/bind/index.html b/files/uk/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..9270baeac2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,329 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Global_Objects/Function/bind +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Method + - Зв'язування + - Функція + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +
{{JSRef}}
+ +

Метод bind() створює нову функцію, яка в момент виклику має певне присвоєне значення this, а також задану послідовність аргументів, що передують будь-яким аргументам, переданим під час виклику нової функції.

+ +

{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}

+ + + +

Синтаксис

+ +
function.bind(thisArg[, arg1[, arg2[, ...]]])
+ +

Параметри

+ +
+
thisArg
+
Значення, що передаватиметься як параметр this до цільової функції, коли зв'язана функція викликається. Це значення ігнорується, якщо зв'язана функція утворена викликом оператора {{jsxref("Operators/new", "new")}}. При використанні bind для створення функції (що подається для зворотного виклику) всередині setTimeout, будь-яке примітивне значення, що передається в якості thisArg, перетворюється на об'єкт. Якщо у bind не було передано жодних аргументів, this області видимості виконання передається як thisArg для нової функції.
+
arg1, arg2, ...
+
Аргументи, які будуть передувати аргументам, що були передані у зв'язану функцію, під час виклику цільової функції.
+
+ +

Значення, яке повертається

+ +

Копія заданої функції із заданим значенням this та початковими аргументами.

+ +

Опис

+ +

Функція bind() створює нову зв'язану функцію, яка є екзотичним об'єктом-функцією (термін з ECMAScript 2015), що огортає початкову функцію. Загалом, результатом виклику зв'язаної функції є виконання функції, яку вона огортає.

+ +

Зв'язана функція має наступні внутрішні властивості:

+ + + +

Коли зв'язана функція викликається, вона викликає внутрішній метод [[Call]] на об'єкті [[BoundTargetFunction]] з наступними аргументами Call(boundThis, args). Де boundThis - це [[BoundThis]], а args - це [[BoundArguments]], за якими йдуть аргументи, передані викликом функції.

+ +

Зв'язана функція може також бути створена за допомогою оператора {{jsxref("Operators/new", "new")}}: це працює так, якби замість неї створювалася б цільова функція. Передане значення this ігнорується, а передані аргументи передаються до імітованої функції.

+ +

Приклади

+ +

Створення зв'язаної функції

+ +

Найпростіше використання методу bind() - це зробити функцію, яка, незалежно від того, як вона викликається, буде викликатися з конкретним значенням this. Загальною помилкою початківців у JavaScript є витягнути метод з об'єкта, пізніше викликати цю функцію і очікувати, що вона буде використовувати початковий об'єкт в якості this (наприклад, використовуючи цей метод в коді на основі зворотних викликів). Однак, початковий об'єкт, якщо його не відслідковувати, зазвичай, втрачається. Створення зв'язаної функції з функції, яка використовує початковий об'єкт, елегантно вирішує цю проблему:

+ +
this.x = 9;    // тут значення this посилається на глобальний об'єкт переглядача "window"
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var retrieveX = module.getX;
+retrieveX();
+// вертає 9 - Функція виконується в глобальній області видимості
+
+// Створюємо нову функцію, прив'язуючи 'this' до об'єкта module
+// Програмісти-новачки можуть переплутати
+// глобальну змінну var x з властивістю x об'єкта module
+var boundGetX = retrieveX.bind(module);
+boundGetX(); // 81
+
+ +

Частково застосовані функції

+ +

Наступне найпростіше використання методу bind() - це зробити функцію з наперед визначеними початковими аргументами. Ці аргументи (якщо вони є) вказуються після наданого значення this і після цього передаються на початку списку аргументів, які передаються в дану функцію. За ними йдуть аргументи, передані у зв'язану функцію під час виклику.

+ +
function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+function addArguments(arg1, arg2) {
+    return arg1 + arg2
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+var result1 = addArguments(1, 2); // 3
+
+// Створити функцію з попередньо заданим першим аргументом
+var leadingThirtysevenList = list.bind(null, 37);
+
+// Створити функцію з попередньо заданим першим аргументом.
+var addThirtySeven = addArguments.bind(null, 37);
+
+var list2 = leadingThirtysevenList();
+// [37]
+
+var list3 = leadingThirtysevenList(1, 2, 3);
+// [37, 1, 2, 3]
+
+var result2 = addThirtySeven(5);
+// 37 + 5 = 42
+
+var result3 = addThirtySeven(5, 10);
+// 37 + 5 = 42, другий аргумент ігнорується
+ +

З setTimeout

+ +

За замовчуванням, всередині {{domxref("WindowTimers/setTimeout", "window.setTimeout()")}} значенням this буде встановлено об'єкт {{domxref("window")}} (або global). Працюючи з методами класу, що вимагають this для посилання на екземпляри класу, ви можете явно прив'язати this до функції зворотного виклику, щоб зберегти екземпляр.

+ +
function LateBloomer() {
+  this.petalCount = Math.ceil(Math.random() * 12) + 1;
+}
+
+// Запустити declare після затримки у 1 секунду
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('Я чудова квітка з ' +
+    this.petalCount + ' пелюстками!');
+};
+
+var flower = new LateBloomer();
+flower.bloom();
+// через 1 секунду запускається метод 'declare'
+ +

Зв'язані функції в ролі конструкторів

+ +
+

Застереження: Цей розділ демонструє можливості JavaScript та документує деякі граничні випадки використання методу bind(). Методи, наведені нижче, є не найкращим способом написання коду, їх не бажано використовувати у будь-якому виробничому середовищі.

+
+ +

Зв'язані функції автоматично підходять для використання з оператором {{jsxref("Operators/new", "new")}} для побудови нових екземплярів, створених цільовою функцією. Коли зв'язана функція використовується для створення значення, надане значення this ігнорується. Однак, надані аргументи все одно передаються у виклик конструктора:

+ +
function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+// не підтримується у поліфілі, що наведений нижче
+
+// працює добре з рідним методом bind:
+
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+
+ +

Зауважте, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію для використання з оператором {{jsxref("Operators/new", "new")}}. Наслідком є те, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію, яка буде просто викликатися, навіть якщо ви хотіли б зв'язати функцію лише для викликів з оператором {{jsxref("Operators/new", "new")}}.

+ +
// Приклад може бути запущений прямо у консолі JavaScript
+// ...продовження прикладу нагорі
+
+// Може викликатись як звичайна функція
+// (хоча зазвичай це є небажаним)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// >  '0,13'
+
+ +

Якщо ви бажаєте підтримувати використання зв'язаної функції лише з оператором {{jsxref("Operators/new", "new")}}, або лише викликаючи її, то цільова функція має примусово ввести це обмеження.

+ +

Створення ярликів

+ +

Метод bind() також є корисним у випадках, коли ви хочете створити ярлик до функції, котра потребує конкретного значення this.

+ +

Візьміть, для прикладу, метод {{jsxref("Array.prototype.slice")}}, який ви хочете використати для перетворення подібного до масиву об'єкта на справжній масив. Ви можете створити такий ярлик:

+ +
var slice = Array.prototype.slice;
+
+// ...
+
+slice.apply(arguments);
+
+ +

З bind() це можна спростити. В наступній частині коду, slice є зв'язаною функцією з функцією {{jsxref("Function.prototype.apply()", "apply()")}} об'єкта {{jsxref("Function.prototype")}}, зі значенням this, яке дорівнює функції {{jsxref("Array.prototype.slice()", "slice()")}} об'єкта {{jsxref("Array.prototype")}}. Це означає що додаткові виклики методу apply() можуть бути усунені:

+ +
// те саме, що й "slice" у попередньому прикладі
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+
+ +

Поліфіл

+ +

Оскільки старші переглядачі, загалом, є також повільнішими, набагато критичніше, ніж багатьом здається, створювати продуктивні поліфіли, щоб користування переглядачем не було таким жахливим. Отже, нижче наведені два варіанти поліфілів Function.prototype.bind. Перший набагато менший та спритніший, але не працює при використанні оператора `new`. Другий менш продуктивний та більший за розміром, але дозволяє певне використання оператора `new` на зв'язаних функціях. Загалом, у коді рідко можна зустріти `new`, що використовується на зв'язаній функції, тому, в цілому, краще обирати перший варіант.

+ +
// Не працює з `new funcA.bind(thisArg, args)`
+if (!Function.prototype.bind) (function(){
+  var slice = Array.prototype.slice;
+  Function.prototype.bind = function() {
+    var thatFunc = this, thatArg = arguments[0];
+    var args = slice.call(arguments, 1);
+    if (typeof thatFunc !== 'function') {
+      // найближчий можливий варіант до внутрішньої
+      // функції IsCallable у ECMAScript 5
+      throw new TypeError('Function.prototype.bind - ' +
+             'what is trying to be bound is not callable');
+    }
+    return function(){
+      var funcArgs = args.concat(slice.call(arguments))
+      return thatFunc.apply(thatArg, funcArgs);
+    };
+  };
+})();
+ +

Ви можете це частково обійти, вставивши наступний код на початку ваших скриптів, що дозволить використовувати більшу частину функціональності bind() у реалізаціях, які початково її не підтримують.

+ +
// Так, це працює з `new funcA.bind(thisArg, args)`
+if (!Function.prototype.bind) (function(){
+  var ArrayPrototypeSlice = Array.prototype.slice;
+  Function.prototype.bind = function(otherThis) {
+    if (typeof this !== 'function') {
+      // найближчий можливий варіант до внутрішньої
+      // функції IsCallable у ECMAScript 5
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var baseArgs= ArrayPrototypeSlice .call(arguments, 1),
+        baseArgsLength = baseArgs.length,
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          baseArgs.length = baseArgsLength; // скинути до початкових базових аргументів
+          baseArgs.push.apply(baseArgs, arguments);
+          return fToBind.apply(
+                 fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
+          );
+        };
+
+    if (this.prototype) {
+      // Function.prototype не має властивості prototype
+      fNOP.prototype = this.prototype;
+    }
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+})();
+ +

Деякі з багатьох відмінностей (також можуть бути й інші, оскільки цей список не претендує на вичерпність) між цим алгоритмом та основним алгоритмом:

+ + + +

Якщо ви вирішили використовувати цю часткову реалізацію, ви не повинні покладатися на неї у ситуаціях, де її поведінка відрізняється від 5-ї версії ECMA-262! На щастя, ці відхилення від специфікації не часто (якщо взагалі) зустрічаються у більшості випадків кодування. Якщо ви не розумієте жодних відхилень від специфікації, наведених вище, тоді, у цьому конкретному випадку, буде безпечно не хвилюватись щодо подробиць цих невідповідностей.

+ +

Якщо це абсолютно необхідно, а продуктивність неважлива, значно повільніше рішення (але у більшій відповідності до специфікації) можна знайти тут https://github.com/Raynos/function-bind.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізовано у 1.8.5.
{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Function.bind")}}

+ +
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/call/index.html b/files/uk/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..caa12e71b0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,168 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Global_Objects/Function/call +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +
{{JSRef}}
+ +

Метод call() викликає функцію із вказаним значенням this та зазначеним переліком аргументів.

+ +
+

Заувага: Хоча за своїм призначенням цей метод і {{jsxref("Function.prototype.apply", "apply()")}} є тотожними, аргументи для викликаної функції передаються в дещо різний спосіб: метод call() приймає їх перелік, тоді як метод apply() приймає їх масив.

+
+ +
{{EmbedInteractiveExample("pages/js/function-call.html")}}
+ + + +

Синтаксис

+ +
function.call(thisArg[, arg1[, arg2[, ...]]])
+ +

Параметри

+ +
+
thisArg {{optional_inline}}
+
Значення this, яке буде застосовано для виклику function. Зауважте, що значення thisArg може зазнати перетворень — якщо функція function виконується у {{jsxref("Functions_and_function_scope/Strict_mode", "поблажливому режимі", "", 1)}}, тоді замість {{jsxref("Global_Objects/null", "null")}} та {{jsxref("Global_Objects/undefined", "undefined")}} буде застосовано {{glossary("Global_object", "глобальний об'єкт")}}, а {{glossary("Primitive", "прості величини")}} буде обернено на об'єкти.
+
arg1, arg2, ... {{optional_inline}}
+
Аргументи, що їх буде передано до функції function.
+
+ +

Вертає

+ +

Значення, яке внаслідок виклику повернула сама функція function.

+ +

Опис

+ +

Метод call() здійснює виклик функції, заступаючи значення ключового слова this всередині неї значенням, переданим до call() як перший аргумент. Це уможливлює одноразове написання деякої функції з можливістю її надалі викликати для всякого об'єкта так, наче вона є його методом.

+ +

Приклади

+ +

Виклик успадкованих конструкторів за допомогою call

+ +

Методом call() можна скористатись для створення ланцюжка конструкторів об'єкта, як у Java. У наведеному прикладі конструктор Product (виріб) має два параметри: назву (name) й ціну (price). Два інші конструктори — Food (їжа) і Toy (цяцька) — спершу викликають конструктор Product, передаючи потрібні йому значення name і price, а відтак додають окрему властивість category (різновид).

+ +
function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+
+ +

Виклик неназваних функцій за допомогою метода call

+ +

Цей суто надуманий приклад містить використання метода call для виклику анонімної функції на кожному об'єкті з масиву.

+ +

Всередині цієї анонімної функції кожен об'єкт отримує окремий метод print, що друкуватиме значення властивостей об'єкта та його розташунок (індекс) в масиві. Передача об'єкта саме як this не є необхідністю, а вжито лише задля наочності.

+ +
var animals = [
+  { species: 'Лев', name: 'Король' },
+  { species: 'Пантера', name: 'Багіра' }
+];
+
+for (var i = 0; i < animals.length; i++) {
+  (function(i) {
+    this.print = function() {
+      console.log(i, this.species, this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+
+ +

Виклик функції та перевиознака this за допомогою метода call

+ +

Під час виклику функції greet в цьому прикладі значення this буде прив'язано до об'єкта obj:

+ +
function greet() {
+  var message = 'Вітаємо, ' + (this.isMale ? 'пане ' : 'пані ') + this.name;
+  console.log(message);
+}
+
+var obj = {
+  isMale: false, name: 'Олено'
+};
+
+greet.call(obj);  // Вітаємо, пані Олено
+
+ +

Виклик функції за допомогою метода call без зазначення першого аргумента

+ +

Як засвідчує цей приклад, відсутність першого аргумента метода call має наслідком прив'язування this до {{glossary('global object', 'глобального об\'єкта')}}:

+ +
var name = 'Тарас';
+
+var x = {
+  name: 'Микола',
+  display: function() {
+    console.log('Мене звуть ' + this.name);
+  }
+};
+
+x.display();  // Мене звуть Микола
+x.display.call();  // Мене звуть Тарас
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкова виознака. Запроваджено у JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +
{{Compat("javascript.builtins.Function.call")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/caller/index.html b/files/uk/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..ab2fe55383 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,82 @@ +--- +title: Function.caller +slug: Web/JavaScript/Reference/Global_Objects/Function/caller +tags: + - Function + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +
{{JSRef}} {{non-standard_header}}
+ +

Властивість function.caller повертає функцію, яка викликала вказану функцію. Ця властивість заборонена у строгому режимі.

+ +

Опис

+ +

Якщо функція f викликана кодом верхнього рівня, значенням f.caller буде {{jsxref("null")}}, інакше це буде функція, яка викликала f.

+ +

Ця властивість замінює застарілу властивість {{jsxref("Functions/arguments/caller", "arguments.caller")}} об'єкта {{jsxref("Functions/arguments", "arguments")}}.

+ +

Спеціальна властивість __caller__, яка повертала об'єкт активації функції, що викликала задану функцію, дозволяючи відбудовувати стек викликів, була прибрана з міркувань безпеки.

+ +

Примітки

+ +

Зауважте, що у випадку рекурсії ви не зможете відбудувати стек викликів за допомогою цієї властивості. Розглянемо:

+ +
function f(n) { g(n - 1); }
+function g(n) { if (n > 0) { f(n); } else { stop(); } }
+f(2);
+
+ +

У момент, коли викликається stop(), стек викликів буде таким:

+ +
f(2) -> g(1) -> f(1) -> g(0) -> stop()
+
+ +

Наступне дорівнює true:

+ +
stop.caller === g && f.caller === g && g.caller === f
+
+ +

Отже, якщо ви спробуєте отримати стек викликів у функції stop() ось так:

+ +
var f = stop;
+var stack = 'Стек викликів:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+
+ +

цикл ніколи не зупиниться.

+ +

Приклади

+ +

Перевірка значення властивості функції caller

+ +

Наступний код перевіряє значення властивості функції caller.

+ +
function myFunc() {
+  if (myFunc.caller == null) {
+    return 'Ця функція викликана з верхнього рівня!';
+  } else {
+    return 'Ця функція викликана ' + myFunc.caller;
+  }
+}
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Реалізовано у JavaScript 1.5.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Function.caller")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/displayname/index.html b/files/uk/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..1e18f4a98c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,80 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Global_Objects/Function/displayName +tags: + - Function + - JavaScript + - Властивість + - нестандартна +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +
{{JSRef}} {{non-standard_header}}
+ +

Властивість function.displayName повертає ім'я, що відображається для функції.

+ +

Опис

+ +

Властивість displayName, якщо вона вказана, повертає ім'я, яке відображається для функції:

+ +
function doSomething() {}
+
+console.log(doSomething.displayName); // "undefined"
+
+var popup = function(content) { console.log(content); };
+
+popup.displayName = 'Показати спливаюче вікно';
+
+console.log(popup.displayName); // "Показати спливаюче вікно"
+
+ +

Ви можете визначити функцію з ім'ям, яке відображається, у {{jsxref("Functions", "функціональному виразі", "", 1)}}:

+ +
var object = {
+  someMethod: function() {}
+};
+
+object.someMethod.displayName = 'someMethod';
+
+console.log(object.someMethod.displayName); // виводить "someMethod"
+
+try { someMethod } catch(e) { console.log(e); }
+// ReferenceError: someMethod is not defined
+
+ +

Ви можете динамічно змінювати властивість displayName:

+ +
var object = {
+  // анонімна
+  someMethod: function(value) {
+    arguments.callee.displayName = 'мій метод (' + value + ')';
+  }
+};
+
+console.log(object.someMethod.displayName); // "undefined"
+
+object.someMethod('123')
+console.log(object.someMethod.displayName); // "мій метод (123)"
+
+ +

Приклади

+ +

Консолі та профайлери зазвичай використовують цю властивість замість {{jsxref("Function.name", "func.name")}} для відображення імені функції.

+ +

Записавши наведений код у консоль, ви маєте побачити щось на кшталт "function My Function()":

+ +
var a = function() {};
+a.displayName = 'My Function';
+
+a; // "function My Function()"
+ +

Специфікації

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.displayName")}}

+
diff --git a/files/uk/web/javascript/reference/global_objects/function/index.html b/files/uk/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..f2672fe180 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,155 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +
{{JSRef}}
+ +

Конструктор Function створює новий об'єкт Function. Прямий виклик конструктора може створювати функції динамічно, але має проблеми з безпекою та схожі з {{jsxref("eval")}} (але менш значні) проблеми з продуктивністю. Однак, на відміну від eval, конструктор Function створює функції, які виконуються тільки у глобальній області видимості.

+ +

{{EmbedInteractiveExample("pages/js/function-constructor.html")}}

+ + + +

У JavaScript кожна функція є об'єктом Function. Це можна побачити за допомогою коду (function(){}).constructor === Function, який повертає true.

+ +

Синтаксис

+ +
new Function ([arg1[, arg2[, ...argN]],] functionBody)
+ +

Параметри

+ +
+
arg1, arg2, ... argN
+
Імена, які будуть використані функцією в якості імен формальних аргументів. Кожне ім'я має бути рядком, який представляє ідентифікатор JavaScript, або списком таких рядків, розділених комою; наприклад, "x", "theValue" або "a,b".
+
functionBody
+
Рядок, що містить інструкції JavaScript, які складають визначення функції.
+
+ +

Опис

+ +

Об'єкти Function, створені конструктором Function, аналізуються, коли створюється функція. Це менш ефективно, ніж оголошувати функцію функціональним виразом або оголошенням функції та викликати її, бо такі функції аналізуються разом з рештою коду.

+ +

Усі аргументи, передані у функцію, сприймаються як імена ідентифікаторів параметрів функції, що має бути створена, в тому порядку, в якому вони передані.

+ +

Виклик конструктора Function у вигляді функції (без оператора new) має той самий ефект, що й виклик конструктора.

+ +

Властивості та методи об'єкта Function

+ +

Глобальний об'єкт Function не має власних методів та властивостей, однак, він успадковує деякі методи та властивості через ланцюжок прототипів від {{jsxref("Function.prototype")}}.

+ +

Об'єкт прототипу Function

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Методи')}}
+ +

Екземпляри Function

+ +

Екземпляри Function успадковують методи та властивості від {{jsxref("Function.prototype")}}. Як і в усіх конструкторах, ви можете змінити об'єкт прототипу конструктора, щоб внести зміни до усіх екземплярів Function.

+ +

Приклади

+ +

Визначення аргументів у конструкторі Function

+ +

Наступний код створює об'єкт Function, що приймає два аргументи.

+ +
// Цей приклад можна запустити прямо у консолі JavaScript
+
+// Створити функцію, що приймає два аргументи та повертає суму цих аргументів
+var adder = new Function('a', 'b', 'return a + b');
+
+// Виклик функції
+adder(2, 6);
+// > 8
+
+ +

Аргументи "a" та "b" є іменами формальних аргументів, які використовуються у тілі функції, "return a + b".

+ +

Різниця між конструктором Function та оголошенням функції

+ +

Функції, створені конструктором Function, не утворюють замикань з контекстом свого cтворення; вони завжди cтворюються у глобальній області видимості. Під час виконання вони матимуть доступ лише до власних локальних змінних та глобальних змінних, а не до змінних з області видимості, де був створений конструктор Function. Це відрізняється від {{jsxref("eval")}} з кодом функціонального виразу.

+ +
var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // цей |x| звертається до глобального |x|
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // цей |x| звертається до локального |x|, записаного вище
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+ +

В той час, як цей код працює у веб-переглядачах, f1() спричинить ReferenceError у Node.js, через те, що x не буде знайдено. Це відбувається тому, що область видимості верхнього рівня у Node не є глобальною областю видимості, і x буде локальною змінною модуля.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.3', 'Function')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-objects', 'Function')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Function")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html b/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html new file mode 100644 index 0000000000..65c42052c7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html @@ -0,0 +1,56 @@ +--- +title: Function.prototype.isGenerator() +slug: Web/JavaScript/Reference/Global_Objects/Function/isGenerator +tags: + - Function + - JavaScript + - застарілий + - метод + - нестандартний +translation_of: Archive/Web/JavaScript/Function.isGenerator +--- +
{{JSRef}} {{non-standard_header}}
+ +

Нестандартний метод isGenerator() використовувався для визначення, чи є функція генератором. Він був видалений з Firefox, починаючи з версії 58.

+ +

Синтаксис

+ +
fun.isGenerator()
+ +

Значення, що повертається

+ +

Значення {{jsxref("Boolean")}}, яке вказує, чи є надана функція генератором.

+ +

Опис

+ +

Метод isGenerator() визначає, чи є функція fun генератором. Він був частиною ранніх пропозицій специфікації Harmony, але не був включений у специфікацію ECMAScript 2015.

+ +

Приклади

+ +
function f() {}
+
+function* g() {
+  yield 42;
+}
+
+console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false
+console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Реалізований у JavaScript 1.8.6.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.isGenerator")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/length/index.html b/files/uk/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..b5968dd976 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,91 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +
{{JSRef}}
+ +

Властивість length зазначає кількість параметрів, очікуваних функцією.

+ +
{{EmbedInteractiveExample("pages/js/function-length.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Опис

+ +

length - це властивість функціонального об'єкта, вона вказує, скільки аргументів очікує функція, тобто кількість формальних параметрів. Ця кількість не включає {{jsxref("rest_parameters", "залишкові параметри", "", 1)}}, і рахує лише параметри до першого, що має значення по замовчуванню. Для контрасту, властивість {{jsxref("Functions/arguments/length", "arguments.length")}} є локальною властивістю функції, і надає кількість аргументів, що фактично передані у функцію.

+ +

Властивість конструктора Function

+ +

Конструктор {{jsxref("Function")}} теж є об'єктом {{jsxref("Function")}}. Його властивість length має значення 1. Атрибути властивості такі: Writable (доступний для запису): false, Enumerable (доступний для переліку): false, Configurable (доступний для налаштування): true.

+ +

Властивість об'єкта прототипу Function

+ +

Властивість об'єкта прототипу {{jsxref("Function")}} має значення 0.

+ +

Приклади

+ +
console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 і т.д. */
+
+console.log((function(...args) {}).length);
+// 0, залишкові параметри не рахуються
+
+console.log((function(a, b = 1, c) {}).length);
+// 1, рахуються тільки параметри, розташовані до першого,
+// який має значення за замовчуванням
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ES6')}}Атрибут configurable цієї властивості тепер дорівнює true.
{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.length")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/name/index.html b/files/uk/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..9fa89c9f14 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,223 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +
{{JSRef}}
+ +

Властивість тільки для читання об'єкта {{jsxref("Function")}} name відображає ім'я функції, яке було вказане при створенні, або "anonymous" для анонімних функцій.

+ +

{{EmbedInteractiveExample("pages/js/function-name.html")}}

+ + + +

{{js_property_attributes(0,0,1)}}

+ +
+

Зауважте, що у нестандартних реалізаціях до ES2015 атрибут configurable (доступний для налаштування) також мав значення false.

+
+ +

Приклади

+ +

Ім'я функції

+ +

Властивість name повертає ім'я функції.

+ +
function doSomething() {}
+console.log(doSomething.name); // "doSomething"
+
+ +

Ім'я конструктора функції

+ +

Функції, створені за допомогою new Function(...) або просто Function(...) створюють об'єкти {{jsxref("Function")}}, а їхнє ім'я "anonymous".

+ +
(new Function).name; // "anonymous"
+ +

Виведені імена функцій

+ +

Змінні та методи можуть вивести ім'я анонімної функції з її синтаксичної позиції (нове у ECMAScript 2015).

+ +
var f = function() {};
+var object = {
+  someMethod: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(object.someMethod.name); // "someMethod"
+
+ +

Ви можете оголосити функцію з ім'ям у {{jsxref("Operators/Function", "функціональному виразі", "", 1)}}:

+ +
var object = {
+  someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // виведе "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+
+ +

Ви не можете змінювати ім'я функції, ця властивість доступна лише для читання:

+ + + +
var object = {
+  // anonymous
+  someMethod: function() {}
+};
+
+object.someMethod.name = 'otherMethod';
+console.log(object.someMethod.name); // someMethod
+
+ +

Однак, щоб змінити її, ви можете скористатись {{jsxref("Object.defineProperty()")}}.

+ +

Імена лаконічних методів

+ +
var o = {
+  foo(){}
+};
+o.foo.name; // "foo";
+ +

Імена зв'язаних функцій

+ +

Метод {{jsxref("Function.bind()")}} створює функцію, чиїм ім'ям буде "bound" плюс ім'я функції.

+ +
function foo() {};
+foo.bind({}).name; // "bound foo"
+ +

Імена функцій для гетерів та сетерів

+ +

При використанні властивостей-аксесорів get та set у імені функції з'являється "get" або "set".

+ +
let o = {
+  get foo(){},
+  set foo(x){}
+};
+
+var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
+descriptor.get.name; // "get foo"
+descriptor.set.name; // "set foo";
+ +

Імена функцій у класах

+ +

Ви можете скористатись obj.constructor.name, щоб перевірити "клас" об'єкта (але обов'язково прочитайте застереження нижче):

+ +
function Foo() {}  // Синтаксис ES2015: class Foo {}
+
+var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // виводить "Foo"
+ +
+

Застереження: Інтерпретатор коду встановить значення вбудованої властивості Function.name тільки якщо функція не має своєї властивості з назвою name (дивіться розділ 9.2.11 ECMAScript2015 Language Specification). Однак, ES2015 визначає ключове слово static таким чином, що статичні методі встановлюються як OwnProperty функції-конструктора класу (ECMAScript2015, 14.5.14.21.b12.2.6.9).

+
+ +

І тому ми не можемо отримати ім'я класу фактично для жодного класу, що має статичний метод name():

+ +
class Foo {
+  constructor() {}
+  static name() {}
+}
+ +

З методом static name()Foo.name тепер містить не ім'я класу, а посилання на функцію name(). Наведене вище оголошення класу у синтаксисі ES2015 буде поводитись у Chrome чи Firefox схоже на наступний фрагмент коду у синтаксисі ES5:

+ +
function Foo() {}
+Object.defineProperty(Foo, 'name', { writable: true });
+Foo.name = function() {};
+ +

Спроба отримати клас fooInstance через fooInstance.constructor.name поверне нам зовсім не ім'я класу, а посилання на статичний метод класу. Приклад:

+ +
let fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // виводить function name()
+ +

Ви могли також побачити у прикладі з синтаксисом ES5, що у Chrome чи Firefox наше статичне оголошення Foo.name стає доступним для запису. Вбудоване оголошення за відсутності користувацького статичного методу є доступним лише для читання:

+ +
Foo.name = 'Привіт';
+console.log(Foo.name);
+// виведе "Привіт", якщо клас має статичну властивість name(), інакше виведе "Foo".
+ +

Таким чином, не можна розраховувати, що вбудована властивість Function.name завжди міститиме ім'я класу.

+ +

Символи в якості імен функцій

+ +

Якщо {{jsxref("Symbol")}} використовується в якості імені функції і має опис, ім'ям метода буде опис у квадратних дужках.

+ +
let sym1 = Symbol("foo");
+let sym2 = Symbol();
+let o = {
+  [sym1]: function(){},
+  [sym2]: function(){}
+};
+
+o[sym1].name; // "[foo]"
+o[sym2].name; // ""
+ +

Компресори та мініфікатори JavaScript

+ +
+

Застереження: Будьте обережні, використовуючи Function.name та перетворення коду, які здійснюють компресори (мініфікатори) або обфускатори JavaScript. Ці інструменти часто використовуються як частина конвеєра збірки JavaScript, щоб зменшити розмір програми перед розгортанням  у виробничому середовищі. Такі перетворення часто змінюють ім'я функції під час збірки.

+
+ +

Подібний першокод:

+ +
function Foo() {};
+let foo = new Foo();
+
+if (foo.constructor.name === 'Foo') {
+  console.log("'foo' є екземпляром 'Foo'");
+} else {
+  console.log('Ой-ой!');
+}
+ +

може бути стиснутий до:

+ +
function a() {};
+let b = new a();
+if (b.constructor.name === 'Foo') {
+  console.log("'foo' є екземпляром 'Foo'");
+} else {
+  console.log('Ой-ой!');
+}
+ +

У нестиснутій версії, програма виконує правдиву гілку і виводить "'foo' є екземпляром 'Foo'". В той час, як у стиснутій версії вона поводиться по-іншому і виконує гілку else. Якщо ви покладаєтесь на Function.name, як у наведеному вище прикладі, переконайтесь, що ваш конвеєр збірки не змінює імена функцій, або не припускайте, що функція матиме певне ім'я.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-name', 'name')}}{{Spec2('ES6')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-name', 'name')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Function.name")}}

+ +
diff --git a/files/uk/web/javascript/reference/global_objects/function/prototype/index.html b/files/uk/web/javascript/reference/global_objects/function/prototype/index.html new file mode 100644 index 0000000000..0b1e30cad1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/prototype/index.html @@ -0,0 +1,99 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +tags: + - Function + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +
{{JSRef}}
+ +

Властивість Function.prototype є об'єктом прототипу {{jsxref("Function")}}.

+ +

Опис

+ +

Об'єкти {{jsxref("Function")}} успадковуються від Function.prototypeFunction.prototype не можна змінити.

+ +

Властивості

+ +
+
{{jsxref("Function.prototype.arguments")}} {{deprecated_inline}}
+
Масив, що відповідає аргументам, переданим у функцію. Це застаріла властивість {{jsxref("Function")}}. Використовуйте натомість об'єкт {{jsxref("Functions/arguments", "arguments")}}, доступний всередині функції.
+
{{jsxref("Function.arity")}} {{obsolete_inline}}
+
Вказувала кількість аргументів, очікуваних функцією, але була видалена. Використовуйте натомість властивість {{jsxref("Function.length", "length")}}.
+
{{jsxref("Function.prototype.caller")}} {{non-standard_inline}}
+
Вказує функцію, що викликала функцію, яка виконується.
+
{{jsxref("Function.prototype.length")}}
+
Вказує кількість аргументів, очікуваних функцією.
+
{{jsxref("Function.prototype.name")}}
+
Ім'я функції.
+
{{jsxref("Function.displayName")}} {{non-standard_inline}}
+
Ім'я, що відображається для функції.
+
Function.prototype.constructor
+
Вказує функцію, яка створює прототип об'єкта. Більше інформації дивіться на сторінці {{jsxref("Object.prototype.constructor")}}.
+
+ +

Методи

+ +
+
{{jsxref("Function.prototype.apply()")}}
+
Викликає функцію та встановлює її this надане значення, аргументи можуть передаватися об'єктом {{jsxref("Array")}}.
+
{{jsxref("Function.prototype.bind()")}}
+
Створює нову функцію, в якої під час виклику this присвоєне надане значення, з заданою послідовністю аргументів, що передують будь-якім іншим наданим аргументам під час виклику нової функції.
+
{{jsxref("Function.prototype.call()")}}
+
Викликає (виконує) функцію та присвоює її this надане значення, аргументи можуть передаватися як є.
+
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
+
Повертає true, якщо функція є генератором; інакше повертає false.
+
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toSource")}}.
+
{{jsxref("Function.prototype.toString()")}}
+
Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toString")}}.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/tosource/index.html b/files/uk/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..a4a3cb4d16 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,70 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Function/toSource +tags: + - Function + - JavaScript + - метод + - нестандартний +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

Метод toSource() повертає рядкове представлення першокоду об'єкта.

+ +

Синтаксис

+ +
function.toSource();
+
+ +

Значення, що повертається

+ +

Рядкове представлення першокоду об'єкта.

+ +

Опис

+ +

Метод toSource повертає наступні значення:

+ + + +

Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді. Ви можете викликати toSource() під час налагодження для дослідження вмісту об'єкта.

+ +

Специфікації

+ +

Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.toSource")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/function/tostring/index.html b/files/uk/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..5c4b58e347 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,233 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Function/toString +tags: + - Function + - JavaScript + - Prototype + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +
{{JSRef}}
+ +

Метод toString() повертає рядкове представлення першокоду функції.

+ +
{{EmbedInteractiveExample("pages/js/function-tostring.html")}}
+ + + +

Синтаксис

+ +
function.toString()
+ +

Значення, що повертається

+ +

Рядкове представлення першокоду функції.

+ +

Опис

+ +

Об'єкт {{jsxref("Function")}} заміщує метод {{jsxref("Object.prototype.toString", "toString")}}, успадкований від {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString")}}. Для визначених користувачем об'єктів {{jsxref("Function")}} метод toString повертає рядок, який містить текстовий сегмент першокоду, що використовувався для визначення функції.

+ +

JavaScript викликає метод toString автоматично, коли {{jsxref("Function")}} потрібно відобразити у вигляді текстового значення, наприклад, при поєднанні функції з рядком.

+ +

Метод toString() викине виняток типу {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object"), якщо його значення this не є об'єктом Function.

+ +
Function.prototype.toString.call('foo'); // TypeError
+
+ +

Якщо метод toString() викликається на вбудованих функціональних об'єктах або функціях, створених Function.prototype.bind, toString() повертає рядок нативної функції, який виглядає так:

+ +
"function () {\n    [native code]\n}"
+
+ +

Якщо метод toString() викликається на функції, створеної конструктором Function, toString() повертає першокод синтезованої декларації функції, названої "anonymous", з наданими параметрами та тілом функції.

+ +

Приклади

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункціяРезультат Function.prototype.toString
+
+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(){}"
+
+
+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}"
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціїСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізовано у JavaScript 1.1.
{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}{{Spec2('ES6')}}Додані ще специфічні вимоги до рядкового представлення.
Function.prototype.toString revisions proposalЧернеткаСтандартизує рядок нативної функції, закінчення рядків.
{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.toString")}}

+
+ +

Примітки щодо Firefox

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/generator/index.html b/files/uk/web/javascript/reference/global_objects/generator/index.html new file mode 100644 index 0000000000..30ac13af34 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/index.html @@ -0,0 +1,138 @@ +--- +title: Generator +slug: Web/JavaScript/Reference/Global_Objects/Generator +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Довідка + - генератор + - застарілий генератор + - застарілий ітератор +translation_of: Web/JavaScript/Reference/Global_Objects/Generator +--- +
{{JSRef}}
+ +

Об'єкт Generator повертається {{jsxref("Statements/function*", "функцією-генератором", "", 1)}} та відповідає як протоколу ітерабельного об'єкта, так і протоколу ітератора.

+ +

Синтаксис

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+ +

Методи

+ +
+
{{jsxref("Generator.prototype.next()")}}
+
Повертає значення, видане виразом {{jsxref("Operators/yield", "yield")}}.
+
{{jsxref("Generator.prototype.return()")}}
+
Повертає надане значення та завершує генератор.
+
{{jsxref("Generator.prototype.throw()")}}
+
Викидає помилку у генераторі (також завершує генератор, якщо помилка не була перехоплена всередині генератора).
+
+ +

Приклад

+ +

Нескінченний ітератор

+ +
function* idMaker() {
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+ +

Застарілі об'єкти-генератори

+ +

Firefox (SpiderMonkey) також реалізував більш ранню версію генераторів у JavaScript 1.7, де зірочка (*) у оголошенні функції не була потрібна (ви просто використовували ключове слово yield у тілі функції). Однак, підтримка застарілих генераторів була прибрана, починаючи з Firefox 58 (вийшов 23 січня, 2018) ({{bug(1083482)}}).

+ +

Методи застарілого генератора

+ +
+
Generator.prototype.next() {{non-standard_inline}}
+
Повертає значення, видане виразом {{jsxref("Operators/yield", "yield")}}. Цей метод відповідає методу next() у об'єкті-генераторі ES2015.
+
Generator.prototype.close() {{non-standard_inline}}
+
Закриває генератор, таким чином, виклик next() викине помилку StopIteration. Цей метод відповідає методу return() у об'єкті-генераторі ES2015.
+
Generator.prototype.send() {{non-standard_inline}}
+
Відсилав значення у генератор. Значення повертається виразом {{jsxref("Operators/yield", "yield")}} та повертає значення, видане наступним виразом {{jsxref("Operators/yield", "yield")}}. Метод send(x) відповідає методу next(x) у об'єкті-генераторі ES2015.
+
Generator.prototype.throw() {{non-standard_inline}}
+
Викидає помилку у генераторі. Цей метод відповідає методу throw() у об'єкті-генераторі ES2015.
+
+ +

Приклад застарілого генератора

+ +
function* fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // викидає StopIteration (бо генератор вже закритий)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Generator")}}

+ +

Див. також

+ +

Застарілі генератори

+ + + +

Генератори ES2015

+ + diff --git a/files/uk/web/javascript/reference/global_objects/generator/next/index.html b/files/uk/web/javascript/reference/global_objects/generator/next/index.html new file mode 100644 index 0000000000..ea558c04ed --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/next/index.html @@ -0,0 +1,114 @@ +--- +title: Generator.prototype.next() +slug: Web/JavaScript/Reference/Global_Objects/Generator/next +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next +--- +
{{JSRef}}
+ +

Метод next() повертає об'єкт з двома властивостями, done та value. Ви також можете передати параметр у метод next, щоб передати значення у генератор.

+ +

Синтаксис

+ +
gen.next(value)
+ +

Параметри

+ +
+
value
+
Значення, яке передається генератору. Значення буде присвоєне як результат виразу yield, тобто, у [variable] = yield [expression], значення, передане у функцію .next, буде присвоєне [variable]
+
+ +

Значення, що повертається

+ +

Об'єкт з двома властивостями:

+ + + +

Приклади

+ +

Використання next()

+ +

Наступний приклад демонструє простий генератор та об'єкт, що його вертає метод next:

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+
+ +

Передача значень генератору

+ +

В цьому прикладі next викликається зі значенням. Зауважте, що перший виклик нічого не залогував, тому що генератор початково нічого не видавав.

+ +
function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Generator.next")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/generator/return/index.html b/files/uk/web/javascript/reference/global_objects/generator/return/index.html new file mode 100644 index 0000000000..fd1ebcbeee --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/return/index.html @@ -0,0 +1,101 @@ +--- +title: Generator.prototype.return() +slug: Web/JavaScript/Reference/Global_Objects/Generator/return +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return +--- +
{{JSRef}}
+ +

Метод return() вертає надане значення та завершує генератор.

+ +

Синтаксис

+ +
gen.return(value)
+ +

Параметри

+ +
+
value
+
Значення, яке треба повернути.
+
+ +

Значення, що повертається

+ +

Значення, надане як аргумент.

+ +

Приклади

+ +

Використання return()

+ +

Наступний приклад демонструє простий генератор та метод return.

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();        // { value: 1, done: false }
+g.return('foo'); // { value: "foo", done: true }
+g.next();        // { value: undefined, done: true }
+
+ +

Якщо return(value) викликається на генераторі, який вже знаходиться у "завершеному" стані, він залишиться у "завершеному" стані. Якщо жодного аргументу не надано, властивість value поверненого об'єкта буде такою ж, як при виклику .next(). Якщо аргумент надано, він буде присвоєний як значення властивості value поверненого об'єкта.

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+g.next(); // { value: 1, done: false }
+g.next(); // { value: 2, done: false }
+g.next(); // { value: 3, done: false }
+g.next(); // { value: undefined, done: true }
+g.return(); // { value: undefined, done: true }
+g.return(1); // { value: 1, done: true }
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Generator.return")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/generator/throw/index.html b/files/uk/web/javascript/reference/global_objects/generator/throw/index.html new file mode 100644 index 0000000000..ec8fc9d937 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/throw/index.html @@ -0,0 +1,100 @@ +--- +title: Generator.prototype.throw() +slug: Web/JavaScript/Reference/Global_Objects/Generator/throw +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw +--- +
{{JSRef}}
+ +

Метод throw() відновлює виконання генератора викиданням у ньому помилки та повертає об'єкт з двома властивостями, done та value.

+ +

Синтаксис

+ +
gen.throw(exception)
+ +

Параметри

+ +
+
exception
+
Виняток, який треба викинути. З метою налагоджування корисно робити його instanceof {{jsxref("Error")}}.
+
+ +

Значення, що повертається

+ +

Об'єкт з двома властивостями:

+ + + +

Приклади

+ +

Використання throw()

+ +

Наступний приклад демонструє простий генератор та помилку, що викидається методом throw. Помилку, як завжди, можна перехопити блоком try...catch.

+ +
function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log('Перехоплено помилку!');
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error('Щось пішло не за планом'));
+// "Перехоплено помилку!"
+// { value: 42, done: false }
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Generator.throw")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html b/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..cb529b5095 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,114 @@ +--- +title: GeneratorFunction +slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +tags: + - ECMAScript 2015 + - GeneratorFunction + - JavaScript + - Ітератор + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +--- +
{{JSRef}}
+ +

Конструктор GeneratorFunction створює новий об'єкт {{jsxref("Statements/function*", "функції-генератора")}}. У JavaScript кожна функція-генератор насправді є об'єктом GeneratorFunction.

+ +

Зауважте, що GeneratorFunction не є глобальним об'єктом. Його можна отримати, виконавши наступний код.

+ +
Object.getPrototypeOf(function*(){}).constructor
+
+ +

Синтаксис

+ +
new GeneratorFunction ([arg1[, arg2[, ...argN]],] functionBody)
+ +

Параметри

+ +
+
arg1, arg2, ... argN
+
Імена, що використовуватиме функція в якості імен формальних аргументів. Кожне повинне бути рядком, що є коректним ідентифікатором JavaScript або списком таких рядків, розділених комою; наприклад, "x", "theValue" або "a,b".
+
functionBody
+
Рядок, що містить інструкції JavaScript, які складають визначення функції.
+
+ +

Опис

+ +

Об'єкти {{jsxref("Statements/function*", "функцій-генераторів")}}, створені конструктором GeneratorFunction, розбираються, коли створюється функція. Це менш ефективно, ніж оголошення функції-генератора {{jsxref("Statements/function*", "виразом function*")}} та її виклик у вашому коді, тому що такі функції розбираються з рештою коду.

+ +

Усі аргументи, передані у функцію, вважаються іменами ідентифікаторів параметрів функції, яка має бути створена, у порядку, в якому вони були передані.

+ +
+

Заувага: {{jsxref("Statements/function*", "функції-генератори")}}, створені конструктором GeneratorFunction, не створюють замикань зі своїм контекстом виконання; вони завжди створюються у глобальній області видимості. Під час виконання вони мають доступ лише до власних локальних змінних та до глобальних, але не до змінних області видимості, в якій був викликаний конструктор GeneratorFunction. Це відрізняється від використання {{jsxref("Global_Objects/eval", "eval")}} з кодом для виразу функції-генератора.

+
+ +

Виклик конструктора GeneratorFunction як функції (без оператора new) має такий самий ефект, як і виклик його як конструктора.

+ +

Властивості

+ +
+
GeneratorFunction.length
+
Властивість довжини конструктора GeneratorFunction, чиє значення дорівнює 1.
+
{{jsxref("GeneratorFunction.prototype")}}
+
Дозволяє додавати властивості до усіх об'єктів функцій-генераторів.
+
+ +

Прототип GeneratorFunction

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype', 'Властивості')}}
+ +

Екземпляри GeneratorFunction

+ +

Екземпляри GeneratorFunction успадковують методи та властивості від {{jsxref("GeneratorFunction.prototype")}}. Як в усіх конструкторах, ви можете змінити прототип конструктора, щоб внести зміни до усіх екземплярів GeneratorFunction.

+ +

Приклади

+ +

Створення функції-генератора від конструктора GeneratorFunction

+ +
var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction('a', 'yield a * 2');
+var iterator = g(10);
+console.log(iterator.next().value); // 20
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.GeneratorFunction")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html new file mode 100644 index 0000000000..8f8fcce4c0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html @@ -0,0 +1,65 @@ +--- +title: GeneratorFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +tags: + - ECMAScript 2015 + - GeneratorFunction + - JavaScript + - Ітератор + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +--- +
{{JSRef}}
+ +

Властивість GeneratorFunction.prototype відображає прототип {{jsxref("GeneratorFunction")}}.

+ +

Опис

+ +

Об'єкти {{jsxref("GeneratorFunction")}} успадковуються від GeneratorFunction.prototype. GeneratorFunction.prototype не можна змінювати.

+ +

Властивості

+ +
+
GeneratorFunction.constructor
+
Початковим значенням є {{jsxref("GeneratorFunction")}}.
+
GeneratorFunction.prototype.prototype
+
Значення дорівнює %GeneratorPrototype%.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.GeneratorFunction.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/globalthis/index.html b/files/uk/web/javascript/reference/global_objects/globalthis/index.html new file mode 100644 index 0000000000..1ca1578f97 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/globalthis/index.html @@ -0,0 +1,87 @@ +--- +title: globalThis +slug: Web/JavaScript/Reference/Global_Objects/globalThis +translation_of: Web/JavaScript/Reference/Global_Objects/globalThis +--- +
{{jsSidebar("Objects")}}
+ +

Глобальна властивість globalThis містить значення глобального this, яке являється глобальним об'єктом.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}
+ + + +

{{JS_Property_Attributes(1, 0, 1)}}

+ +

Синтакс

+ +
globalThis
+
+ +

Опис

+ +

Історично, для доступу до глобальних об'єктів використовується різний синтаксис в різних оточеннях JavaScript. В Веб ви можете використовувати {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}}, або {{domxref("Window.frames", "frames")}} - але в Веб Воркерах лише self працюватиме. В Node.js нічого з вище-перерахоованого не працюватиме, і ви повинні використовувати global.
+ Ключове слово this ви можете використовувати в середині функцій в не-суворому режимі, інакше this буде undefined в Модулях та в середині функцій в суворому режимі. Ви також можете використовувати Function('return this')(), але середовища, що відключають {{jsxref("eval", "eval()")}}, типу CSP в браузерах, перешкоджають використанню {{jsxref("Function")}} в такому вигляді.

+ +

Властивість globalThis надає стандартний метод доступу до глобального значення this (і як наслідок, безпосередньо до глобального об'єкту) не залежно від середовища. Навідміну від подібних властивостей, таких як window та self, воно гарантує роботу в середовищі де є window та де його немає. Таким чином, ви можете отримати доступ до глобального об'єкту навіть не знаючи в якому середовищі працює код. Щоб запам'ятати назву, просто запам'ятайте що в глобальному отчені значення this дорівнює globalThis.

+ +

HTML та WindowProxy

+ +

В різних двіжках об'єкт globalThis буде посиланням до безпосередього глобального об'єкту, але в браузерах, через міркування безпеки в iframe та cross-window взаємодії, він є посиланням до {{jsxref("Proxy")}} навколо фактичного глобалього об'єкту(до якого ви не можете звернутися безпосередньо). Ця відмінність рідко є актуальною для загального використання, але важливо її запам'ятати.

+ +

Іменування

+ +

Деякі інші популярні варіанти імен, такі як self та global були видалені з розгляду через їх схильність порушити сумістність з існуючим кодом. Детальніше дивіться  документ мовних пропозиції.

+ +

Приклади

+ +

Задовго до globalThis, єдиним надійним крос-платформенним варіантом  отримати глобальний об'єкт для оточення був Function('return this')(). Однак, він був причиною CSP порушень в деяких налаштуваннях, таким чином es6-shim використовує додаткову перевірку, наприклад:

+ +
var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error('unable to locate global object');
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // нема setTimeout в даному оточенні!
+}
+
+ +

За допомогою globalThis, додатковий пошук/перевірки для глобального об'єкту не потрібні більше:

+ +
if (typeof globalThis.setTimeout !== 'function') {
+  // нема setTimeout в даному оточенні!
+}
+ +

Специфікації

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("ESDraft", "#sec-globalthis", "globalThis")}}{{Spec2("ESDraft")}}
+ +

Браузерна Сумістність

+ + + +

{{Compat("javascript.builtins.globalThis")}}

+ +

Процес впровадження

+ +

Наступна таблиця надає денний статус впровадження для цього нововведення, оскільки  globalThis не отримала крос-браузерну стабільність. Дані згенеровані запуском відносних тестів вTest262, стандартного набору JavaScript тестів, в нічній збірці, або останього релізу для кожного браузерного JavaScript "ядра".

+ +
{{EmbedTest262ReportResultsTable("globalThis")}}
diff --git a/files/uk/web/javascript/reference/global_objects/index.html b/files/uk/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..9d69b8718a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/index.html @@ -0,0 +1,193 @@ +--- +title: Стандартні вбудовані об'єкти +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - Джава Скріпт +translation_of: Web/JavaScript/Reference/Global_Objects +--- +
{{jsSidebar("Objects")}}
+ +

У цьому розділі задокументовано всі стандарти  JavaScript, вбудовані об'єкти, включаючи їх методи і поля.

+ +
+

Термін "глобальні об'єкти" ("global objects") (або стандартні вбудовані об'єкти) тут не варто плутати з глобальними об'єктами (global object). Тут, глобальні об'єкти посилаються на об'єкти в глобальній області видимості (але якщо не використовується строгий режим ECMAScript 5; в такому випадку буде повертатися {{jsxref("undefined")}}). Глобальний об'єкт може бути доступний через оператор {{jsxref("Operators/this", "this")}} в глобальній області видимості. Фактично, глобальна область видимості складається з полів глобальної області видимості, включаючи успадковані поля, якщо такі є.

+ +

Всі інші об'єкти в глобальній області видимості є або створені скріптами користувача або передані хост-додатком. Хост об'єкти доступні в контексті браузера і є задокументованими в цьому API посиланні. Для більш детальної інформації щодо відмінностей DOM і основ JavaScript, дивіться огляд технологій JavaScript.

+ +

Стандартні об'єкти по категоріях

+ +

Поля значень

+ +

Ці глобальні поля повертають просте значення; вони не мають жодних полів або методів.

+ + + +

Поля методів

+ +

Ці глобальні методи — це методи, які викликаються глобально частіше, ніж на об'єкті і безпосередньо повертають свій результат виконання тому, хто викликав ці методи.

+ + + +

Базові об'єкти

+ +

Ці об'єкти є базовими або фундаментальними, на яких базуються всі інші об'єкти. Вони включають об'єкти, які відображають загальні об'єкти (general objects), методи (functions) або помилки (errors).

+ + + +

Числа і дати

+ +

Ці базові об'єкти відображають числа (numbers), дати (dates), або математичні операції (mathematical calculations).

+ + + +

Обробка тексту

+ +

Ці об'єкти відображають рядки і підтримують їх обробку.

+ + + +

Індексовані колекції

+ +

Ці об'єкти відображають колекції даних, які відсортовані по значенню індекса. Вони включають типізовані масиви і масиво-подібні конструкції.

+ + + +

Колекції по ключах

+ +

Ці об'єкти відображають колекції, які використовують ключі; вони містять елементи, котрі ітеруються в порядку вставлення в колекцію.

+ + + +

Колекції векторів

+ +

{{Glossary("SIMD")}} векторні типи даних є об'єктами, в яких дані розташовані в лініях.

+ + + +

Структурні дані

+ +

Ці об'єкти відображають і взаємодіють з структурованими буферами даних і зашифрованими даними JavaScript Object Notation (JSON).

+ + + +

Об'єкти контролю абстракціями

+ + + +

Відображення

+ + + +

Інтернаціоналізація

+ +

Доповнення до основ ECMAScript для чутливих до мови функціональних можливостей.

+ + + +

Нестандартні об'єкти

+ + + +

Інші

+ + +
+ +

 

diff --git a/files/uk/web/javascript/reference/global_objects/infinity/index.html b/files/uk/web/javascript/reference/global_objects/infinity/index.html new file mode 100644 index 0000000000..5224164faa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/infinity/index.html @@ -0,0 +1,79 @@ +--- +title: Infinity +slug: Web/JavaScript/Reference/Global_Objects/Infinity +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +
{{jsSidebar("Objects")}}
+ +

Глобальна властивість Infinity є числовим значенням, що представляє нескінченність.

+ +

{{js_property_attributes(0,0,0)}}

+ +
{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}
+ + + +

Опис

+ +

Infinity - це властивість глобального об'єкта, або, іншими словами, змінна глобальної області видимості.

+ +

Початкове значення Infinity дорівнює {{jsxref("Number.POSITIVE_INFINITY")}}. Значення Infinity (позитивна нескінченність) більше будь-якого іншого числа. Математично це значення поводиться так само, як нескінченність; наприклад, будь-яке позитивне число, помножене на Infinity, дорівнює Infinity, а будь-яке число, розділене на Infinity, дорівнює 0.

+ +

Як визначено у специфікації ECMAScript 5, Infinity є властивістю тільки для читання (реалізовано у JavaScript 1.8.5 / Firefox 4).

+ +

Приклади

+ +
console.log(Infinity          ); /* Infinity */
+console.log(Infinity + 1      ); /* Infinity */
+console.log(Math.pow(10, 1000)); /* Infinity */
+console.log(Math.log(0)       ); /* -Infinity */
+console.log(1 / Infinity      ); /* 0 */
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізовано у JavaScript 1.3
{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Infinity")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/internalerror/index.html b/files/uk/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..59e8b06396 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,83 @@ +--- +title: InternalError +slug: Web/JavaScript/Reference/Global_Objects/InternalError +tags: + - Error + - InternalError + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +
{{JSRef}} {{non-standard_header}}
+ +

Об'єкт InternalError позначає внутрішню помилку, що виникла у рушії JavaScript. Наприклад: "InternalError: too much recursion".

+ +

Синтаксис

+ +
new InternalError([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message
+
Необов'язковий. Зрозумілий людині опис помилки.
+
fileName {{non-standard_inline}}
+
Необов'язковий. Ім'я файлу, код з якого спричинив виняток.
+
lineNumber {{non-standard_inline}}
+
Необов'язковий. Номер рядка в коді, що спричинив виняток.
+
+ +

Опис

+ +

Виняток InternalError викидається, коли виникає внутрішня помилка у рушії JavaScript.

+ +

Приклади використання здебільшого стосуються випадків, коли чогось забагато, наприклад:

+ + + +

Властивості

+ +
+
{{jsxref("InternalError.prototype")}}
+
Дозволяє додавати властивості до об'єктів InternalError.
+
+ +

Методи

+ +

Сам InternalError не має власних методів, але успадковує деякі методи через ланцюжок прототипів.

+ +

Екземпляри InternalError

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Методи')}}
+ +

Специфікації

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ +
+
+ + +

{{Compat("javascript.builtins.InternalError")}}

+
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html new file mode 100644 index 0000000000..bedf48c367 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html @@ -0,0 +1,62 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +tags: + - Error + - InternalError + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +
{{JSRef}} {{non-standard_header}}
+ +

Властивість InternalError.prototype є прототипом конструктора {{jsxref("InternalError")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("InternalError")}} успадковуються від InternalError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
InternalError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}
+
Повідомлення помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("InternalError")}} не має власних методів, екземпляри {{jsxref("InternalError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

Специфікації

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.InternalError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/isfinite/index.html b/files/uk/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..d1c89ad117 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,88 @@ +--- +title: isFinite() +slug: Web/JavaScript/Reference/Global_Objects/isFinite +tags: + - JavaScript + - isFinine + - Довідка + - метод + - функції +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +
{{jsSidebar("Objects")}}
+ +

Глобальна функція isFinite() визначає, чи є передане значення скінченним числом. За необхідності, параметр спочатку приводиться до числа.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}
+ + + +

Синтаксис

+ +
isFinite(testValue)
+ +

Параметри

+ +
+
testValue
+
Значення, яке потрібно перевірити на скінченність.
+
+ +

Значення, що повертається

+ +

false, якщо аргумент є позитивною чи від'ємною {{jsxref("Infinity","нескінченністю")}}, або {{jsxref("NaN")}}, або {{jsxref("undefined")}}; інакше, true.

+ +

Опис

+ +

isFinite є функцією верхнього рівня, не пов'язаною з жодним об'єктом.

+ +

Ви можете скористатись цією функцією, щоб визначити, чи є значення скінченним числом. Функція isFinite досліджує число, передане у аргументі. Якщо аргумент дорівнює NaN, позитивній нескінченності чи від'ємній нескінченності, цей метод вертає false; інакше, він вертає true.

+ +

Приклади

+ +

Використання isFinite

+ +
isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+isFinite(910);       // true
+
+isFinite(null);      // true, дорівнювало б false з більш
+                     // надійним методом Number.isFinite(null)
+
+isFinite('0');       // true, дорівнювало б false з більш
+                     // надійним методом Number.isFinite("0")
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.isFinite")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/isnan/index.html b/files/uk/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..96077f3f93 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,190 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +
{{jsSidebar("Objects")}}
+ +

Функція isNaN() визначає, чи є передане значення типу {{jsxref("NaN")}} чи ні. Примітка: coercion всередині функціїisNaN має  цікаві правила використання; можливе альтернативне використання {{jsxref("Number.isNaN()")}}, як визначено у ECMAScript 2015.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}
+ +

Syntax

+ +
isNaN(value)
+ +

Parameters

+ +
+
value
+
The value to be tested.
+
+ +

Return value

+ +

true якщо дане значення є {{jsxref("NaN")}}; інакше, false.

+ +

Description

+ +

The necessity of an isNaN function

+ +

Unlike all other possible values in JavaScript, it is not possible to rely on the equality operators (== and ===) to determine whether a value is {{jsxref("NaN")}} or not, because both NaN == NaN and NaN === NaN evaluate to false. Hence, the necessity of an isNaN function.

+ +

Origin of NaN values

+ +

NaN values are generated when arithmetic operations result in undefined or unrepresentable values. Such values do not necessarily represent overflow conditions. A NaN also results from attempted coercion to numeric values of non-numeric values for which no primitive numeric value is available.

+ +

For example, dividing zero by zero results in a NaN — but dividing other numbers by zero does not.

+ +

Confusing special-case behavior

+ +

Since the very earliest versions of the isNaN function specification, its behavior for non-numeric arguments has been confusing. When the argument to the isNaN function is not of type Number, the value is first coerced to a Number. The resulting value is then tested to determine whether it is {{jsxref("NaN")}}. Thus for non-numbers that when coerced to numeric type result in a valid non-NaN numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." The confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as IEEE-754 floating-point values. The function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an IEEE-754 'Not A Number' value?"

+ +

The latest version of ECMAScript (ES2015) contains the {{jsxref("Number.isNaN()")}} function. Number.isNaN(x) will be a reliable way to test whether x is NaN or not. Even with Number.isNaN, however, the meaning of NaN remains the precise numeric meaning, and not simply, "not a number". Alternatively, in absense of Number.isNaN, the expression (x != x) is a more reliable way to test whether variable x is NaN or not, as the result is not subject to the false positives that make isNaN unreliable.

+ +

A polyfill for isNaN would be (the polyfill leverages the unique never-equal-to-itself characteristic of NaN):

+ +
var isNaN = function(value) {
+    var n = parseInt(value);
+    return n !== n;
+};
+ +

Examples

+ +
isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN('37');      // false: "37" is converted to the number 37 which is not NaN
+isNaN('37.37');   // false: "37.37" is converted to the number 37.37 which is not NaN
+isNaN("37,5");    // true
+isNaN('123ABC');  // true:  parseInt("123ABC") is 123 but Number("123ABC") is NaN
+isNaN('');        // false: the empty string is converted to 0 which is not NaN
+isNaN(' ');       // false: a string with spaces is converted to 0 which is not NaN
+
+// dates
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// This is a false positive and the reason why isNaN is not entirely reliable
+isNaN('blabla');   // true: "blabla" is converted to a number.
+                   // Parsing this as a number fails and returns NaN
+
+ +

Useful special-case behavior

+ +

There is a more usage oriented way to think of isNaN(): If isNaN(x) returns false, you can use x in an arithmetic expression not making the expression return NaN. If it returns true, x will make every arithmetic expression return NaN. This means that in JavaScript, isNaN(x) == true is equivalent to x - 0 returning NaN (though in JavaScript x - 0 == NaN always returns false, so you can't test for it). Actually, isNaN(x), isNaN(x - 0), isNaN(Number(x)), Number.isNaN(x - 0), and Number.isNaN(Number(x)) always return the same and in JavaScript isNaN(x) is just the shortest possible form to express each of these terms.

+ +

You can use this, for example, to test whether an argument to a function is arithmetically processable (usable "like" a number), or if it's not and you have to provide a default value or something else. This way you can have a function that makes use of the full versatility JavaScript provides by implicitly converting values depending on context.

+ +

Examples

+ +
function increment(x) {
+  if (isNaN(x)) x = 0;
+  return x + 1;
+}
+
+// The same effect with Number.isNaN():
+function increment(x) {
+  if (Number.isNaN(Number(x))) x = 0;
+  return x + 1;
+}
+
+// In the following cases for the function's argument x,
+// isNaN(x) is always false, although x is indeed not a
+// number, but can be used as such in arithmetical
+// expressions
+increment('');            // 1: "" is converted to 0
+increment(new String());  // 1: String object representing an empty string is converted to 0
+increment([]);            // 1: [] is converted to 0
+increment(new Array());   // 1: Array object representing an empty array is converted to 0
+increment('0');           // 1: "0" is converted to 0
+increment('1');           // 2: "1" is converted to 1
+increment('0.1');         // 1.1: "0.1" is converted to 0.1
+increment('Infinity');    // Infinity: "Infinity" is converted to Infinity
+increment(null);          // 1: null is converted to 0
+increment(false);         // 1: false is converted to 0
+increment(true);          // 2: true is converted to 1
+increment(new Date());    // returns current date/time in milliseconds plus 1
+
+// In the following cases for the function's argument x,
+// isNaN(x) is always false and x is indeed a number
+increment(-1);            // 0
+increment(-0.1);          // 0.9
+increment(0);             // 1
+increment(1);             // 2
+increment(2);             // 3
+// ... and so on ...
+increment(Infinity);      // Infinity
+
+// In the following cases for the function's argument x,
+// isNaN(x) is always true and x is really not a number,
+// thus the function replaces it by 0 and returns 1
+increment(String);            // 1
+increment(Array);             // 1
+increment('blabla');          // 1
+increment('-blabla');         // 1
+increment(0 / 0);               // 1
+increment('0 / 0');             // 1
+increment(Infinity / Infinity); // 1
+increment(NaN);               // 1
+increment(undefined);         // 1
+increment();                  // 1
+
+// isNaN(x) is always the same as isNaN(Number(x)),
+// but the presence of x is mandatory here!
+isNaN(x) == isNaN(Number(x)); // true for every value of x, including x == undefined,
+                              // because isNaN(undefined) == true and Number(undefined) returns NaN,
+                              // but ...
+isNaN() == isNaN(Number());   // false, because isNaN() == true and Number() == 0
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.isNaN")}}

+ +

See also

+ + diff --git a/files/uk/web/javascript/reference/global_objects/json/index.html b/files/uk/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..af5818da2a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,158 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +tags: + - JSON + - JavaScript + - Довідка + - Об'єкт +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +
{{JSRef}}
+ +

Об'єкт JSON містить методи для розбору JavaScript Object Notation ({{glossary("JSON")}}) і конвертації значень у JSON. Його можна або просто викликати, або конструювати; і окрім своїх двох методів він не має у собі іншої корисної функціональності.

+ +

Опис

+ +

Об'єктна нотація JavaScript

+ +

JSON - це синтаксис для серіалізації об'єктів, масивів, чисел, строк, булевих значень, та {{jsxref("null")}}. Він заснований на синтаксисі JavaScript, проте дещо відрізняється від нього: деякий JavaScript не є JSON, і деякий JSON не є JavaScript. Докладніше у JSON: The JavaScript subset that isn't.

+ + + + + + + + + + + + + + + + + + + + + + + +
Відмінності JavaScript і JSON
Тип у JavaScriptВідмінність у JSON
Об'єкти та масивиНазви полів повинні являти собою строки у подвійних лапках; прикінцеві коми заборонені.
ЧислаВедучі нулі також заборонені (При виконанні JSON.stringify нулі просто проігноруються, проте JSON.parse викине SyntaxError); після десяткової крапки повинна слідувати хоча б одна цифра.
Строки +

Лише обмежений набір символів можна екранувати; деякі керівні символи заборонені; такі символи юнікоду, як розділювач рядків (U+2028) та розділювач абзаців (U+2029) дозволені; строки повинні виділятись подвійними лапками. Зверніть увагу на наступні приклади, де {{jsxref("JSON.parse()")}} нормально працює, проте при обчисленні виразу як JavaScript-коду буде отримана помилка {{jsxref("SyntaxError")}}:

+ +
+var code = '"\u2028\u2029"';
+JSON.parse(code); // працює
+eval(code); // помилка
+
+
+ +

Повний синтаксис JSON виглядає так:

+ +
JSON = null
+    або true або false
+    або JSONNumber
+    або JSONString
+    або JSONObject
+    або JSONArray
+
+JSONNumber = - PositiveNumber
+          чи PositiveNumber
+PositiveNumber = DecimalNumber
+              або DecimalNumber . Digits
+              або DecimalNumber . Digits ExponentPart
+              або DecimalNumber ExponentPart
+DecimalNumber = 0
+             або OneToNine Digits
+ExponentPart = e Exponent
+            чи E Exponent
+Exponent = Digits
+        або + Digits
+        або - Digits
+Digits = Digit
+      чи Digits Digit
+Digit = від 0 до 9
+OneToNine = від 1 до 9
+
+JSONString = ""
+          чи " StringCharacters "
+StringCharacters = StringCharacter
+                чи StringCharacters StringCharacter
+StringCharacter = будь-який символ
+                  за виключенням " або \ або від U+0000 до U+001F
+               або EscapeSequence
+EscapeSequence = \" або \/ або \\ або \b або \f або \n або \r або \t
+              або \u HexDigit HexDigit HexDigit HexDigit
+HexDigit = від 0 до 9
+        або від A до F
+        або від a до f
+
+JSONObject = { }
+          чи { Members }
+Members = JSONString : JSON
+       чи Members , JSONString : JSON
+
+JSONArray = [ ]
+         чи [ ArrayElements ]
+ArrayElements = JSON
+             чи ArrayElements , JSON
+
+ +

Беззмістовні пробільні символи можуть бути будь-де за винятком JSONNumber (числа не повинні містити пробіли) або JSONString (де це сприймається за частину строки, або призведе до помилки). Символ табуляції (U+0009), повернення каретки (U+000D), початку рядка (U+000A) та пробіл (U+0020) - це всі дійсні пробільні символи.

+ +

Методи

+ +
+
{{jsxref("JSON.parse()")}}
+
Розбирає строку як JSON, як опція — перетворює результат і його властивості, та повертає його.
+
{{jsxref("JSON.stringify()")}}
+
Повертає строку JSON відповідно до поданого значення. Як опція — може включити до результату лише певні поля чи замінити значення полів згідно з побажаннями користувача.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}{{Spec2('ES5.1')}}Первинне визначення.
{{SpecName('ES6', '#sec-json-object', 'JSON')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ +
+
+
+ + +

{{Compat("javascript.builtins.JSON")}}

+
+
+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/json/parse/index.html b/files/uk/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..685832a864 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,133 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript5 + - JSON + - JavaScript + - Method + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +
{{JSRef}}
+ +
Метод JSON.parse() розбирає рядок із JSON, створюючи відповідне до його вмісту значення чи об'єкт. Якщо вказати функцію reviver — другий необов'язковий параметр — її буде використано для перетворення створеного об'єкта та його властивостей перед поверненням. + +
 
+ +
{{EmbedInteractiveExample("pages/js/json-parse.html")}}
+ + +
+ +

Синтаксис

+ +
JSON.parse(text[, reviver])
+ +

Параметри

+ +
+
text
+
Рядок, що його має бути розібрано, як JSON. Докладні відомості про синтаксис JSON наведено в статті про об'єкт {{jsxref("JSON")}}.
+
reviver {{optional_inline}}
+
Якщо вказано функцію, її буде використано для перетворення отриманих значень перед поверненням.
+
+ +

Вертає

+ +

{{jsxref("Object", "Об'єкт")}}, що відповідає переданому JSON-рядку.

+ +

Винятки

+ +

Викидає виняток {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}, якщо вміст переданого рядка не є належним JSON.

+ +

Приклади

+ +

Використання JSON.parse()

+ +
JSON.parse('{}');                   // {}
+JSON.parse('{"x": {"value": 1}}');  // {x: {value: 1}}
+JSON.parse('true');                 // true
+JSON.parse('"щось навіщось"');      // "щось навіщось"
+JSON.parse('[1, 5, "false"]');      // [1, 5, "false"]
+JSON.parse('null');                 // null
+
+ +

Використання параметра reviver

+ +

Якщо reviver вказано, то його буде використано для перетворення кожного значення, отриманого шляхом розбору JSON-рядка. Кожне значення (об'єкт та всі його властивості) окремо піддається перетворенню за допомогою reviver в порядку зсередини назовні (від властивостей найглибше вкладених об'єктів). Задля перетворення чергової властивості до функції reviver передається два аргументи: ім'я властивості (рядок) та її значення. Посилання this вказує на об'єкт, що містить зазначену властивість.

+ +

Якщо функція reviver повертає {{jsxref("undefined")}} (або взагалі не вертає значення), властивість буде видалено з об'єкта. Інакше повернуте значення буде встановлено замість попереднього. Отже, якщо ви маєте на меті перетворити лише деякі значення, для решти функція reviver має вертати значення другого аргументу без змін.

+ +
JSON.parse('{"p": 5, "x": "5"}', function (key, value) {
+  return typeof value === 'number'
+    ? value * 2 // Повернути подвоєне значення, якщо це число.
+    : value     // Решту значень повернути без змін.
+});
+
+// { p: 10, x: "5" }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function (key, value) {
+  // Вивести ім'я чергової властивості (для останньої це порожній рядок — "").
+  console.log(key);
+
+  // Повернути значення властивості без змін.
+  return value;
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+
+ +

Прикінцеві коми вважаються за помилку

+ +
// Обидва виклики викидають SyntaxError.
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}{{Spec2('ES5.1')}}Початкова виознака. Запроваджено у JavaScript 1.7.
{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.JSON.parse")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/json/stringify/index.html b/files/uk/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..ca0fdc87fc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,321 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify +tags: + - JSON + - JavaScript + - stringify + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +
{{JSRef}}
+ +

Метод JSON.stringify() подає об'єкт чи {{glossary("Primitive", "просту величину")}} як JSON-рядок, певним чином перетворюючи або оминаючи ті чи ті властивості, якщо вказано необов'язковий другий аргумент — функцію або масив replacer.

+ +
{{EmbedInteractiveExample("pages/js/json-stringify.html")}}
+ + + +

Синтаксис

+ +
JSON.stringify(value[, replacer[, space]])
+ +

Параметри

+ +
+
value
+
Значення, яке слід перетворити на рядок JSON.
+
replacer {{optional_inline}}
+
Функція, що змінює значення перед їхнім перетворенням на JSON, або масив {{jsxref("Global_Objects/String", "рядків")}} та {{jsxref("Global_Objects/Number", "чисел")}}, що окреслюють множину властивостей, які буде включено у створений JSON-рядок. Якщо цей аргумент відсутній чи вказано null, до створеного JSON-рядка потраплять всі наявні властивості об'єкта без змін.
+
space {{optional_inline}}
+
Значення типу {{jsxref("Global_Objects/String", "String")}} або {{jsxref("Число", "Number")}} що використовується для додавання відступів у JSON задля покращення легкочитності. Якщо вказано число — воно означає кількість пропусків в одному відступі. Якщо передати число більше за 10, буде використано 10. Значення менші за 1 вказують на те що відступи не використовуватимуться. Якщо вказано рядок, то його (або перші 10 символів, якщо він задовгий) буде використано як відступ. Якщо ж параметр не вказано (або null), відступи не додаватимуться.
+
+ +

Вертає

+ +

Рядок JSON, створений із вказаного значення.

+ +

Винятки

+ +

Викидає виняток {{jsxref("TypeError")}} ("cyclic object value") у випадку, якщо знайдено циклічне посилання.

+ +

Опис

+ +

Функція JSON.stringify() перетворює значення на рядок, що містить JSON-запис того значення:

+ + + +
JSON.stringify({});                   // '{}'
+JSON.stringify(true);                 // 'true'
+JSON.stringify('foo');                // '"foo"'
+JSON.stringify([1, 'false', false]);  // '[1,"false",false]'
+JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
+JSON.stringify({ x: 5 });             // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
+// '"2006-01-02T15:04:05.000Z"'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}' or '{"y":6,"x":5}'
+JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
+// '[1,"false",false]'
+
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Стандартні структури даних
+JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
+// '[{},{},{},{}]'
+
+// TypedArray
+JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
+// '[{"0":1},{"0":1}]'
+
+// toJSON()
+JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
+// '11'
+
+// Значення типу Symbol:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// '{}'
+
+// Неперелічувані властивості:
+JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+
+ +

Параметер replacer

+ +

Параметр replacer може бути функцією або масивом. Якщо то функція, вона прийматиме два параметри: ключ та значення, яке са́ме перетворюється. Об'єкт, якому належить перетворювана властивість, доступний всередині replacer через this. Спершу функцію буде викликано з порожнім рядком замість ключа й тим об'єктом, який має бути перетворено, а відтак для кожної властивості того об'єкта буде здійснено окремий виклик replacer. Кожен виклик має вертати значення, що належить додати до рядка JSON:

+ + + +
Заувага: Вилучати елементи масиву за допомогою replacer неможливо — якщо повернути undefined, значення елемента лише обернеться на null.
+ +
Note: If you wish the replacer to distinguish an initial object from a key with an empty string property (since both would give the empty string as key and potentially an object as value), you will have to keep track of the iteration count (if it is beyond the first iteration, it is a genuine empty string key).
+ +

Приклад із функцією

+ +
function replacer(key, value) {
+  // Фільтрація властивостей
+  if (typeof value === 'string') {
+    return undefined;
+  }
+  return value;
+}
+
+var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7};
+JSON.stringify(foo, replacer);
+// '{"week":45,"month":7}'
+ +

Приклад із масивом

+ +

Якщо replacer являється масивом, його значення позначають імена властивостей вхідного об'єкту, що будуть включені в результат.

+ +

 

+ +
JSON.stringify(foo, ['week', 'month']);
+// '{"week":45,"month":7}', будуть збережені лише властивості "week" та "month"
+ +

Параметер space

+ +

Аргумент space може застосовуватись для управління відступами в результуючому рядку. Якщо в якості аргументу дано число, кожен із наступних рівнів серіалізації матиме відступ у вигляді відповідної поданому числу кількості пробілів (але не більше 10). Якщо ж в якості аргументу дано рядок, його і буде використано для виконання відступу (або ж 10 перших символів, якщо сам рядок довший).

+ +
JSON.stringify({ a: 1, b: {c: 2} }, null, 3);
+// Вертає рядок:
+// '{
+//    "a": 1,
+//    "b": {
+//       "c": 2
+//    }
+// }'
+
+ +

А тут замість пропусків буде вжито символ табуляції:

+ +
JSON.stringify({ a: 1, b: {c: 2} }, null, '\t');
+// Вертає рядок:
+// '{
+//     "a": 1,
+//     "b": {
+//         "c": 2
+//     }
+// }'
+
+ +

Особливий метод toJSON()

+ +

Й хоча методи перетворюваних об'єктів загалом нехтуються, метод з ім'ям toJSON має особливе призначення. Якщо перетворюваний об'єкт має метод toJSON(), його буде викликано, а повернене значення вжито (перетворено на JSON) замість самого об'єкту. JSON.stringify() викликає метод toJSON з одним аргументом:

+ +

 

+ + + +

Наприклад:

+ +

 

+ +
var obj = {
+    data: 'data',
+
+    toJSON(key){
+        if(key)
+            return `Тепер я вкладений об'єкт під ключем '${key}'`;
+
+        else
+            return this;
+    }
+};
+
+JSON.stringify(obj);
+// '{"data":"data"}'
+
+JSON.stringify({ obj })
+// '{"obj":"Тепер я вкладений об'єкт під ключем 'obj'"}'
+
+JSON.stringify([ obj ])
+// '["Тепер я вкладений об'єкт під ключем '0'"]'
+ +

Проблема із JSON.stringify() при серіалізації циклічних посилань

+ +

Зауважте, що, оскільки JSON format не підтримує об'єктні посилання (хоча є чорновик IETF), при спробі кодування об'єкту із циклічними посиланнями буде отримано {{jsxref("TypeError")}}.

+ +
const circularReference = {};
+circularReference.myself = circularReference;
+
+// Серіалізація циклічного посилання викине "TypeError: cyclic object value"
+JSON.stringify(circularReference);
+ +

Для виконання серіалізації циклічних посилань ви можете використати бібліотеку, що їх підтримує (зокрема cycle.js від Douglas Crockford), або ж реалізувати рішення самостійно, для чого знадобиться пошук і заміна (або видалення) циклічних посилань на підходящі для серіалізації значення.

+ +

Тлумачення отриманого JSON як коду JavaScript

+ +

Завважте, що JSON не є точнісінькою підмножиною JavaScript. Два розділювачі (рядка та параграфу) не треба екранувати у JSON, але потрібно у JavaScript. Тож якщо ви маєте намір застосувати функцію eval() або скористатися JSONP, доведеться здійснити невеличкі перетворення:

+ +

 

+ +
function jsFriendlyJSONStringify (s) {
+    return JSON.stringify(s).
+        replace(/\u2028/g, '\\u2028').
+        replace(/\u2029/g, '\\u2029');
+}
+
+var s = {
+    a: String.fromCharCode(0x2028),
+    b: String.fromCharCode(0x2029)
+};
+try {
+    eval('(' + JSON.stringify(s) + ')');
+} catch (e) {
+    console.log(e); // "SyntaxError: unterminated string literal"
+}
+
+// Якщо ловити виключення не має потреби
+eval('(' + jsFriendlyJSONStringify(s) + ')');
+
+// console.log у Firefox знімає екранування Юнікоду, якщо
+// виводиться в консоль, тому застосуймо alert
+alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}
+ +

Приклад застосування JSON.stringify() із localStorage

+ +

У випадку, якщо ви хочете зберегти об'єкт, створений вашим користувачем і дозволити відновити його навіть після закриття браузера, ось наступний приклад із моделлю застосування JSON.stringify():

+ +
// Створення зразка JSON
+var session = {
+  'screens': [],
+  'state': true
+};
+session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 });
+session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 });
+session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 });
+session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 });
+session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 });
+session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 });
+
+// Конвертація рядка JSON через JSON.stringify()
+// далі збереження у localStorage із іменем "session"
+localStorage.setItem('session', JSON.stringify(session));
+
+// Приклад, як перетворити рядок, отриманий за допомогою  
+// JSON.stringify() і збережений у localStorage назад у JSON-об'єкт
+var restoredSession = JSON.parse(localStorage.getItem('session'));
+
+// Тепер змінна restoredSession містить об'єкт, що був раніше збережений
+// у localStorage
+console.log(restoredSession);
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}{{Spec2('ES5.1')}}Первинне визначення. Запроваджено у JavaScript 1.7.
{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +
{{Compat("javascript.builtins.JSON.stringify")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/map/index.html b/files/uk/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..9377f478da --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,201 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +
{{JSRef}}
+ +

Об'єкт Map зберігає пари ключ-значення. Будь-яке значення (і об'єкт, і примітивне значення) може бути використано і як ключ, і як значення.

+ +

Синтаксис

+ +
new Map([iterable])
+ +

Параметри

+ +
+
iterable
+
{{jsxref("Array")}} або інший об'єкт, що перебирається, чиї елементи є парами ключ-значення (масиви з двома елементами, наприклад, [[1, 'one'], [2, 'two']] ). Кожна пара ключ-значення додається до нового Map; значення null вважаються undefined.
+
+ +

Опис

+ +

Об'єкт Map перебирає свої елементи у порядку їх введення — цикл {{jsxref("Statements/for...of", "for...of")}} повертає масив [ключ, значення] під час кожної ітерації.

+ +

Слід зазначити, що Map, що є Map'ом об'єкта, especially a dictionary of dictionaries, буде перебиратися у порядку додавання елементів в об'єкт - у довільному порядку і не упорядковано.

+ +

Еквівалентність ключів

+ +

Еквівалентність ключів основана на алгоритмі "SameValueZero": NaN вважається NaN (хоча, NaN !== NaN) і всі інші значення вважаються еквівалентними згідно семантики оператора ===. У сучасній версії сецифікації ECMAScript -0 та +0 вважаються еквівалентними, хоча у попередніх версіях було інакше. Більш детально дивіться "Value equality for -0 and 0" у таблиці сумісності браузерів.

+ +

Порівняння об'єктів та maps

+ +

{{jsxref("Object", "Objects")}} are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), Objects have been used as Maps historically; however, there are important differences that make using a Map preferable in certain cases:

+ + + +

Properties

+ +
+
Map.length
+
The value of the length property is 0.
+
{{jsxref("Map.@@species", "get Map[@@species]")}}
+
The constructor function that is used to create derived objects.
+
{{jsxref("Map.prototype")}}
+
Represents the prototype for the Map constructor. Allows the addition of properties to all Map objects.
+
+ +

Map instances

+ +

All Map instances inherit from {{jsxref("Map.prototype")}}.

+ +

Properties

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}

+ +

Methods

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}

+ +

Examples

+ +

Using the Map object

+ +
var myMap = new Map();
+
+var keyString = 'a string',
+    keyObj = {},
+    keyFunc = function() {};
+
+// setting the values
+myMap.set(keyString, "value associated with 'a string'");
+myMap.set(keyObj, 'value associated with keyObj');
+myMap.set(keyFunc, 'value associated with keyFunc');
+
+myMap.size; // 3
+
+// getting the values
+myMap.get(keyString);    // "value associated with 'a string'"
+myMap.get(keyObj);       // "value associated with keyObj"
+myMap.get(keyFunc);      // "value associated with keyFunc"
+
+myMap.get('a string');   // "value associated with 'a string'"
+                         // because keyString === 'a string'
+myMap.get({});           // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+
+ +

Using NaN as Map keys

+ +

NaN can also be used as a key. Even though every NaN is not equal to itself (NaN !== NaN is true), the following example works because NaNs are indistinguishable from each other:

+ +
var myMap = new Map();
+myMap.set(NaN, 'not a number');
+
+myMap.get(NaN); // "not a number"
+
+var otherNaN = Number('foo');
+myMap.get(otherNaN); // "not a number"
+
+ +

Iterating Maps with for..of

+ +

Maps can be iterated using a for..of loop:

+ +
var myMap = new Map();
+myMap.set(0, 'zero');
+myMap.set(1, 'one');
+for (var [key, value] of myMap) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+
+for (var key of myMap.keys()) {
+  console.log(key);
+}
+// 0
+// 1
+
+for (var value of myMap.values()) {
+  console.log(value);
+}
+// zero
+// one
+
+for (var [key, value] of myMap.entries()) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+
+ +

Iterating Maps with forEach()

+ +

Maps can be iterated using the forEach() method:

+ +
myMap.forEach(function(value, key) {
+  console.log(key + ' = ' + value);
+});
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+
+ +

Relation with Array objects

+ +
var kvArray = [['key1', 'value1'], ['key2', 'value2']];
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+var myMap = new Map(kvArray);
+
+myMap.get('key1'); // returns "value1"
+
+// Use the Array.from function to transform a map into a 2D key-value Array
+console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray
+
+// Or use the keys or values iterators and convert them to an array
+console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"]
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map-objects', 'Map')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Map")}}

+ +

See also

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/abs/index.html b/files/uk/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..b75b1e811c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,104 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Global_Objects/Math/abs +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +
{{JSRef}}
+ +

Функція Math.abs() повертає абсолютне значення (модуль) числа, що дорівнює:

+ +

Math.abs(x)=|x|={xifx>00ifx=0-xifx<0

+ +
{{EmbedInteractiveExample("pages/js/math-abs.html")}}
+ + + +

Синтаксис

+ +
Math.abs(x)
+ +

Параметри

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Абсолютне значення данного числа.

+ +

Опис

+ +

Оскільки abs() статичний метод об'єкту Math, він завжди використовується як Math.abs(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Поведінка методу Math.abs()

+ +

Передача пустого об'єкту, масиву з кількома числами, не числової строки {{jsxref("undefined")}}/пустої змінної, повертає  {{jsxref("NaN")}}. Передача {{jsxref("null")}}, пустої строки або пустого масиву, повертає - 0.

+ +
Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.abs")}}

+ +

Дивись також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/acos/index.html b/files/uk/web/javascript/reference/global_objects/math/acos/index.html new file mode 100644 index 0000000000..f549eb1b4c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/acos/index.html @@ -0,0 +1,110 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Reference/Global_Objects/Math/acos +tags: + - JavaScript + - Math + - Довідка + - арккосинус + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +
{{JSRef}}
+ +

Math.acos() - це метод, який повертає арккосинус (у радіанах)  від числа, що являється:

+ +

x[-1;1],Math.acos(x)=arccos(x)= такий унікальний y[0;π],для якогоcos(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ унікальний } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x

+ +

{{EmbedInteractiveExample("pages/js/math-acos.html")}}

+ +

 

+ + + +

 

+ +

Синтакс

+ +
Math.acos(x)
+ +

Параметри

+ +
+
x
+
Число.
+
+

Результат

+
+
Значення арккосинуса (у радіанах) поданого числа між -1 та 1; інакше - {{jsxref("NaN")}}.
+
+ +

Опис

+ +

Math.acos(x) метод вертає число між  0 і π радіан,  для x між-1 і 1. Якщо число вийде за межі -1 ... +1,  метод поверне {{jsxref("NaN")}}.

+ +

Оскільки acos() є статичним методом в обєкта Math, ви завжди повинні використовувати його як Math.acos(), а не викликати метод на створеному екземплярі обєкта Math (тому що Math не є конструктором).

+ +

Приклади

+ +

 

+ +
Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+
+ +

Для значень менших за -1 або більших за 1, Math.acos() повертає {{jsxref("NaN")}}.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}{{Spec2('ESDraft')}} 
+ +

Підтримка браузерами

+ +
+ +
+ +
{{Compat("javascript.builtins.Math.acos")}}
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/acosh/index.html b/files/uk/web/javascript/reference/global_objects/math/acosh/index.html new file mode 100644 index 0000000000..01bdf629fa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/acosh/index.html @@ -0,0 +1,91 @@ +--- +title: Math.acosh() +slug: Web/JavaScript/Reference/Global_Objects/Math/acosh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh +--- +
{{JSRef}}
+ +

Функція Math.acosh() повертає гіперболічний арккосинус числа. Тобто:

+ +

x1,Math.acosh(x)=arcosh(x)= такий унікальний y0, для якогоcosh(y)=x\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x

+ +
{{EmbedInteractiveExample("pages/js/math-acosh.html")}}
+ + + +

Синтаксис

+ +
Math.acosh(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Гіперболічний арккосинус даного числа. У випадку, якщо аргумент менший за 1 - {{jsxref("NaN")}}.

+ +

Опис

+ +

У зв'язку із тим, що acosh() - статичний метод Math, слід завжди звертатись до нього у формі Math.acosh(). Намагатись викликати acosh(), звертаючись до методів  створених вами об'єктів Math - некоректно (Math не являється конструктором).

+ +

Приклади

+ +

Використання Math.acosh()

+ +
Math.acosh(-1);  // NaN
+Math.acosh(0);   // NaN
+Math.acosh(0.5); // NaN
+Math.acosh(1);   // 0
+Math.acosh(2);   // 1.3169578969248166
+
+ +

Для значень, що менші за 1 Math.acosh() повертає {{jsxref("NaN")}}.

+ +

Поліфіл

+ +

Для будь-якого x1x \geq 1 у нас є arcosh(x)=ln(x+x2-1)\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right). Таким чином ми можемо зімітувати метод за допомогою наступної функції:

+ +
Math.acosh = Math.acosh || function(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+};
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікації
{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.acosh")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/asin/index.html b/files/uk/web/javascript/reference/global_objects/math/asin/index.html new file mode 100644 index 0000000000..53a2a41b26 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/asin/index.html @@ -0,0 +1,103 @@ +--- +title: Math.asin() +slug: Web/JavaScript/Reference/Global_Objects/Math/asin +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin +--- +
{{JSRef}}
+ +

Метод Math.asin() повертає значення (в радіанах) арксинуса числа, що являється

+ +

x[-1;1],Math.asin(x)=arcsin(x)= такому унікальному y[-π2;π2], для якогоsin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x

+ +
{{EmbedInteractiveExample("pages/js/math-asin.html")}}
+ + + +

Синтаксис

+ +
Math.asin(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Арксинус  (в радіанах) поданого числа від -1 до 1; інакше - {{jsxref("NaN")}}.

+ +

Опис

+ +

Метод Math.asin(x) повертає числове значення між -π2-\frac{\pi}{2} та π2\frac{\pi}{2} радіан для x від -1 до 1. Якщо значення x за межами цього проміжку, він повертає {{jsxref("NaN")}}.

+ +

Оскільки asin() - це статичний метод об'єкту Math, він завжди використовується як Math.asin(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Використання Math.asin()

+ +
Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.5707963267948966 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.5707963267948966 (pi/2)
+Math.asin(2);   // NaN
+
+ +

Для значень, менших за -1 чи більших за 1, Math.asin() повертає {{jsxref("NaN")}}.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.asin")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/asinh/index.html b/files/uk/web/javascript/reference/global_objects/math/asinh/index.html new file mode 100644 index 0000000000..4d58b44c80 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/asinh/index.html @@ -0,0 +1,92 @@ +--- +title: Math.asinh() +slug: Web/JavaScript/Reference/Global_Objects/Math/asinh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh +--- +
{{JSRef}}
+ +

Функція Math.asinh() повертає гіперболічний арксинус числа, що являється:

+ +

Math.asinh(x)=arsinh(x)= такий унікальний y,  для якого sinh(y)=x\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x

+ +
{{EmbedInteractiveExample("pages/js/math-asinh.html")}}
+ + + +

Синтаксис

+ +
Math.asinh(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Гіперболічний арксинус поданого числа.

+ +

Опис

+ +

Оскільки asinh() статичний метод об'єкту Math, він завжди використовується як Math.asinh(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.asinh()

+ +
Math.asinh(1);  // 0.881373587019543
+Math.asinh(0);  // 0
+
+ +

Поліфіл

+ +

В якості швидкого і брудного трюку для грубої імітації оригіналу можна застосувати формулу arsinh(x)=ln(x+x2+1)\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right) у вигляді такої функції:

+ +
Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+
+ +

Являючись формально вірною, вона страждає від значної кількості помилок, пов'язаних із обчисленням чисел із плаваючою комою. Точні результати потребують спеціальної обробки додатніх і від'ємних, дрібних і великих значень аргументів, так, як це зроблено, наприклад, у  glibc чи GNU Scientific Library.

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.asinh")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/atan/index.html b/files/uk/web/javascript/reference/global_objects/math/atan/index.html new file mode 100644 index 0000000000..bbc76aade4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/atan/index.html @@ -0,0 +1,106 @@ +--- +title: Math.atan() +slug: Web/JavaScript/Reference/Global_Objects/Math/atan +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan +--- +
{{JSRef}}
+ +

Функція Math.atan() повертає арктангенс (у радіанах) від числа, що являється:

+ +

Math.atan(x)=arctan(x)= такий унікальний y[-π2;π2], для якого tan(y)=x\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x

+ +
{{EmbedInteractiveExample("pages/js/math-atan.html")}}
+ + + +

Синтаксис

+ +
Math.atan(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Арктангенс (у радіанах) від поданого числа.

+ +

Опис

+ +

Метод Math.atan() повертає числове значення з-поміж -π2-\frac{\pi}{2} та π2\frac{\pi}{2} радіан.

+ +

Оскільки atan() статичний метод об'єкту Math, він завжди використовується як Math.atan(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.atan()

+ +
Math.atan(1);   // 0.7853981633974483
+Math.atan(0);   // 0
+Math.atan(-0);  // -0
+
+Math.atan(Infinity);   //  1.5707963267948966
+Math.atan(-Infinity);  // -1.5707963267948966
+
+// The angle that the line [(0,0);(x,y)] forms with the x-axis in a Cartesian coordinate system
+Math.atan(y / x);
+
+ +

Зверніть увагу - можливо вам захочеться уникнути використання ±Infinity із стилістичних міркуваня. У цьому випадку {{jsxref("Math.atan2()")}} із 0 в якості другого аргументу може бути ліпшим варіантом.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.atan")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/atan2/index.html b/files/uk/web/javascript/reference/global_objects/math/atan2/index.html new file mode 100644 index 0000000000..a571a3adc4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/atan2/index.html @@ -0,0 +1,119 @@ +--- +title: Math.atan2() +slug: Web/JavaScript/Reference/Global_Objects/Math/atan2 +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 +--- +
{{JSRef}}
+ +

Функція Math.atan2() повертає арктангенс частки поданих чисел.

+ +
{{EmbedInteractiveExample("pages/js/math-atan2.html")}}
+ + + +

Синтаксис

+ +
Math.atan2(y, x)
+ +

Аргументи

+ +
+
y
+
Перше число.
+
x
+
Друге число.
+
+ +

Результат

+ +

Арктангенс частки даних аргументів

+ +

Опис

+ +

Метод Math.atan2() повертає числове значення з-поміж -π та π, що являє собою кут Тета нахилу вектора (x, y). Тобто це кут між додатнім напрямком осі OX і вектором (x, y), виміряний проти годинникової стрілки. Як і інші методи Mathatan2() повертає значення кута у радіанах.

+ +
+

Зауважте порядок розміщення аргументів функції: першою йде координата y, а другою — x.

+
+ +

 

+ +

A simple diagram showing the angle returned by atan2(y, x)

+ +

На відміну від Math.atan(), що працює із часткою координат x та yMath.atan2() приймає їх на вхід окремо.

+ +

Оскільки atan2() - це статичний метод об'єкту Math, він завжди використовується як Math.atan2(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.atan2()

+ +
Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2(±0, -0);               // ±PI.
+Math.atan2(±0, +0);               // ±0.
+Math.atan2(±0, -x);               // ±PI for x > 0.
+Math.atan2(±0, x);                // ±0 for x > 0.
+Math.atan2(-y, ±0);               // -PI/2 for y > 0.
+Math.atan2(y, ±0);                // PI/2 for y > 0.
+Math.atan2(±y, -Infinity);        // ±PI for finite y > 0.
+Math.atan2(±y, +Infinity);        // ±0 for finite y > 0.
+Math.atan2(±Infinity, x);         // ±PI/2 for finite x.
+Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
+Math.atan2(±Infinity, +Infinity); // ±PI/4.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.atan2")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/atanh/index.html b/files/uk/web/javascript/reference/global_objects/math/atanh/index.html new file mode 100644 index 0000000000..b99208c599 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/atanh/index.html @@ -0,0 +1,92 @@ +--- +title: Math.atanh() +slug: Web/JavaScript/Reference/Global_Objects/Math/atanh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh +--- +
{{JSRef}}
+ +

Функція Math.atanh() повертає значення гіперболічного акртангенса числа, що являється:

+ +

x(-1,1),Math.atanh(x)=arctanh(x)= такий унікальний y, для якогоtanh(y)=x\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x

+ +
{{EmbedInteractiveExample("pages/js/math-atanh.html")}}
+ + + +

Синтаксис

+ +
Math.atanh(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Гіперболічний арктангенс даного числа.

+ +

Опис

+ +

Оскільки atanh() - статичний метод об'єкту Math, він завжди використовується як Math.atanh(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.atanh()

+ +
Math.atanh(-2);  // NaN
+Math.atanh(-1);  // -Infinity
+Math.atanh(0);   // 0
+Math.atanh(0.5); // 0.5493061443340548
+Math.atanh(1);   // Infinity
+Math.atanh(2);   // NaN
+
+ +

Для числових значень, що більші за 1 чи менші від -1, результатом є {{jsxref("NaN")}}.

+ +

Поліфіл

+ +

Для |x|<1\left|x\right| < 1, ми маємо artanh(x)=12ln(1+x1-x)\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right), тобто можемо емулювати необхідний функціонал за допомогою наступної функції:

+ +
Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.atanh")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html b/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html new file mode 100644 index 0000000000..ff889e3849 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html @@ -0,0 +1,100 @@ +--- +title: Math.cbrt() +slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt +--- +
{{JSRef}}
+ +

Функція Math.cbrt() повертає кубічний корінь числа. Тобто:

+ +

Math.cbrt(x)=x3=такий унікальнийy,для якогоy3=x\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x

+ +
{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}
+ + + +

Синтаксис

+ +
Math.cbrt(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Кубічний корінь даного числа.

+ +

Опис

+ +

Оскільки cbrt() - це статичний метод об'єкту Math, він завжди використовується як Math.cbrt(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.cbrt()

+ +
Math.cbrt(NaN); // NaN
+Math.cbrt(-1); // -1
+Math.cbrt(-0); // -0
+Math.cbrt(-Infinity); // -Infinity
+Math.cbrt(0); // 0
+Math.cbrt(1); // 1
+Math.cbrt(Infinity); // Infinity
+Math.cbrt(null); // 0
+Math.cbrt(2);  // 1.2599210498948734
+
+ +

Поліфіл

+ +

Для всіх x0x \geq 0 маємо x3=x1/3\sqrt[3]{x} = x^{1/3}, тобто цей метод може бути зімітованим за допомогою функції:

+ +
if (!Math.cbrt) {
+  Math.cbrt = function(x) {
+    var y = Math.pow(Math.abs(x), 1/3);
+    return x < 0 ? -y : y;
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ES6')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.cbrt")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/ceil/index.html b/files/uk/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..c4e035d57d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,174 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Global_Objects/Math/ceil +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +
{{JSRef}}
+ +

Функція Math.ceil() повертає найменше ціле число, що є більшим або дорівнює даному числу.

+ +

 

+ +
{{EmbedInteractiveExample("pages/js/math-ceil.html")}}
+ + + +

 

+ +

Синтаксис

+ +
Math.ceil(x)
+ +

Параметри

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Найменше ціле число, що є більшим або дорівнює даному числу.

+ +

Опис

+ +

Оскільки ceil()є статичним методом Math, він завжди використовується як Math.ceil(), а не метод створеного Вами об'єкту Math (Math не є конструктором).

+ +

Приклади

+ +

Використання Math.ceil()

+ +

Наступні приклади демонструють використання Math.ceil().

+ +
Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+
+ +

Робота з десятковими числами

+ +
// Замикання
+(function() {
+  /**
+   * Десяткове вирівнювання числа.
+   *
+   * @param {String}  type  Тип вирівнювання.
+   * @param {Number}  value Число.
+   * @param {Integer} exp   Показник степеня (десятковий логарифм від основи округлення).
+   * @returns {Number} Вирівняне значення.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Якщо показник степеня невизначений, або 0...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Якщо значення не є числом, або ж показник степеня не цілий...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN;
+    }
+    // Зсув
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Зворотній зсув
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Десяткове округлення
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Десяткове округлення до нижнього
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Десяткове округлення до верхнього
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Округлення
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Округлення до нижнього
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Округлення до верхнього
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у  JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.ceil")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/clz32/index.html b/files/uk/web/javascript/reference/global_objects/math/clz32/index.html new file mode 100644 index 0000000000..9c77d005ec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/clz32/index.html @@ -0,0 +1,113 @@ +--- +title: Math.clz32() +slug: Web/JavaScript/Reference/Global_Objects/Math/clz32 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32 +--- +
{{JSRef}}
+ +

Функція Math.clz32() повертає кількість ведучих нульових бітів 32-бітного двоїчного уявлення даного числа.

+ +
{{EmbedInteractiveExample("pages/js/math-clz32.html")}}
+ + + +

Синтаксис

+ +
Math.clz32(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Кількість ведучих нульових бітів 32-бітного двоїчного уявлення даного числа.

+ +

Опис

+ +

"clz32" - це скорочено від CountLeadingZeroes32.

+ +

Якщо аргумент x не є числом, він спочатку буде приведений до числового формату, а потім - до 32-бітного беззнакового цілого.

+ +

Якщо в результаті 32-бітне беззнакове ціле число є нулем - функція повертає 32, тому що всі його біти являються нульовими.

+ +

Ця функція, зокрема, дуже помічна для систем, що компілюють щось у JS. Наприклад - Emscripten.

+ +

Приклади

+ +

Застосування Math.clz32()

+ +
Math.clz32(1);                // 31
+Math.clz32(1000);             // 22
+Math.clz32();                 // 32
+
+[NaN, Infinity, -Infinity, 0, -0, null, undefined, 'foo', {}, []].filter(
+function(n) {
+  return Math.clz32(n) !== 32
+});                           // []
+
+Math.clz32(true);             // 31
+Math.clz32(3.5);              // 30
+
+ +

Поліфіл

+ +

Найбільш ефективний поліфіл:

+ +
if (!Math.clz32) {
+  Math.clz32 = function(x) {
+    // Let n be ToUint32(x).
+    // Let p be the number of leading zero bits in
+    // the 32-bit binary representation of n.
+    // Return p.
+    if (x == null || x === 0) {
+      return 32;
+    }
+    return 31 - Math.floor(Math.log(x >>> 0) * Math.LOG2E);
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ES2015')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.clz32")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/cos/index.html b/files/uk/web/javascript/reference/global_objects/math/cos/index.html new file mode 100644 index 0000000000..8cce369812 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/cos/index.html @@ -0,0 +1,83 @@ +--- +title: Math.cos() +slug: Web/JavaScript/Reference/Global_Objects/Math/cos +tags: + - JavaScript + - Math + - cos + - Довідка + - геометрія + - косинус + - метод + - тригонометрія +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos +--- +
{{JSRef}}
+ +

 Статична функція Math.cos() повертає {{interwiki("wikipedia", "косинус")}} поданого кута, який повинен бути вказаним у {{interwiki("wikipedia", "радіан", "радіанах")}}. Значення косинуса дорівнює відношеннюдовжини прилеглого катета довжини гіпотенузи . 

+ +
{{EmbedInteractiveExample("pages/js/math-cos.html")}}
+ + + +

Синтаксис

+ +
Math.cos(x)
+ +

Аргументи

+ +
+
x
+
Кут у радіанах, косинус якого необхідно отримати.
+
+ +

Результат

+ +

Косинус даного числа.

+ +

Опис

+ +

Метод Math.cos() повертає числове значення з-поміж -1 та 1, що відповідає косинусу кута.

+ +

Оскільки cos() є статичним методом в обєкта Math, ви завжди повинні використовувати його як Math.cos(), а не викликати метод на створеному екземплярі обєкта Math (тому що Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.cos()

+ +
Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.cos")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/cosh/index.html b/files/uk/web/javascript/reference/global_objects/math/cosh/index.html new file mode 100644 index 0000000000..5973ba2868 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/cosh/index.html @@ -0,0 +1,93 @@ +--- +title: Math.cosh() +slug: Web/JavaScript/Reference/Global_Objects/Math/cosh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh +--- +
{{JSRef}}
+ +

Функція Math.cosh() повертає значення гіперболічного косинуса числа, що може бути також виражене через {{jsxref("Math.E", "сталу e", "", 1)}}:

+ +

Math.cosh(x)=ex+e-x2\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}

+ +
{{EmbedInteractiveExample("pages/js/math-cosh.html")}}
+ + + +

Синтаксис

+ +
Math.cosh(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Гіперболічний косинус даного числа.

+ +

Опис

+ +

Оскільки cosh() - це статичний метод об'єкту Math, він завжди використовується як Math.cosh(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.cosh()

+ +
Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+
+ +

Поліфіл

+ +

Ця функцію можна зімітувати за допомогою {{jsxref("Math.exp()")}}:

+ +
Math.cosh = Math.cosh || function(x) {
+  return (Math.exp(x) + Math.exp(-x)) / 2;
+}
+
+ +

або ж викликаючи {{jsxref("Math.exp()")}} лише один раз:

+ +
Math.cosh = Math.cosh || function(x) {
+  var y = Math.exp(x);
+  return (y + 1 / y) / 2;
+};
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.cosh")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/e/index.html b/files/uk/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..d04b6dce98 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,85 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Global_Objects/Math/E +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +
{{JSRef}}
+ +

Поле Math.E відображає сталу Ейлера ee, основу натуральних логарифмів, що наближено дорівнює 2.718.

+ +

Math.E=e2.718\mathtt{\mi{Math.E}} = e \approx 2.718

+ +
{{EmbedInteractiveExample("pages/js/math-e.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

У зв'язку із тим, що E - це статичне поле Math, слід завжди звертатись до нього Math.E. Намагатись викликати E, звертаючись до полів  створених вами об'єктів Math - некоректно (Math не являється конструктором).

+ +

Приклади

+ +

Використання Math.E

+ +

Наступна функція повертає e:

+ +
function getNapier() {
+  return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.e', 'Math.E')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.E")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/exp/index.html b/files/uk/web/javascript/reference/global_objects/math/exp/index.html new file mode 100644 index 0000000000..770c983bb5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/exp/index.html @@ -0,0 +1,76 @@ +--- +title: Math.exp() +slug: Web/JavaScript/Reference/Global_Objects/Math/exp +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp +--- +
{{JSRef}}
+ +

Функція Math.exp() повертає ex, де x - аргумент, а e - {{jsxref("Math.E", "число (стала) Ейлера", "", 1)}}, основа натурального логарифму.

+ +
{{EmbedInteractiveExample("pages/js/math-exp.html")}}
+ + + +

Синтаксис

+ +
Math.exp(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Число, що відображає ex, де e - це  {{jsxref("Math.E", "стала Ейлера", "", 1)}}, та x - аргумент.

+ +

Опис

+ +

Так як exp() - це статичний метод об'єкту Math, він завжди використовується як Math.exp(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.exp()

+ +
Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.exp")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/expm1/index.html b/files/uk/web/javascript/reference/global_objects/math/expm1/index.html new file mode 100644 index 0000000000..9ff397ce07 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/expm1/index.html @@ -0,0 +1,85 @@ +--- +title: Math.expm1() +slug: Web/JavaScript/Reference/Global_Objects/Math/expm1 +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1 +--- +
{{JSRef}}
+ +

Функція Math.expm1() повертає результат обчислення виразу ex - 1, де x - це аргумент, а {{jsxref("Math.E", "e", "", 1)}} - основа натурального логарифму.

+ +
{{EmbedInteractiveExample("pages/js/math-expm1.html")}}
+ + + +

Синтаксис

+ +
Math.expm1(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Число, що відображає результат виразу ex - 1, де e - це {{jsxref("Math.E", "стала Ейлера", "", 1)}}, а x - аргумент.

+ +

Опис

+ +

Оскільки expm1() - це статичний метод об'єкту Math, він завжди використовується як Math.expm1(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

Приклади

+ +

Застосуваня Math.expm1()

+ +
Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+
+ +

Поліфіл

+ +

Даний функціонал можна емулювати за допомогою функції {{jsxref("Math.exp()")}}:

+ +
Math.expm1 = Math.expm1 || function(x) {
+  return Math.exp(x) - 1;
+};
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.expm1")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/floor/index.html b/files/uk/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..2507381ebd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,164 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Global_Objects/Math/floor +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +
{{JSRef}}
+ +

Метод Math.floor() повертає найбільше ціле число, менше або рівне даному числу.

+ +

Синтаксис

+ +
Math.floor(x)
+ +

Параметри

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Найбільше ціле число, менше або рівне даному числу.

+ +

Опис

+ +

Оскільки floor() є статичним методом об'єкту Math, він завжди використовується як Math.floor(), а не метод створеного Вами об'єкту Math (Math не є конструктором).

+ +

Приклади

+ +

Використання Math.floor()

+ +
Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+
+ +

Десяткове округлення

+ +
// Замикання
+(function() {
+  /**
+   * Десяткове округлення числа до необхідної точності.
+   *
+   * @param {String}  type  Тип округлення.
+   * @param {Number}  value Число.
+   * @param {Integer} exp   Степінь (десятковий логарифм від основи округлення).
+   * @returns {Number} Округлене число.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Якщо exp невизначений або дорівнює нулю...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Якщо value не є числом, або ж степінь exp не являється цілим...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN;
+    }
+    // Зсув
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Зворотній зсув
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Десяткове округлення
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Десяткове округлення до меншого
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Десяткове округлення до більшого
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Округлення
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.floor")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/fround/index.html b/files/uk/web/javascript/reference/global_objects/math/fround/index.html new file mode 100644 index 0000000000..1b7994ccb4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/fround/index.html @@ -0,0 +1,114 @@ +--- +title: Math.fround() +slug: Web/JavaScript/Reference/Global_Objects/Math/fround +tags: + - JavaScript + - Math + - fround + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround +--- +
{{JSRef}}
+ +

Функція Math.fround() повертає найближче зображення числового аргументу у вигляді 32-бітного числа з рухомою комою {{interwiki("wikipedia", "Число_одинарної_точності","одинарної точності" )}}.

+ +
{{EmbedInteractiveExample("pages/js/math-fround.html")}}
+ + + +

Синтаксис

+ +
var singleFloat = Math.fround(doubleFloat);
+ +

Аргументи

+ +
+
doubleFloat
+
{{jsxref("Number")}}. Якщо аргумент має інший тип - його буде приведено до числа, або ж до {{jsxref("NaN")}} у випадку, якщо таке приведення неможливе.
+
+ +

Результат

+ +

Зображеня аргументу у вигляді найближчого 32-бітного числа з рухомою комою {{interwiki("wikipedia", "Число_одинарної_точності","одинарної точності" )}}.

+ +

Опис

+ +

JavaScript всередині використовує 64-бітні числа із рухомою комою подвійної точності. Це забезпечує дуже високу точність обчислень. Однак, інколи у вас може виникнути потреба працювати із 32-бітними числами того ж типу. Зокрема, якщо ви читаєте дані із {{jsxref("Float32Array")}}. Це може викликати певну плутанину: перевірка рівності 64-бітного та 32-бітного чисел може дати негативний результат, навіть якщо числа здаються однаковими.

+ +

Щоб вирішити цю проблему, можна застосувати Math.fround() для перетворення 64-бітного числа у 32-бітне. JavaScript всередині продовжить вважати числа за 64-бітні, натомість виконуючи "округлення до найближчого парного" на 23-му біті мантиси, і встановлююючи наступний за нею біт в 0. Якщо число виходить за межі 32-бітного із рухомою комою, то в результаті буде отримана {{jsxref("Infinity")}} чи -Infinity.

+ +

Оскільки fround()є статичним методом Math, він завжди використовується як Math.fround(), а не метод створеного Вами об'єкту Math (Math не є конструктором).

+ +

Приклади

+ +

Застосування Math.fround()

+ +

Число 1.5 може бути точно відтворено у двійковій системі числення, причому 32-бітний і 64-бітний результати будуть однакові:

+ +
Math.fround(1.5); // 1.5
+Math.fround(1.5) === 1.5; // true
+
+ +

Однак, число 1.337 не може бути точно зображено у двійковій системі числення, тож  32-бітне і 64-бітне зображення цього числа будуть відрізнятись:

+ +
Math.fround(1.337); // 1.3370000123977661
+Math.fround(1.337) === 1.337; // false
+
+ +

21502^150 - занадто велике для 32-бітного числа із рухомою комою, тому результатом буде Infinity:

+ +
2 ** 150; // 1.42724769270596e+45
+Math.fround(2 ** 150); // Infinity
+
+ +

Якщо аргумент не може бути приведеним до числа, чи просто являється not-a-number (NaN), Math.fround() поверне NaN:

+ +
Math.fround('abc'); // NaN
+Math.fround(NaN); // NaN
+
+ +

Поліфіл

+ +

Даний функціонал можна відтворити за допомогою наступної функції (за умови наявної підтримки {{jsxref("Float32Array")}}):

+ +
Math.fround = Math.fround || (function (array) {
+  return function(x) {
+    return array[0] = x, array[0];
+  };
+})(new Float32Array(1));
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}{{Spec2('ES6')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.fround")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/hypot/index.html b/files/uk/web/javascript/reference/global_objects/math/hypot/index.html new file mode 100644 index 0000000000..465d368930 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/hypot/index.html @@ -0,0 +1,119 @@ +--- +title: Math.hypot() +slug: Web/JavaScript/Reference/Global_Objects/Math/hypot +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot +--- +
{{JSRef}}
+ +

Функція Math.hypot() повертає квадратний корінь від суми квадратів поданих аргументів

+ +

Math.hypot(v1,v2,,vn)=i=1nvi2=v12+v22++vn2\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}

+ +
{{EmbedInteractiveExample("pages/js/math-hypot.html")}}
+ + + +

Синтаксис

+ +
Math.hypot([value1[, value2[, ...]]])
+ +

Аргументи

+ +
+
value1, value2, ...
+
Числа.
+
+ +

Результат

+ +

Квадратний корінь від суми квадратів поданих аргументів. Якщо хоча б один з аргументів не може бути приведений до числа - результатом буде {{jsxref("NaN")}}.

+ +

Опис

+ +

Обчислення гіпотенузи прямокутного трикутника чи модуля комплексного числа відбувається за формулою Math.sqrt(v1*v1 + v2*v2), де v1 та v2 - це катети прямокутного трикутника, або ж дійсна та уявна частини комплексного числа.  Для обчислення відстані у двох, чи більше вимірах, варто просто додати більше квадратів під знак кореня, наприклад: Math.sqrt(v1*v1 + v2*v2 + v3*v3 + v4*v4).  

+ +

Ця ж функція дозволяє робити це швидше і простіше, варто просто викликати Math.hypot(v1, v2) чи Math.hypot(v1, v2, v3, v4, ...).

+ +

Вона також дозволяє уникнути проблеми у випадках, коли гіпотенуза ваших чисел дуже велика.  Найбільше число, яке ви можете зобразити за допомогою чисел подвійної точності у JS - це Number.MAX_VALUE = 1.797...e+308 .  Якщо ваші вхідні числа більші за 1e154, спроба піднести їх до квадрату у результаті дасть Infinity, що повністю зруйнує результат.  Тобто, Math.sqrt(1e200*1e200 + 1e200*1e200) = Infinity .  Якщо ж ви натомість застосуєте hypot(), ви отримаєте цілком нормальний результат Math.hypot(1e200, 1e200) = 1.4142...e+200 .  Це також справедливо для дуже малих чисел.  Math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0, але Math.hypot(1e-200, 1e-200) =1.4142...e-200, тобто цілком корисний результат.

+ +

Оскільки hypot() - це статичний метод об'єкту Math, він завжди використовується як Math.hypot(), а не як метод створеного об'єкту Math  (Math не є конструктором).

+ +

У випадку, якщо функція викликається без аргументів, результатом є +0.

+ +

А якщо хоча б один з аргументів не може бути зведеним до числа, в результаті отримаємо {{jsxref("NaN")}}.

+ +

Якщо дано лише один аргумент, Math.hypot() повертає такий самий результат, як і Math.abs().

+ +

Приклади

+ +

Застосування Math.hypot()

+ +
Math.hypot(3, 4);        // 5
+Math.hypot(3, 4, 5);     // 7.0710678118654755
+Math.hypot();            // 0
+Math.hypot(NaN);         // NaN
+Math.hypot(3, 4, 'foo'); // NaN, +'foo' => NaN
+Math.hypot(3, 4, '5');   // 7.0710678118654755, +'5' => 5
+Math.hypot(-3);          // 3, the same as Math.abs(-3)
+
+ +

Поліфіл

+ +

Цей функціонал можна легко повторити ось такою функцією:

+ +
Math.hypot = Math.hypot || function() {
+  var y = 0, i = arguments.length;
+  while (i--) y += arguments[i] * arguments[i];
+  return Math.sqrt(y);
+};
+
+ +

Більш складний варіант, який дозволяє уникнути описаних вище проблем виходу за межі точності числового формату:

+ +
Math.hypot = function (x, y) {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
+  var max = 0;
+  var s = 0;
+  for (var i = 0; i < arguments.length; i += 1) {
+    var arg = Math.abs(Number(arguments[i]));
+    if (arg > max) {
+      s *= (max / arg) * (max / arg);
+      max = arg;
+    }
+    s += arg === 0 && max === 0 ? 0 : (arg / max) * (arg / max);
+  }
+  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
+};
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.hypot")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/imul/index.html b/files/uk/web/javascript/reference/global_objects/math/imul/index.html new file mode 100644 index 0000000000..21f5d59a3e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/imul/index.html @@ -0,0 +1,97 @@ +--- +title: Math.imul() +slug: Web/JavaScript/Reference/Global_Objects/Math/imul +tags: + - JavaScript + - Math + - imul + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul +--- +
{{JSRef}}
+ +

Функція Math.imul() повертає результат C-подібного 32-бітного множення двох аргументів.

+ +
{{EmbedInteractiveExample("pages/js/math-imul.html")}}
+ + + +

Синтаксис

+ +
var product = Math.imul(a, b);
+ +

Аргументи

+ +
+
a
+
Перше число.
+
b
+
Друге число.
+
+ +

Результат

+ +

Результат C-подібного 32-бітного множення даних аргументів.

+ +

Опис

+ +

Math.imul() дає можливість виконувати 32-бітне цілочисельне множення з C-подібною семантикою. Ця особливість дуже корисна для проектів на зразок Emscripten.

+ +

У зв'язку з тим, що imul() - це статичний метод Math, слід завжди викликати його як Math.imul(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Якщо ви використаєте звичайні числа із рухомою комою в imul, ви отримаєте значну деградацію продуктивності. Причина криється у доволі коштовній з точки зору ресурсів конвертації числа із рухомою комою у ціле для виконання множення, і зворотній конвертації результату. imul() існує у зв'язку із тим, що він швидший у єдиному (поки що) випадку: застосування у AsmJS. AsmJS дозволяє JIST-оптимізаторам простіше реалізовувати цілі числа всередині у JavaScript. Множення двох чисел, що уже зберігаються як цілі (що, поки що, можливо лише з AsmJS) за допомогою imul - це єдина потенційна можливість для Math.imul покращити продуктивність у сучасних браузерах.

+ +

Приклади

+ +

Застосування Math.imul()

+ +
Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         // -8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); // -5
+Math.imul(0xfffffffe, 5); // -10
+
+ +

Поліфіл

+ +

Цей метод може бути реалізований за допомогою наступної функції:

+ +
Math.imul = Math.imul || function(a, b) {
+  var aHi = (a >>> 16) & 0xffff;
+  var aLo = a & 0xffff;
+  var bHi = (b >>> 16) & 0xffff;
+  var bLo = b & 0xffff;
+  // зсув на 0 фіксує знак старшої частини
+  // |0 наприкінці перетворює беззнакове значення у число із знаком
+  return ((aLo * bLo) + (((aHi * bLo + aLo * bHi) << 16) >>> 0) | 0);
+};
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}{{Spec2('ES6')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.imul")}}

diff --git a/files/uk/web/javascript/reference/global_objects/math/index.html b/files/uk/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..2a3acad478 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,153 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +tags: + - JavaScript + - Math + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +
{{JSRef}}
+ +

Math - це вбудований об'єкт із полями і методами для реалізації математичних сталих та функцій. Не являється функцією.

+ +

Math працює з числами типу {{jsxref("Number")}}. Він не підходить для роботи з {{jsxref("BigInt")}}.

+ +

Опис

+ +

На відміну від багатьох інших глобальних об'єктів, Math не являється конструктором. Всі поля і методи Math статичні. Тобто до сталої Пі потрібно звертатись  Math.PI, а функцію синуса викликати через Math.sin(x), де x являється аргументом статичного методу. Всі константи задані із максимальною для дійсних чисел у JavaScript точністю.

+ +

Властивості

+ +
+
{{jsxref("Math.E")}}
+
Стала Ейлера, основа натуральних логарифмів. Приблизно дорівнює 2.718.
+
{{jsxref("Math.LN2")}}
+
Числове значення натурального логарифму від 2. Приблизно дорівнює 0.693.
+
{{jsxref("Math.LN10")}}
+
Числове значення натурального логарифму від 10. Приблизно дорівнює 2.303.
+
{{jsxref("Math.LOG2E")}}
+
Логарифм від ee за основою 2, приблизно дорівнює 1.443.
+
{{jsxref("Math.LOG10E")}}
+
Логарифм від e за основою 10, приблизно дорівнює 0.434.
+
{{jsxref("Math.PI")}}
+
Значення відношення довжини кола до його діаметру, наближено дорівнює 3.14159.
+
{{jsxref("Math.SQRT1_2")}}
+
Квадратний корінь від ½ (еквівалентно 12\frac {1}{\sqrt{2}}). Наближено дорівнює 0.707.
+
{{jsxref("Math.SQRT2")}}
+
Значення квадратного кореня від 2, наближено 1.414.
+
+ +

Методи

+ +
+

Варто зазначити, що тригонометричні функції (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) очікують (і повертають) значення кутів у радіанах.

+ +

Для конвертації радіан в градуси, розділіть значення на (Math.PI / 180). Або помножте на цю величину для виконання зворотної конвертації

+
+ +
+

Майте на увазі, що точність багатьох математичних функцій залежить від конкретної реалізації платформи. Тобто одна і та ж функція у різних браузерах може дати дещо різний результат. Навіть більше - один і той самий 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)")}}
+
Повертає значення арктангенсу частки поданих чисел.
+
{{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)")}}
+
Повертає результат обчислення Ex, де x - це аргумент функції, а E - стала Ейлера (2.718…, основа натурального логарифму).
+
{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}
+
Повертає різницю exp(x) і 1 (тобто значення виразу ex-1e^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, або ln) числа.
+
{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}
+
Повертає натуральний логарифм (㏒e, або ln) виразу 1 + x від числаx.
+
{{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)")}}
+
Повертає результат піднесення до степеня xy.
+
{{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() {{non-standard_inline}}
+
Повертає строку "Math".
+
{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}
+
Повертає цілу частину x, відкидаючи всю дробову частину.
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math-object', 'Math')}}
+ +

Підтримка у браузерах

+ + + +
{{Compat("javascript.builtins.Math")}}
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/ln10/index.html b/files/uk/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..82c50b1911 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,66 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN10 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +
{{JSRef}}
+ +

Поле Math.LN10 відображає значення натурального логарифму 10, що наближено дорівнює 2.302:

+ +

Math.LN10=ln(10)2.302\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302

+ +
{{EmbedInteractiveExample("pages/js/math-ln10.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

У зв'язку із тим, що LN10 - це статичне поле Math, слід завжди використовувати його через Math.LN10, замість викликання його як поля створених вами об'єктів Math (Math не являється конструктором).

+ +

Examples

+ +

Використання Math.LN10

+ +

Наступна функція повертає натуральний логарифм 10:

+ +
function getNatLog10() {
+  return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.LN10")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/ln2/index.html b/files/uk/web/javascript/reference/global_objects/math/ln2/index.html new file mode 100644 index 0000000000..99e5c1f0a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/ln2/index.html @@ -0,0 +1,70 @@ +--- +title: Math.LN2 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN2 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 +--- +
{{JSRef}}
+ +

Поле Math.LN2 відображає значення натурального логарифму 2, що наближено дорівнює 0.693:

+ +

Math.LN2=ln(2)0.693\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693

+ +
{{EmbedInteractiveExample("pages/js/math-ln2.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ + + +

Опис

+ +

У зв'язку із тим, що LN2 - це статичне поле Math, слід завжди використовувати його через Math.LN2, замість викликання його як поля створених вами об'єктів Math (Math не являється конструктором).

+ + + +

Приклади

+ +

Використання Math.LN2

+ +

Наступна функція повертає натуральний логарифм від 2:

+ +
function getNatLog2() {
+  return Math.LN2;
+}
+
+getNatLog2(); // 0.6931471805599453
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.LN2")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/log/index.html b/files/uk/web/javascript/reference/global_objects/math/log/index.html new file mode 100644 index 0000000000..df7d650070 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log/index.html @@ -0,0 +1,113 @@ +--- +title: Math.log() +slug: Web/JavaScript/Reference/Global_Objects/Math/log +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log +--- +
{{JSRef}}
+ +

Функція Math.log() повертає натуральний логарифм (тобто за основою {{jsxref("Math.E", "e")}}) від числа, що являється:

+ +

x>0,Math.log(x)=ln(x)=такий унікальнийy,для якогоey=x\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x

+ +

Функція JavaScript Math.log() еквівелентна ln(x) у математиці.

+ +
{{EmbedInteractiveExample("pages/js/math-log.html")}}
+ + + +

Синтаксис

+ +
Math.log(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) даного числа. Якщо число від'ємне - функція повертає {{jsxref("NaN")}}.

+ +

Опис

+ +

Якщо значення аргументу x від'ємне - функція завжди повертає {{jsxref("NaN")}}.

+ +

У зв'язку з тим, що log() - це статичний метод Math, слід завжди викликати його як Math.log(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Якщо вам потрібно отримати значення натурального логарифму від 2 чи 10, застосуйте вбудовані сталі {{jsxref("Math.LN2")}} чи {{jsxref("Math.LN10")}} .  Якщо вам потрібно отримати значення логарифму за основою 2 чи 10 - використайте {{jsxref("Math.log2()")}} або {{jsxref("Math.log10()")}} .  Якщо вам потрібен логарифм за іншою основою, використайте Math.log(x) / Math.log(іншаОснова), як у прикладі нижче; можливо вам також знадобиться попередньо обчислити 1 / Math.log(іншаОснова).

+ +

Приклади

+ +

Застосування Math.log()

+ +
Math.log(-1); // NaN, out of range
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+
+ +

Застосування Math.log() з іншою основою

+ +

Наступна функція повертає логарифм від y за основою x (тобто, logxy\log_x y):

+ +
function getBaseLog(x, y) {
+  return Math.log(y) / Math.log(x);
+}
+
+ +

Щоправда, якщо ви виконаєте getBaseLog(10, 1000), вона поверне 2.9999999999999996 у зв'язку із округленням чисел із рухомою комою. Звісно, це з дуже великою точністю близько до дійсного результату в 3.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.log', 'Math.log')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.log")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/log10/index.html b/files/uk/web/javascript/reference/global_objects/math/log10/index.html new file mode 100644 index 0000000000..5a55bfb3f4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log10/index.html @@ -0,0 +1,92 @@ +--- +title: Math.log10() +slug: Web/JavaScript/Reference/Global_Objects/Math/log10 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10 +--- +
{{JSRef}}
+ +

Функція Math.log10() повертає логарифм за основою 10 від поданого числа, що являється

+ +

x>0,Math.log10(x)=log10(x)=таким унікальнимy, для якого10y=x\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x

+ +
{{EmbedInteractiveExample("pages/js/math-log10.html")}}
+ + + +

Синтаксис

+ +
Math.log10(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Логарифм за основою 10 від даного числа. Якщо аргумент від'ємний, то функція повертає {{jsxref("NaN")}}.

+ +

Опис

+ +

Якщо значення x менше 0, результатом являється {{jsxref("NaN")}}.

+ +

У зв'язку з тим, що log10() - це статичний метод Math, слід завжди викликати його як Math.log10(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Ця функція еквівалентна Math.log(x) / Math.log(10).  Для отримання log10(e) слід використовувати вбудовану сталу {{jsxref("Math.LOG10E")}}, яка уже дорівнює 1 / {{jsxref("Math.LN10")}}.  

+ +

Приклади

+ +

Застосування Math.log10()

+ +
Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinity
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+
+ +

Поліфіл

+ +

Метод може бути реалізований за допомогою такої функції:

+ +
Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) * Math.LOG10E;
+};
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.log10")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/log10e/index.html b/files/uk/web/javascript/reference/global_objects/math/log10e/index.html new file mode 100644 index 0000000000..a04db0bd60 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log10e/index.html @@ -0,0 +1,66 @@ +--- +title: Math.LOG10E +slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +--- +
{{JSRef}}
+ +

Поле Math.LOG10E відображає значення логарифму ee за основою 10, що приблизно дорівнює 0.434:

+ +

Math.LOG10E=log10(e)0.434\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434

+ +
{{EmbedInteractiveExample("pages/js/math-log10e.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

У зв'язку із тим, що LOG10E - це статичне поле Math, слід завжди звертатись до нього у формі Math.LOG10E. Намагатись викликати LOG10E, звертаючись до полів  створених вами об'єктів Math - некоректно (Math не являється конструктором).

+ +

Приклади

+ +

Використання Math.LOG10E

+ +

Наступна функція повертає логарифм ee за основою 10:

+ +
function getLog10e() {
+  return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.LOG10E")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/log1p/index.html b/files/uk/web/javascript/reference/global_objects/math/log1p/index.html new file mode 100644 index 0000000000..99edc4fbf5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log1p/index.html @@ -0,0 +1,94 @@ +--- +title: Math.log1p() +slug: Web/JavaScript/Reference/Global_Objects/Math/log1p +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p +--- +
{{JSRef}}
+ +

Функція Math.log1p() повертає натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) від результату виразу 1 + дане число. Тобто

+ +

x>-1,Math.log1p(x)=ln(1+x)\forall x > -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)

+ +
{{EmbedInteractiveExample("pages/js/math-log1p.html")}}
+ + + +

Синтаксис

+ +
Math.log1p(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) від 1+x. Якщо значення аргументу менше за -1, функція повертає {{jsxref("NaN")}}.

+ +

Опис

+ +

Для дуже малих значень x, додавання 1 може повністю або частково зменшити точність .  Числа із рухомою комою подвійної точності, що застосовуються у JS, дають вам приблизно 15 знаків точності.  1 + 1e-15 = 1.000000000000001, але 1 + 1e-16 = 1.000000000000000, тобто 1.0. Просто тому, що 15 останніх знаків при такому округленні зникають.  

+ +

Коли ви обчислюєте log(1 + x), ви отримаєте результат, дуже близький до x у випадках, коли x являється малою величиною (саме тому це називається 'натуральним' логарифмом). Якщо ви обчислите Math.log(1 + 1.1111111111e-15) - ви, ймовірно, отримаєте щось близьке до 1.1111111111e-15.  Якщо ж, натомість, ви візьмете логарифм від 1.00000000000000111022 (так, двійкове округлення інколи виглядає не надто гарно), ви отримаєте в якості відповіді 1.11022...e-15, із лише трьома значущими цифрами. Зате за допомогою Math.log1p(1.1111111111e-15) ви отримаєте значно точніший результат - 1.1111111110999995e-15 - із 15 значущими цифрами (власне навіть 16 для цього випадку).

+ +

Якщо значення x менше, ніж -1, результатом зажди буде {{jsxref("NaN")}}.

+ +

У зв'язку з тим, що log1p() - це статичний метод Math, слід завжди викликати його як Math.log1p(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.log1p()

+ +
Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinity
+Math.log1p(-2); // NaN
+
+ +

Поліфіл

+ +

Метод може бути відтворений за допомогою наступної функції:

+ +
Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.log1p")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/log2/index.html b/files/uk/web/javascript/reference/global_objects/math/log2/index.html new file mode 100644 index 0000000000..43e87c72f8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log2/index.html @@ -0,0 +1,102 @@ +--- +title: Math.log2() +slug: Web/JavaScript/Reference/Global_Objects/Math/log2 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 +--- +
{{JSRef}}
+ +

Функція Math.log2() повертає логарифм за основою 2 від числа.  Інакше кажучи,

+ +

x>0,Math.log2(x)=log2(x)=такий унікальнійy,для якого2y=x\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x

+ +
{{EmbedInteractiveExample("pages/js/math-log2.html")}}
+ + + +

Синтаксис

+ +
Math.log2(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Логарифм за основою 2 від даного числа. Якщо значення аргументу від'ємне, функція повертає {{jsxref("NaN")}}.

+ +

Опис

+ +

Якщо значення аргументу x менше від 0, результат завжди дорівнює {{jsxref("NaN")}}.

+ +

У зв'язку з тим, що log2() - це статичний метод Math, слід завжди викликати його як Math.log2(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Ця фукнція є еквівалентною комбінації методів Math.log(x) / Math.log(2).  Для log2(e) використовуйте вбудовану сталу {{jsxref("Math.LOG2E")}}, яка дорівнює 1 / {{jsxref("Math.LN2")}}.  

+ +

Приклади

+ +

Застосування Math.log2()

+ +
Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+
+ +

Поліфіл

+ +

Даний поліфіл емулює функцію Math.log2. Зауважте, що він повертає неточні значення для деяких аргументів (наприклад, 1 << 29), тому обгорніть його у {{jsxref("Math.round()")}}, якщо працюєте із бітовими масками.

+ +
Math.log2 = Math.log2 || function(x) {
+  return Math.log(x) * Math.LOG2E;
+};
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}{{Spec2('ES2015')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.log2")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/log2e/index.html b/files/uk/web/javascript/reference/global_objects/math/log2e/index.html new file mode 100644 index 0000000000..fab39f96f0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log2e/index.html @@ -0,0 +1,66 @@ +--- +title: Math.LOG2E +slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +--- +
{{JSRef}}
+ +

Поле Math.LOG2E відображає логарифм ee за основою 2, що приблизно дорівнює 1.442:

+ +

Math.LOG2E=log2(e)1.442\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442

+ +
{{EmbedInteractiveExample("pages/js/math-log2e.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

У зв'язку із тим, що LOG2E - це статичне поле Math, слід завжди звертатись до нього у формі Math.LOG2E. Намагатись викликати LOG2E, звертаючись до полів  створених вами об'єктів Math - некоректно (Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.LOG2E

+ +

Наступна функція повертає логарифм ee за основою 2:

+ +
function getLog2e() {
+  return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.LOG2E")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/max/index.html b/files/uk/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..d76643fb1e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,102 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Global_Objects/Math/max +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +
{{JSRef}}
+ +

Фукнція Math.max() повертає найбільше значення із довільної кількості (0 та більше) аргументів.

+ +
{{EmbedInteractiveExample("pages/js/math-max.html")}}
+ + + +

Синтаксис

+ +
Math.max([value1[, value2[, ...]]])
+ +

Аргументи

+ +
+
value1, value2, ...
+
Числа.
+
+ +

Результат

+ +

Найбільше із даних чисел. Якщо хоча б один із аргументів неможливо привести до числового типу - буде повернуто {{jsxref("NaN")}}.

+ +

Опис

+ +

У зв'язку з тим, що max() - це статичний метод Math, слід завжди викликати його як Math.max(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Якщо не дано жодного аргумента, результатом буде -{{jsxref("Infinity")}}.

+ +

Якщо щонайменше один із аргументів не можна привести до числового типу, то результатом буде {{jsxref("NaN")}}.

+ +

Приклади

+ +

Застосування Math.max()

+ +
Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+
+ +

Отримання найбільшого з елементів масиву

+ +

{{jsxref("Array.prototype.reduce", "Array.reduce()")}} може застосовуватись для пошуку найбільшого елементу в числовому масиві шляхом порівняння кожного значення:

+ +
var arr = [1,2,3];
+var max = arr.reduce(function(a, b) {
+    return Math.max(a, b);
+});
+
+ +

Наступна функція використовує {{jsxref("Function.prototype.apply()")}} для отримання найбільшого серед масиву чисел. getMaxOfArray([1, 2, 3]) еквівалентна до Math.max(1, 2, 3), проте ви можете застосовувати getMaxOfArray() для масивів, сформованих у процесі виконання програми. Цей спосіб слід застосовувати лише для масивів з відносно невеликою кількістю елементів.

+ +
function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+ + + +

Новий оператор поширення (spread operator) - це більш компактний спосіб записати рішення на базі apply для отримання максимуму із масиву чисел:

+ +
var arr = [1, 2, 3];
+var max = Math.max(...arr);
+
+ +

Однак, як оператор поширення (...), так і apply призведуть до помилки або повернуть невірний результат, якщо вхідний масив має забагато елементів, бо вони намагаються передати елементи масиву в якості параметрів функції. Дивіться Використання методу apply і вбудованих фукнцій для більш докладної інформації. Рішення на базі reduce не має такої проблеми.

+ + + +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.max")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/min/index.html b/files/uk/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..f5e5993976 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,98 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Global_Objects/Math/min +tags: + - JavaScript + - Math + - min + - Довідка + - Мінімум + - Найменше + - Найменше значення + - Найменше число + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +
{{JSRef}}
+ +

Статична функція Math.min() повертає найменше з чисел, поданих на вхід, або ж {{jsxref("NaN")}}, якщо жоден із аргументів не є числом та не може бути перетворений у нього.

+ +
{{EmbedInteractiveExample("pages/js/math-min.html")}}
+ + + +

Синтаксис

+ +
Math.min([value1[, value2[, ...]]])
+ +

Аргументі

+ +
+
value1, value2, ...
+
Нуль, чи більше чисел, з-поміж яких буде вибрано найменше значення.
+
+ +

Результат

+ +

Найменше з поданих чисел. Якщо хоча б один із аргументів не можна перетворити на число, результатом буде {{jsxref("NaN")}}. Якщо функція викликана без аргументів, вона поверне {{jsxref("Infinity")}}.

+ +

Опис

+ +

У зв'язку з тим, що min() - це статичний метод Math, слід завжди викликати його як Math.min(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Якщо не дано жодного аргументу, результатом буде {{jsxref("Infinity")}}.

+ +

Якщо хоча б один із аргументів не може бути приведеним до числа, результатом буде {{jsxref("NaN")}}.

+ +

Приклади

+ +

Застосування Math.min()

+ +

Знайти мінімальне значення з-поміж x та y, і присвоїти його z:

+ +
var x = 10, y = -20;
+var z = Math.min(x, y);
+
+ +

Вибірка значень із Math.min()

+ +

Math.min() часто використовується для того, щоб вибрати значення, що менше або дорівнює якійсь межі. Зокрема, це

+ +
var x = f(foo);
+
+if (x > boundary) {
+  x = boundary;
+}
+
+ +

можна переписати ось так:

+ +
var x = Math.min(f(foo), boundary);
+
+ +

{{jsxref("Math.max()")}} може використовуватись подібним чином для вибірки значень із протилежного боку.

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.min")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/pi/index.html b/files/uk/web/javascript/reference/global_objects/math/pi/index.html new file mode 100644 index 0000000000..de82df2302 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/pi/index.html @@ -0,0 +1,64 @@ +--- +title: Math.PI +slug: Web/JavaScript/Reference/Global_Objects/Math/PI +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI +--- +
{{JSRef}}
+ +

Поле Math.PI відображає значення відношення довжини кола до його діаметру, що приблизно дорівнює 3.14159:

+ +

Math.PI=π3.14159\mathtt{\mi{Math.PI}} = \pi \approx 3.14159

+ +
{{EmbedInteractiveExample("pages/js/math-pi.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

У зв'язку із тим, що PI - це статичне поле Math, слід завжди звертатись до нього у формі Math.PI. Намагатись викликати PI, звертаючись до полів  створених вами об'єктів Math - некоректно (Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.PI

+ +

Наступна функція використовує Math.PI для обчислення довжини кола за заданим діаметром:

+ +
function calculateCircumference(radius) {
+  return Math.PI * (radius + radius);
+}
+
+calculateCircumference(1);  // 6.283185307179586
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.PI")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/pow/index.html b/files/uk/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..951aeccb66 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,117 @@ +--- +title: Math.pow() +slug: Web/JavaScript/Reference/Global_Objects/Math/pow +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +
{{JSRef}}
+ +

Функція Math.pow() повертає результат піднесення основи до показника степеня, тобто, основастепінь.

+ +

 

+ +
{{EmbedInteractiveExample("pages/js/math-pow.html")}}
+ + + +

 

+ +

Синтаксис

+ +
Math.pow(base, exponent)
+ +

Параметри

+ +
+
base
+
Основа степеня.
+
exponent
+
Показник степеня, до якого буде піднесено основу.
+
+ +

Результат

+ +

Число, що відображає значення основи, піднесеної до показника степеня.

+ +

Опис

+ +

Тому що pow() є статичним методом Math, він завжди використовується як Math.pow(), аніж як метод створеного об'єкту Math (Math не має конструктора).

+ +

Приклади

+ +

Використання Math.pow()

+ +
// просте
+Math.pow(7, 2);    // 49
+Math.pow(7, 3);    // 343
+Math.pow(2, 10);   // 1024
+// дроби як показники степеня
+Math.pow(4, 0.5);  // 2 (корінь квадратний від 4)
+Math.pow(8, 1/3);  // 2 (корінь кубічний від 8)
+Math.pow(2, 0.5);  // 1.4142135623730951 (корінь квадратний від 2)
+Math.pow(2, 1/3);  // 1.2599210498948732 (корінь кубічний від 2)
+// показники степеня зі знаками
+Math.pow(7, -2);   // 0.02040816326530612 (1/49)
+Math.pow(8, -1/3); // 0.5
+// основи зі знаками
+Math.pow(-7, 2);   // 49 (квадрати завжди позитивні)
+Math.pow(-7, 3);   // -343 (куби можуть бути негативними)
+Math.pow(-7, 0.5); // NaN (негативні числа не мають дійсного квадратного кореня)
+// через те, що "парні" та "непарні" корені є близькими один до одного,
+// та через обмеження точності представлення чисел з рухомою комою
+// негативні основи з дробовими показниками степіня завжди повертають NaN
+
+Math.pow(-7, 1/3); // NaN
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення, впроваджене у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}{{Spec2('ESDraft')}} 
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript.builtins.Math.pow")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/random/index.html b/files/uk/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..14ee5ccbd5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,113 @@ +--- +title: Math.random() +slug: Web/JavaScript/Reference/Global_Objects/Math/random +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +
{{JSRef}}
+ +

Функція Math.random() повертає псевдо-випадкове число із рухомою комою з проміжку 0–1 (включно із 0, але не включаючи 1) із приблизно рівномірним розподілом значень на ньому (в подальшому його можна масштабувати до потрібних розмірів). Вихідне зерно-параметр для алгоритму генерації випадкового числа обирається реалізацією; воно не може бути обраним чи перевизначеним користувачем.

+ +
{{EmbedInteractiveExample("pages/js/math-random.html")}}
+ +
+

Math.random() не надає криптографічно стійких випадкових чисел. Не слід застосовувати їх будь-де у місцях, пов'язаних із інформаційною безпекою. Натомість використовуйте Web Crypto API, а точніше - метод {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.

+
+ +

Синтаксис

+ +
Math.random()
+ +

Результат

+ +

Псевдовипадкове число із рухомою комою між 0 (включно) та 1 (виключно).

+ +

Приклади

+ +

Зауважте, що числа у JavaScript являються стандартизованими згідно IEEE 754 числами із рухомою комою із поведінкою "округлення до найближчого парного". Тому проміжки, що охоплюються наступними фукнціями (за винятком власне Math.random()) не зовсім точні. За умови дуже великих обраних меж (253 чи більших) можливо у дуже рідкісних випадках отримати значення верхньої межі, яке зазвичай виключається.

+ +

Отримання випадкового числа з-поміж 0 (включно) та 1 (виключно)

+ +
function getRandom() {
+  return Math.random();
+}
+
+ +

Отримання випадкового числа з-поміж двох значень

+ +

Наступний приклад повертає випадкове число між двома вказаними значеннями. Результат не менший від (інколи дорівнює) min, і менший за (але не дорівнює) max.

+ +
function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+ +

Отримання випадкового цілого з-поміж двох значень

+ +

Наступний приклад повертає випадкове ціле число між двома заданими значеннями. Результат не менший від min (або ж від наступного цілого, більшого за min, якщо min не являється цілим), і менший за (але не дорівнює) max.

+ +
function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min; //Включно з мінімальним та виключаючи максимальне значення
+
+}
+
+ +
+

Застосування Math.round() для отримання цілих може виглядати доволі привабливо, проте це призведе до спотворення рівномірного розподілу ймовірності результатів, що може бути неприйнятним для ваших потреб.

+
+ +

Отримання випадкового цілого з-поміж двох значень, включно

+ +

В той час, коли фукнція getRandomInt() включає до спектру результатів мінімум, вона виключає звідти максимум. Що, якщо вам знадобиться включити до можливих результатів як мінімум, так і максимум? Наступна фукнція getRandomIntInclusive() дозволяє цього досягти:

+ +
function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min; //Включаючи мінімум та максимум
+}
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатус документуПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. JavaScript 1.0 (UNIX Only) / JavaScript 1.1 (All platforms).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}{{Spec2('ESDraft')}} 
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript.builtins.Math.random")}}

+ +

 

diff --git a/files/uk/web/javascript/reference/global_objects/math/sign/index.html b/files/uk/web/javascript/reference/global_objects/math/sign/index.html new file mode 100644 index 0000000000..a3b2668270 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sign/index.html @@ -0,0 +1,116 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Reference/Global_Objects/Math/sign +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +
{{JSRef}}
+ +

Функція Math.sign() повертає знак числа, визначаючи, чи являється число додатнім, від'ємним, або нулем.

+ +
{{EmbedInteractiveExample("pages/js/math-sign.html")}}
+ + + +

Синтаксис

+ +
Math.sign(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Число, що відображає знак аргументу. Якщо аргумент являється додатнім числом, від'ємним числом, додатнім чи від'ємним нулем, функція поверне відповідно 1, -1, 0 чи -0. В інших випадках результатом буде {{jsxref("NaN")}}.

+ +

Опис

+ +

У зв'язку з тим, що sign() - це статичний метод Math, слід завжди викликати його як Math.sign(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Ця функція має 5 різних видів результатів: 1, -1, 0, -0, NaN. Вони відповідно відображають "додатнє число", "від'ємне число", "додатній нуль", "від'ємний нуль" та {{jsxref("NaN")}}.

+ +

Аргумент буде неявно перетворено у number при передачі у функцію.

+ +

Приклади

+ +

Застосування Math.sign()

+ +
Math.sign(3);     //  1
+Math.sign(-3);    // -1
+Math.sign('-3');  // -1
+Math.sign(0);     //  0
+Math.sign(-0);    // -0
+Math.sign(NaN);   // NaN
+Math.sign('foo'); // NaN
+Math.sign();      // NaN
+
+ +

Поліфіл

+ +
if (!Math.sign) {
+  Math.sign = function(x) {
+    // Якщо x - NaN, результатом буде NaN.
+    // Якщо x - -0, результатом буде -0.
+    // Якщо x - +0, результатом буде +0.
+    // Якщо x від'ємний, але не -0, результатом буде -1.
+    // Якщо x додатній, але не +0, результатом буде +1.
+    return ((x > 0) - (x < 0)) || +x;
+    // Більш наочне уявлення представлено нижче
+    //
+    // ( (x > 0) ? 0 : 1 )  // якщо від'ємний x - то від'ємна 1
+    //          +           // інакще (бо не може бути одночасно - та +)
+    // ( (x < 0) ? 0 : -1 ) // якщо додатній x - то додатня 1
+    //         ||           // якщо x є 0, -0, чи NaN, чи не являється числом,
+    //         +x           // то результатом буде x, (чи) якщо x не є
+    //                      // числом, то x приводиться до чисельного типу
+  };
+}
+
+ +

У наведеному вище поліфілі не потрібно ніяких додаткових приведень типів (x > 0) чи (x < 0), бо їх віднімання одного від іншого вже вимагає конвертації із булевого типу в числа.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}{{Spec2('ES6')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}{{Spec2('ESDraft')}} 
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript.builtins.Math.sign")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/sin/index.html b/files/uk/web/javascript/reference/global_objects/math/sin/index.html new file mode 100644 index 0000000000..9a9c2bffe4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sin/index.html @@ -0,0 +1,78 @@ +--- +title: Math.sin() +slug: Web/JavaScript/Reference/Global_Objects/Math/sin +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin +--- +
{{JSRef}}
+ +

Функція Math.sin() повертає синус числа.

+ +
{{EmbedInteractiveExample("pages/js/math-sin.html")}}
+ + + +

Синтаксис

+ +
Math.sin(x)
+ +

Аргументи

+ +
+
x
+
Число (кут у радіанах).
+
+ +

Результат

+ +

Синус даного числа.

+ +

Опис

+ +

Метод Math.sin() повертає число з-поміж -1 та 1, що відповідає синусу даного у радіанах кута.

+ +

У зв'язку з тим, що sin() - це статичний метод Math, слід завжди викликати його як Math.sin(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.sin()

+ +
Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript.builtins.Math.sin")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/sinh/index.html b/files/uk/web/javascript/reference/global_objects/math/sinh/index.html new file mode 100644 index 0000000000..f3e3d83b02 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sinh/index.html @@ -0,0 +1,93 @@ +--- +title: Math.sinh() +slug: Web/JavaScript/Reference/Global_Objects/Math/sinh +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh +--- +
{{JSRef}}
+ +

Функція Math.sinh() повертає гіперболічний синус числа. За допомогою{{jsxref("Math.E", "сталої e", "", 1)}} це можна обчислити так:

+ +

Math.sinh(x)=ex-e-x2\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}

+ +
{{EmbedInteractiveExample("pages/js/math-sinh.html")}}
+ + + +

Синтаксис

+ +
Math.sinh(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Гіперболічний синус даного числа.

+ +

Опис

+ +

У зв'язку з тим, що sinh() - це статичний метод Math, слід завжди викликати його як Math.sinh(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.sinh()

+ +
Math.sinh(0); // 0
+Math.sinh(1); // 1.1752011936438014
+
+ +

Поліфіл

+ +

Такий же результат можна отримати за допомогою фукнції {{jsxref("Math.exp()")}}:

+ +
Math.sinh = Math.sinh || function(x) {
+  return (Math.exp(x) - Math.exp(-x)) / 2;
+}
+
+ +

або ж викликаючи {{jsxref("Math.exp()")}} лише один раз:

+ +
Math.sinh = Math.sinh || function(x) {
+  var y = Math.exp(x);
+  return (y - 1 / y) / 2;
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript.builtins.Math.sinh")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html new file mode 100644 index 0000000000..7ef247ceff --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html @@ -0,0 +1,81 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +
{{JSRef}}
+ +

Функція Math.sqrt() повертає квадратний корінь від числа, що являється

+ +

x0,Math.sqrt(x)=x=такий унікальнийy0, для якогоy2=x\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x

+ +
{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}
+ + + +

Синтаксис

+ +
Math.sqrt(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Квадратний корінь даного числа. Якщо число від'ємне, функція повертає {{jsxref("NaN")}}.

+ +

Опис

+ +

Якщо значення x від'ємне, Math.sqrt() повертає {{jsxref("NaN")}}.

+ +

У зв'язку з тим, що sqrt() - це статичний метод Math, слід завжди викликати його як Math.sqrt(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.sqrt()

+ +
Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+Math.sqrt(-0); // -0
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript.builtins.Math.sqrt")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html new file mode 100644 index 0000000000..a73d0f91af --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html @@ -0,0 +1,65 @@ +--- +title: Math.SQRT1_2 +slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +--- +
{{JSRef}}
+ +

Поле Math.SQRT1_2 відображає значення квадратного кореня від 1/2, що приблизно дорівнює 0.707:

+ +

Math.SQRT1_2=12=12=220.707\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} = \frac{\sqrt{2}}{2} \approx 0.707

+ +
{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

У зв'язку із тим, що SQRT1_2 - це статичне поле Math, слід завжди звертатись до нього у формі Math.SQRT1_2. Намагатись викликати SQRT1_2, звертаючись до полів  створених вами об'єктів Math - некоректно (Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.SQRT1_2

+ +

Наступна функція повертає значення квадратного кореня від 1/2:

+ +
function getRoot1_2() {
+  return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.SQRT1_2")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html new file mode 100644 index 0000000000..546d939b3f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html @@ -0,0 +1,65 @@ +--- +title: Math.SQRT2 +slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +--- +
{{JSRef}}
+ +

Поле Math.SQRT2 відображає значення квадратного кореня із 2, що приблизно дорівнює 1.414:

+ +

Math.SQRT2=21.414\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414

+ +
{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

У зв'язку із тим, що SQRT2 - це статичне поле Math, слід завжди звертатись до нього у формі Math.SQRT2. Намагатись викликати SQRT2, звертаючись до полів  створених вами об'єктів Math - некоректно (Math не являється конструктором).

+ +

Приклади

+ +

Використання Math.SQRT2

+ +

Наступна функція повертає значення квадратного кореня із 2:

+ +
function getRoot2() {
+  return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.SQRT2")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/tan/index.html b/files/uk/web/javascript/reference/global_objects/math/tan/index.html new file mode 100644 index 0000000000..1a5149a778 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/tan/index.html @@ -0,0 +1,83 @@ +--- +title: Math.tan() +slug: Web/JavaScript/Reference/Global_Objects/Math/tan +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan +--- +
{{JSRef}}
+ +

Функція Math.tan() повертає тангенс від числа.

+ +
{{EmbedInteractiveExample("pages/js/math-tan.html")}}
+ + + +

Синтаксис

+ +
Math.tan(x)
+ +

Аргументи

+ +
+
x
+
Число, що являє собою кут в радіанах.
+
+ +

Результат

+ +

Тангенс даного числа.

+ +

Опис

+ +

Метод Math.tan() повертає числове значення, що відповідає тангенсу поданого кута.

+ +

У зв'язку з тим, що tan() - це статичний метод Math, слід завжди викликати його як Math.tan(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.tan()

+ +
Math.tan(1); // 1.5574077246549023
+
+ +

Так як функція Math.tan() приймає значення в радіанах, але зазвичай зручніше працювати із градусами, наступна функція приймає значення кута в градусах, перетворює його в радіани та повертає тангенс.

+ +
function getTanDeg(deg) {
+  var rad = deg * Math.PI/180;
+  return Math.tan(rad);
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}
+ +

Підтримка в браузерах

+ + + +

{{Compat("javascript.builtins.Math.tan")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/tanh/index.html b/files/uk/web/javascript/reference/global_objects/math/tanh/index.html new file mode 100644 index 0000000000..84bd6008fb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/tanh/index.html @@ -0,0 +1,85 @@ +--- +title: Math.tanh() +slug: Web/JavaScript/Reference/Global_Objects/Math/tanh +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh +--- +
{{JSRef}}
+ +

Функція Math.tanh() повертає значення гіперболічного тангенса від числа, що також можна висловити як:

+ +

tanhx=sinhxcoshx=ex-e-xex+e-x=e2x-1e2x+1\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}

+ +
{{EmbedInteractiveExample("pages/js/math-tanh.html")}}
+ +

Синтаксис

+ +
Math.tanh(x)
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Гіперболічний тангенс даного числа.

+ +

Опис

+ +

У зв'язку з тим, що tanh() - це статичний метод Math, слід завжди викликати його як Math.tanh(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.tanh()

+ +
Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+
+ +

Поліфіл

+ +

Даний метод можна емулювати за допомогою функції {{jsxref("Math.exp()")}}:

+ +
Math.tanh = Math.tanh || function(x){
+    var a = Math.exp(+x), b = Math.exp(-x);
+    return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.tanh")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/math/trunc/index.html b/files/uk/web/javascript/reference/global_objects/math/trunc/index.html new file mode 100644 index 0000000000..d3fa2704c5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/trunc/index.html @@ -0,0 +1,128 @@ +--- +title: Math.trunc() +slug: Web/JavaScript/Reference/Global_Objects/Math/trunc +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc +--- +
{{JSRef}}
+ +

Функція Math.trunc() повертає цілу частину числа, повністю відкидаючи дробову.

+ +
{{EmbedInteractiveExample("pages/js/math-trunc.html")}}
+ + + +

Синтаксис

+ +
Math.trunc(x)
+
+ +

Аргументи

+ +
+
x
+
Число.
+
+ +

Результат

+ +

Ціла частина даного числа.

+ +

Опис

+ +

На відміну від трьох інших методів Math ({{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} та {{jsxref("Math.round()")}}), принцип роботи Math.trunc() дуже простий. Функція просто відкидає кому (крапку) та всі цифри правої частини, не зважаючи на те, являється аргумент додатнім, чи від'ємним.

+ +

Аргумент, поданий на вхід цієї функції, буде неявно приведений до чисельного типу.

+ +

У зв'язку з тим, що trunc() - це статичний метод Math, слід завжди викликати його як Math.trunc(), аніж як метод створеного вами об'єкту Math (оскільки Math не являється конструктором).

+ +

Приклади

+ +

Застосування Math.trunc()

+ +
Math.trunc(13.37);    // 13
+Math.trunc(42.84);    // 42
+Math.trunc(0.123);    //  0
+Math.trunc(-0.123);   // -0
+Math.trunc('-1.123'); // -1
+Math.trunc(NaN);      // NaN
+Math.trunc('foo');    // NaN
+Math.trunc();         // NaN
+
+ +

Поліфіл

+ +
if (!Math.trunc) {
+	Math.trunc = function(v) {
+		v = +v;
+		if (!isFinite(v)) return v;
+
+		return (v - v % 1)   ||   (v < 0 ? -0 : v === 0 ? v : 0);
+
+		// повертає:
+		//  0        ->  0
+		// -0        -> -0
+		//  0.2      ->  0
+		// -0.2      -> -0
+		//  0.7      ->  0
+		// -0.7      -> -0
+		//  Infinity ->  Infinity
+		// -Infinity -> -Infinity
+		//  NaN      ->  NaN
+		//  null     ->  0
+	};
+}
+
+ +

чи:

+ +
if (!Math.trunc) {
+	Math.trunc = function(v) {
+		v = +v;
+		return (v - v % 1)   ||   (!isFinite(v) || v === 0 ? v : v < 0 ? -0 : 0);
+	};
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ES2015')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ + + +

{{Compat("javascript.builtins.Math.trunc")}}

+ +

Дивіться також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/math/\320\267\320\260\320\276\320\272\321\200\321\203\320\263\320\265\320\273\320\275\320\275\321\217/index.html" "b/files/uk/web/javascript/reference/global_objects/math/\320\267\320\260\320\276\320\272\321\200\321\203\320\263\320\265\320\273\320\275\320\275\321\217/index.html" new file mode 100644 index 0000000000..92cc055f83 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/math/\320\267\320\260\320\276\320\272\321\200\321\203\320\263\320\265\320\273\320\275\320\275\321\217/index.html" @@ -0,0 +1,194 @@ +--- +title: Math.round() +slug: Web/JavaScript/Reference/Global_Objects/Math/заокругелння +tags: + - JavaScript + - Math + - Довідка + - Заокруглення + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +
{{JSRef}}
+ +

Функція Math.round() повертає значення числа заокруглене до найближчого цілого.

+ +

 

+ +
{{EmbedInteractiveExample("pages/js/math-round.html")}}
+ + + +

 

+ +

Синтаксис

+ +
Math.round(x)
+ +

Параметри

+ +
+
x
+
Число.
+
+ +

Повернуте значення

+ +

Значення отриманого числа, округлене до найближчого цілого.

+ +

Опис

+ +

Якщо дробова частина числа більша або рівна 0.5, аргумент буде округлено до найближчого більшого цілого. Якщо дробова частина числа менша 0.5, аргумент буде округлено до найближчого меншого цілого. Якщо дробова частина рівна 0.5, то аргумент буде округлено до найближчого цілого в напрямку +∞.  Зверніть увагу, що функція round() відрізняється від багатьох мов, які часто приводять цей випадок до наступного цілого числа, віддаленого від нуля (маємо інший результат у випадку від'ємних чисел з дробовою частиною рівною 0.5).

+ +

Оскільки round() - це статичний метод Math, ви завжди використовуєте його як Math.round (), а не як метод об'єкта Math, який ви створили (Math не має конструктора).

+ +

Приклади

+ +
Math.round( 20.49); //  20
+Math.round( 20.5);  //  21
+Math.round( 42  );  //  42
+Math.round(-20.5);  // -20
+Math.round(-20.51); // -21
+
+ +

Десяткове округлення

+ +
// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN;
+    }
+    // If the value is negative...
+    if (value < 0) {
+      return -decimalAdjust(type, -value, exp);
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+Math.round10(1.005, -2);   // 1.01 -- compare this with Math.round(1.005*100)/100 above
+Math.round10(-1.005, -2);  // -1.01
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

PHP-Like rounding Method

+ +

The code below can be used to add your own version of Math.round to your own namespace which takes a precision parameter. Unlike Decimal rounding in the example above, this performs no conversion to and from strings, and the precision parameter works same way as PHP and Excel whereby a positive 1 would round to 1 decimal place and -1 would round to the tens.

+ +
var myNamespace = {};
+
+myNamespace.round = function(number, precision) {
+    var factor = Math.pow(10, precision);
+    var tempNumber = number * factor;
+    var roundedTempNumber = Math.round(tempNumber);
+    return roundedTempNumber / factor;
+};
+
+myNamespace.round(1234.5678, 1); // 1234.6
+myNamespace.round(1234.5678, -1); // 1230
+ +

Cпецифікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Впроваджено в JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.round', 'Math.round')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}{{Spec2('ESDraft')}} 
+ +

Сумісність браузерів

+ + + +

{{Compat("javascript.builtins.Math.round")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/nan/index.html b/files/uk/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..7a2ee5fd8c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,91 @@ +--- +title: NaN +slug: Web/JavaScript/Reference/Global_Objects/NaN +tags: + - JavaScript + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +
{{jsSidebar("Objects")}}
+ +

Глобальна властивість NaN - це значення, що служить для відображення "не числа" (Not-A-Number).

+ +

{{js_property_attributes(0,0,0)}}

+ +
{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}
+ + + +

Опис

+ +

NaN є властивістю глобального об'єкта. Іншими словами, це змінна глобальної області видимості.

+ +

Початковим значенням NaN є "не число" — так само, як і значення {{jsxref("Number.NaN")}}. У сучасних переглядачах NaN — це властивість, недоступна для запису та налаштування. Навіть якщо у вашому випадку це не так, уникайте її перевизначення. У програмах NaN застосовується досить рідко.

+ +

Існує п'ять різних типів операцій, що повертають NaN:

+ + + +

Приклади

+ +

Первірка на NaN

+ +

NaN не дорівнює (через ==, !=, === та !==) будь-якому значенню, в тому числі іншому значенню NaN. Використовуйте {{jsxref("Number.isNaN()")}} або {{jsxref("Global_Objects/isNaN", "isNaN()")}}, щоб якнайточніше визначити, чи значення є NaN. Або ж виконуйте порівняння аргументу із самим собою: тільки NaN не дорівнює собі.

+ +
NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+function valueIsNaN(v) { return v !== v; }
+valueIsNaN(1);          // false
+valueIsNaN(NaN);        // true
+valueIsNaN(Number.NaN); // true
+
+ +

Однак, пам'ятайте про відмінність між isNaN() та Number.isNaN(): перший поверне true, якщо аргумент є NaN, або якщо він стане NaN після приведення до чисельного типу, в той час як другий поверне true лише у випадку, якщо аргумент на даний момент є NaN:

+ +
isNaN('привіт'); // повертає 'true'.
+Number.isNaN('привіт'); // повертає 'false'.
+
+ +

Додатково, деякі методи масивів не знаходять NaN, в той час, як інші знаходять.

+ +
let arr = [2, 4, NaN, 12];
+arr.indexOf(NaN);                      // -1 (false)
+arr.includes(NaN);                     // true
+arr.findIndex(n => Number.isNaN(n));   // 2
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}
+ +

Підтримка у веб-переглядачах

+ + + +

{{Compat("javascript.builtins.NaN")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/null/index.html b/files/uk/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..2088955324 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,93 @@ +--- +title: 'null' +slug: Web/JavaScript/Reference/Global_Objects/null +tags: + - JavaScript + - Literal + - Проста величина +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +
{{jsSidebar("Objects")}}
+ +

Значення null позначає навмисну відсутність будь-якого значення об'єкта. Воно є однією з {{glossary("Primitive", "простих величин")}} у JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}
+ + + +

Синтаксис

+ +

Значення null має відповідний літерал:

+ +
null
+ +

Опис

+ +

Власне null не є ідентифікатором властивості глобального об'єкта (змінною в загальній області видимості), як {{jsxref("Global_Objects/undefined", "undefined")}}. Натомість null є значенням, яке свідчить, що змінна не вказує на об'єкт. В різних API значення null часто повертається там, де очікують отримати об'єкт, вказуючи таким чином, що відповідного об'єкта немає.

+ +
// Змінна foo не існує. Вона не була оголошена тож і початкового значння не має:
+foo;  // "ReferenceError: foo is not defined"
+
+// Тепер змінна foo оголошена й існує, але вона не має ані типу, ані значення:
+var foo = null;
+foo;  // виводить "null"
+
+ +

Різниця між null та undefined

+ +

Порівнюючи змінну з null чи undefined зважайте на різницю між операторами рівності (==) й тотожності (===), оскільки перший за потреби здійснює перетворення типів.

+ +
typeof null          // "object" (не "null" з метою зворотної сумісності)
+typeof undefined     // "undefined"
+null === undefined   // false
+null  == undefined   // true
+null === null        // true
+null == null         // true
+!null                // true
+isNaN(1 + null)      // false
+isNaN(1 + undefined) // true
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкова виознака.
{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-null-value', 'null value')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-null-value', 'null value')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.null")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html new file mode 100644 index 0000000000..cf5a10c622 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html @@ -0,0 +1,101 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +
{{JSRef}}
+ +
+

Ця функціональність не рекомендована до використання на користь визначення гетерів за допомогою синтаксису ініціалізації об'єктів або API {{jsxref("Object.defineProperty()")}}. Хоча ця функціональність широко реалізована, вона описана у специфікації ECMAScript тільки задля legacy-використання. Цей метод не бажано використовувати, оскільки існують кращі альтернативи.

+
+ +

Метод __defineGetter__ прив'язує властивість об'єкта до функції, яка викликатиметься під час звернення до властивості.

+ +

Синтаксис

+ +
obj.__defineGetter__(prop, func)
+ +

Параметри

+ +
+
prop
+
Рядок, що містить ім'я властивості, яку треба прив'язати до наданої функції.
+
func
+
Функція, що прив'язується до вказаної властивості.
+
+ +

Значення, що повертається

+ +

{{jsxref("undefined")}}.

+ +

Опис

+ +

Метод __defineGetter__ дозволяє визначити {{jsxref("Operators/get", "гетер", "", 1)}} на існуючому об'єкті.

+ +

Приклади

+ +
// Нестандартний та не рекомендований спосіб
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Стандартні способи
+
+// Використання оператора get
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// Використання Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+
+ +

Специфікації

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}{{Spec2('ESDraft')}}Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.defineGetter")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html new file mode 100644 index 0000000000..c8874d8a8a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html @@ -0,0 +1,116 @@ +--- +title: Object.prototype.__defineSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +--- +
{{JSRef}}
+ +
+

Ця функціональність не рекомендована до використання на користь синтаксису ініціалізації об'єктів або API {{jsxref("Object.defineProperty()")}}.

+ +

Однак, оскільки вона широко використовується у Всесвітній мережі, дуже малоймовірно, що веб-переглядачі припинять її підтримку.

+
+ +

Метод __defineSetter__  прив'язує властивість об'єкта до функції, яка викликатиметься під час спроби присвоїти значення цієї властивості.

+ +

Синтаксис

+ +
obj.__defineSetter__(prop, fun)
+ +

Параметри

+ +
+
prop
+
Рядок, що містить ім'я властивості, яка буде прив'язана до наданої функції.
+
fun
+
Функція, що викликатиметься при спробі присвоїти значення вказаної властивості. Ця функція має форму +
function(val) { . . . }
+ +
+
val
+
Псевдонім змінної, яка містить значення для присвоєння prop.
+
+
+
+ +

Значення, що повертається

+ +

{{jsxref("undefined")}}.

+ +

Опис

+ +

Метод __defineSetter__ дозволяє визначення {{jsxref("Operators/set", "сетера", "", 1)}} на попередньо створеному об'єкті.

+ +

Приклади

+ +
// Нестандартний та не рекомендований спосіб
+
+var o = {};
+o.__defineSetter__('value', function(val) { this.anotherValue = val; });
+o.value = 5;
+console.log(o.value); // undefined
+console.log(o.anotherValue); // 5
+
+
+// Стандартні способи
+
+// Використання оператора set
+var o = { set value(val) { this.anotherValue = val; } };
+o.value = 5;
+console.log(o.value); // undefined
+console.log(o.anotherValue); // 5
+
+// Використання Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'value', {
+  set: function(val) {
+    this.anotherValue = val;
+  }
+});
+o.value = 5;
+console.log(o.value); // undefined
+console.log(o.anotherValue); // 5
+
+ +

Специфікації

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}{{Spec2('ESDraft')}}Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.defineSetter")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html new file mode 100644 index 0000000000..d801ac6354 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html @@ -0,0 +1,89 @@ +--- +title: Object.prototype.__lookupGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод __lookupGetter__ повертає функцію, прив'язану в якості гетера вказаної властивості.

+ +

Синтаксис

+ +
obj.__lookupGetter__(sprop)
+ +

Параметри

+ +
+
sprop
+
Рядок, що містить ім'я властивості, гетер якої має бути повернений.
+
+ +

Значення, що повертається

+ +

Функція, прив'язана в якості гетера до вказаної властивості.

+ +

Опис

+ +

Якщо для властивості об'єкта був визначений гетер, неможливо отримати посилання на нього через цю властивість, оскільки властивість посилається на значення, яке повертає ця функція. Методом __lookupGetter__ можна отримати посилання на функцію-гетер.

+ +

Зараз це стало можливо робити стандартизованими засобами, через {{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.getPrototypeOf()")}}.

+ +

Приклади

+ +
var obj = {
+  get foo() {
+    return Math.random() > 0.5 ? 'foo' : 'bar';
+  }
+};
+
+
+// Нестандартний та не рекомендований спосіб
+obj.__lookupGetter__('foo');
+// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; })
+
+
+// Стандартний спосіб
+Object.getOwnPropertyDescriptor(obj, "foo").get;
+// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; })
+
+ +

Специфікації

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}{{Spec2('ESDraft')}}Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.lookupGetter")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html new file mode 100644 index 0000000000..c7ce0deb21 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html @@ -0,0 +1,89 @@ +--- +title: Object.prototype.__lookupSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод __lookupSetter__ повертає функцію, прив'язану в якості сетера вказаної властивості.

+ +

Синтаксис

+ +
obj.__lookupSetter__(sprop)
+ +

Параметри

+ +
+
sprop
+
Рядок, що містить ім'я властивості, сетер якої має бути повернений.
+
+ +

Значення, що повертається

+ +

Функція, прив'язана в якості сетера до вказаної властивості.

+ +

Опис

+ +

Якщо для властивості об'єкта був визначений сетер, неможливо отримати посилання на функцію-сетер через цю властивість, оскільки властивість посилається на значення, яке повертає функція-гетер. Методом __lookupSetter__ можна отримати посилання на функцію-сетер.

+ +

Зараз це стало можливо робити стандартизованим засобом, через {{jsxref("Object.getOwnPropertyDescriptor()")}}.

+ +

Приклади

+ +
var obj = {
+  set foo(value) {
+    this.bar = value;
+  }
+};
+
+
+// Нестандартний та не рекомендований спосіб
+obj.__lookupSetter__('foo')
+// (function(value) { this.bar = value; })
+
+
+// Стандартний спосіб
+Object.getOwnPropertyDescriptor(obj, 'foo').set;
+// (function(value) { this.bar = value; })
+
+ +

Специфікації

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}{{Spec2('ESDraft')}}Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.lookupSetter")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/assign/index.html b/files/uk/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..3bbaac64b9 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,273 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +
{{JSRef}}
+ +

Метод Object.assign() призначено для копіювання у цільовий об'єкт всіх особистих (не успадкованих) перелічуваних властивостей одного або декількох об'єктів. Метод повертає цільовий об'єкт.

+ +

{{EmbedInteractiveExample("pages/js/object-assign.html")}}

+ + + +

Синтаксис

+ +
Object.assign(target, ...sources)
+ +

Параметри

+ +
+
target
+
Цільовий об'єкт.
+
sources
+
Вхідні об'єкти (щонайменше один).
+
+ +

Вертає

+ +

Цільовий об'єкт.

+ +

Опис

+ +

Властивості цільового об'єкта будуть заміщені властивостями вхідних об'єктів, якщо вони мають той самий ключ. Пізніші властивості вхідних об'єктів схожим чином заміщують більш ранні.

+ +

Метод Object.assign() копіює лише перелічувані та особисті властивості з кожного джерела у цільовий об'єкт. Він використовує [[Get]] на вхідних об'єктах та [[Set]] на цільовому об'єкті, а отже, здійснює виклики гетерів і сетерів. Таким чином, він присвоює властивості, а не просто копіює чи визначає нові властивості. Ця особливість може зробити метод непридатним для приєднання нових властивостей до прототипу, якщо вхідні джерела містять гетери.

+ +

Для копіювання визначень властивостей разом з їх перелічуваністю у прототип натомість скористайтеся методами {{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.defineProperty()")}}.

+ +

Копіюються властивості обох типів: як {{jsxref("String","рядкові")}}, так і {{jsxref("Symbol","символьні")}}.

+ +

В разі помилки, наприклад, якщо властивість є недоступною для запису, викидається помилка {{jsxref("TypeError")}}, а об'єкт target може бути змінений, якщо будь-які властивості були додані до викидання помилки.

+ +
+

Заувага: Object.assign() не викидає помилок, якщо серед джерел є значення {{jsxref("null")}} чи {{jsxref("undefined")}}.

+
+ +

Приклади

+ +

Клонування об'єкта

+ +
const obj = { a: 1 };
+const copy = Object.assign({}, obj);
+console.log(copy);  // { a: 1 }
+
+ +

Заувага щодо створення глибокої копії

+ +

Для створення глибокої копії необхідно скористатись альтернативними методами, тому що метод Object.assign() копіює значення властивостей. Якщо значенням джерела буде посилання на об'єкт, метод скопіює лише значення посилання.

+ +
function test() {
+  'use strict';
+
+  let obj1 = { a: 0 , b: { c: 0}};
+  let obj2 = Object.assign({}, obj1);
+  console.log(JSON.stringify(obj2));  // { a: 0, b: { c: 0}}
+
+  obj1.a = 1;
+  console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2));  // { a: 0, b: { c: 0}}
+
+  obj2.a = 2;
+  console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2));  // { a: 2, b: { c: 0}}
+
+  obj2.b.c = 3;
+  console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 3}}
+  console.log(JSON.stringify(obj2));  // { a: 2, b: { c: 3}}
+
+  // Глибока копія
+  obj1 = { a: 0 , b: { c: 0}};
+  let obj3 = JSON.parse(JSON.stringify(obj1));
+  obj1.a = 4;
+  obj1.b.c = 4;
+  console.log(JSON.stringify(obj3));  // { a: 0, b: { c: 0}}
+}
+
+test();
+ +

Злиття об'єктів

+ +
const o1 = { a: 1 };
+const o2 = { b: 2 };
+const o3 = { c: 3 };
+
+const obj = Object.assign(o1, o2, o3);
+
+console.log(obj);  // { a: 1, b: 2, c: 3 }
+console.log(o1);   // { a: 1, b: 2, c: 3 }, змінено сам цільовий об'єкт
+ +

Злиття об'єктів з однаковими властивостями

+ +
const o1 = { a: 1, b: 1, c: 1 };
+const o2 = { b: 2, c: 2 };
+const o3 = { c: 3 };
+
+const obj = Object.assign({}, o1, o2, o3);
+console.log(obj);  // { a: 1, b: 2, c: 3 }
+ +

Властивості перезаписуються однойменними властивостями інших об'єктів, що стоять далі в списку параметрів.

+ +

Копіювання символьних властивостей

+ +
const o1 = { a: 1 };
+const o2 = { [Symbol('foo')]: 2 };
+
+const obj = Object.assign({}, o1, o2);
+console.log(obj);  // { a : 1, [Symbol("foo")]: 2 }
+Object.getOwnPropertySymbols(obj);  // [Symbol(foo)]
+
+ +

Властивості з ланцюжка прототипів та неперелічувані властивості скопіювати не можна

+ +
const obj = Object.create({ foo: 1 }, { // властивість foo належить до ланцюжка прототипів об'єкта obj
+  bar: {
+    value: 2  // bar є неперелічуваною властивістю
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz є перелічуваною особистою властивістю
+  }
+});
+
+const copy = Object.assign({}, obj);
+console.log(copy);  // { baz: 3 }
+
+ +

Прості величини буде загорнуто у об'єкти

+ +
const v1 = 'абв';
+const v2 = true;
+const v3 = 10;
+const v4 = Symbol('foo');
+
+const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Прості величини будуть загорнуті, null та undefined ігноруються.
+// Зауважте, лише рядкові обгортки можуть мати особисті неперелічувані властивості.
+console.log(obj); // { "0": "а", "1": "б", "2": "в" }
+
+ +

Винятки переривають процес копіювання

+ +
const target = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writable: false
+}); // Властивість target.foo доступна лише для читання
+
+Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" is read-only
+// Викидається виняток під час присвоювання target.foo
+
+console.log(target.bar);   // 2, перше джерело було успішно скопійовано
+console.log(target.foo2);  // 3, першу властивість другого джерела було успішно скопійовано
+console.log(target.foo);   // 1, тут трапилась помилка
+console.log(target.foo3);  // undefined, метод assign завершився, властивість foo3 не буде скопійована
+console.log(target.baz);   // undefined, третє джерело також не буде скопійоване
+
+ +

Копіювання аксесорів

+ +
const obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+let copy = Object.assign({}, obj);
+console.log(copy);
+// { foo: 1, bar: 2 }, значенням copy.bar буде значення, що поверне геттер obj.bar
+
+// Ця функція присвоювання повністю скопіює дескриптори
+function completeAssign(target, ...sources) {
+  sources.forEach(source => {
+    let descriptors = Object.keys(source).reduce((descriptors, key) => {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // За замовчуванням, метод Object.assign копіює перелічувані властивості типу Symbol також
+    Object.getOwnPropertySymbols(source).forEach(sym => {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copy = completeAssign({}, obj);
+console.log(copy);
+// { foo:1, get bar() { return 2 } }
+
+ +

Запасний варіант (поліфіл)

+ +

Наведений {{Glossary("Polyfill", "поліфіл")}} не підтримує символьних властивостей, позаяк ES5 не має такого типу:

+ +
if (typeof Object.assign != 'function') {
+  // Має бути writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length функції дорівнює 2
+      'use strict';
+      if (target == null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource != null && nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            // Запобігає помилок, коли hasOwnProperty заміщено
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+     },
+     writable: true,
+     configurable: true
+   });
+ }
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.assign")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/constructor/index.html b/files/uk/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..ef2362cdec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,237 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Global_Objects/Object/constructor +tags: + - JavaScript + - Object + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +
{{JSRef}}
+ +

Повертає посилання на функцію-конструктор {{jsxref("Object", "об'єкта")}}, що створила екземпляр об'єкта. Зауважте, що значення цієї властивості є посиланням на саму функцію, а не рядком, що містить ім'я функції. Значення, доступне лише для читання, мають лише примітивні значення, як то 1true або "test".

+ +

Опис

+ +

Усі об'єкти (за виключенням об'єктів, створених через Object.create(null)) матимуть властивість constructor. Об'єкти, створені без явного використання функції-конструктора (тобто, об'єктними та масивними літералами), матимуть властивість constructor, що вказує на конструктор фундаментального об'єкта для цього об'єкта.

+ +
var o = {};
+o.constructor === Object; // true
+
+var o = new Object;
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var a = new Array;
+a.constructor === Array; // true
+
+var n = new Number(3);
+n.constructor === Number; // true
+ +

Приклади

+ +

Відображення конструктора об'єкта

+ +

Наступний приклад створює конструктор Tree та об'єкт цього типу, theTree. Далі приклад демонструє властивість constructor об'єкта theTree.

+ +
function Tree(name) {
+  this.name = name;
+}
+
+var theTree = new Tree('Redwood');
+console.log('theTree.constructor дорівнює ' + theTree.constructor);
+
+ +

Цей приклад виведе наступний результат:

+ +
theTree.constructor дорівнює function Tree(name) {
+  this.name = name;
+}
+
+ +

Зміна конструктора об'єкта

+ +

Наступний приклад покаже як можна змінити конструктор загальних об'єктів. Тільки true, 1 та "test" не зміняться, оскілки їхні конструктори доступні лише для читання. Цей приклад демонструє, що не завжди безпечно покладатися на властивість об'єкта constructor.

+ +
function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // лишається незмінним
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // лишається незмінним
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // лишається незмінним
+];
+
+for (var i = 0; i < types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+
+ +

Цей приклад виведе наступний результат (коментарі додані для довідки):

+ +
function Type() {},false,                                     // new Array()
+function Type() {},false,                                     // []
+function Type() {},false,false                                // new Boolean()
+function Boolean() {
+    [native code]
+},false,true                                                  // true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600    // new Date()
+function Type() {},false,Error                                // new Error()
+function Type() {},false,function anonymous() {
+
+}                                                             // new Function()
+function Type() {},false,function () {}                       // function () {}
+function Type() {},false,[object Math]                        // Math
+function Type() {},false,0                                    // new Number()
+function Number() {
+    [native code]
+},false,1                                                     // 1
+function Type() {},false,[object Object]                      // new Object()
+function Type() {},false,[object Object]                      // {}
+function Type() {},false,/(?:)/                               // new Regexp()
+function Type() {},false,/(?:)/                               // /(?:)/
+function Type() {},false,                                     // new String()
+function String() {
+    [native code]
+},false,test
+ +

Зміна конструктора функції

+ +

Переважно ця властивість використовується для визначення функції як функції-конструктора з подальшим викликом її з оператором new та наслідуванням через ланцюжок прототипів.

+ +
function Parent() {}
+Parent.prototype.parentMethod = function parentMethod() {};
+
+function Child() {}
+Child.prototype = Object.create(Parent.prototype); // перевизначення дочірнього прототипу на прототип Parent
+
+Child.prototype.constructor = Child; // повернення початкового конструктора прототипу Child
+ +

Але коли нам потрібно виконувати цей останній рядок? Нажаль, відповідь - залежить від обставин.

+ +

Спробуємо визначити випадки, коли переприсвоєння початкового конструктора зіграє важливу роль, а коли воно стане додатковим непотрібним рядком коду.

+ +

Візьмемо наступний випадок: об'єкт має метод create для створення самого себе.

+ +
function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create(); // TypeError undefined is not a function, оскільки constructor === Parent
+ +

У наведеному вище прикладі виняток виникне тому, що конструктор посилається на Parent.

+ +

Щоб уникнути цього, просто призначте потрібний конструктор, який ви збираєтесь використовувати.

+ +
function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+CreatedConstructor.prototype.constructor = CreatedConstructor; // призначте конструктор, який будете використовувати
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create(); // так непогано
+ +

Гаразд, тепер зрозуміло, чому зміна конструктора може бути досить корисною.

+ +

Розглянемо інший випадок.

+ +
function ParentWithStatic() {}
+
+ParentWithStatic.startPosition = { x: 0, y:0 };
+ParentWithStatic.getStartPosition = function getStartPosition() {
+  return this.startPosition;
+}
+
+function Child(x, y) {
+  this.position = {
+    x: x,
+    y: y
+  };
+}
+
+Child.prototype = Object.create(ParentWithStatic.prototype);
+Child.prototype.constructor = Child;
+
+Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
+  var position = this.position;
+  var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, оскільки конструктор - Child
+
+  return {
+    offsetX: startPosition.x - position.x,
+    offsetY: startPosition.y - position.y
+  }
+};
+ +

В цьому прикладі нам треба залишити батьківський конструктор, щоб все працювало як слід.

+ +

Висновок: ручна зміна або встановлення конструктора може призвести до різноманітних та іноді заплутаних наслідків. Щоб запобігти цьому, визначте роль конструктора у кожному конкретному випадку. В більшості випадків конструктор не використовується, і в перепризначенні немає необхідності.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}{{Spec2('ES5.1')}}
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.constructor")}}

+ +
diff --git a/files/uk/web/javascript/reference/global_objects/object/count/index.html b/files/uk/web/javascript/reference/global_objects/object/count/index.html new file mode 100644 index 0000000000..67940e270a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/count/index.html @@ -0,0 +1,44 @@ +--- +title: Object.prototype.__count__ +slug: Web/JavaScript/Reference/Global_Objects/Object/count +tags: + - JavaScript + - Object + - Властивість + - застаріла + - нестандартна +translation_of: Archive/Web/JavaScript/Object.count +--- +
{{JSRef}}{{Non-standard_Header}}{{obsolete_header("gecko2")}}
+ +

Властивість __count__ містила кількість перелічуваних властивостей об'єкта, але була прибрана.

+ +

Синтаксис

+ +
obj.__count__
+ +

Приклади

+ +
{ 1: 1 }.__count__              // 1
+[].__count__                    // 0
+[1].__count__                   // 1
+[1, /* hole */, 2, 3].__count__ // 3
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.count")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/create/index.html b/files/uk/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..189aba3ebb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,406 @@ +--- +title: Object.create() +slug: Web/JavaScript/Reference/Global_Objects/Object/create +tags: + - ECMAScript 5 + - JavaScript + - 'Null' + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +
{{JSRef}}
+ +

Метод Object.create() створює новий об'єкт, використовуючи існуючий об'єкт як прототип для новоствореного об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/object-create.html")}}
+ + + +

Синтаксис

+ +
Object.create(proto, [propertiesObject])
+ +

Параметри

+ +
+
proto
+
Об'єкт, що має бути прототипом для новоствореного об'єкта.
+
propertiesObject {{Optional_inline}}
+
Якщо вказаний та не дорівнює {{jsxref("undefined")}}, об'єкт, чиї власні перелічувані властивості (тобто, властивості, визначені на самому об'єкті, а не перелічувані властивості, отримані через ланцюжок прототипів) визначають дескриптори властивостей, що мають бути додані до новоствореного об'єкта, з відповідними іменами властивостей. Ці властивості відповідають другому аргументу {{jsxref("Object.defineProperties()")}}.
+
+ +

Значення, що повертається

+ +

Новий об'єкт з зазначеним прототипом та властивостями.

+ +

Винятки

+ +

Виняток {{jsxref("TypeError")}}, якщо параметр propertiesObject дорівнює {{jsxref("null")}} або це об'єкт, що не є обгорткою простого типу.

+ +

Приклади

+ +

Класичне наслідування через Object.create()

+ +

Нижче наведено приклад використання Object.create() для отримання класичного наслідування. Це приклад одиночного наслідування, єдиного, яке підтримує JavaScript.

+ +
// Shape - батьківський клас
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// метод батьківського класу
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Фігуру переміщено.');
+};
+
+// Rectangle - дочірній клас
+function Rectangle() {
+  Shape.call(this); // виклик батьківського конструктора.
+}
+
+// дочірній клас розширює батьківській клас
+Rectangle.prototype = Object.create(Shape.prototype);
+
+//Якщо ви не призначите Object.prototype.constructor значення Rectangle,
+//він візьме prototype.constructor класу Shape (батьківського).
+//Щоб уникнути цього, ми призначаємо prototype.constructor значення Rectangle (дочірній).
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('Чи є rect екземпляром Rectangle?', rect instanceof Rectangle); // true
+console.log('Чи є rect екземпляром Shape?', rect instanceof Shape); // true
+rect.move(1, 1); // Виводить 'Фігуру переміщено.'
+
+ +

Якщо ви бажаєте успадкуватись від кількох об'єктів, можна використати домішки.

+ +
function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+// успадкувати від одного класу
+MyClass.prototype = Object.create(SuperClass.prototype);
+// змішати з іншим
+Object.assign(MyClass.prototype, OtherSuperClass.prototype);
+// перепризначити конструктор
+MyClass.prototype.constructor = MyClass;
+
+MyClass.prototype.myMethod = function() {
+  // зробити щось
+};
+
+ +

Метод {{jsxref("Object.assign()")}} копіює властивості з прототипу OtherSuperClass у прототип MyClass, роблячи їх доступними для усіх екземплярів MyClass. Object.assign() був запроваджений у ES2015 і може бути відтворений поліфілом. Якщо необхідна підтримка більш старих переглядачів, можна використати jQuery.extend() або _.assign().

+ +

Використання аргументу propertiesObject у Object.create()

+ +
var o;
+
+// створити об'єкт з прототипом null
+o = Object.create(null);
+
+
+o = {};
+// є еквівалентом:
+o = Object.create(Object.prototype);
+
+
+// У цьому прикладі ми створюємо об'єкт з парою
+// зразкових властивостей. (Зауважте, що другий параметр
+// встановлює ключі у відповідності до *дескрипторів властивості*.)
+o = Object.create(Object.prototype, {
+  // foo - це звичайна властивість-значення
+  foo: {
+    writable: true,
+    configurable: true,
+    value: 'hello'
+  },
+  // bar - це властивість-аксесор (має гетер та сетер)
+  bar: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) {
+      console.log('Призначення `o.bar` значення', value);
+    }
+/* з аксесорами ES2015 наш код може виглядати так
+    get() { return 10; },
+    set(value) {
+      console.log('Призначення `o.bar` значення', value);
+    } */
+  }
+});
+
+
+function Constructor() {}
+o = new Constructor();
+// є еквівалентом:
+o = Object.create(Constructor.prototype);
+// Звісно, якщо у функції Constructor присутній
+// код ініціалізації,
+// Object.create() не може його відобразити
+
+
+// Створити новий об'єкт, чиїм прототипом є новий, порожній
+// об'єкт, та додати єдину властивість 'p' зі значенням 42.
+o = Object.create({}, { p: { value: 42 } });
+
+// за замовчуванням властивості НЕДОСТУПНІ для запису,
+// переліку чи налаштування:
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// щоб визначити властивість у ES3
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+/* є еквівалентом:
+o2 = Object.create({p: 42}) */
+
+
+ +

Користувацькі та нульові об'єкти

+ +

Новий об'єкт, створений на основі користувацького об'єкта (особливо об'єкт, створений на основі об'єкта null, який по суті є користувацьким об'єктом, що НЕ МАЄ членів), може поводитись неочікувано. Особливо під час налагодження, оскільки звичайні функції утиліт для перетворення/видалення об'єктних властивостей можуть генерувати помилки або просто втрачати інформацію (особливо якщо використовують перехоплювачі помилок, що ігнорують помилки). Наприклад, ось два об'єкти:

+ +
oco = Object.create( {} );   // створити нормальний об'єкт
+ocn = Object.create( null ); // створити "нульовий" об'єкт
+
+> console.log(oco) // {} -- Виглядає нормально
+> console.log(ocn) // {} -- Поки що теж виглядає нормально
+
+oco.p = 1; // створити просту властивість на нормальному об'єкті
+ocn.p = 0; // створити просту властивість на "нульовому" об'єкті
+
+> console.log(oco) // {p: 1} -- Досі виглядає нормально
+> console.log(ocn) // {p: 0} -- Теж виглядає нормально. АЛЕ СТРИВАЙТЕ...
+
+ +


+ Як показано вище, поки що все виглядає нормальним. Однак, при спробі використати ці об'єкти, їхні відмінності швидко стають очевидними:

+ +
> "oco is: " + oco // виводить "oco is: [object Object]"
+
+> "ocn is: " + ocn // викидає помилку: Cannot convert object to primitive value
+
+ +

Перевірка лише декількох з багатьох базових вбудованих функцій більш чітко демонструє величину проблеми:

+ +
> alert(oco) // виводить [object Object]
+> alert(ocn) // викидає помилку: Cannot convert object to primitive value
+
+> oco.toString() // виводить [object Object]
+> ocn.toString() // викидає помилку: ocn.toString is not a function
+
+> oco.valueOf() // виводить {}
+> ocn.valueOf() // викидає помилку: ocn.valueOf is not a function
+
+> oco.hasOwnProperty("p") // виводить "true"
+> ocn.hasOwnProperty("p") // викидає помилку: ocn.hasOwnProperty is not a function
+
+> oco.constructor // виводить "Object() { [native code] }"
+> ocn.constructor // виводить "undefined"
+
+ +


+ Як вже сказано, ці відмінності можуть швидко зробити процес відлагодження навіть простих на вигляд проблем дуже заплутаним. Наприклад:

+ +

Проста звичайна функція налагодження:

+ +
// вивести пари ключ-значення властивостей верхнього рівня наданого об'єкта
+function ShowProperties(obj){
+  for(var prop in obj){
+    console.log(prop + ": " + obj[prop] + "\n" )
+  }
+}
+ +


+ Не такі прості результати: (особливо якщо перехоплювач помилок сховав повідомлення про помилки)

+ +
ob={}; ob.po=oco; ob.pn=ocn; // створити складний об'єкт з наданих вище тестових об'єктів в якості значень властивостей
+
+> ShowProperties( ob ) // вивести властивості верхнього рівня
+- po: [object Object]
+- Error: Cannot convert object to primitive value
+
+Зауважте, що виводиться тільки перша властивість.
+
+ +


+ (Але якщо такий самий об'єкт був просто створений в іншому порядку -- принаймні, в деяких реалізаціях...)

+ +
ob={}; ob.pn=ocn; ob.po=oco; // створити знову такий самий об'єкт, але створити ті самі властивості в іншому порядку
+
+> ShowProperties( ob ) // вивести властивості верхнього рівня
+- Error: Cannot convert object to primitive value
+
+Зауважте, що жодна властивість не виводиться.
+ +

Зауважте, що такий відмінний порядок може виникнути статично, через відмінний зафіксований код, як ось тут, а може й динамічно, через порядок, в якому виконуються під час запуску гілки коду з додаванням властивостей, що залежить від вхідних даних та/або випадкових змінних. Знову ж таки, реальний порядок перебору не гарантований, в якому б порядку не додавалися члени об'єкта.

+ +

Деякі рішення, що не працюють

+ +

Гарне вирішення проблеми відсутніх об'єктних методів не завжди є очевидним.

+ +

Пряме додавання відсутнього об'єктного метода зі стандартного об'єкта НЕ працює:

+ +
ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше)
+
+ocn.toString = Object.toString; // оскільки йому бракує методу, призначити його прямо зі стандартного об'єкта
+
+> ocn.toString // виводить "toString() { [native code] }" -- схоже, що відсутній метод тепер додано
+> ocn.toString == Object.toString // виводить "true" -- схоже, це той самий метод, що й у стандартному об'єкті
+
+> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
+
+ +


+ Пряме додавання відсутнього об'єктного метода у "прототип" нового об'єкта також не працює, оскільки у нового об'єкта немає справжнього прототипа (що й є справжньою причиною УСІХ цих проблем), і його не можна додати прямо:

+ +
ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше)
+
+ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined
+
+ocn.prototype = {};                       // спробувати створити прототип
+ocn.prototype.toString = Object.toString; // оскільки об'єкту бракує методу, призначити його прямо зі стандартного об'єкта
+
+> ocn.toString() // error: ocn.toString is not a function
+
+ +


+ Додавання відсутнього об'єктного метода використанням стандартного об'єкта в якості прототипа нового об'єкта також не працює:

+ +
ocn = Object.create( null );        // створити "нульовий" об'єкт (такий самий, як і раніше)
+Object.setPrototypeOf(ocn, Object); // встановити значенням прототипу нового об'єкта стандартний об'єкт
+
+> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
+
+ +

Деякі вдалі рішення

+ +

Як вже сказано, пряме додавання відсутнього об'єктного методу зі стандартного об'єкта НЕ працює. Однак, пряме додавання загального метода ПРАЦЮЄ:

+ +
ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше)
+
+ocn.toString = toString; // оскільки об'єкту бракує методу, призначити його прямо з загальної версії
+
+> ocn.toString() // виводить "[object Object]"
+> "ocn is: " + ocn // виводить "ocn is: [object Object]"
+
+
+ob={}; ob.pn=ocn; ob.po=oco; // створити складний об'єкт (такий самий, як і раніше)
+
+> ShowProperties(ob) // вивести властивості верхнього рівня
+- po: [object Object]
+- pn: [object Object]
+
+ +

Однак, встановлення загального прототипу прототипом нового об'єкта працює навіть краще:

+ +
ocn = Object.create( null );                  // створити "нульовий" об'єкт (такий самий, як і раніше)
+Object.setPrototypeOf(ocn, Object.prototype); // встановити значенням прототипу нового об'єкта "загальний" об'єкт (НЕ стандартний об'єкт)
+
+ +

(На додачу до функцій, пов'язаних з рядками, що наведені вище, це також додає:)

+ +
> ocn.valueOf() // виводить {}
+> ocn.hasOwnProperty("x") // виводить "false"
+> ocn.constructor // виводить "Object() { [native code] }"
+
+// ...та вся решта властивостей та методів Object.prototype.
+
+ +

Як бачимо, об'єкти, змінені таким чином, тепер виглядають дуже схожими на звичайні об'єкти.

+ +

Поліфіл

+ +

Цей поліфіл покриває основний сценарій використання, а саме, створення нового об'єкта, для якого був обраний прототип, але не бере до уваги другий аргумент.

+ +

Зауважте, що в той час як використання null в якості [[Prototype]] підтримується в реальному методі ES5 Object.create, цей поліфіл не може це підтримувати через обмеження, притаманне версіям ECMAScript нижче 5.

+ +
 if (typeof Object.create !== "function") {
+    Object.create = function (proto, propertiesObject) {
+        if (typeof proto !== 'object' && typeof proto !== 'function') {
+            throw new TypeError("Прототипом об'єкта може бути тільки об'єкт: " + proto);
+        } else if (proto === null) {
+            throw new Error("Реалізація Object.create у цьому браузері є шимом та не підтримує 'null' в якості першого аргументу.");
+        }
+
+        if (typeof propertiesObject != 'undefined') {
+            throw new Error("Реалізація Object.create у цьому браузері є шимом та не підтримує другий аргумент.");
+        }
+
+        function F() {}
+        F.prototype = proto;
+
+        return new F();
+    };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.create")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html new file mode 100644 index 0000000000..342fea9106 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html @@ -0,0 +1,198 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +tags: + - ECMAScript 5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +
{{JSRef}}
+ +

Метод Object.defineProperties() визначає нові або модифікує існуючі властивості прямо на об'єкті, вертаючи цей об'єкт.

+ +
{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}
+ + + +

Синтаксис

+ +
Object.defineProperties(obj, props)
+ +

Параметри

+ +
+
obj
+
Об'єкт, на якому визначаються чи модифікуються властивості.
+
props
+
Об'єкт, чиї ключі відображають імена властивостей, які треба визначити чи модифікувати, і чиї значення є об'єктами, що описують ці властивості. Кожне значення у props має бути або дескриптором даних, або дескриптором доступу; воно не може бути обома (детальніше читайте у {{jsxref("Object.defineProperty()")}}).
+
Дескриптори даних та дескриптори доступу можуть мати наступні необов'язкові ключі:
+
+
+
configurable
+
Дорівнює true тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, і якщо властивість може бути видалена з відповідного об'єкта.
+ За замовчуванням false.
+
enumerable
+
Дорівнює true тоді й тільки тоді, коли ця властивість відображається під час переліку властивостей відповідного об'єкта.
+ За замовчуванням false.
+
+ +

Дескриптор даних також має наступні необов'язкові ключі:

+ +
+
value
+
Значення, пов'язане з властивістю. Може бути будь-яким з чинних значень JavaScript (числом, об'єктом, функцією і т.д.).
+ За замовчуванням {{jsxref("undefined")}}.
+
writable
+
Дорівнює true тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене {{jsxref("Operators/Оператори_присвоєння", "оператором присвоєння", "", 1)}}.
+ За замовчуванням false.
+
+ +

Дескриптор доступу також має наступні необов'язкові ключі:

+ +
+
get
+
Функція, що виступає властивістю-гетером, або {{jsxref("undefined")}}, якщо гетера немає. Значення, що повертає функція, буде використане як значення властивості.
+ За замовчуванням {{jsxref("undefined")}}.
+
set
+
Функція, що виступає властивістю-сетером, або {{jsxref("undefined")}}, якщо сетера немає. Функція буде отримувати єдиним аргументом нове значення, що призначається властивості.
+ За замовчуванням {{jsxref("undefined")}}.
+
+ +

Якщо в дескриптора немає жодного з ключів value, writable, get або set, він сприймається як дескриптор даних. Якщо дескриптор має і value або writable, і get або set, викидається виняток.

+
+
+ +

Значення, що повертається

+ +

Об'єкт, переданий у функцію.

+ +

Опис

+ +

Метод Object.defineProperties, по суті, визначає всі властивості у відповідності до власних перелічуваних властивостей props на об'єкті obj.

+ +

Приклад

+ +
var obj = {};
+Object.defineProperties(obj, {
+  'property1': {
+    value: true,
+    writable: true
+  },
+  'property2': {
+    value: 'Привіт',
+    writable: false
+  }
+  // і т.д., і т.п.
+});
+
+ +

Поліфіл

+ +

За умови незміненого середовища виконання, де всі імена та властивості посилаються на свої первинні значення, метод Object.defineProperties є майже повністю еквівалентним (зауважте коментар у isCallable) наступній реімплементації у JavaScript:

+ +
function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // Увага: відредагуйте за необхідності, якщо інші значення, крім функцій, доступні для виклику.
+      return typeof v === 'function';
+    }
+
+    if (typeof desc !== 'object' || desc === null)
+      throw new TypeError('bad desc');
+
+    var d = {};
+
+    if (hasProperty(desc, 'enumerable'))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, 'configurable'))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, 'value'))
+      d.value = desc.value;
+    if (hasProperty(desc, 'writable'))
+      d.writable = !!desc.writable;
+    if (hasProperty(desc, 'get')) {
+      var g = desc.get;
+
+      if (!isCallable(g) && typeof g !== 'undefined')
+        throw new TypeError('bad get');
+      d.get = g;
+    }
+    if (hasProperty(desc, 'set')) {
+      var s = desc.set;
+      if (!isCallable(s) && typeof s !== 'undefined')
+        throw new TypeError('bad set');
+      d.set = s;
+    }
+
+    if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d))
+      throw new TypeError('identity-confused descriptor');
+
+    return d;
+  }
+
+  if (typeof obj !== 'object' || obj === null)
+    throw new TypeError('bad obj');
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i < keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i < descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.defineProperties")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..6e6907e958 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,501 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +tags: + - ECMAScript 5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +
{{JSRef}}
+ +

Статичний метод Object.defineProperty() визначає нову властивість безпосередньо на об'єкті, або модифікує існуючу властивість на об'єкті, та повертає об'єкт.

+ +
+

Заувага: Цей метод викликається прямо на конструкторі {{jsxref("Object")}}, а не на екземплярі типу Object.

+
+ +

{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}

+ + + +

Синтаксис

+ +
Object.defineProperty(obj, prop, descriptor)
+ +

Параметри

+ +
+
obj
+
Об'єкт, на якому визначається властивість.
+
prop
+
Ім'я або {{jsxref("Symbol", "символ")}} властивості для визначення чи модифікації.
+
descriptor
+
Дескриптор для властивості, що модифікується чи визначається.
+
+ +

Значення, що повертається

+ +

Об'єкт, що був переданий у функцію.

+ +

Опис

+ +

Цей метод дозволяє точно додавати чи модифікувати властивість об'єкту. Звичайне додавання властивості через призначення створює властивості, які з'являються під час переліку властивостей (цикл {{jsxref("Statements/for...in", "for...in")}} або метод {{jsxref("Object.keys")}}), чиї значення можуть бути змінені та можуть бути {{jsxref("Operators/delete", "видалені", "", 1)}}. Даний метод дозволяє змінити ці додаткові деталі у стані за замовчуванням. За замовчуванням, значення, додані за допомогою Object.defineProperty(), є незмінними.

+ +

Дескриптори властивостей у об'єктах бувають двох основних видів: дескриптори даних та дескриптори доступу. Дескриптор даних - це властивість, що має значення, яке може бути або не бути доступне для запису. Дескриптор доступу - це властивість, описана парою функцій гетер-сетер. Дескриптор має бути одного з двох видів, і не може належати до обох.

+ +

І дескриптори даних, і дескриптори доступу є об'єктами. Вони мають наступні необов'язкові ключі (Значення за замовчуванням у випадку визначення властивостей через Object.defineProperty()):

+ +
+
configurable
+
Дорівнює true тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкту.
+ За замовчуванням false.
+
enumerable
+
Дорівнює true тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті..
+ За замовчуванням false.
+
+ +

Дескриптор даних також має наступні необов'язкові ключі:

+ +
+
value
+
Значення, пов'язане з властивістю. Може бути будь-яким з чинних значень JavaScript (числом, об'єктом, функцією і т. д.).
+ За замовчуванням {{jsxref("undefined")}}.
+
writable
+
Дорівнює true тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене за допомогою {{jsxref("Operators/Assignment_Operators", "оператора присвоєння", "", 1)}}.
+ За замовчуванням false.
+
+ +

Дескриптор доступу також має наступні необов'язкові ключі:

+ +
+
get
+
Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає. Коли відбувається звернення до властивості, ця функція викликається без аргументів, а this присвоюється об'єкт, через який відбулось звернення до властивості (це може бути не той об'єкт, на якому властивість була визначена, через наслідування).
+ За замовчуванням {{jsxref("undefined")}}.
+
set
+
Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає. Коли властивості присвоюється значення, функція викликається з одним аргументом (значення, яке присвоюється), а this присвоюється об'єкт, через який відбувається присвоєння.
+ За замовчуванням {{jsxref("undefined")}}.
+
+ +

Якщо в дескриптора немає жодного з ключів value, writable, get або set, він сприймається як дескриптор даних. Якщо дескриптор має і value або writable, і get або set, викидається виняток.

+ +

Майте на увазі, що ці атрибути не обов'язково є особистими властивостями дескриптора. Успадковані властивості також будуть враховуватись. Щоб впевнитись, що значення за замовчуванням збережуться, ви можете заморозити {{jsxref("Object.prototype")}} заздалегідь, явно вказуючи всі опції, або вказати {{jsxref("null")}} через {{jsxref("Object.create", "Object.create(null)")}}.

+ +
// використовуючи __proto__
+var obj = {};
+var descriptor = Object.create(null); // немає успадкованих властивостей
+// за замовчуванням недоступний для запису, переліку та налаштування
+descriptor.value = 'static';
+Object.defineProperty(obj, 'key', descriptor);
+
+// явно задані ключі
+Object.defineProperty(obj, 'key', {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: 'static'
+});
+
+// перероблення того самого об'єкта
+function withValue(value) {
+  var d = withValue.d || (
+    withValue.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+
+  // уникаємо дублювання операції присвоєння значення
+  if (d.value !== value) d.value = value;
+
+  return d;
+}
+// ... і ...
+Object.defineProperty(obj, 'key', withValue('static'));
+
+// якщо замороження доступне, воно запобігає додаванню або
+// видаленню властивостей прототипу об'єкта
+// (value, get, set, enumerable, writable, configurable)
+(Object.freeze || Object)(Object.prototype);
+ +

Приклади

+ +

Якщо хочете дізнатись, як використовувати метод Object.defineProperty з двійковими прапорами, дивіться додаткові приклади.

+ +

Створення властивості

+ +

Коли зазначеної властивості в об'єкті не існує, Object.defineProperty() створює нову властивість за описом. Поля можуть бути пропущені у дескрипторі, тоді для цих полів будуть задані значення за замовчуванням.

+ +
var o = {}; // Створює новий об'єкт
+
+// Приклад властивості об'єкта, доданої
+// за допомогою defineProperty з дескриптором даних
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+// Властивість 'а' існує в об'єкті o, її значення дорівнює 37
+
+// Приклад властивості об'єкта, доданої
+// за допомогою defineProperty з дескриптором доступу
+var bValue = 38;
+Object.defineProperty(o, 'b', {
+  get: function() { return bValue; },
+  set: function(newValue) { bValue = newValue; },
+  enumerable: true,
+  configurable: true
+});
+o.b; // 38
+// Властивість 'b' існує в об'єкті o, її значення дорівнює 38
+// Значення o.b тепер завжди ідентичне bValue,
+// якщо o.b не була перевизначена
+
+// Не можна змішувати обидва типи
+Object.defineProperty(o, 'conflict', {
+  value: 0x9f91102,
+  get: function() { return 0xdeadbeef; }
+});
+// викидає TypeError: value існує
+// тільки в дескрипторах даних,
+// get існує тільки в дескрипторах доступу
+ +

Модифікація властивості

+ +

Коли властивість вже існує, Object.defineProperty() намагається модифікувати властивість згідно значень у дескрипторі та поточної конфігурації об'єкта. Якщо атрибут configurable старого дескриптора дорівнював false, властивість вважається недоступною для налаштування. Неможливо змінити жоден атрибут властивості-аксесора, недоступної для налаштування. Для властивості-значення можливо змінити значення, якщо властивість доступна для запису, також можливо змінити атрибут writable з true на false. Неможливо переключатись між типами властивостей, коли властивість недоступна для налаштування.

+ +

Помилка {{jsxref("TypeError")}} викидається при спробах змінити атрибути властивості, недоступної для налаштування (окрім value та writable, якщо їх дозволено змінювати), крім випадку, коли поточне та нове значення однакові.

+ +

Атрибут writable

+ +

Коли атрибут властивості writable встановлений у false, властивість вважається недоступною для запису. Їй не можна переприсвоїти значення.

+ +
var o = {}; // Створює новий об'єкт
+
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: false
+});
+
+console.log(o.a); // виводить 37
+o.a = 25; // Помилка не викидається
+// (Викидалась би у строгому режимі,
+// навіть якщо значеня таке саме)
+console.log(o.a); // виводить 37. Присвоєння не спрацювало.
+
+// строгий режим
+(function() {
+  'use strict';
+  var o = {};
+  Object.defineProperty(o, 'b', {
+    value: 2,
+    writable: false
+  });
+  o.b = 3; // викидає TypeError: "b" доступна лише для читання
+  return o.b; // без попереднього рядка вертає 2
+}());
+ +

Як видно з прикладу, спроби запису у властивість, недоступну для запису, не змінюють її, але й не викидають помилки.

+ +

Атрибут enumerable

+ +

Атрибут властивості enumerable визначає, чи буде властивість підхоплена методом {{jsxref("Object.assign()")}} або оператором розкладу. Для не {{jsxref("Symbols", "символьних")}} властивостей він також визначає, чи буде властивість з'являтись у циклі {{jsxref("Statements/for...in", "for...in")}} та у {{jsxref("Object.keys()")}}, чи ні.

+ +
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
+o.d = 4; // enumerable за замовчуванням дорівнює true,
+         // якщо властивість створюється через присвоєння
+Object.defineProperty(o, Symbol.for('e'), {
+  value: 5,
+  enumerable: true
+});
+Object.defineProperty(o, Symbol.for('f'), {
+  value: 6,
+  enumerable: false
+});
+
+for (var i in o) {
+  console.log(i);
+}
+// виводить 'a' та 'd' (у невизначеному порядку)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+o.propertyIsEnumerable('d'); // true
+o.propertyIsEnumerable(Symbol.for('e')); // true
+o.propertyIsEnumerable(Symbol.for('f')); // false
+
+var p = { ...o }
+p.a // 1
+p.b // undefined
+p.c // undefined
+p.d // 4
+p[Symbol.for('e')] // 5
+p[Symbol.for('f')] // undefined
+ +

Атрибут configurable

+ +

Атрибут configurable контролює одночасно, чи може властивість бути видалена з об'єкту, та чи можуть її атрибути (інші, крім value та writable) бути змінені.

+ +
var o = {};
+Object.defineProperty(o, 'a', {
+  get() { return 1; },
+  configurable: false
+});
+
+Object.defineProperty(o, 'a', {
+  configurable: true
+}); // викидає TypeError
+Object.defineProperty(o, 'a', {
+  enumerable: true
+}); // викидає TypeError
+Object.defineProperty(o, 'a', {
+  set() {}
+}); // викидає TypeError (set не був визначений попередньо)
+Object.defineProperty(o, 'a', {
+  get() { return 1; }
+}); // викидає TypeError
+// (хоча новий get робить рівно те саме)
+Object.defineProperty(o, 'a', {
+  value: 12
+}); // викидає TypeError
+// ('value' можна змінити, коли 'configurable' дорівнює false,
+// але не у цьому випадку, через аксесор 'get')
+
+console.log(o.a); // виводить 1
+delete o.a; // Нічого не відбувається
+console.log(o.a); // виводить 1
+ +

Якби атрибут configurable властивості o.a дорівнював true, жодна з помилок не з'явилася б, і властивість була б видалена наприкінці.

+ +

Додавання властивостей та значень за замовчуванням

+ +

Важливо враховувати, яким чином задаються значення атрибутів за замовчуванням. Часто є різниця між простим присвоєнням значення через крапкову нотацію та використанням Object.defineProperty(), як показано нижче у прикладі.

+ +
var o = {};
+
+o.a = 1;
+// є еквівалентом:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: true,
+  configurable: true,
+  enumerable: true
+});
+
+// З іншого боку,
+Object.defineProperty(o, 'a', { value: 1 });
+// є еквівалентом:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: false,
+  configurable: false,
+  enumerable: false
+});
+
+ +

Користувацьки сетери та гетери

+ +

Приклад нижче показує, як реалізувати об'єкт, що самоархівується. Коли призначається властивість temperature, масив archive отримує запис журналу подій.

+ +
function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+
+ +

У цьому прикладі гетер завжди повертає одне й те саме значення.

+ +
var pattern = {
+    get() {
+        return 'Що б ти не призначив, ' +
+               'я завжди повертаю цей рядок';
+    },
+    set() {
+        this.myname = "Це рядок з моїм ім'ям";
+    }
+};
+
+function TestDefineSetAndGet() {
+    Object.defineProperty(this, 'myproperty', pattern);
+}
+
+var instance = new TestDefineSetAndGet();
+instance.myproperty = 'тест';
+console.log(instance.myproperty);
+// Що б ти не призначив, я завжди повертаю цей рядок
+
+console.log(instance.myname); // Це рядок з моїм ім'ям
+ +

Успадкування властивостей

+ +

Якщо властивість-аксесор була успадкована, її методи get та set викликатимуться при зверненні до властивості та будуть модифіковані на об'єктах-нащадках. Якщо ці методи використовують змінну для зберігання значення, це значення буде спільним для усіх об'єктів.

+ +
function myclass() {
+}
+
+var value;
+Object.defineProperty(myclass.prototype, "x", {
+  get() {
+    return value;
+  },
+  set(x) {
+    value = x;
+  }
+});
+
+var a = new myclass();
+var b = new myclass();
+a.x = 1;
+console.log(b.x); // 1
+ +

Це можна виправити, зберігаючи значення у іншій властивості. У методах get та set this вказує на об'єкт, що використовується для звернення або для модифікації властивості.

+ +
function myclass() {
+}
+
+Object.defineProperty(myclass.prototype, "x", {
+  get() {
+    return this.stored_x;
+  },
+  set(x) {
+    this.stored_x = x;
+  }
+});
+
+var a = new myclass();
+var b = new myclass();
+a.x = 1;
+console.log(b.x); // undefined
+ +

На відміну від властивостей-аксесорів, властивості-значення завжди присвоюються самому об'єкту, а не прототипу. Проте, якщо успадковується властивість-значення, недоступна для запису, це все одно не дозволяє змінювати властивість на об'єкті.

+ +
function myclass() {
+}
+
+myclass.prototype.x = 1;
+Object.defineProperty(myclass.prototype, "y", {
+  writable: false,
+  value: 1
+});
+
+var a = new myclass();
+a.x = 2;
+console.log(a.x); // 2
+console.log(myclass.prototype.x); // 1
+a.y = 2; // Ігнорується, викидає виняток у строгому режимі
+console.log(a.y); // 1
+console.log(myclass.prototype.y); // 1
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.defineProperty")}}

+ +

Примітки щодо сумісності

+ +

Перевизначення властивості length об'єкта Array

+ +

Можливість перевизначити властивість масивів {{jsxref("Array.length", "length")}} є предметом звичайних обмежень. (Властивість {{jsxref("Array.length", "length")}} початково недоступна для налаштування та переліку, і доступна для запису. Таким чином, для незміненого масиву можливо змінити значення властивості {{jsxref("Array.length", "length")}} або зробити її недоступною для запису. Неможливо змінити її доступність для переліку чи налаштування, або, якщо вона недоступна для запису, змінити її значення чи доступність для запису.) Однак, не усі переглядачі дозволяють це перевизначення.

+ +

Firefox від 4 до 22 викине {{jsxref("TypeError")}} на всяку спробу будь-яким чином (дозволено це чи ні) перевизначити властивість масиву {{jsxref("Array.length", "length")}}.

+ +

Версії Chrome, у яких реалізовано Object.defineProperty(), у певних обставинах ігнорують значення довжини масиву, відмінне від поточного значення властивості масиву {{jsxref("Array.length", "length")}}. У деяких обставинах зміна доступності для запису, схоже, непомітно не спрацьовує (і не викидає виняток). Разом з тим, деякі методи, що змінюють масив, такі як {{jsxref("Array.prototype.push")}}, не визнають недоступну для запису довжину масиву.

+ +

Версії Safari, у яких реалізовано Object.defineProperty(), ігнорують значення length, яке відрізняється від поточної властивості масиву {{jsxref("Array.length", "length")}}, і спроби змінити її доступність для запису не викидають помилки, але насправді не змінюють доступність властивості для запису.

+ +

Лише Internet Explorer 9 та новіші, а також Firefox 23 та новіші, схоже, повністю та коректно реалізують перевизначення властивості масивів {{jsxref("Array.length", "length")}}. На сьогоднішній день не варто покладатись на те, що перевизначення властивості масиву {{jsxref("Array.length", "length")}} працюватиме чи поводитиметься певним чином. І навіть коли ви можете на це покластись, існує дуже вагома причина не робити цього.

+ +

Примітки щодо Internet Explorer 8

+ +

Internet Explorer 8 реалізував метод Object.defineProperty(), який може використовуватись тільки на об'єктах DOM. Кілька моментів варто зазначити:

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/entries/index.html b/files/uk/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..8b555e8991 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,157 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Global_Objects/Object/entries +tags: + - JavaScript + - Властивість + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +
{{JSRef}}
+ +
Метод Object.entries() повертає масив пар ключ-значення особистих, перелічуваних, рядкових властивостей наданого об'єкта, у тому самому порядку, у якому їх надає цикл {{jsxref("Statements/for...in", "for...in")}} (різниця лише в тому, що цикл for-in також перебирає властивості з ланцюга прототипів). Порядок масиву, поверненого Object.entries(), не залежить від того, як був визначений об'єкт. Якщо вам потрібне певне впорядкування, то масив слід відсортувати наступним чином: Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));.
+ +
+ +
{{EmbedInteractiveExample("pages/js/object-entries.html")}}
+ + + +

Синтаксис

+ +
Object.entries(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, чиї пари ключ-значення особистих перелічуваних рядкових властивостей потрібно повернути.
+
+ +

Значення, що повертається

+ +
Масив пар [key, value] з особистих, перелічуваних, рядкових властивостей даного об'єкта.
+ +

Опис

+ +

Object.entries() повертає масив, чиїми елементами є масиви, що відповідають парам  [key, value] перелічуваних рядкових властивостей, знайдених безпосередньо на об'єкті. Порядок властивостей є таким самим, як і при переборі властивостей об'єкта вручну за допомогою циклу.

+ +

Приклади

+ +
const obj = { foo: 'bar', baz: 42 };
+console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
+
+// подібний до масиву об'єкт
+const obj = { 0: 'а', 1: 'б', 2: 'в' };
+console.log(Object.entries(obj)); // [ ['0', 'а'], ['1', 'б'], ['2', 'в'] ]
+
+// подібний до масиву об'єкт з випадковим порядком ключів
+const anObj = { 100: 'а', 2: 'б', 7: 'в' };
+console.log(Object.entries(anObj)); // [ ['2', 'б'], ['7', 'в'], ['100', 'а'] ]
+
+// getFoo є неперелічуваною властивістю
+const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
+myObj.foo = 'bar';
+console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
+
+// аргумент, що не є об'єктом, буде приведений до об'єкта
+console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
+
+// повертає порожній масив для усіх простих типів, оскільки примітиви не мають особистих властивостей
+console.log(Object.entries(100)); // [ ]
+
+// елегантно перебирає пари ключ-значення
+const obj = { a: 5, b: 7, c: 9 };
+for (const [key, value] of Object.entries(obj)) {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+}
+
+// або, використовуючи додаткові функції масивів
+Object.entries(obj).forEach(([key, value]) => {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+});
+
+ +

Перетворення Object на Map

+ +

Конструктор {{jsxref("Map", "new Map()")}} приймає ітерабельний об'єкт, отриманий через entries. За допомогою Object.entries, ви легко можете перетворити {{jsxref("Object")}} на {{jsxref("Map")}}:

+ +
const obj = { foo: 'bar', baz: 42 };
+const map = new Map(Object.entries(obj));
+console.log(map); // Map { foo: "bar", baz: 42 }
+
+ +

Перебір об'єкта

+ +

Використовуючи деструктуризацію масивів, ви можете легко перебирати об'єкти.

+ +
const obj = { foo: 'bar', baz: 42 };
+Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"
+
+ +

Поліфіл

+ +

Щоб додати підтримку методу Object.entries у старих середовищах, що не підтримують його початково, ви можете використати демонстраційну реалізацію Object.entries у tc39/proposal-object-values-entries (якщо вам не потрібна підтримка IE), поліфіл у репозиторіях es-shims/Object.entries, або можете просто скористатись простим, готовим до розгортання поліфілом, наведеним нижче.

+ +
if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i); // попередньо виділити пам'ять під масив
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}
+
+ +

Для наведеного вище поліфілу, якщо вам потрібна підтримка IE < 9, тоді вам також знадобиться поліфіл Object.keys (як той, що наведений у статті {{jsxref("Object.keys")}})

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}{{Spec2('ESDraft')}}Початкове визначення.
{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}{{Spec2('ES8')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.entries")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/eval/index.html b/files/uk/web/javascript/reference/global_objects/object/eval/index.html new file mode 100644 index 0000000000..19a476dfc1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/eval/index.html @@ -0,0 +1,46 @@ +--- +title: Object.prototype.eval() +slug: Web/JavaScript/Reference/Global_Objects/Object/eval +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.eval +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод Object.eval() обчислював рядок коду JavaScript у контексті об'єкта, але цей метод застарів та був прибраний.

+ +

Синтаксис

+ +
obj.eval(string)
+ +

Параметри

+ +
+
string
+
Будь-який рядок, що відображає вираз, інструкцію чи послідовність інструкцій JavaScript. Вираз може містити змінні та властивості існуючих об'єктів.
+
+ +

Опис

+ +

Метод eval більше не може використовуватись в якості методу об'єкта. Використовуйте замість нього глобальну функцію {{jsxref("Global_Objects/eval", "eval()")}}.

+ +

Специфікації

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.eval")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/freeze/index.html b/files/uk/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..86269bfda1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,256 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Global_Objects/Object/freeze +tags: + - ECMAScript 5 + - JavaScript + - Object + - freeze + - Об'єкт + - заморожування + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +
{{JSRef}}
+ +

Метод Object.freeze() заморожує об'єкт. Заморожений об'єкт не може бути змінений; заморожування запобігає додаванню нових властивостей, видаленню існуючих властивостей, зміні доступності існуючих властивостей для переліку, налаштування та запису, а також зміні значень існуючих властивостей. Також, заморожування об'єкта не дає змінювати його прототип. Метод freeze() повертає той самий об'єкт, що був переданий.

+ +
{{EmbedInteractiveExample("pages/js/object-freeze.html")}}
+ + + +

Синтаксис

+ +
Object.freeze(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, який потрібно заморозити.
+
+ +

Значення, що повертається

+ +

Об'єкт, переданий у функцію.

+ +

Опис

+ +

Ніщо не може бути додане чи видалене з набору властивостей замороженого об'єкта. Будь-яка спроба це зробити зазнає невдачі, або непомітно, або з викиданням винятку {{jsxref("TypeError")}} (найчастіше, але не винятково, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}).

+ +

Для властивостей-значень замороженого об'єкта не можна змінювати значення, атрибутам writable та configurable встановлено значення false. Властивості-аксесори (гетери та сетери) працюють, як і раніше (і так само створюють ілюзію, що ви міняєте значення). Зауважте, що значення, які є об'єктами, можна змінювати, якщо тільки вони теж не заморожені. Масив, як об'єкт, може бути заморожений; після цього його елементи не можуть бути змінені, і жоден елемент не може бути доданий чи видалений з масиву.

+ +

freeze() повертає той самий об'єкт, який був переданий у функцію. Він не створює заморожену копію.

+ +

Приклади

+ +

Заморожування об'єктів

+ +
var obj = {
+  prop: function() {},
+  foo: 'ква'
+};
+
+// До заморожування: можна додавати нові властивості,
+// а також змінювати чи видаляти існуючі властивості
+obj.foo = 'мяв';
+obj.lumpy = 'гав';
+delete obj.prop;
+
+// Заморожуємо.
+var o = Object.freeze(obj);
+
+// Повертається той самий об'єкт, який ми передали.
+o === obj; // true
+
+// Об'єкт заморожено.
+Object.isFrozen(obj); // === true
+
+// Тепер будь-які зміни не працюють
+obj.foo = 'му'; // нічого не робить
+// непомітно не додає властивість
+obj.quaxxor = 'весела качка';
+
+// У строгому режимі такі спроби викинуть винятки TypeError
+function fail(){
+  'use strict';
+  obj.foo = 'бум'; // викидає TypeError
+  delete obj.foo; // викидає TypeError
+  delete obj.quaxxor; // повертає true, бо атрибут 'quaxxor' не був доданий
+  obj.sparky = 'фух'; // викидає TypeError
+}
+
+fail();
+
+// Спроба внести зміни через Object.defineProperty;
+// обидві інструкції викинуть TypeError.
+Object.defineProperty(obj, 'ohai', { value: 17 });
+Object.defineProperty(obj, 'foo', { value: 'уф' });
+
+// Також неможливо змінити прототип
+// обидві наведені інструкції викинуть TypeError.
+Object.setPrototypeOf(obj, { x: 20 })
+obj.__proto__ = { x: 20 }
+
+ +

Заморожування масивів

+ +
let a = [0];
+Object.freeze(a); // Тепер масив не можна змінювати.
+
+a[0]=1; // непомітно не спрацьовує
+a.push(2); // непомітно не спрацьовує
+
+// У строгому режимі такі спроби викидатимуть TypeError
+function fail() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+fail();
+ +

Заморожений об'єкт є незмінним. Однак, він не обов'язково є константою. Наступний приклад демонструє, що заморожений об'єкт не є константою (неглибока заморозка).

+ +
obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'значенняА';
+
+obj1.internal.a // 'значенняА'
+ +

Щоб об'єкт був константою, все дерево посилань (прямі та непрямі посилання на інші об'єкти) має посилатися тільки на незмінні заморожені об'єкти. Заморожений об'єкт називається незмінним, бо стан об'єкта (значення та посилання на інші об'єкти) всередині всього об'єкта є зафіксованим. Зауважте, що рядки, числа та булеві значення завжди незмінні, і що функції та масиви є об'єктами.

+ +

Що таке "неглибока заморозка"?

+ +

Результат виклику Object.freeze(object) стосується лише безпосередніх властивостей об'єкта object, і запобігає додаванню, видаленню чи переприсвоєнню значень властивостей у майбутньому тільки на об'єкті object. Якщо ж значеннями цих властивостей є інші об'єкти, ці об'єкти не заморожуються, і на них можуть здійснюватись операції додавання, видалення чи переприсвоєння значень властивостей.

+ +
var employee = {
+  name: "Дмитро",
+  designation: "Розробник",
+  address: {
+    street: "Городоцька",
+    city: "Львів"
+  }
+};
+
+Object.freeze(employee);
+
+employee.name = "Вова"; // непомітно не спрацює у нестрогому режимі
+employee.address.city = "Винники"; // атрибути дочірнього об'єкта можна змінювати
+
+console.log(employee.address.city) // Виведе: "Винники"
+
+ +

Щоб зробити об'єкт незмінним, рекурсивно заморозьте кожну властивість типу object (глибока заморозка). Застосовуйте свій шаблон для кожного конкретного елементу, коли знаєте, що об'єкт не містить {{interwiki("wikipedia", "Цикл_(теорія_графів)", "циклів")}} у дереві посилань, інакше запуститься нескінченний цикл. Покращенням функції deepFreeze() була б внутрішня функція, яка отримує аргументом шлях (наприклад, масив), щоб можна було заборонити рекурсивний виклик deepFreeze(), коли об'єкт знаходиться у процесі перетворення на незмінний об'єкт. Ви все одно ризикуєте заморозити об'єкт, який не треба заморожувати, наприклад, [window].

+ +
function deepFreeze(object) {
+
+  // Отримати імена властивостей, визначених на об'єкті
+  var propNames = Object.getOwnPropertyNames(object);
+
+  // Заморозити властивості перед тим, як заморожувати себе
+
+  for (let name of propNames) {
+    let value = object[name];
+
+    object[name] = value && typeof value === "object" ?
+      deepFreeze(value) : value;
+  }
+
+  return Object.freeze(object);
+}
+
+var obj2 = {
+  internal: {
+    a: null
+  }
+};
+
+deepFreeze(obj2);
+
+obj2.internal.a = 'новеЗначення'; // непомітно не спрацює у нестрогому режимі
+obj2.internal.a; // null
+
+ +

Примітки щодо використання

+ +

У ES5, якщо аргументом цього методу є не об'єкт (примітив), він спричинить помилку {{jsxref("TypeError")}}. У ES2015 аргумент, який не є об'єктом, сприйматиметься як звичайний заморожений об'єкт, і буде просто повернений.

+ +
> Object.freeze(1)
+TypeError: 1 is not an object // код ES5
+
+> Object.freeze(1)
+1                             // код ES2015
+
+ +

Об'єкти {{domxref("ArrayBufferView")}} з елементами спричинять помилку {{jsxref("TypeError")}}, оскільки вони є представленнями ділянок пам'яті, і неодмінно спричинять інші можливі проблеми:

+ +
> Object.freeze(new Uint8Array(0)) // Немає елементів
+Uint8Array []
+
+> Object.freeze(new Uint8Array(1)) // Має елементи
+TypeError: Cannot freeze array buffer views with elements
+
+> Object.freeze(new DataView(new ArrayBuffer(32))) // Немає елементів
+DataView {}
+
+> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Немає елементів
+Float64Array []
+
+> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Має елементи
+TypeError: Cannot freeze array buffer views with elements
+
+ +

Зауважте наступне; оскільки три стандартні властивості (buf.byteLength, buf.byteOffset та buf.buffer) є доступними лише для читання (так само, як у {{jsxref("ArrayBuffer")}} чи у {{jsxref("SharedArrayBuffer")}}), немає причини намагатися заморожувати ці властивості.

+ +

Порівняння з Object.seal()

+ +

Об'єкти, запечатані через {{jsxref("Object.seal()")}}, дозволяють змінювати свої існуючі властивості. Властивості об'єктів, заморожених через Object.freeze(), стають незмінними.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.freeze")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html b/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html new file mode 100644 index 0000000000..28e960ca54 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html @@ -0,0 +1,112 @@ +--- +title: Object.fromEntries() +slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +tags: + - JavaScript + - Довідка + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +--- +
{{JSRef}}
+ +

Метод Object.fromEntries() перетворює список пар ключ-значення на об'єкт.

+ +
{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}
+ + + +

Синтаксис

+ +
Object.fromEntries(iterable);
+ +

Параметри

+ +
+
iterable
+
Ітерабельний об'єкт, наприклад, {{jsxref("Array")}} або {{jsxref("Map")}}, або інші об'єкти, що реалізують протокол перебируваного.
+
+ +

Значення, що повертається

+ +

Новий об'єкт, чиї властивості надані записами ітерабельного об'єкта.

+ +

Опис

+ +

Метод Object.fromEntries() приймає список пар ключ-значення і повертає новий об'єкт, властивості якого надані цими записами. Аргумент iterable має бути об'єктом, що реалізує метод @@iterator, який повертає об'єкт ітератор, що утворює подібний до масиву об'єкт з двома елементами. Перший його елемент - це значення, що використовується в якості ключа властивості, а другий елемент - значення, що буде асоціюватися з цим ключем.

+ +

Object.fromEntries() виконує дію протилежну до {{jsxref("Object.entries()")}}.

+ +

Приклади

+ +

Перетворення Map на Object

+ +

За допомогою Object.fromEntries, можна перетворити {{jsxref("Map")}} на {{jsxref("Object")}}:

+ +
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { foo: "bar", baz: 42 }
+
+ +

Перетворення Array на Object

+ +

За допомогою Object.fromEntries можна перетворити {{jsxref("Array")}} на {{jsxref("Object")}}:

+ +
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+
+ +

Перетворення об'єкта

+ +

За допомогою методу Object.fromEntries, його протилежності  {{jsxref("Object.entries()")}} та методів маніпулювання масивами можна ось так трансформувати об'єкти:

+ +
const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) => [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }
+ + + +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}{{Spec2('ESDraft')}}Початкове визначення у ECMAScript 2019.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.fromEntries")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html b/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html new file mode 100644 index 0000000000..9fef482fd6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html @@ -0,0 +1,52 @@ +--- +title: Object.getNotifier() +slug: Web/JavaScript/Reference/Global_Objects/Object/getNotifier +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.getNotifier +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод Object.getNotifer() використовувався для створення об'єкта, який дозволяв штучно викликати зміну, але застарів та був прибраний з переглядачів.

+ +

Синтаксис

+ +
Object.getNotifier(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, для якого потрібно отримати сповіщувач.
+
+ +

Значення, що повертається

+ +

Об'єкт-сповіщувач, пов'язаний з об'єктом, переданим у функцію.

+ +

Опис

+ +

Сповіщувач використовувався для запуску штучних змін, за якими спостерігатиме Object.observe().

+ +

Специфікації

+ +

Strawman proposal specification.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.getNotifier")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..71b7d34b53 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html @@ -0,0 +1,159 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +tags: + - ECMAScript 5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +
{{JSRef}}
+ +

Метод Object.getOwnPropertyDescriptor() повертає дескриптор властивості для особистої властивості (такої, що присутня безпосередньо на об'єкті, а не у ланцюжку його прототипів) наданого об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}
+ + + +

Синтаксис

+ +
Object.getOwnPropertyDescriptor(obj, prop)
+ +

Параметри

+ +
+
obj
+
Об'єкт, в якому потрібно знайти властивість.
+
prop
+
Ім'я або {{jsxref("Symbol","символ")}} властивості, опис якої отримується.
+
+ +

Значення, що повертається

+ +

Дескриптор наданої властивості, якщо така існує на об'єкті, інакше {{jsxref("undefined")}}.

+ +

Опис

+ +

Цей метод дозволяє вивчити докладний опис властивості. Властивість у JavaScript складається з імені у вигляді рядка або {{jsxref("Symbol", "символа")}} та дескриптора властивості. Більше інформації щодо типів дескрипторів властивостей та їхніх атрибутів можна знайти у статті {{jsxref("Object.defineProperty()")}}.

+ +

Дескриптор властивості - це запис, що має деякі з наступних атрибутів:

+ +
+
value
+
Значення, пов'язане з властивістю (тільки у дескрипторах даних).
+
writable
+
Дорівнює true тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене (тільки у дескрипторах даних).
+
get
+
Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає (тільки у дескрипторах доступу).
+
set
+
Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає (тільки у дескрипторах доступу).
+
configurable
+
Дорівнює true тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкта.
+
enumerable
+
Дорівнює true тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті.
+
+ +

Приклади

+ +
var o, d;
+
+o = { get foo() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, 'foo');
+// d дорівнює {
+//   configurable: true,
+//   enumerable: true,
+//   get: /*функція-гетер*/,
+//   set: undefined
+// }
+
+o = { bar: 42 };
+d = Object.getOwnPropertyDescriptor(o, 'bar');
+// d дорівнює {
+//   configurable: true,
+//   enumerable: true,
+//   value: 42,
+//   writable: true
+// }
+
+o = { [Symbol.for('baz')]: 73 }
+d = Object.getOwnPropertyDescriptor(o, Symbol.for('baz'));
+// d дорівнює {
+//   configurable: true,
+//   enumerable: true,
+//   value: 73,
+//   writable: true
+// }
+
+o = {};
+Object.defineProperty(o, 'qux', {
+  value: 8675309,
+  writable: false,
+  enumerable: false
+});
+d = Object.getOwnPropertyDescriptor(o, 'qux');
+// d дорівнює {
+//   value: 8675309,
+//   writable: false,
+//   enumerable: false,
+//   configurable: false
+// }
+
+ +

Примітки

+ +

У ES5, якщо перший аргумент цього методу не є об'єктом (є примітивом), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 перший аргумент, що не є об'єктом, буде спочатку приведений до об'єкта.

+ +
Object.getOwnPropertyDescriptor('foo', 0);
+// TypeError: "foo" is not an object  // код ES5
+
+Object.getOwnPropertyDescriptor('foo', 0);
+// Об'єкт, повернений кодом ES2015: {
+//   configurable: false,
+//   enumerable: true,
+//   value: "f",
+//   writable: false
+// }
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html new file mode 100644 index 0000000000..fa5dae0e79 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html @@ -0,0 +1,118 @@ +--- +title: Object.getOwnPropertyDescriptors() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +tags: + - JavaScript + - Object + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +--- +
{{JSRef}}
+ +

Метод Object.getOwnPropertyDescriptors() повертає дескриптори всіх особистих властивостей наданого об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}
+ +

Синтаксис

+ +
Object.getOwnPropertyDescriptors(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, для якого потрібно отримати дескриптори всіх особистих властивостей.
+
+ +

Значення, що повертається

+ +

Об'єкт, що містить дескриптори всіх особистих властивостей об'єкта. Може бути порожній об'єкт, якщо властивостей немає.

+ +

Опис

+ +

Цей метод дозволяє вивчити докладний опис усіх особистих властивостей об'єкта. Властивість у JavaScript складається з імені у вигляді рядка або {{jsxref("Symbol","символа")}} та дескриптора властивості. Більше інформації щодо типів дескрипторів властивостей та їхніх атрибутів можна знайти у статті {{jsxref("Object.defineProperty()")}}.

+ +

Дескриптор властивості - це запис, що має деякі з наступних атрибутів:

+ +
+
value
+
Значення, пов'язане з властивістю (тільки у дескрипторах даних).
+
writable
+
Дорівнює true тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене (тільки у дескрипторах даних).
+
get
+
Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає (тільки у дескрипторах доступу).
+
set
+
Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає (тільки у дескрипторах доступу).
+
configurable
+
Дорівнює true тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкта.
+
enumerable
+
Дорівнює true тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті.
+
+ +

Приклади

+ +

Створення дрібного клону

+ +

В той час як метод {{jsxref("Object.assign()")}} скопіює лише особисті та перелічувані властивості з наданого об'єкта у цільовий, ви можете скористатись цим методом та {{jsxref("Object.create()")}} для дрібного копіювання між двома невідомими об'єктами:

+ +
Object.create(
+  Object.getPrototypeOf(obj),
+  Object.getOwnPropertyDescriptors(obj)
+);
+
+ +

Створення підкласу

+ +

Типовим способом створення підкласу є визначити підклас, присвоїти його прототипу екземпляр суперкласу, і далі визначити властивості на цьому екземплярі. Це може бути незграбно, особливо для гетерів та сетерів. Ви можете натомість скористатись даним кодом для призначення прототипу:

+ +
function superclass() {}
+superclass.prototype = {
+  // Визначте тут свої методи та властивості
+};
+function subclass() {}
+subclass.prototype = Object.create(
+  superclass.prototype,
+  {
+    // Визначте тут свої методи та властивості
+  }
+);
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}{{Spec2('ESDraft')}}Початкове визначення у ECMAScript 2017.
{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}{{Spec2('ES2017')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html new file mode 100644 index 0000000000..df8c13a161 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html @@ -0,0 +1,175 @@ +--- +title: Object.getOwnPropertyNames() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +tags: + - ECMAScript5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +--- +
{{JSRef}}
+ +

Метод Object.getOwnPropertyNames() повертає масив усіх властивостей (в тому числі неперелічуваних, за винятком властивостей, що використовують символ), знайдених безпосередньо на наданому об'єкті.

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}
+ +

Синтаксис

+ +
Object.getOwnPropertyNames(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, чиї перелічувані та неперелічувані властивості будуть повернені.
+
+ +

Значення, що повертається

+ +

Масив рядків, що відповідає властивостям, знайденим безпосередньо у наданому об'єкті.

+ +

Опис

+ +

Object.getOwnPropertyNames() повертає масив, чиї елементи є рядками, що відповідають перелічуваним та неперелічуваним властивостям, знайденим безпосередньо на наданому об'єкті obj. Порядок перелічуваних властивостей у масиві відповідає порядку, в якому видає властивості об'єкта цикл {{jsxref("Statements/for...in", "for...in")}} (або метод {{jsxref("Object.keys()")}}). Порядок неперелічуваних властивостей у масиві, а також порядок посеред перелічуваних властивостей, не визначені.

+ +

Приклади

+ +

Використання Object.getOwnPropertyNames()

+ +
var arr = ['а', 'б', 'в'];
+console.log(Object.getOwnPropertyNames(arr).sort());
+// виведе ["0", "1", "2", "length"]
+
+// подібний до масиву об'єкт
+var obj = { 0: 'а', 1: 'б', 2: 'в' };
+console.log(Object.getOwnPropertyNames(obj).sort());
+// виведе ["0", "1", "2"]
+
+// Виведення імен та значень властивостей через Array.forEach
+Object.getOwnPropertyNames(obj).forEach(
+  function (val, idx, array) {
+    console.log(val + ' -> ' + obj[val]);
+  }
+);
+// виведе
+// 0 -> а
+// 1 -> б
+// 2 -> в
+
+// неперелічувана властивість
+var my_obj = Object.create({}, {
+  getFoo: {
+    value: function() { return this.foo; },
+    enumerable: false
+  }
+});
+my_obj.foo = 1;
+
+console.log(Object.getOwnPropertyNames(my_obj).sort());
+// виведе ["foo", "getFoo"]
+
+ +

Якщо вам потрібні тільки перелічувані властивості, дивіться {{jsxref("Object.keys()")}} або скористайтесь циклом {{jsxref("Statements/for...in", "for...in")}} (зауважте, що це також поверне перелічувані властивості, знайдені у ланцюжку прототипів об'єкта, якщо тільки вони не були відфільтровані методом {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).

+ +

Елементи, знайдені у ланцюжку прототипів, не додаються у список:

+ +
function ParentClass() {}
+ParentClass.prototype.inheritedMethod = function() {};
+
+function ChildClass() {
+  this.prop = 5;
+  this.method = function() {};
+}
+ChildClass.prototype = new ParentClass;
+ChildClass.prototype.prototypeMethod = function() {};
+
+console.log(
+  Object.getOwnPropertyNames(
+    new ChildClass() // ["prop", "method"]
+  )
+);
+
+ +

Отримати лише неперелічувані властивості

+ +

Тут використовується функція {{jsxref("Array.prototype.filter()")}} для видалення перелічуваних ключів (отриманих методом {{jsxref("Object.keys()")}}) зі списка усіх ключів (отриманих методом Object.getOwnPropertyNames()), таким чином, повертаючи тільки неперелічувані ключі.

+ +
var target = myObject;
+var enum_and_nonenum = Object.getOwnPropertyNames(target);
+var enum_only = Object.keys(target);
+var nonenum_only = enum_and_nonenum.filter(function(key) {
+  var indexInEnum = enum_only.indexOf(key);
+  if (indexInEnum == -1) {
+    // Ключ не знайдений у ключах enum_only,
+    // це означає, що він є неперелічуваним,
+    // тому повертаємо true, щоб залишити його у фільтрі
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_only);
+
+ +

Примітки

+ +

У ES5, якщо аргумент цього методу не є об'єктом (примітив), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, буде приведений до об'єкта.

+ +
Object.getOwnPropertyNames('foo');
+// TypeError: "foo" is not an object (код ES5)
+
+Object.getOwnPropertyNames('foo');
+// ["0", "1", "2", "length"]  (код ES2015)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}

+ +

Примітки щодо Firefox

+ +

До Firefox 28 метод Object.getOwnPropertyNames не бачив невирішених властивостей об'єктів {{jsxref("Error")}}. Це було виправлено у пізніших версіях ({{bug("724768")}}).

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html new file mode 100644 index 0000000000..45fb9dc9f8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html @@ -0,0 +1,91 @@ +--- +title: Object.getOwnPropertySymbols() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +tags: + - ECMAScript 2015 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +--- +
{{JSRef}}
+ +

Метод Object.getOwnPropertySymbols() повертає масив усіх символьних властивостей, знайдених безпосередньо на наданому об'єкті.

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}
+ + + +

Синтаксис

+ +
Object.getOwnPropertySymbols(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, чиї символьні властивості будуть повернені.
+
+ +

Значення, що повертається

+ +

Масив усіх символьних властивостей, знайдених безпосередньо на наданому об'єкті.

+ +

Опис

+ +

Подібно до {{jsxref("Object.getOwnPropertyNames()")}}, ви можете отримати усі символьні властивості наданого об'єкта у вигляді масиву символів. Зауважте, що сам метод {{jsxref("Object.getOwnPropertyNames()")}} не містить символьних властивостей об'єкта і повертає лише рядкові властивості.

+ +

Оскільки жоден об'єкт не має початково символьних властивостей, Object.getOwnPropertySymbols() повертає порожній масив, якщо ви не присвоїли символьні властивості своєму об'єкту.

+ +

Приклади

+ +
var obj = {};
+var a = Symbol('a');
+var b = Symbol.for('b');
+
+obj[a] = 'localSymbol';
+obj[b] = 'globalSymbol';
+
+var objectSymbols = Object.getOwnPropertySymbols(obj);
+
+console.log(objectSymbols.length); // 2
+console.log(objectSymbols);        // [Symbol(a), Symbol(b)]
+console.log(objectSymbols[0]);     // Symbol(a)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..c9aeaa48c6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,98 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +tags: + - ECMAScript5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +
{{JSRef}}
+ +

Метод Object.getPrototypeOf() повертає прототип (тобто, значення внутрішньої властивості [[Prototype]]) вказаного об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}
+ + + +

Синтаксис

+ +
Object.getPrototypeOf(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, чий прототип буде повернений.
+
+ +

Значення, що повертається

+ +

Прототип наданого об'єкта. Якщо немає успадкованих властивостей, повертається {{jsxref("null")}}.

+ +

Приклади

+ +
var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+
+ +

Примітки

+ +

У ES5 буде викинуто виняток {{jsxref("TypeError")}}, якщо параметр obj не є об'єктом. У ES2015 параметр буде приведений до {{jsxref("Object","об'єкта")}}.

+ +
Object.getPrototypeOf('foo');
+// TypeError: "foo" is not an object (код ES5)
+Object.getPrototypeOf('foo');
+// String.prototype                  (код ES2015)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}{{Spec2('ES5.1')}}Початкове визначення.
{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.getPrototypeOf")}}

+ +

Примітки щодо Opera

+ +

Хоча старіші версії Opera поки що не підтримують Object.getPrototypeOf(), Opera підтримує нестандартну властивість {{jsxref("Object.proto", "__proto__")}}, починаючи з Opera 10.50.

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..b41d85e896 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,158 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +
{{JSRef}}
+ +

Метод hasOwnProperty() повертає булеве значення, яке вказує, чи є задана властивість особистою властивістю об'єкта (тобто, не успадкованою).

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}
+ + + +

Синтаксис

+ +
obj.hasOwnProperty(prop)
+ +

Параметри

+ +
+
prop
+
Ім'я у вигляді {{jsxref("String", "рядка")}} або {{Glossary("Symbol","символ")}} властивості, яку потрібно перевірити.
+
+ +

Вертає

+ +

{{jsxref("Boolean","Булеве значення")}}, яке вказує, чи є задана властивість особистою властивістю об'єкта.

+ +

Опис

+ +

Всі нащадки {{jsxref("Object")}} успадковують метод hasOwnProperty. Цей метод можна використовувати, щоб визначити, чи є вказана властивість особистою властивістю об'єкта; на відмінну від оператора {{jsxref("Operators/in", "in")}}, цей метод не перевіряє властивість у ланцюзі прототипів об'єкта. Якщо {{jsxref("Object","об'єкт")}} є {{jsxref("Array","масивом")}}, то метод  hasOwnProperty може перевірити, чи існує індекс у масиві.

+ +

Примітка

+ +

hasOwnProperty повертає true, навіть якщо значення властивості дорівнює null або undefined.

+ +
o = new Object();
+o.propOne = null;
+o.hasOwnProperty('propOne');   // повертає true
+o.propTwo = undefined;
+o.hasOwnProperty('propTwo');   // повертає true
+
+ +

Приклади

+ +

Використання hasOwnProperty для перевірки існування властивості

+ +

Наступний приклад визначає, чи має об'єкт o властивість на ім'я prop:

+ +
o = new Object();
+o.hasOwnProperty('prop');   // повертає false
+o.prop = 'exists';
+o.hasOwnProperty('prop');   // повертає true
+
+ +

Прямі властивості проти успадкованих

+ +

Наступний приклад демонструє різницю між прямими властивостями та успадкованими через ланцюг прототипів:

+ +
o = new Object();
+o.prop = 'exists';
+o.hasOwnProperty('prop');             // повертає true
+o.hasOwnProperty('toString');         // повертає false
+o.hasOwnProperty('hasOwnProperty');   // повертає false
+
+ +

Перебір властивостей об'єкта

+ +

Наступний приклад показує, як перебирати властивості об'єкта, не рухаючи успадковані властивості. Зауважте, що цикл {{jsxref("Statements/for...in", "for...in")}} перебирає лише перелічувані властивості, тому не слід вважати, виходячи з відсутності неперелічуваних властивостей, показаних у циклі, що hasOwnProperty сам обмежений суто перелічуваними елементами (як у випадку з {{jsxref("Object.getOwnPropertyNames()")}}).

+ +
var buz = {
+  fog: 'stack'
+};
+
+for (var name in buz) {
+  if (buz.hasOwnProperty(name)) {
+    console.log('це властивість (' +
+      name + '). Значення: ' + buz[name]);
+  }
+  else {
+    console.log(name); // toString або щось інше
+  }
+}
+
+ +

Використання hasOwnProperty в якості назви властивості

+ +

JavaScript не захищає ім'я властивості hasOwnProperty; як наслідок, якщо існує можливість, що об'єкт може мати властивість з цим ім'ям, то необхідно використовувати зовнішній метод hasOwnProperty, щоб отримати правильний результат:

+ +
var foo = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  bar: 'Небезпечна зона'
+};
+
+foo.hasOwnProperty('bar'); // завжди повертає false
+
+// Використаємо hasOwnProperty іншого об'єкта
+// і викличемо його з 'this', рівним foo
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// Також можна використати властивість hasOwnProperty
+// з прототипа Object для цієї мети
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+
+ +

Зауважте, що в останньому випадку не створюється нових об'єктів.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES5.1')}}
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.5.
+ +

Підтримка браузерів

+ + + +

{{Compat("javascript.builtins.Object.hasOwnProperty")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/index.html b/files/uk/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..6fdb6e8adb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,267 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +
{{JSRef}}
+ +

Клас Object відображає один з типів даних JavaScript. Він використовується для збереження різноманітних колекцій, що використовують ключі, та більш складних сутностей. Об'єкти можуть бути створені за допомогою конструктора {{jsxref("Object/Object", "Object()")}} або об'єктного ініціалізатора / літерального синтаксису.

+ +

Опис

+ +

Майже усі об'єкти у JavaScript є екземплярами {{jsxref("Object")}}; типовий об'єкт успадковує властивості (в тому числі методи) від Object.prototype, хоча ці властивості можуть бути перекриті (перевизначені). Однак, можна навмисно створити Object, для якого це буде не так (наприклад, за допомогою {{jsxref("Object.create", "Object.create(null)")}}), або змінити його таким чином (наприклад, через {{jsxref("Object.setPrototypeOf")}}).

+ +

Зміни у прототипі Object видимі усім об'єктам через ланцюжок прототипів, якщо властивості та методи, яких стосуються ці зміни, не були перевизначені далі у ланцюжку прототипів. Це надає дуже потужний, хоча й потенційно небезпечний, механізм для перевизначення або розширення поведінки об'єкта.

+ +

Конструктор Object створює обгортку об'єкта для заданого значення.

+ + + +

Під час виклику не у контексті конструктора, Object поводиться ідентично до new Object().

+ +

Дивіться також Ініціалізатор об'єктів / літеральний синтаксис.

+ +

Видалення властивості об'єкта

+ +

У самому об'єкті не існує методів для видалення своїх властивостей (таких, як {{jsxref("Map.prototype.delete", "Map.prototype.delete()")}}). Щоб зробити це, необхідно скористатись оператором delete.

+ +

Конструктор

+ +
+
{{jsxref("Object/Object", "Object()")}}
+
Створює новий об'єкт Object. Це обгортка для наданого значення.
+
+ +

Статичні методи

+ +
+
{{jsxref("Object.assign()")}}
+
Копіює значення усіх перелічуваних особистих властивостей з одного або більше об'єктів у цільовий об'єкт.
+
{{jsxref("Object.create()")}}
+
Створює новий об'єкт із вказаним прототипним об'єктом і властивостями.
+
{{jsxref("Object.defineProperty()")}}
+
Додає зазначену властивість, описану наданим дескриптором, до об'єкта.
+
{{jsxref("Object.defineProperties()")}}
+
Додає зазначені властивості, описані наданими дескрипторами, до об'єкта.
+
{{jsxref("Object.entries()")}}
+
Повертає масив, що містить усі пари [key, value] особистих перелічуваних рядкових властивостей данного  об'єкта.
+
{{jsxref("Object.freeze()")}}
+
Заморожує об'єкт: інший код не може видаляти або змінювати будь-які властивості.
+
{{jsxref("Object.fromEntries()")}}
+
Повертає новий об'єкт з ітерабельного об'єкта, що містить пари ключ-значення (зворотний до {{jsxref("Object.entries")}}).
+
{{jsxref("Object.getOwnPropertyDescriptor()")}}
+
Повертає дескриптор властивості для зазначенної властивості об'єкта.
+
{{jsxref("Object.getOwnPropertyDescriptors()")}}
+
Повертає об'єкт, що містить дескриптори всіх особистих властивостей об'єкта.
+
{{jsxref("Object.getOwnPropertyNames()")}}
+
Повертає масив, що містить імена всіх особистих перелічуваних і неперелічуванних властивостей даного об'єкта.
+
{{jsxref("Object.getOwnPropertySymbols()")}}
+
Повертає масив усіх символьних властивостей, знайдених безпосередньо на даному об'єкті.
+
{{jsxref("Object.getPrototypeOf()")}}
+
Повертає прототип вказаного об'єкта.
+
{{jsxref("Object.is()")}}
+
Перевіряє, чи мають два аргументи однакове значення. Прирівнює усі значення NaN (що відрізняється як від абстрактної рівності, так і від строгої рівності).
+
{{jsxref("Object.isExtensible()")}}
+
Визначає, чи дозволене розширення об'єкта.
+
{{jsxref("Object.isFrozen()")}}
+
Визначає, чи є об'єкт замороженим.
+
{{jsxref("Object.isSealed()")}}
+
Визначає, чи є об'єкт запечатанним.
+
{{jsxref("Object.keys()")}}
+
Повертає масив, що містить імена всіх особистих перелічуваних рядкових властивостей даного об'єкта.
+
{{jsxref("Object.preventExtensions()")}}
+
Запобігає будь-яким розширенням об'єкта.
+
{{jsxref("Object.seal()")}}
+
Запобігає можливості іншого коду видаляти властивості об'єкта.
+
{{jsxref("Object.setPrototypeOf()")}}
+
Встановлює прототип (тобто, внутрішню властивість [[Prototype]] об'єкта).
+
{{jsxref("Object.values()")}}
+
Повертає масив, який містить значення, що відповідають усім особистим перелічуваним рядковим властивостям даного об'єкта.
+
+ +

Властивості екземплярів 

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
Визначає функцію, що створює прототип об'єкта.
+
{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}
+
Вказує на об'єкт, що був використаний як прототип, коли створювався екземпляр об'єкта.
+
{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}}
+
Дозволяє визначити функцію, яка буде виконуватись, коли на об'єкті викликатиметься неіснуючий елемент.
+
+ +

Методи екземплярів

+ +
+
{{jsxref("Object.prototype.__defineGetter__()")}}
+
Прив'язує функцію до властивості, яка, під час звернення до неї, викликатиме цю функцію та повертатиме значення, яке повернула функція.
+
{{jsxref("Object.prototype.__defineSetter__()")}}
+
Прив'язує функцію до властивості, яка, під час присвоєння, виконує цю функцію, яка змінює властивість.
+
{{jsxref("Object.prototype.__lookupGetter__()")}}
+
Повертає функцію, прив'язану до вказаної властивості методом {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}}.
+
{{jsxref("Object.prototype.__lookupSetter__()")}}
+
Повертає функцію, прив'язану до вказаної властивості методом {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}}.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
Повертає булеве значення, що вказує, чи об'єкт містить вказану властивість як особисту властивість цього об'єкта, а не успадковану через ланцюжок прототипів.
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
Повертає булеве значення, що вказує, чи присутній об'єкт, на якому викликається цей метод, у ланцюжку прототипів вказаного об'єкта.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
Повертає булеве значення, що вказує, чи встановлений внутрішній атрибут ECMAScript [[Enumerable]].
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
Викликає {{jsxref("Object.toString", "toString()")}}.
+
{{jsxref("Object.prototype.toString()")}}
+
Повертає рядок, що відображає об'єкт.
+
{{jsxref("Object.prototype.unwatch()")}}
+
Прибирає точку спостереження з властивості об'єкта.
+
{{jsxref("Object.prototype.valueOf()")}}
+
Повертає просту величину вказаного об'єкта.
+
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
+
Додає точку спостереження до властивості об'єкта.
+
+ +

Приклади

+ +

Використання Object з типами undefined та null

+ +

Наступні приклади зберігають порожній об'єкт Object в o:

+ +
var o = new Object();
+
+ +
var o = new Object(undefined);
+
+ +
var o = new Object(null);
+
+ +

Використання Object для створення об'єктів Boolean

+ +

Наступні приклади зберігають об'єкти {{jsxref("Boolean")}} у o:

+ +
// еквівалентно до o = new Boolean(true);
+var o = new Object(true);
+
+ +
// еквівалентно до o = new Boolean(false);
+var o = new Object(Boolean());
+
+ +

Прототипи об'єктів

+ +

Змінюючи поведінку існуючих методів Object.prototype, розгляньте включення коду додаванням вашого розширення до чи після існуючої логіки. Наприклад, цей (неперевірений) код буде попередньо виконувати власну логіку перед тим, як буде виконано вбудовану логіку або інше розширення.

+ +

Коли викликається функція, аргументи виклику містяться у подібній до масиву "змінній" arguments. Наприклад, у виклику myFn(a, b, c), arguments, що знаходиться у тілі myFn, міститиме 3 подібні до масиву елементи, що відповідають (a, b, c).

+ +

Модифікуючи прототипи з хуками, просто передайте this та arguments (стан виклику) до поточної поведінки, викликавши apply() на функції. Цей шаблон може використовуватись для будь-яких прототипів, наприклад, Node.prototype, Function.prototype, і т. д.

+ +
var current = Object.prototype.valueOf;
+
+// Оскільки моя властивість "-prop-value" є наскрізною та не завжди
+// знаходиться в тому самому ланцюжку прототипів, я хочу змінити Object.prototype:
+Object.prototype.valueOf = function() {
+  if (this.hasOwnProperty('-prop-value')) {
+    return this['-prop-value'];
+  } else {
+    // Це не схоже на один з моїх об'єктів, тому повернемось
+    // до початкової поведінки, відтворивши поточну поведінку якнайкраще.
+    // Метод apply поводиться як "super" у деяких інших мовах.
+    // І хоча valueOf() не приймає аргументів, можливо, інший хук їх прийматиме.
+    return current.apply(this, arguments);
+  }
+}
+ +

Оскільки JavaScript, насправді, не має об'єктів підкласу, прототип є зручним обхідним рішенням для створення об'єкта у ролі "базового класу" з певними функціями, що діють як об'єкти. Наприклад:

+ +
var Person = function(name) {
+  this.name = name;
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Привіт, я ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this, name);
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Привіт, я ' + this.name + ', ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this, name);
+};
+
+Customer.prototype = Object.create(Person.prototype);
+
+var Mime = function(name) {
+  Person.call(this, name);
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+
+var bob = new Employee('Боб', 'будівельник');
+var joe = new Customer('Джо');
+var rg = new Employee('Ред Грін', 'майстер на всі руки');
+var mike = new Customer('Майк');
+var mime = new Mime('Мім');
+
+bob.greet();
+// Привіт, я Боб, будівельник
+
+joe.greet();
+// Привіт, я Джо
+
+rg.greet();
+// Привіт, я Ред Грін, майстер на всі руки
+
+mike.greet();
+// Привіт, я Майк
+
+mime.greet();
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/is/index.html b/files/uk/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..58578ab5d3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,128 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Global_Objects/Object/is +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Рівність + - Тотожність + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +
{{JSRef}}
+ +
Метод Object.is() з'ясовує, чи мають два аргументи однакове значення.
+ +

Синтаксис

+ +
Object.is(value1, value2);
+ +

Параметри

+ +
+
value1
+
Перше значення для порівняння.
+
value2
+
Друге значення для порівняння.
+
+ +

Вертає

+ +

{{jsxref("Boolean", "Булеве значення")}}, що вказує, чи мають вказані аргументи однакове значення.

+ +

Опис

+ +

Object.is() визначає, чи мають вказані аргументи однакове значення. Два значення вважаються однаковими за однієї з наступних умов:

+ + + +

Це не те саме, що й рівність відповідно до оператора {{jsxref("Operators/Оператори_порівняння", "==", "#Equality")}}. Оператор == здійснює приведення типів обох операндів (якщо вони належать до різних типів даних) перед перевіркою на рівність (в результаті такий вираз як "" == false має значення true), натомість, метод Object.is не перетворює жодне значення.

+ +

Це також не те саме, що й рівність відповідно до оператора {{jsxref("Operators/Оператори_порівняння", "===", "#Identity")}}. Оператор === (так само, як оператор ==) вважає рівними числові значення -0 та +0, а значення {{jsxref("Number.NaN")}} не вважає рівним до {{jsxref("NaN")}}.

+ +

Приклади

+ +
Object.is('foo', 'foo');     // true
+Object.is(window, window);   // true
+
+Object.is('foo', 'bar');     // false
+Object.is([], []);           // false
+
+var foo = { a: 1 };
+var bar = { a: 1 };
+Object.is(foo, foo);       // true
+Object.is(foo, bar);       // false
+
+Object.is(null, null);       // true
+
+// Особливі Випадки
+Object.is(0, -0);            // false
+Object.is(-0, -0);           // true
+Object.is(NaN, 0/0);         // true
+
+ +

Запасний варіант (поліфіл)

+ +
if (!Object.is) {
+  Object.is = function(x, y) {
+    // Алгоритм SameValue
+    if (x === y) { // Steps 1-5, 7-10
+      // Кроки 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // Крок 6.a: NaN == NaN
+      return x !== x && y !== y;
+    }
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-object.is', 'Object.is')}}{{Spec2('ES6')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.is")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html b/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html new file mode 100644 index 0000000000..440aa85e1f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html @@ -0,0 +1,112 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +tags: + - ECMAScript5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +
{{JSRef}}
+ +

Метод Object.isExtensible() визначає, чи є об'єкт розширюваним (чи може він бути доповнений новими властивостями).

+ +
{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}
+ + + +

Синтаксис

+ +
Object.isExtensible(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, який необхідно перевірити.
+
+ +

Значення, що повертається

+ +

{{jsxref("Boolean","Булеве значення")}}, що вказує, чи є об'єкт розширюваним.

+ +

Опис

+ +

За замовчуванням об'єкти є розширюваними: нові властивості можуть додаватися до них, і (у рушіях, що підтримують {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}) їхня властивість __proto__ може бути змінена. Об'єкт можна зробити нерозширюваним за допомогою {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} або {{jsxref("Object.freeze()")}}.

+ +

Приклади

+ +
// Нові об'єкти є розширюваними.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...але це можна змінити.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Запечатані об'єкти є за визначенням нерозширюваними.
+var sealed = Object.seal({});
+Object.isExtensible(sealed); // === false
+
+// Заморожені об'єкти також за визначенням є нерозширюваними.
+var frozen = Object.freeze({});
+Object.isExtensible(frozen); // === false
+
+ +

Примітки

+ +

У ES5, якщо аргументом даного методу виступає не об'єкт (примітивне значення), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 ж, якщо аргументом методу буде не об'єкт, він буде сприйнятий як звичайний нерозширюваний об'єкт, тобто, вихідним значенням буде false.

+ +
Object.isExtensible(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.isExtensible(1);
+// false                         (код ES2015)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.isExtensible")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..b693befb9a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,178 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +tags: + - ECMAScript 5 + - JavaScript + - Об'єкт + - метод + - розширюваний +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +
{{JSRef}}
+ +

Метод Object.isFrozen() визначає, чи є об'єкт {{jsxref("Object.freeze()", "замороженим", "", 1)}}.

+ +
{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}
+ + + +

Синтаксис

+ +
Object.isFrozen(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт для перевірки.
+
+ +

Повертає

+ +

{{jsxref("Boolean", "Булеве значення")}}, що вказує, чи є наданий об'єкт замороженим.

+ +

Опис

+ +

Об'єкт є замороженим тільки тоді, коли він не є {{jsxref("Object.isExtensible()", "розширюваним", "", 1)}}, всі його властивості недоступні для налаштування, і всі його властивості-значення (тобто, властивості, які не є властивостями-аксесорами, що мають гетер або сетер) недоступні для запису.

+ +

Приклади

+ +
// Новий об'єкт є розширюваним, отже, він не заморожений
+Object.isFrozen({}); // === false
+
+// Пустий об'єкт, котрий є нерозширюваним,
+// є порожньо замороженим.
+var vacuouslyFrozen = Object.preventExtensions({});
+Object.isFrozen(vacuouslyFrozen); // === true
+
+// Новий об'єкт з однією властивістю є також розширюваним,
+// отже, не заморожений.
+var oneProp = { p: 42 };
+Object.isFrozen(oneProp); // === false
+
+// Припинення розширювання об'єкту не робить його замороженим,
+// тому що властивість досі доступна
+// для налаштування (та запису).
+Object.preventExtensions(oneProp);
+Object.isFrozen(oneProp); // === false
+
+// ...але видалення цієї властивості робить об'єкт
+// порожньо замороженим.
+delete oneProp.p;
+Object.isFrozen(oneProp); // === true
+
+// Нерозширюваний об'єкт з властивістю, недоступною для запису,
+// але доступною для налаштування, не є замороженим.
+var nonWritable = { e: 'plep' };
+Object.preventExtensions(nonWritable);
+Object.defineProperty(nonWritable, 'e', {
+  writable: false
+}); // зробити властивість недоступною для запису
+Object.isFrozen(nonWritable); // === false
+
+// Якщо зробити цю властивість недоступною для налаштування,
+// тоді об'єкт буде замороженим.
+Object.defineProperty(nonWritable, 'e', {
+  configurable: false
+}); // зробити властивість недоступною для налаштування
+Object.isFrozen(nonWritable); // === true
+
+// Нерозширюваний об'єкт з властивістю, недоступною
+// для налаштування, але доступною для запису, також не є замороженим.
+var nonConfigurable = { release: 'the kraken!' };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, 'release', {
+  configurable: false
+});
+Object.isFrozen(nonConfigurable); // === false
+
+// Якщо зробити цю властивість недоступною для запису,
+// тоді об'єкт буде заморожений.
+Object.defineProperty(nonConfigurable, 'release', {
+  writable: false
+});
+Object.isFrozen(nonConfigurable); // === true
+
+// Нерозширюваний об'єкт з властивістю-аксесором,
+// доступною для налаштування, не є замороженим.
+var accessor = { get food() { return 'ням'; } };
+Object.preventExtensions(accessor);
+Object.isFrozen(accessor); // === false
+
+// ...але якщо зробити цю властивість недоступною для налаштування,
+// тоді об'єкт буде замороженим.
+Object.defineProperty(accessor, 'food', {
+  configurable: false
+});
+Object.isFrozen(accessor); // === true
+
+// Але найпростіший спосіб зробити об'єкт замороженим -
+// це викликати на ньому метод Object.freeze.
+var frozen = { 1: 81 };
+Object.isFrozen(frozen); // === false
+Object.freeze(frozen);
+Object.isFrozen(frozen); // === true
+
+// За визначенням, заморожений об'єкт є нерозширюваним.
+Object.isExtensible(frozen); // === false
+
+// Також, за визначенням, заморожений об'єкт є запечатаним.
+Object.isSealed(frozen); // === true
+
+ +

Примітки

+ +

У ES5, якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний заморожений об'єкт, метод просто поверне true.

+ +
Object.isFrozen(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.isFrozen(1);
+// true                          (код ES2015)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.isFrozen")}}

+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html new file mode 100644 index 0000000000..b5472b105d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -0,0 +1,125 @@ +--- +title: Object.prototype.isPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +tags: + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +--- +
{{JSRef}}
+ +

Метод isPrototypeOf() перевіряє, чи існує об'єкт у ланцюжку прототипів іншого об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}
+ + + +
+

isPrototypeOf() відрізняється від оператора {{jsxref("Operators/instanceof", "instanceof")}}.У виразі "object instanceof AFunction" ланцюжок прототипів об'єкта object перевіряється на AFunction.prototype, а не на сам об'єкт AFunction.

+
+ +

Синтаксис

+ +
prototypeObj.isPrototypeOf(object)
+ +

Параметри

+ +
+
object
+
Об'єкт, чий ланцюжок прототипів перевірятиметься.
+
+ +

Значення, що повертається

+ +

{{jsxref("Boolean","Булеве значення")}}, що зазначає, чи присутній об'єкт, що викликав метод, у ланцюжку прототипів вказаного об'єкта.

+ +

Помилки, що викидаються

+ +
+
{{jsxref("TypeError")}}
+
Помилка {{jsxref("TypeError")}} викидається, якщо prototypeObj дорівнює undefined або null.
+
+ +

Опис

+ +

Метод isPrototypeOf() дозволяє перевірити, чи існує об'єкт у ланцюжку прототипів іншого об'єкта.

+ +

Приклади

+ +

Цей приклад демонструє, що Baz.prototype, Bar.prototypeFoo.prototype та Object.prototype присутні у ланцюжку прототипів об'єкта baz:

+ +
function Foo() {}
+function Bar() {}
+function Baz() {}
+
+Bar.prototype = Object.create(Foo.prototype);
+Baz.prototype = Object.create(Bar.prototype);
+
+var baz = new Baz();
+
+console.log(Baz.prototype.isPrototypeOf(baz)); // true
+console.log(Bar.prototype.isPrototypeOf(baz)); // true
+console.log(Foo.prototype.isPrototypeOf(baz)); // true
+console.log(Object.prototype.isPrototypeOf(baz)); // true
+
+ +

Метод isPrototypeOf(), разом з оператором {{jsxref("Operators/instanceof", "instanceof")}} можуть стати в нагоді, коли ви маєте код, який працює тільки з об'єктами, похідними від певного ланцюга прототипів, наприклад, щоб гарантувати, що певні методи або властивості будуть присутні на цьому об'єкті.

+ +

Наприклад, перевіримо, чи походить об'єкт baz від Foo.prototype:

+ +
if (Foo.prototype.isPrototypeOf(baz)) {
+  // виконати безпечні дії
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.2.4.6', 'Object.prototype.isPrototypeOf')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object.prototype.isprototypeof', 'Object.prototype.isPrototypeOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.prototype.isprototypeof', 'Object.prototype.isPrototypeOf')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.isPrototypeOf")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/issealed/index.html b/files/uk/web/javascript/reference/global_objects/object/issealed/index.html new file mode 100644 index 0000000000..5bb61b22c6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/issealed/index.html @@ -0,0 +1,139 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed +tags: + - ECMAScript 5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +
{{JSRef}}
+ +

Метод Object.isSealed() визначає, чи є об'єкт запечатаним.

+ +
{{EmbedInteractiveExample("pages/js/object-issealed.html")}}
+ + + +

Синтаксис

+ +
Object.isSealed(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, який треба перевірити.
+
+ +

Значення, що повертається

+ +

{{jsxref("Boolean","Булеве значення")}}, що вказує, чи є об'єкт запечатаним.

+ +

Опис

+ +

Повертає true, якщо об'єкт запечатаний, інакше повертає false. Об'єкт вважається запечатаним, якщо він {{jsxref("Object.isExtensible", "нерозширюваний", "", 1)}} та якщо всі його властивості недоступні для налаштування і, відповідно, недоступні для видалення (але не обов'язково недоступні для запису).

+ +

Приклади

+ +
// За замовчуванням об'єкти не запечатані.
+var empty = {};
+Object.isSealed(empty); // === false
+
+// Якщо зробити порожній об'єкт нерозширюваним,
+// він стає порожньо запечатаним.
+Object.preventExtensions(empty);
+Object.isSealed(empty); // === true
+
+// Те саме стосується непорожнього об'єкта,
+// хіба що усі його властивості недоступні для налаштування.
+var hasProp = { fee: 'Крибле крабле бум' };
+Object.preventExtensions(hasProp);
+Object.isSealed(hasProp); // === false
+
+// Але зробимо їх усі недоступними для налаштування,
+// і об'єкт стає запечатаним.
+Object.defineProperty(hasProp, 'fee', {
+  configurable: false
+});
+Object.isSealed(hasProp); // === true
+
+// Звісно, найпростіший спосіб запечатати об'єкт -
+// це Object.seal.
+var sealed = {};
+Object.seal(sealed);
+Object.isSealed(sealed); // === true
+
+// Запечатаний об'єкт, за визначенням, нерозширюваний.
+Object.isExtensible(sealed); // === false
+
+// Запечатаний об'єкт може бути замороженим,
+// але це не обов'язково.
+Object.isFrozen(sealed); // === true
+// (усі властивості також недоступні для запису)
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // === false
+// ('p' досі доступна для запису)
+
+var s3 = Object.seal({ get p() { return 0; } });
+Object.isFrozen(s3); // === true
+// (для аксесорів має значення тільки доступність для налаштування)
+
+ +

Примітки

+ +

У ES5 якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний запечатаний об'єкт, метод просто поверне true.

+ +
Object.isSealed(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.isSealed(1);
+// true                          (код ES2015)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.isSealed")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/keys/index.html b/files/uk/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..796209d575 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,171 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +tags: + - ECMAScript5 + - JavaScript + - Method + - Object + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +
{{JSRef}}
+ +

Метод Object.keys() повертає масив імен особистих перелічуваних властивостей переданого об'єкта в тому самому порядку, що його повертає звичайний цикл.

+ +

{{EmbedInteractiveExample("pages/js/object-keys.html")}}

+ + + +

Синтаксис

+ +
Object.keys(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, перелік властивостей якого треба отримати.
+
+ +

Вертає

+ +

Масив рядків, що передають імена всіх перелічуваних властивостей переданого об'єкта.

+ +

Опис

+ +

Object.keys() повертає масив рядків, що передають імена перелічуваних властивостей, які належать безпосередньо об'єктові obj. Порядок отриманих властивостей збігається із тим, що його забезпечує перебір властивостей вручну за допомогою циклу.

+ +

Приклади

+ +
// простий масив
+var arr = ['а', 'б', 'в'];
+console.log(Object.keys(arr));  // виводить ['0', '1', '2']
+
+// масив як об'єкт
+var obj = { 0: 'а', 1: 'б', 2: 'в' };
+console.log(Object.keys(obj));  // виводить ['0', '1', '2']
+
+// масив як об'єкт з випадковим порядком ключів
+var anObj = { 100: 'а', 2: 'б', 7: 'в' };
+console.log(Object.keys(anObj));  // виводить ['2', '7', '100']
+
+// getFoo є неперелічуваною властивістю
+var myObj = Object.create({}, {
+    getFoo: {
+        value: function () { return this.foo; }
+    }
+});
+myObj.foo = 1;
+console.log(Object.keys(myObj));  // виводить ['foo']
+ +

Якщо вам потрібні усі властивості, навіть неперелічувані, зверніть увагу на {{jsxref("Object.getOwnPropertyNames()")}}.

+ +

Зауваги

+ +

У ES5 метод викидає {{jsxref("Global_Objects/TypeError", "TypeError")}}, якщо арґумент не є об'єктом (а натомість є {{glossary("Primitive", "простою величиною")}}). Водночас у ES2015 арґумент, що належить до простого типу даних, буде перетворено на об'єкт.

+ +
Object.keys('foo');
+// TypeError: "foo" is not an object (код ES5)
+
+Object.keys('foo');
+// ["0", "1", "2"]                   (код ES2015)
+
+ +

Запасний варіант (поліфіл)

+ +

Для старіших середовищ, де метод Object.keys() відсутній, можна забезпечити запасний варіант, скориставшись таким кодом:

+ +
// З https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function() {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function(obj) {
+      if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i < dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+
+ +

Зауважте, що наведений код у IE7 (а також, можливо, у IE8) повертає також неперелічувані властивості для об'єктів, що їх отримано з іншого вікна.

+ +

Простий запасний варіант для переглядача можна знайти в статті Javascript - Object.keys Browser Compatibility.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}{{Spec2('ES5.1')}}Первинне визначення. Реалізовано у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.keys")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html b/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html new file mode 100644 index 0000000000..fbd98cf2e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html @@ -0,0 +1,166 @@ +--- +title: Object.prototype.__noSuchMethod__ +slug: Web/JavaScript/Reference/Global_Objects/Object/noSuchMethod +tags: + - JavaScript + - Object + - Властивість + - застаріла + - нестандартна +translation_of: Archive/Web/JavaScript/Object.noSuchMethod +--- +
{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko43")}}
+ +

Властивість __noSuchMethod__ використовувалась для посилання на функцію, що мала виконатися, коли на об'єкті викликався неіснуючий метод, але ця функція більше не доступна.

+ +

В той час як метод __noSuchMethod__ був прибраний, специфікація ECMAScript 2015 містить об'єкт {{JSxRef("Proxy")}}, який допоможе досягти описаного нижче (і навіть більше).

+ +

Синтаксис

+ +
obj.__noSuchMethod__ = fun
+ +

Параметри

+ +
+
fun
+
Функція, що має вигляд
+
+
function (id, args) { . . . }
+ +
+
id
+
Ім'я неіснуючого методу, що був викликаний
+
args
+
Масив аргументів, переданих у метод
+
+
+
+ +

Опис

+ +

За замовчуванням спроба викликати метод, який не існує, на об'єкті призводить до викидання {{JSxRef("TypeError")}}. Цю поведінку можна обійти, визначивши функцію у властивості об'єкта __noSuchMethod__. Функція приймає два аргумента, перший - це ім'я метода, що викликається, другий - це масив аргументів, які передаються під час виклику. Другий аргумент є справжнім масивом (тобто, він успадковується через ланцюг {{JSxRef("Array.prototype")}}), а не подібним до масиву об'єктом arguments.

+ +

Якщо цей метод не можна викликати, чи тому що він дорівнює undefined, чи був видалений, чи йому вручну було присвоєне нефункціональне значення, рушій JavaScript повернеться до викидання TypeError.

+ +

Приклади

+ +

Проста перевірка __noSuchMethod__

+ +
var o = {
+  __noSuchMethod__: function(id, args) {
+                      console.log(id, '(' + args.join(', ') + ')');
+                    }
+};
+
+o.foo(1, 2, 3);
+o.bar(4, 5);
+o.baz();
+
+// Виведе
+// foo (1, 2, 3)
+// bar (4, 5)
+// baz ()
+
+ +

Використання __noSuchMethod__ для імітації множинного спадкування

+ +

Приклад коду, що реалізує примітивну форму множинного спадкування, наведений нижче.

+ +
// Не працює, якщо батьківські об'єкти є результатом множинного спадкування
+function noMethod(name, args) {
+  var parents = this.__parents_;
+
+  // Пройти через усі батьківські об'єкти
+  for (var i = 0; i < parents.length; i++) {
+    // Якщо знаходимо функцію у батьківського об'єкта, викликаємо її
+    if (typeof parents[i][name] == 'function') {
+      return parents[i][name].apply(this, args);
+    }
+  }
+
+  // Якщо ми дістались сюди, метод не був знайдений
+  throw new TypeError;
+}
+
+// Додавало батьківський об'єкт для множинного спадкування
+function addParent(obj, parent) {
+  // Якщо об'єкт неініціалізований, ініціалізуємо його
+  if (!obj.__parents_) {
+    obj.__parents_ = [];
+    obj.__noSuchMethod__ = noMethod;
+  }
+
+  // Додати батьківський об'єкт
+  obj.__parents_.push(parent);
+}
+
+ +

Приклад використання цієї ідеї наведений нижче.

+ +
// Базовий клас 1
+function NamedThing(name) {
+  this.name = name;
+}
+
+NamedThing.prototype = {
+  getName: function() { return this.name; },
+  setName: function(newName) { this.name = newName; }
+}
+
+// Базовий клас 2
+function AgedThing(age) {
+  this.age = age;
+}
+
+AgedThing.prototype = {
+  getAge: function() { return this.age; },
+  setAge: function(age) { this.age = age; }
+}
+
+// Дочірній клас. Наслідується від NamedThing та AgedThing,
+// а також визначає адресу
+function Person(name, age, address){
+  addParent(this, NamedThing.prototype);
+  NamedThing.call(this, name);
+  addParent(this, AgedThing.prototype);
+  AgedThing.call(this, age);
+  this.address = address;
+}
+
+Person.prototype = {
+  getAddr: function() { return this.address; },
+  setAddr: function(addr) { this.address = addr; }
+}
+
+var bob = new Person('Боб', 25, 'Нью-Йорк');
+
+console.log('getAge ' + (('getAge' in bob) ? 'належить' : 'не належить') + ' Бобу');
+// getAge не належить Бобу
+
+console.log("Вік Боба: " + bob.getAge());
+// Вік Боба: 25
+
+console.log('getName ' + (('getName' in bob) ? 'належить' : 'не належить') + ' Бобу');
+// getName не належить Бобу
+
+console.log("Ім'я Боба: " + bob.getName());
+// Ім'я Боба: Боб
+
+console.log('getAddr ' + (('getAddr' in bob) ? 'належить' : 'не належить') + ' Бобу');
+// getAddr належить Бобу
+
+console.log("Адреса Боба: " + bob.getAddr());
+// Адреса Боба: Нью-Йорк
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Ця функціональність була прибрана, дивіться {{bug(683218)}}.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.noSuchMethod")}}

+
diff --git a/files/uk/web/javascript/reference/global_objects/object/object/index.html b/files/uk/web/javascript/reference/global_objects/object/object/index.html new file mode 100644 index 0000000000..223a18bbb8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/object/index.html @@ -0,0 +1,84 @@ +--- +title: Конструктор Object() +slug: Web/JavaScript/Reference/Global_Objects/Object/Object +tags: + - JavaScript + - Довідка + - Конструктор + - Об'єкт +translation_of: Web/JavaScript/Reference/Global_Objects/Object/Object +--- +
{{JSRef}}
+ +

Конструктор Object створює об'єктну обгортку для наданого значення.

+ + + +

Викликаний не у контексті конструктора, Object поводиться ідентично до new Object().

+ +

Синтаксис

+ +
new Object()
+new Object(value)
+ +

Параметри

+ +
+
value
+
Будь-яке значення.
+
+ +

Приклади

+ +

Створення нового об'єкта

+ +
let o = new Object()
+o.foo = 42
+
+console.log(o)
+// Object { foo: 42 }
+ +

Використання Object з типами undefined та null

+ +

Наступні приклади зберігають порожній об'єкт Object у o:

+ +
let o = new Object()
+
+ +
let o = new Object(undefined)
+
+ +
let o = new Object(null)
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-object-constructor', 'Object constructor')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.Object")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/observe/index.html b/files/uk/web/javascript/reference/global_objects/object/observe/index.html new file mode 100644 index 0000000000..ec4d1ca5e8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/observe/index.html @@ -0,0 +1,153 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Global_Objects/Object/observe +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.observe +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод Object.observe() використовувався для асинхронного спостереження за змінами у об'єкті. Він надавав послідовність змін у порядку виникнення. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете, натомість, скористатись більш загальним об'єктом {{jsxref("Proxy")}}.

+ +

Синтаксис

+ +
Object.observe(obj, callback[, acceptList])
+ +

Параметри

+ +
+
obj
+
Об'єкт для спостереження.
+
callback
+
Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом: +
+
changes
+
Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін: +
    +
  • name: Ім'я властивості, яка була змінена.
  • +
  • object: Змінений об'єкт після того, як відбулася зміна.
  • +
  • type: Строка, що вказує тип зміни. Один з "add", "update" або "delete".
  • +
  • oldValue: Тільки для типів "update" та "delete". Значення перед зміною.
  • +
+
+
+
+
acceptList
+
Список типів змін для спостереження на наданому об'єкті для наданої функції callback. Якщо не заданий, буде використаний масив ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"].
+
+ +

Значення, що повертається

+ +

Об'єкт для спостереження.

+ +

Опис

+ +

Функція callback викликається кожен раз, коли у obj відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.

+ +

Приклади

+ +

Логування усіх шістьох типів

+ +
var obj = {
+  foo: 0,
+  bar: 1
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.baz = 2;
+// [{name: 'baz', object: <obj>, type: 'add'}]
+
+obj.foo = 'привіт';
+// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]
+
+Object.defineProperty(obj, 'foo', {writable: false});
+// [{name: 'foo', object: <obj>, type: 'reconfigure'}]
+
+Object.setPrototypeOf(obj, {});
+// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}]
+
+Object.seal(obj);
+// [
+//   {name: 'foo', object: <obj>, type: 'reconfigure'},
+//   {name: 'bar', object: <obj>, type: 'reconfigure'},
+//   {object: <obj>, type: 'preventExtensions'}
+// ]
+
+ +

Зв'язування даних

+ +
// Модель користувача
+var user = {
+  id: 0,
+  name: 'Брендан Айк',
+  title: 'п.'
+};
+
+// Створити привітання для користувача
+function updateGreeting() {
+  user.greeting = 'Вітаю, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // Кожен раз, коли змінюється ім'я чи титул, оновити привітання
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+
+ +

Користувацький тип зміни

+ +
// Точка на 2-вимірній площині
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // Виконуємо користувацьку зміну
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var oldDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {oldDistance: oldDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Зміна відстані: ' + (point.distance - changes[0].oldDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Зміна відстані: 5
+
+ +

Специфікації

+ +

Strawman proposal specification.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.observe")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/parent/index.html b/files/uk/web/javascript/reference/global_objects/object/parent/index.html new file mode 100644 index 0000000000..03a5568469 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/parent/index.html @@ -0,0 +1,41 @@ +--- +title: Object.prototype.__parent__ +slug: Web/JavaScript/Reference/Global_Objects/Object/Parent +tags: + - JavaScript + - Object + - Властивість + - застаріла + - нестандартна +translation_of: Archive/Web/JavaScript/Object.parent +--- +
{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko2")}}
+ +

Властивість __parent__ вказувала на контекст об'єкта, але була прибрана.

+ +

Синтаксис

+ +
obj.__parent__
+ +

Опис

+ +

Для об'єктів верхнього рівня це, наприклад, window.

+ +

Специфікації

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.parent")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..3fe25fb9b0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,139 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +tags: + - ECMAScript5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +
{{JSRef}}
+ +

Object.preventExtensions() метод позбавляє можливості додавати нові властивості до об'єкта (тобто, розширювати об'єкт у подальшому).

+ +
{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}
+ + + +

Синтаксис

+ +
Object.preventExtensions(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, котрий має стати нерозширюваним.
+
+ +

Вихідне значення

+ +

Об'єкт, що робиться нерозширюваним.

+ +

Опис

+ +

Об'єкт вважається розширюваним, якщо до нього можуть бути додані нові властивості. Object.preventExtensions() робить об'єкт нерозширюваним, тобто таким, який уже ніколи не зможе містити інших властивостей, окрім тих, котрі він мав на момент застосування до нього даного методу. Зверніть увагу на те, що властивості нерозширюваного об'єкта все ж можна видаляти. Спроба ж додати нові властивості до нерозширюваного об'єкта не увінчається успіхом: або властивості просто не будуть додані без жодних помилок, або ж згенерується помилка типу {{jsxref("TypeError")}} (найчастіше, але не виключно, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}).

+ +

Object.preventExtensions() має вплив лише на додавання особистих властивостей об'єкта. Властивості можуть бути додані до прототипу об'єкта.
+
+ Цей метод робить [[prototype]] цільового об'єкта незмінним; будь-яке перевизначення [[prototype]] спричинить помилку TypeError. Ця поведінка є специфічною для внутрішньої властивості [[prototype]], інші властивості цільового об'єкта залишаються змінними.

+ +

Як тільки об'єкт стає нерозширюваним, неможливо зробити його знову розширюваним.

+ +

Приклади

+ +
// Object.preventExtensions повертає об'єкт,
+// який робиться нерозширюваним.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// За замовчуванням усі об'єкти є розширюваними.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...але це можна змінити.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Object.defineProperty викине помилку, якщо спробувати додати
+// нову вдастивість до нерозширюваного об'єкта.
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+Object.defineProperty(nonExtensible, 'new', {
+  value: 8675309
+}); // викине TypeError
+
+// У строгому режимі спроба додати нові властивості
+// до нерозширюваного об'єкта спричиняє помилку TypeError.
+function fail() {
+  'use strict';
+  // викида TypeError
+  nonExtensible.newProperty = 'FAIL';
+}
+fail();
+
+ +

Прототип нерозширюваного об'єкта є незмінним:

+ +
var fixed = Object.preventExtensions({});
+// викине 'TypeError'.
+fixed.__proto__ = { oh: 'hai' };
+ +

Примітки

+ +

У ES5, якщо аргументом даного методу виступає не об'єкт (примітив), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 ж, якщо аргументом методу буде не об'єкт, він буде сприйнятий як звичайний нерозширюваний об'єкт, і буде просто повернений.

+ +
Object.preventExtensions(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.preventExtensions(1);
+// 1                             (код ES2015)
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.preventExtensions")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..b7eafe88f0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html @@ -0,0 +1,149 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +tags: + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +
{{JSRef}}
+ +

Метод propertyIsEnumerable() повертає булеве значення, що позначає, чи є вказана властивість перелічуваною.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}
+ + + +

Синтаксис

+ +
obj.propertyIsEnumerable(prop)
+ +

Параметри

+ +
+
prop
+
Ім'я властивості, яку необхідно перевірити.
+
+ +

Значення, що повертається

+ +

{{jsxref("Boolean","Булеве значення")}}, що позначає, чи є вказана властивість перелічуваною.

+ +

Опис

+ +

Кожен об'єкт має метод propertyIsEnumerable. Цей метод може визначити, чи може вказана властивість об'єкта бути перелічена циклом {{jsxref("Statements/for...in", "for...in")}}, за винятком властивостей, успадкованих через ланцюжок прототипів. Якщо об'єкт не має вказаної властивості, метод поверне false.

+ +

Приклади

+ +

Базове використання propertyIsEnumerable

+ +

Наступний приклад демонструє використання propertyIsEnumerable на об'єктах та масивах:

+ +
var o = {};
+var a = [];
+o.prop = 'перелічувана';
+a[0] = 'перелічувана';
+
+o.propertyIsEnumerable('prop');   // повертає true
+a.propertyIsEnumerable(0);        // повертає true
+
+ +

Визначені користувачем об'єкти проти вбудованих об'єктів

+ +

Наступний приклад демонструє перелічуваність визначених користувачем властивостей у порівнянні з вбудованими:

+ +
var a = ['перелічувана'];
+
+a.propertyIsEnumerable(0);          // повертає true
+a.propertyIsEnumerable('length');   // повертає false
+
+Math.propertyIsEnumerable('random');   // повертає false
+this.propertyIsEnumerable('Math');     // повертає false
+
+ +

Прямі властивості проти успадкованих

+ +
var a = [];
+a.propertyIsEnumerable('constructor');         // повертає false
+
+function firstConstructor() {
+  this.property = 'не перелічувана';
+}
+
+firstConstructor.prototype.firstMethod = function() {};
+
+function secondConstructor() {
+  this.method = function method() { return 'перелічувана'; };
+}
+
+secondConstructor.prototype = new firstConstructor;
+secondConstructor.prototype.constructor = secondConstructor;
+
+var o = new secondConstructor();
+o.arbitraryProperty = 'перелічувана';
+
+o.propertyIsEnumerable('arbitraryProperty');   // повертає true
+o.propertyIsEnumerable('method');              // повертає true
+o.propertyIsEnumerable('property');            // повертає false
+
+o.property = 'перелічувана';
+
+o.propertyIsEnumerable('property');            // повертає true
+
+// Наступні повертають false, оскільки вони присутні на прототипі, який
+// propertyIsEnumerable не враховує (хоча останні дві
+// перебираються циклом for-in)
+o.propertyIsEnumerable('prototype');   // повертає false (згідно з JS 1.8.1/FF3.6)
+o.propertyIsEnumerable('constructor'); // повертає false
+o.propertyIsEnumerable('firstMethod'); // повертає false
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення
{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/proto/index.html b/files/uk/web/javascript/reference/global_objects/object/proto/index.html new file mode 100644 index 0000000000..969759158b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/proto/index.html @@ -0,0 +1,127 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Reference/Global_Objects/Object/proto +tags: + - ECMAScript 2015 + - JavaScript + - Object + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +
{{JSRef}}{{Deprecated_header}} +
+

Застереження: Зміна властивості об'єкта [[Prototype]], за природою того, як сучасні рушії JavaScript оптимізують доступ до властивостей, є дуже повільною операцією в кожному переглядачі та рушії JavaScript. Ефект для продуктивності від зміни спадкування є витонченим та обширним, і не обмежується лише часом, витраченим на команду  obj.__proto__ = ..., але може поширюватися на будь-який код, що має доступ до будь-якого об'єкта, чия властивість [[Prototype]] була змінена. Якщо ви дбаєте про продуктивність, вам варто уникати присвоювати  [[Prototype]] об'єкта. Замість цього створіть новий об'єкт з бажаною властивістю [[Prototype]], використовуючи {{JSxRef("Object.create()")}}.

+
+ +
+

Застереження: В той час, як властивість Object.prototype.__proto__ підтримується більшістю нинішніх переглядачів, її існування та точна поведінка були стандартизовані у специфікації ECMAScript 2015 тільки в якості legacy-функціональності для сумісності з веб-переглядачами. Для кращої підтримки рекомендовано натомість використовувати {{JSxRef("Object.getPrototypeOf()")}}.

+
+
+ +

Властивість {{JSxRef("Object.prototype")}} __proto__ - це властивість-аксесор (функція-гетер та функція-сетер), яка відкриває внутрішню властивість [[Prototype]] (або об'єкт, або {{JSxRef("Global_Objects/null", "null")}}) об'єкта, через який до неї звертаються.

+ +

Використання __proto__ є суперечливим і не заохочується. Ця властивість ніколи не включалась у специфікації мови EcmaScript, але сучасні переглядачі вирішили все одно її реалізувати. Тільки останнім часом властивість __proto__ була стандартизована у специфікації мови ECMAScript 2015 для сумісності веб-переглядачів, і буде підтримуватись у майбутньому. Її використання не рекомендоване на користь  {{JSxRef("Object.getPrototypeOf")}}/{{JSxRef("Reflect.getPrototypeOf")}} та {{JSxRef("Object.setPrototypeOf")}}/{{JSxRef("Reflect.setPrototypeOf")}} (хоча, все одно, присвоєння [[Prototype]] об'єкта є повільною операцією, якої бажано уникати, якщо швидкодія має значення).

+ +

Властивість __proto__ також може бути використана при визначенні об'єктного літералу, щоб встановити властивість об'єкта [[Prototype]] при створенні, як альтернатива {{JSxRef("Object.create()")}}. Дивіться: Ініціалізація об'єктів / синтаксис літералів.

+ +

Опис

+ +

Функція-гетер __proto__ відкриває значення внутрішньої властивості об'єкта [[Prototype]]. Для об'єктів, що були створені об'єктним літералом, ця величина дорівнює {{JSxRef("Object.prototype")}}. Для об'єктів, створених літералами масивів, це значення дорівнює {{JSxRef("Array.prototype")}}. Для функцій воно дорівнює {{JSxRef("Function.prototype")}}. Для об'єктів, створених через new fun, де fun є однією з вбудованих функцій-конструкторів JavaScript ({{JSxRef("Array")}}, {{JSxRef("Boolean")}}, {{JSxRef("Date")}}, {{JSxRef("Number")}}, {{JSxRef("Object")}}, {{JSxRef("String")}} і так далі — в тому числі нові конструктори, додані з розвитком JavaScript), це значення завжди дорівнює fun.prototype. Для об'єктів, створених за допомогою new fun, де fun - це функція, визначена у скрипті, це значення дорівнює значенню fun.prototype. (Якщо тільки конструктор не повернув явно інший об'єкт, або значення fun.prototype не було переприсвоєне після створення екземпляра).

+ +

Сетер __proto__ дозволяє змінювати властивість об'єкта [[Prototype]]. Об'єкт має бути розширюваним згідно з {{JSxRef("Object.isExtensible()")}}: якщо це не так, викидається {{JSxRef("Global_Objects/TypeError", "TypeError")}}. Надана величина має бути об'єктом або {{JSxRef("Global_Objects/null", "null")}}. Передача будь-якого іншого значення не дасть ніякого результату.

+ +

Щоб зрозуміти, як прототипи використовуються для наслідування, дивіться статтю посібника Наслідування та ланцюжок прототипів.

+ +

Властивість __proto__ - це проста властивість-аксесор {{JSxRef("Object.prototype")}}, що складається з функції-гетера та функції-сетера. Звернення до властивості __proto__, яке зрештою звертається до {{JSxRef("Object.prototype")}}, знайде цю властивість, але звернення, яке не звертається до {{JSxRef("Object.prototype")}}, не знайде її. Якщо інша властивість __proto__ буде знайдена до того, як відбудеться звернення до {{JSxRef("Object.prototype")}}, то ця властивість сховає знайдену у {{JSxRef("Object.prototype")}}.

+ +

Приклади

+ +

Використання __proto__

+ +
function Circle() {};
+const shape = {};
+const circle = new Circle();
+
+// Присвоїти прототип об'єкта.
+// НЕ РЕКОМЕНДОВАНО. Цей код написаний лише для прикладу. НЕ РОБІТЬ ЦЬОГО у справжньому коді.
+shape.__proto__ = circle;
+
+// Отримати прототип об'єкта
+console.log(shape.__proto__ === circle); // true
+
+const ShapeA = function () {};
+const ShapeB = {
+    a() {
+        console.log('aaa');
+    }
+};
+console.log(ShapeA.prototype.__proto__ = ShapeB);
+
+const shapea = new ShapeA();
+shapea.a(); // aaa
+console.log(ShapeA.prototype === shapea.__proto__); // true
+
+// або
+const ShapeC = function () {};
+const ShapeD = {
+    a() {
+        console.log('a');
+    }
+};
+
+const shapeC = new ShapeC();
+shapeC.__proto__ = ShapeD;
+shapeC.a(); // a
+console.log(ShapeC.prototype === shapeC.__proto__); // false
+
+// або
+function Test() {};
+Test.prototype.myname = function () {
+    console.log('myname');
+};
+
+const a = new Test();
+console.log(a.__proto__ === Test.prototype); // true
+a.myname(); // myname
+
+// або
+const fn = function () {};
+fn.prototype.myname = function () {
+    console.log('myname');
+};
+
+var obj = {
+    __proto__: fn.prototype
+};
+
+obj.myname(); // myname
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікації
{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.proto")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/seal/index.html b/files/uk/web/javascript/reference/global_objects/object/seal/index.html new file mode 100644 index 0000000000..568686ede7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/seal/index.html @@ -0,0 +1,151 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Reference/Global_Objects/Object/seal +tags: + - ECMAScript5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +
{{JSRef}}
+ +

Метод Object.seal() запечатує об'єкт, запобігаючи створенню нових властивостей та відмічаючи усі існуючі властивості як недоступні для налаштування. Значення існуючих властивостей можна і надалі змінювати, якщо вони доступні для запису.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}
+ + + +

Синтаксис

+ +
Object.seal(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, який має бути запечатаний.
+
+ +

Повертає

+ +

Об'єкт, який запечатується.

+ +

Опис

+ +

За замовчуванням, об'єкти є {{jsxref("Object.isExtensible()", "розширюваними", "", 1)}} (до них можна додати нові властивості). Запечатування об'єкту запобігає створенню нових властивостей і робить усі існуючі властивосні недоступними для налаштування. Це робить набір властивостей об'єкта зафіксованим і незмінним. Перетворення всіх властивостей на недоступні для налаштування також запобігає зміні властивостей-значень на властивості-аксесори, та навпаки, але не запобігає зміні значеннь властивостей. Спроби додати чи видалити властивість з запечатаного об'єкта, або перетворити властивість-значення на властивість-аксесор, не спрацюють, або непомітно, або з викиданням {{jsxref("TypeError")}} (найчастіше, але не виключно, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}})

+ +

Ланцюг прототипів залишається незмінним. Проте, властивість {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} також запечатується.

+ +

Приклади

+ +
var obj = {
+  prop: function() {},
+  foo: 'му'
+};
+
+// Нові властивості можуть бути додані, існуючі властивості
+// можуть бути змінені або видалені.
+obj.foo = 'мяв';
+obj.lumpy = 'ква';
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+o === obj; // true
+Object.isSealed(obj); // === true
+
+// На запечатаному об'єкті можна змінювати значення властивостей
+obj.foo = 'кря';
+
+// Але не можна перетворити властивості-значення на властивості-аксесори,
+// і навпаки.
+Object.defineProperty(obj, 'foo', {
+  get: function() { return 'g'; }
+}); // викидає TypeError
+
+// Тепер будь-які спроби змін в об'єкті, окрім змін властивостей,
+// не працюватимуть.
+obj.quaxxor = 'весела качка';
+// непомітно не додасть властивість
+delete obj.foo;
+// непомітно не видалить властивість
+
+// ...а у строгому режимі такі спроби
+// викидатимуть помилки TypeError.
+function fail() {
+  'use strict';
+  delete obj.foo; // викидає TypeError
+  obj.sparky = 'гав'; // викидає TypeError
+}
+fail();
+
+// Спроби додавання властивостей за допомогою
+// Object.defineProperty також викидатимуть помилки.
+Object.defineProperty(obj, 'ohai', {
+  value: 17
+}); // викидає TypeError
+Object.defineProperty(obj, 'foo', {
+  value: 'рох'
+}); // змінює значення існуючої властивості
+
+ +

Примітки

+ +

У ES5, якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний запечатаний об'єкт, і буде просто повернений.

+ +
Object.seal(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.seal(1);
+// 1                             (код ES2015)
+
+ +

Порівняння з Object.freeze()

+ +

Існуючі властивості об'єктів, заморожених методом {{jsxref("Object.freeze()")}}, стають незмінними. Властивості об'єкта, запечатаного методом Object.seal(), надалі можуть бути зміненні.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціїСтатусКоментар
{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}{{Spec2('ES5.1')}}Початкове визначення. Реалізоване у JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.seal")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html new file mode 100644 index 0000000000..0e052f3bb5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html @@ -0,0 +1,220 @@ +--- +title: Object.setPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Об'єкт + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +--- +
{{JSRef}}
+ +

Метод Object.setPrototypeOf() присвоює прототипу (тобто, внутрішній властивості [[Prototype]]) вказаного об'єкта інший об'єкт або {{jsxref("null")}}.

+ +
+

Застереження: Зміна властивості об'єкта [[Prototype]] за природою того, як сучасні рушії JavaScript оптимізують доступ до властивостей, є дуже повільною операцією у кожному переглядачі та рушії JavaScript. До того ж, ефект від зміни наслідування є неочевидним та обширним, і не обмежується лише часом, витраченим на інструкцію Object.setPrototypeOf(...), а може стосуватися будь-якого коду, що звертається до будь-якого об'єкта, чия властивість [[Prototype]] була змінена.

+ +

Оскільки ця функціональність є частиною мови, тягар її ефективної (в ідеалі) реалізації досі лежить на розробниках рушіїв. Поки розробники рушіїв не вирішать цю проблему, якщо вам важлива продуктивність, вам варто уникати присвоювати [[Prototype]] об'єкта. Замість цього, створіть новий об'єкт з бажаним значенням [[Prototype]], використовуючи {{jsxref("Object.create()")}}.

+
+ +

Синтаксис

+ +
Object.setPrototypeOf(obj, prototype)
+ +

Параметри

+ +
+
obj
+
Об'єкт, прототипу якого треба присвоїти значення.
+
prototype
+
Новий прототип об'єкта (об'єкт або {{jsxref("null")}}).
+
+ +

Значення, що повертається

+ +

Вказаний об'єкт.

+ +

Опис

+ +

Викидає виняток {{jsxref("TypeError")}}, якщо об'єкт, чия властивість [[Prototype]] змінюється, є нерозширюваним згідно з {{jsxref("Object.isExtensible()")}}. Не робить нічого, якщо параметр prototype не є об'єктом або {{jsxref("null")}} (число, рядок, булеве значення або {{jsxref("undefined")}}). Інакше, цей метод змінює значення [[Prototype]] об'єкта obj на нове значення.

+ +

Метод Object.setPrototypeOf() присутній у специфікації ECMAScript 2015. Він, загалом, вважається правильним способом встановлювати прототип об'єкта, у порівнянні з більш суперечливою властивістю {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}.

+ +

Приклади

+ +
var dict = Object.setPrototypeOf({}, null);
+
+ +

Поліфіл

+ +

Використовуючи більш стару властивість {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}, ми легко можемо визначити метод Object.setPrototypeOf, якщо він досі не є доступним:

+ +
if (!Object.setPrototypeOf) {
+    // Працює лише у Chrome та FireFox, не працює у IE:
+     Object.prototype.setPrototypeOf = function(obj, proto) {
+         if(obj.__proto__) {
+             obj.__proto__ = proto;
+             return obj;
+         } else {
+             // Якщо ви хочете повернути прототип Object.create(null):
+             var Fn = function() {
+                 for (var key in obj) {
+                     Object.defineProperty(this, key, {
+                         value: obj[key],
+                     });
+                 }
+             };
+             Fn.prototype = proto;
+             return new Fn();
+         }
+     }
+}
+ +

Додавання ланцюжків прототипів

+ +

Комбінація Object.getPrototypeOf() та {{jsxref("Object.proto", "Object.prototype.__proto__")}} дозволяє додавати цілі ланцюжки прототипів до нового прототипу:

+ +
/**
+*** Object.appendChain(@object, @prototype)
+*
+* Додає перший невбудований прототип з ланцюжка до нового прототипу.
+* Повертає @object (якщо це була проста величина, вона буде перетворена на об'єкт).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+* Додає перший невбудований прототип з ланцюжка до вбудованого об'єкта Function.prototype,
+* а потім додає new Function(["@arg"(s)], "@function_body") до цього ланцюжка.
+* Повертає функцію.
+*
+**/
+
+Object.appendChain = function(oChain, oProto) {
+  if (arguments.length < 2) {
+    throw new TypeError('Object.appendChain - Недостатньо аргументів');
+  }
+  if (typeof oProto !== 'object' && typeof oProto !== 'string') {
+    throw new TypeError("другий аргумент Object.appendChain повинен бути об'єктом або рядком");
+  }
+
+  var oNewProto = oProto,
+      oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd);
+    o1st !== Object.prototype && o1st !== Function.prototype;
+    o1st = this.getPrototypeOf(o2nd)
+  ) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+
+ +

Використання

+ +

Перший приклад: Додавання ланцюжка до прототипу

+ +
function Mammal() {
+  this.isMammal = 'так';
+}
+
+function MammalSpecies(sMammalSpecies) {
+  this.species = sMammalSpecies;
+}
+
+MammalSpecies.prototype = new Mammal();
+MammalSpecies.prototype.constructor = MammalSpecies;
+
+var oCat = new MammalSpecies('Кіт');
+
+console.log(oCat.isMammal); // 'так'
+
+function Animal() {
+  this.breathing = 'так';
+}
+
+Object.appendChain(oCat, new Animal());
+
+console.log(oCat.breathing); // 'так'
+
+ +

Другий приклад: Перетворення простого значення на екземпляр свого конструктора та додавання його ланцюжка до прототипу

+ +
function MySymbol() {
+  this.isSymbol = 'так';
+}
+
+var nPrime = 17;
+
+console.log(typeof nPrime); // 'number'
+
+var oPrime = Object.appendChain(nPrime, new MySymbol());
+
+console.log(oPrime); // '17'
+console.log(oPrime.isSymbol); // 'так'
+console.log(typeof oPrime); // 'object'
+
+ +

Третій приклад: Додавання ланцюжка до об'єкта Function.prototype та додавання нової функції до цього ланцюжка

+ +
function Person(sName) {
+  this.identity = sName;
+}
+
+var george = Object.appendChain(new Person('Георгій'),
+                                'console.log("Всім привіт!!");');
+
+console.log(george.identity); // 'Георгій'
+george(); // 'Всім привіт!!'
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}{{Spec2('ES2015')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.setPrototypeOf")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html new file mode 100644 index 0000000000..cc85fc6920 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html @@ -0,0 +1,111 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +tags: + - JavaScript + - Довідка + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +
{{JSRef}}
+ +

Метод toLocaleString() повертає рядок, що відображає об'єкт. Цей метод призначений, щоб бути заміщеним у похідних об'єктах для специфічних задач щодо локалі.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}
+ + + +

Синтаксис

+ +
obj.toLocaleString()
+ +

Значення, що повертається

+ +

Рядок, що відображає об'єкт.

+ +

Опис

+ +

Метод {{jsxref("Object","об'єкта")}} toLocaleString повертає результат виклику {{jsxref("Object.toString", "toString()")}}.

+ +

Ця функція надана, щоб дати об'єктам загальний метод toLocaleString, хоча не усі його використовуватимуть. Дивіться наведений нижче список.

+ +

Об'єкти, які заміщують toLocaleString

+ + + +

Приклади

+ +

Заміщення toLocaleString() у масиві

+ +

На об'єктах ArraytoLocaleString() може використовуватись для виводу масиву значень у вигляді рядка, з необов'язковим додаванням специфічних мовних ідентифікаторів (наприклад, символів валюти):

+ +

Наприклад:

+ +
const testArray = [4, 7, 10];
+
+let euroPrices = testArray.toLocaleString('fr', { style: 'currency', currency: 'EUR'});
+// "4,00 €,7,00 €,10,00 €"
+ +

Заміщення toLocaleString() у об'єктах Date

+ +

На об'єктах DatetoLocaleString() використовується для виводу дати згідно особливостей мовних налаштувань:

+ +

Наприклад:

+ +
const testDate = new Date(Date.now());
+// "Date Fri May 29 2020 18:04:24 GMT+0100 (Британський літній час)"
+
+let deDate = testDate.toLocaleString('de');
+// "29.5.2020, 18:04:24"
+
+var frDate = testDate.toLocaleString('fr');
+//"29/05/2020 à 18:04:24"
+ +

Заміщення toLocaleString() у об'єктах Number

+ +

На об'єктах Number , toLocaleString() використовується для виводу чисел згідно особливостей мовних налаштувань, наприклад, з правильними роздільниками:

+ +

Наприклад:

+ +
const testNumber = 2901234564;
+// "2901234564"
+
+let deNumber = testNumber.toLocaleString('de');
+// "2.901.234.564"
+
+let frNumber = testNumber.toLocaleString('fr');
+// "2 901 234 564"
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.toLocaleString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/tosource/index.html b/files/uk/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..1de70827b6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,132 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Object/toSource +tags: + - JavaScript + - Об'єкт + - застарілий + - метод + - нестандартний + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод toSource() повертає рядок, який відображає першокод об'єкта.

+ +

Синтаксис

+ +
Object.toSource();
+obj.toSource();
+
+ +

Повертає

+ +

Рядок, який відображає першокод об'єкта.

+ +

Опис

+ +

Метод toSource() повертає наступні значення:

+ + + +

Ви можете викликати toSource() під час налагодження для дослідження вмісту об'єкта.

+ +

Перезапис методу toSource()

+ +

Перезапис toSource() не несе ніякої шкоди об'єктам. Наприклад:

+ +
function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.toSource = function Person_toSource() {
+  return 'new Person(' + uneval(this.name) + ')';
+};
+
+console.log(new Person('Джо').toSource()); // ---> new Person("Джо")
+
+ +

Вбудовані методи toSource()

+ +

Кожен базовий тип JavaScript має свій власний метод toSource(). Ці об'єкти наступні:

+ + + +

Обмеження для циклічних об'єктів

+ +

У випадках, коли об'єкт містить посилання на самого себе, наприклад, циклічно зв'язаний список чи дерево, котре можна пройти обома шляхами, toSource() не відтворюватиме посилання на самого себе, починаючи з Firefox 24. Наприклад:

+ +
var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Циклічний: ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // повертає "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Циклічний: ' + (obj1.b.a == obj1));
+
+ +

Якщо застосовується циклічна структура, і потрібен метод toSource(), об'єкт має перезаписати toSource(), або використовуючи посилання на конструктор, або надавши анонімну функцію.

+ +

Приклади

+ +

Використання toSource()

+ +

Наступний код визначає тип об'єкта Dog і створює theDog, об'єкт типу Dog:

+ +
function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Галя', 'лабрадор', 'шоколадний', 'самиця');
+
+ +

Якщо викликати метод toSource() об'єкта theDog, він поверне першокод JavaScript, який визначає об'єкт:

+ +
theDog.toSource();
+// повертає ({name:"Галя", breed:"лабрадор", color:"шоколадний", sex:"самиця"})
+
+ +

Специфікація

+ +

Не є частиною жодних стандартів.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.toSource")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/tostring/index.html b/files/uk/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..681a6c6f06 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,148 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toString +tags: + - JavaScript + - Об'єкт + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +
{{JSRef}}
+ +
Метод toString() повертає рядок, який відображає об'єкт.
+ +
+ +
{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}
+ + + +

Синтаксис

+ +
obj.toString()
+ +

Повертає

+ +

Рядок, який відображає об'єкт.

+ +

Опис

+ +

Кожен об'єкт має метод toString(), який автоматично викликається, коли об'єкт повинен бути відображений як рядок, або коли об'єкт знаходиться у виразі, де очікується рядок. За замовчуванням, метод  toString() успадковується усіма об'єктами, похідними від Object. Якщо цей метод не був перезаписаний у користувацькому об'єкті, то toString() поверне "[object type]", де type - це тип об'єкта. Наступний код це демонструє:

+ +
var o = new Object();
+o.toString(); // повертає [object Object]
+
+ +
+

Примітка: Починаючи з JavaScript 1.8.5, toString(), викликаний для {{jsxref("null")}}, повертає [object Null], для {{jsxref("undefined")}} повертає [object Undefined], як визначенно у 5-й версії ECMAScript і згодом у Ерраті. Дивіться {{anch("Використання_toString_для_визначення_класу_обєкта", "Використання toString() для визначення класу об'єкта")}}.

+
+ +

Приклади

+ +

Перезапис стандартного методу toString

+ +

Ви можете створити функцію, яка викликатиметься замість стандартного методу toString(). Метод toString() не приймає жодних аргументів і має повернути рядок. Метод toString(), який ви створите, може повертати будь-яке значення, але найбільш корисним буде, якщо він повертатиме інформацію про об'єкт.

+ +

Наступний код визначає тип об'єкта Dog і створює theDog, об'єкт типу Dog:

+ +
function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Галя', 'лабрадор', 'шоколадна', 'самиця');
+
+ +

Якщо ви викличете метод toString() для цього користувацького об'єкта, він поверне стандартне значення, успадковане від {{jsxref("Object")}}:

+ +
theDog.toString(); // повертає [object Object]
+
+ +

Наступний код створює і присвоює значення dogToString(), щоб перезаписати  стандартний метод toString(). Ця функція генерує рядок, що складається з імені, породи, кольору і статі об'єкта, у вигляді "властивість = значення;".

+ +
Dog.prototype.toString = function dogToString() {
+  var ret = 'Собака ' + this.name + ' - ' + this.color + ' ' + this.sex + ' ' + this.breed;
+  return ret;
+}
+
+ +

або

+ +
Dog.prototype.toString = function dogToString() {
+  return `Собака ${this.name} - ${this.color} ${this.sex} ${this.breed}`;
+}
+
+ +

Завдяки цьому коду, як тільки theDog буде використаний у контексті рядка, JavaScript автоматично викличе новий метод toString(), який поверне наступний рядок:

+ +
"Собака Галя - шоколадна самиця лабрадор"
+
+ +

Використання toString() для визначення класу об'єкта

+ +

Метод toString() може бути використаний з будь-яким об'єктом, щоб отримати його клас. Щоб використати Object.prototype.toString() для будь-якого об'єкта, необхідно викликати {{jsxref("Function.prototype.call()")}} або {{jsxref("Function.prototype.apply()")}}, передаючи об'єкт, який ви хочете дослідити, першим параметром (thisArg).

+ +
var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Починаючи з JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}{{Spec2('ES5.1')}}Виклик на {{jsxref("null")}} повертає [object Null], а {{jsxref("undefined")}} повертає [object Undefined]
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.toString")}}

+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html b/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html new file mode 100644 index 0000000000..678544cabe --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html @@ -0,0 +1,102 @@ +--- +title: Object.unobserve() +slug: Web/JavaScript/Reference/Global_Objects/Object/unobserve +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.unobserve +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод Object.unobserve() використовувався для видалення спостерігачів, встановлених методом {{jsxref("Object.observe()")}}, але він застарів та був прибраний з переглядачів. Ви можете натомість скористатись більш загальним об'єктом {{jsxref("Proxy")}}.

+ +

Синтаксис

+ +
Object.unobserve(obj, callback)
+ +

Параметри

+ +
+
obj
+
Об'єкт, за яким треба припинити спостереження.
+
callback
+
Посилання на спостерігач, який треба припинити викликати кожен раз, коли у об'єкті obj відбувається зміна.
+
+ +

Значення, що повертається

+ +

Вказаний об'єкт.

+ +

Опис

+ +

Object.unobserve() має викликатися після {{jsxref("Object.observe()")}}, щоб прибрати з об'єкта спостерігач.

+ +

Параметр callback має бути посиланням на функцію, а не анонімною функцією, бо це посилання буде використано, щоб прибрати попередній спостерігач. Немає сенсу викликати Object.unobserve() з анонімною функцією зворотного виклику, вона не прибере жоден спостерігач.

+ +

Приклади

+ +

Припинення спостереження за об'єктом

+ +
var obj = {
+  foo: 0,
+  bar: 1
+};
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Object.observe(obj, observer);
+​
+obj.newProperty = 2;
+// [{name: 'newProperty', object: <obj>, type: 'add'}]
+
+Object.unobserve(obj, observer);
+
+obj.foo = 1;
+// Функція зворотного виклику не викликалась
+ +

Використання анонімної функції

+ +
var person = {
+  name: 'Ахмед',
+  age: 25
+};
+
+Object.observe(person, function(changes) {
+  console.log(changes);
+});
+
+person.age = 40;
+// [{name: 'age', object: <obj>, oldValue: 25, type: 'update'}]
+
+Object.unobserve(person, function(changes) {
+  console.log(changes);
+});
+
+person.age = 63;
+// [{name: 'age', object: <obj>, oldValue: 40, type: 'update'}]
+// Функція зворотного виклику викликатиметься завжди
+
+ +

Специфікації

+ +

Strawman proposal specification.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.unobserve")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html b/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html new file mode 100644 index 0000000000..7ad4d67028 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html @@ -0,0 +1,71 @@ +--- +title: Object.prototype.unwatch() +slug: Web/JavaScript/Reference/Global_Objects/Object/unwatch +tags: + - JavaScript + - Об'єкт + - застарілий + - метод + - налагодження +translation_of: Archive/Web/JavaScript/Object.unwatch +--- +
{{JSRef}}
+ +
+

Застереження: Не використовуйте unwatch() та {{jsxref("Object.prototype.watch", "watch()")}}! Ці два методи були реалізовані лише у Firefox до 58-ї версії, вони застаріли та були прибрані у Firefox 58+. До того ж, використання точок спостереження має серйозний негативний вплив на продуктивність, особливо при використанні на глобальних об'єктах, таких як window. Звісно, ви можете, натомість, використовувати сетери та гетери або проксі.

+
+ +

Метод unwatch() прибирає точку спостереження, встановлену методом {{jsxref("Object.prototype.watch", "watch()")}}.

+ +

Синтаксис

+ +
obj.unwatch(prop)
+ +

Параметри

+ +
+
prop
+
Ім'я властивості об'єкта, за якою треба припинити спостереження.
+
+ +

Значення, що повертається

+ +

{{jsxref("undefined")}}.

+ +

Опис

+ +

Налагоджувач JavaScript має функціональність, схожу на ту, що надає даний метод, а також інші налагоджувальні можливості. Інформацію щодо налагоджувача дивіться у статті Venkman.

+ +

За замовчуванням, цей метод успадковується кожним об'єктом, похідним від {{jsxref("Object")}}.

+ +
+

Заувага: Причина, з якої unwatch() приймає властивість prop єдиним параметром, в тому, що метод {{jsxref("Object.watch", "watch()")}} допускає лише один обробник.

+
+ +

Приклади

+ +

Дивіться {{jsxref("Object.watch", "watch()")}}.

+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Реалізований у JavaScript 1.2.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.unwatch")}}

+
+ +

Примітки щодо сумісності

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/valueof/index.html b/files/uk/web/javascript/reference/global_objects/object/valueof/index.html new file mode 100644 index 0000000000..153f2be121 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/valueof/index.html @@ -0,0 +1,115 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf +tags: + - JavaScript + - valueOf + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +
{{JSRef}}
+ +
Метод valueOf() повертає просту величину вказаного об'єкта.
+ +
{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}
+ + + +

Синтаксис

+ +
object.valueOf()
+ +

Значення, що повертається

+ +

Проста величина вказаного об'єкта.

+ +

Опис

+ +

JavaScript викликає метод valueOf, щоб перетворити об'єкт на просту величину. Рідко трапляється необхідність викликати його вручну. JavaScript автоматично застосовує valueOf, коли зустрічає об'єкт там, де очікується проста величина.

+ +

За замовчуванням, кожен об'єкт, який походить від {{jsxref("Object")}}, успадковує метод valueOf. Кожний вбудований об'єкт перезаписує цей метод, щоб повертати відповідне значення. Якщо об'єкт не має простої величини, valueOf повертає сам об'єкт.

+ +

Ви можете використовувати valueOf у своєму коді, щоб перетворити вбудований об'єкт на просту величину. Коли ви створюєте користувацький об'єкт, ви можете перезаписати Object.prototype.valueOf(), щоб викликати свій метод замість початкового метода {{jsxref("Object")}}.

+ +

Перезапис valueOf для користувацьких об'єктів

+ +

Ви можете створити функцію, яка буде викликатися замість стандартного методу valueOf. Ваша функція не повинна приймати аргументів.

+ +

Припустимо, ви маєте об'єкт MyNumberType і бажаєте створити для нього метод valueOf. Наступний код призначає створену користувачем функцію методу valueOf:

+ +
MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };
+ +

З наведеним кодом, в будь-який момент, коли об'єкт типу MyNumberType використовується у контексті, де він має бути представлений простою величиною, JavaScript автоматично викличе функцію, визначену у коді.

+ +

Зазвичай, JavaScript викликає метод об'єкта valueOf, але ви можете викликати його власноруч, наступним чином:

+ +
myNumberType.valueOf()
+ +
+

Заувага: Об'єкти Object у контексті рядка приводяться за допомогою методу {{jsxref("Object.toString", "toString()")}}, це відрізняє їх від об'єктів {{jsxref("String")}}, що перетворюються на рядкові примітиви, використовуючи valueOf. Усі об'єкти мають приведення до рядка виду "[object type]". Але чимало об'єктів не приводяться до числа, булевого значення чи функції.

+
+ +

Приклади

+ +

Використання valueOf

+ +
function MyNumberType(n) {
+    this.number = n;
+}
+
+MyNumberType.prototype.valueOf = function() {
+    return this.number;
+};
+
+var myObj = new MyNumberType(4);
+myObj + 3; // 7
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Object.valueOf")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/values/index.html b/files/uk/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..f3a933dbe8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,104 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Global_Objects/Object/values +tags: + - JavaScript + - Method + - Object + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +
{{JSRef}}
+ +

Метод Object.values() вертає масив значень всіх особистих (не успадкованих) перелічуваних властивостей переданого об'єкта. Порядок властивостей в масиві є тим самим, що й у циклі {{jsxref("Statements/for...in", "for...in")}} (різниця лише в тому, що цикл обходить також і властивості прототипу).

+ +

{{EmbedInteractiveExample("pages/js/object-values.html")}}

+ + + +

Синтаксис

+ +
Object.values(obj)
+ +

Параметри

+ +
+
obj
+
Об'єкт, значення властивостей якого треба отримати.
+
+ +

Повертає

+ +

Масив значень всіх особистих властивостей переданого об'єкта.

+ +

Опис

+ +

Object.values() повертає масив значень властивостей, які належать безпосередньо об'єктові obj. Порядок отриманих властивостей збігається із тим, що його забезпечує перебір через {{jsxref("Statements/for...in", "for...in")}}.

+ +

Приклади

+ +
var obj = { foo: 'bar', baz: 42 };
+console.log(Object.values(obj));  // ['bar', 42]
+
+// подібний до масиву об'єкт
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj));  // ['a', 'b', 'c']
+
+// подібний до масиву об'єкт з випадковим порядком ключів
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(an_obj));  // ['b', 'c', 'a']
+
+// властивість getFoo є неперелічуваною
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 'bar';
+console.log(Object.values(my_obj)); // ['bar']
+
+// аргументи, що не є об'єктами, буде перетворені на об'єкти
+console.log(Object.values('foo'));  // виводить ['f', 'o', 'o']
+ +

Запасний варіант (поліфіл)

+ +

Для старіших середовищ, де метод Object.values() відсутній, можна скористатися запасним варіантом з репозиторіїв tc39/proposal-object-values-entries або es-shims/Object.values.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-object.values', 'Object.values')}}{{Spec2('ES8')}}Первинне визначення.
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.values")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/object/watch/index.html b/files/uk/web/javascript/reference/global_objects/object/watch/index.html new file mode 100644 index 0000000000..9f5536aa6e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/watch/index.html @@ -0,0 +1,153 @@ +--- +title: Object.prototype.watch() +slug: Web/JavaScript/Reference/Global_Objects/Object/watch +tags: + - JavaScript + - Об'єкт + - застарілий + - метод + - налагодження +translation_of: Archive/Web/JavaScript/Object.watch +--- +
{{JSRef}}
+ +
+

Застереження: Не використовуйте watch() та {{jsxref("Object.prototype.unwatch", "unwatch()")}}! Ці два методи були реалізовані лише у Firefox до 58-ї версії, вони застаріли та були прибрані у Firefox 58+. До того ж, використання точок спостереження має серйозний негативний вплив на продуктивність, особливо при використанні на глобальних об'єктах, таких як window. Звісно, ви можете, натомість, використовувати сетери та гетери або проксі.

+
+ +

Метод watch() стежить за присвоєнням властивості значення, та запускає функцію, коли це відбувається.

+ +

Синтаксис

+ +
obj.watch(prop, handler)
+ +

Параметри

+ +
+
prop
+
Ім'я властивості об'єкта, за змінами якої ви бажаєте стежити.
+
handler
+
Функція, яка викликатиметься, коли значення вказаної властивості змінюється.
+
+ +

Значення, що повертається

+ +

{{jsxref("undefined")}}.

+ +

Опис

+ +

Стежить за присвоєнням значень властивості prop у даному об'єкті, викликає handler(prop, oldval, newval), коли присвоюється значення prop, та зберігає повернене значення у цій властивості. Точка спостереження може фільтрувати (або анулювати) присвоєння значення, повертаючи змінене значення newval (або повертаючи значення oldval).

+ +

Якщо ви видалите властивість, для якої встановлено точку спостереження, ця точка спостереження не зникає. Якщо ви пізніше заново створите властивість, точка спостереження продовжить діяти.

+ +

Щоб видалити точку спостереження, скористайтесь методом {{jsxref("Object.unwatch", "unwatch()")}}. За замовчуванням, метод watch успадковується кожним об'єктом, похідним від {{jsxref("Object")}}.

+ +

Налагоджувач JavaScript має функціональність, схожу на ту, що надає даний метод, а також інші налагоджувальні можливості. Інформацію щодо налагоджувача дивіться у статті Venkman.

+ +

У Firefox handler викликається тільки з присвоєнь у скрипті, а не з нативного коду. Для прикладу, window.watch('location', myHandler) не викличе myHandler, якщо користувач натисне на посилання на закладку в активному документі. Однак, window.location += '#myAnchor' викличе myHandler.

+ +
+

Заувага: Виклик watch() на об'єкті для вказаної властивості перезаписує будь-який попередній обробник, призначений цій властивості.

+
+ +

Приклади

+ +

Використання watch та unwatch

+ +
var o = { p: 1 };
+
+o.watch('p', function (id, oldval, newval) {
+  console.log('Значення o.' + id + ' було змінене з ' + oldval + ' на ' + newval);
+  return newval;
+});
+
+o.p = 2;
+o.p = 3;
+delete o.p;
+o.p = 4;
+
+o.unwatch('p');
+o.p = 5;
+
+ +

Цей скрипт виведе наступне:

+ +
Значення o.p було змінене з 1 на 2
+Значення o.p було змінене з 2 на 3
+Значення o.p було змінене з undefined на 4
+
+ +

Використання watch для перевірки властивостей об'єкта

+ +

Ви можете використати watch, щоб перевірити будь-які присвоєння значень властивостям об'єкта. Даний приклад перевіряє, що кожна людина (Person) завжди матиме дійсне ім'я (name) та вік (age) між 0 та 200.

+ +
Person = function(name, age) {
+  this.watch('age', Person.prototype._isValidAssignment);
+  this.watch('name', Person.prototype._isValidAssignment);
+  this.name = name;
+  this.age = age;
+};
+
+Person.prototype.toString = function() {
+  return this.name + ', ' + this.age;
+};
+
+Person.prototype._isValidAssignment = function(id, oldval, newval) {
+  if (id === 'name' && (!newval || newval.length > 30)) {
+    throw new RangeError("помилкове ім'я для: " + this);
+  }
+  if (id === 'age'  && (newval < 0 || newval > 200)) {
+    throw new RangeError('помилковий вік для: ' + this);
+  }
+  return newval;
+}
+
+will = new Person('Вілл', 29);
+console.log(will);   // Вілл, 29
+
+try {
+  will.name = '';
+} catch (e) {
+  console.log(e);
+}
+
+try {
+  will.age = -4;
+} catch (e) {
+  console.log(e);
+}
+
+ +

Цей скрипт виведе наступне:

+ +
Вілл, 29
+RangeError: помилкове ім'я для: Вілл, 29
+RangeError: помилковий вік для: Вілл, 29
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій. Реалізований у JavaScript 1.2.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Object.watch")}}

+
+ +

Примітки щодо сумісності

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/parsefloat/index.html b/files/uk/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..41fe2a7650 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,111 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/parseFloat +tags: + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +
{{jsSidebar("Objects")}}
+ +

Функція parseFloat() розбирає аргумент (перетворивши його спочатку на рядок за потреби) та повертає число з плаваючою крапкою.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}
+ + + +

Синтаксис

+ +
parseFloat(string)
+ +

Параметри

+ +
+
string
+
Значення, яке потрібно розібрати. Якщо цей аргумент не є рядком, то він буде перетворений на рядок за допомогою абстрактної операції ToString. {{glossary("whitespace","Пробільний символ")}} на початку цього аргументу ігнорується.
+
+ +

Значення, що повертається

+ +

Число з плаваючою крапкою з наданого рядка string.

+ +

Або {{jsxref("NaN")}}, коли перший непробільний символ не може бути перетворений на число.

+ +

Опис

+ +

parseFloat є функцією верхнього рівня, а не методом будь-якого з об'єктів.

+ + + +

Використовуйте для розбору рядка також функцію {{jsxref("Число", "Number(значення)")}}, яка перетворює на {{jsxref("NaN")}} аргументи з будь-якими недозволеними символами.

+ +

parseFloat спрацює для нерядкових об'єктів, якщо вони мають метод {{jsxref("Object.toString", "toString")}} або метод {{jsxref("Object.valueOf", "valueOf")}}. Повернене значення буде таким самим, яким було б після виклику parseFloat на результаті цих методів.

+ +

Приклади

+ +

parseFloat, що повертає число

+ +

Наступні приклади повернуть 3.14:

+ +
parseFloat(3.14);
+parseFloat('3.14');
+parseFloat('  3.14  ');
+parseFloat('314e-2');
+parseFloat('0.0314E+2');
+parseFloat('3.14якісь нечислові символи');
+parseFloat({ toString: function() { return "3.14" } });
+
+ +

parseFloat, що вертає NaN

+ +

Наступний приклад поверне NaN:

+ +
parseFloat('FF2');
+
+ +

parseFloat та BigInt

+ +

Обидва наступних приклади повернуть 900719925474099300, втративши точність, оскільки ціле число надто велике, щоб бути представленим як число з плаваючою крапкою:

+ +
parseFloat(900719925474099267n);
+parseFloat('900719925474099267n');
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.parseFloat")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/parseint/index.html b/files/uk/web/javascript/reference/global_objects/parseint/index.html new file mode 100644 index 0000000000..c92f886216 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/parseint/index.html @@ -0,0 +1,215 @@ +--- +title: parseInt() +slug: Web/JavaScript/Reference/Global_Objects/parseInt +tags: + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/parseInt +--- +
{{jsSidebar("Objects")}}
+ +

Функція parseInt() розбирає рядковий аргумент і повертає число з вказаною основою системи числення.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}
+ + + +

Синтаксис

+ +
parseInt(string, radix);
+ +

Параметри

+ +
+
string
+
Значення, яке розбиратиметься. Якщо цей аргумент не є рядком, тоді він буде перетворений на рядок абстрактною операцією ToString. Пробільні символи на початку аргументу ігноруються.
+
radix  {{optional_inline}}
+
Ціле число між 2 і 36, яке вказує основу (в математичних системах числення) значення string. Будьте обережні — воно не дорівнює за замовчуванням 10!
+
Наведений нижче опис поясює більш детально, що відбувається, якщо значення radix не надане.
+
+ +

Повернене значення

+ +

Число, отримане з наданого рядка string.

+ +

Або {{jsxref("NaN")}}, коли

+ + + +

Опис

+ +

Функція parseInt перетворює перший аргумент на рядок, розбирає цей рядок, після чого повертає ціле число або NaN.

+ +

Якщо не NaN, повернене значення буде цілим числом, яке є першим аргументом, прочитаним як число у вказаній системі числення radix. (Наприклад, radix, що дорівнює 10, перетворює перший аргумент на десяткове число, 8 - на вісімкове, 16 на шістнадцяткове, і т. д.)

+ +

Для основ, більших за 10, літери англійського алфавіту позначають цифри, більші за 9. Наприклад, для шістнадцяткових цифр (основа 16) використовуються букви від A до F.

+ +

Якщо метод parseInt зустрічає символ, який не є числом у вказаній системі radix, він ігнорує цей символ та усі наступні символи та повертає ціле число, розібране до цієї позиції. parseInt обрізає числа до цілих значень. Пробільні символи попереду та в кінці є дозволеними.

+ +

Оскільки деякі числа використовують символ e у своєму рядковому представленні (наприклад, 6.022e23 для 6.022 × 1023), використання parseInt для обрізання чисел призведе до неочікуваних результатів при використанні на дуже великих чи дуже малих числах. parseInt не слід використовувати як заміну {{jsxref("Math.floor()")}}.

+ +

Якщо radix дорівнює undefined, 0 або його значення невизначене, JavaScript припускає наступне:

+ +
    +
  1. Якщо вхідний рядок string починається з "0x" або "0X" (нуль, за яким іде мала чи велика літера X), вважається, що radix дорівнює 16, а решта рядка розбирається як шістнадцяткове число.
  2. +
  3. Якщо вхідний рядок string починається з "0" (нуль), вважається, що radix дорівнює 8 (вісімкова система) або 10 (десяткова). Яку саме основу буде обрано, залежить від реалізації. ECMAScript 5 пояснює, що має використовуватись 10 (десяткова система), але ще не усі переглядачі це підтримують. З цієї причини завжди вказуйте radix при використанні parseInt.
  4. +
  5. Якщо вхідний рядок string починається з будь-якого іншого значення, основа дорівнює 10 (десяткова).
  6. +
+ +

Якщо перша літера не може бути перетворена на число, parseInt вертає NaN.

+ +

Для арифметичних цілей, значення NaN не є числом в жодній системі числення. Ви можете викликати функцію {{jsxref("isNaN")}}, щоб визначити, чи результат parseInt дорівнює NaN. Якщо NaN передається у арифметичні операції, результатом операції також буде NaN.

+ +

Щоб перетворити число на його рядковий літерал у певній системі числення, використовуйте вашеЧисло.toString(radix).

+ +
+

Застереження щодо {{jsxref("BigInt")}}parseInt перетворює {{jsxref("BigInt")}} на {{jsxref("Число", "Number")}} та в процесі втрачає точність, оскільки нечислові значення в кінці аргументу, в тому числі "n", відкидаються.

+
+ +

Вісімкові інтерпретації без значення radix

+ +

Хоча це не схвалюється у ECMAScript 3 та заборонене у ECMAScript 5, багато реалізацій інтерпретують числові рядки, що починаються з 0, як вісімкові. Наступне може перетворитись на вісімковий результат, а може й на десятковий. Завжди вказуйте radix, щоб запобігти цій ненадійній поведінці.

+ +
parseInt('0e0')  // 0
+parseInt('08')   // 0, бо '8' не вісімкова цифра.
+ +

Специфікація ECMAScript 5 функції parseInt більше не дозволяє реалізаціям сприймати рядки, що починаються з символу 0, як вісімкові значення.

+ +

ECMAScript 5 зазначає:

+ +
+

Функція parseInt створює цілочисельне значення, продиктоване інтерпретацією вмісту рядкового аргументу у відповідності до вказаної основи системи числення. Пробільний символ на початку рядка ігнорується. Якщо основа дорівнює undefined або 0, вона вважається рівною 10, окрім випадків, коли число починається з пар символів 0x або 0X, в такому випадку основа вважається рівною 16.

+
+ +

Це відрізняється від ECMAScript 3, де вісімкова інтерпретація просто не схвалюється (але дозволена).

+ +

У багатьох реалізаціях ця поведінка не адаптована станом на 2013 рік. І, оскільки старші веб-переглядачі мають підтримуватись, завжди вказуйте значення radix.

+ +

Більш строга функція розбору

+ +

Іноді корисно мати більш строгий спросіб розбору цілих чисел.

+ +

Регулярні вирази можуть стати в пригоді:

+ +
function filterInt(value) {
+  if (/^[-+]?(\d+|Infinity)$/.test(value)) {
+    return Number(value)
+  } else {
+    return NaN
+  }
+}
+
+console.log(filterInt('421'))                // 421
+console.log(filterInt('-421'))               // -421
+console.log(filterInt('+421'))               // 421
+console.log(filterInt('Infinity'))           // Infinity
+console.log(filterInt('421e+0'))             // NaN
+console.log(filterInt('421hop'))             // NaN
+console.log(filterInt('hop1.61803398875'))   // NaN
+console.log(filterInt('1.61803398875'))      // NaN
+ +

Приклади

+ +

Використання parseInt

+ +

Усі наступні приклади повертають 15:

+ +
parseInt('0xF', 16)
+parseInt('F', 16)
+parseInt('17', 8)
+parseInt(021, 8)
+parseInt('015', 10)   // але `parseInt(015, 10)` поверне 13
+parseInt(15.99, 10)
+parseInt('15,123', 10)
+parseInt('FXX123', 16)
+parseInt('1111', 2)
+parseInt('15 * 3', 10)
+parseInt('15e2', 10)
+parseInt('15px', 10)
+parseInt('12', 13)
+
+ +

Усі наступні приклади повертають NaN:

+ +
parseInt('Привіт', 8) // Зовсім не число
+parseInt('546', 2)    // Числа, інші, ніж 0 чи 1, недозволені у двійковій системі
+
+ +

Усі наступні приклади повертають -15:

+ +
parseInt('-F', 16)
+parseInt('-0F', 16)
+parseInt('-0XF', 16)
+parseInt(-15.1, 10)
+parseInt('-17', 8)
+parseInt('-15', 10)
+parseInt('-1111', 2)
+parseInt('-15e1', 10)
+parseInt('-12', 13)
+
+ +

Усі наступні приклади повертають 4:

+ +
parseInt(4.7, 10)
+parseInt(4.7 * 1e22, 10) // Дуже велике число стає 4
+parseInt(0.00000000000434, 10) // Дуже маленьке число стає 4
+
+ +

Якщо число більше за 1e+21 (включно) або менше за 1e-7 (включно), метод поверне 1. (при використанні основи 10).

+ +
parseInt(0.0000001,10);
+parseInt(0.000000123,10);
+parseInt(1e-7,10);
+parseInt(1000000000000000000000,10);
+parseInt(123000000000000000000000,10);
+parseInt(1e+21,10);
+ +

Наступний приклад повертає 224:

+ +
parseInt('0e0', 16)
+
+ +

Значення {{jsxref("BigInt")}} втрачають точність:

+ +
parseInt(900719925474099267n)
+// 900719925474099300
+ +

parseInt не працює з числовими роздільниками:

+ +
parseInt('123_456');
+// 123
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.parseInt")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/all/index.html b/files/uk/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..156b5f499f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,232 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +
{{JSRef}}
+ +

Метод Promise.all() повертає єдиний {{jsxref("Promise","проміс")}}, який виконується, коли усі проміси, передані у вигляді ітерабельного об'єкта, були виконані, або коли ітерабельний об'єкт не містить жодного проміса. Він відхиляється з причиною першого відхиленого проміса.

+ +

Зазвичай використовується після того, як були запущені асинхронні задачі, що виконуються конкурентно, та були створені проміси для їхніх результатів, щоб мати змогу зачекати, доки усі задачі не будуть виконані.

+ +
{{EmbedInteractiveExample("pages/js/promise-all.html")}}
+ + + +

Синтаксис

+ +
Promise.all(iterable);
+ +

Параметри

+ +
+
iterable
+
Ітерабельний об'єкт, такий як {{jsxref("Array")}}.
+
+ +

Значення, що повертається

+ + + +

Опис

+ +

Цей метод може бути корисним для збирання результатів множини промісів.

+ +

Виконання

+ +

Повернений проміс виконується з масивом, що містить усі значення ітерабельного об'єкта, переданого в якості аргумента (також значення, що не є промісами).

+ + + +

Відхилення

+ +

Якщо будь-який з переданих промісів відхиляється, Promise.all асинхронно відхиляється зі значенням відхиленого проміса, незалежно від того, чи були вирішені інші проміси.

+ +

Приклади

+ +

Використання Promise.all

+ +

Promise.all чекає на усі виконання (або на перше відхилення).

+ +
var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve("foo");
+  }, 100);
+});
+
+Promise.all([p1, p2, p3]).then(values => {
+  console.log(values); // [3, 1337, "foo"]
+});
+ +

Якщо ітерабельний об'єкт містить значення, що не є промісами, вони будуть проігноровані, але все одно міститимуться у поверненому масиві проміса (якщо проміс виконається):

+ +
// рахуватиметься, ніби передано порожній ітерабельний об'єкт, отже, він виконається
+var p = Promise.all([1,2,3]);
+// рахуватиметься, ніби переданий ітерабельний об'єкт містить лише вирішений проміс зі значенням "444", отже, він виконається
+var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
+// рахуватиметься, ніби переданий ітерабельний об'єкт містить лише відхилений проміс зі значенням "555", отже, він буде відхилений
+var p3 = Promise.all([1,2,3, Promise.reject(555)]);
+
+// використовуючи setTimeout, ми можемо виконати код після того, як стек стане порожнім
+setTimeout(function() {
+    console.log(p);
+    console.log(p2);
+    console.log(p3);
+});
+
+// виводить
+// Promise { <state>: "fulfilled", <value>: Array[3] }
+// Promise { <state>: "fulfilled", <value>: Array[4] }
+// Promise { <state>: "rejected", <reason>: 555 }
+ +

Асинхронність або синхронність Promise.all

+ +

Наступний приклад демонструє асинхронність (або синхронність, якщо передано порожній ітерабельний об'єктPromise.all:

+ +
// ми передаємо в якості аргумента масив вже вирішених промісів,
+// щоб запустити Promise.all якомога швидше
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+// негайно виводимо значення p
+console.log(p);
+
+// використовуючи setTimeout, ми можемо виконати код після того, як стек стане порожнім
+setTimeout(function() {
+    console.log('стек тепер порожній');
+    console.log(p);
+});
+
+// виводить, в порядку:
+// Promise { <state>: "pending" }
+// стек тепер порожній
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+
+ +

Те саме відбувається, якщо Promise.all відхиляється:

+ +
var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function() {
+    console.log('стек тепер порожній');
+    console.log(p);
+});
+
+// виводить
+// Promise { <state>: "pending" }
+// стек тепер порожній
+// Promise { <state>: "rejected", <reason>: 44 }
+
+ +

Promise.all вирішується синхронно лише тоді, коли переданий ітерабельний об'єкт є порожнім:

+ +
var p = Promise.all([]); // буде негайно вирішений
+// значення, що не є промісами, будуть проігноровані, але обчислення відбуватиметься асинхронно
+var p2 = Promise.all([1337, "привіт"]);
+console.log(p);
+console.log(p2)
+setTimeout(function() {
+    console.log('стек тепер порожній');
+    console.log(p2);
+});
+
+// виводить
+// Promise { <state>: "fulfilled", <value>: Array[0] }
+// Promise { <state>: "pending" }
+// стек тепер порожній
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+ +

Швидке відхилення у Promise.all

+ +

Promise.all відхиляється, якщо будь-який з його елементів було відхилено. Наприклад, якщо ви передаєте чотири проміси, які вирішуються після затримки, та один проміс, який негайно відхиляється, тоді Promise.all буде негайно відхилено.

+ +
var p1 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('один'), 1000);
+});
+var p2 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('два'), 2000);
+});
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('три'), 3000);
+});
+var p4 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('чотири'), 4000);
+});
+var p5 = new Promise((resolve, reject) => {
+  reject(new Error('відхилено'));
+});
+
+
+// Використовуємо .catch:
+Promise.all([p1, p2, p3, p4, p5])
+.then(values => {
+  console.log(values);
+})
+.catch(error => {
+  console.error(error.message)
+});
+
+//Виведе:
+//"відхилено"
+
+
+ +

Цю поведінку можливо змінити, обробивши можливі відхилення:

+ +
var p1 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('p1_відкладене_вирішення'), 1000);
+});
+
+var p2 = new Promise((resolve, reject) => {
+  reject(new Error('p2_негайне_відхилення'));
+});
+
+Promise.all([
+  p1.catch(error => { return error }),
+  p2.catch(error => { return error }),
+]).then(values => {
+  console.log(values[0]) // "p1_відкладене_вирішення"
+  console.error(values[1]) // "Error: p2_негайне_відхилення"
+})
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.all")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html new file mode 100644 index 0000000000..739dafbb96 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html @@ -0,0 +1,67 @@ +--- +title: Promise.allSettled() +slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +tags: + - JavaScript + - Promise + - allSettled + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +--- +

{{JSRef}}

+ +

Метод Promise.allSettled() повертає проміс, який вирішується після того, як усі надані проміси були або вирішені, або відхилені, з масивом об'єктів, що містять результат кожного проміса.

+ +
{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}
+ +

Синтаксис

+ +
Promise.allSettled(iterable);
+ +

Параметри

+ +
+
iterable
+
Ітерабельний об'єкт, такий, як {{jsxref("Array")}}, кожен елемент якого є об'єктом Promise.
+
+ +

Значення, що повертається

+ +

{{jsxref("Promise")}} у стані очікування, який буде асинхронно виконаний, як тільки кожен проміс у вказаному наборі промісів буде завершений, або успішним виконанням, або будучи відхиленим. В цей момент обробнику поверненого проміса передається масив, що містить результат для кожного проміса з початкового набору промісів.

+ +

У кожного об'єкта результату присутній рядок status (статус). Якщо статус дорівнює fulfilled (виконаний), тоді присутній параметр value (значення). Якщо статус дорівнює rejected (відхилений), тоді присутній параметр reason (причина). Значення (або причина) відображає значення, з яким кожен проміс був виконаний (або відхилений).

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
Promise.allSettled() (TC39 Stage 4 Draft)
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.allSettled")}}

+ +

Хід реалізації

+ +

Наведена таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у Test262, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.

+ +
{{EmbedTest262ReportResultsTable("Promise.allSettled")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/any/index.html b/files/uk/web/javascript/reference/global_objects/promise/any/index.html new file mode 100644 index 0000000000..3e450db558 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/any/index.html @@ -0,0 +1,86 @@ +--- +title: Promise.any() +slug: Web/JavaScript/Reference/Global_Objects/Promise/any +tags: + - JavaScript + - Promise + - Експериментальний + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any +--- +
{{JSRef}}
+ +

Promise.any() приймає ітерабельний об'єкт з об'єктами {{JSxRef("Promise")}} та, як тільки один з промісів виконується, вертає єдиний проміс, який вирішується зі значенням цього проміса. Якщо жодний проміс не виконався (якщо усі надані проміси були відхилені), тоді повернений проміс буде відхилено з об'єктом, який досі є предметом обговорення: або масив причин відхилення, або {{JSxRef("AggregateError")}}, новий підклас {{JSxRef("Error")}}, який поєднує окремі помилки. Найголовніше, цей метод є протилежністю методу {{JSxRef("Promise.all()")}}.

+ +
+

Застереження! Метод Promise.any() є експериментальним та не повністю підтримується усіма переглядачами. Він наразі на стадії TC39 Candidate stage (стадія 3).

+
+ +

Синтаксис

+ +
Promise.any(iterable);
+ +

Параметри

+ +
+
iterable
+
Ітерабельний об'єкт, такий як {{JSxRef("Array")}}.
+
+ +

Значення, що повертається

+ + + +

Опис

+ +

Цей метод корисний для повернення першого проміса, який виконується. Він завершується після виконання проміса, тому не очікує на завершення інших промісів, як тільки його знаходить. На відміну від {{JSxRef("Promise.all()")}}, який вертає масив вирішених значень, ми отримуємо лише одне вирішене значення (за умови, що принаймні один проміс вирішується). Це може бути вигідно, якщо нам потрібно, щоб лише один проміс було вирішено, і нам байдуже, який саме. Також, на відміну від {{JSxRef("Promise.race()")}}, який вертає перше встановлене значення, цей метод вертає перше вирішене значення. Цей метод ігноруватиме усі відхилені проміси до першого вирішеного проміса.

+ +

Виконання

+ +

Якщо будь-який з переданих промісів виконається, повернений проміс асинхронно виконується зі значенням виконаного проміса, незалежно від того, чи були інші проміси виконані чи відхилені.

+ + + +

Відхилення

+ +

Якщо усі передані проміси було відхилено, Promise.any асинхронно відхиляється з одним з двох варіантів (щодо яких ще не дійшли згоди): 

+ + + +

Специфікації

+ + + + + + + + + + +
Специфікація
ESNext Promise.any Proposal
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.any")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/catch/index.html b/files/uk/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..7e84771513 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,189 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +
{{JSRef}}
+ +

Метод catch() вертає {{jsxref("Promise","проміс")}} та має справу лише з відхиленнями. Він поводиться так само, як виклик {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (насправді, obj.catch(onRejected) здійснює внутрішній виклик obj.then(undefined, onRejected)). Це означає, що ви маєте надати функцію onRejected, навіть якщо хочете отримати повернене значення undefined - наприклад, obj.catch(() => {}).

+ +
{{EmbedInteractiveExample("pages/js/promise-catch.html")}}
+ + + +

Синтаксис

+ +
p.catch(onRejected);
+
+p.catch(function(reason) {
+   // відхилення
+});
+
+ +

Параметри

+ +
+
onRejected
+
{{jsxref("Function","Функція")}}, що викликається, коли об'єкт Promise відхилено. Ця функція має один аргумент: +
+
reason
+
Причина відхилення.
+
+ Проміс, повернений методом catch(), відхиляється, якщо onRejected викидає помилку або повертає проміс, що сам є відхиленим; інакше, він вирішується.
+
+ +

Значення, що повертається

+ +

Здійснює внутрішній виклик Promise.prototype.then на об'єкті, на якому був викликаний, передаючи параметри undefined та отриманий обробник onRejected. Повертає значення цього виклику, тобто, {{jsxref("Promise")}}.

+ +
+

Зауважте, що наведені нижче приклади викидають екземпляри Error. Це вважається гарною практикою у порівнянні з викиданням рядків: Інакше та частина, що здійснює перехоплення, була б змушена робити перевірки, щоб дізнатись, чи є аргумент рядком, чи помилкою, і ви могли б втратити цінну інформацію, таку як траси стеків.

+
+ +

Демонстрація внутрішнього виклику:

+ +
// заміщуємо початковий Promise.prototype.then/catch, щоб додати трохи логів
+(function(Promise){
+    var originalThen = Promise.prototype.then;
+    var originalCatch = Promise.prototype.catch;
+
+    Promise.prototype.then = function(){
+        console.log('> > > > > > викликано .then на %o з аргументами: %o', this, arguments);
+        return originalThen.apply(this, arguments);
+    };
+    Promise.prototype.catch = function(){
+        console.error('> > > > > > викликано .catch на %o з аргументами: %o', this, arguments);
+        return originalCatch.apply(this, arguments);
+    };
+
+})(this.Promise);
+
+
+
+// викликаємо catch на вже вирішеному промісі
+Promise.resolve().catch(function XXX(){});
+
+// виводить:
+// > > > > > > викликано .catch на Promise{} з аргументами: Arguments{1} [0: function XXX()]
+// > > > > > > викликано .then на Promise{} з аргументами: Arguments{2} [0: undefined, 1: function XXX()]
+
+ +

Опис

+ +

Метод catch використовується для обробки помилок у композиції промісів. Оскільки він вертає {{jsxref("Promise","проміс")}}, його можна додавати в ланцюги так само, як метод {{jsxref("Promise.then", "then()")}}.

+ +

Приклади

+ +

Використання та ланцюгування метода catch

+ +
var p1 = new Promise(function(resolve, reject) {
+  resolve('Успіх!');
+});
+
+p1.then(function(value) {
+  console.log(value); // "Успіх!"
+  throw new Error('о, ні!');
+}).catch(function(e) {
+  console.error(e.message); // "о, ні!"
+}).then(function(){
+  console.log('після catch ланцюг відновлено');
+}, function () {
+  console.log('Не запуститься через catch');
+});
+
+// Наступний код поводиться так само
+p1.then(function(value) {
+  console.log(value); // "Успіх!"
+  return Promise.reject('о, ні!');
+}).catch(function(e) {
+  console.error(e); // "о, ні!"
+}).then(function(){
+  console.log('після catch ланцюг відновлено');
+}, function () {
+  console.log('Не запуститься через catch');
+});
+
+ +

Підводні камені при викиданні помилок

+ +
// Викидання помилок викличе метод catch у більшості випадків
+var p1 = new Promise(function(resolve, reject) {
+  throw new Error('Ой-ой!');
+});
+
+p1.catch(function(e) {
+  console.error(e); // "Ой-ой!"
+});
+
+// Помилки, викинуті всередині асинхронних функцій, поводитимуться, як неперехоплені
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw new Error('Неперехоплений виняток!');
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.error(e); // Це ніколи не виконається
+});
+
+// Помилки, викинуті після виклику resolve, глушаться
+var p3 = new Promise(function(resolve, reject) {
+  resolve();
+  throw new Error('Заглушений виняток!');
+});
+
+p3.catch(function(e) {
+   console.error(e); // Це ніколи не виконається
+});
+ +

Якщо він вирішений

+ +
//Створюємо проміс, що не викличе onReject
+var p1 = Promise.resolve("виклик наступного");
+
+var p2 = p1.catch(function (reason) {
+    //Це ніколи не буде викликано
+    console.error("перехоплено p1!");
+    console.error(reason);
+});
+
+p2.then(function (value) {
+    console.log("onFulfilled наступного проміса"); /* onFulfilled наступного проміса */
+    console.log(value); /* виклик наступного */
+}, function (reason) {
+    console.log("onRejected наступного проміса");
+    console.log(reason);
+});
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.catch")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/finally/index.html b/files/uk/web/javascript/reference/global_objects/promise/finally/index.html new file mode 100644 index 0000000000..f67c7fb1e3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/finally/index.html @@ -0,0 +1,103 @@ +--- +title: Promise.prototype.finally() +slug: Web/JavaScript/Reference/Global_Objects/Promise/finally +tags: + - JavaScript + - Promise + - finally + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally +--- +
{{JSRef}}
+ +

Метод finally() вертає {{jsxref("Promise")}}. Коли проміс встановлено, тобто, або виконано, або відхилено, виконується вказана функція зворотного виклику. Це надає можливість виконати код незалежно від того, чи був проміс успішно виконаний, чи відхилений, як тільки проміс було оброблено.

+ +

Це допомагає уникати дублювання коду у обробниках проміса {{jsxref("Promise.then", "then()")}} та {{jsxref("Promise.catch", "catch()")}}.

+ +

Синтаксис

+ +
p.finally(onFinally);
+
+p.finally(function() {
+   // встановлений (виконаний або відхилений)
+});
+
+ +

Параметри

+ +
+
onFinally
+
{{jsxref("Function", "Функція")}}, що викликається, коли Promise встановлений.
+
+ +

Значення, що повертається

+ +

Вертає {{jsxref("Promise","проміс")}}, чиєму обробнику finally присвоєна вказана функція onFinally.

+ +

Опис

+ +

Метод finally() може бути корисним, якщо ви хочете виконати певну обробку або прибирання, як тільки проміс встановлено, незалежно від результату.

+ +

Метод finally() дуже схожий на виклик .then(onFinally, onFinally), але є пара відмінностей:

+ + + +
+

Заувага: throw (або повернення відхиленого проміса) у зворотному виклику finally відхилить новий проміс з причиною відхилення, вказаною у виклику throw.

+
+ +

Приклади

+ +
let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType && contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("От халепа, немає JSON!");
+  })
+  .then(function(json) { /* обробити JSON далі */ })
+  .catch(function(error) { console.error(error); /* цей рядок може викинути помилку, наприклад, якщо console = {} */ })
+  .finally(function() { isLoading = false; });
+
+
+ + + +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.finally")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/index.html b/files/uk/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..1f18c8bd76 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,232 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript 2015 + - JavaScript + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +
{{JSRef}}
+ +

Об'єкт Promise відображає остаточне завершення (або неуспіх) асинхронної операції та значення, яке вона повертає.

+ +

Щоб дізнатись, як працюють проміси та як їх можна використовувати, радимо вам спочатку прочитати статтю Використання промісів.

+ +

Опис

+ +

Promise - це проксі для значення, яке може бути невідомим на момент створення проміса. Це дозволяє зв'язувати обробники з кінцевим успішним значенням чи причиною неуспіху асинхронних дій. Таким чином, асинхронні методи повертають значення, як синхронні методи: замість того, щоб негайно повернути кінцеве значення, асинхронний метод повертає проміс, щоб надати значення в певний момент у майбутньому.

+ +

Об'єкт Promise може знаходитись в одному з цих станів:

+ + + +

Проміс у стані очікування може стати або виконаним (fulfilled) з певним значенням, або відхиленим (rejected) з причиною відхилення (помилкою). Коли щось із цього відбувається, викликаються відповідні обробники, що ставляться в чергу методом об'єкта then. (Якщо проміс вже був виконаний чи відхилений ще до моменту приєднання відповідного обробника, то обробник буде викликаний, таким чином не відбувається "стану гонки" між завершенням асинхронної операції та приєднанням її обробників)

+ +

Оскільки методи {{jsxref("Promise.then", "Promise.prototype.then()")}} та {{jsxref("Promise.catch", "Promise.prototype.catch()")}} повертають проміси, їх можна з'єднувати в ланцюжки.

+ +

+ +
+

Не варто плутати з: Декілька інших мов мають механізми лінивих обчислень та відкладених розрахунків, які також називаються "promises" - наприклад, Scheme. Проміси у JavaScript відображають процеси, які вже відбуваються і які можуть бути з'єднані в ланцюги з функціями зворотного виклику. Якщо вам потрібне ліниве обчислення виразу, розгляньте стрілкові функції без аргументів: f = () => вираз для створення лінивого виразу, та f() для обчислення.

+
+ +
+

Заувага: Проміс називають встановленим (settled), якщо він або виконаний, або відхилений, але не знаходиться у стані очікування. Ви також почуєте термін вирішений (resolved) щодо промісів - він означає, що проміс встановлений, або ж "зафіксований", щоб відповідати стану іншого проміса. Стаття States and Fates містить більше подробиць щодо термінології промісів.

+
+ +

Конструктор

+ +
+
Promise()
+
Конструктор переважно використовується для загортання функцій, які самі не підтримують проміси.
+
+ +

Властивості

+ +
+
Promise.length
+
Значення довжини, завжди дорівнює 1 (кількість аргументів конструктора).
+
Promise.prototype
+
Прототип для конструктора Promise.
+
+ +

Методи

+ +
+
{{jsxref("Promise.all", "Promise.all(iterable)")}}
+
Чекає, доки усі проміси не будуть вирішені, або поки будь-який з промісів не буде відхилений.
+
Якщо повернений проміс вирішується, він вирішується із сукупним масивом значень вирішених промісів, у тому ж порядку, в якому вони визначені в ітерабельному об'єкті промісів.
+
В разі відхилення, він відхиляється з причиною з першого відхиленого проміса у ітерабельному об'єкті.
+
{{JSxRef("Promise.allSettled", "Promise.allSettled(iterable)")}}
+
Чекає, доки усі проміси не будуть встановлені (кожен має бути або вирішений, або відхилений).
+
Повертає проміс, який вирішується після того, як усі надані проміси були або вирішені, або відхилені, з масивом об'єктів, які описують результат кожного проміса.
+
{{jsxref("Promise.race", "Promise.race(iterable)")}}
+
Чекає, доки будь-який з промісів не буде або вирішений, або відхилений.
+
Якщо повернений проміс вирішений, він вирішується зі значенням першого проміса з ітерабельного об'єкта, який був вирішений.
+
Якщо він відхилений, він відхиляється з причиною першого відхиленого проміса.
+
+ +
+
{{jsxref("Promise.відхилено", "Promise.reject(reason)")}}
+
Повертає новий об'єкт Promise, відхилений з наданою причиною.
+
+ +
+
{{jsxref("Promise.resolve", "Promise.resolve(value)")}}
+
Повертає новий об'єкт Promise, який вирішується з наданим значенням. Якщо значенням є промісоподібний об'єкт (такий, що має метод then), то повернений проміс буде його "дотримуватись", приймаючи його кінцевий стан; у іншому випадку повернений проміс буде виконаний з наданим значенням.
+
Загалом, якщо ви не знаєте, є значення промісом чи ні, використайте {{JSxRef("Promise.resolve", "Promise.resolve(value)")}} та працюйте з поверненим значенням як з промісом.
+
+ +

Прототип Promise

+ +

Властивості

+ +
+
Promise.prototype.constructor
+
Вертає функцію, яка створила прототип екземпляра. Це за замовчуванням функція {{jsxref("Promise")}}.
+
+ +

Методи

+ +
+
{{jsxref("Promise.prototype.catch()")}}
+
Додає до проміса функцію зворотного виклику для обробки відхилення та вертає новий проміс, що вирішується з поверненим значенням цієї функції, коли вона викликається, або з початковим значенням виконання, якщо проміс, навпаки, виконається.
+
{{jsxref("Promise.prototype.then()")}}
+
Додає до проміса обробники виконання та відхилення та вертає новий проміс, що вирішується з поверненим значенням обробника, який викликався, або з початковим встановленим значенням, якщо проміс не оброблявся (тобто, якщо відповідний обробник onFulfilled чи onRejected не є функцією).
+
{{jsxref("Promise.prototype.finally()")}}
+
Додає до проміса обробник та вертає новий проміс, який вирішується, коли вирішується початковий проміс. Обробник викликається, коли проміс встановлений, тобто, або виконаний, або відхилений.
+
+ +

Приклади

+ +

Базовий приклад

+ +
let myFirstPromise = new Promise((resolve, reject) => {
+  // Викликаємо resolve(...), коли те, що ми робили асинхронно, успішно виконалось, і reject(...), якщо неуспішно.
+  // В цьому прикладі ми використовуємо setTimeout(...) для симуляції асинхронного коду.
+  // В житті ви, ймовірно, використовуватиме щось на кшталт XHR або HTML5 API.
+  setTimeout( function() {
+    resolve("Успіх!")  // Є! Все пройшло добре!
+  }, 250)
+})
+
+myFirstPromise.then((successMessage) => {
+  // successMessage - це те, що ми передаємо у наведену вище функцію resolve(...).
+  // Це не обов'язково має бути рядок, але, якщо це повідомлення про успіх, то, мабуть, це буде він.
+  console.log("Є! " + successMessage)
+});
+ +

Ускладнений приклад

+ + + +

Цей маленький приклад демонструє механізм об'єкта Promise. Метод testPromise() викликається кожний раз, коли натискається кнопка <button>. Він створює проміс, який буде виконаний з використанням window.setTimeout() з лічильником проміса (число, що стартує від 1) кожні 1-3 секунди, у випадковому порядку. Конструктор Promise() використовується для створення проміса.

+ +

Виконання проміса логується просто, виконанням зворотного виклику через {{jsxref("Promise.prototype.then()","p1.then()")}}. Кілька логів демонструють, як синхронна частина методу відокремлюється від асинхронного завершення проміса.

+ +
'use strict';
+var promiseCount = 0;
+
+function testPromise() {
+    var thisPromiseCount = ++promiseCount;
+
+    var log = document.getElementById('log');
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Запуск (<small>Синхронний код запущено</small>)<br/>');
+
+    // Створюємо новий проміс: ми передаємо лічильник цього проміса, починаючи з 1 (після очікування 3с)
+    var p1 = new Promise(
+        // Функція вирішення викликається з можливістю вирішити або
+        // відхилити проміс
+        function(resolve, reject) {
+            log.insertAdjacentHTML('beforeend', thisPromiseCount +
+                ') Запуск проміса (<small>Асинхронний код запущено</small>)<br/>');
+            // Це лише приклад для створення асинхронності
+            window.setTimeout(
+                function() {
+                    // Ми виконуємо проміс!
+                    resolve(thisPromiseCount);
+                }, Math.random() * 2000 + 1000);
+        }
+    );
+
+    // Визначаємо, що робити, коли проміс вирішено/виконано, викликом then(),
+    // а метод catch() визначає, що робити, якщо проміс відхилено.
+    p1.then(
+        // Залогувати значення виконання
+        function(val) {
+            log.insertAdjacentHTML('beforeend', val +
+                ') Проміс виконано (<small>Асинхронний код завершений</small>)<br/>');
+        })
+    .catch(
+        // Залогувати причину відхилення
+        function(reason) {
+            console.log('Обробити тут відхилений проміс ('+reason+').');
+        });
+
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Проміс створено (<small>Синхронний код завершений</small>)<br/>');
+}
+
+ + + +

Цей приклад починається натисканням кнопки. Вам потрібен переглядач, що підтримує об'єкти Promise. Натиснувши кнопку кілька разів за короткий відрізок часу, ви навіть побачите, як різні проміси виконуються один після іншого.

+ +

{{EmbedLiveSample("Ускладнений_приклад", "500", "200")}}

+ +

Завантаження зображення за допомогою XHR

+ +

Інший простий приклад використання об'єктів Promise та XMLHttpRequest - для завантаження зображення - доступний у репозиторії promise-test на MDN GitHub. Ви також можете побачити його в дії. Кожний крок супроводжується коментарями та дозволяє відслідкувати архітектуру Promise та XHR.

+ +

Специфікації

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/promise/index.html b/files/uk/web/javascript/reference/global_objects/promise/promise/index.html new file mode 100644 index 0000000000..574121ebba --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/promise/index.html @@ -0,0 +1,77 @@ +--- +title: Конструктор Promise() +slug: Web/JavaScript/Reference/Global_Objects/Promise/Promise +tags: + - JavaScript + - Promise + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/Promise +--- +
{{JSRef}}
+ +

Конструктор Promise використовується переважно для того, щоб загортати функції, які не підтримують проміси початково.

+ +
{{EmbedInteractiveExample("pages/js/promise-constructor.html", "taller")}}
+ + + +

Синтаксис

+ +
new Promise(executor);
+ +

Параметри

+ +
+
executor
+
Функція, яка передається з аргументами resolve та reject. Функція executor (виконавець) виконується негайно, реалізацією проміса, передаючи функції resolve та reject (виконавець викликається ще до того, як конструктор Promise повертає створений об'єкт). Функції resolve та reject, коли вони викликаються, відповідно, вирішують або відхиляють проміс. Виконавець, зазвичай, ініціює якісь асинхронні дії, і, як тільки вони завершуються, викликає або функцію resolve, щоб вирішити проміс, або відхиляє його в разі виникнення помилки. Якщо функція-виконавець викинула помилку, проміс відхиляється. Повернене значення виконавця ігнорується.
+
+ +

Приклади

+ +

Об'єкт Promise створюється за допомогою ключового слова new та свого конструктора. Цей конструктор приймає своїм аргументом функцію, що називається "функцією-виконавцем". Ця функція має приймати дві функції в якості параметрів. Перша з цих функцій (resolve) викликається, коли асинхронна задача завершується успішно та повертає результат задачі. Друга (reject) викликається, коли задача завершується неуспішно, та повертає причину невдачі, яка, зазвичай, є об'єктом помилки.

+ +
const myFirstPromise = new Promise((resolve, reject) => {
+  // зробити щось асинхронне, що зрештою викличе або:
+  //
+  //   resolve(someValue)        // виконаний
+  // або
+  //   reject("причина невдачі")  // відхилений
+});
+
+ +

Щоб надати функцію з функціональністю промісу, просто зробіть, щоб вона повертала проміс:

+ +
function myAsyncFunction(url) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open("GET", url)
+    xhr.onload = () => resolve(xhr.responseText)
+    xhr.onerror = () => reject(xhr.statusText)
+    xhr.send()
+  });
+}
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise-constructor', 'Promise constructor')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.Promise")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html b/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html new file mode 100644 index 0000000000..e558cdf02c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html @@ -0,0 +1,69 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +tags: + - JavaScript + - Promise + - ДжаваСкріпт + - Проміс +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +
{{JSRef}}
+ +

Параметр Promise.prototype відображає прототип для конструктора {{jsxref("Promise")}} constructor.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Опис

+ +

Екземпляри {{jsxref("Promise")}} успадковуються від {{jsxref("Promise.prototype")}}. Ви можете використовувати прототип конструктора, щоб добавляти параметри або методи до всіх екземплярів Promise.

+ +

Параметри

+ +
+
Promise.prototype.constructor
+
Повертає функцію, яка створила прототип екземпляра. Це є функція {{jsxref("Promise")}} по замовчуванню.
+
+ +

Методи

+ +
+
{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}
+
Добавляє колбек обробник відхилення проміса, і повертає новий проміс, який вирішується значенням, яке повертається з функції колбеку, якщо вона була викликана, або його початковий результат виконання, якщо даний проміс був виконаний.
+
{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}
+
Добавляє до проміса функції колбеки для випадків, коли проміс був виконаний (onFulfilled) і відхилений (onRejected) і повертає новий проміс, який вирішується значенням, яке було повернуто з onFulfilled функції колбеку, або з початковим значенням, яке було вирішено, коли даний проміс не був оброблений (тобто коли обробники onFulfilled або onRejected не є функцією).
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript/promise","Promise.prototype")}}

+ +

Дивитися також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/race/index.html b/files/uk/web/javascript/reference/global_objects/promise/race/index.html new file mode 100644 index 0000000000..c810db2cc0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/race/index.html @@ -0,0 +1,177 @@ +--- +title: Promise.race() +slug: Web/JavaScript/Reference/Global_Objects/Promise/race +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race +--- +
{{JSRef}}
+ +

Метод Promise.race() повертає проміс, який виконується чи відхиляється, як тільки один з промісів ітерабельного об'єкта буде виконаний чи відхилений, зі значеням або причиною з цього проміса.

+ +
{{EmbedInteractiveExample("pages/js/promise-race.html")}}
+ + + +

Синтаксис

+ +
Promise.race(iterable);
+ +

Параметри

+ +
+
iterable
+
Ітерабельний об'єкт, наприклад, {{jsxref("Array")}}. Дивіться ітерабельний об'єкт.
+
+ +

Значення, що повертається

+ +

Об'єкт {{jsxref("Promise")}} у стані очікування, який асинхронно видає значення першого проміса з наданого ітерабельного об'єкта, що виконується або відхиляється.

+ +

Опис

+ +

Функція race повертає об'єкт Promise, який встановлюється таким самим чином (і отримує таке ж значення), як і перший встановлений проміс ітерабельного об'єкта, переданого як аргумент.

+ +

Якщо передано пустий ітерабельний об'єкт, повернений проміс буде вічно перебувати у стані очікування.

+ +

Якщо ітерабельний об'єкт містить одне або більше значень, що не є промісами, та/або вже встановлений проміс, тоді Promise.race буде вирішено з першим таким значенням, знайденим в ітерабельному об'єкті.

+ +

Приклади

+ +

Асинхронність Promise.race

+ +

Цей приклад демострує асинхронність функції Promise.race:

+ +
// ми передаємо в якості аргументу масив вже вирішених промісів,
+// щоб запустити Promise.race якомога швидше
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// негайно виводимо значення p
+console.log(p);
+
+// використовуючи setTimeout, ми можемо виконати код, коли стек стане порожнім
+setTimeout(function(){
+    console.log('тепер стек порожній');
+    console.log(p);
+});
+
+// порядок виведення:
+// Promise { <state>: "pending" }
+// тепер стек порожній
+// Promise { <state>: "fulfilled", <value>: 33 }
+ +

Пустий ітерабельний об'єкт спричиняє поверення проміса, який вічно знаходитиметься в стані очікування:

+ +
var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('тепер стек порожній');
+    console.log(foreverPendingPromise);
+});
+
+// порядок виведення:
+// Promise { <state>: "pending" }
+// тепер стек порожній
+// Promise { <state>: "pending" }
+
+ +

Якщо ітерабельний об'єкт містить одне або більше значень, що не є промісами, та/або вже встановлені проміси, тоді Promise.race  буде вирішено з першим таким значенням, знайденим у масиві:

+ +
var foreverPendingPromise = Promise.race([]);
+var alreadyResolvedProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyResolvedProm, "не проміс"];
+var arr2 = [foreverPendingPromise, "не проміс", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('тепер стек порожній');
+    console.log(p);
+    console.log(p2);
+});
+
+// порядок виведення:
+// Promise { <state>: "pending" }
+// Promise { <state>: "pending" }
+// тепер стек порожній
+// Promise { <state>: "fulfilled", <value>: 666 }
+// Promise { <state>: "fulfilled", <value>: "не проміс" }
+
+ +

Використання Promise.race – приклади з setTimeout

+ +
var p1 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve('один'), 500);
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve('два'), 100);
+});
+
+Promise.race([p1, p2])
+.then(function(value) {
+  console.log(value); // "два"
+  // Обидва вирішуються, але p2 швидший
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve('три'), 100);
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(() => reject(new Error('чотири')), 500);
+});
+
+Promise.race([p3, p4])
+.then(function(value) {
+  console.log(value); // "три"
+  // p3 швидший, тому він виконується
+}, function(reason) {
+  // Не викликається
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve("п'ять"), 500);
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(() => reject(new Error('шість')), 100);
+});
+
+Promise.race([p5, p6])
+.then(function(value) {
+  // Не викликається
+}, function(reason) {
+  console.log(reason); // "шість"
+  // p6 швидший, тому він відхиляється
+});
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.race")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html b/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..88aeba5465 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,137 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Проміс + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +
{{JSRef}}
+ +

Метод Promise.resolve() повертає об'єкт {{jsxref("Promise")}}, вирішений з наданим значенням. Якщо значенням є проміс, то цей проміс буде повернено; якщо значенням є промісоподібний об'єкт (thenable) (такий, що має {{jsxref("Promise.then", "метод \"then\"")}}), то повернений проміс буде його "дотримуватись", приймаючи його кінцевий стан; у іншому випадку повернений проміс буде виконаний з наданим значенням. Функція вирівнює вкладені шари промісоподібних об'єктів (наприклад, проміс, що вирішується з промісом, який вирішується з чимось ще) у єдиний шар.

+ +

Синтаксис

+ +
Promise.resolve(value);
+
+ +

Параметри

+ +
+
value
+
Аргумент, з яким буде вирішений даний Promise. Також він може бути промісом або промісоподібним об'єктом.
+
+ +

Значення, яке повертається

+ +

Об'єкт {{jsxref("Promise")}}, вирішений з наданим значенням, або проміс, переданий в якості значення, якщо значення було промісом.

+ +

Опис

+ +

Статична функція Promise.resolve повертає вирішений об'єкт Promise.

+ +

Приклади

+ +

Використання статичного методу Promise.resolve

+ +
Promise.resolve('Success').then(function(value) {
+  console.log(value); // "Успіх"
+}, function(value) {
+  // не викликається
+});
+
+ +

Вирішення проміса масивом

+ +
var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+
+ +

Вирішення проміса іншим промісом

+ +
var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log('значення: ' + value);
+});
+console.log('original === cast ? ' + (original === cast));
+
+// порядок виведення:
+// original === cast ? true
+// значення: 33
+ +

Перевернутий порядок логів спричинений тим фактом, що обробники then викликаються асинхронно. Дивіться, як працює then тут.

+ +

Вирішення промісоподібних об'єктів та викидання помилок

+ +
// Вирішення промісоподібного об'єкта
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill('виконаний!'); }
+});
+console.log(p1 instanceof Promise) // true, об'єкт передано у проміс
+
+p1.then(function(v) {
+    console.log(v); // "виконаний!"
+  }, function(e) {
+    // не викликається
+});
+
+// Промісоподібний об'єкт викидає помилку перед зворотнім викликом
+// Проміс відхиляється
+var thenable = { then: function(resolve) {
+  throw new TypeError('Помилка');
+  resolve('Вирішення');
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // не викликається
+}, function(e) {
+  console.log(e); // TypeError: Помилка
+});
+
+// Промісоподібний об'єкт викидає помилку після зворотного виклику
+// Проміс вирішується
+var thenable = { then: function(resolve) {
+  resolve('Вирішення');
+  throw new TypeError('Помилка');
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Вирішення"
+}, function(e) {
+  // не викликається
+});
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.resolve")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/promise/then/index.html b/files/uk/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..8cbcc884fc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,297 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +
{{JSRef}}
+ +

Метод then() вертає об'єкт {{jsxref("Promise")}}. Він приймає два аргументи: функції зворотного виклику для випадків успішного та неуспішного проміса.

+ +
{{EmbedInteractiveExample("pages/js/promise-then.html")}}
+ + + +
+

Якщо один чи обидва аргументи пропущені, або надані не функції, тоді then не матиме обробників, але не згенерує помилок. Якщо Promise, на якому викликається then, приймає стан (виконання або відхилення), для якого then не має обробника, новий Promise створюється без додаткових обробників, просто приймаючи кінцевий стан оригінального проміса, на якому було викликано then.

+
+ +

Синтаксис

+ +
p.then(onFulfilled[, onRejected]);
+
+p.then(value => {
+  // виконання
+}, reason => {
+  // відхилення
+});
+
+ +

Параметри

+ +
+
onFulfilled {{optional_inline}}
+
{{jsxref("Function","Функція")}}, що викликається, якщо Promise виконано. Ця функція має один аргумент, значення виконання. Якщо це не функція, вона внутрішньо замінюється на функцію "Identity" (вона повертає отриманий аргумент).
+
onRejected {{optional_inline}}
+
{{jsxref("Function","Функція")}}, що викликається, якщо Promise відхилено. Ця функція має один аргумент, причина відхилення. Якщо це не функція, вона внутрішньо замінюється на функцію "Thrower" (вона викидає помилку, яку отримала в якості аргумента).
+
+ +

Значення, що повертається

+ +

Як тільки {{jsxref("Promise","проміс")}} був виконаний або відхилений, відповідна функція-обробник (onFulfilled або onRejected) буде викликана асинхронно (запланована у активному циклі потоку). Поведінка функції-обробника відповідає спеціальному набору правил. Якщо функція-обробник:

+ + + +

Наступний приклад демонструє асинхронність методу then.

+ +
// при використанні вирішеного проміса блок 'then' буде негайно запущений,
+// але його обробники запустяться асинхронно, як демонструє console.log
+const resolvedProm = Promise.resolve(33);
+
+let thenProm = resolvedProm.then(value => {
+    console.log("Це запускається після завершення головного стеку. Отримане й повернене значення: " + value);
+    return value;
+});
+// негайне логування значення thenProm
+console.log(thenProm);
+
+// використовуючи setTimeout, ми можемо відкласти виконання функції, поки стек не стане порожнім
+setTimeout(() => {
+    console.log(thenProm);
+});
+
+
+// порядок логування:
+// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
+// "Це запускається після завершення головного стеку. Отримане й повернене значення: 33"
+// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}
+ +

Опис

+ +

Оскільки методи then та {{jsxref("Promise.prototype.catch()")}} вертають проміси, їх можна поєднувати в ланцюги — ця операція зветься композицією.

+ +

Приклади

+ +

Використання метода then

+ +
var p1 = new Promise((resolve, reject) => {
+  resolve('Успіх!');
+  // або
+  // reject(new Error("Помилка!"));
+});
+
+p1.then(value => {
+  console.log(value); // Успіх!
+}, reason => {
+  console.error(reason); // Помилка!
+});
+
+ +

Ланцюгування

+ +

Метод then вертає об'єкт Promise, що дозволяє використовувати ланцюгування.

+ +

Якщо функція, передана у then в якості обробника, вертає об'єкт Promise, аналогічний об'єкт Promise буде переданий у наступний then ланцюга методів. Наведений нижче фрагмент імітує асинхронний код функцією setTimeout

+ +
Promise.resolve('ква')
+  // 1. Отримати "ква", приєднати "драт" та вирішити це для наступного then
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'драт';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. отримати "квадрат", призначити функцію зворотного виклику для обробки цього рядка
+  // та вивести його на консоль, але не раніше повернення необробленого рядка
+  // string у наступний then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'ура';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. вивести допоміжні повідомлення щодо того, як виконується код в цьому розділі,
+  // раніше, ніж рядок string буде оброблений імітованим асинхронним кодом у
+  // попередньому блоці then.
+  .then(function(string) {
+    console.log("Останній Then:  йой... ми не створили та не повернули екземпляр проміса " +
+                "у попередньому then, тому послідовність може бути трохи " +
+                "несподіваною");
+
+    // Зауважте, що `string` не матиме частини 'ура' в цій точці. Це тому,
+    // що ми імітували його асинхронне виконання за допомогою функції setTimeout
+    console.log(string);
+  });
+
+// порядок виведення:
+// Останній Then: йой... ми не створили та не повернули екземпляр проміса у попередньому then, тому послідовність може бути трохи несподіваною
+// квадрат
+// квадратура
+ +

Коли значення просто повертається з обробника then, він поверне Promise.resolve(<значення, повернене обробником, що викликався>).

+ +
var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value + ' - Синхронне значення працює');
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+
+ +

Виклик then поверне відхилений проміс, якщо функція викидає помилку або повертає відхилений проміс.

+ +
Promise.resolve()
+  .then(() => {
+    // Змушує .then() повернути відхилений проміс
+    throw new Error('О, ні!');
+  })
+  .then(() => {
+    console.log('Не викликається.');
+  }, error => {
+    console.error('Викликано функцію onRejected: ' + error.message);
+  });
+ +

У всіх інших випадках повертається вирішений об'єкт Promise. У наступному прикладі перший then() поверне значення 42, загорнуте у вирішений проміс, незважаючи на те, що попередній проміс ланцюжка був відхилений.

+ +
Promise.reject()
+  .then(() => 99, () => 42) // onRejected вертає 42, обгорнуте у вирішений Promise
+  .then(solution => console.log('Вирішений зі значенням ' + solution)); // Вирішений зі значенням 42
+ +

На практиці часто бажано перехоплювати відхилені проміси, як продемонстровано нижче, а не використовувати синтаксис then для двох випадків.

+ +
Promise.resolve()
+  .then(() => {
+    // Змушує .then() повернути відхилений проміс
+    throw new Error('О, ні!');
+  })
+  .catch(error => {
+    console.error('Викликано функцію onRejected: ' + error.message);
+  })
+  .then(() => {
+    console.log("Мене завжди викликають, навіть якщо проміс попереднього then відхилено");
+  });
+ +

Ви також можете використати ланцюгування, щоб реалізувати функцію з API на промісах, на основі іншої такої функції.

+ +
function fetch_current_data() {
+  // API fetch() вертає проміс. Ця функція
+  // створює схожий API, крім того, що над значенням
+  // виконанного проміса цієї функції виконується
+  // більше дій.
+  return fetch('current-data.json').then(response => {
+    if (response.headers.get('content-type') != 'application/json') {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // можливо, зробити щось із j
+    return j; // значення виконання, що надається користувачу
+              // fetch_current_data().then()
+  });
+}
+
+ +

Якщо onFulfilled вертає проміс, повернене значення then буде вирішене чи відхилене промісом.

+ +
function resolveLater(resolve, reject) {
+  setTimeout(function() {
+    resolve(10);
+  }, 1000);
+}
+function rejectLater(resolve, reject) {
+  setTimeout(function() {
+    reject(new Error('Помилка'));
+  }, 1000);
+}
+
+var p1 = Promise.resolve('ква');
+var p2 = p1.then(function() {
+  // Повернути тут проміс, який буде вирішений зі значенням 10 через 1 секунду
+  return new Promise(resolveLater);
+});
+p2.then(function(v) {
+  console.log('вирішений', v);  // "вирішений", 10
+}, function(e) {
+  // не викликається
+  console.error('відхилений', e);
+});
+
+var p3 = p1.then(function() {
+  // Повернути тут проміс, що відхилятиметься з помилкою 'Помилка' через 1 секунду
+  return new Promise(rejectLater);
+});
+p3.then(function(v) {
+  // не викликається
+  console.log('вирішений', v);
+}, function(e) {
+  console.error('відхилений', e); // "відхилений", 'Помилка'
+});
+
+ +

Поліфіл у стилі window.setImmediate на основі промісів

+ +

Використання методу {{jsxref("Function.prototype.bind()")}} Reflect.apply ({{jsxref("Reflect.apply()")}}) для створення функції (що не скасовується) у стилі setImmediate.

+ +
const nextTick = (() => {
+  const noop = () => {}; // буквально
+  const nextTickPromise = () => Promise.resolve().then(noop);
+
+  const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
+  const nextTick = (fn, ...args) => (
+    fn !== undefined
+    ? Promise.resolve(args).then(rfab(null, fn, null))
+    : nextTickPromise(),
+    undefined
+  );
+  nextTick.ntp = nextTickPromise;
+
+  return nextTick;
+})();
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.then")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/promise/\320\262\321\226\320\264\321\205\320\270\320\273\320\265\320\275\320\276/index.html" "b/files/uk/web/javascript/reference/global_objects/promise/\320\262\321\226\320\264\321\205\320\270\320\273\320\265\320\275\320\276/index.html" new file mode 100644 index 0000000000..406c6e74e2 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/promise/\320\262\321\226\320\264\321\205\320\270\320\273\320\265\320\275\320\276/index.html" @@ -0,0 +1,73 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/відхилено +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +
{{JSRef}}
+ +

Метод Promise.reject() повертає об'єкт Promise, відхилений з наданою причиною.

+ +

{{EmbedInteractiveExample("pages/js/promise-reject.html")}}

+ + + +

Синтаксис

+ +
Promise.reject(reason);
+ +

Параметри

+ +
+
reason
+
Причина, чому даний проміс був відхилений.
+
+ +

Значення, яке повертається

+ +

Об'єкт {{jsxref("Promise")}}, відхилений з наданою причиною.

+ +

Опис

+ +

Статичний метод Promise.reject повертає відхилений об'єкт Promise. З метою відлагодження, а також вибіркового перехоплення помилок зручно використовувати reason як instanceof {{jsxref("Error")}}.

+ +

Приклади

+ +

Використання статичного методу Promise.reject()

+ +
Promise.reject(new Error('fail')).then(function(error) {
+  // не викликається
+}, function(error) {
+  console.error(error); // стек викликів
+});
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Promise.reject")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/proxy/index.html b/files/uk/web/javascript/reference/global_objects/proxy/index.html new file mode 100644 index 0000000000..b246c6e047 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/proxy/index.html @@ -0,0 +1,399 @@ +--- +title: Проксі +slug: Web/JavaScript/Reference/Global_Objects/Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +
+
{{JSRef}}
+
+ +

Proxy об'єкт використовується для визначення власної поведінки для базових операцій (наприклад, доступ до властивостей, присвоєння, обрахунок, виклик функцій та ін.).

+ +

Terminology

+ +
+
handler
+
Placeholder object which contains traps.
+
traps
+
The methods that provide property access. This is analogous to the concept of traps in operating systems.
+
target
+
Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.
+
+ +

Syntax

+ +
var p = new Proxy(target, handler);
+
+ +

Parameters

+ +
+
target
+
A target object (can be any sort of object, including a native array, a function or even another proxy) to wrap with Proxy.
+
handler
+
An object whose properties are functions which define the behavior of the proxy when an operation is performed on it.
+
+ +

Methods

+ +
+
{{jsxref("Proxy.revocable()")}}
+
Creates a revocable Proxy object.
+
+ +

Methods of the handler object

+ +

The handler object is a placeholder object which contains traps for Proxy.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}
+ +

Examples

+ +

Basic example

+ +

In this simple example the number 37 gets returned as the default value when the property name is not in the object. It is using the get handler.

+ +
var handler = {
+    get: function(target, name) {
+        return name in target ?
+            target[name] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+
+ +

No-op forwarding proxy

+ +

In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.

+ +
var target = {};
+var p = new Proxy(target, {});
+
+p.a = 37; // operation forwarded to the target
+
+console.log(target.a); // 37. The operation has been properly forwarded
+
+ +

Validation

+ +

With a Proxy, you can easily validate the passed value for an object. This example uses the set handler.

+ +
let validator = {
+  set: function(obj, prop, value) {
+    if (prop === 'age') {
+      if (!Number.isInteger(value)) {
+        throw new TypeError('The age is not an integer');
+      }
+      if (value > 200) {
+        throw new RangeError('The age seems invalid');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+
+    // Indicate success
+    return true;
+  }
+};
+
+let person = new Proxy({}, validator);
+
+person.age = 100;
+console.log(person.age); // 100
+person.age = 'young'; // Throws an exception
+person.age = 300; // Throws an exception
+ +

Extending constructor

+ +

A function proxy could easily extend a constructor with a new constructor. This example uses the construct and apply handlers.

+ +
function extend(sup, base) {
+  var descriptor = Object.getOwnPropertyDescriptor(
+    base.prototype, 'constructor'
+  );
+  base.prototype = Object.create(sup.prototype);
+  var handler = {
+    construct: function(target, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(target, obj, args);
+      return obj;
+    },
+    apply: function(target, that, args) {
+      sup.apply(that, args);
+      base.apply(that, args);
+    }
+  };
+  var proxy = new Proxy(base, handler);
+  descriptor.value = proxy;
+  Object.defineProperty(base.prototype, 'constructor', descriptor);
+  return proxy;
+}
+
+var Person = function(name) {
+  this.name = name;
+};
+
+var Boy = extend(Person, function(name, age) {
+  this.age = age;
+});
+
+Boy.prototype.sex = 'M';
+
+var Peter = new Boy('Peter', 13);
+console.log(Peter.sex);  // "M"
+console.log(Peter.name); // "Peter"
+console.log(Peter.age);  // 13
+ +

Manipulating DOM nodes

+ +

Sometimes you want to toggle the attribute or class name of two different elements. Here's how using the set handler.

+ +
let view = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, newval) {
+    let oldval = obj[prop];
+
+    if (prop === 'selected') {
+      if (oldval) {
+        oldval.setAttribute('aria-selected', 'false');
+      }
+      if (newval) {
+        newval.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = newval;
+
+    // Indicate success
+    return true;
+  }
+});
+
+let i1 = view.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = view.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'
+ +

Value correction and an extra property

+ +

The products proxy object evaluates the passed value and converts it to an array if needed. The object also supports an extra property called latestBrowser both as a getter and a setter.

+ +
let products = new Proxy({
+  browsers: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      return obj.browsers[obj.browsers.length - 1];
+    }
+
+    // The default behavior to return the value
+    return obj[prop];
+  },
+  set: function(obj, prop, value) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      obj.browsers.push(value);
+      return true;
+    }
+
+    // Convert the value if it is not an array
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+
+    // Indicate success
+    return true;
+  }
+});
+
+console.log(products.browsers); // ['Internet Explorer', 'Netscape']
+products.browsers = 'Firefox'; // pass a string (by mistake)
+console.log(products.browsers); // ['Firefox'] <- no problem, the value is an array
+
+products.latestBrowser = 'Chrome';
+console.log(products.browsers); // ['Firefox', 'Chrome']
+console.log(products.latestBrowser); // 'Chrome'
+ +

Finding an array item object by its property

+ +

This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using Object.defineProperties. This example can be adapted to find a table row by its cell. In that case, the target will be table.rows.

+ +
let products = new Proxy([
+  { name: 'Firefox', type: 'browser' },
+  { name: 'SeaMonkey', type: 'browser' },
+  { name: 'Thunderbird', type: 'mailer' }
+],
+{
+  get: function(obj, prop) {
+    // The default behavior to return the value; prop is usually an integer
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // Get the number of products; an alias of products.length
+    if (prop === 'number') {
+      return obj.length;
+    }
+
+    let result, types = {};
+
+    for (let product of obj) {
+      if (product.name === prop) {
+        result = product;
+      }
+      if (types[product.type]) {
+        types[product.type].push(product);
+      } else {
+        types[product.type] = [product];
+      }
+    }
+
+    // Get a product by name
+    if (result) {
+      return result;
+    }
+
+    // Get products by type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Get product types
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(products[0]); // { name: 'Firefox', type: 'browser' }
+console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
+console.log(products['Chrome']); // undefined
+console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
+console.log(products.types); // ['browser', 'mailer']
+console.log(products.number); // 3
+
+ +

A complete traps list example

+ +

Now in order to create a complete sample traps list, for didactic purposes, we will try to proxify a non native object that is particularly suited to this type of operation: the docCookies global object created by the "little framework" published on the document.cookie page.

+ +
/*
+  var docCookies = ... get the "docCookies" object here:
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  get: function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  set: function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  deleteProperty: function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  enumerate: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  ownKeys: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  has: function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  defineProperty: function (oTarget, sKey, oDesc) {
+    if (oDesc && 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  getOwnPropertyDescriptor: function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      value: vValue,
+      writable: true,
+      enumerable: true,
+      configurable: false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.my_cookie1 = 'First value');
+console.log(docCookies.getItem('my_cookie1'));
+
+docCookies.setItem('my_cookie1', 'Changed value');
+console.log(docCookies.my_cookie1);
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Proxy", 2)}}

+ +

See also

+ + + +

Licensing note

+ +

Some content (text, examples) in this page has been copied or adapted from the ECMAScript wiki which content is licensed CC 2.0 BY-NC-SA.

diff --git a/files/uk/web/javascript/reference/global_objects/rangeerror/index.html b/files/uk/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..8ed0df65cb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,141 @@ +--- +title: RangeError +slug: Web/JavaScript/Reference/Global_Objects/RangeError +tags: + - Error + - JavaScript + - Object + - RangeError + - виняток +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +
{{JSRef}}
+ +

Об'єкт RangeError позначає помилку, що виникає, коли значення не входить у множину або діапазон дозволених значень.

+ +

Синтаксис

+ +
new RangeError([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message {{optional_inline}}
+
Необов'язковий. Зрозумілий людині опис помилки.
+
fileName {{optional_inline}} {{non-standard_inline}}
+
Необов'язковий. Ім'я файлу, який містить код, що спричинив виняток.
+
lineNumber {{optional_inline}} {{non-standard_inline}}
+
Необов'язковий. Номер рядка в коді, що спричинив виняток.
+
+ +

Опис

+ +

Виняток RangeError викидається при спробі передати у якості аргумента функції значення, яке не входить у діапазон дозволених цією функцією значень.

+ +

Його можна зустріти, якщо:

+ + + +

Властивості

+ +
+
RangeError.prototype
+
Вможливлює додавання властивостей до об'єктів RangeError.
+
+ +

Методи

+ +

Сам RangeError не має власних методів, але успадковує деякі методи через ланцюжок прототипів.

+ +

Екземпляри RangeError

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Методи')}}
+ +

Приклади

+ +

Використання RangeError (для числових значень)

+ +
function check(n)
+{
+    if(!(n >= -500 && n <= 500))
+    {
+        throw new RangeError("Аргумент має бути в діапазоні між -500 та 500.")
+    }
+}
+
+try
+{
+    check(2000);
+}
+catch(error)
+{
+    if(error instanceof RangeError)
+    {
+        // Обробити помилку
+    }
+}
+ +

Використання RangeError (для нечислових значень)

+ +
function check(value)
+{
+    if(["яблуко", "банан", "морква"].includes(value) === false)
+    {
+        throw new RangeError("Аргумент має дорівнювати \"яблуко\", \"банан\", або \"морква\".")
+    }
+}
+
+try
+{
+    check("капуста")
+}
+catch(error)
+{
+    if(error instanceof RangeError)
+    {
+        // Обробити помилку
+    }
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.RangeError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html new file mode 100644 index 0000000000..f0b90c5eab --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html @@ -0,0 +1,89 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +tags: + - Error + - JavaScript + - RangeError + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +
{{JSRef}}
+ +

Властивість RangeError.prototype є прототипом для конструктора {{jsxref("RangeError")}}

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("RangeError")}} успадковуються від RangeError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
RangeError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("RangeError")}} має надавати власну властивість message, у SpiderMonkey, він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
+
Ім'я помилки. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error", "Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("RangeError")}} не містить власних методів, екземпляри {{jsxref("RangeError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.RangeError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/referenceerror/index.html b/files/uk/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..161634f10d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,108 @@ +--- +title: ReferenceError +slug: Web/JavaScript/Reference/Global_Objects/ReferenceError +tags: + - Error + - JavaScript + - ReferenceError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +--- +
{{JSRef}}
+ +

Об'єкт ReferenceError позначає помилку, що виникає при посиланні на змінну, яка не існує.

+ +

Синтаксис

+ +
new ReferenceError([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message {{optional_inline}}
+
Необов'язковий. Зрозумілий людині опис помилки.
+
fileName {{optional_inline}} {{non-standard_inline}}
+
Необов'язковий. Ім'я файлу, код з якого спричинив виняток.
+
lineNumber {{optional_inline}} {{non-standard_inline}}
+
Необов'язковий. Номер рядка в коді, що спричинив виняток.
+
+ +

Опис

+ +

ReferenceError викидається при посиланні на змінну, яка не була оголошена.

+ +

Властивості

+ +
+
ReferenceError.prototype
+
Дозволяє додавати властивості до об'єктів ReferenceError.
+
+ +

Екземпляри ReferenceError

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Методи')}}
+ +

Приклади

+ +

Перехоплення ReferenceError

+ +
try {
+  let a = undefinedVariable
+} catch (e) {
+  console.log(e instanceof ReferenceError) // true
+  console.log(e.message)                   // "undefinedVariable is not defined"
+  console.log(e.name)                      // "ReferenceError"
+  console.log(e.fileName)                  // "Scratchpad/1"
+  console.log(e.lineNumber)                // 2
+  console.log(e.columnNumber)              // 6
+  console.log(e.stack)                     // "@Scratchpad/2:2:7\n"
+}
+
+ +

Створення ReferenceError

+ +
try {
+  throw new ReferenceError('Привіт', 'someFile.js', 10)
+} catch (e) {
+  console.log(e instanceof ReferenceError) // true
+  console.log(e.message)                   // "Привіт"
+  console.log(e.name)                      // "ReferenceError"
+  console.log(e.fileName)                  // "someFile.js"
+  console.log(e.lineNumber)                // 10
+  console.log(e.columnNumber)              // 0
+  console.log(e.stack)                     // "@Scratchpad/2:2:9\n"
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.ReferenceError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html new file mode 100644 index 0000000000..82bd7af85e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html @@ -0,0 +1,90 @@ +--- +title: ReferenceError.prototype +slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +tags: + - Error + - JavaScript + - ReferenceError + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +--- +
{{JSRef}}
+ +

Властивість ReferenceError.prototype є прототипом для конструктора {{jsxref("ReferenceError")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("ReferenceError")}} успадковуються від ReferenceError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
ReferenceError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("ReferenceError")}} повинен мати власну властивість message, у SpiderMonkey він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("ReferenceError")}} не містить власних методів, екземпляри {{jsxref("ReferenceError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.ReferenceError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/reflect/index.html b/files/uk/web/javascript/reference/global_objects/reflect/index.html new file mode 100644 index 0000000000..0e16d2b039 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/reflect/index.html @@ -0,0 +1,82 @@ +--- +title: Reflect +slug: Web/JavaScript/Reference/Global_Objects/Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect +--- +
{{JSRef}}
+ +
+ +

Reflect вбудованний об'єкт, що об'єднує в собі методи для перехоплюючих JavaScript операцій. Ці методи такі ж, як у proxy handlers. Reflect є не функціональний об'єкт, тому не може використовуватися, як конструктор.

+ +

Опис

+ +

На відміну від більшості глобальних об'єктів, Reflect не є конструктором. Ви не можете використовувати його з new оператором або запустити Reflect як функцію. Всі властивості та методи Reflect є статичними (так само як у {{jsxref("Math")}} об'єкта).

+ +

Методи

+ +

Reflect об'єкт надає статичні функції, які мають такі ж імена як proxy handler методи. Деякі з цих методів є також ідентичними до відповідних методів в {{jsxref("Object")}}, хоча існують деякі тонкі відмінності між ними.

+ +
+
{{jsxref("Reflect.apply()")}}
+
Виконує цільову функцію з аргументами, які визначені параметром args. Дивись також {{jsxref("Function.prototype.apply()")}}.
+
{{jsxref("Reflect.construct()")}}
+
Оператор new як функція. Еквівалент до виклику new target(...args). Надає також опційну(не обовязковий) можливість встановити інший прототип.
+
{{jsxref("Reflect.defineProperty()")}}
+
Подібний до {{jsxref("Object.defineProperty()")}}. Повертає {{jsxref("Boolean")}}.
+
{{jsxref("Reflect.deleteProperty()")}}
+
Оператор delete як функція. Еквівалент до виклику delete target[name].
+
{{jsxref("Reflect.get()")}}
+
Функція, що повертає значення властивості.
+
{{jsxref("Reflect.getOwnPropertyDescriptor()")}}
+
Подібно до {{jsxref("Object.getOwnPropertyDescriptor()")}}. Повертає дескриптор даної властивості, якщо така існує у об'єкті,  {{jsxref("undefined")}} в іншому випадку.
+
{{jsxref("Reflect.getPrototypeOf()")}}
+
Така як {{jsxref("Object.getPrototypeOf()")}}.
+
{{jsxref("Reflect.has()")}}
+
Оператор in як функція. Повертая булеве, що вказую чи існує власна або успадкована властивість.
+
{{jsxref("Reflect.isExtensible()")}}
+
Така як {{jsxref("Object.isExtensible()")}}.
+
{{jsxref("Reflect.ownKeys()")}}
+
Повертає масив власних(не успадкованих) ключів властивостей цільового об'єкту.
+
{{jsxref("Reflect.preventExtensions()")}}
+
Подібно до {{jsxref("Object.preventExtensions()")}}. Повертає {{jsxref("Boolean")}}.
+
{{jsxref("Reflect.set()")}}
+
Функція, яка встановлює значення для властивостей. Повертає {{jsxref("Boolean")}} як true якщо оновлення було успішним.
+
{{jsxref("Reflect.setPrototypeOf()")}}
+
Функція, що встановлює прототип об'єкта.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}{{Spec2('ESDraft')}}Reflect.enumerate був видаленний.
+ +

Сумістність браузерів

+ + + +

{{Compat("javascript.builtins.Reflect")}}

+ +

Дивись також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html b/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html new file mode 100644 index 0000000000..3a4547d559 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html @@ -0,0 +1,227 @@ +--- +title: RegExp.prototype.exec() +slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec +--- +
{{JSRef}}
+ +

Метод exec() виконує пошук збігів у заданому рядку. Він повертає масив або {{jsxref("null")}}.

+ +

Якщо Ви просто використовуєте регулярний вираз, щоб знайти чи є збіг чи немає використовуйте метод {{jsxref("RegExp.prototype.test()")}} або метод {{jsxref("String.prototype.search()")}}.

+ +

Синтаксис

+ +
regexObj.exec(str)
+ +

Параметри

+ +
+
str
+
Рядок який буде перевірятися на збіг за регулярним виразом.
+
+ +

Що повертає

+ +

Якщо збіг є, метод  exec() повертає масив і оновлює властивості об'єкту регулярного виразу. На першій позиції повернутого цим методом масиву буде підрядок який задовольняє даний регулярний вираз, на наступних позиціях запам'ятовані збіги за допомогою дужок "()"

+ +

Якщо збігів немає, метод exec() повертає {{jsxref("null")}}.

+ +

Опис

+ +

Розглянемо наступний приклад:

+ +
// Знайти такий збіг: "Швидка руда" після чого йде
+// довільна кількість знаків потім слово "стрибає"
+// Запам'ятати "руда" і "стрибає"
+// Ігнорувати регістр літер (знайде і руда і РуДа)
+var re = /швидка\s(руда).+?(стрибає)/ig;
+var result = re.exec('Швидка руда лисиця стрибає через ледачого пса');
+
+ +

Таблиця підсумовує результати виконання скрипта:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Об'єктВластивість / ІндексПоясненняПриклад
result[0]Рядок символів що співпали.Швидка руда лисиця стрибає
[1], ...[n ]Запам'ятовані підрядки, якщо такі є. Їхня кількість не обмежена.[1] = руда
+ [2] = стрибає
indexІндекс з якого починається збіг.0
inputОригінальний рядок.Швидка руда лисиця стрибає через ледачого пса
relastIndex +

Індекс з якого починати пошук наступного збігу. Коли прапорець "g" непоставлено, lastIndex буде залишатися 0.

+
26
ignoreCaseПоказує чи був використаний прапорець  "i" для ігнорування регістру літер.true
globalПоказує чи був використаний прапорець "g" для глобального пошуку.true
multilineПоказує чи був використаний прапорець "m" для пошуку.false
sourceСам регулярний вираз.швидка\s(руда).+?(стрибає)
+ +

Приклади

+ +

Пошук наступних збігів

+ +

Якщо регулярний вираз використовує прапорець "g", Ви можете використовувати метод exec() багато разів для того, щоб знайти наступні збіги у рядку з яким працюєте. Якщо Ви так зробите, пошук почнеться з індексу який  заданий властивістю {{jsxref("RegExp.lastIndex", "lastIndex")}} ( метод {{jsxref("RegExp.prototype.test()", "test()")}} також змінює властивість {{jsxref("RegExp.lastIndex", "lastIndex")}} ). Для прикладу, припустимо Ви маєте такий скрипт:

+ +
var myRe = /ab*/g;
+var str = 'abbcdefabh';
+var myArray;
+while ((myArray = myRe.exec(str)) !== null) {
+  var msg = 'Знайдено ' + myArray[0] + '. ';
+  msg += 'Наступний пошук почнеться з індексу ' + myRe.lastIndex;
+  console.log(msg);
+}
+
+ +

Це скрипт виведе таке:

+ +
Знайдено abb. Наступний пошук почнеться з індексу 3
+Знайдено ab. Наступний пошук почнеться з індексу 9
+
+ +

Увага: Не створюйте об'єкт (через конструктор {{jsxref("RegExp")}})  або літерал регулярного виразу в умові циклу while оскільки це призведе до нескінченного циклу оскільки властивість {{jsxref("RegExp.lastIndex", "lastIndex")}} буде перезаписуватися кожен раз на нуль і метод exec ніколи не поверне null. Також перевірте чи поставили прапорець "g" оскільки його відсутність також призведе до нескінченного циклу.

+ +

Використання exec() RegExp літералами

+ +

Ви можете використовувати метод exec() без створення об'єкту {{jsxref("RegExp")}}:

+ +
var matches = /(hello \S+)/.exec('This is a hello world!');
+console.log(matches[1]);
+
+ +

Це виведе в консоль повідомлення 'hello world!'

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES3')}}{{Spec2('ES3')}}Первісне значення. Реалізовано  у JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}{{Spec2('ESDraft')}} 
+ +

Сумісність з браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
БраузерChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
БраузерAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/regexp/index.html b/files/uk/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..8374d65fc6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,699 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Reference + - RegExp + - Regular Expressions + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +
{{JSRef}}
+ +

Конструктор RegExp створює об'єкт регулярного виразу для знаходження тексту по шаблону.

+ +

Для ознайомлення з регулярними виразами, можете проглянути розділ Regular Expressions в JavaScript Guide.

+ +

Синтаксис

+ +

Можливі позначення літералу та констуктору:

+ +
/pattern/flags
+new RegExp(pattern[, flags])
+
+ +

Параметри

+ +
+
pattern
+
Шаблон регулярного виразу.
+
flags
+
+

Якщо об'явлені, можуть сторювати комбінації з цих значень:

+ +
+
g
+
глобальне співпадіння
+
i
+
ігнорування розкладки
+
m
+
співпадіння по кільком строкам; символи початку та кінця (^ й $) починають працювати по кільком строкам (тобто відбувається співпадіння с початком або кінцем кожної строки (строки відділяються символами \n й \r), а не тільки з початком та кінцем усієї строки, яку ввели)
+
u
+
юнікод
+
y
+
"липкий" пошук; починає шукати співпадіння з індексу, на який вказує властивість lastIndex даного RegExp
+
+
+
+ +

Опис

+ +

Існує 2 шляхи створити RegExp об'єкт: за допомогою літерального виразу або конструктора. Аби розрізняти текстовий рядок, параметри літерального виразу не містять лапок, але якщо створювати за допомогою конструктора, то лапки можно використовувати. У наступному прикладі створюються однакові регулярні вирази:

+ +
/ab+c/i;
+new RegExp('ab+c', 'i');
+new RegExp(/ab+c/, 'i');
+
+ +

Літеральна нотація виконує компіляцію виразу коли даний вираз обчислений. Викоритсовуйте літерали якщо регулярний вираз відомий до початку роботи програми. Наприклад, якщо використовувати літерал у циклі, регулярний вираз не буде наново компілюватись на кожній ітерації.

+ +

Конструктор об'єкту регулярного виразу, приміром, new RegExp('ab+c'), забезпечує компіляцію регулярного виразу під час виконання програми. Використовуйте функцію конструктора якщо шаблон регулярного виразу буде змінюватися або шаблон не відомий та надходить з іншого джерела, наприклад, від користувача.

+ +

Починаючи з ECMAScript 6, new RegExp(/ab+c/, 'i') більше не видає {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") якщо перший аргумент RegExp та другий аргумент flags наявний. Натомість створюється новий RegExp з аргументів.

+ +

При використанні функції-конструктора необхідно дотримуватись правил текстових рядків (попередні спеціальні символи з \ якщо вони входять в рядок). Наприклад, наступні вирази еквівалентні:

+ +
var re = /\w+/;
+var re = new RegExp('\\w+');
+
+ +

Special characters meaning in regular expressions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Character Classes
CharacterMeaning
. +

(The dot, the decimal point) matches any single character except line terminators: \n, \r, \u2028 or \u2029.

+ +

Inside a character class, the dot loses its special meaning and matches a literal dot.

+ +

Note that the m multiline flag doesn't change the dot behavior. So to match a pattern across multiple lines, the character set [^] can be used (if you don't mean an old version of IE, of course), it will match any character including newlines.

+ +

For example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day".

+
\d +

Matches a digit character in the basic Latin alphabet. Equivalent to [0-9].

+ +

For example, /\d/ or /[0-9]/ matches "2" in "B2 is the suite number".

+
\D +

Matches any character that is not a digit in the basic Latin alphabet. Equivalent to [^0-9].

+ +

For example, /\D/ or /[^0-9]/ matches "B" in "B2 is the suite number".

+
\w +

Matches any alphanumeric character from the basic Latin alphabet, including the underscore. Equivalent to [A-Za-z0-9_].

+ +

For example, /\w/ matches "a" in "apple", "5" in "$5.28", and "3" in "3D".

+
\W +

Matches any character that is not a word character from the basic Latin alphabet. Equivalent to [^A-Za-z0-9_].

+ +

For example, /\W/ or /[^A-Za-z0-9_]/ matches "%" in "50%".

+
\s +

Matches a single white space character, including space, tab, form feed, line feed and other Unicode spaces. Equivalent to [ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff].

+ +

For example, /\s\w*/ matches " bar" in "foo bar".

+
\S +

Matches a single character other than white space. Equivalent to [^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff].

+ +

For example, /\S\w*/ matches "foo" in "foo bar".

+
\tMatches a horizontal tab.
\rMatches a carriage return.
\nMatches a linefeed.
\vMatches a vertical tab.
\fMatches a form-feed.
[\b]Matches a backspace. (Not to be confused with \b)
\0Matches a NUL character. Do not follow this with another digit.
\cX +

Where X is a letter from A - Z. Matches a control character in a string.

+ +

For example, /\cM/ matches control-M in a string.

+
\xhhMatches the character with the code hh (two hexadecimal digits).
\uhhhhMatches a UTF-16 code-unit with the value hhhh (four hexadecimal digits).
\u{hhhh} or \u{hhhhh}(only when u flag is set) Matches the character with the Unicode value U+hhhh or U+hhhhh (hexadecimal digits).
\ +

For characters that are usually treated literally, indicates that the next character is special and not to be interpreted literally.

+ +

For example, /b/ matches the character "b". By placing a backslash in front of "b", that is by using /\b/, the character becomes special to mean match a word boundary.

+ +

or

+ +

For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally.

+ +

For example, "*" is a special character that means 0 or more occurrences of the preceding character should be matched; for example, /a*/ means match 0 or more "a"s. To match * literally, precede it with a backslash; for example, /a\*/ matches "a*".

+
Character Sets
CharacterMeaning
[xyz]
+ [a-c]
+

A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.

+ +

For example, [abcd] is the same as [a-d]. They match the "b" in "brisket" and the "c" in "chop".

+
+

[^xyz]
+ [^a-c]

+
+

A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.

+ +

For example, [^abc] is the same as [^a-c]. They initially match "o" in "bacon" and "h" in "chop".

+
Alternation
CharacterMeaning
x|y +

Matches either x or y.

+ +

For example, /green|red/ matches "green" in "green apple" and "red" in "red apple".

+
Boundaries
CharacterMeaning
^ +

Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.

+ +

For example, /^A/ does not match the "A" in "an A", but does match the first "A" in "An A".

+
$ +

Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.

+ +

For example, /t$/ does not match the "t" in "eater", but does match it in "eat".

+
\b +

Matches a zero-width word boundary, such as between a letter and a space. (Not to be confused with [\b])

+ +

For example, /\bno/ matches the "no" in "at noon"; /ly\b/ matches the "ly" in "possibly yesterday".

+
\B +

Matches a zero-width non-word boundary, such as between two letters or between two spaces.

+ +

For example, /\Bon/ matches "on" in "at noon", and /ye\B/ matches "ye" in "possibly yesterday".

+
Grouping and back references
CharacterMeaning
(x) +

Matches x and remembers the match. These are called capturing groups.

+ +

For example, /(foo)/ matches and remembers "foo" in "foo bar". 

+ +

The capturing groups are numbered according to the order of left parentheses of capturing groups, starting from 1. The matched substring can be recalled from the resulting array's elements [1], ..., [n] or from the predefined RegExp object's properties $1, ..., $9.

+ +

Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).

+
\n +

Where n is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).

+ +

For example, /apple(,)\sorange\1/ matches "apple, orange," in "apple, orange, cherry, peach". A more complete example follows this table.

+
(?:x)Matches x but does not remember the match. These are called non-capturing groups. The matched substring can not be recalled from the resulting array's elements [1], ..., [n] or from the predefined RegExp object's properties $1, ..., $9.
Quantifiers
CharacterMeaning
x* +

Matches the preceding item x 0 or more times.

+ +

For example, /bo*/ matches "boooo" in "A ghost booooed" and "b" in "A bird warbled", but nothing in "A goat grunted".

+
x+ +

Matches the preceding item x 1 or more times. Equivalent to {1,}.

+ +

For example, /a+/ matches the "a" in "candy" and all the "a"'s in "caaaaaaandy".

+
x? +

Matches the preceding item x 0 or 1 time.

+ +

For example, /e?le?/ matches the "el" in "angel" and the "le" in "angle."

+ +

If used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).

+
x{n} +

Where n is a positive integer. Matches exactly n occurrences of the preceding item x.

+ +

For example, /a{2}/ doesn't match the "a" in "candy", but it matches all of the "a"'s in "caandy", and the first two "a"'s in "caaandy".

+
x{n,} +

Where n is a positive integer. Matches at least n occurrences of the preceding item x.

+ +

For example, /a{2,}/ doesn't match the "a" in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy".

+
x{n,m} +

Where n and m are positive integers. Matches at least n and at most m occurrences of the preceding item x.

+ +

For example, /a{1,3}/ matches nothing in "cndy", the "a" in "candy", the two "a"'s in "caandy", and the first three "a"'s in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more "a"'s in it.

+
+

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

+
+

Matches the preceding item x like *, +, ?, and {...} from above, however the match is the smallest possible match.

+ +

For example, /<.*?>/ matches "<foo>" in "<foo> <bar>", whereas /<.*>/ matches "<foo> <bar>".

+ +

Quantifiers without ? are said to be greedy. Those with ? are called "non-greedy".

+
Assertions
CharacterMeaning
x(?=y) +

Matches x only if x is followed by y.

+ +

For example, /Jack(?=Sprat)/ matches "Jack" only if it is followed by "Sprat".
+ /Jack(?=Sprat|Frost)/ matches "Jack" only if it is followed by "Sprat" or "Frost". However, neither "Sprat" nor "Frost" is part of the match results.

+
x(?!y) +

Matches x only if x is not followed by y.

+ +

For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point.
+ /\d+(?!\.)/.exec('3.141') matches "141" but not "3.141".

+
+ +

Properties

+ +
+
{{jsxref("RegExp.prototype")}}
+
Allows the addition of properties to all objects.
+
RegExp.length
+
The value of RegExp.length is 2.
+
{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}
+
The constructor function that is used to create derived objects.
+
{{jsxref("RegExp.lastIndex")}}
+
The index at which to start the next match.
+
+ +

Methods

+ +

The global RegExp object has no methods of its own, however, it does inherit some methods through the prototype chain.

+ +

RegExp prototype objects and instances

+ +

Properties

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Properties')}}
+ +

Methods

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Methods')}}
+ +

Examples

+ +

Using a regular expression to change data format

+ +

The following script uses the {{jsxref("String.prototype.replace()", "replace()")}} method of the {{jsxref("Global_Objects/String", "String")}} instance to match a name in the format first last and output it in the format last, first. In the replacement text, the script uses $1 and $2 to indicate the results of the corresponding matching parentheses in the regular expression pattern.

+ +
var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);
+
+ +

This displays "Smith, John".

+ +

Using regular expression to split lines with different line endings/ends of line/line breaks

+ +

The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.

+ +
var text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end';
+var lines = text.split(/\r\n|\r|\n/);
+console.log(lines); // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]
+
+ +

Note that the order of the patterns in the regular expression matters.

+ +

Using regular expression on multiple lines

+ +
var s = 'Please yes\nmake my day!';
+s.match(/yes.*day/);
+// Returns null
+s.match(/yes[^]*day/);
+// Returns 'yes\nmake my day'
+
+ +

Using a regular expression with the sticky flag

+ +

The sticky flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at {{jsxref("RegExp.prototype.lastIndex")}}.

+ +
var str = '#foo#';
+var regex = /foo/y;
+
+regex.lastIndex; // 0
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex is taken into account with sticky flag)
+regex.lastIndex; // 0 (reset after match failure)
+ +

Regular expression and Unicode characters

+ +

As mentioned above, \w or \W only matches ASCII based characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_". To match characters from other languages such as Cyrillic or Hebrew, use \uhhhh, where "hhhh" is the character's Unicode value in hexadecimal. This example demonstrates how one can separate out Unicode characters from a word.

+ +
var text = 'Образец text на русском языке';
+var regex = /[\u0400-\u04FF]+/g;
+
+var match = regex.exec(text);
+console.log(match[0]);        // logs 'Образец'
+console.log(regex.lastIndex); // logs '7'
+
+var match2 = regex.exec(text);
+console.log(match2[0]);       // logs 'на' [did not log 'text']
+console.log(regex.lastIndex); // logs '15'
+
+// and so on
+
+ +

Here's an external resource for getting the complete Unicode block range for different scripts: Regexp-unicode-block.

+ +

Extracting sub-domain name from URL

+ +
var url = 'http://xxx.domain.com';
+console.log(/[^.]+/.exec(url)[0].substr(7)); // logs 'xxx'
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}{{Spec2('ES6')}}The RegExp constructor no longer throws when the first argument is a RegExp and the second argument is present. Introduces Unicode and sticky flags.
{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sticky flag ("y"){{CompatChrome("39")}} [1]{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Unicode flag ("u"){{CompatChrome("50")}}{{CompatGeckoDesktop("46")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
RegExp(RegExp object, flags) no longer throws{{CompatNo}}{{CompatGeckoDesktop("39")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sticky flag ("y"){{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Unicode flag ("u"){{CompatUnknown }}{{CompatGeckoMobile("46")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
RegExp(RegExp object, flags) no longer throws{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("39")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Behind a flag.

+ +

Gecko-specific notes

+ +

Starting with Gecko 34 {{geckoRelease(34)}}, in the case of a capturing group with quantifiers preventing its exercise, the matched text for a capturing group is now undefined instead of an empty string:

+ +
// Firefox 33 or older
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:'
+
+// Firefox 34 or newer
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:undefined'
+
+ +

Note that due to web compatibility, RegExp.$N will still return an empty string instead of undefined ({{bug(1053944)}}).

+ +

See also

+ + diff --git a/files/uk/web/javascript/reference/global_objects/regexp/source/index.html b/files/uk/web/javascript/reference/global_objects/regexp/source/index.html new file mode 100644 index 0000000000..d2462b3ac0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/source/index.html @@ -0,0 +1,170 @@ +--- +title: RegExp.prototype.source +slug: Web/JavaScript/Reference/Global_Objects/RegExp/source +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source +--- +
{{JSRef}}
+ +

Властивість sourse повертає  стороку, що містить текст шаблону регулярного виразу, і він немає містити два слеша з обох сторін, а також будь-які прапори регулярного виразу.

+ +
{{js_property_attributes(0, 0, 1)}}
+ +

Приклад

+ +

Використовування source

+ +
var regex = /fooBar/ig;
+
+console.log(regex.source); // "fooBar", не містить /.../ і прапори"ig".
+
+ +

Порожні регулярні вирази і як уникнути проблем

+ +

Починаючи з ECMAScript 5, властивість джерела більше не повертає порожній рядок для порожніх регулярних виразів. Замість цього, рядок «(? :)» повертається. Крім того, лінія термінатори (such as "\n") врятувалися в даний час.

+ +
new RegExp().source; // "(?:)"
+
+new RegExp('\n').source === '\n';  // true до ES5
+new RegExp('\n').source === '\\n'; // true,починаючи з ES5
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціїСтатусКоментарій
ECMAScript 3 {{Spec2('Стандарт')}}Первісне визначення. Реалізовано в JavaScript 1.2. JavaScript 1.5: є властивістю примірника {{jsxref("RegExp")}} а не {{jsxref("RegExp")}} об'єкта.
{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}{{Spec2('Стандарт')}}Властивість source для порожніх регулярних виразів тепер повертає "(?:)" замість порожнього рядка. Визначення для відповідної поведінки було додано.
{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}{{Spec2('Стандарт')}}Source зараз є властивістю доступу, а не власною властивістю даних.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}{{Spec2('Кандидат в рекомендації')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобливістьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
"(?:)" для порожніх регулярних виразів{{CompatNo}}{{CompatGeckoDesktop(38)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Запобігання(вирішення){{CompatUnknown}}{{CompatGeckoDesktop(38)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Прототип оцінювач властивості{{CompatUnknown}}{{CompatGeckoDesktop(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобливістьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
"(?:)" для порожніх регулярних виразів{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(38)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Запобігання(вирішення){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(38)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Прототип оцінювач властивості{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/regexp/test/index.html b/files/uk/web/javascript/reference/global_objects/regexp/test/index.html new file mode 100644 index 0000000000..19f6e0ad21 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/test/index.html @@ -0,0 +1,151 @@ +--- +title: RegExp.prototype.test() +slug: Web/JavaScript/Reference/Global_Objects/RegExp/test +tags: + - Регулярні Вирази + - Рекомендації + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test +--- +
{{JSRef}}
+ +

Метод test() виконує пошук на збіг між регулярним виразом і заданим рядком. Повертає true або false.

+ +

Синтакс

+ +
regexObj.test(str)
+ +

Параметри

+ +
+
str
+
Рядок, що перевіряється регулярним виразом.
+
+ +

Повертає

+ +

true якщо є збіг між регулярним виразом та вказаним рядком; інакше, false.

+ +

Опис

+ +

Використовуйте test() щоразу  коли ви хочете знати чи патерн знайдено у рядку (схоже до методу {{jsxref("String.prototype.search()")}}, різниця в тому, що test() повертає булеве значення, коли search() - індекс (якщо знайдено), інакше -1 (якщо не знайдено); якщо потрібно більше інформації (але виконання буде повільніше) використовуйте метод {{jsxref("RegExp.prototype.exec()", "exec()")}} (схожий до методу  {{jsxref("String.prototype.match()")}} ). Як і {{jsxref("RegExp.prototype.exec()", "exec()")}} (або в комбінації з ним), test(), що викликаний декілька разів на одному і тому ж глобальному екземплярі регулярного виразу, буде швидшим  ніж попередні виконування.

+ +

Приклади

+ +

Використання test()

+ +

Простий приклад, що перевіряє чи "hello" знаходиться на самому початку рядка , повертає булеве значення.

+ +
var str = 'hello world!';
+var result = /^hello/.test(str);
+console.log(result); // true
+
+ +

Наступний приклад виводить у лог сповіщення результату проходження тесту:

+ +
function testinput(re, str) {
+  var midstring;
+  if (re.test(str)) {
+    midstring = ' contains ';
+  } else {
+    midstring = ' does not contain ';
+  }
+  console.log(str + midstring + re.source);
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}{{Spec2('ESDraft')}} 
+ +

Сумісність у браузерах

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Замітки щодо Gecko

+ +

До версії Gecko 8.0 {{geckoRelease("8.0")}}, test() було реалізовано невірно; коли він визивався без параметрів, то звірявся зі значенням попереднього вводу (властивістю RegExp.input), а не  з рядком "undefined". Це виправлено; зараз /undefined/.test() вірно повертає значення true, а не error, як це було раніше.

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/set/index.html b/files/uk/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..6fdd6fd9b2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,242 @@ +--- +title: Set +slug: Web/JavaScript/Reference/Global_Objects/Set +tags: + - set + - сет +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +
{{JSRef}}
+ +
Об'єкт Set дає можливість зберігати значення будь-якого типу, будь то примітивні значення чи посилання на об'єкт.
+ +
{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}
+ + + +

Синтаксис

+ +
new Set([iterable]);
+ +

Параметри

+ +
+
iterable
+
Якщо передається об'єкт, що ітерується, то всі його елементи будуть додані до нового Set. Якщо цей параметр не визначений або має значення null, тоді новий Set буде порожнім.
+
+ +

Значення, що повертається

+ +

Новий об'єкт Set.

+ +

Опис

+ +

Об'єкти Set  - це колекції унікальних значень. Ви можете перебирати елементи Set у порядку вставки. Одне значення в Set може зустрічатися лише один раз; воно є унікальним в колекції Set.

+ +

Еквівалентність значення

+ +

Через те, що кожне значення в Set має бути унікальним, еквівалентність значення буде перевірена. У попередній версії специфікації ECMAScript це не було базовано на такому самому алгоритмі, що використовує оператор ===. Конкретніше, для Set +0 (що є суворо рівним -0 ) та -0 є різними значеннями. Проте, це було змінено у специфікації ECMAScript 2015. Дивіться більш детально про "Еквівалентність значень -0 і 0" у таблиці браузерної сумісності.

+ +

До того ж, NaN та undefined також можуть зберігатися в SetNaN вважається тим самим, що і NaN (хоча, NaN !== NaN ).

+ +

Властивості

+ +
+
Set.length
+
Значення властивості length є 0.
+
{{jsxref("Set.@@species", "get Set[@@species]")}}
+
Функція-конструктор, що використовується для строрення derived об'єктів.
+
{{jsxref("Set.prototype")}}
+
Представляє прототип для конструктора Set. Дозволяє додавання властивостей до всіх Set об'єктів.
+
+ +

Set instances

+ +

Усі Set сутності наслідуються від {{jsxref("Set.prototype")}}.

+ +

Властивості

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}

+ +

Методи

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}

+ +

Приклади

+ +

Використання об'єкта  Set

+ +
var mySet = new Set();
+
+mySet.add(1); // Set { 1 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add('some text'); // Set { 1, 5, 'some text' }
+var o = {a: 1, b: 2};
+mySet.add(o);
+
+mySet.add({a: 1, b: 2}); // o має посилання на інший об'єкт, тому це ок
+
+mySet.has(1); // true
+mySet.has(3); // false, 3 не було додано в Set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has('Some Text'.toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 5
+
+mySet.delete(5); // видаляє 5 з set
+mySet.has(5);    // false, 5 було видалено
+
+mySet.size; // 4, ми щойно видалили одне значення
+console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}
+ +

Перебирання Set

+ +
// перебираємо елементи в set
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet) console.log(item);
+
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet.keys()) console.log(item);
+
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet.values()) console.log(item);
+
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+//(key та value тут мають одне й те саме значення)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// конвертує об'єкт Set в об'єкт Array за допомогою Array.from
+var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]
+
+// наступне також буде працювати, якщо буде запущено в HTML документі
+mySet.add(document.body);
+mySet.has(document.querySelector('body')); // true
+
+// конвертація між Set та Array
+mySet2 = new Set([1, 2, 3, 4]);
+mySet2.size; // 4
+[...mySet2]; // [1, 2, 3, 4]
+
+// Перетинання може симулюватися через
+var intersection = new Set([...set1].filter(x => set2.has(x)));
+
+// різниця може бути симульована через
+var difference = new Set([...set1].filter(x => !set2.has(x)));
+
+// Перебирання елементів Set за допомогою forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4
+ +

Імплементація базових операцій set

+ +
Set.prototype.isSuperset = function(subset) {
+    for (var elem of subset) {
+        if (!this.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+Set.prototype.union = function(setB) {
+    var union = new Set(this);
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection = function(setB) {
+    var intersection = new Set();
+    for (var elem of setB) {
+        if (this.has(elem)) {
+            intersection.add(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference = function(setB) {
+    var difference = new Set(this);
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+//Приклади
+var setA = new Set([1, 2, 3, 4]),
+    setB = new Set([2, 3]),
+    setC = new Set([3, 4, 5, 6]);
+
+setA.isSuperset(setB); // => true
+setA.union(setC); // => Set [1, 2, 3, 4, 5, 6]
+setA.intersection(setC); // => Set [3, 4]
+setA.difference(setC); // => Set [1, 2]
+
+
+ +

Зв'язок з об'єктами Array

+ +
var myArray = ['value1', 'value2', 'value3'];
+
+// Використовуйте звичайний конструктор Set для трансформації Array у Set
+var mySet = new Set(myArray);
+
+mySet.has('value1'); // повертає true
+
+// Використовуйте оператор spread для трансформації Set у Array.
+console.log([...mySet]); // Виведе у точності такий самий Array як і myArray
+ +

Зв'язок зі Strings

+ +
var text = 'India';
+
+var mySet = new Set(text);  // Set {'I', 'n', 'd', 'i', 'a'}
+mySet.size;  // 5
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-set-objects', 'Set')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Set")}}

+ +

Дівіться також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html new file mode 100644 index 0000000000..22399ee081 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html @@ -0,0 +1,78 @@ +--- +title: 'String.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator +tags: + - ECMAScript 2015 + - JavaScript + - String + - Ітератор + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator +--- +
{{JSRef}}
+ +

Метод [@@iterator]() повертає новий об'єкт Iterator, який перебирає коди символів рядкового значення, повертаючи код кожного символа у вигляді рядкового значення.

+ +
{{EmbedInteractiveExample("pages/js/string-iterator.html")}}
+ + + +

Синтаксис

+ +
str[Symbol.iterator]
+ +

Значення, що повертається

+ +

Новий об'єкт Iterator.

+ +

Приклади

+ +

Використання [@@iterator]()

+ +
var str = 'A\uD835\uDC68';
+
+var strIter = str[Symbol.iterator]();
+
+console.log(strIter.next().value); // "A"
+console.log(strIter.next().value); // "\uD835\uDC68"
+
+ +

Використання [@@iterator]() з for..of

+ +
var str = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A';
+
+for (var v of str) {
+  console.log(v);
+}
+// "A"
+// "\uD835\uDC68"
+// "B"
+// "\uD835\uDC69"
+// "C"
+// "\uD835\uDC6A"
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.@@iterator")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/anchor/index.html b/files/uk/web/javascript/reference/global_objects/string/anchor/index.html new file mode 100644 index 0000000000..aa1424790a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/anchor/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.anchor() +slug: Web/JavaScript/Reference/Global_Objects/String/anchor +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод anchor() створює рядок, який складається з початкового тегу <a name="...">, далі якийсь текст, а за ним кінцевий тег </a>.

+ +
+

Не використовуйте цей метод. Використовуйте замість нього DOM API. Також специфікація HTML більше не дозволяє елементу <a> мати атрибут name, тому цей метод навіть не створює коректну розмітку.

+
+ +

Синтаксис

+ +
str.anchor(name)
+ +

Параметри

+ +
+
name
+
Рядок, що відображає атрибут name тега, що буде створений.
+
+ +

Значення, що повертається

+ +

Рядок, що складається з початкового тегу  <a name="name">, далі текст str, і після нього кінцевий тег </a>.

+ +

Опис

+ +

Не використовуйте цей метод. Використовуйте замість нього DOM API. Також специфікація HTML більше не дозволяє елементу <a> мати артибут name, тому цей метод навіть не створює коректну розмітку.

+ +

Приклади

+ +

Використання anchor()

+ +
var myString = 'Зміст';
+
+document.body.innerHTML = myString.anchor('contents_anchor');
+
+ +

створить наступний HTML:

+ +
<a name="contents_anchor">Зміст</a>
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}
+ +

Поліфіл

+ +
if (!String.prototype.anchor)
+    String.prototype.anchor = function(x){
+        return '<a name="' + x + '">' + this + '</a>'
+    }
+
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.anchor")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/big/index.html b/files/uk/web/javascript/reference/global_objects/string/big/index.html new file mode 100644 index 0000000000..40f46db96d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/big/index.html @@ -0,0 +1,73 @@ +--- +title: String.prototype.big() +slug: Web/JavaScript/Reference/Global_Objects/String/big +tags: + - JavaScript + - String + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/big +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод big() створює HTML-елемент <big>, який відображає рядок великим шрифтом.

+ +
+

Примітка щодо використання: Елемент <big> був прибраний у HTML5 та не має більше використовуватись. Замість нього веб-розробникам варто використовувати властивості CSS.

+
+ +

Синтаксис

+ +
str.big()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <big>.

+ +

Опис

+ +

Метод big() вбудовує рядок у тег <big>: "<big>str</big>".

+ +

Приклади

+ +

Використання big()

+ +

Наступний приклад використовує рядкові методи, щоб змінити розмір рядка:

+ +
var worldString = 'Привіт';
+
+console.log(worldString.small());     // <small>Привіт</small>
+console.log(worldString.big());       // <big>Привіт</big>
+console.log(worldString.fontsize(7)); // <fontsize=7>Привіт</fontsize>
+
+ +

З об'єктом element.style ви можете отримати атрибут елемента style та маніпулювати ним в загальному стилі, наприклад:

+ +
document.getElementById('yourElemId').style.fontSize = '2em';
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.big")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/blink/index.html b/files/uk/web/javascript/reference/global_objects/string/blink/index.html new file mode 100644 index 0000000000..2c562cc2ca --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/blink/index.html @@ -0,0 +1,70 @@ +--- +title: String.prototype.blink() +slug: Web/JavaScript/Reference/Global_Objects/String/blink +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/blink +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод blink() створює HTML-елемент <blink>, який виводить текст, що блимає.

+ +
+

Застереження: Блимаючий текст не схвалюється у кількох стандартах доступності. Сам елемент <blink> нестандартний та не рекомендований!

+
+ +

Синтаксис

+ +
str.blink()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <blink>.

+ +

Опис

+ +

Метод blink() вбудовує рядок у тег <blink>: "<blink>str</blink>".

+ +

Приклади

+ + + +

Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:

+ +
var worldString = 'Привіт';
+
+console.log(worldString.blink());   // <blink>Привіт</blink>
+console.log(worldString.bold());    // <b>Привіт</b>
+console.log(worldString.italics()); // <i>Привіт</i>
+console.log(worldString.strike());  // <strike>Привіт</strike>
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.blink")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/bold/index.html b/files/uk/web/javascript/reference/global_objects/string/bold/index.html new file mode 100644 index 0000000000..1f0ddd661d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/bold/index.html @@ -0,0 +1,66 @@ +--- +title: String.prototype.bold() +slug: Web/JavaScript/Reference/Global_Objects/String/bold +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/bold +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод bold() створює HTML-елемент <b>, який відображає рядок жирним шрифтом.

+ +

Синтаксис

+ +
str.bold()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <b>.

+ +

Опис

+ +

Метод bold() вбудовує рядок у тег <b> : "<b>str</b>".

+ +

Приклади

+ +

Використання bold()

+ +

Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:

+ +
var worldString = 'Привіт';
+
+console.log(worldString.blink());   // <blink>Привіт</blink>
+console.log(worldString.bold());    // <b>Привіт</b>
+console.log(worldString.italics()); // <i>Привіт</i>
+console.log(worldString.strike());  // <strike>Привіт</strike>
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.bold")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/charat/index.html b/files/uk/web/javascript/reference/global_objects/string/charat/index.html new file mode 100644 index 0000000000..004400895c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/charat/index.html @@ -0,0 +1,316 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Reference/Global_Objects/String/charAt +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +
{{JSRef}}
+ +

Метод charAt() створює і вертає підрядок, що міститиме лише один символ (кодова одиниця UTF-16), розташований у рядку із зазначеним зсувом.

+ +

Синтаксис

+ +
str.charAt(index)
+ +

Параметри

+ +
+
index
+
Індекс символа у рядку, ціле число від 0 до str.length - 1. Якщо не зазначено (метод викликано без аргументів), метод повертає перший символ рядка.
+
+ +

Вертає

+ +

Підрядок з одного символа (одна кодова одиниця UTF-16) отриманого за вказаним індексом, або порожній рядок, якщо index вказує за межі рядка (менше 0 чи понад str.length - 1).

+ +

Опис

+ +

Кожен символ рядка має індекс, що зростає зліва направо. Лік починається від нуля, тож перший символ має індекс 0, а останній — str.length - 1. Якщо зазначено індекс, що за ці межі виходить, метод chartAt() вертає порожній рядок.

+ +

Якщо індекс не зазначено для метода charAt(), буде задіяно типове значення 0.

+ +

Приклади

+ +

Виведення різних символів рядка

+ +

Цей приклад дістає та виводить до консолі різні символи рядка «Хай йому грець»:

+ +
var str = 'Хай йому грець';
+
+// Індекс не зазначено, буде неявно задіяно значення 0
+console.log(str.charAt());    // виводить "Х"
+
+console.log(str.charAt(0));   // виводить "Х"
+console.log(str.charAt(1));   // виводить "а"
+console.log(str.charAt(2));   // виводить "й"
+
+console.log(str.charAt(-1));  // виводить ""
+console.log(str.charAt(99));  // виводить ""
+
+ +

Отримання цілого символа

+ +

Позаяк деякі символи в UTF-16 подаються двома кодовими одиницями, слід зважати на те, що метод charAt() дістає їх з рядка нарізно, а отже задля отримання цілого символа доведеться їх об'єднати.

+ +

Наведений нижче код призначено для послідовної обробки рядків, що можуть містити такі складені символи (не належать до Основної Багатомовної Площини (ОБП) Unicode):

+ +
// Символи поза ОБП можна було б вжити безпосередньо
+var str = 'A \uD87E\uDC04 Z';
+
+for (var i = 0, chr; i < str.length; i++) {
+  // Просто додайте цю перевірку на початку кожного циклу з перебору символів
+  // і завжди матимете складені символи повністю, а не половини складеного
+  // символа нарізно.
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  }
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  // Значення зсуву «i» за межами рядка
+  if (Number.isNaN(code)) {
+    return '';
+  }
+  if (code < 0xD800 || code > 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи).
+  if (0xD800 <= code && code <= 0xDBFF) {
+    if (str.length <= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+
+    var next = str.charCodeAt(i + 1);
+    if (0xDC00 > next || next > 0xDFFF) {
+      throw 'High surrogate without following low surrogate';
+    }
+    return str.charAt(i) + str.charAt(i + 1);
+  }
+
+  // Молодша половина (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // Можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи.
+  if (0xD800 > prev || prev > 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+
+  // Молодшу половину було оброблено разом із старшою, тож тепер
+  // ми її пропускаємо.
+  return false;
+}
+
+ +

У середовищі ECMAScript 2016, що підтримує присвоєння {{jsxref("Operators/Деструктуризація", "деструктурованням")}}, можна трохи поліпшити легкочитність коду, повертаючи з функції також оновлене (якщо останній символ був складений) значення зсуву:

+ +
// Символи поза ОБП можна було б вжити безпосередньо
+var str = 'A\uD87E\uDC04Z';
+for (var i = 0, chr; i < str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Просто додайте цей виклик на початку кожного циклу з перебору символів
+  // і завжди матимете складені символи повністю, а не половини складеного
+  // символа нарізно.
+  // Значення «i» буде оновлено, якщо метод натрапить на складений символ.
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  // Значення зсуву «i» за межами рядка
+  if (Number.isNaN(code)) {
+    return ['', i];
+  }
+  if (code < 0xD800 || code > 0xDFFF) {
+   / / Звичайний символ, просто лишаємо все як є.
+    return [str.charAt(i), i];
+  }
+
+  // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи).
+  if (0xD800 <= code && code <= 0xDBFF) {
+    if (str.length <= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+    if (0xDC00 > next || next > 0xDFFF) {
+      throw 'High surrogate without following low surrogate';
+    }
+
+    // Зібрати складений символ докупи й повернути збільшений зсув
+    return [str.charAt(i) + str.charAt(i + 1), i + 1];
+  }
+
+  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // Можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи.
+  if (0xD800 > prev || prev > 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+
+  // Повернути натомість наступний символ й повернути збільшений зсув
+  return [str.charAt(i + 1), i + 1];
+}
+
+ +

Також можна навести більш витончене рішення, хоча дещо менш гнучке:

+ +
// Просто перебираємо символи рядка за допомогою forEachChar()
+forEachChar('A\uD87E\uDC04Z', function(c) {
+  console.log(c);
+});
+
+function forEachChar(string, predicate) {
+  for (var i = 0; i < string.length; i++) {
+    var code = string.charCodeAt(i);
+    var value;
+
+    // Звичайний символ, просто лишаємо як є.
+    if (code < 0xD800 || code > 0xDFFF) {
+      value = string.charAt(i);
+    } else {
+      // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити
+      // «старші половини приватного вжитку» як окремі символи).
+      if (0xD800 <= code && code <= 0xDBFF) {
+        if (string.length <= (i + 1)) {
+          throw 'High surrogate without following low surrogate';
+        }
+
+        var next = string.charCodeAt(i + 1);
+        if (0xDC00 > next || next > 0xDFFF) {
+          throw 'High surrogate without following low surrogate';
+        }
+
+        value = string.charAt(i) + string.charAt(i + 1);
+        i++;
+      } else {
+        // Молодша половина (0xDC00 <= code && code <= 0xDFFF)
+        throw 'Low surrogate without preceding high surrogate';
+      }
+    }
+
+    // Перебір можна перервати, повернувши з функції-присудка значення false
+    if (false === predicate.call(string, value)) {
+      return;
+    }
+  }
+}
+
+ +

Виправлений charAt() з урахуванням складених символів

+ +

Приклад нижче наводить функцію fixedCharAt(), яка не лише злучає половинки складених символів, а ще й змінює індексацію символів таким чином, що index позначає порядковий номер (лік від нуля, як завжди) не кодової одиниці (як для звичайного charAt()), а саме повного символа.

+ +

Втім, слід зважати, що це рішення є вкрай неоптимальним, якщо користувати його для перебору всього рядка:

+ +
function fixedCharAt(string, index) {
+  var isExpectingLowSurrogate = false;
+  var charIndex = 0;
+  var i = 0;
+
+  // За межами рядка.
+  if (index < 0 || index >= string.length) {
+    return '';
+  }
+
+  while (i < string.length && charIndex < index) {
+    if (isHighSurrogateAt(string, i) && isLowSurrogateAt(string, i + 1)) {
+      i++;
+    }
+
+    i++;
+    charIndex++;
+  }
+
+  if (i < string.length) {
+    if (isHighSurrogateAt(string, i) && isLowSurrogateAt(string, i + 1)) {
+      return string.charAt(i) + string.charAt(i + 1);
+    } else {
+      return string.charAt(i);
+    }
+  }
+
+  return '';
+}
+
+function isHighSurrogateAt(string, index) {
+  var code = string.charCodeAt(index);
+  return 0xD800 <= code && code <= 0xDBFF;
+}
+
+function isLowSurrogateAt(string, index) {
+  var code = string.charCodeAt(index);
+  return 0xDC00 <= code && code <= 0xDFFF;
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкова виознака.
{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.charAt")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html new file mode 100644 index 0000000000..3ed3a4c450 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html @@ -0,0 +1,161 @@ +--- +title: String.prototype.charCodeAt() +slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +tags: + - JavaScript + - String + - Unicode + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +--- +
{{JSRef}}
+ +

Метод charCodeAt() вертає ціле число в діапазоні між 0 та 65535, що відображає кодову одиницю UTF-16 за наданим індексом.

+ +
{{EmbedInteractiveExample("pages/js/string-charcodeat.html", "shorter")}}
+ + + +

Кодова одиниця UTF-16 співпадає з кодом символа Юнікоду для кодів символів, які можуть бути представлені єдиною кодовою одиницею UTF-16. Якщо код символа Юнікоду не може бути представлений єдиною кодовою одиницею UTF-16 (бо його значення більше за 0xFFFF), тоді повернена кодова одиниця буде першою частиною сурогатної пари для коду символа. Якщо вам потрібен весь код символа, використовуйте {{jsxref("Global_Objects/String/codePointAt", "codePointAt()")}}.

+ +

Синтаксис

+ +
str.charCodeAt(index)
+ +

Параметри

+ +
+
index
+
Ціле число, що більше або дорівнює 0 та менше за довжину рядка. Якщо index не є числом, він за замовчуванням прирівнюється до 0.
+
+ +

Значення, що повертається

+ +

Число, що відображає значення кодової одиниці UTF-16 для символа за наданим індексом index. Якщо index знаходиться за межами діапазону, charCodeAt() повертає {{jsxref("Global_Objects/NaN", "NaN")}}.

+ +

Опис

+ +

Коди символів Юнікоду знаходяться в діапазоні від 0 до 1114111 (0x10FFFF). Перші 128 кодів символів Юнікоду повністю співпадають з кодуванням символів ASCII. (Інформацію щодо Юнікоду дивіться у Посібнику JavaScript.)

+ +
+

Заувага: charCodeAt() завжди поверне значення, менше за 65536. Тому що більші коди символів відображаються парою (з меншим значенням) "сурогатних" псевдосимволів, що складають реальний символ.

+ +

Тому, щоб дослідити (чи відтворити) повний символ для значень окремих символів від 65536 та більше, для таких символів необхідно отримувати не лише charCodeAt(i), але також charCodeAt(i+1) (ніби маніпулюючи рядком з двох літер), або використовувати замість цього codePointAt(i). Дивіться приклади 2 та 3 (нижче).

+
+ +

charCodeAt() повертає {{jsxref("Global_Objects/NaN", "NaN")}}, якщо наданий індекс менший за 0, або якщо він дорівнює чи перевищує значення довжини рядка.

+ +

Зворотня сумісність: У історичних версіях (наприклад, JavaScript 1.2) метод charCodeAt() вертає число, що вказує значення набору символів ISO-Latin-1 для символа за наданим індексом. Набір символів ISO-Latin-1 знаходиться в діапазоні від 0 до 255. Перші 0-127 повністю співпадають з набором символів ASCII.

+ +

Приклади

+ +

Використання charCodeAt()

+ +

Наступний приклад вертає 65, значення Юнікоду для A.

+ +
'ABC'.charCodeAt(0)  // вертає 65
+
+ +

Виправлення charCodeAt() для обробки символів не базової багатомовної площини, якщо їхня наявність раніше у рядку невідома

+ +

Ця версія може використовуватись для циклів та подібного, коли невідомо, чи були присутні символи не з ББП до вказаної позиції.

+ +
function fixedCharCodeAt(str, idx) {
+  // напр. fixedCharCodeAt('\uD800\uDC00', 0); // 65536
+  // напр. fixedCharCodeAt('\uD800\uDC00', 1); // false
+  idx = idx || 0;
+  var code = str.charCodeAt(idx);
+  var hi, low;
+
+  // Високий сурогат (може міняти останнє шістнадцяткове значення на 0xDB7F
+  // для обробки високих приватних сурогатів
+  // як єдиних символів)
+  if (0xD800 <= code && code <= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    if (isNaN(low)) {
+      throw 'Високий сурогат без наступного ' +
+        'низького сурогату у fixedCharCodeAt()';
+    }
+    return (
+      (hi - 0xD800) * 0x400) +
+      (low - 0xDC00) + 0x10000;
+  }
+  if (0xDC00 <= code && code <= 0xDFFF) { // Низький сурогат
+    // Ми вертаємо false, щоб дозволити циклам пропустити
+    // цю ітерацію, бо мали вже обробити
+    // високий сурогат вище у попередній ітерації
+    return false;
+    // hi = str.charCodeAt(idx - 1);
+    // low = code;
+    // return ((hi - 0xD800) * 0x400) +
+    //   (low - 0xDC00) + 0x10000;
+  }
+  return code;
+}
+
+ +

Виправлення charCodeAt() для обробки символів не базової багатомовної площини, якщо їхня наявність раніше у рядку відома

+ +
function knownCharCodeAt(str, idx) {
+  str += '';
+  var code,
+      end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 < idx) {
+      idx++;
+    }
+    else {
+      break;
+    }
+  }
+
+  if (idx >= end || idx < 0) {
+    return NaN;
+  }
+
+  code = str.charCodeAt(idx);
+
+  var hi, low;
+  if (0xD800 <= code && code <= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    // Пройти на один далі, оскільки один з "символів"
+    // є частиною сурогатної пари
+    return ((hi - 0xD800) * 0x400) +
+      (low - 0xDC00) + 0x10000;
+  }
+  return code;
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.charCodeAt")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html b/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html new file mode 100644 index 0000000000..0a917f5885 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html @@ -0,0 +1,142 @@ +--- +title: String.prototype.codePointAt() +slug: Web/JavaScript/Reference/Global_Objects/String/codePointAt +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt +--- +
{{JSRef}}
+ +

Метод codePointAt() вертає невід'ємне ціле число, яке є значенням коду символу Юнікоду.

+ +
{{EmbedInteractiveExample("pages/js/string-codepointat.html","shorter")}}
+ + + +

Синтаксис

+ +
str.codePointAt(pos)
+ +

Параметри

+ +
+
pos
+
Позиція елемента у str, код символа з якої треба повернути.
+
+ +

Значення, що повертається

+ +

Число, що відображає значення коду символу з наданої позиції pos. Якщо на позиції pos немає елемента, вертається {{jsxref("undefined")}}.

+ +

Опис

+ +

Якщо на вказаній позиції немає елемента, повертається {{jsxref("undefined")}}. Якщо на позиції pos не починається сурогатна пара UTF-16, то повертається кодова одиниця позиції pos.

+ +

Приклади

+ +

Використання codePointAt()

+ +
'ABC'.codePointAt(1)           // 66
+'\uD800\uDC00'.codePointAt(0)  // 65536
+
+'XYZ'.codePointAt(42)          // undefined
+
+ +

Цикл з codePointAt()

+ +
for (let codePoint of '\ud83d\udc0e\ud83d\udc71\u2764') {
+   console.log(codePoint.codePointAt(0).toString(16))
+}
+// '1f40e', '1f471', '2764' 
+
+ +

Поліфіл

+ +

Наступний код додає у рядки функцію codePointAt() згідно специфікації ECMAScript 2015 для переглядачів без вбудованої підтримки.

+ +
/*! https://mths.be/codepointat v0.2.0 автор @mathias */
+if (!String.prototype.codePointAt) {
+  (function() {
+    'use strict'; // необхідно для підтримки `apply`/`call` з `undefined`/`null`
+    var defineProperty = (function() {
+     // IE 8 підтримує `Object.defineProperty` лише на DOM-елементах
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) && $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var codePointAt = function(position) {
+      if (this == null) {
+        throw TypeError();
+      }
+      var string = String(this);
+      var size = string.length;
+      // `ToInteger`
+      var index = position ? Number(position) : 0;
+      if (index != index) { // краще `isNaN`
+        index = 0;
+      }
+      // Врахування індексів за межами існуючих значень:
+      if (index < 0 || index >= size) {
+        return undefined;
+      }
+      // Отримати першу кодову одиницю
+      var first = string.charCodeAt(index);
+      var second;
+      if ( // перевірити, чи вона є початком сурогатної пари
+        first >= 0xD800 && first <= 0xDBFF && // високий сурогат
+        size > index + 1 // існує наступна кодова одиниця
+      ) {
+        second = string.charCodeAt(index + 1);
+        if (second >= 0xDC00 && second <= 0xDFFF) { // низький сурогат
+          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        }
+      }
+      return first;
+    };
+    if (defineProperty) {
+      defineProperty(String.prototype, 'codePointAt', {
+        'value': codePointAt,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.prototype.codePointAt = codePointAt;
+    }
+  }());
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.codePointAt")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/concat/index.html b/files/uk/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..4d3b67b58d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,89 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/String/concat +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +
{{JSRef}}
+ +

Метод concat() об'єднує рядкові аргументи з рядком, що викликав метод, та повертає новий рядок.

+ +
{{EmbedInteractiveExample("pages/js/string-concat.html")}}
+ + + +

Синтаксис

+ +
str.concat(str2 [, ...strN])
+ +

Параметри

+ +
+
str2 [, ...strN]
+
Рядки, які треба об'єднати з str.
+
+ +

Значення, що повертається

+ +

Новий рядок, що містить поєднаний текст з наданих рядків.

+ +

Опис

+ +

Функція concat() об'єднує рядкові аргументи з рядком, що викликав функцію, та повертає новий рядок. Зміни у початковому рядку чи у поверненому рядку не впливають один на одного.

+ +

Якщо аргументи не належать до рядкового типу, вони перетворюються на рядкові значення перед об'єднанням.

+ +

Приклади

+ +

Використання concat()

+ +

Наступний приклад об'єднує рядки у новий рядок.

+ +
let hello = 'Привіт, '
+console.log(hello.concat('Кевіне', '. Гарного дня.'))
+// Привіт, Кевіне. Гарного дня.
+
+let greetList = ['Привіт', ' ', 'Віка', '!']
+"".concat(...greetList)  // "Привіт, Віка!"
+
+"".concat({})    // [object Object]
+"".concat([])    // ""
+"".concat(null)  // "null"
+"".concat(true)  // "true"
+"".concat(4, 5)  // "45"
+
+
+ +

Продуктивність

+ +

Настійно рекомендується використовувати {{jsxref("Operators/Оператори_присвоєння", "оператори присвоєння", "", 1)}} (+, +=) замість методу concat()
+ Згідно з цим тестуванням продуктивності, {{jsxref("Operators/Оператори_присвоєння", "оператори присвоєння", "", 1)}} в декілька раз швидші.

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.concat")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/endswith/index.html b/files/uk/web/javascript/reference/global_objects/string/endswith/index.html new file mode 100644 index 0000000000..e387abf56c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/endswith/index.html @@ -0,0 +1,90 @@ +--- +title: String.prototype.endsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/endsWith +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith +--- +
{{JSRef}}
+ +

Метод endsWith() визначає, чи завершується рядок символами вказаного рядка, повертаючи, відповідно, true чи false.

+ +
{{EmbedInteractiveExample("pages/js/string-endswith.html")}}
+ + + +

Синтаксис

+ +
str.endsWith(searchString[, length])
+ +

Параметри

+ +
+
searchString
+
Символи, які шукатимуться в кінці рядка str.
+
length {{optional_inline}}
+
Якщо наданий, використовується як довжина str. За замовчуванням дорівнює str.length.
+
+ +

Значення, що повертається

+ +

true, якщо надані символи знайдені в кінці рядка; інакше, false.

+ +

Опис

+ +

Цей метод дозволяє визначити, чи завершується рядок іншим рядком. Цей метод чутливий до регістру.

+ +

Приклади

+ +

Використання endsWith()

+ +
let str = 'Питання в тому: бути чи не бути.'
+
+console.log(str.endsWith('бути.'))  // true
+console.log(str.endsWith('Питання'))      // false
+console.log(str.endsWith('Питання', 7))  // true
+
+ +

Поліфіл

+ +

Цей метод був доданий до специфікації ECMAScript 6 та може поки не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл String.prototype.endsWith() за допомогою наступного коду:

+ +
if (!String.prototype.endsWith) {
+	String.prototype.endsWith = function(search, this_len) {
+		if (this_len === undefined || this_len > this.length) {
+			this_len = this.length;
+		}
+		return this.substring(this_len - search.length, this_len) === search;
+	};
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.endsWith")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/fixed/index.html b/files/uk/web/javascript/reference/global_objects/string/fixed/index.html new file mode 100644 index 0000000000..c13fbaa65f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fixed/index.html @@ -0,0 +1,62 @@ +--- +title: String.prototype.fixed() +slug: Web/JavaScript/Reference/Global_Objects/String/fixed +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод fixed() створює HTML-елемент <tt>, який відображає рядок моноширинним шрифтом.

+ +

Синтаксис

+ +
str.fixed()
+ +

Значення, що повертається

+ +

Рядок, що відображає HTML-елемент <tt>.

+ +

Опис

+ +

Метод fixed() вбудовує рядок у тег <tt>: "<tt>str</tt>".

+ +

Приклади

+ +

Використання fixed()

+ +

Наступний приклад використовує метод fixed, щоб змінити форматування рядка:

+ +
var worldString = 'Привіт';
+console.log(worldString.fixed()); // "<tt>Привіт</tt>"
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.fixed")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html new file mode 100644 index 0000000000..5e1a68492b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html @@ -0,0 +1,81 @@ +--- +title: String.prototype.fontcolor() +slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод fontcolor() створює HTML-елемент <font>, який відображає рядок вказаним кольором.

+ +
+

Примітка щодо використання: Елемент <font> був прибраний у HTML5 та більше не повинен використовуватись. Замість нього веб-розробникам варто використовувати властивості CSS.

+
+ +

Синтаксис

+ +
str.fontcolor(color)
+ +

Параметри

+ +
+
color
+
Рядок, що відображає колір у вигляді шістнадцяткової RGB-трійці або рядкового літералу. Рядкові літерали для імен кольорів перераховані у Довіднику кольорів CSS.
+
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <font>.

+ +

Опис

+ +

Якщо ви виражаєте колір шістнадцятковою RGB-трійцею, ви повинні використовувати формат rrggbb. Наприклад, шістнадцяткові RGB-значення для оранжево-рожевого (salmon) такі: red=FA, green=80 та blue=72, отже, RGB-трійця для оранжево-рожевого дорівнює "FA8072".

+ +

Приклади

+ +

Використання fontcolor()

+ +

Наступний приклад використовує метод fontcolor(), щоб змінити колір рядка, створюючи рядок з HTML-тегом <font>.

+ +
var worldString = 'Привіт';
+
+console.log(worldString.fontcolor('red') +  ' червоний у цьому рядку');
+// '<font color="red">Привіт</font> червоний у цьому рядку'
+
+console.log(worldString.fontcolor('FF00') + ' червоний у шістнадцятковому форматі у цьому рядку');
+// '<font color="FF00">Привіт</font> червоний у шістнадцятковому форматі у цьому рядку'
+
+ +

За допомогою об'єкта element.style ви можете отримати атрибут елемента style та маніпулювати ним в більш загальному стилі, наприклад:

+ +
document.getElementById('yourElemId').style.color = 'red';
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.fontcolor")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html b/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html new file mode 100644 index 0000000000..c7cc26f07e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html @@ -0,0 +1,80 @@ +--- +title: String.prototype.fontsize() +slug: Web/JavaScript/Reference/Global_Objects/String/fontsize +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод fontsize() створює HTML-елемент <font>, який відображає рядок вказаним розміром шрифта.

+ +
+

Примітка щодо використання: Елемент <font> був прибраний у HTML5 та більше не повинен використовуватись. Замість нього веб-розробникам варто використовувати властивості CSS.

+
+ +

Синтаксис

+ +
str.fontsize(size)
+ +

Параметри

+ +
+
size
+
Ціле число в діапазоні між 1 та 7; рядок, що відображає ціле число зі знаком в діапазоні між 1 та 7.
+
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <font>.

+ +

Опис

+ +

Коли ви вказуєте розмір як ціле число, ви встановлюєте розмір шрифта str одним з 7 визначених розмірів. Коли ви вказуєте значення size у вигляді рядка, наприклад, "-2", ви коригуєте розмір шрифта str відносно розміру, встановленого у тезі <basefont>.

+ +

Приклади

+ +

Використання fontsize()

+ +

Наступний приклад використовує рядкові методи, щоб змінити розмір рядка:

+ +
var worldString = 'Привіт';
+
+console.log(worldString.small());     // <small>Привіт</small>
+console.log(worldString.big());       // <big>Привіт</big>
+console.log(worldString.fontsize(7)); // <font size="7">Привіт</fontsize>
+
+ +

За допомогою об'єкта element.style ви можете отримати атрибут елемента style та маніпулювати ним у більш загальному стилі, наприклад:

+ +
document.getElementById('yourElemId').style.fontSize = '0.7em';
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.fontsize")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..be8f695a24 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,109 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +tags: + - JavaScript + - Method + - String + - Unicode + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +
{{JSRef}}
+ +

Статичний метод String.fromCharCode() повертає рядок, створений з послідовності кодових одиниць Unicode переданих цілими числами.

+ +

Синтаксис

+ +
String.fromCharCode(num1[, ...[, numN]])
+ +

Параметри

+ +
+
num1, ..., numN
+
Послідовність цілих чисел, кожне з яких подає окрему кодову одиницю Unicode.
+
+ +

Вертає

+ +

Рядок із символів, що відповідають переданій послідовності значень (кодових одиниць) Unicode.

+ +

Опис

+ +

Цей метод вертає власне рядок, що належить до {{glossary("Primitive", "простого типу даних")}}, а не об'єкт класу {{jsxref("String")}}.

+ +

Позаяк fromCharCode() є статичним методом класу {{jsxref("String")}}, він зазвичай використовується як String.fromCharCode(), а не як метод створеного об'єкта класу.

+ +

Приклади

+ +

Використання fromCharCode()

+ +

Наведений вираз повертає рядок "Віко":

+ +
// вертає "Віко"
+String.fromCharCode(0x412, 0x456, 0x43A, 0x43E);
+ +

Обробка значень понад 0xFFFF

+ +

Попри свою назву, метод фактично приймає не коди символів, а саме кодові одиниці. Тобто символи, коди яких перевищують значення 0xFFFF (діапазон UCS-2), доведеться передавати двома кодовими одиницями:

+ +

Наприклад, символ з кодом U+1F341 «MAPLE LEAF» доведеться подавати як послідовність кодових одиниць 0xD83C та 0xDF41:

+ +
// виводить символ U+1F341 «MAPLE LEAF»
+console.log(String.fromCharCode(0xD83C, 0xDF41));
+ +

Більшість символів Unicode можна передати значеннями одного 16-розрядного числа (як передбачалося на початку стандартизації JavaScript), тож fromCharCode() можна застосовувати для створення рядків із найпоширенішими символами (UCS-2 є підмножиною UTF-8, що містить найбільш вживані символи), проте для потреб передачі всіх можливих символів (кодуються 21 двійковим розрядом) лише методу fromCharCode() недостатньо. Позаяк символи з кодами вищими за 0xFFFF подаються так званими «сурогатними парами» (двома окремими кодовими одиницями), можна використати {{jsxref("String.fromCodePoint()")}} (є частиною стандарту ES2015), що належним чином перетворить вищі коди символів на такі пари:

+ +
// виводить true
+console.log(String.fromCharCode(0xD83C, 0xDF41) === String.fromCodePoint(0x1F341));
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.fromCharCode")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html new file mode 100644 index 0000000000..2825480bfd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html @@ -0,0 +1,171 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +tags: + - ECMAScript 2015 + - JavaScript + - Method + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +
{{JSRef}}
+ +

Статичний метод String.fromCodePoint() повертає рядок, створений з послідовності кодів символів Unicode переданих цілими числами.

+ +

Синтаксис

+ +
String.fromCodePoint(num1[, ...[, numN]])
+ +

Параметри

+ +
+
num1, ..., numN
+
Послідовність цілих чисел, кожне з яких передає код символа Unicode.
+
+ +

Вертає

+ +

Рядок із символів, що відповідають переданій послідовності кодів символів Unicode.

+ +

Винятки

+ + + +

Опис

+ +

Цей метод вертає власне рядок, що належить до {{glossary("Primitive", "простого типу даних")}}, а не об'єкт класу {{jsxref("String")}}.

+ +

Позаяк fromCodePoint() є статичним методом класу {{jsxref("String")}}, він зазвичай використовується як String.fromCodePoint(), а не як метод створеного об'єкта класу.

+ +

Приклади

+ +

Використання fromCodePoint()

+ +
String.fromCodePoint(42);                    // "*"
+String.fromCodePoint(65, 90);                // "AZ"
+String.fromCodePoint(0x404, 0x490);          // "ЄҐ"
+String.fromCodePoint(0x2F804);               // "\uD87E\uDC04"
+String.fromCodePoint(194564);                // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');       // викидає RangeError
+String.fromCodePoint(Infinity);  // викидає RangeError
+String.fromCodePoint(-1);        // викидає RangeError
+String.fromCodePoint(3.14);      // викидає RangeError
+String.fromCodePoint(3e-2);      // викидає RangeError
+String.fromCodePoint(NaN);       // викидає RangeError
+
+ +
// Метод String.fromCharCode() не може створювати символи з такими великими кодами
+// Натомість fromCodePoint() може створювати символи, що передаються двома кодовими одиницями (чотири байти),
+// так само, як і звичайні двобайтні (тобто може створити рядок, що містить один символ, але має довжину 2 замість 1).
+console.log(String.fromCodePoint(0x2F804));  // Значення 194564 в десятковій системі числення
+
+ +

Запасний варіант (поліфіл)

+ +

Цей метод з'явився в ECMAScript 2015, тож, можливо, наявний не у всякій реалізації JavaScript. Проте, ви можете використати наступний код для забезпечення запасного варіанту:

+ +
/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
+if (!String.fromCodePoint) {
+  (function() {
+    var defineProperty = (function() {
+      // IE 8 only supports `Object.defineProperty` on DOM elements
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) && $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var stringFromCharCode = String.fromCharCode;
+    var floor = Math.floor;
+    var fromCodePoint = function() {
+      var MAX_SIZE = 0x4000;
+      var codeUnits = [];
+      var highSurrogate;
+      var lowSurrogate;
+      var index = -1;
+      var length = arguments.length;
+      if (!length) {
+        return '';
+      }
+      var result = '';
+      while (++index < length) {
+        var codePoint = Number(arguments[index]);
+        if (
+          !isFinite(codePoint) ||       // `NaN`, `+Infinity`, or `-Infinity`
+          codePoint < 0 ||              // not a valid Unicode code point
+          codePoint > 0x10FFFF ||       // not a valid Unicode code point
+          floor(codePoint) != codePoint // not an integer
+        ) {
+          throw RangeError('Invalid code point: ' + codePoint);
+        }
+        if (codePoint <= 0xFFFF) { // BMP code point
+          codeUnits.push(codePoint);
+        } else { // Astral code point; split in surrogate halves
+          // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          codePoint -= 0x10000;
+          highSurrogate = (codePoint >> 10) + 0xD800;
+          lowSurrogate = (codePoint % 0x400) + 0xDC00;
+          codeUnits.push(highSurrogate, lowSurrogate);
+        }
+        if (index + 1 == length || codeUnits.length > MAX_SIZE) {
+          result += stringFromCharCode.apply(null, codeUnits);
+          codeUnits.length = 0;
+        }
+      }
+      return result;
+    };
+    if (defineProperty) {
+      defineProperty(String, 'fromCodePoint', {
+        'value': fromCodePoint,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.fromCodePoint = fromCodePoint;
+    }
+  }());
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ES2015')}}Первинне визначення.
{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.fromCodePoint")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/includes/index.html b/files/uk/web/javascript/reference/global_objects/string/includes/index.html new file mode 100644 index 0000000000..bcfb01d5aa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/includes/index.html @@ -0,0 +1,125 @@ +--- +title: String.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/String/includes +tags: + - JavaScript + - Method + - Prototype + - Reference + - String + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/includes +--- +
{{JSRef}}
+ +

Метод includes() визначає чи може один рядок бути знайденим всередині іншого, повертаючи, відповідно, true або false.

+ +

{{EmbedInteractiveExample("pages/js/string-includes.html", "shorter")}}

+ + + +

Синтаксис

+ +
str.includes(searchString[, position])
+ +

Параметри

+ +
+
searchString
+
Рядок для пошуку всередині str.
+
position {{optional_inline}}
+
Позиція всередині рядка, з якої буде почато пошук рядка searchString. (За замовчуванням 0).
+
+ +

Значення, що повертається

+ +

true, якщо шуканий рядок знайдено де-завгодно всередині наданого рядка; інакше, false.

+ +

Опис

+ +

Цей метод дозволяє визначити чи знаходиться один рядок всередині іншого.

+ +

Чутливість до регістру

+ +

Метод includes() є чутливим до регістру. Для прикладу, наступний вираз поверне false:

+ +
'Синій кит'.includes('синій'); // вертає false
+
+ +

Приклади

+ +

Використання includes()

+ +
var str = 'Питання в тому: бути чи не бути.';
+
+console.log(str.includes('Питання'));     // true
+console.log(str.includes('бути'));        // true
+console.log(str.includes('неіснуючий'));  // false
+console.log(str.includes('Питання', 1));  // false
+console.log(str.includes('ПИТАННЯ'));     // false
+console.log(str.includes(''));            // true
+ +

Поліфіл

+ +

Цей метод був доданий до специфікації ECMAScript 2015 і може бути недоступним у всіх реалізаціях JavaScript.

+ +

Однак, ви можете легко розробити поліфіл для цього методу:

+ +
if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) { start = 0; }
+    return this.indexOf(search, start) !== -1;
+  };
+}
+ +

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.includes")}}

+ +

String.prototype.contains

+ +

У Firefox 18-39 назва цього методу була contains(). Він був перейменований на includes() у bug 1102219 у зв'язку з наступною причиною:

+ +

Повідомлялося, що деякі веб-сайти, які використовують MooTools 1.2 не працюють на Firefox 17. Ця версія MooTools перевіряла чи існує метод String.prototype.contains() та, якщо ні, то MooTools додає власну функцію.

+ +

З введенням цієї функції у Firefox 17, поведінка цієї перевірки змінювалася таким чином, що ставала причиною непрацездатності коду на основі реалізації методу String.prototype.contains() від MooTools. В результаті реалізація була відключена у Firefox 17, а String.prototype.contains() був доступний на одну версію пізніше, у Firefox 18, коли налагодження зв'язків з MooTools призвело до випуску MooTools версії 1.2.6.

+ +

MooTools 1.3 примусово запускає власну версію методу String.prototype.contains(), тож, веб-сайти, що покладаються на неї, не повинні ламатися. Однак, зауважте, що сигнатура цього методу відразняється для MooTools 1.3 і ECMAScript 2015 (на місці другого аргумента). Пізніше, MooTools 1.5+ змінив сігнатуру у відповідності до стандарту ES2015.

+ +

У Firefox 48 метод String.prototype.contains() було видалено. Використовуйте тільки String.prototype.includes().

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/index.html b/files/uk/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..f28c4fb043 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,374 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - String + - Довідка + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +
{{JSRef}}
+ +

Глобальний об'єкт String є конструктором для рядків, або послідовностей символів.

+ +

Опис

+ +

Рядки корисні для утримання данних, які можуть бути представлені в текстовій формі. Деякі з найбільш виконуваних операцій над рядками: перевірка їхньої {{jsxref("String.length", "довжини")}}, побудова та об'єднання рядків за допомогою рядкових операторів + та +=, перевірка наявності чи розташування підрядків методом {{jsxref("String.prototype.indexOf()", "indexOf()")}} чи копіювання підрядків методом {{jsxref("String.prototype.substring()", "substring()")}}.

+ +

Створення рядків

+ +

Рядки можна створювати як примітиви, з рядкових літералів, або як об'єкти, використовуючи конструктор {{jsxref("String/String")}}:

+ +
const string1 = "Рядковий примітив";
+const string2 = 'Теж рядковий примітив';
+const string3 = `І ще один рядковий примітив`;
+
+const string4 = new String("Об'єкт String");
+ +

Рядкові примітиви та рядкові об'єкти можна взаємно замінювати у більшості ситуацій. Дивіться нижче "Рядкові примітиви та рядкові об'єкти".

+ +

Рядкові літерали можуть створюватись з використанням одинарних чи подвійних лапок, які працюють ідентично, або за допомогою зворотніх лапок `. Ця остання форма створює шаблонний літерал: ця форма дозволяє інтерполювати вирази.

+ +

Доступ до символів

+ +

Існують два способи доступу до окремих символів рядка. Перший - це метод {{jsxref("String.prototype.charAt()", "charAt()")}}:

+ +
return 'кіт'.charAt(1); // вертає "і"
+
+ +

Другий спосіб (запроваджений у ECMAScript 5) працює з рядком як з подібним до масиву об'єктом, де окремі символи відповідають числовому індексу:

+ +
return 'кіт'[1]; // вертає "і"
+
+ +

Під час звернення до символу за допомогою дужкової нотації спроби видалити ці властивості чи присвоїти їм значення не матимуть успіху. Ці властивості не є доступними ані для запису, ані для налаштування. (Дивіться більше інформації у {{jsxref("Object.defineProperty()")}}.)

+ +

Порівняння рядків

+ +

У мові C для порівняння рядків використовується функція strcmp(). У JavaScript ви просто використовуєте оператори менше ніж та більше ніж:

+ +
var a = 'а';
+var b = 'б';
+if (a < b) { // true
+  console.log(a + ' менше ніж ' + b);
+} else if (a > b) {
+  console.log(a + ' більше ніж ' + b);
+} else {
+  console.log(a + ' та ' + b + ' є рівними.');
+}
+
+ +

Схожий результат можна отримати за допомогою методу {{jsxref("String.prototype.localeCompare()", "localeCompare()")}}, що успадковується екземплярами String.

+ +

Зауважте, що a == b перевіряє рядки у a та b на рівність у звичайний чутливий до регістру спосіб. Якщо вам потрібно порівняння літер без врахування регістру, використовуйте функцію, схожу на цю:

+ +
function isEqual(str1, str2)
+{
+    return str1.toUpperCase() === str2.toUpperCase()
+} // isEqual
+ +

Верхній регістр використовується замість нижнього в цій функції через деякі проблеми з перетвореннями символів у UTF-8.

+ +

Рядкові примітиви та рядкові об'єкти

+ +

Зауважте, що JavaScript розрізняє об'єкти String та примітивні рядкові значення. (Те саме стосується типу {{jsxref("Boolean")}} та {{jsxref("Global_Objects/Число", "чисел")}}.)

+ +

Рядкові літерали (позначаються подвійними чи одинарними лапками) та рядки, повернені викликами String не в контексті конструктора (тобто, без використання ключового слова {{jsxref("Operators/new", "new")}}) є примітивними рядками. JavaScript автоматично перетворює примітиви на об'єкти String, тому методи об'єкта String можливо використовувати на примітивних рядках. Там, де на примітивному рядку має бути викликаний метод або зустрічається звернення до властивості, JavaScript автоматично загорне рядковий примітив та викличе метод чи виконає звернення до властивості.

+ +
var s_prim = 'няв';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // Виведе "string"
+console.log(typeof s_obj);  // Виведе "object"
+
+ +

Рядкові примітиви та об'єкти String також дають різні результати при використанні {{jsxref("Global_Objects/eval", "eval()")}}. Примітиви, передані у eval, сприймаються як першокод; об'єкти String поводяться як усі об'єкти, повертаючи об'єкт. Наприклад:

+ +
var s1 = '2 + 2';             // створює рядковий примітив
+var s2 = new String('2 + 2'); // створює об'єкт String
+console.log(eval(s1));        // повертає число 4
+console.log(eval(s2));        // повертає рядок "2 + 2"
+
+ +

Через це може статись помилка, якщо код зустрічає об'єкт String там, де очікує рядковий примітив, хоча, загалом, розробникам не потрібно хвилюватись щодо відмінностей.

+ +

Об'єкт String завжди можна перетворити на його примітивний аналог методом {{jsxref("String.prototype.valueOf()", "valueOf()")}}.

+ +
console.log(eval(s2.valueOf())); // вертає число 4
+
+ +

Екранування

+ +

Спеціальні символи можна позначати за допомогою екранування:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КодРезультат
\XXX
+ (де XXX - це 1–3 вісімкових цифр; діапазон 0377)
Символ ISO-8859-1 / код символа Юнікоду між U+0000 та U+00FF
\'одинарні лапки
\"подвійні лапки
\\зворотній слеш
\nновий рядок
\rповернення каретки
\vвертикальна табуляція
\tгоризонтальна табуляція
\bповернення на крок
\fзміна сторінки
\uXXXX (де XXXX - це 4 шістнадцяткових символа; діапазон 0x00000xFFFF)Кодова одиниця UTF-16 / код символа Юнікоду між U+0000 та U+FFFF
\u{X} ... \u{XXXXXX}
+ (де XXXXXXX - це 1–6 шістнадцяткових символів; діапазон 0x00x10FFFF)
Кодова одиниця UTF-32 / код символа Юнікоду між U+0000 та U+10FFFF
\xXX
+ (де XX - це 2 шістнадцяткові символи; діапазон 0x000xFF)
символ ISO-8859-1 / код символа Юнікоду між U+0000 та U+00FF
+ +

Довгі рядкові літерали

+ +

Іноді ваш код міститиме рядки, які є дуже довгими. Замість того, щоб створювати рядки нескінченно довгі чи перенесені за примхою редактора, ви можете самостійно розбити текст на декілька рядків у коді, не вплинувши на реальний вміст літералу. Існує два способи це зробити.

+ +

Метод 1

+ +

Ви можете скористатись оператором + для поєднання багатьох рядків, ось так:

+ +
let longString = "Це дуже довгий текст, його треба " +
+                 "записати в декілька рядків," +
+                 "інакше мій код буде важко читати."
+ +

Метод 2

+ +

Ви можете скористатись символом зворотній слеш (\) в кінці кожного рядка, щоб позначити, що текст продовжується на наступному рядку. Переконайтесь, що після зворотнього слеша немає пробілу чи будь-якого іншого символу (окрім символу розриву рядка), або відступу; інакше, це не спрацює.

+ +

Ця форма виглядає ось так:

+ +
let longString = "Це дуже довгий текст, його треба \
+записати в декілька рядків, \
+інакше мій код буде важко читати."
+ +

Обидва наведені методи виводять ідентичні рядки.

+ +

Конструктор

+ +
+
{{jsxref("String/String", "String()")}}
+
Створює новий об'єкт String. Він виконує перетворення типів, коли викликається як функція, а не як конструктор, що, зазвичай, більш корисно.
+
+ +

Статичні методи

+ +
+
{{jsxref("String.fromCharCode()", "String.fromCharCode(num1 [, ...[, numN]])")}}
+
Вертає рядок, створений за допомогою вказаної послідовності значень Юнікоду.
+
{{jsxref("String.fromCodePoint()", "String.fromCodePoint(num1 [, ...[, numN)")}}
+
Вертає рядок, створений за допомогою вказаної послідовності кодів символів.
+
{{jsxref("String.raw()")}}
+
Вертає рядок, створений з сирого шаблонного рядка.
+
+ +

Властивості екземплярів

+ +
+
{{jsxref("String.prototype.length")}}
+
Відображає довжину рядка. Доступна лише для читання.
+
+ +

Методи екземплярів

+ +
+
{{jsxref("String.prototype.charAt()", "String.prototype.charAt(index)")}}
+
Вертає символ (рівно одну кодову одиницю UTF-16), розташований за вказаним індексом index.
+
{{jsxref("String.prototype.charCodeAt()", "String.prototype.charCodeAt(index)")}}
+
Вертає число, яке є значенням кодової одиниці UTF-16, розташованої за вказаним індексом index.
+
{{jsxref("String.prototype.codePointAt()", "String.prototype.codePointAt(pos)")}}
+
Вертає невід'ємне ціле число, яке є значенням коду символу UTF-16, що починається на вказаній позиції pos.
+
{{jsxref("String.prototype.concat()", "String.prototype.concat(str [, ...strN ])")}}
+
Об'єднує текст двох (або більше) рядків та повертає новий рядок.
+
{{jsxref("String.prototype.includes()", "String.prototype.includes(searchString [, position])")}}
+
Визначає, чи містить рядок, що викликав метод, рядок searchString.
+
{{jsxref("String.prototype.endsWith()", "String.prototype.endsWith(searchString [, length])")}}
+
Визначає, чи завершується рядок символами рядка searchString.
+
{{jsxref("String.prototype.indexOf()", "String.prototype.indexOf(searchValue [, fromIndex])")}}
+
Вертає індекс всередині об'єкта {{jsxref("String")}}, що викликав метод, першого знайденого значення searchValue, або -1, якщо воно не знайдене.
+
{{jsxref("String.prototype.lastIndexOf()", "String.prototype.lastIndexOf(searchValue [, fromIndex])")}}
+
Вертає індекс всередині об'єкта {{jsxref("String")}}, що викликав метод, останнього знайденого значення searchValue, або -1, якщо значення не знайдене.
+
{{jsxref("String.prototype.localeCompare()", "String.prototype.localeCompare(compareString [, locales [, options]])")}}
+
Вертає число, що вказує, чи розташований рядок compareString перед, після, чи однаково, відносно наданого рядка у відсованій послідовності.
+
{{jsxref("String.prototype.match()", "String.prototype.match(regexp)")}}
+
Використовується, щоб зіставити регулярний вираз regexp з рядком.
+
{{jsxref("String.prototype.matchAll()", "String.prototype.matchAll(regexp)")}}
+
Вертає ітератор усіх збігів з регулярним виразом.
+
{{jsxref("String.prototype.normalize()", "String.prototype.normalize([form])")}}
+
Вертає рядкове значення, на якому викликано метод, у формі нормалізації Юнікоду.
+
{{jsxref("String.prototype.padEnd()", "String.prototype.padEnd(targetLength [, padString])")}}
+
Доповнює поточний рядок наданим рядком з кінця та повертає новий рядок, що має довжину targetLength.
+
{{jsxref("String.prototype.padStart()", "String.prototype.padStart(targetLength [, padString])")}}
+
Доповнює поточний рядок наданим рядком з початку та повертає новий рядок, що має довжину targetLength.
+
{{jsxref("String.prototype.repeat()", "String.prototype.repeat(count)")}}
+
Повертає рядок, що складається з елементів об'єкта, повторених count разів.
+
{{jsxref("String.prototype.replace()" , "String.prototype.replace(searchForreplaceWith)")}}
+
Використовується, щоб замінити searchFor заміною replaceWith. searchFor може бути рядком або регулярним виразом, а replaceWith може бути рядком чи функцією.
+
{{jsxref("String.prototype.replaceAll()" , "String.prototype.replaceAll(searchForreplaceWith)")}}
+
Використовується, щоб замінити усі збіги з шаблоном searchFor заміною replaceWithsearchFor може бути рядком або регулярним виразом, а replaceWith може бути рядком або функцією.
+
{{jsxref("String.prototype.search()", "String.prototype.search(regexp)")}}
+
Шукає збіг між регулярним виразом regexp та рядком, що викликав метод.
+
{{jsxref("String.prototype.slice()", "String.prototype.slice(beginIndex[, endIndex])")}}
+
Вирізає частину рядка та повертає новий рядок.
+
{{jsxref("String.prototype.split()", "String.prototype.split([sep [, limit] ])")}}
+
Вертає масив рядків, заповнених розділенням початкового рядка підрядком sep.
+
{{jsxref("String.prototype.startsWith()", "String.prototype.startsWith(searchString [, length])")}}
+
Визначає, чи починається рядок з символів рядка searchString.
+
{{jsxref("String.prototype.substr()")}}
+
Повертає вказану кільксть символів на початку рядка з вказаної позиції.
+
{{jsxref("String.prototype.substring()", "String.prototype.substring(indexStart [, indexEnd])")}}
+
Повертає рядок, що містить символи рядка від вказаного індекса, або між вказаними індексами.
+
{{jsxref("String.prototype.toLocaleLowerCase()", "String.prototype.toLocaleLowerCase( [locale, ...locales])")}}
+
+

Символи рядка переводяться до нижнього регістра відповідно до поточних регіональних налаштувань.

+ +

Для більшості мов результат буде такий самий, як у {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.

+
+
{{jsxref("String.prototype.toLocaleUpperCase()", "String.prototype.toLocaleUpperCase( [locale, ...locales])")}}
+
+

Символи рядка переводяться до верхнього регістра відповідно до поточних регіональних налаштувань.

+ +

Для більшості мов результат буде такий самий, як у {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.

+
+
{{jsxref("String.prototype.toLowerCase()")}}
+
Повертає значення рядка, переведене до нижнього регістра.
+
{{jsxref("String.prototype.toString()")}}
+
Повертає рядкове представлення вказаного об'єкта. Заміщує метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("String.prototype.toUpperCase()")}}
+
Повертає значення рядка, переведене до верхнього регістра.
+
{{jsxref("String.prototype.trim()")}}
+
Прибирає пробіли з початку та кінця рядка. Частина стандарту ECMAScript 5.
+
{{jsxref("String.prototype.trimStart()")}}
+
Видаляє пробіли з початку рядка.
+
{{jsxref("String.prototype.trimEnd()")}}
+
Видаляє пробіли з кінця рядка.
+
{{jsxref("String.prototype.valueOf()")}}
+
Повертає просту величину вказаного об'єкта. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.
+
{{jsxref("String.prototype.@@iterator()")}}
+
Повертає новий об'єкт Iterator, який перебирає коди символів рядка, повертаючи кожний код символа рядкового значення.
+
+ +

Методи HTML-обгортки

+ +

Застарілі. Уникайте цих методів.

+ +

Вони обмежено використовуються, оскільки надають набір доступних тегів та атрибутів HTML.

+ +
+
{{jsxref("String.prototype.anchor()")}}
+
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (гіпертекстове посилання)
+
{{jsxref("String.prototype.big()")}}
+
{{HTMLElement("big")}}
+
{{jsxref("String.prototype.blink()")}}
+
{{HTMLElement("blink")}}
+
{{jsxref("String.prototype.bold()")}}
+
{{HTMLElement("b")}}
+
{{jsxref("String.prototype.fixed()")}}
+
{{HTMLElement("tt")}}
+
{{jsxref("String.prototype.fontcolor()")}}
+
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
+
{{jsxref("String.prototype.fontsize()")}}
+
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
+
{{jsxref("String.prototype.italics()")}}
+
{{HTMLElement("i")}}
+
{{jsxref("String.prototype.link()")}}
+
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (посилання на URL)
+
{{jsxref("String.prototype.small()")}}
+
{{HTMLElement("small")}}
+
{{jsxref("String.prototype.strike()")}}
+
{{HTMLElement("strike")}}
+
{{jsxref("String.prototype.sub()")}}
+
{{HTMLElement("sub")}}
+
{{jsxref("String.prototype.sup()")}}
+
{{HTMLElement("sup")}}
+
+ +

Приклади

+ +

Перетворення рядка

+ +

Можливо використовувати String як більш надійну альтернативу {{jsxref("String.prototype.toString()", "toString()")}}, оскільки вона працює при використанні з {{jsxref("null")}}, {{jsxref("undefined")}} та {{jsxref("Symbol", "символами")}}. Наприклад:

+ +
var outputStrings = [];
+for (let i = 0, n = inputValues.length; i < n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string-objects', 'String')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.String")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/indexof/index.html b/files/uk/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..3c0639bad4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,154 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +tags: + - JavaScript + - Prototype + - String + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +
{{JSRef}}
+ +

Метод indexOf() починає пошук від символа за індексом fromIndex всередині об'єкта {{jsxref("String")}}, з якого здійснюється виклик метода, і вертає індекс першого знайденого збігу із шуканим значенням. Якщо значення не знайдене, повертає -1.

+ +

{{EmbedInteractiveExample("pages/js/string-indexof.html")}}

+ + + +
Заувага: Клас Array має подібний метод {{jsxref("Array.prototype.indexOf()", "indexOf()")}}.
+ +

Синтаксис

+ +
str.indexOf(searchValue[, fromIndex])
+ +

Параметри

+ +
+
searchValue
+
Рядок, що є шуканим значенням.
+
Якщо рядок явно не заданий, searchValue буде примусово приведений до "undefined", і пошук цього значення буде здійснюватись у str.
+
Отже, для прикладу: 'undefined'.indexOf() поверне 0, оскільки значення undefined знайдене на позиції 0, але 'undefine'.indexOf() поверне -1, оскільки рядок "undefine" не знайдений.
+
fromIndex {{optional_inline}}
+
Ціле число, що позначає індекс, з якого має розпочинатися пошук; за замовчуванням дорівнює 0.
+
Якщо вказане значення fromIndex менше за 0 чи більше за str.length, пошук розпочнеться з індексу 0 та str.length, відповідно.
+
Для прикладу, 'всім привіт'.indexOf('м', -5) поверне 3, оскільки метод почне пошук з позициї 0, а м знайдеться на позиції 3. З іншого боку, 'всім привіт'.indexOf('м', 11) (і з будь-яким значенням fromIndex, більшим за 11) поверне -1, оскільки пошук починається з позиції 11, позиції після кінця рідка.
+
+ +

Вертає

+ +

Індекс першого знайденого збігу з searchValue, або -1, якщо жодного збігу не знайдено.

+ +

Порожній рядок searchValue призводить до дивних результатів. За відсутності значення fromIndex, чи будь-якого значення fromIndex, нижчого за довжину рядка, повернене значення буде таким самим, як значення fromIndex:

+ +
'всім привіт'.indexOf('')    // вертає 0
+'всім привіт'.indexOf('', 0) // вертає 0
+'всім привіт'.indexOf('', 3) // вертає 3
+'всім привіт'.indexOf('', 8) // вертає 8
+ +

Однак, якщо значення fromIndex є рівним або більшим за довжину рядка, повернене значення дорівнює довжині рядка:

+ +
'всім привіт'.indexOf('', 11) // вертає 11
+'всім привіт'.indexOf('', 13) // вертає 11
+'всім привіт'.indexOf('', 22) // вертає 11
+ +

В минулій версії JS порожній рядок відшукувався одразу після вказаного значення індексу. У останній версії JS порожній рядок буде знайдений в кінці рядка, в якому здійснюється пошук.

+ +

Опис

+ +

Символи рядка індексуються зліва направо. Індекс першого символу дорівнює 0, а індекс останнього символу рядка stringName дорівнює stringName.length - 1.

+ +
'Непозбувна бентега'.indexOf('Непозбувна');     // вертає  0
+'Непозбувна бентега'.indexOf('Непозбувний');    // вертає -1
+'Непозбувна бентега'.indexOf('бентега', 0);     // вертає 11
+'Непозбувна бентега'.indexOf('бентега', 5);     // вертає 11
+'Непозбувна бентега'.indexOf('бентега', 12);    // вертає -1
+'Розкішниця'.indexOf('');                       // вертає  0
+'Розкішниця'.indexOf('', 9);                    // вертає  9
+'Розкішниця'.indexOf('', 10);                   // вертає 10
+'Розкішниця'.indexOf('', 11);                   // вертає 10
+ +

Метод indexOf() є регістрозалежним. Наприклад, вираз нижче повертає -1:

+ +
'Непозбувна бентега'.indexOf('Бентега');  // вертає -1
+
+ +

Перевірка наявності підрядка

+ +

Зважте на те, що 0 не обчислюється як true, а -1 не обчислюється як false. Отже, належить у явний спосіб порівнювати значення, що повертається методом indexOf(), зі значенням -1:

+ +
'Непозбувна бентега'.indexOf('бентега') !== -1;  // true
+'Непозбувна бентега'.indexOf('Бентега') !== -1; // false
+~('Непозбувна бентега'.indexOf('Непозбувний')) // 0, тобто, хибне значення
+ +

Приклади

+ +

Використання indexOf()

+ +

Наступний приклад використовує indexOf(), щоб знайти значення у рядку "абабагаламага".

+ +
const str = 'абабагаламага'
+
+console.log('Індекс першої г з початку дорівнює ' + str.indexOf('г'))   // виводить 5
+console.log('Індекс "баба" з початку дорівнює ' + str.indexOf('баба'))   // виводить 1
+ +

Регістрозалежність метода indexOf()

+ +

В цьому прикладі наведено два текстових рядки.

+ +

Їх вміст є майже однаковим, але у myCapString слова починаються з великої літери. Перший метод console.log() виводить 13. Але, через те, що метод indexOf() чутливий до регістру, рядок "камамбер" не знаходиться у myCapString, а отже, другий метод console.log() виводить -1.

+ +
var myString = 'брі, дорблю, камамбер';
+var myCapString = 'Брі, Дорблю, Камамбер';
+
+console.log('myString.indexOf("камамбер") дорівнює ' + myString.indexOf('камамбер'))
+// виводить 13
+console.log('myCapString.indexOf("камамбер") дорівнює ' + myCapString.indexOf('камамбер'))
+// виводить -1
+ +

Використання indexOf() для підрахунку кількості вживань літери у рядку

+ +

Наступний приклад присвоює змінній count число вживать літери с у рядку str:

+ +
const str = 'Буває, часом сліпну від краси.'
+let count = 0
+let position = str.indexOf('с')
+
+while (position !== -1) {
+  count++
+  position = str.indexOf('с', position + 1)
+}
+
+console.log(count)  // виводить 3
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.indexOf")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/italics/index.html b/files/uk/web/javascript/reference/global_objects/string/italics/index.html new file mode 100644 index 0000000000..9d66e85e66 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/italics/index.html @@ -0,0 +1,65 @@ +--- +title: String.prototype.italics() +slug: Web/JavaScript/Reference/Global_Objects/String/italics +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/italics +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод italics() створює HTML-елемент <i>, який відображає рядок курсивом.

+ +

Синтаксис

+ +
str.italics()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <i>.

+ +

Опис

+ +

Метод italics() вбудовує рядок у тег <i>: "<i>str</i>".

+ +

Приклади

+ +

Використання italics()

+ +

Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:

+ +
var worldString = 'Всім привіт';
+console.log(worldString.blink());  // <blink>Всім привіт</blink>
+console.log(worldString.bold());  // <b>Всім привіт</b>
+console.log(worldString.italics()); // <i>Всім привіт</i>
+console.log(worldString.strike());  // <strike>Всім привіт</strike>
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.italics")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..e307125881 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +tags: + - JavaScript + - Prototype + - String + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +--- +
{{JSRef}}
+ +

Метод lastIndexOf() повертає у об'єкті {{jsxref("String")}}, що його викликав, індекс останнього вживання вказаного значення. Пошук здійснюється з кінця рядка, починаючи з індекса fromIndex. Повертає -1, якщо значення не було знайдене.

+ +

{{EmbedInteractiveExample("pages/js/string-lastindexof.html", "shorter")}}

+ + + +

Синтаксис

+ +
str.lastIndexOf(searchValue[, fromIndex])
+ +

Параметри

+ +
+
searchValue
+
Рядок, що є шуканим значенням. Якщо searchValue є порожнім рядком, то повертається fromIndex.
+
fromIndex {{optional_inline}}
+
Індекс останнього символу у рядку, який розглядатиметься як початок збігу. Значенням за замовчуванням є +Infinity. Якщо fromIndex >= str.length, пошук здійснюється по всьому рядку. Якщо fromIndex < 0, то результат буде той самий, що і за fromIndex = 0.
+
+ +

Вертає

+ +

Індекс останнього знайденого збігу (першого з кінця); якщо збігу не знайдено, вертає значення -1.

+ +

Опис

+ +

Символи рядка мають індекси зліва направо. Індексом першого символу є 0, а індексом останнього str.length - 1.

+ +
'морок'.lastIndexOf('о');      // вертає  3
+'морок'.lastIndexOf('о', 2);   // вертає  1
+'морок'.lastIndexOf('о', 0);   // вертає -1
+'морок'.lastIndexOf('ф');      // вертає -1
+'морок'.lastIndexOf('м', -5);  // вертає  0
+'морок'.lastIndexOf('м', 0);   // вертає  0
+'морок'.lastIndexOf('');       // вертає  5
+'морок'.lastIndexOf('', 2);    // вертає  2
+
+ +
+

Заувага: 'баба'.lastIndexOf('ба', 2) поверне 2, а не 0, оскільки fromIndex обмежує лише початок збігу.

+
+ +

Регістрозалежність метода lastIndexOf()

+ +

Метод lastIndexOf() чутливий до регістру. Наприклад, наступний вираз вертає -1:

+ +
'Брі, Дорблю, Камамбер'.lastIndexOf('дорблю');  // вертає -1
+ +

Приклади

+ +

Використання indexOf() та lastIndexOf()

+ +

Наступний приклад використовує {{jsxref("String.prototype.indexOf()", "indexOf()")}} та lastIndexOf(), щоб знайти значення у рядку "абабагаламага".

+ +
var anyString = 'абабагаламага';
+
+console.log('Індекс першого "га" з початку дорівнює ' + anyString.indexOf('га'));
+// виводить 5
+console.log('Індекс першого "га" з кінця дорівнює ' + anyString.lastIndexOf('га'));
+// виводить 11
+console.log('Індекс "баба" з початку дорівнює ' + anyString.indexOf('баба'));
+// виводить 1
+console.log('Індекс "баба" з кінця дорівнює ' + anyString.lastIndexOf('баба'));
+// виводить 1
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.lastIndexOf")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/length/index.html b/files/uk/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..b52a468f96 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,105 @@ +--- +title: string.length +slug: Web/JavaScript/Reference/Global_Objects/String/length +tags: + - JavaScript + - Property + - Prototype + - String + - Властивість + - Довідка + - довжина + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +
{{JSRef}}
+ +

Властивість length об'єкта {{jsxref("String")}} містить довжину рядка у кодових одиницях UTF-16. Це властивість-значення рядкових екземплярів, доступна лише для читання.

+ +

{{EmbedInteractiveExample("pages/js/string-length.html", "shorter")}}

+ +

Синтаксис

+ +
str.length
+ +

Опис

+ +

Ця властивість повертає кількість кодових одиниць (англ. code unit), які утворюють рядок. У JavaScript для рядків використовується кодування {{interwiki("wikipedia", "UTF-16")}}, яке вживає одну 16-бітну (двобайтну) кодову одиницю для передачі більшості загальновживаних символів, але для менш поширених воно потребує двох кодових одиниць. Отже, значення, length та справжня кількість символів рядка не завжди збігаються.

+ +

У ECMAScript 2016 (вер. 7) було встановлено максимальну довжину у 2^53 - 1 елементів. Попередньо не було визначено ніякої максимальної довжини. У Firefox рядки мають максимальну довжину 2**30 - 2 (~1ГБ). У версіях, більш ранніх за Firefox 65, максимальна довжина складала 2**28 - 1 (~256МБ).

+ +

Для порожнього рядка length дорівнює 0.

+ +

Статична властивість String.length не пов'язана з довжиною рядків, це арність функції String (загалом, це кількість формальних параметрів, що вона має), яка дорівнює 1.

+ +

Юнікод

+ +

Оскільки `length` рахує кодові одиниці замість символів, якщо вам треба отримати кількість символів, вам знадобиться щось таке:

+ +
function getCharacterLength (str) {
+  // Ітератор рядка, що тут використовується, перебирає символи,
+  // а не просто кодові одиниці
+  return [...str].length;
+}
+
+console.log(getCharacterLength('A\uD87E\uDC04Z')); // 3
+
+// Це не рекомендується, але ви можете додати його до кожного рядка ось так:
+
+Object.defineProperty(String.prototype, 'charLength', {
+  get () {
+    return getCharacterLength(this);
+  }
+});
+
+console.log('A\uD87E\uDC04Z'.charLength); // 3
+ +

Приклади

+ +

Типове використання

+ +
var x = 'Вогнелис';
+let empty = '';
+
+console.log(x + ' має довжину ' + x.length + ' кодових одиниць');
+/* "Вогнелис має довжину 8 кодових одиниць" */
+
+console.log('Порожній рядок має довжину ' + empty.length);
+// очікуваний результат: "Порожній рядок має довжину 0"
+
+ +

Присвоювання довжини

+ +
let myString = "проліски";
+
+// Спроба присвоїти значення властивості рядка .length не має видимого ефекту.
+myString.length = 4;
+console.log(myString);
+// очікуваний результат: "проліски"
+console.log(myString.length);
+// очікуваний результат: 8
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.length")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/link/index.html b/files/uk/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..4f20bce4e0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,72 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Reference/Global_Objects/String/link +tags: + - JavaScript + - String + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод link() створює рядок, що відображає код для HTML-елемента <a>, для використання у якості гіпертекстового посилання на інший URL.

+ +

Синтаксис

+ +
str.link(url)
+ +

Параметри

+ +
+
url
+
Будь-який рядок, що визначає атрибут href тега <a>; він має бути коректним локатором ресурсу (відносним чи абсолютним), усі символи & мають бути екрановані як &amp;, а усі символи " - як &quot;.
+
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <a>.

+ +

Опис

+ +

Використовуйте метод link(), щоб створити HTML-код для гіпертекстового посилання. Повернений рядок можна додати у document через document.write() або element.innerHTML.

+ +

Посилання, створені методом link(), стають елементами масиву links об'єкта document. Дивіться document.links.

+ +

Приклади

+ + + +

Наступний приклад відображаєє слово "MDN" як гіпертекстове посилання, яке повертає користувача на сайт Mozilla Developer Network.

+ +
var hotText = 'MDN';
+var URL = 'https://developer.mozilla.org/';
+
+console.log('Натисніть, щоб повернутись на ' + hotText.link(URL));
+// Натисніть, щоб повернутись на <a href="https://developer.mozilla.org/">MDN</a>
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.link")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html b/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html new file mode 100644 index 0000000000..9fe8fac165 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html @@ -0,0 +1,173 @@ +--- +title: String.prototype.localeCompare() +slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка + - Уміжнароднення + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare +--- +
{{JSRef}}
+ +

Метод localeCompare() повертає число, яке вказує, як має розташуватись рядок відносно вказаного (того, що передано як параметр) у відсортованій за зростанням послідовності: перед, після, чи вони однакові.

+ +

{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}

+ + + +

Нові арґументи locales та options дають можливість вказати мову, абетковий порядок сортування якої має бути застосовано, та налаштувати механізм порівняння рядків. Раніше, коли цих арґументів ще не було, механізм порівняння рядків та порядок їх сортування цілковито залежав від реалізації.

+ +

Синтаксис

+ +
referenceStr.localeCompare(compareString[, locales[, options]])
+ +

Параметри

+ +

Перевіряйте в таблиці сумісності наявність підтримки арґументів locales та options, а також подивіться на код для перевірки наявності такої підтримки.

+ +
+
compareString
+
Рядок, з яким буде здійснено порівняння.
+
+ +
+

Аргументи locales та options налаштовують поведінку функції та дозволяють застосункам визначати мову, конвенції якої щодо форматування мають використовуватись. У тих реалізаціях, які ігнорують аргументи locales та options, локаль, що використовується, та форма поверненого рядка повністю залежать від реалізації.

+ +

Деталі цих параметрів та як їх використовувати дивіться у статті Конструктор Intl.Collator().

+
+ +

Вертає

+ + + +

Опис

+ +

Вертає ціле число, що вказує, чи рядок referenceStr розташований перед compareStr, після compareStr, чи є еквівалентним compareStr.

+ + + +

НЕ ПОКЛАДАЙТЕСЬ на точні повернені значення -1 чи 1. Від'ємні та додатні цілочисельні результати різняться між переглядачами (а також між версіями переглядачів), тому що специфікація W3C вимагає лише від'ємних та додатних значень. Деякі переглядачі можуть повернути -2 чи 2, чи навіть деякі інші від'ємні та додатні значення.

+ +

Приклади

+ +

Використання localeCompare()

+ +
// Вертає від'ємне значення, позаяк літера «a» розташована раніше за «b»
+'a'.localeCompare('c');  // -2 чи -1 (або інше від'ємне значення)
+
+// Вертає додатне значення, позаяк за абеткою слово "check" слід розташувати після "against"
+'check'.localeCompare('against');  // 2 чи 1 (або інше додатне значення)
+
+// Вертає нуль, позаяк рядки однакові
+'a'.localeCompare('a');  // 0
+
+ +

Сортування масиву

+ +

Метод localeCompare() надає можливість регістронезалежного сортування масивів:

+ +
var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
+items.sort((a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true})); // ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']
+ +

Перевірка наявності підтримки додаткових арґументів веб-переглядачем

+ +

Арґументи locales та options досі не підтримуються всіма переглядачами. Тож, з метою з'ясування наявності підтримки можна скористатися тим, що метод викидає (лише за наявності такої підтримки згаданих арґументів) виняток {{jsxref("Global_Objects/RangeError", "RangeError")}}, якщо параметр locales не вказує належного мовного коду. Наприклад, вкажемо напевне відсутній код "i":

+ +
function checkLocaleCompareSupportsLocales() {
+  try {
+    'foo'.localeCompare('bar', 'i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+
+ +

Використання locales

+ +

Порівняння рядків за допомогою localeCompare() узалежнено від мови. Для застосування належного для вживаної мови (наприклад, для мови користувацького інтерфейсу вашого застосунку) порядку сортування, не забудьте вказати відповідний мовний код (або й запасні мовні коди) через параметр locales:

+ +
// виводить від'ємне значення (у німецькій абетці літера «ä» розташована раніше «z»)
+console.log('ä'.localeCompare('z', 'de'));
+
+// виводить додатне значення (у шведській абетці літера «ä» розташована пізніше «z»)
+console.log('ä'.localeCompare('z', 'sv'));
+
+ +

Використання options

+ +

Арґумент options надає можливість додаткового налаштування способу порівняння рядків методом localeCompare():

+ +
// У німецькій мові літера «ä» є похідною від базової літери «a»
+// виводить 0
+console.log('ä'.localeCompare('a', 'de', {sensitivity: 'base'}));
+
+// У шведській мові «ä» та «a» є окремими базовими літерами
+// виводить додатне значення
+console.log('ä'.localeCompare('a', 'sv', {sensitivity: 'base'}));
+
+ +

Сортування чисел

+ +
// за замовчуванням, "2" > "10"
+console.log("2".localeCompare("10")); // 1
+
+// сортування за допомогою options:
+console.log("2".localeCompare("10", undefined, {numeric: true})); // -1
+
+// сортування за допомогою тега locales:
+console.log("2".localeCompare("10", "en-u-kn-true")); // -1
+ +

Швидкодія

+ +

З огляду на швидкодію, для порівняння величезної кількості рядків (наприклад, під час сортування великих масивів) ліпше створювати об'єкт {{jsxref("Global_Objects/Collator", "Intl.Collator")}} та використовувати функцію, надану його властивістю {{jsxref("Collator.prototype.compare", "compare")}}:

+ +
function sortLargeStringArray(array, locale) {
+  var collator = new Intl.Collator(locale);
+  array.sort(collator.compare);
+}
+
+// sortLargeStringArray([ … ], 'uk');
+
+ +

Специфікації

+ + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}
{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.localeCompare")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/match/index.html b/files/uk/web/javascript/reference/global_objects/string/match/index.html new file mode 100644 index 0000000000..dfc6bf5f6b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/match/index.html @@ -0,0 +1,194 @@ +--- +title: String.prototype.match() +slug: Web/JavaScript/Reference/Global_Objects/String/match +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка + - Регулярний вираз + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/match +--- +
{{JSRef}}
+ +

Метод match() шукає та повертає (якщо є) збіги рядка із зазначеним регулярним виразом.

+ +

{{EmbedInteractiveExample("pages/js/string-match.html", "shorter")}}

+ + + +

Синтаксис

+ +
str.match(regexp)
+ +

Параметри

+ +
+
regexp
+
Об'єкт регулярного виразу.
+
Якщо передати значення іншого типу, воно буде неявно перетворене на {{jsxref("RegExp")}} за допомогою оператора new RegExp(regexp).
+
Якщо жодного параметра не вказано, метод поверне {{jsxref("Array","масив")}} з одним елементом — порожнім рядком: [""].
+
+ +

Вертає

+ +

{{jsxref("Array","Масив")}}, чий вміст залежить від наявності чи відсутності глобального (g) прапора, або {{jsxref("null")}}, якщо жодних збігів не знайдено.

+ + + +

Додаткові властивості

+ +

Як пояснювалось вище, деякі результати містять наступні додаткові властивості:

+ +
+
groups
+
Масив іменованих захоплених груп або {{jsxref("undefined")}}, якщо іменовані групи не були визначені. Дивіться Групи та діапазони, щоб дізнатись більше.
+
index
+
Індекс пошуку, за яким був знайдений результат.
+
input 
+
Копія рядка, в якому здійснювався пошук.
+
+ +

Опис

+ +

Якщо регулярний вираз не позначено прапорцем g, виклик str.match() повертає такий самий результат, що й {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.

+ +

Інші методи

+ + + +

Приклади

+ +

Використання match()

+ +

У прикладі нижче метод match() задіяно, щоб знайти слово «розділ», за ним одну чи кілька цифр, далі десяткова крапка та 0 чи більше числових символів.

+ +

Регулярний вираз позначено прапорцем i, що означає відсутність розрізнювання великих та малих літер.

+ +
var str = 'Докладніше див. розділ 3.4.5.1';
+var re = /див\. (розділ \d+(\.\d)*)/i;
+var found = str.match(re);
+
+console.log(found);
+
+// Виводить:
+// [
+//   0: "див. розділ 3.4.5.1"
+//   1: "розділ 3.4.5.1"
+//   2: ".1"
+//   index: 11
+//   input: "Докладніше див. розділ 3.4.5.1"
+// ]
+
+// Рядок "див. розділ 3.4.5.1" є повним збігом.
+// Рядок "розділ 3.4.5.1" — це підрядок, захоплений підвиразом '(розділ \d+(\.\d)*)'
+// Рядок ".1" — це останній підрядок, захоплений підвиразом '(\.\d)'
+// Властивість 'index' (11) — це зсув підрядка, що відповідає регулярному виразові
+// Властивість 'input' — це повна копія досліджуваного рядка str
+
+ +

Вживання прапорців i та g із методом match()

+ +

Приклад нижче засвідчує дію прапорців i (ignore case — регістронезалежний режим) та g (global — пошук усіх збігів, а не тільки першого) при використанні метода match(). Будуть повернені усі літери від A до E та від a до e, кожна як окремий елемент масиву.

+ +
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var matches_array = str.match(regexp);
+
+console.log(matches_array);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+
+ +
+

Заувага: Дивіться також метод {{jsxref("String.prototype.matchAll()")}} та Складний пошук за допомогою прапорів.

+
+ +

Використання іменованих груп

+ +

У переглядачах, які підтримують іменовані захоплені групи, наступний код захопить "їжак" чи "кіт" у групу на ім'я "тварина":

+ +
let paragraph = 'Єхидна, ґава, їжак ще й шиплячі плазуни бігцем форсують Янцзи.';
+
+let capturingRegex = /(?<тварина>їжак|кіт) ще й/;
+found = paragraph.match(capturingRegex);
+console.log(found.groups); // {тварина: "їжак"}
+ +

Використання match() без параметрів

+ +
var str = "Я — Дух одвічної стихії";
+
+// вертає ["", index: 0, input: "Я — Дух одвічної стихії"]
+str.match();
+ +

Параметр відмінного від RegExp типу

+ +

Якщо переданий параметр являє собою рядок або число, його буде перетворено на об'єкт {{jsxref("RegExp")}} шляхом неявного виклику new RegExp(obj).

+ +

Якщо це додатнє число, його знаком + буде знехтувано, проте для від'ємного числа знак - стане частиною регулярного виразу:

+ +
var str1 = "NaN означає «не число». Нескінченність у JavaScript має дві форми: -Infinity та +Infinity.",
+    str2 = "Моїй бабці 65 років, а дідусеві — 63.",
+    str3 = "Незмінна величина null позначає відсутність очікуваного значення.";
+
+str1.match("число");    // "число" є рядком; вертає ["число"]
+str1.match(NaN);        // величина NaN є числом; вертає ["NaN"]
+str1.match(Infinity);   // величина Infinity також є числом; вертає ["Infinity"]
+str1.match(+Infinity);  // вертає ["Infinity"]
+str1.match(-Infinity);  // вертає ["-Infinity"]
+str2.match(65);         // вертає ["65"]
+str2.match(+65);        // додатнє число; вертає ["65"]
+str3.match(null);       // вертає ["null"]
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}
+ +

Підтримка веб-переглядачами

+ +

Базова підтримка методу match()

+ + + +

{{Compat("javascript.builtins.String.match")}}

+ +

Підтримка іменованих груп

+ +

{{Compat("javascript.builtins.RegExp.named_capture_groups")}}

+ +

Зауваги щодо Firefox

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/matchall/index.html b/files/uk/web/javascript/reference/global_objects/string/matchall/index.html new file mode 100644 index 0000000000..396fb3b2bc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/matchall/index.html @@ -0,0 +1,143 @@ +--- +title: String.prototype.matchAll() +slug: Web/JavaScript/Reference/Global_Objects/String/matchAll +tags: + - JavaScript + - String + - Регулярні Вирази + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll +--- +
{{JSRef}}
+ +

Метод matchAll() повертає ітератор з усіма збігами рядка з регулярним виразом, а також захоплені групи.

+ +
{{EmbedInteractiveExample("pages/js/string-matchall.html")}}
+ + + +

Синтаксис

+ +
str.matchAll(regexp)
+ +

Параметри

+ +
+
regexp
+
+

Об'єкт регулярного виразу.

+ +

Якщо передано об'єкт obj, який не є регулярним виразом, він неявно перетворюється на {{jsxref("RegExp")}} за допомогою new RegExp(obj).

+ +

Об'єкт RegExp повинен мати прапор /g, інакше буде викинуто помилку TypeError.

+
+
+ +

Значення, що повертається

+ +

Ітератор (ітерабельний об'єкт, який не можна повторно запустити).

+ +

Приклади

+ +

Regexp.exec() та matchAll()

+ +

До появи у JavaScript методу matchAll можна було використовувати виклики regexp.exec (а також регулярні вирази з прапором /g) у циклі, щоб отримати усі збіги:

+ +
const regexp = RegExp('фу[а-я]*','g');
+const str = 'настільний футбол, фусбол';
+let match;
+
+while ((match = regexp.exec(str)) !== null) {
+  console.log(`Знайдено ${match[0]} початок=${match.index} кінець=${regexp.lastIndex}.`);
+  // виведе: "Знайдено футбол початок=11 кінець=17."
+  // виведе: "Знайдено фусбол початок=19 кінець=25."
+}
+ +

З методом matchAll можна уникнути використання циклу {{jsxref("Statements/while", "while")}} та методу exec з g.

+ +

Замість цього, використовуючи matchAll, ви отримуєте ітератор, який можна використовувати з більш зручними конструкціями {{jsxref("Statements/for...of", "for...of")}}, {{jsxref("Operators/Spread_syntax", "розкладанням масиву")}} чи {{jsxref("Array.from()")}}:

+ +
const regexp = RegExp('фу[а-я]*','g');
+const str = 'настільний футбол, фусбол';
+const matches = str.matchAll(regexp);
+
+for (const match of matches) {
+  console.log(`Знайдено ${match[0]} початок=${match.index} кінець=${match.index + match[0].length}.`);
+}
+// виведе: "Знайдено футбол початок=11 кінцець=17."
+// виведе: "Знайдень фусбол початок=19 кінець=25."
+
+// Ітератор matches є вичерпаним після перебору for..of
+// Викличте matchAll ще раз, щоб створити новий ітератор
+Array.from(str.matchAll(regexp), m => m[0]);
+// Array [ "футбол", "фусбол" ]
+ +

Метод matchAll викине виняток, якщо прапор g відсутній.

+ +
const regexp = RegExp('[а-в]','');
+const str = 'абв';
+str.matchAll(regexp);
+// TypeError
+
+ +

matchAll робить внутрішній клон regexp, тому, на відміну від {{jsxref("Global_Objects/RegExp/exec", "regexp.exec()")}}, lastIndex не змінюється під час пошуку.

+ +
const regexp = RegExp('[а-в]','g');
+regexp.lastIndex = 1;
+const str = 'абв';
+Array.from(str.matchAll(regexp), m => `${regexp.lastIndex} ${m[0]}`);
+// Array [ "1 б", "1 в" ]
+ +

Кращий доступ до захоплених груп (ніж у String.prototype.match())

+ +

Ще одна приваблива причина використовувати matchAll - покращений доступ до захоплених груп.

+ +

Захоплені групи ігноруються при використанні {{jsxref("Global_Objects/String/match", "match()")}} з глобальним прапором /g:

+ +
let regexp = /т(е)(ст(\d?))/g;
+let str = 'тест1тест2';
+
+str.match(regexp);
+// Array ['тест1', 'тест2']
+ +

Використовуючи matchAll, ви можете легко звертатись до захоплених груп:

+ +
let array = [...str.matchAll(regexp)];
+
+array[0];
+// ['тест1', 'е', 'ст1', '1', index: 0, input: 'тест1тест2', length: 4]
+array[1];
+// ['тест2', 'е', 'ст2', '2', index: 5, input: 'тест1тест2', length: 4]
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.matchAll")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/normalize/index.html b/files/uk/web/javascript/reference/global_objects/string/normalize/index.html new file mode 100644 index 0000000000..15b56e2bad --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/normalize/index.html @@ -0,0 +1,226 @@ +--- +title: String.prototype.normalize() +slug: Web/JavaScript/Reference/Global_Objects/String/normalize +tags: + - ECMAScript 2015 + - JavaScript + - String + - Unicode + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize +--- +
{{JSRef}}
+ +

Метод normalize() повертає рядок у формі нормалізації Юнікоду.

+ +
{{EmbedInteractiveExample("pages/js/string-normalize.html", "taller")}}
+ + + +

Синтаксис

+ +
str.normalize([form])
+ +

Параметри

+ +
+
form {{optional_inline}}
+
+

Одне зі значень "NFC", "NFD", "NFKC" або "NFKD", що вказують форму нормалізації Юнікоду. Якщо не вказана, або дорівнює {{jsxref("undefined")}}, використовується "NFC".

+ +

Ці значення означають наступне:

+ +
+
"NFC"
+
Канонічна декомпозиція, з подальшою канонічною композицією.
+
"NFD"
+
Канонічна декомпозиція.
+
"NFKC"
+
Сумісна декомпозиція, з подальшою канонічною композицією.
+
"NFKD"
+
Сумісна декомпозиція.
+
+
+
+ +

Значення, що повертається

+ +

Рядок, що містить форму нормалізації Юнікоду для наданого рядка.

+ +

Помилки

+ +
+
{{jsxref("RangeError")}}
+
Помилка {{jsxref("RangeError")}} викидається, якщо form не є одним з наведених вище значень.
+
+ +

Опис

+ +

Юнікод присвоює унікальне числове значення, яке називається кодом символа, кожному символу. Наприклад, кодом символа "A" є U+0041. Однак, іноді більше, ніж один код символа, або послідовність кодів, можуть представляти один і той самий абстрактний символ — наприклад, символ "ñ" може бути представлений:

+ + + +
let string1 = '\u00F1';
+let string2 = '\u006E\u0303';
+
+console.log(string1);  //  ñ
+console.log(string2);  //  ñ
+
+ +

Однак, оскільки коди символів відрізняються, порівняння рядків не вважатиме їх рівними. А оскільки кількість кодів символів у цих варіантах різна, то вони навіть мають різні довжини.

+ +
let string1 = '\u00F1';            // ñ
+let string2 = '\u006E\u0303';      // ñ
+
+console.log(string1 === string2); // false
+console.log(string1.length);      // 1
+console.log(string2.length);      // 2
+
+ +

Метод normalize() допомагає вирішити цю проблему, перетворюючи рядок у нормалізовану форму, спільну для усіх послідовностей кодів символів, які представляють однакові символи. Існують дві основні форми нормалізації, одна базується на канонічній еквівалентності, а інша на сумісності.

+ +

Нормалізація на основі канонічної еквівалентності

+ +

В Юнікоді дві послідовності кодів символів канонічно еквівалентні, якщо вони відображають однакові абстрактні символи, і повинні завжди мати однакове візуальне відображення та поведінку (для прикладу, вони завжди повинні сортуватися однаковим чином).

+ +

Ви можете скористатись методом normalize(), використовуючи аргументи "NFD" або "NFC", щоб створити форму рядка, що буде однаковою для усіх канонічно еквівалентних рядків. У наведеному нижче прикладі ми нормалізуємо два відображення символу "ñ":

+ +
let string1 = '\u00F1';           // ñ
+let string2 = '\u006E\u0303';     // ñ
+
+string1 = string1.normalize('NFD');
+string2 = string2.normalize('NFD');
+
+console.log(string1 === string2); // true
+console.log(string1.length);      // 2
+console.log(string2.length);      // 2
+
+ +

З'єднана та розкладена форми

+ +

Зауважте, що довжина нормалізованої форми при використанні "NFD" дорівнює 2. Це тому, що "NFD" дає вам розкладену версію канонічної форми, в якій один код символа розбивається на множину складових. Розкладеною канонічною формою для "ñ" є "\u006E\u0303".

+ +

Ви можете вказати "NFC", щоб отримати з'єднану канонічну форму, в якій множина кодів символів замінюється єдиним кодом символу, де це можливо. З'єднаною канонічною формою для "ñ" є "\u00F1":

+ +
let string1 = '\u00F1';                           // ñ
+let string2 = '\u006E\u0303';                     // ñ
+
+string1 = string1.normalize('NFC');
+string2 = string2.normalize('NFC');
+
+console.log(string1 === string2);                 // true
+console.log(string1.length);                      // 1
+console.log(string2.length);                      // 1
+console.log(string2.codePointAt(0).toString(16)); // f1
+ +

Нормалізація на основі сумісності

+ +

В Юнікоді дві послідовності кодів символів є сумісними, якщо вони представляють однакові абстрактні символи, і мають сприйматися однаково у деяких — але не обов'язково в усіх — застосуваннях.

+ +

Усі канонічно еквівалентні послідовності також є сумісними, але не навпаки.

+ +

Наприклад:

+ + + +

У деяких ситуаціях (таких, як сортування) вони мають сприйматися як еквівалентні, а у деяких (таких, як візуальне відображення) — ні, отже, вони не є канонічно еквівалентними.

+ +

Ви можете скористатись методом normalize(), використовуючи аргументи "NFKD" або "NFKC", щоб створити форму рядка, яка буде однаковою для усіх сумісних рядків:

+ +
let string1 = '\uFB00';
+let string2 = '\u0066\u0066';
+
+console.log(string1);             // ff
+console.log(string2);             // ff
+console.log(string1 === string2); // false
+console.log(string1.length);      // 1
+console.log(string2.length);      // 2
+
+string1 = string1.normalize('NFKD');
+string2 = string2.normalize('NFKD');
+
+console.log(string1);             // ff <- візуальне відображення змінилось
+console.log(string2);             // ff
+console.log(string1 === string2); // true
+console.log(string1.length);      // 2
+console.log(string2.length);      // 2
+
+ +

Застосовуючи сумісну нормалізацію, важливо враховувати, що саме ви намагаєтесь зробити з рядками, оскільки нормалізована форма може не підходити для усіх застосувань. У наведеному вище прикладі нормалізація підходить для пошуку, бо дозволяє користувачу знайти рядок пошуком "f". Але вона може не підходити для відображення, бо зовнішній вигляд символа відрізняється.

+ +

Як і у випадку з канонічною нормалізацією, ви можете застосовувати розкладену або з'єднану форми, передаючи, відповідно, "NFKD" або "NFKC".

+ +

Приклади

+ +

Використання normalize()

+ +
// Початковий рядок
+
+// U+1E9B: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S З КРАПКОЮ ЗГОРИ
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+let str = '\u1E9B\u0323';
+
+
+// Канонічно-з'єднана форма (NFC)
+
+// U+1E9B: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S З КРАПКОЮ ЗГОРИ
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+str.normalize('NFC'); // '\u1E9B\u0323'
+str.normalize();      // такий самий
+
+
+// Канонічно-розкладена форма (NFD)
+
+// U+017F: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+// U+0307: ОБ'ЄДНУЮЧА КРАПКА ЗГОРИ
+str.normalize('NFD'); // '\u017F\u0323\u0307'
+
+
+// Сумісно-з'єднана (NFKC)
+
+// U+1E69: ЛАТИНСЬКА МАЛА ЛІТЕРА S З КРАПКОЮ ВНИЗУ ТА КРАПКОЮ ЗГОРИ
+str.normalize('NFKC'); // '\u1E69'
+
+
+// Сумісно-розкладена (NFKD)
+
+// U+0073: ЛАТИНСЬКА МАЛА ЛІТЕРА S
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+// U+0307: ОБ'ЄДНУЮЧА КРАПКА ЗГОРИ
+str.normalize('NFKD'); // '\u0073\u0323\u0307'
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.normalize")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/padend/index.html b/files/uk/web/javascript/reference/global_objects/string/padend/index.html new file mode 100644 index 0000000000..8f9fbd2e63 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/padend/index.html @@ -0,0 +1,66 @@ +--- +title: String.prototype.padEnd() +slug: Web/JavaScript/Reference/Global_Objects/String/padEnd +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd +--- +
{{JSRef}}
+ +

Метод padEnd() доповнює поточний рядок наданим рядком (повторюючи його, якщо треба), так, щоб отриманий в результаті рядок досяг заданої довжини. Доповнення застосовується з кінця поточного рядка.

+ +
{{EmbedInteractiveExample("pages/js/string-padend.html")}}
+ + + +

Синтаксис

+ +
str.padEnd(targetLength [, padString])
+ +

Параметри

+ +
+
targetLength
+
Довжина результуючого рядка після доповнення поточного рядка. Якщо значення є меншим за довжину поточного рядка, поточний рядок буде повернений без змін.
+
padString {{optional_inline}}
+
Рядок, яким потрібно доповнити поточний рядок. Якщо цей рядок надто довгий для отримання заданої довжини, він буде обрізаний: для мов з письмом зліва направо буде застосована ліва частина, а для мов з письмом справа наліво - права частина. Значенням за замовчуванням для цього параметра є " " (U+0020).
+
+ +

Значення, що повертається

+ +

{{jsxref("String", "Рядок")}} вказаної довжини з доповненням, застосованим в кінці поточного рядка.

+ +

Приклади

+ +
'абв'.padEnd(10);          // "абв       "
+'абв'.padEnd(10, "ква");   // "абвкваквак"
+'абв'.padEnd(6, "123456"); // "абв123"
+'абв'.padEnd(1);           // "абв"
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.padEnd")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/padstart/index.html b/files/uk/web/javascript/reference/global_objects/string/padstart/index.html new file mode 100644 index 0000000000..4f7e48a94f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/padstart/index.html @@ -0,0 +1,84 @@ +--- +title: String.prototype.padStart() +slug: Web/JavaScript/Reference/Global_Objects/String/padStart +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart +--- +
{{JSRef}}
+ +

Метод padStart() доповнює поточний рядок іншим рядком (кілька раз, якщо треба), доки отриманий рядок не досягне заданої довжини. Доповнення застосовується з початку поточного рядка.

+ +
{{EmbedInteractiveExample("pages/js/string-padstart.html")}}
+ + + +

Синтаксис

+ +
str.padStart(targetLength [, padString])
+ +

Параметри

+ +
+
targetLength
+
Довжина результуючого рядка після доповнення поточного рядка str. Якщо значення є меншим за його довжину str.length, то str повертається без змін.
+
padString {{optional_inline}}
+
Рядок, яким потрібно доповнити поточний рядок str. Якщо padString надто довгий для отримання заданої довжини targetLength, він буде обрізаний з кінця. Значенням за замовчуванням є " " (U+0020 'ПРОБІЛ').
+
+ +

Значення, що повертається

+ +

{{jsxref("String", "Рядок")}} заданої довжини targetLength з доповненням padString, застосованим на початку.

+ +

Приклади

+ +

Базові приклади

+ +
'абв'.padStart(10);         // "       абв"
+'абв'.padStart(10, "ква");  // "кваквакабв"
+'абв'.padStart(6,"123465"); // "123абв"
+'абв'.padStart(8, "0");     // "00000абв"
+'абв'.padStart(1);          // "абв"
+ +

Перетворення числа на рядок фіксованої ширини

+ +
// Версія Javascript для: (unsigned)
+//  printf "%0*d" width num
+function leftFillNum(num, targetLength) {
+    return num.toString().padStart(targetLength, 0);
+}
+
+const num = 123;
+console.log(leftFillNum(num, 5));
+// очікуваний результат: "00123"
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.padStart")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/quote/index.html b/files/uk/web/javascript/reference/global_objects/string/quote/index.html new file mode 100644 index 0000000000..95ee484e6d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/quote/index.html @@ -0,0 +1,77 @@ +--- +title: String.prototype.quote() +slug: Web/JavaScript/Reference/Global_Objects/String/quote +tags: + - JavaScript + - String + - застарілий + - метод +translation_of: Archive/Web/JavaScript/String.quote +--- +
{{JSRef}} {{obsolete_header("37")}} {{non-standard_header}}
+ +

Нестандартний метод quote() повертає копію рядка, замінюючи різноманітні спеціальні символи їхнім екрануванням та загортає результат у подвійні лапки (").

+ +

Синтаксис

+ +
str.quote()
+ +

Значення, що повертається

+ +

Новий рядок, що відображає початковий рядок у подвійних лапках, з екрануванням будь-яких спеціальних символів.

+ +

Приклади

+ +

У наведеній нижче таблиці метод quote() замінює будь-які спеціальні символи та загортає рядки у подвійні лапки. Також зверніть увагу на третю колонку, де загорнутий метод {{jsxref("Global_Objects/eval", "eval()")}} знову обчислює екрановані символи.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
strstr.quote()eval(str.quote())
Hello world!"Hello world!"Hello world!
Hello
+ world!
"Hello\n\tworld!"Hello
+ world!
" \ — '"\" \\ \u2014 '"" \ — '
+ +

Специфікації

+ +

Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.

+ +

Поліфіл

+ +
if (!String.prototype.quote)
+    String.prototype.quote = function(){
+        return JSON.stringify( this ); // починаючи з IE8
+    }
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.quote")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/raw/index.html b/files/uk/web/javascript/reference/global_objects/string/raw/index.html new file mode 100644 index 0000000000..6383506ec5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/raw/index.html @@ -0,0 +1,117 @@ +--- +title: String.raw() +slug: Web/JavaScript/Reference/Global_Objects/String/raw +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/raw +--- +
{{JSRef}}
+ +

Статичний метод String.raw() є функцією-тегом шаблонних літералів. Він схожий на префікс r у мові Python, або на префікс @ у мові C# для рядкових літералів. (Але вони не ідентичні; дивіться пояснення у цій проблемі.) Він використовується для отримання сирої рядкової форми шаблонних рядків, тобто, підстановки (наприклад, ${foo}) обробляються, а екранування (наприклад, \n) ні.

+ +
{{EmbedInteractiveExample("pages/js/string-raw.html")}}
+ +

Синтаксис

+ +
String.raw(callSite, ...substitutions)
+
+String.raw`templateString`
+
+ +

Параметри

+ +
+
callSite
+
Добре сформований об'єкт-шаблон точки виклику, наприклад { raw: ['раз', 'два', 'три'] }.
+
...substitutions
+
Містить значення підстановок.
+
templateString
+
{{jsxref("template_strings", "Шаблонний рядок")}}, може містити підстановки (${...}).
+
+ +

Значення, що вертається

+ +

Сира рядкова форма наданого шаблонного рядка.

+ +

Винятки

+ +
+
{{jsxref("TypeError")}}
+
Помилка {{jsxref("TypeError")}} викидається, якщо перший аргумент не є добре сформованим об'єктом.
+
+ +

Опис

+ +

У більшості випадків String.raw() використовується з шаблонними рядками. Перший синтаксис, наведений вище, використовується лише зрідка, тому що рушій JavaScript викличе його для вас з правильними аргументами (як і інші функції-теги).

+ +

String.raw() - єдина вбудована функція-тег шаблонних рядків. Вона працює як звичайна шаблонна функція та виконує об'єднання. Ви навіть можете перевизначити її звичайним кодом JavaScript.

+ +

Приклади

+ +

Використання String.raw()

+ +
String.raw`Привіт\n${2+3}!`;
+// 'Привіт\n5!', символ після 'Привіт' -
+// це не символ нового рядка,
+// '\' та 'n' є двома символами.
+
+String.raw`Привіт\u000A!`;
+// 'Привіт\u000A!', те саме тут, цього разу ми отримуємо
+//  6 символів, \, u, 0, 0, 0, A.
+// Усі символи екранування будут неефективні,
+// а зворотні слеши будуть присутні у отриманому рядку.
+// Ви можете підтвертиди це, перевіривши властивість рядка .length.
+
+let name = 'Боб';
+String.raw`Привіт,\nце ${name}!`;
+// 'Привіт,\nце Боб!', підстановки обробляються.
+
+// Зазвичай, ви б не викликали String.raw() як функцію,
+// але, щоб симулювати `раз${2 + 3}два${'Java' + 'Script'}три`, можна зробити:
+String.raw({
+  raw: ['раз', 'два', 'три']
+}, 2 + 3, 'Java' + 'Script'); // 'раз5дваJavaScriptтри'
+// Зауважте, що перший аргумент - об'єкт з властивістю 'raw',
+// чиїм значенням є ітерабельний об'єкт, що представляє відокремлені рядки
+// у шаблонному літералі.
+// Решта аргументів - це підстановки.
+
+// Значенням 'raw' першого аргументу може бути будь-який ітерабельний об'єкт,
+// навіть рядок! Наприклад, 'тест' сприймається як ['т', 'е', 'с', 'т'].
+// Наступний код еквівалентний цьому
+// `т${0}е${1}с${2}т`:
+String.raw({ raw: 'тест' }, 0, 1, 2); // 'т0е1с2т'
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.raw")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/repeat/index.html b/files/uk/web/javascript/reference/global_objects/string/repeat/index.html new file mode 100644 index 0000000000..101776ad15 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/repeat/index.html @@ -0,0 +1,119 @@ +--- +title: String.prototype.repeat() +slug: Web/JavaScript/Reference/Global_Objects/String/repeat +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat +--- +
{{JSRef}}
+ +

Метод repeat() створює та повертає новий рядок, що містить вказану кількість об'єднаних разом копій рядка, на якому він був викликаний.

+ +
{{EmbedInteractiveExample("pages/js/string-repeat.html","shorter")}}
+ + + +

Синтаксис

+ +
str.repeat(count)
+
+ +

Параметри

+ +
+
count
+
Ціле число в діапазоні між 0 та {{jsxref("Global_Objects/Number/POSITIVE_INFINITY", "+Infinity")}}, що вказує кількість повторів рядка.
+
+ +

Значення, що повертається

+ +

Новий рядок, що містить вказану кількість копій наданого рядка.

+ +

Винятки

+ + + +

Приклади

+ +
'абв'.repeat(-1)    // RangeError
+'абв'.repeat(0)     // ''
+'абв'.repeat(1)     // 'абв'
+'абв'.repeat(2)     // 'абвабв'
+'абв'.repeat(3.5)   // 'абвабвабв' (count буде перетворений на ціле число)
+'абв'.repeat(1/0)   // RangeError
+
+({ toString: () => 'абв', repeat: String.prototype.repeat }).repeat(2)
+// 'абвабв' (repeat() є загальним методом)
+
+ +

Поліфіл

+ +

Цей метод був доданий у специфікацію ECMAScript 2015 та може поки не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл String.prototype.repeat() за допомогою наступного коду:

+ +
if (!String.prototype.repeat) {
+  String.prototype.repeat = function(count) {
+    'use strict';
+    if (this == null)
+      throw new TypeError('неможливо перетворити ' + this + ' на об\'єкт');
+
+    var str = '' + this;
+    // Щоб перетворити рядок на ціле число.
+    count = +count;
+    // Перевірка на NaN
+    if (count != count)
+      count = 0;
+
+    if (count < 0)
+      throw new RangeError('repeat count must be non-negative');
+
+    if (count == Infinity)
+      throw new RangeError('repeat count must be less than infinity');
+
+    count = Math.floor(count);
+    if (str.length == 0 || count == 0)
+      return '';
+
+    // Гарантія того, що count є цілим 31-бітним числом, дозволяє значно оптимізувати
+    // головну частину. Але, все ж, найновіші (серпень 2014) переглядачі не можуть
+    // впоратись з рядками з 1 << 28 символів чи довше, а отже:
+    if (str.length * count >= 1 << 28)
+      throw new RangeError('repeat count must not overflow maximum string size');
+
+    var maxCount = str.length * count;
+    count = Math.floor(Math.log(count) / Math.log(2));
+    while (count) {
+       str += str;
+       count--;
+    }
+    str += str.substring(0, maxCount - str.length);
+    return str;
+  }
+}
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.repeat")}}

diff --git a/files/uk/web/javascript/reference/global_objects/string/replace/index.html b/files/uk/web/javascript/reference/global_objects/string/replace/index.html new file mode 100644 index 0000000000..35f4a5ab54 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/replace/index.html @@ -0,0 +1,240 @@ +--- +title: String.prototype.replace() +slug: Web/JavaScript/Reference/Global_Objects/String/replace +tags: + - JavaScript + - String + - вирази + - метод + - регулярний + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/replace +--- +
{{JSRef}}
+ +

Метод replace() повертає новий рядок, в якому деякі або усі збіги з шаблоном замінені параметром заміни. Шаблон може бути рядком або {{jsxref("RegExp","регулярним виразом")}}, а заміна може бути рядком або функцією, що викликатиметься для кожного збігу. Якщо шаблон є рядком, буде замінений лише перший збіг.

+ +

Початковий рядок лишається незміненим.

+ +
{{EmbedInteractiveExample("pages/js/string-replace.html")}}
+ + + +

Синтаксис

+ +
const newStr = str.replace(regexp|substr, newSubstr|function)
+ +

Параметри

+ +
+
regexp (шаблон)
+
Об'єкт або літерал {{jsxref("RegExp")}}. Збіг чи збіги замінюються рядком newSubstr або значенням, яке вертає вказана функція function.
+
substr
+
{{jsxref("String","Рядок")}}, який потрібно замінити на newSubstr. Він сприймається як рядковий літерал та не інтерпретується як регулярний вираз. Замінюється лише перше співпадіння.
+
newSubstr (заміна)
+
{{jsxref("String","Рядок")}}, який замінює підрядок, вказаний параметром regexp або substr. Підтримується можливість задавати декілька спеціальних шаблонів заміни; дивіться розділ "Використання рядка в якості параметра" нижче.
+
function (заміна)
+
Функція, що викликатиметься для створення нового підрядка, який буде використовуватись для заміни збігів з наданим параметром regexp або substr. Аргументи, що передаються в цю функцію, описані у розділі "Використання функції в якості параметра" нижче.
+
+ +

Значення, що повертається

+ +

Новий рядок, в якому деякі або усі збіги з шаблоном замінені наданим значенням.

+ +

Опис

+ +

Цей метод не змінює об'єкт {{jsxref("String")}}, що його викликав. Він просто повертає новий рядок.

+ +

Щоб виконати глобальний пошук та заміну, використовуйте перемикач g у регулярному виразі.

+ +

Використання рядка в якості параметра

+ +

Рядок заміни може містити наступні спеціальні шаблони заміни:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ШаблонВставляє
$$Вставляє "$".
$&Вставляє знайдений підрядок.
$`Вставляє частину рядка, що передує знайденому підрядку.
$'Вставляє частину рядка, що розташована за знайденим підрядком.
$nДе n є додатним цілим числом, меншим за 100, вставляє n-й підрядок збігів у дужках, за умови, що першим аргументом був об'єкт {{jsxref("RegExp")}}. Зауважте, що вони індексуються з 1.
+ +

Використання функції в якості параметра

+ +

Ви можете вказати функцію в якості другого параметра. У цьому випадку функція буде викликана після знайдення збігу. Результат функції (повернене значення) буде використаний в якості рядка заміни. (Заувага: Вищезазначені спеціальні шаблони заміни не застосовуються у цьому випадку.)

+ +

Зауважте, що функція буде викликатись багаторазово, для кожного повного збігу, що буде замінений, якщо регулярний вираз у першому параметрі є глобальним.

+ +

Функція має наступні аргументи:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Можливе ім'яНадане значення
matchЗнайдений підрядок. (Відповідає вищенаведеному $&)
p1, p2, ...n-й рядок, знайдений захопленою групою у дужках, за умови, що першим аргументом методу replace() був об'єкт {{jsxref("RegExp")}}. (Відповідає вищенаведеним $1, $2, і т.д.) Наприклад, якщо був наданий аргумент /(\a+)(\b+)/, то p1 є збігом з \a+, а p2 - збігом з \b+.
offsetЗсув знайденого підрядка всередині рядка, що перевіряється. (Наприклад, якби цілим рядком був 'абвг', а знайденим підрядком 'бв', то цей аргумент дорівнював би 1.)
stringВесь рядок, що перевіряється.
+ +

(Точна кількість аргументів залежить від того, чи є перший аргумент об'єктом {{jsxref("RegExp")}} — і, якщо є, то скільки збігів, заключених у дужки, він визначає.)

+ +

Наступний приклад присвоїть newString значення 'абв - 12345 - #$*%':

+ +
function replacer(match, p1, p2, p3, offset, string) {
+  // p1 - не цифри, p2 - цифри, а p3 - не літерно-цифрові символи
+  return [p1, p2, p3].join(' - ');
+}
+let newString = 'абв12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
+console.log(newString);  // абв - 12345 - #$*%
+
+ +

Приклади

+ +

Визначення регулярного виразу у replace()

+ +

У наступному прикладі регулярний вираз визначається у методі replace() та містить прапор ігнорування регістру.

+ +
let str = 'Наближається Різдво у чарівній Миші...';
+let newstr = str.replace(/миші/i, 'тиші');
+console.log(newstr);  // Наближається Різдво у чарівній тиші...
+
+ +

Цей код виводить 'Наближається Різдво у чарівній тиші...'.

+ +
+

Заувага: Більше пояснень щодо регулярних виразів дивіться у цьому посібнику.

+
+ +

Використання глобального пошуку та ігнорування регістру з replace()

+ +

Глобальну заміну можна зробити лише з використанням регулярного виразу. У наступному прикладі регулярний вираз містить прапори глобального пошуку та ігнорування регістру, які дозволяють методу replace() замінити кожний знайдений підрядок 'яблука' на 'апельсини'.

+ +
let re = /яблука/gi;
+let str = 'Яблука круглі, і яблука сочні.';
+let newstr = str.replace(re, 'апельсини');
+console.log(newstr);  // апельсини круглі, і апельсини сочні.
+
+ +

Цей код виводить 'апельсини круглі, і апельсини сочні.'.

+ +

Код, що міняє слова місцями

+ +

Наступний скрипт міняє місцями слова у рядку. В якості тексту заміни скрипт використовує захоплені групи та шаблони заміни $1 та $2.

+ +
let re = /(\w+)\s(\w+)/;
+let str = 'John Smith';
+let newstr = str.replace(re, '$2, $1');
+console.log(newstr);  // Smith, John
+
+ +

Цей код виводить 'Smith, John'.

+ +

Використання внутрішньої функції, яка модифікує знайдені символи

+ +

У цьому прикладі усі великі літери перетворюються на малі, а перед розташуванням збігу вставляється дефіс. Важливим тут є те, що необхідно виконати додаткові операції над збігом перед тим, як він буде повернений в якості заміни.

+ +

Функція заміни приймає фрагмент збігу в якості параметра і використовує його для перетворення регістру та приєднання дефісу перед поверненням.

+ +
function styleHyphenFormat(propertyName) {
+  function upperToHyphenLower(match, offset, string) {
+    return (offset > 0 ? '-' : '') + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}
+
+ +

Наступний код styleHyphenFormat('borderTop') поверне 'border-top'.

+ +

Оскільки ми хочемо далі трансформувати результат збігу перед останочною заміною, нам потрібно використовувати функцію. Це запускає обчислення збігу пред викликом методу {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}. Якби ми спробували зробити це, використовуючи збіг без функії, метод {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} не мав би жодного ефекту.

+ +
let newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());  // не спрацює
+
+ +

Все тому, що '$&'.toLowerCase() спочатку був би обчислений як рядковий літерал (і в результаті повернув би той самий рядок '$&') перед використанням його символів в якості шаблону.

+ +

Заміна градусів Фаренгейта на еквівалент у градусах Цельсія

+ +

Наступний приклад замінює значення градусів за Фаренгейтом на його еквівалент у градусах Цельсія. Значення градусів Фаренгейта має бути числом, що закінчується літерою "F". Функція повертає число за Цельсієм, що закінчується літерою "C". Наприклад, якщо вхідне число дорівнює "212F", функція повертає "100C". Якщо число дорівнює "0F", функція вертає "-17.77777777777778C".

+ +

Регулярний вираз test перевіряє будь-яке число, що закінчується літерою F. Значення градусів Фаренгейта доступне функції через її другий параметр p1. Функція присвоює значення за Цельсієм, базуючись на градусах Фаренгейта, переданих у рядку до функції f2c(). Далі f2c() повертає значення за Цельсієм. Ця функція схожа на прапор мови Perl s///e.

+ +
function f2c(x) {
+  function convert(str, p1, offset, s) {
+    return ((p1 - 32) * 5/9) + 'C';
+  }
+  let s = String(x);
+  let test = /(-?\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convert);
+}
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.replace")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html b/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html new file mode 100644 index 0000000000..ac59dbc1af --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html @@ -0,0 +1,169 @@ +--- +title: String.prototype.replaceAll() +slug: Web/JavaScript/Reference/Global_Objects/String/replaceAll +tags: + - JavaScript + - String + - regex + - Регулярний вираз + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll +--- +
{{JSRef}}
+ +

Метод replaceAll() повертає новий рядок, в якому усі збіги з шаблоном замінені вказаним параметром заміни. Шаблон може бути рядком або {{jsxref("RegExp","регулярним виразом")}}, а заміна може бути рядком або функцією, що викликатиметься для кожного збігу.

+ +

Початковий рядок лишається незміненим.

+ +
{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}
+ + + +

Синтаксис

+ +
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
+ +

Параметри

+ +
+
regexp (шаблон)
+
Об'єкт або літерал {{jsxref("RegExp","регулярного виразу")}} з глобальним прапором. Збіги замінюються на newSubstr або значення, яке повертає вказана функція function. Регулярний вираз без глобального ("g") прапора викине помилку TypeError: "replaceAll must be called with a global RegExp".
+
substr
+
{{jsxref("String", "Рядок")}}, який потрібно замінити на newSubstr. Він вважається звичайним рядком та не інтерпретується як регулярний вираз.
+
newSubstr (заміна)
+
{{jsxref("String","Рядок")}}, який замінює підрядок, вказаний параметром regexp або substr. Підтримується ряд спеціальних шаблонів заміни; дивіться нижче розділ "Використання рядка в якості параметра".
+
function (заміна)
+
Функція, що буде викликана для створення нового підрядка, який замінить збіги з наданим параметром regexp або substr. Аргументи, що передаються в цю функцію, описані нижче в розділі "Використання функції в якості параметра".
+
+ +

Значення, що повертається

+ +

Новий рядок, в якому усі збіги з шаблоном замінені.

+ +

Опис

+ +

Цей метод не змінює об'єкт {{jsxref("String")}}, що його викликав. Він просто повертає новий рядок.

+ +

Використання рядка в якості параметра

+ +

Рядок заміни може містити наступні спеціальні шаблони заміни:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ШаблонВставляє
$$Вставляє "$".
$&Вставляє знайдений підрядок.
$`Вставляє частину рядка, що передує знайденому підрядку.
$'Вставляє частину рядка, що розташована за знайденим підрядком.
$nДе n є додатним цілим числом, меншим за 100, вставляє n-й підрядок збігів у дужках, за умови, що першим аргументом був об'єкт {{jsxref("RegExp")}}. Зауважте, що вони індексуються з 1.
+ +

Використання функції в якості параметра

+ +

Ви можете вказати функцію в якості другого параметра. У цьому випадку функція буде викликана після знайдення збігу. Результат функції (повернене значення) буде використаний в якості рядка заміни. (Заувага: Вищезазначені спеціальні шаблони заміни не застосовуються у цьому випадку.)

+ +

Зауважте, що функція буде викликатись багаторазово, для кожного повного збігу, що буде замінений, якщо регулярний вираз у першому параметрі є глобальним.

+ +

Функція має наступні аргументи:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Можливе ім'яНадане значення
matchЗнайдений підрядок. (Відповідає вищенаведеному $&)
p1, p2, ...n-й рядок, знайдений захопленою групою у дужках, за умови, що першим аргументом методу replace() був об'єкт {{jsxref("RegExp")}}. (Відповідає вищенаведеним $1, $2 і т.д.) Наприклад, якщо був наданий аргумент /(\a+)(\b+)/, то p1 є збігом з \a+, а p2 - збігом з \b+.
offsetЗсув знайденого підрядка всередині рядка, що перевіряється. (Наприклад, якби цілим рядком був 'абвг', а знайденим підрядком 'бв', то цей аргумент дорівнював би 1.)
stringВесь рядок, що перевіряється.
+ +

(Точна кількість аргументів залежить від того, чи є перший аргумент об'єктом {{jsxref("RegExp")}} і, якщо є, то скільки збігів, заключених у дужки, він визначає.)

+ +

Приклади

+ +

Використання replaceAll

+ +
'ааббвв'.replaceAll('б', '.');
+// 'аа..вв'
+ +

Неглобальний регулярний вираз викидає виняток

+ +

Якщо використовується регулярний вираз в якості значення пошуку, він повинен бути глобальним. Це не працюватиме:

+ +
'ааббвв'.replaceAll(/б/, '.');
+TypeError: replaceAll must be called with a global RegExp
+
+ +

Так працюватиме:

+ +
'ааббвв'.replaceAll(/б/g, '.');
+"аа..вв"
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.replaceAll")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/search/index.html b/files/uk/web/javascript/reference/global_objects/string/search/index.html new file mode 100644 index 0000000000..7d81b5d0a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/search/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.search() +slug: Web/JavaScript/Reference/Global_Objects/String/search +tags: + - JavaScript + - Prototype + - String + - Довідка + - Регулярний вираз +translation_of: Web/JavaScript/Reference/Global_Objects/String/search +--- +
{{JSRef}}
+ +

Метод search() здійснює пошук у рядку за вказаним регулярним виразом.

+ +

Синтаксис

+ +
str.search(regexp)
+ +

Параметри

+ +
+
regexp
+
Об'єкт регулярного виразу. Якщо передати значення value іншого типу, його буде зведено до {{jsxref("RegExp")}} за допомогою оператора new RegExp(value).
+
+ +

Вертає

+ +

Індекс початку першого збігу між рядком та переданим регулярним виразом; якщо збігу не знайдено, вертає значення -1.

+ +

Опис

+ +

Метод search() використовується тоді, коли треба не лише знати, чи містить рядок відповідну послідовність, а й з'ясувати, в якому саме місці вона починається. Натомість можно скористатися методом {{jsxref("RegExp.prototype.test()")}}, що вертає boolean, якщо треба з'ясувати лише наявність такої послідовності.
+ Ще детальнішу інформацію про результат пошуку (коштом нижчої швидкодії) можна отримати за допомогою метода {{jsxref("String.prototype.match()", "match()")}} або {{jsxref("RegExp.prototype.exec()")}}.

+ +

Приклади

+ +

Використання search()

+ +

В цьому прикладі наведено успішний пошук (метод вертає невід'ємне значення):

+ +
var str = "Красно дякую, панове!";
+
+// Шукаємо послідовність із шести рядкових (маленьких) літер.
+var pattern = /[а-я]{6}/g;
+console.log(str.search(pattern));  // вертає 14, що є індексом літери «п»
+ +

Натомість в уьому прикладі знайти шукане неможливо (рядок не містить жодної крапки), тож метод вертає значення -1:

+ +
var str = "Щиро вітаю, друже мій!";
+var pattern = /[.]/g;
+console.log(str.search(pattern));  // вертає -1
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкова виознака, запроваджено у JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.search")}}

+ +

Зауваги щодо Gecko

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/slice/index.html b/files/uk/web/javascript/reference/global_objects/string/slice/index.html new file mode 100644 index 0000000000..944e757382 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/slice/index.html @@ -0,0 +1,116 @@ +--- +title: String.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/String/slice +tags: + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/slice +--- +
{{JSRef}}
+ +

Метод slice() вирізає частину рядка та повертає її як новий рядок, не змінюючи початковий.

+ +
{{EmbedInteractiveExample("pages/js/string-slice.html", "taller")}}
+ + + +

Синтаксис

+ +
str.slice(beginIndex[, endIndex])
+ +

Параметри

+ +
+
beginIndex
+
+

Індекс на основі нуля, з якого починається копіювання. Якщо індекс від'ємний, він сприймається як str.length + beginIndex. (Наприклад, якщо beginIndex дорівнює -3, він сприймається як str.length - 3.)

+ +

Якщо значення beginIndex більше за довжину рядка str.length або дорівнює їй, slice() повертає порожній рядок.

+
+
endIndex {{optional_inline}}
+
+

Індекс на основі нуля, до якого треба виконувати копіювання. Символ за цим індексом не буде включений.

+ +

Якщо endIndex відсутній, slice() копіює до кінця рядка. Якщо його значення від'ємне, він сприймається як str.length + endIndex. (Наприклад, якщо endIndex дорівнює -3, він сприймається як str.length - 3.)

+
+
+ +

Значення, що повертається

+ +

Новий рядок, що містить вказану частину рядка.

+ +

Опис

+ +

Метод slice() дістає текст з одного рядка та повертає новий рядок. Зміни у тексті одного з рядків не впливають на інший рядок.

+ +

slice() скопіює текст по індекс endIndex (але не включно). str.slice(1,4) копіює з другого по четвертий символ (символи за індексами 1, 2, та 3).

+ +

Наприклад, str.slice(2, -1) копіює частину від третього до другого з кінця символу рядка.

+ +

Приклади

+ +

Використання slice() для створення нового рядка

+ +

Наступний приклад використовує slice(), щоб створити новий рядок.

+ +
let str1 = "П'ять мавпенят стрибали на столі", // довжина str1 дорівнює 32.
+    str2 = str1.slice(1, 8),
+    str3 = str1.slice(6, -2),
+    str4 = str1.slice(15),
+    str5 = str1.slice(32);
+console.log(str2)  // РЕЗУЛЬТАТ: 'ять ма
+console.log(str3)  // РЕЗУЛЬТАТ: мавпенят стрибали на сто
+console.log(str4)  // РЕЗУЛЬТАТ: стрибали на столі
+console.log(str5)  // РЕЗУЛЬТАТ: ""
+ +

Використання slice() з від'ємними індексами

+ +

Наступний приклад використовує slice() з від'ємними індексами.

+ +
let str = "П'ять мавпенят стрибали на столі."
+str.slice(-6)      // вертає "столі."
+str.slice(-6, -1)  // вертає "столі"
+str.slice(0, -1)   // вертає "П'ять мавпенят стрибали на столі"
+ +

Цей приклад відраховує у зворотньому напрямку, від кінця рядка, 12, щоб знайти початковий індекс, та вперед з початку рядка 25, щоб знайти кінцевий індекс.

+ +
console.log(str.slice(-12, 25)) // => "ли н"
+ +

Тут він рахує вперед від початку 21, щоб знайти початковий індекс, і у зворотньому напрямку з кінця 8, щоб знайти кінцевий індекс.

+ +
console.log(str.slice(21, -8)) // => "ли н"
+ +

Ці аргументи відраховують у зворотньому напрямку з кінця 5, щоб знайти початковий індекс, та у зворотньому напрямку з кінця 1, щоб знайти кінцевий індекс.

+ +
console.log(str.slice(-5, -1)) // => "толі"
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.slice")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/small/index.html b/files/uk/web/javascript/reference/global_objects/string/small/index.html new file mode 100644 index 0000000000..b7cf6d34e6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/small/index.html @@ -0,0 +1,70 @@ +--- +title: String.prototype.small() +slug: Web/JavaScript/Reference/Global_Objects/String/small +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/small +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод small() створює HTML-елемент <small>, який відображає рядок зменшеним шрифтом.

+ +

Синтаксис

+ +
str.small()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <small>.

+ +

Опис

+ +

Метод small() вбудовує рядок у тег <small>: "<small>str</small>".

+ +

Приклади

+ +

Використання small()

+ +

Наступний приклад використовує рядкові методи, щоб змінювати розмір рядка:

+ +
var worldString = 'Привіт';
+
+console.log(worldString.small());     // <small>Привіт</small>
+console.log(worldString.big());       // <big>Привіт</big>
+console.log(worldString.fontsize(7)); // <font size="7">Привіт</fontsize>
+
+ +

Використовуючи об'єкт element.style, ви можете отримати атрибут елемента style та маніпулювати ним у більш загальному стилі, наприклад:

+ +
document.getElementById('yourElemId').style.fontSize = '0.7em';
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.small")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/split/index.html b/files/uk/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..6aa3a2c251 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,220 @@ +--- +title: String.prototype.split() +slug: Web/JavaScript/Reference/Global_Objects/String/split +tags: + - JavaScript + - String + - Регулярний вираз + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/split +--- +
{{JSRef}}
+ +

Метод split() розділяє {{jsxref("String","рядок")}} на впорядковану множину підрядків та повертає масив цих підрядків. Ділення здійснюється пошуком шаблону; цей шаблон надається першим параметром під час виклику методу.

+ +
{{EmbedInteractiveExample("pages/js/string-split.html", "taller")}}
+ + + +

Синтаксис

+ +
str.split([separator[, limit]])
+ +

Параметри

+ +
+
separator {{optional_inline}}
+
+

Шаблон, що описує, де має відбуватися розбиття рядка. Параметр separator (роздільник) може бути простим рядком або {{jsxref("Global_Objects/RegExp", "регулярним виразом", "", 1)}}.

+ +
    +
  • Найпростішим є випадок, коли separator є просто одним символом; він використовується для розмежування та розбиття рядка. Наприклад, рядок, що містить значення, розділені табуляцією (TSV, tab-separated values), може бути розібраний за символом табуляції в якості роздільника, ось так: myString.split("\t").
  • +
  • Якщо separator містить множину символів, для розділення має бути знайдена вся ця послідовність.
  • +
  • Якщо параметр separator не вказаний чи не зустрічається у str, повернений масив містить один елемент, який є цілим рядком.
  • +
  • Якщо separator знаходиться на початку (чи в кінці) рядка, він все одно матиме ефект роздільника. Результатом буде порожній (тобто, нульової довжини) рядок, який з'явиться на першій (чи останній) позиції поверненого масиву.
  • +
  • Якщо separator є порожнім рядком (""), str перетворюється на масив з кожного зі своїх "символів" UTF-16.
  • +
+ +
+

Застереження: Коли в якості роздільника використовується порожній рядок (""), рядок не розбивається на символи, що сприймаються користувачем (кластери графем), чи символи Юнікоду (коди символів), а лише на кодові одиниці UTF-16. Це розбиває сурогатні пари. Дивіться “Як перетворити рядок на масив символів у JavaScript?” на StackOverflow.

+
+
+
limit {{optional_inline}}
+
+

Невід'ємне ціле число, що обмежує кількість частин. Якщо надане, метод розбиває рядок на кожному знайденому роздільнику separator, але зупиняється, коли у масив була додана кількість елементів limit. Будь-який текст, що лишився, взагалі не буде доданий у масив.

+ +
    +
  • Масив може містити меншу за limit кількість елементів, якщо рядок закінчився раніше, ніж було досятнуто значення limit.
  • +
  • Якщо limit дорівнює 0, розділення рядка не виконується.
  • +
+
+
+ +

Значення, що повертається

+ +

{{jsxref("Array", "Масив")}} рядків, відділених у кожній точці, де роздільник separator зустрічається у наданому рядку.

+ +

Опис

+ +

Коли separator знайдено, він видаляється з рядка, а підрядки повертаються у масиві.

+ +

Якщо separator є регулярним виразом із захопленими групами, то під час кожного збігу з separator результати (в тому числі undefined) захоплених груп додаються у масив результатів.

+ +

Якщо роздільник є масивом, то він примусово приводиться до рядка та використовується в якості роздільника.

+ +

Приклади

+ +

Використання split()

+ +
+

Коли рядок порожній, split() повертає масив, що містить один порожній рядок, а не порожній масив. Якщо і рядок, і роздільник є порожніми рядками, повертається порожній масив.

+ +
const myString = ''
+const splits = myString.split()
+
+console.log(splits)
+
+// ↪ [""]
+
+
+ +

Наступний приклад визначає функцію, яка розбиває рядок на масив рядків, використовуючи вказаний роздільник. Після розбиття рядка функція виводить повідомлення, які містять початковий рядок (до розбиття), використаний роздільник, кількість елементів масиву та окремі елементи масиву.

+ +
function splitString(stringToSplit, separator) {
+  const arrayOfStrings = stringToSplit.split(separator)
+
+  console.log('Початковий рядок: ', stringToSplit)
+  console.log('Роздільник: ', separator)
+  console.log('Масив містить ', arrayOfStrings.length, ' елементів: ', arrayOfStrings.join(' / '))
+}
+
+const tempestString = 'Який чудесний світ новий оцей де отакі є люди!'
+const monthString = 'Січ,Лют,Берез,Квіт,Трав,Черв,Лип,Серп,Верес,Жовт,Листоп,Груд'
+
+const space = ' '
+const comma = ','
+
+splitString(tempestString, space)
+splitString(tempestString)
+splitString(monthString, comma)
+
+ +

Цей приклад виводить наступний результат:

+ +
Початковий рядок:  Який чудесний світ новий оцей де отакі є люди!
+Роздільник: " "
+Масив містить  9  елементів:  Який / чудесний / світ / новий / оцей / де / отакі / є / люди!
+
+Початковий рядок:  Який чудесний світ новий оцей де отакі є люди!
+Роздільник: "undefined"
+Масив містить  1  елементів:  Який чудесний світ новий оцей де отакі є люди!
+
+Початковий рядок:  Січ,Лют,Берез,Квіт,Трав,Черв,Лип,Серп,Верес,Жовт,Листоп,Груд
+Роздільник: ","
+Масив містить  12  елементів:  Січ / Лют / Берез / Квіт / Трав / Черв / Лип / Серп / Верес / Жовт / Листоп / Груд
+ +

Видалення пробілів з рядка

+ +

У наступному прикладі split() шукає нуль або більше пробілів з наступною крапкою з комою, з наступним нулем чи більше пробілів — і, коли знаходить, видаляє пробіли та крапку з комою з рядка. nameList є масивом, що повертається як результат методу split().

+ +
const names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '
+
+console.log(names)
+
+const re = /\s*(?:;|$)\s*/
+const nameList = names.split(re)
+
+console.log(nameList)
+
+ +

Цей код виводить два рядки; перший виводить початковий рядок, а другий - масив, отриманий в результаті.

+ +
Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ]
+ +

Повернення обмеженої кількості елементів

+ +

У наступному прикладі split() шукає пробіли у рядку та повертає перші 3 елементи, які знаходить.

+ +
const myString = 'Всім привіт. Як справи?'
+const splits = myString.split(' ', 3)
+
+console.log(splits)
+
+ +

Цей скрипт виведе наступне:

+ +
["Всім", "привіт.", "Як"]
+
+ +

Розбиття за допомогою RegExp з додаванням частин роздільника у результат

+ +

Якщо separator є регулярним виразом, що містить дужки (), то збіги також додаються у масив.

+ +
const myString = 'Привіт 1 слово. Речення номер 2.'
+const splits = myString.split(/(\d)/)
+
+console.log(splits)
+
+ +

Цей скрипт виведе наступне:

+ +
[ "Привіт ", "1", " слово. Речення номер ", "2", "." ]
+ +
+

Заувага: \d відповідає символьному класу цифр між 0 та 9.

+
+ +

Перевертання рядка за допомотою split()

+ +
+

Це не найнадійніший спосіб перевертання рядка:

+ +
const str = 'йцуке'
+const strReverse = str.split('').reverse().join('')
+// 'екуцй'
+
+// split() повертає масив, на якому можна застосувати reverse() та join()
+
+ +

Він не працює, якщо рядок містить кластери графем, навіть при використанні методу split, сумісного з Юнікодом (замість цього скористайтесь, наприклад, esrever).

+ +
const str = 'résumé'
+const strReverse = str.split(/(?:)/u).reverse().join('')
+// => "́emuśer"
+
+ +

Бонус: скористайтесь оператором {{jsxref("Operators/Оператори_порівняння", "===", "#Ідентичність_строга_рівність")}}, щоб перевірити, чи був початковий рядок паліндромом.

+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.split")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/startswith/index.html b/files/uk/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..a1850169e5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,96 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/startsWith +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +
{{JSRef}}
+ +

Метод startsWith() визначає, чи починається рядок з символів заданого рядка, повертаючи, відповідно, true чи false.

+ +
{{EmbedInteractiveExample("pages/js/string-startswith.html")}}
+ + + +

Синтаксис

+ +
str.startsWith(searchString[, position])
+ +

Параметри

+ +
+
searchString
+
Символи, які шукатимуться на початку рядка.
+
position {{optional_inline}}
+
Позиція у цьому рядку, з якої починатиметься пошук рядка searchString. За замовчуванням 0.
+
+ +

Значення, що повертається

+ +

true, якщо надані символи знайдені на початку рядка; інакше, false.

+ +

Опис

+ +

Цей метод дозволяє визначити, починається чи ні рядок з символів іншого рядка. Цей метод чутливий до регістру.

+ +

Приклади

+ +

Використання startsWith()

+ +
let str = 'Питання в тому: бути чи не бути.'
+
+console.log(str.startsWith('Питання'))   // true
+console.log(str.startsWith('бути'))      // false
+console.log(str.startsWith('бути', 16))  // true
+
+ +

Поліфіл

+ +

Цей метод був доданий у специфікації ECMAScript 2015 і може не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл String.prototype.startsWith() за допомогою наступного коду:

+ +
if (!String.prototype.startsWith) {
+    Object.defineProperty(String.prototype, 'startsWith', {
+        value: function(search, rawPos) {
+            var pos = rawPos > 0 ? rawPos|0 : 0;
+            return this.substring(pos, pos + search.length) === search;
+        }
+    });
+}
+
+ +

Більш надійний (у повній відповідності до специфікації ES2015), але менш швидкий та компактний поліфіл доступний на GitHub за авторством Mathias Bynens.

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.startsWith")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/strike/index.html b/files/uk/web/javascript/reference/global_objects/string/strike/index.html new file mode 100644 index 0000000000..55ab07f635 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/strike/index.html @@ -0,0 +1,67 @@ +--- +title: String.prototype.strike() +slug: Web/JavaScript/Reference/Global_Objects/String/strike +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/strike +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод strike() створює HTML-елемент <strike>, який відображає рядок з перекресленим текстом.

+ +

Синтаксис

+ +
str.strike()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <strike>.

+ +

Опис

+ +

Метод strike() вбудовує рядок у тег <strike>: "<strike>str</strike>".

+ +

Приклади

+ +

Використання strike()

+ +

Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:

+ +
var worldString = 'Всім привіт';
+
+console.log(worldString.blink()); // <blink>Всім привіт</blink>
+console.log(worldString.bold()); // <b>Всім привіт</b>
+console.log(worldString.italics()); // <i>Всім привіт</i>
+console.log(worldString.strike()); // <strike>Всім привіт</strike>
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.strike")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/string/index.html b/files/uk/web/javascript/reference/global_objects/string/string/index.html new file mode 100644 index 0000000000..65f85d4d0a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/string/index.html @@ -0,0 +1,64 @@ +--- +title: Конструктор String() +slug: Web/JavaScript/Reference/Global_Objects/String/String +tags: + - JavaScript + - String + - Конструктор + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/String +--- +
{{JSRef}}
+ +

Конструктор String використовується для створення нового об'єкта {{jsxref("String")}}. Він виконує перетворення типів, коли викликається як функція, а не як конструктор, що, зазвичай, більш корисно.

+ +

Синтаксис

+ +
new String(thing)
+String(thing)
+ +

Параметри

+ +
+
thing
+
Будь-що, що перетвориться на рядок.
+
+ +

Приклади

+ +

Конструктор String та функція String

+ +

Функція String та конструктор String повертають різні результати:

+ +
typeof String('Всім привіт'); // string
+typeof new String('Всім привіт'); // object
+
+ +

Тут функція, як і обіцяно, повертає рядок (простий тип даних). Однак, конструктор повертає екземпляр типу String (об'єкт-обгортку), саме тому вам нечасто захочеться взагалі використовувати конструктор String.

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string-constructor', 'String constructor')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.String")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/sub/index.html b/files/uk/web/javascript/reference/global_objects/string/sub/index.html new file mode 100644 index 0000000000..5aa09a91ce --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/sub/index.html @@ -0,0 +1,68 @@ +--- +title: String.prototype.sub() +slug: Web/JavaScript/Reference/Global_Objects/String/sub +tags: + - HTML + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/sub +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод sub() створює HTML-елемент <sub>, який відображає рядок у вигляді нижнього індексу.

+ +

Синтаксис

+ +
str.sub()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <sub>.

+ +

Опис

+ +

Метод sub() вбудовує рядок у тег <sub>: "<sub>str</sub>".

+ +

Приклади

+ +

Використання методів sub() та sup()

+ +

Наступний приклад використовує методи sub() та {{jsxref("String.prototype.sup()", "sup()")}} для форматування рядка:

+ +
var superText = 'верхній індекс';
+var subText = 'нижній індекс';
+
+console.log('Так виглядає ' + superText.sup() + '.');
+// Так виглядає <sup>верхній індекс</sup>.
+
+console.log('Так виглядає ' + subText.sub() + '.');
+// Так виглядає <sub>нижній індекс</sub>.
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.sub")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/substr/index.html b/files/uk/web/javascript/reference/global_objects/string/substr/index.html new file mode 100644 index 0000000000..265ef1552d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/substr/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Reference/Global_Objects/String/substr +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +

{{JSRef}}

+ +
Застереження: Хоча метод String.prototype.substr(…) не є строго не рекомендованим (як "прибраний з веб-стандартів"), він вважається застарілим та не бажаний для використання, коли це можливо. Він не є частиною ядра мови JavaScript та може бути прибраний в майбутньому. За можливості, використовуйте замість нього метод substring().
+ +

Метод substr() повертає частину рядка, що починається з вказаного індекса та продовжується вказану кількість символів.

+ +
{{EmbedInteractiveExample("pages/js/string-substr.html")}}
+ + + +

Синтаксис

+ +
str.substr(start[, length])
+ +

Параметри

+ +
+
start
+
Індекс першого символу, який треба включити у повернений рядок.
+
length
+
Необов'язковий. Кількість символів, яку треба повернути.
+
+ +

Значення, що повертається

+ +

Новий рядок, що містить вказану частину наданого рядка.

+ +

Опис

+ +

Метод substr() вирізає length символів з рядка string, рахуючи з початкового індексу start.

+ +

Якщо start є додатним числом, індекс рахується з початку рядка. Його значення обмежується значенням str.length.
+ Якщо start є від'ємним числом, індекс рахується з кінця рядка. Його значення обмежується значенням -str.length.
+ Заувага: У Microsoft JScript від'ємне значення аргументу start не вважається посиланням на кінець рядка.

+ +

Якщо аргумент length пропущений, substr() повертає символи до кінця рядка.
+ Якщо length дорівнює {{jsxref("undefined")}}, substr() повертає символи до кінця рядка.
+ Якщо length є від'ємним числом, він вважається рівним 0.

+ +

Для обох, start та length, NaN вважається рівним 0.

+ +

Приклади

+ +

Використання substr()

+ +
var aString = 'Mozilla';
+
+console.log(aString.substr(0, 1));   // 'M'
+console.log(aString.substr(1, 0));   // ''
+console.log(aString.substr(-1, 1));  // 'a'
+console.log(aString.substr(1, -1));  // ''
+console.log(aString.substr(-3));     // 'lla'
+console.log(aString.substr(1));      // 'ozilla'
+console.log(aString.substr(-20, 2)); // 'Mo'
+console.log(aString.substr(20, 2));  // ''
+
+ +

Поліфіл

+ +

JScript у Microsoft не підтримує від'ємні значення початкового індекса. Щоб використовувати цю функціональність у JScript, ви можете скористатись наступним кодом:

+ +
// запускайте тільки якщо функція substr() не працює
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Отримати підрядок з рядка
+   *  @param  {integer}  start   де почати підрядок
+   *  @param  {integer}  length  скільки символів повертати
+   *  @return {string}
+   */
+  String.prototype.substr = function(substr) {
+    return function(start, length) {
+      // викликаємо початковий метод
+      return substr.call(this,
+      	// якщо ми отримали від'ємний start, порахувати, скільки це від початку рядка
+        // відкоригувати параметр start для від'ємного значення
+        start < 0 ? this.length + start : start,
+        length)
+    }
+  }(String.prototype.substr);
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.substr")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/substring/index.html b/files/uk/web/javascript/reference/global_objects/string/substring/index.html new file mode 100644 index 0000000000..146c0e05b5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/substring/index.html @@ -0,0 +1,181 @@ +--- +title: String.prototype.substring() +slug: Web/JavaScript/Reference/Global_Objects/String/substring +tags: + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/substring +--- +
{{JSRef}}
+ +

Метод substring() повертає частину рядка між початковим та кінцевим індексами, або до кінця рядка.

+ +
{{EmbedInteractiveExample("pages/js/string-substring.html")}}
+ + + +

Синтаксис

+ +
str.substring(indexStart[, indexEnd])
+ +

Параметри

+ +
+
indexStart
+
Індекс першого символу, який потрібно включити у повернений рядок.
+
indexEnd {{optional_inline}}
+
Індекс першого символу, який непотрібно включати у повернений рядок.
+
+ +

Значення, що повертається

+ +

Новий рядок, що містить вказану частину наданого рядка.

+ +

Опис

+ +

Метод substring() вирізає символи, починаючи з indexStart, і до (але не включно зindexEnd. Зокрема:

+ + + +

Будь-яке значення аргументу менше за 0 чи більше за stringName.length вважається рівним 0 та stringName.length, відповідно.

+ +

Будь-яке значення аргументу, що є {{jsxref("NaN")}}, вважається рівним 0.

+ +

Приклади

+ +

Використання substring()

+ +

Наступний приклад використовує substring(), щоб вивести символи з рядка 'Mozilla':

+ +
let anyString = 'Mozilla'
+
+// Виводить 'M'
+console.log(anyString.substring(0, 1))
+console.log(anyString.substring(1, 0))
+
+// Виводить 'Mozill'
+console.log(anyString.substring(0, 6))
+
+// Виводить 'lla'
+console.log(anyString.substring(4))
+console.log(anyString.substring(4, 7))
+console.log(anyString.substring(7, 4))
+
+// Виводить 'Mozilla'
+console.log(anyString.substring(0, 7))
+console.log(anyString.substring(0, 10))
+
+ +

Використання substring() з властивістю length

+ +

Наступний приклад використовує метод substring() та властивість {{jsxref("String.length", "length")}}, щоб отримати останні символи певного рядка. Цей метод, можливо, легше запам'ятати, враховуючи, що вам не потрібно знати початковий та кінцевий індекси, як у попередніх прикладах.

+ +
// Виводить 'illa', останні 4 символи
+let anyString = 'Mozilla'
+let anyString4 = anyString.substring(anyString.length - 4)
+console.log(anyString4)
+
+// Виводить 'zilla' останні 5 символів
+let anyString = 'Mozilla'
+let anyString5 = anyString.substring(anyString.length - 5)
+console.log(anyString5)
+
+ +

Різниця між substring() та substr()

+ +

Існує невелика відмінність між методами substring() та {{jsxref("String.substr", "substr()")}}, тому слід бути обережними, щоб не переплутати їх.

+ +

Аргументи substring() відображають початковий та кінцевий індекси, в той час, як аргументи substr() відображають початковий індекс та кількість символів, яку необхідно включити у повернений рядок.

+ +

Крім того, метод substr() вважається застарілою функціональністю ECMAScript та може бути прибраний з майбутніх версій, а отже, його краще уникати, де можливо.

+ +
let text = 'Mozilla'
+console.log(text.substring(2,5))  // => "zil"
+console.log(text.substr(2,3))     // => "zil"
+ +

Різниця між substring() та slice()

+ +

Методи substring() та {{jsxref("String.slice", "slice()")}} майже ідентичні, але між ними є пара невеликих відмінностей, особливо у поводженні з від'ємними аргументами.

+ +

Метод substring() міняє місцями свої аргументи, якщо indexStart більший за indexEnd, це означає, що рядок все одно буде повернений. Метод {{jsxref("String.slice", "slice()")}} повертає порожній рядок у цьому випадку.

+ +
let text = 'Mozilla'
+console.log(text.substring(5, 2))  // => "zil"
+console.log(text.slice(5, 2))      // => ""
+
+ +

Якщо один або обидва аргументи від'ємні чи NaN, метод substring() вважає, що вони дорівнюють 0.

+ +
console.log(text.substring(-5, 2))  // => "Mo"
+console.log(text.substring(-5, -2)) // => ""
+
+ +

slice() також вважає аргументи NaN рівними 0, але, коли отримує від'ємні значення, він рахує індекс у зворотньому напрямку, з кінця рядка.

+ +
console.log(text.slice(-5, 2))   // => ""
+console.log(text.slice(-5, -2))  // => "zil"
+
+ +

Дивіться більше прикладів з від'ємними числами на сторінці {{jsxref("String.slice", "slice()")}}.

+ +

Заміна підрядка всередині рядка

+ +

Наступний приклад замінює підрядок всередині рядка. Він замінить і окремі символи, і підрядки. Виклик функції в кінці прикладу змінює рядок Прекрасний новий світ на Прекрасний новий сайт.

+ +
// Замінює oldS на newS у рядку fullS
+function replaceString(oldS, newS, fullS) {
+  for (let i = 0; i < fullS.length; ++i) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length)
+    }
+  }
+  return fullS
+}
+
+replaceString('світ', 'сайт', 'Прекрасний новий світ')
+
+ +

Зауважте, що це може призвести до нескінченного циклу, якщо oldS сам є підрядком newS — наприклад, якби ви спробували замінити тут 'світ' на 'всесвіт'.

+ +

Кращим методом заміни рядків є наступний:

+ +
function replaceString(oldS, newS, fullS) {
+  return fullS.split(oldS).join(newS)
+}
+
+ +

Наведений вище код є прикладом операцій з підрядками. Якщо вам необхідно замінювати підрядки, в більшості випадків вам краще скористатись {{jsxref("String.prototype.replace()")}}.

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.substring")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/sup/index.html b/files/uk/web/javascript/reference/global_objects/string/sup/index.html new file mode 100644 index 0000000000..5fcc97cdee --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/sup/index.html @@ -0,0 +1,66 @@ +--- +title: String.prototype.sup() +slug: Web/JavaScript/Reference/Global_Objects/String/sup +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/sup +--- +
{{JSRef}} {{deprecated_header}}
+ +

Метод sup() створює HTML-елемент <sup>, який відображає рядок у вигляді верхнього індексу.

+ +

Синтаксис

+ +
str.sup()
+ +

Значення, що повертається

+ +

Рядок, що містить HTML-елемент <sup>.

+ +

Опис

+ +

Метод sup() вбудовує рядок у тег <sup>: "<sup>str</sup>".

+ +

Приклади

+ +

Використання методів sub() та sup()

+ +

Наступний приклад використовує методи {{jsxref("String.prototype.sub()", "sub()")}} та sup() для форматування рядка:

+ +
var superText = 'верхній індекс';
+var subText = 'нижній індекс';
+
+console.log('Так виглядає ' + superText.sup() + '.');
+// Так виглядає <sup>верхній індекс</sup>.
+
+console.log('Так виглядає ' + subText.sub() + '.');
+// Так виглядає <sub>нижній індекс</sub>.
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.sup")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html new file mode 100644 index 0000000000..2e595bc9a0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html @@ -0,0 +1,106 @@ +--- +title: String.prototype.toLocaleLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +tags: + - Internationalization + - JavaScript + - Method + - Prototype + - String + - Довідка + - Уміжнароднення +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +--- +
{{JSRef}}
+ +

Метод toLocaleLowerCase() повертає той самий рядок, але з літерами переведеними до нижнього регістра відповідно до правил певної мови (місцевості).

+ +

{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}

+ + + +

Синтаксис

+ +
str.toLocaleLowerCase()
+str.toLocaleLowerCase(locale)
+str.toLocaleLowerCase([locale, locale, ...])
+
+ +

Параметри

+ +
+
locale {{optional_inline}}
+
Цей параметр вказує мовний код (або перелік мовних кодів), відповідно до якого має здійснюватися перетворення регістра. Якщо вказано кілька мовних кодів (передано масив рядків), обирається найліпший з наявних. Якщо параметр не вказано, буде використано системне значення (з налаштувань оточення).
+
+ +

Вертає

+ +

Новий рядок із тим самим вмістом, але літерами переведеними до нижнього регістра відповідно до правил певної мови (місцевості).

+ +

Винятки

+ + + +

Опис

+ +

Всі великі літери перетворюються на малі відповідно до правил певної мови (місцевості), а все решта лишається без змін. Позаяк клас {{jsxref("String")}} належить до незмінних типів даних, виклик toLocaleLowerCase() створює новий рядок, лишаючи оригінал без змін.

+ +

Зазвичай метод toLocaleLowerCase() вертає той самий результат, що й {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}. Втім для деяких мов, як-от турецька, правила перетворення регістра дещо відрізняються від того, що передбачено у Unicode, тож результат буде іншим.

+ +

Приклади

+ +

Використання toLocaleLowerCase()

+ +

Якщо мовний код не зазначено, використовується поточне системне значення:

+ +
// виводить 'абетка'
+console.log('Абетка'.toLocaleLowerCase());
+
+ +

Можна вказати лише один код чи декілька одночасно:

+ +
// виводить true
+console.log('\u0130'.toLocaleLowerCase('tr') === 'i');
+// виводить fales
+console.log('\u0130'.toLocaleLowerCase('en-US') === 'i');
+
+let locales = ['tr', 'TR', 'tr-TR', 'tr-u-co-search', 'tr-x-turkish'];
+
+// виводить true
+console.log('\u0130'.toLocaleLowerCase(locales) === 'i');
+
+ +

Специфікації

+ + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}
{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.toLocaleLowerCase")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html new file mode 100644 index 0000000000..d8d2346ec8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.toLocaleUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +tags: + - Internationalization + - JavaScript + - Method + - Prototype + - String + - Довідка + - Уміжнароднення +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +--- +
{{JSRef}}
+ +

Метод toLocaleUpperCase() повертає той самий рядок, але з літерами переведеними до верхнього регістра відповідно до правил певної мови (місцевості).

+ +

{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}

+ + + +

Синтаксис

+ +
str.toLocaleUpperCase()
+str.toLocaleUpperCase(locale)
+str.toLocaleUpperCase([locale, locale, ...])
+
+ +

Параметри

+ +
+
locale {{optional_inline}}
+
Цей параметр вказує мовний код (або перелік мовних кодів), відповідно до якого має здійснюватися перетворення регістра. Якщо вказано кілька мовних кодів (передано масив рядків), обирається найліпший з наявних. Якщо параметр не вказано, буде використано системне значення (з налаштувань оточення).
+
+ +

Вертає

+ +

Новий рядок із тим самим вмістом, але літерами переведеними до верхнього регістра відповідно до правил певної мови (місцевості).

+ +

Винятки

+ + + +

Опис

+ +

Всі малі літери перетворюються на великі відповідно до правил певної мови (місцевості), а все решта лишається без змін. Позаяк клас {{jsxref("String")}} належить до незмінних типів даних, виклик toLocaleUpperCase() створює новий рядок, лишаючи оригінал без змін. 

+ +

Зазвичай метод toLocaleUpperCase() вертає той самий результат, що й {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}. Втім для деяких мов, як-от турецька, правила перетворення регістра дещо відрізняються від того, що передбачено у Unicode, тож результат буде іншим.

+ +

Також зауважте, що перетворення не обов'язково є перетворенням символів 1:1, оскільки деякі символи можуть перетворитись на два (або навіть більше) символів при переведенні у верхній регістр. Таким чином, довжина отриманого рядка може відрізнятись від довжини вхідного рядка. Це також означає, що перетворення не є стабільним, а отже, наприклад, наступне може повернути false:
+ x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase()

+ +

Приклади

+ +

Використання toLocaleUpperCase()

+ +

Якщо мовний код не зазначено, використовується поточне системне значення:

+ +
// виводить 'АБЕТКА'
+console.log('Абетка'.toLocaleUpperCase());
+
+ +

Можна вказати лише один код чи декілька одночасно:

+ +
// виводить 'I'
+console.log('i\u0307'.toLocaleUpperCase('lt-LT'));
+
+let locales = ['lt', 'LT', 'lt-LT', 'lt-u-co-phonebk', 'lt-x-lietuva'];
+
+// виводить 'I'
+console.log('i\u0307'.toLocaleUpperCase(locales));
+
+ +

Специфікації

+ + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}
{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.toLocaleUpperCase")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..ba6068d86a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,74 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +
{{JSRef}}
+ +

Метод toLowerCase() повертає той самий рядок, але з літерами переведеними до нижнього регістра.

+ +

{{EmbedInteractiveExample("pages/js/string-tolowercase.html","shorter")}}

+ + + +

Синтаксис

+ +
str.toLowerCase()
+ +

Вертає

+ +

Новий рядок із тим самим вмістом, але літерами переведеними до нижнього регістра.

+ +

Опис

+ +

Всі великі літери перетворюються на малі, а все решта лишається без змін. Позаяк клас {{jsxref("String")}} належить до незмінних типів даних, виклик toLowerCase() створює новий рядок, лишаючи оригінал без змін.

+ +

Приклади

+ +

Використання toLowerCase()

+ +

Кожна велика літера замінюється малою, а решта лишається без змін:

+ +
// виводить 'абетка'
+console.log('Абетка'.toLowerCase());
+
+ +

Якщо рядок не містить жодної великої літери, то жодних змін не відбувається:

+ +
// виводить 'дідькова гра'
+console.log('дідькова гра'.toLowerCase());
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.toLowerCase")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/tosource/index.html b/files/uk/web/javascript/reference/global_objects/string/tosource/index.html new file mode 100644 index 0000000000..22d5a2e49e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tosource/index.html @@ -0,0 +1,56 @@ +--- +title: String.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/String/toSource +tags: + - JavaScript + - String + - Довідка + - метод + - нестандартний + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод toSource() вертає рядкове представлення першокоду об'єкта.

+ +

Синтаксис

+ +
String.toSource()
+str.toSource()
+
+ +

Значення, що вертається

+ +

Рядкове представлення першокоду об'єкта, який викликав метод.

+ +

Опис

+ +

Метод toSource() вертає наступні значення:

+ +

Для вбудованого об'єкта {{jsxref("String")}} toSource() вертає наступний рядок, який вказує, що першокод недоступний:

+ +
function String() {
+    [native code]
+}
+
+ +

Для екземплярів {{jsxref("String")}} або рядкових літералів toSource() вертає рядок, що відображає першокод.

+ +

Цей метод зазвичай JavaScript викликає внутрішньо, а не явно у коді.

+ +

Специфікації

+ +

Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.toSource")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/tostring/index.html b/files/uk/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..927d694e18 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,65 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +
{{JSRef}}
+ +

Метод toString() повертає рядкове представлення вказаного об'єкта.

+ +

{{EmbedInteractiveExample("pages/js/string-tostring.html")}}

+ +

Синтаксис

+ +
str.toString()
+ +

Вертає

+ +

Рядкове представлення об'єкта, який викликав метод.

+ +

Опис

+ +

Клас {{jsxref("String")}} має власну реалізацію метода toString(), а не успадковану {{jsxref("Object.prototype.toString()")}}. Для об'єктів класу {{jsxref("String")}}, цей метод повертає значення, що має рядковий тип даних, для якого клас {{jsxref("String")}} є обгорткою. Тобто те саме, що вертає метод {{jsxref("String.prototype.valueOf()", "valueOf()")}}.

+ +

Приклади

+ +

Використання toString()

+ +

Наступний приклад виводить до консолі рядкове значення об'єкта {{jsxref("String")}}:

+ +
var x = new String('Hello world');
+
+console.log(x.toString());  // виводить 'Hello world'
+
+ +

Специфікації

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.toString")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html b/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..8b766dc42d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,88 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +
{{JSRef}}
+ +

Метод toUpperCase() повертає той самий рядок, але з літерами переведеними до верхнього регістра (значення буде перетворене на рядок, якщо воно не є рядком).

+ +

{{EmbedInteractiveExample("pages/js/string-touppercase.html","shorter")}}

+ + + +

Синтаксис

+ +
str.toUpperCase()
+ +

Вертає

+ +

Новий рядок із тим самим вмістом, але літерами переведеними до верхнього регістра.

+ +

Винятки

+ +
+
{{jsxref("TypeError")}}
+
Якщо викликається для {{jsxref("null")}} або {{jsxref("undefined")}}, наприклад, String.prototype.toUpperCase.call(undefined).
+
+ +

Опис

+ +

Всі малі літери перетворюються на великі, а все решта лишається без змін. Позаяк клас {{jsxref("String")}} належить до незмінних типів даних, виклик toUpperCase() створює новий рядок, лишаючи оригінал без змін.

+ +

Приклади

+ +

Базове використання

+ +
console.log('Абетка'.toUpperCase()); // 'АБЕТКА'
+
+ +

Перетворення нерядкових значень this на рядки

+ +

Цей метод перетворить будь-яке нерядкове значення на рядок, коли ви присвоюєте його this значення, що не є рядком:

+ +
const a = String.prototype.toUpperCase.call({
+  toString: function toString() {
+    return 'абвгґд';
+  }
+});
+
+const b = String.prototype.toUpperCase.call(true);
+
+// виводить 'АБВГҐД TRUE'.
+console.log(a, b);
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.toUpperCase")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/trim/index.html b/files/uk/web/javascript/reference/global_objects/string/trim/index.html new file mode 100644 index 0000000000..2f31660a29 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/trim/index.html @@ -0,0 +1,84 @@ +--- +title: String.prototype.trim() +slug: Web/JavaScript/Reference/Global_Objects/String/Trim +tags: + - ECMAScript 5 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim +--- +
{{JSRef}}
+ +

Метод trim() прибирає пробіли з обох кінців рядка. Пробілами в даному контексті є усі пробільні символи (пробіл, табуляція, нерозривний пробіл та ін.) та усі символи закінчення рядка (LF, CR, та ін.).

+ +
{{EmbedInteractiveExample("pages/js/string-trim.html")}}
+ + + +

Синтаксис

+ +
str.trim()
+ +

Значення, що вертається

+ +

Новий рядок, що є рядком str без пробілів з обох кінців.

+ +

Опис

+ +

Метод trim() повертає рядок з прибраними пробілами з обох кінців. trim() не змінює значення самого рядка str.

+ +

Приклади

+ +

Використання trim()

+ +

Наступний приклад виводить рядок з малих літер 'ква':

+ +
var orig = '   ква  ';
+console.log(orig.trim()); // 'ква'
+
+// Ще приклад, коли .trim() прибирає пробіли лише з одного боку.
+
+var orig = 'ква    ';
+console.log(orig.trim()); // 'ква'
+
+ +

Поліфіл

+ +

Виконання наступного коду перед будь-яким іншим кодом створить метод trim(), якщо він недоступний початково.

+ +
if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.trim")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/trimend/index.html b/files/uk/web/javascript/reference/global_objects/string/trimend/index.html new file mode 100644 index 0000000000..2344e2e7bb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/trimend/index.html @@ -0,0 +1,80 @@ +--- +title: String.prototype.trimEnd() +slug: Web/JavaScript/Reference/Global_Objects/String/trimEnd +tags: + - JavaScript + - String + - Довідка + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd +--- +
{{JSRef}}
+ +

Метод trimEnd() прибирає пробіли з кінця рядка. trimRight() є псевдонімом цього методу.

+ +
{{EmbedInteractiveExample("pages/js/string-trimend.html")}}
+ + + +

Синтаксис

+ +
str.trimEnd();
+str.trimRight();
+ +

Значення, що вертається

+ +

Новий рядок, який відображає початковий рядок без пробілів з (правого) кінця.

+ +

Опис

+ +

Методи trimEnd() / trimRight() повертають рядок з прибраними пробілами з правого кінця. trimEnd() чи trimRight() не змінюють значення самого рядка.

+ +

Псевдонім

+ +

Для сумісності з такими функціями як {{jsxref("String.prototype.padEnd")}}, стандартним ім'ям методу є trimEnd. Однак, з причин веб-сумісності trimRight залишається в якості псевдоніму trimEnd. В деяких рушіях це означає:

+ +
String.prototype.trimRight.name === "trimEnd";
+ +

Приклади

+ +

Використання trimEnd()

+ +

Наступний приклад виводить рядок з малих літер '   ква':

+ +
var str = '   ква  ';
+
+console.log(str.length); // 8
+
+str = str.trimEnd();
+console.log(str.length); // 6
+console.log(str);        // '   ква'
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.trimend', 'String.prototype.trimEnd')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.trimEnd")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html b/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html new file mode 100644 index 0000000000..03a3dc0ffc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html @@ -0,0 +1,115 @@ +--- +title: String.prototype.trimStart() +slug: Web/JavaScript/Reference/Global_Objects/String/trimStart +tags: + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +--- +
{{JSRef}}
+ +

Метод trimStart() видаляє пробіли з початку рядка. trimLeft() є псевдонімом цього методу.

+ +
{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}
+ + + +

Синтаксис

+ +
str.trimStart();
+str.trimLeft();
+ +

Значення, що вертається

+ +

Новий рядок, який відображає початковий рядок без пробілів на початку (з лівого кінця).

+ +

Опис

+ +

Методи trimStart() / trimLeft() повертають рядок з прибраними пробілами з лівого кінця. trimLeft() чи trimStart() не змінюють значення самого рядка.

+ +

Псевдонім

+ +

Для сумісності з такими функціями, як {{jsxref("String.prototype.padStart")}}, стандартним ім'ям методу є trimStart. Однак, з причин веб-сумісності trimLeft залишається в якості псевдоніму trimStart. В деяких рушіях це означає:

+ +
String.prototype.trimLeft.name === "trimStart";
+ +

Приклади

+ +

Використання trimStart()

+ +

Наступний приклад виводить рядок з малих літер 'ква  ':

+ +
var str = '   ква  ';
+
+console.log(str.length); // 8
+
+str = str.trimStart();
+console.log(str.length); // 5
+console.log(str);        // 'ква  '
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.trimstart', ' String.prototype.trimStart')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.trimStart")}}

+ +

Поліфіл

+ +
//https://github.com/FabioVergani/js-Polyfill_String-trimStart
+
+(function(w){
+    var String=w.String, Proto=String.prototype;
+
+    (function(o,p){
+        if(p in o?o[p]?false:true:true){
+            var r=/^\s+/;
+            o[p]=o.trimLeft||function(){
+                return this.replace(r,'')
+            }
+        }
+    })(Proto,'trimStart');
+
+})(window);
+
+
+/*
+ES6:
+(w=>{
+    const String=w.String, Proto=String.prototype;
+
+    ((o,p)=>{
+        if(p in o?o[p]?false:true:true){
+            const r=/^\s+/;
+            o[p]=o.trimLeft||function(){
+                return this.replace(r,'')
+            }
+        }
+    })(Proto,'trimStart');
+
+})(window);
+*/
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/string/valueof/index.html b/files/uk/web/javascript/reference/global_objects/string/valueof/index.html new file mode 100644 index 0000000000..a4956328d0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/valueof/index.html @@ -0,0 +1,64 @@ +--- +title: String.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/String/valueOf +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf +--- +
{{JSRef}}
+ +

Метод valueOf() повертає {{glossary("Primitive", "просту величину")}}, що є значенням об'єкта {{jsxref("String")}}.

+ +

{{EmbedInteractiveExample("pages/js/string-valueof.html")}}

+ +

Синтаксис

+ +
str.valueOf()
+ +

Вертає

+ +

Рядок (величину, яка належить до простого типу даних {{jsxref("string")}}), що є значенням цього об'єкта {{jsxref("String")}}.

+ +

Опис

+ +

Метод valueOf() класу {{jsxref("String")}} повертає значення, що має рядковий тип даних, для якого клас {{jsxref("String")}} є обгорткою. Це значення тотожне до {{jsxref("String.prototype.toString()")}}.

+ +

Цей метод зазвичай викликається всередині рушія JavaScript, а не в явний спосіб у коді.

+ +

Приклади

+ +

Використання valueOf()

+ +
var str = new String('Hello, world');
+console.log(str.valueOf());  // виводить 'Hello, world'
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.String.valueOf")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html b/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html new file mode 100644 index 0000000000..69b6b4c5d1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html @@ -0,0 +1,86 @@ +--- +title: Symbol.asyncIterator +slug: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator +tags: + - ECMAScript 2018 + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ + - асинхронний +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.asyncIterator вказує для об'єкта AsyncIterator за замовчуванням. Якщо ця властивість присутня в об'єкті, то він є асинхронним ітерабельним об'єктом і може використовуватись у циклі for await...of.

+ + + +

Опис

+ +

Символ Symbol.asyncIterator є вбудованим символом, який використовується для доступу до метода @@asyncIterator у об'єкта. Для того, щоб об'єкт був асинхронним ітерабельним об'єктом, він повинен мати ключ Symbol.asyncIterator.

+ +

{{js_property_attributes(0,0,0)}}

+ +

Приклади

+ +

Асинхронні ітерабельні об'єкти, створені користувачем

+ +

Ви можете визначити власний асинхронний ітерабельний об'єкт, встановивши на об'єкті властивість [Symbol.asyncIterator]

+ +
const myAsyncIterable = new Object();
+myAsyncIterable[Symbol.asyncIterator] = async function*() {
+    yield "привіт";
+    yield "асинхронний";
+    yield "перебір!";
+};
+
+(async () => {
+    for await (const x of myAsyncIterable) {
+        console.log(x);
+        // очікуваний результат:
+        //    "привіт"
+        //    "асинхронний"
+        //    "перебір!"
+    }
+})();
+
+ +

Створюючи API, пам'ятайте, що асинхронні ітерабельні об'єкти створені для того, щоб відображати щось ітерабельне, наприклад, потік даних чи список, а не для того, щоб повністю замінити зворотні виклики та події у більшості ситуацій.

+ +

Вбудовані асинхронні ітерабельні об'єкти

+ +

У JavaScript наразі не існує вбудованих об'єктів, що мають ключ [Symbol.asyncIterator] за замовчуванням. Однак, WHATWG Streams можуть стати першим вбудованим асинхронним ітерабельним об'єктом, з нещодавно доданим у специфікацію символом [Symbol.asyncIterator].

+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}{{Spec2('ES2018')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{compat("javascript.builtins.Symbol.asyncIterator")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/description/index.html b/files/uk/web/javascript/reference/global_objects/symbol/description/index.html new file mode 100644 index 0000000000..039755bd5e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/description/index.html @@ -0,0 +1,67 @@ +--- +title: Symbol.prototype.description +slug: Web/JavaScript/Reference/Global_Objects/Symbol/description +tags: + - JavaScript + - Symbol + - Властивість + - Символ + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description +--- +
{{JSRef}}
+ +

Властивість лише для читання description - це рядок, що повертає необов'язковий опис об'єктів {{JSxRef("Symbol")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}
+ + + +

Опис

+ +

{{JSxRef("Symbol","Символьні")}} об'єкти можуть бути створені з необов'язковим описом, який можна використовувати для відлагодження, але не для доступу до самого символа. Властивість Symbol.prototype.description можна використати, щоб прочитати цей опис. Вона відрізняється від Symbol.prototype.toString(), оскільки не містить рядка "Symbol()" навколо. Дивіться приклади.

+ +

Приклади

+ +

Використання опису

+ +
Symbol('desc').toString();   // "Symbol(desc)"
+Symbol('desc').description;  // "desc"
+Symbol('').description;      // ""
+Symbol().description;        // undefined
+
+// добревідомі символи
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
+Symbol.iterator.description; // "Symbol.iterator"
+
+// глобальні символи
+Symbol.for('foo').toString();  // "Symbol(foo)"
+Symbol.for('foo').description; // "foo"
+
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName("ESDraft", "#sec-symbol.prototype.description", "get Symbol.prototype.description")}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.description")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html new file mode 100644 index 0000000000..78a1246aa5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html @@ -0,0 +1,81 @@ +--- +title: Symbol.hasInstance +slug: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.hasInstance використовують, щоб визначити, чи конструктор розпізнає об'єкт як свій екземпляр. Цим символом можна налаштовувати поведінку оператора {{jsxref("Operators/instanceof", "instanceof")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Приклади

+ +

Змінена поведінка instanceof

+ +

Ви можете реалізувати свою власну поведінку instanceof, наприклад, так:

+ +
class MyArray {
+  static [Symbol.hasInstance](instance) {
+    return Array.isArray(instance)
+  }
+}
+console.log([] instanceof MyArray); // true
+
+ +
function MyArray() { }
+Object.defineProperty(MyArray, Symbol.hasInstance, {
+  value: function(instance) { return Array.isArray(instance); }
+});
+console.log([] instanceof MyArray); // true
+ +

Перевіряємо екземпляр об'єкта

+ +

Таким самим чином, як ви перевіряєте, чи є об'єкт екземпляром класу, за допомогою ключового слова instanceof, можна використати Symbol.hasInstance для таких перевірок.

+ +
class Animal {
+  constructor() {}
+}
+
+const cat = new Animal();
+
+console.log(Animal[Symbol.hasInstance](cat)); // true
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.hasInstance")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/index.html b/files/uk/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..eb4625fdb6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,466 @@ +--- +title: Symbol +slug: Web/JavaScript/Reference/Global_Objects/Symbol +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Symbol + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +
{{JSRef}}
+ +

Символ є {{Glossary("Primitive", "простим типом даних")}}. Функція  Symbol() вертає значення типу символ, має статичні властивості, що відкривають декілька членів вбудованих об'єктів, має статичні методи, що відкривають глобальний реєстр символів, та нагадує вбудований клас об'єкта, але не є повноцінним конструктором, оскільки не підтримує синтаксис "new Symbol()".

+ +

Кожне символьне значення, що його вертає Symbol(), є унікальним. Символьне значення може використовуватись в якості ідентифікатора властивостей об'єкта; це єдина мета цього типу даних. Більше пояснень щодо мети та використання можна знайти у статті словника щодо символів.

+ +

{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}

+ + + +

Синтаксис

+ +
Symbol([description])
+ +

Параметри

+ +
+
description {{optional_inline}}
+
Необов'язковий, рядок. Опис символу, який можна використовувати для відлагодження, але не для доступу для самого символу.
+
+ +

Опис

+ +

Для створення примітивного символа ви пишете Symbol() з необов'язковим рядком в ролі його опису:

+ +
var sym1 = Symbol();
+var sym2 = Symbol('foo');
+var sym3 = Symbol('foo');
+
+ +

Наведений код створює три нові символи. Зауважте, що Symbol("foo") не приводить рядок "foo" до символу. Він кожен раз створює новий символ:

+ +
Symbol('foo') === Symbol('foo'); // false
+ +

Наступний синтаксис з оператором {{jsxref("Operators/new", "new")}} викине помилку {{jsxref("TypeError")}}:

+ +
var sym = new Symbol(); // TypeError
+ +

Це запобігає створенню явного об'єкта-обгортки Symbol замість нового символьного значення та може дивувати, оскільки створення явного об'єкта-обгортки для примітивних типів даних загалом можливе (для прикладу, new Boolean, new String та new Number).

+ +

Якщо вам дуже потрібно створити об'єкт обгортку Symbol, ви можете скористатись функцією Object():

+ +
var sym = Symbol('foo');
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+
+ +

Спільні символи у глобальному реєстрі символів

+ +

Наведений синтаксис використання функції Symbol() не створить глобальний символ, доступний з усієї вашої кодової бази. Щоб створити символи, доступні в усіх файлах і навіть у різних сферах (кожна з яких має свою глобальну область видимості), використовуйте методи {{jsxref("Symbol.for()")}} та {{jsxref("Symbol.keyFor()")}}, щоб записувати та читати символи у глобальному реєстрі символів.

+ +

Пошук символьних властивостей об'єктів

+ +

Метод {{jsxref("Object.getOwnPropertySymbols()")}} повертає масив символів та дозволяє знайти символьні властивості наданого об'єкта. Зауважте, що жоден об'єкт не ініціалізується з особистими символьними властивостями, отже, цей масив буде порожнім, якщо тільки ви не задали символьні властивості об'єкта.

+ +

Properties

+ +
+
Symbol.length
+
Length property whose value is 0.
+
{{jsxref("Symbol.prototype")}}
+
Represents the prototype for the Symbol constructor.
+
+ +

Well-known symbols

+ +

In addition to your own symbols, JavaScript has some built-in symbols which represent internal language behaviors which were not exposed to developers in ECMAScript 5 and before. These symbols can be accessed using the following properties:

+ +

Iteration symbols

+ +
+
{{jsxref("Symbol.iterator")}}
+
A method returning the default iterator for an object. Used by for...of.
+
+ +

Regular expression symbols

+ +
+
{{jsxref("Symbol.match")}}
+
A method that matches against a string, also used to determine if an object may be used as a regular expression. Used by {{jsxref("String.prototype.match()")}}.
+
{{jsxref("Symbol.replace")}}
+
A method that replaces matched substrings of a string. Used by {{jsxref("String.prototype.replace()")}}.
+
{{jsxref("Symbol.search")}}
+
A method that returns the index within a string that matches the regular expression. Used by {{jsxref("String.prototype.search()")}}.
+
{{jsxref("Symbol.split")}}
+
A method that splits a string at the indices that match a regular expression. Used by {{jsxref("String.prototype.split()")}}.
+
+ +

Other symbols

+ +
+
{{jsxref("Symbol.hasInstance")}}
+
A method determining if a constructor object recognizes an object as its instance. Used by {{jsxref("Operators/instanceof", "instanceof")}}.
+
{{jsxref("Symbol.isConcatSpreadable")}}
+
A Boolean value indicating if an object should be flattened to its array elements. Used by {{jsxref("Array.prototype.concat()")}}.
+
{{jsxref("Symbol.unscopables")}}
+
An object value of whose own and inherited property names are excluded from the with environment bindings of the associated object.
+
{{jsxref("Symbol.species")}}
+
A constructor function that is used to create derived objects.
+
{{jsxref("Symbol.toPrimitive")}}
+
A method converting an object to a primitive value.
+
{{jsxref("Symbol.toStringTag")}}
+
A string value used for the default description of an object. Used by {{jsxref("Object.prototype.toString()")}}.
+
+ +

Methods

+ +
+
{{jsxref("Symbol.for()", "Symbol.for(key)")}}
+
Searches for existing symbols with the given key and returns it if found. Otherwise a new symbol gets created in the global symbol registry with this key.
+
{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
+
Retrieves a shared symbol key from the global symbol registry for the given symbol.
+
+ +

Symbol prototype

+ +

All Symbols inherit from {{jsxref("Symbol.prototype")}}.

+ +

Properties

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}

+ +

Methods

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}

+ +

Examples

+ +

Using the typeof operator with symbols

+ +

The {{jsxref("Operators/typeof", "typeof")}} operator can help you to identify symbols.

+ +
typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+ +

Symbol type conversions

+ +

Some things to note when working with type conversion of symbols.

+ + + +

Symbols and for...in iteration

+ +

Symbols are not enumerable in for...in iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.

+ +
var obj = {};
+
+obj[Symbol('a')] = 'a';
+obj[Symbol.for('b')] = 'b';
+obj['c'] = 'c';
+obj.d = 'd';
+
+for (var i in obj) {
+   console.log(i); // logs "c" and "d"
+}
+ +

Symbols and JSON.stringify()

+ +

Symbol-keyed properties will be completely ignored when using JSON.stringify():

+ +
JSON.stringify({[Symbol('foo')]: 'foo'});
+// '{}'
+ +

For more details, see {{jsxref("JSON.stringify()")}}.

+ +

Symbol wrapper objects as property keys

+ +

When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:

+ +
var sym = Symbol('foo');
+var obj = {[sym]: 1};
+obj[sym];            // 1
+obj[Object(sym)];    // still 1
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}{{Spec2('ES2015')}}Initial definition
{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(38)}}{{CompatGeckoDesktop(36)}}{{CompatNo}}259
Symbol.iterator (@@iterator){{CompatChrome(38)}}{{CompatGeckoDesktop(36)}}{{CompatNo}}259
Symbol.unscopables (@@unscopables){{CompatChrome(38)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}259
Symbol.match (@@match){{CompatChrome(50)}}{{CompatGeckoDesktop(40)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.species (@@species){{CompatChrome(51)}}{{CompatGeckoDesktop(41)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.toPrimitive (@@toPrimitive){{CompatChrome(48)}}{{CompatGeckoDesktop(44)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.replace (@@replace){{CompatChrome(50)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.search (@@search){{CompatChrome(50)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.split (@@split){{CompatChrome(50)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.isConcatSpreadable (@@isconcatspreadable){{CompatChrome(48)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.hasInstance (@@hasInstance){{CompatChrome(51)}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.toStringTag (@@toStringTag){{CompatChrome(49)}}{{CompatGeckoDesktop(51)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(38)}}{{CompatGeckoMobile(36)}}{{CompatNo}}259
Symbol.iterator (@@iterator){{CompatUnknown}}{{CompatChrome(38)}}{{CompatGeckoMobile(36)}}{{CompatNo}}259
Symbol.unscopables (@@unscopables){{CompatUnknown}}{{CompatChrome(38)}}{{CompatGeckoMobile(48)}}{{CompatNo}}259
Symbol.match (@@match){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(40)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.species (@@species){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.toPrimitive (@@toPrimitive){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(44)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.replace (@@replace){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.search (@@search){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.split (@@split){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.isConcatSpreadable (@@isconcatspreadable){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(48)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.hasInstance (@@hasInstance){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Symbol.toStringTag (@@toStringTag){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html b/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html new file mode 100644 index 0000000000..2c6541ad4d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html @@ -0,0 +1,99 @@ +--- +title: Symbol.isConcatSpreadable +slug: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.isConcatSpreadable використовують, щоб налаштувати вирівнювання об'єкта до масиву його елементів при використанні методу {{jsxref("Array.prototype.concat()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}
+ + + +

Опис

+ +

Символ @@isConcatSpreadable (Symbol.isConcatSpreadable) може бути визначений як особиста чи успадкована властивість, а його значення є булевою величиною. Він може контролювати поведінку масивів та подібних до масивів об'єктів:

+ + + +

{{js_property_attributes(0,0,0)}}

+ +

Приклади

+ +

Масиви

+ +

За замовчуванням {{jsxref("Array.prototype.concat()")}} розкладає (вирівнює) масиви:

+ +
let alpha = ['а', 'б', 'в'],
+let numeric = [1, 2, 3]
+
+let alphaNumeric = alpha.concat(numeric)
+
+console.log(alphaNumeric)  // Результат: ['а', 'б', 'в', 1, 2, 3]
+
+ +

Присвоївши Symbol.isConcatSpreadable значення false, ви можете відключити цю поведінку:

+ +
let alpha = ['а', 'б', 'в'],
+let numeric = [1, 2, 3]
+
+numeric[Symbol.isConcatSpreadable] = false
+let alphaNumeric = alpha.concat(numeric)
+
+console.log(alphaNumeric)  // Результат: ['а', 'б', 'в', [1, 2, 3] ]
+
+ +

Подібні до масивів об'єкти

+ +

Подібні до масивів об'єкти за замовчуванням не розкладаються. Symbol.isConcatSpreadable необхідно присвоїти true, щоб отримати вирівняний масив:

+ +
let x = [1, 2, 3]
+
+let fakeArray = {
+  [Symbol.isConcatSpreadable]: true,
+  length: 2,
+  0: 'всім',
+  1: 'привіт'
+}
+
+x.concat(fakeArray)  // [1, 2, 3, "всім", "привіт"]
+
+ +
+

Заувага: Властивість length використовується, щоб контролювати кількість властивостей об'єкта, що будуть додані. У наведеному вище прикладі length:2 вказує, що треба додати дві властивості.

+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html new file mode 100644 index 0000000000..a41c7e413c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html @@ -0,0 +1,116 @@ +--- +title: Symbol.iterator +slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.iterator визначає для об'єкта ітератор за замовчуванням. Використовується циклом for...of.

+ +

{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}

+ + + +

Опис

+ +

Коли виникає необхідність перебрати об'єкт (наприклад, на початку циклу for..of), його метод @@iterator викликається без аргументів, а ітератор, який він повертає, використовується для отримання значень, що перебираються.

+ +

Деякі вбудовані типи мають визначену за замовчуванням поведінку під час перебору, в той час, як інші типи (такі як {{jsxref("Object")}}) її не мають. Вбудовані типи, що мають метод @@iterator, наступні:

+ + + +

Дивіться більше інформації у статті Протоколи перебору.

+ +

{{js_property_attributes(0,0,0)}}

+ +

Приклади

+ +

Створені користувачем ітерабельні об'єкти

+ +

Ми можемо створювати власні ітерабельні об'єкти наступним чином:

+ +
var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+
+ +

Або ітерабельні об'єкти можна визначити безпосередньо всередині класу чи об'єкта, використовуючи обчислювані властивості:

+ +
class Foo {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const someObj = {
+  *[Symbol.iterator] () {
+    yield 'а';
+    yield 'б';
+  }
+}
+
+[...new Foo] // [ 1, 2, 3 ]
+[...someObj] // [ 'а', 'б' ]
+ +

Погано сформовані ітерабельні об'єкти

+ +

Якщо метод ітерабельного об'єкта @@iterator не повертає об'єкт ітератора, то це погано сформований ітерабельний об'єкт. Використання його в такому вигляді ймовірно призведе до викидання винятків під час виконання або помилкової поведінки:

+ +
var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () => 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.iterator")}}

+ +
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/match/index.html b/files/uk/web/javascript/reference/global_objects/symbol/match/index.html new file mode 100644 index 0000000000..fd076f301f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/match/index.html @@ -0,0 +1,71 @@ +--- +title: Symbol.match +slug: Web/JavaScript/Reference/Global_Objects/Symbol/match +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.match визначає збіг регулярного виразу з рядком. Ця функція викликається методом {{jsxref("String.prototype.match()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-match.html")}}
+ + + +

Опис

+ +

Ця функція також використовується, щоб з'ясувати, чи об'єкти поводяться як регулярні вирази. Наприклад, методи {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} та {{jsxref("String.prototype.includes()")}} перевіряють, чи є перший аргумент регулярним виразом, та викидають {{jsxref("TypeError")}}, якщо це так. Отже, якщо символ match має значення false (або хибне значення), він вказує, що об'єкт не призначений для використання в якості регулярного виразу.

+ +

{{js_property_attributes(0,0,0)}}

+ +

Приклади

+ +

Відключення перевірки isRegExp

+ +

Наступний код викине помилку {{jsxref("TypeError")}}:

+ +
'/bar/'.startsWith(/bar/);
+
+// Викидає TypeError, оскільки /bar/ є регулярним виразом,
+// а Symbol.match не змінений.
+ +

Однак, якщо ви присвоїте Symbol.match значення false, перевірка isRegExp (яка використовує властивість match) вкаже, що об'єкт не є об'єктом регулярного виразу. Як наслідок, методи startsWith та endsWith не викидатимуть TypeError.

+ +
var re = /foo/;
+re[Symbol.match] = false;
+'/foo/'.startsWith(re); // true
+'/baz/'.endsWith(re);   // false
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.match")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html b/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html new file mode 100644 index 0000000000..af531d4376 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html @@ -0,0 +1,78 @@ +--- +title: Symbol.matchAll +slug: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll +tags: + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.matchAll повертає ітератор, який видає збіги регулярного виразу з рядком. Ця функція викликається методом {{jsxref("String.prototype.matchAll()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-matchall.html","shorter")}}
+ + + +

Опис

+ +
+

Цей символ використовується для {{jsxref("String.prototype.matchAll()")}} та зокрема у {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Наступні два приклади повертають однаковий результат:

+ +
'абв'.matchAll(/а/);
+
+/а/[Symbol.matchAll]('абв');
+ +

Цей метод існує для налаштування поведінки пошуку збігів всередині підкласів {{jsxref("RegExp")}}.

+ +

{{js_property_attributes(0,0,0)}}

+
+ +

Приклади

+ +

Використання Symbol.matchAll

+ +
let re = /[0-9]+/g;
+let str = '2016-01-02|2019-03-07';
+
+const numbers = {
+  *[Symbol.matchAll] (str) {
+    for (const n of str.matchAll(/[0-9]+/g))
+      yield n[0];
+  }
+};
+
+console.log(Array.from(str.matchAll(numbers)));
+//  Array ["2016", "01", "02", "2019", "03", "07"]
+
+ +

Дивіться більше прикладів у {{jsxref("String.prototype.matchAll()")}} та {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}.

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.matchAll")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html b/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html new file mode 100644 index 0000000000..0f37a4a289 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html @@ -0,0 +1,66 @@ +--- +title: Symbol.replace +slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.replace визначає метод, який замінює збіги у рядку. Ця функція викликається методом {{jsxref("String.prototype.replace()")}}.

+ +

Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} та {{jsxref("String.prototype.replace()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Приклади

+ +

Використання Symbol.replace

+ +
class CustomReplacer {
+  constructor(value) {
+    this.value = value;
+  }
+  [Symbol.replace](string) {
+    return string.replace(this.value, '#!@?');
+  }
+}
+
+console.log('football'.replace(new CustomReplacer('foo')));
+// очікуваний результат: "#!@?tball"
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.replace")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/search/index.html b/files/uk/web/javascript/reference/global_objects/symbol/search/index.html new file mode 100644 index 0000000000..36aad26385 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/search/index.html @@ -0,0 +1,66 @@ +--- +title: Symbol.search +slug: Web/JavaScript/Reference/Global_Objects/Symbol/search +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.search визначає метод, який повертає індекс у рядку, що збігається з регулярним виразом. Ця функція викликається методом {{jsxref("String.prototype.search()")}}.

+ +

Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} та {{jsxref("String.prototype.search()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-search.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Приклади

+ +

Користувацький пошук у рядку

+ +
class caseInsensitiveSearch {
+  constructor(value) {
+    this.value = value.toLowerCase();
+  }
+  [Symbol.search](string) {
+    return string.toLowerCase().indexOf(this.value);
+  }
+}
+
+console.log('foobar'.search(new caseInsensitiveSearch('BaR')));
+// очікуваний результат: 3
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.search")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/species/index.html b/files/uk/web/javascript/reference/global_objects/symbol/species/index.html new file mode 100644 index 0000000000..0698c840d5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/species/index.html @@ -0,0 +1,69 @@ +--- +title: Symbol.species +slug: Web/JavaScript/Reference/Global_Objects/Symbol/species +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.species визначає властивість, значенням якої є функція, яку використовує конструктор для створення похідних об'єктів.

+ +
{{EmbedInteractiveExample("pages/js/symbol-species.html")}}
+ + + +

Опис

+ +

Властивість-аксесор species дозволяє підкласам перевизначати конструктор для об'єктів.

+ +

{{js_property_attributes(0,0,0)}}

+ +

Приклади

+ +

Використання species

+ +

Можливо, ви захочете повертати об'єкти {{jsxref("Array")}} у вашому похідному класі масивів MyArray. Наприклад, при використанні методів, таких як {{jsxref("Array.map", "map()")}}, які повертають конструктор за замовчуванням, ви бажаєте, щоб вони повертали батьківський об'єкт Array замість об'єкта MyArray. Символ species дозволяє це зробити:

+ +
class MyArray extends Array {
+  // Перевизначаємо species на батьківський конструктор Array
+  static get [Symbol.species]() { return Array; }
+}
+let a = new MyArray(1,2,3);
+let mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.species")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/split/index.html b/files/uk/web/javascript/reference/global_objects/symbol/split/index.html new file mode 100644 index 0000000000..baabe4748f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/split/index.html @@ -0,0 +1,66 @@ +--- +title: Symbol.split +slug: Web/JavaScript/Reference/Global_Objects/Symbol/split +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.split визначає метод, що розбиває рядок за індексами, які збігаються з регулярним виразом. Ця функція викликається методом {{jsxref("String.prototype.split()")}}.

+ +

Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} та {{jsxref("String.prototype.split()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-split.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Приклади

+ +

Користувацьке розбиття з переверненням

+ +
class ReverseSplit {
+  [Symbol.split](string) {
+    const array = string.split(' ');
+    return array.reverse();
+  }
+}
+
+console.log('Another one bites the dust'.split(new ReverseSplit()));
+// очікуваний результат: [ "dust", "the", "bites", "one", "Another" ]
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.split")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html b/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html new file mode 100644 index 0000000000..8ed616cee6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html @@ -0,0 +1,83 @@ +--- +title: Конструктор Symbol() +slug: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol +--- +
{{JSRef}}
+ +

Конструктор Symbol() повертає значення типу symbol, але він не є повноцінним конструктором, оскільки не підтримує синтаксис "new Symbol()", а також не призначений для створення підкласів. Його можна використовувати як значення блоку extends у визначенні класу, але виклик його через super спричинить виняток.

+ +
{{EmbedInteractiveExample("pages/js/symbol-constructor.html", "taller")}}
+ + + +

Синтаксис

+ +
Symbol([description])
+ +

Параметри

+ +
+
description {{optional_inline}}
+
Рядок. Опис символа, який може використовуватись для відлагодження, але не для доступу до самого символа.
+
+ +

Прилади

+ +

Створення символів

+ +

Щоб створити новий примітивний символ, напишіть Symbol() з необов'язковим рядком опису:

+ +
let sym1 = Symbol()
+let sym2 = Symbol('foo')
+let sym3 = Symbol('foo')
+
+ +

Наведений вище код створює три нові символи. Зауважте, що Symbol("foo") не приводить рядок "foo" до символа. Він кожен раз створює новий символ:

+ +
Symbol('foo') === Symbol('foo')  // false
+
+ +

new Symbol(...)

+ +

Наступний синтаксис з оператором {{jsxref("Operators/new", "new")}} викине помилку {{jsxref("TypeError")}}:

+ +
let sym = new Symbol()  // TypeError
+
+ +

Це запобігає створенню явного об'єкта-обгортки Symbol замість нового символьного значення та може здивувати, оскільки створення таких об'єктів-обгорток навколо примітивних типів даних загалом можливе (наприклад, new Boolean, new String та new Number).

+ +

Якщо вам дійсно потрібно створити об'єкт-обгортку Symbol, ви можете скористатись фукнцією Object():

+ +
let sym    = Symbol('foo');
+let symObj = Object(sym);
+typeof sym    // => "symbol"
+typeof symObj // => "object"
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol-constructor', 'Symbol constructor')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.Symbol")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html new file mode 100644 index 0000000000..0f9567a8bb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html @@ -0,0 +1,75 @@ +--- +title: Symbol.toPrimitive +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +--- +
{{JSRef}}
+ +

Symbol.toPrimitive - це символ, який визначає властивість зі значенням-функцією, що викликається для перетворення об'єкта на відповідне просте значення.

+ +
{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}
+ + + +

Опис

+ +

За допомогою властивості Symbol.toPrimitive (що використовується в якості функції) об'єкт може перетворюватись на прості значення. Функція викликається з рядковим аргументом hint, який вказує бажаний тип отриманого примітиву. Аргумент hint може мати значення "number", "string" або "default".

+ +

{{js_property_attributes(0,0,0)}}

+ +

Приклади

+ +

Модифікація простих значень, отриманих перетворенням об'єкта

+ +

Наступний приклад описує, як властивість Symbol.toPrimitive може змінювати прості значення, отримані з об'єкта.

+ +
// Об'єкт без властивості Symbol.toPrimitive.
+var obj1 = {};
+console.log(+obj1);     // NaN
+console.log(`${obj1}`); // "[object Object]"
+console.log(obj1 + ''); // "[object Object]"
+
+// Об'єкт з властивістю Symbol.toPrimitive.
+var obj2 = {
+  [Symbol.toPrimitive](hint) {
+    if (hint == 'number') {
+      return 10;
+    }
+    if (hint == 'string') {
+      return 'привіт';
+    }
+    return true;
+  }
+};
+console.log(+obj2);     // 10        -- hint дорівнює "number"
+console.log(`${obj2}`); // "привіт"  -- hint дорівнює "string"
+console.log(obj2 + ''); // "true"    -- hint дорівнює "default"
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.toPrimitive")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html b/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html new file mode 100644 index 0000000000..9faa5645ca --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html @@ -0,0 +1,99 @@ +--- +title: Symbol.toStringTag +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.toStringTag - це властивість з рядковим значенням, що використовується для створення заданого рядкового опису об'єкта. До неї звертається метод {{jsxref("Object.prototype.toString()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Приклади

+ +

Теги за замовчуванням

+ +
Object.prototype.toString.call('foo');     // "[object String]"
+Object.prototype.toString.call([1, 2]);    // "[object Array]"
+Object.prototype.toString.call(3);         // "[object Number]"
+Object.prototype.toString.call(true);      // "[object Boolean]"
+Object.prototype.toString.call(undefined); // "[object Undefined]"
+Object.prototype.toString.call(null);      // "[object Null]"
+// ... та інші
+
+ +

Вбудовані символи toStringTag

+ +
Object.prototype.toString.call(new Map());       // "[object Map]"
+Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
+Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
+// ... та інші
+
+ +

Користувацькі класи з тегом за замовчуванням

+ +

При створенні власного класу, JavaScript за замовчуванням виставляє тег "Object":

+ +
class ValidatorClass {}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
+
+ +

Користувацький тег з toStringTag

+ +

Отже, за допомогою toStringTag ви можете налаштувати свій власний тег:

+ +
class ValidatorClass {
+  get [Symbol.toStringTag]() {
+    return 'Validator';
+  }
+}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
+
+ +

toStringTag доступний на усіх DOM-об'єктах

+ +

Завдяки змінам у специфікації WebIDL в середині 2020, переглядачі додають властивість Symbol.toStringTag до усіх DOM-об'єктів. Наприклад, для звернення до властивості Symbol.toStringTag у {{domxref("HTMLButtonElement")}}:

+ +
let test = document.createElement('button');
+test.toString(); // Вертає [object HTMLButtonElement]
+test[Symbol.toStringTag];  // Вертає HTMLButtonElement
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.toStringTag")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html new file mode 100644 index 0000000000..5b90c252d4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html @@ -0,0 +1,89 @@ +--- +title: Symbol.unscopables +slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +--- +
{{JSRef}}
+ +

Добревідомий символ Symbol.unscopables використовується, щоб визначити об'єкт, чиї імена особистих та успадкованих властивостей виключаються з прив'язок оточення with для асоційованого об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}
+ + + +

Опис

+ +

Символ @@unscopables (Symbol.unscopables) можна визначити на будь-якому об'єкті, щоб запобігти розкриттю імен властивостей в якості лексичних змінних у прив'язках оточення with. Зауважте, що при використанні строгого режиму інструкції with недоступні та, відповідно, не потребують цього символа.

+ +

Присвоєння властивості значення true у об'єкті unscopables зробить її невидимою (unscopable), і, таким чином, вона не з'явиться у змінних лексичної області видимості. Присвоєння властивості значення false зробить її видимою (scopable), відповідно, вона з'явиться у змінних лексичної області видимості.

+ +

{{js_property_attributes(0,0,0)}}

+ +

Приклади

+ +

Видимість у інструкціях with

+ +

Наступний код добре працює у версіях ES5 та нижче. Однак, у ECMAScript 2015 та пізніших версіях був запроваджений метод {{jsxref("Array.prototype.keys()")}}. Це означає, що всередині оточення with "keys" тепер буде методом, а не змінною. Саме тоді був доданий символ unscopables. Вбудоване налаштування unscopables реалізоване у вигляді {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}, щоб запобігти потраплянню деяких методів масиву у область видимості with.

+ +
var keys = [];
+
+with (Array.prototype) {
+  keys.push('something');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+
+ +

Unscopables у об'єктах

+ +

Ви також можете налаштувати unscopables для своїх власних об'єктів.

+ +
var obj = {
+  foo: 1,
+  bar: 2
+};
+
+obj[Symbol.unscopables] = {
+  foo: false,
+  bar: true
+};
+
+with (obj) {
+  console.log(foo); // 1
+  console.log(bar); // ReferenceError: bar is not defined
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Symbol.unscopables")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html b/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..1ab5c9b5c7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,115 @@ +--- +title: SyntaxError +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError +tags: + - Error + - JavaScript + - SyntaxError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +
{{JSRef}}
+ +

Об'єкт класу SyntaxError позначає помилку, що виникає внаслідок спроби виконання коду з порушеннями синтаксису.

+ +

Опис

+ +

Виняток SyntaxError викидається тоді, коли рушій JavaScript під час спроби виконати код виявляє символи чи їх послідовність, що суперечить чинному синтаксу мови.

+ +

Синтаксис

+ +
new SyntaxError([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message {{optional_inline}}
+
Зрозумілий людині опис помилки.
+
fileName {{non-standard_inline}} {{optional_inline}}
+
Ім'я файлу, код з якого спричинив помилку.
+
lineNumber {{non-standard_inline}} {{optional_inline}}
+
Номер рядка в коді, що спричинив помилку.
+
+ +

Властивості

+ +
+
SyntaxError.prototype
+
Вможливлює додавання властивостей до об'єктів класу SyntaxError.
+
+ +

Методи

+ +

Сам SyntaxError власних методів не має, але деякі він успадковує через ланцюжок прототипів.

+ +

Примірники SyntaxError

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Методи')}}
+ +

Приклади

+ +

Перехоплення SyntaxError

+ +
try {
+  eval('казна-що');
+} catch (e) {
+  console.error(e instanceof SyntaxError);
+  console.error(e.message);
+  console.error(e.name);
+  console.error(e.fileName);
+  console.error(e.lineNumber);
+  console.error(e.columnNumber);
+  console.error(e.stack);
+}
+
+ +

Створення SyntaxError

+ +
try {
+  throw new SyntaxError('Отакої!', 'someFile.js', 10);
+} catch (e) {
+  console.error(e instanceof SyntaxError);  // true
+  console.error(e.message);                 // Отакої!
+  console.error(e.name);                    // SyntaxError
+  console.error(e.fileName);                // someFile.js
+  console.error(e.lineNumber);              // 10
+  console.error(e.columnNumber);            // 0
+  console.error(e.stack);                   // @debugger eval code:3:9
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.SyntaxError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html new file mode 100644 index 0000000000..c2d5f46901 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html @@ -0,0 +1,88 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +tags: + - Error + - JavaScript + - Prototype + - SyntaxError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +
{{JSRef}}
+ +

Властивість SyntaxError.prototype є прототипом для конструктора {{jsxref("SyntaxError")}}.

+ +

Опис

+ +

Всі примірники {{jsxref("SyntaxError")}} успадковуються від SyntaxError.prototype, тож ви можете скористатися прототипом задля додавання властивостей чи методів до всіх примірників.

+ +

Властивості

+ +
+
SyntaxError.prototype.constructor
+
Функція, що створює прототип об'єкта.
+
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
+
Повідомлення помилки. Попри те, що в ECMA-262 зазначено, що {{jsxref("SyntaxError")}} мусить мати свою властивість message, у SpiderMonkey він насправді успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
+
Шлях до файла, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
+
Номер рядка у файлі, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
+
Номер символа у рядку, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
+
Стек викликів. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("SyntaxError")}} не містить власних методів, примірники {{jsxref("SyntaxError")}} успадковують деякі методи від ланцюжка прототипів.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Первинне визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.SyntaxError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/typeerror/index.html b/files/uk/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..155aafc5bb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,118 @@ +--- +title: TypeError +slug: Web/JavaScript/Reference/Global_Objects/TypeError +tags: + - Error + - JavaScript + - TypeError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +--- +
{{JSRef}}
+ +

Об'єкт TypeError позначає помилку, що виникає при використанні значення невідповідного типу.

+ +

Синтаксис

+ +
new TypeError([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message
+
Необов'язковий. Зрозумілий людині опис помилки.
+
fileName {{non-standard_inline}}
+
Необов'язковий. Ім'я файлу, код з якого спричинив виняток.
+
lineNumber {{non-standard_inline}}
+
Необов'язковий. Номер рядка в коді, що спричинив виняток.
+
+ +

Опис

+ +

TypeError викидається, коли:

+ + + +

Властивості

+ +
+
TypeError.prototype
+
Дозволяє додавати властивості до об'єктів TypeError.
+
+ +

Методи

+ +

Сам TypeError не має власних методів, але успадковує деякі методи через ланцюжок прототипів.

+ +

Екземпляри TypeError

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Методи')}}
+ +

Приклади

+ +

Перехоплення TypeError

+ +
try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError) // true
+  console.log(e.message)              // "null has no properties"
+  console.log(e.name)                 // "TypeError"
+  console.log(e.fileName)             // "Scratchpad/1"
+  console.log(e.lineNumber)           // 2
+  console.log(e.columnNumber)         // 2
+  console.log(e.stack)                // "@Scratchpad/2:2:3\n"
+}
+
+ +

Створення TypeError

+ +
try {
+  throw new TypeError('Привіт', "someFile.js", 10);
+} catch (e) {
+  console.log(e instanceof TypeError) // true
+  console.log(e.message)              // "Привіт"
+  console.log(e.name)                 // "TypeError"
+  console.log(e.fileName)             // "someFile.js"
+  console.log(e.lineNumber)           // 10
+  console.log(e.columnNumber)         // 0
+  console.log(e.stack)                // "@Scratchpad/2:2:9\n"
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.TypeError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html new file mode 100644 index 0000000000..6e6cef6483 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html @@ -0,0 +1,87 @@ +--- +title: TypeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +tags: + - Error + - JavaScript + - TypeError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +--- +
{{JSRef}}
+ +

Властивість TypeError.prototype є прототипом для конструктора {{jsxref("TypeError")}}.

+ +

Опис

+ +

Всі екземпляри {{jsxref("TypeError")}} успадковуються від TypeError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
TypeError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("TypeError")}} повинен мати власну властивість message, у SpiderMonkey, він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("TypeError")}} не містить власних методів, екземпляри {{jsxref("TypeError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як  NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як  NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}} 
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.TypeError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/undefined/index.html b/files/uk/web/javascript/reference/global_objects/undefined/index.html new file mode 100644 index 0000000000..66028e114d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/undefined/index.html @@ -0,0 +1,140 @@ +--- +title: undefined +slug: Web/JavaScript/Reference/Global_Objects/undefined +tags: + - JavaScript + - Проста величина +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +
{{jsSidebar("Objects")}}
+ +

Глобальна властивість undefined представляє просте значення {{Glossary("Undefined", "undefined")}}. Це один з {{Glossary("Primitive", "простих типів")}} JavaScript.

+ +

{{js_property_attributes(0,0,0)}}

+ +

{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}

+ + + +

Синтаксис

+ +
undefined
+ +

Опис

+ +

undefined is a property of the global object; i.e., it is a variable in global scope. The initial value of undefined is the primitive value {{Glossary("Undefined", "undefined")}}.

+ +

In modern browsers (JavaScript 1.8.5 / Firefox 4+), undefined is a non-configurable, non-writable property per the ECMAScript 5 specification. Even when this is not the case, avoid overriding it.

+ +

A variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not {{jsxref("Statements/return", "returned")}}.

+ +
+

While it is possible to use it as an {{Glossary("Identifier", "identifier")}} (variable name) in any scope other than the global scope (because undefined is not a {{jsxref("Reserved_Words", "reserved word")}}), doing so is a very bad idea that will make your code difficult to maintain and debug.

+ +
//DON'T DO THIS
+
+// logs "foo string"
+(function() { var undefined = 'foo'; console.log(undefined, typeof undefined); })();
+
+// logs "foo string"
+(function(undefined) { console.log(undefined, typeof undefined); })('foo');
+
+
+ +

Приклади

+ +

Сувора рівність та undefined

+ +

Виконавши строге порівняння змінної із значенням undefined можна перевірити, чи змінна має значення. У прикладі нижче змінна x не ініціалізована, тому умовний операторif буде оцінено як істина (true)

+ +
var x;
+if (x === undefined) {
+   // код у цьому блоці буде виконано
+}
+else {
+   // код у цьому блоку не буде виконано
+}
+
+ +
+

Note: The strict equality operator rather than the standard equality operator must be used here, because x == undefined also checks whether x is null, while strict equality doesn't. null is not equivalent to undefined. See {{jsxref("Operators/Comparison_Operators", "comparison operators")}} for details.

+
+ +

Typeof operator and undefined

+ +

Alternatively, {{jsxref("Operators/typeof", "typeof")}} can be used:

+ +
var x;
+if (typeof x === 'undefined') {
+   // these statements execute
+}
+
+ +

One reason to use {{jsxref("Operators/typeof", "typeof")}} is that it does not throw an error if the variable has not been declared.

+ +
// x has not been declared before
+if (typeof x === 'undefined') { // evaluates to true without errors
+   // these statements execute
+}
+
+if (x === undefined) { // throws a ReferenceError
+
+}
+
+ +

However, this kind of technique should be avoided. JavaScript is a statically scoped language, so knowing if a variable is declared can be read by seeing whether it is declared in an enclosing context. The only exception is the global scope, but the global scope is bound to the global object, so checking the existence of a variable in the global context can be done by checking the existence of a property on the global object (using the {{jsxref("Operators/in", "in")}} operator, for instance).

+ +

Void operator and undefined

+ +

The {{jsxref("Operators/void", "void")}} operator is a third alternative.

+ +
var x;
+if (x === void 0) {
+   // these statements execute
+}
+
+// y has not been declared before
+if (y === void 0) {
+   // throws a - Uncaught ReferenceError: y is not defined
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-undefined', 'undefined')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.undefined")}}

diff --git a/files/uk/web/javascript/reference/global_objects/uneval/index.html b/files/uk/web/javascript/reference/global_objects/uneval/index.html new file mode 100644 index 0000000000..a5f930230b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/uneval/index.html @@ -0,0 +1,68 @@ +--- +title: uneval() +slug: Web/JavaScript/Reference/Global_Objects/uneval +tags: + - JavaScript + - Функція + - нестандартна +translation_of: Web/JavaScript/Reference/Global_Objects/uneval +--- +

{{JSSidebar("Objects")}}{{Non-standard_Header}}

+ +

Функція uneval() створює рядкове представлення першокоду об'єкта.

+ +

Синтаксис

+ +
uneval(object)
+ +

Параметри

+ +
+
object
+
Вираз чи інструкція JavaScript.
+
+ +

Значення, що повертається

+ +

Рядок, у якому представлено першокод наданого об'єкта.

+ +
Заувага: Ви не зможете отримати коректне JSON-представлення вашого об'єкта.
+ +

Опис

+ +

uneval() - глобальна функція, вона не пов'язана з жодним об'єктом.

+ +

Приклади

+ +
var a = 1;
+uneval(a); // повертає рядок, що містить 1
+
+var b = '1';
+uneval(b); // повертає рядок, що містить "1"
+
+uneval(function foo() {}); // повертає "(function foo(){})"
+
+
+var a = uneval(function foo() { return 'привіт'; });
+var foo = eval(a);
+foo(); // повертає "привіт"
+
+ +

Специфікації

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.uneval")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/urierror/index.html b/files/uk/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..bae1aaa8f5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,116 @@ +--- +title: URIError +slug: Web/JavaScript/Reference/Global_Objects/URIError +tags: + - Error + - JavaScript + - URIError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +--- +
{{JSRef}}
+ +

Об'єкт URIError позначає помилку, що виникає при хибному використанні глобальної функції, що працює з URI.

+ +

Синтаксис

+ +
new URIError([message[, fileName[, lineNumber]]])
+ +

Параметри

+ +
+
message {{optional_inline}}
+
Необов'язковий. Зрозумілий людині опис помилки.
+
fileName {{optional_inline}} {{non-standard_inline}}
+
Необов'язковий. Ім'я файлу, код з якого спричинив виняток.
+
lineNumber {{optional_inline}} {{non-standard_inline}}
+
Необов'язковий. Номер рядка в коді, що спричинив виняток.
+
+ +

Опис

+ +

URIError викидається, коли глобальним функціям, що працюють з URI, передається неправильно сформований URI.

+ +

Властивості

+ +
+
URIError.prototype
+
Дозволяє додавати властивості до об'єктів URIError.
+
+ +

Методи

+ +

Сам URIError не має власних методів, але успадковує деякі методи через ланцюжок прототипів.

+ +

Екземпляри URIError

+ +

Властивості

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Властивості')}}
+ +

Методи

+ +
{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Методи')}}
+ +

Приклади

+ +

Перехоплення URIError

+ +
try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError) // true
+  console.log(e.message)             // "malformed URI sequence"
+  console.log(e.name)                // "URIError"
+  console.log(e.fileName)            // "Scratchpad/1"
+  console.log(e.lineNumber)          // 2
+  console.log(e.columnNumber)        // 2
+  console.log(e.stack)               // "@Scratchpad/2:2:3\n"
+}
+
+ +

Створення URIError

+ +
try {
+  throw new URIError('Привіт', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError) // true
+  console.log(e.message)             // "Привіт"
+  console.log(e.name)                // "URIError"
+  console.log(e.fileName)            // "someFile.js"
+  console.log(e.lineNumber)          // 10
+  console.log(e.columnNumber)        // 0
+  console.log(e.stack)               // "@Scratchpad/2:2:9\n"
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.URIError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html new file mode 100644 index 0000000000..4dd9c5113e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html @@ -0,0 +1,88 @@ +--- +title: URIError.prototype +slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype +tags: + - Error + - JavaScript + - URIError + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +--- +
{{JSRef}}
+ +

Властивість URIError.prototype є прототипом для конструктора {{jsxref("URIError")}}.

+ +

Опис

+ +

Всі екземпляри {{jsxref("URIError")}} успадковуються від URIError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
URIError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "URIError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("URIError")}} повинен мати власну властивість message, у SpiderMonkey, він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "URIError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("URIError")}} не містить власних методів, екземпляри {{jsxref("URIError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як  NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як  NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як  NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.URIError")}}

+
+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/epsilon/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/epsilon/index.html" new file mode 100644 index 0000000000..18655cd15d --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/epsilon/index.html" @@ -0,0 +1,67 @@ +--- +title: Number.EPSILON +slug: Web/JavaScript/Reference/Global_Objects/Число/EPSILON +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Властивість + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON +--- +
{{JSRef}}
+ +

Властивість Number.EPSILON відображає різницю між 1 та найменшим числом із рухомою крапкою, що більше за 1.

+ +

Для доступу до цієї статичної властивості не потрібно створювати об'єкт {{jsxref("Число","Number")}} (використовуйте Number.EPSILON).

+ +
{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Властивість EPSILON має значення, близьке до 2.2204460492503130808472633361816E-16, або ж 2-52.

+ +

Поліфіл

+ +
if (Number.EPSILON === undefined) {
+    Number.EPSILON = Math.pow(2, -52);
+}
+ +

Приклади

+ +

Перевірка рівності

+ +
x = 0.2;
+y = 0.3;
+z = 0.1;
+equal = (Math.abs(x - y + z) < Number.EPSILON);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.EPSILON")}}

+ +

Дивіться також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/index.html" new file mode 100644 index 0000000000..44ee101d87 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/index.html" @@ -0,0 +1,186 @@ +--- +title: Number +slug: Web/JavaScript/Reference/Global_Objects/Число +tags: + - JavaScript + - Number + - Довідка + - Клас +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +
{{JSRef}}
+ +

Об'єкт Number у JavaScript — це об'єкт-обгортка, що дозволяє працювати з числовими значеннями, такими як 37 чи -9.25.

+ +

Конструктор Number містить константи та методи для роботи з числами. Значення інших типів можуть бути перетворені на числа за допомогою функції Number().

+ +

Тип Number у JavaScript є 64-бітним значенням подвійної точності формату IEEE 754, як double у Java чи у C#. Це означає, що воно може відображати дробові значення, але існують певні обмеження на те, що воно може зберігати. Тип Number зберігає лише близько 17 десяткових знаків точності; числа підлягають округленню. Найбільше значення, яке може зберігати Number, дорівнює приблизно 1.8×10308. Числа за межами цього значення замінюються на спеціальну числову константу {{jsxref("Infinity")}}.

+ +

Числові літерали, такі як 37, у коді JavaScript є числами з рухомою крапкою, а не цілими числами. Не існує окремого цілочисельного типу у звичайному повсякденному використанні. (JavaScript нині має тип {{jsxref("BigInt")}}, але він був створений не того, щоб замінити Number у повсякденному використанні. 37 досі належить до типу Number, а не до BigInt.)

+ +

Числа також можна виразити у таких літеральних формах, як 0b1010o130x0A. Дізнайтесь більше щодо лексичної граматики чисел тут.

+ +

Опис

+ +

При використанні в якості функції, Number(value) перетворює рядок чи інше значення на тип Number. Якщо значення не можна перетворити, повертається {{jsxref("NaN")}}.

+ +

Літеральний синтаксис

+ +
123    // сто двадцять три
+123.0  // те саме
+123 === 123.0  // true
+ +

Синтаксис функції

+ +
Number('123')  // вертає число 123
+Number('123') === 123  // true
+
+Number("коник")    // NaN
+Number(undefined)  // NaN
+ +

Конструктор

+ +
+
Number()
+
Створює нове значення Number.
+
+ +

Статичні властивості

+ +
+
{{jsxref("Число.EPSILON", "Number.EPSILON")}}
+
Найменша можлива різниця між двома числами.
+
{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}
+
Найбільше безпечне ціле число у JavaScript (253 - 1).
+
{{jsxref("Число.MAX_VALUE", "Number.MAX_VALUE")}}
+
Найбільше додатне число, доступне для відображення.
+
{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}
+
Найменше безпечне ціле число у JavaScript (-(253 - 1)).
+
{{jsxref("Число.MIN_VALUE", "Number.MIN_VALUE")}}
+
Найменше додатне число, доступне для відображення, — найближче до нуля (за винятком самого нуля) додатне число.
+
{{jsxref("Число.NaN", "Number.NaN")}}
+
Спеціальне значення "{{glossary("NaN", "не число")}}".
+
{{jsxref("Число.NEGATIVE_INFINITY", "Number.NEGATIVE_INFINITY")}}
+
Спеціальне значення, що відображає від'ємну нескінченність. Повертається при переповненні.
+
{{jsxref("Число.POSITIVE_INFINITY", "Number.POSITIVE_INFINITY")}}
+
Спеціальне значення, що відображає нескінченність. Повертається при переповненні.
+
{{jsxref("Число.prototype", "Number.prototype")}}
+
Дозволяє додавати властивості до об'єкта Number.
+
+ +

Статичні методи

+ +
+
{{jsxref("Число.isNaN()", "Number.isNaN()")}}
+
Визначає, чи є передане значення NaN.
+
{{jsxref("Число.isFinite()", "Number.isFinite()")}}
+
Визначає, чи є передане значення скінченним числом.
+
{{jsxref("Число.isInteger()", "Number.isInteger()")}}
+
Визначає, чи є передане значення цілим числом.
+
{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}
+
Визначає, чи є передане значення безпечним цілим числом (число між -(253 - 1) та 253 - 1).
+
{{jsxref("Число.parseFloat()", "Number.parseFloat()")}}
+
Те саме, що й глобальна функція {{jsxref("parseFloat", "parseFloat()")}}.
+
{{jsxref("Число.parseInt()", "Number.parseInt()")}}
+
Те саме, що й глобальна функція {{jsxref("parseInt", "parseInt()")}}.
+
+ +

Методи екземплярів

+ +
+
{{jsxref("Число.prototype.toExponential()", "Number.prototype.toExponential(дробовіЦифри)")}}
+
Повертає рядок, що містить експоненціальний запис числа.
+
{{jsxref("Число.prototype.toFixed()", "Number.prototype.toFixed(цифри)")}}
+
Повертає рядок, що містить запис числа у форматі з нерухомою крапкою.
+
{{jsxref("Число.prototype.toLocaleString()", "Number.prototype.toLocaleString([мови [, параметри]])")}}
+
Повертає рядок, що містить узалежнений від мови запис числа. Заміщує метод {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Число.prototype.toPrecision()", "Number.prototype.toPrecision(точність)")}}
+
Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою крапкою або у експоненціальному форматі.
+
{{jsxref("Число.prototype.toString()", "Number.prototype.toString([основа])")}}
+
Повертає рядкове представлення наданого об'єкта у вказаній системі числення. Заміщує метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Число.prototype.valueOf()", "Number.prototype.valueOf()")}}
+
Повертає просте числове значення об'єкта. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.
+
+ +
+ +

Приклади

+ +

Використання об'єкта Number для присвоєння змінним числових значень

+ +

Наведений приклад використовує властивості об'єкта Number, щоб присвоїти кільком змінним числові значення:

+ +
const biggestNum     = Number.MAX_VALUE
+const smallestNum    = Number.MIN_VALUE
+const infiniteNum    = Number.POSITIVE_INFINITY
+const negInfiniteNum = Number.NEGATIVE_INFINITY
+const notANum        = Number.NaN
+
+ +

Діапазон цілих чисел для Number

+ +

У наступному прикладі наведено мінімальне та максимальне цілочисельне значення, які можуть бути відображені об'єктом Number (за детальною інформацією звертайтесь до стандарту ECMAScript, розділ 6.1.6 Тип Number):

+ +
const biggestInt = Number.MAX_SAFE_INTEGER   //  (253 - 1) =>  9007199254740991
+const smallestInt = Number.MIN_SAFE_INTEGER  // -(253 - 1) => -9007199254740991
+ +

При розборі даних, поданих у форматі JSON, цілі числа, що виходять за межі цього діапазону, можуть виявитися пошкодженими, коли аналізатор JSON примусово перетворює їх у тип Number.

+ +

Цьому можна запобігти використанням ({{jsxref("String","рядків")}}).

+ +

Більші числа можуть бути відображені за допомогою типу {{jsxref("BigInt")}}.

+ +

Використання Number для перетворення об'єкта Date

+ +

У наведеному прикладі об'єкт класу {{jsxref ("Date")}} перетворюється на числове значення за допомогою функції Number:

+ +
let d = new Date('December 17, 1995 03:24:00')
+console.log(Number(d))
+
+ +

Це виведе 819199440000.

+ +

Перетворення числових рядків та null на числа

+ +
Number('123')     // 123
+Number('123') === 123 /// true
+Number('12.3')    // 12.3
+Number('12.00')   // 12
+Number('123e-1')  // 12.3
+Number('')        // 0
+Number(null)      // 0
+Number('0x11')    // 17
+Number('0b11')    // 3
+Number('0o11')    // 9
+Number('foo')     // NaN
+Number('100a')    // NaN
+Number('-Infinity') //-Infinity
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.Number")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isfinite/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isfinite/index.html" new file mode 100644 index 0000000000..8379f3d5c3 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isfinite/index.html" @@ -0,0 +1,86 @@ +--- +title: Number.isFinite() +slug: Web/JavaScript/Reference/Global_Objects/Число/isFinite +tags: + - JavaScript + - Number + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +
{{JSRef}}
+ +

Метод Number.isFinite() визначає, чи є передане значення скінченним числом.

+ +
{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}
+ + + +

Синтаксис

+ +
Number.isFinite(value)
+ +

Параметри

+ +
+
value
+
Значення, яке треба перевірити на скінченність.
+
+ +

Значення, що повертається

+ +

Значення {{jsxref("Boolean")}}, що вказує, чи є надане значення скінченним числом.

+ +

Опис

+ +

У порівнянні з глобальною функцією {{jsxref("isFinite", "isFinite()")}}, цей метод не перетворює примусово значення параметра на число. Це означає, що тільки значення числового типу, які є скінченними, повернуть true.

+ +

Поліфіл

+ +
if (Number.isFinite === undefined) Number.isFinite = function(value) {
+    return typeof value === 'number' && isFinite(value);
+}
+
+ +

Приклади

+ +

Використання isFinite

+ +
Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false, дорівнювало б true з
+                            // глобальною функцією isFinite('0')
+Number.isFinite(null);      // false, дорівнювало б true з
+                            // глобальною функцією isFinite(null)
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.isFinite")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isinteger/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isinteger/index.html" new file mode 100644 index 0000000000..3cd4988a2b --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isinteger/index.html" @@ -0,0 +1,94 @@ +--- +title: Number.isInteger() +slug: Web/JavaScript/Reference/Global_Objects/Число/isInteger +tags: + - JavaScript + - Number + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger +--- +
{{JSRef}}
+ +

Метод Number.isInteger() визначає, чи є передане значення цілим числом.

+ +
{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}
+ + + +

Синтаксис

+ +
Number.isInteger(value)
+ +

Параметри

+ +
+
value
+
Значення для перевірки.
+
+ +

Повертає

+ +

Значення типу {{jsxref("Boolean")}}, що вказує, чи є надане значення цілим числом.

+ +

Опис

+ +

Якщо параметр є цілим числом, повертає true, інакше вертає false. Якщо значення дорівнює {{jsxref("NaN")}} або {{jsxref("Infinity")}}, повертає false. Цей метод також повертає true для чисел з плаваючою крапкою, які можуть бути представлені як цілі.

+ +

Поліфіл

+ +
Number.isInteger = Number.isInteger || function(value) {
+  return typeof value === 'number' &&
+    isFinite(value) &&
+    Math.floor(value) === value;
+};
+ +

Приклади

+ +

Використання isInteger

+ +
Number.isInteger(0);         // true
+Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(99999999999999999999999); // true
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(NaN);       // false
+Number.isInteger(Infinity);  // false
+Number.isInteger(-Infinity); // false
+Number.isInteger('10');      // false
+Number.isInteger(true);      // false
+Number.isInteger(false);     // false
+Number.isInteger([1]);       // false
+
+Number.isInteger(5.0);       // true
+Number.isInteger(5.000000000000001); // false
+Number.isInteger(5.0000000000000001); // true
+
+ +

Специфікації

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.isInteger")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isnan/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isnan/index.html" new file mode 100644 index 0000000000..c9c38ad05d --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isnan/index.html" @@ -0,0 +1,100 @@ +--- +title: Number.isNaN() +slug: Web/JavaScript/Reference/Global_Objects/Число/isNaN +tags: + - ECMAScript 2015 + - JavaScript + - Number + - isNaN + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN +--- +
{{JSRef}}
+ +

Метод Number.isNaN() визначає, чи є передане значення {{jsxref("NaN")}}, а його типом - {{jsxref("Число", "Number")}}. Це більш надійна версія оригіналу, глобального методу {{jsxref("isNaN", "isNaN()")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}
+ + + +

Синтаксис

+ +
Number.isNaN(value)
+ +

Параметри

+ +
+
value
+
Значення, що перевірятиметься на {{jsxref("NaN")}}.
+
+ +

Значення, що повертається

+ +

true, якщо надане значення є {{jsxref("NaN")}}, а його типом - {{jsxref("Число", "Number")}}; інакше, false.

+ +

Опис

+ +

Через те, що обидва оператори рівності, {{jsxref("Operators/Equality", "==")}} та {{jsxref("Operators/Strict_equality", "===")}}, повертають false при перевірці, чи {{jsxref("NaN")}} дорівнює {{jsxref("NaN")}}, виникла необхідність у функції Number.isNaN(). Ця ситуація відрізняється від усіх інших можливих порівнянь у JavaScript.

+ +

У порівнянні з глобальною функцією {{jsxref("isNaN", "isNaN()")}}, Number.isNaN() не має проблеми з примусовим приведенням параметра до числа. Це означає, що тепер стало безпечно передавати значення, які були б перетворені на {{jsxref("NaN")}}, але, насправді, не є значеннями {{jsxref("NaN")}}. Це також означає, що лише значення числового типу, які також є {{jsxref("NaN")}}, вертають true.

+ +

Поліфіл

+ +

Наступний код працює, тому що NaN є єдиним значенням у JavaScript, яке не дорівнює самому собі.

+ +
Number.isNaN = Number.isNaN || function isNaN(input) {
+    return typeof input === 'number' && input !== input;
+}
+
+ +

Приклади

+ +

Використання isNaN

+ +
Number.isNaN(NaN);        // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0);      // true
+
+// наприклад, це дорівнювало б true у глобальному методі isNaN()
+Number.isNaN('NaN');      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN('ляля');     // false
+
+// Це все вертає false
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN('37');
+Number.isNaN('37.37');
+Number.isNaN('');
+Number.isNaN(' ');
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}
+ +

Сумісність з веб-переглядачами

+ + + +
{{Compat("javascript.builtins.Number.isNaN")}}
+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/issafeinteger/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/issafeinteger/index.html" new file mode 100644 index 0000000000..8ff3f1fa81 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/issafeinteger/index.html" @@ -0,0 +1,95 @@ +--- +title: Number.isSafeInteger() +slug: Web/JavaScript/Reference/Global_Objects/Число/isSafeInteger +tags: + - ECMAScript 2015 + - JavaScript + - Number + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +--- +
{{JSRef}}
+ +

Метод Number.isSafeInteger() визначає, чи є надане значення безпечним цілим числом.

+ +
{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}
+ + + +

Безпечним цілим числом вважається ціле число, яке

+ + + +

Наприклад, 253 - 1 є безпечним цілим числом: воно може бути точно відображене, і жодне інше ціле число не округлюється до нього в будь-якому режимі округлення IEEE-754. Для контрасту, 253 не є безпечним цілим числом: воно може бути точно відображене у IEEE-754, але ціле число 253 + 1 не може бути безпосередньо відображене у IEEE-754, а, натомість, округлюється до 253 під час округлення до найближчого цілого та округлення до меншого за модулем. Безпечні цілі числа включають усі цілі числа від -(253 - 1) включно до 253 - 1 включно (± 9007199254740991 або ± 9,007,199,254,740,991).  

+ +

Робота зі значеннями, більшими чи меншими за ~9 квадрільйонів, з повною точністю вимагає використання бібліотеки для арифметики довільної точності. Дивіться Що необхідно знати кожному програмісту про арифметику чисел з рухомою крапкою, щоб дізнатись більше щодо відображення чисел з рухомою крапкою.

+ +

Для більших чисел розгляньте використання типу {{jsxref("BigInt")}}.

+ +

Синтаксис

+ +
Number.isSafeInteger(testValue)
+
+ +

Параметри

+ +
+
testValue
+
Значення, що перевірятиметься на відповідність безпечному цілому числу.
+
+ +

Значення, що повертається

+ +

Значення {{jsxref("Boolean")}}, яке вказує, чи є надане значення безпечним цілим числом.

+ +

Поліфіл

+ +
Number.isSafeInteger = Number.isSafeInteger || function (value) {
+   return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER;
+};
+
+ +

Приклади

+ +

Використання isSafeInteger

+ +
Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53));      // false
+Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger('3');                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.isSafeInteger")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_safe_integer/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_safe_integer/index.html" new file mode 100644 index 0000000000..c104719e79 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_safe_integer/index.html" @@ -0,0 +1,78 @@ +--- +title: Number.MAX_SAFE_INTEGER +slug: Web/JavaScript/Reference/Global_Objects/Число/MAX_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Властивість + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +--- +
{{JSRef}}
+ +

Стала Number.MAX_SAFE_INTEGER відображає найбільше безпечне ціле числове значення у JavaScript (253 - 1).

+ +

Для більших цілих значень використовуйте {{jsxref("BigInt")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Стала MAX_SAFE_INTEGER має значення 9007199254740991 (9,007,199,254,740,991 або ~9 квадриліонів). Причина в тому, що JavaScript використовує формат чисел з рухомою крапкою подвійної точності, як зазначено у IEEE 754, та може безпечно відображати числа лише в діапазоні між -(253 - 1) та 253 - 1.

+ +

"Безпечний" в даному контексті означає можливість точно відображати та коректно порівнювати цілі числа. Наприклад,  Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2 поверне true, що, з математичної точки зору, неправильно. Дивіться більше на сторінці {{jsxref("Number.isSafeInteger()")}}.

+ +

Це поле не існує у старих переглядачах. Його використання без перевірки його наявності, як ось Math.max(Number.MAX_SAFE_INTEGER, 2), видасть небажаний результат, такий як NaN.

+ +

У зв'язку з тим, що MAX_SAFE_INTEGER є статичною властивістю {{jsxref("Число","Number")}}, слід завжди викликати її як Number.MAX_SAFE_INTEGER, аніж як метод створеного вами об'єкта {{jsxref("Число","Number")}}.

+ +

Поліфіл

+ +
if (!Number.MAX_SAFE_INTEGER) {
+    Number.MAX_SAFE_INTEGER = 9007199254740991; // Math.pow(2, 53) - 1;
+}
+ +

Приклади

+ +

Значення, яке вертає MAX_SAFE_INTEGER

+ +
Number.MAX_SAFE_INTEGER // 9007199254740991
+
+ +

Числа, більші за безпечне ціле значення

+ +

Цей код поверне 2, тому що у числах з плаваючою крапкою значенням є кінцева десяткова "1", за винятком випадків денормалізованих чисел, таких як нуль.

+ +
Number.MAX_SAFE_INTEGER * Number.EPSILON; // 2
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}

+ +

Дивіться також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_value/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_value/index.html" new file mode 100644 index 0000000000..3280fa0cd8 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_value/index.html" @@ -0,0 +1,64 @@ +--- +title: Number.MAX_VALUE +slug: Web/JavaScript/Reference/Global_Objects/Число/MAX_VALUE +tags: + - JavaScript + - Number + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +--- +
{{JSRef}}
+ +

Властивість Number.MAX_VALUE відображає максимальне числове значення, доступне для відображення у JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Значення властивості MAX_VALUE приблизно дорівнює 1.79E+308, або 21024. Значення більші за MAX_VALUE, відображаються як {{jsxref("Infinity")}}.

+ +

Оскільки MAX_VALUE є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як Number.MAX_VALUE, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. 

+ +

Приклади

+ +

Використання MAX_VALUE

+ +

Наступний код перемножує два числових значення. Якщо результат менший чи дорівнює MAX_VALUE, викликається функція func1; інакше, викликається функція func2.

+ +
if (num1 * num2 <= Number.MAX_VALUE) {
+  func1();
+} else {
+  func2();
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.MAX_VALUE")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_safe_integer/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_safe_integer/index.html" new file mode 100644 index 0000000000..a8e0553753 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_safe_integer/index.html" @@ -0,0 +1,62 @@ +--- +title: Number.MIN_SAFE_INTEGER +slug: Web/JavaScript/Reference/Global_Objects/Число/MIN_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER +--- +
{{JSRef}}
+ +

Константа Number.MIN_SAFE_INTEGER відображає мінімальне безпечне ціле числове значення у JavaScript (-(253 - 1)).

+ +

Для відображення менших чисел, використовуйте {{jsxref("BigInt")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Константа MIN_SAFE_INTEGER має значення -9007199254740991 (-9,007,199,254,740,991 або близько -9 квадрильйонів). Причина в тому, що JavaScript використовує формат чисел з рухомою крапкою подвійної точності, як зазначено у IEEE 754, та може безпечно відображати числа лише в діапазоні між -(253 - 1) та 253 - 1.  Дивіться більше інформації у {{jsxref("Number.isSafeInteger()")}}.

+ +

Оскільки MIN_SAFE_INTEGER є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як Number.MIN_SAFE_INTEGER, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}.

+ +

Приклади

+ +

Використання MIN_SAFE_INTEGER

+ +
Number.MIN_SAFE_INTEGER // -9007199254740991
+-(Math.pow(2, 53) - 1)  // -9007199254740991
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_value/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_value/index.html" new file mode 100644 index 0000000000..83ded3444a --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_value/index.html" @@ -0,0 +1,66 @@ +--- +title: Number.MIN_VALUE +slug: Web/JavaScript/Reference/Global_Objects/Число/MIN_VALUE +tags: + - JavaScript + - Number + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +--- +
{{JSRef}}
+ +

Властивість Number.MIN_VALUE відображає найменше числове значення, доступне для відображення у JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/number-min-value.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Властивість MIN_VALUE - це число, максимально близьке до 0, а не найменше від'ємне значення, яке може відобразити JavaScript.

+ +

MIN_VALUE має значення, що приблизно дорівнює 5e-324. Значення, менші за MIN_VALUE приводяться до 0 ("зникнення порядку").

+ +

Оскільки MIN_VALUE є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як Number.MIN_VALUE, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}.

+ +

Приклади

+ +

Використання MIN_VALUE

+ +

Наступний код ділить одне числове значення на інше. Якщо результат більший чи дорівнює MIN_VALUE, викликається функція func1; інакше, викликається функція func2.

+ +
if (num1 / num2 >= Number.MIN_VALUE) {
+  func1();
+} else {
+  func2();
+}
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.MIN_VALUE")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/nan/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/nan/index.html" new file mode 100644 index 0000000000..10ad96c00a --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/nan/index.html" @@ -0,0 +1,59 @@ +--- +title: Number.NaN +slug: Web/JavaScript/Reference/Global_Objects/Число/NaN +tags: + - JavaScript + - Number + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN +--- +
{{JSRef}}
+ +

Властивість Number.NaN відображає "не число" (Not-A-Number). Є еквівалентом {{jsxref("NaN")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-nan.html")}}
+ +

Вам не потрібно створювати об'єкт {{jsxref("Число", "Number")}}, щоб звертатись до статичної властивості (використовуйте Number.NaN).

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Приклади

+ +

Перевірка на числове значення

+ +
function sanitise(x) {
+  if (isNaN(x)) {
+    return Number.NaN;
+  }
+  return x;
+}
+ +

Перевірка на NaN

+ +

Дивіться Перевірку на NaN на сторінці NaN.

+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.NaN")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/negative_infinity/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/negative_infinity/index.html" new file mode 100644 index 0000000000..aeab7dfa10 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/negative_infinity/index.html" @@ -0,0 +1,82 @@ +--- +title: Number.NEGATIVE_INFINITY +slug: Web/JavaScript/Reference/Global_Objects/Число/NEGATIVE_INFINITY +tags: + - JavaScript + - Number + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +--- +
{{JSRef}}
+ +

Властивість Number.NEGATIVE_INFINITY відображає значення від'ємної нескінченності.

+ +
{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Значення Number.NEGATIVE_INFINITY є таким самим, як від'ємне значення властивості {{jsxref("Infinity")}} глобального об'єкта.

+ +

Це значення поводиться дещо інакше, ніж математична нескінченність:

+ + + +

Ви можете скористатись властивістю Number.NEGATIVE_INFINITY, щоб позначити помилку в умові, яка повертає скінченне число у випадку успіху. Зауважте, однак, що метод {{jsxref("isFinite")}} в цьому випадку був би більш доречним.

+ +

Оскільки NEGATIVE_INFINITY є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як Number.NEGATIVE_INFINITY, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. 

+ +

Приклади

+ +

Використання NEGATIVE_INFINITY

+ +

У наступному прикладі змінній smallNumber присвоюється значення, яке є меншим за мінімальне. Коли виконується інструкція {{jsxref("Statements/if...else", "if")}}, smallNumber має значення -Infinity, отже smallNumber присвоюється більш кероване значення для продовження.

+ +
var smallNumber = (-Number.MAX_VALUE) * 2;
+
+if (smallNumber === Number.NEGATIVE_INFINITY) {
+  smallNumber = returnFinite();
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/number/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/number/index.html" new file mode 100644 index 0000000000..c1dd069e56 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/number/index.html" @@ -0,0 +1,63 @@ +--- +title: Number() constructor +slug: Web/JavaScript/Reference/Global_Objects/Число/Number +tags: + - JavaScript + - Number + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Number/Number +--- +
{{JSRef}}
+ +

Конструктор Number() створює об'єкт {{jsxref("Число", "Number")}}.

+ +

Синтаксис

+ +
new Number(value)
+
+ +

Параметри

+ +
+
value
+
Числове значення об'єкта, що створюється.
+
+ +

Приклади

+ +

Створення об'єктів Number

+ +
const a = new Number('123'); // a === 123 дорівнює false
+const b = Number('123');     // b === 123 дорівнює true
+a instanceof Number;         // дорівнює true
+b instanceof Number;         // дорівнює false
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number-constructor', 'Number constructor')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.Number")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parsefloat/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parsefloat/index.html" new file mode 100644 index 0000000000..81d55dcfc1 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parsefloat/index.html" @@ -0,0 +1,88 @@ +--- +title: Number.parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/Число/parseFloat +tags: + - ECMAScript 2015 + - JavaScript + - Number + - метод + - число +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat +--- +
{{JSRef}}
+ +

Метод Number.parseFloat() розбирає аргумент та повертає число з плаваючою крапкою. Якщо число неможливо розібрати з аргумента, повертає {{jsxref("NaN")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}
+ + + +

Синтаксис

+ +
Number.parseFloat(string)
+ +

Параметри

+ +
+
string
+
Значення, яке треба розібрати. Якщо цей аргумент не є рядком, то він приводиться до рядка за допомогою абстрактної операції ToString. {{glossary("whitespace", "Пробільний символ")}} на початку цього аргументу ігнорується.
+
+ +

Значення, що повертається

+ +

Число з плаваючою крапкою з наданого рядка string.

+ +

Або {{jsxref("NaN")}}, коли перший непробільний символ не може бути перетворений на число.

+ +

Поліфіл

+ +
if (Number.parseFloat === undefined) {
+  Number.parseFloat = parseFloat;
+}
+
+ +

Приклади

+ +

Number.parseFloat проти parseFloat

+ +

Цей метод має таку саму функціональність, як і глобальна функція {{jsxref("parseFloat", "parseFloat()")}}:

+ +
Number.parseFloat === parseFloat; // true
+
+ +

Цей метод також є частиною ECMAScript 2015. (Його метою є модуляризація глобальних елементів.)

+ +

Дивіться більше подробиць та приклади у {{jsxref("parseFloat", "parseFloat()")}}.

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікації
{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.parseFloat")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parseint/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parseint/index.html" new file mode 100644 index 0000000000..8bb6c28c80 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parseint/index.html" @@ -0,0 +1,83 @@ +--- +title: Number.parseInt() +slug: Web/JavaScript/Reference/Global_Objects/Число/parseInt +tags: + - ECMAScript 2015 + - JavaScript + - Number + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt +--- +
{{JSRef}}
+ +

Метод Number.parseInt() розбирає рядковий аргумент та повертає ціле число з вказаною основою системи числення.

+ +
{{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}}
+ + + +

Синтаксис

+ +
Number.parseInt(string,[ radix])
+ +

Параметри

+ +
+
+
string
+
Значення, яке розбиратиметься. Якщо цей аргумент не є рядком, то він приводиться до рядка за допомогою абстрактної операції ToString. Пробільний символ на початку цього аргументу ігнорується.
+
radix {{optional_inline}}
+
Ціле число між 2 та 36, яке вказує основу (в математичних системах числення) значення string. Будьте обережні — вона не дорівнює за замовчуванням 10!
+
+
+ +

Значення, що повертається

+ +

Ціле число, отримане з наданого рядка string.

+ +

Якщо значення radix менше за 2 чи більше за 36, а перший непробільний символ не може бути перетворений на число, повертається {{jsxref("NaN")}}.

+ +

Поліфіл

+ +
if (Number.parseInt === undefined) {
+    Number.parseInt = window.parseInt
+}
+
+ +

Приклади

+ +

Number.parseInt проти parseInt

+ +

Цей метод має таку саму функціональність, як і глобальна функція {{jsxref("parseInt", "parseInt()")}}:

+ +
Number.parseInt === parseInt // true
+ +

і є частиною ECMAScript 2015 (його метою є модуляризація глобальних елементів). Будь ласка, дивіться більше подробиць та прикладів у {{jsxref("parseInt", "parseInt()")}}.

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.parseInt")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/positive_infinity/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/positive_infinity/index.html" new file mode 100644 index 0000000000..5c22467fb7 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/positive_infinity/index.html" @@ -0,0 +1,82 @@ +--- +title: Number.POSITIVE_INFINITY +slug: Web/JavaScript/Reference/Global_Objects/Число/POSITIVE_INFINITY +tags: + - JavaScript + - Number + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +--- +
{{JSRef}}
+ +

Властивість Number.POSITIVE_INFINITY відображає значення позитивної нескінченності.

+ +
{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Значення Number.POSITIVE_INFINITY є таким самим, як і значення властивості глобального об'єкта {{jsxref("Infinity")}}.

+ +

Це значення поводиться дещо інакше, ніж математична нескінченність:

+ + + +

Ви можете скористатись властивістю Number.POSITIVE_INFINITY, щоб позначити помилку в умові, яка вертає скінченне число у випадку успіху. Зауважте, однак, що метод {{jsxref("isFinite")}} в цьому випадку більш доречний.

+ +

Оскільки POSITIVE_INFINITY є статичною властивістю об'єкта {{jsxref("Число", "Number")}}, її завжди слід використовувати як Number.POSITIVE_INFINITY, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. 

+ +

Приклади

+ +

Використання POSITIVE_INFINITY

+ +

У наступному прикладі змінній bigNumber присвоюється значення, яке є більшим за максимальне. Коли виконується інструкція {{jsxref("Statements/if...else", "if")}}, bigNumber має значення Infinity, а отже, bigNumber присвоюється більш кероване значення для продовження.

+ +
var bigNumber = Number.MAX_VALUE * 2;
+
+if (bigNumber == Number.POSITIVE_INFINITY) {
+  bigNumber = returnFinite();
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/prototype/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/prototype/index.html" new file mode 100644 index 0000000000..82c904e1ea --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/prototype/index.html" @@ -0,0 +1,89 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Число/prototype +tags: + - JavaScript + - Number + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +
{{JSRef}}
+ +

Властивість Number.prototype являє собою прототип для конструктора класу {{jsxref("Global_Objects/Number", "Number")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Кожен примірник класу {{jsxref("Global_Objects/Number", "Number")}} успадковує властивості й методи з Number.prototype. Зміни, внесені до прототипа, позначаться на всіх об'єктах, що є примірниками класу {{jsxref("Global_Objects/Number", "Number")}}.

+ +

Властивості

+ +
+
Number.prototype.constructor
+
Повертає функцію, що створила цей примірник об'єкта. Типово це об'єкт {{jsxref("Global_Objects/Number", "Number")}}, який водночас є і функцією.
+
+ +

Методи

+ +
+
{{jsxref("Number.prototype.toExponential()")}}
+
Повертає рядок, що містить експоненціальний запис числа.
+
{{jsxref("Number.prototype.toFixed()")}}
+
Повертає рядок, що містить запис числа у форматі з нерухомою комою.
+
{{jsxref("Number.prototype.toLocaleString()")}}
+
Повертає рядок, що містить узалежнений від мови запис числа. Перекриває метод {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Number.prototype.toPrecision()")}}
+
Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою комою чи експоненціальний.
+
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає рядок, що містить код мовою JavaScript, який створює об'єкт класу {{jsxref("Global_Objects/Number", "Number")}} з відповідним значенням. Цей код можна використати для створення нового об'єкта. Перекриває метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Number.prototype.toString()")}}
+
Повертає рядок, що містить числовий запис значення об'єкта в зазначеній системі числення. Перекриває метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Number.prototype.valueOf()")}}
+
Повертає {{Glossary("Primitive", "просте числове значення")}} об'єкта. Перекриває метод {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.prototype")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toexponential/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toexponential/index.html" new file mode 100644 index 0000000000..9896ee2c95 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toexponential/index.html" @@ -0,0 +1,89 @@ +--- +title: Number.prototype.toExponential() +slug: Web/JavaScript/Reference/Global_Objects/Число/toExponential +tags: + - JavaScript + - Number + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential +--- +
{{JSRef}}
+ +

Метод toExponential() повертає рядок, що відображає об'єкт Number в експоненціальному позначенні.

+ +
{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}
+ + + +

Синтаксис

+ +
numObj.toExponential([fractionDigits])
+ +

Параметри

+ +
+
fractionDigits
+
Необов'язковий параметр. Ціле число, яке визначає кількість цифр після десяткової крапки. За замовчуванням використовується стільки цифр, скільки необхідно для відображення числа.
+
+ +

Значення, що повертається

+ +

Рядок, що відображає об'єкт {{jsxref("Число", "Number")}} в експоненційному позначенні, з однією цифрою перед десятковою крапкою, округлене до fractionDigits цифр після крапки. 

+ +

Винятки

+ +
+
{{jsxref("RangeError")}}
+
Якщо значення fractionDigits занадто маленьке або занадто велике. Значення між 0 і 20, включно, не спричинять {{jsxref("RangeError")}}. Також реалізації можуть підтримувати більші та менші значення.
+
{{jsxref("TypeError")}}
+
Якщо цей метод викликається на об'єкті, який не є об'єктом {{jsxref("Число", "Number")}}.
+
+ +

Опис

+ +

Якщо аргумент fractionDigits не вказаний, кількість цифр після десяткової крапки за замовчуванням дорівнює кількості цифр, необхідній для унікального відображення значення.

+ +

Якщо ви використовуєте метод toExponential() на числовому літералі, і цей літерал не має експоненціального показника та десяткової крапки, залиште пробіл(и) перед крапкою, що передує виклику методу, щоб запобігти її інтерпретації як десяткової крапки.

+ +

Якщо число має більше цифр, ніж вимагає параметр fractionDigits, число округлюється до найближчого числа, представленого цифрами fractionDigits. Дивіться приклад округлення в описі методу {{jsxref("Number.prototype.toFixed", "toFixed()")}}, який також застосовується у toExponential().

+ +

Приклади

+ +

Використання toExponential

+ +
var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // виводить 7.71234e+1
+console.log(numObj.toExponential(4)); // виводить 7.7123e+1
+console.log(numObj.toExponential(2)); // виводить 7.71e+1
+console.log(77.1234.toExponential()); // виводить 7.71234e+1
+console.log(77 .toExponential());     // виводить 7.7e+1
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.toExponential")}}

+ +

Дивіться також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tofixed/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tofixed/index.html" new file mode 100644 index 0000000000..a36e157a44 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tofixed/index.html" @@ -0,0 +1,95 @@ +--- +title: Number.prototype.toFixed() +slug: Web/JavaScript/Reference/Global_Objects/Число/toFixed +tags: + - JavaScript + - Number + - Довідка + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed +--- +
{{JSRef}}
+ +

Метод toFixed() форматує число, використовуючи позначення з нерухомою крапкою.

+ +
{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}
+ + + +

Синтаксис

+ +
numObj.toFixed([digits])
+ +

Параметри

+ +
+
digits {{optional_inline}}
+
Кількість цифр після десяткової крапки; це має бути значення між 0 та 20, включно, а реалізації можуть за бажанням підтримувати ширший діапазон значень. Якщо цей аргумент пропущений, він вважається рівним 0.
+
+ +

Значення, що повертається

+ +

Рядок, що відображає надане число у форматі числа з нерухомою крапкою.

+ +

Винятки

+ +
+
{{jsxref("RangeError")}}
+
Якщо значення digits надто маленьке чи надто велике. Значення між 0 та 100, включно, не спричинять {{jsxref("RangeError")}}. Реалізаціям дозвонено підтримувати більші та менші значення, за вибором.
+
{{jsxref("TypeError")}}
+
Якщо цей метод вкликається на об'єкті, який не є об'єктом {{jsxref("Число", "Number")}}.
+
+ +

Опис

+ +

toFixed() вертає рядкове представлення об'єкта numObj, яке не використовує експоненціальне позначення і має рівно digits цифр після десяткової позиції. Число округлюється за необхідності, а дробова частина заповнюється нулями, якщо це необхідно для досягнення необхідної довжини. Якщо абсолютне значення numObj більше або дорівнює 1e+21, цей метод просто викликає {{jsxref("Number.prototype.toString()")}} та повертає рядок у експоненціальному позначенні.

+ +
+

Застереження: Числа з рухомою крапкою не здатні точно відображати усі десяткові числа у двійковому представленні. Це може призвести до неочікуваних результатів, наприклад 0.1 + 0.2 === 0.3, що вертає false .

+
+ +

Приклади

+ +

Використання toFixed

+ +
let numObj = 12345.6789
+
+numObj.toFixed()       // Вертає '12346': зверніть увагу на округлення, немає дробової частини
+numObj.toFixed(1)      // Вертає '12345.7': зверніть увагу на округлення
+numObj.toFixed(6)      // Вертає '12345.678900': зверніть увагу на додані нулі
+(1.23e+20).toFixed(2)  // Вертає '123000000000000000000.00'
+(1.23e-10).toFixed(2)  // Вертає '0.00'
+2.34.toFixed(1)        // Вертає '2.3'
+2.35.toFixed(1)        // Вертає '2.4'. Зауважте, округлюється вгору
+2.55.toFixed(1)        // Вертає '2.5'. Зауважте, округлюється вниз - дивіться застереження вище
+-2.34.toFixed(1)       // Вертає -2.3 (через пріоритет операторів, від'ємні числові літерали не повертають рядок...)
+(-2.34).toFixed(1)     // Вертає '-2.3'
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.toFixed")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tolocalestring/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tolocalestring/index.html" new file mode 100644 index 0000000000..a65659d7de --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tolocalestring/index.html" @@ -0,0 +1,154 @@ +--- +title: Number.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Число/toLocaleString +tags: + - JavaScript + - Number + - Інтернаціоналізація + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +--- +
{{JSRef}}
+ +

Метод toLocaleString() повертає рядок, що відображає число у відповідності до налаштувань мови.

+ +
{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}
+ + + +

Синтаксис

+ +
numObj.toLocaleString([locales [, options]])
+ +

Параметри

+ +

Аргументи locales та options налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи locales та options, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.

+ +
Дивіться конструктор Intl.NumberFormat(), щоб дізнатись подробиці щодо цих параметрів та їхнього використання.
+ +

Значення, що повертається

+ +

Рядок, що відображає число у відповідності до налаштувань мови.

+ +

Швидкодія

+ +

При форматуванні великої кількості чисел краще створити об'єкт {{jsxref("NumberFormat")}} та використовувати функцію, надану його властивістю {{jsxref("NumberFormat.format")}}.

+ +

Приклади

+ +

Використання toLocaleString

+ +

При загальному використанні, без зазначення локалі, повертається рядок у мовному форматі, що стоїть за замовчуванням та з початковими параметрами.

+ +
var number = 3500;
+
+console.log(number.toLocaleString()); // Відображає "3,500" у форматі U.S. English
+
+ +

Перевірка підтримки аргументів locales та options

+ +

Аргументи locales та options ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у ES5.1 та новіших реалізаціях можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("Global_Objects/RangeError", "RangeError")}}:

+ +
function toLocaleStringSupportsLocales() {
+  var number = 0;
+  try {
+    number.toLocaleString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+
+ +

До ES5.1, реалізації не були зобов'язані викидати виняток з помилкою діапазону, якщо toLocaleString викликався з аргументами.

+ +

Перевірка, яка працює в усіх хостах, в тому числі тих, що підтримують ECMA-262 до версії 5.1, полягає в безпосередньому тестуванні функцій, визначених у ECMA-402 як такі, що зобов'язані підтримувати регіональні налаштування для Number.prototype.toLocaleString:

+ +
function toLocaleStringSupportsOptions() {
+  return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function');
+}
+
+ +

Цей код перевіряє наявність глобального об'єкта Intl, перевіряє, що він не дорівнює null та що він має властивість NumberFormat, яка є функцією.

+ +

Використання locales

+ +

Цей приклад демонструє деякі варіації локалізованих форматів чисел. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу locales:

+ +
var number = 123456.789;
+
+// В німецькій десятковим роздільником є кома, а крапка розділяє тисячі
+console.log(number.toLocaleString('de-DE'));
+// → 123.456,789
+
+// Арабська у більшості арабськомовних країн використовує Індо-арабські цифри
+console.log(number.toLocaleString('ar-EG'));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// Індія використовує роздільники тисячі/лакх/крор
+console.log(number.toLocaleString('en-IN'));
+// → 1,23,456.789
+
+// ключ розширення nu налаштовує систему нумерації, наприклад, китайську десяткову
+console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六.七八九
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(number.toLocaleString(['ban', 'id']));
+// → 123.456,789
+ +

Використання options

+ +

Результат методу toLocaleString можна налаштувати за допомогою аргументу options:

+ +
var number = 123456.789;
+
+// налаштування формату валюти
+console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456,79 €
+
+// японська єна не використовує дробові розряди
+console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ¥123,457
+
+// обмежити трьома значущими цифрами
+console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,000
+
+// Використовувати мову системи з параметрами для форматування чисел
+var num = 30000.65;
+console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+// → "30,000.65" де мова системи англійська, або
+// → "30.000,65" де мова системи німецька, або
+// → "30 000,65" де мова системи французька
+
+ +

Специфікації

+ + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}
{{SpecName('ES Int Draft', '#sup-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.toLocaleString")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toprecision/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toprecision/index.html" new file mode 100644 index 0000000000..3c0ecefc4a --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toprecision/index.html" @@ -0,0 +1,88 @@ +--- +title: Number.prototype.toPrecision() +slug: Web/JavaScript/Reference/Global_Objects/Число/toPrecision +tags: + - JavaScript + - Number + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +--- +
{{JSRef}}
+ +

Метод toPrecision() вертає рядкове відображення об'єкта {{jsxref("Число", "Number")}} з вказаною точністю.

+ +
{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}
+ +

Синтаксис

+ +
numObj.toPrecision([precision])
+ +

Параметри

+ +
+
precision {{optional_inline}}
+
Ціле число, що вказує кількість значущих цифр.
+
+ +

Значення, що повертається

+ +

Рядок, що відображає об'єкт {{jsxref("Число", "Number")}} у форматі з нерухомою крапкою або експоненціальному форматі, округлений до кількості значущих цифр precision. Дивіться обговорення округлення у описі методу {{jsxref("Number.prototype.toFixed()")}}, яке також застосовується в методі toPrecision().

+ +

Якщо аргумент precision не вказаний, метод поводиться як {{jsxref("Number.prototype.toString()")}}. Якщо аргумент precision не є цілочисельним значенням, воно округлюється до найближчого цілого числа.

+ +

Винятки

+ +
+
{{jsxref("Global_Objects/RangeError", "RangeError")}}
+
Якщо значення precision не знаходиться в діапазоні між 1 та 100 (включно), викидається {{jsxref("RangeError")}}. Реалізаціям дозволено підтримувати також більші та менші значення. ECMA-262 лише вимагає точності до 21 значущої цифри.
+
+ +

Приклади

+ +

Використання toPrecision

+ +
let numObj = 5.123456
+
+console.log(numObj.toPrecision())    // виводить '5.123456'
+console.log(numObj.toPrecision(5))   // виводить '5.1235'
+console.log(numObj.toPrecision(2))   // виводить '5.1'
+console.log(numObj.toPrecision(1))   // виводить '5'
+
+numObj = 0.000123
+
+console.log(numObj.toPrecision())    // виводить '0.000123'
+console.log(numObj.toPrecision(5))   // виводить '0.00012300'
+console.log(numObj.toPrecision(2))   // виводить '0.00012'
+console.log(numObj.toPrecision(1))   // виводить '0.0001'
+
+// зауважте, що в деяких обставинах може повернутись експоненціальний запис
+console.log((1234.5).toPrecision(2)) // виводить '1.2e+3'
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.toPrecision")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tosource/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tosource/index.html" new file mode 100644 index 0000000000..55a86a9972 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tosource/index.html" @@ -0,0 +1,54 @@ +--- +title: Number.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Число/toSource +tags: + - JavaScript + - Number + - застарілий + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource +--- +
{{JSRef}} {{obsolete_header}}
+ +

Метод toSource() вертає рядкове представлення першокоду об'єкта.

+ +

Синтаксис

+ +
numObj.toSource()
+Number.toSource()
+ +

Значення, що вертається

+ +

Рядкове представлення першокоду об'єкта.

+ +

Приклади

+ +

Вбудована функція

+ +

Для вбудованого об'єкта {{jsxref("Число", "Number")}}, toSource() вертає наступний рядок, який вказує, що першокод недоступний:

+ +
function Number() {
+    [native code]
+}
+
+ +

Для екземплярів {{jsxref("Число", "Number")}}, toSource() вертає рядкове представлення першокоду.

+ +

Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді.

+ +

Специфікації

+ +

Не є частиною жодного стандарту.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.toSource")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tostring/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tostring/index.html" new file mode 100644 index 0000000000..dcd4d82bb0 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tostring/index.html" @@ -0,0 +1,97 @@ +--- +title: Number.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Число/toString +tags: + - JavaScript + - Number + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString +--- +
{{JSRef}}
+ +

Метод toString() вертає рядкове представлення вказаного об'єкта {{jsxref("Число", "Number")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-tostring.html")}}
+ + + +

Синтаксис

+ +
numObj.toString([radix])
+ +

Параметри

+ +
+
radix
+
Необов'язковий. Ціле число в діапазоні від 2 до 36, яке вказує основу системи числення для відображення чисел.
+
+ +

Значення, що вертається

+ +

Рядкове представлення вказаного об'єкта {{jsxref("Число", "Number")}}.

+ +

Винятки

+ +
+
{{jsxref("RangeError")}}
+
Якщо методу toString() надано основу, меншу за 2 чи більшу за 36, викидається {{jsxref("RangeError")}}.
+
+ +

Опис

+ +

Об'єкт {{jsxref("Число", "Number")}} заміщує метод toString() об'єкта {{jsxref("Object")}}. (Він не успадковує {{jsxref("Object.prototype.toString()")}}). Для об'єктів {{jsxref("Число", "Number")}}, метод toString() вертає рядкове представлення об'єкта у вказаній системі числення.

+ +

Метод toString() розбирає перший аргумент та намагається повернути рядкове представлення числа з вказаною основою radix. Для основ, більших за 10, літери алфавіту вказують числа, більші за 9. Наприклад, для шістнадцяткових чисел (основа 16) використовуються літери від a до f.

+ +

Якщо аргумент radix не вказаний, основа вважається рівною 10.

+ +

Якщо значення numObj від'ємне, знак зберігається. Це відбувається, навіть якщо основа дорівнює 2; повернений рядок - це додатне двійкове представлення числа numObj зі знаком - попереду, а не numObj у форматі доповняльного коду.

+ +

Якщо numObj не є цілим числом, знак 'крапка' використовується для відділення десяткових знаків.

+ +

Приклади

+ +

Використання toString

+ +
let count = 10
+
+console.log(count.toString())    // виводить '10'
+console.log((17).toString())     // виводить '17'
+console.log((17.2).toString())   // виводить '17.2'
+
+let x = 6
+
+console.log(x.toString(2))       // виводить '110'
+console.log((254).toString(16))  // виводить 'fe'
+
+console.log((-10).toString(2))   // виводить '-1010'
+console.log((-0xff).toString(2)) // виводить '-11111111'
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.toString")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/valueof/index.html" "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/valueof/index.html" new file mode 100644 index 0000000000..9ec495bfa3 --- /dev/null +++ "b/files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/valueof/index.html" @@ -0,0 +1,67 @@ +--- +title: Number.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Число/valueOf +tags: + - JavaScript + - Number + - Довідка + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf +--- +
{{JSRef}}
+ +

Метод valueOf() вертає загорнуте примітивне значення об'єкта {{jsxref("Число", "Number")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-valueof.html")}}
+ + + +

Синтаксис

+ +
numObj.valueOf()
+ +

Значення, що вертається

+ +

Число, яке відображає примітивне значення вказаного об'єкта {{jsxref("Число", "Number")}}.

+ +

Опис

+ +

Цей метод, зазвичай, викликається внутрішньо у JavaScript, а не явно у коді.

+ +

Приклади

+ +

Використання valueOf

+ +
let numObj = new Number(10)
+console.log(typeof numObj)  // object
+
+let num = numObj.valueOf()
+console.log(num)            // 10
+console.log(typeof num)     // number
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.valueOf")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/index.html b/files/uk/web/javascript/reference/index.html new file mode 100644 index 0000000000..cffa5c202b --- /dev/null +++ b/files/uk/web/javascript/reference/index.html @@ -0,0 +1,50 @@ +--- +title: Довідник з JavaScript +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference +--- +
{{JsSidebar}}
+ +

This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference.

+ +

Глобальні Об'єкти

+ +

This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}
+ +

Statements

+ +

This chapter documents all the JavaScript statements and declarations.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}
+ +

Expressions and operators

+ +

This chapter documents all the JavaScript expressions and operators.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}
+ +

Фукції

+ +

This chapter documents how to work with JavaScript functions to develop your applications.

+ + + +

Additional reference pages

+ + diff --git a/files/uk/web/javascript/reference/lexical_grammar/index.html b/files/uk/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..577a92f94d --- /dev/null +++ b/files/uk/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,673 @@ +--- +title: Лексична граматика +slug: Web/JavaScript/Reference/Lexical_grammar +tags: + - JavaScript + - Посібник + - ключове слово + - лексична граматика + - літерал +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +
{{JsSidebar("More")}}
+ +

Ця стаття описує лексичну граматику JavaScript. Текст коду скриптів ECMAScript сканується зліва направо та перетворюється на послідовність вхідних елементів, якими є токени, керівні символи, символи розриву рядка, коментарі або пробільні символи. ECMAScript також визначає певні ключові слова та має правила для автоматичної вставки крапки з комою для завершення інструкцій.

+ +

Керівні символи

+ +

Керівні символи не мають візуального відображення, але використовуються для керування інтерпретацією тексту.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Керівні символи Юнікоду
Код символаНазваСкороченняОпис
U+200CРоз'єднувач нульової ширини
+ (Zero width non-joiner)
<ZWNJ>Розташовується між символами, щоб запобігти об'єднанню їх у лігатури у певних мовах (Вікіпедія).
U+200DОб'єднувач нульової ширини
+ (Zero width joiner)
<ZWJ>Розташовується між символами, які інакше не були б об'єднані, щоб відобразити символи у їхній об'єднаній формі у певних мовах (Вікіпедія).
U+FEFFМаркер порядку байтів
+ (Byte order mark)
<BOM>Використовується на початку скрипта, щоб позначити його як Юнікод, та для позначення порядку байтів (Вікіпедія).
+ +

Пробільні символи

+ +

Пробільні символи покращують читабельність тексту коду та відділяють токени один від одного. Ці символи зазвичай не є обов'язковими для функціональності коду. Часто використовують інструменти мініфікації для прибирання пробільних символів, щоб зменшити кількість даних, які необхідно передати.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Пробільні символи
Код символаНазваСкороченняОписЕкранована послідовність
U+0009Табуляція символа
+ (Character tabulation)
<HT>Горизонтальна табуляція\t
U+000BТабуляція рядка
+ (Line tabulation)
<VT>Вертикальна табуляція\v
U+000CЗміна сторінки
+ (Form feed)
<FF>Керівний символ розриву сторінки (Вікіпедія).\f
U+0020Пробіл
+ (Space)
<SP>Звичайний пробіл
U+00A0Нерозривний пробіл
+ (No-break space)
<NBSP>Звичайний пробіл, але відсутня позиція, де можливий розрив рядка
ІншіІнші пробільні символи Юнікоду<USP>Пробіли Юнікоду на Вікіпедії
+ +

Символи розриву рядка

+ +

На додачу до пробільних символів, символи розриву рядка використовуються для покращення читабельності тексту коду. Однак, у деяких випадках символи розриву рядка можуть вплинути на виконання коду JavaScript, оскільки існують декілька місць, де вони заборонені. Символи розриву рядка також впливають на процес автоматичної вставки крапки з комою. Символи розриву рядка відповідають класу \s у регулярних виразах.

+ +

Лише наступні коди символів Юнікоду сприймаються як символи розриву рядка у ECMAScript, інші символи розриву сприймаються як пробільні (наприклад, символ Наступний рядок (Next Line), NEL, U+0085 вважається пробільним символом).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Символи розриву рядка
Код символаНазваСкороченняОписЕкранована послідовність
U+000AЗміна рядка
+ (Line Feed)
<LF>Символ нового рядка в системах UNIX.\n
U+000DПовернення каретки
+ (Carriage Return)
<CR>Символ нового рядка у Commodore та ранній системі Mac.\r
U+2028Роздільник рядків
+ (Line Separator)
<LS>Вікіпедія
U+2029Роздільник абзаців
+ (Paragraph Separator)
<PS>Вікіпедія
+ +

Коментарі

+ +

Коментарі використовуються для додавання приміток, зауваг, пропозицій чи застережень до коду JavaScript. Це робить код легшим для читання та розуміння. Їх також можна використовувати для відключення коду, щоб запобігти його виконанню; це може бути цінним інструментом відлагодження.

+ +

JavaScript має два давніх способи додавання коментарів у код.

+ +

Перший - це коментарі //; він перетворює весь текст, що розташований за ним, на коментар. Наприклад:

+ +
function comment() {
+  // Це однорядковий коментар JavaScript
+  console.log('Всім привіт!');
+}
+comment();
+
+ +

Другий спосіб - це стиль /* */, він набагато гнучкіший.

+ +

Наприклад, ви можете використати його на одному єдиному рядку:

+ +
function comment() {
+  /* Це однорядковий коментар JavaScript */
+  console.log('Всім привіт!');
+}
+comment();
+ +

Ви також можете створювати багаторядкові коментарі, ось так:

+ +
function comment() {
+  /* Цей коментар містить декілька рядків. Зауважте,
+     що коментар не потрібно завершувати, поки ми не закінчили. */
+  console.log('Всім привіт!');
+}
+comment();
+ +

Ви також можете за бажанням використати його всередині рядка, хоча це може зробити ваш код важчим для читання, тому його варто використовувати з обережністю:

+ +
function comment(x) {
+  console.log('Всім ' + x /* вставити значення x */ + ' !');
+}
+comment('привіт');
+ +

На додачу, ви можете відключити код, щоб уникнути його виконання, огорнувши код ось так:

+ +
function comment() {
+  /* console.log('Всім привіт!'); */
+}
+comment();
+ +

У цьому випадку виклик console.log() не виконується, оскільки знаходиться всередині коментаря. Таким чином можна відключити будь-яку кількість рядків коду.

+ +

Коментарі шебанг

+ +

Спеціалізований третій синтаксис коментарів, коментар шебанг, знаходиться в процесі стандартизації у ECMAScript (дивіться Hashbang Grammar proposal).

+ +

Коментар шебанг поводиться так само, як однорядковий коментар (//). Але він починається з позначки #! та дозволений лише на самому початку тексту скрипта. Також зауважте, що перед позначкою #! не можна ставити жодних пробільних знаків. Коментар складається з усіх символів, що стоять після #! до самого кінця першого рядка; дозволений лише один такий коментар.

+ +

Коментар шебанг визначає шлях до специфічного інтерпретатора JavaScript, який ви бажаєте використати для виконання скрипта. Приклад виглядає наступним чином:

+ +
#!/usr/bin/env node
+
+console.log("Всім привіт");
+
+ +
+

Заувага: Коментарі шебанг у JavaScript імітують шебанги в Unix, що використовуються для запуску файлів з відповідним інтерпретатором.

+
+ +
+

Хоча символ BOM перед коментарем шебанг працює у переглядачі, його не радять використовувати у скрипті з шебангом. BOM не працюватиме, якщо ви намагаєтесь виконати скрипт у Unix/Linux. Тому використовуйте UTF-8 без символа BOM, якщо ви хочете виконувати скрипти безпосередньо з оболонки.

+
+ +

Стиль коментарів #! має використовуватись тільки для того, щоб вказати інтерпретатор JavaScript. У всіх інших випадках просто ставте коментар // (чи багаторядковий коментар).

+ +

Ключові слова

+ +

Зарезервовані ключові слова у ECMAScript 2015

+ + + +

Ключові слова, зарезервовані на майбутнє

+ +

Наступні слова зарезервовані як ключові слова специфікацією ECMAScript. Наразі вони не мають спеціальної функціональності, але невдовзі, можливо, матимуть, тому їх не можна використовувати в якості ідентифікаторів.

+ +

Наступні слова завжди зарезервовані:

+ + + +

Наступні слова є зарезервованими лише у строгому режимі:

+ + + +

Наступні є зарезервованими лише у коді модулів:

+ + + +

Ключові слова, зарезервовані на майбутнє у старших стандартах

+ +

Далі наведено ключові слова, зарезервовані на майбутнє старшими специфікаціями ECMAScript (ECMAScript від 1 до 3).

+ + + +

Крім того, літерали null, true та false не можна використовувати в якості ідентифікаторів у ECMAScript.

+ +

Використання зарезервованого слова

+ +

Зарезервовані слова, насправді, стосуються лише ідентифікаторів (на противагу іменам ідентифікаторів). Як описано у es5.github.com/#A.1, це усі імена ідентифікаторів, які не включають зарезервовані слова.

+ +
a.import
+a['import']
+a = { import: 'test' }.
+
+ +

З іншого боку, наступний код є некоректним, тому що це ідентифікатор, ними є імена ідентифікаторів без зарезервованих слів. Ідентифікатори використовуються для оголошення функцій, функціональних виразів, оголошення змінних і т.д. Імена ідентифікаторів використовуються для виразу елемента (MemberExpression), виразу виклику (CallExpression) і т.д.

+ +
function import() {} // некоректно.
+ +

Ідентифікатори зі спеціальними значеннями

+ +

Декілька ідентифікаторів мають спеціальні значення у певному контексті, не будучи ключовими словами жодного виду. Ними є:

+ + + +

Літерали

+ +

Літерал null

+ +

Додаткову інформацію дивіться також у {{jsxref("null")}}.

+ +
null
+ +

Булевий літерал

+ +

Дивіться також додаткову інформацію у {{jsxref("Boolean")}}.

+ +
true
+false
+ +

Числові літерали

+ +

Типи {{jsxref("Число","Number")}} та {{jsxref("BigInt")}} використовують числові літерали.

+ +

Десятковий

+ +
1234567890
+42
+
+// Будьте обережні при використанні нуля попереду
+0888 // 888 розбирається як десяткове
+0777 // розбирається як вісімкове, 511 у десятковій системі
+
+ +

Зауважте, що десяткові літерали можуть починатися з нуля (0), за яким іде інша десяткова цифра, але, якщо усі цифри після 0 менші за 8, число інтерпретується як вісімкове. Це не спричинить викидання помилки у JavaScript, дивіться помилку 957513. Також дивіться статтю щодо {{jsxref("parseInt", "parseInt()")}}

+ +
Експоненціальний
+ +

Десятковий експоненціальний літерал позначається наступним форматом: beN; де b - мантиса (число, ціле чи з рухомою комою), далі символ e (який слугує роздільником, або експоненціальним показником) та N, яке вказує порядок – ціле число зі знаком (згідно з 2019 ECMA-262): 

+ +
0e-5   // => 0
+0e+5   // => 0
+5e1    // => 50
+175e-2 // => 1.75
+1e3    // => 1000
+1e-3   // => 0.001
+
+ +

Двійковий

+ +

Синтаксис двійкових чисел використовує нуль на початку, за яким іде латинська літера "B", маленька чи велика (0b або 0B). Оскільки цей синтаксис новий у ECMAScript 2015, дивіться таблицю сумісності з веб-переглядачами, наведену нижче. Якщо цифри після 0b не є 0 чи 1, викидається наступна помилка {{jsxref("SyntaxError")}}: "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Вісімковий

+ +

Синтаксис вісімкових чисел використовує нуль на початку, за яким іде латинська літера "O", маленька чи велика (0o або 0O). Оскільки цей синтаксис новий у ECMAScript 2015, дивіться таблицю сумісності з веб-переглядачами, наведену нижче. Якщо цифри після 0o виходять за межі діапазону (01234567), викидається наступна помилка {{jsxref("SyntaxError")}}: "Missing octal digits after 0o".

+ +
var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Також можна просто через нуль на початку
+// (дивіться заувагу щодо десяткових чисел вище)
+0755
+0644
+
+ +

Шістнадцятковий

+ +

Синтаксис шістнадцяткових чисел використовує нуль на початку, за яким іде латинська літера "X", велика чи маленька (0x або 0X). Якщо цифри після 0x виходять за межі діапазону (0123456789ABCDEF), викидається наступна помилка {{jsxref("SyntaxError")}}: "Identifier starts immediately after numeric literal".

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Літерал BigInt

+ +

Тип {{jsxref("BigInt")}} є числовим простим типом у JavaScript, який може представляти цілі числа з довільною точністю. Літерали BigInt створюються додаванням n в кінець цілого числа.

+ +
123456789123456789n     // 123456789123456789
+0o777777777777n         // 68719476735
+0x123456789ABCDEFn      // 81985529216486895‬
+0b11101001010101010101n // 955733
+
+ +

Зауважте, що старі вісімкові числа з просто нулем на початку не працюватимуть з BigInt:

+ +
// 0755n
+// SyntaxError: invalid BigInt syntax
+ +

Для вісімкових чисел BigInt завжди використовуйте нуль з літерою "o" (великою чи маленькою):

+ +
0o755n
+ +

Більше інформації щодо BigInt дивіться у статті Структури даних JavaScript.

+ +

Числові роздільники

+ +

Щоб покращити читабельність числових літералів, можна використовувати підкреслення (_, U+005F) в якості роздільників:

+ +
// роздільники у десяткових числах
+1_000_000_000_000
+1_050.95
+
+// роздільники у двійкових числах
+0b1010_0001_1000_0101
+
+// роздільники у вісімкових числах
+0o2_2_5_6
+
+// роздільники у шістнадцяткових числах
+0xA0_B0_C0
+
+// роздільники у BigInt
+1_000_000_000_000_000_000_000n
+
+ +

Зверніть увагу на ці обмеження:

+ +
// Не можна ставити більше одного підкреслення підряд
+100__000; // SyntaxError
+
+// Не можна ставити в кінці числового літерала
+100_; // SyntaxError
+
+// Не можна використовувати після нуля на початку 0
+0_1; // SyntaxError
+
+ +

Об'єктні літерали

+ +

Більше інформації дивіться також на сторінках {{jsxref("Object")}} та Ініціалізатор об'єкта.

+ +
var o = { a: 'foo', b: 'bar', c: 42 };
+
+// скорочений запис. Нове у ES2015
+var a = 'foo', b = 'bar', c = 42;
+var o = {a, b, c};
+
+// замість
+var o = { a: a, b: b, c: c };
+
+ +

Масивні літерали

+ +

Більше інформації дивіться також у {{jsxref("Array")}}.

+ +
[1954, 1974, 1990, 2014]
+ +

Рядкові літерали

+ +

Рядковий літерал - це нуль чи більше кодів символів Юнікоду всередині одинарних або подвійних лапок. Коди символів Юнікоду також можуть бути представлені екранованими послідовностями. Усі коди символів можуть з'являтись безпосередньо у рядковому літералі, окрім цих закриваючих кодів символів:

+ + + +

До появи пропозиції зробити весь текст формату JSON дозволеним у ECMA-262, неекрановані U+2028 <LS> та U+2029 <PS> також були заборонені у рядкових літералах.

+ +

Будь-які коди символів можуть з'являтись у вигляді екранованої послідовності. Рядкові літерали повертають значення ECMAScript String. Під час генерування цих значень String коди символів Юнікоду кодуються форматом UTF-16.

+ +
'foo'
+"bar"
+ +

Шістнадцяткові екрановані послідовності

+ +

Шістнадцяткові екрановані послідовності складаються з \x та рівно двох шістнадцяткових символів, що відображають кодову одиницю чи код символа у діапазоні від 0x0000 до 0x00FF.

+ +
'\xA9' // "©"
+
+ +

Екрановані послідовності Юнікоду

+ +

Екранована послідовність Юнікоду складається рівно з чотирьох шістнадцяткових символів, записаних після \u. Вона відображає кодову одиницю у кодуванні UTF-16. Для кодів символів від U+0000 до U+FFFF кодова одиниця дорівнює коду символа. Коди символів від U+10000 до U+10FFFF потребують двох екранованих послідовностей, які відображають дві кодові одиниці (сурогатну пару), що використовуються для кодування символа; сурогатна пара відрізняється від коду символа.

+ +

Дивіться також {{jsxref("String.fromCharCode()")}} та {{jsxref("String.prototype.charCodeAt()")}}.

+ +
'\u00A9' // "©" (U+A9)
+ +

Екранування кодів символів Юнікоду

+ +

Екранування коду символа Юнікоду складається з \u{, далі код символа у шістнадцятковому форматі, за ним }. Значення шістнадцяткових символів має знаходитись в діапазоні між 0 та 0x10FFFF включно. Коди символів у діапазоні від U+10000 до U+10FFFF не потребують представлення у вигляді сурогатної пари. Екранування кодів символів було додане у JavaScript у ECMAScript 2015 (ES6).

+ +

Дивіться також {{jsxref("String.fromCodePoint()")}} та {{jsxref("String.prototype.codePointAt()")}}.

+ +
'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
+
+// той самий символ у вигляді сурогатної пари
+'\uD87E\uDC04'
+ +

Літерал регулярного виразу

+ +

Більше інформації дивіться також у {{jsxref("RegExp")}}.

+ +
/ab+c/g
+
+// Літерал "порожнього" регулярного виразу
+// Порожня група необхідна,
+// щоб уникнути неоднозначності щодо однорядкових коментарів.
+/(?:)/
+ +

Шаблонні літерали

+ +

Дивіться також шаблонні рядки.

+ +
`текстовий рядок`
+
+`текстовий рядок 1
+ текстовий рядок 2`
+
+`текст ${вираз} текст`
+
+тег `текст ${вираз} текст`
+ +

Автоматична вставка крапки з комою

+ +

Деякі інструкції JavaScript повинні завершуватись крапкою з комою, і тому підпадають під автоматичну вставку крапки з комою (ASI, automatic semicolon insertion):

+ + + +

Специфікація ECMAScript визначає три правила вставки крапки з комою.

+ +

1. Крапка з комою вставляється перед, коли символ розриву рядка чи "}" вважається таким, що недозволений за синтаксисом.

+ +
{ 1 2 } 3
+
+// перетворюється на
+
+{ 1 2 ;} 3;
+ +

2. Крапка з комою вставляється в кінці, коли виявлено кінець вхідного набору токенів, але синтаксичний аналізатор неспроможний розібрати єдиний вхідний набір як завершену програму.

+ +

Тут ++ не сприймається як постфіксний оператор, що застосовується до змінної b, тому що між b та ++ знаходиться символ розриву рядка.

+ +
a = b
+++c
+
+// перетворюється на
+
+a = b;
+++c;
+
+ +

3. Крапка з комою вставляється в кінці, коли інструкція з обмеженими граматичними застосуваннями супроводжується символом розриву рядка. Ці інструкції з правилом "жодних розривів рядка в цьому місці" наступні:

+ + + +
return
+a + b
+
+// перетворюється на
+
+return;
+a + b;
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.grammar")}}

+ +

Хід реалізації

+ +

Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у Test262, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.

+ +
{{EmbedTest262ReportResultsTable("hashbang")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/addition/index.html b/files/uk/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..92f1e1c48f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,81 @@ +--- +title: Додавання (+) +slug: Web/JavaScript/Reference/Operators/Addition +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +
{{jsSidebar("Operators")}}
+ +

Оператор додавання (+) повертає суму числових операндів або об'єднання рядків.

+ +
{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x + y
+
+ +

Приклади

+ +

Додавання чисел

+ +
// Number + Number -> додавання
+1 + 2 // 3
+
+// Boolean + Number -> додавання
+true + 1 // 2
+
+// Boolean + Boolean -> додавання
+false + false // 0
+
+ +

Об'єднання рядків

+ +
// String + String -> об'єднання
+'бал' + 'кон' // "балкон"
+
+// Number + String -> об'єднання
+5 + 'кон' // "5кон"
+
+// String + Boolean -> об'єднання
+'бал' + false // "балfalse"
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.addition")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/addition_assignment/index.html b/files/uk/web/javascript/reference/operators/addition_assignment/index.html new file mode 100644 index 0000000000..2b5431a652 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/addition_assignment/index.html @@ -0,0 +1,77 @@ +--- +title: Присвоєння з додаванням (+=) +slug: Web/JavaScript/Reference/Operators/Addition_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з додаванням (+=) додає значення правого операнда до змінної та присвоює результат цій змінній. Типи двох операндів визначають поведінку оператора присвоєння з додаванням. Можливе або додавання, або об'єднання.

+ +
{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x += y
+Значення:  x  = x + y
+ +

Приклади

+ +

Використання додавання з присвоєнням

+ +
// Розглянемо такі змінні
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+// Число + Число -> додавання
+bar += 2 // 7
+
+// Булеве значення + Число -> додавання
+baz += 1 // 2
+
+// Булеве значення + Булеве значення -> додавання
+baz += false // 1
+
+// Число + Рядок -> об'єднання
+bar += 'foo' // "5foo"
+
+// Рядок + Булеве значення -> об'єднання
+foo += false // "foofalse"
+
+// Рядок + Рядок -> об'єднання
+foo += 'bar' // "foobar"
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.addition_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html b/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..6adc641eb6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html @@ -0,0 +1,313 @@ +--- +title: Арифметичні оператори +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Арифметичні оператори приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/).

+ +
{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}
+ + + +

Додавання (+)

+ +

Оператор додавання повертає суму числових операндів або об'єднання рядків.

+ +

Синтаксис

+ +
Оператор: x + y
+
+ +

Приклади

+ +
// Number + Number -> сума
+1 + 2 // 3
+
+// Boolean + Number -> сума
+true + 1 // 2
+
+// Boolean + Boolean -> сума
+false + false // 0
+
+// Number + String -> об'єднання
+5 + 'foo' // "5foo"
+
+// String + Boolean -> об'єднання
+'foo' + false // "foofalse"
+
+// String + String -> об'єднання
+'foo' + 'bar' // "foobar"
+
+ +

Віднімання (-)

+ +

Оператор віднімання проводить операцію віднімання між двома операндами, повертаючи різницю між ними.

+ +

Синтаксис

+ +
Оператор: x - y
+
+ +

Приклади

+ +
5 - 3 // 2
+3 - 5 // -2
+'foo' - 3 // NaN
+ +

Ділення (/)

+ +

Оператор ділення повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.

+ +

Синтаксис

+ +
Оператор: x / y
+
+ +

Приклади

+ +
1 / 2      // повертає 0.5 у JavaScript
+1 / 2      // повертає 0 у Java
+// (жодне з чисел не є явно числом з рухомою комою)
+
+1.0 / 2.0  // повертає 0.5 у JavaScript та Java
+
+2.0 / 0    // повертає Infinity у JavaScript
+2.0 / 0.0  // також повертає Infinity
+2.0 / -0.0 // повертає -Infinity у JavaScript
+ +

Множення (*)

+ +

Оператор множення повертає добуток операндів.

+ +

Синтаксис

+ +
Оператор: x * y
+
+ +

Приклади

+ +
2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+'foo' * 2 // NaN
+
+ +

Остача (%)

+ +

Оператор остачі повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.

+ +

Синтаксис

+ +
Оператор: var1 % var2
+
+ +

Приклади

+ +
12 % 5 // 2
+-1 % 2 // -1
+1 % -2 // 1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+5.5 % 2 // 1.5
+
+ +

Піднесення до степеня (**)

+ +

Оператор піднесення до степеня повертає результат піднесення першого операнду до показника степеня другого операнду. Тобто, var1var2 у наведеній інструкції, де var1 та var2 є змінними. Оператор піднесення до степеня правоасоціативний. a ** b ** c дорівнює a ** (b ** c).

+ +

Синтаксис

+ +
Оператор: var1 ** var2
+
+ +

Примітки

+ +

У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (**), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний + та унарний -, але існує кілька винятків. Наприклад, у Bash оператор ** має нижчий пріоритет, ніж унарні оператори. У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (+/-/~/!/delete/void/typeof) одразу перед числом основи степеня.

+ +
-2 ** 2;
+// 4 у Bash, -4 у інших мовах.
+// Це помилка у JavaScript, оскільки операція неоднозначна.
+
+
+-(2 ** 2);
+// -4 у JavaScript, а наміри автора однозначні.
+
+ +

Приклади

+ +
2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+
+ +

Щоб поміняти знак результату виразу піднесення до степеня:

+ +
-(2 ** 2) // -4
+
+ +

Щоб зробити основу степеня у виразі від'ємним числом:

+ +
(-2) ** 2 // 4
+
+ +
+

Заувага: JavaScript також має бітовий оператор ^ (логічний XOR). ** та ^ відрізняються (наприклад: 2 ** 3 === 8, тоді як 2 ^ 3 === 1.)

+
+ +

Інкремент (++)

+ +

Оператор інкременту збільшує свій операнд (додає одиницю) та повертає його значення.

+ + + +

Синтаксис

+ +
Оператор: x++ або ++x
+
+ +

Приклади

+ +
// Постфіксний
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Префіксний
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

Декремент (--)

+ +

Оператор декременту зменшує свій операнд (віднімає одиницю) та повертає його значення.

+ + + +

Синтаксис

+ +
Оператор: x-- або --x
+
+ +

Приклади

+ +
// Постфіксний
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Префіксний
+var a = 2;
+b = --a; // a = 1, b = 1
+
+ +

Унарний мінус (-)

+ +

Унарний мінус ставиться перед своїм операндом та міняє його знак на протилежний.

+ +

Синтаксис

+ +
Оператор: -x
+
+ +

Приклади

+ +
var x = 3;
+y = -x; // y = -3, x = 3
+
+// Унарний мінус може перетворити нечислове значення на число
+var x = "4";
+y = -x; // y = -4
+
+ +

Унарний плюс (+)

+ +

Унарний плюс ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом. Хоча унарний мінус (-) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення true, false та null. Підтримуються цілі числа у десятковому та шістнадцятковому форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.

+ +

Синтаксис

+ +
Оператор: +x
+
+ +

Приклади

+ +
+3     // 3
++'3'   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){ return val } // NaN
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-additive-operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Доданий Оператор піднесення до степеня.
{{SpecName('ES2017', '#sec-postfix-expressions')}}{{Spec2('ES2017')}}
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}}Визначені у кількох розділах специфікації: Адитивні оператори, мультиплікативні оператори, постфіксні вирази, унарні оператори.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Визначені у кількох розділах специфікації: Адитивні оператори, мультиплікативні оператори, постфіксні вирази, унарні оператори.
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.arithmetic")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/array_comprehensions/index.html b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html new file mode 100644 index 0000000000..ebd2425ae2 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html @@ -0,0 +1,198 @@ +--- +title: Заповнення масивів +slug: Web/JavaScript/Reference/Operators/Array_comprehensions +tags: + - JavaScript + - Оператор + - застарілий + - нестандартний +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +
{{jsSidebar("Operators")}} +
Нестандартний. Не використовуйте!
+Синтаксис заповнення масивів є нестандартним та був прибраний, починаючи з Firefox 58. Для варіантів використання в майбутьому розгляньте {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Стрілкові_функції", "стрілкові функції", "", 1)}} та {{jsxref("Operators/Spread_syntax", "оператор розпакування", "", 1)}}.
+{{Obsolete_Header(58)}}
+ +

Синтаксис заповнення масивів (array comprehension) був виразом JavaScript, який дозволяв швидко збирати новий масив, базуючись на вже існуючому масиві. Однак, він був прибраний зі стандарту та з реалізації Firefox. Не використовуйте його!

+ +

Синтаксис

+ +
[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+
+ +

Опис

+ +

У заповненнях масивів дозволені наступні два види компонентів:

+ + + +

Перебір for-of завжди є першим компонентом. Можна використовувати більше одного перебору for-of чи if-конструкцій.

+ +

Заповнення масивів були попередньо запропоновані для стандартизації у ECMAScript 2016, вони надають корисне скорочення запису для конструювання нового масиву на основі змісту іншого масиву. Заповнення часто можуть використовуватись замість викликів {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}}, або як засіб їх об'єднати.

+ +

Наступне заповнення бере масив чисел та створює новий масив, де кожне з цих чисел подвоюється.

+ +
var numbers = [1, 2, 3, 4];
+var doubled = [for (i of numbers) i * 2];
+console.log(doubled); // виводить 2,4,6,8
+
+ +

Це еквівалентно наступній операції {{jsxref("Array.prototype.map", "map()")}}:

+ +
var doubled = numbers.map(i => i * 2);
+
+ +

Заповнення також можуть використовуватись для відбору елементів, які відповідають певному виразу. Ось заповнення, яке обирає лише парні числа:

+ +
var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [for (i of numbers) if (i % 2 === 0) i];
+console.log(evens); // виводить 2,22,30
+
+ +

Метод {{jsxref("Array.prototype.filter", "filter()")}} може використовуватись для тієї ж самої мети:

+ +
var evens = numbers.filter(i => i % 2 === 0);
+
+ +

Операції з {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}} можна об'єднати у єдине заповнення масиву. Ось таке, що відфільтровує лише парні числа, а потім створює масив, де вони подвоєні:

+ +
var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
+console.log(doubledEvens); // виводить 4,44,60
+
+ +

Квадратні дужки заповнення масиву створюють неявний блок для області видимості. Нові змінні (такі, як i у прикладі) поводяться так, ніби вони були оголошені за допомогою {{jsxref("Statements/let","let")}}. Це означає, що вони не будуть доступні за межами заповнення.

+ +

Вхідні дані для заповнення масиву не обов'язково самі мають бути масивом; ітератори та генератори також підійдуть.

+ +

Навіть рядки можна використовувати як вхідні дані; щоб виконати наведені вище функції filter та map (на подібних до масиву об'єктах):

+ +
var str = 'abcdef';
+var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
+var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
+
+ +

Знову ж таки, початкова форма не зберігається, тому нам доведеться скористатись методом {{jsxref("Array.prototype.join", "join()")}}, щоб повернутись до рядка.

+ +

Приклади

+ +

Прості заповнення масивів

+ +
[for (i of [1, 2, 3]) i * i ];
+// [1, 4, 9]
+
+var abc = ['А', 'Б', 'В'];
+[for (letters of abc) letters.toLowerCase()];
+// ["а", "б", "в"]
+ +

Заповнення масивів з оператором if

+ +
var years = [1954, 1974, 1990, 2006, 2010, 2014];
+[for (year of years) if (year > 2000) year];
+// [2006, 2010, 2014]
+[for (year of years) if (year > 2000) if (year < 2010) year];
+// [2006], те саме, що й нижче:
+[for (year of years) if (year > 2000 && year < 2010) year];
+// [2006]
+
+ +

Заповнення масивів у порівнянні з map та filter

+ +

Легко зрозуміти синтаксис заповнення масивів, порівнявши його з методами масиву {{jsxref("Array.map", "map")}} та {{jsxref("Array.filter", "filter")}}:

+ +
var numbers = [1, 2, 3];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i => i * i);
+[for (i of numbers) i * i];
+// усі дорівнюють [1, 4, 9]
+
+numbers.filter(function (i) { return i < 3 });
+numbers.filter(i => i < 3);
+[for (i of numbers) if (i < 3) i];
+// усі дорівнюють [1, 2]
+
+ +

Заповнення масивів з двома масивами

+ +

Використання двох переборів for-of для роботи з двома масивами:

+ +
var numbers = [1, 2, 3];
+var letters = ['а', 'б', 'в'];
+
+var cross = [for (i of numbers) for (j of letters) i + j];
+// ["1а", "1б", "1в", "2а", "2б", "2в", "3а", "3б", "3в"]
+
+var grid = [for (i of numbers) [for (j of letters) i + j]];
+// [
+//  ["1а", "1б", "1в"],
+//  ["2а", "2б", "2в"],
+//  ["3а", "3б", "3в"]
+// ]
+
+[for (i of numbers) if (i > 1) for (j of letters) if(j > 'а') i + j]
+// ["2б", "2в", "3б", "3в"], те саме, що й наведене нижче:
+
+[for (i of numbers) for (j of letters) if (i > 1) if(j > 'а') i + j]
+// ["2б", "2в", "3б", "3в"]
+
+[for (i of numbers) if (i > 1) [for (j of letters) if(j > 'а') i + j]]
+// [["2б", "2в"], ["3б", "3в"]], не те саме, що наведене нижче:
+
+[for (i of numbers) [for (j of letters) if (i > 1) if(j > 'а') i + j]]
+// [[], ["2б", "2в"], ["3б", "3в"]]
+
+ +

Специфікації

+ +

Початково синтаксис був присутній у чорнетці ECMAScript 2015, але був видалений у ревізії 27 (серпень 2014). Будь ласка, дивіться семантику специфікації у старших ревізіях ES2015.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.array_comprehensions")}}

+ +

Відмінності від заповнень у JS1.7/JS1.8

+ +
Заповнення JS1.7/JS1.8 були прибрані з Gecko, починаючи з версії 46 ({{bug(1220564)}}).
+ +

Старий синтаксис заповнень (більше не використовується!):

+ +
[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+
+ +

Відмінності:

+ + + +

Дивіться пропозиції щодо змін у коді у Bug 1220564, коментар 42.

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/assignment/index.html b/files/uk/web/javascript/reference/operators/assignment/index.html new file mode 100644 index 0000000000..a974d94382 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння (=) +slug: Web/JavaScript/Reference/Operators/Assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +
{{jsSidebar("Operators")}}
+ +

Простий оператор присвоєння (=) використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоєнь, щоб присвоїти одне значення декільком змінним.

+ +
{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x = y
+
+ +

Приклади

+ +

Просте присвоєння та ланцюжок присвоєнь

+ +
// Розглянемо наступні змінні
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x дорівнює 10
+x = y = z // x, y та z усі дорівнюють 25
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/async_function/index.html b/files/uk/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..a0ff272054 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,115 @@ +--- +title: Вираз асинхронної функції +slug: Web/JavaScript/Reference/Operators/async_function +tags: + - JavaScript + - Оператор + - Функція +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +
{{jsSidebar("Operators")}}
+ +

Ключове слово async function може використовуватись для визначення асинхронних функцій всередині виразів.

+ +

Ви також можете визначати асинхронні функції за допомогою оголошення async function.

+ +

Синтаксис

+ +
async function [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+}
+ +

Починаючи з ES2015 ви також можете використовувати стрілкові функції.

+ +

Параметри

+ +
+
name
+
Ім'я функції. Його можна пропустити, в цьому випадку функція буде анонімною. Ім'я доступне лише всередині тіла функції.
+
paramN
+
Ім'я аргумента, що передається у функцію.
+
statements
+
Інструкції, які складають тіло функції.
+
+ +

Опис

+ +

Вираз async function дуже схожий, та має майже такий самий синтаксис, як {{jsxref('Statements/async_function', 'оголошення async function')}}. Головною відмінністю між виразом асинхронної функції та оголошенням асинхронної функції є ім'я функції, яке можна пропустити у виразі async function, щоб створити анонімну функцію. Вираз async function може використовуватись як {{Glossary("IIFE","НВФВ")}} (негайно виконуваний функціональний вираз), який виконується одразу після визначення. Більше інформації дивіться у главі про функції.

+ +

Приклади

+ +

Простий приклад

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+
+var add = async function(x) { // вираз асинхронної функції присвоюється змінній
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v => {
+  console.log(v);  // виводить 60 через 4 секунди.
+});
+
+
+(async function(x) { // вираз асинхронної функції використовується як НВФВ
+  var p_a = resolveAfter2Seconds(20);
+  var p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+})(10).then(v => {
+  console.log(v);  // виводить 60 через 2 секунди.
+});
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}
{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES2018')}}
{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES2017')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.operators.async_function_expression")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/await/index.html b/files/uk/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..ed8041347d --- /dev/null +++ b/files/uk/web/javascript/reference/operators/await/index.html @@ -0,0 +1,126 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +tags: + - JavaScript + - Оператор + - Функція +translation_of: Web/JavaScript/Reference/Operators/await +--- +
{{jsSidebar("Operators")}}
+ +

Оператор await використовується для очікування на {{jsxref("Promise","проміс")}}. Він може використовуватись лише всередині {{jsxref("Statements/async_function", "асинхронної функції")}}.

+ +

Синтаксис

+ +
[rv] = await expression;
+ +
+
expression
+
{{jsxref("Promise","Проміс")}} чи будь-яке інше значення, якого треба дочекатись.
+
rv
+
+

Повертає значення виконаного проміса, або саме значення, якщо це не об'єкт Promise.

+
+
+ +

Опис

+ +

Вираз await спричиняє призупинення виконання асинхронної функції до встановлення об'єкта Promise (проміс) (тобто, до його вирішення або відхилення), а також відновлює виконання асинхронної функції після його завершення. Після відновлення, значенням виразу await є значення виконаного проміса.

+ +

Якщо проміс відхилено, вираз await викидає значення відхилення.

+ +

Якщо значення виразу, що стоїть після оператора await, не є об'єктом Promise, воно перетворюється на вирішений проміс.

+ +

Оператор await може розбивати хід виконання, дозволяючи коду, що викликав функцію з await, відновити виконання ще до того, як буде продовжене відкладене виконання функції з await. Після того, як await відкладає продовження своєї функції, якщо це перший оператор await, що виконується функцією, негайне виконання також продовжується поверненням у код, що викликав функцію, проміса у стані очікування для завершення виконання функції з await та для відновлення виконання коду, що її викликав.

+ +

Приклади

+ +

Якщо у вираз await був переданий проміс, то вираз чекає на виконання проміса та повертає значення, що є результатом виконання.

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+
+f1();
+
+ +

{{jsxref("Global_Objects/Promise/then", "Промісоподібні об'єкти")}} виконуватимуться так само.

+ +
async function f2() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve('вирішений!')
+    }
+  };
+  console.log(await thenable); // вирішений!
+}
+
+f2();
+ +

Якщо значенням є не проміс, він перетворює його на вирішений проміс та чекає на нього.

+ +
async function f3() {
+  var y = await 20;
+  console.log(y); // 20
+}
+
+f3();
+ +

Якщо проміс відхилено, викидається значення відхилення.

+ +
async function f4() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+
+f4();
+ +

Обробити відхилений проміс без блока try.

+ +
var response = await promisedFunction().catch((err) => { console.log(err); });
+// якщо проміс відхилено, значенням response буде undefined
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.operators.await")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_and/index.html b/files/uk/web/javascript/reference/operators/bitwise_and/index.html new file mode 100644 index 0000000000..0ac51e7d41 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_and/index.html @@ -0,0 +1,111 @@ +--- +title: Побітове І (&) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND +--- +
{{jsSidebar("Operators")}}
+ +

Оператор побітового І (AND) & вертає 1 для кожної бітової позиції, де відповідні біти обох операндів дорівнюють 1.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}
+ +
+ + + +

Синтаксис

+ +
a & b
+
+ +

Опис

+ +

Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:

+ +
До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001
+ +

Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: перший біт до першого біту, другий біт до другого, і так далі.

+ +

Оператор застосовується до кожної пари бітів, а результат будується побітово.

+ +

Таблиця істинності для операції І наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba AND b
000
010
100
111
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 & 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10)
+
+ +

Побітове І над будь-яким числом x та 0 дає 0.

+ +

Приклади

+ +

Використання побітового І

+ +
// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+5 & 2; // 0
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#prod-BitwiseANDExpression', 'Bitwise AND expression')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise_and")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html new file mode 100644 index 0000000000..2af7f2fac5 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з побітовим І (&=) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з побітовим І (&=) використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x &= y
+Значення: x  = x & y
+
+ +

Приклади

+ +

Використання присвоєння з побітовим І

+ +
let a = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+a &= 2; // 0
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise_and_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_not/index.html b/files/uk/web/javascript/reference/operators/bitwise_not/index.html new file mode 100644 index 0000000000..5c83741948 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_not/index.html @@ -0,0 +1,99 @@ +--- +title: Побітове НЕ (~) +slug: Web/JavaScript/Reference/Operators/Bitwise_NOT +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT +--- +
{{jsSidebar("Operators")}}
+ +

Оператор побітового НЕ (~) інвертує біти свого операнда.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}
+ +
+ + + +

Синтаксис

+ +
~a
+
+ +

Опис

+ +

Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:

+ +
До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001
+ +

Оператор застосовується до кожного біта.

+ +

Таблиця істинності для операції НЕ (NOT) наступна

+ + + + + + + + + + + + + + + + + + + + +
aNOT a
01
10
+ +
 9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+               --------------------------------
+~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10)
+
+ +

Побітове НЕ над будь-яким числом x дає -(x + 1). Наприклад, ~-5 повертає 4.

+ +

Зауважте, що через використання 32-бітного представлення чисел і ~-1, і ~4294967295 (232-1) повернуть 0.

+ +

Приклади

+ +

Використання побітового НЕ

+ +
~0;  // -1
+~-1; // 0
+~1;  // -2
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-unary-operators', 'Unary NOT expression')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise_not")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_operators/index.html b/files/uk/web/javascript/reference/operators/bitwise_operators/index.html new file mode 100644 index 0000000000..4db007fb3e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_operators/index.html @@ -0,0 +1,559 @@ +--- +title: Бітові оператори +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Бітові оператори опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові чи вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
+ + + +

Наступна таблиця наводить перелік бітових операторів JavaScript:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорЗастосуванняОпис
Побітове І (AND)a & bПовертає 1 на кожній позиції, де відповідні біти обох операндів дорівнюють 1.
Побітове АБО (OR)a | bПовертає 1 на кожній позиції, де відповідні біти одного чи обох операндів дорівнюють 1.
Виключне побітове АБО (XOR)a ^ bПовертає 1 на кожній позиції, де відповідний біт одного з двох, але не обох, операндів дорівнює 1.
Побітове НЕ (NOT)~ aВиконує інверсію бітів операнду.
Лівий зсувa << bЗсуває a у двійковому представленні на b (< 32) бітів ліворуч, заповнюючи позиції справа нулями.
Правий зсув з розширенням знакуa >> bЗсуває a у двійковому представленні на b (< 32) бітів праворуч, відкидаючи зсунуті біти.
Правий зсув із заповненням нулямиa >>> b  Зсуває a у двійковому представленні на b (< 32) бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.
+ +

32-бітні цілі числа зі знаком

+ +

Операнди усіх бітових операторів перетворюються на 32-бітні цілі числа зі знаком у форматі доповняльного коду, окрім оператора правого зсуву із заповненням нулями, який повертає беззнакове ціле 32-бітне число. Формат доповняльного коду означає, що від'ємний еквівалент числа (наприклад, 5 та -5) - це інвертовані біти числа (побітове НЕ, або обернений код числа) плюс один. Для прикладу, наступний код представляє ціле число 314:

+ +
00000000000000000000000100111010
+
+ +

Наступний код представляє ~314, тобто, обернений код числа 314:

+ +
11111111111111111111111011000101
+
+ +

Нарешті, наступний код представляє доповняльний код числа -314:

+ +
11111111111111111111111011000110
+
+ +

Доповняльний код гарантує, що лівий біт дорівнює 0, коли число є додатним, і 1, коли число є від'ємним. Тому він відомий як знаковий біт.

+ +

Число 0 є цілим числом, усі біти якого дорівнюють 0.

+ +
0 (основа 10) = 00000000000000000000000000000000 (основа 2)
+
+ +

Число -1 є цілим числом, усі біти якого дорівнюють 1.

+ +
-1 (основа 10) = 11111111111111111111111111111111 (основа 2)
+
+ +

Число -2147483648 (шістнадцяткове представлення: -0x80000000) є цілим числом, усі біти якого дорівнюють 0, окрім першого (старшого) біта.

+ +
-2147483648 (основа 10) = 10000000000000000000000000000000 (основа 2)
+
+ +

Число 2147483647 (шістнадцяткове представлення: 0x7fffffff) є цілим числом, усі біти якого дорівнюють 1, окрім першого (старшого) біта.

+ +
2147483647 (основа 10) = 01111111111111111111111111111111 (основа 2)
+
+ +

Числа -2147483648 та 2147483647 є мінімальним та максимальним цілими числами, які можуть бути представлені 32-бітним знаковим числом.

+ +

Побітові логічні оператори

+ +

Концептуально побітові логічні оператори працюють наступним чином:

+ + + +

& (Побітове І)

+ +

Виконує операцію І (AND) над кожною парою бітів. a І b дає 1 тільки якщо обидва, a та b, дорівнюють 1. Таблиця істинності для операції І наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba AND b
000
010
100
111
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 & 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10)
+
+ +

Побітове І над будь-яким числом x та 0 дає 0.

+ +

| (Побітове АБО)

+ +

Виконує операцію АБО (OR) над кожною парою бітів. a АБО b дає 1, якщо або a, або b дорівнює 1. Таблиця істинності для операції АБО наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba OR b
000
011
101
111
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10)
+
+ +

Побітове АБО над будь-яким числом x та 0 дає x.

+ +

^ (Виключне побітове АБО)

+ +

Виконує операцію виключного АБО (XOR) над кожною парою бітів. a викл. АБО b дає 1, якщо a та b є різними. Таблиця істинності для операції XOR наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10)
+
+ +

Виключне побітове АБО над будь-яким числом x та 0 дає x.

+ +

~ (Побітове НЕ)

+ +

Виконує операцію НЕ над кожним бітом. НЕ a повертає інвертоване значення (або обернений код) операнду a. Таблиця істинності для операції НЕ наступна:

+ + + + + + + + + + + + + + + + +
aNOT a
01
10
+ +
 9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+               --------------------------------
+~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10)
+
+ +

Побітове НЕ над будь-яким числом x дає -(x + 1). Наприклад, ~-5 дорівнює 4.

+ +

Зауважте, що через використання 32-бітного представлення чисел і ~-1, і ~4294967295 (232-1) повернуть 0.

+ +

Оператори бітового зсуву

+ +

Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.

+ +

Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа у порядку від старшого до молодшого байту та повертають результат того самого типу, до якого належить лівий операнд. Лише молодші п'ять бітів правого операнду будуть використані.

+ +

<< (Лівий зсув)

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.

+ +

Наприклад, 9 << 2 дорівнює 36:

+ +
.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 << 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10)
+
+ +

Бітовий зсув будь-якого числа x ліворуч на y бітів дорівнює x * 2 ** y.
+ Отже, для прикладу: 9 << 3 можна перекласти як: 9 * (2 ** 3) = 9 * (8) = 72.

+ +

>> (Правий зсув з розширенням знаку)

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".

+ +

Наприклад, 9 >> 2 дорівнює 2:

+ +
.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 >> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+
+ +

Аналогічно, -9 >> 2 дорівнює -3, оскільки знак зберігається:

+ +
.    -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                   --------------------------------
+-9 >> 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (основа 10)
+
+ +

>>> (Правий зсув із заповненням нулями)

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення 0, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.

+ +

Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, 9 >>> 2 дорівнює 2, так само, як 9 >> 2:

+ +
.     9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                   --------------------------------
+9 >>> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+
+ +

Однак, це не одне й те саме для від'ємних чисел. Наприклад, -9 >>> 2 поверне 1073741821, що відрізняється від -9 >> 2 (що дорівнює -3):

+ +
.     -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                    --------------------------------
+-9 >>> 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10)
+
+ +

Приклади

+ +

Прапори та бітові маски

+ +

Побітові логічні оператори часто використовуються для створення, маніпулювання та читання послідовностей прапорів, які грають роль двійкових змінних. Замість цих послідовностей можуть використовуватись зміні, але двійкові прапори займають набагато менше пам'яті (у 32 рази).

+ +

Припустимо, є 4 прапори:

+ + + +

Ці прапори представлені послідовністю бітів: DCBA. Коли прапор встановлений, він має значення 1. Коли прапор очищений, він має значення 0. Припустимо, змінна flags має двійкове значення 0101:

+ +
var flags = 5;   // двійкове значення 0101
+
+ +

Це значення вказує:

+ + + +

Оскільки бітові операнди 32-бітні, 0101 насправді дорівнює 00000000000000000000000000000101, але нулями попереду можна знехтувати, оскільки вони не містять корисної інформації.

+ +

Бітова маска - це послідовність бітів, які можуть маніпулювати прапорами та/або читати їх. Зазвичай, визначається "примітивна" бітова маска для кожного прапора:

+ +
var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+
+ +

Нові бітові маски можуть створюватись застовуванням побітових логічних операторів до цих примітивних бітових масок. Наприклад, бітова маска 1011 може бути створена операцією АБО з прапорів FLAG_A, FLAG_B та FLAG_D:

+ +
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
+
+ +

Індивідуальні значення прапорів можна витягнути застосуванням операції І до них та бітової маски, де кожний біт, що має значення один, "витягне" відповідний прапор. Бітова маска маскує невідповідні прапори, об'єднуючи їх операцією І з нулями (звідси термін "бітова маска"). Наприклад, бітову маску 0100 можна використати, щоб побачити, чи встановлений прапор C:

+ +
// якщо ми маємо кота
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // зробити щось
+}
+
+ +

Бітова маска з кількома встановленими прапорами діє як "або/або". Для прикладу, наступні два фрагменти еквівалентні:

+ +
// якщо ми маємо кажана або ми маємо кота
+// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+if ((flags & FLAG_B) || (flags & FLAG_C)) {
+   // зробити щось
+}
+
+ +
// якщо ми маємо кажана або кота
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // зробити щось
+}
+
+ +

Прапори можна встановити, об'єднавши їх операцією АБО з бітовою маскою, де кожний біт, що має значення один, встановить відповідний прапор, якщо прапор ще не встановлений. Наприклад, бітову маску 1100 можна використати, щоб встановити прапори C та D:

+ +
// так, ми маємо кота та качку
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Прапори можна очистити, об'єднавши їх операцією І з бітовою маскою, де кожний біт, що має значення нуль, очистить відповідний прапор, якщо він ще не очищений. Ця бітова маска може бути створена застосуванням операції НЕ до примітивних бітових масок. Наприклад, бітову маску 1010 можна використати, щоб очистити прапори A та C:

+ +
// ні, ми не маємо проблеми з мурахами або кота
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Маску також можна створити за допомогою ~FLAG_A & ~FLAG_C (правило де Моргана):

+ +
// ні, ми не маємо проблеми з мурахами і ми не маємо кота
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Прапори можна перемикати, об'єднуючи їх операцією виключне АБО з бітовою маскою, де кожний біт, що має значення один, переключить відповідний прапор. Наприклад, бітову маску 0110 можна використати, щоб переключити прапори B та C:

+ +
// якщо ми не мали кажана, тепер ми його маємо,
+// а якщо він в нас був, бувай, кажанчику
+// те саме для котів
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Нарешті, усі прапори можна перевернути оператором НЕ:

+ +
// входимо у паралельний всесвіт...
+flags = ~flags;    // ~1010 => 0101
+
+ +

Перетворення типів

+ +

Перетворити двійковий рядок на десяткове число:

+ +
var sBinString = '1011';
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // виводить 11, тобто 1011
+
+ +

Перетворити десяткове число на двійковий рядок:

+ +
var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // виводить 1011, тобто 11
+
+ +

Автоматизація створення маски

+ +

Ви можете створювати маски з набору булевих значень наступним чином:

+ +
function createMask() {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, тобто: 1011
+var mask2 = createMask(false, false, true); // 4, тобто: 0100
+var mask3 = createMask(true); // 1, тобто: 0001
+// і т.д.
+
+alert(mask1); // виводить 11, тобто: 1011
+
+ +

Зворотний алгоритм: отримання масиву булевих значень з маски

+ +

Якщо ви бажаєте створити масив булевих значень з маски, можете скористатись цим кодом:

+ +
function arrayFromMask(nMask) {
+  // Значенння nMask має бути між -2147483648 та 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) {
+    throw new TypeError('arrayFromMask - out of range');
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert('[' + array1.join(', ') + ']');
+// виводить "[true, true, false, true]", тобто: 11, тобто: 1011
+
+ +

Ви можете перевірити обидва алгоритми одночасно…

+ +
var nTest = 19; // наша користувацька маска
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

Суто з навчальною метою (оскільки існує метод Number.toString(2)) ми показуємо, як можна модифікувати алгоритм arrayFromMask для створення рядка, що містить двійкове представлення числа, а не масиву булевих значень:

+ +
function createBinaryString(nMask) {
+  // Значення nMask має бути між -2147483648 та 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
+       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// виводить 00000000000000000000000000001011, тобто 11
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Визначені у кількох розділах специфікації: Побітовий оператор НЕ, Бітові оператори зсуву, Двійкові побітові оператори
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Визначені у кількох розділах специфікації: Побітовий оператор НЕ, Бітові оператори зсуву, Двійкові побітові оператори
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Визначені у кількох розділах специфікації: Побітовий оператор НЕ, Бітові оператори зсуву, Двійкові побітові оператори
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_or/index.html b/files/uk/web/javascript/reference/operators/bitwise_or/index.html new file mode 100644 index 0000000000..89e27290da --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_or/index.html @@ -0,0 +1,113 @@ +--- +title: Побітове АБО (|) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR +--- +
{{jsSidebar("Operators")}}
+ +

Оператор побітового АБО (|) вертає 1 для кожної бітової позиції, де відповідні біти одного чи обох операндів дорівнюють 1.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}
+ +
+ + + +

Синтаксис

+ +
a | b
+
+ +

Опис

+ +

Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:

+ +
До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001
+ +

Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: перший біт до першого бітудругий біт до другого, і так далі.

+ +

Оператор застосовується до кожної пари бітів, а результат будується побітово.

+ +

Таблиця істинності для операції АБО (OR) наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba OR b
000
011
101
111
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10)
+
+ +

Побітове АБО над будь-яким числом x з 0 дає x.

+ +

Приклади

+ +

Використання побітового АБО

+ +
// 9  (00000000000000000000000000001001)
+// 14 (00000000000000000000000000001110)
+
+14 | 9;
+// 15 (00000000000000000000000000001111)
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#prod-BitwiseORExpression', 'Bitwise OR expression')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise_or")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html new file mode 100644 index 0000000000..a4197168b7 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння з побітовим АБО (|=) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з побітовим АБО (|=) використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x |= y
+Значення: x = x | y
+ +

Приклади

+ +

Використання присвоєння з побітовим АБО

+ +
let a = 5;
+a |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise_or_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_xor/index.html b/files/uk/web/javascript/reference/operators/bitwise_xor/index.html new file mode 100644 index 0000000000..b9e61d2d39 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_xor/index.html @@ -0,0 +1,113 @@ +--- +title: Виключне побітове АБО (^) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR +--- +
{{jsSidebar("Operators")}}
+ +

Оператор виключного побітового АБО (^) повертає 1 на кожній бітовій позиції, де відповідний біт одного з операндів, але не обох, дорівнює 1.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}
+ +
+ + + +

Синтаксис

+ +
a ^ b
+
+ +

Опис

+ +

Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:

+ +
До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001
+ +

Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: перший біт до першого бітудругий біт до другого, і так далі.

+ +

Оператор застосовується до кожної пари бітів, а результат будується побітово.

+ +

Таблиця істинності для операції виключного побітового АБО (XOR) наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10)
+
+ +

Виключне побітове АБО над будь-яким числом x та 0 дає x.

+ +

Приклади

+ +

Використання виключного побітового АБО

+ +
// 9  (00000000000000000000000000001001)
+// 14 (00000000000000000000000000001110)
+
+14 ^ 9;
+// 7  (00000000000000000000000000000111)
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#prod-BitwiseXORExpression', 'Bitwise XOR expression')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise_xor")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html new file mode 100644 index 0000000000..9f5375f7e2 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння з виключним побітовим АБО (^=) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з виключним побітовим АБО (^=) використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x ^= y
+Значення: x = x ^ y
+ +

Приклади

+ +

Використання присвоєння з виключним побітовим АБО

+ +
let a = 5;
+a ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise_xor_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/class/index.html b/files/uk/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..4b4e8bee1e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/class/index.html @@ -0,0 +1,122 @@ +--- +title: Вираз класу +slug: Web/JavaScript/Reference/Operators/class +tags: + - ECMAScript 2015 + - JavaScript + - Класи + - Оператор + - вираз +translation_of: Web/JavaScript/Reference/Operators/class +--- +
{{jsSidebar("Operators")}}
+ +

Вираз класу - це один зі способів визначити клас у ECMAScript 2015. Схоже до функціональних виразів, вирази класів можуть бути іменовані або неіменовані. У іменованих ім'я класу є локальним для використання тільки у тілі класу. Класи JavaScript використовують прототипне наслідування.

+ +
{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}
+ + + +

Синтаксис

+ +
var MyClass = class [className] [extends] {
+  // тіло класу
+};
+ +

Опис

+ +

Вираз класу має синтаксис, подібний до синтаксису оголошення (оператору) класу. Однак, у виразі класу ви можете опустити ім'я класу ("зв'язуючий ідентифікатор"), чого не можна зробити у оголошенні класу. Додатково, вираз класу дозволяє перевизначити/переоголосити клас та не викинути жодних помилок типу, як у оголошенні класу. Конструктор є необов'язковою властивістю. А результатом typeof для класів, створених за допомогою ключового слова, завжди буде "function".

+ +

Як і у оголошенні класу, тіло класу у виразі класу виконується у строгому режимі.

+ +
'use strict';
+var Foo = class {}; // конструктор є необов'язковою властивістю
+var Foo = class {}; // дозволяється перевизначення
+
+typeof Foo; //вертає "function"
+typeof class {}; //вертає "function"
+
+Foo instanceof Object; // true
+Foo instanceof Function; // true
+class Foo {}; // Викидає TypeError, не дозволяє перевизначення
+
+ +

Приклади

+ +

Простий вираз класу

+ +

Це простий анонімний вираз класу, на який можна посилатись через змінну "Foo".

+ +
var Foo = class {
+  constructor() {}
+  bar() {
+    return 'Привіт!';
+  }
+};
+
+var instance = new Foo();
+instance.bar(); // "Привіт!"
+Foo.name; // "Foo"
+
+ +

Іменовані вирази класів

+ +

Якщо ви бажаєте звертатись до поточного класу всередині тіла класу, ви можете створити іменований вираз класу. Це ім'я видиме тільки в області видимості самого виразу класу.

+ +
var Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo is not defined
+Foo.name; // "NamedFoo"
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.class")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/comma_operator/index.html b/files/uk/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..6637e57fa6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,90 @@ +--- +title: 'Оператор кома (,)' +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
{{jsSidebar("Operators")}}
+ +

Оператор кома (,) обчислює кожний свій операнд (зліва направо) і повертає значення останнього операнду. Це дозволяє створити складений вираз, де обчислюється більше одного виразу, а остаточним значенням складеного виразу є значення крайнього правого з його виразів. Зазвичай, його використовують, щоб передати декілька параметрів у цикл for.

+ +
{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}
+ + + +

Синтаксис

+ +
expr1, expr2, expr3...
+ +

Параметри

+ +
+
expr1, expr2, expr3...
+
Один або більше виразів, останній з яких буде повернений в якості значення складеного виразу.
+
+ +

Опис

+ +

Ви можете скористатись оператором кома, коли бажаєте використати декілька виразів там, де вимагається лише один. Найбільш поширене використання цього оператора - це подання декількох параметрів у цикл for.

+ +

Оператор кома повністю відмінний від коми у масивах, об'єктах та аргументах та параметрах функцій.

+ +

Приклади

+ +

Якщо a - 2-вимірний масив з 10 елементів по кожній стороні, наступний код використовує оператор кома, щоб збільшити i та зменшити j одночасно.

+ +

Наступний код виводить значення діагональних елементів масиву:

+ +
for (var i = 0, j = 9; i <= 9; i++, j--)
+  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);
+ +

Зауважте, що оператори кома у присвоєннях можуть, на перший вигляд, не мати свого звичайного ефекту, тому що вони не існують всередині виразу. У наступному прикладі a присвоюється значення b = 3 (тобто, 3), але вираз c = 4 все одно обчислюється, і його результат повертається у консоль (тобто, 4). Причиною є пріоритет і асоціативність операторів.

+ +
var a, b, c;
+
+a = b = 3, c = 4; // Повертає у консоль 4
+console.log(a); // 3 (крайній зліва)
+
+var x, y, z;
+
+x = (y = 5, z = 6); // Повертає у консоль 6
+console.log(x); // 6 (крайній справа)
+
+ +

Обробка перед поверненням

+ +

Інший приклад того, що можна зробити оператором кома - це обробка перед поверненням. Як зазначалося, тільки останній елемент буде повернений, але всі інші також будуть обчислені. Отже, можна зробити таке:

+ +
function myFunc() {
+  var x = 0;
+
+  return (x += 1, x); // те саме, що return ++x;
+}
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.comma")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/conditional_operator/index.html b/files/uk/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..01c51d0d46 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,109 @@ +--- +title: Умовний (тернарний) оператор +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - Conditional + - JavaScript + - Оператор + - тернарний + - умовний +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{jsSidebar("Operators")}}
+ +

Умовний (тернарний) оператор - це єдиний оператор JavaScript, який приймає три операнди: умову, за якою йде знак питання (?), далі вираз, який має виконатися, якщо умова {{Glossary("truthy","правдива")}}, далі двокрапка (:) і, нарешті, вираз, який має виконатись, якщо умова {{Glossary("falsy","хибна")}}. Цей оператор часто використовують в якості скорочення конструкції if.

+ +
{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}
+ + + +

Синтаксис

+ +
condition ? exprIfTrue : exprIfFalse 
+ +

Параметри

+ +
+
condition
+
Вираз, який використовується в якості умови.
+
exprIfTrue
+
Вираз, який виконується, якщо вираз condition оцінений як {{Glossary("truthy", "правдивий")}} (який дорівнює або може бути приведений до true).
+
exprIfFalse
+
Вираз, який виконується, якщо вираз condition є {{Glossary("falsy", "хибним")}} (тобто, його значення може бути приведене до false).
+
+ +

Опис

+ +

Окрім false, можливими хибними значеннями є: null, NaN, 0, порожній рядок ("") та undefined. Якщо condition дорівнює будь-якому з них, результатом умовного виразу буде результат виконання виразу exprIfFalse.

+ +

Простий приклад:

+ +
var age = 26;
+var beverage = (age >= 21) ? "Пиво" : "Сік";
+console.log(beverage); // "Пиво"
+
+ +

Одним з типових використань є обробка значення, яке може дорівнювати null:

+ +
function greeting(person) {
+    var name = person ? person.name : "незнайомець";
+    return "Привіт, " + name;
+}
+
+console.log(greeting({name: 'Аліса'}));  // "Привіт, Аліса"
+console.log(greeting(null));             // "Привіт, незнайомець"​​​​​
+
+ +
+

Заувага: Оператор необов'язкового ланцюгування був створений для використання у таких випадках. На момент написання (липень 2019), він досі є експериментальним і не був реалізований.

+
+ +

Умовні ланцюги

+ +

Тернарний оператор є правоасоціативним, це означає, що він може створювати ланцюги наступним чином, схоже на ланцюг if … else if … else if … else:

+ +
function example(…) {
+    return condition1 ? value1
+         : condition2 ? value2
+         : condition3 ? value3
+         : value4;
+}
+
+// Є еквівалентом:
+
+function example(…) {
+    if (condition1) { return value1; }
+    else if (condition2) { return value2; }
+    else if (condition3) { return value3; }
+    else { return value4; }
+}
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.conditional")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/decrement/index.html b/files/uk/web/javascript/reference/operators/decrement/index.html new file mode 100644 index 0000000000..e97c5aaec9 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/decrement/index.html @@ -0,0 +1,82 @@ +--- +title: Декремент (--) +slug: Web/JavaScript/Reference/Operators/Decrement +tags: + - JavaScript + - Декремент + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +
{{jsSidebar("Operators")}}
+ +

Оператор декременту (--) зменшує свій операнд (віднімає одиницю) та повертає його значення.

+ +
{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x-- або --x
+
+ +

Опис

+ +

Якщо оператор використовується постфіксно, після операнду (наприклад, x--), тоді він зменшує значення та повертає його до зменшення.

+ +

Якщо оператор використовується префіксно, перед операндом (наприклад, --x), тоді він зменшує значення та повертає його після зменшення.

+ +

Приклади

+ +

Постфіксний декремент

+ +
let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+
+ +

Префіксний декремент

+ +
let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.decrement")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/delete/index.html b/files/uk/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..3df636e0a5 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,298 @@ +--- +title: Оператор delete +slug: Web/JavaScript/Reference/Operators/delete +tags: + - JavaScript + - Object + - delete + - Властивість + - Оператор + - керування пам'яттю +translation_of: Web/JavaScript/Reference/Operators/delete +--- +
{{jsSidebar("Operators")}}
+ +

Оператор JavaScript delete видаляє властивість об'єкта. Якщо на цю властивість більше немає посилань, пам'ять під неї зрештою звільняється автоматично.

+ +
{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}
+ + + +

Синтаксис

+ +
delete вираз 
+ +

де вираз має вертати посилання на властивість, наприклад:

+ +
delete object.property
+delete object['property']
+
+ +

Параметри

+ +
+
object
+
Ім'я об'єкта, чи вираз, що повертає цей об'єкт.
+
property
+
Властивість, яку треба видалити.
+
+ +

Значення, що повертається

+ +

Завжди true, окрім випадків, коли властивість є особистою властивістю, недоступною для налаштування, в цьому випадку у нестрогому режимі повертається false.

+ +

Винятки

+ +

Викидає {{jsxref("TypeError")}} у строгому режимі, якщо властивість є особистою властивістю, недоступною для налаштування.

+ +

Опис

+ +

Попри розповсюджену думку, оператор delete не має нічого спільного з прямим вивільненням пам'яті. Керування пам'яттю відбувається опосередковано через розривання посилань. Більше інформації дивіться у статті Керування пам'яттю.

+ +

Оператор delete видаляє задану властивість з об'єкта. В разі успішного видалення, він поверне true, інакше поверне false. Однак, важливо враховувати наступні сценарії:

+ + + +

Наступний фрагмент надає простий приклад:

+ +
var Employee = {
+  age: 28,
+  name: 'абв',
+  designation: 'розробник'
+}
+
+console.log(delete Employee.name);   // вертає true
+console.log(delete Employee.age);    // вертає true
+
+// При спробі видалити властивість, яка не існує,
+// повертається true
+console.log(delete Employee.salary); // вертає true
+
+ +

Властивості, недоступні для налаштування

+ +

Коли властивість позначена як недоступна для налаштування, delete не матиме жодного ефекту та поверне false. У строгому режимі це спричинить помилку TypeError.

+ +
var Employee = {};
+Object.defineProperty(Employee, 'name', {configurable: false});
+
+console.log(delete Employee.name);  // вертає false
+
+ +

{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}} та {{jsxref("Statements/const","const")}} створюють властивості, недоступні для налаштування, які не можуть бути видалені оператором delete:

+ +
var nameOther = 'XYZ';
+
+// Ми можемо звернутися до цієї глобальної властивості так:
+Object.getOwnPropertyDescriptor(window, 'nameOther');
+
+// виведе: Object {value: "XYZ",
+//                  writable: true,
+//                  enumerable: true,
+//                  configurable: false}
+
+// Оскільки "nameOther" додана за допомогою ключового
+// слова var, вона позначена як недоступна для налаштування
+
+delete nameOther;   // вертає false
+ +

У строгому режимі це спричинило б виняток.

+ +

Строгий режим проти нестрогого режиму

+ +

У строгому режимі, якщо delete використовується на прямому посиланні на змінну, аргумент функції чи ім'я функції, це викине {{jsxref("SyntaxError")}}.

+ +

Будь-яка змінна, оголошена через var, позначається як недоступна для налаштування. У наступному прикладі змінна salary недоступна для налаштування та не може бути видалена. У нестрогому режимі ця операція delete поверне false.

+ +
function Employee() {
+  delete salary;
+  var salary;
+}
+
+Employee();
+
+ +

Подивимось, як той самий код поводиться у строгому режимі. Замість того, щоб повернути false, код викидає SyntaxError.

+ +
"use strict";
+
+function Employee() {
+  delete salary;  // SyntaxError
+  var salary;
+}
+
+// Схожим чином, пряме звернення до фукнції
+// оператором delete викине SyntaxError
+
+function DemoFunction() {
+  //якийсь код
+}
+
+delete DemoFunction; // SyntaxError
+
+ +

Приклади

+ +
// Створює властивість adminName у глобальній області видимості.
+adminName = 'абв';
+
+// Створює властивість empCount у глобальній області видимості.
+// Оскільки ми використовуємо var, вона недоступна для налаштування. Так само як з let та const.
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'абв',
+  age: 5,
+  designation: 'Розробник'
+};
+
+// adminName - властивість у глобальній області видимості.
+// Вона може бути видалена, оскільки була створена без var,
+// і тому доступна для налаштування.
+delete adminName;       // вертає true
+
+// З іншого боку, empCount недоступна для налаштування,
+// оскільки використовувався оператор var.
+delete empCount;       // вертає false
+
+// delete можна використовувати, щоб видаляти властивості об'єктів.
+delete EmployeeDetails.name; // вертає true
+
+// Навіть якщо властивість не існує, delete поверне "true".
+delete EmployeeDetails.salary; // вертає true
+
+// delete не діє на вбудовані статичні властивості.
+delete Math.PI; // вертає false
+
+// EmployeeDetails - властивість у глобальній області видимості.
+// Оскільки вона була визначена без "var", вона доступна для налаштування.
+delete EmployeeDetails;   // вертає true
+
+function f() {
+  var z = 44;
+
+  // delete не діє на локальні змінні
+  delete z;     // вертає false
+}
+
+ +

delete та ланцюжок прототипів

+ +

У наступному прикладі ми видаляємо особисту властивість об'єкта, в той час, як однойменна властивість доступна через ланцюжок прототипів:

+ +
function Foo() {
+  this.bar = 10;
+}
+
+Foo.prototype.bar = 42;
+
+var foo = new Foo();
+
+// foo.bar є особистою властивістю
+console.log(foo.bar); // 10
+
+// Видаляємо особисту властивість
+// у об'єкті foo.
+delete foo.bar; // вертає true
+
+// Властивість foo.bar досі доступна
+// у ланцюжку прототипів.
+console.log(foo.bar); // 42
+
+// Видаляємо властивість прототипу.
+delete Foo.prototype.bar; // вертає true
+
+// Властивість "bar" більше не може
+// наслідуватись від Foo, оскільки була
+// видалена.
+console.log(foo.bar); // undefined
+ +

Видалення елементів масиву

+ +

Коли ви видаляєте елемент масиву, довжина масиву не змінюється. Це зберігається, навіть якщо ви видалите останній елемент масиву.

+ +

Коли оператор delete видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі trees[3] видаляється за допомогою delete.

+ +
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+delete trees[3];
+if (3 in trees) {
+    // це не виконається
+}
+ +

Якщо ви бажаєте, щоб елемент масиву існував, але мав значення undefined, скористайтесь значенням undefined замість оператора delete. У наступному прикладі елементу trees[3] присвоюється значення undefined, але елемент масиву досі існує:

+ +
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+trees[3] = undefined;
+if (3 in trees) {
+    // це виконається
+}
+ +

Якщо замість цього ви хочете видалити елемент масиву, змінивши вміст масиву, скористайтесь методом {{jsxref("Array.splice", "splice")}}. У наступному прикладі елемент trees[3] повністю видаляється з масиву за допомогою методу {{jsxref("Array.splice", "splice")}}:

+ +
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+trees.splice(3,1);
+console.log(trees); // ["секвоя", "лавр", "кедр", "клен"]
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.2.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.delete")}}

+ +

Примітки щодо кросбраузерності

+ +

Хоча ECMAScript робить порядок перебору об'єктів залежним від реалізації, може здаватись, що усі основні веб-переглядачі підтримують порядок перебору, в якому властивість, додана першою, йде першою (принаймні, для не прототипних властивостей). Однак, у Internet Explorer при використанні delete з властивістю, виникає дивна поведінка, яка заважає іншим переглядачам використовувати прості об'єкти, такі як об'єктні літерали, як впорядковані асоціативні масиви. У Explorer, хоча значення властивості дійсно стає undefined, але, якщо пізніше користувач знову додає властивість з таким самим ім'ям, властивість буде перебиратися на своїй старій позиції, а не в кінці перебору, як можна було б очікувати після видалення властивості та повторного її додавання.

+ +

Якщо ви хочете використовувати впорядкований асоціативний масив у кросбраузерному середовищі, використовуйте об'єкт {{jsxref("Map")}}, якщо він доступний, або імітуйте цю структуру двома окремими масивами (один для ключів, а інший для значень), або створіть масив об'єктів з однією властивістю, і т. д.

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/division/index.html b/files/uk/web/javascript/reference/operators/division/index.html new file mode 100644 index 0000000000..b1e95b2eb3 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/division/index.html @@ -0,0 +1,75 @@ +--- +title: Ділення (/) +slug: Web/JavaScript/Reference/Operators/Division +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Division +--- +
{{jsSidebar("Operators")}}
+ +

Оператор ділення (/) повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.

+ +
{{EmbedInteractiveExample("pages/js/expressions-division.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x / y
+
+ +

Приклади

+ +

Базове ділення

+ +
1 / 2              // 0.5
+
+Math.floor(3 / 2) // 1
+
+1.0 / 2.0         // 0.5
+
+ +

Ділення на нуль

+ +
2.0 / 0     // Infinity
+
+2.0 / 0.0   // Infinity, тому що 0.0 === 0
+
+2.0 / -0.0  // -Infinity
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.division")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/division_assignment/index.html b/files/uk/web/javascript/reference/operators/division_assignment/index.html new file mode 100644 index 0000000000..f32b4020a0 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/division_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння з діленням (/=) +slug: Web/JavaScript/Reference/Operators/Division_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Division_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з діленням (/=) ділить змінну на значення правого операнда та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x /= y
+Значення: x  = x / y
+ +

Приклади

+ +

Використання присвоєння з діленням

+ +
// Розглянемо таку змінну
+// bar = 5
+
+bar /= 2     // 2.5
+bar /= 'няв' // NaN
+bar /= 0     // Infinity
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.division_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/equality/index.html b/files/uk/web/javascript/reference/operators/equality/index.html new file mode 100644 index 0000000000..379b354b01 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/equality/index.html @@ -0,0 +1,125 @@ +--- +title: Рівність (==) +slug: Web/JavaScript/Reference/Operators/Equality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Equality +--- +
{{jsSidebar("Operators")}}
+ +

Оператор рівності (==) перевіряє, чи два операнди рівні, повертаючи результат типу Boolean. На відміну від оператору строгої рівності, він намагається перетворити для порівняння операнди, які належать до різних типів.

+ +
{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}
+ + + +

Синтаксис

+ +
x == y
+
+ +

Опис

+ +

Оператори рівності (== та !=) використовують алгоритм абстрактної рівності для порівняння двох операндів. Його можна загалом описати наступним чином:

+ + + +

Найбільш помітна відмінність між цим оператором та оператором строгої рівності (===) полягає в тому, що оператор строгої рівності не намагається виконувати перетворення типів. Натомість, оператор строгої рівності завжди вважає операнди різних типів різними.

+ +

Приклади

+ +

Порівняння без перетворення типів

+ +
1 == 1;              // true
+"привіт" == "привіт";  // true
+ +

Порівняння з перетворенням типів

+ +
"1" ==  1;            // true
+1 == "1";             // true
+0 == false;           // true
+0 == null;            // false
+0 == undefined;       // false
+null == undefined;    // true
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 == 3;         // true
+number1 == number2;   // false
+ +

Порівняння об'єктів

+ +
const object1 = {"key": "value"}
+const object2 = {"key": "value"};
+
+object1 == object2 // false
+object2 == object2 // true
+ +

Порівняння рядків та об'єктів String

+ +

Зауважте, що рядки, створені за допомогою new String(), є об'єктами. Якщо ви порівняєте один з них з рядковим літералом, об'єкт String буде перетворений на рядковий літерал, і їхній вміст буде порівнюватись. Однак, якщо обидва операнди є об'єктами String, вони порівнюються як об'єкти та мусять посилатись на один і той самий об'єкт, щоб вважатись однаковими:

+ +
const string1 = "привіт";
+const string2 = String("привіт");
+const string3 = new String("привіт");
+const string4 = new String("привіт");
+
+console.log(string1 == string2); // true
+console.log(string1 == string3); // true
+console.log(string2 == string3); // true
+console.log(string3 == string4); // false
+console.log(string4 == string4); // true
+ +

Порівняння дат та рядків

+ +
const d = new Date('December 17, 1995 03:24:00');
+const s = d.toString(); // наприклад: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
+console.log(d == s);    //true
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.equality")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/exponentiation/index.html b/files/uk/web/javascript/reference/operators/exponentiation/index.html new file mode 100644 index 0000000000..e50f793f42 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/exponentiation/index.html @@ -0,0 +1,102 @@ +--- +title: Піднесення до степеня (**) +slug: Web/JavaScript/Reference/Operators/Exponentiation +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Exponentiation +--- +
{{jsSidebar("Operators")}}
+ +

Оператор піднесення до степеня (**) повертає результат піднесення першого операнду до показника степеня другого операнду.

+ +
{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}
+ + + +

Синтаксис

+ +
Оператор: var1 ** var2
+
+ +

Опис

+ +

Оператор піднесення до степеня правоасоціативний. a ** b ** c дорівнює a ** (b ** c).

+ +

У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (**), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний + та унарний -, але існує кілька винятків. Наприклад, у Bash оператор ** має нижчий пріоритет, ніж унарні оператори.

+ +

У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (+/-/~/!/delete/void/typeof) одразу перед числом основи степеня.

+ +
-2 ** 2;
+// 4 у Bash, -4 у інших мовах.
+// Це помилка JavaScript, оскільки операція неоднозначна.
+
+
+-(2 ** 2);
+// -4 у JavaScript, а наміри автора однозначні.
+
+ +

Зауважте, що деякі мови програмування використовують символ карет ^ для піднесення до степеня, але JavaScript використовує цей символ як оператор виключного побітового АБО (XOR).

+ +

Приклади

+ +

Базове піднесення до степеня

+ +
2 ** 3   // 8
+3 ** 2   // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+ +

Асоціативність

+ +
2 ** 3 ** 2   // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+ +

Використання з унарними операторами

+ +

Щоб змінити знак результату виразу піднесення до степеня на протилежний:

+ +
-(2 ** 2) // -4
+
+ +

Щоб зробити основу степеня у виразі від'ємним числом:

+ +
(-2) ** 2 // 4
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-exp-operator', 'Exponentiation operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.exponentiation")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html new file mode 100644 index 0000000000..c5bd4c1353 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з піднесенням до степеня (**=) +slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Exponentiation_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з піднесенням до степеня (**=) підносить значення змінної до показника степеня правого операнда.

+ +
{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x **= y
+Значення: x  = x ** y
+ +

Приклади

+ +

Використання присвоєння з піднесенням до степеня

+ +
// Розглянемо таку змінну
+// bar = 5
+
+bar **= 2     // 25
+bar **= 'гав' // NaN
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.exponentiation_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/expression_closures/index.html b/files/uk/web/javascript/reference/operators/expression_closures/index.html new file mode 100644 index 0000000000..e3a0bff185 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/expression_closures/index.html @@ -0,0 +1,78 @@ +--- +title: Вирази-замикання +slug: Web/JavaScript/Reference/Operators/Expression_closures +tags: + - Function + - JavaScript + - Оператор + - застарілий + - нестандартний +translation_of: Archive/Web/JavaScript/Expression_closures +--- +
{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}} +
Нестандартний. Не використовуйте!
+Синтаксис виразів-замикань є нерекомендованою особливою функціональністю Firefox, він був прибраний, починаючи з Firefox 60. Для використання у майбутньому розгляньте стрілкові функції.
+
+ +

Вирази-замикання - це скорочений синтаксис для написання простих функцій.

+ +

Синтаксис

+ +
function [name]([param1[, param2[, ..., paramN]]])
+   expression
+
+ +

Параметри

+ +
+
name
+
Ім'я функції. Можна пропустити, в цьому випадку функція буде анонімною. Ім'я доступне лише всередині тіла функції.
+
paramN
+
Ім'я аргумента, що передається у функцію. Функція може мати до 255 аргументів.
+
expression
+
Вираз, який складає тіло функції.
+
+ +

Опис

+ +

Це доповнення є не більше, ніж скороченим синтаксисом для написання простих функцій, надаючи мові щось схоже на типову нотацію лямбда-числення.

+ +

JavaScript 1.7 та старші:

+ +
function(x) { return x * x; }
+ +

JavaScript 1.8:

+ +
function(x) x * x
+ +

Цей синтаксис дозволяє не писати фігурні дужки та оператор 'return' - вони стають неявними. Такий запис не надає жодної іншої переваги в написанні коду, окрім синтаксично коротшого запису.

+ +

Приклади

+ +

Скорочений запис для зв'язування прослуховувачів подій:

+ +
 document.addEventListener('click', function() false, true);
+
+ +

Використання цієї нотації з деякими функціями масивів з JavaScript 1.6:

+ +
elems.some(function(elem) elem.type == 'text');
+
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.expression_closures")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/function/index.html b/files/uk/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..8e8760660b --- /dev/null +++ b/files/uk/web/javascript/reference/operators/function/index.html @@ -0,0 +1,154 @@ +--- +title: Функціональний вираз +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{jsSidebar("Operators")}}
+ +

Ключове слово function може використовуватись для визначення функції всередині виразу.

+ +

Ви також можете визначати функції за допомогою конструктора Function та оголошення функції.

+ +
{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}
+ + + +

Синтаксис

+ +
var myFunction = function [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+};
+ +

Починаючи з ES2015 ви також можете скористатись стрілковими функціями.

+ +

Параметри

+ +
+
name
+
Ім'я функції. Можна пропустити, в цьому випадку функція буде анонімною. Ім'я доступне лише у тілі функції.
+
paramN
+
Ім'я аргументу, який передається у функцію.
+
statements
+
Інструкції, що складають тіло функції.
+
+ +

Опис

+ +

Функціональний вираз дуже схожий на оголошення функції та має майже такий самий синтаксис (дивіться оголошення функції). Головна відмінність між функціональним виразом та оголошенням функції - це ім'я функції, яке може бути пропущене у функціональних виразах для створення анонімних функцій. Функціональний вираз можна використовувати як НВФВ (Негайно виконуваний функціональний вираз), який запускається одразу після визначення. Дивіться також главу про функції, щоб дізнатись більше.

+ +

Підняття функціонального виразу

+ +

Функціональні вирази у JavaScript не піднімаються, на відміну від {{jsxref("Statements/function", "оголошень функцій", "#Підняття_оголошення_функції")}}. Не можна використовувати функціональний вираз до його визначення:

+ +
console.log(notHoisted) // undefined
+//хоча імена змінних піднімаються, визначення не піднімається і дорівнює undefined.
+notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+
+ +

Іменований функціональний вираз

+ +

Якщо бажаєте посилатись на поточну функцію всередині тіла функції, то вам потрібно створити іменований функціональний вираз. Це ім'я є локальним і доступне тільки всередині тіла (області видимості) функції. Це також дозволяє не використовувати нестандартну властивість arguments.callee.

+ +
var math = {
+  'factit': function factorial(n) {
+    console.log(n)
+    if (n <= 1) {
+      return 1;
+    }
+    return n * factorial(n - 1);
+  }
+};
+
+math.factit(3) //3;2;1;
+
+ +

Змінна, якій присвоюється функціональний вираз, матиме властивість name (ім'я). Ім'я не змінюється, якщо вираз присвоюється іншій змінній. Якщо ім'я функції пропущене, це буде ім'я змінної (неявне ім'я). Якщо ім'я функції присутнє, це буде ім'я функції (явне ім'я). Це також стосується стрілкових функцій (стрілкові функції не мають імені, тому ви можете задати лише неявне ім'я змінної).

+ +
var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz); // undefined
+console.log(bar === baz); // false (помилка, тому що baz == undefined)
+
+ +

Приклади

+ +

Наступний приклад визначає неіменовану функцію та присвоює її x. Функція вертає квадрат свого аргументу:

+ +
var x = function(y) {
+   return y * y;
+};
+
+ +

Найчастіше вони використовуються як функції зворотного виклику:

+ +
button.addEventListener('click', function(event) {
+    console.log('кнопка натиснута!')
+})
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.5.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.function")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/function_star_/index.html b/files/uk/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..677eb8b1fb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,90 @@ +--- +title: Вираз function* +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Ітератор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/function* +--- +
{{jsSidebar("Operators")}}
+ +

Ключове слово function* може використовуватись для визначення функції-генератора всередині виразу.

+ +
{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}
+ + + +

Синтаксис

+ +
function* [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+}
+ +

Параметри

+ +
+
name
+
Ім'я функції. Можна пропустити, в цьому випадку функція буде анонімною. Ім'я доступне тільки всередині тіла функції.
+
paramN
+
Ім'я аргументу, що передається у функцію. Функція може мати до 255 аргументів.
+
statements
+
Інструкції, що складають тіло функції.
+
+ +

Опис

+ +

Вираз function* дуже схожий та має практично однаковий синтаксис з {{jsxref('Statements/function*', 'оператором function*')}}. Головна відмінність між виразом function* та оператором function* - це ім'я функції, яке можна не вказувати у виразах function*, щоб створювати анонімні функції-генератори. Дивіться також більше інформації у главі про функції.

+ +

Приклади

+ +

Наступний приклад визначає безіменну функцію-генератор та присвоює її змінній x. Ця функція видає квадрат свого аргументу:

+ +
var x = function*(y) {
+   yield y * y;
+};
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.function_star")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html b/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html new file mode 100644 index 0000000000..30d8a0f6d7 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html @@ -0,0 +1,174 @@ +--- +title: Заповнення генераторів +slug: Web/JavaScript/Reference/Operators/Generator_comprehensions +tags: + - JavaScript + - Ітератор + - застарілий + - нестандартний +translation_of: Archive/Web/JavaScript/Generator_comprehensions +--- +
{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}} +
+

Нестандартний. Не використовуйте!
+ Синтаксис заповнень генераторів є нестандартним та був прибраний, починаючи з Firefox 58. Для використання в майбутньому розгляньте {{JSxRef("Statements/function*", "генератори", "", 1)}}.

+
+
+ +

Синтаксис заповнення генераторів (generator comprehension) був виразом JavaScript, який дозволяв швидко збирати нову функцію-генератор, базуючись на вже існуючому ітерабельному об'єкті. Однак, він був прибраний зі стандарту та з реалізації Firefox. Не використовуйте його!

+ +

Синтаксис

+ +
(for (x of iterable) x)
+(for (x of iterable) if (condition) x)
+(for (x of iterable) for (y of iterable) x + y)
+
+ +

Опис

+ +

У заповненнях генераторів дозволені наступні два види компонентів:

+ + + +

Перебір for-of завжди є першим компонентом. Можна використовувати більше одного перебору for-of чи if-конструкцій.

+ +

Значним недоліком {{JSxRef("Operators/Array_comprehensions","заповнень масивів","","true")}} є те, що вони можуть спричинити конструювання у пам'яті цілого нового масиву. Коли самі вхідні дані для заповнення є маленьким масивом, затрати пам'яті є незначними — але коли вхідні дані є великим масивом, або затратним (чи взагалі нескінченним) генератором, створення нового масиву може бути проблематичним.

+ +

Генератори дозволяють ліниві обчислення послідовностей, з обчисленням елементів на вимогу, коли є потреба. Заповнення генераторів синтаксично майже ідентичні заповненням масивів — вони використовують круглі дужки замість квадратних — але замість створення масиву вони створюють генератор, який може виконуватися ліниво. Можете вважати їх скороченим синтаксисом для створення генераторів.

+ +

Припустимо, ми маємо ітератор it, який перебирає великі послідовності цілих чисел. Ми бажаємо створити новий ітератор, який перебиратиме їхні подвоєні значення. Заповнення масиву створило б цілий масив у пам'яті, що містив би подвоєні значення:

+ +
var doubles = [for (i in it) i * 2];
+
+ +

Заповнення генератора, з іншого боку, створило б новий ітератор, який створював би подвоєні значення на вимогу, в разі потреби:

+ +
var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // Перше значення з it, подвоєне
+console.log(it2.next()); // Друге значення з it, подвоєне
+
+ +

Коли заповнення генератора використовується як аргумент функції, круглі дужки, що використовуються для виклику функції, означають, що зовнішні дужки можна пропустити:

+ +
var result = doSomething(for (i in it) i * 2);
+
+ +

Значною відмінністю між цими двома прикладами є те, що, використовуючи заповнення генератора, ви перебиратимете структуру 'obj' лише один раз, всього, на відміну від одного обходу при заповненні масиву та ще одного під час його перебору.

+ +

Приклади

+ +

Прості заповнення генераторів

+ +
(for (i of [1, 2, 3]) i * i );
+// функція-генератор, що видає 1, 4 та 9
+
+[...(for (i of [1, 2, 3]) i * i )];
+// [1, 4, 9]
+
+var abc = ['А', 'Б', 'В'];
+(for (letters of abc) letters.toLowerCase());
+// функція-генератор, що видає "а", "б" та "в"
+
+ +

Заповнення генераторів з оператором if

+ +
var years = [1954, 1974, 1990, 2006, 2010, 2014];
+
+(for (year of years) if (year > 2000) year);
+// функція-генератор, що видає 2006, 2010 та 2014
+
+(for (year of years) if (year > 2000) if (year < 2010) year);
+// функція-генератор, що видає 2006, те саме нижче:
+
+(for (year of years) if (year > 2000 && year < 2010) year);
+// функція-генератор, що видає 2006
+
+ +

Заповнення генераторів у порівнянні з функцією-генератором

+ +

Легко зрозуміти синтаксис заповнення генераторів, порівнявши його з функцією-генератором.

+ +

Приклад 1: Простий генератор.

+ +
var numbers = [1, 2, 3];
+
+// Функція-генератор
+(function*() {
+  for (let i of numbers) {
+    yield i * i;
+  }
+})();
+
+// Заповнення генератора
+(for (i of numbers) i * i );
+
+// Результат: Обидва повертають генератор, який видає [1, 4, 9]
+
+ +

Приклад 2: Використання if у генераторі.

+ +
var numbers = [1, 2, 3];
+
+// Функція-генератор
+(function*() {
+  for (let i of numbers) {
+    if (i < 3) {
+      yield i * 1;
+    }
+  }
+})();
+
+// Заповнення генератора
+(for (i of numbers) if (i < 3) i);
+
+// Результат: обидва вертають генератор, який видає [1, 2]
+ +

Специфікації

+ +

Заповнення генераторів було початково присутнє у чорнетці ECMAScript 2015, але було прибране у ревізії 27 (серпень 2014). Будь-ласка, дивіться семантику специфікації у старших ревізіях ES2015.

+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.generator_comprehensions")}}

+ +

Відмінності від заповнень у JS1.7/JS1.8

+ +
Заповнення JS1.7/JS1.8 були прибрані з Gecko 46 ({{bug(1220564)}}).
+ +

Старий синтаксис заповнень (більше не використовується!):

+ +
(X for (Y in Z))
+(X for each (Y in Z))
+(X for (Y of Z))
+
+ +

Відмінності:

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/greater_than/index.html b/files/uk/web/javascript/reference/operators/greater_than/index.html new file mode 100644 index 0000000000..4214afbf62 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/greater_than/index.html @@ -0,0 +1,114 @@ +--- +title: Більше ніж (>) +slug: Web/JavaScript/Reference/Operators/Greater_than +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Greater_than +--- +
{{jsSidebar("Operators")}}
+ +

Оператор більше ніж (>) вертає true, якщо значення лівого операнда більше за значення правого операнда, і false, якщо навпаки.

+ +
{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}
+ + + +

Синтаксис

+ +
x > y
+ +

Опис

+ +

Операнди порівнюються за допомогою алгоритму абстрактного порівняння, який в загальних рисах наведений нижче:

+ + + +

Приклади

+ +

Порівняння рядків

+ +
console.log("а" > "б");        // false
+console.log("а" > "а");        // false
+console.log("а" > "3");        // true
+ +

Порівняння рядка з числом

+ +
console.log("5" > 3);          // true
+console.log("3" > 3);          // false
+console.log("3" > 5);          // false
+
+console.log("привіт" > 5);      // false
+console.log(5 > "привіт");      // false
+
+console.log("5" > 3n);         // true
+console.log("3" > 5n);         // false
+ +

Порівняння числа з числом

+ +
console.log(5 > 3);            // true
+console.log(3 > 3);            // false
+console.log(3 > 5);            // false
+ +

Порівняння числа з BigInt

+ +
console.log(5n > 3);           // true
+console.log(3 > 5n);           // false
+ +

Порівняння Boolean, null, undefined, NaN

+ +
console.log(true > false);     // true
+console.log(false > true);     // false
+
+console.log(true > 0);         // true
+console.log(true > 1);         // false
+
+console.log(null > 0);         // false
+console.log(1 > null);         // true
+
+console.log(undefined > 3);    // false
+console.log(3 > undefined);    // false
+
+console.log(3 > NaN);          // false
+console.log(NaN > 3);          // false
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.greater_than")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html new file mode 100644 index 0000000000..48fd73bebf --- /dev/null +++ b/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html @@ -0,0 +1,99 @@ +--- +title: Більше чи дорівнює (>=) +slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal +--- +
{{jsSidebar("Operators")}}
+ +

Оператор більше чи дорівнює (>=) вертає true, якщо значення лівого операнда більше за значення правого операнда, або дорівнює йому, інакше вертає false.

+ +
{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}
+ + + +

Синтаксис

+ +
 x >= y
+ +

Опис

+ +

Операнди порівнюються за допомогою алгоритму абстрактного порівняння. Дивіться опис алгоритму у документації оператора більше ніж.

+ +

Приклади

+ +

Порівняння рядків

+ +
console.log("а" >= "б");     // false
+console.log("а" >= "а");     // true
+console.log("а" >= "3");     // true
+
+ +

Порівняння рядка з числом

+ +
console.log("5" >= 3);       // true
+console.log("3" >= 3);       // true
+console.log("3" >= 5);       // false
+
+console.log("привіт" >= 5);   // false
+console.log(5 >= "привіт");   // false
+ +

Порівняння числа з числом

+ +
console.log(5 >= 3);         // true
+console.log(3 >= 3);         // true
+console.log(3 >= 5);         // false
+ +

Порівняння числа з BigInt

+ +
console.log(5n >= 3);        // true
+console.log(3 >= 3n);        // true
+console.log(3 >= 5n);        // false
+ +

Порівняння Boolean, null, undefined, NaN

+ +
console.log(true >= false);  // true
+console.log(true >= true);   // true
+console.log(false >= true);  // false
+
+console.log(true >= 0);      // true
+console.log(true >= 1);      // true
+
+console.log(null >= 0);      // true
+console.log(1 >= null);      // true
+
+console.log(undefined >= 3); // false
+console.log(3 >= undefined); // false
+
+console.log(3 >= NaN);       // false
+console.log(NaN >= 3);       // false
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.greater_than_or_equal")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/grouping/index.html b/files/uk/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..bb740ed3a0 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,90 @@ +--- +title: Оператор групування +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +
{{jsSidebar("Operators")}}
+ +

Оператор групування ( ) контролює пріоритет обчислення у виразах.

+ +
{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}
+ + + +

Синтаксис

+ +
 ( )
+ +

Опис

+ +

Оператор групування складається з пари дужок, які ставляться навколо виразу або підвиразу для заміщення звичайного пріоритету операторів, щоб вирази з нижчим пріоритетом могли бути обчислені перед виразами з вищим пріоритетом. Як зрозуміло з назви, він групує те, що знаходиться всередині дужок.

+ +

Приклади

+ +

Заміщення обчислення спочатку множення та ділення, потім додавання та віднімання, щоб обчислити спочатку додавання.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// пріоритет за замовчуванням
+a + b * c     // 7
+// обчислюється наступним чином
+a + (b * c)   // 7
+
+// тепер заміщуємо пріоритет,
+// додавання перед множенням
+(a + b) * c   // 9
+
+// що є еквівалентним
+a * c + b * c // 9
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.grouping")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/in/index.html b/files/uk/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..5de860492c --- /dev/null +++ b/files/uk/web/javascript/reference/operators/in/index.html @@ -0,0 +1,150 @@ +--- +title: Оператор in +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/in +--- +
{{jsSidebar("Operators")}}
+ +

Оператор in повертає true, якщо вказана властивість присутня у вказаному об'єкті або у його ланцюжку прототипів.

+ +

{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}

+ + + +

Синтаксис

+ +
prop in objectName
+ +

Параметри

+ +
+
prop
+
Рядок або символ, що є іменем властивості або індексом масиву (не символи будуть приведені до рядка).
+
+ +
+
objectName
+
Об'єкт, у якому виконується перевірка того, чи він (або його ланцюжок прототипів) містить властивість з вказаним ім'ям.
+
+ +

Опис

+ +

Наступний приклад ілюструє деякі випадки використання оператора in.

+ +
// Масиви
+var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+0 in trees        // вертає true
+3 in trees        // вертає true
+6 in trees        // вертає false
+'лавр' in trees    // вертає false (ви повинні вказати
+                  // індекс, а не значення за цим індексом)
+'length' in trees // вертає true (length є властивістю об'єкта Array)
+Symbol.iterator in trees // вертає true (масиви ітерабельні, працює лише у ES2015+)
+
+// Попередньо визначені об'єкти
+'PI' in Math          // вертає true
+
+// Користувацькі об'єкти
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+'make' in mycar  // вертає true
+'model' in mycar // вертає true
+
+ +

Необхідно вказати об'єкт справа від оператора in. Наприклад, можна вказати рядок, створений за допомогою конструктора String, але не можна вказувати рядковий літерал.

+ +
var color1 = new String('зелений');
+'length' in color1 // вертає true
+
+var color2 = 'кораловий';
+// генерує помилку (color2 не є об'єктом String)
+'length' in color2
+
+ +

Використання in з властивостями, що видалені або дорівнюють undefined

+ +

Якщо видалити властивість оператором delete, оператор in  поверне false для цієї властивості.

+ +
var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+delete mycar.make;
+'make' in mycar;  // вертає false
+
+var trees = new Array('секвоя', 'лавр', 'кедр', 'дуб', 'клен');
+delete trees[3];
+3 in trees; // вертає false
+
+ +

Якщо задати властивості значення {{jsxref("Global_Objects/undefined", "undefined")}}, але не видалити її, оператор in поверне true для цієї властивості.

+ +
var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+mycar.make = undefined;
+'make' in mycar;  // вертає true
+
+ +
var trees = new Array('секвоя', 'лавр', 'кедр', 'дуб', 'клен');
+trees[3] = undefined;
+3 in trees; // вертає true
+
+ +

Успадковані властивості

+ +

Оператор in повертає true для властивостей з ланцюжка прототипів. (Якщо вам потрібно перевірити лише не успадковані властивості, скористайтесь методом {{jsxref("Object.prototype.hasOwnProperty()")}}.)

+ +
'toString' in {}; // вертає true
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.4.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.in")}}

+ +
+ +

Також дивіться

+ + diff --git a/files/uk/web/javascript/reference/operators/increment/index.html b/files/uk/web/javascript/reference/operators/increment/index.html new file mode 100644 index 0000000000..f4f19e5fc0 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/increment/index.html @@ -0,0 +1,80 @@ +--- +title: Інкремент (++) +slug: Web/JavaScript/Reference/Operators/Increment +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Increment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор інкременту (++) збільшує свій операнд (додає одиницю) та повертає його значення.

+ +
{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}
+ + + +

Синтаксис

+ +
Оператор: x++ або ++x
+
+ +

Опис

+ +

Якщо оператор використовується постфіксно, після операнду (наприклад, x++), тоді він збільшує значення та повертає його до збільшення.

+ +

Якщо оператор використовується префіксно, перед операндом (наприклад, ++x), тоді він збільшує значення та повертає його після збільшення.

+ +

Приклади

+ +

Постфіксний інкремент

+ +
let x = 3;
+y = x++;
+
+// y = 3
+// x = 4
+
+ +

Префіксний інкремент

+ +
let a = 2;
+b = ++a;
+
+// a = 3
+// b = 3
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.increment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/index.html b/files/uk/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..301ebeeb2f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/index.html @@ -0,0 +1,273 @@ +--- +title: Вирази та оператори +slug: Web/JavaScript/Reference/Operators +tags: + - Expressions + - JavaScript + - Operators + - Довідка + - Огляд + - Оператори + - вирази +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Ця глава документує усі оператори, вирази та ключові слова мови JavaScript.

+ +

Вирази та оператори за категоріями

+ +

Список у алфавітному порядку дивіться на бічній панелі ліворуч.

+ +

Первинні вирази

+ +

Базові ключові слова та загальні вирази у JavaScript.

+ +
+
{{jsxref("Operators/this", "this")}}
+
Ключове слово this посилається на особливу властивість контексту виконання функції.
+
{{jsxref("Operators/function", "function")}}
+
Ключове слово function визначає функціональний вираз.
+
{{jsxref("Operators/class", "class")}}
+
Ключове слово class визначає вираз класу.
+
{{jsxref("Operators/function*", "function*")}}
+
Ключове слово function* визначає вираз функції-генератора.
+
{{jsxref("Operators/yield", "yield")}}
+
Призупиняє та відновлює виконання функції-генератора.
+
{{jsxref("Operators/yield*", "yield*")}}
+
Делегує до іншої функції-генератора або ітерабельного об'єкта.
+
{{jsxref("Operators/async_function", "async function*")}}
+
async function визначає вираз async-функції.
+
{{jsxref("Operators/await", "await")}}
+
Призупиняє та відновлює виконання async-функції та чекає на вирішення/відхилення проміса.
+
{{jsxref("Global_Objects/Array", "[]")}}
+
Синтаксис масивного ініціалізатора/літералу.
+
{{jsxref("Operators/Ініціалізація_об’єктів", "{}")}}
+
Синтаксис об'єктного ініціалізатора/літералу.
+
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
+
Літерал регулярного виразу.
+
{{jsxref("Operators/Grouping", "( )")}}
+
Оператор групування.
+
+ +

Лівосторонні вирази

+ +

Значення зліва є призначенням присвоєння.

+ +
+
{{jsxref("Operators/Property_accessors", "Доступ до властивостей", "", 1)}}
+
Оператори доступу надають доступ до властивості або методу об'єкта
+ (object.property та object["property"]).
+
{{jsxref("Operators/new", "new")}}
+
Оператор new створює екземпляр конструктора.
+
{{JSxRef("Operators/new%2Etarget", "new.target")}}
+
У конструкторах new.target посилається на конструктор, викликаний оператором {{jsxref("Operators/new", "new")}}.
+
{{jsxref("Operators/super", "super")}}
+
Ключове слово super викликає батьківський конструктор.
+
{{jsxref("Operators/Spread_syntax", "...obj")}}
+
Оператор розкладу дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).
+
+ +

Інкремент та декремент

+ +

Постфіксний/префіксний оператор інкременту та постфіксний/префіксний оператор декременту.

+ +
+
{{jsxref("Operators/Increment", "A++")}}
+
Постфіксний оператор інкременту.
+
{{jsxref("Operators/Decrement", "A--")}}
+
Постфіксний оператор декременту.
+
{{jsxref("Operators/Increment", "++A")}}
+
Префіксний оператор інкременту.
+
{{jsxref("Operators/Decrement", "--A")}}
+
Префіксний оператор декременту.
+
+ +

Унарні оператори

+ +

Унарна операція - це операція лише з одним операндом.

+ +
+
{{jsxref("Operators/delete", "delete")}}
+
Оператор delete видаляє властивість об'єкта.
+
{{jsxref("Operators/void", "void")}}
+
Оператор void відкидає повернене значення виразу.
+
{{jsxref("Operators/typeof", "typeof")}}
+
Оператор typeof визначає тип наданого об'єкта.
+
{{jsxref("Operators/Unary_plus", "+")}}
+
Унарний плюс перетворює свій операнд на число.
+
{{jsxref("Operators/Unary_negation", "-")}}
+
Унарний мінус перетворює свій операнд на число та міняє його знак на протилежний.
+
{{jsxref("Operators/Bitwise_Operators", "~", "#Побітове_НЕ")}}
+
Оператор побітового НЕ.
+
{{jsxref("Operators/Logical_Operators", "!", "#Логічне_НЕ_!")}}
+
Оператор логічного НЕ.
+
+ +

Арифметичні оператори

+ +

Арифметичні оператори приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення.

+ +
+
{{jsxref("Operators/Addition", "+")}}
+
Оператор додавання.
+
{{jsxref("Operators/Subtraction", "-")}}
+
Оператор віднімання.
+
{{jsxref("Operators/Division", "/")}}
+
Оператор ділення.
+
{{jsxref("Operators/Multiplication", "*")}}
+
Оператор множення.
+
{{jsxref("Operators/Remainder", "%")}}
+
Оператор остачі.
+
+ +
+
{{jsxref("Operators/Exponentiation", "**")}}
+
Оператор піднесення до степеня.
+
+ +

Оператори відношення

+ +

Оператор порівняння порівнює свої операнди та повертає значення Boolean на підставі того, чи дорівнює порівняння true.

+ +
+
{{jsxref("Operators/in", "in")}}
+
Оператор in визначає, чи має об'єкт надану властивість.
+
{{jsxref("Operators/instanceof", "instanceof")}}
+
Оператор instanceof визначає, чи є об'єкт екземпляром іншого об'єкта.
+
{{jsxref("Operators/Оператори_порівняння", "<", "#Менше_ніж_<")}}
+
Оператор менше ніж.
+
{{jsxref("Operators/Оператори_порівняння", ">", "#Більше_ніж_>")}}
+
Оператор більше ніж.
+
{{jsxref("Operators/Оператори_порівняння", "<=", "#Менше_чи_дорівнює_<")}}
+
Оператор менше чи дорівнює.
+
{{jsxref("Operators/Оператори_порівняння", ">=", "#Більше_чи_дорівнює_>")}}
+
Оператор більше чи дорівнює.
+
+ +
+

Заувага: => не оператор, а позначення для стрілкових функцій.

+
+ +

Оператори рівності

+ +

Результатом обчислення оператора рівності завжди є значення типу Boolean, на підставі того, чи дорівнює порівняння true.

+ +
+
{{jsxref("Operators/Оператори_порівняння", "==", "#Рівність")}}
+
Оператор рівності.
+
{{jsxref("Operators/Оператори_порівняння", "!=", "#Нерівність_!")}}
+
Оператор нерівності.
+
{{jsxref("Operators/Оператори_порівняння", "===", "#Ідентичність_строга_рівність")}}
+
Оператор ідентичності.
+
{{jsxref("Operators/Оператори_порівняння", "!==", "#Неідентичність_строга_нерівність_!")}}
+
Оператор неідентичності.
+
+ +

Оператори бітового зсуву

+ +

Операції, що зсувають усі біти операнду.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "<<", "#<<_Лівий_зсув")}}
+
Оператор лівого зсуву.
+
{{jsxref("Operators/Bitwise_Operators", ">>", "#>>_Правий_зсув_з_розширенням_знаку")}}
+
Оператор правого зсуву.
+
{{jsxref("Operators/Bitwise_Operators", ">>>", "#>>>_Правий_зсув_із_заповненням_нулями")}}
+
Оператор беззнакового правого зсуву.
+
+ +

Побітові логічні оператори

+ +

Бітові оператори опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць) та повертають стандартні числові значення JavaScript.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "&", "#Побітове_І")}}
+
Побітове І.
+
{{jsxref("Operators/Bitwise_Operators", "|", "#Побітове_АБО")}}
+
Побітове АБО.
+
{{jsxref("Operators/Bitwise_Operators", "^", "#Виключне_побітове_АБО")}}
+
Виключне побітове АБО.
+
+ +

Логічні оператори

+ +

Логічні оператори зазвичай застосовуються до булевих (логічних) значень, і, в цьому випадку, вони повертають булеве значення.

+ +
+
{{jsxref("Operators/Logical_Operators", "&&", "#Логічне_І")}}
+
Логічне І.
+
{{jsxref("Operators/Logical_Operators", "||", "#Логічне_АБО")}}
+
Логічне АБО.
+
+ +

Умовний (тернарний) оператор

+ +
+
{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
+
+

Умовний оператор повертає одне з двох значень, на підставі логічного значення умови.

+
+
+ +

Оператори присвоєння

+ +

Оператор присвоєння присвоює значення своєму лівому операнду на підставі значення свого правого операнду.

+ +
+
{{jsxref("Operators/Оператори_присвоєння", "=", "#Присвоєння")}}
+
Оператор присвоєння.
+
{{jsxref("Operators/Оператори_присвоєння", "*=", "#Присвоєння_з_множенням")}}
+
Присвоєння з множенням.
+
{{jsxref("Operators/Оператори_присвоєння", "/=", "#Присвоєння_з_діленням")}}
+
Присвоєння з діленням.
+
{{jsxref("Operators/Оператори_присвоєння", "%=", "#Присвоєння_остачі")}}
+
Присвоєння остачі.
+
{{jsxref("Operators/Оператори_присвоєння", "+=", "#Присвоєння_з_додаванням")}}
+
Присвоєння з додаванням.
+
{{jsxref("Operators/Оператори_присвоєння", "-=", "#Присвоєння_з_відніманням")}}
+
Присвоєння з відніманням.
+
{{jsxref("Operators/Оператори_присвоєння", "<<=", "#Присвоєння_з_лівим_зсувом")}}
+
Присвоєння з лівим зсувом.
+
{{jsxref("Operators/Оператори_присвоєння", ">>=", "#Присвоєння_з_правим_зсувом")}}
+
Присвоєння з правим зсувом.
+
{{jsxref("Operators/Оператори_присвоєння", ">>>=", "#Присвоєння_з_беззнаковим_правим_зсувом")}}
+
Присвоєння з беззнаковим правим зсувом.
+
{{jsxref("Operators/Оператори_присвоєння", "&=", "#Присвоєння_з_побітовим_І")}}
+
Присвоєння з побітовим І.
+
{{jsxref("Operators/Оператори_присвоєння", "^=", "#Присвоєння_з_виключним_побітовим_АБО")}}
+
Присвоєння з виключним побітовим АБО.
+
{{jsxref("Operators/Оператори_присвоєння", "|=", "#Присвоєння_з_побітовим_АБО")}}
+
Присвоєння з побітовим АБО.
+
{{jsxref("Operators/Деструктуризація", "[a, b] = [1, 2]")}}
+ {{jsxref("Operators/Деструктуризація", "{a, b} = {a:1, b:2}")}}
+
+

Деструктуризаційне присвоєння дозволяє присвоювати властивості масиву або об'єкта змінним, використовуючи синтаксис, схожий на масивні або об'єктні літерали.

+
+
+ +

Оператор кома

+ +
+
{{jsxref("Operators/Comma_Operator", ",")}}
+
Оператор кома дозволяє обчислення кількох виразів у єдиній інструкції та повертає результат останнього виразу.
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/inequality/index.html b/files/uk/web/javascript/reference/operators/inequality/index.html new file mode 100644 index 0000000000..d1621b0c0c --- /dev/null +++ b/files/uk/web/javascript/reference/operators/inequality/index.html @@ -0,0 +1,97 @@ +--- +title: Нерівність (!=) +slug: Web/JavaScript/Reference/Operators/Inequality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Inequality +--- +
{{jsSidebar("Operators")}}
+ +

Оператор нерівності (!=) перевіряє, чи є два операнди нерівними, повертаючи результат типу Boolean. На відміну від оператора строгої нерівності, він намагається перетворити для порівняння операнди, які належать до різних типів.

+ +
{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}
+ + + +

Синтаксис

+ +
x != y
+ +

Опис

+ +

Оператор нерівності перевіряє, чи є його операнди нерівними. Це протилежність оператора рівності, тому наступні два рядки завжди повернуть однаковий результат:

+ +
x != y
+
+!(x == y)
+ +

Подробиці алгоритму порівняння дивіться на сторінці оператора рівності.

+ +

Як і оператор рівності, оператор нерівності намагатиметься перетворити операнди різних типів перед порівнянням:

+ +
3 != "3"; // false
+ +

Щоб не допустити цього, та щоб різні типи вважались різними, використовуйте, натомість, оператор строгої нерівності:

+ +
3 !== "3"; // true
+ +

Приклади

+ +

Порівняння без перетворення типів

+ +
1 != 2;              // true
+"привіт" != "агов";   // true
+
+1 != 1;              // false
+"привіт" != "привіт";  // false
+ +

Порівняння з перетворенням типів

+ +
"1" !=  1;            // false
+1 != "1";             // false
+0 != false;           // false
+0 != null;            // true
+0 != undefined;       // true
+null != undefined;    // false
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 != 3;         // false
+number1 != number2;   // true
+ +

Порівняння об'єктів

+ +
const object1 = {"key": "value"}
+const object2 = {"key": "value"};
+
+object1 != object2 // true
+object2 != object2 // false
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.inequality")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/instanceof/index.html b/files/uk/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..eca9cdabeb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,186 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Object + - Об'єкт + - Оператор +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +
{{jsSidebar("Operators")}}
+ +

Оператор instanceof перевіряє, чи присутня властивість конструктора prototype десь у ланцюжку прототипів об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}
+ + + +

Синтаксис

+ +
object instanceof constructor
+ +

Параметри

+ +
+
object
+
Об'єкт, який потрібно перевірити.
+
+ +
+
constructor
+
Функція для перевірки.
+
+ +

Опис

+ +

Оператор instanceof перевіряє присутність constructor.prototype у ланцюжку прототипів об'єкта object.

+ +
// визначення конструкторів
+function C() {}
+function D() {}
+
+var o = new C();
+
+// true, тому що: Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, тому що D.prototype немає у ланцюжку прототипів o
+o instanceof D;
+
+o instanceof Object; // true, тому що:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, тому що C.prototype більше немає у
+// ланцюжку прототипів o
+o instanceof C;
+
+D.prototype = new C(); // додати C до збірки D [[Prototype]]
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true, оскільки C.prototype тепер є у ланцюжку прототипів o3
+
+ +

Зауважте, що значення перевірки instanceof може змінитись на підставі змін у властивості конструкторів prototype, також воно може змінитись через зміну прототипу об'єкта методом Object.setPrototypeOf. Це також можливо зробити використанням нестандартної псевдовластивості __proto__.

+ +

instanceof та декілька контекстів (наприклад, фрейми чи вікна)

+ +

Різні області видимості мають різні середовища виконання. Це означає, що вони мають різні вбудовані складові (різні глобальні об'єкти, різні конструктори і т. д.). Це може призвести до неочікуваних результатів. Наприклад, [] instanceof window.frames[0].Array поверне false, тому що Array.prototype !== window.frames[0].Array, а масиви успадковуються від першого.

+ +

Спочатку це може виглядати дивно, але, коли починаєш мати справу з кількома фреймами або вікнами у скрипті та передавати об'єкти з одного контексту у інший через функції, це є правильним та сильним аспектом. Наприклад, ви можете безпечно перевірити, чи є наданий об'єкт, насправді, масивом, за допомогою Array.isArray(myObj)

+ +

Наприклад, перевіряючи, чи Nodes є SVGElement у іншому контексті, ви можете використати myNode instanceof myNode.ownerDocument.defaultView.SVGElement

+ +
Примітка для розробників Mozilla:
+У коді, що використовує XPCOM, instanceof має особливий ефект: obj instanceof xpcomInterface (наприклад, Components.interfaces.nsIFile) викликає obj.QueryInterface(xpcomInterface) та повертає true, якщо QueryInterface має успішний результат. Побічним ефектом такого виклику є те, що ви можете використовувати властивості xpcomInterface на obj після успішної перевірки instanceof. На відміну від стандартних глобальних складових JavaScript, перевірка obj instanceof xpcomInterface працює, як очікується, навіть якщо obj з іншої області видимості.
+ +

Приклади

+ +

Демострація того, що String та Date належать до типу Object, та виняткові випадки

+ +

Наступний код використовує instanceof, щоб продемонструвати, що об'єкти String та Date також належать до типу Object (вони походять від Object).

+ +

Однак, об'єкти, створені за допомогою нотації об'єктного літералу, є винятком: Хоча прототип дорівнює undefined, instanceof Object вертає true.

+ +
var simpleStr = 'Це простий рядок';
+var myString  = new String();
+var newStr    = new String('Рядок, створений конструктором');
+var myDate    = new Date();
+var myObj     = {};
+var myNonObj  = Object.create(null);
+
+simpleStr instanceof String; // вертає false, перевіряє ланцюжок прототипів, знаходить undefined
+myString  instanceof String; // вертає true
+newStr    instanceof String; // вертає true
+myString  instanceof Object; // вертає true
+
+myObj    instanceof Object;    // вертає true, не зважаючи на те, що прототип дорівнює undefined
+({})     instanceof Object;    // вертає true, те саме, що у попередньому випадку
+myNonObj instanceof Object;    // вертає false, спосіб створення об'єкту, який не є екземпляром Object
+
+myString instanceof Date;   // вертає false
+
+myDate instanceof Date;     // вертає true
+myDate instanceof Object;   // вертає true
+myDate instanceof String;   // вертає false
+
+ +

Демонстрація того, що mycar належить до типу Car та до типу Object

+ +

Наступний код створює тип об'єктів Car та екземпляр цього типу, mycar. Оператор instanceof демонструє, що об'єкт mycar належить до типу Car та до типу Object.

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+var mycar = new Car('Honda', 'Accord', 1998);
+var a = mycar instanceof Car;    // вертає true
+var b = mycar instanceof Object; // вертає true
+
+ +

Не instanceof

+ +

Щоб перевірити, що об'єкт не є екземпляром певного Конструктора, ви можете зробити

+ +
if (!(mycar instanceof Car)) {
+  // Зробити щось, наприклад, mycar = new Car(mycar)
+}
+
+ +

Це, насправді, відрізняється від коду

+ +
if (!mycar instanceof Car)
+ +

який завжди дорівнюватиме false (!mycar обчислюється перед instanceof, тому ви завжди перевірятимете, чи є булеве значення екземпляром Car).

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.4.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.instanceof")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/left_shift/index.html b/files/uk/web/javascript/reference/operators/left_shift/index.html new file mode 100644 index 0000000000..b963c613e6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/left_shift/index.html @@ -0,0 +1,73 @@ +--- +title: Лівий зсув (<<) +slug: Web/JavaScript/Reference/Operators/Left_shift +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Left_shift +--- +
{{jsSidebar("Operators")}}
+ +

Оператор лівого зсуву (<<) виконує зсув першого операнда на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.

+ +
{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}
+ + + +

Синтаксис

+ +
a << b
+
+ +

Опис

+ +

Цей оператор виконує зсув першого операнда на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.

+ +

Наприклад, 9 << 2 повертає 36:

+ +
.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 << 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10)
+
+ +

Бітовий зсув будь-якого числа x ліворуч на y бітів вертає x * 2 ** y.
+ Отже, для прикладу: 9 << 3 можна перекласти як: 9 * (2 ** 3) = 9 * (8) = 72.

+ +

Приклади

+ +

Використання лівого зсуву

+ +
9 << 3; // 72
+
+// 9 * (2 ** 3) = 9 * (8) = 72
+
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.left_shift")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html new file mode 100644 index 0000000000..4063453f99 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з лівим зсувом (<<=) +slug: Web/JavaScript/Reference/Operators/Left_shift_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Left_shift_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з лівим зсувом (<<=) виконує зсув на вказану кількість бітів ліворуч та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x <<= y
+Значення: x   = x << y
+ +

Приклади

+ +

Використання присвоєння з лівим зсувом

+ +
let a = 5;
+// 00000000000000000000000000000101
+
+bar <<= 2; // 20
+// 00000000000000000000000000010100
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.left_shift_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/less_than/index.html b/files/uk/web/javascript/reference/operators/less_than/index.html new file mode 100644 index 0000000000..9833b8532e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/less_than/index.html @@ -0,0 +1,99 @@ +--- +title: Менше ніж (<) +slug: Web/JavaScript/Reference/Operators/Less_than +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Less_than +--- +
{{jsSidebar("Operators")}}
+ +

Оператор менше ніж (<) повертає true, якщо значення лівого операнда менше за значення правого операнда, інакше повертає false.

+ +
{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}
+ + + +

Синтаксис

+ +
 x < y
+ +

Опис

+ +

Операнди порівнюються за допомогою алгоритму абстрактного порівняння. Дивіться опис алгоритму у документації оператора більше ніж.

+ +

Приклади

+ +

Порівняння рядків

+ +
console.log("а" < "б");        // true
+console.log("а" < "а");        // false
+console.log("а" < "3");        // false
+ +

Порівняння рядка з числом

+ +
console.log("5" < 3);          // false
+console.log("3" < 3);          // false
+console.log("3" < 5);          // true
+
+console.log("привіт" < 5);      // false
+console.log(5 < "привіт");      // false
+
+console.log("5" < 3n);         // false
+console.log("3" < 5n);         // true
+ +

Порівняння числа з числом

+ +
console.log(5 < 3);            // false
+console.log(3 < 3);            // false
+console.log(3 < 5);            // true
+ +

Порівняння числа з BigInt

+ +
console.log(5n < 3);           // false
+console.log(3 < 5n);           // true
+ +

Порівняння Boolean, null, undefined, NaN

+ +
console.log(true < false);     // false
+console.log(false < true);     // true
+
+console.log(0 < true);         // true
+console.log(true < 1);         // false
+
+console.log(null < 0);         // false
+console.log(null < 1);         // true
+
+console.log(undefined < 3);    // false
+console.log(3 < undefined);    // false
+
+console.log(3 < NaN);          // false
+console.log(NaN < 3);          // false
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.less_than")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html b/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html new file mode 100644 index 0000000000..03af5a5d45 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html @@ -0,0 +1,101 @@ +--- +title: Менше чи дорівнює (<=) +slug: Web/JavaScript/Reference/Operators/Less_than_or_equal +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Less_than_or_equal +--- +
{{jsSidebar("Operators")}}
+ +

Оператор менше чи дорівнює (<=) вертає true, якщо значення лівого операнда менше за значення правого операнда, або дорівнює йому, інакше вертає false.

+ +
{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}
+ + + +

Синтаксис

+ +
 x <= y
+ +

Опис

+ +

Операнди порівнюються за допомогою алгоритму абстрактного порівняння. Дивіться опис алгоритму у документації оператора більше ніж.

+ +

Приклади

+ +

Порівняння рядків

+ +
console.log("а" <= "б");     // true
+console.log("а" <= "а");     // true
+console.log("а" <= "3");     // false
+
+ +

Порівняння рядка з числом

+ +
console.log("5" <= 3);       // false
+console.log("3" <= 3);       // true
+console.log("3" <= 5);       // true
+
+console.log("привіт" <= 5);   // false
+console.log(5 <= "привіт");   // false
+ +

Порівняння числа з числом

+ +
console.log(5 <= 3);         // false
+console.log(3 <= 3);         // true
+console.log(3 <= 5);         // true
+ +

Порівняння числа з BigInt

+ +
console.log(5n <= 3);        // false
+console.log(3 <= 3n);        // true
+console.log(3 <= 5n);        // true
+ +

Порівняння Boolean, null, undefined, NaN

+ +
console.log(true <= false);  // false
+console.log(true <= true);   // true
+console.log(false <= true);  // true
+
+console.log(true <= 0);      // false
+console.log(true <= 1);      // true
+
+console.log(null <= 0);      // true
+console.log(1 <= null);      // false
+
+console.log(undefined <= 3); // false
+console.log(3 <= undefined); // false
+
+console.log(3 <= NaN);       // false
+console.log(NaN <= 3);       // false
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.less_than_or_equal")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/logical_and/index.html b/files/uk/web/javascript/reference/operators/logical_and/index.html new file mode 100644 index 0000000000..c8d1ccaae6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_and/index.html @@ -0,0 +1,142 @@ +--- +title: Логічне І (&&) +slug: Web/JavaScript/Reference/Operators/Logical_AND +tags: + - JavaScript + - Довідка + - Логічний оператор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Logical_AND +--- +
{{jsSidebar("Operators")}}
+ +

Логічний оператор І (&&) (логічна кон'юнкція) для набору операндів дорівнює true тільки тоді, коли усі його операнди дорівнюють true. Він зазвичай використовується з {{jsxref("Boolean","булевими")}} (логічними) значеннями. У цьому випадку він повертає булеве значення. Однак, оператор && насправді повертає значення одного з наданих операндів, а отже, якщо цей оператор застосовується не з булевими значеннями, він поверне не булеве значення.

+ +
{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}
+ + + +

Синтаксис

+ +
вираз1 && вираз2
+
+ +

Опис

+ +

Якщо вираз1 може бути приведений до true, вертає вираз2; інакше, вертає вираз1.

+ +

Якщо значення може бути приведене до true, воно є так званим {{Glossary("truthy", "правдивим")}} значенням. Якщо значення може бути приведене до false, воно називається {{Glossary("falsy", "хибним")}}.

+ +

Прикладами виразів, які можуть бути приведені до false, є:

+ + + +

Хоча оператори && та || можуть використовуватись з операндами не булевого типу, вони все одно можуть вважатися булевими операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до булевих примітивів. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним оператором НЕ або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.

+ +

Обчислення з коротким замиканням

+ +

Логічні вирази І обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" під час обчислення за наступним правилом:

+ +

(якийсь хибний вираз) && expr обчислюється як хибний вираз;

+ +

Коротке замикання означає, що частина expr у прикладі не обчислюється, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо expr є викликом функції, виклику не станеться). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:

+ +
function A(){ console.log('викликано A'); return false; }
+function B(){ console.log('викликано B'); return true; }
+
+console.log( A() && B() );
+// виводить "викликано A" в результаті виклику функції,
+// потім виводить false (що є результатом виклику оператора)
+
+ +

Пріоритет операторів

+ +

Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор && виконується перед оператором || (дивіться Пріоритет операторів).

+ +
true || false && false      // вертає true, оскільки && виконується першим
+(true || false) && false    // вертає false, бо пріоритет операторів не застосовується
+ +

Приклади

+ +

Використання І

+ +

Наступний код наводить приклади оператора && (логічне І).

+ +
a1 = true  && true       // t && t вертає true
+a2 = true  && false      // t && f вертає false
+a3 = false && true       // f && t вертає false
+a4 = false && (3 == 4)   // f && f вертає false
+a5 = 'Кіт' && 'Пес'      // t && t вертає "Пес"
+a6 = false && 'Кіт'      // f && t вертає false
+a7 = 'Кіт' && false      // t && f вертає false
+a8 = ''    && false      // f && f вертає ""
+a9 = false && ''         // f && f вертає false
+ +

Правила перетворення для булевих значень

+ +

Перетворення І на АБО

+ +

Наступна операція з булевими значеннями:

+ +
bCondition1 && bCondition2
+ +

завжди дорівнює:

+ +
!(!bCondition1 || !bCondition2)
+ +

Перетворення АБО на І

+ +

Наступна операція з булевими значеннями:

+ +
bCondition1 || bCondition2
+ +

завжди дорівнює:

+ +
!(!bCondition1 && !bCondition2)
+ +

Прибирання вкладених дужок

+ +

Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись певних правил.

+ +

Наступна складена операція з булевими значеннями:

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

завжди дорівнює:

+ +
bCondition1 || bCondition2 && bCondition3
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#prod-LogicalANDExpression', 'Logical AND expression')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.logical_and")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/logical_not/index.html b/files/uk/web/javascript/reference/operators/logical_not/index.html new file mode 100644 index 0000000000..6bfa34b281 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_not/index.html @@ -0,0 +1,105 @@ +--- +title: Логічне НЕ (!) +slug: Web/JavaScript/Reference/Operators/Logical_NOT +tags: + - JavaScript + - Довідка + - Логічний оператор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Logical_NOT +--- +
{{jsSidebar("Operators")}}
+ +

Логічний оператор НЕ (!) (логічне доповнення, заперечення) перетворює правдивість на хибність та навпаки. Він зазвичай використовується з {{jsxref("Boolean", "булевими")}} (логічними) значеннями. При використанні з не булевими значеннями він вертає false, якщо його єдиний операнд може бути приведений до true; інакше, вертає true.

+ +
{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}}
+ + + +

Синтаксис

+ +
!expr
+
+ +

Опис

+ +

Вертає false, якщо його єдиний операнд може бути приведений до true; інакше, вертає true.

+ +

Якщо значення може бути приведене до true, воно є так званим {{Glossary("truthy","правдивим")}} значенням. Якщо значення може бути приведене до false, воно називається {{Glossary("falsy","хибним")}}.

+ +

Прикладами виразів, які можуть бути приведені до false, є:

+ + + +

Хоча оператор ! може використовуватись з операндами не булевого типу, він все одно вважатиметься булевим оператором, оскільки значення, яке він вертає, завжди може бути приведене до булевого примітиву. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним оператором НЕ або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.

+ +

Приклади

+ +

Використання НЕ

+ +

Наступний код демонструє приклади оператора ! (логічне НЕ).

+ +
n1 = !true               // !t вертає false
+n2 = !false              // !f вертає true
+n3 = !''                 // !f вертає true
+n4 = !'Кіт'              // !t вертає false
+ +

Подвійне НЕ (!!)

+ +

Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний булевий примітив. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).

+ +

Таке саме перетворення можна виконати функцією {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.

+ +
n1 = !!true                   // !!truthy вертає true
+n2 = !!{}                     // !!truthy вертає true: будь-який об'єкт є правдивим...
+n3 = !!(new Boolean(false))   // ...навіть об'єкти Boolean, в яких .valueOf() дорівнює false!
+n4 = !!false                  // !!falsy вертає false
+n5 = !!""                     // !!falsy вертає false
+n6 = !!Boolean(false)         // !!falsy вертає false
+ +

Перетворення НЕ

+ +

Наступна операція з булевими значеннями:

+ +
!!bCondition
+ +

завжди дорівнює:

+ +
bCondition
+ +

Специфікації

+ + + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-logical-not-operator', 'Logical NOT expression')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.logical_not")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/logical_operators/index.html b/files/uk/web/javascript/reference/operators/logical_operators/index.html new file mode 100644 index 0000000000..a2613381eb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_operators/index.html @@ -0,0 +1,252 @@ +--- +title: Логічні оператори +slug: Web/JavaScript/Reference/Operators/Logical_Operators +tags: + - JavaScript + - Оператор + - логічний +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Логічні оператори зазвичай застосовуються до {{jsxref("Boolean", "булевих")}} (логічних) значень. В цьому випадку вони повертають значення типу Boolean. Однак, оператори && та || насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу.

+ +
{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}
+ + + +

Опис

+ +

Логічні оператори описані у наведеній нижче таблиці (вирази expr можуть належати до будь-якого типу, не лише булевого):

+ + + + + + + + + + + + + + + + + + + + + + + + +
ОператорСинтаксисОпис
Логічне І (&&)expr1 && expr2Якщо вираз expr1 може бути приведений до true, вертає expr2; інакше, вертає expr1.
Логічне АБО (||)expr1 || expr2Якщо вираз expr1 може бути приведений до true, вертає expr1; інакше, вертає expr2.
Логічне НЕ (!)!exprВертає false, якщо його єдиний операнд може бути приведений до true; інакше, вертає true.
+ +

Якщо значення може бути приведене до true, то воно називається {{Glossary("truthy","правдивим")}}. Якщо значення може бути приведене до false, воно називається {{Glossary("falsy","хибним")}}.

+ +

Приклади виразів, які можуть бути приведені до false:

+ + + +

Хоча оператори && та || можуть використовуватись з операндами не булевого (логічного) типу, вони все одно можуть вважатися логічними операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до булевих примітивів. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним оператором НЕ або конструктором Boolean.

+ +

Коротке замикання обчислення

+ +

Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:

+ + + +

Коротке замикання означає, що наведені вирази expr не обчислюються, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо expr є викликом функції, виклик не відбувається). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:

+ +
function A(){ console.log('викликано A'); return false; }
+function B(){ console.log('викликано B'); return true; }
+
+console.log( A() && B() );
+// виводить "викликано A" в результаті виклику функції,
+// потім виводить false (що є результатом виклику оператора)
+
+console.log( B() || A() );
+// виводить "викликано B" в результаті виклику функції,
+// потім виводить true (що є результатом виклику оператора)
+
+ +

Пріоритет операторів

+ +

Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор && виконується перед оператором || (дивіться Пріоритет операторів).

+ +
true || false && false      // вертає true, оскільки && виконується першим
+(true || false) && false    // вертає false, оскільки не можна застосувати пріоритет операторів
+ +

Логічне І (&&)

+ +

Наступний код наводить приклади оператора && (логічне І).

+ +
a1 = true  && true       // t && t вертає true
+a2 = true  && false      // t && f вертає false
+a3 = false && true       // f && t вертає false
+a4 = false && (3 == 4)   // f && f вертає false
+a5 = 'Кіт' && 'Пес'      // t && t вертає "Пес"
+a6 = false && 'Кіт'      // f && t вертає false
+a7 = 'Кіт' && false      // t && f вертає false
+a8 = ''    && false      // f && f вертає ""
+a9 = false && ''         // f && f вертає false
+
+ +

Логічне АБО (||)

+ +

Наступний код наводить приклади оператора || (логічне АБО).

+ +
o1 = true  || true       // t || t вертає true
+o2 = false || true       // f || t вертає true
+o3 = true  || false      // t || f вертає true
+o4 = false || (3 == 4)   // f || f вертає false
+o5 = 'Кіт' || 'Пес'      // t || t вертає "Кіт"
+o6 = false || 'Кіт'      // f || t вертає "Кіт"
+o7 = 'Кіт' || false      // t || f вертає "Кіт"
+o8 = ''    || false      // f || f вертає false
+o9 = false || ''         // f || f вертає ""
+o10 = false || varObject // f || object вертає varObject
+
+ +
+

Заувага: Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке хибне значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте оператор null-об'єднання (однак, станом на листопад 2019 ця функціональність ще не була широко реалізована і має вважатися експериментальною, оскільки знаходиться на Стадії 3).

+
+ +

Логічне НЕ (!)

+ +

Наступний код демонструє приклади оператора ! (логічне НЕ).

+ +
n1 = !true               // !t вертає false
+n2 = !false              // !f вертає true
+n3 = !''                 // !f вертає true
+n4 = !'Cat'              // !t вертає false
+
+ +

Подвійне НЕ (!!)

+ +

Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний булевий примітив. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).

+ +

Таке саме перетворення можна виконати функцією {{jsxref("Boolean")}}.

+ +
n1 = !!true                   // !!truthy вертає true
+n2 = !!{}                     // !!truthy вертає true: будь-який об'єкт є правдивим...
+n3 = !!(new Boolean(false))   // ...навіть об'єкти Boolean з false .valueOf()!
+n4 = !!false                  // !!falsy вертає false
+n5 = !!""                     // !!falsy вертає false
+n6 = !!Boolean(false)         // !!falsy вертає false
+
+ +

Правила перетворення для булевих значень

+ +

Перетворення І на АБО

+ +

Наступна операція з булевими значеннями:

+ +
умова1 && умова2
+ +

завжди дорівнює:

+ +
!(!умова1 || !умова2)
+ +

Перетворення АБО на І

+ +

Наступна операція з булевими значеннями:

+ +
умова1 || умова2
+ +

завжди дорівнює:

+ +
!(!умова1 && !умова2)
+ +

Перетворення НЕ

+ +

Наступна операція з булевими значеннями:

+ +
!!умова
+ +

завжди дорівнює:

+ +
умова
+ +

Прибирання вкладених дужок

+ +

Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись деяких правил.

+ +

Прибирання вкладеного І

+ +

Наступна складена операція з булевими значеннями:

+ +
умова1 || (умова2 && умова3)
+ +

завжди дорівнює:

+ +
умова1 || умова2 && умова3
+ +

Прибирання вкладеного АБО

+ +

Наступна складена операція з булевими значеннями:

+ +
умова1 && (умова2 || умова3)
+ +

завжди дорівнює:

+ +
!(!умова1 || !умова2 && !умова3)
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Визначені у кількох розділах специфікації: Логічний оператор НЕ, Бінарні логічні оператори
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Визначені у кількох розділах специфікації: Логічний оператор НЕ, Бінарні логічні оператори
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Визначені у кількох розділах специфікації: Логічний оператор НЕ, Бінарні логічні оператори
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.logical")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/logical_or/index.html b/files/uk/web/javascript/reference/operators/logical_or/index.html new file mode 100644 index 0000000000..16dc2868bb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_or/index.html @@ -0,0 +1,151 @@ +--- +title: Логічне АБО (||) +slug: Web/JavaScript/Reference/Operators/Logical_OR +tags: + - JavaScript + - Довідка + - Логічний оператор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Logical_OR +--- +
{{jsSidebar("Operators")}}
+ +

Логічний оператор АБО (||) (логічна диз'юнкція) для набору операндів повертає true тільки якщо один чи більше з його операндів дорівнюють true. Зазвичай його використовують з {{jsxref("Boolean","булевими")}} (логічними) значеннями. В цьому випадку він повертає булеве значення. Однак, оператор || насправді повертає значення одного з наданих операндів, а отже, якщо цей оператор застосовується з не булевими значеннями, він поверне не булеве значення.

+ +
{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}}
+ + + +

Синтаксис

+ +
вираз1 || вираз2
+
+ +

Опис

+ +

Якщо вираз1 можна привести до true, вертає вираз1; інакше, вертає вираз2.

+ +

Якщо значення може бути приведене до true, воно є так званим {{Glossary("truthy","правдивим")}} значенням. Якщо значення може бути приведене до false, воно називається {{Glossary("falsy","хибним")}}.

+ +

Прикладами виразів, які можуть бути приведені до false, є:

+ + + +

Хоча оператор || може використовуватись з операндами не булевого типу, він все одно може вважатися булевим оператором, оскільки значення, які він повертає, завжди можуть бути приведені до булевого примітиву. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним оператором НЕ або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.

+ +

Обчислення з коротким замиканням

+ +

Логічні вирази АБО обчислюються зліва направо, вони перевіряються на "коротке замикання" під час обчислення за наступним правилом:

+ +

(якийсь правдивий вираз) || expr обчислюється як правдивий вираз.

+ +

Коротке замикання означає, що частина expr у прикладі не обчислюється, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо expr є викликом функції, виклику не станеться). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:

+ +
function A(){ console.log('викликано A'); return false; }
+function B(){ console.log('викликано B'); return true; }
+
+console.log( B() || A() );
+// виводить "викликано B" в результаті виклику функції,
+// потім виводить true (що є результатом виклику оператора)
+
+ +

Пріоритет операторів

+ +

Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор && виконується перед оператором || (дивіться Пріоритет операторів).

+ +
true || false && false      // вертає true, оскільки && виконується першим
+(true || false) && false    // вертає false, бо пріоритет операторів не застосовується
+ +

Приклади

+ +

Використання АБО

+ +

Наступний код наводить приклади оператора || (логічне АБО).

+ +
o1 = true  || true       // t || t вертає true
+o2 = false || true       // f || t вертає true
+o3 = true  || false      // t || f вертає true
+o4 = false || (3 == 4)   // f || f вертає false
+o5 = 'Кіт' || 'Пес'      // t || t вертає "Кіт"
+o6 = false || 'Кіт'      // f || t вертає "Кіт"
+o7 = 'Кіт' || false      // t || f вертає "Кіт"
+o8 = ''    || false      // f || f вертає false
+o9 = false || ''         // f || f вертає ""
+o10 = false || varObject // f || об'єкт вертає varObject
+
+ +
+

Заувага: Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке хибне значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте оператор null-об'єднання.

+
+ +

Правила перетворення для булевих значень

+ +

Перетворення І на АБО

+ +

Наступна операція з булевими значеннями:

+ +
bCondition1 && bCondition2
+ +

завжди дорівнює:

+ +
!(!bCondition1 || !bCondition2)
+ +

Перетворення АБО на І

+ +

Наступна операція з булевими значеннями:

+ +
bCondition1 || bCondition2
+ +

завжди дорівнює:

+ +
!(!bCondition1 && !bCondition2)
+ +

Прибирання вкладених дужок

+ +

Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись певних правил.

+ +

Наступна складена операція з булевими значеннями:

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

завжди дорівнює:

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

Специфікації

+ + + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.logical_or")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/multiplication/index.html b/files/uk/web/javascript/reference/operators/multiplication/index.html new file mode 100644 index 0000000000..7f55e8f8ac --- /dev/null +++ b/files/uk/web/javascript/reference/operators/multiplication/index.html @@ -0,0 +1,73 @@ +--- +title: Множення (*) +slug: Web/JavaScript/Reference/Operators/Multiplication +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Multiplication +--- +
{{jsSidebar("Operators")}}
+ +

Оператор множення (*) повертає добуток операндів.

+ +
{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x * y
+
+ +

Приклади

+ +

Множення чисел

+ +
 2 * 2      // 4
+-2 * 2     // -4
+
+ +

Множення на нескінченність

+ +
Infinity * 0         // NaN
+Infinity * Infinity  // Infinity
+ +

Множення нечислових значень

+ +
'foo' * 2 // NaN
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Multiplication operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.multiplication")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html b/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html new file mode 100644 index 0000000000..4d80c47ec9 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з множенням (*=) +slug: Web/JavaScript/Reference/Operators/Multiplication_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Multiplication_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з множенням (*=) помножує змінну на значення правого операнда та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x *= y
+Значення: x  = x * y
+ +

Приклади

+ +

Використання присвоєння з множенням

+ +
// Розглянемо таку змінну
+//  bar = 5
+
+bar *= 2     // 10
+bar *= 'foo' // NaN
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.multiplication_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/new.target/index.html b/files/uk/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..fd0e121e3a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,97 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +
{{JSSidebar("Operators")}}
+ +

Псевдовластивість new.target дозволяє виявляти, чи були функції або конструктори створені за допомогою оператора new. У конструкторах та функціях, запущених з використанням оператора new, new.target повертає посилання на конструктор або функцію. У звичайних викликах функцій new.target дорівнює {{jsxref("undefined")}}.

+ +
{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}
+ + + +

Синтаксис

+ +
new.target
+ +

Опис

+ +

Синтаксис new.target складається з ключового слова new, крапки та ідентифікатора target. Зазвичай, зліва від крапки стоїть об'єкт, до властивості якого здійснюється звернення, але тут new не є об'єктом.

+ +

Псевдовластивість new.target доступна в усіх функціях. У конструкторах класів вона посилається на зконструйований клас. У звичайних функціях вона посилається на саму функцію, за умови, що вона була викликана з використанням оператора new; в інших випадках new.target дорівнює {{jsxref("undefined")}}. У стрілкових функціях new.target успадковується від оточуючої області видимості.

+ +

Приклади

+ +

new.target у викликах функцій

+ +

У звичайних викликах функцій (як протилежність викликам конструкторів) new.target дорівнює {{jsxref("undefined")}}. Це дозволяє визначити, чи була функція викликана з new як конструктор.

+ +
function Foo() {
+  if (!new.target) throw 'Foo() має викликатись з new';
+  console.log('Foo викликано з new');
+}
+
+new Foo(); // виводить "Foo викликано з new"
+Foo(); // викидає "Foo() має викликатись з new"
+
+ +

new.target у конструкторах

+ +

У конструкторах класів new.target посилається на конструктор, що був безпосередньо викликаний new. Це також стосується випадку, коли конструктор знаходиться у батьківському класі та був делегований з дочірнього конструктора.

+ +
class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // виводить "A"
+var b = new B(); // виводить "B"
+
+class C { constructor() { console.log(new.target); } }
+class D extends C { constructor() { super(); } }
+
+var c = new C(); // виводить class C{constructor(){console.log(new.target);}}
+var d = new D(); // виводить class D extends C{constructor(){super();}}
+ +

Отже, з наведеного вище прикладу класів C та D, схоже, що new.target вказує на визначення класу, екземпляр якого було ініціалізовано. Наприклад, коли було ініціалізовано екземпляр D за допомогою new, було виведено визначення класу D, і схожим чином у випадку з c, було виведено клас C.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.new_target")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/new/index.html b/files/uk/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..692938fdd2 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/new/index.html @@ -0,0 +1,197 @@ +--- +title: Оператор new +slug: Web/JavaScript/Reference/Operators/new +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/new +--- +
{{jsSidebar("Operators")}}
+ +

Оператор new дозволяє розробникам створити екземпляр визначеного користувачем типу об'єкта, або одного із вбудованих типів об'єктів, що містять функцію-конструктор. Ключове слово new робить наступне:

+ +
    +
  1. Створює простий, порожній об'єкт JavaScript;
  2. +
  3. Прив'язує (присвоює в якості конструктора) інший об'єкт до цього об'єкта;
  4. +
  5. Передає створений об'єкт з кроку 1 в якості контексту this;
  6. +
  7. Вертає this, якщо функція не вертає свій власний об'єкт. 
  8. +
+ +

{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}

+ +

Синтаксис

+ +
new constructor[([arguments])]
+ +

Параметри

+ +
+
constructor
+
Клас чи функція, що визначає тип екземпляру об'єкта.
+
+ +
+
arguments
+
Список значень, з якими викликатиметься constructor.
+
+ +

Опис

+ +

Створення визначеного користувачем об'єкта потребує двох кроків:

+ +
    +
  1. Визначити тип об'єкта, написавши функцію.
  2. +
  3. Створити екземпляр об'єкта за допомогою new.
  4. +
+ +

Щоб визначити тип об'єкта, створіть функцію типу об'єкта, яка зазначає його ім'я та властивості. Об'єкт може мати властивість, яка є іншим об'єктом. Дивіться приклади нижче.

+ +

Коли виконується код new Foo(...), відбувається наступне:

+ +
    +
  1. Створюється новий об'єкт, успадкований від Foo.prototype.
  2. +
  3. Викликається функція-конструктор Foo із заданими аргументами та з контекстом this, прив'язаним до новоствореного об'єкта. new Foo дорівнює new Foo(), тобто, якщо жодних аргументів не задано, Foo викликається без аргументів.
  4. +
  5. Об'єкт (що не є null, false, 3.1415 чи іншим простим типом), який повертається функцією-конструктором, стає результатом усього виразу new. Якщо функція-конструктор не повертає об'єкт явно, використовується об'єкт, створений у кроці 1. (Зазвичай, конструктори не повертають значень, але можуть це зробити, якщо потрібно переписати звичайний процес створення об'єкта.)
  6. +
+ +

Ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція car1.color = "чорний" додає властивість color (колір) до об'єкта car1 та присвоює їй значення "чорний". Однак, це не впливає на інші об'єкти. Щоб додати нову властивість до усіх об'єктів одного типу, ви маєте додати властивість до визначення типу об'єкта Car.

+ +

Ви можете додати спільну властивість до попередньо визначеного типу об'єкта за допомогою властивості Function.prototype. Це визначає властивість, спільну для усіх об'єктів, створених цією функцією, а не лише для одного екземпляру цього типу. Наступний код додає властивість color (колір) зі значенням "стандартний колір" усім об'єктам типу Car, а потім замінює це значення рядком "чорний" тільки для екземпляру об'єкта car1. Дивіться більше у статті prototype.

+ +
function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = 'стандартний колір';
+console.log(car1.color);    // стандартний колір
+
+car1.color = 'чорний';
+console.log(car1.color);   // чорний
+
+console.log(Object.getPrototypeOf(car1).color) //стандартний колір
+console.log(Object.getPrototypeOf(car2).color) //стандартний колір
+console.log(car1.color)  // чорний
+console.log(car2.color) // стандартний колір
+ +
+

Якщо ви не напишете оператор new, функція-конструктор буде викликана як будь-яка звичайна фукнція, без створення об'єкта. У цьому випадку значення this також буде іншим.

+
+ +

Приклади

+ +

Тип об'єкта та екземпляр об'єкта

+ +

Припустимо, вам потрібно створити тип об'єкта для машин. Тип об'єкта має називатися Car і має містити властивості для марки, моделі та року випуску. Для цього ви б написали наступну функцію:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

Тепер ви можете створити об'єкт під назвою myCar:

+ +
var myСar = new Car('Eagle', 'Talon TSi', 1993);
+
+ +

Ця інструкція створює об'єкт myСar і присвоює його властивостям задані значення. В результаті значенням myCar.make буде строка "Eagle", myCar.year - ціле число 1993, тощо.
+
+ Викликаючи new, можна створити необмежене число об'єктів типу Car. Наприклад:

+ +
var kensCar = new Car('Nissan', '300ZX', 1992);
+
+ +

Властивість об'єкта, яка є іншим об'єктом

+ +

Припустимо, ви визначаєте об'єкт на ім'я Person (людина) наступним чином:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+
+ +

Інстанціюємо два нових об'єкти типу Person:

+ +
var rand = new Person('Rand McNally', 33, 'Ч');
+var ken = new Person('Ken Jones', 39, 'Ч');
+
+ +

Далі можна доповнити визначення Car і включити в нього властивість owner (власник). Ця властивість буде приймати об'єкт Person, як у прикладі нижче:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

Тепер, щоб інстанціювати нові об'єкти, ви робите наступне:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+
+ +

Замість того, щоб передавати рядковий літерал або ціле число при створенні нових об'єктів, ці інструкції передають об'єкти rand та ken в якості власників. Щоб дізнатись ім'я власника car2, ви можете звернутись до даної властивості:

+ +
car2.owner.name
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.new")}}

+ +

Також див.

+ + diff --git a/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..7b48188731 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,166 @@ +--- +title: Оператор null-об'єднання +slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +tags: + - JavaScript + - null-об'єднання + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +

{{JSSidebar("Operators")}}

+ +

Оператор null-об'єднання (??) - це логічний оператор, який повертає свій правий операнд, якщо його лівий операнд дорівнює {{jsxref("null")}} чи {{jsxref("undefined")}}, інакше, він повертає свій лівий операнд.

+ +

На відміну від логічного АБО (||), лівий операнд повертається, якщо це хибне значення, яке не дорівнює null чи undefined. Іншими словами, якщо ви використовуєте || для надання значення за замовчуванням іншій змінній foo, ви можете зіткнутися з неочікуваною поведінкою, якщо використовуєте хибні значення (напр., '' або 0). Дивіться нижче більше прикладів.

+ +
{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}
+ + + +

Синтаксис

+ +
лівийВираз ?? правийВираз
+
+ +

Опис

+ +

Оператор null-об'єднання повертає результати свого правого виразу, якщо лівий вираз дорівнює або {{jsxref("null")}}, або {{jsxref("undefined")}}.

+ +

Присвоєння змінній значення за замовчуванням

+ +

Раніше, якщо потрібно було присвоїти змінній значення за замовчуванням, звичайною практикою було використання логічного оператора АБО (||):

+ +
let foo;
+...
+// змінній foo ще не присвоювали значення, тому вона ще дорівнює undefined
+let someDummyText = foo || 'Привіт!';
+ +

Однак, через те, що || є булевим логічним оператором, лівий операнд примусово приводився до булевого значення для обчислення, і будь-яке хибне значення (0, '', NaN, null, undefined) не поверталось. Ця поведінка може спричинити несподівані наслідки, якщо ви розглядаєте 0, '' чи NaN як коректні значення.

+ +
let count;
+let text;
+...
+count = 0;
+text = "";
+...
+let qty = count || 42;
+let message = text || "привіт!";
+console.log(qty);     // 42, а не 0
+console.log(message); // "привіт!", а не ""
+
+ +

Оператор null-об'єднання уникає цієї пастки, повертаючи другий операнд лише тоді, коли перший повертає або null, або undefined (і ніяке інше хибне значення):

+ +
let myText = ''; // Порожній рядок (який також є хибним значенням)
+
+let notFalsyText = myText || 'Привіт';
+console.log(notFalsyText); // Привіт
+
+let preservingFalsy = myText ?? 'Привіт, сусід';
+console.log(preservingFalsy); // '' (оскільки myText не дорівнює undefined чи null)
+
+ +

Коротке замикання

+ +

Як і у логічному операторі АБО, правий вираз не обчислюється, якщо лівий не дорівнює ані null, ані undefined.

+ +
function A() { console.log('викликано A'); return undefined;}
+function B() { console.log('викликано B'); return false;}
+function C() { console.log('викликано C'); return "foo";}
+
+console.log( A() ?? C() );
+// виводить "викликано A", далі "викликано C", і далі "foo",
+// оскільки функція A() повернула undefined, отже, обидва вирази обчислюються
+
+console.log( B() ?? C() );
+// виводить "викликано B", далі "false",
+// оскільки B() повернула false (а не null чи undefined), правий
+// вираз не обчислювався
+
+ +

Не утворює ланцюгів з операторами І чи АБО

+ +

Неможливо об'єднати оператори І (&&) та АБО (||) безпосередньо з ??. В таких випадках буде викинуто помилку SyntaxError.

+ +
null || undefined ?? "foo"; // викидає SyntaxError
+true || undefined ?? "foo"; // викидає SyntaxError
+ +

Однак, використання дужок для явного зазначення пріоритетності, є коректним:

+ +
(null || undefined) ?? "foo"; // вертає "foo"
+
+ +

Зв'язок з оператором необов'язкового ланцюгування (?.)

+ +

Оператор null-об'єднання ставиться до значень undefined та null особливим чином, так само, як оператор необов'язкового ланцюгування (?.), який є корисним для доступу до властивостей об'єкта, які можуть дорівнювати null чи undefined.

+ +
let foo = { someFooProp: "привіт" };
+
+console.log(foo.someFooProp?.toUpperCase());  // "ПРИВІТ"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+
+ +

Приклади

+ +

У цьому прикладі ми задаємо початкові значення, але залишаємо значення, які не дорівнюють null чи undefined.

+ +
function getMiscObj(){
+  return {
+    aNullProperty: null,
+    emptyText: "",
+    someNumber: 42
+  };
+};
+
+const miscObj = getMiscObj();
+
+const newObj = {};
+newObj.propA = miscObj.aNullProperty ?? "початкове для A";
+newObj.propB = miscObj.emptyText ?? "початкове для B";
+newObj.propC = miscObj.someNumber ?? 0;
+
+console.log(newObj.propA); // "початкове для A"
+console.log(newObj.propB); // "" (оскільки порожній рядок не дорівнює null чи undefined)
+console.log(newObj.propC); // 42
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
Proposal for the "nullish coalescing" operatorСтадія 3
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.nullish_coalescing")}}

+ +

Хід реалізації

+ +

Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у Test262, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.

+ +
{{EmbedTest262ReportResultsTable("coalesce-expression")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/operator_precedence/index.html b/files/uk/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..678647952c --- /dev/null +++ b/files/uk/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,332 @@ +--- +title: Пріоритет операторів +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - JavaScript + - Оператор + - пріоритет +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +
{{jsSidebar("Operators")}}
+ +

Пріоритет операторів визначає, яким чином розбиратимуться оператори по відношенню один до одного. Оператори з вищим пріоритетом стають операндами операторів з нижчим пріоритетом.

+ +
{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}
+ + + +

Асоціативність

+ +

Асоціативність визначає те, яким чином розбираються оператори з однаковим пріоритетом. Наприклад, розглянемо вираз:

+ +
a OP b OP c
+
+ +

Лівоасоціативність (зліва направо) означає, що вони оброблятимуться як (a OP b) OP c, в той час як правоасоціативність (справа наліво) означає, що він буде інтерпретований як a OP (b OP c). Оператори присвоєння є правоасоціативними, отже, ви можете написати:

+ +
a = b = 5;
+
+ +

очікуючи, що a та b отримають значення 5. Все тому, що оператор присвоєння повертає значення, яке було присвоєне. Спочатку b присвоюється 5. Потім a також присвоюється 5, значення, яке повертається від b = 5, або правого операнду присвоєння.

+ +

Приклади

+ +
3 > 2 && 2 > 1
+// вертає true
+
+3 > 2 > 1
+// вертає false, тому що 3 > 2 дорівнює true, а true > 1 дорівнює false
+// Додавання дужок робить все зрозумілішим: (3 > 2) > 1
+ +

Таблиця

+ +

Ця таблиця впорядкована від найвищого (21) до найнижчого (1) пріоритету.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ПріоритетТип оператораАсоціативністьОкремі оператори
21{{jsxref("Operators/Grouping", "Групування", "", 1)}}н/з( … )
20{{jsxref("Operators/Property_Accessors", "Доступ до властивостей", "#Крапкова_нотація", 1)}}зліва направо… . …
{{jsxref("Operators/Property_Accessors", "Доступ до обчислених властивостей","#Дужкова_нотація", 1)}}зліва направо… [ … ]
{{jsxref("Operators/new","new")}} (зі списком аргументів)н/зnew … ( … )
Виклик функціїзліва направо… ( )
Необов'язкове ланцюгуваннязліва направо?.
19{{jsxref("Operators/new","new")}} (без списку аргументів)справа налівоnew …
18{{jsxref("Operators/Arithmetic_Operators","Постфіксний інкремент","#Increment", 1)}}н/з… ++
{{jsxref("Operators/Arithmetic_Operators","Постфіксний декремент","#Decrement", 1)}}… --
17Логічне НЕсправа наліво! …
Побітове НЕ~ …
Унарний плюс+ …
Унарний мінус- …
Префіксний інкремент++ …
Префіксний декремент-- …
{{jsxref("Operators/typeof", "typeof")}}typeof …
{{jsxref("Operators/void", "void")}}void …
{{jsxref("Operators/delete", "delete")}}delete …
{{jsxref("Operators/await", "await")}}await …
16Піднесення до степенясправа наліво… ** …
15Множеннязліва направо… * …
Ділення… / …
Остача… % …
14Додаваннязліва направо… + …
Віднімання… - …
13Бітовий лівий зсувзліва направо… << …
Бітовий правий зсув… >> …
Бітовий беззнаковий правий зсув… >>> …
12Менше ніжзліва направо… < …
Менше чи дорівнює… <= …
Більше ніж… > …
Більше чи порівнює… >= …
{{jsxref("Operators/in", "in")}}… in …
{{jsxref("Operators/instanceof", "instanceof")}}… instanceof …
11Рівністьзліва направо… == …
Нерівність… != …
Строга рівність… === …
Строга нерівність… !== …
10Побітове Ізліва направо… & …
9Виключне побітове АБОзліва направо… ^ …
8Побітове АБОзліва направо… | …
7Оператор null-об'єднаннязліва направо… ?? …
6Логічне Ізліва направо… && …
5Логічне АБОзліва направо… || …
4Умовний операторсправа наліво… ? … : …
3Присвоєннясправа наліво… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2{{jsxref("Operators/yield", "yield")}}справа налівоyield …
{{jsxref("Operators/yield*", "yield*")}}yield* …
1Кома / Послідовністьзліва направо… , …
diff --git a/files/uk/web/javascript/reference/operators/optional_chaining/index.html b/files/uk/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..c20ef9f9a6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,194 @@ +--- +title: Необов'язкове ланцюгування +slug: Web/JavaScript/Reference/Operators/Optional_chaining +tags: + - JavaScript + - Optional chaining + - Експериментальний + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +
{{jsSidebar("Operators")}}
+ +
{{SeeCompatTable}}
+ +
+ +

Оператор необов'язкового ланцюгування ?. дозволяє читати значення властивості, розташованої глибоко всередині ланцюга пов'язаних об'єктів, без необхідності прямо підтверджувати, що кожне посилання у ланцюгу є дійсним. Оператор ?. діє схоже з оператором ланцюгування ., за винятком того, що замість помилки у випадку посилання на {{jsxref("null")}} чи {{jsxref("undefined")}}, вираз виконає коротке замикання та поверне undefined. При використанні з викликами функцій, вираз поверне undefined, якщо задана функція не існує.

+ +

Це створює коротші та простіші вирази для звернення через ланцюг властивостей, коли існує ймовірність зустріти відсутнє посилання. Це також може бути корисним для дослідження вмісту об'єкта, коли немає гарантії того, що певні властивості є обов'язковими.

+ +
{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}
+ +
+ + + +

Синтаксис

+ +
obj?.prop
+obj?.[expr]
+arr?.[index]
+func?.(args)
+
+ +

Опис

+ +

Оператор необов'язкового ланцюгування надає спосіб спростити звернення до значень через поєднані об'єкти, коли є ймовірність, що посилання чи функція дорівнюватиме undefined чи null.

+ +

Наприклад, розглянемо об'єкт obj, який має вкладену структуру. Без необов'язкового ланцюгування пошук глибоко вкладеної властивості вимагає перевірки проміжних посилань, як от:

+ +
let nestedProp = obj.first && obj.first.second;
+ +

Підтверджуємо, що значення obj.first не null (і не undefined) перед тим, як звертатись до obj.first.second. Це дозволяє запобігти помилці, яка виникла б, якщо б ми просто звернулись прямо до obj.first.second без перевірки obj.first.

+ +

Проте, з оператором необов'язкового ланцюгування (?.) ви не мусите робити явну перевірку та переривати вираз в залежності від стану obj.first перед тим, як звертатись до obj.first.second:

+ +
let nestedProp = obj.first?.second;
+ +

При використанні оператора ?. замість простого . JavaScript виконує неявну перевірку, щоб переконатись, що obj.first не дорівнює null чи undefined, перед тим, як звертатись до obj.first.second. Якщо obj.first дорівнює null чи undefined, вираз автоматично виконує коротке замикання, повертаючи undefined.

+ +

Це еквівалентно наступному:

+ +
let nestedProp = ((obj.first == null || obj.first == undefined) ? undefined : obj.first.second);
+ +

Необов'язкове ланцюгування з викликами функцій

+ +

Ви можете скористатись необов'язковим ланцюгуванням під час виклику методу, який, можливо, не існує. Це може бути зручно, наприклад, при використанні API, у якому метод може бути недоступний, чи то через застарілу реалізацію, чи тому, що функціональність недоступна на пристрої користувача.

+ +

При використанні необов'язкового ланцюгування, вираз автоматично повертає undefined замість викидання винятку, якщо метод не знайдений:

+ +
let result = someInterface.customMethod?.();
+ +
+

Заувага: Якщо існує властивість з таким іменем, яка не є функцією, використання ?. все ж спричинить виняток {{jsxref("TypeError")}} (x.y is not a function).

+
+ +

Необов'язкові зворотні виклики та обробники подій

+ +

Якщо ви використовуєте зворотні виклики або методи fetch з об'єкта з деструктуризаційним присвоєнням, ви, можливо, матимете неіснуючі значення, які не можна викликати як функції, поки ви не перевірили, що вони існують. Використовуючи ?., можна уникнути цієї додаткової перевірки:

+ +
// Написано згідно ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... використати дані
+  }
+  catch (err) {
+    if (onError) { // Перевірка, що onError існує
+      onError(err.message);
+    }
+  }
+}
+
+ +
// Використання необов'язкового ланцюгування з викликами функцій
+function doSomething(onContent, onError) {
+  try {
+   // ... використати дані
+  }
+  catch (err) {
+    onError?.(err.message); // жодного винятку, якщо onError є undefined
+  }
+}
+
+ +

Необов'язкове ланцюгування з виразами

+ +

Ви також можете використати оператор необов'язкового ланцюгування, звертаючись до властивостей через вираз з використанням дужкової нотації:

+ +
let nestedProp = obj?.['prop' + 'Name'];
+
+ +

Доступ до елементу масиву через необов'язкове ланцюгування

+ +
let arrayItem = arr?.[42];
+ +

Приклади

+ +

Базовий приклад

+ +

Цей приклад звертається до значення властивості name ключа bar у мапі, де немає такого ключа. Отже, результатом буде undefined.

+ +
let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;
+ +

Коротке замикання обчислення

+ +

При використанні необов'язкового ланцюгування з виразами, якщо лівий операнд дорівнює null чи undefined, вираз не буде обчислюватись. Для прикладу:

+ +
let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0, оскільки значення x не збільшувалось
+
+ +

Складання операторів необов'язкового ланцюгування

+ +

У вкладених структурах можна використовувати необов'язкове ланцюгування декілька раз:

+ +
let customer = {
+  name: "Карл",
+  details: {
+    age: 82,
+    location: "Далекі гори" // точна адреса невідома
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … це також працює для ланцюгування виклику функції
+let duration = vacations.trip?.getTime?.();
+
+ +

Поєднання з оператором null-об'єднання

+ +

Можна скористатись оператором null-об'єднання після необов'язкового ланцюгування, щоб задати значення, коли воно не було знайдене:

+ +
let customer = {
+  name: "Карл",
+  details: { age: 82 }
+};
+let customerCity = customer?.city ?? "Невідоме місто";
+console.log(customerCity); // Невідоме місто
+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
Пропозиція щодо оператора "необов'язкового ланцюгування"Стадія 4
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.operators.optional_chaining")}}

+
+ +

Хід реалізації

+ +

Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у Test262, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.

+ +
{{EmbedTest262ReportResultsTable("optional-chaining")}}
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/pipeline_operator/index.html b/files/uk/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..496e425950 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,87 @@ +--- +title: Конвеєрний оператор +slug: Web/JavaScript/Reference/Operators/Pipeline_operator +tags: + - JavaScript + - Експериментальний + - Оператор + - конвеєрний +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +
{{jsSidebar("Operators")}} {{SeeCompatTable}}
+ +

Експериментальний конвеєрний оператор |> (наразі на стадії 1) передає значення виразу у функцію. Це дозволяє створювати ланцюги функціональних викликів, які легко читаються. Результатом є синтаксичний цукор, у якому виклик функції з єдиним аргументом можна записати наступним чином:

+ +
let url = "%21" |> decodeURI;
+ +

Аналогічний виклик у традиційному синтаксисі виглядає так:

+ +
let url = decodeURI("%21");
+
+ +

Синтаксис

+ +
вираз |> функція
+
+ +

Значення вказаного виразу передається у функцію як її єдиний параметр.

+ +

Параметри

+ +

expression

+ +

    Будь-який дозволений вираз.

+ +

function

+ +

    Будь-яка функція.

+ +

Приклади

+ +

Ланцюги функціональних викликів

+ +

Конвеєрний оператор може покращити читабельність при створенні ланцюга з декількох функцій.

+ +
const double = (n) => n * 2;
+const increment = (n) => n + 1;
+
+// без конвеєрного оператора
+double(increment(double(double(5)))); // 42
+
+// з конвеєрним оператором
+5 |> double |> double |> increment |> double; // 42
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
Pipeline operator draftStage 1Поки що не є частиною специфікації ECMAScript.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.operators.pipeline")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/property_accessors/index.html b/files/uk/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..919d36b898 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,157 @@ +--- +title: Доступ до властивостей +slug: Web/JavaScript/Reference/Operators/Property_Accessors +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +
{{jsSidebar("Operators")}}
+ +

Оператори доступу до властивостей надають доступ до властивостей об'єкта за допомогою крапкової або дужкової нотації.

+ +
{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}
+ + + +

Синтаксис

+ +
object.property
+object['property']
+
+ +

Опис

+ +

Можна сприймати об'єкт як асоціативний масив (також відомий як словник, мапа, хеш, таблиця пошуку). Ключами у цьому масиві є імена властивостей об'єкта.

+ +

Говорячи про властивості об'єкта, прийнято розрізняти властивості та методи. Однак, це розрізнення є не більше, ніж конвенцією. Метод - це просто властивість, яку можна викликати, наприклад, якщо вона має посилання на екземпляр {{jsxref("Function","функції")}} в якості значення.

+ +

Існує два способи доступу до властивостей: крапкова нотація та дужкова нотація.

+ +

Крапкова нотація

+ +
get = object.property;
+object.property = set;
+
+ +

У цьому коді property має бути коректним {{glossary("ідентифікатор","ідентифікатором")}} JavaScript . Наприклад, ідентифікатор object.$1 коректний, а object.1 ні.

+ +
document.createElement('pre');
+
+ +

Тут метод на ім'я "createElement" отримується з об'єкта document і викликається.

+ +

Якщо ви використовуєте метод для числового літералу, і числовий літерал не має показника степеня чи десяткової крапки, залиште {{glossary("Whitespace", "пробільний символ(и)")}} перед крапкою, що передує виклику методу, щоб крапка не була інтерпретована як десятковий розділювач.

+ +
77 .toExponential();
+// або
+77
+.toExponential();
+// або
+(77).toExponential();
+// або
+77..toExponential();
+// або
+77.0.toExponential();
+// тому що 77. === 77.0, неоднозначності немає
+ +

Дужкова нотація

+ +
get = object[property_name];
+object[property_name] = set;
+
+ +

property_name - це рядок або {{glossary("Symbol","символ")}}. Він не мусить бути коректним ідентифікатором; він може мати будь-яке значення, наприклад, "1foo", "!bar!", чи навіть " " (пробіл).

+ +
document['createElement']('pre');
+
+ +

Цей код виконує абсолютно те саме, що й попередній приклад.

+ +

Перед дужковим позначенням дозволені пробіли.

+ +
document ['createElement']('pre');
+ +

Імена властивостей

+ +

Імена властивостей можуть бути рядком або {{glossary("Symbol","символом")}}. Будь-яке інше значення, в тому числі числове, примусово приводиться до рядка.

+ +
var object = {};
+object['1'] = 'значення';
+console.log(object[1]);
+
+ +

Цей код виводить "значення", оскільки 1 перетворюється у '1'.

+ +
var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'значення';
+console.log(object[bar]);
+
+ +

Цей код також виведе "значення", оскільки і foo, і bar перетворюються у один і той самий рядок.

+ +

У рушії JavaScript SpiderMonkey цей рядок дорівнював би "[object Object]".

+ +

Прив'язка методу

+ +

Метод не прив'язаний того до об'єкта, чиїм методом він є. Зокрема, значення this не зафіксоване у методі, тобто, this не обов'язково вказує на об'єкт, який містить цей метод. Замість цього, this "передається" викликом функції. Дивіться метод bind.

+ +

Заувага щодо eval

+ +

Новачки у JavaScript часто роблять помилку, використовуючи {{jsxref("eval", "eval()")}} там, де можна використати дужкову нотацію.

+ +

Наприклад, наступний синтаксис можна зустріти у багатьох скриптах.

+ +
x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+
+ +

Функція eval() повільна, її бажано уникати, де це можливо. Також, змінна strFormControl мала б містити ідентифікатор, що не є обов'язковим для імен та ID елементів форми. Краще використовувати дужкову нотацію:

+ +
x = document.forms['form_name'].elements[strFormControl].value;
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.property_accessors")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/remainder/index.html b/files/uk/web/javascript/reference/operators/remainder/index.html new file mode 100644 index 0000000000..b72092ca6b --- /dev/null +++ b/files/uk/web/javascript/reference/operators/remainder/index.html @@ -0,0 +1,77 @@ +--- +title: Остача (%) +slug: Web/JavaScript/Reference/Operators/Remainder +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +
{{jsSidebar("Operators")}}
+ +

Оператор остачі (%) повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.

+ +
{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: var1 % var2
+
+ +

Приклади

+ +

Остача з додатним діленим

+ +
 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+
+ +

Остача з від'ємним діленим

+ +
-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0
+ +

Остача з NaN

+ +
NaN % 2 // NaN
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.remainder")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/remainder_assignment/index.html b/files/uk/web/javascript/reference/operators/remainder_assignment/index.html new file mode 100644 index 0000000000..8953ddca4a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/remainder_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння остачі (%=) +slug: Web/JavaScript/Reference/Operators/Remainder_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Remainder_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння остачі (%=) ділить змінну на значення правого операнда та присвоює остачу змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x %= y
+Значення: x  = x % y
+ +

Приклади

+ +

Використання присвоєння остачі

+ +
// Розглянемо таку змінну
+// bar = 5
+
+bar %= 2     // 1
+bar %= 'foo' // NaN
+bar %= 0     // NaN
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.remainder_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/right_shift/index.html b/files/uk/web/javascript/reference/operators/right_shift/index.html new file mode 100644 index 0000000000..f8d660123a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/right_shift/index.html @@ -0,0 +1,74 @@ +--- +title: Правий зсув (>>) +slug: Web/JavaScript/Reference/Operators/Right_shift +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Right_shift +--- +
{{jsSidebar("Operators")}}
+ +

Оператор правого зсуву (>>) виконує зсув першого операнда на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва оператора "з розширенням знаку".

+ +
{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}
+ + + +

Синтаксис

+ +
a >> b
+
+ +

Опис

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".

+ +

Наприклад, 9 >> 2 дорівнює 2:

+ +
.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 >> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (base 10)
+
+ +

Аналогічно, -9 >> 2 дорівнює -3, оскільки знак зберігається:

+ +
.    -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                   --------------------------------
+-9 >> 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (base 10)
+
+ +

Приклади

+ +

Використання правого зсуву

+ +
 9 >> 2; //  2
+-9 >> 2; // -3
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.right_shift")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html new file mode 100644 index 0000000000..d006d97e7f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з правим зсувом (>>=) +slug: Web/JavaScript/Reference/Operators/Right_shift_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Right_shift_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з правим зсувом (>>=) виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну.

+ +
{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x >>= y
+Значення: x   = x >> y
+ +

Приклади

+ +

Використання присвоєння з правим зсувом

+ +
let a = 5; //   (00000000000000000000000000000101)
+a >>= 2;   // 1 (00000000000000000000000000000001)
+
+let b = -5; //  (-00000000000000000000000000000101)
+b >>= 2;  // -2 (-00000000000000000000000000000010)
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.right_shift_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/spread_syntax/index.html b/files/uk/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..ca9598e9eb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,253 @@ +--- +title: Оператор розкладу +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - JavaScript + - Довідка +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +
{{jsSidebar("Operators")}}
+ +

Оператор розкладу дозволяє розкласти ітерабельний об'єкт, такий як масив чи рядок, там, де очікується нуль чи більше аргументів (для викликів функцій) чи елементів (для масивних літералів), або розкласти об'єкт там, де очікується нуль або більше пар ключ-значення (для об'єктних літералів).

+ +
{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}
+ + + +

Синтаксис

+ +

Для викликів функцій:

+ +
myFunction(...iterableObj);
+
+ +

Для масивних літералів або рядків:

+ +
[...iterableObj, "4", "п'ять", 6];
+ +

Для об'єктних літералів (нове у ECMAScript 2018):

+ +
let objClone = { ...obj };
+ +

Залишковий синтаксис (параметри)

+ +

Залишковий синтаксис виглядає так само, як синтаксис розкладання, але використовується для деструктуризації масивів та об'єктів.

+ +

В певному сенсі, залишковий синтаксис є протилежністю синтаксису розкладу. Розклад "розпаковує" масив на його окремі елементи, в той час, як залишковий синтаксис збирає множину елементів та "стискає" їх у єдиний елемент. Дивіться {{jsxref("Functions/решта_параметрів", "залишкові параметри", "", 1)}}.

+ +

Приклади

+ +

Розклад у викликах функцій

+ +

Заміна apply()

+ +

Зазвичай, {{jsxref("Function.prototype.apply()")}} використовується, коли ви бажаєте використати елементи масиву як аргументи у функції.

+ +
function myFunction(x, y, z) { }
+const args = [0, 1, 2];
+myFunction.apply(null, args);
+ +

З оператором розкладу наведене можна записати так:

+ +
function myFunction(x, y, z) { }
+const args = [0, 1, 2];
+myFunction(...args);
+ +

Будь-який аргумент у списку може використати синтаксис розкладу, і він може використовуватись неодноразово.

+ +
function myFunction(v, w, x, y, z) { }
+const args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);
+ +

Apply для оператора new

+ +

Викликаючи конструктор з {{jsxref("Operators/new", "new")}}, неможливо прямо використовувати масив та apply (apply виконує [[Call]], а не [[Construct]]). Однак, масив можна легко використовувати з new завдяки синтаксису розкладу:

+ +
const dateFields = [1970, 0, 1];  // 1 Січня 1970
+const d = new Date(...dateFields);
+
+ +

Щоб використати new з масивом параметрів без розкладу, вам довелося б зробити це опосередковано, частковим застосуванням:

+ +
function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function myConstructor () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="знач1";
+   this.prop2="знач2";
+};
+
+var myArguments = ["вітаю", "як", "ся", "маєте", "п.", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["вітаю", "як", "ся", "маєте", "п.", null]
+// (log of "new myConstructorWithArguments"): {prop1: "знач1", prop2: "знач2"}
+ +

Розклад у масивних літералах

+ +

Потужніший масивний літерал

+ +

Без оператора розкладу, щоб створити новий масив, частиною якого є існуючий масив, літерального синтаксису масивів недостатньо, доводиться використовувати імперативний код з використанням комбінації з {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, і т. д. З синтаксисом розкладу все стає набагато лаконічнішим:

+ +
var parts = ['плечі', 'коліна'];
+var lyrics = ['голова', ...parts, 'та', 'пальці'];
+// ["голова", "плечі", "коліна", "та", "пальці"]
+
+ +

Як і розклад аргументів, ... може використовуватись будь-де у масивному літералі, і може використовуватись неодноразово.

+ +

Копія масиву

+ +
const arr = [1, 2, 3];
+const arr2 = [...arr]; // як arr.slice()
+
+arr2.push(4);
+// arr2 стає [1, 2, 3, 4]
+// arr залишається незміненим
+
+ +
+

Заувага: Оператор розкладу ефективно йде на один рівень вглиб при копіюванні масиву. Тому він може бути непридатний для копіювання багатовимірних масивів, як показано у наступному прикладі (те саме з {{jsxref("Object.assign()")}} та розкладом).

+ +
const a = [[1], [2], [3]];
+const b = [...a];
+
+b.shift().shift();
+//  1
+
+//  О, ні!  Тепер масив 'a' також змінився:
+a
+//  [[], [2], [3]]
+
+ +

Краще об'єднання масивів

+ +

Метод {{jsxref("Array.prototype.concat()")}} часто використовується для приєднання масиву в кінець існуючого масиву. Без оператора розкладу це робиться так:

+ +
const arr1 = [0, 1, 2];
+const arr2 = [3, 4, 5];
+
+// Додати всі елементи з arr2 у arr1
+arr1 = arr1.concat(arr2);
+ +

З оператором розкладу отримуємо:

+ +
let arr1 = [0, 1, 2];
+let arr2 = [3, 4, 5];
+
+arr1 = [...arr1, ...arr2];
+// arr1 тепер [0, 1, 2, 3, 4, 5]
+// Заувага: Не використовуйте const, це спричинить TypeError (недозволене присвоєння)
+
+ +

Метод {{jsxref("Array.prototype.unshift()")}} часто використовується для додавання масиву значень у початок існуючого масиву. Без оператора розкладу це робиться так:

+ +
const arr1 = [0, 1, 2];
+const arr2 = [3, 4, 5];
+
+// Подати усі елементи з arr2 до arr1
+Array.prototype.unshift.apply(arr1, arr2)
+
+// arr1 тепер [3, 4, 5, 0, 1, 2]
+ +

З оператором розкладу отримуємо:

+ +
let arr1 = [0, 1, 2];
+let arr2 = [3, 4, 5];
+
+arr1 = [...arr2, ...arr1];
+// arr1 тепер [3, 4, 5, 0, 1, 2]
+
+ +
+

Заувага: На відміну від unshift(), цей код створює новий arr1, а не змінює початковий масив arr1.

+
+ +

Розклад у об'єктних літералах

+ +

Пропозиція Rest/Spread Properties for ECMAScript (стадія 4) додала розкладені властивості до {{jsxref("Operators/Ініціалізація_об’єктів", "об'єктних літералів", 1)}}. Цей синтаксис копіює особисті, перелічувані властивості наданого об'єкта у новий об'єкт.

+ +

Дрібне клонування (без прототипу) чи злиття об'єктів тепер можливе за допомогою синтаксису, коротшого, ніж {{jsxref("Object.assign()")}}.

+ +
const obj1 = { foo: 'bar', x: 42 };
+const obj2 = { foo: 'baz', y: 13 };
+
+const clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+const mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }
+ +

Зауважте, що {{jsxref("Object.assign()")}} запускає {{jsxref("Functions/set", "сетери")}}, а оператор розкладу ні.

+ +

Зауважте, що ви не можете ані замінити, ані імітувати функцію {{jsxref("Object.assign()")}}:

+ +
let obj1 = { foo: 'bar', x: 42 };
+let obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) => ( { ...objects } );
+
+let mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+let mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }
+ +

У наведеному прикладі оператор розкладу працює не так, як можна було очікувати: він розкладає масив аргументів у об'єктний літерал, через наявність залишкового параметра.

+ +

Тільки для ітерабельних об'єктів

+ +

Самі по собі об'єкти не є ітерабельними, але вони стають ітерабельними, коли використовуються у масиві, або з функціями перебору, такими як map()reduce() та assign(). При з'єднанні 2-х об'єктів за допомогою оператору розкладу, вважається, що застосовується функція перебору, коли відбувається з'єднання.

+ +

Оператор розкладу (окрім випадку розкладених властивостей) може застосовуватись тільки до ітерабельних об'єктів:

+ +
const obj = {'key1': 'value1'};
+const array = [...obj]; // TypeError: obj is not iterable
+
+ +

Розклад з великою кількістю значень

+ +

При використанні оператора розкладу для викликів функцій пам'ятайте про можливість перевищити ліміт кількості аргументів рушія JavaScript. Більше інформації дивіться у статті {{jsxref("Function.prototype.apply", "apply()")}}.

+ +

Специфікації

+ + + + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-array-initializer', 'Array initializer')}}
{{SpecName('ESDraft', '#sec-object-initializer', 'Object initializer')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.spread")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/strict_equality/index.html b/files/uk/web/javascript/reference/operators/strict_equality/index.html new file mode 100644 index 0000000000..4f420a049f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/strict_equality/index.html @@ -0,0 +1,105 @@ +--- +title: Строга рівність (===) +slug: Web/JavaScript/Reference/Operators/Strict_equality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Strict_equality +--- +
{{jsSidebar("Operators")}}
+ +

Оператор строгої рівності (===) перевіряє, чи є два операнди рівними, повертаючи результат типу Boolean. На відміну від оператора рівності, оператор строгої рівності завжди вважає операнди різних типів різними.

+ +
{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}
+ + + +

Синтаксис

+ +
x === y
+ +

Опис

+ +

Оператори строгої рівності (=== та !==) використовують алгоритм строгої рівності для порівняння двох операндів.

+ + + +

Найпомітніша відмінність між цим оператором та оператором рівності (==) полягає в тому, що, якщо операнди належать до різних типів, оператор == намагається привести їх до одного типу перед порівнянням.

+ +

Приклади

+ +

Порівняння операндів одного типу

+ +
console.log("привіт" === "привіт");   // true
+console.log("привіт" === "агов");    // false
+
+console.log(3 === 3);               // true
+console.log(3 === 4);               // false
+
+console.log(true === true);         // true
+console.log(true === false);        // false
+
+console.log(null === null);         // true
+ +

Порівняння операндів різних типів

+ +
console.log("3" === 3);           // false
+
+console.log(true === 1);          // false
+
+console.log(null === undefined);  // false
+ +

Порівняння об'єктів

+ +
const object1 = {
+  name: "привіт"
+}
+
+const object2 = {
+  name: "привіт"
+}
+
+console.log(object1 === object2);  // false
+console.log(object1 === object1);  // true
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.strict_equality")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/strict_inequality/index.html b/files/uk/web/javascript/reference/operators/strict_inequality/index.html new file mode 100644 index 0000000000..831385fc29 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/strict_inequality/index.html @@ -0,0 +1,99 @@ +--- +title: Строга нерівність (!==) +slug: Web/JavaScript/Reference/Operators/Strict_inequality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Strict_inequality +--- +
{{jsSidebar("Operators")}}
+ +

Оператор строгої нерівності (!==) перевіряє, чи є два операнди нерівними, повертаючи результат типу Boolean. На відміну від оператора нерівності, оператор строгої нерівності завжди вважає операнди різних типів різними.

+ +
{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}
+ + + +

Синтаксис

+ +
x !== y
+ +

Опис

+ +

Оператор строгої нерівності перевіряє, чи є його операнди нерівними. Він є протилежністю оператора строгої рівності, тому наступні два рядки завжди даватимуть однаковий результат:

+ +
x !== y
+
+!(x === y)
+ +

Подробиці алгоритму порівняння дивіться на сторінці оператора строгої рівності.

+ +

Як і оператор строгої рівності, оператор строгої нерівності завжди вважатиме операнди різних типів різними:

+ +
3 !== "3"; // true
+ +

Приклади

+ +

Порівняння операндів одного типу

+ +
console.log("привіт" !== "привіт");   // false
+console.log("привіт" !== "агов");    // true
+
+console.log(3 !== 3);               // false
+console.log(3 !== 4);               // true
+
+console.log(true !== true);         // false
+console.log(true !== false);        // true
+
+console.log(null !== null);         // false
+ +

Порівняння операндів різних типів

+ +
console.log("3" !== 3);           // true
+
+console.log(true !== 1);          // true
+
+console.log(null !== undefined);  // true
+ +

Порівняння об'єктів

+ +
const object1 = {
+  name: "привіт"
+}
+
+const object2 = {
+  name: "привіт"
+}
+
+console.log(object1 !== object2);  // true
+console.log(object1 !== object1);  // false
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікації
{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.strict_inequality")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/subtraction/index.html b/files/uk/web/javascript/reference/operators/subtraction/index.html new file mode 100644 index 0000000000..fe5e53ddc6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/subtraction/index.html @@ -0,0 +1,67 @@ +--- +title: Віднімання (-) +slug: Web/JavaScript/Reference/Operators/Subtraction +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Subtraction +--- +
{{jsSidebar("Operators")}}
+ +

Оператор віднімання (-) віднімає один операнд від іншого, повертаючи різницю між ними.

+ +
{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x - y
+
+ +

Приклади

+ +

Віднімання чисел

+ +
5 - 3     // 2
+3 - 5     // -2
+ +

Віднімання з нечисловими значеннями

+ +
'foo' - 3 // NaN
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.subtraction")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html b/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html new file mode 100644 index 0000000000..67cd75fa78 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з відніманням (-=) +slug: Web/JavaScript/Reference/Operators/Subtraction_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Subtraction_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з відніманням (-=) віднімає значення правого операнда від змінної та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x -= y
+Значення: x  = x - y
+ +

Приклади

+ +

Використання присвоєння з відніманням

+ +
// Розглянемо таку змінну
+// bar = 5
+
+bar -= 2     // 3
+bar -= 'foo' // NaN
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.subtraction_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/super/index.html b/files/uk/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..b1c2a89135 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/super/index.html @@ -0,0 +1,184 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - ECMAScript 2015 + - JavaScript + - Класи + - Оператор +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{jsSidebar("Operators")}}
+ +

Ключове слово super використовується для доступу до функцій на батьківському об'єкті та виклику цих функцій.

+ +

Вирази super.prop та super[expr] є коректними у будь-якому визначенні методу як у класах, так і у об'єктних літералах.

+ +

Синтаксис

+ +
super([arguments]); // викликає батьківський конструктор.
+super.functionOnParent([arguments]);
+
+ +

Опис

+ +

При застосуванні у конструкторі ключове слово super використовується окремо та має викликатись до ключового слова this. Ключове слово super також може використовуватись у викликах функцій батьківського об'єкта.

+ +

Приклад

+ +

Використання super у класах

+ +

Цей фрагмент коду взято з прикладу класів (демонстрація). Тут super() викликається для запобігання дублюванню частин конструктора, які є спільними у Rectangle (прямокутник) та Square (квадрат).

+ +
class Rectangle {
+  constructor(height, width) {
+    this.name = 'Прямокутник';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Привіт, я ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this._area = value;
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError, спочатку має викликатись super!
+
+    // Тут ми викликаємо конструктор батьківського класу з довжиною
+    // в якості ширини та довжини прямокутника
+    super(length, length);
+
+    // Заувага: У похідному класі super() має викликатись до 'this'.
+    // Не врахувавши це, ви отримаєте помилку посилання.
+    this.name = 'Квадрат';
+  }
+}
+ +

Виклик статичних методів через super

+ +

Ви також можете викликати через super статичні методи.

+ +
class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'Я маю 4 сторони';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ', і вони рівні';
+  }
+}
+Square.logDescription(); // 'Я маю 4 сторони, і вони рівні'
+
+ +

Видалення super-властивостей викине помилку

+ +

Ви не можете використовувати оператор delete та super.prop або super[expr], щоб видалити властивість батьківського класу, це викине {{jsxref("ReferenceError")}}.

+ +
class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // це погано
+  }
+}
+
+new Derived().delete(); // ReferenceError: некоректний оператор delete з використанням 'super'. 
+ +

super.prop не може перезаписувати властивості, недоступні для запису

+ +

Коли властивості створені недоступними для запису, наприклад, за допомогою {{jsxref("Object.defineProperty")}}, super не може перезаписувати значення такої властивості.

+ +
class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // Не можна перезаписати значення.
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" доступна лише для читання
+console.log(y.prop); // 1
+
+ +

Використання super.prop у об'єктних літералах

+ +

Super також можна використовувати у нотації об'єктної ініціалізації  / літералу. У цьому прикладі два об'єкти визначають метод. У другому об'єкті super викликає метод першого об'єкта. Це працює завдяки методу {{jsxref("Object.setPrototypeOf()")}}, який дає можливість встановити прототипом об'єкта obj2 об'єкт obj1, таким чином, super може знайти метод method1 на об'єкті obj1.

+ +
var obj1 = {
+  method1() {
+    console.log('метод 1');
+  }
+}
+
+var obj2 = {
+  method2() {
+    super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // виводить "метод 1"
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-super-keyword', 'super')}}{{Spec2('ES2015')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.super")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/this/index.html b/files/uk/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..8f0d159cda --- /dev/null +++ b/files/uk/web/javascript/reference/operators/this/index.html @@ -0,0 +1,408 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - this + - Оператор + - ключове слово +translation_of: Web/JavaScript/Reference/Operators/this +--- +
{{jsSidebar("Operators")}}
+ +

Ключове слово функції this поводиться дещо інакше у JavaScript у порівнянні з іншими мовами. Воно також має певні відмінності між строгим та нестрогим режимами.

+ +

У більшості випадків, значення this визначається тим, як викликається функція (прив'язка під час виконання). Воно не може бути переприсвоєне під час виконання, і може змінюватись кожен раз, коли викликається функція. ES5 запровадив метод {{jsxref("Function.prototype.bind()", "bind()")}} для присвоєння значення this у функції незалежно від того, як вона викликається, а ES2015 запровадив стрілкові функції, які не мають власної прив'язки this (вони зберігають значення this оточуючого лексичного контексту).

+ +
{{EmbedInteractiveExample("pages/js/expressions-this.html")}}
+ + + +

Синтаксис

+ +
this
+ +

Значення

+ +

Властивість контексту виконання (глобального, функції чи eval), яка, у нестрогому режимі завжди посилається на об'єкт, а у строгому режимі може бути будь-яким значенням.

+ +

Глобальний контекст

+ +

У глобальному контексті виконання (поза межами будь-яких функцій) this посилається на глобальний об'єкт, як у строгому, так і у нестрогому режимі.

+ +
// У веб-переглядачах об'єкт window також є глобальним об'єктом:
+console.log(this === window); // true
+
+a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b)  // "MDN"
+console.log(b)         // "MDN"
+
+ +
+

Заувага: Ви завжди легко можете отримати глобальний об'єкт за допомогою глобальної властивості {{jsxref("globalThis")}}, незалежно від поточного контексту, у якому виконується ваш код.

+
+ +

Контекст функції

+ +

Всередині функції значення this залежить від того, як викликається функція.

+ +

Простий виклик

+ +

Оскільки наступний код не є кодом у строгому режимі, і тому, що значення this не було присвоєне викликом, this за замовчуванням дорівнюватиме глобальному об'єкту, яким у переглядачі є {{domxref("Window", "window")}}. 

+ +
function f1() {
+  return this;
+}
+
+// У переглядачі:
+f1() === window; // true
+
+// У Node:
+f1() === global; // true
+ +

Однак, у строгому режимі значення this не присвоюється при вході у контекст виконання, воно залишається undefined, як показано у наступному прикладі:

+ +
function f2() {
+  'use strict'; // дивіться строгий режим
+  return this;
+}
+
+f2() === undefined; // true
+
+ +
У другому прикладі this має дорівнювати {{jsxref("undefined")}}, тому що функція f2 була викликана прямо, а не як метод чи властивість об'єкта (наприклад, window.f2()). Ця функціональність не була реалізована у деяких переглядачах, коли вони вперше почали підтримувати строгий режим. Як результат, вони неправильно повертали об'єкт window.
+ +

Для присвоєння this певного значення під час виклику функції використовуйте {{jsxref("Function.prototype.call()", "call()")}} або {{jsxref("Function.prototype.apply()", "apply()")}}, як у наступних прикладах.

+ +

Приклад 1

+ +
// Об'єкт може бути переданий першим аргументом у call чи apply, і буде прив'язаний до this.
+var obj = {a: 'Користувацький'};
+
+// Ця властивість створена у глобальному об'єкті
+var a = 'Глобальний';
+
+function whatsThis() {
+  return this.a;  // Значення this залежить від того, як викликається функція
+}
+
+whatsThis();          // 'Глобальний'
+whatsThis.call(obj);  // 'Користувацький'
+whatsThis.apply(obj); // 'Користувацький'
+
+ +

Приклад 2

+ +
function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// Перший параметр - це об'єкт для використання в якості
+// 'this', наступні параметри передаються як аргументи
+// для виклику фукнції
+add.call(o, 5, 7); // 16
+
+// Перший параметр - це об'єкт для використання в якості
+// 'this', другий - це масив, чиї елементи
+// використовуються як аргументи для виклику функції
+add.apply(o, [10, 20]); // 34
+
+ +

Зауважте, що у нестрогому режимі у call та apply, якщо значення, передане у якості this, не є об'єктом, буде спроба перетворити його на об'єкт внутрішньою операцією ToObject. Тому, якщо передане значення є простою величиною на кшталт 7 чи 'foo', вона буде загорнута у Object за допомогою відповідного конструктора, а отже, просте число 7 буде перетворене на об'єкт, як new Number(7), а рядок 'foo' буде перетворений на об'єкт, як new String('foo'), наприклад:

+ +
function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7);     // [object Number]
+bar.call('foo'); // [object String]
+
+ +

Метод bind

+ +

У ECMAScript 5 було запроваждено {{jsxref("Function.prototype.bind()")}}. Виклик f.bind(someObject) створює нову фукнцію з таким самим тілом фукнції та областю видимості, як у f, але, де у початковій функції трапляється this, у новій функції this прив'язано до першого аргументу bind, незалежно від того, як використовується функція.

+ +
function f() {
+  return this.a;
+}
+
+var g = f.bind({a: 'привіт'});
+console.log(g()); // привіт
+
+var h = g.bind({a: 'йо'}); // bind працює лише один раз!
+console.log(h()); // привіт
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37,37, привіт, привіт
+
+ +

Стрілкові функції

+ +

У стрілкових функціях this зберігає значення this оточуючого лексичного контексту. У глобальному коді йому буде присвоєно глобальний об'єкт:

+ +
var globalObject = this;
+var foo = (() => this);
+console.log(foo() === globalObject); // true
+ +
+

Заувага: якщо this передається як аргумент до call, bind чи apply під час виклику стрілкової функції, він буде проігнорований. Ви все одно можете подавати аргументи до call, але перший аргумент (thisArg) має бути null.

+
+ +
// Виклик в якості методу об'єкта
+var obj = {func: foo};
+console.log(obj.func() === globalObject); // true
+
+// Спроба встановити this за допомогою call
+console.log(foo.call(obj) === globalObject); // true
+
+// Спроба встановити this за допомогою bind
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true
+ +

Що б не відбувалось, this у foo дорівнює значенню, встановленому під час створення (у наведеному вище прикладі, глобальному об'єкту). Те саме стосується стрілкових функцій, створених всередині інших функцій: їхнє значення this залишиться таким, як у оточуючому лексичному контексті.

+ +
// Створюємо obj з методом bar, який вертає функцію, що
+// повертає своє значення this. Повернена функція створена як
+// стрілкова функція, а отже, її this прив'язується до
+// this оточуючої функції. Можна присвоювати значення bar
+// під час виклику, що в свою чергу присвоїть значення
+// поверненої функції.
+var obj = {
+  bar: function() {
+    var x = (() => this);
+    return x;
+  }
+};
+
+// Викликаємо bar як метод obj, встановлюючи obj значенням його this
+// Присвоюємо посилання на повернену функцію у fn
+var fn = obj.bar();
+
+// Виклик fn без присвоєння this мав би присвоїти
+// за замовчуванням глобальний об'єкт або undefined у строгому режимі
+console.log(fn() === obj); // true
+
+// Але будьте обережні, якщо посилаєтесь на метод obj, не викликаючи його
+var fn2 = obj.bar;
+// Виклик this стрілкової функції зсередини методу bar
+// тепер поверне window, бо він бере this з fn2.
+console.log(fn2()() == window); // true
+
+ +

У наведеному коді функція (назвемо її анонімною функцією А), присвоєна obj.bar, повертає іншу функцію (назвемо її анонімною функцією Б), яка створюється як стрілкова функція. В результаті this функції Б незмінно дорівнює this з obj.bar (функції A) під час виклику. Коли викликається повернена функція (функція Б), її this завжди дорівнюватиме початково присвоєному значенню. У наведеному прикладі this функції Б присвоюється значення this функції А, яке дорівнює obj, отже, воно залишається рівним obj, навіть коли викликається таким способом, який мав би присвоїти this значення undefined або глобальний об'єкт (чи будь-яким іншим методом, як у попередньому прикладі у глобальному контексті виконання).

+ +

Як метод об'єкта

+ +

Коли функція викликається як метод об'єкта, її this присвоюється об'єкт, на якому викликається метод.

+ +

У наступному прикладі, коли викликається o.f(), всередині функції this прив'язується до об'єкта o.

+ +
var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+
+ +

Зауважте, що на цю поведінку зовсім не впливає те, як і де була визначена функція. У попередньому прикладі ми визначили функцію f вбудованою, як член об'єкта, під час визначення o. Однак, ми так само легко могли спочатку визначити функцію, а потім додати її до o.f. Це призводить до такої самої поведінки:

+ +
var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // 37
+
+ +

Це демонструє, що значення має тільки те, що функція була викликана з f, члена об'єкта o.

+ +

Схожим чином, на прив'язку this впливає тільки найближче посилання на об'єкт. У наступному прикладі, коли ми викликаємо функцію, ми викликаємо її як метод g об'єкта o.b. Цього разу під час виконання this всередині функції посилатиметься на o.b. Той факт, що сам об'єкт є членом об'єкта o, не має наслідків; все, що має значення, це найближче посилання.

+ +
o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // 42
+
+ +

this у ланцюжку прототипів об'єкта

+ +

Такий самий принцип діє для методів, визначених десь у ланцюжку прототипів об'єкта. Якщо метод присутній у ланцюжку прототипів об'єкта, this посилається на об'єкт, на якому був викликаний метод, так, ніби метод присутній у самому об'єкті.

+ +
var o = {f: function() { return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+
+ +

У цьому прикладі об'єкт, присвоєний змінній p, не має своєї властивості f, він успадковує її від свого прототипу. Але не має значення, що пошук f зрештою знаходить властивість з таким ім'ям у o; пошук починався як посилання на p.f, а отже, this всередині функції приймає значення об'єкта, на який посилається p. Тобто, оскільки f викликається як метод p, його this посилається на p. Це цікава особливість прототипного наслідування JavaScript.

+ +

this з гетером або сетером

+ +

Знову ж таки, цей самий принцип діє, коли функція викликається з гетера чи сетера. У функції, що використовується в якості гетера чи сетера, this прив'язується до об'єкта, де властивість отримується чи встановлюється.

+ +
function sum() {
+  return this.a + this.b + this.c;
+}
+
+var o = {
+  a: 1,
+  b: 2,
+  c: 3,
+  get average() {
+    return (this.a + this.b + this.c) / 3;
+  }
+};
+
+Object.defineProperty(o, 'sum', {
+    get: sum, enumerable: true, configurable: true});
+
+console.log(o.average, o.sum); // 2, 6
+
+ +

Як конструктор

+ +

Коли функція використовується як конструктор (з ключовим словом {{jsxref("Operators/new", "new")}}), її this прив'язується до нового об'єкта, що створюється.

+ +
+

Хоча за замовчуванням конструктор повертає об'єкт, на який посилається this, він може, натомість, повернути якийсь інший об'єкт (якщо значення, що повертається, не є об'єктом, тоді повертається об'єкт this).

+
+ +
/*
+ * Конструктори працюють так:
+ *
+ * function MyConstructor(){
+ *   // Тут розташований код тіла функції.
+ *   // Створюємо бажані властивості |this|
+ *   // присвоєнням. Наприклад,
+ *   this.fum = "nom";
+ *   // і так далі...
+ *
+ *   // Якщо функція має оператор return, який
+ *   // повертає об'єкт, цей об'єкт буде
+ *   // результатом виразу |new|. Інакше,
+ *   // результатом виразу буде поточний об'єкт,
+ *   // прив'язаний до |this|
+ *   // (найбільш розповсюджений варіант).
+ * }
+ */
+
+function C() {
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2() {
+  this.a = 37;
+  return {a: 38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+
+ +

У останньому прикладі (C2), через те, що під час створення був повернений об'єкт, новий об'єкт, до якого було прив'язано this, просто відкидається. (Це, по суті, робить інструкцію "this.a = 37;" мертвим кодом. Він не абсолютно мертвий, бо він виконується, але його можна видалити без жодних наслідків для зовнішнього коду.)

+ +

Як обробник подій у DOM

+ +

Коли функція використовується як обробник подій, її значенням this встановлюється елемент, який запустив подію (деякі переглядачі не дотримуються цієї конвенції для прослуховувачів, доданих динамічно іншими методами, ніж {{domxref("EventTarget.addEventListener()", "addEventListener()")}}).

+ +
// Коли викликається як прослуховувач, робить відповідний елемент синім
+function bluify(e) {
+  // Завжди true
+  console.log(this === e.currentTarget);
+  // true, коли currentTarget і target є тим самим об'єктом
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// Отримати список усіх елементів у document
+var elements = document.getElementsByTagName('*');
+
+// Додати bluify як прослуховувач події натискання, щоб, коли
+// на елемент натискають, він ставав синім
+for (var i = 0; i < elements.length; i++) {
+  elements[i].addEventListener('click', bluify, false);
+}
+ +

У вбудованому обробнику подій

+ +

Коли код викликається з вбудованого обробника подій, значенням його this встановлюється DOM-елемент, де розташований прослуховувач:

+ +
<button onclick="alert(this.tagName.toLowerCase());">
+  Показати this
+</button>
+
+ +

Наведене оповіщення показує button. Однак, зауважте, що лише у зовнішньому коді this присвоюється таким чином:

+ +
<button onclick="alert((function() { return this; })());">
+  Показати this внутрішньої функції
+</button>
+
+ +

У цьому випадку, this внутрішньої функції не присвоюється, тому функція повертає глобальний об'єкт/window (тобто, об'єкт за замовчуванням у нестрогому режимі, де this не встановлюється викликом).

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-this-keyword', 'The this keyword')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.this")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/typeof/index.html b/files/uk/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..a0e9b217d4 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,278 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Operator + - typeof + - Оператор +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +
{{jsSidebar("Operators")}}
+ +

Оператор typeof повертає рядок, що вказує тип необчисленого операнду.

+ +
{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}
+ + + +

Синтакс

+ +

Оператор typeof супроводжується операндом:

+ +
typeof operand
+typeof(operand)
+
+ +

Параметри

+ +
+
operand
+
Вираз, що представляє об'єкт або {{Glossary("Primitive", "примітив")}}, тип якого потрібно повернути.
+
+ +

Опис

+ +

Наступна таблиця наводить можливі значення, повернені typeof. Для отримання додаткової інформації про типи та прості значення, дивіться також статтю про Структури даних JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ТипРезультат
{{glossary("Undefined")}}"undefined"
{{glossary("Null")}}"object" (дивіться {{anch("null", "нижче")}})
{{glossary("Boolean")}}"boolean"
{{glossary("Number")}}"number"
{{glossary("BigInt")}} (нове у ECMAScript 2020)"bigint"
{{glossary("String")}}"string"
{{glossary("Symbol")}} (нове у ECMAScript 2015)"symbol"
Об'єкт {{glossary("Function")}} (реалізує [[Call]] in ECMA-262 terms)"function"
Будь-який інший об'єкт"object"
+ +
+

Заувага: ECMAScript 2019 та старші версії дозволяли у реалізаціях typeof повертати будь-яке рядкове значення, визначене реалізацією, для об'єктів, які не можна викликати, а також нестандартних екзотичних об'єктів.

+ +

Єдиним відомим переглядачем, який дійсно скористався цією можливістю, був старий Internet Explorer (дивіться {{anch("Примітки_щодо_IE", "нижче")}}).

+
+ +

Приклади

+ +
// Числа
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Незважаючи на те, що є "Not-A-Number" (не-числом)
+typeof Number('1') === 'number'; // Number намагається розібрати значення як числа
+typeof Number('чобіт') === 'number';   // також значення, які не можуть бути приведені до числових
+
+typeof 42n === 'bigint';
+
+
+// Рядки
+typeof '' === 'string';
+typeof 'бла' === 'string';
+typeof `шаблонний літерал` === 'string';
+typeof '1' === 'string'; // зауважте, що число у рядку все ж має тип string
+typeof (typeof 1) === 'string'; // typeof завжди повертає string
+typeof String(1) === 'string'; // String перетворює будь-що у рядок, безпечніше, ніж toString
+
+
+// Булеві значення
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(1) === 'boolean'; // Boolean() перетворює значення на підставі того, чи є вони правдивими, чи хибними
+typeof !!(1) === 'boolean'; // два виклики оператора ! (логічне НЕ) еквівалентні Boolean()
+
+
+// Символи
+typeof Symbol() === 'symbol'
+typeof Symbol('ква') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined'; // змінна, що має значення undefined
+typeof declaredButUndefinedVariable === 'undefined'; // оголошена змінна без значення
+typeof undeclaredVariable === 'undefined'; // неоголошена змінна
+
+
+// Об'єкти
+typeof {a: 1} === 'object';
+
+// Використовуйте Array.isArray або Object.prototype.toString.call,
+// щоб відрізнити звичайні об'єкти від масивів
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Дивіться історичні результати у розділі Регулярні вирази
+
+
+// Наведені вирази є заплутаними, небезпечнимм та марнотратними. Уникайте їх.
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String('abc') === 'object';
+
+// Функції
+typeof function() {} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+ +

Додаткова інформація

+ +

null

+ +
// Так було від початку існування JavaScript
+typeof null === 'object';
+
+ +

У першій реалізації JavaScript, значення JavaScript були представлені у вигляді мітки типу та значення. Міткою типу для об'єкта був 0. null був представлений нульовим вказівником (0x00 у більшості платформ). Відповідно, null мав міткою типу 0, звідси повернене значення "object" у typeof. (посилання)

+ +

Було запропоноване виправлення для ECMAScript (як експериментальна функціональність), але воно було відхилене. Воно змінило б результат на typeof null === 'null'.

+ +

Використання оператора new

+ +
// Усі функції-конструктори, за винятком конструктора Function, завжди матимуть тип 'object'
+var str = new String('String');
+var num = new Number(100);
+
+typeof str; // Це поверне 'object'
+typeof num; // Це поверне 'object'
+
+var func = new Function();
+
+typeof func; // Це поверне 'function'
+
+ +

Необхідність круглих дужок для синтаксису

+ +
// Круглі дужки можуть використовуватись для визначення типу виразу.
+var iData = 99;
+
+typeof iData + ' Wisen'; // 'number Wisen'
+typeof (iData + ' Wisen'); // 'string'
+
+ +

Регулярні вирази

+ +

Регулярні вирази, доступні для виклику, були нестандартним доповненням у деяких переглядачах.

+ +
typeof /s/ === 'function'; // Chrome 1-12 не відповідає ECMAScript 5.1
+typeof /s/ === 'object';   // Firefox 5+  відповідає ECMAScript 5.1
+
+ +

Помилки

+ +

До ECMAScript 2015 typeof гарантовано повертав рядок для будь-якого наданого операнда. Навіть для неоголошених ідентифікаторів typeof повертав 'undefined'. Використання typeof ніяк не могло згенерувати помилку.

+ +

Але з додаванням блочних областей видимості у {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const","const")}}, використання typeof на змінних, створених через let та const (або використання typeof на класі), у блоці до того, як вони були оголошені, викине помилку {{jsxref("ReferenceError")}}. Змінні блочної області видимості знаходяться у "тимчасовій мертвій зоні" від початку блоку до завершення ініціалізації, спроба звернення до них в цей час викине помилку.

+ +
typeof undeclaredVariable === 'undefined';
+
+typeof newLetVariable; // ReferenceError
+typeof newConstVariable; // ReferenceError
+typeof newClass; // ReferenceError
+
+let newLetVariable;
+const newConstVariable = 'привіт';
+class newClass{};
+ +

Винятки

+ +

Усі нинішні переглядачі відкривають нестандартний хост-об'єкт {{domxref("document.all")}} з типом undefined.

+ +
typeof document.all === 'undefined';
+
+ +

Хоча специфікація дозволяє користувацькі мітки типів для нестандартних екзотичних об'єктів, вона вимагає, щоб ці мітки відрізнялись від попередньо визначених. Випадок використання у document.all типу 'undefined' класифікується у веб-стандартах як "умисне порушення" оригінального стандарту ECMA JavaScript.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.typeof")}}

+ +

Примітки щодо IE

+ +

У IE 6, 7 та 8 багато хост-об'єктів є об'єктами, а не функціями. Для прикладу:

+ +
typeof alert === 'object'
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/unary_negation/index.html b/files/uk/web/javascript/reference/operators/unary_negation/index.html new file mode 100644 index 0000000000..bcaa14e30a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unary_negation/index.html @@ -0,0 +1,77 @@ +--- +title: Унарний мінус (-) +slug: Web/JavaScript/Reference/Operators/Unary_negation +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Unary_negation +--- +
{{jsSidebar("Operators")}}
+ +

Унарний мінус (-) ставиться перед своїм операндом та міняє його знак на протилежний.

+ +
{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: -x
+
+ +

Приклади

+ +

Унарний мінус перед числами

+ +
const x = 3;
+const y = -x;
+
+// y = -3
+// x = 3
+
+ +

Унарний мінус перед нечисловими значеннями

+ +

Унарний мінус може перетворити нечислове значення на число.

+ +
const x = "4";
+const y = -x;
+
+// y = -4
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-unary-minus-operator', 'Unary negation operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.unary_negation")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/unary_plus/index.html b/files/uk/web/javascript/reference/operators/unary_plus/index.html new file mode 100644 index 0000000000..da66dbc464 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unary_plus/index.html @@ -0,0 +1,78 @@ +--- +title: Унарний плюс (+) +slug: Web/JavaScript/Reference/Operators/Unary_plus +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Unary_plus +--- +
{{jsSidebar("Operators")}}
+ +

Унарний плюс (+) ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом.

+ +
{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}
+ + + +

Синтаксис

+ +
Оператор: +x
+
+ +

Опис

+ +

Хоча унарний мінус (-) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення truefalse та null. Підтримуються цілі числа у десятковому та шістнадцятковому (з префіксом 0x) форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.

+ +

Приклади

+ +

Використання з числами

+ +
const x = 1;
+const y = -1;
+
+console.log(+x);
+// 1
+console.log(+y);
+// -1
+ +

Використання з нечисловими значеннями

+ +
+true  // 1
++false // 0
++null  // 0
++function(val){ return val } // NaN
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-unary-plus-operator', 'Unary plus operator')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.unary_plus")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html b/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html new file mode 100644 index 0000000000..1815bba018 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html @@ -0,0 +1,74 @@ +--- +title: Беззнаковий правий зсув (>>>) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift +--- +
{{jsSidebar("Operators")}}
+ +

Оператор беззнакового правого зсуву (>>>) (правий зсув із заповненням нулями) виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення 0, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.

+ +
{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}
+ + + +

Синтаксис

+ +
a >>> b
+
+ +

Опис

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення 0, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.

+ +

Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, 9 >>> 2 дорівнює 2, так само, як 9 >> 2:

+ +
.     9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                   --------------------------------
+9 >>> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+
+ +

Однак, це не одне й те саме для від'ємних чисел. Наприклад, -9 >>> 2 поверне 1073741821, що відрізняється від -9 >> 2 (що дорівнює -3):

+ +
.     -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                    --------------------------------
+-9 >>> 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10)
+
+ +

Приклади

+ +

Використання беззнакового правого зсуву

+ +
 9 >>> 2; // 2
+-9 >>> 2; // 1073741821
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.unsigned_right_shift")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html new file mode 100644 index 0000000000..4ffe4bef3d --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з беззнаковим правим зсувом (>>>=) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння з беззнаковим правим зсувом (>>>=) виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній.

+ +
{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}
+ +
+ + + +

Синтаксис

+ +
Оператор: x >>>= y
+Значення: x    = x >>> y
+ +

Приклади

+ +

Використання присвоєння з беззнаковим правим зсувом

+ +
let a = 5; //   (00000000000000000000000000000101)
+a >>>= 2;  // 1 (00000000000000000000000000000001)
+
+let b = -5; // (-00000000000000000000000000000101)
+b >>>= 2;   // 1073741822 (00111111111111111111111111111110)
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.unsigned_right_shift_assignment")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/void/index.html b/files/uk/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..d280657ad3 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/void/index.html @@ -0,0 +1,123 @@ +--- +title: Оператор void +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/void +--- +
{{jsSidebar("Operators")}}
+ +

Оператор void обчислює наданий вираз та повертає {{jsxref("undefined")}}.

+ +
{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}
+ + + +

Синтаксис

+ +
void вираз
+ +

Опис

+ +

Цей оператор дозволяє обчислення виразів, які повертають значення, у місцях, де очікується вираз, що обчислюється як {{jsxref("undefined")}}.

+ +

Оператор void часто використовують лише для того, щоб отримати просту величину undefined, зазвичай, використанням "void(0)" (що є еквівалентним "void 0"). У таких випадках можна замість цього скористатись глобальною змінною {{jsxref("undefined")}} (за умови, що їй не було присвоєне нове значення).

+ +

Зауважте, що необхідно враховувати пріоритет оператора void, і що круглі дужки можуть допомогти прояснити обчислення виразу, розташованого після оператора void:

+ +
void 2 == '2';   // (void 2) == '2', вертає false
+void (2 == '2'); // void (2 == '2'), вертає undefined
+
+ +

Негайно виконувані функціональні вирази

+ +

При використанні {{Glossary("IIFE", "негайно виконуваного фукнціонального виразу")}} void може використовуватись, щоб змусити ключове слово function сприйматись як вираз, а не як оголошення.

+ +
void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+
+ +

URI у JavaScript

+ +

Коли переглядач переходить по javascript: URI, він обчислює код у URI, після чого замінює вміст сторінки поверненим значенням, якщо тільки повернене значення не є {{jsxref("undefined")}}. Оператор void можна використати, щоб повернути undefined. Наприклад:

+ +
<a href="javascript:void(0);">
+  Натисніть сюди, щоб не робити нічого
+</a>
+
+<a href="javascript:void(document.body.style.backgroundColor='green');">
+  Натисніть сюди, щоб зробити фон зеленим
+</a>
+
+ +
+

Заувага: використання псевдопротоколу javascript: не заохочується на користь інших альтернатив, таких як ненав'язливі обробники подій.

+
+ +

Стрілкові функції без витоків

+ +

Стрілкові функції запроваджують скорочений бездужковий синтаксис, який повертає вираз. Це може спричинити ненавмисні побічні ефекти, повертаючи результат функціонального виклику, який раніше не повертав нічого. Щоб убезпечитись у випадках, коли результат функції не передбачається використовувати, його можна передати у оператор void, щоб гарантувати, що (наприклад) зміна API не спричинить зміну поведінки стрілкових функцій.

+ +
button.onclick = () => void doSomething();
+ +

Це гарантує, що повернене значення doSomething, змінюючись з undefined на true, не змінить поведінку цього коду.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.void")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/yield/index.html b/files/uk/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..0609f221d3 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,121 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript 2015 + - JavaScript + - Ітератор + - Оператор + - генератори +translation_of: Web/JavaScript/Reference/Operators/yield +--- +
{{jsSidebar("Operators")}}
+ +

Ключове слово yield використовується для призупинення та відновлення виконання функції-генератора ({{jsxref("Statements/function*", "function*")}} або застарілої функції-генератора).

+ +
{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}
+ + + +

Синтаксис

+ +
[rv] = yield [expression];
+ +
+
expression
+
Визначає значення, яке буде повернене функцією-генератором згідно протоколу ітератора. Якщо пропущене, повертається undefined.
+
rv
+
+

Отримує необов'язкове значення, передане у метод генератора next() для відновлення виконання.

+
+
+ +

Опис

+ +

Ключове слово yield призупиняє виконання функції-генератора, а значення виразу, що стоїть після yield, повертається у інструкцію, що викликала генератор. Його можна уявити як генераторну версію ключового слова return.

+ +

Оператор yield може викликатись тільки безпосередньо з функції-генератора, яка його містить. Його не можна викликати з вкладених функцій або зворотних викликів.

+ +

Ключове слово yield здійснює виклик метода генератора next(), повертаючи об'єкт IteratorResult з двома властивостями, value та done. Властивість value є результатом обчислення виразу yield, а done дорівнює false, вказуючи, що функція-генератор ще не завершена.

+ +

Зупинившись на виразі yield, виконання коду генератора залишається на паузі до виклику методу генератора next(). Кожний раз, коли викликається метод генератора next(), генератор відновлює виконання та виконується, поки не досягає чогось з наступного:

+ + + +

Якщо у метод генератора next() було передано необов'язкове значення, воно стає значенням, що повертається поточною операцією генератора yield.

+ +

Маючи фрагменти коду, що виконуються генератором, оператори yield та здатність вказувати нове початкове значення, передаючи його у {{jsxref("Generator.prototype.next()")}}, генератори надають неймовірну потужність та контроль.

+ +

Приклади

+ +

Наступний код є оголошенням прикладу функції-генератора.

+ +
function* countAppleSales () {
+  var saleList = [3, 7, 5];
+  for (var i = 0; i < saleList.length; i++) {
+    yield saleList[i];
+  }
+}
+ +

Як тільки функція-генератор визначена, її можна використовувати, створивши ітератор, як показано нижче.

+ +
var appleStore = countAppleSales(); // Generator { }
+console.log(appleStore.next()); // { value: 3, done: false }
+console.log(appleStore.next()); // { value: 7, done: false }
+console.log(appleStore.next()); // { value: 5, done: false }
+console.log(appleStore.next()); // { value: undefined, done: true }
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.yield")}}

+ +

Примітки щодо Firefox

+ + + +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/operators/yield_star_/index.html b/files/uk/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..cb6bf7f77e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,162 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript 2015 + - JavaScript + - Ітератор + - Оператор + - генератори +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +
{{jsSidebar("Operators")}}
+ +

Вираз yield* використовується для делегування до іншого {{jsxref("Statements/function*", "генератора")}} чи ітерабельного об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}
+ + + +

Синтаксис

+ +
 yield* [[expression]];
+ +
+
expression
+
Вираз, який повертає ітерабельний об'єкт.
+
+ +

Опис

+ +

Вираз yield* перебирає свій операнд та видає кожне значення, що він повертає.

+ +

Значенням самого виразу yield* є значення, повернене ітератором, коли він закривається (тобто, коли done дорівнює true).

+ +

Приклади

+ +

Делегування до іншого генератора

+ +

У наступному коді значення, отримані від g1(), повертаються викликами next() так само, як значення, отримані від g2().

+ +
function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: 4, done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+
+ +

Інші ітерабельні об'єкти

+ +

Окрім об'єктів-генераторів, yield* також може отримувати значення з інших ітерабельних об'єктів, наприкад, з масивів, рядків чи об'єктів arguments.

+ +
function* g3() {
+  yield* [1, 2];
+  yield* '34';
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: "3", done: false}
+console.log(iterator.next()); // {value: "4", done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: 6, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+
+ +

Значення самого виразу yield*

+ +

yield* є виразом, а не оператором, а отже, має обчислене значення.

+ +
function* g4() {
+  yield* [1, 2, 3];
+  return 'foo';
+}
+
+var result;
+
+function* g5() {
+  result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: undefined, done: true},
+                              // g4() повернув {value: 'foo', done: true} в цій точці
+
+console.log(result);          // "foo"
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.yield_star")}}

+ +

Примітки щодо Firefox

+ + + +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/operators/\320\264\320\265\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\320\267\320\260\321\206\321\226\321\217/index.html" "b/files/uk/web/javascript/reference/operators/\320\264\320\265\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\320\267\320\260\321\206\321\226\321\217/index.html" new file mode 100644 index 0000000000..4967086ede --- /dev/null +++ "b/files/uk/web/javascript/reference/operators/\320\264\320\265\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\320\267\320\260\321\206\321\226\321\217/index.html" @@ -0,0 +1,453 @@ +--- +title: Деструктуризація +slug: Web/JavaScript/Reference/Operators/Деструктуризація +tags: + - Destructuring + - ECMAScript 2015 + - JavaScript + - Operator + - Деструктуризація + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Деструктуризація (деструктуризаційне присвоєння) - JavaScript вираз, який дозволяє витягувати дані з масивів та об’єктів в окремі змінні.

+ +

Синтаксис

+ +
var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({a, b} = {a: 10, b: 20});
+console.log(a); // 10
+console.log(b); // 20
+
+// Експерементальний синтаксис (ще не стандартизований)
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+
+ +

Опис

+ +

Вирази присвоєння літералів об’єктів та масивів надають простий спосіб створювати ad hoc (ад-гок) структури даних.

+ +
var x = [1, 2, 3, 4, 5];
+ +

Деструктуризаційне присвоєння використовує подібний синтаксис, де ліва сторона виразу визначає елементи, що потрібно витягнути зі змінної-джерела (правої сторони).

+ +
var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+
+ +

Це подібне до способів, що доступні у мовах програмування на кшталт Perl та Python.

+ +

Деструктуризація масивів

+ +

Звичайне присвоєння

+ +
var foo = ['one', 'two', 'three'];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+
+ +

Присвоєння, окреме від оголошення

+ +

Значення може бути присвоєне змінній окремо від оголошення цієї змінної.

+ +
var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Значення за промовчанням

+ +

Змінній може бути присвоєне значення за промовчанням у випадку, коли витягнуте значення є undefined.

+ +
var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+
+ +

Обмін змінних

+ +

Дві змінні можуть обмінятися значеннями за допомогою одного деструктуризаційного виразу. 

+ +

Без деструктуризації, обмін двох значеннь потребує тимчасової змінної (або в деяких низькорівневих мовах XOR-обміну).

+ +
var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+
+ +

Розбір масиву, поверненого з функції

+ +

Завжди було можливо повернути масив із функції. Деструктуризація може зробити обробку повернутого масиву більш виразною.

+ +

У цьому прикладі f() повертає значення [1, 2], які можуть бути розібрані одним рядком коду за допомогою деструктуризації.

+ +
function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Пропуск деяких значень

+ +

Можна пропустити повернуті значення, які тобі не цікаві:

+ +
function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+
+ +

Також можна пропустити всі значення (але навіщо?):

+ +
[,,] = f();
+
+ +

Присвоєння решти масиву змінній

+ +

Деструктуризуючи масив, можна присвоїти змінній решту його елементів за допомогою оператора розпакування:

+ +
var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+ +

Зауваж, що буде видана помилка {{jsxref("SyntaxError")}}, якщо поставити прикінцеву кому в лівій частині виразу за елементом решти:

+ +
var [a, ...b,] = [1, 2, 3];
+// SyntaxError: елемент решти не може мати прикінцевої коми
+ +

Витягнення значеннь з масиву збігів регулярного виразу

+ +

Коли метод регулярного виразу exec() знаходить збіг, він повертає масив, що містить першим елементом повністю відповідну частину рядку, а далі частини рядку, що збіглися з кожною взятою в дужки групою в регулярному виразі. Деструктуризаційне присвоєння дозволяє з легкістю витягувати частини цього масиву, пропускаючи повний збіг, якщо він не потрібний.

+ +
var url = 'https://developer.mozilla.org/en-US/Web/JavaScript';
+
+var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+var [, protocol, fullhost, fullpath] = parsedURL;
+
+console.log(protocol); // "https"
+
+ +

Деструктуризація об’єктів

+ +

Звичайне присвоєння

+ +
var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+ +

Присвоєння, окреме від оголошення

+ +

Значення може бути присвоєне змінній окремо від оголошення цієї змінної.

+ +
var a, b;
+
+({a, b} = {a: 1, b: 2});
+ +
+

Дужки ( .. ) навколо виразу присвоєння необхідні при деструктуризаційному присвоєні об’єкта без оголошення.

+ +

Вираз {a, b} = {a: 1, b: 2} сам по собі є синтаксично неправильним, оскільки {a, b} в лівій його частині розглядається як блок коду, а не як об’єкт.

+ +

Проте, ({a, b} = {a: 1, b: 2}) є правильним, як і var {a, b} = {a: 1, b: 2}

+
+ +

Присвоєння новим змінним

+ +

Значення може бути отримане з об’єкту та присвоєне змінній з іменем, інакшим від назви властивості об’єкта.

+ +
var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true  
+ +

Значення за промовчанням

+ +

Змінній може бути присвоєне значення за промовчанням у випадку, коли витягнуте значення з об’єкту є undefined.

+ +
var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+ +

Встановлення значення за промовчанням аргументам функції

+ +

ES5 версія

+ +
function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? {x: 0, y: 0} : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // тепер, врешті, малюй діаграму
+}
+
+drawES5Chart({
+  cords: {x: 18, y: 30},
+  radius: 30
+});
+ +

ES2015 версія

+ +
function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}) {
+  console.log(size, cords, radius);
+  // малюй діаграму
+}
+
+drawES2015Chart({
+  cords: {x: 18, y: 30},
+  radius: 30
+});
+ +

Вкладена деструктуризація об’єктів та масивів

+ +
var metadata = {
+    title: 'Scratchpad',
+    translations: [
+       {
+        locale: 'de',
+        localization_tags: [],
+        last_edit: '2014-04-14T08:43:37',
+        url: '/de/docs/Tools/Scratchpad',
+        title: 'JavaScript-Umgebung'
+       }
+    ],
+    url: '/en-US/docs/Tools/Scratchpad'
+};
+
+var {title: englishTitle, translations: [{title: localeTitle}]} = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+ +

For of цикл та деструктуризація

+ +
var people = [
+  {
+    name: 'Mike Smith',
+    family: {
+      mother: 'Jane Smith',
+      father: 'Harry Smith',
+      sister: 'Samantha Smith'
+    },
+    age: 35
+  },
+  {
+    name: 'Tom Jones',
+    family: {
+      mother: 'Norah Jones',
+      father: 'Richard Jones',
+      brother: 'Howard Jones'
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: {father: f}} of people) {
+  console.log('Name: ' + n + ', Father: ' + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"
+ +

Витягнення полів з об’єктів, що передані аргументами в функцію

+ +
function userId({id}) {
+  return id;
+}
+
+function whois({displayName, fullName: {firstName: name}}) {
+  console.log(displayName + ' is ' + name);
+}
+
+var user = {
+  id: 42,
+  displayName: 'jdoe',
+  fullName: {
+      firstName: 'John',
+      lastName: 'Doe'
+  }
+};
+
+console.log('userId: ' + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"
+ +

Це витягує id, displayName та firstName з об’єкта user та виводить їх.

+ +

Розраховувані імена властивостей об’єкта та деструктуризація

+ +

Розраховувані імена властивостей об’єкта можуть також бути використані разом із деструктуризацією

+ +
let key = 'z';
+let {[key]: foo} = {z: 'bar'};
+
+console.log(foo); // "bar"
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}} 
+ +

Сумісність з браузерами 

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("1.8.1") }}14{{CompatNo}}{{CompatNo}}7.1
Computed property names{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}14{{CompatNo}}{{CompatNo}}{{CompatNo}}
Spread operator{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}12[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("1.0") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome(49.0)}}
Computed property names{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(49.0)}}
Spread operator{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

[1] Потребує ввімкнення "Enable experimental Javascript features" в налаштуваннях `about:flags`

+ +

Примітки для Firefox

+ + + +

Дивись також

+ + diff --git "a/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200_\321\200\320\276\320\267\320\277\320\260\320\272\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200_\321\200\320\276\320\267\320\277\320\260\320\272\321\203\320\262\320\260\320\275\320\275\321\217/index.html" new file mode 100644 index 0000000000..c1dc7dfbf8 --- /dev/null +++ "b/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200_\321\200\320\276\320\267\320\277\320\260\320\272\321\203\320\262\320\260\320\275\320\275\321\217/index.html" @@ -0,0 +1,282 @@ +--- +title: Оператор розпакування +slug: Web/JavaScript/Reference/Operators/Оператор_розпакування +tags: + - Iterator + - JavaScript + - Operator + - Ітератор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +
{{jsSidebar("Operators")}}
+ +

Оператор розпакування дозволяє розкласти колекцію в місця, де потрібні нуль чи декілька аргументів (як от виклики функцій), або декілька елементів (масиви), чи декілька змінних (деструктуризаційне присвоєння). Також можна розкласти об’єкт у місця де потрібні нуль чи більше пар ключ-значення (для оголошення об’єктів).

+ +

Синтаксис

+ +

Для виклику функцій:

+ +
myFunction(...iterableObj);
+
+ +

Для масивів:

+ +
[...iterableObj, 4, 5, 6];
+ +

Для об’єктів (нове в ECMAScript; чернетка в 3-ій стадії):

+ +
let objClone = { ...obj };
+ +

Приклади

+ +

Розпакування у викликах функції

+ +

Заміна apply

+ +

Приклад: {{jsxref( "Function.prototype.apply")}} прийнято використовувати у випадках, коли потрібно застосувати елементи масиву як аргументи функції.

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);
+ +

З розпакуванням тепер отак:

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);
+ +

Оператор розпакування може бути застосований до будь-якого аргументу та може бути застосований кілька разів.

+ +
function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);
+ +

Apply для new

+ +

Викликаючи конструктор з new, неможливо напряму використовувати на ньому apply (apply робить [[Call]], а не [[Construct]]). Проте з оператором розпакування можна легко розкладати масив у аргументи конструктора:

+ +
var dateFields = [1970, 0, 1]; // 1 Січ 1970
+// var d = new Date.apply(dateFields) не спрацює. Викине TypeError
+var d = new Date(...dateFields); // вуаля
+ +

Розпакування в масивах

+ +

Ліпше оголошення масивів

+ +

Без розпакування, коли потрібно створити новий масив так, щоб якийсь існуючий був його частиною, старого синтаксису оголошення масиву не достатньо та необхідно використовувати комбінацію методів push, splice, concat, тощо. З оператором розпакування це стає значно лаконічніше:

+ +
var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]
+ +

Як і з розпакуванням списку аргументів, ... можна використовувати будь-де в оголошенні масиву та будь-яку кількість разів.

+ +

Копіювання масиву

+ +
var arr = [1, 2, 3];
+var arr2 = [...arr]; // так само як arr.slice()
+arr2.push(4);
+
+// arr2 стає [1, 2, 3, 4]
+// arr залишається незміненим
+ +

Зауваження: оператор розпакування при копіюванні масиву йде лише на один рівень вглиб. Таким чином він не придатний для копіювання багатовимірних масивів, що видно з наступного прикладу (те саме з {{jsxref("Object.assign()")}} та розпакуванням об’єктів).

+ +
var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// Тепер масив a також змінено: [[], [2], [3]]
+ +

Ліпше злиття масивів

+ +

{{jsxref("Array.concat")}} часто використовується, щоб додати один масив у кінець іншого. Без розпакування це робиться так:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Доддати всі елементи з arr2 в arr1
+arr1 = arr1.concat(arr2);
+ +

З розпакуванням це стає:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2];
+ +

{{jsxref("Array.unshift")}} часто використовується для того, щоб вставити значення з одного масиву в початок іншого. Без розпакування це робиться так:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Вставити всі елементи з arr2 в початок arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 тепер [3, 4, 5, 0, 1, 2]
+ +

З розпакуванням це стає:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 тепер [3, 4, 5, 0, 1, 2]
+ +

Розпакування об’єктів

+ +

Пропозиція Rest/Spread Properties for ECMAScript (стадія 3) додає розпакування до об’єктів. It copies own enumerable properties from a provided object onto a new object.

+ +

Однорівневе клонування (без прототипу) чи злиття об’єктів тепер можливе використовуючи коротший запис ніж {{jsxref("Object.assign()")}}.

+ +
var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }
+ +

Зауваж, що {{jsxref("Object.assign()")}} викликає сетери, а оператор розпакування - ні.

+ +

Лише для ітерованих

+ +

Розпакування може бути застосоване лише для ітерованик об’єктів:

+ +
var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+ +

Зауваження: наразі (липень 2017) можна говорити про появу розпакування об’єктів у специфікації (дивись попередній підзаголовок). Але ще не до кінця зрозуміло як працюватиме вищенаведений приклад, адже ще немає конкретного рішення щодо цього у спецефікації. Тобто тепер ти можеш розпакувати об’єкт в об’єкт, але не зрозуміло, що станеться, якщо об’єкт розпаковувати у масив і навпаки, масив у об’єкт. Наприклад транспілятор babel вертає наступні результати:

+ +
var obj = {'key1': 'value1'};
+var array = [...obj]; // запише в array пустий масив []
+
+var arr = [1,1,1];
+var obj1 = {...arr}; // запише в obj1 {'0': 1, '1': 1, '2': 1}
+ +

Розпакування великих колекцій

+ +

Використовуючи розпакування зважай на можливість досягнення ліміту аргументів, встановленого у JavaScript рушії, адже оператор розпакування витягує всі елементи колекції в стек, скільки б їх не було. Дивись apply() щоб дізнатись більше.

+ +

Оператор решти

+ +

Оператор решти виглядає точно так само як і оператор розпакування. До певної міри, він протилежний оператору розпакування - оператор розпакування розкладає колекцію на елементи, а оператор решти, натомість, складає кілька елементів у колекцію. Дивись решта параметрів.

+ +

Специфікація

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтанКоментар
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Визначено в деяких секціях специфікацій: Array Initializer, Argument Lists
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}}Без змін.
Rest/Spread Properties for ECMAScriptЧернеткаЧернетка в 3 стадії
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Spread operation in array literals{{CompatChrome("46")}}{{ CompatGeckoDesktop("16") }}{{CompatIE("Edge/10240")}}{{CompatNo}}7.1
Spread operation in function calls{{CompatChrome("46")}}{{ CompatGeckoDesktop("27") }}{{CompatIE("Edge/10240")}}{{CompatNo}}7.1
Spread operation in destructuring{{CompatChrome("49")}}{{ CompatGeckoDesktop("34") }}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Spread operation in array literals{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("16") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread operation in function calls{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("27") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread operation in destructuring{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git "a/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\320\276\321\200\321\226\320\262\320\275\321\217\320\275\320\275\321\217/index.html" "b/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\320\276\321\200\321\226\320\262\320\275\321\217\320\275\320\275\321\217/index.html" new file mode 100644 index 0000000000..ea253b2291 --- /dev/null +++ "b/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\320\276\321\200\321\226\320\262\320\275\321\217\320\275\320\275\321\217/index.html" @@ -0,0 +1,244 @@ +--- +title: Оператори порівняння +slug: Web/JavaScript/Reference/Operators/Оператори_порівняння +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

JavaScript має як строге порівняння, так і порівняння з перетворенням типів. Строге порівняння (===) є істинним лише в тому випадку, якщо операнди мають однаковий тип, а їхній зміст співпадає. Найчастіше вживане абстрактне порівняння (==) приводить операнди до спільного типу перед виконанням порівняння. Для абстрактних порівнянь (наприклад, <=) операнди спочатку приводяться до простих типів, потім приводяться до спільного типу, а вже тоді порівнюються.

+ +

Рядки порівнюються на основі стандартного лексикографічного упорядкування, використовуючи значення Unicode.

+ +

{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}

+ + + +

Особливості порівнянь:

+ + + +

Оператори рівності

+ +

Рівність (==)

+ +

Оператор рівності перетворює операнди, якщо вони не однакового типу, і після цього застосовує строге порівняння. Якщо обидва операнди є об'єктами, JavaScript порівнює внутрішні посилання, які є рівними, якщо операнди посилаються на один і той самий об'єкт у пам'яті.

+ +

Синтаксис

+ +
x == y
+
+ +

Приклади

+ +
1    ==  1         // true
+'1'  ==  1         // true
+1    == '1'        // true
+0    == false      // true
+0    == null       // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1.key == object2.key // true
+0    == undefined  // false
+null == undefined  // true
+
+ +

Нерівність (!=)

+ +

Оператор нерівності повертає true,  якщо операнди не є рівними. Якщо два операнда не належать до одного типу, JavaScript намагається привести операнди до відповідного типу для порівняння. Якщо обидва операнда є об'єктами, JavaScript порівнює внутрішні посилання, які є нерівними, якщо операнди посилаються на різні об'єкти у пам'яті.

+ +

Синтаксис

+ +
x != y
+ +

Приклади

+ +
1 !=   2     // true
+1 !=  '1'    // false
+1 !=  "1"    // false
+1 !=  true   // false
+0 !=  false  // false
+
+ +

Ідентичність / строга рівність (===)

+ +

Оператор ідентичності повертає true, якщо операнди строго рівні (див. вище) без приведення типів

+ +

Синтаксис

+ +
x === y
+ +

Приклади

+ +
3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 === object2 //false
+ +

Неідентичність / строга нерівність (!==)

+ +

Оператор неідентичності повертає true, якщо операнди не є рівними та/або не однакового типу.

+ +

Синтаксис

+ +
x !== y
+ +

Приклади

+ +
3 !== '3' // true
+4 !== 3   // true
+
+ +

Оператори відношення

+ +

Кожен з цих операторів буде примусово приведений до простої величини перед порівнянням. Якщо обидва перетворюються на рядки, вони порівнюються з використанням лексикографічного порядку, інакше вони будуть перетворені на числа для порівняння. Порівняння із NaN завжди поверне false.

+ +

Більше ніж (>)

+ +

Оператор більше ніж повертає true, якщо значення лівого операнда більше за значення правого операнда.

+ +

Синтаксис

+ +
x > y
+ +

Приклади

+ +
4 > 3 // true
+
+ +

Більше чи дорівнює (>=)

+ +

Оператор більше чи дорівнює повертає true, якщо значення лівого операнда більше, або дорівнює значенню правого операнда.

+ +

Синтаксис

+ +
 x >= y
+ +

Приклади

+ +
4 >= 3 // true
+3 >= 3 // true
+
+ +

Менше ніж (<)

+ +

Оператор менше ніж повертає true, якщо значення лівого операнда менше значення правого операнда.

+ +

Синтаксис

+ +
 x < y
+ +

Приклади

+ +
3 < 4 // true
+
+ +

Менше чи дорівнює (<=)

+ +

Оператор менше чи дорівнює повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.

+ +

Синтаксис

+ +
 x <= y
+ +

Приклади

+ +
3 <= 4 // true
+
+ +

Застосування операторів порівняння

+ +

Стандартні оператори рівності (== та !=) використовують алгоритм абстрактної рівності для порівняння двох операндів. Якщо операнди належать до різних типів, алгоритм спробує привести їх до спільного типу перед порівнянням; наприклад, у виразі 5 == '5', рядок праворуч буде приведений до {{jsxref("Число","числа")}} перед здійсненням порівняння.

+ +

Оператори строгої рівності (=== та !==) використовують алгоритм строгої рівності та призначені для виконання перевірки рівності операндів одного типу. Якщо операнди належать до різних типів, результат завжди буде false, тому 5 !== '5'.

+ +

Використовуйте оператори строгого порівняння, якщо операнди мають належати до вказаного типу, як і їх значення, або, якщо конкретний тип операндів має значення. Інакше, використовуйте стандартні оператори рівності, які дозволяють перевіряти ідентичність двох операндів, навіть якщо вони не належать до одного типу.

+ +

Коли в порівнянні застосовується перетворення типів (тобто, це не строге порівняння), JavaScript перетворює типи операндів {{jsxref ("String")}}, {{jsxref ("Число","Number")}}, {{jsxref ("Boolean" )}} або {{jsxref ("Object")}} наступним чином:

+ + + +
Заувага: Рядкові об'єкти є об'єктами типу Object, а не String! Об'єкти типу String використовуються рідко, а отже, наведені нижче результати можуть бути несподіваними:
+ +
// true, оскільки обидва операнди мають тип String (є рядковими примітивами):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false, оскільки a та b мають тип Object і посилаються на різні об'єкти
+a == b
+
+// false, оскільки a та b мають тип Object і посилаються на різні об'єкти
+a === b
+
+// true, оскільки a та 'foo' мають різні типи, але об'єкт (а)
+// перетворюється на рядок 'foo' перед порівнянням
+a == 'foo'
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізовано у JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Додані оператори === та !== . Реалізовано у JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}Дано визначення у декільках секціях специфікації: Оператори відношення, Оператори рівності
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}Дано визначення у декільках секціях специфікації: Оператори відношення, Оператори рівності
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}Дано визначення у декільках секціях специфікації: Оператори відношення, Оператори рівності
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.operators.comparison")}}

+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\321\200\320\270\321\201\320\262\320\276\321\224\320\275\320\275\321\217/index.html" "b/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\321\200\320\270\321\201\320\262\320\276\321\224\320\275\320\275\321\217/index.html" new file mode 100644 index 0000000000..d69f9055d1 --- /dev/null +++ "b/files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\321\200\320\270\321\201\320\262\320\276\321\224\320\275\320\275\321\217/index.html" @@ -0,0 +1,418 @@ +--- +title: Оператори присвоєння +slug: Web/JavaScript/Reference/Operators/Оператори_присвоєння +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння присвоює своєму лівому операнду значення, на підставі значення правого операнду.

+ +

{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}

+ + + +

Огляд

+ +

Базовим оператором присвоєння є оператор дорівнює (=), який присвоює значення свого правого операнда лівому операнду. Таким чином, x = y присвоює змінній x значення змінної y. Інші оператори присвоєння у своїй більшості є скороченнями для стандарних операцій, як це вказано у наступній таблиці з визначеннями та прикладами.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НазваОператор скороченого записуЗначення
Присвоєнняx = yx = y
Присвоєння з додаваннямx += yx = x + y
Присвоєння з відніманнямx -= yx = x - y
Присвоєння з множеннямx *= yx = x * y
Присвоєння з діленнямx /= yx = x / y
Присвоєння остачіx %= yx = x % y
Присвоєння з піднесенням до степеняx **= yx = x ** y
Присвоєння з лівим зсувомx <<= yx = x << y
Присвоєння з правим зсувомx >>= yx = x >> y
Присвоєння з беззнаковим правим зсувомx >>>= yx = x >>> y
Присвоєння з побітовим Іx &= yx = x & y
Присвоєння з виключним побітовим АБОx ^= yx = x ^ y
Присвоєння з побітовим АБОx |= yx = x | y
+ +

Присвоєння

+ +

Простий оператор присвоєння використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоюваннь, щоб присвоїти одне значення декільком змінним. Дивіться приклад нижче.

+ +

Синтаксис

+ +
Оператор: x = y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x дорівнює 10
+x = y = z // x, y та z усі дорівнюють 25
+
+ +

Присвоєння з додаванням

+ +

Оператор присвоєння з додаванням додає значення правого операнду до змінної (лівого перанду) та записує у неї отриманий результат. Типи двох операндів визначають поведінку оператора. Таким чином, його результатом може стати або додавання або конкатенація. Для більш детального огляду дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор додавання", "#Addition", 1)}}.

+ +

Синтаксис

+ +
Оператор:  x += y
+Значення:  x  = x + y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+
+// число + число -> додавання
+bar += 2 // 7
+
+// булеве значення + число -> додавання
+baz += 1 // 2
+
+// булеве значення + булеве значення -> додавання
+baz += false // 1
+
+// число + рядок -> конкатенація
+bar += 'foo' // "5foo"
+
+// рядок + булеве значення -> конкатенація
+foo += false // "foofalse"
+
+// рядок + рядок -> конкатенація
+foo += 'bar' // "foobar"
+
+ +

Присвоєння з відніманням

+ +

Оператор присвоєння з відніманням віднімає значення правого операнду від змінної (лівого перанду) та записує у неї отриманий результат. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор віднімання", "#Subtraction", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x -= y
+Значення:  x  = x - y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar -= 2     // 3
+bar -= 'foo' // NaN
+
+ +

Присвоєння з множенням

+ +

Оператор присвоєння з множенням помножує змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор множення", "#Multiplication", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x *= y
+Значення:  x  = x * y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar *= 2     // 10
+bar *= 'foo' // NaN
+
+ +

Присвоєння з діленням

+ +

Оператор присвоєння з діленням ділить змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор ділення", "#Division", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x /= y
+Значення:  x  = x / y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= 'foo' // NaN
+bar /= 0     // Infinity
+
+ +

Присвоєння остачі

+ +

Оператор присвоєння остачі ділить змінну на значення правого операнду та присвоює остачу змінній. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор остачі", "#Remainder", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x %= y
+Значення:  x  = x % y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar %= 2     // 1
+bar %= 'foo' // NaN
+bar %= 0     // NaN
+
+ +

Присвоєння з піднесенням до степеня

+ +

Оператор присвоєння з піднесенням до степеня обчислює результат піднесення першого операнду до показника степеня другого операнду. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор піднесення до степеня", "#Exponentiation", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x **= y
+Значення:  x  = x ** y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar **= 2     // 25
+bar **= 'foo' // NaN
+ +

Присвоєння з лівим зсувом

+ +

Оператор присвоєння з лівим зсувом виконує зсув першого операнду на вказану кількість бітів ліворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор лівого зсуву", "#Left_shift", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x <<= y
+Значення:  x   = x << y
+
+ +

Приклади

+ +
var bar = 5; //  (00000000000000000000000000000101)
+bar <<= 2; // 20 (00000000000000000000000000010100)
+
+ +

Присвоєння з правим зсувом

+ +

Оператор присвоєння з правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор правого зсуву", "#Right_shift", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x >>= y
+Значення:  x   = x >> y
+
+ +

Приклади

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar >>= 2;  // -2 (-00000000000000000000000000000010)
+
+ +

Присвоєння з беззнаковим правим зсувом

+ +

Оператор присвоєння з беззнаковим правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", " оператор беззнакового правого зсуву", "#Unsigned_right_shift", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x >>>= y
+Значення:  x    = x >>> y
+
+ +

Приклади

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>>= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
+ +

Присвоєння з побітовим І

+ +

Оператор присвоєння з побітовим І використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового І", "#Bitwise_AND", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x &= y
+Значення:  x  = x & y
+
+ +

Приклади

+ +
var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &= 2; // 0
+
+ +

Присвоєння з виключним побітовим АБО

+ +

Оператор присвоєння з виключним побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО (XOR) та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор виключного побітового АБО", "#Bitwise_XOR", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x ^= y
+Значення:  x  = x ^ y
+
+ +

Приклади

+ +
var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Присвоєння з побітовим АБО

+ +

Оператор присвоєння з побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового АБО", "#Bitwise_OR", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x |= y
+Значення:  x  = x | y
+
+ +

Приклади

+ +
var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Приклади

+ +

Лівий операнд з іншим оператором присвоєння

+ +

У незвичних ситуаціях оператор присвоєння (наприклад,  x += y) не є ідентичним виразу, який він означає (в даному випадку x = x + y). Коли лівий операнд оператора присвоєння сам містить оператор присвоєння, лівий операнд обчислюється лише один раз. Наприклад:

+ +
a[i++] += 5         // i обчислюється лише один раз
+a[i++] = a[i++] + 5 // i обчислюється двічі
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES1')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.assignment")}}

+ +
+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/operators/\321\226\320\275\321\226\321\206\321\226\320\260\320\273\321\226\320\267\320\260\321\206\321\226\321\217_\320\276\320\261\342\200\231\321\224\320\272\321\202\321\226\320\262/index.html" "b/files/uk/web/javascript/reference/operators/\321\226\320\275\321\226\321\206\321\226\320\260\320\273\321\226\320\267\320\260\321\206\321\226\321\217_\320\276\320\261\342\200\231\321\224\320\272\321\202\321\226\320\262/index.html" new file mode 100644 index 0000000000..00d1497164 --- /dev/null +++ "b/files/uk/web/javascript/reference/operators/\321\226\320\275\321\226\321\206\321\226\320\260\320\273\321\226\320\267\320\260\321\206\321\226\321\217_\320\276\320\261\342\200\231\321\224\320\272\321\202\321\226\320\262/index.html" @@ -0,0 +1,296 @@ +--- +title: Ініціалізатор об’єкта +slug: Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Об'єкт + - властивості + - літерал + - методи + - мутація + - обчислені +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

Об'єкти можна ініціалізувати через new Object()Object.create(), або за допомогою літеральної нотації (нотації ініціалізатора). Ініціалізатор об'єкта - це список з нуля або більше розділених комою пар імен властивостей та асоційованих з ними значень об'єкта, записаних у фігурних дужках ({}).

+ +

{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}

+ + + +

Синтаксис

+ +
let o = {}
+let o = {a: 'няв', b: 42, c: {}}
+
+let a = 'няв', b = 42, c = {}
+let o = {a: a, b: b, c: c}
+
+let o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {}
+};
+
+ +

Нові позначення у ECMAScript 2015

+ +

Будь ласка, перевірте підтримку цих позначень у таблиці сумісностей. У тих середовищах, де вони не підтримуються, вони призведуть до синтаксичних помилок.

+ +
// Скорочений запис імен властивостей (ES2015)
+let a = 'привіт', b = 42, c = {};
+let o = {a, b, c}
+
+// Скорочений запис імен методів (ES2015)
+let o = {
+  property([parameters]) {}
+}
+
+// Обчислювані імена властивостей (ES2015)
+let prop = 'foo'
+let o = {
+  [prop]: 'як',
+  ['b' + 'ar']: 'справи'
+}
+ +

Опис

+ +

Ініціалізатор об'єкта - це вираз, який описує ініціалізацію {{jsxref("Object","об'єкта")}}. Об'єкт складається з властивостей, які описують цей об'єкт. Значення властивостей об'єкта можуть містити або {{Glossary("primitive","прості")}} типи даних, або інші об'єкти.

+ +

Літеральна нотація об'єкта та JSON

+ +

Літеральна нотація об'єкта - це не те саме, що запис об'єктів JavaScript (JavaScript Object Notation, JSON). Хоча вони схожі, між ними є кілька відмінностей:

+ + + +

Приклади

+ +

Створення об'єктів

+ +

Порожній об'єкт без властивостей може бути створений так:

+ +
let object = {}
+ +

Однак, перевагою літералу або ініціалізатора об'єкта є те, що ви можете швидко створити об'єкт з властивостями всередині фігурних дужок. Ви просто позначаєте список пар key: value, розділених комами.

+ +

Наступний код створює об'єкт з трьома властивостями, його ключами є "foo", "age" та "baz". Значеннями цих ключів є рядок "bar", число 42, а третя властивість має інший об'єкт в якості свого значення.

+ +
let object = {
+  foo: 'bar',
+  age: 42,
+  baz: {myProp: 12}
+}
+ +

Доступ до властивостей

+ +

Коли ви створили об'єкт, ви можете захотіти прочитати чи змінити його. До властивостей об'єкта можна звертатись, використовуючи крапкову нотацію або дужкову нотацію. Читайте Доступ до властивостей, щоб дізнатись більше.

+ +
object.foo // "bar"
+object['age'] // 42
+
+object.foo = 'baz'
+
+ +

Визначення властивостей

+ +

Ми вже дізнались, як позначати властивості за допомогою синтаксису ініціалізатора. Часто у коді є змінні, які ви б хотіли використати в об'єкті. Ви побачите код на зразок такого:

+ +
let a = 'foo',
+    b = 42,
+    c = {};
+
+let o = {
+  a: a,
+  b: b,
+  c: c
+}
+ +

У ECMAScript 2015 є коротше позначення, яке робить те саме:

+ +
let a = 'foo',
+    b = 42,
+    c = {};
+
+// Скорочений запис імен властивостей (ES2015)
+let o = {a, b, c}
+
+// Іншими словами,
+console.log((o.a === {a}.a)) // true
+
+ +

Дублювання імен властивостей

+ +

Якщо використовуються однакові імена властивостей, друга властивість перепише першу.

+ +
var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+
+ +

У строгому режимі ECMAScript 5 дублювання імен властивостей вважалося помилкою {{jsxref("SyntaxError")}}. З появою обчислюваних імен властивостей, що робило дублювання можливим під час виконання, це обмеження було прибране з ECMAScript 2015.

+ +
function haveES2015DuplicatePropertySemantics() {
+  'use strict';
+  try {
+    ({prop: 1, prop: 2});
+
+    // Помилка не викидається, дублікати дозволені у строгому режимі
+    return true;
+  } catch(e) {
+    // Помилка викидається, дублікати заборонені у строгому режимі
+    return false;
+  }
+}
+ +

Визначення методів

+ +

Властивість об'єкта може також посилатись на функцію або гетер чи сетер.

+ +
let o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {}
+}
+ +

У ECMAScript 2015 доступне скорочене позначення, тому ключове слово "function" більше не є обов'язковим.

+ +
// Скорочений запис імен методів (ES2015)
+let o = {
+  property([parameters]) {},
+}
+ +

У ECMAScript 2015 є можливість стисло визначати властивості, значеннями яких є функції-генератори:

+ +
let o = {
+  *generator() {
+    ...........
+  }
+};
+ +

Що є еквівалентним цьому позначенню в стилі ES5 (але зауважте, що у ECMAScript 5 немає генераторів):

+ +
let o = {
+  generator: function* () {
+    ...........
+  }
+}
+ +

Більше інформації та прикладів щодо методів дивіться у статті визначення методів.

+ +

Обчислювані імена властивостей

+ +

Починаючи з ECMAScript 2015, синтаксис об'єктного ініціалізатора також підтримує обчислювані імена властивостей. Це дозволяє розташувати вираз у квадратних дужках [], і він буде обчислений як ім'я властивості. Цей синтаксис є аналогічним дужковій нотації у доступі до властивостей, який ви вже могли використовувати, щоб читати та встановлювати властивості. Тепер ви можете використовувати такий самий синтаксис і для об'єктних літералів:

+ +
// Обчислювані імена властивостей (ES2015)
+let i = 0
+let a = {
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i
+}
+
+console.log(a.foo1) // 1
+console.log(a.foo2) // 2
+console.log(a.foo3) // 3
+
+let param = 'size'
+let config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+}
+
+console.log(config) // {size: 12, mobileSize: 4}
+ +

Розкладені властивості

+ +

Пропозиція Rest/Spread Properties for ECMAScript (стадія 4) додає розкладені властивості до об'єктних літералів. Ця функціональність копіює особисті перелічувані властивості з наданого об'єкта у новий об'єкт.

+ +

Дрібне клонування (не включає prototype) чи злиття об'єктів тепер можливе з використанням синтаксису, коротшого, ніж {{jsxref("Object.assign()")}}.

+ +
let obj1 = { foo: 'bar', x: 42 }
+let obj2 = { foo: 'baz', y: 13 }
+
+let clonedObj = { ...obj1 }
+// Object { foo: "bar", x: 42 }
+
+let mergedObj = { ...obj1, ...obj2 }
+// Object { foo: "baz", x: 42, y: 13 }
+ +

Зауважте, що {{jsxref("Object.assign()")}} запускає сетери, а оператор розкладу ні!

+ +

Мутація прототипу

+ +

Визначення властивості виду __proto__: value чи "__proto__": value не створює властивість з іменем __proto__. Замість цього, якщо надане значення є об'єктом чи null, воно змінює [[Prototype]] створеного об'єкта на це значення. (Якщо значення не є об'єктом чи null, об'єкт не змінюється.)

+ +
let obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+let obj2 = {__proto__: null};
+assert(Object.getPrototypeOf(obj2) === null);
+
+let protoObj = {};
+let obj3 = {'__proto__': protoObj};
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+let obj4 = {__proto__: 'не об\'єкт чи null'};
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty('__proto__'));
+
+ +

У об'єктному літералі дозволена лише одна мутація: декілька мутацій прототипу є синтаксичною помилкою.

+ +

Визначення властивостей, які не використовують нотацію з двокрапкою, не є мутаціями прототипу: вони є визначеннями властивостей, які поводяться ідентично до схожих визначень, що використовують будь-яке інше ім'я.

+ +
let __proto__ = 'змінна';
+
+let obj1 = {__proto__};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'змінна');
+
+let obj2 = {__proto__() { return 'привіт'; }};
+assert(obj2.__proto__() === 'привіт');
+
+let obj3 = {['__prot' + 'o__']: 17};
+assert(obj3.__proto__ === 17);
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.object_initializer")}}

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/async_function/index.html b/files/uk/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..da4ac5f24a --- /dev/null +++ b/files/uk/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,272 @@ +--- +title: async function +slug: Web/JavaScript/Reference/Statements/async_function +tags: + - JavaScript + - async + - Функція + - приклад +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +
+
{{jsSidebar("Statements")}}
+ +

Оголошення async function визначає асинхронну функцію — функцію, яка є об'єктом {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}. Асинхронні функції мають окремий від решти функцій порядок виконання, через цикл подій, вертаючи неявний {{jsxref("Promise","проміс")}} в якості результату. Але синтаксис та структура коду, який використовує асинхронні функції, виглядають, як стандартні синхронні функції.

+ +
+

Ви також можете визначити асинхронну функцію за допомогою {{jsxref("Operators/async_function", "виразу async function", "", 1)}}.

+
+
+ +
{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}
+ + + +

Синтаксис

+ +
async function name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +

Параметри

+ +
+
name
+
Ім'я функції.
+
+ +
+
param
+
Ім'я аргумента, що передається у функцію.
+
+ +
+
statements
+
Інструкції, що складають тіло функції.
+
+ +

Значення, що повертається

+ +

Об'єкт Promise, який буде вирішений зі значенням, поверненим асинхронною функцією, або відхилений з винятком, не перехопленим всередині асинхронної функції.

+ +

Опис

+ +

Асинхронна функція може містити вираз {{jsxref("Operators/await", "await")}}, який призупиняє виконання функції, щоб дочекатись на вирішення об'єкта Promise, після чого відновлює виконання асинхронної функції та повертає вирішене значення.
+
+ Ключове слово await працює тільки всередині асинхронних функцій. Якщо ви використаєте його поза межами тіла асинхронної функції, то отримаєте помилку SyntaxError.

+ +

Поки асинхронна функція призупинена, функція, що її викликала, продовжує виконання (отримавши неявний проміс, повернений асинхронною функцією).

+ +
+

Метою async/await є спрощення синхронного використання промісів, а також виконання певних дій над групою промісів. Як проміси схожі на структуровані зворотні виклики, так використання async/await схоже на поєднання генераторів та промісів.

+
+ +

Приклади

+ +

Асинхронні функції та порядок виконання

+ +
function resolveAfter2Seconds() {
+  console.log("починається повільний проміс")
+  return new Promise(resolve => {
+    setTimeout(function() {
+      resolve("повільний")
+      console.log("повільний проміс завершено")
+    }, 2000);
+  });
+}
+
+function resolveAfter1Second() {
+  console.log("починається швидкий проміс")
+  return new Promise(resolve => {
+    setTimeout(function() {
+      resolve("швидкий")
+      console.log("швидкий проміс завершено")
+    }, 1000);
+  });
+}
+
+async function sequentialStart() {
+  console.log('==ПОСЛІДОВНИЙ СТАРТ==')
+
+  // 1. Виконання доходить сюди майже миттєво
+  const slow = await resolveAfter2Seconds()
+  console.log(slow) // 2. це виконується 2 секунди після 1.
+
+  const fast = await resolveAfter1Second()
+  console.log(fast) // 3. це виконується 3 секунди після 1.
+}
+
+async function concurrentStart() {
+  console.log('==КОНКУРЕНТНИЙ СТАРТ з await==')
+  const slow = resolveAfter2Seconds() // запускає таймер негайно
+  const fast = resolveAfter1Second() // запускає таймер негайно
+
+  // 1. Виконання доходить сюди майже миттєво
+  console.log(await slow) // 2. це виконується 2 секунди після 1.
+  console.log(await fast) // 3. це виконується 2 секунди після 1., одразу після 2., оскільки швидкий вже вирішений
+}
+
+function concurrentPromise() {
+  console.log('==КОНКУРЕНТНИЙ СТАРТ з Promise.all==')
+  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
+    console.log(messages[0]) // повільний
+    console.log(messages[1]) // швидкий
+  });
+}
+
+async function parallel() {
+  console.log('==ПАРАЛЕЛЬНИЙ з await Promise.all==')
+
+  // Починає 2 "роботи" паралельно та чекає, поки обидві не завершаться
+  await Promise.all([
+      (async()=>console.log(await resolveAfter2Seconds()))(),
+      (async()=>console.log(await resolveAfter1Second()))()
+  ])
+}
+
+// Ця функція не обробляє помилки. Дивіться застереження нижче!
+function parallelPromise() {
+  console.log('==ПАРАЛЕЛЬНИЙ з Promise.then==')
+  resolveAfter2Seconds().then((message)=>console.log(message))
+  resolveAfter1Second().then((message)=>console.log(message))
+}
+
+sequentialStart() // через 2 секунди виводить "повільний", далі через ще 1 секунду "швидкий"
+
+// чекає, поки попередній завершиться
+setTimeout(concurrentStart, 4000) // через 2 секунди виводить "повільний", а потім "швидкий"
+
+// знову чекає
+setTimeout(concurrentPromise, 7000) // такий самий, як і concurrentStart
+
+// знову чекає
+setTimeout(parallel, 10000) // справді паралельний: через 1 секунду виводить "швидкий", потім ще через 1 секунду "повільний"
+
+// знову чекає
+setTimeout(parallelPromise, 13000) // такий самий, як і parallel
+
+ +

await та паралелізм

+ +

У sequentialStart виконання відкладається на 2 секунди для першого await, а потім ще на секунду для другого await. Другий таймер не створюється, поки перший не завершиться, отже, код завершує виконання через 3 секунди.

+ +

У concurrentStart обидва таймери створюються і потім очікуються у await. Таймери виконуються конкурентно, це означає, що код завершує виконання через 2, а не через 3 секунди, тобто, як найповільніший таймер.
+ Однак, виклики await все одно запускаються один за одним, це означає, що другий await чекатиме, поки перший не завершиться. У цьому випадку результат швидшого таймера обробляється після повільнішого.

+ +

Якщо ви бажаєте виконувати дві або більше робіт паралельно, ви маєте використовувати await Promise.all([job1(), job2()]), як це показано у прикладі parallel.

+ +
+

async/await проти Promise#then та обробка помилок

+ +

Більшість асинхронних функцій також можна написати як звичайні функції, що використовують проміси. Однак, асинхронні функції менш каверзні, коли доходить до обробки помилок.

+ +

І concurrentStart, і concurrentPromise функціонально еквівалентні:

+ + + +

Однак, асинхронні функції все ж можуть ковтати помилки.
+ Візьміть для прикладу асинхронну функцію parallel. Якби вона не мала await (чи return) для повернення результату виклику Promise.all([]), будь-яка помилка не спливала б.
+ В той час, як приклад parallelPromise виглядає простішим, він взагалі не обробляє помилки! Для цього знадобилося б схожа конструкція return Promise.all([]).

+
+ +

Заміна ланцюжка промісів на асинхронну функцію

+ +

API, який вертає {{jsxref("Promise")}}, створить ланцюжок промісів, і це розбиває функцію на багато частин. Розглянемо наступний код:

+ +
function getProcessedData(url) {
+  return downloadData(url) // вертає проміс
+    .catch(e => {
+      return downloadFallbackData(url) // вертає проміс
+    })
+    .then(v => {
+      return processDataInWorker(v) // вертає проміс
+    })
+}
+
+ +

його можна переписати єдиною асинхронною функцією наступним чином:

+ +
async function getProcessedData(url) {
+  let v
+  try {
+    v = await downloadData(url)
+  } catch(e) {
+    v = await downloadFallbackData(url)
+  }
+  return processDataInWorker(v)
+}
+
+ +

У наведеному вище прикладі немає оператора await після ключового слова return, тому що повернене значення async function неявно загортається у {{jsxref("Promise.resolve")}}.

+ +
+

return await promiseValue; проти return promiseValue;

+ +

Неявне загортання повернених значень у {{jsxref("Promise.resolve")}} не означає, що return await promiseValue; є функціонально еквівалентним return promiseValue;

+ +

Розглянемо наступну переробку наведеного вище коду, яка вертає null, якщо processDataInWorker відхиляється з помилкою:

+ +
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); спричинив би відхилення об'єкта {{jsxref("Promise")}}, поверненого функцією, замість вирішення його зі значенням null, якщо processDataInWorker(v) відхилено.

+ +

Це висвітлює тонку різницю між return foo; та return await foo;return foo; негайно вертає foo і ніколи не викидає помилку, навіть якщо foo є промісом, який відхиляється. return await foo; чекатиме на вирішення чи відхилення foo, якщо це проміс, і викидає помилку до повернення, якщо його відхилено.

+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}Початкове визначення у ES2017.
{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES8')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

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

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/block/index.html b/files/uk/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..4a5dd619aa --- /dev/null +++ b/files/uk/web/javascript/reference/statements/block/index.html @@ -0,0 +1,132 @@ +--- +title: Блок +slug: Web/JavaScript/Reference/Statements/block +tags: + - JavaScript + - Довідка +translation_of: Web/JavaScript/Reference/Statements/block +--- +
{{jsSidebar("Statements")}}
+ +

Блок (або складена інструкція у інших мовах) використовується, щоб об'єднати нуль або більше інструкцій. Блок позначається парою фігурних дужок і може мати необов'язкову {{jsxref("Statements/label", "мітку")}}:

+ +
{{EmbedInteractiveExample("pages/js/statement-block.html")}}
+ + + +

Синтаксис

+ +

Блок

+ +
{
+  StatementList
+}
+
+ +

Блок з міткою

+ +
LabelIdentifier: {
+  StatementList
+}
+
+ +
+
StatementList
+
Інструкції, згруповані всередині блоку.
+
LabelIdentifier
+
Необов'язкова {{jsxref("Statements/label", "мітка")}} для візуальної ідентифікації або як вказівник для оператора {{jsxref("Statements/break", "break")}}.
+
+ +

Опис

+ +

Блок часто називають складеною інструкцією у інших мовах. Він дозволяє використовувати декілька інструкцій там, де JavaScript очікує лише одну. Об'єднання інструкцій у блоки є звичайною практикою у JavaScript. Протилежна поведінка можлива завдяки порожньому оператору, де ви не надаєте інструкцію, хоча вона вимагається.

+ +

Блоки часто використовуються у поєднанні з операторами if та for.

+ +

Правила області видимості блоку

+ +

З var та оголошенням функцій

+ +

Змінні, оголошені оператором var або створені оголошенням функційне мають блочної області видимості. Змінні, створені всередині блоку, додаються у область видимості функції або скрипта, що його містить, і ефект від присвоєння їм значення виходить за межі блоку. Іншими словами, блок не створює область видимості. Для прикладу:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // виведе 2
+
+ +

Цей код виведе 2, тому що інструкція var x всередині блоку знаходиться в тій самій області видимості, що й інструкція var x перед блоком.

+ +

З let та const

+ +

А ось ідентифікатори, оголошені операторами {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const", "const")}} мають блочну область видимості:

+ +
let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // виведе 1
+ +

Інструкція x = 2 обмежена областю видимості блоку, у якому записана.

+ +

Те саме працює для const:

+ +
const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // виведе 1 і не викине SyntaxError...
+ +

Зауважте, що const c = 2 у області видимості блоку не викине SyntaxError: Identifier 'c' has already been declared, тому що оголошення є унікальним всередині блоку.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-block', 'Block statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-block', 'Block statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.1', 'Block statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.1', 'Block statement')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/break/index.html b/files/uk/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..700d495bd6 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/break/index.html @@ -0,0 +1,151 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Statements/break +--- +
{{jsSidebar("Statements")}}
+ +

Оператор break перериває виконання поточного циклу, перемикача {{jsxref("Statements/switch", "switch")}} або {{jsxref("Statements/label", "поміченого")}} блоку і передає контроль до наступної за перерваним блоком інструкції.

+ +
{{EmbedInteractiveExample("pages/js/statement-break.html")}}
+ + + +

Синтаксис

+ +
break [label];
+ +
+
label {{optional_inline}}
+
Ідентифікатор, асоційований з міткою конструкції. Якщо конструкція не є циклом або перемикачем {{jsxref("Statements/switch", "switch")}}, цей параметр є обов'язковим.
+
+ +

Опис

+ +

Оператор break має необов'язкову мітку, яка дозволяє програмі переривати виконання поміченої конструкції. Оператор break має бути розташований всередині конструкції, на яку посилається. Вона може бути будь-яким {{jsxref("Statements/block", "блоком")}} інструкцій; це необов'язково має бути цикл.

+ +

Оператор break, з міткою або без неї, не може використовуватися всередині тіла фукнції, що вкладена у цикл, перемикач або помічений блок, який має перервати оператор break.

+ +

Приклади

+ +

Наступна фукнція містить оператор break, що перериває цикл {{jsxref("Statements/while", "while")}}, коли i дорівнює 3, а після цього поветає значення 3 * x.

+ +
function testBreak(x) {
+  var i = 0;
+
+  while (i < 6) {
+    if (i == 3) {
+      break;
+    }
+    i += 1;
+  }
+
+  return i * x;
+}
+ +

Наступний код використовує оператори break з поміченими блоками. Оператор break має знаходитися всередині будь-якої мітки, на яку посилається. Зауважте, що inner_block вкладений у outer_block.

+ +
outer_block: {
+  inner_block: {
+    console.log('1');
+    break outer_block; // перериває обидва inner_block та outer_block
+    console.log(':-('); // пропускається
+  }
+  console.log('2'); // пропускається
+}
+
+ +

Наступний код також використовує оператори break з поміченими блоками, але генерує помилку SyntaxError, тому що оператор break знаходиться всередині block_1, але посилається на block_2. Оператор break завжди має знаходитися всередині будь-якої мітки, на яку посилається.

+ +
block_1: {
+  console.log('1');
+  break block_2; // SyntaxError: label not found
+}
+
+block_2: {
+  console.log('2');
+}
+
+ +

Помилки SyntaxError також генеруються у наступних прикладах, які використовують оператори break всередині функцій, що вкладені у цикл чи помічений блок, що їх мають перервати оператори break.

+ +
function testBreak(x) {
+  var i = 0;
+
+  while (i < 6) {
+    if (i == 3) {
+      (function() {
+        break;
+      })();
+    }
+    i += 1;
+  }
+
+return i * x;
+}
+
+testBreak(1); // SyntaxError: Illegal break statement
+
+ +
block_1: {
+  console.log('1');
+  ( function() {
+    break block_1; // SyntaxError: Undefined label 'block_1'
+  })();
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Версія без мітки.
{{SpecName('ES3')}}{{Spec2('ES3')}}Додано версію з міткою.
{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/class/index.html b/files/uk/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..1350459ce8 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/class/index.html @@ -0,0 +1,119 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - ECMAScript 2015 + - JavaScript + - Довідка + - Класи + - оголошення +translation_of: Web/JavaScript/Reference/Statements/class +--- +
{{jsSidebar("Statements")}}
+ +

Оголошення класу створює новий клас із заданим ім'ям, на основі прототипного наслідування.

+ +
{{EmbedInteractiveExample("pages/js/statement-class.html")}}
+ + + +
+

Ви також можете визначити клас, використовуючи {{jsxref("Operators/class", "вираз класу", "", 1)}}. Але, на відміну від виразу класу, оголошення класу не дозволяє повторне оголошення існуючого класу і викине помилку при спробі це зробити. 

+
+ +

Синтаксис

+ +
class name [extends] {
+  // тіло класу
+}
+
+ +

Опис

+ +

Тіло класу у оголошенні класу виконується у строгому режимі. Властивість constructor є необов'язковою.

+ +

Оголошення класу не {{Glossary("Hoisting", "виринають")}} (на відміну від оголошення функцій).

+ +

Приклади

+ +

Просте оголошення класу

+ +

У наступному прикладі ми спочатку визначаємо клас на ім'я Polygon, далі розширюємо його, створюючи клас на ім'я Square. Зауважте, що ключове слово super() може використовуватись лише у конструкторах і має викликатись раніше, ніж використовується ключове слово this.

+ +
class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    super(length, length);
+    this.name = 'Square';
+  }
+}
+ +
+

Спроба оголосити клас двічі

+ +

Повторне оголошення класу викидає помилку типу.

+ +
class Foo {};
+class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared
+
+ +

Така сама помилка викидається, коли клас був визначений до використання виразу класу.

+ +
var Foo = class {};
+class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
+
+
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/const/index.html b/files/uk/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..18e898e6cb --- /dev/null +++ b/files/uk/web/javascript/reference/statements/const/index.html @@ -0,0 +1,232 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - константа +translation_of: Web/JavaScript/Reference/Statements/const +--- +
{{jsSidebar("Statements")}}
+ +

Оголошення const створює посилання на значення, доступне лише для читання. Що не гарантує незмінність значення, на котре вказує посилання, а лише той факт, що не можна повторно присвоїти будь-яке значення змінній з відповідним ім'ям.

+ +

Синтаксис

+ +
const назваКонстантноїЗмінної1 = значення1 [, назваКонстантноїЗмінної2 = значення2 [, ... [, назваКонстантноїЗмінноїN = значенняN]]];
+ +
+
значенняN
+
Назва константи, будь-який прийнятний {{Glossary("identifier")}} (ідентифікатор).
+
значенняN
+
Значення константи; будь-яки дозволений вираз (expression).
+
+ +

Description

+ +

This declaration creates a constant that can be either global or local to the function in which it is declared. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later).

+ +

Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can't be redeclared.

+ +

All the considerations about the "temporal dead zone" that apply to let, also apply to const.

+ +

A constant cannot share its name with a function or a variable in the same scope.

+ +

Examples

+ +

The following example demonstrates how constants behave. Try this in your browser console.

+ +
// NOTE: Constants can be declared with uppercase or lowercase, but a common
+// convention is to use all-uppercase letters.
+
+// define MY_FAV as a constant and give it the value 7
+const MY_FAV = 7;
+
+// this will throw an error in Firefox and Chrome (but does not fail in Safari)
+MY_FAV = 20;
+
+// will print 7
+console.log("my favorite number is: " + MY_FAV);
+
+// trying to redeclare a constant throws an error
+const MY_FAV = 20;
+
+// the name MY_FAV is reserved for constant above, so this will also fail
+var MY_FAV = 20;
+
+// this throws an error also
+let MY_FAV = 20;
+
+// it's important to note the nature of block scoping
+if (MY_FAV === 7) {
+    // this is fine and creates a block scoped MY_FAV variable
+    // (works equally well with let to declare a block scoped non const variable)
+    const MY_FAV = 20;
+
+    // MY_FAV is now 20
+    console.log("my favorite number is " + MY_FAV);
+
+    // this gets hoisted into the global context and throws an error
+    var MY_FAV = 20;
+}
+
+// MY_FAV is still 7
+console.log("my favorite number is " + MY_FAV);
+
+// Assigning to A const variable is a syntax error
+const A = 1; A = 2;
+
+// throws an error, missing initializer in const declaration
+const FOO;
+
+// const also works on objects
+const MY_OBJECT = {"key": "value"};
+
+// Overwriting the object behaves as above (throws an error in Firefox and Chrome but does not fail in Safari)
+MY_OBJECT = {"OTHER_KEY": "value"};
+
+// However, object keys are not protected,
+// so the following statement is executed without problem
+MY_OBJECT.key = "otherValue"; // Use Object.freeze() to make object immutable
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(21)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(36)}}11125.1
Reassignment fails{{CompatChrome(20)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(13)}}11{{CompatUnknown}}{{CompatUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}     
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Reassignment fails{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}}{{CompatChrome(49.0)}}    {{CompatChrome(49.0)}}
+
+ +

Compatibility notes

+ +

In earlier versions of Firefox & Chrome and as of Safari 5.1.7 and Opera 12.00, if you define a variable with const, you can still change its value later. It is not supported in Internet Explorer 6-10, but is included in Internet Explorer 11.

+ +

Firefox-specific notes

+ +

The const declaration was implemented in Firefox long before const appeared in the ECMAScript 2015 (ES6) specification. For const ES6 compliance see {{bug(950547)}} and {{bug(611388)}}.

+ + + +

See also

+ + diff --git a/files/uk/web/javascript/reference/statements/continue/index.html b/files/uk/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..59adc0173a --- /dev/null +++ b/files/uk/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,164 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Statements/continue +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/continue +--- +
{{jsSidebar("Statements")}}
+ +

Оператор continue перериває виконання поточної ітерації у поточному або поміченому циклі, і продовжує виконання циклу з наступної ітерації.

+ +
{{EmbedInteractiveExample("pages/js/statement-continue.html")}}
+ + + +

Синтаксис

+ +
continue [label];
+ +
+
label
+
Ідентифікатор, асоційований з міткою циклу.
+
+ +

Опис

+ +

На відміну від оператора {{jsxref("Statements/break", "break")}}, continue не перериває виконання циклу повністю: замість цього,

+ + + + + +

Оператор continue може містити необов'язкову мітку, яка дозволяє програмі перестрибнути до наступної ітерації поміченого циклу замість поточного циклу. В цьому випадку оператор continue має бути розташований всередині цього поміченого циклу.

+ +

Приклади

+ +

Використання continue з while

+ +

Наступний приклад демонструє цикл {{jsxref("Statements/while", "while")}}, що містить оператор continue, який виконується, коли значення i дорівнює 3. Таким чином, n приймає значення 1, 3, 7 та 12.

+ +
var i = 0;
+var n = 0;
+
+while (i < 5) {
+  i++;
+
+  if (i === 3) {
+    continue;
+  }
+
+  n += i;
+}
+
+ +

Використання continue з міткою

+ +

У наступному прикладі цикл, помічений як checkiandj, містить цикл, помічений як checkj. Якщо зустрічається continue, програма продовжує виконання з початку циклу checkj. Кожен раз, як зустрічається continue, checkj починає нову ітерацію, поки його умова не поверне false. Коли повертається false, виконується решта циклу checkiandj.

+ +

Якби оператор continue мав мітку checkiandj, програма би продовжувалась з початку циклу checkiandj.

+ +

Дивіться також статтю {{jsxref("Statements/label", "Мітка")}}.

+ +
var i = 0;
+var j = 8;
+
+checkiandj: while (i < 4) {
+  console.log('i: ' + i);
+  i += 1;
+
+  checkj: while (j > 4) {
+    console.log('j: ' + j);
+    j -= 1;
+
+    if ((j % 2) == 0)
+      continue checkj;
+    console.log(j + ' непарне число.');
+  }
+  console.log('i = ' + i);
+  console.log('j = ' + j);
+}
+
+ +

Виведе:

+ +
i: 0
+
+// початок checkj
+j: 8
+7 непарне число.
+j: 7
+j: 6
+5 непарне число.
+j: 5
+// кінець checkj
+
+i = 1
+j = 4
+
+i: 1
+i = 2
+j = 4
+
+i: 2
+i = 3
+j = 4
+
+i: 3
+i = 4
+j = 4
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Версія без мітки.
{{SpecName('ES3')}}{{Spec2('ES3')}}Додана версія з міткою.
{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/debugger/index.html b/files/uk/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..12277d50e5 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,78 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Statements/debugger +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +
{{jsSidebar("Statements")}}
+ +

Оператор debugger запускає будь-яку доступну налагоджувальну функціональність, наприклад, встановлення точки переривання. Якщо налагоджувальна функціональність недоступна, цей оператор не матиме ефекту.

+ +

Синтаксис

+ +
debugger;
+ +

Приклади

+ +

Наступний приклад демонструє код, у який був вставлений оператор debugger, щоб запустити налагоджувач (якщо він є), коли викликається функція.

+ +
function potentiallyBuggyCode() {
+    debugger;
+    // потенційно помилковий код, через який треба пройти, дослідити і т.д.
+}
+ +

Коли викликається налагоджувач, виконання призупиняється на операторі debugger. Це як точка переривання у коді скрипта.

+ +

Paused at a debugger statement.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}{{Spec2('ES5.1')}}Початкове визначення
{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}{{Spec2('ES1')}}Лише згаданий як зарезервоване слово.
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/default/index.html b/files/uk/web/javascript/reference/statements/default/index.html new file mode 100644 index 0000000000..648a2ec139 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/default/index.html @@ -0,0 +1,117 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +translation_of: Web/JavaScript/Reference/Statements/switch +--- +
{{jsSidebar("Statements")}}
+ +

Ключове слово default може використовуватись у двох ситуаціях у JavaScript: у конструкції {{jsxref("Statements/switch", "switch")}} або з оператором {{jsxref("Statements/export", "export")}}.

+ +
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
+ + + +

Синтаксис

+ +

У конструкції {{jsxref("Statements/switch", "switch")}}:

+ +
switch (expression) {
+  case value1:
+    //Інструкції, що виконуються, коли значення expression дорівнює value1
+    [break;]
+  default:
+    //Інструкції, що виконуються, коли жодне значення не дорівнює значенню expression
+    [break;]
+}
+ +

З оператором {{jsxref("Statements/export", "export")}}:

+ +
export default nameN 
+ +

Опис

+ +

Більш детально дивіться на сторінках

+ + + +

Приклади

+ +

Використання default у конструкціях switch

+ +

У наступному прикладі, якщо expr оцінюється як "Апельсини" або "Яблука", програма зайде або у блок case "Апельсини", або у "Яблука" та виконає відповідну інструкцію. Ключове слово default допоможе у будь-якому іншому випадку та виконає пов'язану інструкцію.

+ +
switch (expr) {
+  case 'Апельсини':
+    console.log('Апельсини коштують $0.59 за кілограм.');
+    break;
+  case 'Яблука':
+    console.log('Яблука коштують $0.32 за кілограм.');
+    break;
+  default:
+    console.log('На жаль, в нас закінчились ' + expr + '.');
+}
+ +

Використання default з export

+ +

Якщо ви хочете експортувати єдине значення, або вам потрібне запасне значення модуля, можна використати default у export:

+ +
// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;
+ +

Тоді у іншому скрипті буде прямий імпорт експорту за замовчуванням:

+ +
// module "another-module.js"
+import cube from 'my-module';  //default export gave us the liberty to say import cube, instead of import cube from 'my-module'
+console.log(cube(3)); // 27
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}}
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}}
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/do...while/index.html b/files/uk/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..676ce0a4ca --- /dev/null +++ b/files/uk/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,101 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +tags: + - JavaScript + - Цикл +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +
{{jsSidebar("Statements")}}
+ +

Оператор do...while створює цикл, який виконує вказану інструкцію, доки перевірочна умова не буде оцінена як false. Умова оцінюється після виконання інструкції, в результаті вказана інструкція виконується принаймні один раз.

+ +
{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}
+ + + +

Синтаксис

+ +
do
+   statement
+while (condition);
+
+ +
+
statement
+
Інструкція, яка виконується принаймні один раз, і виконується повторно кожен раз, коли умова оцінюється як true. Для виконання кількох інструкцій, використовуйте {{jsxref("Statements/block", "блок")}} ({ ... }), щоб згрупувати ці інструкції.
+
+ +
+
condition
+
Вираз, який оцінюється після кожного проходу циклу. Якщо condition оцінюється як true, statement виконується повторно. Коли condition оцінюється як false, контроль переходить до наступної після do...while інструкції.
+
+ +

Приклад

+ +

Використання do...while

+ +

У наступному прикладі цикл do...while виконується принаймні один раз, і продовжує виконуватись, доки i не перестане бути менше 5.

+ +

HTML-зміст

+ +
<div id="example"></div>
+ +

JavaScript-зміст

+ +
var result = '';
+var i = 0;
+do {
+   i += 1;
+   result += i + ' ';
+} while (i > 0 && i < 5); // Хоча i == 0, цикл виконається, оскільки починається без перевірки
+document.getElementById('example').innerHTML = result;
+ +

Результат

+ +

{{ EmbedLiveSample('Examples') }}

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}{{Spec2('ES6')}}Кінцева крапка з комою ; тепер необов'язкова.
{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/empty/index.html b/files/uk/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..cdb9945396 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,105 @@ +--- +title: Порожній оператор +slug: Web/JavaScript/Reference/Statements/Empty +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +
{{jsSidebar("Statements")}}
+ +

Порожній оператор використовується, щоб не надавати інструкції там, де синтаксис JavaScript їх очікує.

+ +
{{EmbedInteractiveExample("pages/js/statement-empty.html")}}
+ + + +

Синтаксис

+ +
;
+
+ +

Опис

+ +

Порожній оператор - це крапка з комою (;), вона позначає, що жодної інструкції не буде виконано, навіть якщо синтаксис JavaScript її вимагає. Протилежна поведінка, коли ви бажаєте виконати декілька інструкцій, але JavaScript дозволяє лише одну, можлива за допомогою блоку; він об'єднує декілька інструкцій у одну.

+ +

Приклади

+ +

Порожній оператор іноді використовується у циклах. Дивіться наступний приклад з порожнім тілом циклу:

+ +
var arr = [1, 2, 3];
+
+// Присвоїти всім елементам масиву значення 0
+for (i = 0; i < arr.length; arr[i++] = 0) /* порожній оператор */ ;
+
+console.log(arr)
+// [0, 0, 0]
+
+ +

Заувага: Гарною ідеєю є коментувати навмисне використання порожнього оператора, оскільки його буває важко відрізнити від звичайної крапки з комою. У наступному прикладі його використання, мабуть, не є навмисним:

+ +
if (condition);       // Обережно, цей "if" нічого не робить!
+   killTheUniverse()  // Тому це ніколи не виконається!!!
+
+ +

Інший приклад: Конструкція if...else без фігурних дужок ({}). Якщо three дорівнює true, то нічого не відбудеться, four не грає ролі, і, таким чином, функція launchRocket() у випадку else не буде виконана.

+ +
if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // тут нічого
+else if (four)
+  doFour();
+else
+  launchRocket();
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}{{Spec2('ES1')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/export/index.html b/files/uk/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..ef946fa4e4 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/export/index.html @@ -0,0 +1,205 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +
{{jsSidebar("Statements")}}
+ +

Вираз export використовується для створення модулів у Javascript для експортування функцій, об'єктів, або примітивних значень з модуля щоб їх можна було використовувати в інших програмах за допомогою виразу {{jsxref("Statements/import", "import")}}.

+ +

Експортовані модулі знаходяться в {{jsxref("Strict_mode","strict mode")}} незалежно від того чи ви оголошуєте їх як такі чи ні. Вираз експорт не може бути використаним в вбудованих скріптах (embedded scripts).

+ +

Синтакс

+ +

Існує три види експортів

+ +
    +
  1. Іменовані експорти (Нуль або більше експортів в модулі)
  2. +
  3. Дефолтний експорт (Один на модуль)
  4. +
  5. Гібридні експорти
  6. +
+ +
// Експортування індивідуальних властивостей
+export let name1, name2, …, nameN; // також var, const
+export let name1 = …, name2 = …, …, nameN; // також var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Список експортів
+export { name1, name2, …, nameN };
+
+// Перейменування експортів
+export { variable1 as name1, variable2 as name2, …, nameN };
+
+// Експортування деструктивних значень з перейменуванням
+export const { name1, name2: bar } = o;
+
+// Дефолтні експорти
+export default expression;
+export default function (…) { … } // також class, function*
+export default function name1(…) { … } // також class, function*
+export { name1 as default, … };
+
+//  Агрегаціямодулів
+export * from …; // не встановлює дефолтний експорт
+export { name1, name2, …, nameN } from …;
+export { import1 as name1, import2 as name2, …, nameN } from …;
+export { default } from …;
+ +
+
nameN
+
Змінна яку потрібно експортувати (щоб імпортувати за допомогою {{jsxref("Statements/import", "import")}} в іншому скрипті).
+
+ +

Опис

+ +

Існує два типи експортів, іменовані і дефолтні. Ви можете мати багато іменованих в модулі, але тільки один дефолтний експорт. Кожен тип має відповідність у синтаксі наведеному вище:

+ +

Іменовані експорти:

+ +
// експорт функціоналу оголошеного раніше
+export { myFunction, myVariable };
+
+// експортуємо індивідуальний функціонал (можу бути var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };
+
+ +

Дефолтні експорти:

+ +
// експорт функціоналу оголошеного раніше як дефолтний
+export { myFunction as default };
+
+// експорт індивідуального функціоналу як дефолтний
+export default myFunction() { ... }
+export default class { .. }
+ +

Іменоввані експорти є корисними при експортуванні декількох значень. Під час імпорту іменованих експортів обов'язково потрібно використовувати те саме ім'я відповідного об'єкта.

+ +

Але дефолтний експорт може бути імпортований з будь яким ім'ям, наприклад:

+ +
// файл test.js
+let k; export default k = 12;
+
+ +
// якийсь інший файл
+import m from './test'; // Візьміть до уваги що ми можемо використовувати import m замість import k, тому що k є дефолтним експортом
+console.log(m);        // виведе 12
+
+ +

Ви також можете переіменовувати іменні експорти щоб уникнути конфліктів:

+ +
export { myFunction as function1,
+         myVariable as variable };
+ +

І складати підмодулі докупи в батьківському модулі щоб можна було їх імпортувати з цього модуля.

+ +
// В parentModule.js
+export { myFunction, myVariable } from 'childModule1.js';
+export { myClass } from 'childModule2.js';
+
+ +
// В модулі вищого рівня
+import { myFunction, myVariable, myClass } from 'parentModule.js'
+ +

Приклад

+ +

Використання іменних експортів

+ +

В модулі my-module.js, ми можемо написати такий код:

+ +
// модуль "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+
+const foo = Math.PI + Math.SQRT2;
+
+var graph = {
+  options: {
+      color:'white',
+      thickness:'2px'
+  },
+  draw: function() {
+      console.log('From graph draw function');
+  }
+}
+
+export { cube, foo, graph };
+
+ +

Потім у модулі вищого порядку всередині вашої HTML сторінки ми можемо написати:

+ +
import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888
+ +

Важливо звернути увагу на наступне:

+ + + +

Використання дефолтного експорта

+ +

Якщо ви хочете експортувати одне значення з вашого модулю ви можете використати дефолтний екпорт:

+ +
// модуль "my-module.js"
+
+export default function cube(x) {
+  return x * x * x;
+}
+
+ +

Потім, у дефолтному скрипті імпортувати напряму це значення:

+ +
import cube from './my-module.js';
+console.log(cube(3)); // 27
+
+ +

Специфікація

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-exports', 'Exports')}}{{Spec2('ES2015')}}Initial definition.
+ +

Підтримка браузерами

+ + + +

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

+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/statements/for-await...of/index.html b/files/uk/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..9c0440c346 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,253 @@ +--- +title: for await...of +slug: Web/JavaScript/Reference/Statements/for-await...of +tags: + - JavaScript + - await + - Інструкція + - асинхронний + - перебір +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +
{{jsSidebar("Statements")}}
+ +

Інструкція for await...of створює цикл, що перебирає як асинхронні ітерабельні об'єкти, так і синхронні ітерабельні об'єкти, в тому числі вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, подібні до масивів об'єкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} чи {{DOMxRef("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а також визначені користувачем асинхронні/синхронні ітерабельні об'єкти. Вона викликає користувацький хук до ітерацій з командами, що виконуватимуться для значення кожної окремої властивості об'єкта. Як і оператор {{jsxref("Operators/await", "await")}}, інструкція може використовуватись лише всередині {{jsxref("Statements/async_function", "асинхронної функції")}}.

+ +
+

for await...of не працює з асинхронними ітераторами, які не є асинхронними ітерабельними об'єктами.

+
+ + + +

Синтаксис

+ +
for await (variable of iterable) {
+  statement
+}
+
+ +
+
variable
+
На кожній ітерації значення іншої властивості присвоюється змінній variable. Змінна variable може бути оголошена через const, let або var.
+
iterable
+
Об'єкт, чиї ітерабельні властивості перебираються.
+
+ +

Приклади

+ +

Перебір асинхронних ітерабельних об'єктів

+ +

Ви також можете перебирати об'єкт, який явно реалізує протокол асинхронного ітерабельного об'єкта:

+ +
const asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+   }
+})();
+
+// 0
+// 1
+// 2
+
+ +

Перебір асинхронних генераторів

+ +

Оскільки значення, що повертають асинхронні генератори, відповідають протоколу асинхронного ітерабельного об'єкта, їх можна перебирати циклом for await...of.

+ +
async function* asyncGenerator() {
+  let i = 0;
+  while (i < 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+ +

Для більш конкретного прикладу перебору асинхронного генератора за допомогою for await...of, розгляньте перебір даних з API.

+ +

Цей приклад спочатку створює асинхронний ітерабельний об'єкт для потоку даних, а далі використовує його, щоб дізнатись розмір відповіді від API.

+ +
async function* streamAsyncIterable(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// Отримує дані з URL та обчислює розмір відповіді за допомогою
+// асинхронного генератора.
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // Міститиме розмір відповіді, у байтах.
+  let responseSize = 0;
+  // Цикл for-await-of. Асинхронно перебирає кожну частку відповіді.
+  for await (const chunk of streamAsyncIterable(response.body)) {
+    // Збільшує загальну довжину відповіді.
+    responseSize += chunk.length;
+  }
+
+  console.log(`Розмір відповіді: ${responseSize} байтів`);
+  // очікуваний результат: "Розмір відповіді: 1071472 байтів"
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');
+ +

Перебір синхронних ітерабельних об'єктів та генераторів

+ +

Цикл for await...of також споживає синхронні ітерабельні об'єкти та генератори. У цьому випадку він внутрішньо чекає на видані значення перед тим, як присвоювати їх керівній змінній циклу.

+ +
function* generator() {
+  yield 0;
+  yield 1;
+  yield Promise.resolve(2);
+  yield Promise.resolve(3);
+  yield 4;
+}
+
+(async function() {
+  for await (let num of generator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+// 3
+// 4
+
+// порівняйте з циклом for-of:
+
+for (let numOrPromise of generator()) {
+  console.log(numOrPromise);
+}
+// 0
+// 1
+// Promise { 2 }
+// Promise { 3 }
+// 4
+
+ +
+ +
+

Заувага: остерігайтеся видавати відхилені проміси з синхронного генератора. У цьому випадку for await...of викидає виняток при споживанні відхиленого проміса та НЕ ВИКЛИКАЄ блоки finally всередині цього генератора. Це може бути небажаним, якщо вам треба звільнити певні виділені ресурси за допомогою try/finally.

+
+ +
function* generatorWithRejectedPromises() {
+  try {
+    yield 0;
+    yield 1;
+    yield Promise.resolve(2);
+    yield Promise.reject(3);
+    yield 4;
+    throw 5;
+  } finally {
+    console.log('викликано finally')
+  }
+}
+
+(async function() {
+  try {
+    for await (let num of generatorWithRejectedPromises()) {
+      console.log(num);
+    }
+  } catch (e) {
+    console.log('перехоплено', e)
+  }
+})();
+// 0
+// 1
+// 2
+// перехоплено 3
+
+// порівняйте з циклом for-of:
+
+try {
+  for (let numOrPromise of generatorWithRejectedPromises()) {
+    console.log(numOrPromise);
+  }
+} catch (e) {
+  console.log('перехоплено', e)
+}
+// 0
+// 1
+// Promise { 2 }
+// Promise { <rejected> 3 }
+// 4
+// перехоплено 5
+// викликано finally
+
+ +

Для того, щоб блоки finally у синхронному генераторі завжди викликались, використовуйте належну форму циклу, for await...of для асинхронних генераторів та for...of для синхронних, та чекайте на видані проміси явно всередині циклу.

+ +
(async function() {
+  try {
+    for (let numOrPromise of generatorWithRejectedPromises()) {
+      console.log(await numOrPromise);
+    }
+  } catch (e) {
+    console.log('перехоплено', e)
+  }
+})()
+// 0
+// 1
+// 2
+// перехоплено 3
+// викликано finally
+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/for...in/index.html b/files/uk/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..f8bb6221be --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,149 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Інструкція + - Цикл +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +
{{jsSidebar("Statements")}}
+ +

Цикл for...in перебирає усі перелічувані властивості об'єкта, ключами яких є рядки (ігноруючи ті, ключами яких є символи), в тому числі успадковані перелічувані властивості.

+ +
{{EmbedInteractiveExample("pages/js/statement-forin.html")}}
+ + + +

Синтаксис

+ +
for (variable in object)
+  statement
+ +
+
variable
+
Нове ім'я властивості призначається параметру variable на кожній ітерації.
+
object
+
Об'єкт, чиї не символьні перелічувані властивості перебираються.
+
+ +

Опис

+ +

Цикл for...in перебирає лише перелічувані, не символьні властивості. Об'єкти, створені вбудованими конструкторами, як Array та Object, успадковують неперелічувані властивості від Object.prototype та String.prototype, такі як метод {{jsxref("String.indexOf", "indexOf()")}} у {{jsxref("String")}} або метод {{jsxref("Object.toString", "toString()")}} у {{jsxref("Object")}}. Цикл перебиратиме усі особисті перелічувані властивості об'єкта й ті, які об'єкт успадковує від прототипу конструктора (властивості, розташовані ближче до об'єкта у ланцюжку прототипів, заміщують властивості прототипу).

+ +

Видалені, додані або модифіковані властивості

+ +

Цикл for...in перебирає властивості об'єкта у довільному порядку (дивіться оператор {{jsxref("Operators/delete", "delete")}}, щоб дізнатись, чому не можна покладатися на удавану впорядкованість перебору, принаймні, у кросбраузерних налаштуваннях).

+ +

Якщо властивість була змінена під час однієї ітерації і потім відвідується під час наступної, її значенням у циклі буде значення під час наступної ітерації. Властивість, що була видалена до того, як була відвідана, не буде відвідана пізніше. Властивості, додані до об'єкта під час поточного перебору, можуть бути або відвідані, або пропущені під час цього перебору.

+ +

Загалом, краще не додавати, не змінювати й не видаляти властивості об'єкта під час перебору, окрім властивості, що відвідується у даний момент. Немає гарантії, що додана властивість буде відвідана, чи що змінена властивість (якщо це не поточна властивість) буде відвідана до чи після того, як була змінена, чи що видалена властивість не була відвідана до того, як була видалена.

+ +

Перебір масиву та for...in

+ +
+

Заувага: цикл for...in не слід використовувати для перебору {{jsxref("Array", "масиву")}}, де порядок індексів є важливим.

+
+ +

Індекси масивів є просто перелічуваними властивостями з цілочисельними іменами, в усьому іншому вони ідентичні загальним властивостям об'єкта. Немає гарантій, що for...in поверне індекси у певному порядку. Цикл for...in поверне усі перелічувані властивості, в тому числі не цілочисельні імена та успадковані властивості.

+ +

Оскільки порядок перебору залежить від реалізації, перебір масиву може відвідувати елементи масиву непослідовно. Тому краще використовувати цикл {{jsxref("Statements/for", "for")}} з числовим індексом (або {{jsxref("Array.prototype.forEach()")}} чи {{jsxref("Statements/for...of", "for...of")}}) для перебору масивів, коли порядок звернення до елементів важливий.

+ +

Перебір лише особистих властивостей

+ +

Якщо ви бажаєте розглядати властивості, притаманні лише самому об'єкту, а не його прототипам, скористайтесь {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} або виконайте перевірку {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} (також можна використати {{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}}). Альтернативно, якщо ви певні, що не буде зовнішнього втручання у код, ви можете розширити вбудовані прототипи методом перевірки.

+ +

Навіщо використовувати for...in?

+ +

Враховуючи, що цикл for...in створений для перебору властивостей об'єкта, не рекомендований для використання у масивах, і що існують такі варіанти як Array.prototype.forEach() та for...of, яка взагалі може бути користь від for...in?

+ +

Він може бути найбільш практичним для налагодження, оскільки ним легко перевіряти властивості об'єкта (виводячи їх у консоль чи іншим чином). Хоча масиви часто більш зручні для зберігання даних, у ситуаціях, де для роботи з даними потрібні пари ключ-значення (де властивості виконують роль "ключів"), можливі випадки, коли ви захочете перевірити, чи містить якийсь з цих ключів певне значення.

+ +

Приклади

+ +

Використання for...in

+ +

Наведений цикл for...in перебирає усі перелічувані, не символьні властивості об'єкта та виводить рядки імен властивостей та їхніх значень.

+ +
var obj = {a: 1, b: 2, c: 3};
+
+for (const prop in obj) {
+  console.log(`obj.${prop} = ${obj[prop]}`);
+}
+
+// Виведе:
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"
+ +

Перебір особистих властивостей

+ +

Наступна функція ілюструє використання {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: успадковані властивості не виводяться.

+ +
var triangle = {a: 1, b: 2, c: 3};
+
+function ColoredTriangle() {
+  this.color = 'red';
+}
+
+ColoredTriangle.prototype = triangle;
+
+var obj = new ColoredTriangle();
+
+for (const prop in obj) {
+  if (obj.hasOwnProperty(prop)) {
+    console.log(`obj.${prop} = ${obj[prop]}`);
+  }
+}
+
+// Виведе:
+// "obj.color = red"
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Сумісність: Ініціалізація лічильника у строгому режимі

+ +

До Firefox 40 було можливо використати ініціалізацію лічильника (i=0) у циклі for...in:

+ +
var obj = {a: 1, b: 2, c: 3};
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+
+ +

Ця нестандартна поведінка тепер ігнорується у версії 40 та пізніших і викличе помилку {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") у строгому режимі ({{bug(748550)}} та {{bug(1164741)}}).

+ +

Інші рушії, такі як v8 (Chrome), Chakra (IE/Edge) та JSC (WebKit/Safari), також проводять дослідження щодо прибирання цієї нестандартної поведінки.

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/for...of/index.html b/files/uk/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..dc4ebaf7b8 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,319 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - ES6 + - JavaScript + - Довідка +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +
{{jsSidebar("Statements")}}
+ +

Конструкція for...of створює цикл, що перебирає ітерабельні об'єкти, в тому числі: вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, подібні до масиву об'єкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} або {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а також визначені користувачем ітерабельні об'єкти. Він викликає користувацький хук до ітерацій з командами, що виконуються для значення кожної окремої властивості об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/statement-forof.html")}}
+ + + +

Синтаксис

+ +
for (variable of iterable) {
+  statement
+}
+
+ +
+
variable
+
На кожній ітерації параметру variable призначається значення іншої властивості. Параметр variable може бути оголошений через const, let або var.
+
iterable
+
Об'єкт, чиї ітерабельні властивості перебираються.
+
+ +

Приклади

+ +

Перебір об'єкта {{jsxref("Array")}}

+ +
let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 1;
+  console.log(value);
+}
+// 11
+// 21
+// 31
+
+ +

Ви також можете використати const замість let, якщо не переприсвоюєте змінну всередині блоку.

+ +
let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30
+
+ +

Перебір об'єкта {{jsxref("String")}}

+ +
let iterable = 'фух';
+
+for (let value of iterable) {
+  console.log(value);
+}
+// "ф"
+// "у"
+// "х"
+
+ +

Перебір об'єкта {{jsxref("TypedArray")}}

+ +
let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255
+
+ +

Перебір об'єкта {{jsxref("Map")}}

+ +
let iterable = new Map([['а', 1], ['б', 2], ['в', 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// ['а', 1]
+// ['б', 2]
+// ['в', 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+
+ +

Перебір об'єкта {{jsxref("Set")}}

+ +
let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+
+ +

Перебір об'єкта arguments

+ +

Ви можете перебирати об'єкт {{jsxref("Functions/arguments", "arguments")}}, щоб дослідити усі параметри, передані у функцію JavaScript:

+ +
(function() {
+  for (let argument of arguments) {
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3
+ +

Перебір колекції DOM-елементів

+ +

Перебір колекцій DOM-елементів, таких як {{domxref("NodeList")}}: наступний приклад додає клас read до вузлів paragraph, які є прямими нащадками вузла article:

+ +
// Заувага: Це працюватиме лише у платформах, де
+// реалізовано NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll('article > p');
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add('read');
+}
+
+ +

Закриття ітераторів

+ +

У циклах for...of раптове переривання ітерації може бути спричинено операторами break, throw або return. У цих випадках ітератор закривається.

+ +
function* foo(){
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of foo()) {
+  console.log(o);
+  break; // закриває ітератор, виконання продовжується поза циклом
+}
+console.log('done');
+
+ +

Перебір генераторів

+ +

Ви також можете перебирати генератори, тобто, функції, що генерують ітерабельні об'єкти:

+ +
function* fibonacci() { // функція-генератор
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // обрізати послідовність на 1000
+  if (n >= 1000) {
+    break;
+  }
+}
+
+ +

Не використовуйте генератори повторно

+ +

Генератори не можна використовувати повторно, навіть якщо цикл for...of завчасно перервався, наприклад, ключовим словом {{jsxref("Statements/break", "break")}}. На виході з циклу генератор закривається, і спроби викликати його знову не дадуть подальших результатів.

+ +
let gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break;  // закриває ітератор
+}
+
+// Генератор не можна використовувати знову, наступне не має сенсу!
+for (let o of gen) {
+  console.log(o); // Ніколи не виконається.
+}
+
+ +

Перебір інших ітерабельних об'єктів

+ +

Ви також можете перебирати об'єкт, який відкрито реалізує протокол ітерабельного:

+ +
let iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 1
+// 2
+
+ +

Різниця між for...of та for...in

+ +

І цикл for...in, і цикл for...of щось перебирають. Головна різниця між ними полягає в тому, що саме вони перебирають.

+ +

Цикл {{jsxref("Statements/for...in", "for...in")}} перебирає перелічувані властивості об'єкта, у довільному порядку.

+ +

Цикл for...of перебирає значення, які ітерабельний об'єкт визначає для перебирання.

+ +

Наступний приклад демонструє різницю між циклом for...of та циклом for...in при використанні з {{jsxref("Array", "масивом")}}.

+ +
Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'привіт';
+
+for (let i in iterable) {
+  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // виведе 0, 1, 2, "foo"
+  }
+}
+
+for (let i of iterable) {
+  console.log(i); // виведе 3, 5, 7
+}
+
+ +

Розглянемо наведений код крок за кроком.

+ +
Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'привіт';
+ +

Кожний об'єкт успадковуватиме властивість objCustom і кожний об'єкт, що є об'єктом {{jsxref("Array")}}, успадковуватиме властивість arrCustom, оскільки ці властивості були додані у {{jsxref("Object.prototype")}} та {{jsxref("Array.prototype")}} відповідно. Об'єкт iterable успадковує властивості objCustom та arrCustom через наслідування та ланцюжок прототипів.

+ +
for (let i in iterable) {
+  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+ +

Цей цикл виводить тільки перелічувані властивості об'єкта iterable, у довільному порядку. Він не виводить елементи масиву 3, 5, 7 або привіт, оскільки вони не є перелічуваними властивостями, власне, вони взагалі не є властивостями, вони є значеннями. Цикл виводить індекси масиву, а також arrCustom та objCustom, які є властивостями. Якщо ви не певні, чому ці властивості перебираються, є більш детальне пояснення того, як працює {{jsxref("Statements/for...in", "перебір масиву та for...in", "#Перебір_масиву_та_for...in")}}.

+ +
for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // виведе 0, 1, 2, "foo"
+  }
+}
+ +

Цей цикл схожий на перший, але використовує {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} для перевірки, чи є знайдена перелічувана властивість особистою властивістю об'єкта, тобто, не успадкованою. Якщо є, властивість виводиться. Властивості 0, 1, 2 та foo виводяться, оскільки вони є особистими властивостями (не успадкованими). Властивості arrCustom та objCustom не виводяться, оскільки вони успадковані.

+ +
for (let i of iterable) {
+  console.log(i); // виведе 3, 5, 7
+}
+ +

Цей цикл перебирає та виводить значення, які iterable як ітерабельний об'єкт визначає для перебору. Елементи об'єкта 3, 5, 7 виводяться, але немає жодної з властивостей об'єкта.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/for/index.html b/files/uk/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..12e0bbefd7 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for/index.html @@ -0,0 +1,165 @@ +--- +title: for +slug: Web/JavaScript/Reference/Statements/for +tags: + - JavaScript + - for + - Цикл +translation_of: Web/JavaScript/Reference/Statements/for +--- +
{{jsSidebar("Statements")}}
+ +

Оператор for створює цикл, що складається з трьох необов'язкових виразів, заключених у дужки та розділених крапками з комами, за ними розташовані команди (зазвичай, блок команд), який потрібно виконати у циклі.

+ +
{{EmbedInteractiveExample("pages/js/statement-for.html")}}
+ + + +

Синтаксис

+ +
for ([initialization]; [condition]; [final-expression])
+   statement
+ +
+
initialization
+
Вираз (в тому числі вирази присвоєння) або оголошення змінної, оцінюється один раз перед початком циклу. Зазвичай використовується для ініціалізації змінної лічильника. Цей вираз може також оголошувати нові змінні ключовими словами var або let. Змінні, оголошені через var не є локальними для циклу, тобто, вони знаходяться у тій же області видимості, що й сам цикл for. Змінні, оголошені через let, є локальними змінними циклу.
+
Результат цього виразу відкидається.
+
condition
+
Вираз, який оцінюється перед кожною ітерацією циклу. Якщо вираз оцінюється як true, то statement виконується. Ця перевірка є необов'язковою. Якщо вона пропущена, то умова завжди оцінюється як true. Якщо вираз оцінюється як false, виконання переходить до першого виразу, розташованого після конструкції for.
+
final-expression
+
Вираз, який оцінюється в кінці кожної ітерації циклу. Це відбувається до наступного оцінювання виразу condition. Зазвичай використовується, щоб оновити або збільшити значення змінної лічильника.
+
statement
+
Команда, яка виконується, поки умова оцінюється як true. Для виконання кількох команд, використовуйте {{jsxref("Statements/block", "блок", "", 0)}} ({ ... }), щоб згрупувати ці команди. Щоб не виконувати жодних команд, скористайтесь {{jsxref("Statements/empty", "порожнім", "", 0)}} оператором (;).
+
+ +

Приклади

+ +

Використання циклу for

+ +

Наведений цикл for починається з оголошення змінної i та ініціалізації її значенням 0. Він перевіряє, що значення i менше дев'яти, виконує дві команди та збільшує i на 1 після кожного проходу через цикл.

+ +
for (let i = 0; i < 9; i++) {
+   console.log(i);
+   // ще команди
+}
+
+ +

Необов'язкові вирази циклу for

+ +

Всі три вирази у шапці циклу for є необов'язковими.

+ +

Наприклад, у блоці initialization не вимагається ініціалізувати змінні:

+ +
var i = 0;
+for (; i < 9; i++) {
+    console.log(i);
+    // ще команди
+}
+
+ +

Як і блок initialization, блок умови condition також є необов'язковим. Якщо ви пропускаєте цей вираз, то маєте переконатись, що встановили переривання у тілі циклу, щоб не створити нескінченний цикл.

+ +
for (let i = 0;; i++) {
+   console.log(i);
+   if (i > 3) break;
+   // ще команди
+}
+ +

Ви також можете пропустити всі три блоки. Знову ж таки, переконайтеся, що ви встановили оператор {{jsxref("Statements/break", "break")}}, щоб закінчити цикл, а також змінили (збільшили) змінну, щоб умова для переривання в якийсь момент набула значення true.

+ +
var i = 0;
+
+for (;;) {
+  if (i > 3) break;
+  console.log(i);
+  i++;
+}
+
+ +

Використання циклу for без команд

+ +

Наведений цикл for обчислює зміщення вузла у розділі final-expression, і тому не вимагає використання розділу statement, замість нього використовується крапка з комою.

+ +
function showOffsetPos(sId) {
+
+  var nLeft = 0, nTop = 0;
+
+  for (
+
+    var oItNode = document.getElementById(sId); /* ініціалізація */
+
+    oItNode; /* умова */
+
+    nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */
+
+  ); /* крапка з комою */
+
+  console.log('Зміщення елемента \'' + sId + '\':\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');
+
+}
+
+/* Приклад виклику: */
+
+showOffsetPos('content');
+
+// Результат:
+// "Зміщення елемента "content":
+// left: 0px;
+// top: 153px;"
+ +
Заувага: Це один з небагатьох випадків у JavaScript, коли крапка з комою є обов'язковою. Дійсно, без крапки з комою рядок, що записаний після циклу, вважатиметься командою циклу.
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}{{Spec2('ES3')}}
{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-for-statement', 'for statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/function/index.html b/files/uk/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..c038ec106d --- /dev/null +++ b/files/uk/web/javascript/reference/statements/function/index.html @@ -0,0 +1,179 @@ +--- +title: Оголошення функції +slug: Web/JavaScript/Reference/Statements/function +tags: + - JavaScript + - Функція +translation_of: Web/JavaScript/Reference/Statements/function +--- +
{{jsSidebar("Statements")}}
+ +

Оголошення функції (функціональний оператор) визначає функцію з вказаними параметрами.

+ +

Ви також можете визначати функції за допомогою конструктора {{jsxref("Function")}} та {{jsxref("Operators/function", "функціонального виразу")}}.

+ +
{{EmbedInteractiveExample("pages/js/statement-function.html")}}
+ + + +

Синтаксис

+ +
function name([param[, param,[..., param]]]) {
+   [statements]
+}
+
+ +
+
name
+
Ім'я функції.
+
+ +
+
param
+
Ім'я аргументу, що передається у функцію. Максимальна кількість аргументів відрізняється у різних рушіях.
+
+ +
+
statements
+
Інструкції, які складають тіло функції.
+
+ +

Опис

+ +

Функція, утворена через оголошення функції, є об'єктом Function, і має усі властивості, методи та поведінку об'єктів Function. Більш детальну інформацію щодо функцій дивіться у статті {{jsxref("Function")}}.

+ +

Функція також може бути створена через за допомогою виразу (дивіться {{jsxref("Operators/function", "функціональний вираз")}}).

+ +

За замовчуванням функції повертають undefined. Щоб повернути будь-яке інше значення, функція повинна мати оператор {{jsxref("Statements/return", "return")}}, який вказує значення, що буде повернене.

+ +

Умовне створення функцій

+ +

Функції можуть оголошуватися за певної умови, тобто, оголошення функції може бути вкладене у if, однак, результат різниться між реалізаціями, тому цей шаблон не варто використовувати у виробничому коді. Для умовного створення функції використовуйте, натомість, функціональний вираз.

+ +
var hoisted = "foo" in this;
+console.log(`Ім'я 'foo'${hoisted ? "" : " не"} піднімається. typeof foo дорівнює ${typeof foo}`);
+if (false) {
+  function foo(){ return 1; }
+}
+
+// У Chrome:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Firefox:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Edge:
+// Ім'я 'foo' не піднімається. typeof foo дорівнює undefined
+//
+// У Safari:
+// Ім'я 'foo' піднімається. typeof foo дорівнює function
+
+ +

Результат буде такий самий для умови, яка дорівнює true

+ +
var hoisted = "foo" in this;
+console.log(`Ім'я 'foo' ${hoisted ? "" : " не"} піднімається. typeof foo дорівнює ${typeof foo}`);
+if (true) {
+  function foo(){ return 1; }
+}
+
+// У Chrome:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Firefox:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Edge:
+// Ім'я 'foo' не піднімається. typeof foo дорівнює undefined
+//
+// У Safari:
+// Ім'я 'foo' піднімається. typeof foo дорівнює function
+
+ +

Підняття оголошення функції

+ +

Оголошення функцій у JavaScript піднімаються наверх замикаючої функції або глобальної області видимості. Ви можете використовувати функцію до того, як оголосили її:

+ +
hoisted(); // виводить "foo"
+
+function hoisted() {
+  console.log('foo');
+}
+
+ +

Зауважте, що {{jsxref("Operators/function", "функціональні вирази")}} не піднімаються:

+ +
notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+
+ +

Приклади

+ +

Використання function

+ +

Наступний код оголошує функцію, яка повертає загальну суму продажів, отримуючи кількість одиниць продуктів a, b та c.

+ +
function calc_sales(units_a, units_b, units_c) {
+   return units_a * 79 + units_b * 129 + units_c * 699;
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.0.
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/function_star_/index.html b/files/uk/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..f900241ddc --- /dev/null +++ b/files/uk/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,268 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Ітератор + - генератор +translation_of: Web/JavaScript/Reference/Statements/function* +--- +
{{jsSidebar("Statements")}}
+ +

Оголошення function* (ключове слово function з зірочкою) визначає функцію-генератор, яка повертає об'єкт {{jsxref("Global_Objects/Generator","Generator")}}.

+ +
{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}
+ + + +

Ви також можете визначати функції-генератори за допомогою конструктора {{jsxref("GeneratorFunction")}} або функціонального виразу.

+ +

Синтаксис

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Ім'я функції.
+
+ +
+
param
+
Ім'я формального параметра функції.
+
+ +
+
statements
+
Інструкції, що складають тіло функції.
+
+ +

Опис

+ +

Генератори - це функції, з яких можна вийти та пізніше повторно зайти. Їхній контекст (зв'язування змінних) збережеться між заходами.
+
+ Генератори у JavaScript -- особливо у поєднанні з промісами -- дуже потужний інструмент асинхронного програмування, бо вони пом'якшують -- якщо не усувають повністю -- проблеми зворотних викликів, такі як Пекло зворотних викликів та Інверсія управління.

+ +

Виклик функції-генератора не виконує тіло функції негайно; замість цього повертається об'єкт-ітератор для функції. Коли викликається метод ітератора next(), тіло функції-генератора виконується до першого виразу {{jsxref("Operators/yield", "yield")}}, який визначає значення, що має бути повернене ітератором, або, оператором {{jsxref("Operators/yield*", "yield*")}}, делегується до іншої функції-генератора. Метод next() повертає об'єкт з властивістю value, що містить отримане значення, та властивістю done, яка вказує, чи генератор віддав останнє значення, у вигляді булевого значення. Виклик метода next() з аргументом відновить виконання функції-генератора, замінюючи вираз yield в тій точці, де виконання було призупинене, аргументом з next().

+ +

Оператор return у генераторі змусить генератор завершити виконання (тобто, властивості done поверненого об'єкта буде присвоєне значення true). Якщо повертається значення, воно буде присвоєте властивості value об'єкта, що повертається генератором.
+ Схоже на оператор return, викидання помилки всередині генератора змусить генератор завершити виконання -- якщо не буде перехоплене у тілі генератора.
+ Коли генератор завершує виконання, наступні виклики next не виконають жодного коду генератора, вони лише повернуть об'єкт наступного вигляду: {value: undefined, done: true}.

+ +

Приклади

+ +

Простий приклад

+ +
function* idMaker() {
+  var index = 0;
+  while (true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+// ...
+ +

Приклад з yield*

+ +
function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i) {
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+
+ +

Передача аргументів у об'єкти Generator

+ +
function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// перший виклик метода next виконує функцію з початку
+// до першого оператора yield
+gen.next();             // 0
+gen.next('крендель');   // 1 крендель
+gen.next('кава');       // 2 кава
+gen.next('майонез');    // 3 майонез
+
+ +

Оператор return у генераторі

+ +
function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "недосяжний";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+
+ +

Генератор як властивість об'єкта

+ +
const someObj = {
+  *generator () {
+    yield 'а';
+    yield 'б';
+  }
+}
+
+const gen = someObj.generator()
+
+console.log(gen.next()); // { value: 'а', done: false }
+console.log(gen.next()); // { value: 'б', done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+
+ +

Генератор як метод класу

+ +
class Foo {
+  *generator () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const f = new Foo ();
+const gen = f.generator();
+
+console.log(gen.next()); // { value: 1, done: false }
+console.log(gen.next()); // { value: 2, done: false }
+console.log(gen.next()); // { value: 3, done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+
+ +

Генератор як обчислювана властивість

+ +
class Foo {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+  }
+}
+
+const SomeObj = {
+  *[Symbol.iterator] () {
+    yield 'а';
+    yield 'б';
+  }
+}
+
+console.log(Array.from(new Foo)); // [ 1, 2 ]
+console.log(Array.from(SomeObj)); // [ 'а', 'б' ]
+
+ +

Генератори не є конструкторами

+ +
function* f() {}
+var obj = new f; // викидає "TypeError: f is not a constructor
+
+ +

Генератор, визначений у виразі

+ +
const foo = function* () {
+  yield 10;
+  yield 20;
+};
+
+const bar = foo();
+console.log(bar.next()); // {value: 10, done: false}
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2016')}}Внесено зміни, що генератори не повинні мати пастки [[Construct]] та викидатимуть помилку при використанні з new.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

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

+
+ +

Примітки щодо Firefox

+ +

Генератори та ітератори у Firefox до 26-ї версії

+ +

Старші версії Firefox реалізують старшу версію пропозиції генераторів. У старшій версії генератори визначались за допомогою звичайного ключового слова function (без зірочки), серед інших відмінностей. Дивіться більше інформації у статті Застаріла функція-генератор.

+ +

Замість викидання помилки повертається об'єкт IteratorResult

+ +

Починаючи з Gecko 29 {{geckoRelease(29)}}, завершена функція-генератор більше не викидає помилку {{jsxref("TypeError")}} "generator has already finished". Замість цього, вона повертає об'єкт IteratorResult у вигляді { value: undefined, done: true } ({{bug(958951)}}).

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/if...else/index.html b/files/uk/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..bee07d07bf --- /dev/null +++ b/files/uk/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,173 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Statements/if...else +tags: + - JavaScript + - else + - if + - Оператор +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +
{{jsSidebar("Statements")}}
+ +

Умовний оператор if виконує команду, якщо вказана умова є {{Glossary("truthy", "правдивою")}}. Якщо умова є {{Glossary("falsy", "хибною")}}, може бути виконана інша команда.

+ +
{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}
+ + + +

Синтаксис

+ +
if (condition)
+   statement1
+[else
+   statement2]
+
+ +
+
condition
+
Вираз, який вважається або {{Glossary("truthy", "правдивим")}}, або {{Glossary("falsy", "хибним")}}.
+
+ +
+
statement1
+
Команда, що виконується, якщо умова є {{Glossary("truthy", "правдивою")}}. Може бути будь-яка команда, в тому числі вкладені оператори if. Для виконання кількох команд використовуйте блок ({ ... }), щоб згрупувати ці команди. Щоб не виконувати жодних команд, використайте порожній оператор.
+
+ +
+
statement2
+
Команда, що виконується, якщо умова є {{Glossary("falsy", "хибною")}} та присутній блок else. Може бути будь-яка команда, в тому числі блок команд та вкладені оператори if.
+
+ +

Опис

+ +

Можна додавати вкладені вирази if...else для створення конструкції else if. Зауважте, що у JavaScript не існує ключового слова elseif (одним словом).

+ +
if (condition1)
+  statement1
+else if (condition2)
+  statement2
+else if (condition3)
+  statement3
+...
+else
+  statementN
+
+ +

Щоб побачити, як це працює, ось так це виглядає з правильно оформленими відступами:

+ +
if (condition1)
+  statement1
+else
+  if (condition2)
+    statement2
+  else
+    if (condition3)
+...
+
+ +

Щоб виконати декілька команд, використовуйте позначення блоку ({ ... }), щоб згрупувати ці команди. Взагалі, гарною практикою вважається завжди використовувати блочні вирази, особливо у коді, який містить вкладені оператори if:

+ +
if (condition) {
+  statements1
+} else {
+  statements2
+}
+
+ +

Не плутайте примітивні булеві значення true та false з правдивістю та хибністю об'єкта {{jsxref("Global_Objects/Boolean", "Boolean")}}. Будь-яке значення, яке не є false, undefined, null, 0, -0, NaN, або порожнім текстовим рядком (""), і будь-який об'єкт, в тому числі об'єкт Boolean, чиє значення дорівнює false, вважається {{Glossary("truthy", "правдивим")}} при використанні у якості умови. Для прикладу:

+ +
var b = new Boolean(false);
+if (b) // ця умова є правдивою
+
+ +

Приклади

+ +

Використання if...else

+ +
if (cipher_char === from_char) {
+  result = result + to_char;
+  x++;
+} else {
+  result = result + clear_char;
+}
+
+ +

Використання else if

+ +

Зауважте, що у JavaScript немає оператора elseif. Однак, ви можете його записати з пробілом між else та if:

+ +
if (x > 50) {
+  /* зробити що треба */
+} else if (x > 5) {
+  /* зробити що треба */
+} else {
+  /* зробити що треба */
+}
+ +

Присвоєння всередині умовного виразу

+ +

Не рекомендовано використовувати прості присвоєння в умовному виразі, тому що присвоєння можна переплутати з порівнянням при швидкому перегляді коду. Наприклад, не використовуйте наступний код:

+ +
if (x = y) {
+  /* зробити що треба */
+}
+
+ +

Якщо вам потрібно використати присвоєння в умовному виразі, загальноприйнятим є використання додаткових дужок навколо присвоєння. Наприклад:

+ +
if ((x = y)) {
+  /* зробити що треба */
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-if-statement', 'if statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.5', 'if statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.5', 'if statement')}}{{Spec2('ES1')}}Початкове визначення
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/index.html b/files/uk/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..7a16fcc672 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/index.html @@ -0,0 +1,130 @@ +--- +title: Інструкції та оголошення +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Довідка + - оголошення + - інструкції +translation_of: Web/JavaScript/Reference/Statements +--- +
{{jsSidebar("Statements")}}
+ +

Застосунки JavaScript складаються з інструкцій з відповідним синтаксисом. Одна інструкція може займати декілька рядків. Декілька інструкцій можуть розташовуватись на одному рядку, якщо кожна інструкція відділена крапкою з комою. Це не ключове слово, а група ключових слів.

+ +

Інструкції та оголошення за категоріями

+ +

Список в алфавітному порядку дивіться на бічній панелі ліворуч.

+ +

Потік керування

+ +
+
{{jsxref("Statements/block", "Block")}}
+
Блок використовують, щоб згрупувати нуль чи більше інструкцій. Блок позначається парою фігурних дужок.
+
{{jsxref("Statements/break", "break")}}
+
Перериває поточний цикл, switch або помічену інструкцію та передає контроль програми у інструкцію, наступну за перерваною інструкцією.
+
{{jsxref("Statements/continue", "continue")}}
+
Перериває виконання інструкцій у поточній ітерації поточного або поміченого циклу та продовжує виконання циклу з наступної ітерації.
+
{{jsxref("Statements/Empty", "Empty")}}
+
Порожній оператор використовується, щоб не надавати інструкцію там, де синтаксис JavaScript її очікує.
+
{{jsxref("Statements/if...else", "if...else")}}
+
Виконує інструкцію, якщо вказана умова дорівнює true. Якщо умова дорівнює false, виконується інша інструкція.
+
{{jsxref("Statements/switch", "switch")}}
+
Обчислює вираз, шукаючі збіг значення виразу з блоком case, та виконує інструкції, асоційовані з цим блоком.
+
{{jsxref("Statements/throw", "throw")}}
+
Викидає визначений користувачем виняток.
+
{{jsxref("Statements/try...catch", "try...catch")}}
+
Позначає блок інструкцій, які необхідно спробувати виконати, та визначає відповідь у випадку, якщо викидається виняток.
+
+ +

Оголошення

+ +
+
{{jsxref("Statements/var", "var")}}
+
Оголошує змінну, необов'язково ініціалізуючи її значенням.
+
{{jsxref("Statements/let", "let")}}
+
Оголошує локальну змінну блочної області видимості, необов'язково ініціалізуючи її значенням.
+
{{jsxref("Statements/const", "const")}}
+
Оголошує іменовану константу, доступну лише для читання.
+
+ +

Функції та класи

+ +
+
{{jsxref("Statements/function", "function")}}
+
Оголошує функцію з вказаними параметрами.
+
{{jsxref("Statements/function*", "function*")}}
+
Функції-генератори спрощують написання ітераторів.
+
{{jsxref("Statements/async_function", "async function")}}
+
Оголошує асинхронну функцію з вказаними параметрами.
+
{{jsxref("Statements/return", "return")}}
+
Вказує значення, яке має повернути функція.
+
{{jsxref("Statements/class", "class")}}
+
Оголошує клас.
+
+ +

Перебори

+ +
+
{{jsxref("Statements/do...while", "do...while")}}
+
Створює цикл, що виконує вказану інструкцію, яка виконується, доки перевірочна умова не стане дорівнювати false. Умова обчислюється після виконання інструкції, в результаті вказана інструкція виконується принаймні один раз.
+
{{jsxref("Statements/for", "for")}}
+
Створює цикл, що складається з трьох необов'язкових виразів, записаних у дужках та розділених крапками з комами, після яких вказується інструкція для виконання циклом.
+
{{jsxref("Statements/for_each...in", "for each...in")}}
+
Перебирає вказаною змінною усі значення властивостей об'єкта. Для кожної окремої властивості виконується вказана інструкція.
+
{{jsxref("Statements/for...in", "for...in")}}
+
Перебирає перелічувані властивості об'єкта у довільному порядку. Для кожної окремої властивості можуть виконуватись інструкції.
+
{{jsxref("Statements/for...of", "for...of")}}
+
Перебирає ітерабельні об'єкти (в тому числі {{jsxref("Global_Objects/Array","масиви","","true")}}, подібні до масивів об'єкти, ітератори та генератори), викликаючи користувацький хук до ітерацій з інструкціями, що виконуватимуться для значення кожної окремої властивості.
+
{{jsxref("Statements/for-await...of", "for await...of")}}
+
Перебирає асинхронні ітерабельні об'єкти, подібні до масивів об'єкти, ітератори та генератори, викликаючи користувацький хук до ітерацій з інструкціями, що виконуватимуться для значення кожної окремої властивості.
+
{{jsxref("Statements/while", "while")}}
+
Створює цикл, який виконує вказану інструкцію, доки перевірочна умова дорівнює true. Умова обчислюється перед виконанням інструкції.
+
+ +

Інші

+ +
+
{{jsxref("Statements/debugger", "debugger")}}
+
Запускає будь-яку доступну налагоджувальну функціональність. Якщо налагоджувальна функціональність недоступна, цей оператор не матиме ефекту.
+
{{jsxref("Statements/export", "export")}}
+
Використовується для експорту функцій, щоб зробити їх доступними для імпорту у зовнішні модулі та інші скрипти.
+
{{jsxref("Statements/import", "import")}}
+
Використовується для імпорту функцій, експортованих з зовнішнього модуля чи іншого скрипта.
+
import.meta
+
Об'єкт, що відкриває залежні від контексту метадані про модуль JavaScript.
+
{{jsxref("Statements/label", "label")}}
+
Надає інструкцію з ідентифікатором, на який можна посилатись при використанні інструкцій break або continue.
+
+ +
+
{{jsxref("Statements/with", "with")}}
+
Розширює ланцюжок областей видимості для інструкції.
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/label/index.html b/files/uk/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..b29fa8fb42 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/label/index.html @@ -0,0 +1,182 @@ +--- +title: Мітка +slug: Web/JavaScript/Reference/Statements/label +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/label +--- +
{{jsSidebar("Statements")}}
+ +

Мітка (label) може використовуватися з операторами {{jsxref("Statements/break", "break")}} та {{jsxref("Statements/continue", "continue")}}. Вона додається попереду виразу у вигляді ідентифікатора, на який можна посилатися.

+ +
{{EmbedInteractiveExample("pages/js/statement-label.html")}}
+ + + +
+

Заувага: Використання помічених циклів або блоків є дуже нестандартним підходом. Зазвичай використовуються виклики функцій замість стрибків у циклах.

+
+ +

Синтаксис

+ +
label :
+   statement
+
+ +
+
label
+
Будь-який ідентифікатор JavaScript, який не є зарезервованим словом.
+
statement
+
Інструкція JavaScript. Оператор break може використовуватися з будь-якою поміченою конструкцією, а оператор continue може використовуватися з поміченими циклами.
+
+ +

Опис

+ +

Ви можете використати мітку, щоб ідентифікувати цикл, а потім скористатись операторами break чи continue, щоб вказати, що програма має перервати чи продовжити його виконання.

+ +

Зауважте, що у JavaScript немає оператора goto, ви можете використовувати мітки лише з break або continue.

+ +

У строгому режимі не можна використовувати "let" в якості імені мітки. Це спричинить викидання {{jsxref("SyntaxError")}} (let є зарезервованим ідентифікатором).

+ +

Приклади

+ +

Використання поміченого continue з циклами for

+ +
var i, j;
+
+loop1:
+for (i = 0; i < 3; i++) {      //Перший цикл for помічений як "loop1"
+   loop2:
+   for (j = 0; j < 3; j++) {   //Другий цикл for помічений як "loop2"
+      if (i === 1 && j === 1) {
+         continue loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Результат:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// Зауважте, що пропущені як "i = 1, j = 1", так і "i = 1, j = 2"
+
+ +

Використання поміченого оператора continue

+ +

Маючи масив елементів та масив тестів, цей приклад рахує кількість елементів, які пройшли усі тести.

+ +
var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i < items.length; i++) {
+  for (j = 0; j < tests.length; j++) {
+    if (!tests[j].pass(items[i])) {
+      continue top;
+    }
+  }
+
+  itemsPassed++;
+}
+ +

Використання поміченого оператора break з циклами for

+ +
var i, j;
+
+loop1:
+for (i = 0; i < 3; i++) {      //Перший цикл for помічений як "loop1"
+   loop2:
+   for (j = 0; j < 3; j++) {   //Другий цикл for помічений як "loop2"
+      if (i === 1 && j === 1) {
+         break loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Результат:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+// Зауважте різницю з попереднім прикладом з continue
+ +

Використання поміченого оператора break

+ +

Маючи масив елементів та масив тестів, цей приклад визначає, чи усі елементи пройшли усі тести.

+ +
var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j < tests.length; i++)
+    if (!tests[j].pass(items[i])) {
+      allPass = false;
+      break top;
+    }
+ +

Використання поміченого блоку з оператором break

+ +

Ви можете використовувати мітки всередині звичайних блоків, але тільки оператор break може працювати з мітками не у циклах.

+ +
foo: {
+  console.log('пере');
+  break foo;
+  console.log('ця частина не виконається');
+}
+console.log('стрибнув');
+
+// цей код виведе:
+
+// "пере"
+// "стрибнув 
+ +

Помічені оголошення функцій

+ +

Починаючи з ECMAScript 2015, помічені оголошення функцій тепер стандартизовані для не строгого режиму у додатку специфікації щодо веб-сумісності.

+ +
L: function F() {}
+ +

Однак, у строгому режимі це викине помилку {{jsxref("SyntaxError")}}:

+ +
'use strict';
+L: function F() {}
+// SyntaxError: functions cannot be labelled
+ +

Функції-генератори також не можуть мати мітки ні у строгому, ні у звичайному режимі:

+ +
L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/let/index.html b/files/uk/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..ee0db303e6 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/let/index.html @@ -0,0 +1,272 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +tags: + - ECMAScript 2015 + - JavaScript + - let + - змінні +translation_of: Web/JavaScript/Reference/Statements/let +--- +
{{jsSidebar("Statements")}}
+ +

Оператор let оголошує локальну змінну блочної області видимості, з необов'язковим присвоєнням їй початкового значення.

+ +
{{EmbedInteractiveExample("pages/js/statement-let.html")}}
+ + + +

Синтаксис

+ +
let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN];
+ +

Параметри

+ +
+
var1, var2, …, varN
+
Імена змінної або змінних, що оголошуються. Кожне ім'я має бути дозволеним ідентифікатором JavaScript.
+
value1, value2, …, valueN {{optional_inline}}
+
Для кожної оголошеної змінної ви можете вказати її початкове значення будь-яким дозволеним виразом JavaScript.
+
+ +

Опис

+ +

Оператор let дозволяє оголошувати змінні, що обмежені областю видимості {{jsxref("statements/block", "блоку")}} або виразу, для якого використовуються, на відміну від ключового слова {{jsxref("statements/var", "var")}}, яке визначає змінну глобально, чи локально для всієї функції, незалежно від області видимості блоку. Інша відмінність між операторами {{jsxref("statements/var", "var")}} та let полягає в тому, що останній ініціалізується тільки після оцінювання синтаксичним аналізатором (дивіться нижче).

+ +

Як і {{jsxref("statements/const", "const", "Description")}}, let не створює властивостей об'єкта {{domxref('window')}} при глобальному оголошенні (у області видимості верхнього рівня).

+ +

Пояснення, чому була обрана назва "let" можна подивитись тут.

+ +

Правила області видимості

+ +

Областю видимості змінних, оголошених через let, є блок, у якому вони визначені, а також будь-які вкладені в нього блоки. У цьому сенсі let дуже схожий на var. Головна відмінність полягає в тому, що областю видимості змінної var є уся замикаюча функція:

+ +
function varTest() {
+  var x = 1;
+  {
+    var x = 2;  // та сама змінна!
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  {
+    let x = 2;  // інша змінна
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}
+
+ +

На верхньому рівні програм та функцій let, на відміну від var, не створює властивості глобального об'єкта. Наприклад:

+ +
var x = 'глобальна';
+let y = 'глобальна';
+console.log(this.x); // "глобальна"
+console.log(this.y); // undefined
+
+ +

Імітація приватних членів

+ +

Працюючи з конструкторами, можна використовувати let-зв'язування для створення приватних членів без використання замикань:

+ +
var Thing;
+
+{
+  let privateScope = new WeakMap();
+  let counter = 0;
+
+  Thing = function() {
+    this.someProperty = 'foo';
+
+    privateScope.set(this, {
+      hidden: ++counter,
+    });
+  };
+
+  Thing.prototype.showPublic = function() {
+    return this.someProperty;
+  };
+
+  Thing.prototype.showPrivate = function() {
+    return privateScope.get(this).hidden;
+  };
+}
+
+console.log(typeof privateScope);
+// "undefined"
+
+var thing = new Thing();
+
+console.log(thing);
+// Thing {someProperty: "foo"}
+
+thing.showPublic();
+// "foo"
+
+thing.showPrivate();
+// 1
+
+ +

Такий самий шаблон приватності з використанням замикань для локальних змінних можна створити через var, але це потребує функціональної області видимості (зазвичай, це НВФВ у шаблоні модуль) замість просто блочної області видимості у вищенаведеному прикладі.

+ +

Повторні оголошення

+ +

Повторне оголошення тієї самої змінної у області видимості тієї самої функції чи блоку спричиняє помилку {{jsxref("SyntaxError")}}.

+ +
if (x) {
+  let foo;
+  let foo; // викидається SyntaxError.
+}
+
+ +

Ви можете стикнутися з помилками у конструкціях switch, бо вони мають лише один блок.

+ +
let x = 1;
+switch(x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // SyntaxError через повторне оголошення.
+    break;
+}
+ +

Однак, важливо зазначити, що блок, вкладений у блок case, створить нове лексичне середовище блочної області видимості, яке не викличе помилок повторного оголошення, показаних вище.

+ +
let x = 1;
+
+switch(x) {
+  case 0: {
+    let foo;
+    break;
+  }
+  case 1: {
+    let foo;
+    break;
+  }
+}
+ +

Тимчасова мертва зона

+ +

На відміну від змінних, оголошених через var, які спочатку мають значення undefined, let-змінні не ініціалізуються, поки не відбудеться обчислення їхнього оголошення. Звернення до змінної до ініціалізації призводить до викидання ReferenceError. Змінна знаходиться у "тимчасовій мертвій зоні" від початку блоку і до проходження ініціалізації.

+ +
function do_something() {
+  console.log(bar); // undefined
+  console.log(foo); // ReferenceError
+  var bar = 1;
+  let foo = 2;
+}
+ +

Тимчасова мертва зона та typeof

+ +

На відміну від просто неоголошених змінних та змінних, що містять значення undefined, використання оператора typeof для перевірки типу змінної, що знаходиться у своїй ТМЗ, викине ReferenceError:

+ +
// виведе 'undefined'
+console.log(typeof undeclaredVariable);
+// призведе до 'ReferenceError'
+console.log(typeof i);
+let i = 10;
+ +

Ще один приклад тимчасової мертвої зони у поєднанні з лексичною областю видимості

+ +

Через наявність лексичної області видимості, ідентифікатор foo у виразі (foo + 55) оцінюється як ідентифікатор foo блоку if, а не розташована вище змінна foo зі значенням 33.

+ +

У цьому конретному рядку змінна foo блоку if вже була створена у лексичному середовищі, але ще не пройшла (і перервала) свою ініціалізацію (яка є частиною інструкції).

+ +

Змінна foo блоку if досі у тимчасовій мертвій зоні.

+ +
function test(){
+   var foo = 33;
+   if (true) {
+      let foo = (foo + 55); // ReferenceError
+   }
+}
+test();
+ +

Цей феномен може заплутати, наприклад, у наступній ситуації. Інструкція let n of n.a вже знаходиться всередині приватної області видимості блоку циклу for. Отже, ідентифікатор n.a вважається властивістю 'a' об'єкта 'n', розташованого у першій частині цієї ж інструкції ("let n").

+ +

Він досі знаходиться у тимчасовій мертвій зоні, оскільки його оголошення ще не було виконано та перервалось.

+ +
function go(n) {
+  // n тут визначений!
+  console.log(n); // Object {a: [1,2,3]}
+
+  for (let n of n.a) { // ReferenceError
+    console.log(n);
+  }
+}
+
+go({a: [1, 2, 3]});
+
+ +

Інші ситуації

+ +

При використанні всередині блоку, let обмежує область видимості змінної цим блоком. Зауважте відмінність від var, чия область видимості - функція, де відбулось оголошення.

+ +
var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // глобальна область видимості
+  let b = 22; // областю видимості є блок if
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2
+
+ +

Однак, комбінація оголошень var та let, наведена нижче, спричинить SyntaxError через підняття var наверх блоку. Це призводить до неявного повторного оголошення змінної.

+ +
let x = 1;
+
+{
+  var x = 2; // SyntaxError через повторне оголошення
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ES2015')}}Початкове визначення. Не визначає let-вирази та let-блоки.
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/return/index.html b/files/uk/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..030027232f --- /dev/null +++ b/files/uk/web/javascript/reference/statements/return/index.html @@ -0,0 +1,159 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Statements/return +--- +
{{jsSidebar("Statements")}}
+ +

Оператор return завершує виконання функції та вказує значення, що буде повернене функцією.

+ +
{{EmbedInteractiveExample("pages/js/statement-return.html")}}
+ + + +

Синтаксис

+ +
return [[expression]]; 
+ +
+
expression
+
Вираз, значення якого буде повернене. Якщо пропущений, повертається undefined.
+
+ +

Опис

+ +

Коли у тілі функції використовується оператор return, виконання функції зупиняється. За наявності, надане значення повертається у інструкцію, що викликала функцію. Наприклад, наступна функція повертає квадрат свого аргументу x, де x є числом.

+ +
function square(x) {
+   return x * x;
+}
+var demo = square(3);
+// demo дорівнюватиме 9
+
+ +

Якщо значення не вказане, повертається undefined.

+ +

Всі наведені оператори return переривають виконання функції:

+ +
return;
+return true;
+return false;
+return x;
+return x + y / 3;
+
+ +

Автоматична вставка крапки з комою

+ +

Оператор return підпадає під автоматичну вставку крапки з комою (ASI, automatic semicolon insertion). Символи кінця рядка недозволені між ключовим словом return та виразом.

+ +
return
+a + b;
+
+ +

перетворюється у:

+ +
return;
+a + b;
+
+ +

Консоль виведе попередження "unreachable code after return statement" (недосяжний код після оператора return).

+ +
Починаючи з Gecko 40 {{geckoRelease(40)}}, у консолі виводиться попередження, якщо після оператора return знайдено недосяжний код.
+ +

Щоб уникнути цієї проблеми (запобігти ASI), використовуйте дужки:

+ +
return (
+  a + b
+);
+
+ +

Приклади

+ +

Переривання функції

+ +

Функція негайно зупиняється у точці виклику оператора return.

+ +
function counter() {
+  for (var count = 1; ; count++) {  // нескінченний цикл
+    console.log(count + 'A'); // до 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + 'B');  // до 4
+    }
+  console.log(count + 'C');  // ніколи не виводиться
+}
+
+counter();
+
+// Результат:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+
+ +

Повернення результату функції

+ +

Дивіться також статтю про Замикання.

+ +
function magic() {
+  return function calc(x) { return x * 42; };
+}
+
+var answer = magic();
+answer(1337); // 56154
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/switch/index.html b/files/uk/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..986ba49599 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,295 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +tags: + - JavaScript + - Інструкція + - Довідка +translation_of: Web/JavaScript/Reference/Statements/switch +--- +
{{jsSidebar("Statements")}}
+ +

Інструкція switch обчислює вираз, зіставляє значення виразу зі значенням блоку case та виконує інструкції, що відносяться до цього блоку, а також інструкції у блоках case, наступних за блоком, що має збіг.

+ +
{{EmbedInteractiveExample("pages/js/statement-switch.html", "taller")}}
+ + + +

Синтаксис

+ +
switch (expression) {
+  case value1:
+    //Інструкції, що виконуються, коли
+    //результат виразу збігається з value1
+    [break;]
+  case value2:
+    //Інструкції, що виконуються, коли
+    //результат виразу збігається з value2
+    [break;]
+  ...
+  case valueN:
+    //Інструкції, що виконуються, коли
+    //результат виразу збігається з valueN
+    [break;]
+  [default:
+    //Інструкції, що виконуються, коли жодне
+    //значення не збігається зі значенням виразу
+    [break;]]
+}
+ +
+
expression
+
Вираз, чий результат зіставляється з кожним блоком case.
+
case valueN {{optional_inline}}
+
Блок case, який зіставляється з виразом expression. Якщо значення expression збігається з вказаним значенням valueN, інструкції всередині блоку case виконуються, поки не досягнуть або кінця інструкції switch, або оператора break.
+
default {{optional_inline}}
+
Блок default; якщо вказаний, виконується у випадку, коли значення expression не збігається з жодним з блоків case.
+
+ +

Опис

+ +

Інструкція switch спочатку обчислює вираз. Далі шукає перший блок case, чий вираз має таке саме значення, що й результат вхідного виразу (використовуючи строгу рівність, ===) та передає контроль цьому блоку, виконуючи інструкції, що до нього відносяться. (Якщо більше одного case збігаються з наданим значенням, обирається перший знайдений case, навіть якщо блоки case не дорівнюють одне одному.)

+ +

Якщо не знайдено жодного збігу серед блоків case, програма шукає необов'язковий блок default, і, якщо знаходить, передає йому контроль, виконуючи відповідні інструкції. Якщо блоку default не знайдено, програма продовжує виконання першої з інструкції, що йде після завершення switch. Прийнято писати блок default останнім, але це не обов'язково.

+ +

Необов'язковий оператор break у кожному case гарантує, що програма перериває виконання switch, як тільки виконані знайдені інструкції, та продовжує виконання з інструкції, що йде після switch. Якщо break не вказано, програма продовжує виконання наступної інструкції у switch.

+ +

Приклади

+ +

Використання switch

+ +

У наступному прикладі, якщо expr дорівнює Банани, програма знаходить збіг з блоком case 'Банани' та виконує відповідну інструкцію. Дійшовши до оператора break, програма перериває виконання switch та виконує інструкцію, наступну після switch. Якби не оператор break, інструкція блоку case 'Вишні' також би виконалась.

+ +
switch (expr) {
+  case 'Апельсини':
+    console.log('Апельсини коштують $0.59 за фунт.');
+    break;
+  case 'Яблука':
+    console.log('Яблука коштують $0.32 за фунт.');
+    break;
+  case 'Банани':
+    console.log('Банани коштують $0.48 за фунт.');
+    break;
+  case 'Вишні':
+    console.log('Вишні коштують $3.00 за фунт.');
+    break;
+  case 'Манго':
+  case 'Папайя':
+    console.log('Манго та папайя коштують $2.79 за фунт.');
+    break;
+  default:
+    console.log('Вибачте, в нас закінчились ' + expr + '.');
+}
+
+console.log("Бажаєте чого-небудь ще?");
+
+ +

Що станеться, якщо я забуду break?

+ +

Якщо ви забудете break, скрипт буде виконуватись, починаючи від блоку, який відповідає умові, і продовжить виконувати наступні блоки, незалежно від того, чи відповідають вони умові.

+ +

Дивіться наступний приклад:

+ +
var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('від\'ємна 1');
+    break;
+  case 0: // foo дорівнює 0, отже, умова виконана, і цей блок виконається
+    console.log(0);
+    // ЗАУВАГА: забутий break стояв би тут
+  case 1: // немає оператора break у 'case 0:', тому цей блок також виконається
+    console.log(1);
+    break; // програма зустріне тут break і не виконуватиме 'case 2:'
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}
+ +

Чи можна поставити default між блоками case?

+ +

Так, можна! JavaScript відправить вас у default, якщо не знайде збігів:

+ +
var foo = 5;
+switch (foo) {
+  case 2:
+    console.log(2);
+    break; // програма зустріне тут break, і не виконуватиме 'default:'
+  default:
+    console.log('default')
+    // проходимо далі
+  case 1:
+    console.log('1');
+}
+
+ +

Це також працює, якщо поставити default перед усіма блоками case.

+ +

Методи для кількох критеріїв case

+ +

Джерело цієї техніки тут:

+ +

Інструкція switch з кількома блоками case у JavaScript (Stack Overflow)

+ +

Декілька case : одна операція

+ +

Цей метод використовує переваги того факту, що, якщо в кінці блоку case немає оператора break, він продовжить виконувати наступний блок case, незалежно від того, чи той відповідає необхідній умові. (Дивіться розділ Що станеться, якщо я забуду break?)

+ +

Ось приклад інструкції для єдиної операції з послідовних case, де чотири різні значення виконують одне й те саме.

+ +
var Animal = 'Жирафа';
+switch (Animal) {
+  case 'Корова':
+  case 'Жирафа':
+  case 'Собака':
+  case 'Свиня':
+    console.log('Ці тварини підуть на Ноїв ковчег.');
+    break;
+  case 'Динозавр':
+  default:
+    console.log('Ця тварина не піде.');
+}
+ +

Декілька case : ланцюгові операції

+ +

Ось приклад кількох операцій у послідовних блоках case, де, в залежності від наданого цілого числа, ви можете отримати різний результат. Він демонструє, що виконуватиметься у тому порядку, в якому ви розташували блоки case, і вони не обов'язково мають бути чисельно послідовні. У JavaScript ви навіть можете змішувати їх з рядковими значеннями.

+ +
var foo = 1;
+var output = 'Результат: ';
+switch (foo) {
+  case 0:
+    output += 'То ';
+  case 1:
+    output += 'як ';
+  case 2:
+    output += 'тебе ';
+  case 3:
+    output += 'звати';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Будь ласка, оберіть число від 0 до 5!');
+}
+ +

Результат цього прикладу:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначенняВиведений текст
foo дорівнює NaN або не 1, 2, 3, 4, 5 чи 0Будь ласка, оберіть число від 0 до 5!
0Результат: То як тебе звати?
1Результат: як тебе звати?
2Результат: тебе звати?
3Результат: звати?
4Результат: ?
5Результат: !
+ +

Змінні блочної області видимості у інструкціях switch

+ +

Маючи підтримку ECMAScript 2015 (ES6) у більшості сучасних веб-переглядачів, у певних випадках ви захочете використати оператори {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const", "const")}} для оголошення змінних блочної області видимості.

+ +

Погляньте на цей приклад:

+ +
const action = 'скажи_привіт';
+switch (action) {
+  case 'скажи_привіт':
+    let message = 'привіт';
+    console.log(message);
+    break;
+  case 'скажи_бувай':
+    let message = 'бувай';
+    console.log(message);
+    break;
+  default:
+    console.log('Отримана порожня дія.');
+    break;
+}
+ +

Цей приклад спричинить помилку Uncaught SyntaxError: Identifier 'message' has already been declared, яку ви, можливо, не очікували.

+ +

Все тому, що перше оголошення let message = 'привіт'; конфліктує з другим оголошенням let message = 'бувай'; хоча вони й розташовані у окремих блоках case 'скажи_привіт': та case 'скажи_бувай':. Зрештою, це відбувається тому, що обидва оголошення let інтерпретуються як дублюючі оголошення однієї змінної всередині тієї самої блочної області видимості.

+ +

Ми можемо легко це виправити, огорнувши наші блоки case у дужки:

+ +
const action = 'скажи_привіт';
+switch (action) {
+  case 'скажи_привіт': { // додані дужки
+    let message = 'привіт';
+    console.log(message);
+    break;
+  } // додані дужки
+  case 'скажи_бувай': { // додані дужки
+    let message = 'бувай';
+    console.log(message);
+    break;
+  } // додані дужки
+  default: { // додані дужки
+    console.log('Отримана порожня дія.');
+    break;
+  } // додані дужки
+}
+ +

Тепер цей код, як і задумано, виведе у консоль привіт без жодних помилок.

+ +

Специфікації

+ + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/throw/index.html b/files/uk/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..96b8974f40 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,198 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +tags: + - JavaScript + - throw + - виняток +translation_of: Web/JavaScript/Reference/Statements/throw +--- +
{{jsSidebar("Statements")}}
+ +

Оператор throw викидає визначений користувачем виняток. Виконання поточної функції буде зупинено (оператори після throw не будуть виконані), а контроль буде передано до першого блоку catch у стеку викликів. Якщо жодного блоку catch не існує, виконання програми переривається.

+ +
{{EmbedInteractiveExample("pages/js/statement-throw.html")}}
+ + + +

Синтаксис

+ +
throw expression; 
+ +
+
expression
+
Вираз, що викидається.
+
+ +

Опис

+ +

Скористайтеся оператором throw, щоб викинути виняток. Коли викидаєте виняток, expression вказує значення винятка. Кожна з наступних команд викидає виняток:

+ +
throw 'Error2'; // генерує виняток, що має рядкове значення
+throw 42;       // генерує виняток, що має значення 42
+throw true;     // генерує виняток, що має значення true
+throw new Error('Required');  // генерує об'єкт помилки з повідомленням Required
+
+ +

Також зазначте, що на оператор throw впливає автоматична вставка крапки з комою (automatic semicolon insertion, ASI), оскільки між ключовим словом throw та виразом не дозволяється вставляти символи закінчення рядка.

+ +

Приклади

+ +

Викидання об'єкта

+ +

Ви можете вказати об'єкт, коли викидаєте виняток. Після цього ви можете звертатися до властивостей об'єкта у блоці catch. Наступний приклад створює об'єкт типу UserException, і далі використовує його з оператором throw.

+ +
function UserException(message) {
+   this.message = message;
+   this.name = 'UserException';
+}
+function getMonthName(mo) {
+   mo = mo - 1; // Припасувати номер місяця до індексу масиву (1 = Січ, 12 = Груд)
+   var months = ['Січ', 'Лют', 'Берез', 'Квіт', 'Трав', 'Черв', 'Лип',
+      'Серп', 'Верес', 'Жовт', 'Листоп', 'Груд'];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException('InvalidMonthNo');
+   }
+}
+
+try {
+   // команди до виконання
+   var myMonth = 15; // 15 не входить у визначені межі й викликає виняток
+   var monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = 'unknown';
+   console.error(e.message, e.name); // передати об'єкт винятку до обробника помилок
+}
+
+ +

Ще один приклад викидання об'єкта

+ +

Наступний приклад перевіряє наданий текстовий рядок на формат поштового індексу. Якщо поштовий індекс використовує неправильний формат, оператор throw викидає виняток, створюючи об'єкт типу ZipCodeFormatException.

+ +
/*
+ * Створює об'єкт ZipCode.
+ *
+ * Дозволені формати поштового індексу:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Якщо аргумент, переданий до конструктора ZipCode, не відповідає
+ * жодному з цих шаблонів, викидається виняток.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // значення поштового індексу буде першим збігом у рядку
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = 'не відповідає очікуваному формату поштового індексу';
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * Це можна вставити у скрипт, який перевіряє дані адреси
+ * на відповідність формату адрес.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // повертає 95060
+b = verifyZipCode(9560);          // повертає -1
+c = verifyZipCode('a');           // повертає -1
+d = verifyZipCode('95060');       // повертає 95060
+e = verifyZipCode('95060 1234');  // повертає 95060 1234
+
+ +

Повторне викидання винятку

+ +

Ви можете скористатись оператором throw, щоб повторно викинути виняток після того, як перехопите його. Наступний приклад перехоплює виняток з числовим значенням та повторно викидає його, якщо значення більше за 50. Повторно викинутий виняток спливає наверх до замикаючої функції або на верхній рівень, так, що користувач його бачить.

+ +
try {
+   throw n; // викидає виняток з числовим значенням
+} catch (e) {
+   if (e <= 50) {
+      // команди для обробки винятків 1-50
+   } else {
+      // неможливо обробити цей виняток, тому викидаємо його повторно
+      throw e;
+   }
+}
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/try...catch/index.html b/files/uk/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..9d506beb60 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,319 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +tags: + - Error + - JavaScript + - виняток + - помилка +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +
{{jsSidebar("Statements")}}
+ +

Конструкція try...catch позначає блок команд, які треба виконати, та визначає реакцію в разі, якщо буде викинуто виняток.

+ +
{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
+ + + +

Синтаксис

+ +
try {
+  try_statements
+}
+[catch (exception_var_1 if condition_1) { // нестандартна форма
+  catch_statements_1
+}]
+...
+[catch (exception_var_2) {
+  catch_statements_2
+}]
+[finally {
+  finally_statements
+}]
+
+ +
+
try_statements
+
Команди, які треба виконати.
+
+ +
+
catch_statements_1, catch_statements_2
+
Команди, що виконуються, якщо викинуто виняток у блоці try.
+
+ +
+
exception_var_1, exception_var_2
+
Ідентифікатор, що містить об'єкт винятку для відповідного блоку catch.
+
+ +
+
condition_1
+
Умовний вираз.
+
+ +
+
finally_statements
+
Команди, що виконуються після завершення блоку try. Ці команди виконуються незалежно від того, чи було викинуто або перехоплено виняток.
+
+ +

Опис

+ +

Вираз try містить одну або більше команд у блоці try. Фігурні дужки {} є обов'язковими, навіть для однієї команди. Має бути присутній принаймні один блок catch або finally. Це утворює три можливі форми виразу try:

+ +
    +
  1. try...catch
  2. +
  3. try...finally
  4. +
  5. try...catch...finally
  6. +
+ +

Блок catch містить команди, які визначають, що робити, якщо викинуто виняток у блоці try. Отже, ви хочете, щоб блок try виконався успішно, а в разі неуспіху ви хочете передати контроль до блоку catch. В разі, якщо будь-який вираз всередині блоку try (або функція, викликана зсередини блоку try) викидає виняток, контроль негайно переходить до блоку catch. Якщо жодних винятків у блоці try не було викинуто, блок catch пропускається.

+ +

Блок finally виконується після виконання блоків try та catch, але до команд, що йдуть після виразу try. Він завжди виконується, незалежно від того, чи було викинуто або перехоплено виняток.

+ +

Ви можете створити один або більше вкладених виразів try. Якщо внутрішній try не має блоку catch, контроль передається у блок catch зовнішнього try.

+ +

Ви також можете використовувати try, щоб обробляти винятки JavaScript. Ви знайдете більше інформації щодо винятків JavaScript у Посібнику JavaScript.

+ +

Безумовний catch

+ +

Коли використовується один безумовний блок catch, перехід у catch відбувається у випадку викидання будь-якого винятку. Наприклад, коли виняток стається у наступному коді, контроль передається до блоку catch.

+ +
try {
+  throw 'myException'; // генерує виняток
+}
+catch (e) {
+  // команди обробки будь-яких винятків
+  logMyErrors(e); // передає об'єкт винятку до обробника помилок
+}
+
+ +

Блок catch вказує ідентифікатор (e у наведеному прикладі), який містить значення, визначене у операторі throw. Блок catch унікальний тим, що JavaScript створює цей ідентифікатор при вході у блок catch, а також додає його у область видимості; ідентифікатор "живе" тільки протягом виконання блоку catch; коли catch завершується, ідентифікатор більше недоступний.

+ +

Умовний блок catch

+ +

{{non-standard_header}}

+ +

Ви також можете використати один або декілька умовних блоків catch для обробки специфічних винятків. В цьому випадку вхід у відповідний блок catch відбувається, коли викидається вказаний виняток. У наступному прикладі код у блоці try може викинути один з трьох винятків: {{jsxref("TypeError")}}, {{jsxref("RangeError")}} або {{jsxref("EvalError")}}. Коли виникає виняток, контроль передається до відповідного блоку catch. Якщо виняток не є одним із вказаних, і був знайдений безумовний блок catch, контроль передається до цього блоку catch.

+ +

Якщо ви використовуєте безумовний catch з одним або кількома умовними блоками catch, безумовний catch має бути вказаний останнім. Інакше безумовний catch перехоплюватиме всі види винятків до того, як вони потраплять в умовні блоки.

+ +

Нагадування: ця функціональність не є частиною специфікації ECMAScript і ніколи не прибиралася з Firefox 59. Вона більше не підтримується у жодних сучасних веб-переглядачах.

+ +
try {
+  myroutine(); // може викинути три типи винятків
+} catch (e if e instanceof TypeError) {
+  // команди обробки винятків типу TypeError
+} catch (e if e instanceof RangeError) {
+  // команди обробки винятків типу RangeError
+} catch (e if e instanceof EvalError) {
+  // команди обробки винятків типу EvalError
+} catch (e) {
+  // команди обробки не вказаних типів винятків
+  logMyErrors(e); // передати об'єкт винятку до обробника помилок
+}
+
+ +

Ось такі ж "Умовні блоки catch", написані кодом, що відповідає специфікації ECMAScript (він доволі багатослівний, зате працює всюди):

+ +
try {
+  myroutine(); // може викинути три типи винятків
+} catch (e) {
+  if (e instanceof TypeError) {
+    // команди обробки винятків типу TypeError
+  } else if (e instanceof RangeError) {
+    // команди обробки винятків типу RangeError
+  } else if (e instanceof EvalError) {
+    // команди обробки винятків типу EvalError
+  } else {
+    // команди обробки не вказаних типів винятків
+    logMyErrors(e); // передати об'єкт винятку до обробника помилок
+  }
+}
+
+ +

Ідентифікатор винятку

+ +

Коли викидається виняток у блоці try, ідентифікатор exception_var (наприклад, e у catch (e)) містить значення, вказане у виразі throw. Ви можете скористатись цим ідентифікатором, щоб отримати інформацію про виняток. Це локальний ідентифікатор блоку catch. Тобто, він створюється при вході у catch, а після того, як виконання блоку catch завершується, ідентифікатор більше недоступний.

+ +
function isValidJSON(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+ +

Блок finally

+ +

Блок finally містить команди, які виконуються після виконання блоків try та catch, але до команд, що розташовані після конструкції  try...catch...finally. Зверніть увагу, що finally виконується незалежно від того, чи був викинутий виняток. Також, якщо виняток було викинуто, команди блоку finally виконуються навіть якщо немає блоку catch, щоб обробити виняток.

+ +

Ви можете скористатись блоком finally, щоб у разі викидання винятку ваш скрипт переривався красиво; наприклад, вам може знадобитися звільнити ресурс, до якого був прив'язаний ваш скрипт.

+ +

Це може виглядати дивним, мати спеціальний блок, пов'язаний з винятками, що виконується незалежно від того, чи стався виняток, але ця конструкція насправді виконує свою задачу. Важливим моментом є те, що блок finally виконується завжди, на відміну від звичайного коду, розташованого після try...catch.

+ +

Наприклад, якщо станеться інший виняток всередині catch цього try, будь-який код, що не був виконаний у зовнішньому try, що замикає цей try...catch (або у головному потоці, якщо виконувався не зовнішній try), не буде виконаний, оскільки контроль негайно перейде до блоку catch зовнішнього try (або до внутнішнього генератора помилок, якщо виконується не блок try).

+ +

Таким чином, будь який поточний код очистки, що виконується у цій зовнішній (або головній) секції перед закінченням, буде пропущений. Однак, якщо вираз try містить блок finally, то спочатку буде виконаний код блоку finally, дозволяючи зробити очистку, і тільки ПОТІМ контроль буде передано до блоку catch іншого try (або до генератора помилок) для обробки винятку.

+ +

Отже, якщо поточна очистка повинна бути зроблена, не зважаючи на те, чи успішно виконаний код у try...catch, тоді, якби блок finally виконувався тільки після винятку, той самий код очистки довелося б повторювати і всередині, і поза блоком finally, і, таким чином, немає причини не мати один лише блок finally, який виконується незалежно від того, стався виняток чи ні.

+ +

Наступний приклад відкриває файл і далі виконує команди, які використовують цей файл (JavaScript на стороні сервера дозволяє звертатись до файлів). Якщо викидається виняток, доки файл відкритий, блок finally закриває цей файл до того, як скрипт переривається. Код у блоці finally також виконується з явним поверненням з блоку try або catch.

+ +
openMyFile();
+try {
+  // прив'язати ресурс
+  writeMyFile(theData);
+}
+finally {
+  closeMyFile(); // завжди закривати ресурс
+}
+
+ +

Приклади

+ +

Вкладені блоки try

+ +

Спочатку подивимось, що відбувається тут:

+ +
try {
+  try {
+    throw new Error('ой-ой');
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('зовнішній', ex.message);
+}
+
+// Результат:
+// "finally"
+// "зовнішній" "ой-ой"
+
+ +

Тепер, якщо ми вже перехопили виняток у внутрішньому try, додавши блок catch.

+ +
try {
+  try {
+    throw new Error('ой-ой');
+  }
+  catch (ex) {
+    console.error('внутрішній', ex.message);
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('зовнішній', ex.message);
+}
+
+// Результат:
+// "внутрішній" "ой-ой"
+// "finally"
+
+ +

А тепер викинемо цю помилку повторно.

+ +
try {
+  try {
+    throw new Error('ой-ой');
+  }
+  catch (ex) {
+    console.error('внутрішній', ex.message);
+    throw ex;
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('зовнішній', ex.message);
+}
+
+// Результат:
+// "внутрішній" "ой-ой"
+// "finally"
+// "зовнішній" "ой-ой"
+
+ +

Будь-який виняток буде перехоплений лише один раз найближчим замикаючим блоком catch, якщо тільки він не був викинутий повторно.  Звісно, будь-які нові винятки, викинуті у "внутрішньому" блоці (бо код у блоці catch може зробити те, що викине помилку), будуть перехоплені "зовнішнім" блоком.

+ +

Повернення значень з блоку finally

+ +

Якщо блок finally повертає значення, це значення повертається усією конструкцією try-catch-finally, не зважаючи на будь-які інші оператори return у блоках try та catch. Це стосується й винятків, викинутих всередині блоку catch:

+ +
(function() {
+  try {
+    try {
+      throw new Error('ой-ой');
+    }
+    catch (ex) {
+      console.error('внутрішній', ex.message);
+      throw ex;
+    }
+    finally {
+      console.log('finally');
+      return;
+    }
+  }
+  catch (ex) {
+    console.error('зовнішній', ex.message);
+  }
+})();
+
+// Результат:
+// "внутрішній" "ой-ой"
+// "finally"
+ +

Зовнішній "ой-ой" не викидається через return у блоці finally. Те саме стосувалося б будь-якого значення, що поверталося б з блоку catch.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення. Реалізоване у JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-try-statement', 'try statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}{{Spec2('ESDraft')}}Не є частиною нинішнього стандарту ECMA-262: Використання кількох блоків catch та умовні блоки (розширення SpiderMonkey, JavaScript 1.5).
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/var/index.html b/files/uk/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..5044c8cfc5 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/var/index.html @@ -0,0 +1,226 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Statements/var +--- +
{{jsSidebar("Заяви")}}
+ +

Оператор var оголошує змінну, з необов'язковим наданням їй початкового значення.

+ +
{{EmbedInteractiveExample ("pages/js/statement-var.html")}}
+ + + +

Синтаксис

+ +
var varname1 [= value1] [, varname2 [= value2] … [, varnameN [= valueN]]] ;
+ +
+
varnameN
+
Ім'я змінної. Може бути будь-яким дозволеним ідентифікатором.
+
+ +
+
valueN
+
Початкове значення змінної. Може бути будь-яким дозволеним виразом. Якщо відсутнє, початковим значенням буде undefined.
+
+ +

Опис

+ +

Оголошення змінних через var обробляються до виконання будь-якого коду. Це називається підняттям, і обговорюється нижче.

+ +

Область видимості змінної, що її оголошено оператором var, залежить від контексту виконання, це або замикаюча функція, або — якщо змінну оголошено поза межами всіх функцій — глобальний контекстПовторне оголошення змінної у JavaScript не скидає її значення.

+ +

Присвоєння значення неоголошеній змінній просто створює її як глобальну змінну (вона стає властивістю глобального об'єкта) під час виконання присвоєння. Відмінності між оголошеними та неоголошеними змінними наступні:

+ +

1. Оголошені змінні обмежені контекстом виконання, в якому їх оголошено. Неоголошені змінні завжди глобальні.

+ +
function x() {
+  y = 1;  // у строгому режимі викидає ReferenceError
+  var z = 2;
+}
+
+x();
+
+console.log(y);  // 1
+console.log(z);  // викидає ReferenceError: z не визначено за межами x
+ +

2. Оголошені змінні створюються до виконання будь-якого коду. Неоголошені не існують до виконання коду, що присвоює їм значення.

+ +
console.log(a); // викидає ReferenceError
+console.log('виконання триває…');  // ніколи не виконається
+
+ +
var a;
+console.log(a); // "undefined" чи "", залежно від переглядача
+console.log('виконання триває…'); // виконання триває…
+ +

3. Оголошені змінні є недоступними для налаштування властивостями свого контексту виконання (функціонального чи глобального). Неоголошені змінні доступні для налаштування (наприклад, їх можна видалити).

+ +
var a = 1;
+b = 2;
+
+delete this.а;  // у строгому режимі викидає TypeError, поза ним просто не спрацьовує
+delete this.b;
+
+console.log(a, b);  // викидає ReferenceError
+// Властивість 'b' була видалена й більше не існує.
+ +

Через ці відмінності використання неоголошених змінних, ймовірно, матиме несподівані наслідки. Тож, рекомендується завжди оголошувати змінні, незалежно від того, чи розташовані вони всередині функціі, чи у глобальній області видимості. У строгому режимі ECMAScript 5 присвоєння у неоголошену змінну викидає помилку.

+ +

Підняття var

+ +

Позаяк оголошення змінних (та й оголошення загалом) обробляються до виконанням будь-якого коду, оголошення змінної будь-де у коді є тотожним оголошенню на його початку. Це також означає, що змінну можна використовувати до того, як вона була оголошена. Ця поведінка називається «підняттям», бо виглядає так, наче оголошення було пересунуто на початок функції чи глобального коду.

+ +
bla = 2;
+var bla;
+
+// ...неявно означає таке:
+
+var bla;
+bla = 2;
+ +

З цієї причини рекомендується завжди оголошувати змінні нагорі їхньої області видимості (на початку тіла функції чи глобального коду), бо так легше зрозуміти, котра змінна належить до області видимості функції (локальна), а яка обчислюється через ланцюжок областей видимості.

+ +

Важливо зазначити, що підняття стосується оголошення змінної, але не її ініціалізації. Початкове значення дійсно буде присвоєне по виконанні відповідного рядка:

+ +
function do_something() {
+  console.log(bar);  // undefined
+  var bar = 111;
+  console.log(bar);  // 111
+}
+
+// ...неявно означає таке:
+
+function do_something() {
+  var bar;
+  console.log(bar);  // undefined
+  bar = 111;
+  console.log(bar);  // 111
+}
+ +

Приклади

+ +

Оголошення та ініціалізація двох змінних

+ +
var a = 0, b = 0;
+ +

Присвоєння двом змінним одного рядкового значення

+ +
var a = 'А';
+var b = a;
+
+// ...те саме, що й:
+
+var a, b = a = 'А';
+ +

Зважайте на порядок:

+ +
var x = y, y = 'А';
+console.log(x, y);  // undefinedА
+ +

Тут x та y оголошуються до виконання коду, але присвоєння значень відбувається пізніше. Під час обчислення "x = y" змінна y вже існує, тому ReferenceError не викидається, а її значенням є undefined. Отже, змінна x дістане значення undefined. Далі змінній y присвоюється значення 'А'. Отже, після першого рядка x === undefined && y === 'A', звідси результат.

+ +

Ініціалізація кількох змінних

+ +
var x = 0;
+function f() {
+  var x = y = 1; // Оголошує x локально; оголошує y глобально.
+}
+
+f();
+
+console.log (x, y); // 0 1
+
+// У нестрогому режимі:
+// глобальна змінна x, як і очікувалось;
+// Але змінна y просочилась за межі функції!
+ +

Той самий приклад, але у строгому режимі:

+ +
'use strict';
+
+var x = 0;
+function f() {
+  var x = y = 1; // Викидає ReferenceError у строгому режимі.
+}
+f();
+
+console.log(x, y);
+ +

Неявні глобальні змінні та область видимості зовнішньої функції

+ +

Змінні, що виглядають неявними глобальними змінними, можуть бути посиланнями на змінні області видимості зовнішньої функції:

+ +
var x = 0;  // оголошує змінну х в межах файлу та присвоює їй значення 0
+
+console.log(typeof z);  // "undefined", позаяк змінна z ще не існує
+
+function a() {
+  var y = 2;  // Оголошує змінну y в області видимості функції a, та присвоює їй значення 2
+
+  console.log (x, y);  // 0 2 
+
+  function b() {
+    x = 3;  // Присвоює 3 оголошеній в межах файлу змінній x.
+    у = 4;  // Присвоює 4 оголошеній зовнішній змінній y.
+    z = 5;  // Створює нову глобальну змінну z та присвоює їй значення 5.
+            // (Викидає ReferenceError у строгому режимі.)
+  }
+
+  b();  // Створює змінну z в глобальній області видимості.
+  console.log(x, y, z);  // 3 4 5 
+}
+
+a();  // Також викликає b.
+console.log(x, z);  // 3 5
+console.log(typeof y);  // "undefined", бо y є локальною змінною функції a
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName ('ES1')}}{{Spec2('ES1')}}Початкова виознака. Запроваджено у JavaScript 1.0.
{{SpecName ('ES5.1', '#sec-12.2', 'var statement')}}{{Spec2('ES5.1')}}
{{SpecName ('ES6', '#sec-variable-statement', 'variable statement')}}{{Spec2('ES6')}}
{{SpecName ('ESDraft', '#sec-variable-statement', 'variable statement')}}{{Spec2('ESDraft')}}
+ +

Підтримка веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/while/index.html b/files/uk/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..bddac682fb --- /dev/null +++ b/files/uk/web/javascript/reference/statements/while/index.html @@ -0,0 +1,104 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +tags: + - JavaScript + - while +translation_of: Web/JavaScript/Reference/Statements/while +--- +
{{jsSidebar("Statements")}}
+ +

Оператор while створює цикл, який виконує вказану інструкцію, доки перевірочна умова оцінюється як true. Умова оцінюється перед виконанням інструкції.

+ +
{{EmbedInteractiveExample("pages/js/statement-while.html")}}
+ + + +

Синтаксис

+ +
while (condition)
+  statement
+
+ +
+
condition
+
Вираз, який оцінюється перед кожним проходом циклу. Якщо ця умова оцінюється як true, statement виконується. Коли умова оцінюється як false, виконання продовжується з інструкції, що розташована після циклу while.
+
statement
+
Необов'язкова інструкція, яка виконується, поки умова оцінюється як true. Для виконання кількох інструкцій у циклі, скористайтесь блоком ({ ... }), щоб згрупувати ці інструкції.
+
+ Заувага: Використовуйте оператор break, щоб зупинити цикл раніше, ніж умова буде оцінена як false.
+
+ +

Приклади

+ +

Наступний цикл while виконується, поки n менше трьох.

+ +
var n = 0;
+var x = 0;
+
+while (n < 3) {
+  n++;
+  x += n;
+}
+ +

На кожній ітерації цикл збільшує змінну n на один та додає її до x. Отже, x та n приймають наступні значення:

+ + + +

Після завершення третього проходу умова n < 3 більше не дорівнює true, тому цикл переривається.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-while-statement', 'while statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}{{Spec2('ES1')}}Початкове визначення
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/statements/with/index.html b/files/uk/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..fca48fda25 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/with/index.html @@ -0,0 +1,107 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +tags: + - JavaScript + - Оператор + - не рекомендований +translation_of: Web/JavaScript/Reference/Statements/with +--- +
Використання оператора with не рекомендоване, оскільки може бути джерелом заплутаних помилок та проблем із сумісністю. Дивіться абзац "Мінуси для однозначності" у розділі "Опис", щоб дізнатись більше.
+ +
{{jsSidebar("Statements")}}
+ +

Оператор with розширює ланцюжок областей видимості для інструкції.

+ +

Синтаксис

+ +
with (expression)
+  statement
+
+ +
+
expression
+
Додає наданий вираз до ланцюжка областей видимості, який використовується під час обчислення інструкції. Круглі дужки навколо виразу є обов'язковими.
+
statement
+
Будь-яка інструкція. Щоб виконати більше однієї інструкції, скористайтесь блоком ({ ... }), щоб згрупувати ці інструкції.
+
+ +

Опис

+ +

JavaScript шукає некваліфіковане ім'я у ланцюжку областей видимості, пов'язаних з контекстом виконання скрипта чи функції, що містить це некваліфіковане ім'я. Оператор 'with' додає наданий об'єкт у початок цього ланцюжка під час обчислення своїх інструкцій. Якщо некваліфіковане ім'я, що використовується у інструкціях, співпадає з властивістю з ланцюжка областей видимості, це ім'я зв'язується з властивістю та об'єктом, що містить цю властивість. Інакше, викидається помилка {{jsxref("ReferenceError")}}.

+ +
Використання with не рекомендоване та заборонене у строгому режимі ECMAScript 5. Рекомендованою альтернативою є присвоєння об'єкта, чиї властивості вам потрібні, тимчасовій змінній.
+ +

Плюси та мінуси для швидкодії

+ +

Плюси: Оператор with може допомогти зменшити розмір файлу, скорочуючи необхідність повторювати довгі посилання на об'єкти без погіршення швидкодії. Зміна ланцюжка областей видимості, спричинена використанням 'with', не є затратною для обчислення. Використання 'with' звільнить інтерпретатор від розбору повторюваних посилань на об'єкти. Зауважте, однак, що у багатьох випадках ця перевага досягається використанням тимчасової змінної для зберігання посилання на необхідний об'єкт.

+ +

Мінуси: Оператор with спочатку спричиняє пошук усіх імен на вказаному об'єкті. Таким чином, усі ідентифікатори, що не є членами вказаного об'єкта, шукатимуться у блоці 'with' набагато повільніше. У випадках, коли швидкодія важлива, 'with' слід використовувати лише у тих блоках коду, які звертаються до членів вказаного об'єкта.

+ +

Мінуси для однозначності

+ +

Мінус: З оператором with стає важко зрозуміти, людині чи компілятору JavaScript, чи буде некваліфіковане ім'я знайдене у ланцюжку областей видимості, і, якщо так, то в якому об'єкті. Отже, у наступному прикладі:

+ +
function f(x, o) {
+  with (o) {
+    console.log(x);
+  }
+}
+ +

Лише коли функція f викликана, змінна x або буде знайдена, або ні, а, якщо буде знайдена, то або в o, або (якщо такої властивості не існує) у об'єкті активації f, де x іменує перший формальний аргумент. Якщо ви забудете визначити x у об'єкті, який передаєте другим аргументом, або в разі якоїсь схожої помилки чи плутанини, ви не отримаєте помилку -- лише неочікувані результати.

+ +

Мінус: Код, що використовує with, може бути несумісним знизу вгору, особливо при використанні з чимось інакшим, ніж простий об'єкт. Розглянемо цей приклад:

+ +
+
function f(foo, values) {
+  with (foo) {
+    console.log(values);
+  }
+}
+
+ +

Якщо ви викличете f([1,2,3], obj) у середовищі ECMAScript 5, то посилання values всередині блоку with поверне obj. Однак, ECMAScript 2015 вводить властивість values у {{jsxref("Array.prototype")}} (таким чином, доступну у кожному масиві). Отже, у середовищі JavaScript, яке підтримує ECMAScript 2015, посилання values всередині блоку with може повернути [1,2,3].values. Однак, конкретно у цьому прикладі {{jsxref("Array.prototype")}} було визначено з values у об'єкті {{jsxref("Symbol.unscopables")}}. Якби не це, ми б побачили, як важко було б його відлагоджувати.

+
+ +

Приклади

+ +

Використання with

+ +

Наступний оператор with вказує, що об'єкт Math є об'єктом за замовчуванням. Інструкції, що йдуть після with, посилаються на властивість PI, а також методи cos та sin без зазначення об'єкта. JavaScript припускає, що об'єктом цих посилань є Math.

+ +
var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/strict_mode/index.html b/files/uk/web/javascript/reference/strict_mode/index.html new file mode 100644 index 0000000000..8701c7bc5c --- /dev/null +++ b/files/uk/web/javascript/reference/strict_mode/index.html @@ -0,0 +1,364 @@ +--- +title: Строгий режим +slug: Web/JavaScript/Reference/Strict_mode +tags: + - ECMAScript5 + - JavaScript + - Строгий режим +translation_of: Web/JavaScript/Reference/Strict_mode +--- +
{{JsSidebar("More")}}
+ +

Строгий режим (strict mode) у ECMAScript 5 — це спосіб використання обмеженого варіанта JavaScript. Строгий режим є не просто підмножиною JavaScript: це семантика, яка навмисно відрізняється від звичайного коду. Переглядачі, що не підтримують строгий режим, виконуватимуть його код у дещо інший спосіб, аніж ті переглядачі, що таку підтримку мають. Отже, перш ніж покладатися на строгий режим, перевірте наявність підтримки його окремих складників. Код у строгому режимі та код поза ним можуть співіснувати, тому скрипти можна переводити у строгий режим поступово.

+ +

Строгий режим вносить декілька змін до звичної семантики JavaScript. По-перше, деякі помилки, що в звичайному режимі лишаються непомітними, натомість у строгому режимі викидаються в явний спосіб. По-друге, строгий режим виправляє помилки, що ускладнюють або унеможливлюють виконання певних оптимізацій рушіями JavaScript: код у строгому режимі іноді можна змусити виконуватися швидше, ніж такий самий код у звичайному режимі. По-третє, строгий режим забороняє деякий синтаксис, який, скоріше за все, буде визначено у майбутніх версіях ECMAScript.

+ +

Дивіться "Перехід до строгого режиму" (transitioning to strict mode), якщо бажаєте змінити свій код так, щоб він працював із обмеженим варіантом JavaScript.

+ +
+

Іноді ви побачите посилання на стандартний, не строгий режим, як на “брудний режим”. Це неофіційний термін, але вам краще знати про нього, про всяк випадок.

+
+ +

Виклик строгого режиму

+ +

Строгий режим застосовується до цілих скриптів, або до індивідуальних функцій. Він не застосовується до блочних виразів, замкнених у фігурних дужках {}; спроба застосувати його в такому контексті не дасть результату. eval код, Function код, атрибути обробника подій, рядки, що передаються у {{domxref("WindowTimers.setTimeout()")}}, і подібні до них є повноцінними скриптами, і виклик строгого режиму в них працює, як і очікується.

+ +

Строгий режим у скриптах

+ +

Щоб увімкнути строгий режим у цілому скрипті, запишіть точний вираз “use strict”; (або ‘use strict’;) перед будь-якими іншими виразами.

+ +
// Синтаксис строгого режиму для цілого скрипта
+"use strict";
+var v = "Привіт! Я скрипт у строгому режимі!";
+
+ +

Цей синтаксис приховує пастку, в яку вже втрапив один великий сайт: неможливо наосліп поєднати не суперечливі скрипти. Розглянемо об'єднання скрипту у строгому режимі із скриптом у звичайному режимі: вся конкатенація виходить у строгому режимі! Зворотнє теж правда: скрипт у звичайному режимі, поєднаний із скриптом у строгому режимі, призводить до звичайного режиму. Об'єднання скриптів у строгому та звичайному режимах є проблематичним. Тому рекомендується включати строгий режим у кожній функції окремо (принаймні, на час переміщення).

+ +

Ви також можете застосувати підхід із загортанням всього вмісту скрипту у функцію та наданням цій зовнішній функції строгого режиму. Це позбавляє проблеми конкатенації, але це означає, що вам доведеться явно експортувати будь-які глобальні змінні поза область видимості функції.

+ +

Строгий режим у функціях

+ +

Таким самим чином, щоб застосувати строгий режим у функції, напишіть точний вираз “use strict”; (або 'use strict';) у тілі функції перед будь-якими іншими виразами.

+ +
function strict() {
+  // Синтаксис строгого режиму на рівні функції
+  'use strict';
+  function nested() { return "І я також!"; }
+  return "Привіт!  Я функція у строгому режимі!  " + nested();
+}
+function notStrict() { return "А я ні."; }
+
+ +

Зміни у строгому режимі

+ +

Строгий режим змінює як синтаксис, так і поведінку під час виконання. Зміни загалом підпадають під такі категорії: зміни, що перетворюють похибки на помилки (такі, як помилки синтаксису під час виконання), зміни, що спрощують обчислення конкретної змінної для заданого використання імені, зміни, що спрощують eval та arguments, зміни, що спрощують написання “безпечного” коду JavaScript, а також зміни, що передбачають майбутню еволюцію ECMAScript.

+ +

Перетворення похибок на помилки

+ +

Строгий режим перетворює деякі раніше прийнятні похибки на помилки. JavaScript був розроблений таким чином, щоб бути простим для програмістів-початківців, й іноді позначає операції, які мали б бути помилками, як не помилкові. Іноді це вирішує невідкладну проблему, але іноді створює ще гірші проблеми в майбутньому. Строгий режим позначає ці похибки як помилки, що дозволяє виявляти їх та вчасно виправляти.

+ +

По-перше, строгий режим робить неможливим випадкове створення глобальних змінних. В звичайному режимі JavaScript неправильно написане ім'я змінної під час присвоювання створює нову властивість у глобальному об’єкті та продовжує “працювати” (хоча в майбутньому можливе не спрацювання: ймовірно, у новій версії JavaScript). Присвоювання, які могли випадково створити глобальні змінні, у строгому режимі генерують помилку:

+ +
"use strict";
+                       // Припускаючи, що глобальна змінна mistypedVariable
+mistypedVariable = 17; // існує, ця строка згенерує помилку ReferenceError
+                       // через неправильне написання змінної
+
+ +

По-друге, строгий режим змушує присвоювання, які б в іншому випадку непомітно не спрацювали, генерувати помилку. Наприклад, NaN є глобальною змінною, яку не можна редагувати. В нормальному коді присвоювання у NaN нічого не робить; розробник отримує неуспішний результат. У строгому режимі присвоювання у NaN викликає виняток. Будь-яке присвоювання, яке непомітно не спрацює у нормальному коді (присвоювання властивості, яку не можна редагувати, присвоювання властивості, яка має лише геттер, присвоювання нової властивості нерозширюваного об'єкту) згенерує виняток у строгому режимі:

+ +
"use strict";
+
+// Присвоєння у властивість, яку не можна редагувати
+var obj1 = {};
+Object.defineProperty(obj1, "x", { value: 42, writable: false });
+obj1.x = 9; // генерує помилку TypeError
+
+// Присвоєння у властивість, яка має лише геттер
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // генерує помилку TypeError
+
+// Присвоєння властивості нерозширюваного об'єкту
+var fixed = {};
+Object.preventExtensions(fixed);
+fixed.newProp = "ohai"; // генерує помилку TypeError
+
+ +

По-третє, строгий режим генерує винятки при намаганні видалити властивість, яку не можна видаляти (раніше така спроба просто не мала б ніякого ефекту):

+ +
"use strict";
+delete Object.prototype; // генерує помилку TypeError
+
+ +

По-четверте, строгий режим до версії Gecko 34 вимагає, щоб усі властивості у літералі об’єкту були унікальними. В звичайному коді можливо дублювати імена властивостей, при цьому останній запис встановлює значення властивості. Але, оскільки лише останній запис має значення, дублювання — це просто джерело помилок, якщо в коді змінюється значення властивості не в останньому запису. Дублювання імен властивостей є синтаксичною помилкою у строгому режимі:

+ +
+

Більше не працює у ECMAScript 2015 ({{bug(1041128)}}).

+
+ +
"use strict";
+var o = { p: 1, p: 2 }; // !!! синтаксична помилка
+
+ +

По-п’яте, строгий режим вимагає, щоб імена параметрів функцій були унікальними. В звичайному коді останній дубльований аргумент ховає попередні ідентично названі аргументи. Ці попередні аргументи лишаються доступними через arguments[i], тому вони не остаточно недоступні. Однак, таке приховання не має сенсу і, скоріше за все, є небажаним (воно може, наприклад, ховати помилку у написанні), тому у строгому режимі дублювання імен аргументів є синтаксичною помилкою:

+ +
function sum(a, a, c) { // !!! синтаксична помилка
+  "use strict";
+  return a + b + c; // неправильно, якщо виконати цей код
+}
+
+ +

По-шосте, строгий режим у ECMAScript 5 забороняє вісімковий синтаксис. Вісімковий синтаксис не є частиною ECMAScript 5, але він підтримується у всіх веб-переглядачах додаванням нуля попереду вісімкового числа: 0644 === 420 and "\045" === "%". У ECMAScript 5 вісімкове число підтримується з допомогою додавання "0o", тобто 

+ +
var a = 0o10; // ES2015: вісімкове число
+ +

Програмісти-початківці вважають, що нуль попереду числа не має семантичного значення, тому вони використовують його для вирівнювання строки — але це змінює значення числа! Вісімковий синтаксис рідко використовується і може бути використаний помилково, тому строгий режим позначає вісімковий запис як синтаксичну помилку:

+ +
"use strict";
+var sum = 015 + // !!! синтаксична помилка
+          197 +
+          142;
+
+ +

По-сьоме, строгий режим у ECMAScript 5 забороняє присвоєння властивостей {{Glossary("primitive", "примітивним")}} значенням. Без строгого режиму, присвоєння таких властивостей просто ігнорується (no-op), однак, у строгому режимі генерується помилка {{jsxref("TypeError")}}.

+ +
(function() {
+"use strict";
+
+false.true = "";         // TypeError
+(14).sailing = "home";     // TypeError
+"with".you = "far away"; // TypeError
+
+})();
+ +

Спрощення використання змінних

+ +

Строгий режим спрощує прив'язку імен змінних до певних визначень змінних у коді. Багато оптимізацій компілятора покладаються на спроможність сказати, що змінна Х зберігається у цій локації: це критично для повної оптимізації кода JavaScript. Іноді JavaScript робить базову прив'язку імені до визначення змінної в коді неможливим до запуску коду. Строгий режим усуває більшість випадків, в яких це відбувається, тому компілятор може краще оптимізувати код у строгому режимі.

+ +

По-перше, строгий режим забороняє with. Проблема з with полягає в тому, що будь-яке ім’я всередині блоку може вказувати або на властивість об’єкта, який йому передають, або на змінну з поточної (або навіть з глобальної) області видимості під час виконання: неможливо знати наперед. Строгий режим робить with синтаксичною помилкою і не дає можливості імені з with посилатися на невідому локацію під час виконання:

+ +
"use strict";
+var x = 17;
+with (obj) // !!! синтаксична помилка
+{
+  // Якби це не був строгий режим, була б це змінна x, або
+  // це була б властивість obj.x?  Неможливо заздалегідь
+  // сказати, не запустивши код, тому ім'я не можна
+  // оптимізувати.
+  x;
+}
+
+ +

Проста альтернатива присвоювання об’єкта змінній з коротким ім’ям, з отриманням доступу до відповідної властивості через цю змінну, здатна замінити with.

+ +

По-друге, eval у строгому режимі не додає нові змінні у поточну область видимості. У звичайному коді eval("var x;") створює змінну x у області видимості поточної функції або глобального об'єкту. Це означає, що, в цілому, у функції, що містить виклик eval кожне ім’я, яке не посилається на аргумент або на локальну змінну, мусить бути прив'язане до певного оголошення під час виконання (тому що eval міг створити нову змінну, яка сховає зовнішню змінну). У строгому режимі eval створює змінні лише для коду, який обчислюється, тому eval не може впливати на те, посилається ім’я на зовнішню змінну, чи на якусь локальну змінну:

+ +
var x = 17;
+var evalX = eval("'use strict'; var x = 42; x");
+console.assert(x === 17);
+console.assert(evalX === 42);
+
+ +

Відповідно, якщо функція eval викликається виразом у вигляді eval(...) у строгому режимі, код буде оцінюватися як код у строгому режимі. Код може явно увімкнути строгий режим, але в цьому нема необхідності.

+ +
function strict1(str) {
+  "use strict";
+  return eval(str); // str буде вважатися кодом у строгому режимі
+}
+function strict2(f, str) {
+  "use strict";
+  return f(str); // not eval(...): str матиме строгий режим тільки в тому
+                 // випадку, якщо він його вмикає
+}
+function nonstrict(str) {
+  return eval(str); // str матиме строгий режим тільки в тому випадку,
+                    // якщо він його вмикає
+}
+
+strict1("'Код у строгому режимі!'");
+strict1("'use strict'; 'Код у строгому режимі!'");
+strict2(eval, "'Код у звичайному режимі.'");
+strict2(eval, "'use strict'; 'Код у строгому режимі!'");
+nonstrict("'Код у звичайному режимі.'");
+nonstrict("'use strict'; 'Код у строгому режимі!'");
+
+ +

Таким чином, імена у eval коді строгого режиму поводяться ідентично іменам у строгому режимі, які не оцінюються як результат eval.

+ +

По-третє, строгий режим забороняє видалення простих імен. delete name у строгому режимі є синтаксичною помилкою:

+ +
"use strict";
+
+var x;
+delete x; // !!! синтаксична помилка
+
+eval("var y; delete y;"); // !!! синтаксична помилка
+ +

Спрощення eval та arguments

+ +

Строгий режим робить arguments та eval менш химерно магічними. Обидва поводяться досить загадково в нормальному коді: eval для додавання або видалення зв’язків або для зміни значень зв’язків, та arguments з його індексованими властивостями в якості псевдонімів імен аргументів. Строгий режим робить величезний крок до поводження з eval та arguments як з ключовими словами, хоча остаточні зміни з’являться не раніше майбутнього видання ECMAScript.

+ +

По-перше, згідно з синтаксисом, імена eval та arguments не можуть бути прив’язані або отримати присвоєння. Всі спроби це зробити згенерують синтаксичні помилки:

+ +
"use strict";
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function("arguments", "'use strict'; return 17;");
+
+ +

По-друге, у строгому режимі властивості створених в ньому об’єктів arguments не є псевдонімами. У звичайному коді у функції із першим аргументом arg, зміна значення arg також змінює значення arguments[0], і навпаки (крім випадку, коли аргументи відсутні, або arguments[0] було видалено). Об'єкти arguments у строгому режимі зберігають у функціях початкові аргументи на момент, коли функція була викликана. arguments[i] не відслідковує значення відповідного іменованого аргументу, також іменований аргумент не відслідковує значення відповідного arguments[i].

+ +
function f(a) {
+  "use strict";
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.assert(pair[0] === 42);
+console.assert(pair[1] === 17);
+
+ +

По-третє, arguments.callee більше не підтримується. В звичайному коді arguments.callee посилається на замкнену функцію. Цей випадок використання дуже слабкий: просто назвіть цю функцію! Більше того, arguments.callee ґрунтовно перешкоджає оптимізаціям, наприклад, вбудові функції, тому що має бути можливість надати посилання на не вбудовану функцію, якщо трапляється arguments.callee. У функціях строгого режиму arguments.callee є властивістю, яку не можна видаляти, вона генерує помилку при присвоюванні або виклику:

+ +
"use strict";
+var f = function() { return arguments.callee; };
+f(); // генерує помилку TypeError
+
+ +

"Убезпечення" JavaScript

+ +

Строгий режим спрощує написання “безпечного” коду в JavaScript. Деякі веб-сайти зараз надають користувачам можливість писати код JavaScript, який буде виконуватися на цій сторінці від імені інших користувачів. JavaScript у веб-переглядачах може мати доступ до приватної інформації користувачів, тому такий код має бути частково перетворений перед виконанням, щоб контролювати доступ до забороненої функціональності. Гнучкість JavaScript робить це практично неможливим без купи перевірок під час виконання. Певні функції мови настільки розповсюджені, що перевірки під час виконання призводять до суттєвих втрат у продуктивності. Кілька вивертів строгого режиму, плюс вимога, щоб код JavaScript, наданий користувачем, був у строгому режимі і щоб він запускався певним чином, суттєво зменшують необхідність в таких перевірках.

+ +

По-перше, значення, що передається у функцію як this, в строгому режимі не зобов'язане бути об'єктом (т. зв. “обгорнуте” значення). У звичайній функції this завжди є об'єктом: це або переданий об'єкт, якщо функція викликається із this, що є об'єктом; обгорнуте значення, якщо функція викликається із логічним (Boolean), строковим (string) або числовим (number) this; або глобальний об'єкт, якщо функція викликається із this, що дорівнює undefined або null . (Використовуйте call, apply, або bind щоб вказати конкретний this.) Автоматичне обгортання не лише призводить до втрат продуктивності. Викриття глобального об'єкту у веб-переглядачах є небезпечним, тому що глобальний об'єкт надає доступ до функціональності, яку “безпечний” JavaScript код має обмежувати. Таким чином, для функції у строгому режимі заданий this не обгортається у об'єкт, а якщо він не заданий, this буде мати значення undefined:

+ +
"use strict";
+function fun() { return this; }
+console.assert(fun() === undefined);
+console.assert(fun.call(2) === 2);
+console.assert(fun.apply(null) === null);
+console.assert(fun.call(undefined) === undefined);
+console.assert(fun.bind(true)() === true);
+
+ +

Це означає, окрім іншого, що у веб-переглядачах більше неможливо посилатися на об'єкт window через this всередині функції строгого режиму.

+ +

По-друге, у строгому режимі більше неможливо “пройтися” через стек JavaScript за допомогою часто вживаних розширень ECMAScript. В звичайному коді із цими розширеннями, коли функція fun знаходиться у процесі виклику, fun.caller – це функція, яка останньою викликала fun, а fun.arguments– це аргументи для цього виклику fun. Обидва розширення є проблематичними для “безпечного” коду JavaScript, тому що вони дозволяють “безпечному” коду мати доступ до “привілейованих” функцій та їхніх (потенційно небезпечних) аргументів. Якщо fun знаходиться у строгому режимі, fun.caller та fun.arguments є властивостями, які не можна видаляти, і генерують помилку під час присвоєння або виклику:

+ +
function restricted()
+{
+  "use strict";
+  restricted.caller;    // викидає TypeError
+  restricted.arguments; // викидає TypeError
+}
+function privilegedInvoker()
+{
+  return restricted();
+}
+privilegedInvoker();
+
+ +

По-третє, arguments у строгому режимі функції більше не надають доступу до відповідних змінних викликаної функції. В деяких старих версіях ECMAScript arguments.caller був об'єктом, чиї властивості були псевдонімами змінних у цій функції. Це небезпечно, тому що порушує можливість приховувати привілейовані значення через абстракцію функції; це також перешкоджає більшості оптимізацій. З цих причин сучасні переглядачі не мають цієї можливості. Тим не менш, через свою історичну функціональність, arguments.caller у функції строгого режиму також є властивістю, яку не можна видаляти, і генерує помилку під час присвоєння або виклику:

+ +
"use strict";
+function fun(a, b)
+{
+  "use strict";
+  var v = 12;
+  return arguments.caller; // генерує помилку TypeError
+}
+fun(1, 2); // не викриває v (або a, або b)
+
+ +

Прокладання шляху для майбутніх версій ECMAScript

+ +

Майбутні версії ECMAScript, скоріше за все, запропонують новий синтаксис, а строгий режим у ECMAScript 5 застосовує деякі обмеження, щоб спростити перехід. Буде простіше внести деякі зміни, якщо основи цих змін заборонені у строгому режимі.

+ +

По-перше, у строгому режимі деякі ідентифікатори стають зарезервованими ключовими словами. Ці слова: implements, interface, let, package, private, protected, public, static, та yield. Тоді у строгому режимі ви не зможете називати ними або використовувати змінні або аргументи з такими іменами.

+ +
function package(protected) { // !!!
+  "use strict";
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+
+
+ +

Два застереження для Mozilla: по-перше, якщо ваш код використовує JavaScript версії 1.7 або вище (наприклад, у коді хрома, або при використанні <script type="">) та використовує строгий режим, let та yield матимуть функціональність, яку вони мали з тих пір, як ці ключові слова були вперше введені. Але код у строгому режимі у мережі, завантажений з допомогою <script src=""> або <script>...</script>, не зможуть використовувати let/yield як ідентифікатори. По-друге, в той час, як ES5 безумовно резервує слова class, enum, export, extends, import, та super, раніше Firefox 5 Mozilla резервував їх лише у строгому режимі.

+ +

По-друге, строгий режим забороняє функціональні вирази не на верхньому рівні скрипта чи функції. В звичайному коді в переглядачах функціональні вирази дозволені “будь-де”. Це не є частиноюES5 (або навітьES3)! Це розширення з несумісною семантикою у різних переглядачах. Є надія, що в майбутніх версіях ECMAScript буде введено нову семантику для функціональних виразів не на верхньому рівні скрипта або функції. Заборона таких функціональних виразів у строгому режимі "розчищає поле" для специфікації майбутнього випуску ECMAScript:

+ +
"use strict";
+if (true) {
+  function f() { } // !!! синтаксична помилка
+  f();
+}
+
+for (var i = 0; i < 5; i++) {
+  function f2() { } // !!! синтаксична помилка
+  f2();
+}
+
+function baz() { // кошерно
+  function eit() { } // теж кошерно
+}
+
+ +

Ця заборона не є правильною для строгого режиму, тому що такі функціональні вирази є розширенням базового ES5. Але це рекомендація комітету ECMAScript, і бразуери будуть її впроваджувати.

+ +

Строгий режим у веб-переглядачах

+ +

У більшості переглядачів в наш час реалізовано строгий режим. Однак, не покладайтеся на нього наосліп, оскільки досі існує велика кількість версій переглядачів, які лише частково підтримують строгий режим або взагалі його не підтримують (наприклад, Internet Explorer нижче 10-ї версії!). Строгий режим змінює семантику. Покладання на строгий режим призведе до численних помилок у переглядачах, в яких не реалізовано строгий режим. Використовуйте строгий режим з обережністю, та, опираючись на строгий режим, підстраховуйтесь тестуванням функціональності, яке перевірить, чи реалізовані відповідні частини строгого режиму. Нарешті, переконайтеся, що протестували свій код у переглядачах, які підтримують та не підтримують строгий режим. Якщо ви тестуєте лише у тих переглядачах, які не підтримують строгий режим, ви, ймовірно, будете мати проблеми у переглядачах, які його підтримують, та навпаки.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}{{Spec2('ES5.1')}}Базове визначення. Дивіться також: Strict mode restriction and exceptions
{{SpecName('ES6', '#sec-strict-mode-code', 'Strict Mode Code')}}{{Spec2('ES6')}}Strict mode restriction and exceptions
{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}{{Spec2('ESDraft')}}Strict mode restriction and exceptions
+ +

Дивіться також

+ + diff --git a/files/uk/web/javascript/reference/template_literals/index.html b/files/uk/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..fcd2c3adab --- /dev/null +++ b/files/uk/web/javascript/reference/template_literals/index.html @@ -0,0 +1,259 @@ +--- +title: Шаблонні літерали (шаблонні рядки) +slug: Web/JavaScript/Reference/Template_literals +tags: + - ECMAScript 2015 + - JavaScript + - String + - Посібник + - рядок + - шаблонні літерали + - шаблонні рядки +translation_of: Web/JavaScript/Reference/Template_literals +--- +
{{JsSidebar("More")}}
+ +

Шаблонні літерали - це рядкові літерали, які дозволяють використання вбудованих виразів. З ними ви можете використовувати багаторядковий запис та засоби інтерполяції рядків.

+ +

У попередніх версіях специфікації ES2015 вони називались "шаблонними рядками".

+ +

Синтаксис

+ +
`текстовий рядок`
+
+`текстовий рядок 1
+ текстовий рядок 2`
+
+`текст ${вираз} текст`
+
+тег`текст ${вираз} текст`
+
+ +

Опис

+ +

Шаблонні літерали заключаються у зворотні лапки (` `) (гравіс) замість подвійних чи одинарних лапок.

+ +

Шаблонні літерали можуть містити заповнювачі. Вони позначаються знаком долара та фігурними дужками (${вираз}). Вирази у заповнювачах та текст між зворотними лапками (` `) передаються у функцію.

+ +

Проста функція просто з'єднує декілька частин у єдиний рядок. Якщо перед шаблоном знаходиться вираз (тег), він називається тегованим шаблоном. У цьому випадку вираз тегу (зазвичай, це функція) викликається разом із шаблонним літералом, і ви можете маніпулювати ним перед поверненням.

+ +

Щоб екранувати зворотні лапки у шаблонному літералі, поставте зворотній слеш (\) перед лапками.

+ +
`\`` === '`' // --> true
+ +

Багаторядковий запис

+ +

Будь-які символи нового рядка, вставлені у першокод, є частиною шаблонного літералу.

+ +

У звичайних рядках вам довелося б використати наступний синтаксис, щоб отримати багаторядковий запис:

+ +
console.log('текстовий рядок 1\n' +
+'текстовий рядок 2');
+// "текстовий рядок 1
+// текстовий рядок 2"
+ +

У шаблонних літералах ви можете зробити те саме ось так:

+ +
console.log(`текстовий рядок 1
+текстовий рядок 2`);
+// "текстовий рядок 1
+// текстовий рядок 2"
+ +

Інтерполяція виразів

+ +

Для того, щоб вставити вирази у звичайні рядки, ви б використали наступний синтаксис:

+ +
let a = 5;
+let b = 10;
+console.log('П\'ятнадцять - це ' + (a + b) + ', а\nне ' + (2 * a + b) + '.');
+// "П'ятнадцять - це 15, а
+// не 20."
+ +

Тепер, з шаблонними літералами, ви можете скористатись синтаксичним цукром, зробивши підстановки легшими для читання наступним чином:

+ +
let a = 5;
+let b = 10;
+console.log(`П'ятнадцять - це ${a + b}, а
+не ${2 * a + b}.`);
+// "П'ятнадцять - це 15, а
+// не 20."
+ +

Вкладені шаблони

+ +

У певних випадках вкладений шаблон - це найкращий (і, мабуть, найлегший для читання) спосіб створювати рядки, що конфігуруються. Всередині шаблона у зворотних лапках легко створити внутрішні зворотні лапки, просто використавши їх всередині заповнювача ${ } у шаблоні.

+ +

Наприклад, якщо умова a дорівнює true, то повернути цей шаблонований літерал.

+ +

У ES5:

+ +
let classes = 'header';
+classes += (isLargeScreen() ?
+  '' : item.isCollapsed ?
+    ' icon-expander' : ' icon-collapser');
+
+ +

У ES2015 з шаблонними літералами та без вкладення:

+ +
const classes = `header ${ isLargeScreen() ? '' :
+  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
+ +

У ES2015 з вкладеними шаблонними літералами:

+ +
const classes = `header ${ isLargeScreen() ? '' :
+  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
+ +

Теговані шаблони

+ +

Більш прогресивною формою шаблонних літералів є теговані шаблони.

+ +

Теги дозволяють розбирати шаблонні літерали за допомого функцій. Перший аргумент функції-тегу містить масив рядкових значень. Решта аргументів відносяться до виразів.

+ +

Далі функція-тег може виконати будь-які операції над цими аргументами та повернути отриманий рядок. (Як варіант, вона може повернути щось зовсім інше, як описано у одному з наступних прикладів.) 

+ +

Ім'я функції, що використовується для тегу, може бути яким завгодно.

+ +
let person = 'Майк';
+let age = 28;
+
+function myTag(strings, personExp, ageExp) {
+  let str0 = strings[0]; // "Цей "
+  let str1 = strings[1]; // " - "
+
+  // Технічно, існує рядок після
+  // останнього виразу (в нашому прикладі),
+  // але він порожній (""), тому не зважаємо.
+  // let str2 = strings[2];
+
+  let ageStr;
+  if (ageExp > 99){
+    ageStr = 'довгожитель';
+  } else {
+    ageStr = 'юнак';
+  }
+
+  // Ми навіть можемо повернути рядок, побудований шаблонним літералом
+  return `${str0}${personExp}${str1}${ageStr}`;
+}
+
+let output = myTag`Цей ${ person } - ${ age }`;
+
+console.log(output);
+// Цей Майк - юнак
+ +

Функція-тег може навіть не повертати рядок!

+ +
function template(strings, ...keys) {
+  return (function(...values) {
+    let dict = values[values.length - 1] || {};
+    let result = [strings[0]];
+    keys.forEach(function(key, i) {
+      let value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+let t1Closure = template`${0}${1}${0}!`;
+t1Closure('Й', 'О');                      // "ЙОЙ!"
+let t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Всім', {foo: 'привіт'});       // "Всім привіт!"
+
+ +

Сирі рядки

+ +

Спеціальна властивість raw, доступна на першому аргументі функції-тегу, дає доступ до сирих рядків у тому вигляді, як вони були записані, без обробки екранувань.

+ +
function tag(strings) {
+  console.log(strings.raw[0]);
+}
+
+tag`текстовий рядок 1 \n текстовий рядок 2`;
+// виводить "текстовий рядок 1 \n текстовий рядок 2" ,
+// в тому числі два символи, '\' та 'n'
+
+ +

На додачу, існує метод {{jsxref("String.raw()")}} для створення сирих рядків — так само, як їх би створили проста шаблонна функція та об'єднання рядків.

+ +
let str = String.raw`Привіт\n${2+3}!`;
+// "Привіт\n5!"
+
+str.length;
+// 10
+
+Array.from(str).join(',');
+// "П,р,и,в,і,т,\,n,5,!"
+
+ +

Теговані шаблони та екрановані послідовності

+ +

Поведінка в ES2016

+ +

У ECMAScript 2016 теговані шаблони відповідають правилам наступних екранованих послідовностей:

+ + + +

Це означає, що тегований шаблон, наведений нижче, є проблематичним, оскільки, згідно з граматикою ECMAScript, синтаксичний аналізатор шукає коректну екрановану послідовність Юнікоду, але знаходить неправильно сформований синтаксис:

+ +
latex`\unicode`
+// Викидає помилку у старших версіях ECMAScript (ES2016 та старші)
+// SyntaxError: malformed Unicode character escape sequence
+ +

Перегляд недозволених екранованих послідовностей у ES2018

+ +

Теговані шаблони повинні дозволяти вкладені мови (наприклад, DSL чи LaTeX), де існують інші екрановані послідовності. Пропозиція ECMAScript Template Literal Revision (Стадія 4, має бути інтегрована у стандарт ECMAScript 2018) прибирає обмеження синтаксису екранованих послідовностей ECMAScript з тегованих шаблонів.

+ +

Однак, недозволені екрановані послідовності все одно мають бути представлені у “готовому” представленні. Вони з'являться як елемент {{jsxref("undefined")}} у масиві “cooked” (готовий):

+ +
function latex(str) {
+  return { "cooked": str[0], "raw": str.raw[0] }
+}
+
+latex`\unicode`
+
+// { cooked: undefined, raw: "\\unicode" }
+ +

Зауважте, що обмеження екранованих послідовностей прибираються лише з тегованих шаблонів, вони не прибираються з нетегованих шаблонних літералів:

+ +
let bad = `погана екранована послідовність: \unicode`;
+ +

Специфікації

+ + + + + + + + + + + + + + + +
Специфікація
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}
{{SpecName('ESDraft', '#sec-tagged-templates', 'Tagged templates Literals')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.grammar.template_literals")}}

+
+ +

Див. також

+ + diff --git a/files/uk/web/javascript/reference/trailing_commas/index.html b/files/uk/web/javascript/reference/trailing_commas/index.html new file mode 100644 index 0000000000..3daa0363b5 --- /dev/null +++ b/files/uk/web/javascript/reference/trailing_commas/index.html @@ -0,0 +1,171 @@ +--- +title: Кінцеві коми +slug: Web/JavaScript/Reference/Trailing_commas +tags: + - ECMAScript2017 + - ECMAScript5 + - JavaScript + - Синтаксис + - кома + - кінцева кома +translation_of: Web/JavaScript/Reference/Trailing_commas +--- +
{{JsSidebar("More")}}
+ +

Кінцеві коми (іноді їх називають "заключними комами") можуть бути корисними для додавання нових елементів, параметрів чи властивостей у коді JavaScript. Якщо ви хочете додати нову властивість, ви можете просто додати новий рядок, не змінюючи перед цим попередній рядок, якщо цей рядок вже використовує кінцеву кому. Це робить контроль версій зрозумілішим, а редагування коду може бути менш проблемним.

+ +

Кінцеві коми були дозволені у масивних літералах JavaScript з самого початку, а пізніше вони були додані до об'єктних літералів (ECMAScript 5) та нещодавно (ECMAScript 2017) до параметрів функцій.

+ +

JSON, однак, не дозволяє кінцеві коми.

+ +

Синтаксис

+ +
,
+ +

Приклади

+ +

Кінцеві коми у літералах

+ +

Масиви

+ +

JavaScript ігнорує кінцеві коми у масивах:

+ +
var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3
+ +

Якщо використовується більше однієї кінцевої коми, утворюється пропуск (або діра). Масив з дірами називається розрідженим (щільний масив не має дір). Під час перебору масивів, наприклад, за допомогою {{jsxref("Array.prototype.forEach()")}} або {{jsxref("Array.prototype.map()")}}, діри в масивах пропускаються.

+ +
var arr = [1, 2, 3,,,];
+arr.length; // 5
+
+ +

Об'єкти

+ +

Починаючи з ECMAScript 5, кінцеві коми у об'єктних літералах також дозволені:

+ +
var object = {
+  foo: "bar",
+  baz: "qwerty",
+  age: 42,
+};
+ +

Кінцеві коми у функціях

+ +

ECMAScript 2017 дозволяє кінцеві коми у списку параметрів функцій.

+ +

Визначення параметрів

+ +

Наступні пари визначень функцій є дозволеними та еквівалентні одне одному. Кінцеві коми не впливають на властивість length оголошень функцій або на їхній об'єкт arguments.

+ +
function f(p) {}
+function f(p,) {}
+
+(p) => {};
+(p,) => {};
+
+ +

Кінцеві коми також працюють у визначеннях методів для класів чи об'єктів:

+ +
class C {
+  one(a,) {}
+  two(a, b,) {}
+}
+
+var obj = {
+  one(a,) {},
+  two(a, b,) {},
+};
+
+ +

Виклики функцій

+ +

Наступні пари викликів функцій є дозволеними та еквівалентні один одному.

+ +
f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+
+ +

Недозволені кінцеві коми

+ +

Визначення параметрів функцій або виклики функцій, які містять лише кому, викинуть {{Jsxref("SyntaxError")}}. Крім того, при використанні залишкових параметрів кінцеві коми недозволені:

+ +
function f(,) {} // SyntaxError: missing formal parameter
+(,) => {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','
+
+ +

Кінцеві коми у деструктуризації

+ +

Кінцеві коми також дозволені по ліву сторону при використанні деструктуризаційного присвоєння:

+ +
// деструктуризація масиву з кінцевою комою
+[a, b,] = [1, 2];
+
+// деструктуризація об'єкта з кінцевою комою
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+
+ +

Знову ж таки, при використання залишкового елемента, буде викинуто {{jsxref("SyntaxError")}}:

+ +
var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+ +

Кінцеві коми у JSON

+ +

Кінцеві коми у об'єктах були введені лише починаючи з ECMAScript 5. Оскільки JSON базується на синтаксисі JavaScript, що існував до ES5, кінцеві коми не дозволені у JSON.

+ +

Обидва рядки викинуть SyntaxError:

+ +
JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+
+ +

Уникайте кінцевих ком, щоб розібрати JSON коректно:

+ +
JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');
+ +

Специфікації

+ + + + + + + + + + +
Специфікація
{{SpecName('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.grammar.trailing_commas")}}

+
+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/reference/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\320\270_\320\277\320\265\321\200\320\265\320\261\320\276\321\200\321\203/index.html" "b/files/uk/web/javascript/reference/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\320\270_\320\277\320\265\321\200\320\265\320\261\320\276\321\200\321\203/index.html" new file mode 100644 index 0000000000..d5899043ca --- /dev/null +++ "b/files/uk/web/javascript/reference/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\320\270_\320\277\320\265\321\200\320\265\320\261\320\276\321\200\321\203/index.html" @@ -0,0 +1,352 @@ +--- +title: Протоколи перебору +slug: Web/JavaScript/Reference/Протоколи_перебору +tags: + - ECMAScript 2015 + - JavaScript + - Ітератор + - ітерабельний об'єкт +translation_of: Web/JavaScript/Reference/Iteration_protocols +--- +
{{jsSidebar("More")}}
+ +

Пара доповнень до ECMAScript 2015 є не новими вбудованими елементами чи синтаксисом, а протоколами. Ці протоколи можуть реалізовуватись будь-яким об'єктом, що відповідає певним правилам.

+ +

Існують два протоколи: протокол ітерабельного об'єкта і протокол ітератора.

+ +

Протокол ітерабельного об'єкта

+ +

Протокол ітерабельного об'єкта дозволяє об'єктам JavaScript визначати чи налаштовувати свою ітераційну поведінку, наприклад, через які значення буде проходити цикл у конструкції {{jsxref("Statements/for...of", "for..of")}}. Деякі вбудовані типи є вбудованими ітерабельними об'єктами з визначеною за замовчуванням ітераційною поведінкою, наприклад, {{jsxref("Array")}} або {{jsxref("Map")}}, в той час, як інші типи (такі, як {{jsxref("Object")}}) не є ітерабельними.

+ +

Для того, щоб бути ітерабельним, об'єкт має реалізувати метод @@iterator, тобто, цей об'єкт (або один з об'єктів у його ланцюжку прототипів) повинен мати властивість з ключем @@iterator, доступну через константу {{jsxref("Symbol.iterator")}}:

+ + + + + + + + + + + + + + +
ВластивістьЗначення
[Symbol.iterator]Функція без аргументів, яка повертає об'єкт, що відповідає протоколу ітератора.
+ +

Коли виникає необхідність перебрати об'єкт (наприклад, на початку циклу for..of), його метод @@iterator викликається без аргументів, а ітератор, який він повертає, використовується для отримання значень, що перебираються.

+ +

Протокол ітератора

+ +

Протокол ітератора визначає стандартний спосіб створювати послідовності значень (скінченні або нескінченні).

+ +

Об'єкт є ітератором, коли реалізує метод next() з наступною семантикою:

+ + + + + + + + + + + + +
ВластивістьЗначення
next +

Функція з нулем аргументів, яка повертає об'єкт з двома властивостями:

+ +
    +
  • done (булеве значення) + +
      +
    • Має значення true, якщо ітератор досяг кінця послідовності, що перебирається. В цьому випадку value може містити значення, що повертається ітератором. Значення, що повертаються, пояснюються тут.
    • +
    • Має значення false, якщо ітератор був здатний надати наступне значення послідовності. Це аналогічно тому, щоб взагалі не вказувати значення властивості done.
    • +
    +
  • +
  • value - будь-яке значення JavaScript, що повертає ітератор. Його можна не вказувати, коли done дорівнює true.
  • +
+ +

Метод next завжди повинен повертати об'єкт з належними властивостями, в тому числі done та value. Якщо повертається значення, що не є об'єктом (наприклад, false чи undefined), буде викинуто помилку {{jsxref("TypeError")}} ("iterator.next() returned a non-object value").

+
+ +
+

Неможливо знати, чи певний об'єкт реалізує протокол ітератора, однак, можна легко створити об'єкт, який відповідає обом протоколам, ітератора та ітерабельного об'єкта (як показано нижче у прикладі). Це дозволяє використовувати ітератор там, де очікується ітерабельний об'єкт. Тому нечасто є потреба реалізовувати протокол ітератора, не реалізуючи також протокол ітерабельного об'єкта. 

+ +
var myIterator = {
+    next: function() {
+        // ...
+    },
+    [Symbol.iterator]: function() { return this }
+};
+
+
+ +

Приклади застосування протоколів перебору

+ +

Об'єкт {{jsxref("String")}} є прикладом вбудованого ітерабельного об'єкта:

+ +
var someString = '13';
+typeof someString[Symbol.iterator];          // "function"
+
+ +

Вбудований ітератор об'єкта String повертає коди символів рядка один за одним:

+ +
var iterator = someString[Symbol.iterator]();
+iterator + '';                               // "[object String Iterator]"
+
+iterator.next();                             // { value: "1", done: false }
+iterator.next();                             // { value: "3", done: false }
+iterator.next();                             // { value: undefined, done: true }
+ +

Деякі вбудовані конструкції, такі як оператор розпакування, використовують під капотом той самий протокол перебору:

+ +
[...someString]                              // ["1", "3"]
+ +

Ми можемо перевизначити поведінку під час перебору, надавши свій власний метод @@iterator:

+ +
var someString = new String('привіт');   // необхідно явно конструювати об'єкт String, щоб запобігти автопакуванню
+
+someString[Symbol.iterator] = function() {
+  return { // це ітератор, що повертає єдиний елемент, рядок "бувай"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: 'бувай', done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+
+ +

Зверніть увагу, як перевизначення методу @@iterator впливає на поведінку вбудованих конструкцій, що використовують протокол перебору:

+ +
[...someString];                             // ["бувай"]
+someString + '';                             // "привіт"
+
+ +

Приклади ітерабельних об'єктів

+ +

Вбудовані ітерабельні об'єкти

+ +

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} та {{jsxref("Set")}} всі є вбудованими ітерабельними об'єктами, тому що кожний з їхніх прототипів реалізує метод @@iterator.

+ +

Створені користувачем ітерабельні об'єкти

+ +

Ми можемо створювати власні ітерабельні об'єкти наступним чином:

+ +
var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable]; // [1, 2, 3]
+
+ +

Вбудовані API, що приймають ітерабельні об'єкти

+ +

Існує багато API, які приймають ітерабельні об'єкти, наприклад: {{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} and {{jsxref("WeakSet", "WeakSet([iterable])")}}:

+ +
var myObj = {};
+new Map([[1, 'а'], [2, 'б'], [3, 'в']]).get(2);               // "б"
+new WeakMap([[{}, 'а'], [myObj, 'б'], [{}, 'в']]).get(myObj); // "б"
+new Set([1, 2, 3]).has(3);                               // true
+new Set('123').has('2');                                 // true
+new WeakSet(function* () {
+    yield {};
+    yield myObj;
+    yield {};
+}()).has(myObj);                                         // true
+
+ +

Дивіться також {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}} та {{jsxref("Array.from", "Array.from()")}}.

+ +

Синтаксис, що очікує на ітерабельний об'єкт

+ +

Деякі оператори та вирази очікують на ітерабельні об'єкти, наприклад, цикли for-of, оператор розпакування, yield* та деструктуризаційне присвоєння:

+ +
for(let value of ['а', 'б', 'в']){
+    console.log(value);
+}
+// "а"
+// "б"
+// "в"
+
+[...'абв']; // ["а", "б", "в"]
+
+function* gen() {
+  yield* ['а', 'б', 'в'];
+}
+
+gen().next(); // { value:"а", done:false }
+
+[a, b, c] = new Set(['а', 'б', 'в']);
+a // "а"
+
+
+ +

Погано сформовані ітерабельні об'єкти

+ +

Якщо метод ітерабельного об'єкта @@iterator не повертає об'єкт ітератора, то це погано сформований ітерабельний об'єкт. Використання його в такому вигляді ймовірно призведе до викидання винятків під час виконання або помилкової поведінки:

+ +
var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () => 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+
+ +

Приклади ітераторів

+ +

Простий ітератор

+ +
function makeIterator(array) {
+    var nextIndex = 0;
+
+    return {
+       next: function() {
+           return nextIndex < array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+
+ +

Нескінченний ітератор

+ +
function idMaker() {
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+
+ +

З генератором

+ +
function* makeSimpleGenerator(array) {
+    var nextIndex = 0;
+
+    while (nextIndex < array.length) {
+        yield array[nextIndex++];
+    }
+}
+
+var gen = makeSimpleGenerator(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+
+
+function* idMaker() {
+    var index = 0;
+    while (true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+// ...
+
+ +

З класом ES2015

+ +
class SimpleClass {
+  constructor(data) {
+    this.index = 0;
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return {
+      next: () => {
+        if (this.index < this.data.length) {
+          return {value: this.data[this.index++], done: false};
+        } else {
+          this.index = 0; //Якщо ми хотіли б перебрати його знову, без примусового ручного оновлення індексу
+          return {done: true};
+        }
+      }
+    }
+  };
+}
+
+const simple = new SimpleClass([1,2,3,4,5]);
+
+for (const val of simple) {
+  console.log(val);  //'0' '1' '2' '3' '4' '5'
+}
+
+ +

Генератор є ітератором чи ітерабельним об'єктом?

+ +

Об'єкт генератор є одночасно ітератором та ітерабельним об'єктом:

+ +
var aGeneratorObject = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+}();
+typeof aGeneratorObject.next;
+// "function", бо він має метод next, отже, він ітератор
+typeof aGeneratorObject[Symbol.iterator];
+// "function", бо він має метод @@iterator, отже, він ітерабельний об'єкт
+aGeneratorObject[Symbol.iterator]() === aGeneratorObject;
+// true, бо його метод @@iterator повертає себе (ітератор),
+// отже, він добре сформований ітерабельний об'єкт
+[...aGeneratorObject];
+// [1, 2, 3]
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}{{Spec2('ES2015')}}Початкова виознака.
{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}{{Spec2('ESDraft')}}
+ +

Див. також

+ + diff --git "a/files/uk/web/javascript/\320\277\320\265\321\200\320\265\320\262\321\226\321\200\320\272\320\260_\320\275\320\260_\321\200\321\226\320\262\320\275\321\226\321\201\321\202\321\214_\321\202\320\260_\320\276\320\264\320\275\320\260\320\272\320\276\320\262\321\226\321\201\321\202\321\214/index.html" "b/files/uk/web/javascript/\320\277\320\265\321\200\320\265\320\262\321\226\321\200\320\272\320\260_\320\275\320\260_\321\200\321\226\320\262\320\275\321\226\321\201\321\202\321\214_\321\202\320\260_\320\276\320\264\320\275\320\260\320\272\320\276\320\262\321\226\321\201\321\202\321\214/index.html" new file mode 100644 index 0000000000..45d16489a1 --- /dev/null +++ "b/files/uk/web/javascript/\320\277\320\265\321\200\320\265\320\262\321\226\321\200\320\272\320\260_\320\275\320\260_\321\200\321\226\320\262\320\275\321\226\321\201\321\202\321\214_\321\202\320\260_\320\276\320\264\320\275\320\260\320\272\320\276\320\262\321\226\321\201\321\202\321\214/index.html" @@ -0,0 +1,494 @@ +--- +title: Перевірка на рівність та однаковість +slug: Web/JavaScript/Перевірка_на_рівність_та_однаковість +tags: + - JavaScript + - NaN + - SameValue + - SameValueZero + - Однаковість + - Рівність + - Тотожність + - порівняння +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +--- +
{{jsSidebar("Intermediate")}}
+ +

У ES2015 існує чотири алгоритми рівності:

+ + + +

JavaScript надає три різні операції порівняння значень:

+ + + +

Вибір оператора залежитиме від того, який різновид порівняння вам потрібен. Коротко:

+ + + +

Зауважте, що усі відмінності операторів стосуються їхнього поводження з простими величинами; жоден з них не порівнює, чи є параметри концептуально однаковими за структурою. Для будь-яких не примітивних об'єктів x та y, що мають однакову структуру, але є двома окремими об'єктами, всі вищенаведені форми порівняння вертатимуть false.

+ +

Строга рівність за допомогою ===

+ +

Строга рівність перевіряє рівність двох значень. До жодного з них не застосовується неявне приведення перед порівнянням. Якщо значення мають різні типи, вони вважаються нерівними. Якщо значення мають однаковий тип, не є числами, і мають однакові значення, вони вважаються рівними. Нарешті, якщо обидва значення є числами, вони вважаються рівними, якщо обидва не дорівнюють NaN та мають однакові значення, або якщо одне дорівнює +0, а інше -0.

+ +
var num = 0;
+var obj = new String('0');
+var str = '0';
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+
+ +

Строга рівність майже завжди є доречною операцією порівняння. Для усіх значень, крім чисел, вона використовує очевидну семантику: значення дорівнює лише самому собі. Для чисел вона використовує трохи відмінну семантику, щоб згладити два граничні випадки. Перший полягає в тому, що нуль з рухомою комою є або додатним, або від'ємним. Це корисно для представлення деяких математичних рішень, але, оскільки у більшості ситуацій різниця між +0 та -0 не має значення, строга рівність вважає їх одним значенням. Другий випадок полягає в тому, що рухома кома містить концепцію не числа, NaN (not a number), для вирішення деяких нечітко визначених математичних проблем: наприклад, від'ємна нескінченність, додана до позитивної нескінченності. Строга рівність вважає значення NaN нерівним будь-якій іншій величині, в тому числі самому собі. (Єдиний випадок, у якому (x !== x) дорівнює true, це коли x дорівнює NaN.)

+ +

Нестрога рівність за допомогою ==

+ +

Нестрога рівність порівнює два значення після приведення обох значень до спільного типу. Після приведення (один чи обидва значення можуть зазнати перетворення), фінальне порівняння виконується так само, як його виконує оператор ===. Нестрога рівність є симетричною: вираз A == B за семантикою завжди ідентичний B == A для будь-яких значень A та B (за винятком порядку, в якому виконуються перетворення).

+ +

Порівняльна операція виконується наступним чином для операндів різних типів:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Операнд B
UndefinedNullNumberStringBooleanObject
Операнд AUndefinedtruetruefalsefalsefalsefalse
Nulltruetruefalsefalsefalsefalse
NumberfalsefalseA === BA === ToNumber(B)A === ToNumber(B)A == ToPrimitive(B)
StringfalsefalseToNumber(A) === BA === BToNumber(A) === ToNumber(B)A == ToPrimitive(B)
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === BToNumber(A) == ToPrimitive(B)
ObjectfalsefalseToPrimitive(A) == BToPrimitive(A) == BToPrimitive(A) == ToNumber(B)A === B
+ +

У наведеній вище таблиці ToNumber(A) пробує перетворити свій аргумент на число перед порівнянням. Його поведінка еквівалентна операції +A (унарний оператор +). ToPrimitive(A) пробує перетворити свій аргумент-об'єкт на просту величину, викликаючи в різній послідовності методи A.toString та A.valueOf на операнді A.

+ +

Традиційно, та згідно з ECMAScript, усі об'єкти нестрого нерівні undefined та null. Але більшість переглядачів дозволяють дуже вузькому класу об'єктів (зокрема, об'єкту document.all на будь-якій сторінці) у певному контексті поводитись, як наче вони емулюють значення undefined. Нестрога рівність у такому контексті: null == A та undefined == A оцінить як true тільки за умови, що A є об'єктом, який емулює undefined. У всіх інших випадках об'єкт ніколи не є нестрого рівним undefined або null.

+ +
var num = 0;
+var obj = new String('0');
+var str = '0';
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// обидва дорівнюють false, крім виняткових випадків
+console.log(obj == null);
+console.log(obj == undefined);
+
+ +

Деякі розробники вважають, що краще ніколи не використовувати нестрогу рівність. Результат порівняння за допомогою строгої рівності легше передбачити, а, оскільки жодного приведення типів не виконується, обчислення може відбуватись швидше.

+ +

Порівняння за алгоритмом same-value

+ +

Порівняння same-value (однакове значення) спрямоване на останній випадок використання: визначення того, чи є два значення функціонально ідентичними в усіх контекстах. (Цей випадок використання демонструє приклад принципу підстановки Лісков.) Один приклад виникає, коли робиться спроба змінити незмінну властивість:

+ +
// Додати незмінну властивість NEGATIVE_ZERO у конструктор Number.
+Object.defineProperty(Number, 'NEGATIVE_ZERO',
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v) {
+  Object.defineProperty(Number, 'NEGATIVE_ZERO', { value: v });
+}
+
+ +

Object.defineProperty викине виняток, коли спроба змінити незмінну властивість дійсно змінить її, але нічого не зробить, якщо не робиться запитів на реальну зміну. Якщо v дорівнює -0, запитів на зміну не виконувалось, жодна помилка не буде викинута. Внутрішньо, коли перевизначається незмінна властивість, нове значення порівнюється з наявним значенням за допомогою алгоритму same-value.

+ +

Алгоритм same-value надається методом {{jsxref("Object.is")}}.

+ +

Порівняння за алгоритмом same-value-zero

+ +

Схожий на алгоритм same-value, але вважає +0 та -0 рівними.

+ +

Абстрактна рівність, строга рівність та однакове значення у специфікації

+ +

У ES5 порівняння, що виконується за допомогою ==, описане у Розділі 11.9.3, Алгоритм абстрактної рівності. Порівняння === у 11.9.6, Алгоритм строгої рівності. (Сходіть почитайте. Вони короткі та легкі для читання. Підказка: читайте спочатку алгоритм строгої рівності.) ES5 також описує, у Розділі 9.12, Алгоритм SameValue, для внутрішнього використання рушієм JS. Він значною мірою такий самий, як алгоритм строгої рівності, за винятком того, як 11.9.6.4 та 9.12.4 відрізняються у поводженні з {{jsxref("Number","числами")}}. ES2015 просто відкриває цей алгоритм через {{jsxref("Object.is")}}.

+ +

Щодо подвійного та потрійного дорівнює, можна побачити, що, за винятком попередньої перевірки типу у 11.9.6.1, алгоритм строгої рівності є підмножиною алгоритму абстрактної рівності, бо 11.9.6.2–7 відповідають 11.9.3.1.a–f.

+ +

Модель для розуміння порівняльних алгоритмів?

+ +

До ES2015 ви, можливо, сказали б щодо подвійного та потрійного дорівнює, що один є "посиленою" версією іншого. Наприклад, хтось може сказати, що подвійне дорівнює є посиленою версією потрійного дорвінює, тому що перше робить усе, що робить друге, але з приведенням типів у операндах. Наприклад, 6 == "6". (Альтернативно, хтось може сказати, що подвійне дорівнює є основою, а потрійне дорівнює є посиленою версією, тому що воно вимагає, щоб два операнди були однакового типу, і таким чином, вводить додаткове обмеження. Яка модель краща для розуміння, залежить від того, яким чином ви розглядаєте питання.)

+ +

Однак, така модель вбудованих операторів однаковості не може бути поширена на ES2015 з включенням у свій "діапазон" методу {{jsxref("Object.is")}}. Метод {{jsxref("Object.is")}} не просто "абстрактніший", ніж подвійне, або "суворіший", ніж потрійне дорівнює, він також не вписується десь посередині (тобто, будучи одночасно суворішим за подвійне дорівнює, але менш строгим за потрійне дорівнює). Як можна побачити з наведеної нижче порівняльної таблиці, все через поводження {{jsxref("Object.is")}} з {{jsxref("NaN")}}. Зверніть увагу, що, якби значення Object.is(NaN, NaN) дорівнювало false, ми могли б сказати, що метод вписується у абстрактно-суворий діапазон як ще суворіший за потрійне дорівнює, такий, що розрізняє -0 та +0. Однак, його поводження з {{jsxref("NaN")}} означає, що це не так. На жаль, {{jsxref("Object.is")}} просто має сприйматись з точки зору його особливих характеристик, а не його абстрактності чи суворості у порівнянні з операторами рівності.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Порівняльні алгоритми
xy=====Object.isSameValueZero
undefinedundefinedtruetruetruetrue
nullnulltruetruetruetrue
truetruetruetruetruetrue
falsefalsetruetruetruetrue
'foo''foo'truetruetruetrue
00truetruetruetrue
+0-0truetruefalsetrue
+00truetruetruetrue
-00truetruefalsetrue
0falsetruefalsefalsefalse
""falsetruefalsefalsefalse
""0truefalsefalsefalse
'0'0truefalsefalsefalse
'17'17truefalsefalsefalse
[1, 2]'1,2'truefalsefalsefalse
new String('foo')'foo'truefalsefalsefalse
nullundefinedtruefalsefalsefalse
nullfalsefalsefalsefalsefalse
undefinedfalsefalsefalsefalsefalse
{ foo: 'bar' }{ foo: 'bar' }falsefalsefalsefalse
new String('foo')new String('foo')falsefalsefalsefalse
0nullfalsefalsefalsefalse
0NaNfalsefalsefalsefalse
'foo'NaNfalsefalsefalsefalse
NaNNaNfalsefalsetruetrue
+ +

Коли використовувати {{jsxref("Object.is")}} та потрійне дорівнює

+ +

Загалом, єдиний випадок, коли особлива поведінка {{jsxref("Object.is")}} щодо нулів може становити інтерес, це впровадження певних схем метапрограмування, особливо тих, що стосуються дескрипторів властивостей, коли бажано, щоб ваша робота відображала певні характеристики {{jsxref("Object.defineProperty")}}. Якщо ваш випадок цього не вимагає, пропонується уникати {{jsxref("Object.is")}} та використовувати натомість ===. Навіть якщо у вашому випадку вимагається, щоб порівняння двох {{jsxref("NaN")}} повертало true, загалом, легше перевіряти {{jsxref("NaN")}} окремо (за допомогою методу {{jsxref("isNaN")}}, доступного у попередніх версіях ECMAScript), ніж розбиратися, як навколишні обчислення можуть вплинути на знаки нулів, які зустрінуться вам у порівняннях.

+ +

Ось невичерпний список вбудованих методів та операцій, що можуть спричинити відмінності між -0 та +0, які можуть проявити себе у коді:

+ +
+
- (унарний мінус)
+
+ +
+
+
let stoppingForce = obj.mass * -obj.velocity;
+ +

Якщо obj.velocity дорівнює 0 (або обчислюється як 0), в цьому місці отримуємо -0, який переходить далі у stoppingForce.

+
+
+ +
+
{{jsxref("Math.atan2")}}
+
{{jsxref("Math.ceil")}}
+
{{jsxref("Math.pow")}}
+
{{jsxref("Math.заокругелння","Math.round")}}
+
+ +
+
У деяких випадках -0 може потрапити у вираз як результат одного з цих методів, навіть коли жоден параметр не дорівнює -0. Наприклад, при використанні {{jsxref("Math.pow")}} для піднесення {{jsxref("Infinity", "-Infinity")}} до будь-якого від'ємного непарного степеня, отримуємо -0. Звертайтесь до документації щодо окремих методів.
+
+ +
+
{{jsxref("Math.floor")}}
+
{{jsxref("Math.max")}}
+
{{jsxref("Math.min")}}
+
{{jsxref("Math.sin")}}
+
{{jsxref("Math.sqrt")}}
+
{{jsxref("Math.tan")}}
+
+ +
+
Можливо отримати -0 як результат виконання даних методів у певних випадках, коли -0 присутній як один з параметрів. Наприклад, Math.min(-0, +0) повертає -0. Звертайтесь до документації щодо окремих методів.
+
+ +
+
~
+
<<
+
>>
+
Кожний з цих операторів внутрішньо використовує алгоритм ToInt32. Оскільки існує лише одне представлення 0 у внутрішньому 32-бітному цілочисельному типі, -0 не збережеться після подвійної операції інверсії. Наприклад, і Object.is(~~(-0), -0), і Object.is(-0 << 2 >> 2, -0) повернуть false.
+
+ +

Покладатися на метод {{jsxref("Object.is")}}, не беручи до уваги знаки нулів, може бути небезпечно. Звісно, якщо на меті стоїть розрізнити -0 та +0, він робить саме те, що потрібно.

+ +

Попередження: {{jsxref("Object.is")}} та NaN

+ +

Специфікація {{jsxref("Object.is")}} вважає усі екземпляри {{jsxref("NaN")}} тим самим об'єктом, але, оскільки нам доступні типізовані масиви, ми можемо мати окремі екземпляри, які не поводитимуться ідентично в усіх контекстах. Приклад:

+ +
var f2b = x => new Uint8Array(new Float64Array([x]).buffer);
+var b2f = x => new Float64Array(x.buffer)[0];
+var n = f2b(NaN);
+n[0] = 1;
+var nan2 = b2f(n);
+nan2
+> NaN
+Object.is(nan2, NaN)
+> true
+f2b(NaN)
+> Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127)
+f2b(nan2)
+> Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127)
+ +

Див. також

+ + -- cgit v1.2.3-54-g00ecf