一.proxy代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
name: "xiaohao",
age: 18
}
let handler = {
get: function (target, key) {
console.log(key);
// console.log("无权访问" + key);
return target[key];
},
set: function (target, key, value) {
console.log("设置" + key + "成功");
target[key] = value;
}
}
// 实例化代理
var proxy = new Proxy(obj, handler);
console.log(obj);
console.log(proxy);
console.log(proxy.name); // proxy.get
proxy.gender = "男"; // proxy.set
console.log(proxy);
</script>
</body>
</html>
二.reflect反射
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
name: "xiaohao",
age: 18,
get fun() {
return this.name;
}
}
// Reflect 反射
// get
console.log(Reflect.get(obj, "name"));
var newObj = {
name: "xiaogu",
age: 20
}
console.log(Reflect.get(obj, "fun", newObj));
Reflect.set(obj, "gender", "男");
console.log(obj);
</script>
</body>
</html>
三.组合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
name: "xiaohao",
age: 18
}
let handler = {
get: function (target, key) {
// ...操作
return Reflect.get(target, key);
},
set: function (target, key, value) {
return Reflect.set(target, key, value);
}
}
// 实例化代理对象
let proxy = new Proxy(obj, handler);
console.log(proxy.name);
proxy.gender = "男";
console.log(proxy);
</script>
</body>
</html>
四.ES6字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
let str = "hello";
// 重复
console.log(str.repeat(3));
// 补全
console.log(str.padStart(10, "o"));
// 模板字符串
document.querySelector("div").innerHTML = `<h1>hello</h1>`;
</script>
</body>
</html>
五.ES6数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 十进制
let num = 10;
// 二进制
let num1 = 0b1001;
console.log(num1);
// 八进制
let num2 = 0o1001;
console.log(num2);
// 十六进制
let num3 = 0x1001;
console.log(num3);
// 幂运算
console.log(num ** 3);
// parseInt()方法补充
console.log(parseInt("10"));
console.log(parseInt("10", 8));
let arr = ["1", "2", "3"];
console.log(arr.map(parseInt));
parseInt("1", 0); // 1
parseInt("2", 1); // NaN
parseInt("3", 2); // NaN
</script>
</body>
</html>
六.ES6对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let name = "zhangsan";
let age = 18;
function sayHi() {
console.log("hello");
}
// 对象的简写形式
var obj = {
name,
age,
sayHi
}
let obj2 = {
gender: "男"
}
console.log(obj);
obj.sayHi();
// 扩展运算符
// 扩展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
let newObj = { ...obj, ...obj2 }; // 浅拷贝
console.log(newObj);
</script>
</body>
</html>
七.ES6数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Array.of() 创建数组
console.log(Array.of(1, 2, 3, 4, 5, 6, 7));
var map = new Map();
map.set("name", "xiaohao");
map.set("age", "18");
console.log(Array.from(map));
// arr.flat() 抚平数组
let arr = [1, 2, 3, [4, [5, 6, [7, 8, 9]]]];
console.log(arr);
console.log(arr.flat(1));
console.log(arr.flat(2));
console.log(arr.flat(3));
// 扩展运算符
let arr2 = [1, 2, 3, 4, 5];
let arr3 = [...arr2];
console.log(arr3);
</script>
</body>
</html>