ES6常用

一丶闭包,函数柯里化

1.1 闭包是为了延续局部变量的生命周期，在一个函数中再返回一个新的函数。

function show() {
  var a = 1
  return function () {
    return a++
  }
}

###1.2 函数柯里化

    //没有使用函数柯里化
function show(arg1, arg2) {
  console.log(arg1 + '-' + arg2)
}

show('qf', 'html5')
show('qf', 'java')
show('qf', '大数据')


  //使用函数柯里化
  function show(arg1) {
  return function (arg2) {
    console.log(arg1 + '-' + arg2)
  }
}

var fn = show('qf')
fn('html5')
fn('java')
fn('大数据')

二丶回调函数:在一个函数中把另一个函数当做参数使用，调用同时可以传递内部的数据 ,所谓的回调函数就是参数的传递

function getData(callback) {
  setTimeout(function () {
    var data = 1
    callback && callback(data)
  }, 2000)
}


getData(function (data) {
  console.log(data)
})

三丶es6 变化

3.1语法变化

3.1.1 let ,const 具有块状作用域,没有变量提升。区别如下:

在任意使用var 的地方都可以使用let和const。
let 可以定义变量先不赋值,后面再赋值。
const 在定义的时候必须赋值，而且不能重新赋值。
const 一般用于定义常量、对象、函数等。

3.1.2结构赋值

// 数组
//  var [] = []
var arr = [1, 2, 3, 4]
var [a, b, c, d] = arr

 var [a, , , d] = arr  //,占位符一个逗号一个数字,不能交换位置因为是数组,按照索引来的
console.log(a, d)


//扩展运算符
var arr = [1, 2, 3, 4]
var newArr = []
var [, ...newArr] = arr
console.log(newArr)//[ 2, 3, 4 ]
// 展开
console.log(...newArr)//2 3 4


// 结构解析对象
    // var {} = {}
var obj = {
  name: 'fly',
  age: 18
}
var { name, age } = obj
// 对象在解构的时候位置没有要求，但是key要一一对应,如果你想重新修改名称可以通过   key: newKey
var { age, name } = obj
var { age: age123, name } = obj//age改名用:
console.log(name, age123)//fly 18

// 结构解析小练习
 var body = {
  code: 0,
  data: {
    message: [1, 2, 3, 4]
  }
}
//拿到code  和message
var { code, data: { message } } = body//用冒号
console.log(code, message)// 0 [ 1, 2, 3, 4 ]

四丶es6 关于字符串,数组,对象,Set,Map ,箭头函数,继承的扩展

4.1 字符串扩展

// 字符串模板
// 用`${}`

4.2 数组扩展



var arr = [1, 2, 3, 4]

// forEach 没有返回值
var a = arr.forEach(function (item) {
  if (item > 1) {
    newArr.push(item)
  }
})

console.log(a)//undefined

// filter 有返回值，返回一个新的数组 

var newArr = arr.filter(function (item) {
  if (item > 1) {
    return item
  }
})

console.log(newArr)//[ 2, 3, 4 ]

// map 有返回值，而且可以修改item的值
var newArr = arr.map(function (item) {
  return item + 1
})

console.log(newArr)//[ 2, 3, 4, 5 ]


// 根据id 查找对象、索引  

// 模拟后台数据  

var data = [
  {
    id: 12222232323,
    name: 'fly'
  },
  {
    id: 2343434,
    name: 'keke'
  },
  {
    id: 3343434,
    name: 'ide'
  }
]

// findIndex 返回查找到的索引
// find 返回查找到的对象
var index = data.find(function (item) {
  if (item.id === 2343434) {
    return true
  }
})

console.log(index)//{ id: 2343434, name: 'keke' }

data.splice(index, 1)
console.log(data)//[ { id: 2343434, name: 'keke' }, { id: 3343434, name: 'ide' } ]

// some 有返回值，可以返回true、false
// some 可以终止循环
data.some(function (item, index) {
  if (item.id === 2343434) {
    data.splice(index, 1)
    return true
  }
})

console.log(data)//[ { id: 12222232323, name: 'fly' }, { id: 3343434, name: 'ide' } ]


// for of  

var data = [
  {
    id: 12222232323,
    name: 'fly'
  },
  {
    id: 2343434,
    name: 'keke'
  },
  {
    id: 3343434,
    name: 'ide'
  }
]

for (item of data.entries()) {//entires所有,values值,keys键
  console.log(item) //[ 0, { id: 12222232323, name: 'fly' } ]
                    //[ 1, { id: 2343434, name: 'keke' } ]
                    //[ 2, { id: 3343434, name: 'ide' } ]
}

4.3 对象扩展

// 简化写法

var obj = {
  name,
  age,
  success() {
    console.log(this.name, this.age)
  }
}
obj.success()
// 当对象中的函数名称是字符串的时候使用 [] 包裹 如['a' + 'b'](){}

// 3. 对象中使用 for of  
var obj = {
  id: 12222232323,
  name: 'fly'
}

for (var item of Object.values(obj)) {
  console.log(item)//12222232323
                    //fly
}

4.4 箭头函数

// 箭头函数
var show = (item) => {
  return item
}

// 简化写法
// 1. 只有一个参数的时候可以省略 ()
// 2. 当方法体只有一行的时候可以省略 return 和 {}
var show = item => item

// 多参数 
// 1. 多参数的时候不可以省略 ()
// 2. 当方法体只有一行的时候可以省略 return 和 {}
var show = (x, y) => x + y

// 箭头函数返回一个对象
// 1. 没有参数的时候不可以省略 ()
// 2. 当返回一个对象的时候需要 ()包裹变成一个整体
var show = () => ({
  data: 1
})

4.6 es6继承

// es6 继承 
class Person {//--------------------------!
  constructor(name, age) {//------------------!
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name, this.age)
  }
}

class ZS extends Person {//---------------------------!
  constructor(name, age, job) {//-------------------!
    super(name, age) //------------------------------!
    this.job = job
  }
  say() {
    console.log(this.name, this.age, this.job)
  }
}

const zs = new ZS('张三', 18, 'web前端')
zs.say()