JS数组常用方法

JS数组常用方法

1.toString()

// toString() 方法把数组转换为数组值（逗号分隔）的字符串。

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString()); // Banana,Orange,Apple,Mango

2.join()

// join() 方法也可将所有数组元素结合为一个字符串。
// 它的行为类似 toString()，但是join()方法可以规定分隔符：

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(':')); // Banana:Orange:Apple:Mango

3.pop()

// pop() 方法从数组中删除最后一个元素，并返回删除的元素。
// 此方法会改变数组的长度

let fruits = ["Banana", "Orange", "Apple", "Mango"];
const x = fruits.pop();
console.log(x); // Mango
console.log(fruits); // ["Banana", "Orange", "Apple"]

4.push()

// push()方法可向(数组的末尾)添加一个或多个元素，并返回新的长度
// 注意： 新元素将添加在数组的末尾。
// 注意： 此方法改变数组的长度

let fruits = ["Banana", "Orange", "Apple", "Mango"];
const x = fruits.push("Kiwi","Lemon");
console.log(x); // 6
console.log(fruits); // ["Banana", "Orange", "Apple", "Mango", "Kiwi"，"Lemon"]

5.shift()

// shift() 方法从数组中删除第一个元素，并返回删除的元素。
// 此方法改变数组的长度

let fruits = ["Banana", "Orange", "Apple", "Mango"];
const x = fruits.shift();
console.log(x); // Banana
console.log(fruits); // [Orange", "Apple", "Mango"]

6.unshift()

// unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
// 注意： 该方法将改变数组的数目。

let fruits = ["Banana", "Orange", "Apple", "Mango"];
const x = fruits.unshift("Lemon");
console.log(x); // 5
console.log(fruits); //["Lemon", "Banana", "Orange", "Apple", "Mango"]

7.删除数组元素注意事项

// 既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：
let fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined
console.log(fruits); // [undefined, "Orange", "Apple", "Mango"]

// 使用 delete 会在数组留下未定义的空洞，所以不建议使用。

8.splice()

// splice() 方法可用于添加或删除数组中的元素。
// 返回值：如果删除元素，则返回删除元素的数组。 如果未删除任何元素，则返回空数组。
// 注意：这种方法会改变原始数组。

// splice(index, howmany, item1, ..., itemX)
// index-第一个参数：从何处添加/删除元素,为数组元素的下标，必须是数字
// howmany-第二个参数：表示应删除多少个元素。必须是数字，但可以是"0"
// 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
// item1, ..., itemX：要添加到数组的新元素

// 添加元素
let addFruits = ["Banana", "Orange", "Apple", "Mango"];
const x = addFruits.splice(2, 0, "Lemon", "Kiwi");
console.log(x); // []
console.log(addFruits); // ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

// 删除元素-方法1
let delFruits = ["Banana", "Orange", "Apple", "Mango"];
const y = delFruits.splice(1, 1); // 从下标1开始，删除1个元素
console.log(y); // ['Orange']
console.log(delFruits); // ['Banana', 'Apple', 'Mango']

// 删除元素-方法2
let fruits = ["Banana", "Orange", "Apple", "Mango"];
const z = fruits.splice(2); // 从下标2开始，删除到数组结尾的所有元素
console.log(z); // ['Apple', 'Mango']
console.log(fruits); // ['Banana', 'Orange']

9.concat()

// concat() 方法用于连接两个或多个数组
// 原数组不变，返回一个新数组

let myGirls = ["Cecilie", "Lone"];
let myBoys = ["Emil", "Tobias", "Linus"];
let myChildren = myGirls.concat(myBoys);
console.log(myChildren);
// ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus']

10.slice()

// slice() 方法用数组的某个片段切出新数组
// 原数组不变，返回一个新数组

// 方式一
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(2); // 从下标2开始，切出一段新数组
console.log(fruits); //['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus); //['Lemon', 'Apple', 'Mango']

// 方式二
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(-2); // 截取最后三个元素
console.log(fruits); //['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus); //['Apple', 'Mango']

// slice() 可接受两个参数。
// 第一个参数：开始参数选取元素的下标
// 第二个参数：结束参数选取元素的下标（不包括）

// 方式一
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1, 3); // 从(下标1)开始，截取到(下标3-1)
console.log(citrus); // ['Orange', 'Lemon']

// 方式二
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1, -1); // 从(下标1)开始，截取到倒数第一个（不包含）
console.log(citrus); // ['Orange', 'Lemon', 'Apple']

// 方式三
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(-3, -1); // 截取倒数第三个（包含）到倒数第一个（不包含）的两个元素
console.log(citrus); // ['Lemon', 'Apple']

11.sort()

// sort() 方法以字母顺序对数组进行排序：

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
console.log(fruits); // ['Apple', 'Banana', 'Mango', 'Orange']

// sort() 函数默认按照字符串顺序对值进行排序。
// 不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。
// 正因如此，sort() 方法在对数值排序时会产生不正确的结果。
// 我们通过一个比值函数来修正此问题：
// 升序排序：
let points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 

// 降序排序
let points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

// 以随机顺序排序数组
let points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});

// 排序对象数组
// 即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。
// 解决方法是通过比较函数来对比属性值：
// 1.比较数值
let cars = [
    {type:"Volvo", year:2016},
    {type:"Saab", year:2001},
    {type:"BMW", year:2010}
];
cars.sort(function(a, b){return a.year - b.year});
// 2.比较字符串
cars.sort(function(a, b){
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

12.reverse()

// reverse() 方法反转数组中的元素

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();         // 反转元素顺序
console.log(fruits); // ['Mango', 'Apple', 'Orange', 'Banana']

// 可以使用它以降序对数组进行排序: 
// (先使用sort()进行排序,再使用reverse()进行反转)
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

13.includes()

// includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

let site = ['runoob', 'google', 'taobao'];
console.log(site.includes('runoob')); // true 
console.log(site.includes('baidu')); // false

14.reduce()

// 使用reduce()进行求和
// 1.普通数组
const array = [1,2,3,4,5];
const result = array.reduce((a, b) => a + b);
console.log('result', result);

// 2.对象数组
const objArray = [
    {id: 1, num: 1},
    {id: 2, num: 2},
    {id: 3, num: 3},
    {id: 4, num: 4},
    {id: 5, num: 5}
]

const objResult = objArray.reduce((total, cur) => {
    return total + cur.num;
}, 0)

console.log('objResult', objResult);

15.遍历数组方法

JS遍历数组的几种常用方法

以上均为个人学习笔记，小白仍需努力！