<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Chencheng Li - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ freeCodeCamp 是一个免费学习编程的开发者社区，涵盖 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，还有活跃的技术论坛和丰富的社区活动，在你学习编程和找工作时为你提供建议和帮助。 ]]>
        </description>
        <link>https://www.freecodecamp.org/chinese/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Chencheng Li - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/chinese/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sat, 23 May 2026 08:28:39 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/chinese/news/author/chencheng/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ JavaScript 字符串比较 ]]>
                </title>
                <description>
                    <![CDATA[ 原文：JavaScript String Comparison – How to Compare Strings in JS [https://www.freecodecamp.org/news/javascript-string-comparison-how-to-compare-strings-in-js/] ，作者：Dillion Megida [https://www.freecodecamp.org/news/author/dillionmegida/] 你可能想通过比较两个字符串从而知道在字母排列顺序上谁高谁低，或者仅仅想知道它们是否相等。 你可以用很多方式来解决这个问题，我将在本文中向你展示两种方法。 1. 如何使用 localeCompare 来比较字符串 你可以使用 localeCompare  的方法来比较当前环境（locale）下的两个字符串，以下是它们的语法： string1.localeCompare(string2) localeCompare  返回：  * 1 如果 string1（在字母排列顺序上）比 string2  大  * -1 如 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/javascript-string-comparison-how-to-compare-strings-in-js/</link>
                <guid isPermaLink="false">62d54fe48d13aa0845c6295d</guid>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Chencheng Li ]]>
                </dc:creator>
                <pubDate>Mon, 18 Jul 2022 02:19:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/07/string-comparison-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/javascript-string-comparison-how-to-compare-strings-in-js/" rel="nofollow">JavaScript String Comparison – How to Compare Strings in JS</a>，作者：<a href="https://www.freecodecamp.org/news/author/dillionmegida/" rel="nofollow">Dillion Megida</a></p><!--kg-card-begin: markdown--><p>你可能想通过比较两个字符串从而知道在字母排列顺序上谁高谁低，或者仅仅想知道它们是否相等。</p>
<p>你可以用很多方式来解决这个问题，我将在本文中向你展示两种方法。</p>
<h2 id="1localecompare">1. 如何使用 localeCompare 来比较字符串</h2>
<p>你可以使用 <code>localeCompare</code> 的方法来比较当前环境（locale）下的两个字符串，以下是它们的语法：</p>
<pre><code class="language-js">string1.localeCompare(string2)
</code></pre>
<p><code>localeCompare</code> 返回：</p>
<ul>
<li>1 如果 <code>string1</code>（在字母排列顺序上）比 <code>string2</code> 大</li>
<li>-1 如果 <code>string1</code>（在字母排列顺序上）比 <code>string2</code> 小</li>
<li>0 如果 <code>string1</code> 和 <code>string2</code> 在字母顺序上相等</li>
</ul>
<p>下面是一些比较两个字符串的例子：</p>
<pre><code class="language-js">const string1 = "hello"
const string2 = "world"

const compareValue = string1.localeCompare(string2)
// -1
</code></pre>
<p>它返回了 <code>-1</code> 是因为在英语环境中，hello 中的 <strong>h</strong> 排在 world 中的 <strong>w</strong> 之前（ w 在字母顺序中比 h 更靠后）。</p>
<p>另一个例子：</p>
<pre><code class="language-js">const string1 = "banana"
const string2 = "back"

const compareValue = string1.localeCompare(string2)
// 1
</code></pre>
<p>上面的比较给出了 <code>1</code>，因为在英语环境中，banana的 ba<strong>n</strong> 在 back 的 ba<strong>c</strong> 之后。</p>
<p>再来一个例子：</p>
<pre><code class="language-js">const string1 = "fcc"
const string2 = "fcc"
const string3 = "Fcc"

const compareValue1 = string1.localeCompare(string2)
// 0

const compareValue2 = string1.localeCompare(string3)
// -1
</code></pre>
<p>比较 "fcc" 和 "fcc" 可以得到 <code>0</code>，因为它们在顺序上是相等的。"fcc" 和 "Fcc" 的结果是 <code>-1</code>，因为大写 "F" 大于小写 "f"。</p>
<p>在某些浏览器中，它可能会返回 <strong>-2/</strong> 或其他一些负值，而不是 <strong>-1/</strong>。因此，不要依赖 <strong>-1</strong> 或 <strong>1</strong>，而是依赖负值（小于 0）或正值（大于 0）。</p>
<h2 id="2">2. 如何使用数学运算符来比较字符串</h2>
<p>在比较字符串时，你也可以使用数学运算符如大于（<strong>&gt;</strong>）、小于（<strong>&lt;</strong>）以及等于。</p>
<p>数学运算符的工作原理与 <code>localeCompare</code> 类似——根据字符串中字符的顺序返回结果。</p>
<p>使用之前的例子：</p>
<pre><code class="language-js">const string1 = "hello"
const string2 = "world"

console.log(string1 &gt; string2)
// false
</code></pre>
<p><code>string1</code> 不大于 <code>string2</code>，因为 <strong>h</strong> 在 <strong>w</strong> 之前，所以是小于。</p>
<p>对于另一个例子而言：</p>
<pre><code class="language-js">const string1 = "banana"
const string2 = "back"

console.log(string1 &gt; string2)
// true
</code></pre>
<p><code>string1</code> 比 <code>string2</code> 大，因为 ba<strong>n</strong> 在 ba<strong>c</strong>k 之后。</p>
<p>而对于最后一个例子：</p>
<pre><code class="language-js">const string1 = "fcc"
const string2 = "fcc"
const string3 = "Fcc"

console.log(string1 === string2)
// true

console.log(string1 &lt; string3)
// false
</code></pre>
<p><code>string1</code> 等于（<code>===</code>）<code>string2</code>，但是 <code>string1</code> 不小于 <code>string3</code> ，这与<code>localeCompare</code>相反。</p>
<p>用数学运算符，"fcc" 大于 "Fcc"，但是用 <code>localeCompare</code>，<code>"fcc".localeCompare("Fcc")"</code> 返回 <code>-1</code>，表明 "fcc" 小于 "Fcc"。</p>
<p>这种处理是我不建议使用数学运算符来比较字符串的原因之一，尽管它有做到这一点的潜力。</p>
<p>我不推荐使用数学运算符的另一个原因是，<code>"fcc" &gt; "fcc"</code> 和 <code>"fcc" &lt; "fcc"</code> 是 <code>false</code>，但 "fcc" 等于 "fcc"。所以如果你依赖于数学运算符，得到 <code>false</code> 的原因可能与你相信的不同。</p>
<p>所以，对于比较字符串，在可能存在的许多方法中，使用 <code>localCompare</code> 是一个有效的方法，因为它可以用于不同的语言。</p>
<p>现在你知道了一个简单的比较字符串的方法。编码愉快：）</p>
<!--kg-card-end: markdown--> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 如何在学习编程时保持动力 ]]>
                </title>
                <description>
                    <![CDATA[ 原文：How to Stay Motivated While Learning to Code [https://www.freecodecamp.org/news/how-to-stay-motivated-while-learning-to-code/] ，作者：D.M. Oladele [https://www.freecodecamp.org/news/author/d/] 学习编程可能就像准备一场持久的战役，最终的胜利并不总是取决于你最初的能力，而是你准备得有多好以及你能坚持多长时间。 当学习编程的时候，最大的挑战往往不是语言的复杂度，而是保持步调并且在学习过程中获得动力。 为了在你的学习过程中保持步调，你将需要许多动力与精力，通过持续不断地学习将帮助你理解编程语言中复杂的概念，学编程可不能一口吃成个胖子。 因为我没有接触过任何技术性的东西，所以我开始学习编程较晚。在我尝试迈出转型第一步后，每一步的学习都十分地挣扎，我越来越怀疑自己的动机。 这篇文章我将分享我如何随着时间的累积逐渐克服困难，从而坚持下来并且自我激励。 放平心态，养成习惯 在早期学习阶段，你可能 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/how-to-stay-motivated-while-learning-to-code/</link>
                <guid isPermaLink="false">62c40e4d8ada24082688b4d1</guid>
                
                    <category>
                        <![CDATA[ 自我提升 ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Chencheng Li ]]>
                </dc:creator>
                <pubDate>Tue, 05 Jul 2022 10:10:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/07/cover-i-age-1.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/how-to-stay-motivated-while-learning-to-code/">How to Stay Motivated While Learning to Code</a>，作者：<a href="https://www.freecodecamp.org/news/author/d/">D.M. Oladele</a></p><!--kg-card-begin: markdown--><p>学习编程可能就像准备一场持久的战役，最终的胜利并不总是取决于你最初的能力，而是你准备得有多好以及你能坚持多长时间。</p>
<p>当学习编程的时候，最大的挑战往往不是语言的复杂度，而是保持步调并且在学习过程中获得动力。</p>
<p>为了在你的学习过程中保持步调，你将需要许多动力与精力，通过持续不断地学习将帮助你理解编程语言中复杂的概念，学编程可不能一口吃成个胖子。</p>
<p>因为我没有接触过任何技术性的东西，所以我开始学习编程较晚。在我尝试迈出转型第一步后，每一步的学习都十分地挣扎，我越来越怀疑自己的动机。</p>
<p>这篇文章我将分享我如何随着时间的累积逐渐克服困难，从而坚持下来并且自我激励。</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/06/Testudo_formation-1.jpg" alt="Testudo_formation-1" width="600" height="400" loading="lazy"></p>
<h2 id="">放平心态，养成习惯</h2>
<p>在早期学习阶段，你可能没有太多的时间用来学习。</p>
<p>这是因为你刚开始尝试做一些你从没有做过的事情，并且你可能有全职工作会占据你每日生活中大部分的时间，因此仅仅是挤出时间来学习就实属不易了。</p>
<p>在这个阶段，你并不需要担心你一口气能学多少，最重要的事情是抽出时间每天学，无论学了多少、无论发生什么情况，都要坚持下去！</p>
<h2 id="">始终为你的学习做好规划</h2>
<p>如果你不管理好你的每日任务，你就十分容易拖延并且遗忘它们。你很容易专注于一两件任务上并且全然忘记你还有其他的任务要做，这种情况在你没有设置任务清单时会经常发生。</p>
<p>为了防止拖延及健忘，确保你通过制定任务来管理你的时间，你可以通过以下建议来制定你的任务：</p>
<ol>
<li>想想你总共有多少任务需要完成</li>
<li>预估完成每项任务需要多少时间</li>
<li>确定你一天什么时候最有生产力</li>
<li>按优先级来安排好你所有的任务</li>
<li>确保将相似的任务安排在一起从而提高效率</li>
<li>在你的手机或电脑上排好任务以便管理</li>
<li>将复杂及困难的任务安排在你脑子最好使的时候</li>
<li>为意想不到的状况预留时间以防遭遇到它</li>
</ol>
<p>值得一提的是最好是在每周开始的时候安排好一周的计划。</p>
<p>想了解更多关于如何安排你的时间以提高生产力，你可以考虑阅读<a href="https://www.calendar.com/blog/how-to-schedule-your-day-for-optimal-productivity/">这篇由 Calendar 的联合创始人及 CEO——John Rampton 所撰写的文章</a></p>
<h2 id="">参加一个学习者社区</h2>
<p>对于绝大多数人而言，独自学习可能是孤独且乏味的，而且很快就会伤害你的学习积极性，拥有志同道合的朋友一块儿准没错。</p>
<p>这种类型的社区将带给你无数的好处，包括但不限于：</p>
<ul>
<li>获得组团学习的机会</li>
<li>得到不同的资源来帮助你学习成长</li>
<li>获取当下的技术趋势讯息</li>
<li>给你的个人项目带来反馈</li>
<li>扩展一个能分享你的进展、衡量你的成长的渠道</li>
</ul>
<p>寻找你所在的地区是否存在这类型的社区。如果你找不到，你也可以加入一个远程学习社区来代替。</p>
<p>下面是一些我发现的远程社区，我觉得他们非常有价值：</p>
<ul>
<li><strong>100Devs：</strong> 这个社区是一个非营利性组织，由 Leon Noel 维护——他是一名老师、以及 ResilientCoders 的技术主管。100Devs 社区向个人提供免费的全栈网络开发课程，你可以<a href="https://t.co/N1svwNfVRd">加入</a>他们。</li>
<li><strong>100DaysofCode：</strong> 这是一个 100 天学习编程语言的挑战。为了参加 100DaysofCode，你必须每天投入至少一小时的时间来学习，并且还需要在 Twitter 上发布你所完成的任务并且带上标签 #100DaysofCode。</li>
<li><strong>Kevin Powell Community：</strong> Kevin Powell 主动学习者社区是一个 Discord 频道由 Kevin Powell 创建并维护。Kevin 是一个拥有多年经验的教师以及软件开发人员，你可以从这儿<a href="https://discord.gg/9NmT5HxN">加入</a>。</li>
<li><strong>Commit Your Code：</strong> 这个社区由 Danny Thompson 创建，这个社区有很多主动学习者以及经验丰富的开发者，他们十分愿意帮助及指导你的项目。你可以从这儿<a href="https://discord.gg/3JvHFCCp">加入</a>该社区。</li>
</ul>
<p>当然了 freeCodeCamp 社区也拥有一个充满支持与善意的<a href="https://forum.freecodecamp.org/">论坛</a>，你可以在这儿问问题并且遇到其他的开发者。</p>
<p>在加入其中的一个或多个社区后，重要的是拿出你最好的态度，也别忘记保持自我，提供价值、遵守规则。</p>
<h2 id="">寻找一个学习伙伴</h2>
<p>如果你即便是管理好你的任务并且加入一个学习社区后，还是很难坚持下来并保持动力，在这种情况下，你可能需要一名学习伙伴。</p>
<p>拥有学习伙伴可以从以下几个方面受益：</p>
<ul>
<li>能让你建立起责任感</li>
<li>可以设置共同学习的时段</li>
<li>可以在合作项目上协作</li>
<li>可能会互相得到指导</li>
<li>一起通过编程挑战</li>
</ul>
<h2 id="">使用更高效的学习技巧</h2>
<p>编程语言通常来说都比较复杂。除非你有一个高效的学习技能，否则你会很难理解其中的概念并且很难运用在实际的情况中，这会使你沮丧并且打击你学习的动力。</p>
<p>如果你在学习一些新的概念或者新的编程语言，这里有一些学习技巧可能你已经尝试过：</p>
<ul>
<li>反复阅读</li>
<li>突出重点</li>
<li>总结或做笔记</li>
<li>填鸭式学习</li>
</ul>
<p>但是很多著名的科学家及心理学家通过大量的证据证明——对比以下的学习技巧，以上的学习技巧效果较差。</p>
<p>为了最好的利用你的时间并确保你能更长时间地记住你所学的内容，请尝试以下的学习技巧：</p>
<h3 id="">主动回忆</h3>
<p>主动回忆是一种学习技巧，指的是从你的大脑中检索已经储存的信息。</p>
<blockquote>
<p>大脑是一个巨大的仓库或空间，记忆是储存在这个空间中的物体，检索记忆就像是在物理空间中搜寻和发现一个物体一样（Roediger，1980）。</p>
</blockquote>
<p>使用这种技巧意味着曾经阅读过一个主题，然后将该主题中的概念和想法转换为问题，然后用问题来向自己提问。</p>
<h3 id="">间隔重复</h3>
<p>这个学习技巧，顾名思义，需要通过主动回忆的方式，对你所学的知识进行间断性的复习。这与填鸭式的学习不同，填鸭式学习是指一次性记住这个主题的所有概念。</p>
<p>从本质上讲，间隔重复可以帮助你将遗忘曲线的影响最小化。这是一种允许自我忘记所学的学习方式，然后通过明确的时间、主动的回忆、从而从你的大脑中找回这些概念。</p>
<blockquote>
<p>遗忘曲线假定了记忆的保持将会随着时间逐渐下降。这个曲线展现了当没有试图记忆信息时，信息是如何随着时间不断流逝而丢失。（<a href="https://en.wikipedia.org/wiki/Forgetting_curve">Source</a>）</p>
</blockquote>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/06/The-Forgetting-Curve-and-Spaced-Repetition.jpg" alt="The-Forgetting-Curve-and-Spaced-Repetition" width="600" height="400" loading="lazy"></p>
<p>使用上述学习技巧将帮助你确保你不会花费太多时间理解并记忆任何的主题或者概念。</p>
<p>并且，你将有更多的时间用于完成你清单上的其他任务，有机会学习对你的专业发展更有帮助的新技能。</p>
<p>你可以使用一个流行的工具——— Anki，来帮助你主动会议及间隔重复。学习如何<a href="https://leananki.com/how-to-use-anki-tutorial/#:~:text=You%20just%20open%20the%20app,spacebar%20to%20show%20the%20answer.&amp;text=Using%20Anki%20default%20settings%2C%20Anki,you%20to%20recall%20the%20card.">使用</a> Anki。</p>
<p>要了解更多关于这些高效学习技巧的使用，可以观看这个<a href="https://youtu.be/ukLnPbIffxE">视频</a>。</p>
<h3 id="pomodorotimer">番茄钟（Pomodoro Timer）</h3>
<p>Pomodoro 学习技巧是那些挣扎于无法长时间集中注意力来学习的人的理想技巧。</p>
<p>使用这种技巧的一种方法是将你的工作时间分为 30 或者 20 分钟的小块，中间有 5 分钟的休息时间，这些间隔被称为 Pomodoros。</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/06/pomodoro.jpg" alt="pomodoro" width="600" height="400" loading="lazy"></p>
<p>设置短期目标并保持专注于一次实现一个目标。</p>
<blockquote>
<p>成功不会在一夜之间发生。</p>
</blockquote>
<p>尝试在同一时间实现太多的目标会让人不知所措。所以最好是分解你的目标成为几个小目标，然后集中精力一次实现一个小目标。</p>
<p>例如，作为一个初学者，假定你的目标是能用任何流行的 JavaScript 框架建立一个网页。要做到这一点，你需要学习各种脚本、编程语言、工具和技能。下面是你实现目标所需要知道的：</p>
<ol>
<li>理解 <a href="https://www.freecodecamp.org/news/learn-html-beginners-course/">HTML 的基础知识</a>。</li>
<li>理解 <a href="https://www.freecodecamp.org/news/learn-css-in-this-free-6-hour-video-course/">CSS 的基础知识</a>。</li>
<li>理解 <a href="https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/">HTML 中语义元素</a>的使用。</li>
<li>理解 <a href="https://www.freecodecamp.org/news/css-flexbox-and-grid-tutorial/">CSS Flexbox 和网格布局</a>的使用情况。</li>
<li>尝试用你目前所学来建立一个简单的静态网站。</li>
<li>开始学习 <a href="https://chinese.freecodecamp.org/learn/javascript-algorithms-and-data-structures">JavaScript 的基础知识</a>。</li>
<li>用你到目前为止学到的 HTML、CSS 和 JavaScript 的基础知识<a href="https://www.freecodecamp.org/news/javascript-projects-for-beginners/">专注于建立项目</a>。</li>
<li>开始学习高级的 JavaScript 概念，如<a href="https://www.freecodecamp.org/news/how-javascript-implements-oop/">面向对象的编程</a>和<a href="https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/">异步编程</a>。</li>
<li>通过建立项目来巩固你对高级概念的知识。</li>
<li>学习你选择的JavaScript框架。<a href="https://www.freecodecamp.org/news/learn-react-basics/">React</a>、<a href="https://www.freecodecamp.org/news/vue-js-full-course/">Vue</a> 和 <a href="https://www.freecodecamp.org/news/learn-angular-full-course/">Angular</a> 都是流行的选择。</li>
<li>最后，你可以使用你所学的框架建立你喜欢的项目。</li>
</ol>
<p>你可能会认为，按照所述顺序完成上述步骤需要几个月的时间。也可能会花费更长时间，没事儿。</p>
<p>另外，不要试图跳过任何步骤，仅仅参加一个速成的网页设计课程可能是不够的，而且会让你感到失望，并导致你如果想要花时间彻底学习这些概念的时候，会更加挣扎。</p>
<p>另一方面，确保你仔细地通过每一个步骤，一次一个，将帮助你建立必要的技能来实现你的主要目标。这也会防止你失去动力，失去动力是不切实际的期望的结果。</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/06/a-step-at-a-time.png" alt="a-step-at-a-time" width="600" height="400" loading="lazy"></p>
<h2 id="">不要害怕寻求帮助</h2>
<p>人们在学习编程时过早放弃的原因之一是他们在程序中碰到了某种似乎难以解决的 Bug。</p>
<p>但是你应该知道在编程上，没有人知道所有的事情，即便是拥有几十年经验的软件开发人员仍然会遇到他们认为很难解决的 Bug。</p>
<p>这就是为什么合作是如此的重要的主要原因之一——甚至比发展你的个人技能更重要。</p>
<p>每当你发现自己处于这种状况时，不要在问题上徘徊太长时间。在寻找答案时要利用互联网的优势。在这一方面，你最好的朋友是 Google。如果你花时间并且深究，你可以在 Google 上得到几乎所有与编程相关的答案。</p>
<p>如果你无法从 Google 上搜索到你所需要的答案，下一步要做的就是去你所属的学习社区，从他人那里寻求帮助，他们通常都会十分愿意帮助你，无论问题是什么。</p>
<p>在向社区寻求帮助时需要注意以下几点：</p>
<ul>
<li>直接提出问题</li>
<li>确保问题清晰易懂</li>
<li>提供一份你的代码副本，把它们放在一个公共的远程仓库里，如 <a href="https://github.com/">GitHub</a> 或 <a href="https://codepen.io/">Codepen</a>，并提供该仓库的链接。</li>
</ul>
<h2 id="">保持健康的生活方式</h2>
<p>我怎么强调保持健康生活方式的好处都不为过。它将帮助你维持精力充沛并保持健康，以迎接下一次挑战。</p>
<p>有各种方法来保持健康的生活方式，其中有些是：</p>
<ul>
<li>经常锻炼有助于提高你的认知能力和身体素质。</li>
<li>不要长时间坐着。</li>
<li>在学习时定期锻炼手指。</li>
<li>学习时，眼睛要定期离开屏幕。</li>
<li>为你的兴趣爱好腾出时间，作为对你努力的奖励。</li>
<li>确保你总是睡得好，得到适当的休息。</li>
</ul>
<h2 id="">总结</h2>
<p>编程是一场马拉松，而不是一场短跑。如果你想取得任何程度的成功，你必须花时间并坚持不懈地学习。</p>
<p>采取本文所讨论的步骤将极大地提高你实现目标的机会。</p>
<p>如果你喜欢这篇文章，你可以给我一个 <a href="https://twitter.com/activus_d">shout-out</a>。</p>
<h2 id="">拓展阅读和参考资料</h2>
<ol>
<li><a href="https://www.youtube.com/watch?v=ukLnPbIffxE">Retrieval creates learning</a></li>
<li><a href="https://en.wikipedia.org/wiki/Forgetting_curve">The forgetting curve</a></li>
<li><a href="https://apps.ankiweb.net/">Download Anki, a powerful tool for active recall and spaced repetition</a></li>
</ol>
<!--kg-card-end: markdown--> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ JavaScript 中的函数是什么——初学者指南 ]]>
                </title>
                <description>
                    <![CDATA[ 原文：What are Functions in JavaScript? A Beginner's Guide [https://www.freecodecamp.org/news/what-are-functions-in-javascript-a-beginners-guide/] ，作者：Chinwendu Enyinna [https://www.freecodecamp.org/news/author/chinwendu/] 函数（function）是编程的基本概念之一。函数能让我们编写简洁的、模块化的、可多次使用的和可维护的代码，它还能帮助我们在编写代码时遵守 DRY 原则。 在本文中，你将了解 JavaScript 中有哪些函数，如何编写自己的自定义函数以及如何执行它。 作为先决条件，你应该熟悉一些基本的 JavaScript 概念，如变量（variable）、表达式（expression）和条件语句（conditional statement），以便理解本文。 什么是 JavaScript 中的函数？ 函数是为了执行特定任务而编写的——可重复使用的代码块。 你 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/what-are-functions-in-javascript-a-beginners-guide/</link>
                <guid isPermaLink="false">62c163bc8ada24082688b3db</guid>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Chencheng Li ]]>
                </dc:creator>
                <pubDate>Mon, 04 Jul 2022 04:14:34 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/07/banner-image-for-functions-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/what-are-functions-in-javascript-a-beginners-guide/">What are Functions in JavaScript? A Beginner's Guide</a>，作者：<a href="https://www.freecodecamp.org/news/author/chinwendu/">Chinwendu Enyinna</a></p><!--kg-card-begin: markdown--><p>函数（function）是编程的基本概念之一。函数能让我们编写简洁的、模块化的、可多次使用的和可维护的代码，它还能帮助我们在编写代码时遵守 DRY 原则。</p>
<p>在本文中，你将了解 JavaScript 中有哪些函数，如何编写自己的自定义函数以及如何执行它。</p>
<p>作为先决条件，你应该熟悉一些基本的 JavaScript 概念，如变量（variable）、表达式（expression）和条件语句（conditional statement），以便理解本文。</p>
<h2 id="javascript">什么是 JavaScript 中的函数？</h2>
<p>函数是为了执行特定任务而编写的——可重复使用的代码块。</p>
<p>你可以将函数视为主程序（program）中的子程序。函数由一组语句组成，但作为单个单元执行。</p>
<p>在 JavaScript 中，我们有一些浏览器内置功能，如 alert()、 promp() 和 confirm()。你以前可能在你的项目中使用过这些吧？但你仍然可以创建你自己的自定义函数。</p>
<p>有几种方法可以定义函数。最常见的是函数声明（declaration）和函数表达式。</p>
<h2 id="">如何使用函数声明来定义函数？</h2>
<p>你可以编写像这样的函数声明：</p>
<pre><code class="language-javascript">function nameOfFunction() {
	//这里是一些代码......
}
</code></pre>
<p>基本上，函数声明由以下内容组成：</p>
<ul>
<li>函数关键字（keyword）</li>
<li>函数的名称</li>
<li>小括号（Parentheses）（可以包含参数，也可以为空）</li>
<li>函数主体（用大括号（curly braces）括起来）</li>
</ul>
<p>这里有一个例子：</p>
<pre><code class="language-JavaScript">function sayHello() {
	console.log("Hello world"); 
}
</code></pre>
<p>该函数不会做任何事情——也就是输出（output） <em>Hello world</em> ，除非你调用（invoking）了这个函数。</p>
<p>调用该函数的方法如下：</p>
<pre><code class="language-javascript">sayHello();

//输出：Hello world
</code></pre>
<p>以下是另一个例子：</p>
<pre><code class="language-javascript">function sum(num1, num2){
	return num1 + num2;
}
</code></pre>
<p>要调用此函数，我们需要这样：</p>
<pre><code class="language-javascript">sum(1, 2);

//输出：3
</code></pre>
<p>你可以看到我们的第一个函数示例和第二个函数示例之间略有区别。</p>
<p>如果你猜到这是因为第二个函数小括号中的内容，恭喜你答对了！</p>
<p>当我们定义函数 <code>sum()</code> 时，它包含了两个形式参数（parameter） —— <code>num1</code> 和 <code>num2</code>。当我们调用这个函数时，我们传递了两个值（value）——实际参数（argument）<code>1</code> 和 <code>2</code>。</p>
<p><strong>形式参数</strong>是你在声明函数时传递给函数的变量。</p>
<p>假设你希望你的函数是动态（dynamic）的，形式参数它就可以在不同的时间将函数的逻辑应用于不同的数据集。</p>
<p>这就是形式参数派上用场的地方，这样一来，你的函数就不会重复输出相同的结果。反过来说，它的结果是取决于你传入的数据。</p>
<p>另一方面，<strong>实际参数</strong>是相当于你调用函数时，传递给形式参数的值。</p>
<p>因此，声明一个带有形式参数的函数的语法将看起来像这样：</p>
<pre><code class="language-javascipt">function nameOfFunction(parameters){
	//函数体......
}
</code></pre>
<p>然后再调用该函数：</p>
<pre><code class="language-javascript">nameOfFunction(arguments)
</code></pre>
<h2 id="">如何使用函数表达式来定义一个函数？</h2>
<p>函数表达式是定义一个函数的另一种记法。就语法而言，它与函数声明类似。但是函数表达式允许你定义一个命名的函数，或者省略函数名来创建一个匿名（anonymous）函数。</p>
<p>让我们看看一个函数表达式是什么样子的：</p>
<pre><code class="language-javascript">let namedFunction = function myFunction(){
	//这里是一些代码......
}
</code></pre>
<p>注意，在这个例子中，函数有一个名字，<code>myFunction</code>。而匿名函数则不是这样的。当定义一个匿名函数时，你要省略函数名，就像下面这个例子：</p>
<pre><code class="language-javascript">let anonymousFunction = function(){
	//这里是一些代码......
}
</code></pre>
<p>你可以看到，这两个函数的例子都是分配给了一个变量的，没错吧？</p>
<p><strong>一个函数关键字创建了一个函数值，当它被用作表达式时，可以分配给一个变量</strong>。</p>
<p>因此，为了调用这个函数，我们使用作为新函数名的变量名来调用它。</p>
<p>函数声明和函数表达式之间的一个主要区别是，对于函数声明，你甚至可以在定义函数之前就调用它。这在函数表达式中是不可能的。</p>
<p>比如说：</p>
<pre><code class="language-javascript">console.log(greeting());

function greeting(){
  console.log("Hope you're are good?");

}
//输出：Hope you're good?
</code></pre>
<p>如果函数被定义为一个函数表达式，这就不灵了，因为函数表达式遵循的是从上到下的控制流序列。</p>
<h2 id="javascriptarrow">如何在JavaScript中使用箭头（arrow）函数？</h2>
<p>箭头函数是函数表达式的另一种记法，但它们的语法更短。它是在ES6中引入的，可以帮助我们编写更简洁的代码。</p>
<p>在这里，函数关键字被排除在外，我们使用一个箭头符号（=&gt;）来代替。语法看起来像这样：</p>
<pre><code class="language-javascript">let nameOfFunction = (parameters) =&gt; {
	//函数体
}
</code></pre>
<p>如果大括号内的函数主体只包含一条语句，那么大括号可以省略。带有大括号的箭头函数必须包括 <code>return</code> 这一个关键字。</p>
<h2 id="iifes">什么是立即调用的函数表达式（IIFEs）？</h2>
<p>IIFE是另一个函数表达式记法（显式的匿名函数），它在隔离状态下工作，独立于任何其他代码。它在被定义的地方被立即调用。</p>
<p>其语法如下：</p>
<pre><code class="language-javascript">(function (){
	//函数体
})();
</code></pre>
<p>IIFE的一个用例是包围一个你可能不会在代码中再次使用的变量。因此，一旦函数被执行，这个变量就不存在了。</p>
<h2 id="return">如何在一个函数中使用关键字 <code>return</code>？</h2>
<p>要创建一个在函数被调用后会解析为一个值的函数，你要在函数的正文中使用关键字 <code>return</code>。</p>
<p><code>return</code>是一个指令，在函数中的代码被执行后，向函数返回一个值。</p>
<p>下面是一个函数的例子，该函数返回一个值，这个值在这个例子中是两个数字的总和：</p>
<pre><code class="language-javascript">function sum(a, b){
	return  a + b;
}

sum(10, 20);

//输出将是 30
</code></pre>
<p>在一个函数中使用 <code>return</code> 可以很容易地处理函数返回的数据，可以把它作为一个值传递给另一个函数，或者对它进行额外的操作。</p>
<h2 id="javascriptscopeclosures">JavaScript中的函数作用域（Scope）和闭包（Closures）是如何工作的？</h2>
<p>一个作用域是一个嵌套的名字空间，它将在其中创建的名字本地化，这样这些名字就不会与在该作用域之外创建的类似名字发生冲突。在一个函数中，有一些作用域规则是适用的。</p>
<p>你定义的每个新函数都会创建一个新的作用域，称为<strong>函数作用域</strong>。在函数作用域内创建的变量在该作用域外是不可见的或不可访问的。</p>
<p>然而，在函数作用域之外但在定义函数的作用域内创建的变量可以在函数内被访问。因此，如果你在全局作用域内定义一个函数，它可以访问在该全局作用域内声明的所有变量。</p>
<p>此外，假设你有一个子函数（也就是内部函数）嵌套在父函数（也就是外部函数）里面。子函数可以访问其父函数中声明的所有变量和函数，以及父函数可以访问的所有变量和函数——即使其父函数已经执行完毕，并且其变量在该函数之外不再可以访问的情况下也可以。这个概念在 JavaScript 中被称为<strong>闭包</strong>。</p>
<p>然而，父函数不能访问在子函数内部创建的变量。这样一来，子函数内部的变量和函数就被限制在自己的作用域内。</p>
<p>让我们看一个这方面的代码例子：</p>
<pre><code class="language-javascript">//variables defined in the global scope

let  a = 40;
let b = 20;

//this function is also defined in the global scope

function parentFunc(){
	//access variables a and b inside this function

	console.log(a + b); 
}

//output: 60
</code></pre>
<p>假设我在父函数中嵌套了一个内部函数，像这样：</p>
<pre><code class="language-javascript">//全局范围内定义的变量

let a = 40;
let b = 20;

//这个函数也是在全局范围内定义的

function parentFunc(){
	let  name = “Doe”;
    
    //这个内部函数是在父函数范围内定义的
    
	function childFunc(){
		console.log(`${name} is ${a - b} years old`); 
      }
    return childFunc();
}

parentFunc(); //输出：Doe is 20 years old
</code></pre>
<p>现在，如果我在一个函数内创建一个变量，并试图从全局作用域访问它，我们会得到一个引用错误。这是因为该变量是函数作用域的局部变量，在全局作用域中是不可见的。</p>
<pre><code class="language-javascript">console.log(c);

function parentFunc(){
	let c = 30
} 

//输出：reference error - c is not defined
</code></pre>
<p>让我们试着访问一个在父函数中的嵌套函数内创建的变量：</p>
<pre><code class="language-javascript">function parentFunc(){
	console.log(age);
	function childFunc(){
		let  age = 20;
	} 
    return childFunc();
}

parentFunc(); //output: reference error - age is not defined.
</code></pre>
<h2 id="javascript"><strong>默认形式参数如何在 JavaScript 中工作？</strong></h2>
<p>最初，当没有明确的值传给函数形式参数时，函数形式参数被分配为 <em>undefined</em> 。默认状态下形式参数让你在定义函数时为形式参数指定一个默认值，例如：</p>
<pre><code class="language-javascript">function greeting(name, message = ”Hello”){
	console. log(`${messgae}  ${name}`)
}

greeting(‘John’); //output: Hello John

//你还可以为默认参数分配一个新值
//当你调用这个函数时

greeting(‘Doe’, ‘Hi’); //output: Hi Doe
</code></pre>
<p>需要注意的是，在声明默认形式参数时，它必须在常规的形式参数之后。</p>
<h2 id="restparameterjavascript">剩余参数（rest parameter）如何在 JavaScript 中工作？</h2>
<p>通过剩余参数，你可以定义一个函数，将多个实际参数存储在一个数组中。当你用多个实际参数来调用你的函数时这么做会特别有用，下面是一个例子：</p>
<pre><code class="language-javascript">function sayHello(message, ...names){
  names.forEach(name =&gt; console.log(`${message} ${name}`));
}

sayHello('Hello', "John", "Smith", "Doe");

/*
输出：

Hello John

Hello Smith

Hello Doe 

*/


</code></pre>
<p><code>...</code>是使 <code>names</code> 成为剩余参数的原因。</p>
<p>就像默认形式参数一样, 剩余参数应该出现在你的函数中任何常规形式参数之后.</p>
<h2 id="">总结</h2>
<p>在这篇文章中，你了解了 JavaScript 中的函数是怎么回事，以及如何编写你自己的函数。</p>
<p>有了函数，你就可以通过将所有的东西归入独立块，来执行不同的任务，从而组织你的代码。</p>
<p>我希望你喜欢这篇文章。要想了解更多关于函数的知识，你可以查看以下这些资源。</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript Functions</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">Closures</a></li>
</ul>
<p>文章就到这里， Happy coding :)</p>
<!--kg-card-end: markdown--> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
