Day 9
数组
数组就是一组数据，可以放置任意数据，也即可以是对象。（数组本身也是对象，而且有array原型对象，也有原型对象的方法）
创建数组
一、字面量方式
var arr = ["字符串",123,undefined,null,true,{name:"学生",age:16},[1,2,3,4,5]];
二、构造函数方式
var city = new Array("深圳","广州","天津","乌鲁木齐"); // 参数为空
取数组的数据
通过索引值来取，索引值是从0开始的，例arr[3]，
修改数组数据
直接arr[5] = 某值
若数组只有10个值，但是直接arr[999] = 777可以吗
可以的，而且lenth直接变成1000，中间的全部变成null
如果小于的话，则直接删除后面的元素
项目：去除数组中的标题和地址还有图片，输出到页面形成图片和链接，类似新闻网站
方法：例如今日头条，F12——network——XHR——刷新获取——找到？min的这个，点击data看下，确实是文章的内容——切换到response的tab，复制出来
项目：易点租的date取数据（date见网盘上的代码）
可以和HTML+CSS结合
- 数组里面又有数组，如何取数据
- 循环两次
讲解在第52节课
数组的添加和删除
一、最前面的添加和删除
.push，往数组最后面添加
var arr =["1","2"]]
arr.push("push添加内容")
.pop删除，删除数组最后面
var delete = arr.pop()
console.log(delete)
与队列形式不同，这种形式是先进后出，意思就是数据添加顺序第一个的，删除的话却是最后一个删除。
队列则是先进先出
var arr = ["用户1"，"用户2"，"用户3"，"用户4"]
arr.push = "用户5"
arr.shift() //这样就可以删除第一个数据
arr。unshift(“关系户”) //这样就可以插队到第一个数据
二、添加和删除任意位置的几种方法
- 裁剪：.slice(begin，end)，不包含end这个索引值
- 不改变原数组
var arr = ["用户1"，"用户2"，"用户3"，"用户4"，"用户5"]
//arr.slice(1，3)
var newArr = arr.slice(1，3) //裁剪出来的内容放置到新数组
console.log(newArr)
-
.splice（索引值，删除的数量，添加的内容）
-
可用于添加/删除一个或者多个元素
-
会改变原数组
-
var arr = ["用户1"，"用户2"，"用户3"，"用户4"，"用户5"，"用户6"]
//arr.splice(1，3)
//仅删除内容
var deleteArr = arr.splice(1，2) //返回删除的内容
console.log(deleteArr)
console.log(arr)
//仅添加内容
arr.splice(1，0，"关系户king") //不删除，仅添加
console.log(arr)
slice还可以将一个为数组转化为一个真数组
数组的其他操作
- .concat，将多个数组合并成一个数组
- 不会改变原数组
var arr1 = ["用户1"，"用户2"，"用户3"]
var arr2 = ["用户4"，"用户5"，"用户6"]
var arr12 = arr1.concat(arr2)
console.log(arr12)
- .join，将数组转化为字符串
- 不会改变原数组
var arr = ["用户1"，"用户2"，"用户3"，"用户4"，"用户5"，"用户6"]
var toString1 = arr.jion()
console.log(toString1)
var toString2 = arr.jion("-") //改变字符串之间的连接符
console.log(toString2)
- reverse反转数组（内容倒序
- 会改变原来数组
var arr = ["用户1"，"用户2"，"用户3"，"用户4"，"用户5"，"用户6"]
arr.reverse()
console.log(arr)
-
sort方法排序
-
无参数时，只按照Unicode编码排序
-
//数据为字符串时 var arr = ["用户4","用户1"，"用户369"，"用户233"，"用户5"，"用户666"] var newArr = arr.sort() console.log(newArr) //数据为数字时，也是按照Unicode编码而不是数字大小 var arr = [233,1,369,47,666] var newArr = arr.sort() console.log(newArr)-
带参数时，就可以给数字正常排序（例如应用于价格排序）。排序规则就是自定义的函数
-
我们可以在sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数
浏览器根据回调函数的返回值来决定元素的排序：（重要）
- 如果返回一个大于0的值，则元素会交换位置
- 如果返回一个小于0的值，则元素位置不变
- 如果返回一个0，则认为两个元素相等，则不交换位置
-
-
-
var arr = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr.sort(function(a, b) {
if (a > b) { // 如果 a 大于 b，则交换 a 和 b 的位置
return 1;
} else if (a < b) { // 如果 a 小于 b，则位置不变
return -1;
} else { // 如果 a 等于 b，则位置不变
return 0;
}
});
console.log("arr");
console.log("result");
如果要相反顺序，>改成<即可
- 这也就是冒泡排序：先比较前两个数字，如果前<后就位置不变，反之就交换位置。第二和第三也如此操作，这样就能从小到大排序了。
数组遍历
以下都是用e点租的date数组来作为数组的
都是通过循环来操作的，但除了for循环之外，还有不同的方法
比如array对象自带的forEach方法，与for循环差不多
一、比较原始的遍历方法，仅循环
forEach，封装好的一个方法，传的是一个函数
//以前是这样循环的
for(var i=0;hotModel.lenth;i++){
console.log(i);
console.log(hotModel[i]); //等同于下面的item
}
//现在可以用forEach循环了
hotModel.forEach(function(item,i) { //传入的是一个函数
console.log(item); //输出第i个元素内容
console.log(i); //输出索引值
})
二、遍历并且修改数组内容
forMap方法也是array原型对象自带的，传的还是一个函数
可以用于，对数组中的数据内容要加工修改的时候
返回一个新的数组
//现在可以用map循环了
var newArr = hotModel.map(function(item,i) { //也是传入的是一个函数
item.minRent = item.minRent+"￥"//例如在价格后加符号
return item
})
console.log(newArr)
三、遍历并且过滤/筛选数组内容
forFilter方法也是array原型对象自带的，传的还是一个函数
字面意思就是过滤。比如找出数组中价格大于150的商品筛选出来
//现在可以用filter循环了
var newArr = hotModel.filter(function(item,i) { //也是传入的是一个函数
if(parseFloat(item.minRent)>150){ //要先转类型
return true //true为保留新数组
}else{
return false //不保留
}
})
console.log(newArr)
四、遍历并判断数组内容是否全部满足某一条件
every方法也是array原型对象自带的，传的还是一个函数
//现在可以用every循环了
var newArr = hotModel.every(function(item,index) { //也是传入的是一个函数
if(parseFloat(item.minRent)>100){ //要先转类型
return true //true所有的item.minRent都大于100
}else{
return false //false为至少有一个小于等于100
}
})
if(newArr){
console.log("全都大于100")
}else{
console.log("至少一个小于100")
}
五、遍历并判断数组内容，是否每一个满足某一条件
some方法也是array原型对象自带的，传的还是一个函数
//现在可以用every循环了
var newArr = hotModel.every(function(item,index) { //也是传入的是一个函数
if(parseFloat(item.minRent)>100){ //要先转类型
return true //true只要有一个大于100
}else{
return false //false一个都没有大于100
}
})
if(newArr){
console.log("至少一个大于100")
}else{
console.log("没一个大于100")
}
六、遍历并且将数组中的内容...相加？
reduce方法也是array原型对象自带的，传的还是一个函数(参数多了一个value)
用途：在对数组的每一个内容需要进行处理，并输出一个结果时
var newArr = hotModel.reduce(function(value,item,i) { //也是传入的是一个函数
return value+parseFloat(item.minRent)//将价格相加
},0) //注意0，初始条件
console.log("总价是："+newArr) //输出总价
查找数组的元素内容
一、找数组有没有某个内容
- indexOf()和lastIndexOf()
- 从前往后找和从后往前找
var arr = ["用户4","用户1"，"用户369"，"用户233"，"用户5"，"用户666"]
var newArr = arr.indexOf("用户777")
console.log(newArr) //-1为不存在
var newArr2 = arr.indexOf("用户666")
console.log(newArr2) //返回索引值
- find（）
- 找到第一个满足条件的元素就不再往下找了，比如找产品id为特定值(还是以e点租的date为例)
var result = hotModel.find(function(item,i,arr){
if(item.productId==129983){
return true
}else{
return false
}
})
console.log(result)
二、找数组元素的位置
-
indexOf()和lastIndexOf()，见上
-
findIndex（），可以找到第一个满足条件的元素的索引值
var result = hotModel.find(function(item,i,arr){
if(parseFloat(item.minRent)>150){
return true
}else{
return false
}
})
console.log(result)
将伪数组转化为真数组
Array.from()
伪数组目前已知的时argument
如何区分真伪数组？看__proto__对象是不是array，伪数组时object
将非数组转化为数组
Array.of（）
数组其他方法
判断是否为一个数组
Array.isArray（）
将数组转换为字符串
toSting（）
包装类
JS为我们提供了三个包装类：
- String()：将基本数据类型字符串，转换为String对象。
- Number()：将基本数据类型的数字，转换为Number对象。
- Boolean()：将基本数据类型的布尔值，转换为Boolean对象。
通过上面这这三个包装类，我们可以将基本数据类型的数据转换为对象。
创建这些对象，都是用构造函数的方式
var str1 = "123"
var str2 = new string("123") //构造函数
console.log(str1)
console.log(str2)
思考：字符串和字符串对象有区别吗？
一个值和对象的区别大了去了。例如：对象是内存地址，对象有对应的方法
不过要注意的是，实际中不会用基本数据类型的对象，因为用对象作比较的话，由于内存地址不同，明明一样的东西却不一样了
这个的作用是，方法和属性只能添加给对象，所以就转为暂时转为对象
