JS完美收官 localstorage 中遇到的知识点

1、运算符 && 的优先级比 = 等号高

这是什么错误？

Uncaught SyntaxError: Invalid left-hand side in assignment

01<div></div> 
02 
03<script>
04 
05var last = document.getElementsByTagName('div')[0];
06 
07last && last.className = 'active'; // Uncaught SyntaxError: Invalid left-hand side in assignment
08 
09console.dir(last.className);
10 
11</script>

这是一个语法的错误

1. last && last.className 运算符 && 的优先级，比 = 等号要高 = 'active'

2. 所以先这样运算 last && last.className

再赋值运算 = 'active'

3. last && last.className 运算完是空字符串，空字符串再赋值 className 当然会报错

last && ( last.className = 'active' ) 所以要加一个括号，提升优先级

01<div></div> 
02 
03<script>
04 
05var last = document.getElementsByTagName('div')[0];
06 
07last && (last.className = 'active');
08 
09console.dir(last.className); // active
10 
11</script>

2、选项卡

逻辑

1. 先让 last.className 设置为空，

所以如果 last 是 true 把 last.className 设置为空，如果 last.className 是 false 还设置为空

2. 再让 last.className 等于active

3. 最后把当前点击的 span 对象赋值给 last，下一次点击的时候是上一个对象

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="utf-8">
05<title>选项卡</title>
06<style>
07.color{
08  width:300px;height:26px;color:#333;font-weight:bold;
09  position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;
10}
11.color span{
12  display:inline-block;
13  width:54px;height:26px;line-height:26px;text-align:center;
14  color:#666;font-size:12px;
15  border:1px solid #ddd;margin-right:10px;cursor:pointer;box-sizing:border-box;
16}
17.color span.active{
18  border:2px solid #b4a078;line-height:24px;
19}
20</style>
21</head>
22<body>
23 
24<div class="color">
25  <span>粉色</span>
26  <span>蓝色</span>
27  <span>黄色</span>
28  <span>绿色</span>
29</div>
30 
31<script>
32 
33  var product = document.getElementsByTagName('div')[0];
34  var spans = product.getElementsByTagName('span');
35 
36  var last = null;
37 
38  for(var i = 0; i < spans.length; i++){
39    spans[i].onclick = function(){
40      last && (last.className = '');
41      this.className = 'active';
42      last = this; // 把当前点击的span对象赋值给last，下一次点击的时候是上一个对象
43    }
44  }
45 
46</script>
47</body>
48</html>

注意一下：

last && ( last.className = '' ) 不加括号点击会会报错

Uncaught TypeError: Cannot set properties of null (setting 'className')

意思是 last 元素是 null 不能设置这个元素，因为上面声明的时候就是 null

点击选中的颜色后，再点击一次取消选中，下面是我自己写的代码

01var product = document.getElementsByTagName('div')[0];
02var spans = product.getElementsByTagName('span');
03 
04var last = null;
05 
06for(var i = 0; i < spans.length; i++){
07  spans[i].onclick = function(){
08    if(this != last){
09      last && (last.className = '');
10      this.className = 'active';
11      last = this;
12    }else{
13      this.className = '';
14      last = null;
15    }
16  }
17}

陈老师讲的简洁高效

01var product = document.getElementsByTagName('div')[0];
02var spans = product.getElementsByTagName('span');
03 
04var last = null;
05 
06for(var i = 0; i < spans.length; i++){
07 
08  spans[i].onclick = function(){
09 
10    last && last!=this && (last.className = '');
11    // 这句的意思主要是把last.className设置为空，就是取消掉className
12    // 什么时候取消呢？
13    // 1.last 这个不说了
14    // 2.last!=this 意思是当前的last不等于，当前的点击的this，
15    //   就是说上一个和当前的不一样，我们才会清掉className(ast.className = '')
16     
17    // 判断this.className有值给一个空，否则赋值active，就是第一次点击的时候
18    this.className = this.className ? '' : 'active';
19 
20    last = this;
21  }
22}

3、dataset 属性

获取属性

01<div 
02  id="expense" 
03  data-drink="coffee" 
04  data-food="sushi" 
05  data-meal="lunch"
06>¥20.12</div>
07 
08<script>
09 
10var obox = document.getElementById('expense');
11 
12console.log(obox.dataset); // DOMStringMap {drink: 'coffee', food: 'sushi', meal: 'lunch'}
13console.log(obox.dataset.drink); // coffee
14console.log(obox.dataset.food); // sushi
15console.log(obox.dataset.meal); // lunch
16 
17</script>

添加属性

01<div id="expense" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
02 
03<script>
04 
05var obox = document.getElementById('expense');
06 
07obox.dataset.name = '南极';
08 
09console.log( obox.dataset ); // DOMStringMap {drink: 'coffee', food: 'sushi', meal: 'lunch', name: '南极人'}
10 
11</script>

页面元素也添加了属性 <div id="expense" data-drink="coffee" data-food="sushi" data-meal="lunch" data-name="南极人">¥20.12</div>

项目中的用法

01<span data-id="10001">粉色</span>
02 
03<script>
04 
05  var oSpan = document.getElementsByTagName('span')[0];
06 
07  console.log(oSpan.dataset.id); // 10001
08 
09  oSpan.dataset.name = '南极人'; // <span data-id="10001" data-name="南极人">粉色</span>
10 
11</script>

4、拼接图片名

图片命名 img_01-1.png ，

01 代表第一行的商品，后面的 -1 代表第一行第一张图片，一定要加括号，不加括号变成字符串了

1var n = 0,
2    index = 0;
3 
4console.log('images/img_0' +(n+1)+ '-' +(index+1)+ '.png'); // images/img_01-1.png
5 
6console.log('images/img_0' + n+1 + '-' + index+1 + '.png'); // images/img_001-01.png

5、反向思维

正向思维

01<button style="height:50px;padding:0 20px;background:#cb4a61;color:#fff;cursor:pointer;border:none;outline:none;">加入购物车</button>
02 
03<script>
04 
05var btn = document.getElementsByTagName('button')[0];
06 
07var colorValue = '';
08 
09btn.onclick = function(){
10  if(colorValue){
11    // 加入购物车代码...
12  }else{
13    alert('请选择商品颜色')
14  }
15}
16 
17</script>

正向的思维的伪代码

1if(有颜色 && 有数量){
2  // 加入购物车...
3}else{
4  alert()
5}

反向思维的写发

01<button style="height:50px;padding:0 20px;background:#cb4a61;color:#fff;cursor:pointer;border:none;outline:none;">加入购物车</button>
02 
03<script>
04 
05var btn = document.getElementsByTagName('button')[0];
06 
07var colorValue = '';
08 
09btn.onclick = function(){
10  // 反向思维
11  if(!colorValue){
12    alert('请选择商品颜色');
13    return; // 这里必须有 return 不然接着往下执行了
14  }
15  document.write('执行购物车代码~~~~'); // 这行不会被执行
16}
17 
18</script>

6、selectDate 对象赋值后本地存储

<span data-id="10001">粉色</span> 每一个商品的 data-id 就对应一个商品，这个 id 号就像身份证一样是唯一的不会重复

01<span data-id="10001">粉色</span>
02 
03<script>
04 
05var selectData = {};
06 
07var oSpan = document.getElementsByTagName('span')[0],
08    colorId = oSpan.dataset.id;
09 
10var id = 10001,
11    name = '打不翻的吸盘碗',
12    colorValue = '粉色',
13    price = '21.00',
14    selectNum = '商品选的件数',
15    imgSrc = 'images/img_01-1.png',
16    time = new Date().getTime();
17 
18selectData[colorId] = {
19  "id": colorId,
20  "name": name,
21  "color": colorValue,
22  "price": price,
23  "num": selectNum,
24  "img": imgSrc,
25  "time": new Date().getTime()
26}
27 
28console.log(JSON.stringify(selectData)); // 储存的selectData对象，要转为字符串格式
29 
30localStorage.setItem('shoppingCart', JSON.stringify(selectData));
31 
32</script>

把id 10001当做key，这就是一条数据，

"10001":{

"id":"10001",

"name","打不翻的吸盘碗",

...

"10002":{

"id":"10002",

"name","打不翻的吸盘碗",

...

}

selectData[colorId] = {

"id":"10001",

"name":"打不翻的吸盘碗",

"color":"粉色",

"price":"21.00",

"num":6 商品选的件数,

"img":"images/img_01-1.png",

"time":时间戳，为了排序

}