• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

js对象动态设置属性名

Data: 2021-08-10 04:01:09Form: JournalClick: 1

在js中有两种方式访问一个对象的内容
1、通过点表示法

const student = {
	name: '张三',
	age:  18,
	action: function eat () {alert('我喜欢吃')}
}

// 点表示法
student[name];
student[age];
student.action();	// 注:这里加括号说明是要调用,如果不加括号会直接打印出eat方法

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2、括号表示法
这种方式类似于数组的写法

const student = {
	name: '张三',
	age:  18,
	action: function eat () {alert('我喜欢吃')}
}

// 括号表示法(属性值要加引号)
student['name'];
student['age'];
student['action']();	// 调用方法需要在外面加括号

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

另:这种方法个优点:
我们想把传递过来的数据当做对象字面量的属性名可以用括号表示法,所以括号表示发可以动态的添加属性名和内容。

<input type="text" value="address">
		
<script>
	const student ={};
	let ipt = document.querySelector('input');
	let a= ipt.value;
	
	// 用点表示法不能将输入框中的值当做属性名来设置
	student.a = '北京';	// 存入的是a: '北京'
	// 用括号表示法可以
	student[a] = '北京'; // 存入的是	address: '北京'
	// ↑动态的将输入框中的内容作为这个对象的值
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
Name:
<提交>