zoukankan      html  css  js  c++  java
  • 学习javaScript必知必会(3)~数组(数组创建,for...in遍历,辅助函数,高级函数filter、map、reduce)


    一、数组:

    1、js是弱语言,js中的数组定义时:不用指定数据类型、不用功指定数组长度;数组可以存储任何数据类型的数据


    2、数组定义的[ ] 的实质:

    [] = new Array();
    {} = new Object();
    // = new RegExp();
    

    3、创建数组的语法:

    var arr = [值1, 值2, 值3];
    var arr = new Array(值1, 值2, 值3);
    var arr = new Array(值1);//只有一个值时,其为数组的长度,赋值需要一个一个进行赋值,例如 arr[0] = 1; arr[1] = 2; ...
    

    4、数组的数据类型----即对象(在js中,数组不需要定义时指定数据类型,它的类型就是对象)


    5、for-in遍历:可以遍历一个对象的所有属性;也可以编译一个数组的所有元素


    ✿ 6、数组想要带有文本下标的元素,必须在创建数组之后

    var arr = [1, 2, 3];
    arr['pop'] = 'gun';
    arr['good'] = 'cloth';
    

    □ 在js中,文本下标的数组元素,不计入数组长度。因为文本下标的元素是以属性形式添加到数组对象中的】

    var arr = [1, 2, 3];
    arr['pop'] = 'gun';
    arr['good'] = 'cloth';
    //取到数组下标为'pop'的元素:
    document.write(arr['pop']);
    document.write(arr.pop);
    



    二、数组中的辅助函数和高级函数:

    (1)辅助函数

    push()      添加元素
    pop()        删除元素
    shift()       删除元素
    unshift()   添加元素
    splice()     可添加可删除元素
    sort()        排序元素
    reverse()  逆序元素
    

    (2)高级函数

    ■ filter:过滤(通过回调函数拿到当前数组的每个元素)

    遍历数组,对元素通过设定某种条件,不满足的元素过滤掉了,最终返回经过过滤的数组。

    ● 要求回调函数返回值是布尔值,为true时,当前的元素添加到内部数组中,为false则过滤掉。

    // 1.filter函数的使用(让原数组中元素值小于10的被过滤掉)
    let newNums = nums.filter(function (n) {
       return n < 10
     })
    

    ■ map:映射 (通过回调函数拿到当前数组的每个元素)

    遍历数组,对元素设定某种处理条件(例如增删改查操作),最终返回经过处理的数组。

    ● 数组调用map函数,返回值是经过map函数的参数---回调函数处理过的新数组。

    ● 回调函数的参数(当前数组的元素)

    //map函数的使用:(让原数组中的每个元素值翻倍)
    let new2Nums = newNums.map(function (n) {
           return n * 2
    })
    

    ■ reduce:汇总(通过回调函数拿到当前数组的每个元素)

    遍历数组,对元素进行“累加”,最终返回“累加结果”。

    ● 数组调用reduce函数(作用就是汇总,从初始值开始不断的“累加”),

    所以一般数组调用reduce函数需要有两个参数第一个是回调函数,第二个是初始值

    回调函数(“累加器”--为了实现“累加”作用)往往也是需要两个参数的(+运算符的作用对象就是2个呀,例如1+2(+两边各有一个对象)哈哈哈)

    第一个参数:preValue 前一次汇总后return的值, 第二个参数:n 当前元素

    
     // 3.reduce函数的使用(对数组中所有的所有元素进行累加)
     //new2Nums是一个数组
     let total = new2Nums.reduce(function (preValue, n) {
       return preValue + n
     }, 0)
    

    <div id="app">
        <div>
        总价格:{{total | getPrice}}
        </div>
    </div>
     
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          books: [
            {name: '算法导论1', date:'2018-1-1', price:100.5099, count:'1'},
            {name: '算法导论2', date:'2018-1-1', price:100.9988, count:'1'},
            {name: '算法导论3', date:'2018-1-1', price:100.98, count:'1'},
            {name: '算法导论4', date:'2018-1-1', price:100.00, count:'1'},
          ]
        },
        computed: {
          total(){
            return this.books.reduce(function (preValue, n) {
              return preValue + n.count * n.price;
            }, 0);
          }
        },
        filters: {
          getPrice(price){
            // return '¥' + parseFloat(price).toFixed(2) ;
            return '¥' + price.toFixed(2) ;
          }
        }
    </script>
    

    本文来自博客园,作者:一乐乐,转载请注明原文链接:https://www.cnblogs.com/shan333/p/15810931.html

  • 相关阅读:
    deque源码2(deque迭代器、deque的数据结构)
    layui 使用随记
    SQL Server 跨服务器、跨版本使用复制 (2008、2012)
    SQLServer 跨服务器链接 Access数据库
    asp.net发布后其他电脑部署——未能加载文件或程序集 System.Web.Mvc, Version=2.0.0.0, Culture=neutral,
    JQuery 遍历table中的checkbox 并对行数据进行校验
    sql 动态行转列 (2005及以上版本)
    JS读取xml
    MVC 创建Controllers 发生 EntityType has no key defined error
    C# 去除数字中多于的0
  • 原文地址:https://www.cnblogs.com/shan333/p/15810931.html
Copyright © 2011-2022 走看看