一.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.getproxy.gender = "男"; // proxy.setconsole.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); // 1parseInt("2", 1); // NaNparseInt("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>
