Skip to content

Commit 23820d8

Browse files
ygs-codeygs-code
authored
Add files via upload
1 parent e0bae9e commit 23820d8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+18463
-0
lines changed

‎Proxy_1.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//Proxy 有两个参数，第一个是目标对象，第二个参数是设置Proxy的代理拦截方法
10+
var obj = new Proxy({}, {
11+
get: function (target, key, receiver) {
12+
console.log(`getting ${key}!`);
13+
return Reflect.get(target, key, receiver);
14+
},
15+
set: function (target, key, value, receiver) {
16+
console.log(`setting ${key}!`);
17+
return Reflect.set(target, key, value, receiver);
18+
}
19+
});
20+
obj.count = 1;
21+
obj.count
22+
// setting count!
23+
// ++obj.count
24+
</script>
25+
</body>
26+
</html>

‎Proxy_2.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//下面是另一个拦截读取属性行为的例子。
10+
var proxy = new Proxy({}, {
11+
get: function(target, property) {
12+
return 35;
13+
}
14+
});
15+
16+
console.log(proxy.time) // 35
17+
console.log(proxy.name) // 35
18+
console.log(proxy.title) // 35
19+
</script>
20+
</body>
21+
</html>

‎Proxy_3.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//如果handler没有设置任何拦截，那就等同于直接通向原对象。
10+
var target = {};
11+
var handler = {};
12+
var proxy = new Proxy(target, handler);
13+
proxy.a = 'b';
14+
console.log(target.a)
15+
// "b"
16+
</script>
17+
</body>
18+
</html>

‎Proxy_4.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//get方法的用法，上文已经有一个例子，下面是另一个拦截读取操作的例子。
10+
var person = {
11+
name: "张三"
12+
};
13+
14+
var proxy = new Proxy(person, {
15+
get: function(target, property) {
16+
if (property in target) {
17+
return target[property];
18+
} else {
19+
throw new ReferenceError("Property \"" + property + "\" does not exist.");
20+
}
21+
}
22+
});
23+
24+
proxy.name // "张三"
25+
proxy.age // 抛出一个错误
26+
</script>
27+
</body>
28+
</html>

‎Proxy_5.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//下面的例子使用get拦截，实现数组读取负数的索引。
10+
function createArray(...elements) {
11+
let handler = {
12+
get(target, propKey, receiver) {
13+
let index = Number(propKey);
14+
if (index < 0) {
15+
propKey = String(target.length + index);
16+
}
17+
return Reflect.get(target, propKey, receiver);
18+
}
19+
};
20+
21+
let target = [];
22+
target.push(...elements);
23+
return new Proxy(target, handler);
24+
}
25+
26+
let arr = createArray('a', 'b', 'c');
27+
arr[-1] // c
28+
</script>
29+
</body>
30+
</html>

‎Proxy_6.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
var doc = new Proxy({}, {
10+
"get": function (oTarget, sKey) {
11+
12+
console.log('get')
13+
return oTarget[sKey]
14+
return Reflect.get(oTarget, sKey);
15+
},
16+
"set": function (oTarget, sKey, vValue) {
17+
console.log('set')
18+
return Reflect.set(oTarget, sKey, vValue);
19+
},
20+
"deleteProperty": function (oTarget, sKey) {
21+
22+
console.log('deleteProperty')
23+
24+
},
25+
"enumerate": function (oTarget, sKey) {
26+
console.log('enumerate')
27+
28+
},
29+
"ownKeys": function (oTarget, sKey) {
30+
console.log('ownKeys')
31+
32+
},
33+
"has": function (oTarget, sKey) {
34+
console.log('has')
35+
console.log(oTarget)
36+
console.log(sKey)
37+
return oTarget[sKey]
38+
},
39+
"defineProperty": function (oTarget, sKey, oDesc) {
40+
console.log('defineProperty')
41+
},
42+
"getOwnPropertyDescriptor": function (oTarget, sKey) {
43+
console.log('getOwnPropertyDescriptor')
44+
},
45+
});
46+
doc.a=10;
47+
console.log(doc.a)
48+
console.log('a' in doc)
49+
50+
</script>
51+
</body>
52+
</html>

‎Reflect.ownKeys.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//Reflect.ownKeys 可以读取到Object.defineProperty 定义的key， 而Object.keys 只能定义到对象的key
10+
var obj = {}
11+
Object.defineProperty(obj, 'method1', {
12+
value: function () {
13+
alert("Non enumerable property");
14+
},
15+
enumerable: false
16+
})
17+
18+
console.log(Object.keys(obj))
19+
// []
20+
console.log(Reflect.ownKeys(obj))
21+
// ["method1"]
22+
23+
const obj1 = {
24+
id1: 42,
25+
id2: 13
26+
};
27+
console.log(Object.keys(obj1))
28+
// ['id1', 'id2']
29+
console.log(Reflect.ownKeys(obj1))
30+
// ['id1', 'id2']
31+
32+
33+
</script>
34+
</body>
35+
</html>

‎Set.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
let set6 = new Set([1, 2, 2, 3, 4, 3, 5])
10+
console.log('distinct 1:', set6)
11+
12+
//数组去重
13+
let arr1 = [1, 2, 3, 4]
14+
let arr2 = [2, 3, 4, 5, 6]
15+
let set7 = new Set([...arr1, ...arr2])
16+
console.log('distinct 2:', set7)
17+
18+
//1.向Set中添加元素。
19+
let set1 = new Set()
20+
set1.add(1)
21+
set1.add(2)
22+
set1.add(3)
23+
console.log('added:', set1)
24+
25+
26+
//3.判断某元素是否存在。
27+
28+
let set2 = new Set()
29+
set2.add(1)
30+
set2.add(2)
31+
set2.add(3)
32+
set2.delete(1)
33+
console.log('has(1):', set2.has(1))
34+
console.log('has(2):', set2.has(2))
35+
36+
//4.清除所有元素。
37+
let set3 = new Set()
38+
set3.add(1)
39+
set3.add(2)
40+
set3.add(3)
41+
set3.clear()
42+
console.log('cleared:', set3)
43+
44+
//数组去重
45+
let arr=[1,111,33,11,11,11,34,5,6,7,4];
46+
console.log( new Set([...arr]))
47+
console.log([...arr])
48+
</script>
49+
</body>
50+
</html>

‎StrictChecking.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
const num1 = parseInt("10", 2)
10+
const num2 = parseFloat("10", 2);
11+
const total = num1+ num2
12+
console.log(num1)
13+
console.log(num2)
14+
console.log(total)
15+
16+
</script>
17+
</body>
18+
</html>

‎String方法之fromCharCode()和charCodeAt().html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html class="ui-page-login">
3+
4+
<head>
5+
6+
7+
</head>
8+
9+
10+
<body>
11+
<script type="text/javascript">
12+
function toUnicodeFun(data){
13+
if(data == '' || typeof data == 'undefined') return '请输入汉字';
14+
var str ='';
15+
for(var i=0;i<data.length;i++){
16+
str+="\\u"+data.charCodeAt(i).toString(16);
17+
}
18+
return str;
19+
}
20+
21+
var resultUnicode = toUnicodeFun('中国'); // \u4e2d\u56fd
22+
console.log(resultUnicode);
23+
24+
25+
function toChineseWords(data){
26+
if(data == '' || typeof data == 'undefined') return '请输入十六进制unicode';
27+
data = data.split("\\u");
28+
var str ='';
29+
for(var i=0;i<data.length;i++){
30+
str+=String.fromCharCode(parseInt(data[i],16).toString(10));
31+
}
32+
return str;
33+
}
34+
35+
var resultChineseWords = toChineseWords("\u4e2d\u56fd");
36+
console.log(resultChineseWords);//中国
37+
document.write(String.fromCharCode(0x7C))
38+
39+
</script>
40+
41+
</body>
42+
43+
</html>

‎Symbol.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html class="ui-page-login">
3+
4+
<head>
5+
6+
7+
</head>
8+
9+
10+
<body>
11+
<script type="text/javascript">
12+
//声明是唯一的数据，类型和string字符串一样，不能添加属性
13+
let s = Symbol();
14+
15+
console.log(typeof s)
16+
</script>
17+
18+
</body>
19+
20+
</html>

‎Symbol1.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html class="ui-page-login">
3+
4+
<head>
5+
6+
7+
</head>
8+
9+
10+
<body>
11+
<script type="text/javascript">
12+
let s1 = Symbol('foo');
13+
let s2 =Symbol('bar');
14+
console.log(s1.toString());
15+
console.log(s2.toString());
16+
console.log(Symbol);
17+
18+
19+
</script>
20+
21+
</body>
22+
23+
</html>

0 commit comments

Comments
 (0)