JavaScript中的数组和字符串

知识内容：

1.JavaScript中的数组

2.JavaScript中的字符串

 

 

 

一、JavaScript中的数组

1.JavaScript中的数组是什么

数组指的是数据的有序列表，每种语言基本上都有数组这个概念，但是JavaScript的数组跟别的语言的数组很不同：

• 数组长度可以动态改变
• 同一个数组中可以存储不同的数据类型
• 数据的有序集合
• 每个数组都有一个length属性，表示的是数组中元素的个数

JavaScript数组从本质上讲是一个Array对象

 

 

2.如何创建数组

var s1 = ["123", "666", "333"]           // 字面量
var s2 = new Array("123", "666", "333")  // 构造函数
console.log(s1)
console.log(s2)

 

 

3.访问、修改数组元素

//创建一个长度为 5 的数据
var arr = [10, 20, 30, 40, 50];
console.log(arr[0]);  //获取下标为 0 的元素，  即：10
console.log(arr[2]);  //获取下标为 2 的元素，  即：30

arr[1] = 100;  //把下标为 1 的元素赋值为100
console.log(arr)

 

 

4.遍历数组

有3种方法可以遍历数组:

• for循环
• for… in
• for each ( ES5 新增)

 以下3种循环方法只要熟练掌握一种就可以了

// 普通for循环遍历数组
var arr = [3, 9, 12, 13, 66];       
for(var i = 0; i < arr.length; i++){    //数组长度多长，就遍历多少次。  循环变量作为数组的下标
    console.log(arr[i]);
}

// for ... in 遍历数组
// 每循环一轮，都会把数组的下标赋值给变量index，然后index就拿到了每个元素的下标。 
//注意:这里index是元素的下标,不是与元素
//对数组来说，index从从0开始顺序获取下标
for (var index in arr) {
  console.log(index);  //循环输出： 0 1 2 3 4 5
}
for(var i in arr){
  console.log(arr[i]);
}

// for each 遍历数组
//调用数组的forEach方法，传入一个匿名函数
//匿名函数接受两个参数：   参数1--迭代遍历的那个元素  参数2：迭代遍历的那个元素的下标
//可以在匿名函数内部书需要的代码
arr.forEach( function(element, index) {
  console.log(element);
});

 

 

5.数组其他常用方法

 1 obj.length          数组的大小
 2  
 3 obj.push(ele)       尾部追加元素
 4 obj.pop()           尾部获取一个元素
 5 obj.unshift(ele)    头部插入元素
 6 obj.shift()         头部移除元素
 7 obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
 8                     obj.splice(n,0,val) 指定位置插入元素
 9                     obj.splice(n,1,val) 指定位置替换元素
10                     obj.splice(n,1)     指定位置删除元素
11 obj.slice( )        切片
12 obj.reverse( )      反转
13 obj.join(sep)       将数组元素连接起来以构建一个字符串
14 obj.concat(val,..)  连接数组
15 obj.sort( )         对数组元素进行排序

(1)获取数组长度

var arr = [10, 20, 30, 40, 50];
alert(arr.length);  //弹出：5

 

(2)像数组中添加元素

向数组中添加元素有以下两种方法(一般都是用第一种)：

• obj.push(ele) 尾部追加元素
• obj.unshift(ele) 头部插入元素

var s = [1, 2, 3]
// 从尾部添加
s.push("新元素")
console.log(s)
s.push("666")
console.log(s)

// 从头部添加
s.unshift("333")
console.log(s)

 

(3)从数组中删除元素

向数组中删除元素有两种方法：

• obj.pop() 尾部移除元素
• obj.shift() 头部移除元素

var s = [1, 2, 3, 4, 5, 6]
v = s.pop();
console.log(v);  // 6
console.log(s);  // [1, 2, 3, 4, 5]


s.shift();
console.log(s);  // [2, 3, 4, 5]

 

(4)数组的转换方法

toString()转换方法：返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

join() 方法：toString() 方法只能使用逗号连接，而 join() 方法可以使用指定的连接符连接

var s = [1, 2, 3, 4, 5, 6]
console.log(s.toString())
console.log(s)
console.log(s.join("+"))
console.log(s)

 

(5)数组元素倒置 -> reverse方法

var s = [1, 2, 3, 4, 5, 6];

console.log(s.reverse());
console.log(s);

 

(6)查找指定元素在数组中的索引

indexOf(item): 从前面开始向后查找 item 第一次出现的位置
lastIndexOf(item): 从尾部开始向前查找 item 第一次出现的位置
如果找不到元素，则返回 -1

indexOf(item, fromBack): 从第二个参数的位置开向后始查找 item 第一次出现的位置
lastIndexOf(item, fromForward): 从第二个参数的位置开始向前查找 item 第一次出现的位置

var arr = ["66", 3, 21, "wyb"]
console.log(arr.indexOf("wyb"))  // 3
console.log(arr.lastIndexOf("wyb"))  // 3

 

(7)其他方法

其他方法不详细介绍，用的少，要用的时候再去查吧

obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

 

 

 

二、JavaScript中的字符串

1.JavaScript字符串介绍

(1)JavaScript中字符串类型类似python中字符串类型：

• 字符串是由字符组成的数组，字符串是不可变的：可以访问字符串任意位置的文本，但并未提供修改已知字符串内容的方法
• 另外用双引号表示的字符串和单引号表示的字符串完全相同
• 字符串有可以直接使用的方法

 

(2)定义字符串：

1 var s = "hello world"
2 var name = 'wyb'

 

(3)多行字符串：

1 var line = `
2 多行
3 字符串
4 `
5 
6 // 输出到终端（要在浏览器打开检查器的终端才能看到）
7 console.log(line)

 

(4)转义符

在代码中表示字符串的时候, 很多东西不方便表示, 因此我们使用转义符的方式来表示，转义符是字符串中的特殊符号，由反斜杠（backslash）开始，接另一个字符结束
常用的转义符有：

• \n // 表示一个换行符
• \t // 表示一个 TAB（制表符）
• \\ // 表示一个反斜杠 \
• \' // 表示一个单引号
• \" // 表示一个双引号

还有一些别的转义符，但极少使用，对于这种东西，不必记忆，知道有这么回事就好了

 

(5)字符串替换(格式化)

var msg = "wyb"
var someThing = `${msg}666`  // 替换字符串(格式化)

console.log(someThing)

 

 

2.JavaScript中字符串常用方法

obj.length                           长度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号
obj.substr(start, length)  截取字符串
obj.substring(start, length)  截取字符串

 

补充 - 字符串常用知识点：

var log = function (){
    console.log.apply(this, arguments);
};

// ——字符串常用操作——
// 字符串可以判断相等、判断是否包含、相加、取子字符串
// 例子：
// 判断相等或者包含
log('good' == 'good')
log('good' == 'bad')
log('good' != 'bad')
log('impossible'.includes('possible'))
log('believe'.includes('lie'))

// +拼接得到一个新字符串
log('very' + 'good')
log('very ' + 'good')

// 得到一个你想要的字符串有多种方式
// 但是现在有现代的方式, ES6的 模板字符串
// 用法如下:
var name = 'wyb'
var a = `${name}, 你好`
log(a)
// 简单说来, 就是 ${} 会被变量替换行成新字符串

// 另外JavaScript的字符串中没有像python那样的格式化 要想使用python中那样的格式化要自己写一个 写法如下:
// JavaScript字符串格式化
    String.prototype.format = function (args) {
        var result = this;
        if (arguments.length > 0) {
            if (arguments.length == 1 && typeof (args) == "object") {
                for (var key in args) {
                    if (args[key] != undefined) {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            }
            else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] != undefined) {
                        var reg = new RegExp("({)" + i + "(})", "g");
                        result = result.replace(reg, arguments[i]);
                    }
                }
            }
        }
        return result;
    };

// 写了上面的字符串格式化函数之后就可以像下面一样直接使用类似python的字符串格式化了
var s = "this a test string for {0}".format("format")
var msg = "{0} {1} {2} msg".format("this", "is", "a test")
log(s, msg)

// 字符串相当于一个 array，可以用数字下标访问
// s 的长度为 7，但是下标是从 0 开始的，所以最大下标是6
var s = 'iamgood'
log(s[0])
log(s[1])
log(s[2])
// ...
log(s[6])

// 当然也就可以和 array 一样用循环遍历了
for(var i=0; i<s.length; i++){
    log(s[i]);
}
for (var v in s){
    log(s[v]);
}

// 字符串可以切片, 当然, array 也可以这样切片
// 语法如下
// s.slice(开始下标, 结束下标)
var s = 'iamgood'
s.slice(0, 3)  // 'iam'
s.slice(1, 3)  // 'am'

// 省略下标参数意思是取到底
s.slice(2)   // 'mgood'

 

 

3.将其他类型转化成字符串

• toString()
• String()

 1 var number = 10;
 2 var value = true;
 3 var n = null;
 4 var r;
 5 
 6 alert(String(number));    　// "10"
 7 alert(String(value));    　 // "true"
 8 alert(String(n));          // "null"
 9 alert(String(r));        　// "undefined"
10 
11 
12 # toString(): 可以传递一个参数控制输出数值的基数，另外null和undefined没有这个方法
13 var num = 10;
14 alert(num.toString());     // "10"
15 alert(num.toString(2));    // "1010"
16 alert(num.toString(8));    // "12"
17 alert(num.toString(10));   // "10"
18 alert(num.toString(16));   // "a"

 

 

4.拓展：定时器

定时器：setInterval('执行的代码'，间隔时间)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         function f1(){
10             console.log(1);
11         }
12 
13         // 创建一个定时器
14         //setInterval("alert(123);", 5000);     // 每隔5秒弹框
15         setInterval("f1();", 2000);             // 每隔2秒log出1
16     </script>
17 </body>
18 </html>

 

还有一些别的转义符，但极少使用，对于这种东西，不必记忆，知道有这么回事就好了。