count>>和count<<
时间: 2024-05-27 08:06:45 浏览: 77
`count>>`和`count<<`是C++中的位运算符,它们分别表示右移和左移。它们的操作数是整数,包括有符号和无符号整数。
`count>>n`表示将`count`的二进制表示向右移动`n`位,相当于把`count`除以2的n次方。右移时,最高位用符号位填充,即如果原来最高位是1,则右移后最高位还是1,如果原来最高位是0,则右移后最高位仍为0。
`count<<n`表示将`count`的二进制表示向左移动`n`位,相当于把`count`乘以2的n次方。左移时,最低位补0。
举个例子,假设`count`为8,二进制表示为1000,则`count>>2`的结果为2,二进制表示为0010;而`count<<1`的结果为16,二进制表示为10000。
相关问题
优化这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书购物车</title> <style> </style> <script src="js/vue.js"></script> </head> <body> <div id="demo"> <table border="1"> <tr> <td></td> <td>书籍名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr> <td></td> <td>{{books1.name}}</td> <td>{{books1.date}}</td> <td>¥{{books1.price}}</td> <td><button @click="down(books1)">-</button>{{books4.count}}<button @click="up(books1)">+</button></td> <td><button @click="del">移除</button></td> </tr> <tr> <td></td> <td>{{books2.name}}</td> <td>{{books2.date}}</td> <td>¥{{books2.price}}</td> <td> <button @click="down(books2)">-</button>{{books4.count}}<button @click="up(books2)">+</button> </td> <td><button @click="del">移除</button></td> </tr> <tr> <td></td> <td>{{books3.name}}</td> <td>{{books3.date}}</td> <td>¥{{books3.price}}</td> <td> <button @click="down(books3)">-</button>{{books4.count}}<button @click="up(books3)">+</button> </td> <td><button @click="del">移除</button></td> </tr> <tr> <td></td> <td>{{books4.name}}</td> <td>{{books4.date}}</td> <td>¥{{books4.price}}</td> <td> <button @click="down(books4)">-</button>{{books4.count}}<button @click="up(books4)">+</button> </td> <td><button @click="del">移除</button></td> </tr> </table> <div>总价: ¥{{sum}}</div> </div> <!-- js部分 --> <script> const vm = new Vue({ el: "#demo", data: { books1: { name: '《算法导论》', date: '2006-9', price: 85.00, count: 1 }, books2: { name: '《UNIX编程艺术》', date: '2006-2', price: 59.00, count: 1 }, books3: { name: '《编程珠玑》', date: '2008-10', price: 39.00, count: 1 }, books4: { name: '《代码大全》', date: '2006-3', price: 128.00, count: 1 } }, computed: { sum () { return this.books1.price * this.books1.count + this.books2.price * this.books2.count + this.books3.price * this.books3.count + this.books4.price * this.books4.count } }, methods: { down (books1) { this.books1.count = books1.count - 1; } } }) </script> </body> </html>
优化建议:
1. 使用数组来存储书籍信息,可以避免重复的代码和变量
2. 使用计算属性来计算总价,避免重复计算
3. 将操作封装成方法,并使用可复用的组件来渲染每一行
优化后的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书购物车</title>
<style>
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="demo">
<table border="1">
<tr>
<td></td>
<<td>书籍名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<book-row v-for="(book, index) in books"
:book="book"
:index="index"
:key="index"
@change-count="changeCount"
@remove-book="removeBook" />
</table>
<div>总价: ¥{{totalPrice}}</div>
</div>
<!-- js部分 -->
<script>
Vue.component('book-row', {
props: ['book', 'index'],
methods: {
down() {
if (this.book.count > 1) {
this.book.count--;
this.$emit('change-count');
}
},
up() {
this.book.count++;
this.$emit('change-count');
},
remove() {
this.$emit('remove-book', this.index);
}
},
template: `
<tr>
<td></td>
<td>{{book.name}}</td>
<td>{{book.date}}</td>
<td>¥{{book.price}}</td>
<td>
<button @click="down">-</button>
{{book.count}}
<button @click="up">+</button>
</td>
<td>
<button @click="remove">移除</button>
</td>
</tr>
`
});
const vm = new Vue({
el: "#demo",
data() {
return {
books: [
{ name: '书籍1', date: '2022-01-01', price: 30, count: 1 },
{ name: '书籍2', date: '2022-01-01', price: 40, count: 1 },
{ name: '书籍3', date: '2022-01-01', price: 50, count: 1 },
{ name: '书籍4', date: '2022-01-01', price: 60, count: 1 }
]
};
},
methods: {
changeCount() {
// 重新计算总价
},
removeBook(index) {
this.books.splice(index, 1);
// 重新计算总价
},
},
computed: {
totalPrice() {
return this.books.reduce((acc, cur) => acc + cur.price * cur.count, 0);
}
}
});
</script>
</body>
</html>
<table style="display: grid; place-items: center;"> <thead> <tr> <th>学历</th> <th>职位数量</th> <th>平均薪资(K)</th> </tr> </thead> <tbody> {% for education, count in education_count.items() %} <tr> <td>{{ education }}</td> <td>{{ count }}</td> <td>{{ education_salary_mean[education] }}</td> </tr> {% endfor %} </tbody> </table>美化页面
可以通过添加 CSS 样式来美化页面。以下是一个简单的示例:
```html
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 20px auto;
font-size: 16px;
color: #333;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
th {
background-color: #f5f5f5;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f2f2f2;
}
</style>
<table>
<thead>
<tr>
<th>学历</th>
<th>职位数量</th>
<th>平均薪资(K)</th>
</tr>
</thead>
<tbody>
{% for education, count in education_count.items() %}
<tr>
<td>{{ education }}</td>
<td>{{ count }}</td>
<td>{{ education_salary_mean[education] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
```
在上面的代码中,我们使用了 CSS 的 `border-collapse` 属性将表格边框合并,使表格看起来更整洁。通过 `width` 和 `max-width` 属性,我们可以限制表格的宽度,并在页面中居中显示。`font-size` 和 `color` 属性可以调整表格文字的大小和颜色。`background-color` 属性可以设置表头和交替行的背景颜色,使表格更易于阅读。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)