JS对象相关 && 添加、获取键值对的两种方法(括号表示法[]、点表示法.)

对象只是键值对的集合。换句话说,它们是映射到称为属性(键)的唯一标识符的数据(值)。如下面这个对象:
const tekkenCharacter = {
  player: 'Hwoarang',
  fightingStyle: 'Tae Kwon Doe',
  human: true
};
它有三个属性,每个属性映射到一个特定的值。如果要添加其他特性,例如“origin”,可以通过将origin指定给对象来完成:
tekkenCharacter.origin = 'South Korea';
如果属性中有空格,或使用变量命名属性,则需要用中括号表示法来添加。
属性用引号括起来表示为字符串,将按所示完全添加。
tekkenCharacter['hair color'] = 'dyed orange';//没有空格时也要用引号括起来,否则会识别为变量,找不到此变量就会报错。
如果没有引号,它将作为变量进行计算,变量的值即为属性的名称。
const eyes = 'eye color';
tekkenCharacter[eyes] = 'brown';
以上添加的操作完成后,对象变成下面这样了:
{
  player: 'Hwoarang',
  fightingStyle: 'Tae Kwon Doe',
  human: true,
  origin: 'South Korea',
  'hair color': 'dyed orange',
  'eye color': 'brown'
};

另外,对于函数里用到的参数(这里假设形参为prop),若实参代入的是对象属性名,
则一定要使用[prop]来取对象属性,用.会报错!
因为目标对象没有prop属性!prop只是一个
变量名,只是当前函数的一个形参而已!!
括号表示法非常有用,因为有时对象属性在运行之前是未知的,有时我们需要以动态的方式访问它们:
let foods = {
  apples: 25,
  oranges: 32,
  plums: 28,
  bananas: 13,
  grapes: 35,
  strawberries: 27
};

function checkInventory(scannedItem) {
 return foods[scannedItem]; //scannedItem是变量,在这里动态地指代对象属性名
}

console.log(checkInventory("apples")); //25
删除键值对的方式:
let foods = {
  apples: 25,
  oranges: 32,
  plums: 28,
  bananas: 13,
  grapes: 35,
  strawberries: 27
};

delete foods.oranges;//删除只能一个个写,不能写在一行上。
delete foods.plums;
delete foods.strawberries;
console.log(foods); //{ apples: 25, bananas: 13, grapes: 35 }
检查对象是否存在某属性有两种方法,一种是使用hasOwnProperty()方法,另一种是使用in关键字。
看例子:编写函数,在传递给它的对象包含所有四个名称(Alan、Jeff、Sarah和Ryan)时返回true,否则返回false。
let users = {
  Alan: {
    age: 27,
    online: true
  },
  Jeff: {
    age: 32,
    online: true
  },
  Sarah: {
    age: 48,
    online: true
  },
  Ryan: {
    age: 19,
    online: true
  }
};

function isEveryoneHere(userObj) {
  //方法一:
  /*/
  if(userObj.hasOwnProperty('Alan')&&
  userObj.hasOwnProperty('Jeff')&&
  'Ryan'in userObj&&
  'Sarah'in userObj
  ){
    return true;
  }
  return false;
  */
  //方法二:
  //every方法用于验证与hasOwnProperty方法一起使用的所有名称,从而在每次迭代期间返回值true。如果使用hasOwnProperty方法未找到至少一个名称,则every方法返回false。
  return ["Alan", "Jeff", "Sarah", "Ryan"].every(name =>
    userObj.hasOwnProperty(name)
  );

}
console.log(isEveryoneHere(users)); //true
View Code
使用for…in语句可以遍历对象中的所有键(属性)。对象不像数组那样维护存储键的顺序,因此,在引用或访问某个键时,
键在对象上的位置或它出现的相对顺序是不相关的。
看例子:编写函数,对传进去的参数(对象)遍历全部键,然后统计各个键里的online键值为true的个数。
const users = {
  Alan: {
    online: false
  },
  Jeff: {
    online: true
  },
  Sarah: {
    online: false
  }
}

function countOnline(usersObj) {
  let count=0;
  for(let prop in usersObj) {
    if(usersObj[prop]['online']==true) {
      count += 1;
    }   
  }
  return count;//注意这句要放在for循环外面,循环结束才返回总的结果。
}

console.log(countOnline(users)); //1
使用Object.keys()方法可以生成(返回)一个数组,其中包含其参数对象中存储的所有键。此方法将对象作为参数,并返回表示对象中每个
属性的字符串数组。同样,数组中的条目没有特定的顺序。
let users = {
  Alan: {
    age: 27,
    online: false
  },
  Jeff: {
    age: 32,
    online: true
  },
  Sarah: {
    age: 48,
    online: false
  },
  Ryan: {
    age: 19,
    online: true
  }
};

function getArrayOfUsers(obj) {
  return Object.keys(obj);
}
console.log(getArrayOfUsers(users)); //[ 'Alan', 'Jeff', 'Sarah', 'Ryan' ]

function getArrayOfUsersSub(obj) {
  return Object.keys(obj['Alan']);
}
console.log(getArrayOfUsersSub(users)); //[ 'age', 'online' ]
看一个小小的综合例子:创建含有2个参数(1个为对象1个为字符串)的函数,实现传入对象时,把字符串添加到对应的键值里,返回
添加后的对应键值。
let user = {
  name: 'Kenneth',
  age: 28,
  data: {
    username: 'kennethCodesAllDay',
    joinDate: 'March 26, 2016',
    organization: 'freeCodeCamp',
    friends: [
      'Sam',
      'Kira',
      'Tomo'
    ],
    location: {
      city: 'San Francisco',
      state: 'CA',
      country: 'USA'
    }
  }
};
//创建函数如下:
function addFriend(userObj, friend) {
  let key1=Object.keys(userObj);
  for(let i=0;i<key1.length;i++){
    if(userObj[key1[i]].hasOwnProperty('friends')){
      userObj[key1[i]]['friends'].push(friend);
      return userObj[key1[i]]['friends'];
    }
  }
}

console.log(addFriend(user, 'Pete')); //[ 'Sam', 'Kira', 'Tomo', 'Pete' ]

。。。





posted @ 2022-09-26 21:45  枭二熊  阅读(3868)  评论(0编辑  收藏  举报