JS学习对象

创建 JavaScript 对象

对象和 arrays 类似,区别在于数组使用索引来访问和修改数据,而对象中的数据是通过 properties 访问的。
如:

const cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

通过点号表示法访问对象属性

访问对象属性有两种方式:点号表示法(.)和方括号表示法([ ])。
如:

const myObj = {
  prop1: "val1",
  prop2: "val2"
};

const prop1val = myObj.prop1;
const prop2val = myObj.prop2;
///
const myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock",
  "NoSpace": "USS Enterprise"
};

myObj["Space Name"];
myObj['More Space'];
myObj["NoSpace"];

通过变量访问对象属性

对对象上使用方括号表示法,还可以访问对象上作为变量值存储的属性。 当你需要遍历对象的所有属性,或者根据一个变量的值查找对应的属性值时,这种写法尤其适用。

const dogs = {
  Fido: "Mutt",
  Hunter: "Doberman",
  Snoopie: "Beagle"
};

const myDog = "Hunter";
const myBreed = dogs[myDog];
console.log(myBreed);//
console.log(someObj[someProp]);//

字符串 Doberman 将会出现在控制台中。

更新对象属性

可以使用点或中括号操作符来更新。

举个例子:

const ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"];
};

 ourDog.name = "Happy Camper";
 ourDog["name"] = "Happy Camper";

** JavaScript 对象添加新属性**

const ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};

ourDog.bark = "bow-wow";
ourDog["bark"] = "bow-wow";

删除对象的属性

const ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"],
  "bark": "bow-wow"
};

delete ourDog.bark;

使用对象进行查找

对象和字典一样,可以用来存储键/值对。 如果数据是扁平的,你可以用对象来查找你想要的值,而不是链式使用 switch 或 if/else 语句。 当你知道你的输入数据在某个范围时,这种查找方式极为有效。

const alpha = {
  1:"Z",
  2:"Y",
  3:"X",
  4:"W",
  ...
  24:"C",
  25:"B",
  26:"A"
};

alpha[2];
alpha[24];

const value = 2;
alpha[value];

测试对象的属性
有时检查一个对象属性是否存在是非常有用的。 我们可以用对象的 .hasOwnProperty(propname) 方法来检查对象是否有指定的属性。 .hasOwnProperty() 找到该属性时返回 true,找不到该属性时返回 false。
如:

const myObj = {
  top: "hat",
  bottom: "pants"
};

myObj.hasOwnProperty("top");
myObj.hasOwnProperty("middle");

操作复杂对象
有时你可能希望将数据存储在一个灵活的数据结构(Data Structure)中。 JavaScript 对象是一种灵活的数据结构。 它可以储存字符串(strings)、数字(numbers)、布尔值(booleans)、数组(arrays)、函数(functions)和对象(objects)以及这些值的任意组合。

const ourMusic = [
  {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [ 
      "CD", 
      "Cassette", 
      "LP"
    ],
    "gold": true
  }
];

访问嵌套对象
我们可以通过连续使用点号表示法和方括号表示法来访问对象的嵌套属性。

这是一个嵌套对象:

const ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};

ourStorage.cabinet["top drawer"].folder2;
ourStorage.desk.drawer;

访问嵌套数组
在对象中嵌套对象和数组。 与访问嵌套对象类似,数组的方括号可以用来对嵌套数组进行链式访问。

const ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];

ourPets[0].names[1];
ourPets[1].names[0];

ourPets[0].names[1] 应该是字符串 Fluffy, 并且 ourPets[1].names[0] 应该是字符串 Spot。

for循环

const ourArray = [];

for (let i = 0; i < 5; i++) {
  ourArray.push(i);
}

For 循环遍历数组的奇数

const ourArray = [];

for (let i = 0; i < 10; i += 2) {
  ourArray.push(i);
}

使用 For 循环反向遍历数组

const ourArray = [];

for (let i = 10; i > 0; i -= 2) {
  ourArray.push(i);
}

使用 For 循环遍历数组

const arr = [10, 9, 8, 7, 6];

for (let i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

循环嵌套

const arr = [
  [1, 2], [3, 4], [5, 6]
];

for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

使用 JavaScript 生成随机分数

在 JavaScript 中,可以用 Math.random() 生成一个在0(包括 0)到 1(不包括 1)之间的随机小数。 因此 Math.random() 可能返回 0,但绝不会返回 1。

使用 JavaScript 生成随机整数

Math.floor(Math.random() * 20);

Math.floor(Math.random() * (max - min + 1)) + min;

创建一个函数 randomRange,参数为 myMin 和 myMax,返回一个在 myMin(包括 myMin)和 myMax(包括 myMax)之间的随机整数。

使用 parseInt 函数
parseInt() 函数解析一个字符串返回一个整数。 下面是一个示例:

const a = parseInt("007");

上述函数将字符串 007 转换为整数 7。 如果字符串中的第一个字符不能转换为数字,则返回 NaN。

parseInt(string, radix);
const a = parseInt("11", 2);

变量 radix 表示 11 是在二进制系统中。 这个示例将字符串 11 转换为整数 3。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值