Day2:字符串与数组

1.字面量

字面量是由语法表达式定义的常量,它是一个固定值,而不是一个变量,例如:'hello', 123, true,这些量都是字面量

2.字符串

表示方式

字符串有三种表示方式:

  1. 使用半角单引号'或双引号"包含表示,例如:"string"'hello'
  2. 使用反引号包含表示,这个符号通常在键盘主键区1键的左边第一个,上面画着一条波浪线,可以在英文输入法状态下直接按这个键打出反引号,它看起来是这样的:
let string = `hello world!`; // 这种形式是es新增的多行字符串,它允许换行
let lines = `hello
world`; // 这是合法的写法

⚠️多行字符串是es6标准的新增方式,要使用这个特性,浏览器必须支持es6

模版字符串

es6中,可以使用es6新增的模版字符串:

let name = '小明';
let age = 16;
let str = `${name}今年${age}岁了`;
console.log(str); // '小明今年16岁了',不需要用加号连接
// 上面的表达式相当于
let str2 = name + '今年' + age + '岁了' // 字符串使用引号,变量不使用引号 

这个特性可以用在一些es5中难以处理的地方:

let imgSrc = './images/logo.jpg'
let ele = `
  <div class="head">
    <img src="${imgSrc}"> 
  </div>
`;

3. 字符串处理

判断相等

使用==或者===来判断字符串是否相等:

'hello' == 'hello' // true
'123' === 123 // false,左侧是string类型,右侧是number类型

字符串长度

string.length表示字符串长度

let str = 'hello world';
console.log(str.length); // 11

转义字符与特殊字符

js中的字符串用引号表示,如果引号本身就是字符串,那么写法上有一些变化,我们需要用转义字符来标记字符串中的特殊符号。
在原字符的前面加上反斜杠\(这个按键一般在回车键上方,右方括号的右侧),就能表示这个字符的转义字符:

let str = '在引号中使用引号\'需要使用转义字符';
let str2 = '一个反斜杠符号要用\\来表示';

js中还有一些特殊符号,也要用反斜杠的方式表示:

符号 说明
\0 Null字节
\b 退格符
\n 换行符
\r 回车符
\t 制表符(Tab键可打出)
\uXXXX 四位十六进制数XXXX表示的Unicode字符,例如\u4f60\u597d表示'你好'

拓展:操作系统的换行符

  • 在程序中,仅用\n表示换行
  • 在windows文件系统中,文件每行的结尾是\r\n(CRLF)
  • 在Unix(Linux、Mac)文件系统中,文件每行的结尾是\n(LF)

因此假如在windows下打开Unix系统下的文件,所有的字符都会出现在同一行或者出现小黑点,在Unix系统下打开windows文件,每行结尾可能多出其他符号。
使用webstorm或vscode等编辑器时,注意留意软件左下角或右下角的换行符(CRLF和LF)提示。

获取指定位置的字符

let str = 'hello';
str.charAt(2); // 'l',取2号索引位置的字符(从0开始计数)
str[1]; // 'e',
str.charCodeAt(0); // '104',取0号索引位置字符的ASCII码
String.fromCharCode(104); // 'h',将ASCII码转换为对应的字符

⚠️fromCharCode()是一个类型方法,不能用字符串对象来调用,应该使用String来调用。

ASCII码

ASCII码全称是美国标准信息交换码,是国际标准化组织(ISO)认定的国际标准,称为ISO646标准,适用于全部拉丁文字符。
ASCII码约定了常用字符使用什么样的二进制编码表示,将二进制转换为十进制后:

  • 48-57表示0-9十个阿拉伯数字
  • 65-90表示从A-Z的26个大写英文字母
  • 97-122表示从a-z的26个小写英文字母

ASCII码和后续由ASCII码表扩展的其他字符编码是国际通用标准,可以将ASCII码理解为计算机软件与计算机硬件沟通的语言

截取字符串

截取字符串中的指定字符有多种方法:

let str = 'hello.mp3';

// string.slice(start, end)
str.slice(0, 5); // 'hello',截取从start->end(不包含end)的字符
str.slice(-3); // 'mp3',从后向前截取字符

// string.substring(start, [stop]),方括号表示可选
str.substring(0, 5); // 'hello',截取从start->stop(不包含stop)的字符
str.substring(6); // 'mp3',截取从start到末尾的字符 

// string.substr(start, [length])
str.substr(0, 5); // 'hello',从start开始,截取length个
str.substr(6); // 'mp3',从start开始截取到结尾
str.substr(-3); // 'mp3',从后向前截取字符

⚠️在js中,字符串处理方法一般不会修改原字符串,而是返回一个新的字符串:

let str = 'hello';
console.log(str.slice(2)); // 'llo',返回新字符串
console.log(str); // 'hello',原字符串没有被修改

查找字符串

使用indexOf()lastIndexOf()方法可以查找一个字符串在另一个字符串中出现的位置:

let str = 'hello world';
str.indexOf('o'); // 4,返回字符串第一次出现的位置(索引号)
str.indexOf('a'); // -1,若没有找到,则返回-1
str.lastIndexOf('o'); // 7,返回字符串最后一次出现的位置
str.indexOf('el'); // 1,也可以查询多个字符,返回首字符所在的位置

拓展:正则表达式
除了js自带的这些字符串处理函数,还有一种叫做正则匹配的方法来处理字符串,目前暂不展开讨论。

其他字符串处理函数

split

split()函数可以按分隔符将字符串拆分为数组(在本节的后面会讲到):

let str = '1991-10-11';
str.split('-'); // ['1991', '10', '11'],得到一个新数组,数组中保存的是按`-`符号拆分好的字符串
let str2 = 'hello';
str.split(''); // ['h', 'e', 'l', 'l', 'o'],若括号中写空字符串`''`,则将字符串展开为数组
str.split(); // ['hello'],若括号中不写内容,则将字符串转换为数组

trim

trim()函数可以去掉字符串首尾的空白(空格符、换行符、制表符等):

let str = '     hello     ';
str.trim(); // 'hello',去除字符串首尾两端的空格

大小写转换

使用toUpperCase()toLowerCase()来进行大小写转换:

let str = 'Hello Wolrd';
str.toUpperCase(); // 'HELLO WORLD',转换为大写
str.toLowerCase(); // 'hello world',转换为小写

4. 数组

基本概念

数组(Array)是有序排列的数据的集合。
有许多方式来创建数组:

let arr1 = [0, 2, 4, 6, 8]; // 直接赋值一个数组
let arr2 = new Array(); // 定义一个空数组
let arr3 = []; // 定义一个空数组
arr3.length = 5; // 定义一个长度为5的空数组(空的位置会自动用undefined填充)
let arr4 = new Array(8); // 定义一个长度为8的数组
let arr5 = new Array(0, 2, 4, 6, 8); // 定义数组并赋值

console.log(arr); // 在控制台查看数组

数组就像更衣室里一个个有序排列的柜子,我们可以将不同类型的数据保存在数组的不同柜子中,数组中存放的数据,称为元素

数组的长度,用arr.length表示,就代表柜子的个数:

let arr = ['a', 1, null]; // 定义一个存有字符串、数字和null的有3个元素的数组
console.log(arr.length); // 3,数组的长度为3,与元素个数相同

⚠️为了方便阅读,接下来的内容中需要打印返回值的位置,不再书写console.log()函数,而是直接在注释中给出返回值,例如:arr.length; // 3

使用数组名[索引号]的方式来访问(即查看、获取)数组元素,索引号是元素在数组中的位序,从0开始计数:

let arr = [2, 4, 6, 8, 10];
arr[0]; // 2,访问0号索引位置的元素
arr[arr.length - 1]; // 10,访问数组中的最后一个元素

数组中也可以保存另一个数组:

let arr = [
  [1, 2, 3],
  ['a', 'b', 'c']
];
arr[1]; // ['a', 'b', 'c']
arr[1][2]; // 'c'

⚠️没有特殊情况,不要直接对arr.length赋值,因为这样会改变数组的长度,长度缩短会导致数组中的数据丢失,

数组处理

赋值

通过直接对数组的某个索引位置赋值,可以修改数组:

let arr = [2, 4, 6, 8, 10];
arr[0] = 5

添加元素

直接赋值

直接对索引位置赋值来向添加元素:

let arr = [2, 4, 6];
arr[3] = 8;
arr; // [2, 4, 6, 8]
arr[5] = 10;
arr; // [2, 4, 6, undefined, 10],空位会自动用undefined补全

push在末尾添加

push()方法能够向数组末尾添加一个或多个元素,返回新数组的长度,这个方法会修改原数组:

let arr = [1, 2, 3];
arr.push(4); // 4
arr.push('a', 5); // 6
arr; // [1, 2, 3, 4, 'a', 5],原数组被改变了

unshift在开头添加

unshift()方法能够向数组的开头添加一个或多个元素,返回新数组的长度:

let arr = [1, 2, 3];
arr.unshift('a'); // 4
arr; // ['a', 1, 2, 3]

删除元素

pop删除最后一个元素

使用pop()方法来删除数组的最后一个元素,返回被删除的这个元素:

let arr = ['a', 'b'];
arr.pop(); // 'b'
arr; // ['a']

shift删除第一个元素

使用shift()方法来删除数组的第一个元素,返回被删除的这个元素:

let arr = ['a', 'b'];
arr.shift(); // 'a'
arr; // ['b']

splice删除指定元素

splice()方法可以删除指定的一个或者连续的多个元素,返回被删除元素的集合(即以数组形式返回被删除的元素),这个方法也可以替换指定的元素:

语法string.splice(index, [length], [item1, item2, ..., itemX])
index:表示从第几个索引号开始删除
length(可选):表示删除几个元素,默认为1个
item(可选):表示向删除元素的位置添加新元素
例如:string.splice(1, 3)表示从1号索引位置开始,删除3个元素

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(0); // ['a']
arr; // ['b', 'c', 'd', 'e']
arr.splice(1, 2); // ['c', 'd']
arr; // ['b', 'e']
arr.splice(0, 1, 'hello', 'world'); // ['b']
arr; // ['hello', 'world', 'e']

数组的连接与分割

数组的连接与分割都不会破坏原数组,这些方法都会返回一个新数组作为结果。

连接数组

concat()方法可以连接两个数组,返回连接后的新数组:

let a = [1, 2, 3];
let b = [4, 5, 6];
a.concat(b); // [1, 2, 3, 4, 5, 6]

join()方法将数组内的元素连接为一个新字符串:

let arr = ['a', 'b', 'c'];
arr.join(); // 'a,b,c'
arr.join(''); // 'abc'
arr.join('-'); // 'a-b-c'

分割数组

使用slice()方法来提取数组中的一段元素,返回一个新数组:

let arr = [1, 2, 3, 4];
arr.slice(1, 2); // [2, 3],注意,slice(n, m)函数的表示从n号索引位置开始,到m号索引位置结束,与splice()函数的参数不同,这里表示的是从1号索引取到2号索引
arr.slice(1); // [2, 3, 4],不写第二个参数,表示截取到结尾

查找元素

与字符串类似,在数组中,可以查找元素是否在数组中,也可以查找元素在数组中的哪个索引位置,使用indexOf()lastIndexOf()方法来进行查找:

let arr = ['a', 'b', 'c', 'a'];
arr.indexOf('a'); // 0
arr.indexOf('a', 1); // 3,第二个参数1表示从1号索引位置后开始查找,因此找到的是第二个'a'
arr.indexOf('d'); // -1,没有找到时,返回-1

本系列教程作品采用 [知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议] 进行许可。 转载请发邮件到我的邮箱340349237@qq.com,并注明作者Tianzhen

练习:Day2.5:巩固练习

推荐阅读更多精彩内容