Javascript数组

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()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容

  • 下面以var arr = ['x', 'u', 'e', 'y', 'i', 'n', 'g']为例 修改器方法:...
    Lxylona阅读 751评论 2 17
  • 数组的定义 数组是按序号排列的一组值,每个值的位置都有编号(从0开始)。数组本质上是一种特殊的对象。它的键名是按(...
    Allin_Lin阅读 553评论 0 0
  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,083评论 0 6
  • concat 注意,a数组并没有改变,只是返回了一个新数组。 copyWithin 它接受三个参数。target ...
    Funwt阅读 670评论 0 10
  • 儿行千里父母忧,希望归家享天伦。我的阿公也不过如此。阿公七十多岁了,每年三百六十五天,天天盼着要过年,儿女...
    Joe_Zivon阅读 209评论 1 1