JS 进阶 - 数组常用方法

1.操作方法

数组高阶的这几个常用方法都可以遍历数组。

1.1 .map();

.map();方法可以返回一个新的满足条件的数组，数组中的元素为原始数组（原数组）元素元素调用后函数处理的值。并且会按照原始数组的顺序依次处理元素。

注意：.map()方法不会对空数组进行检测。当返回的是基本数据类型的时候，.map()不会改变原始数组；当返回的不是基本数据类型时，会改变原始数组。

语法：

Array.map(function(currentValue, index, arr),thisValue);

currentValue:必填；指当前元素。

index:可选填；数组元素的索引(下标)。

arr:可选填；指向当前元素所属的数组。

thisValue:可选填；传递给函数的值一般用"this"的值。如果这个参数的值为空，"undefined"就会传递给"this"的值。

// 需求：把数组中的所有元素转为大小写
let arr = ['peng guo mo', 'nie mao jiao'];

let result = arr.map(function(v,i){
    return v.toUpperCase();//转为大写
    //return v.toLowerCase();//转为小写
})
console.log(result);

1.2 .find()

.find();方法是ES6新增的方法；可通过测试查找满足条件（函数内部判断）的数组的第一个元素的值；并且返回。当使用.find();方法时，可为数组中的每一个元素都调用一次执行函数。当查找到满足条件的数组元素时，.find();会返回该元素，之后的值就不会再次调用执行函数。如果没有符合条件的元素时就会返回undefined。

注意：.find()对于空数组，函数是不会执行的，也并不会改变数组的原始值。

语法：

Array.find(function(currentValue, index, arr),thisValue);

currentValue：必填；指向当前元素。

index：可填值；指元素的索引（下标）。

arr：可填值：指当前元素所属的数组。

thisValue：可填值：传递给函数的值一般用"this"的值。如果这个参数的值为空，"undefined"就会传递给"this"的值。

//返回的是数组的长度是3的第一个数。
let course = ['html', 'css', 'js', 'jquery', 'promise', 'vue', 'react', 'node.js'];

let result1 = course.find(function(v,i){
    return v.length === 3;//css 
})
console.log(result1);

1.3 .findIndex();

.findIndex();方法也是ES6新增的方法；和.find()相类似。可返回并传入一个满足测试条件（函数）的数组中的第一个元素位置的索引（下标）。可为数组中的每一个元素都调用一次执行函数。当数组中的元素在测试条件中返回true时，.findIndex()就返回符合条件的元素的索引位置。如果没有符合条件的元素就返回 -1。

注意：.findIndex();对于空数组，函数是不会执行的，也并不会改变数组的原始值。

语法

Array.findIndex(function(currentValue, index, arr), thisValue);

currentValue：必填；指向当前元素。

index：可填值；指元素的索引（下标）。

arr：可填值：指当前元素所属的数组。

thisValue：可填值：传递给函数的值一般用"this"的值。如果这个参数的值为空，"undefined"就会传递给"this"的值。

let index = ['html', 'css', 'js', 'jquery', 'promise', 'vue', 'react', 'node.js'];
let result2 = index.findIndex(function(v,i){
    return v.length === 3;//1  => 找到数组长度是3的索引(下标)。
})
console.log(result2);

1.4 .join();

.join();方法可用于把数组中的所有元素放入一个字符串，也就是将数组转换为字符串。然后通过元素指定的分隔符进行分割。

语法：

arrayObject.join(separator);

separator：分隔符

let fruits = ['苹果', '香蕉', '橘子', '芒果'];
//let str1 = fruits.join();//苹果,香蕉,橘子,芒果 => 默认为空时会自动加上逗号。
let str1 = fruits.join("");//苹果香蕉橘子芒果
console.log(str1);

1.5 .includes();

.includes()；方法也是一个ES6新增的方法；可返回一个布尔值，表示某个数组是否包含了给定的值，与字符串的includes方法类似。

语法：

string.includes(searchValue, start);

searchValue：必填值；要查找的字符串。

start：可填值；设置从那个位置开始查找，默认为0。

let fruits1 = ['苹果', '香蕉', '橘子', '芒果'];
console.log(fruits1.includes('香蕉',1));//第一个参数是数组里面包含的属性,第二个参数是数组的索引(下标)。

1.6 .reverse();

.reverse();方法可用于颠倒数组中元素的顺序。

语法：

Array.reverse();

let num1 = [1,2,3,4,5];
console.log(num1.reverse());//[5,4,3,2,1]

1.7 .sort();

.sort();方法可用于对数组中的元素进行排序；排序顺序可以是字母或者数字，并按升序或者降序。默认排序顺序是按照字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面，使用数字排序，你必需通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。但是这种方法会改变原始数组。

语法：

Array.sort(sortfunction);

let phone = ['oppo','vivo','huangwei','iphone'];
console.log(phone.sort());//如果是字母,则会根据字母的先后顺序进行排序

let data = [1, 2, -1, 10, 14, 30, 25];
let datas = data.sort(function(a,b) {
    //return a - b;//升序排列;从小到大
    return b - a; //降序排列;从大到小
})
console.log(datas);

1.8 .indexOf();

.indexOf();方法可返回数组中某一个指定的元素的索引；包含返回首次出现位置的索引。然后从头到尾地检索数组，看它是否含有对应的元素。开始检索时的位置会在数组start处或者数组的开头（没有指定的start参数时）；如果找到一个item，则返回item第一次出现时的位置。数组的索引从0开始；如果在数组中没有找到指定元素则会返回 -1。

注意：.indexOf();方法要区分大小写。

语法：

Array.indexOf(searchvalue, start);

let arrs = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arrs.indexOf('b',5));

1.9 .flat();

.flat();方法是ES10新增的方法；可用于将嵌套的数组"拉平"；也就是将多维数组转为指定维数的数组；并返回一个新的数组，对原数组没有影响。

语法：

Array.flat(n);

let total = [1, 2, 3,[4,5, 6,[7,8, 9,[10,11,12,13,14,15]]]]
// console.log(total.flat(3));
console.log(total.flat(Infinity));//Infinity表示正无穷  -Infinity表示负无穷。

1.10 .every();

.every();方法可检测数组中的所有元素是否是都符合给定的某一个条件（通过函数条件）；也就是说使用指定的函数检测数组中的所有元素。如果数组中检测有一个元素不满足条件，则整个表达式返回false，并且剩余的元素不会再进行检测。如果所有的元素都满足条件，则返回true。

注意：.every();不会对空数组进行检测；也不会改变原数组。

语法：

Array.every(function(currentValue, index, arr), thisValue);

currentValue：必填；指向当前元素。

index：可填值；指元素的索引（下标）。

arr：可填值：指当前元素所属的数组。

thisValue：可填值：传递给函数的值一般用"this"的值。如果这个参数的值为空，"undefined"就会传递给"this"的值。

let ages =  [12, 13, 14, 15, 16, 17, 18, 19, 20];

let agging = ages.every(function(v,i){
    console.log('你猜');
    return v > 15;
})
console.log(agging);//false

1.11 .some();

.some();方法可用于检测数组中的元素是否符合给定的某一个条件（函数提供）；会依次执行数组的每个元素；如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

注意：.some();不会对空数组进行检测；也不会改变原始数组。

语法：

array.some(function(currentValue, index, arr), thisValue);

currentValue：必填；指向当前元素。

index：可填值；指元素的索引（下标）。

arr：可填值：指当前元素所属的数组。

thisValue：可填值：传递给函数的值一般用"this"的值。如果这个参数的值为空，"undefined"就会传递给"this"的值。

let agess =  [12, 13, 14, 15, 16, 17, 18, 19, 20];

let result3 = agess.some(function(v){
    console.log('aaa');
    return v > 30;
})
console.log(result3);

1.12 .slice();

.slice();方法可用于截取数组，从已有的数组中返回选定的元素。也可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意：.slice();方法不会改变原数组。

语法：

array.slice(start, end);

start：可选；规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end：可选；规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

let age = [16, 17, 21, 22, 38, 39];
console.log(age.slice(2));//从数组的索引(下标)中开始截取
console.log(age.slice(2,4));//从数组下标2开始截取,到数组下标4结束截取。

1.13 .filter();

.filter();方法可以过滤数组，把满足条件的返回，会得到一个新的数组。新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：.filter();不会对空数组进行检测；也不会改变原数组。

语法：

array.filter(function(currentValue, index, arr), thisValue);

currentValue：必填；指向当前元素。

index：可填值；指元素的索引（下标）。

arr：可填值：指当前元素所属的数组。

thisValue：可填值：传递给函数的值一般用"this"的值。如果这个参数的值为空，"undefined"就会传递给"this"的值。

let aggess =  [12, 13, 14, 15, 16, 17, 18, 19, 20];

let result4 = aggess.filter(function(v){
    console.log('aaa');
    return v > 15;
})
console.log(result4);