数组Array的有关知识点及方法封装

数组的定义方法

1.字面量方法 var arr = [];//推荐使用
2.数组构造的方法 var arr = new Array();///此时的构造方法可以传参,如果只传一位表示创造的数组长度,如果传多位代表数组的各个元素是多少;

var arr = new Array(10);//arr长度为十,每一个内容为空,访问的时候值为undefined;
var arr = new Array(1,2,3,4);//arr长度为4,为[1,2,3,4]

数组的多种操作方法

push方法

往数组的末尾添加元素,传参可传多位,把所传的参数作为数组元素添加在最后,返回值为数组长度(return)

var arr = [3,4,5];
var arr1 = arr.push(7,7,7);
console.log(arr);     //[3,4,5,7,7,7]
console.log(arr1);   //6

pop方法

剪切掉数组的最后一位,不传参,传参不报错但是无意义,将剪切的元素返回,返回值为number类型

var arr = [2,3,4];
var arr1 = arr.pop();
console.log(arr);       //[2,3]
console.log(arr1);     //4

unshift方法

在数组的第一位之前添加元素,可传多位,并将操作之后的数组长度返回

var arr = [2,3,4];
var arr1 = arr.unshift(1,1,1);
console.log(arr);     //[1,1,1,2,3,4]
console.log(arr1);   // 6

shift方法

剪切掉数组的第一位元素,不需要传参,传参不报错但无意义,将所剪切的数组元素作为返回值返回

var arr = [0,3,4];
var arr1 = arr.shift();
console.log(arr);   // [3,4]
console.log(arr1);  // 0

reverse方法

反转数组,并将反转之后的数组返回

var arr = [2,3,4];
var arr1 = arr.reverse();
console.log(arr);   //[4,3,2]
console.log(arr1);  //[4,3,2]

splice方法

splice()方法可传递两个或两个以上的参数
splice(操作开始的元素索引,操作的位数,插入的元素)
传递的第一位参数为操作开始的数组元素索引,第二个元素为操作的位数,第三位及其之后为在所选位置插入的数组元素,该方法只传两位表示切除,传三位及以上表示切除的基础上并插入

如果传递的第一个参数为负数,则会将arr.length + 第一位参数的值作为第一个参数传参,负数相当于倒数第几位
//只传两位的情况
var arr = [2,3,4,5,6];
var arr1 = arr.splice(2,1);
console.log(arr);   //[2,3,5,6]
console.log(arr1);  //[4]
//传三位及以上的情况
var arr = [2,3,4,5,6];
var arr1 = arr.splice(2,1,0,0);
console.log(arr);   //[2,3,0,0,5,6]
console.log(arr1);  //[4]
//传递的第二位参数为0时
var arr = [2,3,4,5,6];
var arr1 = arr.splice(2,0);
console.log(arr);   //[2,3,4,5,6]
console.log(arr1);  //[]
arr1 = arr.splice(2,0,1,1,1);
console.log(arr);   //[2,3,1,1,1,4,5,6]
console.log(arr1);  //[]

sort方法

将原数组排序,sort()方法提供了接口,原本的sort方法排序是按照数组元素开头的字符比较Unicode编码来排序的
sort提供的接口操作方法需要满足几个条件:
1.必须写两个形参
2.接口函数的返回值为正数的时候后面的排在前面,返回值为负数的时候,前面的排在前面,返回值为0的时候保持不变
运用了接口函数的sort方法就相当于采用了冒泡排序的方式,传的参数a和b就是每次要相比较的两个数组元素

var arr = [2,1,6,4];
//升序
var arr1 = arr.sort(function (a,b){
      if(a > b){
          return 1;
      }else{
          return -1;
      }
})
console.log(arr);   //[1,2,4,6]
console.log(arr1);  //[1,2,4,6]
//降序
arr1 = arr.sort(function (a,b){
      if(a > b){
          return -1;
      }else{
          return 1;
      }
})
console.log(arr);   //[6,4,2,1]
console.log(arr1);  //[6,4,2,1]
//简化降序
arr1 = arr.sort(function (a,b){
      return b - a;  //升序时改为  return a - b;即可
});
console.log(arr);   //[6,4,2,1]
console.log(arr1);  //[6,4,2,1]

上述的几种方法(push , pop , shift , unshift , sort , reverse , splice )都会改变原数组的值
下面的几种方法将不会改变原数组的值(concat , join ,toString , slice)

concat方法 连接两个数组,并返回一个新的数组

var arr = [1,2,3];
var arr1 = [4,5,6];
var arr2 = arr.concat(arr1);
console.log(arr);    // [1,2,3]
console.log(arr1);   //[4,5,6]
console.log(arr2);   //[1,2,3,4,5,6]

join 方法

将数组内的元素连接成字符串并返回,可传递参数,参数最好为字符串类型,意思是以参数为连接符,此方法与字符串的split方法相对,不传参的时候将默认以逗号为连接符

var arr = [1,2,3];
var str = arr.join();         // '1,2,3'
var str2 = arr.join('--');   // '1--2--3'

slice方法

截取数组,两个参数,第一位为开始截取的数组索引,第二位为截止的数组索引,截取的内容不包括第二个参数索引对应的元素,可以不传参数,不传表示全部截取,传一位参数表示一直截取到最后一位

var arr = [2,3,4,5];
var arr1 = arr.slice();    //可用此方法把类数组转换为真数组
var arr2 = arr.slice(1);
var arr3 = arr.slice(1,3);
console.log(arr);        //[2,3,4,5];
console.log(arr1);      //[2,3,4,5];
console.log(arr2);      //[3,4,5];
console.log(arr3);      //[3,4];

toString方法

将数组内元素以逗号拼接并返回

var arr = [2,3,4];
var str = arr.toString();
console.log(arr);    //[2,3,4]
console.log(str);    //'2,3,4'

类数组及有关知识点

类数组是一个特殊对象,属性要为索引(数字)属性,必须要有length属性,最好加上push方法,加上splice方法之后控制台打印出来的类数组就不再是对象的格式了,而是数组的格式

var obj = {
      "1":"abc",
      "2":"bcd",
      "length":2,
      push:Array.prototype.push
}
console.log(obj);     //{  "1":"abc","2":"bcd","length":2,push:function}
obj.push('aaa');
console.log(obj);     //{  "1":"abc","2":"aaa","length":3,push:function}
//因为push的原理为在   arr[length] 处添加新的元素,相当于把以length为索引的元素改为传入的值,并且length++
//如果此时给obj添加一个数组的splice方法,此时访问obj则打印数组形式
obj.splice = Array.prototype.splice;
console.log(obj);    //[empty,'abc','aaa',push:f,splice:f]此时第一位索引为0没有元素所以为空

数组有关方法2

some()方法

array.some(function(currentValue,index,arr),thisValue)
currentValue--必须。当前遍历到的数据的值
index--可选。当前遍历到的数据的索引
arr--可选。遍历到的元素的所属数组
thisValue--可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。返回值为布尔值。

some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。

some() 不会对空数组进行检测。
some() 不会改变原始数组。

var ages = [3, 10, 18, 20],a;

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    a = ages.some(checkAdult);
}
myFunction();
console.log(a);//true

findIndex()方法

array.findIndex(function(currentValue, index, arr), thisValue)
currentValue--必须。当前遍历到的数据的值
index--可选。当前遍历到的数据的索引
arr--可选。遍历到的元素的所属数组
thisValue--可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1。

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。

some() 不会对空数组进行检测。
some() 不会改变原始数组。

var ages = [3, 10, 18, 20],a;
 
function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    a= ages.findIndex(checkAdult);
}
myFunction();
console.log(a);//2

还有一个array.find()方法与findIndex方法类似,返回的是数组第一个满足要求的值,不存在满足要求则返回undefined

filter()方法

array.filter(function(currentValue,index,arr), thisValue)
currentValue--必须。当前遍历到的数据的值
index--可选。当前遍历到的数据的索引
arr--可选。遍历到的元素的所属数组
thisValue--可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

some() 不会对空数组进行检测。
some() 不会改变原始数组。

var ages = [32, 33, 16, 40],a;

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    a = ages.filter(checkAdult);
}
myFunction();
console.log(a);//[32, 33, 40]

forEach()方法

array.forEach(function(currentValue, index, arr), thisValue)
currentValue--必须。当前遍历到的数据的值
index--可选。当前遍历到的数据的索引
arr--可选。遍历到的元素的所属数组
thisValue--可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

forEach() 对于空数组是不会执行回调函数的。

var numbers = [4, 9, 16, 25];
var a = '';
function myFunction(item, index) {
    a +=  index + ": " + item ; 
}
numbers.forEach(myFunction);
console.log(a);//"0: 41: 92: 163: 25"

includes()方法

array.includes(searchElement, fromIndex)//也可以用作字符串方法
searchElement--必须。需要查找的元素值。
fromIndex--可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。当值大于数组长度时,返回false

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   //false
arr.includes('c', 100); // false

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true     如果计算出的索引小于 0,则整个数组都会被搜索

keys()方法

array.keys()

返回数组索引

from()方法

array.from(arrayLike[, mapFn[, thisArg]])
arrayLike--类数组或者可迭代对象  
mapFn--迭代对象每一项执行的方法

返回一个数组

Array.from('foo'); // ["f", "o", "o"]

let s = new Set(['foo', window]); 
Array.from(s); // ["foo", window]

let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); // [[1, 2], [2, 4], [4, 8]]

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);// [1, 2, 3]

// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x);      // [2, 4, 6]


// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({length: 5}, (v, i) => i);// [0, 1, 2, 3, 4]


function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n)); // [1, 2, 3]

还有一个与之类似的array.of()方法,把传入的多个字符串转换为数组,每个字符串作为数组独立的元素

fill()方法

array.fill(para,start,end)
para--以什么填充,
start--从哪开始填充,可选
end--填充到哪,可选

填充数组,指定填充值,和开始结束位置。

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

推荐阅读更多精彩内容