创建数组
1、使用 Array 构造函数:
var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20) //[空属性 × 20] 创建一个包含20项的数组
var arr3 = new Array("Lance","Wyman","Eason") //创建一个包含3个字符串的数组
console.log(arr1); // []
console.log(arr2); // [空属性 × 20]
console.log(arr3); // ['Lance', 'Wyman', 'Eason']
2、var 创建数组:
var arr1 = [], //创建一个新数组
var arr2 = [20], //创建一个包含1项(20)的数组
var arr3 = ["Lance","Wyman","Eason"] //创建一个包含3个字符串的数组
console.log(arr1); // []
console.log(arr2); // [20]
console.log(arr3); // ['Lance', 'Wyman', 'Eason']
增删改查
增加
1、unshift():方法可向数组的开头添加一个或更多元素,并返回新的长度。(会改变原数组)
2、push():方法可向数组的末尾添加一个或多个元素,并返回新的长度。(会改变原数组)
3、concat() 方法用于连接两个或多个数组。而仅仅会返回被连接数组的一个副本。在没有传递参数的情况下,它只是复制当前数组并返回副本。(不会改变原数组)
4、splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(会改变原数组)
语法: arr.splice(index , howmany , item1,.....,itemX)
index:必填。 规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany:必填。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX:选填。向数组添加的新项目。
返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。
var arr=[1,2,3,4];
//unshift
/**************unshift****************/
var unshift_arr=arr.unshift("Wyman");
console.log(arr); // ['Wyman', 1, 2, 3, 4]
console.log(unshift_arr); // 5
//push
/**************push****************/
var push_arr=arr.push("Wyman","Lance");
console.log(arr); //[1, 2, 3, 4, 'Wyman', 'Lance']
console.log(push_arr); // 6
//concat
/**************concat****************/
var arr2=[11,12,13]
var arrCopy = arr.concat(arr2);
console.log(arr.concat()); // [1, 2, 3, 4] (复制数组)
console.log(arrCopy); // [1, 2, 3, 4, 11, 12, 13]
console.log(arr); // [1, 2, 3, 4] (原数组未改变)
/**************splice-添加"小刚"****************/
var arr_splice = ["张三","李四","王五","小明","小红"];
var arrReplace = arr_splice.splice(1,0,"小刚");
console.log(arrReplace); // [] (没有删除元素,所以返回的是空数组)
console.log(arr_splice); // ['张三', '小刚', '李四', '王五', '小明', '小红']
删除
1、shift():方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。(会改变原数组)
2、pop():方法用于删除并返回数组的最后一个元素。(会改变原数组)
3、splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(会改变原数组)
语法: arr.splice(index , howmany , item1,.....,itemX)
index:必填。 规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany:必填。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX:选填。向数组添加的新项目。
返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。
4、delete 用于删除数组的某一项(会改变原数组,但不会改变原有数组长度)
var arr=[1,2,3,4];
/**************shift****************/
var shift_arr=arr.shift();
console.log(arr); // [2, 3, 4]
console.log(shift_arr); // 1
/**************pop****************/
var pop_arr=arr.pop();
console.log(arr); //[1,2,3];
console.log(pop_arr); // 4
/**************splice-删除"1"****************/
var arrReplace1 = arr.splice(1,1);
console.log(arrReplace1); // ["2"]
console.log(arr); // ["1", "3", "4"] (原数组改变)
/**************splice-删除多个****************/
var arrReplace2 = arr.splice(1,2);
console.log(arrReplace2); // ["2", "3"]
console.log(arr); // ["1","4"] (原数组改变)
/**************delete****************/
delete arr[1];
console.log(arr); // [1, 空白, 3, 4]
改变
1、reverse()方法用于颠倒数组中元素的顺序,(会改变原数组)
2、splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(会改变原数组)
语法:arr.splice(index , howmany , item1,.....,itemX)
index:必填。 规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany:必填。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX:选填。向数组添加的新项目。
返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。、
3、fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。(会改变原数组)
语法:array.fill(value, start, end)
value:必需。填充的值。
start:可选。开始填充位置。如果这个参数是负数,那么它规定的是从数组尾部开始算起。
end:可选。停止填充位置 (默认为 array.length)。如果这个参数是负数,那么它规定的是从数组尾部开始算起。
4、copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员。(会改变原数组)
语法:array.copyWithin(target , start , end)
arget :必需。从该位置开始替换数据。
start :可选。从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
end: 可选。到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
var arr=["张三","李四","王五","小明","小红"];
/**************reverse****************/
console.log(arr.reverse()); // ["小红","小明","王五","李四","张三"]
console.log(arr); // ["小红","小明","王五","李四","张三"] (原数组改变)
/**************splice-"小刚"替换"小明"****************/
var arrReplace1 = arr.splice(3,1,"小刚");
console.log(arrReplace1); // ["小明"]
console.log(arr); // ["张三","李四","王五","小刚","小红"] (原数组改变)
/**************splice-替换多个****************/
var arrReplace2 = arr.splice(1,3,"小亮");
console.log(arrReplace2); // ['李四', '王五', '小明']
console.log(arr); // ['张三', '小亮', '小红'] (原数组改变)
/**************fill****************/
let arr_fill = [1,2,3,4,5,6];
arr_fill.fill(0); // [0, 0, 0, 0, 0, 0]
arr_fill.fill(0,1); // [1, 0, 0, 0, 0, 0]
arr_fill.fill(0,1,2); // [1, 0, 3, 4, 5, 6]
arr_fill.fill(0,-1); // [1, 2, 3, 4, 5, 0]
arr_fill.fill(0,1,-1); // [1, 0, 0, 0, 0, 6]
/**************copyWithin****************/
let arr_copyWithin = [1,2,3,4,5,6];
let result1 = arr_copyWithin.copyWithin(0);
let result2 = arr_copyWithin.copyWithin(0,1);
let result3 = arr_copyWithin.copyWithin(1,3,5);
let result4 = arr_copyWithin.copyWithin(1,2,-1);
let result5 = arr_copyWithin.copyWithin(1,-4,6);
console.log(result1); // [1, 2, 3, 4, 5, 6]
console.log(result2); // [2, 3, 4, 5, 6, 6]
console.log(result3); // [1, 4, 5, 4, 5, 6]
console.log(result4); // [1, 3, 4, 5, 5, 6]
console.log(result5); // [1, 3, 4, 5, 6, 6]
查找
1、indexOf(item,start) lastIndexOf(item,start)两个方法都返回要查找的项在数组中首次出现的位置,在没找到的情况下返回-1 (不会改变原数组)
item: 必填。查找的元素。
start:可选的整数参数。规定在数组中开始检索的位置。
2、find()方法返回通过测试(函数内判断)的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。(不会改变原数组)
回调函数可以接收3个参数,依次为当前的值(currentValue)、当前的位置(index)、原数组(arr)
注意:find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。
3、findIndex和find差不多,不过默认返回的是索引,如果没有符合条件的元素返回 -1(不会改变原数组)
4、includes 该方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。(不会改变原数组)
语法:arr.includes(searchElement , fromIndex)
searchElement : 必须。需要查找的元素值。
fromIndex:可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
/**************"indexOf****************/
var arr_indexOf = [1,4,7,10,7,18,7,26];
console.log(arr_indexOf.indexOf(7)); // 2
console.log(arr_indexOf.lastIndexOf(7)); // 6
console.log(arr_indexOf.indexOf(7,4)); // 4
console.log(arr_indexOf.lastIndexOf(7,2)); // 2
console.log(arr_indexOf.indexOf(5)); // -1
/**************"find****************/
let Arr_find = [1,2,5,7,5,9];
let result1 = Arr_find.find(function(currentValue,index,arr){
return currentValue>5;
});
let result2 = Arr_find.find(function(currentValue,index,arr){
return currentValue>9;
});
console.log(result1); // 7
console.log(result2); // undefined
/********"find()实现根据id取出数组中的对象**********/
let Arr = [
{
id:1,
name:"张三"
},
{
id:2,
name:"李四"
}
];
let obj = Arr.find(function(currentValue,index,arr){
return currentValue.id===1;
});
console.log(obj.name); // 张三
/**************"findIndex****************/
let Arr_findIndex = [1,2,5,7,5,9];
let result1 = Arr_findIndex.findIndex(function(currentValue,index,arr){
return currentValue>5;
});
let result2 = Arr_findIndex.findIndex(function(currentValue,index,arr){
return currentValue>9;
});
console.log(result1); // 3
console.log(result2); // -1
/**************"includes****************/
let arr_includes = ["a","b","c","d"];
let result1 = arr_includes.includes("b");
let result2 = arr_includes.includes("b",2);
let result3 = arr_includes.includes("b",-1);
let result4 = arr_includes.includes("b",-3);
console.log(result1); // true
console.log(result2); // false
console.log(result3); // flase
console.log(result4); // true
遍历数组
1、forEach()对数组进行遍历循环,这个方法没有返回值。(可以改变也可以不改变原数组(堆/栈))
语法:array.forEach(function(currentValue , index , arr){//do something}, thisValue)
currentValue : 必填。当前元素
index: 选填。当前元素的索引值。
arr : 选填。当前元素所属的数组对象。
thisValue: 选填。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
2、map() 该方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。(可以改变也可以不改变原数组(堆/栈))
语法:array.map(function(currentValue , index , arr){//do something}, thisValue) 参数同上
3、filter() 该方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。(可以改变也可以不改变原数组(堆/栈))
语法: array.filter(function(currentValue , index , arr){//do something}, thisValue) 参数同上
4、every() 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。(不会改变原数组)
语法: array.every(function(currentValue , index , arr){//do something}, thisValue) 参数同上
5、some() 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。(不会改变原数组)
语法: array.some(function(currentValue , index , arr){//do something}, thisValue) 参数同上
6、keys()、values()、entries()、这三个方法都是返回一个遍历器对象,可用for...of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。(不会改变原数组)
7、reduce()、reduceRight() 这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接受四个参数分别是初始值,当前值,索引值,和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。(不会改变原数组)
reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。
reduce()语法:arr.reduce(function(total , cur , index , arr){//do something}, initialValue)
reduceRight()语法:arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)
total :必需。初始值, 或者计算结束后的返回值。
cur :必需。当前元素。
index :可选。当前元素的索引。
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值。
8、find()方法返回通过测试(函数内判断)的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条 件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。(不会改变原数组)
回调函数可以接收3个参数,依次为当前的值(currentValue)、当前的位置(index)、原数组(arr)
注意:find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。
9、findindex()、 遍历数组,返回符合条件的第一个元素的索引,如果没有符合条件的元素则返回 -1 (参数同上)(不会改变原数组)
/**************"forEach****************/
var Arr = [1,4,7,10];
Arr.forEach(function(currentValue, index, arr){
console.log(index+"--"+currentValue+"--"+(arr === Arr));
})
// 打印:
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true
/**************"map方法实现数组中每个数求平方****************/
var arr = [1,4,8,10];
var arr2 = arr.map(function(currentValue){
return currentValue*currentValue;
});
console.log(arr2); // [1, 16, 64, 100]
/*****"filter方法实现筛选排除掉所有小于5的元素,支持弱等于*******/
var arr = [1,4,6,8,10];
var result1 = arr.filter(function(currentValue){
return currentValue>5;
});
console.log(result1); // [6, 8, 10]
var result2 = arr.filter(function(currentValue){
return currentValue>"5";
});
console.log(result2); // [6, 8, 10]
/**************"every****************/
var arr = [1,4,6,8,10];
var result1 = arr.every(function(currentValue){
return currentValue< 12;
});
console.log(result1); // true
var result2 = arr.every(function(currentValue){
return currentValue> 1;
});
console.log(result2); // false
/**************"some****************/
var arr = [1,4,6,8,10];
var result1 = arr.some(function(currentValue){
return currentValue> 10;
});
console.log(result1); // false
var result2 = arr.some(function(currentValue){
return currentValue> 5;
});
console.log(result2); // true
/**************"keys****************/
let arr_keys = ["a","b","c","d"];
for(let i of arr_keys.keys()){
console.log(i);
}
//打印:
// 0
// 1
// 2
// 3
/**************"values****************/
let arr_values = ["a","b","c","d"];
for(let i of arr_values.values()){
console.log(i);
}
//打印:
// a
// b
// c
// d
/**************"entries****************/
let arr_entries = ["a","b","c","d"];
for(let i of arr_entries.entries()){
console.log(i);
}
//打印:
// [0, "a"]
// [1, "b"]
// [2, "c"]
// [3, "d"]
for(let [idx,item] of arr_entries.entries()){
console.log(idx+":"+item);
}
//打印:
// 0:a
// 1:b
// 2:c
// 3:d
/**************"reduce-实现数组求和****************/
var arr = [1,2,3,4,5];
var result1 = arr.reduce(function(total,cur,index,arr){
console.log("total:"+total+",cur:"+cur+",index:"+index);
return total+cur;
});
console.log("结果:"+result1);
// 输出
// total:1,cur:2,index:1
// total:3,cur:3,index:2
// total:6,cur:4,index:3
// total:10,cur:5,index:4
// 结果:15
var result2 = arr.reduce(function(total,cur,index,arr){
console.log("total:"+total+",cur:"+cur+",index:"+index);
return total+cur;
},10);
console.log("结果:"+result2);
// 输出
// total:10,cur:1,index:0
// total:11,cur:2,index:1
// total:13,cur:3,index:2
// total:16,cur:4,index:3
// total:20,cur:5,index:4
// 结果:25
/**************"find****************/
var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
var num = arr.find(function (item, index) {
return item === 3
})
console.log(num) // 3
/**************"findIndex****************/
var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
var num = arr.findIndex(function (item) {
return item === 3
})
console.log(num) // 4
类型转换
1、Array.from() 方法是用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。(不会改变原数组)
2、Array.of() 方法是将一组值转变为数组,参数不分类型,只分数量,数量为0返回空数组。
3、join() 方法是将数组转字符串,方法只接收一个参数:即默认为逗号分隔符()。(不会改变原数组)
/**************"Array.from****************/
let json ={
'0':'你',
'1':'好',
length:2
}
let arr = Array.from(json);
console.log(arr); // ["你", "好"]
/**************"Array.of****************/
let arr1 = Array.of(1,2,3);
let arr2 = Array.of([1,2,3]);
let arr3 = Array.of(undefined);
let arr4 = Array.of();
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [[1, 2, 3]]
console.log(arr3); // [undefined]
console.log(arr4); // []
/**************"join****************/
var arr=[1,2,3,4];
console.log(arr.join()); //1,2,3,4
console.log(arr.join(":")); //1:2:3:4
console.log(arr); //[1,2,3,4],原数组不变
数组顺序
1、sort() 方法用于对数组的元素进行排序。(按照字符编码的顺序进行排序),要实现数值大小排序,需借助一个排序函数(会改变原数组)
2、reverse() 方法用于颠倒数组中元素的顺序。(会改变原数组)
/**************"sort(字符编码顺序)****************/
var arr=[1,100,5,20];
console.log(arr.sort()); // [1, 100, 20, 5]
console.log(arr); // [1, 100, 20, 5] (原数组改变)
/**************"sort(数字大小升序)****************/
var arr=[1,100,5,20];
function sortNumber(a,b){return a - b};
console.log(arr.sort(sortNumber)); //[1, 5, 20, 100]
console.log(arr); //[1, 5, 20, 100] (原数组改变)
/**************"sort(数字大小降序)****************/
var arr=[1,100,5,20];
function sortNumber(a,b){return b - a};
console.log(arr.sort(sortNumber)); // [100, 20, 5, 1]
console.log(arr); // [100, 20, 5, 1] (原数组改变)
/**************"reverse****************/
var arr=[1,100,5,20];
console.log(arr.reverse()); // [20, 5, 100, 1]
console.log(arr); // [20, 5, 100, 1] (原数组改变)