<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<!-- <li class=""></li> -->
</ul>
<script>
/*
JSON: JavaScript Object Notation , JavaScript对象表示法
// 先来看 对象, 对象的创建/定义 有三种方式:
1.使用字面量创建对象,为对象中的每项数据设置属性名称, 可以使访问数据更加语义化,数据结构更清晰
数组: var arr = [1, 2, 3];
对象Object:
var a = {};
var b = {
"name": "李明",
"age": 18
}
访问方式:
b.name \ b.age 对象.属性名, .可以理解为 的
b['name'] \ b['age'] 对象['属性名']
2.通过内置构造函数 Object 创建对象. new 是实例化
数组: var arr = new Array(); // 创建出来的是一个 空数组 []
对象: var obj = new Object(); //创建出来的是一个 空对象 {}
3.自定义构造函数
function 构造函数名(形参1, 形参2, 形参3....) {
this.属性名称1 = 形参1;
this.属性名称2 = 形参2;
this.属性名称3 = 形参3;
this.方法名 = 函数体;
...
}
注意: 1.构造函数约定首字母要大写
2.函数内部的属性和方法前面要添加 this, 表示当前对象的属性和方法
3.构造函数中不需要 return 返回值
4.创建对象的时候, 必须使用 new 来调用构造函数
*/
console.dir(window);
var obj = {};
console.log(typeof obj);
console.log(obj instanceof Object);
obj = {
"name": "李明",
'age': 18,
gender: '1',
func: function() {
console.log('爱办业务');
}
}
obj.like = '业务'; // 初始化对象的时候没有的属性,直接写的话,就相当于创建并赋值
console.log(obj);
console.log(obj.gender); // '1'
console.log(obj['age']); // 18
// console.dir(window);
// 2.内置构造函数方式创建对象
// 2.1 如果有new关键字, this指向 new 出来 的那个对象
// 2.2 Object.create(Object.prototype);
var obj2 = new Object(); // {}
var obj21 = Object.create(Object.prototype);
console.log('obj21----',obj2, obj21);
// 3.自定义构造函数方式创建对象
// 3.1 先定义构造函数
function Star(username, age, gender) {
this.username = username;
this.age = age;
this.gender = gender;
this.pop = function() {
// 2.1 如果有new关键字, this指向 new 出来 的那个对象
console.log('黑粉', this); // obj3
console.log('黑粉', this.username + '的年龄' + this.age + '了'); // obj3
return this.username + '的年龄' + this.age + '了';
}
// return this
}
var obj3 = new Star('刘德华', 55, 1); // '1' == 1
//console.log('obj----3', obj3.fans());
function func(a, b) {
// ... 业务处理程序
return a + b;
}
// JS当中有哪些内置对象??
// --数据封装类对象: Array Object Number String Boolean
// --其他类型对象: Function Arguments Math Date RegExp Error
// 栈 stack 基本数据类型的
// 堆 heap 引用数据类型 对象数组 函数
var boy = {
name: "张三",
age: 3,
gender: 1,
girlFriends: [{name: "李明", age: 18, money: 10}, {name: "王红", age: 28, money: 100}, {name: "赵刚", age: 8, money: 10000}],
wife: {name: "李明", age: 18, money: 10},
money: 1000000000,
eat: function() {
console.log('狗粮');
}
}
console.log('boy', boy);
console.log('boy', boy.name);
console.log('boy', boy['name']);
console.log('boy', boy.girlFriends[0]);
console.log('boy', boy.girlFriends[0]['money']);
console.log('boy', boy.girlFriends[0].money);
console.log('boy', boy.girlFriends[boy.girlFriends.length - 1]);
console.log('boy', boy.girlFriends[boy.girlFriends.length - 1].name);
var girlList = [{name: "李明", age: 18, money: 10}, {name: "王红", age: 28, money: 100}, {name: "赵刚", age: 8, money: 10000}];
// li
// newLi ---> ul
var ul = document.querySelector('ul');
for(var i = 0; i< girlList.length; i++) {
// girlList[i]
var newLi = document.createElement('li');
newLi.innerText = "姓名:" + girlList[i].name + " 年龄:" + girlList[i].age + " 值钱数:" + girlList[i].money;
ul.appendChild(newLi);
}
// null == undefined // true
// null === undefined // false
</script>
</body>
</html>
上述运行结果: