ECMA6初级学习笔记-01

151 阅读3分钟

为啥将ECMA6放到VUE的文集中?因为我觉得学习VUE之前最好有一些JS的基础,而目前应用的比较多的JS版本就是JS2015,也就是ECMA6。

学习之前先扯点闲白,ECMA是什么?是一个组织,前身为欧洲计算机制造商协会(European Computer Manufacturers Association),目标是评估,开发和认可电信和计算机标准。其实他有很多的标准,只是大家都没有太理他而已。而ECMA6只是一个简称是这个组织在2015年发布的一个针对JS的标准,所以这一标准又称为JS2015。

这个标准对以往的JS有哪些改动呢?咱们一项一项的往下看

1、变量与常量的定义 以前版本的JS定义变量时都是使用var来定义,至于常量……似乎压根就没这一说,而这样儿的话则存在以下几个问题

(1)var可以重复声明,就是定义完了可以再定义再定义再定义,直到你满意

(2)无法限制其修改,比如我们定义了一个PI的值,其他人说改就给你改了,这让你很不爽

(3)没有块级作用域,无论你是if还是for或者只是一个语句块{},你在块内定义这后,在块外依然可以引用

而在ECMA6中引用了新的定义方法,解决了这三个问题

// let:不能重复声明,变量,块级作用域
// const:不能重复声明,常量,块级作用域
        const PI = 3.1415926

        let a = 5
        let b = 12

        console.log('a+b=' +(a+b) )
        console.log('PI=' +PI)

2、箭头函数

        // 原来的写法
        let show = function (a, b) {
            console.log(a+b)
        }

        // 箭头函数的写法
        let nshow = (a,b)=> {
            console.log(a+b)
        }

        // 调用方式都相同
        show( 3, 12)
        nshow( 3, 12)

        let arr = [ 12, 5, 8, 99, 33, 14, 26]

        arr.sort( (n1, n2)=>n1 -n2)

        console.log(arr)

需要注意的是如果只有一个入参,则()是可以省略的。如果只有一个返回语句,没有其他语句,则{}也是可以省略的。啥意思?看

        let show1 = function (a) {
            return a*2
        }

        // 箭头函数的写法
        let nshow1 = a=> a*2

        console.log('show1:' +show1(12))
        console.log('nshow1:' +nshow1(12))

3、Rest Parameter

(1)参数的扩展/数组展开

参数扩展

        let show =(a, b,...args)=> {
            console.log(a)
            console.log(b)
            // args收集了剩余的参数
            console.log(args)
        }

        show(1, 2, 3, 4, 5, 6, 7)

注:REST Parameter必须放在最后

数组展开

        let arr1 = [1, 2, 3]
        let arr2 = [5, 6, 7]

        let arr =[...arr1, ...arr2]

        console.log(arr1)
        console.log(arr2)
        console.log(arr)

(2)参数默认值

        let show1 =(a, b=5, c=6)=>{
            console.log(a)
            console.log(b)
            console.log(c)
        }
        //  a=4 b=7覆盖了默认值,c使用了默认值
        show1( 4, 8)

4、解构赋值

        let [a, b, c] = [1, 2, 3]

        console.log( a, b, c)

        let {d, e, f} = {d:4, e:5, f:6}

        console.log(d, e, f)

        let [{g, h}, [n1, n2, n3], n, str]= [{g:12, h:5}, [12, 5, 8], 8, 'hello']

        console.log(g, h, n1, n2, n3, n, str)

        let [json, [n21, n22, n23], num, str2]= [{g:12, h:5}, [12, 5, 8], 8, 'hello']

        console.log(json, n21, n22, n23, num, str2)

(1)等号两侧结构必须相同

(2)右边必须遵循结构

(3)声明和赋值不可分离(必须在一个语句中完成)

5、数组

(1)map 映射,一对一

        let arr = [12, 58, 99, 86, 45, 91]

        let result = arr.map(item=>item*2)

        console.log(result)

        let score = [19, 85, 99, 25, 90]

        let result1 = score.map( item =>item >=60?'及格':'不及格')

        console.log('score:' +score)
        console.log('result1:' +result1)

(2)reduce 汇总

        //  求合
        let result2 = score.reduce( (tmp, item, index)=>tmp+item)

        console.log('result2:' +result2)

        // 求平均数
        let result3 = score.reduce( (tmp, item, index )=>{

            if( index === score.length-1 ){
                return (tmp+item)/score.length
            } else {
                return tmp+item
            }
        })

        console.log('result3:' +result3)

(3)filter 过滤器

        // 过滤
        let result4 = score.filter(item=>item%3===0)

        console.log('result4:' +result4)

        // json过滤
        let items = [
            {title: '男士衬衫', price: 75},
            {title: '女士包', price: 2000},
            {title: '男士包', price: 65},
            {title:'女士鞋', price: 3000}
        ]

        let result5 = items.filter( json=>json.price>=1000)

        console.log( result5 )

(4)forEach 迭代

        // 迭代
        let result6 = score.forEach( (item, index)=>{
            console.log('index:' +index +'item:' +item)
        })

累了,休息一下再写~