一、map方法
数组增加方法.push
.map 是将数组中的每个元素增加特殊处理后,再返回数组
.replace 表示替换(替换前值,替换后值)
let prices=[20,30,40]
arr = prices.map(item=>item+'元') //使用map将其中的每个元素拿出来并加入元,箭头函数
无法使用构造函数
console.log(arr)
案例
let movies=[
{id:1,name:'逃学威龙',imgUrl:"http://xxx.douban.com/1.png"},
{id:2,name:'逃学威龙',imgUrl:"http://xxx.douban.com/1.png"},
{id:3,name:'逃学威龙',imgUrl:"http://xxx.douban.com/1.png"}
]
movies = movies.map(item=>{
item.imgUrl= item.imgUrl.replace("xxx","www")
return item
})
console.log(movies)
二、some 与 every
.every() 依次 拿出数组中的元素与特定的值进行比较,如果一个返回的是假 整体返回就是假,如果全部返回真 ,则为真 一假既假 返回的是 T OR F
.some() 一真既真 返回的是 T OR F
//every 表示要每一个成立才返回真
let scores=[88,20,33,55,99,100]
let result = scores.every(item=>{
return item>=60)}
console.log(result) //f
//.some有一个为真则为真
let scores=[88,20,33,55,99,100]
let result1 = scores.some(item=>{
return item>=60)}
console.log(result1) //t
三、filter过滤
.filter () 过滤 后接方法
filter方法 依次的拿出数组中的元素,返回符合要求元素 返回一个新的数组
let arr=[1,2,3]
for(let n=0;n<arr.length;n++){
console.log(arr[n])
}
//forEach 依次拿出数组的元素 item
arr.forEach(item=>{
console.log(item)
}) //依次拿出数组中的元素
<body>
<button id="bt1">显示所有留言</button>
<p>
输入作者:<input type="text" id="bt2">
</p>
<button id="bt3">筛选指定作者留言</button>
<ul id="mes">
</ul>
<script>
function Message(name,title,content){
this.name=name
this.title=title
this.content=content
} //构造函数 共有类
let messages=[new Message("张三","今天天气不错","出去玩一天"),new Message("李四","楼上说的不对","今天下雨了"),new Message("张三","你猜不对","哈哈哈"),new Message("王五","你俩有病吧","啊啊啊")] //数组
let bt1=document.getElementById("bt1") //获取标签
let mes=document.getElementById("mes")
bt1.onclick=function(){
let str=""
messages.forEach(item=>{
str+=`<li>${item.name}说了${item.title}:${item.content}</li>` //利用反引号进行输入
})
mes.innerHTML=str //加入标签
}
let bt3=document.getElementById("bt3")
let bt2=document.getElementById("bt2")
bt3.onclick=function(){
let uname=bt2.value//获取输入作者名称
//根据作者名称 对messages数组进行过滤 ,符合要求的元素
let result=messages.filter(item=>item.name==uname) //过滤 数组中name等于unmane的值,并返回数组
//现在result所获得的函数即为赛选后的函数,在利用forEach将其中的值放入str中
if(result.length>0){
let str=""
result.forEach(item=>{
str+=`<li>${item.name}说了${item.title}:${item.content}</li>`
})
mes.innerHTML=str
}else{
let str="<li>没有对应用户</li>"
mes.innerHTML=str
}
}
</script>
</body>
四、reduce 方法
map 和 filter 依次拿出其中的数 一对一指向
reduce 依次拿出其中的数 一对多指向
reduce (prev,item,index,array) 四个参数
prev 上次操作的返回结果
item 当前处理的数组元素
array 当前处理的数组
默认情况下 表示第一次返回的结果是第一个元素
结果返回的是最后一个结果
let arr=["百度","腾讯","阿里","京东"]
let result=arr.reduce((prev,item,index,array)=>{
console.log("prev"+prev)
console.log("Item"+item)
console.log("index"+index)
console.log("--------------------------")
return item //返回的是最后一个结果
})
console.log(result)
------------------------------------------------------------------------
let arr=["百度","腾讯","阿里","京东"]
let result=arr.reduce((prev,item,index,array)=>{
console.log("prev"+prev)
console.log("Item"+item)
console.log("index"+index)
console.log("--------------------------")
return prev //第一次返回的是百度 始终返回的是上一个结果即为百度
})
console.log(result)
//利用reduce方法进行求和
let arr=[1,2,3,5]
let result=arr.reduce((prev,item)=>{
console.log("prev"+prev)
console.log("Item"+item)
console.log("--------------------------")
return prev+item // 第一次就是0+1 的二次返回的是第一次的结果1 item为2 结果为3,第三次返回的上次结果3 item为3 结果为6 , 第四次 上次返回的结果是6 所以prev = 6 item为5 结果为11
},0) // 0 表示的是prev 的初始值
// let result=arr.reduce((prev,item)=>item+prev) //箭头函数简写
console.log(result)
let arr=["百度","腾讯","阿里","京东"]
let result=arr.reduce((prev,item)=>{
console.log("prev"+prev)
console.log("Item"+item)
console.log("--------------------------")
return prev+"<li>"+item+"</li>"
},"") //需要对prev设置初始值,若不进行设置,第一个prev为百度,则第一个prev中未加入标签<li></li>
console.log(result)
五、字符串新增方法
.repeat() 重复 返回新字符串
.includes() 是否包含指定内容 返回的 f 或 t
. indexOf() 返回指定元素的对应位置 没有返回-1
. startsWith() 是否以什么开头
.endsWith() 是否以什么结尾
.trim() 清除前后的空格
// .repeat(数字) 重复 返回新字符串
let str="hello world"
let result=str.repeat(3)
console.log(result) //重复3遍的str
--------------------------------------------------------------------
// includes() 是否包含指定内容
let str="hello world"
let result=str.includes("x")
console.log(result) //f 说明str中没有X
-------------------------------------------------------------------
//startsWith() 是否以什么开头
let str="hello world"
let result=str.startsWith("he")
console.log(result) //t 说明str的开头是he
---------------------------------------------------------------------
// endsWith() 是否以什么结尾
let imgUrl="1.jpg"
let result=imgUrl.endsWith("png")
console.log(result) //f 说明 imgUrl 的结尾不是png
--------------------------------------------------------------------------
// trim() 清除前后的空格 !!!!!
let str=" hello world "
console.log(str=="hello world")
let result=str.trim() //去掉空格的str
console.log(result=="hello world")
六、map的数据类型
对原本的对象类型, 原本的对象类型 key只能是字符串
map类型 可以让任意类型数据 作为对象的key
如果是特殊的变量,作为key值,需要使用set get方法 获取值
let m=new Map() //创建一个map对象
m.name="王一"
console.log(m)
-----------------------------------------------------------
<body>
<button id="bt1">确定</button>
<script>
let bt1=document.getElementById("bt1")
let m=new Map() //创建一个map对象
m.set(bt1,"5") //设置bt1的值
console.log(m) //输出m的对象为buttim
console.log(m.get(bt1)) // 5 用get 得到bt1的值 5
</script>
</body>
七、symbol
独一无二的值 ,防止出现命名的冲突问题,用于作为对象的key值
let s=Symbol("name")
let obj={
age:21
}
obj[s]="王一"
obj.name="王二"
obj.s="哈哈"
console.log(obj) // 无论加入的是obj.name 或者 obj.s都无法改变s中 Symbol的值
八、class属性
super()方法 父级的构造函数
constructor()公共属性
extends 前者继承后者
//普通方法创建
function People(name,age,height){
this.name=name
this.age=age
this.height=height
}
People.prototype.run=function(){
console.log("正在跑")
}
let p1=new People("王一",21,193)
console.log(p1)
p1.run()
------------------------------------------------------------
//class方法创建
class People{
//构造函数
constructor(name,age,height){
this.name=name
this.age=age
this.height=height
} //公共属性
run(){
console.log("正在跑")
} //原型中的方法
}
class Student extends People{
constructor(name,age,height,score){
//super()方法 父级的构造函数
super(name,age,height)
this.score=score //super必须写在 自己属性的上方
}
showInfo(){
console.log(this.name) //自己的函数
}
run(){
console.log(this.name+"正在跑") //若需要修改父级原型中的值 直接修改即可
}
}
let s1=new Student("王一",21,22,65)
console.log(s1 instanceof Student)
console.log(s1)