#你不知道的javascript中卷#（3）字符串与数组对比

字符串的内部实现有没有使用数组并不好说，但是javascript中的字符串和字符串数组并不是一回事

var a = "foo"

var b = ["f", "o", "o"]

相同处：

字符串和数组的确是很相似，他们都是类数组，都有length属性以及indexOf(...)（从ES5开始数组支持此方法）和concat方法

1、长度

console.log(a.length) // 3

console.log(a.length) // 3

2、indexOf

console.log(a.indexOf("o")) // 1
console.log(b.indexOf("o")) // 1

3、concat

var c = a.concat('bar')
var d = b.concat(['b','c','d'])
console.log(c) // foobar
console.log(d) // ["f", "o", "o", "b", "c", "d"]

不同处：

虽然是有相同之处，但是并不意味着字符串就是字符数组

1、字符串是不可变的，数组是可变的

a[1] = '6'
b[1] = '6'
console.log(a) // foo
console.log(b) // ["f", "6", "o"]

字符串没有被改变，数组被改变了
并且a[1]在javascript中是并非总是合法的，正确的方法应该是a.charAt(1)

console.log(a.charAt(1)) // o

但是字符串不可变是指字符串的成员函数不会改变其原始值，而是创建并返回一个新的字符串。而数组的成员函数都是在其原始值上进行操作

var c = a.toUpperCase()
console.log(a) // foo a的值没有变化
console.log(c) // FOO
b.push("!")
console.log(b) // ["f", "6", "o", "!"] b的值发生了变化

2、rsverse：只有数组可以使用，字符串不行

console.log(a.reverse) // undefined
var c= b.reverse()
console.log(b) // ["f", "6", "o", "!"]
console.log(c) // ["!", "o", "6", "f"]

比如vue的官网中的一个例子用到了这个

this.message = "Hello Vue js!"(测试的时候Vue.js 少了一个点 ， 所以输出和官网相比差了一个点)经过 split('') 切割之后变成数组

["H", "e", "l", "l", "o", " ", "V", "u", "e", " ", "j", "s", "!"]

然后经过 reverse() 之后变成

["!", "s", "j", " ", "e", "u", "V", " ", "o", "l", "l", "e", "H"]

最后join()把数组中的所有元素放入一个字符串并通过指定的分隔符进行分隔的变成

!sj euV olleH