JavaScript学习笔记（数组）

落日映苍穹つ 2023-03-13 12:24 35阅读 0赞

### JavaScript学习笔记（数组） ###

*   *  常用的字符串的操作：
     *   *  indexOf(用来搜索一个指定的元素的位置)
         *  slice
         *  push和pop
         *  unshift和shift
         *  sort
         *  reverse
         *  splice:
         *  concat
         *  join
         *  多维数组：

> JavaScript的Array*可以包含任意数据类型*，并通过索引来访问每个元素，  
> 获得数组的长度可以通过length属性：

var arr = [1,2,3.14,'hello',null,true];
    alert(arr.length);

直接给Array的length赋值一个新的值会导致Array大小的变化：

var arr = [1,2,3.14];
    arr.length;
    arr.length=6
    console.log(arr);

![20200513180112743.png][]  
可以通过索引把对应的元素修改为新的值，因此，对Array的索引 进行赋值会直接 修改Array

var arr = ['a','b','c'];
    arr[1] = 99;
    arr;

![20200513180500408.png][]

## 常用的字符串的操作： ##

### indexOf(用来搜索一个指定的元素的位置) ###

var arr1 = [10, 20, '30', 'xyz'];
    console.log(arr1.indexOf(10));
    console.log(arr1.indexOf(20));
    console.log(arr1.indexOf('30'));
    console.log(arr1.indexOf('xyz'));

![在这里插入图片描述][20200513181054614.png]

### slice ###

就是String对就的substring，用来截取Array的部分元素，然后返回一个新的Array

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    console.log("从0到2："+arr.slice(0,3));
    console.log("3到最后："+arr.slice(3));

![在这里插入图片描述][20200513181537332.png]  
如果不给slice()传递任何参数，它就会从头到尾截取所有的元素，我们这样可以复制Array;

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var aCopy = arr.slice();
    console.log("aCopy为："+aCopy);

![在这里插入图片描述][20200513182008643.png]

### push和pop ###

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：

var arr = [1, 2];
    arr.push('A', 'B'); // 返回Array新的长度: 4
    arr; // [1, 2, 'A', 'B']
    arr.pop(); // pop()返回'B'
    arr; // [1, 2, 'A']
    arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
    arr; // []
    arr.pop(); // 空数组继续pop不会报错，而是返回undefined
    arr; // []

### unshift和shift ###

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

var arr = [1, 2];
    arr.unshift('A', 'B'); // 返回Array新的长度: 4
    arr; // ['A', 'B', 1, 2]
    arr.shift(); // 'A'
    arr; // ['B', 1, 2]
    arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
    arr; // []
    arr.shift(); // 空数组继续shift不会报错，而是返回undefined
    arr; // []

### sort ###

可以对当前 Array进行排序，它会直接 修改当前 Array的元素位置，直接调用进，按照默认顺序排序。

var arr = ['a','c','d'];
    arr.sort();
    console.log(arr);

![2020051318275031.png][]

### reverse ###

把整个Array的元素给反转：

var arr = ['c', 'b', 'a'];
    arr.reverse();
    console.log(arr);

![在这里插入图片描述][20200513182905447.png]

### splice: ###

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
    //删除'Yahoo', 'AOL', 'Excite',然后添加'Google','Facebook'
    arr.splice(2,3,'Google','Facebook');
    //只删除，不添加
    arr.splice(2,2);
    console.log(arr0);
    console.log(arr.splice(2,3,'Google','Facebook'));	
    console.log(arr);

![在这里插入图片描述][20200513184054448.png]  
![在这里插入图片描述][20200513184246209.png]

### concat ###

把当前的Array和另一个Array连接起来，并返回一个新的Array

var arr = ['a','b','c'];
    //生成一个新的Array
    var addarr = arr.concat([1,2,3]);
    console.log("addarr："+addarr);
    console.log("arr："+arr);

![在这里插入图片描述][2020051318543595.png]

### join ###

把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串，不会改变原来的字符串，会生成一个新的字符串

var arr = ['A', 'B', 'C', 1, 2, 3];
    // arr.join('+');
    console.log("join:"+arr.join('+'));

![202005131858295.png][]

### 多维数组： ###

var arr = [
        [1,2,3],
        [4,5,6],
        [7,8,9],
        [[10,11,12],13,14]
    ];
     
    console.log(arr[0]);    //等于 [1,2,3]
    console.log(arr[1][2]);    //等于6
    console.log(arr[3][0][1]);    //等于11

![20200513190830944.png][]

[20200513180112743.png]: /images/20230312/da7a2c4917464198b5e5f1a8d6103b98.png
[20200513180500408.png]: https://img-blog.csdnimg.cn/20200513180500408.png
[20200513181054614.png]: https://img-blog.csdnimg.cn/20200513181054614.png
[20200513181537332.png]: https://img-blog.csdnimg.cn/20200513181537332.png
[20200513182008643.png]: https://img-blog.csdnimg.cn/20200513182008643.png
[2020051318275031.png]: https://img-blog.csdnimg.cn/2020051318275031.png
[20200513182905447.png]: https://img-blog.csdnimg.cn/20200513182905447.png
[20200513184054448.png]: https://img-blog.csdnimg.cn/20200513184054448.png
[20200513184246209.png]: https://img-blog.csdnimg.cn/20200513184246209.png
[2020051318543595.png]: https://img-blog.csdnimg.cn/2020051318543595.png
[202005131858295.png]: https://img-blog.csdnimg.cn/202005131858295.png
[20200513190830944.png]: https://img-blog.csdnimg.cn/20200513190830944.png