紹

“如何逆向輸出JavaScript中的字符串？”是面試中最常被問到的問題之一，尤其是如果你是一名新人或者缺乏經驗的話。可能有幾十種方法可以倒轉一個字符串。然而，在本文中，我們將學習在JavaScript中倒轉字符串的三種不同方法。

我們將在本文中使用的字符串是“hello world!”但是，這些方法可以處理您想要反轉的任何字符串。

const str = 'hello world!';    
// 逆向輸出的結果: !dlrow olleh

使用Split, Reverse, Join

在第一個方法中，我們將使用JavaScript內置的split、reverse和join方法來逆轉字符串。

const str = 'hello world!';  
  
// 步驟 1:  
const strChunks = str.split("");  
console.log(strChunks); // 輸出: ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]  
  
// 步驟 2:  
const strChunksReverse = strChunks.reverse();  
console.log(strChunksReverse); // 輸出: ["!", "d", "l", "r", "o", "w", " ", "o", "l", "l", "e", "h"]  
  
// 步驟 3:  
const strReverse = strChunksReverse.join("");  
console.log(strReverse); // 輸出: !dlrow olleh 

正如您在上面的代碼中看到的，在第一步中，我們使用split方法將字符串“hello world”分割成一個數組，數組中的每個元素表示字符串的單個字符。傳遞給split方法的參數是一個沒有空格的空字符串。下一步，我們將使用JavaScript的原生reverse方法對數組中的元素進行反轉。在最后一步，我們用join方法連接數組元素也就是字符串的字符。

我們不必將每個操作寫在單獨的語句中，而是將方法鏈接起來，并在一行中執行所有操作。

const str = 'hello world!';  
const strReverse = str.split('').reverse().join('');  
console.log(strReverse); // 輸出: !dlrow olleh  

上面的代碼片段將產生與前一個代碼塊相同的輸出。

使用 for循環

接下來，我們將使用一個簡單的for循環來反轉字符串

const str = "hello world!";    
let strReverse = "";    
    
for (let i = str.length - 1; i >= 0; i--) {    
    strReverse = strReverse + str[i];    
}    
    
console.log(strReverse);    
// 輸出: !dlrow olleh   

正如您在上面的代碼片段中所看到的，我們正在創建一個變量strReverse，它包含一個空字符串(其中不包含空格)。接下來我們要做的是，我們要用for循環遍歷需要反轉的字符串。循環中i的初始值是str.length - 1。在每次迭代之后，我們都會遞減i的值。循環將繼續，直到它到達字符串的第一個字符，即單詞hello中的h。在每次迭代中，我們都將字符連接到strReverse變量。

使用遞歸

我們也可以使用遞歸反轉字符串，遞歸只是一個函數直接或間接調用自身的過程。

const message = "hello world!";  

function reverse(value) {    
  return value === '' ? '' : reverse(value.slice(1)) + value.charAt(0);    
};  
  
console.log(reverse(message));  
// 輸出: !dlrow olleh  

上面的函數做的第一件事是檢查作為參數傳遞給它的字符串是否為空。如果是，它將返回一個空字符串。如果條件為false，它將簡單地調用自己并再次傳遞字符串值，但這一次它將刪除第一個字符并傳遞字符串的其余部分，并在return語句的末尾追加第一個字符。

讓我們用一個更簡單的例子來理解這一點。假設我們將字符串'abc'傳遞給函數:

console.log(reverse('abc'));  // 輸出: cba   

上面的代碼將調用反向函數四次。第一次我們手動調用它，3次它會用遞歸調用自己。

• 第一次：reverse('abc')將返回reverse('bc') + 'a'
• 第二次：reverse('bc')將返回reverse('c') + 'ba'
• 第三次：反向('c')將返回反向(") + 'cba'
• 第四次：reverse(")，它將返回一個空字符串，結束遞歸過程。

言

今天聊聊Prop傳值的一些細節.

一、Prop 名字格式

如果一個 prop 的名字很長，應使用 camelCase 形式，因為它們是合法的 JavaScript 標識符，可以直接在模板的表達式中使用，也可以避免在作為屬性 key 名時必須加上引號。

defineProps({
  greetingMessage: String
})

<span>{{ greetingMessage }}</span>

雖然理論上你也可以在向子組件傳遞 props 時使用 camelCase 形式 (使用 DOM 內模板時例外)，但實際上為了和 HTML attribute 對齊，我們通常會將其寫為 kebab-case 形式：

<MyComponent greeting-message="hello" />

對于組件名我們推薦使用 PascalCase，因為這提高了模板的可讀性，能幫助我們區分 Vue 組件和原生 HTML 元素。然而對于傳遞 props 來說，使用 camelCase 并沒有太多優勢，因此我們推薦更貼近 HTML 的書寫風格。

動態傳值：

<!-- 根據一個變量的值動態傳入 -->
<BlogPost :title="post.title" />

<!-- 根據一個更復雜表達式的值動態傳入 -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

二、傳遞不同的值類型

在上述的兩個例子中，我們只傳入了字符串值，但實際上任何類型的值都可以作為 props 的值被傳遞。

1.Number

代碼如下（示例）：

<!-- 雖然 `42` 是個常量，我們還是需要使用 v-bind -->
<!-- 因為這是一個 JavaScript 表達式而不是一個字符串 -->
<BlogPost :likes="42" />

<!-- 根據一個變量的值動態傳入 -->
<BlogPost :likes="post.likes" />

2.Boolean

代碼如下（示例）：

<!-- 僅寫上 prop 但不傳值，會隱式轉換為 `true` -->
<BlogPost is-published />

<!-- 雖然 `false` 是靜態的值，我們還是需要使用 v-bind -->
<!-- 因為這是一個 JavaScript 表達式而不是一個字符串 -->
<BlogPost :is-published="false" />

<!-- 根據一個變量的值動態傳入 -->
<BlogPost :is-published="post.isPublished" />

3.Array

代碼如下（示例）：

<!-- 雖然這個數組是個常量，我們還是需要使用 v-bind -->
<!-- 因為這是一個 JavaScript 表達式而不是一個字符串 -->
<BlogPost :comment-ids="[234, 266, 273]" />

<!-- 根據一個變量的值動態傳入 -->
<BlogPost :comment-ids="post.commentIds" />

4.Object

代碼如下（示例）：

<!-- 雖然這個對象字面量是個常量，我們還是需要使用 v-bind -->
<!-- 因為這是一個 JavaScript 表達式而不是一個字符串 -->
<BlogPost
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- 根據一個變量的值動態傳入 -->
<BlogPost :author="post.author" />

三、使用一個對象綁定多個 prop

如果你想要將一個對象的所有屬性都當作 props 傳入，你可以使用沒有參數的 v-bind，即只使用 v-bind 而非 :prop-name。例如，這里有一個 post 對象：

const post={
  id: 1,
  title: 'My Journey with Vue'
}

<BlogPost v-bind="post" />

而這實際上等價于：

<BlogPost :id="post.id" :title="post.title" />

注意：

所有的 props 都遵循著單向綁定原則，props 因父組件的更新而變化，自然地將新的狀態向下流往子組件，而不會逆向傳遞。這避免了子組件意外修改父組件的狀態的情況，不然應用的數據流將很容易變得混亂而難以理解。

另外，每次父組件更新后，所有的子組件中的 props 都會被更新到最新值，這意味著你不應該在子組件中去更改一個 prop。若你這么做了，Vue 會在控制臺上向你拋出警告：

const props=defineProps(['foo'])

// ? 警告！prop 是只讀的！
props.foo='bar'

導致你想要更改一個 prop 的需求通常來源于以下兩種場景：

1、prop 被用于傳入初始值；而子組件想在之后將其作為一個局部數據屬性。在這種情況下，最好是新定義一個局部數據屬性，最好是新定義一個局部數據屬性，最好是新定義一個局部數據屬性，從 props 上獲取初始值即可：

const props=defineProps(['initialCounter'])

// 計數器只是將 props.initialCounter 作為初始值
// 像下面這樣做就使 prop 和后續更新無關了
const counter=ref(props.initialCounter)

2、需要對傳入的 prop 值做進一步的轉換。在這種情況中，最好是基于該 prop 值定義一個計算屬性：

const props=defineProps(['size'])

// 該 prop 變更時計算屬性也會自動更新
const normalizedSize=computed(()=> props.size.trim().toLowerCase())

四、更改對象 / 數組類型的 props

當對象或數組作為 props 被傳入時，雖然子組件無法更改 props 綁定，但仍然可以更改對象或數組內部的值。這是因為 JavaScript 的對象和數組是按引用傳遞，而對 Vue 來說，禁止這樣的改動，雖然可能生效，但有很大的性能損耗，比較得不償失。

這種更改的主要缺陷是它允許了子組件以某種不明顯的方式影響父組件的狀態，可能會使數據流在將來變得更難以理解。在最佳實踐中，你應該盡可能避免這樣的更改，除非父子組件在設計上本來就需要緊密耦合。在大多數場景下，子組件應該拋出一個事件來通知父組件做出改變。

總結

今天內容有點多，慢慢消化，多做實戰測試。

做一個簡單的人，平和而執著，謙虛而無畏，未來的日子，我們都能安之若素。

數組里面的數逆向輸出。

#include <stdio.h>

int main() {

int arr[5]={1, 2, 3, 4, 5};

int i, j, temp;

for(i=0, j=4; i < j; i++, j--) {

temp=arr[i];

arr[i]=arr[j];

arr[j]=temp;

}

printf("逆序后的數組: ");

for(i=0; i < 5; i++) {

printf("%d ", arr[i]);

}

printf("\n");

return 0;

}

該程序的主要思路是先定義一個包含10個元素的數組，將其按順序輸出，然后使用for循環將數組逆序，最后再將逆序后的數組輸出。具體來說，循環的起始位置為數組的第一個元素，末尾位置為數組的最后一個元素，通過temp變量保存中間值，然后將起始位置和末尾位置的值進行交換，直到循環結束。最后再使用for循環遍歷逆序后的數組中的每個元素，并輸出。這個算法具有較高的效率