为啥将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)
})
累了,休息一下再写~