javascript 数组的方法

数组的方法：
按照是否会改变原数组来区分
（如果有错误欢迎留言或私信指出）

1、不会改变原数组

1、concat()

连接两个或多个数组（用于合并两个或多个数组），不影响原数组（不更改现有的数组） 返回一个新数组

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var newarr = arr1.concat(arr2);
console.log(newarr); //返回[1,2,3,4,5,6]
console.log(arr1); //返回[1,2,3]
console.log(arr2); //返回[4,5,6]

2、join()

join(分隔符)
返回一个字符串，这个方法是加入一个字符串类型的数据，然后依次将数组的每个数据连接起来

var arr = [1,2,3];
// 没有分隔符
console.log( arr.join()); //返回 1,2,3
// 有分隔符
console.log(arr.join('-')); //返回1-2-3
console.log(arr.join('&')); //返回1&2&3
console.log(arr);   //返回[1,2,3]

3、toString()

将数组转换为字符串
返回一个由所有数组元素组合而成的字符串，与没有参数的join()方法一样

var arr = [1, 2, 3];
console.log(arr.toString());; //返回 1,2,3
console.log(arr);   //返回[1,2,3]

4、slice()

slice(start,end)
start，end都是数组的index。
方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）（end是可选参数）。原始数组不会被改变。
（也就是说数组截取 slice(start,end) 返回被截取的新数组）
该方法并不会修改数组，而是返回一个 子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()

1、一个参数

1、参数是正数

 var arr1 = [1, 2, 3];
 var newarr = arr1.slice(1);
 // 一个参数就相当于从start位置一直到最后的所有的元素
 console.log(newarr); //返回[2，3]
 console.log(arr1); //返回[1,2,3]

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

 var arr1 = [1, 2, 3];
 var newarr = arr1.slice(-1);
 // 参数是-1就是从数组的最后一个元素开始
 console.log(newarr); //返回[3]
 console.log(arr1); //返回[1,2,3]

2、多个参数

1、参数是正数

 var arr1 = [1, 2, 3];
 var newarr = arr1.slice(1, 2);
 //    就是从index[1]开始到index[2],但是不包括index[2]
 console.log(newarr); //返回[2]
 console.log(arr1); //返回[1,2,3]

2、参数是负数

var arr1 = [1, 2, 3, 4, 5];
// 注意书写顺序
var newarr = arr1.slice(-3, -1);
// var newarr = arr1.slice(-1,-3);    //这样写会出现一个空数组
// 参数是倒数第三个到倒数第一个，但是不包括倒数第一个
console.log(newarr); //返回[3，4]
console.log(arr1); //返回[1, 2, 3,4,5]

5、map()

map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值，不改变原数组。
（返回一个新数组，数组元素为原始数组调用函数处理后的值）
currentValue 代表数组的每一项，index代表数组每一项的下标，arr代表数组本身
map(function(currentValue,index,arr),thisValue)

var arr1 = [1, 2, 3, 4, 5];
// item 代表数组的每一项，index代表数组每一项的下标，data代表数组本身
var arr2 = arr1.map((item, index, data) => {
    
    
    // 这个函数里面一般会return一个值，这个值就是我们想让数组中每一项变成哪一种新的值，就把这个新值return出去
    // 一般是对这个数组的每一个item调用一个方法
    // return fn(item) 就会把item使用了fn()这个方法之后得到的新值return出去，替代数组中原来的那个值，形成新的数组
    // return fn(item);

    // 例如想要arr1数组里的每一项都增加5
    return item + 5;
});
console.log(arr1); //返回[1, 2, 3,4,5]
console.log(arr2); //返回[6,7,8,9,10]

6、filter()

filter(function(currentValue,index,arr))
currentValue 代表数组的每一项，index代表数组每一项的下标，arr代表数组本身

filter 函数 的参数是一个回调函数，filter中的回调函数有一个要求，必须要返回一个 boolean 值，
true：当返回true时，函数内部会自动将这次回调的 n加入到新的数组中
false：当返回false时，函数内部会过滤掉这次的 n

内部会创建一个新的数组，所以只需要接收一下就行了
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

 var nums = [32, 33, 16, 40, 120, 135];
 let newNums = nums.filter(function (n) {
    
    
     // 返回数组nums中小于100的元素
     return n < 100
 })
 console.log(newNums); //返回[32, 33, 16, 40]
 console.log(nums); //返回[32, 33, 16, 40,120,135]

7、forEach()

为数组的每一个元素执行一次回调函数
arr.forEach(function(currentValue,index,arr))
currentValue 代表数组的每一项(currentValue是必需的），index代表数组每一项的下标，arr代表数组本身

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
tips: forEach()中不支持使用break(报错)和return(不能结束循环)，有需要时可使用常规的for循环。

const arr = [4, 9, 16, 25];
const arr1 = [];
// 遍历arr 数组，然后把arr里面的每一项加到arr1里面
arr.forEach(item => arr1.push(item))
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [4, 9, 16, 25]

8、every()

arr.every(function(currentValue,index,arr))
currentValue 代表数组的每一项(currentValue是必需的），index代表数组每一项的下标，arr代表数组本身

every() 方法使用指定函数检测数组中的所有元素，检测数组中所有元素是否都符合指定条件：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

const arr = [4, 9, 16, 25];
// 检测arr数组中是否所有的元素都大于10，返回值用b接收
const b = arr.every(item => item > 10)
// 检测arr数组中是否所有的元素都大于1
const c = arr.every(item => item > 1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // false
console.log(c) // true

9、some()

arr.some(function(currentValue,index,arr))
currentValue 代表数组的每一项(currentValue是必需的），index代表数组每一项的下标，arr代表数组本身

some() 方法用于检测数组中的元素是否满足指定条件，会依次执行数组的每个元素，返回的是布尔值

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。

 const arr = [4, 9, 16, 25];
 //   检测arr数组中是否有元素大于10
 const b = arr.some(item => item > 10)
 const c = arr.some(item => item < 1)
 console.log(arr) // [4, 9, 16, 25]
 console.log(b) // true
 console.log(c) // false

10、findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
(就是在findIndex()里面写一个函数，满足这个函数的条件的就返回第一个满足条件的那个元素的索引，要是全都不满足条件就返回-1)
（只返回第一个满足条件的，找到满足条件的之后，后面的元素就不再执行了）
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

const arr = [4, 9, 16, 25];
const b = arr.findIndex(item => item > 10);
const c = arr.findIndex(item => item < 1);
console.log(b) // 2 
console.log(c) // -1
console.log(arr) // [4, 9, 16, 25]

11、indexOf()

参数是想要查找的元素
数组中查找给定元素的第一个索引 返回值如果存在就返回索引号，不存在返回-1

var arr = [1, 2, 5, 4, 9];
console.log(arr.indexOf(2)); //返回2这个数组元素的索引 1
console.log(arr); //[1,2,5,4,9]

12、find()

方法返回数组中满足提供的测试函数的第一个元素的值，之后的值不会再调用执行函数。否则返回 undefined。
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，
（就是在find()中有一个函数，返回的是数组第一个满足这个函数条件的值，没有满足条件的就返回undefined）
注意: find() 对于空数组，函数是不会执行的。

const arr = [4, 9, 16, 25];
const b = arr.find(item => item > 10)
const c = arr.find(item => item < 1)
console.log(arr) // [4, 9, 16, 25] 
console.log(b) // 16 
console.log(c) //undefined

13、includes()

includes() 返回值是个布尔类型，区分大小写
判断当前字符串是否包含指定的字符/字符串，包含就返回true，不包含就返回false
str.includes(参数); //参数是需要判断的字符/字符串

const arr = [4, 9, 16, 25];
console.log(arr.includes(4)); // true
console.log(arr); //[4, 9, 16, 25]

14、reduce()

reduce 为数组的每一个元素依次执行回调函数（不包括数组中被删除或者从未赋值的元素）

arr.reduce(function (total, currentValue, currentIndex, arr), initialValue)
total 必需， 初始值， 或者是计算结束后的返回值（ 就是上一次回调的返回值）
currentValue 必需， 当前被处理的元素
currentIndex 可选， 当前元素的索引
arr 可选， 当前元素所属的数组
initialValue 初始化值， 就是第一次调用callback的第一个参数， 一般写0

var arr = [1, 2, 5, 9];
var newarr = arr.reduce((total, currentValue) => {
    
    
    // 就是初始值是0，然后让上一轮回调的返回值加上当前项元素的值，一直循环完整个数组
    return total + currentValue;
}, 0)
console.log(newarr); //17
console.log(arr);	//[1,2,5,9]

2、会改变原数组

1、push()

push() 在数组末尾添加一个或多个数组元素，参数可以直接写要添加的元素，push完之后，返回的是新数组的长度，原数组也会变化

1、向空数组添加一个元素

 var arr = [];
 var arrnew = arr.push(4); //向数组arr里面添加一个值为4的数组元素
 console.log(arrnew); //输出 1  这个1 是新的数组的长度
 console.log(arr); //输出[4]

2、向有元素的数组添加多个元素

var arr1 = [1, 2, 3];
var newarr = arr1.push(4, 5);
// 参数可以直接写要添加的元素,返回的是新数组的长度，原数组也会变化
console.log(newarr); //返回5   这个5是新数组的长度
//  原数组也被改变了
console.log(arr1); //返回[1,2,3,4,5]

2、unshift()

unshift() 在数组的开头添加一个或多个数组元素，参数直接写要添加的元素，unshift 完之后，返回的是新数组的长度，原数组也会变化

 var arr1 = [1, 2, 3];
 var newarr = arr1.unshift(4, 5);
 // 参数直接写要添加的元素，unshift 完之后，返回的是新数组的长度，原数组也会变化
 console.log(newarr); //返回5
 console.log(arr1); //返回[4,5,1,2,3]

3、pop()

pop() 删除 数组的最后 一个 元素，一次只删除一个，返回值是 被删除的那个元素，没有参数，原数组也会变化

1、 空数组

var arr = [];
console.log(arr.pop());; //返回undefined

2、 有元素的数组

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var newarr = arr1.pop();
// 返回值是 被删除的那个元素，没有参数，原数组也会变化
console.log(newarr); //返回3
console.log(arr1); //返回[1,2]

4、shift()

shift() 删除 数组的第一个元素，一次删一个，返回值是 被删除的那个元素，没有参数，原数组也会变化

1、空数组

var arr = [];
console.log( arr.shift()); //undefined

2、有元素的数组

 var arr1 = [1, 2, 3];
 var newarr = arr1.shift();
 // 返回值是 被删除的那个元素，没有参数，原数组也会变化
 console.log(newarr); //返回1
 console.log(arr1); //返回[2,3]

5、sort()

sort() 方法是对数组的引用，是在原数组上进行排序，不生成新的数组，如果调用该方法时没有使用参数，那么将按照字母顺序对数组中的元素进行排序，
就是按照字符编码的顺序进行排序（从小到大）
如果想要其他标准进行排序，需要提供比较函数，让该函数比较两个值，然后返回一个用于说明两个值的相对顺序的数字。

1、直接使用

// 直接使用sort()会有问题，一般需要加工后使用
var arr = [1, 2, 5, 4, 9];
// 返回的就是原数组排序之后的，所以是会更改原数组的
console.log(arr.sort()); //[1, 2, 4, 5, 9]
console.log(arr);

2、升序

// 2、这是按照升序
var arr = [1, 2, 5, 4, 9];
var arr1 = arr.sort(function (a, b) {
    
    
    return a - b; //这是按照升序
})
console.log(arr1); //[1, 2, 4, 5, 9]
console.log(arr); //[1, 2, 4, 5, 9]

3、降序

// 2、这是按照升序
var arr = [1, 2, 5, 4, 9];
var arr1 = arr.sort(function (a, b) {
    
    
    return b - a; //这是按照降序
})
console.log(arr1); //[9, 5, 4, 2, 1]
console.log(arr); //[9, 5, 4, 2, 1]

6.splice()

splice 作用 ：删除元素/ 插入元素 /替换元素
splice(start,deleteCount) 数组删除splice(第几个开始，要删除的个数) 返回被删除项目的新数组，会影响到原数组

1、删除元素 splice(start,deleteCount)

如果是 删除元素 splice(start,deleteCount)，第二个参数就是要删除几个元素，如果没传参数就会把从 start 开始到结尾的所有元素都删除

 var arr1 = [1,2,3];
 var newarr = arr1.splice(1,2);
 // 返回被删除元素的新数组，会影响到原数组
 console.log(newarr); //返回[2,3]
 console.log(arr1); //返回[1]

2、替换元素 splice(start, end, replace)

替换元素： splice(start, end, replace) 第一个是开始的位置， 第二个参数是结束的位置， 第三个是要替换的元素内容
（就是相当于，先执行 删除元素，删掉 start 删除 end个，再从 start 位置把 replace 的内容添进去）
例：this.names.splice(1,2,‘aaa’,‘bbb’); 就是把index 从1开始的两个元素删掉，在这个删掉的位置添加’aaa’,‘bbb’
this.names.splice(1,2,‘aaa’,‘bbb’,‘cccc’); 如果replace 元素多于start 到end 的元素，就执行的就是
删掉start到end的元素， 然后从start位置开始插入元素， 没有位数的限制

var arr1 = [1, 2, 3];
// 删除从index为1开始的两个元素，然后从index为1的位置把111,222加进去
var newarr = arr1.splice(1, 2, 111, 222);
// 返回被删除项目的新数组，会影响到原数组
console.log(newarr); //返回[2,3]
console.log(arr1); //返回[1,111,222]

3、 插入

插入元素 splice(start,0,replace) start是开始插入元素的位置，end位置是 0 ，意思就是一个都不删，replace的位置就是要插入的元素

var arr1 = [1, 2, 3];
// 从index为1的位置开始，删除0个，插入111,222
var newarr = arr1.splice(1, 0, 111, 222);
// 返回被删除项目的新数组，会影响到原数组
console.log(newarr); //返回[] 返回的是一个空数组，因为没有删除任何的元素
console.log(arr1); //返回[1,111,222,2,3]

7、reverse()

反转数组，会改变原数组

var arr = [1, 2, 5, 9];
var newarr = arr.reverse();
console.log(arr); //[9,5,2,1]
console.log(newarr); [9,5,2,1]