美文网首页
Javascript数组

Javascript数组

作者: js_hcl | 来源:发表于2019-04-13 17:14 被阅读0次

concat()

  • 概念:用于连接两个或多个数组
  • 语法:arr.concat(arrayX,arrayX,......,arrayX);
    //arrayX可以是具体的值,也可以是数组(自身数组会拉平,数组内数组不会拉平)
例子:
let arr=[];let arr1=[1,2,3];let arr2=[[6,7],8];
arr=arr1.concat(arr2,10);              //参数可以数数组,也可以是具体的值 
console.log(arr);                      //[ 1, 2, 3,[ 6, 7 ], 8, 10 ];参数是数组,则数组内容会展开,但数组内容的内部数组不会展开
console.log(arr1);                     //[ 1, 2, 3 ];函数返回一个新的数组,源数组未修改
arr2[0][0]="张三";console.log(arr);    //[ 1, 2, 3, ["张三", 7 ], 8, 10 ];浅拷贝
总结:返回新的数组,不会修改自身。浅拷贝 

copyWithin

  • 概念:浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小
  • 语法:arr.copyWithin(target[,start[,end]]); //形参都是数组的索引,可正负,正数代表从头到尾0开始,负数代表从尾到头-1开始
例子:                                       //意思为,复制[start,end)左闭右开区间内容到target为开始,覆盖原来的值
let arr=[];
let arr1=[1,2,[3,4],5,6,7,8,9,10,11];
arr=arr1.copyWithin(-3,2,-4);//从索引2即[3,4]到索引-4即8,即[[3,4],5,6,7,8)复制,到索引-3即9位置
console.log(arr1);           //[1, 2, [ 3, 4 ], 5, 6, 7, 8,[ 3, 4 ], 5, 6];
                             //如果黏贴区域小于复制内容,则会截断复制后续内容,保证数组的长度不变 
console.log(arr===arr1);     //true,会修改自身,且返回自身的一个新对象 
arr1[2][0]="张三";           //修改复制区域的一个对象
console.log(arr1);           //[1, 2, [ '张三', 4 ], 5, 6, 7, 8, [ '张三', 4 ], 5, 6] 即浅拷贝,可以用于一个对象中数据同步
总结:会修改自身,返回自身新数组,但不改变数组长度,浅拷贝 

every

概念:every()方法测试数组中的所有元素是否都通过了由提供的函数实现的测试都通过,返回true;如果有一个不通过,结束执行,返回false
语法:arr.every(callback(element[,index [,array]])[,thisArg]);//thisArg作为参数1函数的this使用,相当于引入外部对象

例子:
let obj={name:"外部对象"};
let arr1=[{name:"a",age:10},{name:"a",age:5},{name:"a",age:20},{name:"a",age:30}];
function fun(element,index,array){
  console.log(Array.from(arguments));//[{name: 'a',age:30},//即element代表当前检索元素 
                                     //  0,                //即index代表当前索引位置 
                                     //  [{ name:'a',age:10},{name:'a',age:5},{name:'a',age:20}, {name:'a',age:30}]
                                     // ]                  //array代表当前操作的数组 
  console.log(this);                 //{name:'外部对象'},即参数2代表参数1函数的this 
  return element.age<30;             //返回判断
}
let arr=arr1.every(fun,obj);console.log(arr);//false, 只要有一个不符合,停止下一个检索,返回false 

some()

  • 概念:some()方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试
  • 语法:arr.some(callback [,thisArg]);
    总结:和every()类似,只是只要有一个满足,返回为true

fill

概念:fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
语法:arr.fill(value[, start[, end]]); //用value填充索引为[start,end)左闭右开的区间 正数代表从头到尾0开始,负数代表从尾到头-1开始

例子:                                 //value为具体值,或者对象 
let arr=[1,2,3,4,5,6];let obj={name:1};//
arr.fill(obj,3,-1);console.log(arr);  //[1,2,3,{name:1},{name:1},6]   fill()方法可以用于初始化数组
obj.name=2;console.log(arr);          //[1,2,3,{name:2},{name:2},6]   即浅拷贝,value为引用则会相互影响。修改arr[3].name后续也会变
obj.length=3;                         //次方法是通用方法。但必须要有length值,才能填充 
[].fill.call(obj,{age:10});          //{'0':{age:10}, '1':{ age:10},'2':{age:10},name:2,length:3}
总结:和copyWithin()方法类似。浅拷贝,通用方法,会修改自身,返回自身的新的数组 

filter

概念:返回通过所提供函数实现的测试的所有元素组成的新数组
语法:let newArr=arr.filter(callback(element[,index[,array]])[,thisArg]);//如果没有符合条件的元素则返回空数组
总结:不会修改自身

find

概念:find() 方法返回数组中满足提供的测试函数的第一个元素的项。否则返回 undefined
语法:let value=arr.find(callback(element[,index[,array]])[,thisArg])

findIndex

概念:该findIndex()方法返回提供的测试函数的第一个元素的索引。否则,它返回-1
语法:let index=arr.findIndex(callback(element[,index[,array]])[,thisArg])

例子:
let arr=[6,8,5,7,9];
function fun() {
    let ele=arguments[0];return ele%3===1;
}
let value=arr.find(fun);  console.log(value);           //7     即find()返回的是值
let value1=arr.findIndex(fun);console.log(value1);      //4     即findIndex()返回的索引

forEach

*概念:forEach() 方法对数组的每个元素执行一次提供的函数
语法:arr.forEach(callback(element[,index[,array]])[,thisArg]);//返回值总是为undefined
总结:没有办法中止或者跳出 forEach 循环

includes

概念:includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false
语法:arr.includes(searchElement[,fromIndex]);//返回布尔值

例子:和indexof对比 
let arr=[1,2,NaN];arr.length=5;//稀疏数组,实际项目小于length长度,会有undefined项
console.log(arr.indexOf(undefined));  //-1
console.log(arr.indexOf(NaN));        //-1
console.log(arr.includes(undefined)); //true
console.log(arr.includes(NaN));       //true
即:includes()查找项可以找到undefined,及NaN 查找某个项用includes(),获得某个项索引用indexof

indexOf

概念:indexOf()方法返回在数组中找到一个给定元素的第一个索引,如果不存在,则返回-1
语法:arr.indexOf(searchElement[,fromIndex]);//返回索引值

lastIndexOf

概念:indexOf()方法返回在数组中逆序找到一个给定元素的第一个索引,如果不存在,则返回-1
语法:arr.lastIndexOf(searchElement[,fromIndex = arr.length - 1]);//

join

概念:join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符 默认连接符为“,”,不会改变本身数组
语法:let str=arr.join(separator);//separator为分隔符,默认为“,”

例子:Array.prototype.join.call(arguments);//将类数组对象,转化为字符串 
//如果元素是对象,则调用对象的toString()方法 

map

概念:map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
语法:arr.map(callback(element[,index[,array]])[,thisArg]);
总结:返回新数组,不改变自身

pop/push

概念:pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组/对象的长度
语法:let deletetEle=arr.pop() ;//删除最后一项,并返回删除项
总结:pop 方法有意具有通用性。该方法和 call() 或 apply() 一起使用时,可应用在类似数组的对象上

概念:push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。此方法更改数组/对象的长度
语法:let newArrLength=arr.push(element1, ..., elementN) ;//返回新数组长度
总结:这两个方法,都是根据数组/对象的length属性,在length位置进行出栈,入栈

reduce/reduceRight

概念:对数组中从左到右的每一个元素进行处理。即从左到右两两进行操作,结果作为下一次迭代的值,返回最终值
语法:arr.reduce(callback(accumulator,currentValue[,currentIndex][,array])[,initialValue])
accumulator 累加器,即函数上一次调用的返回值。第一次的时候为 initialValue || arr[0]
currentValue 数组中函数正在处理的的值,第一次的时候initialValue || arr[1]
currentIndex 数组中函数正在处理的的索引
array 函数调用的数组
initValue reduce()的第二个可选参数,累加器的初始值。没有时,累加器第一次的值为currentValue

reduceRight
概念:对数组中从右到左的每一个元素进行处理。即从右到左两两进行操作,结果作为下一次迭代的值,返回最终值

reverse

概念:用于颠倒数组中元素的顺序,即反转
语法:arr.reverse();

例子:let arr=[6,8,5,7,{name:"张三"}];
arr.reverse();console.log(arr);   //[{name:'张三'},7,5,8,6]
总结:会修改自身,没有返回值

sort

概念:用于对数组的元素进行排序(按照字符编码的顺序进行排序:字符串)
语法:arr.sort([sortby(L,R)]);//sortby为函数,可选。arr.sort();默认情况为升序排序 无返回值

let arr=["Process","finished","with","exit","code", 0,15,2];
function fun(L,R) {                                     //回调函数参数1为arr[i],参数2为arr[i+1]
    let L_type=typeof L;let R_type=typeof R;            //排序规则为:return true或正数,则L,R进行调换排序 
    if((L_type==="string")&&(R_type==="string")){            
        return L>R;
    }else if((L_type==="string")&&(R_type==="number")){
        return true;
    }else if((L_type==="number")&&(R_type==="number")){
        return L-R;
    }
} arr.sort(fun);
console.log(arr);//[0,2,15,'Process','code','exit','finished','with']  即:实现数字和字符串混数组的排序。也可以实现多重排序 

shift/unshift()

shift
概念:shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
语法:let deleteEle=arr.shift();//删除第一项,并返回删除项
unshift
概念:将一个或多个元素添加到数组的开头,并返回该数组的新长度。
语法:let newArrLength=arr.unshift(element1, ..., elementN);//返回新数组长度

splice

概念:通过删除现有元素和/或添加新元素来更改一个数组的内容
语法:arr.splice(start[,deleteCount[,item1[,item2[,...]]]]);//从start位置,删除deleteCount个,然后在start处插入item1...itemN

例子:
let arr=[1,2,3,4,5,6,7];
let arr1=arr.splice(2,3,"壹","贰");     //从索引2位置,即3那里。删除3项,即3,4,5。在start位置,即索引2那里添加子项"壹","贰"
console.log(arr1);                      //[ 3, 4, 5 ],函数返回被删除项组成的新数组 
console.log(arr);                       //[ 1, 2, '壹', '贰', 6, 7 ] 会修改自身

slice

概念:从已有的数组中返回选定的元素
语法:arr.slice(start,end);
总结:不会修改数组,返回一个子数组

二、伪数组

概念:有些对象是自动生成的,键是数字,可以类似数组的方式读写。即obj[i]
例子:arguments,DOM对象
特点:具有length属性,不具有Array数组的方法 

1、转换为数组

1.Array.prototype.slice.call();//或[].slice.call()

2.Array.from()

相关文章

网友评论

      本文标题:Javascript数组

      本文链接:https://www.haomeiwen.com/subject/bfrrwqtx.html