给程序员看的Javascript攻略 - 字符串和数组

436 阅读3分钟

原文发表在: holmeshe.me

本文是汉化重制版。

还记得早先用ajax胡乱做项目的时候踩过好多坑,然后对JS留下了“非常诡异”的印象。最近换了一个工作,工作语言就是JS。然后发现这个语言真不得了,前面后面都能干,基本成了全栈的同义词。所以刚好就趁这个机会系统学习一下这个语言。因为是给程序员看的,这个系列不会讲基本的“if-else”,循环,或者面向对象。相反,我会关注差异,希望能给您在Pull Request里走查代码式的学习体验!

在JS里面,字符串和数组的用法非常类似,所以放到一篇里面说。首先,字符串不可被修改,而数组则可以。

打上码:

var str = "123";
str[0] = "0";
alert(str);
 
var arr = [1, 2, 3];
arr[0] = "0";
alert(arr);

运行结果:

123
0,1,3

顺便一提,在JS里面字符串用一对双引号 "", 一对单引号 '', 或者反单引号 `` (用于声明多行字符串)表示。数组则用一堆中括号[]表示。

打上码:

var str = "123";
str.length = 10;
alert(str);
 
var arr = [1, 2, 3];
arr.length = 10;
alert(arr);
alert(arr[3]);

运行结果:

123
1,2,3,,,,,,,
undefined

有趣的是,如果你强行改变数组的长度,JS引擎会在运行时给多余的成员赋值为 undefined。 当然,由于不可被修改,字符串是不能这么改的。

转意符 \

和大多语言一样,JS也用 \ 来做转意特殊字符。(比如,在用 "" 表示的字符串里出现 " )。

打上码:

alert("\"");
alert("a\nb");
alert("a\tb");

运行结果:

"
a
b
a    b

正如上面提到,\" 在字符串里表示 ",\n 则表示换行,而 \t 表示制表符。

如果想知道所有的特殊字符表示方法,可以在Google里面搜索关键字“Javascript special characters”。

其实我们可以直接用 \ 来在字符串里面写ascII和Unicode。但是我感觉这么做在JS这种高级语言里没啥意义,所以省略掉这部分的说明。

拼接

我们用 1) + ,或者 2) 字符串模板 来拼接字符串,

打上码:

var js = "Javascript";
var message1 = "I like " + js;  //using +
alert(message1);
var message2 = `and ${js}'s particularities`; //using string template
alert(message2);

运行结果:

I like Javascript
and Javascript's particularities

如果是数组,我们用concat(),

打上码:

var arr = ['a', 'b', 'c'];
var added = arr.concat(['d', 'e', 'f']);
alert(added);

运行结果:

a,b,c,d,e,f

访问下标

都用 []

打上码:

var arr = ['a', 'b', 'c'];
var str = "abc";
alert(arr[0]);
alert(str[0]);

运行结果:

a
a

查找

都用 indexOf()

打上码:

var arr = ['abc', 'xyz', 123, 789];
alert(arr.indexOf(123));
alert(arr.indexOf('xyz'));
alert(arr.indexOf(789));
alert(arr.indexOf('abc'));
 
var str = "abcxyz";//a=>0 b=>1 c=>2 x=>3
alert(str.indexOf('xyz'));

运行结果:

2
1
3
0
3

不解释。

子集(子字符串或者子数组)

字符串用substring(),数组用slice()

打上码:

var str = "abcxyz";//a=>0 b=>1 c=>2 x=>3 y=>4 z=>5
alert(str.substring(0, 5));// does not include 5(z)
alert(str.substring(3));//start from 3(x) to the end
 
var arr = ["a", "b", "c", "x", "y", "z"];
alert(arr.slice(0, 5));// does not include 5(z)
alert(arr.slice(3));//start from 3(x) to the end

运行结果:

abcxy
xyz
a,b,c,x,y
x,y,z

好,今天先写到这。如果您觉得这篇不错,请在知乎上关注本专栏。也可以去Medium上随意啪啪啪我的其他文章。感谢阅读!👋