前端手记

2022/4/23 8:14:18

编程Tag： javascript HTML5

本文主要是介绍前端手记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<html>

<head>

<title>learn demo</title>

.father{

width:500px;

height:300px;

border:1px solid #0a3b98;

position: relative;

}

.son{

width:100px;

height:40px;

background: #f0a238;

position: absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

}

</style>

</head>

<body>

</div>

</body>

/**********************************************

* new 实现的原理

**/

function Otaku(name, age) {

this.name = name;

this.age = age;

this.habit = "games"

}

Otaku.prototype.strength = 60;

Otaku.prototype.sayYourName = function () {

console.log('I am' + this.name);

}

var person = new Otaku('Kevin', '18');

console.log(person.name) // Kevin

console.log(person.habit) // Games

console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

// 实例person可以：1.访问到 Otaku 构造函数里的属性 2.访问到 Otaku.prototype 中的属性

// 用new Object() 的方式新建了一个对象 obj

// 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数

// 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性

// 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性

// 如果构造函数返回的是一个对象则返回这个对象，否则返回创建的新对象

function objectFactory() {

var obj = new Object();

Constructor = [].shift.call(arguments);

obj.__proto__ = Constructor.prototype;

var result = Constructor.apply(obj, arguments);

if (result && (typeof (result) == "object" || typeof (result) == "function")) {

return result;

}

return obj;

}

var person_2 = objectFactory(Otaku, 'Ellen', '30')

console.log(person_2.name) // Ellen

console.log(person_2.habit) // Games

console.log(person_2.strength) // 60

person_2.sayYourName(); // I am Kevin

/********************************************************************

* ES6中Set和Map方法的使用

**/

// set数组去重

var arr = [1,2,4,1,2,3,5,7];

var set1 = new Set(arr);

// 通过...运算符将set变更为数组形式

var set2 = [...new Set(arr)];

console.log(set1)

console.log(set2)

// 添加元素

set1.add('66');

set2.push(66);

console.log('set1添加元素之后：', set1);

console.log('set2添加元素之后：', set2);

// 删除元素

set1.delete(1);

set2.shift();

console.log('set1删除元素之后：', set1);

console.log('set2删除元素之后：', set2);

// 查找元素存在true 否则false

console.log(set1.has('8888'));

// map的使用

// 添加元素

var map1 = new Map();

map1.set('name','chen');

map1.set('age',23).set('height',180);

console.log(map1);

// 遍历循环

for(let [key,value] of map1) {

console.log(key,value);

}

// 删除元素

map1.delete('name');

console.log(map1);

// 获取元素

console.log('获取的元素：',map1.get('age'));

</script>

</html>

这篇关于前端手记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

前端手记

相关编程文章