微信扫一扫打赏支持

javascript疑难问题---17、js中in关键字使用总结

javascript疑难问题---17、js中in关键字使用总结

一、总结

一句话总结：

1、判断索引或属性名是否在数组或对象中
2、做循环遍历（遍历数组或者对象）
3、in关键字在vue的v-for指令中做循环
1、判断索引或属性名是否在数组或对象中
//1、判断数组中是否有对应索引
let arr=['a','b',100,200,false];
console.log(arr);
console.log('a' in arr);//false
console.log(2 in arr);//true

//2、判断对象中是否有属性名
let obj={name:'孙尚香',age:20};
console.log(obj);
console.log('孙尚香' in obj);//false
console.log(name in obj);//false
console.log('name' in obj);//true

2、做循环遍历（遍历数组或者对象）
//遍历数组
let arr=['a','b',100,200,false];
for (let i in arr){
  console.log(i,arr[i]);
}

//遍历对象
let obj={name:'孙尚香',age:20};
for (let i in obj){
  console.log(i,obj[i]);
}

3、in关键字在vue的v-for指令中做循环
a、v-for循环数组：<p v-for="item in list">{{item}}</p>
b、v-for循环对象：<p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
c、v-for循环数字：<p v-for="count in 10">{{count}}</p>

 

 

 

二、js中in关键字使用总结

博客对应课程的视频位置：17、js中in关键字使用总结
https://www.fanrenyi.com/video/4/209

 

1、js中in关键字使用总结

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1、js中in关键字使用总结</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 1、判断索引或属性名是否在数组或对象中：注意在数组中是索引而不是元素，在对象中是属性名而不是属性值
11 2、做循环遍历（遍历数组或者对象）
12 3、in关键字在vue的v-for指令中做循环
13 
14 
15 -->
16 <script>
17     //一、判断属性名是否在对象中：判断索引或属性名是否在数组或对象中
18     //1、判断数组中是否有对应索引
19     // let arr=['a','b',100,200,false];
20     // console.log(arr);
21     // console.log('a' in arr);//false
22     // console.log(2 in arr);//true
23 
24     //2、判断对象中是否有属性名
25     // let obj={name:'孙尚香',age:20};
26     // console.log(obj);
27     // console.log('孙尚香' in obj);//false
28     // console.log(name in obj);//false
29     // console.log('name' in obj);//true
30 
31     //二、做循环遍历
32     //遍历数组
33     // let arr=['a','b',100,200,false];
34     // for (let i in arr){
35     //     console.log(i,arr[i]);
36     // }
37 
38     //遍历对象
39     let obj={name:'孙尚香',age:20};
40     for (let i in obj){
41         console.log(i,obj[i]);
42     }
43 </script>
44 
45 </body>
46 </html>

 

 

 

2、in关键字在vue中的使用

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>2、in关键字在vue中的使用</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 1、v-for循环数组：<p v-for="item in list">{{item}}</p>
11 2、v-for循环对象：<p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
12 3、v-for循环数字：<p v-for="count in 10">{{count}}</p>
13 
14 v-for循环数组的时候为什么item在index前面，例如v-for="(item,index) in list"
15 作者在写方法的时候，肯定是最重要的、最常用的参数在前面，就像forEach中的回调函数的参数（val、index、arr）
16 
17 v-for遍历对象的时候，比如v-for="(val,key) in obj"，为什么有val、key，并且val为什么在key前面
18 为什么有val、key：因为对象里面本身就是键值对，肯定是要有key和val
19 val在key前面：因为val比key更常用，作者在写方法的时候，肯定是最重要的、最常用的参数在前面
20 
21 
22 
23 -->
24 <div id="app">
25     <!--1、v-for循环数组-->
26 <!--    <p v-for="item in list">{{item}}</p>-->
27 <!--    <p v-for="(item,index) in list">{{item}}&#45;&#45;{{index}}</p>-->
28 
29     <!--2、v-for循环对象-->
30     <p v-for="val in obj">{{val}}</p>
31     <p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
32     <!--接第三个参数index-->
33     <p v-for="(val,key,index) in obj">val：{{val}}---key：{{key}}---index：{{index}}</p>
34 
35     <!--3、v-for遍历数字-->
36     <p v-for="count in 10">{{count}}</p>
37 
38 </div>
39 <script src="../js/vue.js"></script>
40 <script>
41     let vm = new Vue({
42         el: '#app',
43         data: {
44             list:[11,12,13,14,15,16],
45             obj:{name:'赵云',age:18}
46         }
47     });
48 </script>
49 </body>
50 </html>

 

 

 

 

 

 
posted @ 2020-05-01 17:27  范仁义  阅读(414)  评论(0)  编辑  收藏  举报