JavaScript 小集合

Code 中，

MVC 的思想可以经常体现，视图层、控制层、数据层，如果感觉代码层次差点意思，可以往这上面想想。

JavaScript 中，

一些 API

• map()
• forEach()
• filter()
• slice()
• splice()
• indexOf()
• substring()

看一篇文章使用 map 和 filter 方法：→ 点击这里
看一篇文章 map 和 forEach 的区别：→ 点击这里
_
简单说一说 map，forEach 和 filter 它们的用途

首先，它们三个方法都是遍历数组的每一项

• forEach 拿到数组中的每一项，对拿到每一项做其他事情，不返回数组
• map 拿到数组中的每一项，对拿到的每一项做些处理，返回一个新数组
• filter 拿到数组中的每一项，对拿到的每一项做筛选和处理，返回一个新数组

const array = [1,2,3,4,5]
const array2 = array.map((item)=>item*item)
const array3 = array.filter((item)=>{if(item%2 ===0)return item})
array.forEach((item)=>{console.log(item)})
//1 2 3 4 5
array2.forEach((item)=>{console.log(item)})
//1 4 9 16 25
array3.forEach((item)=>{console.log(item)})
//2 4

简单说一说 splice 和 slice 的用途

首先，它们都是访问一个数组

• splice 对原数组做修改，不返回数组
• slice 用于截取原数组的片段，返回新数组

const array = [0,1,2,3,4,5,6,7,8,9]
const array2 = array.slice(5,-1)
console.log(array2)
// [5, 6, 7, 8]
array.splice(5,1)
console.log(array)
// [0, 1, 2, 3, 4, 6, 7, 8, 9]

简单说一说 indexOf 和 substring

• indexOf 能够查询一个 item 在序列中的第几项，若不存在返回 -1
• substring 用于截取字符串片段，返回新字符串

const string = 'Hello'
console.log(string.indexOf('e'))
// 2
console.log(string.substring(1,4))
// 'ell'

input 标签的 change 事件和 input 事件

• change 事件： 当用户提交对元素值的更改时触发，得到 event.target.value
• input 事件：元素的 value 被修改时触发，得到event.target.value

window 的 prompt 和 alert

alert 只是展示，prompt 可以展示 + 输入

$emit 和监听事件
**
「$emit + 传参数」触发事件，监听这个事件，写表达式时可以通过 $event 得到这个参数，写函数时会把这个参数交到这个函数上。

深拷贝和浅拷贝

当复制对象时，其实拷贝的是地址

let object = {number:1}
let array = []
array.push(object)
object.number = 2
array.push(object)
console.log(array)
// [{number:2},{number:2}]

想要完整拷贝，有个技巧

let object = {number:1}
let array = []
array.push(JSON.parse(JSON.stringify(object)))
object.number = 2
array.push(JSON.parse(JSON.stringify(object)))
console.log(array)
// [{number:2},{number:2}]

TypeScript 中，

需要对变量说明它的类型，

声明字符串数组：tags: string[] = []，这样声明了一个空的字符串数组

type 声明一个类型

type Record {
    tags: string[];
  notes: string;
  type: string;
  ammount: number;
}

添加一个类型

interface Window{
    data: string;
}

如果是外部数据，这样写类型，意思是不用检查了，我肯定给你一个 string

@Props() value!: string // 告诉 TypeScript 初始值就是 string

TS 文件引入 JS，使用 require

const model = require('<路径>').default

Vue 中，

class 的添加和删除有这样的语法

// 在冒号后面写表达式
:class={selected: true} // 有 selected 属性
:class={selected: false}  // 去除 selected 属性

Vue + TypeScript，

Vue 中使用 TypeScript 语法，需要这样做

库的文档：→ https://github.com/kaorun343/vue-property-decorator

• 使用 @component 装饰器
• 使用 class

<script lang="ts">
import Vue from 'vue'
import {Component} from 'vue-property-decorator'
@Component{
    ...
}
export default class Account extends Vue{
    ...
}
</script>

「@浪里淘沙的小法师」