绍

“如何逆向输出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循环遍历逆序后的数组中的每个元素，并输出。这个算法具有较高的效率