1. 栈方法(后进先出)
push()方法:向数组末尾添加一个或更多元素,返回的是数组新的长度。
传递参数数量不定,可以传递 0 到多个,参数之间使用 , 隔开
- 改变了原有数组,不会返回新数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var length = fruits.push("Kiwi");
console.log(length) // 5
console.log(fruits) // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
pop()方法:向数组中删除数组最后一个元素并且返回该元素。如果数组为空就返回undefined。
不需要传递参数
- 改变了原有数组,不会返回新数组
- 如果数组为空就返回undefined。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var item = fruits.pop();
console.log(item); // "Mango"
console.log(fruits); // ["Banana", "Orange", "Apple"]
var fruits = [];
var item = fruits.pop();
console.log(item); // undefined
console.log(fruits); // []
2. 队列方法
shift() 方法:把数组的第一个元素从其中删除,并返回第一个元素的值。
不需要传递参数
- 改变了原有数组,不会返回新数组
- 如果数组是空的,则shift() 方法不进行任何操作,返回undefined。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var item = fruits.shift();
console.log(item); // "Banana"
console.log(fruits); // ["Orange", "Apple", "Mango"]
var fruits = [];
var item = fruits.shift();
console.log(item); // undefined
console.log(fruits); // []
unshift()方法:向数组的开头添加一个或更多元素,返回的是数组新的长度。
传递参数数量不定,可以传递 0 到多个,参数之间使用 , 隔开
- 改变了原有数组,不会返回新数组
- 在IE6,IE7下,数据有添加成功,但返回值却是undefined.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var length = fruits.unshift("Lemon","Pineapple");
console.log(length); // 6
console.log(fruits); // ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]
3. 转换方法
join() 方法:用于把数组中的所有元素转换一个字符串。
- 在转换时,内部的空值和未定义值会去除,但是 分隔符 会保留
- 对于对象会 转换成 [object, object]
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
console.log(fruits); // ["Banana", "Orange", "Apple", "Mango"]
console.log(energy); // "Banana,Orange,Apple,Mango"
特殊元素转化
var fruits = ["Banana", "", 123, NaN, undefined, null, () => { }, { name: 'szx', age: 28 }, []];
var energy = fruits.join();
console.log(energy) // Banana,,123,NaN,,,() => { },[object Object],
4. 重排序方法
sort() 方法:用于对数组的元素进行排序。
sort(sortfunction):可传递一个参数
- 默认排序顺序为按字母升序。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到字符串,以确定如何排序。(实质按照首字母ASCII码顺序进行排列,首字母相同比较第二个,依次类推)
- 参数可选,非必需。
- 若传递参数,参数必须是一个函数,且函数须有两个参数。sort() 方法会自动把数组中元素两两传入函数中,根据函数返回值进行排序。如果想让第一个参数应该位于第二个之前则返回一个负数;如果想让第一个参数位于第二个之后则返回一个正数;如果两个参数相等,则保持原有顺序,返回0。(可以自定义排序方法,本质上最终目的还是两个具体的值之间进行比大小)
- 改变了原有数组,不会返回新数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = fruits.sort();
console.log(fruits) // ["Apple", "Banana", "Mango", "Orange"]
var fruits = [
{ name: "Banana", price: 13 },
{ name: "Orange", price: 8 },
{ name: "Apple", price: 20 },
{ name: "Mango", price: 4 }
]
fruits = fruits.sort((val1, val2) => {
if (val1.price < val2.price) {
return -1
} else if (val1.price > val2.price) {
return 1
} else {
return 0
}
});
console.log(fruits)
// [{ name: "Mango", price: 4 }, { name: "Orange", price: 8 }, { name: "Banana", price: 13 }, { name: "Apple", price: 20 }]
reverse()方法:用于颠倒数组中元素的顺序。
无参数
- 只是将数组中的现有排列顺序进行反向,和元素的值无关
- 改变了原有数组,不会返回新数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits); // ["Mango", "Apple", "Orange", "Banana"]
5. 操作方法
concat() 方法:连接两个或多个数组。
可传递多个参数,
- 参数数据类型不作限制。若类型不是数组,则连接后作为一个数组的元素。
- 不会改变现有的数组,而返回连接后的新数组。
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = "Robin";
var children = hege.concat(stale, kai);
console.log(children); // ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin"]
splice() 方法:插入、删除或替换数组的元素。
功能强大,增删改都可以
可传递3个参数,splice(start, length, newItem)
- 参数1:必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
- 参数2:可选。规定应该删除多少元素。必须是数字,但可以是"0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
- 参数3:可选。要添加到数组的新元素,新元素使用分隔符 , 隔开
- 改变了原有数组,不会返回新数组
插入元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
console.log(fruits); // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
// 从下标为2的元素开始,删除0个元素,插入指定新元素
删除元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1);
console.log(fruits); // ["Banana", "Orange", "Mango"]
// 从下标为2的元素开始,删除1个元素
替换元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits); // ["Banana", "Orange", "Lemon", "Kiwi", "Mango"]
// 从下标为2的元素开始,先删除1个元素,再插入指定新元素
slice() 方法:从已有的数组中截取选定的元素,组成新的数组返回。
传递两个参数,slice(start, end)
- 参数1:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
- 参数2:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var arr1 = fruits.slice(1,3); // ["Orange", "Lemon"]
var arr2 = fruits.slice(2); // ["Lemon", "Apple", "Mango"]
var arr3 = fruits.slice(-5, -2); // ["Banana", "Orange", "Lemon"]
6. 遍历方法
every() 方法:检测数组所有元素是否都符合指定条件(通过函数提供)
传递两个参数:every( function(currentValue, index, arr){ }, thisValue )
- 参数1:必需,且必须是函数。函数还必须有返回值,返回当前元素在函数中自定义判断的结果(直接返回布尔值或者返回结果为布尔值的表达式) 注意不要写成 箭头函数,否则 this 指向 windows
此函数的参数要求:
- 参数1:必需,进行条件判断的当前元素,数组中的每个元素都会被依次传入。
- 参数2:可选,当前元素的索引值。
- 参数3:可选,当期元素属于的数组对象。
- 参数2:可选。对象作为回调函数的 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
- 对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略
- 不会改变现有的数组。
// 判断所有元素是否都小于 30
var ages = [32, 33, 16, 40];
var bool = ages.every(function (item) {
return item < 30
})
console.log(bool) // false
some()方法:检测数组中的元素是否满足指定条件(通过函数提供)。
传递两个参数:some( function(currentValue, index, arr){ }, thisValue )
- 参数1:必需,且必须是函数。函数还必须有返回值,返回当前元素在函数中自定义判断的结果(直接返回布尔值或者返回结果为布尔值的表达式) 注意不要写成 箭头函数,否则 this 指向 windows
此函数的参数要求:
- 参数1:必需,进行条件判断的当前元素,数组中的每个元素都会被依次传入。
- 参数2:可选,当前元素的索引值。
- 参数3:可选,当期元素属于的数组对象。
- 参数2:可选。对象作为回调函数的 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
- 对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。
- 不会改变现有的数组。
// 判断是否有元素小于 30
var ages = [32, 33, 16, 40];
var bool = ages.some(function (item) {
return item < 30
})
console.log(bool) // true
every() 和 some() 类似,every是所有元素都满足条件才返回 true,some 是只要有一个满足条件就返回 true
IE 9 及其以上支持
filter() 方法:在数组中筛选满足条件的元素,组成新数组返回
传递两个参数:filter( function(currentValue, index, arr){ }, thisValue )
- 参数1:必需,且必须是函数。函数还必须有返回值,返回当前元素在函数中自定义过滤条件判断的结果(直接返回布尔值或者返回结果为布尔值的表达式) 注意不要写成 箭头函数,否则 this 指向 windows
此函数的参数要求:
- 参数1:必需,进行条件判断的当前元素,数组中的每个元素都会被依次传入。
- 参数2:可选,当前元素的索引值。
- 参数3:可选,当期元素属于的数组对象。
- 参数2:可选。对象作为回调函数的 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
- 对数组中的每个元素都执行一次指定的函数(callback),并且创建一个新的数组,该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略,同时,新创建的数组也不会包含这些元素。
- 只有在回调函数执行前传入的数组元素才有效,在回调函数开始执行后才添加的元素将被忽略,而在回调函数开始执行到最后一个元素这一期间,数组元素被删除或者被更改的,将以回调函数访问到该元素的时间为准,被删除的元素将被忽略。
// 获取小于 35 的元素
var ages = [32, 33, 16, 40];
var arr = ages.filter(function (item) {
return item < 35
})
console.log(arr); //[32, 33, 16]
indexOf() 方法:返回某个指定的元素在数组指定范围内首次出现的位置。
传递两个参数:indexOf(item, start)
- 参数1: 必需,进行查找的元素
- 参数2: 可选。开始查找的起始位置,默认为0。合法取值是 -length <= start <= length,且必需为整数。可接受负值,意为从倒数第几个开始
- 搜索是正方向进行的。
- 搜索方向和范围是 start -----> length
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Orange"); // 1
var b = fruits.indexOf("Orange",4); // 5
var c = fruits.indexOf("orange"); // -1
lastIndexOf()方法:返回某个指定的元素在数组指定范围内最后一次出现的位置。
传递两个参数:lastIndexOf(item, start)
- 参数1: 必需,进行查找的元素
- 参数2: 可选。开始查找的起始位置,默认为数组的长度。合法取值是 -length <= start <= length,且必需为整数。可接受负值,意为从倒数第几个开始
- 搜索是反方向进行的。
- 搜索方向和范围是 0 <----- start
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Orange"); // 5
var b = fruits.lastIndexOf("Orange",4); // 1
var c = fruits.lastIndexOf("orange"); // -1
map() 方法:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
传递两个参数 map(function(currentValue, index, arr), thisValue)
- 参数1:必需,回调函数。此函数有三个参数
- 参数1:currentValue,必需。依次传递的当前元素
- 参数2:index,可选,当前元素的索引
- 参数3:arr,可选,当前元素所属的数组对象。
- 参数2:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue ,“this” 的值为 “undefined” - 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
- 对于空数组是不会执行回调函数的。
// 将数组中的每个元素都 乘以2,得到一个新数组
var fruits = [1, 2, 3, 4, 5, 6];
var arr = fruits.map(function (item) {
return item * 2
})
console.log(arr); // [2, 4, 6, 8, 10, 12]
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
接受两个参数,reduce(function(total, currentValue, currentIndex, arr), initialValue)
- 参数1:必需,回调函数。此函数有四个参数
- 参数1:total,必需。累加起始值,或者计算结束后的返回值。每进行一次累加后都会更新为累加后的值
- 参数2:currentValue,必需。依次传递的当前元素
- 参数3:currentIndex,可选,当前元素的索引
- 参数4:arr,可选,当前元素所属的数组对象。
- 参数2:可选。传递给函数的初始值,即total的默认值,若不传递,则为第一个元素的值。
- 返回值是累加的结果,不会更改原数组
- 对于空数组是不会执行回调函数的。
- 对于传递的参数在循环累加过程中都已有对应的值,传递参数是根据需要在方法内进行相应的逻辑使用
var nums = [1, 2, 3, 4, 5, 6];
var sum = nums.reduce(function (total, item) {
return total + item;
}, 30)
console.log(sum) // 51
reduce() 和 reduceRight() 作用相同。
reduce() 是数组中从左向右累加,reduceRight()是从右向左累加
forEach()方法:调用数组的每个元素,并将元素传递给回调函数。
传递两个参数 forEach(function(currentValue, index, arr), thisValue)
- 参数1:必需,回调函数。此函数有三个参数
- 参数1:currentValue,必需。依次传递的当前元素
- 参数2:index,可选,当前元素的索引
- 参数3:arr,可选,当前元素所属的数组对象。
- 参数2:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue ,“this” 的值为 “undefined” - 没有返回值,只是依次让筛选出每个元素执行同一个操作
- 对于空数组是不会执行回调函数的。
var nums = [1, 2, 3, 4, 5, 6];
var sum = 0;
nums.forEach(function (item) {
sum += item;
},30)
console.log(sum) // 21