美文网首页
ES6语法整理合集

ES6语法整理合集

作者: Web_Fei | 来源:发表于2020-03-06 22:35 被阅读0次

    解构赋值

    *特别有用,尤其是ajax赋值

    let [a,b,c] = [12,4,5]
    console.log(a,b,c)  //12,4,5
    注意:左右两边结构要保持一直
    

    json:

    let {name,age,job} = {
        name:'hany',
        age:18,
        job:'程序员'
    }
    

    字符串模板

    ``字符串模板--优点:可以随意换行 `${变量名}`
    let name = '韩梅梅'
    let age = 19
    let str = `这个人叫${name},今年${age}岁`
    console.log(str) //这个人叫韩梅梅,今年19岁
    

    字符串的相关操作

    1.字符串查找
    str.indexOf(要找的东西),返回索引位置,没有找到返回-1
    str.includes(要找的东西),返回值true或者false

    2.判断浏览器
    console.log(navigator.userAgent.includes('Chrome')) true/false

    3.字符串是否以谁开头
    str.startsWith(检测东西)

    4.字符串是否以谁结尾
    str.endsWith(检测东西)

    5.重复字符串
    str.repeat(次数)

    6.填充字符串
    let str = 'apple'
    let padstr = 'xxx'
    let endstr = 'xxx'

    str.padStart(整个字符串长度,填充东西)
    console.log(str.padStart(str.length+padstr.length,padstr))

    str.endStart(整个字符串长度,填充东西)
    console.log(str.endStart(str.length+endstr.length,endstr))

    扩展运算符,Rest运算符(...方法)

    ...: [1,2,3,4]->...[1,2,3,4]->1,2,3,4
    ...: 1,2,3,4,5->...1,2,3,4,5->[1,2,3,4,5]

    剩余参数用法:必须放到最后

    function show(a,b,...c){
        console.log(a,b) //1,2
        console.log(c) //[3,4,5]
    }
    show(1,2,3,4,5)
    

    数组相关方法

    Array.from()
    作用:把类数组(获取一组元素,Arguments...)对象转成数组
    观点:只要具备length就可以使用

    let array = {
        0: 'apple',
        1: 'orange',
        2: 'mango',
        3: ['people1','people2','people3'],
        'length': 4
    }
    let arr = Array.from(array )
    console.log(arr) // ['apple','orange','mango',['people1','people2','people3']]
    

    Array.of()
    作用:把一组值,转成数组

    let arr = Array.of('apple','banana','orange')
    console.log(arr) // ["apple", "banana", "orange"]
    

    arr.find()
    作用:找出第一个符合条件的数组成员,如果没找到就返回undefind

    let arr =  [1,9,20,60,100,61,101,300]
    let newarr = arr.find((val, index, arr) => {
         return val > 200
    })
    console.log(newarr) //300
    

    arr.findIndex()
    作用:查找符合条件数组成员下标,没有找到返回-1

    let arr =  [1,9,20,60,100,61,101,300]
    let newarr = arr.findIndex((val,index,arr)=>{
         return val>200
    })
    console.log(newarr) // 7
    

    arr.fill()
    作用:填充 arr.fill(填充的东西,开始位置,结束位置)

    let arr = new Array(10)
    arr.fill('默认',1,3)
    console.log(arr) //[empty, "默认", "默认", empty × 7]
    

    arr.includes()
    作用:arr.includes(要找的东西)查找数组中是否有某个值,返回值true或者false

    arr.forEach()
    代替普通for循环

    let arr = ['one','two','three','four','five']
    arr.forEach((val,index,arr)=>{
         console.log(val,index,arr)
         //val是值  index下标  arr数组
    })
    

    arr.map()
    非常有用,做数据交互"映射",正常情况下,需要配合return,返回一个新数组,若是没有return,相当于forEach

    let arr = [
        {title:'标题1',read:50,hot:100},
        {title:'标题2',read:60,hot:200},
        {title:'标题3',read:70,hot:300},
        {title:'标题4',read:80,hot:400},
    ]
    let newarr = arr.map((val,index,arr)=>{
        let newjson = {}
        newjson.head = `新${val.title}`
        newjson.click = val.read + 100
        newjson.heat = val.hot * 2
        return newjson
    })
    console.log(newarr)
    //[{title:'新标题1',read:150,hot:200},{title:'新标题2',read:160,hot:400},{title:'新标题3',read:170,hot:600},{title:'新标题4',read:180,hot:800}]
    

    注意:平时只要用map,一定要有return

    arr.filter()
    过滤,过滤一些不合格的"元素",如果回调函数返回true,则保留下来

    let arr = [
        {title:'标题1',read:50,hot:100},
        {title:'标题2',read:60,hot:200},
        {title:'标题3',read:70,hot:300},
        {title:'标题4',read:80,hot:400},
    ]
    let newarr = arr.filter((val,index,arr)=>{
        return val.hot == 100
    })
    console.log(newarr)//[{title:'标题1',read:50,hot:100}]
    

    arr.some()
    类似查找,数组里面某一个元素符合条件,返回true

    let arr = ['one','two','three','four','five']
    let newarr = arr.some((val,index,arr)=>{
        return val == 'three'
    })
    console.log(newarr)//true
    

    arr.every()
    数组里面所有元素都要符合条件,才返回true

    let arr = [1,3,5,7,9]
    let newarr = arr.every((val,index,arr)=>{
         return val%2 == 1
    })
    console.log(newarr)//true
    

    箭头函数

    let show = function(){}
    let show = ()=>{}
    

    注意:
    1.this的问题,定义函数所在的对象,不在是运行所在的对象
    2.箭头函数里面没有arguments,用'...'
    3.箭头函数不能当构造函数

    对象相关用法

    Object.is()
    作用:用来比较两个值是否相等

    Object.is('a','a') //true
    Object.is(NaN,NaN) //true
    Object.is(+0,-0)   //false
    

    Object.assign()
    作用:用来合并对象,合并参数

    let 新对象 = Object.assign(目标对象,source1,source2,source3...)
    let json1 = {a:1}
    let json2 = {b:2}
    let json3 = {c:3}
    let newObj = Object.assign({},json1,json2,json3) //{a:1,b:2,c:3}
    

    相关文章

      网友评论

          本文标题:ES6语法整理合集

          本文链接:https://www.haomeiwen.com/subject/qslarhtx.html