【JS】数组常用知识--速学版

目录

数组定义及属性

数组遍历

循环遍历

for循环或while循环

for...in循环

for...of循环

方法遍历

forEach()

map()

filter()

reduce()

every()

some()

数组方法

Array.isArray()

push() / pop()

shift() / unshift()

join()

concat()

reverse()

indexOf()

find()

---

数组定义及属性

数组（array）是按次序排列的一组值。每个值的位置都有编号（从 0开始），整个数组用方括号表示。

//定义一个数组
var arr = ['t1', 't2', 't3'];
//除了在定义时赋值，数组也可以先定义后赋值。
var arr = [];
arr[0] = 't1';
arr[1] = 't2';
arr[2] = 't3';
//任何类型的数据，都可以放入数组
var arr = [ 100, [1, 2, 3],false ];
//如果数组的元素还是数组，就形成了多维数组
var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4
//数组的length属性，返回数组的成员数量
['t1', 't2', 't3'].length // 3

数组遍历

循环遍历

for循环或while循环

a = ['newElement1', 'newElement2', 'newElement3'];

// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

for...in循环

var a = ['newElement1', 'newElement2', 'newElement3'];
for (var i in a) {
  console.log(a[i]);
}

for...of循环

ES6引入的新语法，可以直接遍历数组中的元素。

var array = [1, 2, 3, 4, 5];
for (var value of array) {
  console.log(value);
}

方法遍历

forEach()

数组的forEach()方法为每个数组元素执行一次给定的函数。

var array = [1, 2, 3, 4, 5];
for (var value of array) {
  console.log(value);
}

map()

map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var array = [1, 2, 3, 4, 5];
var squared = array.map(function(value) {
  return value * value;
});
console.log(squared); // 输出：[1, 4, 9, 16, 25]

filter()

filter()方法从数组中筛选出符合条件的元素组成的新数组。

var array = [1, 2, 3, 4, 5];
var even = array.filter(function(value) {
  return value % 2 === 0;
});
console.log(even); // 输出：[2, 4]

reduce()

reduce()方法用来把数组元素合并成一个值。

var array = [1, 2, 3, 4, 5];
var sum = array.reduce(function(accumulator, value) {
  return accumulator + value;
}, 0);//0是累加起始值
console.log(sum); // 输出：15

every()

every()方法检查数组中的每一个元素是否都满足条件，返回布尔值。

let numbers = [2, 4, 6, 8];
let allEven = numbers.every(number => number % 2 === 0);
console.log(allEven); // 输出：true

some()

some() 方法检查数组中的元素是否至少有一个满足条件，如果至少有一个元素满足条件，返回 true，表示“至少有一个满足条件”。如果没有任何元素满足条件，返回 false。

let numbers = [1, 4, 5, 7];
let anyEven = numbers.some(number => number % 2 === 0);
console.log(anyEven); // 输出：true

数组方法

Array.isArray()

Array.isArray 方法返回一个布尔值，表示参数是否为数组。它可以弥补 typeof 运算符的不足（typeof 无法准确判断数组类型）

var arr = ['newElement1', 'newElement2', 'newElement3'];
console.log(typeof arr); // object
Array.isArray(arr) // true

push() / pop()

• push 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。
• pop 方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

// 定义一个数组
var numbers = [1, 2, 3];

// 使用 push() 方法添加元素
numbers.push(4);
console.log('After pushing 4:', numbers); // 输出：[1, 2, 3, 4]

// 使用 pop() 方法删除数组的最后一个元素
var removedElement = numbers.pop();
console.log('Removed element:', removedElement); // 输出：4
console.log('Array after popping:', numbers); // 输出：[1, 2, 3]

shift() / unshift()

• shift 方法用于删除数组的第一个元素，并返回该元素。注意，该方 法会改变原数组
• unshift 方法用于在数组的第一个位置添加元素，并返回添加新元素后 的数组长度。注意，该方法会改变原数组
• unshift 方法可以接受多个参数，这些参数都会添加到目标数组头部

// 定义一个数字数组
var numbers = [2, 3, 4];

// 使用 unshift() 方法在数组的第一个位置添加一个元素
numbers.unshift(1);
console.log('After unshifting 1:', numbers); // 输出：[1, 2, 3, 4]

// 使用 shift() 方法删除数组的第一个元素
var removedElement = numbers.shift();
console.log('Removed element:', removedElement); // 输出：1
console.log('Array after shifting:', numbers); // 输出：[2, 3, 4]

// 使用 unshift() 方法在数组的第一个位置添加多个元素
numbers.unshift(0, -1);
console.log('After unshifting 0 and -1:', numbers); // 输出：[0, -1, 2, 3, 4]

join()

join 方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔

• 如果数组成员是 undefined 或 null 或空位，会被转成空字符串

// 定义一个数组
var numbers = [1, 2, 3, 4, 5];

// 使用 join() 方法将数组元素连接成一个字符串，使用逗号分隔
var joinedString = numbers.join();
console.log('Joined string:', joinedString); // 输出："1,2,3,4,5"

// 使用自定义分隔符连接数组元素
var joinedStringWithDash = numbers.join('-');
console.log('Joined string with dash:', joinedStringWithDash); // 输出："1-2-3-4-5"

// 数组中包含 undefined、null 或空位
var mixedArray = [1, undefined, null, 'text', ''];
var joinedMixedString = mixedArray.join(' ');
console.log('Joined mixed array:', joinedMixedString); // 输出："1  text "

• 数组的 join 配合字符串的 split 可以实现数组与字符串的互换

// 字符串转数组
var string = "1-2-3-4-5";
var stringToArray = string.split('-');
console.log('String to array:', stringToArray); // 输出：["1", "2", "3", "4", "5"]

// 数组转字符串
var array = ["1", "2", "3", "4", "5"];
var arrayToString = array.join('-');
console.log('Array to string:', arrayToString); // 输出："1-2-3-4-5"

concat()

• concat 方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变
• 除了数组作为参数， concat 也接受其他类型的值作为参数，添加到目标数组尾部。

// 定义两个数组
var array1 = [1, 2, 3];
var array2 = ['a', 'b', 'c'];

// 使用 concat() 方法合并数组
var combinedArray = array1.concat(array2);
console.log('Combined array:', combinedArray); // 输出：[1, 2, 3, 'a', 'b', 'c']

// 定义一个包含非数组类型的值
var array3 = [true, null, undefined];
var valueToConcat = 'extra value';

// 使用 concat() 方法将非数组类型的值添加到数组尾部
var extendedArray = array3.concat(valueToConcat);
console.log('Extended array:', extendedArray); // 输出：[true, null, undefined, 'extra value']

reverse()

reverse 方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。

// 定义一个数字数组
var numbers = [1, 2, 3, 4, 5];

// 使用 reverse() 方法颠倒数组元素的顺序
numbers.reverse();
console.log('Reversed array:', numbers); // 输出：[5, 4, 3, 2, 1]

• 实现字符串反转排列

var str = "hello";
str = str.split("").reverse().join("");//"olleh"

indexOf()

• indexOf 方法返回给定元素在数组中第一次出现的位置，如果没有出 现则返回 -1
• indexOf 方法还可以接受第二个参数，表示搜索的开始位置

// 定义一个数组
var fruits = ['apple', 'banana', 'mango', 'orange', 'banana'];

// 查找 'banana' 的位置
var firstBanana = fruits.indexOf('banana');
console.log('First banana at:', firstBanana); // 输出：1

// 从索引 2 开始搜索 'banana'
var secondBanana = fruits.indexOf('banana', 2);
console.log('Second banana at:', secondBanana); // 输出：4

// 查找不存在的元素 'grape'
var grape = fruits.indexOf('grape');
console.log('Grape found at:', grape); // 输出：-1

find()

find() 方法在数组中查找符合测试条件的第一个元素，并返回那个元素的值。如果没有找到符合条件的元素，返回 undefined。

// 定义一个数字数组
var numbers = [5, 12, 8, 130, 44];

// 使用 find() 方法查找第一个大于 10 的数字
var firstGreaterThanTen = numbers.find(number => number > 10);

console.log(firstGreaterThanTen); // 输出：12

---

 感谢阅读，如有错误，欢迎指正！