学习javaScript必知必会(3)~数组(数组创建,for…in遍历,辅助函数,高级函数filter、map、reduce)

2022-01-16 0 431

一、数组:

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

收藏 (0) 打赏

感谢您的支持,我们会继续努力的!

打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传,如有侵权请带证联系本站客服进行处理!邮箱:team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系本站客服处理,有奖励!
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 本站原创资源如需商用还请申请商业授权,否则本站有权追究其法律责任!
5. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有学币奖励额外收入!

凌晨资源网 前端开发 学习javaScript必知必会(3)~数组(数组创建,for…in遍历,辅助函数,高级函数filter、map、reduce) https://www.lingchenw.cn/1112.html

常见问题
  • 本站所有付费教程均可单独付费或者开会员学习,自己购买或者开了会员就可以学习,来凌晨学院报名学习送会员,并且有讲师一对一辅导培训教学,师生互动化,定期布置作业等
查看详情
  • 本站所有资源版权均属于原作者所有,资源中标注可商用的可以商用的代表是本团队自主研发公布可商用的产品,未标注可商用所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

学习手机编程软件开发
手机编程软件开发

你知道吗?用手机也能开发制作软件,满足自己的编程心,做属于自己的软件

报名学习
自媒体短视频
副业做自媒体短视频

想做自媒体短视频剪辑给自己多一份副业,只需一部手机你也可以

报名学习
搭建网站必备云互联主机
链未云互联

搭建网站,后台云服务等必备云服务器互联主机,IDC云主机

现在使用
Fa快捷助手
用手点一点就能开发做软件

不用记编程语法,不用一行一行手敲代码,用手点一点就能开发制作软件

点击下载