学习笔记——数组的属性及常用的方法

Love The Way You Lie 2022-11-20 11:58 169阅读 0赞

--------------------

> 在JS中，数组是一个重要的数据类型，以下是数组一些常用的方法及属性。

### 数组的创建： ###

在JS中数组有两种创建方法：

// 第一种
    var arr1 = new Array();        // Array为数组的构造函数
    var arr2 = new Array(3);       // 给正整数表示数组的长度
    var arr2 = new Array('3');     // 给正整数表示数组的内容
    console.log(arr2); //['3']
    
    // 第二种
    var arr4 = [];                 // 直接用[]创建数组

### 数组的属性： ###

// length：计算数组长度的属性
    var arr = [1,2,3,4];
    console.log(arr.length);  // 4
    
    // constructor；返回创建该数组对象函数的引用
    var arr = [1,2,3,4];
    console.log(arr.constructor); // f Array() { [native code] }
    
    // prototype：可以向对象中添加属性和方法
    var arr = [1,2,3,4];
    arr.val = 2;
    console.log(arr.val);    // 2

### 数组的方法： ###

**数组的转换：**

// join：将数组中的元素用指定符号连接成一个字符串
    var arr = [1,2,3,4];
    var str = arr.join(',')
    console.log(str);    // 1,2,3,4
    // 不会改变原数组，返回值为一个字符串。
    
    
    // toSting：将数组中的元素用逗号连接成一个字符串。所有对象都有该方法
    var arr = [1,2,3,4];
    var str = arr.toSting();
    console.log(str);    // 1,2,3,4
    // 不会改变原数组，返回值为一个字符串。
    
    // toSting：返回Array对象中的原始值。所有对象都有该方法
    var arr = [1,2,3,4];
    var str = arr.valueOf();
    console.log(arr);
    // 不会改变原数组，返回一个数组。
    
    // toLocaleString：把数组转换为本地字符串。所有对象都有这种方法
    var arr = [1,2,3,4];
    var str = arr.toLocaleString();
    console.log(str);    // 1,2,3,4
    // 不会改变原数组，返回一个数组。

**数组的增删操作：**

// push：在数组后面增加一个或多个元素
    var arr = [1,2,3,4];
    var len = arr.push(60,70);
    console.log(len);	// 6
    console.log(arr);	// [1,2,3,4,60,70]
    // 会直接改变原数组，返回值为数组现在的长度
    
    // pop：弹出数组最后一个元素
    var arr = [1,2,3,4];
    var val = arr.pop();
    console.log(val);	// 4
    console.log(arr);	// [1,2,3]
    // 会直接改变原数组，返回值为弹出的值
    
    // unshift: 将一个或几个元素推入数组第一项。注意顺序
    var arr = [1,2,3,4];
    var len = arr.unshift(-1, 0);
    console.log(len);	// 6
    console.log(arr);	// [-1,0,1,2,3,4]
    // 会直接改变原数组，返回值为数组现在的长度
    
    // shift：弹出数组中第一个元素
    var arr = [1,2,3,4];
    var val = arr.shift();
    console.log(val);	// 1
    console.log(arr);	// [2,3,4]
    // 会直接改变原数组，返回值为弹出的值

**数组的重排序：**

// reverse：将数组反转
    var arr = [1,2,3,4];
    arr.reverse();
    console.log(arr);	// [4,3,2,1]
    // 会改变原数组，返回值为改变后的数组
    
    // sort：将数组中的元素进行排序
    // sort()不给参数时,会按首字母升序,也会出现以下问题，因为调用了toString()函数
    var arr = [9, 19, 33, 44, 12];
    arr.sort();
    console.log(arr);    // [12, 19, 33, 44, 9]
    
    // sort()接收一个比较函数作为参数，函数有两个参数，参数1应该在参数2之前，返回负值
    var arr = [9, 19, 33, 44, 12];
    arr.sort(function(val1, val2) { return val1 - val2; });
    console.log(arr); // [9, 12, 19, 33, 44]
    // 会改变原数组，返回值为改变后的原数组

**数组的操作方法：**

// concat：将两个数组中的元素拼接成一个新的数组
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.concat([1,5,3,4]);
    console.log(newArr);	// [9,19,33,44,12,1,5,3,4]
    // 不会改变原数组，返回值：拼接后的新数组
    
    // slice：对数组进行截取
    // slice()不给参数时，相当于复制这个数组
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.slice();
    console.log(newArr);	// [9, 19, 33, 44, 12]
    
    // slice()给一个正参数时，截取的开始位置（下标）。可以是负数表示从倒数第几个开始截取
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.slice(1);
    console.log(newArr);	// [19, 33, 44, 12]
    
    // slice()给一个负参数时，表示从倒数第几个开始截取。
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.slice(-2);
    console.log(newArr);	// [44, 12]
    
    // slice()给两个参数，表示从开始位置（下标）到结束位置（下标）（不被包括在内）
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.slice(1,4);
    console.log(newArr);	// [19, 33, 44]
    
    // slice(9)（下标） 超出范围，返回一个空数组
    // 不会改变原数组，返回值：截取形成的新数组
    
    // splice：可以做删除，插入，替换
    // 删除操作：splice（i, n）从下标i开始，删除n个元素, 返回[19,33]
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.splice(1,2);
    console.log(arr);	// [9, 44, 12]
    console.log(newArr); // [19,33]
    
    // 插入操作：splice（i, 0, n, m）从下标i开始，插入多个数据 返回[]
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.splice(1,0,1,2);
    console.log(arr);	// [9, 1, 2, 19, 33, 44, 12]
    
    // 替换操作：splice（i, 1, n, m）从下标i开始，插入多个数据 返回删除的元素
    var arr = [9, 19, 33, 44, 12];
    var newArr = arr.splice(1,1,1,2);
    console.log(arr);	// [9, 1, 2, 33, 44, 12]
    console.log(newArr); // [19]
    // 会改变原数组，返回值：操作后的元素，例如上面删除后，

**数组的位置方法：**

// indexOf()：寻找简单数组中第一个满足条件元素的下标
    var arr = [9, 19, 33, 44, 12];
    var i = arr.indexOf(19);
    console.log(i);	// 1
    // 找不到返回-1，返回值为数组下标，不会改变原数组
    
    // lastIndexOf()：寻找简单数组中最后一个满足条件元素的下标
    var arr = [9, 19, 33, 44, 12];
    var i = arr.indexOf(33);
    console.log(i);	// 2
    // 找不到返回-1，返回值为数组下标，不会改变原数组
    
    // lastIndexOf()：寻找复杂数组中第一个满足条件元素的下标（数组中元素为对象）
    var arr = [ { id: 1, name: '11' }, { id: 2, name: '22' } ]
    var i = arr.findIndex(item => item.id === 2);
    console.log(i);	// 1
    // 找不到返回-1，返回值为数组下标，不会改变原数组

**数组的迭代方法：**

// find()：寻找数组中满足条件的一个元素
    var arr = [ { id: 1, name: '11' }, { id: 2, name: '22' } ]
    var i = arr.find(item => item.id === 2);
    console.log(i);	// {id: 2, name: "22"}
    // 返回值为该项的值，找不到返回undefined，不会改变原数组
    
    // filter()：寻找数组中满足条件的元素（可能多个）
    var arr = [ { id: 1, name: '11' }, { id: 2, name: '22' }, { id: 4, name: '22' } ]
    var i = arr.filter(item => item.name === '22');
    console.log(i);	// [{id: 2, name: "22"}, { id: 4, name: '22' }]
    // 返回值为[满足条件的元素], 找不到返回空数组[]，不会改变原数组
    
    // forEach((item, i, array) => {})：迭代数组中的某一元素，对元素进行操作
    var arr = [ { id: 1, name: '11' }, { id: 2, name: '22' }, { id: 4, name: '22' } ]
    var i = arr.forEach(item => item.name = '1');
    console.log(i);	// undefined
    console.log(arr); // [{ id: 1, name: '1' }, { id: 2, name: '1' }, { id: 4, name: '1' }]
    // 没有返回值，会改变原数组
    
    // map()：对数组中的每一项给定函数进行操作
    var arr = [ { id: 1, name: '11' }, { id: 2, name: '22' }, { id: 4, name: '22' } ]
    var i = arr.map(item => {
        item.name = '1';
        return item;
    });
    console.log(i);	// [{ id: 1, name: '11' }, { id: 2, name: '22' }, { id: 4, name: '22' }]
    // 返回一个新数组，不会改变原数组，在给定函数条件时，return有时会需要
    
    // some()：查看数组中有无一个满足条件的元素
    var arr = [ { id: 1, name: '11' }, { id: 2, name: '22' }, { id: 4, name: '22' } ]
    var i = arr.some(item => item.id === 1);
    console.log(i);	// true
    // 返回true或false，不会改变原数组
    
    // every()：查看数组中是否所有元素都满足条件
    var arr = [ { id: 1, name: '11' }, { id: 2, name: '22' }, { id: 4, name: '22' } ]
    var i = arr.every(item => item.id === 1);
    console.log(i);	// false
    // 返回true或false，不会改变原数组
    
    // includes(value, index)：查看数组中有无一个满足条件的元素，适用于简单类型的数组
    var arr = [9, 19, 33, 44, 12];
    var i = arr.includes(33);
    console.log(i);	// true
    // 返回true或false，不会改变原数组

**数组的归并方法：**

// reduce(上个值，当前值，索引，数组对象)：return返回第一个参数返回给下一项，会迭代数组
    var arr = [9, 19, 33, 44, 12];
    var i = arr.reduce((prev, cur, index, array) => {
        return prev + cur;
    });
    console.log(i);	// 117
    // 返回操作后的数，不会改变原数组，从左边开始迭代数组，不迭代第一项，适用于简单类型
    
    // reduceRight()：与reduce()的迭代方向相反。

> 以上就是数组的一些常用的方法，可能还有其他方法没有涉及，遇到了及时补充。