一、增(下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响)
1. push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度(该方法修改原有数组)
<script>
/* push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。 */
function demoPush() {
var arr = [2, 4, 6, 8, 10];
var newArr = arr.push(12);
console.log(newArr); //6 该数组的新长度
console.log(arr); //[2, 4, 6, 8, 10, 12]
newArr = arr.push(14, 16, 18, 20);
console.log(newArr); //10 该数组的新长度
console.log(arr); //[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
}
demoPush()
</script>
2. unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)
<script>
// unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
// (该方法修改原有数组)
function demoUnshift() {
var arr = [9, 11, 13];
console.log(arr.unshift(7)); //4
console.log(arr); //[7, 9, 11, 13]
console.log(arr.unshift(1, 3, 5)); //7
console.log(arr); //[1, 3, 5, 7, 9, 11, 13]
}
demoUnshift()
</script>
3. splice() 方法通过删除或替换现有元素或者添加新的元素来修改数组,并以数组形式返回被修改的内容,此方法会改变原数组
<script>
// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
// 并以数组形式返回被修改的内容。此方法会改变原数组
function demoSplice() {
var arr = ['星期一', '星期三', '星期四', '星期六'];
arr.splice(1, 0, '星期二');
console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期六']
}
demoSplice()
</script>
4. concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
<script>
// concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
function demoConcat() {
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var arr3 = arr1.concat(arr2);
console.log(arr3); //['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr1); //['a', 'b', 'c']
console.log(arr2); //['d', 'e', 'f']
var arr = [1, 2, 3];
var newarr = arr.concat(4, 5, [6, 7, 8, 9], [10, 11], 12);
console.log(newarr); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
}
demoConcat()
</script>
二、删(下面三种都会影响原数组,最后一项不影响原数组)
1. pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度
<script>
/* pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。 */
function demoPop() {
var arr = ["香蕉", "苹果", "橘子", "西瓜", "葡萄"];
console.log(arr.pop()); //葡萄
console.log(arr.length); //4
console.log(arr); //['香蕉', '苹果', '橘子', '西瓜']
}
demoPop()
</script>
2. shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度
<script>
// shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度
function demoShift() {
var arr = ['a', 'b', 'c', 'd', 'e'];
var deleteHead = arr.shift();
console.log(deleteHead); //a
console.log(arr); //['b', 'c', 'd', 'e']
}
demoShift()
</script>
3. splice() 方法通过删除或替换现有元素或者添加新的元素来修改数组,并以数组形式返回被修改的内容,此方法会改变原数组
<script>
// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
// 并以数组形式返回被修改的内容。此方法会改变原数组
function demoSplice() {
var arr = ['星期一', '星期三', '星期四', '星期六'];
// 由被删除的元素组成的一个数组。
// 如果只删除了一个元素,则返回只包含一个元素的数组。
// 如果没有删除元素,则返回空数组。
var ret = arr.splice(4, 1, '星期五');
console.log(ret); //星期六
console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期五']
}
demoSplice()
</script>
三、改(即修改原来数组的内容,常用splice
)
1. splice() 方法通过删除或替换现有元素或者添加新的元素来修改数组,并以数组形式返回被修改的内容,此方法会改变原数组
<script>
// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
// 并以数组形式返回被修改的内容。此方法会改变原数组
function demoSplice() {
var arr = ['星期一', '星期三', '星期四', '星期五'];
ret = arr.splice(1, 0, '星期二'); //增加一个元素
console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期五']
ret = arr.splice(4, 1, '星期六','星期日'); //插入两个值,删除一个元素
console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期六', '星期日']
}
demoSplice()
</script>
四、查
10. indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
<script>
// indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
function demoIndexOf(){
var arr = ['red','pink','blue','green','yellow','red'];
// 寻找red首次出现的下标
console.log(arr.indexOf('red')); //0
// 从序号2向后寻找red首次出现的下标
console.log(arr.indexOf('red',2)); //5
console.log(arr.indexOf('while')); //-1
}
demoIndexOf()
</script>
五、排序(数组有两个方法可以用来对元素重新排序)
1. reverse原地反转数组
<script>
// reverse原地反转数组,改变原数组
function demoReverse() {
var arr = [1, 2, 3];
var reverseArr = arr.reverse();
console.log(reverseArr); //[3, 2, 1]
console.log(arr); //[3, 2, 1]
}
demoReverse()
</script>
2. sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的码点(在字符集中的序号)
<script>
// sort() 方法用原地算法对数组的元素进行排序,并返回数组。
// 默认排序顺序是在将元素转换为字符串,然后比较它们的码点(在字符集中的序号)
function demoSort() {
var arr = ['zhang', 'luo', 'cai', 'hua', 'find'];
arr.sort();
console.log(arr); //['cai', 'find', 'hua', 'luo', 'zhang']
}
demoSort()
/* 自定义排序规则 */
function demoSort2() {
var arr = [22, 5, 15, 23, 48, 89, 47];
arr.sort(
function (a, b) {
return a - b
}
)
console.log(arr); //[5, 15, 22, 23, 47, 48, 89]
}
demoSort2()
</script>
六、转换
1. join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符
<script>
/* join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。
如果数组只有一个项目,那么将返回该项目而不使用分隔符。 */
function demoJoin() {
var arr = ['Fire', 'Air', 'Water'];
console.log(arr.join()); //Fire,Air,Water
console.log(arr.join('')); //FireAirWater
console.log(arr.join('-')); //Fire-Air-Water
}
demoJoin()
</script>
七、数组的批处理(都不改变原数组)
1.forEach() 方法对数组的每个元素执行一次给定的函数(或特定的操作)。
function demoForEach() {
var arr = ['a', 'b', 'c'];
arr.forEach(
// element:数组中正在处理的当前元素
// index:数组中正在处理的当前元素的索引
// arr:function方法正在操作的数组
function (element, index, arr) {
console.log('给数组每个元素进行操作', element, index, arr);
//输出
//给数组每个元素进行操作 a 0 Array(3)
//给数组每个元素进行操作 b 1 Array(3)
//给数组每个元素进行操作 c 2 Array(3)
}
)
}
demoForEach();
2.map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后 的返回值
function demoMap() {
var arr = [3, 6, 9, 12, 15];
var arr2 = arr.map(
// element:数组中正在处理的当前元素
// index:数组中正在处理的当前元素的索引
// arr:function方法正在操作的数组
function (element, index, arr) {
return element * 3;
}
);
console.log(arr);//[3, 6, 9, 12, 15]
console.log(arr2);//[9, 18, 27, 36, 45]
}
demoMap();
3.filter() 方法创建一个新数组, 当中包含通过测试(用函数定义测试规则)的所有元素
function demoFilter() {
var arr = [1, 2, 4, 8, 10];
//ret 接收结果
var ret = arr.filter(
// element:数组中正在处理的当前元素
// index:数组中正在处理的当前元素的索引
// arr:function方法正在操作的数组
function (element, index, arr) {
return element >= 4;
}
);
console.log(ret);//[4, 8, 10]
}
demoFilter();
4.every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试,它返回一个布尔值
function demoEvery() {
//先定义测试函数
// element:数组中正在处理的当前元素
// index:数组中正在处理的当前元素的索引
// arr:function方法正在操作的数组
var test = function (element, index, arr) {
return element >= 3;
}
var arr = [3, 6, 9, 12, 15];
//测试是否arr中的每一个元素都能通过test的测试
var ret = arr.every(test);
console.log(ret);//true
}
demoEvery();
5.some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试,它返回的是一个Boolean类型的值
function demoSome() {
var arr = [2, 4, 6, 9, 10];
// element:数组中正在处理的当前元素
var odd = function (element) {
return (element % 2 === 1);
}
var ret = arr.some(odd);
console.log(ret);//true
}
demoSome();
6.reduce()
方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值
function demoReduce() {
var arr = [3, 6, 9, 12, 15];
//acc 累计器
//element 当前值
var reducer = function (acc, element) {
return acc + element;
}
var ret = arr.reduce(reducer);
//3 + 6 + 9 + 12 + 15
console.log(ret);//45
//以10当前值累计
//10 + 3 + 6 + 9 + 12 + 15
console.log(arr.reduce(reducer, 10));//55
}
demoReduce();