javascript es6 语法快速入门

故事扮演 提交于 2019-12-04 20:55:43

1. let、const

  作用:let 声明变量,const 声明常量

  与 var 的区别:不能重复声明,且存在块级作用域,即只在代码块内生效

 

2. 箭头函数

  使用:

let show = function (a, b) {
    return a + b;
}
alert(show(5, 3))  //结果为8

let show = (a, b) => {
    return a + b;
}
alert(show(5, 3))  //结果为8

  当函数只有一个参数时,可以省略圆括号;当函数体内只有一条return语句时,可以省略函数体

let score = [19, 78, 90, 32, 12, 88]
let r = score.map(item => item >= 60 ? '及格' : '不及格')
alert(r)  

3. 参数扩展:多余的参数可以通过扩展参数接收

let show = function (a, b, ...args) {
    alert(a)
    alert(b)
    alert(args)
}
show(1, 2, 3, 4, 5, 6, 7, 8, 9);

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr = [...arr1, ...arr2]
alert(arr)

4. 解构赋值:左右两边类型必须一致

let [a, b, c] = [1, 2, 3]
console.log(a, b, c)  //结果为:1,2,3

let { a, b, c } = {
    a: 123,
    b: 324,
    c: 54343
}
console.log(a, b, c);  

5. 数组

  5.1 map (映射)

let arr = [12, 5, 8]

let result = arr.map(
    (item) => {
    return item * 2;
    }
)

alert(result)  //结果为24,5,16

  5.2 reduce(汇总)

let arr = [1, 2, 3, 4, 5, 6]
let r = arr.reduce((tmp, item, index) => {
    return tmp + item;
})
alert(r)    //结果为21

let arr = [1, 2, 3, 4, 5, 6]
let r = arr.reduce((tmp, item, index) => {
    if (index != arr.length - 1) {
        return tmp + item;
    } else {
        return (tmp + item) / arr.length
    }
})
alert(r)

  5.3 filter(过滤器)

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let r = arr.filter(item => {
    return item % 3 == 0
})

alert(r)    //结果为3,6,9

  5.4 forEach(迭代)

let arr = [12, 5, 8, 9]

arr.forEach(item => {
    alert(item)
})

6. 字符串

  1. startsWith、endsWith:匹配开头和结尾的字符串

let str = "http://xxxxx.jpg"

if (str.startsWith('http')) {
    alert("ok")
} else {
    alert("no")
}

if (str.endsWith('jpg')) {
    alert("ok")
} else {
    alert("no")
}

  2. 字符串模板:支持换行且可以使用 "${ }" 符取值

let title = 'Welcome!'
let content = 'hello es6!'
let str = `
    <div>
    <h1>${title}</h1>
    <p>${content}</p>
    </div>
`
alert(str)

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!