您当前的位置: 首页 > 

知其黑、受其白

暂无认证

  • 0浏览

    0关注

    1250博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

Vue 常用

知其黑、受其白 发布时间:2021-11-25 15:54:45 ,浏览量:0

阅读目录
  • Vue3中八个生命周期函数
  • js动态添加对象属性
  • js 遍历对象
    • 第一种: for......in
    • 第二种
    • 第三种:使用Object.getOwnPropertyNames(obj)
  • js 数组、对象转json 以及json转 数组、对象
  • js创建对象的方式
    • 一、通过”字面量“方式创建
    • 二、使用工厂模式创建对象
    • 三、通过”构造函数“方式创建
    • 四、通过object方式创建
    • 五、原型创建对象模式
    • 六、组合使用构造函数模式和原型模式
  • js:数组,对象的拼接方法

Vue3中八个生命周期函数

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"}
js 遍历对象 第一种: for…in
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']

第三种:使用Object.getOwnPropertyNames(obj)

返回一个数组,包含对象自身的所有属性(包含不可枚举属性) 遍历可以获取keyvalue

const obj = {
         id:1,
         name:'zhangsan',
         age:18
      }
    
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key+ '---'+obj[key])
})

在这里插入图片描述

js 数组、对象转json 以及json转 数组、对象

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}
js创建对象的方式

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);


在这里插入图片描述

js:数组,对象的拼接方法

说明:把两个对象的数据放在一个对象里面

方法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'}

关注
打赏
1665558895
查看更多评论
立即登录/注册

微信扫码登录

0.0767s