- Vue3中八个生命周期函数
- js动态添加对象属性
- js 遍历对象
- 第一种： for......in
- 第二种
- 第三种：使用Object.getOwnPropertyNames(obj)
- js 数组、对象转json 以及json转 数组、对象
- js创建对象的方式
- 一、通过”字面量“方式创建
- 二、使用工厂模式创建对象
- 三、通过”构造函数“方式创建
- 四、通过object方式创建
- 五、原型创建对象模式
- 六、组合使用构造函数模式和原型模式
- js:数组，对象的拼接方法
beforeCreate() ：在实例生成之前会自动执行的函数
created() : 在实例生成之后会自动执行的函数
beforeMount() ：在模板渲染完成之前执行的函数
mounted() ：在模板渲染完成之后执行的函数
beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数
updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
beforeUnmount()：当Vue应用失效时，会自动执行的函数
unmounted()：当Vue应用失效时，且DOM完全销毁之后，会自动执行
js动态添加对象属性// 第一种方法
var obj = { "name": "张三", "age": 18 }
var key = "height";
var value = 175;
obj[key] = value;
console.log(obj); // {name: "张三", age: 18, height: 175}
// 第二种方法
var obj1 = { "name": "张三", "age": 18 }
var value = 175;
obj1.height = value;
console.log(obj1); // {name: "张三", age: 18, height: 175}
// 第三种方法，扩展运算符
var obj1 = { "apple": 100, "pear": 200 };
var obj2 = { "cherry": 300 };
var obj3 = { ...obj1, ...obj2 };
console.log(obj3); // {apple: 100, pear: 200, cherry: 300}
// 第四种办法,合并多个对象 Object.assign
var obj1 = { a: "1" };
var obj2 = { b: "2" };
var obj3 = { c: "3" };
var obj = Object.assign(obj1, obj2, obj3);
console.log(obj); // {a: "1", b: "2", c: "3"}
console.log(obj1); // {a: "1", b: "2", c: "3"} //注意目标对象自身也会改变
console.log(obj2); //{b: "2"}
console.log(obj3); //{c: "3"}
const obj = {
id:1,
name:'zhangsan',
age:18}
for(let key in obj){
console.log(key + '---' + obj[key])
}
1）、Object.keys（obj）
2）、Object.values（obj）
参数： obj：要返回其枚举自身属性的对象
返回值： 一个表示给定对象的所有可枚举属性的字符串数组。
const obj = {
id:1,
name:'zhangsan',
age:18}
console.log(Object.keys(obj))
console.log(Object.values(obj))
输出结果： obj对象的key组成的数组 ['id','name','age']
输出结果：obj对象的value组成的数组 ['1','zhangsan','18']
返回一个数组，包含对象自身的所有属性（包含不可枚举属性） 遍历可以获取key和value
const obj = {
id:1,
name:'zhangsan',
age:18
}
Object.getOwnPropertyNames(obj).forEach(function(key){
console.log(key+ '---'+obj[key])
})
1、JS对象，转JSON
var json = {"name":"iphone","price":666}; //创建对象；
var jsonStr = JSON.stringify(json); //转为JSON字符串
console.log(jsonStr); // {"name":"iphone","price":666}
2、JS数组，转JSON
var arr = [1,2,3, { a : 1 } ];
console.log(JSON.stringify(arr)); // [1,2,3,{"a":1}]
3、JSON转，JS数组
var jsonStr = '[1,2,3,{"a":1}]';
var jsarr=JSON.parse( jsonStr );
console.log(jsarr);
4、JSON转JS对象
var jsonString = '{"bar":"property","baz":3}';
var jsObject = JSON.parse(jsonString); //转换为json对象
console.log(jsObject); // {bar: 'property', baz: 3}
javascript是一种“基于prototype的面向对象语言“，与java有非常大的区别，无法通过类来创建对象。
那么，既然是面象对象的，如何来创建对象呢？
一、通过”字面量“方式创建方法：将成员信息写到 {} 中，并赋值给一个变量，此时这个变量就是一个对象。
如果 {} 中为空，则将创建一个空对象：
var person = {} //创建空对象
演示代码：
var person = {
name: "dongjc",
age: 32,
Introduce: function () {
alert("My name is " + this.name + ".I'm " + this.age);
}
};
person.Introduce();
我们还可以给对象丰富成员信息。 对象.成员名称 = 值; 对象[成员名称] = 值;
也可以获取对象的成员信息。 对象.成员名称; 对象[成员名称];
var person = {
name: "dongjc",
age: 32,
Introduce: function () {
alert("My name is " + this.name + ".I'm " + this.age);
}
};
person.worker = 'coding'; //丰富成员信息
console.log(person); // {name: 'dongjc', age: 32, worker: 'coding', Introduce: ƒ}
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');
console.log(person2);
person2.sayName();
在使用工厂模式创建对象的时候，我们都可以注意到，在createPerson函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第三种创建对象的模式。
var obj = new 函数名();
这与通过类创建对象有本质的区别。
通过该方法创建对象时，会自动执行该函数。这点类似于php通过创建对像时，会自动调用构造函数，因此该方法称为通过"构造函数“方式创建对象。
function Person() {
this.name = "dongjc"; //通过this关键字设置默认成员
var worker = 'coding'; //没有this关键字，对象创建后，该变量为非成员
this.age = 32;
this.Introduce = function () {
alert("Introduce My name is " + this.name + ".I'm " + this.age);
};
alert("My name is " + this.name + ".I'm " + this.age);
};
var person = new Person();
person.Introduce();
此代码一共会两次跳出对话框，原因在于创建对象是自动执行了该函数。
注意： this关键字的使用。 这里的this与php中话法意思类似，指调用该函数的对象，这里指的是person。
对比工厂模式，我们可以发现以下区别：
1.没有显示地创建对象 2.直接将属性和方法赋给了this对象 3.没有return语句 4.终于可以识别的对象的类型。对于检测对象类型，我们应该使用instanceof操作符，我们来进行自主检测：
alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture
同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。
那么构造函数确实挺好用的，但是它也有它的缺点：
就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。
四、通过object方式创建方法：先通过object构造器new一个对象，再往里丰富成员信息。
var obj = new Object();
实例代码：
var person = new Object();
person.name = "dongjc";
person.age = 32;
person.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
person.Introduce();
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();
使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。
如果是使用原型创建对象模式，请看下面代码：
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型
当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。
这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。
六、组合使用构造函数模式和原型模式
function Person(name,age,job){
this.name =name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor:Person,
sayName: function(){
alert(this.name);
}
}
var person1 = new Person('Nike',20,'teacher');
console.log(person1);
说明：把两个对象的数据放在一个对象里面
方法1
var tmpa = {
q : 'qq',
w : 'ww'
}
var tmpb = {
e : 'ee',
r : 'rr'
}
var tmp = Object.assign(tmpa , tmpb)
console.log("tmp",tmp)
tmp {q: 'qq', w: 'ww', e: 'ee', r: 'rr'}
方法2
var tmpa = {
q : 'qq',
w : 'ww'
}
var tmpb = {
...tmpa,
e : 'ee',
r : 'rr'
}
console.log("tmp",tmpb) // tmp {q: 'qq', w: 'ww', e: 'ee', r: 'rr'}
