ES6的快速理解

第一节:forEach

曾经的遍历for,难理解!最后返回出来的就是这几个

var name =  ['Aaron','Ben','Cands','Dade']

for(var i=0; i

forEach很简单,把你要遍历的东西加一个forEach,把你所有值批量一个名字a, 他就会按顺序给你返回

var name =  ['Aaron','Ben','Cands','Dade']

name.forEach(function(a){
    console.log(a)
})

小实验,把123455678加一起
鸡鸡有这些,用一个sum鸡窝依次放进去!最后返回55只小鸡鸡

var jj = [1,2,3,4,5,6,7,8,9,10]
var sum = 0
jj.forEach(function(n){
    sum+=n
})

console.log(sum)

链接同样的用这个方法更方便!过滤返回来未选中的留下,其他的隐藏。


第二节:map

说白了,就是把原本的数组复制一份,然后改改值.再起一个名字
曾经养了一堆鸡鸡,然后把原本的鸡鸡乘以2然后返回的价格起一个新的名字叫做KFC。鸡鸡本身便宜,改名就贵了一圈

var jj = [1,2,3,4,5,6,7,8,9,10]

var kfc = jj.map(function(n){
    return n*2
})

console.log(kfc)

第三节:filter

俗称的过滤器,简单的说 新冠状病毒里生病呈阳性的站出来这种就是过滤

var bd = [
    {name:"刘忙", type:"Yang"},
    {name:"马超", type:"Yin"},
    {name:"赵三", type:"Yin"},
    {name:"周敏", type:"Yang"}]

var txt = bd.filter(function(a){
    return a.type === 'Yang'
})

console.log(txt)

第四节:find

肯定是寻找了的意思,但是他跟楼上的不同!他是找到一个就结束,后面的我就不找了!比如今日新闻 北京丰台副区长被免职。有那么多官里面挑最倒霉的去顶罪。就用这个方法!
你会发现第一个男版周宇清倒霉认栽了

var bd = [
    {name:"刘忙", type:"女"},
    {name:"马超", type:"男"},
    {name:"周宇清", type:"男"},
    {name:"周宇清", type:"女"}]

var dm = bd.find(function(a){
    return a.name === '周宇清'
})

console.log(dm)

还有更实用的,比如犯人很多!满足条件的那个人给我带出来

var fr = [
    {name:"刘忙", type:"女"},
    {name:"周立波", type:"女"},
    {name:"马超", type:"男"},
    {name:"周立波", type:"男"},
    {name:"马蓉", type:"女"}
]

var sb = {name:"周立波", type:"男"}

var dm = fr.find(function(a){
    return a.name == sb.name && a.type == sb.type
})

console.log(dm)

第五节:every

一否则否
every简单地说:一个人感染,全村都被隔离。
全部必须都满足,有一个不满足要求的就完蛋

var cz = [
    {name:"刘忙", type:"no"},
    {name:"江立波", type:"no"},
    {name:"张超", type:"yes"},
    {name:"周立波", type:"no"},
    {name:"马蓉", type:"no"}
]

var txt = cz.every(function(n){
    return n.type == "no"
})

console.log(txt)

第六节:some

一真为真
有一个满足就给你过!
当年想进政府工作,但是进去需要条件。只要你家满足一个人就能让你全家人进政府吃香喝辣

var cz = [
    {name:"刘忙", type:"10W"},
    {name:"江立波", type:"2W"},
    {name:"刘超", type:"9W"},
    {name:"刘吉吉", type:"30W"},
    {name:"刘蓉", type:"1W"}
]

var txt = cz.some(function(n){
    return n.type >= "30W"
})

console.log(txt)

第七节:reduce

之前的鸡窝升级版,第一节还需要外面建一个鸡窝,还要加等
这次来个一个KFC神器,直接KFC带走小鸡鸡自动检测,第一个值(鸡窝):jw,第二个(原本的鸡鸡):num
你会发现你只要加一次就行了

var jj = [1,10,20,30,40]

var KFC = jj.reduce(function(jw, num){
    console.log(jw)
    return jw + num
}, 0)

console.log(KFC)

第八节:模板字符串

曾经的字段插入东西特别的麻烦,还经常单引号双引号出错

let name = '刘德华'
let nabob = "

世界第最帅的大富翁是谁呢?

'+name+'

"

有了这个神器,妈妈再也不用担心我的学习。

let name = '刘德华'
function baby(val)
{
 return val.toUpperCase()
}
let nabob = `

世界第最帅的大富翁是谁呢?

${baby('hello')}

${name}

`

第九节:箭头函数

就是以前的function的升级版,全新的箭头函数两大优点缩短代码和this指向
F3 F4一行的话不用return
多参必须加括号

const f1 = function(num){ return num*10 }
const f2 = (num)=>{ return num*10 }
const f3 = (num)=> num*10
const f4 = num => num*10 
const f5 = (num,val) => num*10 + val 

console.log(f4(25))

箭头指向,在Vue中的data里可以互相用。为什么?因为在这里他们是一家。所以在这节课当中的箭头指向直接用就行!不像以前还要在外面var一个_this然后再放进去!

let sb = {
   city:'北京市',
   Area:'房山区',
   temp(){
      return this.city+`${this.Area}` 
   }
}

console.log(sb.temp())

第十节:函数参数默认值

简单地说,function xBoy(a,b){}
如果你只放了a没有B,那么会提示报错
而下方的就是正确的,有就有!没有就算了。

//提示报错的
function xBox(a, b)
{
    return a+b
}

console.log(xBox('gogogo.com'))

//正确的
function xBox(a, b = '')
{
    return a+b
}

console.log(xBox('gogogo.com'))

第十一节:展开运算符

因为function box(a,b,c,d,e,f)参数有N个,有什么办法能忽略?有几个算几个呢?

function xBox(...Num)
{
    //原本是xBox(a,b,c,d,e),里面又让你var Num = [a,b,c,d],然后放下面
    return Num.reduce((a,b)=>{
        return a + b
    },0)
}

console.log(xBox(1,2,3,4,5,6))

再换句话说,就是把数组萎缩模式,三个点快速的把他放进去

var a = ['aaa', 'bbbb', 'ccc']
var b =['ddd','eeee', 'ffff']

console.log([...a, ...b])

第十二节:解构对象

传统的方式是这样的

var a = {
  type:'POST',
  method:'is No default'
}

var b = a.type
var c = a.method

console.log(b,c)

全新的方法是把里面的东西直接拿出来直接用!但是名字不能改

var a = {
  xtype:'POST',
  xmethod:'is No default'
}

var {xtype, xmethod} = a;

console.log(xtype, xmethod)

还有几种方式也是在数组里批量用的

var name = ['God','Aaron','barty','carty','yaoming']
var [name1, name2, name3, name4, name5] = name
console.log(name1,name2,name3,name4,name5)

var name = ['God','Aaron','barty','carty','yaoming']
var {length} = name
console.log(length)

let a,b
[a,b] = [10,250]
console.log(b)

const a  =[
    [12,45],
    [34,71],
    [75,35],
    [22,69],
    [31,70]
];
let b = a.map(([xx,oo])=>{
    return {X:xx,Y:oo}
});
console.log(b)
//首先a的里面都是a和b的模式,所以用map时候也随着他的本身进行遍历,那样才能或许XXOO这两个值!然后返回XY是瞎写的,为的是在console.log里显示出来

第十三节:class万事皆对象

constructor是必有的

class Car{
    constructor({txt}) {
        this.txt = txt
    }
}

const car = new Car({txt:'我就XXXXXXXX'})
console.log(car)

你可能感兴趣的:(ecmascript)