this.message.split(‘‘).reverse().join(‘‘)是什么意思？（用官方文档例子分析）

Hello，大家好！

今天重新在看vue的官方文档，然后突然对this.message.split('').reverse().join('')的理解模糊了，所以查了查，一下就知道了是什么东西了，所以就自己写了这篇文章。

可能很多人会说，网上已经有很多雷同的文章了，为啥我还要写？

回答：自己写就是为了方便自己以后查阅，还有，更希望自己再写得通俗易懂点，对新手更友好点，对大家有帮助也是我所想的。

---

行了，进入正文！！！

官方文档是这么写的，如下👇：

                                                                html部分：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

                                                                js部分：

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

                                                                运行结果：

分析：

1.split('')把一个字符串分割成字符串数组

        如何理解？  ==》就是：例如字符串是“Hello”，使用split('')之后，就变成['H','e','l','l','o']。

                                                括号里的' ' 就是把数据拆分为每个字符串

2.reverse()颠倒数组中元素的顺序 

        如何理解？ ==》就是：注意是数组，所以就是只作用于数组，所以一般搭配split('')后才起作用。

3.join('')把数组中的所有元素放入一个字符串（这里的一个字符串，可以理解是自己定义的一个变量）

        如何理解？ ==》就是：上面代码中message就相当于自己定义的变量，然后this.message = this.message.split('').reverse().join('')中加粗的“this.message“就是将 Hello Vue.js! 经过分割+反转后通过jion放入加粗的“this.message“中。

通俗点讲：this.message.split('').reverse().join('')就是讲字符串拆分反转重组成新的字符串，然后重新放在message 中。

 

 

---

本文一些内容是参考其它文章，若侵权可私我删。