前端基础（JavaScript 三）——数组、字符串
JavaScript基础
- 一、数组
-
- 1.数组的定义与创建
- 2.数组常见的属性及方法
- 二、字符串
-
- 1.字符串的常用方法
一、数组
1.数组的定义与创建
数组简单来说就是有序的元素序列，使用单独的变量名来存储一系列的值。
数组的创建一种是使用Array构造函数，基础语法是：
var array = new Array();
还有一种是使用字面量的方法，基础语法是：
var array = [1, 2, 1, 3, 7];
而当我们想要获取或设置数组中的值的时候，需要使用方括号[]并提供相应的索引才可以进行想要的操作，索引是从0开始的整数。下面举一个简单的例子：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
console.log(array[0]);
</script>
结果如下：
还可以直接对数组元素进行添加：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
console.log(array[0]);
array[3] = '索引3';
console.log(array[3]);
</script>
结果：
数组的删除操作：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
console.log(array[0]);
array[3] = '索引3';
console.log(array[3]);
delete(array[3]);
console.log(array[3]);
</script>
结果：
2.数组常见的属性及方法
length
数组可以通过length来设置数组的长度大小，length的类型为number类型，通过length也可以从数组的末尾移除项或向数组添加新项。例如：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
console.log(array[0]);
array.length = 1;
console.log(array[1]);
</script>
这里我们就利用了length来移除末尾项，结果如下：
我们还可以利用length来添加末尾项，例如：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
array.length = 4;
array[3] = '新增的索引3';
array[4] = '新增的索引4';
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果：
以上还使用for循环实现了数组的遍历。
push()
push()的功能就是把它的参数顺序添加到数组的尾部。具体使用如下：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
array.push('新增的索引3','新增的索引4','新增的索引5');
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果如下，成功地在末尾添加上了几个相应的元素：
unshift()
unshift()的功能是把它的参数顺序添加到数组的开头，具体使用如下：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
array.unshift('新增1','新增2','新增3');
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果如下：
pop()
pop()是用来删除数组的最后一个元素，调用的话不需要参数，具体使用如下：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
array.pop();
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
shift()
pop()是用来删除数组的第一个元素，调用的话也不需要参数，具体使用如下：
<script type="text/javascript">
var array = new Array('索引0', '索引1', '索引2');
array.shift();
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果：
join()
join()是用于把数组中的所有元素拼接成一个字符串，语法是array.join(分隔符)，具体使用如下：
<script type="text/javascript">
var array = new Array('a', 'b', 'c', 'd', 'e');
console.log(array.join());
</script>
若像上述不传参数，则默认是逗号分隔符：
也可以自己定义分隔符：
<script type="text/javascript">
var array = new Array('a', 'b', 'c', 'd', 'e');
console.log(array.join('-'));
</script>
结果：
reverse()
reverse()是用来点到数组元素的顺序的方法，具体使用如下：
<script type="text/javascript">
var array = new Array('a', 'b', 'c', 'd', 'e');
array.reverse();
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果：
sort()
sort()顾名思义，就是对数组的元素进行排序，但是这边sort()有着多种的排序方式，具体如下：
<script type="text/javascript">
var array = new Array('rdasd', 'asfeqafda', 'qfqwf', 'vacvas', 'gbsgs');
array.sort();
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
当sort方法中没有传入参数的时候，默认是将数组全部转化为字符串，然后再按照字符串的首字符进行由小到大的排序，上述代码的运行结果如下：
哪怕是数字类型也是按照首字符进行排序：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
array.sort();
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果：
而这里如果我们想要实现数字等的按序排列的话，就需要往sort方法里面传递参数，这里的参数是指函数，具体使用如下：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
array.sort(function (a, b){
return a - b;
});
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
使用时需要设置两个参数，当第一个参数比第二个大时，输出的结果是从小到大的：
当第二个参数比第一个大时，输出结果就是从大到小的，这里就不作演示了。
concat()
concat()是用于进行数组连接的，基础语法是array.concat(数组1,数组2,…);，具体使用入如下：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
var arr = new Array('adas', 'asvad', 'adva');
console.log(array.concat(arr));
</script>
结果：
slice()
slice()可以从数组中返回选定的元素，具体使用如下：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
var newArray = array.slice(1,4);/*1和4分别代表起始位置和结束位置*/
for(var i = 0; i < newArray.length; i++){
console.log(newArray[i]);
}
</script>
运行结果：
如果slice中没有添加任何参数的话，则默认是原来的数组，若第二位有出现负数，则默认是从开始位置，到负数加上数组最后一位位置的结束位置，例如：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
var newArray = array.slice(0,-1);
for(var i = 0; i < newArray.length; i++){
console.log(newArray[i]);
}
</script>
上述代码中的(0，-1)最后截断的数组位置就是从0到（-1+4）的位置。
splice()
splice()用于删除或插入从指定索引开始的零个或多个元素。删除的使用如下：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
var newArray = array.splice(0,2);/*0表示从第0位置开始，2表示删除2个元素*/
/*splice()的方法返回的是被删除的元素数组*/
for(var i = 0; i < newArray.length; i++){
console.log(newArray[i]);
}
console.log('分割线');
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果：
插入的操作如下：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
var newArray = array.splice(1,0,3,4,56,78946);
/*要注意这边的第二个参数依旧表示要删除的个数，设置为0即可*/
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果：
而我们利用splice的删除和插入就可以实现替换的功能，比如这边我们想将第2，3元素进行一个替换：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
var newArray = array.splice(1,2,3,4);
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}
</script>
结果：
indexOf()
indexOf()用于从开始索引处开始向后查找，返回值是查找的值的第一个索引，如果没有找到返回-1：
<script type="text/javascript">
var array = new Array('123', '23', '41', '43121', '33');
var num = array.indexOf('33',0);//返回4
var num1 = array.indexOf('4564',3);//返回-1
console.log(num, num1);
</script>
lastIndexOf()
lastIndexOf()与indexOf()类似，但是lastIndexOf()是从开始索引处向前查找，返回值与indexOf()一样，这边就不再演示了。
二、字符串
1.字符串的常用方法
charAt()
charAt()用于返回字符串中指定索引位置的字符。具体使用如下：
<script type="text/javascript">
var str = '这是一个字符串';
console.log(str.charAt(0));/*若不写参数默认值就是0*/
</script>
结果：
charCodeAt()
chaCoderAt()用于返回字符串中指定索引位置的字符的字符编码。具体使用如下：
<script type="text/javascript">
var str = 'abcdedfas';
console.log(str.charCodeAt(3));/*输出100*/
console.log(str.charCodeAt(4));/*输出101*/
</script>
indexof()
indexOf()表示从字符串中从前往后搜索指定的字符串，并返回第一次出现该字符串的位置。具体使用如下：
<script type="text/javascript">
var str = 'abcdedfasabc';
console.log(str.indexOf('abc'));
</script>
返回’abc’字符串第一次出现的位置0：
lastIndexOf()
lastIndexOf()表示从字符串中从后往前搜索指定的字符串，并返回第一次出现该字符串的位置。具体使用如下：
<script type="text/javascript">
var str = 'abcdedfasabc';
console.log(str.lastIndexOf('abc'));
</script>
这里输出的就是9：
slice()
与数组中的slice()一样，字符串的slice()也是对字符串进行截取，具体使用如下：
<script type="text/javascript">
var str = 'abcdedfasabc';
console.log(str.slice(1,6));
</script>
结果：
substring()
substring()实现的功能和slice()一样，都是实现字符串的截取，但是substring()对参数的处理和slice()有所区别，substring()对负数的处理是将负数当成0来处理，但是slice()的处理是将负数变成负数加上字符串最后一位字符的索引的值，具体使用如下：
<script type="text/javascript">
var str = 'abcdedfasabc';
console.log(str.slice(1,-2));
console.log(str.substring(1,-2));
</script>
可以看出，这里的slice取得的区间是1-9，而substring取到的是1-0即a：
substr()
substr()也是实现一个截取字符串的功能，但是传入参数所代表的意义不同，具体使用如下：
<script type="text/javascript">
var str = 'abcdedfasabc';
console.log(str.substr(1,5));/*1表示起始的索引，5表示长度*/
</script>
结果：
split()
split()用于把字符串分割成数组，具体使用如下：
<script type="text/javascript">
var str = '西瓜,香蕉,苹果,葡萄,橘子';
console.log(str.split(','));
</script>
结果：
replace()
replace()用于替换字符串的某些字符，基础语法是：str.replace(正则表达式/字符,替换字符)，具体使用如下：
<script type="text/javascript">
var str = '西瓜,香蕉,苹果,葡萄,橘子';
console.log(str.replace(/,/g,'-'));
/*若不适用正则表达式，会默认只替换第一个匹配到的字符串*/
</script>
结果：
toUpperCase()
顾名思义，toUpperCase()就是把字符串里面的小写字母转换为大写字母，具体使用如下：
<script type="text/javascript">
var str = 'aascASfasfa';
console.log(str.toUpperCase());
</script>
结果：
toLowerCase()
toLowerCase()就是将字符串中的大写字符转换为小写字符，具体使用如下：
<script type="text/javascript">
var str = 'aascASfasfa';
console.log(str.toLowerCase());
</script>
结果：
有关数组和字符串的内容就简单介绍这些啦，有不对的地方也希望大家帮我指出一下，蟹蟹大家！
