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

简介: 学习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>
目录
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
39 5
|
29天前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
24 2
|
29天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
50 1
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
23 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
20 2
|
2月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
38 1
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
46 0
|
2月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
23 0
|
3月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
下一篇
DataWorks