对象属性的遍历

 前言

9c1a79de56d5ca2592cd719041bca191.png

 我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是对象属性的讲解

 环境配置

e45519adca94a7e1696feacd927183dd.png

npm init -y
yarn add vite -D

修改page.json配置端口

d3a4621ba94708241f9a6f7b5d8889a7.png

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

案例1

a2ed525efb0285a4d710d4c74a9ee716.png

var arr=[1,2,3,4,5]
for(var i=0;i<arr.length;i++){
    console.log(arr[i])
}

 运行结果

402e263102ad78d68ba4f070740d5511.png

1177b9bf98029368e6e3fdecca4361d1.png

 案例2

a33ae8081448b2bac5f874d5be422b4a.png

var arr=[1,2,3,4,5]
// for(var i=0;i<arr.length;i++){
//     console.log(arr[i])
// }
var car={
    brand:'Benz',
    color:'red',
    displament:'3.0',
    name:'geyao'
}
for(var key in car){
    console.log(key+'+'+car[key])
}
for(var key in arr){
    console.log(arr[key])
}

 运行结果

d28c5b4b879b9569b4c8939a1575b9fd.png

83a75f8ce866d73f021a8c29ec9e54b6.png

 案例3

1db3e0cb17251f397b3ab53ac151921b.png

var obj={
    name:"geyao",
    age:22
}
function Car(){
    this.brand="Benz",
    this.color="red",
    this.size=18
}
Car.prototype={
    age:18,
    width:2.5
}
Object.prototype.sex="女"
var car=new Car()
for(var key in car){
    console.log(key+'+'+car[key])
}

 运行结果

13d0049a33e1929dfdbe50bdb552d6fb.png

81f8dbbc3e7c0e7d5bc5af9eaefbc701.png

 案例4

a852c88ceaf33f663b573fc9fc287bde.png

var geyao={
    name:"geyao",
    age:18
}
console.log('age' in geyao) //true




function Car(){
    this.brand='TAGE',
    this.color='red'
}
Car.prototype={
    displacement:'3.0'
}
var car=new Car();
console.log('displacement' in car)

 运行结果

0135deee7dc06d194457ea97916ccd85.png

1e0d62303274385923975dc59c630979.png

 案例5

39ab46f65f15e995f0e8cddf3143cdc4.png

function Car(){




}
var car=new Car()




function Person(){




}
console.log(car instanceof Car)
console.log(car instanceof Object)
console.log([] instanceof Array)
console.log([] instanceof Object)
console.log({} instanceof Object)

 运行结果

d6fdb24ad81dbf975bf7694ee9953c69.png

745772b52bb01b3a4224e9fffd2512ad.png

 案例6

f6302925816fde79c7649ab0567c9bab.png

const a=[]
console.log(a.constructor)
console.log( a instanceof Array)
var str=Object.prototype.toString.call(a)
console.log(str)
var arr=new Array(1,2,3)
console.log(arr)

 运行结果

1a617c46248dcecdf05e2ca6705a7fe5.png

4dc4f553d8593b8c608ff7c12fb24429.png

总结

ddd528bbb61a5556183946a561f7f4d3.png

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣一起学习前端知识

下方查看历史文章

47832b526bc0fdc8a636079142b41fad.png

链式调用

Pinia使用案例

Vuex讲解

DOM-Diff讲解

posted @ 2023-10-23 09:58  前端导师歌谣  阅读(19)  评论(0)    收藏  举报  来源