Array数组循环全解2

数组的创建,最简单的字面量方式

var arr = [ 1,2,77,8,4,5 ];

添加、删除

arr.length = 0; //清空数组的方法,让length等于0;
arr = []; //从新赋值一个空数组,清空
arr.unshift( 0 ); //向数组的第一位添加内容
arr.push( 99 ); //向数组最后一位添加内容
arr.shift();// 删除数组的第一位,返回被删除值
arr.pop(); //删除数组的最后一位,返回被删除值
arr.splice( start1 , end3 );// 删除类 ,从开始第1个起删除到结束第3个
不包括第三个,返回删除的组成的新数组,不影响原数组。
arr.splice( 0 , 0 , ‘xuanmo’ );//添加,从第0个开始添加
arr.splice( 1 , 1 , ‘xuanmo’ ); //替换,替换掉第一个

排序

arr.sort();//数组排序,默认以字符串大小编码排序
arr.sort(function( a , b ){ return a – b });//标准排序传入比较函数,
alert( str.split('').join('-') );//字符串拆分成数组,并未没一个字符后添加一个‘-’
arr.concat( arr1 );//拼接数组,把两个或者多个数组拼接在一起
arr.reverse();//数组前后调换位置
console.log( str.split('').reverse().join('') );//利用reverse()方法将字符串换位置

数组转换成字符串

arr.join(''); //把数组变成字符串

随机排序

var arr = [0, 1, 2, 3, 4];
arr.sort( randomSort );
function randomSort(){
  return Math.random() > 0.5 ? -1 : 1;
}

数组去重

// ES5方法
function deleteArray( arr ){
  for( var i = 0; i < arr.length; i++ ){
    for( var j = i+1; j < arr.length; j++ ){
      if( arr[i] == arr[j] ){
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

// 利用indexOf方法
function removeArrayRepeat (arr) {
  var newArr = [];
  for(var i = 0, len = arr.length; i < len; i++){
    if(newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]);
  }
  return newArr;
}

// ES6方法
Array.from(new Set([1, 2, 3, 2, 5, 8, 1]))  // [1, 2, 3, 5, 8]

// 利用扩展运算符方法
[...new Set([1, 2, 3, 2, 5, 8, 1])]  // [1, 2, 3, 5, 8]

数组就是一组数据的集合,JavaScript中,数组里面的数据可以是不同类型

/*通过类实例化来创建数组*/
var aList01 = new Array(1,3,5,7);

/*通过字面量的方式*/
var aList02 = [1,2,3];

/*获取组的类成员个数*/
alert(aList02.length);

/*通过下标操作数*/
alert(aList01[2]);

/*通过push在数组后面添加成员*/
aList01.push('m');
alert(aList01);

/*从后面删除成员*/
aList01.pop();
alert(aList01);

/*从前面添加成员*/
aList01.unshift(1);
alert(aList01);

/*从前面删除成员*/
aList01.shift();
alert(aList01);

/*反转排序*/
aList01.reverse();
alert(aList01);

/*指出元素在组的位置*/
var aList03 = ['a','b','c','d'];
alert(aList03.indexOf('c'));

/*splice(起始位,删除个数,添加元素)*/
aList03.splice(1,2,'e','f');
alert(aList03);

/*join把元素连接,要用变量来接收字符串*/
var sTr = aList03.join('-');
alert(sTr);

数组遍历

1.使用for循环来遍历一个数组
let arr=[2,4,6,10];
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
2.for-in
let arr=[2,4,6,10];
for (var index in arr){
console.log(arr[index]);
}
还可以遍历对象,得到键值对中的键
let per={
name:"zhang San",
sex:'male',
age:18
};
for(let key in per){
console.log(key);//name,sex,age
}
3.forEach
4.for-of(ES6中新增),效率最高
let arr=[3,7,9];
for (let key of arr){
console.log(key);
}

数组过滤

1.filter过滤
let arr=[1,2,3,4,5,6];
let newArr=arr.filter(o=>o%2==0);
console.log(newArr);//2 4 6
2.every和some方法,返回一个真假布尔值
every判断是不是每一个都符合条件
some判断是不是有符合条件的
let arr=[1,2,3,4,5,6];
console.log(arr.some(o=>o%3==0));//true

是否改变原数组

  • concat()
    连接两个或多个数组
    不改变原数组
    返回被连接数组的一个副本
  • join()
    把数组中所有元素放入一个字符串
    不改变原数组
    返回字符串
  • slice()
    从已有的数组中返回选定的元素
    不改变原数组
    返回一个新数组
  • toString()
    把数组转为字符串
    不改变原数组
    返回数组的字符串形式
  • pop()
    删除数组最后一个元素,如果数组为空,则不改变数组,返回undefined
    改变原数组
    返回被删除的元素
  • push()
    向数组末尾添加一个或多个元素
    改变原数组
    返回新数组的长度
  • reverse()
    颠倒数组中元素的顺序
    改变原数组
    返回该数组
  • shift()
    把数组的第一个元素删除,若空数组,不进行任何操作,返回undefined
    改变原数组
    返回第一个元素的值
  • sort()
    对数组元素进行排序(ascii)
    改变原数组
    返回该数组
  • splice()
    从数组中添加/删除项目
    改变原数组
    返回被删除的元素
  • unshift()
    向数组的开头添加一个或多个元素
    改变原数组
    返回新数组的长度
join(separator)
将数组的元素组起一个字符串,以separator为分隔符,
省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。

push()和pop()
push()  接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度; 
pop()   数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

shift() 和 unshift()
shift()  删除原数组第一项,并返回删除元素的值,  如果数组为空则返回undefined; 
unshift  将参数添加到原数组开头,并返回数组的长度 。

reverse()
//反转数组项的顺序
var arr = [1, 3, 5, 7];
console.log(arr.reverse()); //[7, 5, 3, 1]
console.log(arr); //[7, 5, 3, 1](原数组改变).

concat()
将参数添加到原数组中。这个方法会先copy一个当前数组,
然后将接收到的参数添加到这个copy数组的末尾,
最后返回新构建的数组。
在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回。

indexOf()和 lastIndexOf()
indexOf()  接收两个参数:
要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。 

lastIndexOf接收两个参数:
要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。

在比较第一个参数与数组中的每一项时,会使用全等操作符。

forEach()
这个方法只支持IE8以上的浏览器, 所以如果需要兼容IE8,
则不要使用forEach,  还是使用for循环来遍历

使用:
forEach()方法需要一个函数作为参数
该函数,由我们创建但是不由我们调用的,称为回调函数
数组中有几个元素, 函数就会执行几次,每次执行时,
浏览器会将遍历到的元素以实参的形式传递进来,我们可以来定义形参,来读取这些内容

浏览器会在回调函数中传递三个参数
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正在遍历的元素的索引
第三个参数,就是正在遍历的数组

格式
arr.forEach(function(value , index , obj){
  console.log(value);
});


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

推荐阅读更多精彩内容