React-Native开发从入门到实战项目总结ES5与ES6常用语法总结

es5与es6常用语法教程(7)

2017-11-08  本文已影响165人  光强_上海

js常用语法系列教程如下

本节教程主要讲解以下几个常用语法

get \ set 函数

class Chef {

  constructor(food) {
    this.dish = []
  }

  // 定义一个get方法(拿取东西的方法)
  get menu() {
    return this.dish
  }
  
  // 定义一个set方法(存东西的方法)
  set menu(dish) {
    this.dish.push(dish)
  }
  
  // 添加一个自定义的方法
  cook() {
    console.log(this.food)
  }
}

let wanghao = new Chef('西红柿')

// wanghao.menu = '小炒肉'：调用set防范，往menu中存数据
console.log(wanghao.menu = '小炒肉') // 小炒肉
console.log(wanghao.menu = '番茄鸡蛋') // 番茄鸡蛋

// 调用menu的get方法取数据：wanghao.menu
console.log(wanghao.menu) // ["小炒肉", "番茄鸡蛋"]

Map对象

// 创建一个Map对象
let food = new Map()

// 把这几个变量表示的东西作为food这个map对象里面的key,也就是这个项目的名字
let fruit = {}, cook = function() {}, dessert = '甜点'
food.set(fruit, '🍐')
food.set(cook, '🍴');
food.set(dessert, '🍩')

console.log(food) // {{…} => "🍐", ƒ => "🍴", "甜点" => "🍩"}

// 知道这个map中有多少个项目(项目就是键值对)的话，可以使用size
console.log(food.size) // 3

// 知道map中项目的名字，我们可以得到对应的值, 使用get()函数
console.log(food.get(fruit)) // 🍐

// 删除项目
food.delete(dessert)

// 查看map中是否有某一个项目
console.log(food.has(dessert)) // false

// 循环处理map中的东西使用
food.forEach((value, key) => {
  console.log(`${key} = ${value}`) // [object Object] = 🍐 function cook() {} = 🍴甜点 = 🍩
})

// 清空map
food.clear()

Set 对象

// 创建一个Set
let desserts = new Set('1', '2', '1')

console.log(desserts)

// 我们可以使用add方法,往Set中添加内容
desserts.add('5')
console.log(desserts)

// 获取Set中内容的个数
console.log(desserts.size)

// 判断Set中是否包含某一个东西
console.log(desserts.has('2'))

// 删除
console.log(desserts.delete('1'))

// 循环处理Set中的数据
desserts.forEach(dessert => {
  console.log(dessert)
})

// 清空Set
desserts.clear()

super关键字

let breakfast = {
  getDrink() {
    return '🍵'
  }
}

// let dinner = {
//   getDrink() {
//     return '🍺'
//   }
// }

// 把sunday对象的prototype设置成了breakfast。这样他就拥有了breakfast这个对象中的getDrink()函数。现在想在sunday对象中重新定义getDrink这个方法，去覆盖掉breakfast中的getDrink方法，
// 并且在sunday对象的getDrink中得到breakfast中getDrink返回的值。这样就可以使用super+方法的名字
let sunday = {
  __proto__: breakfast,
  getDrink() {
    return super.getDrink() + '牛奶'
  }
}

console.log(sunday.getDrink())

福利时间

上一篇下一篇

猜你喜欢

热点阅读