一、数组：
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
