ES5、ES6特性

ES5特性

01 JSON对象

1. JSON.stringify(obj / arr)
   - js对象（数组）转化为 json 对象（数组）
2. JSON.parse（json）
   - json 对象（数组）转化为 js 对象（数组）

  var obj = {username: 'kobe'}
  obj = JSON.stringify(obj)
  console.log(typeof obj) // string
  obj = JSON.parse(obj)
  console.log(typeof obj) // object

02 Object扩展

ES5 给 Object 扩展了一些静态方法， 常用的有两个：

1. Object.create(prototype, [descriptors])
   作用： 以指定对象为原型，创建新的对象
   用途： 可实现继承
   为新的对象指定新的属性， 并对属性进行描述
   - value： 指定值
- writable: 标识当前属性值是否可以修改， 默认为false
- configurable: 标识当前属性是否可以被删除， 默认值为false
- enumerable： 标识当前属性值是否能用for in 枚举， 默认值false

  var obj = {name: 'Tom', age: 17}
  var obj1 = Object.create(obj, {  // 此处实现继承
    sex: {
      value: '女',
      writable: true,
      configurable: true,
      enumerable: true
    }
  })

  obj1.sex = '男'
  delete obj1.sex // 删除对象属性
  console.log(obj1)
  for (var i in obj1) {
    console.log(i);
  }
  // console.log(obj1)

2. Object.defineProperties(object, descriptors)
   作用： 为指定对象定义扩展多个属性
   - get: 用来获取当前属性值的回调函数
- set: 修改当前属性值的触发的回调函数， 并且实参即为修改后的值
- 存储器属性： getter， setter一个用来取值， 一个用来存值

  var obj = {firstName: 'kobe', lastName: 'bryant'}
  Object.defineProperties(obj, {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName
      },
      set: function(value) { jianting![在这里插入图片描述](https://img-blog.csdnimg.cn/20200619191537989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTE5MzYz,size_16,color_FFFFFF,t_70)
        var arr = value.split(' ')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }
  })
  obj.fullName = 'peng shuai'
  console.log(obj);

3. 对象本身的两个方法
- get propertyName() {} 用来获取当前属性值的回调函数
- set propertyName() {] 用来监听当前属性值的变化的回调函数

  var obj = {
    name: 'songRuiXue',
    get getName() {
      return this.name
    },
    set setName(value) {
      this.name = value
    }
  }
  obj.setName = 'pengShuai'
  console.log(obj.getName) // 当属性来调用
  console.log(obj)

03 Array扩展（数组方法）

1. Array.prototype.indexOf(value) : 得到第一次在数组中出现value时的下标
2. Array.prototype.lastIndexOf(value) : 得到最后一次在数组中出现value时的下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组,返回一个加工之后的新数组
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的数组, 条件为true才返回item
新添加数组去重Set 用法: let s = new Set(arr) console.log(s) 将要去重的数组放入Set中

在构造函数 Array 或 Object 的原型对象上添加方法，他们的实例对象可以调用这些方法
var obj = {} 等价于 var obj = new Object()
var arr = [] 等价于 var arr = new Array()

  var arr = [1, 2, 3, 2, 1, 5, 6, 7, 9, 3]
  console.log(arr.indexOf(3)); // index: 2
  console.log(arr.lastIndexOf(3)); // index: 9
  arr.forEach(function(item, index) {
    console.log(item, index);
  })
  var arr1 = arr.map(function (item, index) {
    return item * 3
  })
  console.log(arr1);
  var arr2 = arr.filter(function (item, index) {
    return item > 3
  })
  console.log(arr2);

04 call, apply, bind用法详解

1. Function.prototype.bind(obj)
   - 作用将函数内部的this绑定为 obj ， 并将函数返回 （不是调用）
2. 面试题： 区别bind() 与call() 和apply()
   - 都能指定函数中的this
- call() / apply() 是立即调用函数
- bind() 是将函数返回

  var obj = {name: 'ps', age: 18}
  function foo(value) {
    console.log(this, value)
  }
  foo.call(obj, 23, 12, 1) // 直接从第二个参数开始, 依次传入 obj 23
  foo.apply(obj, [12, 21]) // 第二个参数必须是数组, 实参要放在数组中
  // bind() 绑定完this不会立即调用foo, 而是将函数返回
  // 可以接受多个参数,也可以接受数组, 传的是整个数组而不是数组第一个元素
  var f = foo.bind(obj, [12, 2]) // [12, 2]
  f()
  setTimeout(function (data) {
    console.log(this, data) // obj 12,3,3,2
  }.bind(obj, [12, 3, 3, 2]), 2000)

ES6特性

01 let const关键字

注意： 用let或const定义的变量或常量是不会绑定到window上的，只在块级作用域中有效

let a = 10
const b = 20

function foo () {
  console.log(this.a) // undefined
  console.log(this.b) // undefined
}
foo();
console.log(window.a) // undefined

01 let关键字

1. 作用：
   - 与 var 类似，用于声明一个变量
2. 特点：
   - 在块作用域内有效
- 不能重复声明
- 不会预处理， 不存在变量提升
3. 应用：
   - 循环遍历加监听
- 使用 let 取代 var 是趋势

  let btns = document.getElementsByClassName('btn')
  for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
      alert(i)
    }
  }

02 const关键字

定义常量
const KEY = 'kobe'

02 箭头函数中的this

箭头函数本身没有 this，在定义时，它绑定上一级作用域中的 this。 作用域只有全局作用域和函数作用域。 或者说在定义时所处的那个对象就是他的this值
注意： 定义不是执行，不是调用，箭头函数所处位置不变

  let obj = {
    name: '12121',
    get: function() {
      return () => {
        return () => {
          console.log(this) // obj对象
        }
      }
    }
  }
  obj.get()()()

  let obj2 = {
    get: function() {
      (() => {
        (() => {
          console.log(this) // obj2对象
        })()
      })()
    }
  }
  obj2.get()
  
  // 构造函数中的 this， 指向的是实例对象
  function Foo(name) {
    this.name = name
    this.age = 12
    this.getName = function () {
      console.log(this) // foo
      setTimeout(() => {
        console.log(this) // foo
      }, 2000)
    }
  }
  let foo = new Foo('pengshuai')
  foo.getName()

03 扩展运算符

1. 可变参数：

  function fun(...values) {
    console.log(values) // [1, 2, 3, 4]
    values.forEach(function(item, index) {
      console.log(item, index)
    })
  }
  fun(1, 2, 3, 4)

2. 扩展运算符：

  let arr1 = [1, 6]
  let arr2 = [2, 3, 4, 5]
  arr1 = [1, ...arr2, 6]
  console.log(arr1); // [1, 2, 3, 4, 5, 6]

可将两个数组合并为一个数组

  let arr1 = [1, 2, 3]
  let arr2 = [4, 5, 6]
  // 使用 ... 可将一个数组转化为一个序列
  console.log(...arr1) // 1 2 3
  let arr = [
    ...arr1,
    ...arr2
  ]
  console.log(arr); // [1, 2, 3, 4, 5, 6]

04 形参默认值

当不传入参数时默认使用形参中的默认值

funtion Point(x = 1, y = 2) {
	this.x = x,
	this.y = y
}
let point = new Point() // 不传值就用默认值， 传值就用实参

05 使用class实现继承

1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造函数
6. 重写从父类中继承的一般方法 

  // 定义一个父亲的类
  class Person {
    // 定义类的构造方法
    constructor(name, age) {
      this.name = name;
      this.age = age
    }
    // 定义一般方法
    showName() {
      console.log(this.name)
    }
  }
  // 通过new来创建实例对象
  let person = new Person('kobe', 12)
  person.showName() // 'kobe'
  console.log(person);
  // 定义一个子类继承父类
  class Son extends Person {
    // 定义类的构造方法
    constructor(name, age, sex) {
      super(name, age) // 调用父类的构造函数
      this.sex = '女'
    }
    showName() {
      console.log(this.name);
    }
  }
  let son = new Son('Tom', 14, '男')
  console.log(son);

06 字符串方法

includes(’ '):
返回值为boolean值, 取代indexOf()

// 是否包含某个字符
      console.log(this.name.includes('h'));