path: root/files/zh-cn/learn/javascript/howto/index.html

---
title: 在JavaSctript中解决问题
slug: learn/JavaScript/Howto
tags:
  - JavaScript
  - 初学者
  - 学习
translation_of: Learn/JavaScript/Howto
---
<div>{{LearnSidebar}}</div>

<p class="summary">以下链接指向您需要修复的日常常见问题的解决方案，以使您的JavaScript代码正确运行。</p>

<h2 id="初学者常见的错误">初学者常见的错误</h2>

<h3 id="正确的拼写和使用">正确的拼写和使用</h3>

<p>如果你的代码不工作或浏览器抱怨某些东西是未定义的，请检查你是否正确拼写了所有的变量名称，函数名称等。 <br>
  <br>
 导致问题的一些常见的内置浏览器函数有：</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">正确</th>
   <th scope="col">错误</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>getElementsByTagName()</code></td>
   <td><code>getElementbyTagName()</code></td>
  </tr>
  <tr>
   <td><code>getElementsByName()</code></td>
   <td><code>getElementByName()</code></td>
  </tr>
  <tr>
   <td><code>getElementsByClassName()</code></td>
   <td><code>getElementByClassName()</code></td>
  </tr>
  <tr>
   <td><code>getElementById()</code></td>
   <td><code>getElementsById()</code></td>
  </tr>
 </tbody>
</table>

<h3 id="分号位置">分号位置</h3>

<p>必须确保没有错误的放置分号，例如：</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">正确</th>
   <th scope="col">错误</th>
  </tr>
  <tr>
   <td><code>elem.style.color = 'red';</code></td>
   <td><code>elem.style.color = 'red;'</code></td>
  </tr>
 </thead>
</table>

<h3 id="函数">函数</h3>

<p>函数有很多容易出错的地方。</p>

<p>最常见的错误之一是函数被声明了却没有被调用。例如：</p>

<pre class="brush: js">function myFunction() {
  alert('This is my function.');
};</pre>

<p>这个函数不会执行，除非你调用它，例如：</p>

<pre class="brush: js">myFunction();</pre>

<h4 id="函数作用域">函数作用域</h4>

<p>记住<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">函数拥有自己的作用域</a>——你不能从函数外部访问一个函数内的变量值，除非你在全局声明了该变量（即不在任何函数内），或者从函数外部获得它的<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">返回值</a>。</p>

<h4 id="在return语句之后运行代码">在return语句之后运行代码</h4>

<p>还要记住，当你向一个函数外部返回一个值时，JavaScript解释器会退出这个函数——在return语句运行之后，没有声明任何代码。</p>

<p>事实上，如果您在返回语句之后有代码，某些浏览器（如Firefox）会在开发人员控制台中给您一条错误消息。 Firefox在返回语句后给你提示“无法访问的代码”。</p>

<h3 id="对象标记法与正常赋值">对象标记法与正常赋值</h3>

<p>当你在JavaScript中正常赋值时，使用等号：</p>

<pre class="brush: js">var myNumber = 0;</pre>

<p>但是在<a href="/en-US/docs/Learn/JavaScript/Objects">对象</a>中，你需要使用冒号来分隔成员名称和值，并用逗号分隔每个成员，例如：</p>

<pre class="brush: js">var myObject = {
  name : 'Chris',
  age : 38
}</pre>

<h2 id="基本定义">基本定义</h2>

<div class="column-container">
<div class="column-half">
<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">JavaScript是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">变量是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">字符串是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">数组是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">循环是什么?</a></li>
</ul>
</div>

<div class="column-half">
<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">函数是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">事件是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">对象是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">JSON是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">web API是什么?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">DOM是什么?</a></li>
</ul>
</div>
</div>

<h2 id="基本用例">基本用例</h2>

<div class="column-container">
<div class="column-half">
<h3 id="常见">常见</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">怎么在页面中添加JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">怎么在JavaScript中添加注释?</a></li>
</ul>

<h3 id="变量">变量</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">如何声明一个变量?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">如何初始化一个变量的值?</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">如何更新变量的值?</a> (参见 <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">赋值操作符</a>)</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Variable_types">JavaScript中有哪些数据类型?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">'弱类型'是什么意思?</a></li>
</ul>

<h3 id="数字">数字</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">What types of number do you have to deal with in web development?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">How do you do basic math in JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">What is operator precedence, and how is it handled in JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">How do you increment and decrement values in JavaScript?</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">How do you compare values in JavaScript?</a> (e.g. to see which one is bigger, or to see if one value is equal to another).</li>
</ul>

<h3 id="字符串">字符串</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">How do you create a string in JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">Do you have to use single quotes or double quotes?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">How do you escape characters in strings?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">How do you join strings together?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">Can you join strings and numbers together?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">How do you find the length of a string?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">How you find what character is at a certain position in a string?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">How do you find and extract a specific substring from a string?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">How do you change the case of a string?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">How do you replace one specific substring with another?</a></li>
</ul>
</div>

<div class="column-half">
<h3 id="数组">数组</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">怎么创建数组?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">如何访问和修改数组中的元素?</a> (包括多维数组)</li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">怎么获取数组的长度?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">怎么添加和移除数组中的元素?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">如何将一个字符串拆分为数组,或将数组拼接成一个字符串?</a></li>
</ul>

<h3 id="JavaScript_调试">JavaScript 调试</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">什么是错误的基本类型?</a></li>
 <li><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">什么是浏览器开发工具,如何使用它?</a></li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">怎么在JavaScript控制台打印值?</a></li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">怎么使用断点和其他JavaScript调试工具?</a></li>
</ul>

<p>For more information on JavaScript debugging, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a>; also see <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">Other common errors</a> for a description of common errors.</p>

<h3 id="Making_decisions_in_code">Making decisions in code</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">How do you execute different blocks of code, depending on a variable's value or other condition?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">How do you use if ...else statements?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">How do nest one decision block inside another?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">How do you use AND, OR, and NOT operators in JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">How do you conveniently handle a large number of choices for one condition?</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">How do you use a ternary operator to make a quick choice between two options based on a true or false test?</a></li>
</ul>

<h3 id="循环迭代">循环/迭代</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">How do you run the same bit of code over and over again?</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">How do you exit a loop before the end if a certain condition is met?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">How do you skip to the next iteration of a loop if a certain condition is met?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">How do you use while and do ... while loops?</a></li>
 <li>How to iterate over the elements in an array</li>
 <li>How to iterate over the elements in a multidimensional array</li>
 <li>How to iterate over the members in an object</li>
 <li>How to iterate over the members of an object nested inside an array</li>
</ul>
</div>
</div>

<h2 id="中级用例">中级用例</h2>

<div class="column-container">
<div class="column-half">
<h3 id="函数_2">函数</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">How do you find functions in the browser?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">What is the difference between a function and a method?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">How do you create your own functions?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">How do you run (call, or invoke) a function?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">What is an anonymous function?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">How do you specify parameters (or arguments) when invoking a function?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">What is function scope?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">What are return values, and how do you use them?</a></li>
</ul>

<h3 id="对象">对象</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">How do you create an object?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Dot_notation">What is dot notation?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">What is bracket notation?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">How do you get and set the methods and properties of an object?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#What_is_this">What is <code>this</code>, in the context of an object?</a></li>
 <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">What is object-oriented programming?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">What are constructors and instances, and how do you create them?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">What different ways are there to create objects in JavaScript?</a></li>
</ul>

<h3 id="JSON">JSON</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#JSON_structure">How do you structure JSON data, and read it from JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">How can you load a JSON file into a page?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">How do you convert a JSON object to a text string, and back again?</a></li>
</ul>
</div>

<div class="column-half">
<h3 id="事件">事件</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">What are event handlers and how do you use them?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">What are inline event handlers?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()">What does the <code>addEventListener()</code> function do, and how do you use it?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">Which mechanism should I use to add event code to my web pages?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">What are event objects, and how do you use them?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">How do you prevent default event behaviour?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">What is event delegation, and how does it work?</a></li>
</ul>

<h3 id="面向对象的JavaScript">面向对象的JavaScript</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">What are object prototypes?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">What is the constructor property, and how can you use it?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">How do you add methods to the constructor?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">How do you create a new constructor that inherits its members from a parent constructor?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">When should you use inheritance in JavaScript?</a></li>
</ul>

<h3 id="Web_APIs">Web APIs</h3>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?</a></li>
</ul>

<p> </p>
</div>
</div>