ES-笔记2

Bilibili 深入解读ES6系列视频学习记录2。

本文内容:数组、字符串、面向对象、JSON

Tutor: Blue石川。
URL: bilibili.com/video/av20327829

一、数组

新增了四个方法:

  1. map:映射。一对一
  2. reduce:减少。n对1
  3. filter:过滤器。
  4. forEach:循环迭代。

1、map方法。

// map

let score = [18, 86, 88]
let res = score.map(item => item >= 60 ? '及格' : '挂科')
console.log(result)  // [ '挂科', '及格', '及格']

2、reduce方法。

可用于:汇总 n对1。算总数,算平均

let arr = [1, 3, 5, 7]
let result = arr.reduce(function (tmp, item, index) {
  //tmp 上次结果,item当前数,index次数1开始
  console.log(tmp, item, index)
  // 1 3 1
  // 4 5 2
  // 9 7 3
  return tmp + item
})
console.log('总数:'+result)  // 总数:16

let arr2 = [1, 3, 5, 7]
let result2 = arr2.reduce(function (tmp, item, index) {
  if (index != arr2.length - 1) { // 不是最后一次
    return tmp + item
  } else {
    return (tmp + item)/arr2.length
  }
})
console.log('平均值:'+ result2)  // 平均值:4

3、filter 过滤器。

保留为true的语句。

let arr = [12, 4, 8, 9]
let result1 = arr.filter(item => item % 3 === 0)
console.log(result1)  // [ 12, 9 ]

let arr2 = [
  { title: '苹果', price: 10 },
  { title: '西瓜', price: 20 },
]
let result2 = arr2.filter(json => json.price >= 20)
console.log(result2)  // [ { title: '西瓜', price: 20 } ]

4、forEach。

循环迭代数组中的每一项。

let arr = [12, 4, 8, 9]
arr.forEach(item => console.log(item))
console.log('-----')
arr.forEach((item, index)=>console.log(item, index))

/*
12
4
8
9
-----
12 0
4 1
8 2
9 3
*/

二、字符串

  1. 新增两个方法:arr.startsWith()、arr.endsWith(),返回布尔值true或false。
  2. 字符串模版,用反引号“执行。

三、面向对象

1、新老版本区别

原先ES语法中,类和构造函数是一样的,没有进行区分。同时属性和方法是分开前后写的。

ES6中对面向对象:

  1. 有了class关键字,可以直接在class中书写方法。
  2. 有了构造器。
  3. 使用extends进行super超类(父类继承)。
// 老版本
function User(name, pass) {
    this.name = name
    this.pass = pass
}

User.prototype.showName = function () {
    console.log(this.name)
}
User.prototype.showPass = function () {
    console.log(this.pass)
}

var u1 = new User('able', '1233')
u1.showName()
u1.showPass()
// 老版本继承
function VipUser(name, pass, level) {
    User.call(this, name, pass)
    this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {
    console.log(this.level)
}

var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()
class User {
    constructor(name, pass) {
        this.name = name
        this.pass = pass
    }

    showName() {
        console.log(this.name)
    }
    showPass() {
        console.log(this.pass)
    }
}

var u1 = new User('able2', '111')
u1.showName()
u1.showPass()

// 新版本继承
class VipUser extends User {
    constructor(name, pass, level) {
        super(name, pass)
        this.level = level
    }
    showLevel(){
        console.log(this.level)
    }
}

v1 = new VipUser('blue', '123', 3)
v1.showLevel()

2、新版面向对象应用

使用React为例:

  • 用于构建用户界面的 JavaScript 库
  • 组件化,一个组件就是一个 class
  • JSX == bable == browser.js

四、JSON

1、JSON格式

  1. JavaScript Object Notation 的缩写,是一种用于数据交换的文本格式
  2. JSON 是 JS对象 的严格子集
  3. JSON 的标准写法
  4. 只能用双引号
  5. 所有的key都必须用双引号包起来

2、JSON对象

  1. JSON 对象是 JavaScript 的原生对象,用来处理 JSON 格式数据,有两个静态方法
  2. JSON.parse(string) :接受一个 JSON 字符串并将其转换成一个 JavaScript 对象
  3. JSON.stringify(obj) :接受一个 JavaScript 对象并将其转换为一个 JSON 字符串
var json = {a: 12, b: 5}
var str = 'hi,' + JSON.stringify(json)
var url = 'xx.com/' + encodeURIComponent(JSON.stringify(json))
console.log(str)  // hi,{"a":12,"b":5}
console.log(url)  // xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D

var str = '{"a": 12, "b": 4, "c": "abc"}'
var json = JSON.parse(str)
console.log(json)  // { a: 12, b: 4, c: 'abc' }

3、Object对象

  1. 是 JavaScript 语言的核心概念,也是最重要的数据类型
  2. 对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合
  3. 对象的所有键名都是字符串, 所以加不加引号都可以
  4. 如果键名是数值,会被自动转为字符串
  5. 对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型
  6. 如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用
  7. in 运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值
  8. for…in循环用来遍历一个对象的全部属性

⚠️注意:key-value 一样时可以简写,只写一个变量即可。

var a = 12, b = 5
console.log({a:a, b:b})  // { a: 12, b: 5 }
console.log({a, b})  // { a: 12, b: 5 }