【持续记录】js数组

1.数组概念

JavaScript数组是无类型的,数组元素可以是任意类型,并且同一个数组中元素类型也可以不同。
每一个js数组都有一个length属性。

创建数组

数组创建可以使用直接量的方式定义[],或者使用创建对象的方式new Array()

        let arr1 = [];
        console.log(arr1);// 长度为0空数组
        let arr2 = [0,"h",new Date()];
        console.log(arr2);// 长度为3的数组
        let arr3 = new Array(2);
        console.log(arr3);// 长度为2空数组

在这里插入图片描述

数组长度

数组.length

  		let arr4 = [2,5,1];
        console.log(arr4.length);//3
        let arr5 = [,,];
        console.log(arr5.length);//2

注意:数组元素后面可以添加逗号,而不是用于间隔,所以[,]是两个元素,不是三个元素。

2.数组增删改查

增加元素

给数组增加元素有很多种方式。
(1)为新索引赋值

        let arr1 = ['h'];
        console.log(arr1);//['h']
        arr1[1] = 'i';
        console.log(arr1);//['h','i']

(2)push方法在数组末尾增加一个或多个元素

        let arr2 = ['a'];
        arr2.push('b');// ['a', 'b']
        console.log(arr2);
        arr2.push('c','d','e');
        console.log(arr2);// ['a', 'b', 'c', 'd', 'e']

(3)unshift方法在数组首部插入一个元素或多个元素

        let arr2 = ['a'];
        arr2.unshift('b');// ['b', 'a']
        console.log(arr2);
        arr2.unshift('c','d','e');
        console.log(arr2);// ['c', 'd', 'e', 'b', 'a']

删除元素

删除元素也同样有多种方式。
(1)splice方法删除指定索引位置元素
数组长度相应减少,后面的数组元素索引递减。
splice方法可以增加、删除、修改数组元素。

        let arr2 = ['a','b','c','d'];
        arr2.splice(0,1);// 删除索引0开始,长度为1的数组元素,即删除a
        console.log(arr2);// ['b', 'c', 'd']

        let arr3 = ['a','b','c','d'];
        arr3.splice(2,2);// 删除索引2开始,长度为2的数组元素,即删除c、d
        console.log(arr3);// ['a', 'b']

(2)delete删除数组元素

        let arr9 = ['a',1,'hi',23];
        console.log(arr9.length);// 4
        delete arr9[2];// 删除'hi'
        console.log(arr9);// ['a',1,,23]
        console.log(arr9.length);// 4

【注意】delete只是被删除的元素变成了 undefined ,其他的元素的键值还是不变。
而splice方法会改变原始数组。
(3)pop删除数组最后一个元素

        let arr8 = ['a',1,'hi',23];
        console.log(arr8.length);// 4
        arr8.pop();
        console.log(arr8);// ['a', 1, 'hi']
        console.log(arr8.length);// 3

(4)shift删除数组第一个元素

        let arr8 = ['a',1,'hi',23];
        console.log(arr8.length);// 4
        arr8.shift();
        console.log(arr8);// [1, 'hi', 23]
        console.log(arr8.length);// 3

遍历数组

(1)最基础for循环

  		let arr8 = ['a',1,'hi',23];
        for(let i=0; i<arr8.length; i++){
    
    
            console.log(arr8[i]);
        }

结果:
在这里插入图片描述
(2)forEach
forEach中可以遍历得到数组元素、数组元素索引、原数组,注意先后位置。

        let arr7 = ['a',1,'hi',23];
        arr7.forEach(item => {
    
    
            console.log(item)
        })
        console.log("------------------");
        arr7.forEach((item,index) => {
    
    
            console.log(index+":"+item)
        })
        console.log("------------------");
        arr7.forEach((item,index,oldArr) => {
    
    
            console.log(index+":"+item+":"+oldArr)
        })

结果:
在这里插入图片描述
(3)for…of
for…of是ES6新增的遍历方式,它提供了统一的遍历机制。for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串。
优点:
有着同for…in一样的简洁语法,但是没有for…in那些缺点
不同用于forEach方法,它可以与break、continue和return配合使用
提供了遍历所有数据结构的统一操作接口

        let arr8 = ['a',1,'hi',23];
        for(item of arr8){
    
    
            console.log(item);
        }

3.常用方法

获取元素在数组中索引、判断数组是否包含某元素

【语法】数组.indexOf(元素)
返回-1表示数组不存在该元素,否则返回钙元素的索引值。

let fruits = ["Banana", "Orange", "Apple", "Mango"];
let a = fruits.indexOf("Apple"); // 2

数组复制

数组进行拼接等操作时,如果将原数组使用等号赋值给新数组,只是将同一内存地址指向两个引用,新数组的操作会连带操作原数组,影响原数组的元素。
此时可以将原数组复制到新数组。
【语法】Object.assign(目标数组, 原数组);

	let oldArr = ['sdsd',123,123,123]
	let newArr = []
	Object.assign(newArr, oldArr);

数组拼接concat

将两个数组拼接为一个新的数组。
【语法】新数组=A数组.concat(B数组)
concat返回一个新数组,并不会改变参与计算的两个原数组。

        let arr1 = ['a','b','c'];
        let arr2 = [1, 2, 3];
        let arr3 = arr1.concat(arr2);
        console.log(arr1);// ['a', 'b', 'c']
        console.log(arr2);// [1, 2, 3]
        console.log(arr3);// ['a', 'b', 'c', 1, 2, 3]

数组转换为字符串

join可以将数组中所有元素转换为字符串并拼接在一起,返回最后生成的字符串。
默认使用逗号连接,也可以自己指定元素之间连接符。
【语法】数组.join(连接符)
不修改原数组,返回字符串。

        let arr1 = ['a','b','c'];
        let res1 = arr1.join();
        console.log(res1);// a,b,c

        let res2 = arr1.join('-');
        console.log(res2);// a-b-c

        let res3 = arr1.join('/');
        console.log(res3);// a/b/c

数组截取

slice方法可以截取数组的一个片段得到一个子数组。
【语法】数组.slice(开始索引, 结束索引)
它的两个参数分别指定了子数组的开始和结束位置,前闭后开。即包含前面的索引,不包含后面的索引。
不修改原数组,返回新数组。

   let arr1 = ['a','b','c','d','e','f'];
        let res1 = arr1.slice(0,1);// 截取索引0的子数组
        console.log(arr1);// ['a', 'b', 'c', 'd', 'e', 'f']
        console.log(res1);// ['a']

        let res2 = arr1.slice(2,5);// 截取索引2,3,4的子数组
        console.log(arr1);// ['a', 'b', 'c', 'd', 'e', 'f']
        console.log(res2);// ['c', 'd', 'e']

map

对数组中每一个元素逐个进行操作,并返回一个新数组。新数组中的每一个元素就是原数组元素进行操作后的结果。
【语法】
不修改原数组,返回新数组。

        let arr1 = ['a','b','c','d','e','f'];
        let res = arr1.map(item => {
    
    
            return item+"t";
        })
        console.log(arr1);// ['a', 'b', 'c', 'd', 'e', 'f']
        console.log(res);// ['at', 'bt', 'ct', 'dt', 'et', 'ft']

filter

对数组中每一个元素逐个进行过滤,并筛选出符合条件的子数组。
【语法】

every

所有元素都满足,返回true;否则返回false.

some

只要有一个满足,返回true,否则返回false

猜你喜欢

转载自blog.csdn.net/JWbonze/article/details/120996080