var daObj = { get val() { return ; }, set val(value) { }}
get:
var da = { a: 1, get val(){ return this.a + 1; }} console.log(da.val);//2da.val = 100;console.log(da.val);//2 class Da { constructor(type) { this.type = type } get age() { return 1 } set age(val) { this.realAge = val } eat() { console.log('i am eat') }}let da1 = new Da('da1')console.log(da1.age)da1.age = 1console.log(da1.realAge)
class Da { constructor(type, age) { this.type = type this.age1 = age } get age() { return this._age } set age(val) { this._age = val }}
利用set/get实现对element.innerHTML封装
class myHTMLElement { constructor(element) { this.element = element } get html() { return this.element.innerHTML } set html(value) { this.element.innerHTML = value }}
设置一个闭包，通过一定的规则来限制对它的修改：
let myName = 'dada'class Da { constructor(type) { this.type = type } get name() { return myName } set name(val) { myName = val }}
4.静态方法
在es5中实现的静态方法：
let Da = function (type) { this.type = type this.eat = function() { console.log('i eat') }}Da.study = function(book) { console.log('i book');}
let Da = function(type) { this.type = type}Da.prototype.eat = function() { Da.walk() console.log('i am')}Da.walk = function(){ console.log('walk')}let da1 = new Da('da1')da1.eat() // walk// i am
静态方法在你的实例化对象是找不到的
在es6中的静态方法，标记static
class Da { constructor(type) { this.type = type } eat() { console.log('i eat') } static study() { console.log('i study') }}
class Da { constructor(type) { this.type = type } eat() { // Da.walk(); console.log('i eat') } static walk(){ console.log('i walk') }} class da extends Da { // 构造函数 //constructor (type) { //super(type) //} run() { console.log('i run') }}let da1 = new da('da1')
6.面向对象编程Class
类的声明，属性，方法，静态方法，继承，多态，私有属性
// 类的声明let Da = function(type) { this.type = type this.eat = function() { console.log('i eat'); }} let da = new Da('da');
// prototypelet Da = function(type) { this.type = type}Da.prototype.eat = function() { console.log('i eat')}let da1 = new Da('da1')
es6中的Class
class Da { // 构造函数 constructor(type) { this.type = type } // 方法 walk() { console.log('i walk') }}let da = new Da('da');// console.log(typeof Da); function
7.函数参数的默认值
函数参数是从左到右解析，如果没有默认值会被解析成 undefined
// 参数默认值function da (x,y,z) {}function sum() { let num = 0 Array.prototype.forEach.call(arguments, function(item){ num += item * 1 }) Array.from(arguments).forEach(function(item){ num += item * 1 }) return num}
// 不确定function sum(...nums) { let num = 0 nums.forEach(function(item){ num += item * 1 }) return num}console.log(sum(1,2,3,4,5))
function sum () { let num = 0 Array.prototype.forEach.call(arguments, function (item) { num += item * 1 }) return num} function sum (...nums) { let num = 0 nums.forEach(function (item) { num += item * 1 }) return num}
let x = 'da1';let y = 'da2';let obj = { x, y}console.log(obj); // 结果{x:'da1',y:'da2'}
let x=1; let y=2; let z=3let obj = { 'x': x, y, [z+y]: 4, * hello() { // 异步 console.log('dada') }}// function* functionName() {}obj.hello()
其中，*hello是Generator函数，这是ES6提供的一种异步解决方案。
11.Set数据结构
Set存储的成员不允许的重复的（它类似于数组）
Set 本身是一个构造函数，用来生成 Set 数据结构。
const s = new Set(); [2, 3, 5].forEach(x => s.add(x)); Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化 const set = new Set([1, 2, 3, 4, 4]);
实现数组去重
var arr = [1,1,2,2,3,3]; // step1:数组转集合var s = new Set(arr); // 已经去掉重复值，当前不是数组，而集合s.size; // 3// step2:集合转数组console.log([...s]); // 1,2,3; // Array.form 方法可以将 Set 结构转为数组const items = new Set([1, 2, 3]);const arr = Array.from(items); function dada(array) { return Array.from(new Set(array));} dada([1, 1, 2])
Set的遍历
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
操作方法
add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
let set = new Set([1, 2, 3, 4, 4]); // 添加数据 let addSet = set.add(5);console.log(addSet); // Set(5) {1, 2, 3, 4, 5} // 删除数据 let delSet = set.delete(4);console.log(delSet); // true // 查看是否存在数据 4let hasSet = set.has(4);console.log(hasSet); // false // 清除所有数据set.clear();console.log(set); // Set(0) {}
实现并集（Union）、交集（Intersect）和差集（Difference）
let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2, 1]); // 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4} // 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {1, 2, 3} // 差集let difference = new Set([...b].filter(x => !a.has(x)));// Set {4}
12.Map数据结构
JS当中的哈希表，使用方法如下：
let map = new Map()map.set(1, 2)map.set(3, 4)map.set(1, 3)console.log(map) 创建var da = new Map();var jeskson = {};遍历da.forEach(function(value,key,map){}长度da.size删除//da.delete() 删除key，全部清楚da.clear()新增da.set(key,value)da.has(查索引值) da.forEach((value,key) =>{}) for( let [key, value] of map){} // let map = new Map( [[1,2], [3,4]] ) map的key任意都可以let o = function() { console.log('o')}map.set(o, 3)console.log(map.get(o)); // 3
var {da=3} = { da: 2 }console.log(da)// 2var {da=3} = { da: undefined }console.log(da)// 3var {da=3} = { bar: 2 }console.log(da)// 3 var [a] = []console.log(a)// undefinedvar [b=10] = [undefined]console.log(b)// 10var [c=10] = []console.log(c)// 10 function da () { return { x: 1, y: 2 }}var {x, y} = da()console.log(x)// 1console.log(y)// 2
16.异步操作
Callback
Promise
function loadScript(src) { return new Promise((resolve, reject) => { let script = document.createElement('script') script.src = src script.onload = () => resolve(src) script.onerror = (err) => reject(err) document.head.append(script) })}
function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script)}
var promise = new Promise(function(resolve, reject){ resolve('传递给then的值')})promise.then(function(value){ console.log(value)},function(error){ console.error(error)})
var person = { name: "dada", age: 17}; person = new Proxy(person, { set(target, property, value) { if (value === 18) { console.log("Congratulations! You are of legal age"); Reflect.set(target, property, value); return true; } }}); person.age = 18; if (value < 13 && value > 99) { throw new Error('The age should be between 13 and 99')} else { Reflect.set(target, property, value)}
语法：
let p = new Proxy(target, handler)
target 用Proxy包装的目标对象
handler 一个对象，其属性是当执行一个操作时定义代理的行为的函数
如果不想再调用key的时候，返回undefined：
console.log(o.dada || '')
使用Proxy
let o = { name：'dada', age: 1} let handler = { get(obj, key) { return Reflect.has(obj, key)?obj[key]:'' }} let p = new Proxy(o, handler) console.log(p.from)
希望从服务器获取的数据只读，不允许修改：
for (let [key] of Object.entries(response.data)) { Object.defineProperty(response.data, key, { writable: false })}
使用Proxy:
let data = new Proxy(response.data, { set(obj, key, value) { return false }})
检验逻辑代码：
// Validator.js export default(obj, key, vlaue) => { if(Reflect.has(key) && value > 20) { obj[key] = value }} import Validator from './Validator' let data = new Proxy(response.data, { set: Validator})
使用Proxy，对读写进行监控：
let validator = { set(target, key, value) { if(key === 'age') { if(typeof value !== 'number' || Number.isNaN(value)) { throw new TypeError('Age must be a number') } if(value<=0){ throw new TypeError('Age must be a positive number') } } return true }} const person = { age: 12 }const proxy = new Proxy(person,validator)proxy.age = 'dada' // TypeError numberproxy.age = NaNproxy.age = 0 // positive numberproxy.age = 3
示例：每个对象都有一个自己的id
class Component { constructor() { this.proxy = new Proxy({ id: Math.random().toString(36).slice(-8) }) } get id() { return this.proxy.id }}
18.Generator
function * dada() { for(let i=0; i<2; i++ { yield console.log(i); }} const da = dada()da.next()da.next()
Generator函数与普通函数的区别在于定义的时候有一个*，执行下面函数：
function* dada() {console.log('dadaqianduan');}dada(); // 没有执行函数如需要输出，改为：var da = dada();da.next();
要生成一个自增的id:
var count_id = 0;function dada_id() {count_id ++;return count_id;}
function da(time) { return new Promise(function(resolve,reject){ setTimeout(function(){ resolve(time) },time) })}async function test() { let arr = [da(2000),da(1000),da(3000)] for await (let item of arr) { console.log(Date.now(), item) }}
