一个人开发一个产品,小程序从0到1,第9章 数组

数组是在程序设计中,为了处理方便,把若干元素按有序的形式组织起来的一种形式。这些有序排列的数据元素的集合称为数组。可用下标访问数据的元素,记得下标从0开始,而不是1。好多编程语言要求数组元素的数据类型是相同的,而微信小程序的,可以不同。

在微信小程序中,可用var a=[] 生成一个新的空数组,可用var a = [1,"牛",true]生成一个新的非空数组,元素支持任何数据类型。

10.1 访问

访问数组元素,可用下标指定值和循环下标的方式。如果不想通过下标,直接循环获取数组中的元素的话,我可以负责的、严谨的告诉你:那也是可以的。

 Page({
  //访问数组元素的例子
  onLoad: function(options) {
    var a = [1, "牛", true];
    console.log('下标1对应的元素值为:%s', a[1]);
    for (let i = 0; i < a.length; i++) {
      console.log('下标%d的值为:%s', i, a[i]);
    }
    //直接循环出元素值
    a.forEach(element => console.log(element));
    //循环出下标和元素
    a.map(function(item, index) {
      console.log('%d=%s', index, item)
    })
  }
})

10.2 查找

可通过数组的filter()、some()、every()、indexOf()和lastIndexOf()方法,查找符合条件的内容。为了代码简约和更具可读性,建议你采用ES6的方式。如果要支持ES5,在微信开发者工具中的【详情】-【本地设置】勾选【ES6转ES5】即可。

方法filter()不会改变原始数组,而是创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

Page({
  //filter方法
  onLoad: function(options) {
    var arr = ['语文', '数学', '英语', ' ']
    //去掉空元素,返回新数组
    var newArr = arr.filter(item => item != ' ')
    console.log(newArr)
    var arr2 = [59, 60, 80, 90];
    //过滤掉不符合条件的元素,返回新数组
    newArr = arr2.filter(item => item >= 60);
    console.log(newArr)
    //----这是ES5的访问方式----
    newArr = arr2.filter(function(item) {
      return item >= 80;
    });
    console.log(newArr)
  }
})

方法some()遍历数组每一项,如果有一项符合要求,返回true,否则返回false。every()方法则需要全部符合要求,才会返回true,否则返回false。

Page({
  //some和every方法
  onLoad: function(options) {
    let arr = [1, 2, 3, 4, 5];
    //some校验是否有符合条件
    let result = arr.some((element) => (element > 4));
    console.log('some结果:%s', result);
    //every校验是否全部符合条件
    result = arr.every((element) => (element > 4));
    console.log('every结果:%s', result);
    //some可比较
    let arr2 = ['语文', '数学', '英语', '物理'];
    function check(arr2, val) {
      return arr2.some((item) => (item === val))
    }
    console.log('有语文:%s', check(arr2, '语文'));
    console.log('有化学:%s', check(arr2, '化学'));
  }
})

some查找某个值是否在数组中存在的方法,其实用indexOf()或lastIndexOf()方法就可以很容易的达到。方法indexOf()将从左到右检索数组,如果找到符合要求的元素,返回对应的下标值,否则返回-1,方法lastIndexOf()则是从右向左检索。

 Page({
  //indexOf和lastIndexOf方法
  onLoad: function(options) {
    let arr = ['语文', '数学', '英语', '物理'];
    let i = arr.indexOf('语文');
    console.log('有语文:%s:', i > -1);
    i = arr.indexOf('化学');
    console.log('有化学:%s', i > -1);
    //indexOf指定开始位置为1
    i = arr.indexOf('语文', 1);
    console.log('有语文:%s', i > -1);
    //lastIndexOf
    let l = arr.lastIndexOf('英语');
    console.log('英语对应的下标为:%d', l);
  }
})

 

 10.3 新增

在存在的数组中新增元素,可用unshift()方法向数组的开头添加一个或更多元素并返回新的长度;可用push()方法向数组的末尾添加一个或更多元素并返回新的长度;可用splice()方法在数组的指定位置添加元素,改变原数组;还可用concat()连接两个或更多的数组并返回结果。

Page({
  //数组新增元素
  onLoad: function(options) {
    let arr = ['苹果', '香蕉', '葡萄'];
    //开头新增元素
    let len = arr.unshift('榴莲');
    console.log('%o,长度:%d', arr, len);
    //尾部新增元素
    len = arr.push('莲雾');
    console.log('%o,长度:%d', arr, len);
    //第1个参数为下标,第2个参数为0表示插入
    arr.splice(2, 0, '哈密瓜', '西瓜');
    console.log('%o,长度:%d', arr, arr.length);
    //在后面附加一个数组,会生成一个新数组
    const newArr = arr.concat(['樱桃','番石榴']);
    console.log('%o,长度:%d', newArr, newArr.length);
  }
})

10.4 修改

可通过指定下标修改数组中的元素,可以通过splice()修改指定位置的内容,可通过slice() 选取数组的的一部分,并返回一个新数组。

Page({
  //修改数组元素
  onLoad: function(options) {
    let arr = ['语文', '数学', '英语', '化学'];
    //通过下标修改元素
    arr[3] = '美术';
    console.log(arr);
    //第1个参数为下标,第2个为1表示修改
    arr.splice(1, 1, '物理');
    console.log(arr);
    //第1个参数为起始下标,第2个为结束下标
    const newArr = arr.slice(1, 3);
    console.log('原数组:%o,截取出来的数组:', arr, newArr);
  }
})

 

 10.5 删除

可通过shift()方法删除数组的第一个元素;可通过pop()方法删除数组的最后一个元素并返回删除的元素;可通过splice()方法删除数组指定位置的元素。

Page({
  //删除数组元素
  onLoad: function(options) {
    let arr = ['语文', '数学', '英语', '化学', '物理', '政治'];
    //删除第1个元素
    arr.shift();
    console.log(arr);
    //删除最后一个元素
    arr.pop();
    console.log(arr);
    //删除指定元素,第1个参数为开始下标,第2个为数目
    arr.splice(1, 2);
    console.log(arr);
  }
})

10.6 转换

可通过toString() 把数组转换为字符串,并返回结果;可通过valueOf()返回数组对象的原始值,默认为调用;可通过join()方法把数组的所有元素放入一个字符串。

Page({
  //数组转换
  onLoad: function(options) {
    let arr = ['语文', '数学', '英语'];
    //转为字符串
    console.log(arr.toString());
    //转为按指定字符隔开的字符串
    console.log(arr.join('|'));
  }
})

 

10.7 排序

数据可通过sort()方法用于对元素进行排序,排序顺序可以是字母或数字,默认按字母升序进行排序。如果想要进行降序的方式进行排序,可在sort()方法里指定比较函数,也可以直接用reverse()方法。

Page({
  //数组排序
  onLoad: function(options) {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    //升序排序
    fruits.sort();
    console.log(fruits);
    //降序排序
    fruits.reverse();
    console.log(fruits);
    //数字降序,升序改成a-b即可
    var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b) {
      return b - a
    });
    console.log(points)
  }
})

 

数组和字典在编程过程中会经常被使用到。数组的内容就是刚刚学完的,至于字典的,我明天将会发布在我的个人公众号:半码(halfcode)中,不会在这里发布。如果你想要掌握好微信小程序开发的完整内容,建议你关注我的个人公众号。

posted @ 2020-04-26 21:25  伴码  阅读(265)  评论(0编辑  收藏  举报