array方法

JS数组(every、some、filter、forEach、map、reverse、sort、indexOf、lastindexOf方法)

reverse方法

JavaScript中数组的reverse()方法用于将数组倒序输出,并且改变了原数组,并且返回的也是新数组。

var arr=["8",3,5,6,"a","s"];
    var con=arr.reverse();
    console.log(arr);  //结果为:["s","a",6,5,8,3,8]
    console.log(con); //结果为:["s","a",6,5,8,3,8]

sort方法

JavaScript中数组的sort()方法用于对数组进行排序,如果不写任何参数,sort是按照字符串排序的,也就是ascII码排序,sort方法会改变原数组,并且返回改变后的新数组。

 var arr=[1,2,10,14,21,3];
    var con=arr.sort();
    console.log(arr); //结果为:[1,10,14,2,21,3]
    console.log(con); //结果为:[1,10,14,2,21,3]

使用sort方法还可以让数组的元素按照数字的大小进行排序,此时sort方法中需要传入一个参数,并且是一个函数,函数有两个形参,a,b,其中a是数组的第二个元素,b是数组的第一个元素。

 var arr=[3,5,11,3,5,67,8,4,14];
    // sort中传递一个函数,每次函数会拿两个值进行比较
    arr.sort(function (a,b) {
        //第一次a是5  b是3
        console.log(a);
        return a-b //否则为正就是升序,也就是说如果返回值为正数则是升序
    })

indexof和lastIndexOf方法

JavaScript中数组的indexof()和lastIndexOf()方法用于检测某个值是否在数组中出现,如果没有没有则返回-1,如果有则返回第一个检测到的下标,然后停止继续检测,indexof()由数组的前向后找,lastIndexOf()由数组的后面往前找,这两个方法都不会改变原数组。
一个参数的情况:

var arr=[1,3,5,7,6,34,23,6,6,6,3,6];
    var num1=18;
    var num2=6;
    var num1=arr.indexOf(num1); //检测这个数组中是否有18这个数
    var num2=arr.indexOf(num2); //检测这个数组中是否有6这个数
    console.log(num1);  //结果为:-1
     console.log(num2);  //结果为:4

两个参数的情况:
arr.indexOf(num1,5)中有两个参数,其中第一个参数num1则是需要检测的值,5则是检测的起始下标,,但是检测到的元素下标仍然是在原数组中的下标,不会改变。

  var arr=[1,3,5,7,6,34,23,6,6,6,3,6];
   var num1=6;
   var isHas=arr.indexOf(num1,5);
   console.log(isHas);  //结果为:7

every和some方法

JavaScript中数组的every()方法用于检测数组的元素是否全都满足定义的条件,遇到一个元素不满足则返回false,并且停止遍历,并且every返回false,也就是一假即假。
some方法和every用法类似,只是some方法中只要有一个元素满足条件则返回true,也就是一真即真。
两个方法的参数都是一个函数,函数中有三个参数,item,index,arr,参数名可以自定义,但是建议使用以上三个参数名,其中第一个参数item表示数组中的元素值,第二个参数index表示元素的下标,第三个参数arr则表示原数组。这两个方法都不会改变原数组。

// 检测你得到的年龄是否有小于18岁,那么就进入未成年模式,否则提示进入成年模式
    // some是一真即真
    var arr=[18,18,19,18,21,23,22,25,26];
    var isPerson=arr.some(function (item,index,arr) {
        // 只要有一个返回真,则停止判断
        return item<18
    })
    if (isPerson){
        alert("未成年");
    }else{
        alert("成年");
    }

filter方法

JavaScript中数组的filter()方法用于过滤元素,如果满足条件则将该元素添加到新的数组中并返回新的数组,该方法不会改变原数组。

var arr=[
        {name:"jiaxing",age:19},
        {name:"lipeihua",age:2},
        {name:"laozhang",age:38},
        {name:"laoliu",age:11},
        {name:"laowang",age:58},
    ]
    var newArr=arr.filter(function (item,index,arr) {
        return item.age<18;
    })
    console.log(newArr);

forEach和map方法

forEach和map这两个方法都可以用于遍历数组,在默认情况下都不会改变原数组,可根据个人的需求使用这两种方法遍历的同时改变原数组。不同的是forEach没有返回值,map方法则是有返回值的,在默认情况下,也就是没有通过return语句定义返回数值时,每遍历一个则添加一个undefined到新数组中,并返回新的数组。

 var arr=[18,18,19,18,21,23,22,25,26];
    var mapReturn=arr.map(function (item,index,arr) {
        // 对数组的每一项应用给定条件,返回新的数组
        //map的返回值是一个新数组,每次循环进来都对每一项操作,然后需要return出去,就只给给到新数组对应的值了
        return item+1;
    })

数组常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>请按F12</h2>
</body>
</html>
<script>
    

  // 返回数组长度
  var str = [1, 5, 5, 63, 4, 5, 5];
  console.log(str.length);

  // push 向数组的末尾添加一个或更多元素,并返回新的长度
  const a = [1, 2, 3, 4];
  const aa = a.push(2);
  console.log("数组的新长度" + aa);
  console.log("新数组" + a);

  // unshift 向数组的开头添加一个或更多元素,并返回新的长度
  const b = [2, 5, 6, 7, 8];
  const bb = b.unshift(3);
  console.log("数组新长度" + bb);
  console.log("新数组" + b);

  // pop 删除数组的最后一个元素返回删除的元素
  const c = [1, 2, 5, 4, 8, 4, 6, 5];
  const cc = c.pop();
  console.log("删除元素是" + cc);
  console.log("新数组" + c);

  // shift 删除并返回数组的第一个元素
  const d = [1, 2, 3, 4, 5, 6];
  const dd = d.shift();
  console.log("删除的元素是" + dd);
  console.log("新数组" + d);

  // reverse  反转数组的元素顺序
  const e = [1, 2, 3, 4, 5];
  const ee = e.reverse();
  console.log("反转的数组为" + ee);
  console.log("原数组为" + e);

  // find 返回符合传入测试(函数)条件的数组元素
  const f = [1, 2, 3, 4, 5];
  get = num => {
    return num > 3;
    // 这里接判断符号
  };
  const ff = f.find(get); // 函数要放在前面
  console.log("比3大的第一个元素是" + ff);

  // findIndex 返回符合传入测试(函数)条件的数组元素索引(下标)
  const g = [1, 2, 3, 4, 5];
  set = num => {
    return num == 2;
    // 如果要查找2的位置,应该用 == 来进行判断,是否等于2,是的话返回坐标
  };
  const gg = g.findIndex(set);
  console.log("2的第一个在数组gg里的坐标为" + gg);

  // slice 选取数组的一部分,并返回一个新数组
  const h = [1, 2, 3, 4, 5, 6];
  console.log("截取坐标0到4的数组" + h.slice(0, 4));
  // 这里不包含坐标为4的数值
  const hh = ["a", "b", "c", "d"];
  console.log("读取左边1和3的两个字符串" + hh.slice(1, 3));
  // 注意是不包含后面那个坐标的

  //splice 从数组中添加或删除元素
  const i = [1, 2, 3, 4, 5, 6];
  const num = i.splice(1, 0, "7");
  console.log("i.splice(1, 0, '7'):在坐标为1的地方添加7:" + i);
  i.splice(3, 1);
  console.log("i.splice(3,1):在坐标为3的地方删除一个数:" + i);

  // join 把数组的所有元素放入一个字符串
  const j = [1, 2, 3, 4, 5];
  const stre = j.join();
  console.log(stre);

  // forEach 迭代数组
  const k = [1, 2, 3, 4, 5];
  fun = (item, index) => {
    console.log("index" + index + ":" + item);
  };
  k.forEach(fun);
  // 遍历数组

  // map 通过指定函数处理数组的每个元素,并返回处理后的数组
  const l = [1, 2, 3, 4, 5, 6];
  sum = num => {
    return (num += 1);
    console.log("每项+1:" + num);
  };
  l.map(sum);
  // 不难发现,不管什么函数都需要返回值才能在外部生效

  // filter 过滤 检测数值元素,并返回符合条件所有元素的数组
  const m = [1, 2, 3, 5, 4, 8];
  bi = num => {
    return num > 2;
  };
  const mm = m.filter(bi);
  console.log("比2大的所有元素的数组为:" + mm);

  // indexOf 搜索数组中的元素,并返回它所在的位置
  const n = [1, 2, 3, 5, 4, 6];
  console.log("2在数组里面的位置为:" + n.indexOf(2));

  // includes 判断一个数组是否包含一个指定的值
  const o = [1, 5, 3, 6, 4, 7, 5];
  console.log("判断数组是否包含o:" + o.includes(o)); //false

  // isArray 判断对象是否为数组
  const p = [1, 2, 4, 5, 6, 3, 4];
  console.log("判断是否是数组" + Array.isArray(p)); // true

  // concat 连接两个或更多的数组,并返回结果
  const sums = a.concat(b, c);
  console.log("a、b、c三个数组连接" + sums);

  // sort 对数组的元素进行排序
  console.log("对数组sums排序:" + sums.sort());
//数组转化为对象
var fruits = ['1','pp'];
var fruitsObj = {...fruits};
console.log(fruitsObj);

function arrayToObj(arr){
    var obj = {};
    for(var i = 0; i < arr.length; i++){
        obj[i] = arr[i];
    }
}
//或者
function arrayToObj(arr){
    return Object.assign({},arr);
}

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