ES6中十六个特性的总结

一.变量的结构赋值

数组的解构

const NBA = ['james','kobe']
let [j,k] = NBA
console.log(j)
console.log(k);

对象的解构

const NBA = {
  name:'james',
  age:18,
  height:function(){
    console.log('我190')
  }
}

let {name,age,height} = NBA
console.log(name);
console.log(age);
height()

二.模版字符串

可以直接换行

let str = `

          

            你好
          
          `

变量拼接

const gogoing = '大哥'
const loving = `我是${gogoing}`
console.log(loving)

三.对象的简化写法

let name = 'james'
let change = function(){
  console.log('我们是总冠军')
}

const school = {
  name, //以前要这样写name:name
  change,// school:school
  kobe(){
    console.log('哈哈')
  }
}
console.log(school)

四.箭头函数

以前这样写

let fn = function(){}

现在这样写

let fn = (a,b) =>{
   return a + b
}

console.log(fn(1,2))

五.函数参数的默认值

function add(a,b,c=10){ //默认值一般位置靠后
  return a+b+c
}
let result = add(1,2)
console.log(result)

六.rest参数

ES6引入rest参数,用于获取函数的实参,用来代替arguments

// ES5获取实参的方法
function date(){
  console.log(arguments)
}
date('james','kobe')

// ES6的rest参数
function date(...args){
  console.log(args)
}
date('james','jobe')

如果这样写的话，rest参数必须放在最后

function date(a,b,...args){
}

七.扩展运算符

const NBA = ['james','kobe']
function chunwan(){
   console.log(arguments);
}
chunwan(...NBA)

八.Symbol

symbol数据类型最大的特点就是唯一性

const s1 = Symbol('lsh')
const s2 = Symbol('lsh')
console.log(s1===s2)
输出fasle

九.迭代器

//迭代器
const NBA = ['james','kobe','jorden','curry']

let iterator = NBA[Symbol.iterator]()

console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next()) //为underfined

十.生成器

生成器其实就是一个特殊的函数
异步编程 纯回调函数
yield，函数代码的分隔符

function * gen(){
  yield '一只没有耳朵';
  yield '一只没有尾巴';
  yield '真奇怪'
}

let iterator = gen()
console.log(iterator.next()); //一只没有耳朵
console.log(iterator.next()); //一只没有尾巴
console.log(iterator.next()); //真奇怪
console.log(iterator.next()); //underfined

十一.Promise

成功返回resolve,失败返回reject

const p  = new Promise(function(resolve,reject){
  setTimeout(()=>{
     let data = '数据库中的用户数据'
     resolve(data)
     
    let data = '数据读取失败'
    reject(data)
  },1000)
})
p.then((res)=>{
  console.log(res);
}).catch((err)=>{
  console.error(err)
})

十二.Set

可以去重

let s = new Set();
let s2 = new Set(['大','中','小','小'])
console.log(s2)

元素个数

console.log(s2.size);

添加新的元素

s2.add('gogoing')

删除元素

s2.delete('小')

是否存在元素

console.log(s2.has('中'))
console.log(s2)

循环元素

for(let v of s2){
  console.log(v)
}

清空元素

s2.clear()
console.log(s2)

十三.Map

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

let m  =new Map()

添加元素

m.set('name','詹姆斯')
m.set('change',function(){
  console.log('我们可以改变你')
})

let key = {
  school:'你好'
}

m.set(key,['james'])

删除

m.delete('name')

获取

console.log(m.get('change'))
console.log(m.get(key))

清空

m.clear()

遍历

for(let v of m){
  console.log(v)
}

十四.Class

定义类

class Person{
  //构造方法
constructor(boy,girl){
   this.boy = boy
   this.girl = girl
}
call(){
  console.log('我可以打电话')
}
}

调用类

var person = new Person('李雷','李红')
console.log(person)
person.call()

静态属性

class Person{
  //静态属性
  static name = '手机'
  static change(){
    console.log('我可以改变世界')
  }
}

var person = new Person()
console.log(person.name) //underfined
console.log(Person.name) //手机

类的继承

父类

class Person{
   constructor(boy,girl){
     this.boy = boy
     this.girl = girl
   }
   call(){
     console.log('我可以打电话')
   }
}

子类

class children extends Person{
  constructor(boy,girl,woman){
    super(boy,girl);
    this.woman = woman
  }
  change(){
    console.log('改变了什么')
  }
}

子类调用

const JAME = new children('李雷','李红','女人')
console.log(JAME)
JAME.call()

get和set

class Phone{
  get price(){
    console.log('价格属性被读取')
    return '你好'
  }
  set price(newVal){
    console.log('价格被修改')
  }
}

实例化

let s = new Phone()

//设置时候,set方法被触发
s.price = 'free'

console.log(s.price)

十五.对象方法扩展

Object.is

判断两个值是否完全相等
console.log(Object.is(NaN,NaN)) true
console.log(NaN ===NaN) false

Object.assign

对象的合并
const config1 = {
  host:'你好',
  name:'ss'
}

const config2 = {
  host:'不好'
}

//config2把config1覆盖
const config3 = Object.assign(config1,config2)
console.log(config3)

Object.setPrototypeOf

设置原型对象
const school = {
  name:'你好'
}
const city = {
  name:'北京'
}

Object.setPrototypeOf(school,city)
console.log(Object.getPrototypeOf(school))
console.log(school)

十六.模块化

模块化
将大的程序文件，拆分成许多小的文件，防止命名冲突
代码复用
高维护性

模块功能主要由两个命令

export 导出
import 导入

js文件

export function good(){
  console.log('你好')
}
export default good(){
}

引入html里面

import * js文件名 from ''
import {good} from js文件名

import good from 文件名