ES6 几个语法。
)])1.定义变量使用let 代替var
---作用域
{ let name = 'xiaoming' } console.log(name) // null
{ let name = 'xiaoming' console.log(name) } // xiaoming
{let name = 'xiaoming' name = 'xiaohong' console.log(name)} //xiaohong
const name = 'xiaoming' name = 'xiaohong' console.log(name)} //报错const 不可更改
---字符串
使用反引号直接写变量；可写多行字符串；告别+拼接字符串
let name = 'xiaoming'
console.log('hello '+name+' \n thank you') // hello xiaoming tank you .
console.log(`hello ${name}
thank you`) // hello xiaoming tank you .
---函数扩展
参数默认值；箭头函数；展开运算符。
const double = (num) => num*2
console.log(double(3)) // 6
const add = (num1, num2) => num1 + num2
console.log(add(2, 5)) // 7
复杂一点的箭头函数
const add = (num1, num2) => {
return num1 + num2
}
console.log(add(2, 5)) // 7
function (num1, num2) {
let num2 = num2 || 1
} //参数默认值，num2 没有参数就为1.
let arr = [5, 6]
console.log(add (...arr)) // 11 展开运算符
console.log([1, 2, 3, ...arr]) // 1, 2, 3, 5, 6 数组合并
---对象扩展
object.keys values entries ; 对象方法简写，计算属性；
const key = 'job'
const obj = {
num: 1,
str: 'xiaoming',
work: function(){
},
}
obj[key] = 'fe'
console.log(obj) // { num: 1 , str: 'xiaoming', work: f work() , job: 'fe'}
可以简写成：
const key = 'job'
const obj = {
key,
num: 1,
str: 'xiaoming',
work(){
},
[key] ： 'fe'，
[key + ‘world'] : 'fe'
}
console.log(obj) // { key: job, num: 1 , str: 'xiaoming', work: f work() , job: 'fe', jobwork: 'fe'}
---解构赋值
函数也可以多返回值；数组解构；对象解构。
let arr = [1, 2]
let [num1, num2] = arr
console.log(num1, num2) // 1, 2 .
const obj = {type: 'IT ', name: 'xiaoming'}
const {type, name} = obj
---模块化
es6 中自带了模块化机制，告别seajs和require.js
Import, import{ } ; Export, Export default;
示例1： 文件1 module1.js
export const name = 'xiaoming'
文件2 module2.js
import {name} from './module1'
console.log(name) // xiaoming
示例2: 文件1 module1,js
export default function() {
console.log('vue.js 不错')
}
文件2 module2.js
import sayHi from './module1' //文件1对外暴露的函数带defaulet 不需要 { }
sayHi() // vue.js 不错.
---es6 常用代码片段
let arr = [1, 2, 3, 4]
arr. forEach(v=>{
console.log(v)
}) // 1 \n 2 \n 3 \n 4
console.log(arr.map(v=>v*2)) // [2, 4, 6, 8]
console.log(arr.every(v=>v > 0)) // true 检验数组里面是否大于0
console.log(arr.every(v=>v > 2)) // false
console.log(arr.filter(v=>v <= 3)) // [1, 2, 3] 过滤大于3 的元素。
console.log(arr.filter(v=>v <= 3).map(v= v*3)) //[3, 6, 9] 可以链式调用。
---数组去重
let arr1 = [1, 2, 3, 4, 2, 3]
let arr2 = [4, 3, 6, 8]
console.lot(new Set(arr1)) // Set {1, 2, 3, 4}
console.lot([...new Set(arr1)]) // 加上[... xx] 符 变成数组 [1, 2, 3, 4]
// arr1.concat(arr2) 并集arr1和arr2.
console.lot([...new Set([...arr1, ...arr2])]) // [1,2,3,4,6,8] 合并并且去重。
// 示例：淘宝首页用了多少种标签。
new Set([...document.querySelectorAll('*')].map(v=>v.nodeName)).size
const obj1 = {
name: 'xiaoming',
age: '88'
}
const obj2 = {
fullName: 'hong',
sex: 'male'
}
Object.keys(obj1).forEach(v=>{ // v 为对象的key， 遍历对象。
console.log(v, obj1[v])
}) // name xiaoming age 88
console.log({...obj1, job:'fe' , age: 38}) // { name : 'xiaoming', age: 38, job: 'fe'}
console.log({...obj1, ...obj2, job:'fe' , age: 38}) // { name : 'xiaoming', age: 38, job: 'fe' , fullName: 'hong', sex: 'male'}
