ES6(2015)
参数 parameter
默认参数 default parameter
// ES5 的写法
function f (x,y,z){
if(z === undefined){
z = 7
}
console.log(x)
}
// ES6 的写法
function f (x ,y = 4,z = 7){
console.log(z)
}
f(1,undefined,5)
function f(x,y = 3,z = x + y){
console.log(z)
}
- 可以在参数定义默认值
- 跳过一个有默认值的参数,可以传undefined
- 默认值 可以是 前面参数值的表达式
不定参数 rest parameter
// ES5的写法
function sum(){
let num = 0
Array.prototype.forEach.call(arguments,function (item){
num += item * 1
})
return num
}
// ES6的写法
function sum(base, ...nums){
let num = 0
nums.forEach((item)=>{
num += item * 1
})
return num + base*2
}
解构参数 spread operator
function sum (x = 1 ,y = 2,z = 2){
return x + y + z
}
let data = [4,5,6]
// ES5
sum(data[0], data[1],data[2])
// ES6
sum(...data)
箭头函数 arrow function
let hello = () => {
console.log('abc')
}
let hello = name =>{
console.log(name)
}
let hello = (x,y,z) => x + y + z
let hello = (x,y,z) => ({x,y,z})
let test = {
// 此时的this 是 window
name: 'test'
say: function(){
// 此时 this 谁调他就是谁
console.log(this.name)
}
haha: () =>{
// 此时 this 没改变 还是 window
console.log(this.name)
}
}
test.say() // test this指向 使用者 test
test.haha() // test this指向 创建者的this window
- 只有一个参数 可以省略参数的小括号
- 内容是表达式 可以省略方法大括号
- 内容是对象 需要套层小括号
- 主要作用就是 不改变this的指向
对象 Object
对象定义
let x = 1
let y = 2
let zn = 'z'
// ES5
let obj = {
x:x,
y:y ,
hello: function(){
console.log(123)
}
}
obj[zn] = 5
// ES6
let obj = {
x,
y,
[zn]:5,
hello(){
console.log(123)
}
* hello2(){ // 异步函数
console.log(321)
}
} // {x:1,y:2,z:5}
Set()
let s = new Set([1,2,3,4]) // 元素可以是方法 对象
s.add('1').add('3').add('5').add('1') // [1,2,3,4,5] 去重
s.delete('1') // 删除
s.clear() // 清空
s.has('1') // 查 true
s.size // 条数
s.keys() // 遍历器 key
s.values() // 遍历器 value
s.entries() // 遍历器 key=>value
s.forEach(item=>{ // 遍历 值
console.log(item)
})
for (let item of s){ // for of 遍历
console.log(item)
}
// 并没有改的 API
Map()
let m = new Map([[1,1],[2,2]]) // key 可以是方法 可以是对象 逆的object
m.set(3,3).set(1,4) // 改值 索引去重 排序
m.delete(1) // 删除 key
m.clear() // 清空
m.has(1) // 查 key
m.keys() // 遍历器 key
m.values() // 遍历器 value
m.entries() // 遍历器 key => value
m.forEach((value,key) => { // 遍历 值在前 key在后 因为forEach 语法 v,i
console.log(value,key)
})
for(let [key,value] of s){ // 遍历 key在前 值在后 结构赋值后 原值 是 i,v
console.log(key ,value)
}
对象数据拷贝 Object.assign()
const target = {}
const source = {b:4,c:5,a{b:{c:{d:1}}}
Object.assign(target,source)
字符串模板 template
const a = 20
const b = 10
const c = a + b
// ES5
const str = 'lalalal ' + (a + b + c) + ' 123123'
+ '1233333'
// ES6
const str = `lalalala ${a+b+c} 123123
123123123` // 拼接换行
const p = 20
const w = 16
const type = 'r'
let text = ''
// ES5
if(type === 'r'){
text = '我想看的值是p的值'+ p
}else {
text = '我想看的值是w的值' +w
}
// ES6
function fn(str,type){
let s = str[0]
const p = 20
const w = 16
let text
if(type = 'r'){
text = `p的值${p}`
}else {
text = `w的值${w}`
}
return `${s}${text}`
}
let text = fn`我想看的值是${'r'}`
解构赋值 Destructure
数组的解构赋值
将数组的值取出
let arr = [1,2,3,4,5,6,7,8,9,10]
let [a,b,c,,e,f,g] = arr // 对位的拆解 再 赋值
改变对象中的值
let user ={name : 's',id: '12123',key: 'ababab',baba: 'babababab'}
[user.name,user.id] = [1,2]
遍历对象
let user ={name : 's',id: '12123',key: 'ababab',baba: 'babababab'}
for (let [k,v] of Object.entries(user)){
console.log(k,v)
}
可变参数,接收数组剩余值
let arr = [1,2,3,4,5,6,7,8,9,10]
let [a,b,c,...last] = arr // last : [4,5,6,7,8,9,10]
无对应值的反应
let arr = []
let [a =1,b,...last] // a:1,b:undefined,last:[]
对象的解构赋值
将对象值取出
let opt = {
title: 'opt',
width: 100,
height: 200
}
let set = {
title: 'set'
}
let { title,width,height,now = 123,kaka } = opt // 'opt',100,200,123,undefined
console.log(title,width,height)
let { title:title2 } = set // 'set'
console.log(title2)
可变参数,接收数组剩余值
let opt = {
title: 'opt',
width: 100,
height: 200
}
let { title,...last } =opt // 'opt' {width: 100,height: 200}
嵌套数据的取出
let opt = {
title: 'opt',
size: {
width: 100,
height: 200
},
items: ['1','abab']
}
let { size:{ width },items:[ item1 ] } = opt // width: 100 ,item1: '1'