C/C++指针笔记
Admin
BIN
POINTER/img/2darray.png
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
POINTER/img/array.png
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
POINTER/img/array2.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
POINTER/img/array_and_pointer.png
Normal file
|
After Width: | Height: | Size: 142 KiB |
BIN
POINTER/img/array_and_pointer_2.png
Normal file
|
After Width: | Height: | Size: 84 KiB |
BIN
POINTER/img/array_pointer_1.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
POINTER/img/array_pointer_2.png
Normal file
|
After Width: | Height: | Size: 129 KiB |
BIN
POINTER/img/byte_order.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
POINTER/img/byte_order_1.png
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
POINTER/img/function.png
Normal file
|
After Width: | Height: | Size: 9.7 KiB |
BIN
POINTER/img/malloc_1.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
POINTER/img/malloc_2.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
POINTER/img/malloc_array_1.png
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
POINTER/img/malloc_double.png
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
POINTER/img/malloc_int.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
POINTER/img/memory.png
Normal file
|
After Width: | Height: | Size: 298 KiB |
BIN
POINTER/img/pointer_parse.png
Normal file
|
After Width: | Height: | Size: 198 KiB |
BIN
POINTER/img/pointer_plus.png
Normal file
|
After Width: | Height: | Size: 89 KiB |
BIN
POINTER/img/pointer_to_function.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
POINTER/img/pointer_to_pointer.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
POINTER/img/pointer_to_struct_field.png
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
POINTER/img/stack_frame.png
Normal file
|
After Width: | Height: | Size: 166 KiB |
BIN
POINTER/img/stack_frame_1.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
POINTER/img/struct.png
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
POINTER/img/swap_1.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
POINTER/img/swap_2.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
POINTER/img/vl_array_2d.png
Normal file
|
After Width: | Height: | Size: 64 KiB |
6
POINTER/pointer/css/bootstrap.min.css
vendored
Normal file
36
POINTER/pointer/css/index.css
Normal file
@@ -0,0 +1,36 @@
|
||||
#app > .row > div:first-child {
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
.item {
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: auto 10px auto 10px;
|
||||
}
|
||||
|
||||
.card, .code-table {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.memory {
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.font-sm {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-struct:hover {
|
||||
background-color: beige;
|
||||
}
|
||||
BIN
POINTER/pointer/img/pointer.png
Normal file
|
After Width: | Height: | Size: 389 B |
148
POINTER/pointer/index.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
<script src="js/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/monokai.min.css">
|
||||
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
|
||||
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/cpp.min.js"></script>
|
||||
|
||||
<title>栈内存演示(MinGW)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
类型
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-check form-check-inline" v-for="(value, typeName) in typeSize" :key="typeName">
|
||||
<input class="form-check-input" type="radio" name="type" :id="typeName" :value="typeName" v-model="checkedType">
|
||||
<label class="form-check-label" :for="typeName">{{typeName}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
声明
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button class="btn-success btn btn-sm" @click="handleOpration('var')">变量</button>
|
||||
<button class="btn-success btn btn-sm" @click="handleOpration('pointer')">指针</button>
|
||||
<button class="btn-success btn btn-sm" @click="handleOpration('struct')">结构体</button>
|
||||
<button class="btn-success btn btn-sm" @click="handleOpration('arr')">数组</button>
|
||||
<div class="row mt-3">
|
||||
<div class="card col-6">
|
||||
<div class="card-header font-sm">
|
||||
结构体编辑
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<table class="table table-bordered font-sm text-center" >
|
||||
<tr>
|
||||
<th>类型</th>
|
||||
<th>名称</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
<tr v-for="(item, index) in struct.fields">
|
||||
<td>{{item.type}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>
|
||||
<button class="btn w-100 h-100 btn-struct m-0 p-0" @click="handleStructDel(index)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="btn w-100 btn-struct" @click="handleStructAdd">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card col-6">
|
||||
<div class="card-header" style="font-size: 18px;">
|
||||
数组
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<div class="form-check form-check-inline col-4">
|
||||
<input class="form-check-input" type="radio" name="dim" id="dim-1" value="1" v-model="arr.dim">
|
||||
<label class="form-check-label" for="dim-1">一维</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input type="number" class="form-control" min="1" v-model="arr.dim1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mt-2">
|
||||
<div class="form-check form-check-inline col-4">
|
||||
<input class="form-check-input" type="radio" name="dim" id="dim-2" value="2" v-model="arr.dim">
|
||||
<label class="form-check-label" for="dim-2">二维</label>
|
||||
</div>
|
||||
<div class="col-6 d-flex">
|
||||
<input type="number" class="form-control" min="1" max="9" v-model="arr.dim2.row" />
|
||||
<input type="number" class="form-control" min="1" max="9" v-model="arr.dim2.col"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
运算
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>指针当前位置：{{posHexStr}} 移动字节数：{{steps}}</div>
|
||||
<div class="input-group mt-3 row">
|
||||
<label for="step" class="form-label col-2">步长：</label>
|
||||
<div class="col-3">
|
||||
<input type="number" min="1" class="form-control" id="step" v-model="step">
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<button class="btn btn-info" @click="handleMove('add')">+</button>
|
||||
<button class="btn btn-info" @click="handleMove('minus')">-</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-center memory">
|
||||
<div class="row" v-for="pt in pointers.list" :key="pt.id">
|
||||
<div class="col item">{{pt.id}}</div>
|
||||
<div class="col item" :style="{backgroundColor: pt.color}" contenteditable="true"></div>
|
||||
<div class="col text-start p-0">
|
||||
<img src="img/pointer.png" v-show="pt.id == posHexStr" class="h-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 memory code-table">
|
||||
<pre>
|
||||
<code class="language-cpp" ref="code" contenteditable="true">
|
||||
{{code}}
|
||||
</code>
|
||||
</pre>
|
||||
<table class="table table-bordered text-center">
|
||||
<tr>
|
||||
<th>变量</th>
|
||||
<th>&返回地址</th>
|
||||
</tr>
|
||||
<tr v-for="item in vars.list" :key="item.addr">
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.addr}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
229
POINTER/pointer/js/index.js
Normal file
@@ -0,0 +1,229 @@
|
||||
window.onload = () => {
|
||||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
msg: "Hello",
|
||||
|
||||
|
||||
pointers: {
|
||||
cur: 0,
|
||||
list: []
|
||||
},
|
||||
pos: 1717565533,
|
||||
step: 1,
|
||||
steps: 0,
|
||||
|
||||
typeSize: {
|
||||
char: 1,
|
||||
short: 2,
|
||||
int: 4,
|
||||
double: 8,
|
||||
},
|
||||
checkedType: 'char',
|
||||
|
||||
vars: {
|
||||
list: [],
|
||||
char: {
|
||||
name: 'c',
|
||||
num: 0,
|
||||
},
|
||||
int: {
|
||||
name: 'n',
|
||||
num: 0
|
||||
},
|
||||
short: {
|
||||
name: 't',
|
||||
num: 0
|
||||
},
|
||||
double: {
|
||||
name: 'd',
|
||||
num: 0
|
||||
},
|
||||
arr: {
|
||||
name: 'ar',
|
||||
num: 0
|
||||
},
|
||||
struct: {
|
||||
name: 'st',
|
||||
num: 0
|
||||
},
|
||||
pointer: {
|
||||
name: 'p',
|
||||
num: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
index: 0,
|
||||
change: true,
|
||||
colors: [
|
||||
'antiquewhite',
|
||||
'aqua',
|
||||
'bisque',
|
||||
'burlywood',
|
||||
'cornflowerblue'
|
||||
]
|
||||
},
|
||||
|
||||
struct: {
|
||||
index: 0,
|
||||
fields: []
|
||||
},
|
||||
|
||||
arr: {
|
||||
dim: 1,
|
||||
dim1: 5,
|
||||
dim2: {
|
||||
row: 3,
|
||||
col: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
for (let i = 50; i >= 0; i--) {
|
||||
this.pointers.cur = 1717565532 - i
|
||||
this.pointers.list.push({
|
||||
id: '0X' + this.pointers.cur.toString(16).toUpperCase(),
|
||||
color: null,
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMove(dr) {
|
||||
this.color.change = false
|
||||
if(dr == 'add') {
|
||||
this.pos += this.typeSize[this.checkedType] * this.step
|
||||
} else if (dr == 'minus') {
|
||||
this.pos -= this.typeSize[this.checkedType] * this.step
|
||||
}
|
||||
},
|
||||
handleOpration(op) {
|
||||
switch (op){
|
||||
case 'var':
|
||||
this.pos -= this.typeSize[this.checkedType]
|
||||
this.vars.list.push({
|
||||
type: this.checkedType,
|
||||
name: this.vars[this.checkedType]['name'] + this.vars[this.checkedType]['num']++,
|
||||
addr: this.posHexStr
|
||||
})
|
||||
break;
|
||||
case 'pointer':
|
||||
this.pos -= this.typeSizeAll['pointer']
|
||||
this.vars.list.push({
|
||||
type: this.checkedType + '*',
|
||||
name: this.vars['pointer']['name'] + this.vars[this.checkedType]['num']++,
|
||||
addr: this.posHexStr
|
||||
})
|
||||
break
|
||||
case 'struct':
|
||||
this.pos -= this.structSize
|
||||
this.vars.list.push({
|
||||
type: 'struct S',
|
||||
name: this.vars['struct']['name'] + this.vars['struct']['num']++,
|
||||
addr: this.posHexStr
|
||||
})
|
||||
break
|
||||
case 'arr':
|
||||
this.pos -= this.arrSize
|
||||
const name = this.arr.dim == 1 ? `${this.vars['arr']['name']}${this.vars['arr']['num']++}[${this.arr.dim1}]`
|
||||
: `${this.vars['arr']['name']}${this.vars['arr']['num']++}[${this.arr.dim2.row}][${this.arr.dim2.col}]`
|
||||
this.vars.list.push({
|
||||
type: this.checkedType,
|
||||
name: name,
|
||||
addr: this.posHexStr
|
||||
})
|
||||
break
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.color.change = true
|
||||
this.$refs.code.removeAttribute('data-highlighted')
|
||||
this.$nextTick(hljs.highlightAll)
|
||||
},
|
||||
|
||||
handleStructAdd() {
|
||||
this.struct.fields.push({
|
||||
type: this.checkedType,
|
||||
name: 'f' + this.struct.index++
|
||||
})
|
||||
},
|
||||
|
||||
handleStructDel(idx) {
|
||||
this.struct.fields.splice(idx, 1)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
posHexStr() {
|
||||
return '0X' + this.pos.toString(16).toUpperCase()
|
||||
},
|
||||
code() {
|
||||
let structStr = this.struct.fields.reduce((acc, cur) => {
|
||||
return acc + ` ${cur.type} ${cur.name};
|
||||
`
|
||||
}, ``)
|
||||
let cstr = `
|
||||
struct S
|
||||
{
|
||||
${structStr}
|
||||
};
|
||||
`
|
||||
|
||||
this.vars.list.forEach(item => {
|
||||
cstr += `
|
||||
${item.type} ${item.name};`
|
||||
})
|
||||
return cstr
|
||||
},
|
||||
|
||||
typeSizeAll() {
|
||||
return {
|
||||
...this.typeSize,
|
||||
pointer: 8
|
||||
}
|
||||
},
|
||||
structSize() {
|
||||
return this.struct.fields.reduce((accumulator, currentValue) => {
|
||||
console.log(accumulator, currentValue)
|
||||
return accumulator + this.typeSizeAll[currentValue.type]
|
||||
}, 0);
|
||||
},
|
||||
arrSize() {
|
||||
if(this.arr.dim == 1) {
|
||||
return parseInt(this.arr.dim1) * this.typeSize[this.checkedType]
|
||||
} else {
|
||||
return parseInt(this.arr.dim2.col * this.arr.dim2.row) * this.typeSize[this.checkedType]
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
pos(val, oldVal) {
|
||||
if (this.color.change) {
|
||||
const coloraddrs = []
|
||||
for (let i = val; i < oldVal; i++) {
|
||||
coloraddrs.push('0X' + i.toString(16).toUpperCase())
|
||||
}
|
||||
const tocolor = this.pointers.list.filter((item) => coloraddrs.includes(item.id))
|
||||
tocolor.forEach((item) => {
|
||||
|
||||
item.color = this.color.colors[this.color.index]
|
||||
|
||||
})
|
||||
this.color.index = (this.color.index + 1) % this.color.colors.length
|
||||
}
|
||||
|
||||
this.steps = Math.abs(val - oldVal)
|
||||
|
||||
},
|
||||
code() {
|
||||
this.$refs.code.removeAttribute('data-highlighted')
|
||||
this.$nextTick(hljs.highlightAll)
|
||||
}
|
||||
}
|
||||
}).mount("#app")
|
||||
|
||||
hljs.highlightAll();
|
||||
}
|
||||