<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
<input type="text" id="ip" />
? ? <button id="btn">點(diǎn)哥</button>
? ? <input type="text" placeholder="請(qǐng)輸入要查詢(xún)的學(xué)生姓名" id="ip" />
? ? <button id="btnSet">設(shè)置成績(jī)</button>
? ? <button id="btnGet">查詢(xún)成績(jī)</button>
? ? <p id="pInfo">成績(jī)顯示區(qū)</p>
? ? <h3 id="hMyname">{name}</h3>
? ? <p id="pMyname">{name}</p>
? ? <h3 id="hMyage">{age}</h3>
? ? <p id="pMyage">{age}</p>
? ? <p id="pGender">{gender}</p>
</body>
<script>
? ? // 1、選擇排序
? ? const arr = [3, 4, 2, 5, 1, 6, 8, 7, 9]
? ? function fn() {
? ? ? ? let temp
? ? ? ? for (let p = 0; p <= arr.length - 2; p++) {
? ? ? ? ? ? let smallest = arr[p]
? ? ? ? ? ? let smallestIndex = p
? ? ? ? ? ? for (let i = p; i <= arr.length; i++) {
? ? ? ? ? ? ? ? if (arr[i] < arr[smallestIndex]) {
? ? ? ? ? ? ? ? ? ? smallest = arr[i]
? ? ? ? ? ? ? ? ? ? smallestIndex = i
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? temp = arr[p]
? ? ? ? ? ? arr[p] = smallest
? ? ? ? ? ? arr[smallestIndex] = temp
? ? ? ? }
? ? ? ? console.log(arr);
? ? }
? ? //冒泡排序
? ? (function fn() {
? ? ? ? let temp
? ? ? ? for (let j = arr.length - 2; j >= 0; j--) {
? ? ? ? ? ? for (let i = 0; i <= j; i++) {
? ? ? ? ? ? ? ? if (arr[i] > arr[i + 1]) {
? ? ? ? ? ? ? ? ? ? temp = arr[i]
? ? ? ? ? ? ? ? ? ? arr[i] = arr[i + 1]
? ? ? ? ? ? ? ? ? ? arr[i + 1] = temp
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log(arr);
? ? })
? ? // 2蚯斯、深拷貝
? ? (function fn(data) {
? ? ? ? let copy
? ? ? ? if (typeof (data) === 'function' || typeof (data) === 'object') {
? ? ? ? ? ? return data
? ? ? ? } else if (Array.isArray(data)) {
? ? ? ? ? ? copy = []
? ? ? ? ? ? data.forEach(function (item, index) {
? ? ? ? ? ? ? ? copy[index] = fn(item)
? ? ? ? ? ? })
? ? ? ? ? ? return copy
? ? ? ? } else {
? ? ? ? ? ? copy = {}
? ? ? ? ? ? for (let key in data) {
? ? ? ? ? ? ? ? copy[key] = fn(data[key])
? ? ? ? ? ? }
? ? ? ? ? ? return copy
? ? ? ? }
? ? })
? ? //3堰怨、手?jǐn)]函數(shù)防抖與節(jié)流
? ? //防抖
? ? const inputHandler = function (e) {
? ? ? ? console.log(e.target);
? ? ? ? console.log(e.target.value);
? ? }
? ? ip.addEventListener('input', mydebounce(inputHandler, 1000))
? ? function mydebounce(fn, delay) {
? ? ? ? let timer = null
? ? ? ? return function (...args) {
? ? ? ? ? ? if (timer) {
? ? ? ? ? ? ? ? clearTimeout(timer)
? ? ? ? ? ? }
? ? ? ? ? ? timer = setTimeout(() => {
? ? ? ? ? ? ? ? fn.apply(null, args)
? ? ? ? ? ? ? ? timer = null
? ? ? ? ? ? }, delay)
? ? ? ? }
? ? }
? ? // 節(jié)流
? ? const clickHandler = function (e) {
? ? ? ? console.log('hello');
? ? }
? ? btn.addEventListener('click', mythrottle(clickHandler, 1000))
? ? function mythrottle(fn, delay) {
? ? ? ? let timer = null
? ? ? ? return function (...args) {
? ? ? ? ? ? if (!timer) {
? ? ? ? ? ? ? ? fn.apply(null, args)
? ? ? ? ? ? ? ? timer = setTimeout(() => {
? ? ? ? ? ? ? ? ? ? timer = null
? ? ? ? ? ? ? ? }, delay)
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? // 4弄唧、使用連環(huán)異步回調(diào)實(shí)現(xiàn)求5的階乘：
? ? (function fn() {
? ? ? ? const multiply = (a, b, callback) => {
? ? ? ? ? ? setTimeout(() => callback(a * b), 2000);
? ? ? ? };
? ? ? ? const mulPromise = (a, b) => {
? ? ? ? ? ? return new Promise(
? ? ? ? ? ? ? ? (resolve, reject) => {
? ? ? ? ? ? ? ? ? ? multiply(a, b, (ret) => resolve(ret));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? );
? ? ? ? };
? ? ? ? mulPromise(2, 3)
? ? ? ? ? ? .then((ret) => mulPromise(ret, 4))
? ? ? ? ? ? .then((ret) => mulPromise(ret, 5))
? ? ? ? ? ? .then((ret) => console.log("ret=", ret));
? ? ? ? ~(async function awaitDemo() {
? ? ? ? ? ? try {
? ? ? ? ? ? ? ? let ret = await mulPromise(2, 3);
? ? ? ? ? ? ? ? ret = await mulPromise(ret, 4);
? ? ? ? ? ? ? ? ret = await mulPromise(ret, 5);
? ? ? ? ? ? ? ? console.log(ret);
? ? ? ? ? ? } catch (err) {
? ? ? ? ? ? ? ? console.log("err=", err);
? ? ? ? ? ? }
? ? ? ? })();
? ? })
? ? // 5轧抗、提取URL中的查詢(xún)參數(shù)
? ? function getSearchParams(url) {
? ? ? ? const obj = {};
? ? ? ? const reg = /\w+=\w+/g
? ? ? ? const arr = url.match(reg)
? ? ? ? arr.forEach((item) => {
? ? ? ? ? ? let [key, value] = item.split("=");
? ? ? ? ? ? obj[key] = value
? ? ? ? });
? ? ? ? return obj;
? ? }
? ? // 6斗搞、封裝ajax,實(shí)現(xiàn)POST一個(gè)表單
? ? ~ function () {
? ? ? ? function getSearchParams(url = '') {
? ? ? ? ? ? const obj = {}
? ? ? ? ? ? url.match(/\w+=\w+/g).forEach(str => {
? ? ? ? ? ? ? ? let [key, value] = str.split('=')
? ? ? ? ? ? ? ? obj[key] = value
? ? ? ? ? ? })
? ? ? ? ? ? return obj
? ? ? ? }
? ? ? ? // obj = {
? ? ? ? // ? ? name: 'heige',
? ? ? ? // ? ? age: 12
? ? ? ? // }
? ? ? ? function toGetParams(obj) {
? ? ? ? ? ? let str = ''
? ? ? ? ? ? for (let key in obj) {
? ? ? ? ? ? ? ? str += `&${key}=${obj[key]}`
? ? ? ? ? ? }
? ? ? ? ? ? return str.slice(1)
? ? ? ? }
? ? ? ? function ajax({
? ? ? ? ? ? url,
? ? ? ? ? ? method,
? ? ? ? ? ? data,
? ? ? ? ? ? dataType,
? ? ? ? ? ? onSuccess,
? ? ? ? ? ? onFail
? ? ? ? }) {
? ? ? ? ? ? const xhr = new XMLHttpRequest()
? ? ? ? ? ? if (!url) {
? ? ? ? ? ? ? ? throw new Error('沒(méi)給url')
? ? ? ? ? ? }
? ? ? ? ? ? method = method || 'GET'
? ? ? ? ? ? onSuccess = onSuccess || (data => console.log('default onSuccess:', data))
? ? ? ? ? ? onFail = onFail || (err => console.log('default onFail:', err))
? ? ? ? ? ? xhr.open(method, url)
? ? ? ? ? ? let reqBody = null
? ? ? ? ? ? switch (true) {
? ? ? ? ? ? ? ? case dataType == 'form':
? ? ? ? ? ? ? ? ? ? xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
? ? ? ? ? ? ? ? ? ? reqBody = toGetParams(data)
? ? ? ? ? ? ? ? ? ? break
? ? ? ? ? ? ? ? case dataType == 'json':
? ? ? ? ? ? ? ? ? ? xhr.setRequestHeader('Content-Type', 'application/json')
? ? ? ? ? ? ? ? ? ? reqBody = JSON.stringify(data)
? ? ? ? ? ? ? ? ? ? break
? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? break
? ? ? ? ? ? }
? ? ? ? ? ? xhr.onload = () => onSuccess(xhr.responseText)
? ? ? ? ? ? xhr.onerror = err => onFail(err)
? ? ? ? ? ? xhr.send(reqBody)
? ? ? ? }
? ? ? ? // try {
? ? ? ? // ? ajax({
? ? ? ? // ? ? url: 'http://www.httpbin.org/post',
? ? ? ? // ? ? method: 'POST',
? ? ? ? // ? ? dataType: 'form',
? ? ? ? // ? ? data: { name: 'admin', pwd: '123456' },
? ? ? ? // ? ? onSuccess: data => console.log(data),
? ? ? ? // ? ? onFail: err => console.log(err)
? ? ? ? // ? })
? ? ? ? // } catch (err) {
? ? ? ? // ? console.log('catch err:', err);
? ? ? ? // }
? ? ? ? function ajaxPromise(config) {
? ? ? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? ? ? ? ajax({
? ? ? ? ? ? ? ? ? ? ...config,
? ? ? ? ? ? ? ? ? ? onSuccess: data => resolve(data),
? ? ? ? ? ? ? ? ? ? onFail: err => reject(err),
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? ajaxPromise({
? ? ? ? ? ? ? ? url: 'http://www.httpbin.org/post',
? ? ? ? ? ? ? ? method: 'POST',
? ? ? ? ? ? ? ? dataType: 'form',
? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? name: 'admin',
? ? ? ? ? ? ? ? ? ? pwd: '123456'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? })
? ? ? ? ? ? .then(data => console.log(data))
? ? ? ? ? ? .catch(err => console.log(err))
? ? }
? ? // 7捷泞、帶有超時(shí)功能的Promise
? ? function fn() {
? ? ? ? async function executeWithTimeout(fn, ms) {
? ? ? ? ? ? return new Promise(async (resolve, reject) => {
? ? ? ? ? ? ? ? let timer = setTimeout(() => {
? ? ? ? ? ? ? ? ? ? reject("timeout");
? ? ? ? ? ? ? ? }, ms);
? ? ? ? ? ? ? ? const data = await fn();
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? ? ? resolve(data);
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? const timeout = 5000;
? ? ? ? function rq(url) {
? ? ? ? ? ? return new Promise((resolve) => {
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? resolve(`來(lái)自${url}的數(shù)據(jù)`);
? ? ? ? ? ? ? ? }, timeout);
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? async function fn1() {
? ? ? ? ? ? return rq("https://www.taobao.com");
? ? ? ? }
? ? ? ? executeWithTimeout(fn1, 3000)
? ? ? ? ? ? .then((value) => console.log("value=", value))
? ? ? ? ? ? .catch((err) => console.log("err=", err));
? ? }
? ? // 8钱反、一次性獲取多個(gè)指定頁(yè)面
? ? function fn3() {
? ? ? ? async function getContentByUrl(url) {
? ? ? ? ? ? return new Promise((resolve, reject) =>
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? Math.random() > 0.5 ? resolve(`${url}的頁(yè)面內(nèi)容`) : reject("timeout");
? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? );
? ? ? ? }
? ? ? ? const urls = [
? ? ? ? ? ? "https://www.taobao.com",
? ? ? ? ? ? "https://www.baidu.com",
? ? ? ? ? ? "https://web.taobao.com",
? ? ? ? ];
? ? ? ? async function fetchData(urls = []) {
? ? ? ? ? ? return Promise.allSettled(
? ? ? ? ? ? ? ? urls
? ? ? ? ? ? ? ? .filter((url) => url.endsWith("taobao.com"))
? ? ? ? ? ? ? ? .map((url) => getContentByUrl(url))
? ? ? ? ? ? );
? ? ? ? }
? ? ? ? fetchData(urls)
? ? ? ? ? ? .then((results) => console.log(results));
? ? }
? ? // 9家卖、IP地址比大小
? ? function fn1() {
? ? ? ? function compare(ip1 = "", ip2 = "") {
? ? ? ? ? ? const arr1 = ip1.split(".").map((item) => item * 1);
? ? ? ? ? ? const arr2 = ip2.split(".").map((item) => item * 1);
? ? ? ? ? ? for (let i = 0; i < arr1.length; i++) {
? ? ? ? ? ? ? ? if (arr1[i] > arr2[i]) {
? ? ? ? ? ? ? ? ? ? return 1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (arr1[i] < arr2[i]) {
? ? ? ? ? ? ? ? ? ? return -1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return 0;
? ? ? ? }
? ? ? ? console.log(compare("1.2.3.4", "1.1.3.4"));
? ? ? ? console.log(compare("1.11.3.4", "1.2.3.4"));
? ? ? ? console.log(compare("1.2.3.4", "1.11.3.4"));
? ? ? ? console.log(compare("1.2.3.4", "1.2.3.4"));
? ? }
? ? // 10眨层、實(shí)現(xiàn)閉包管理全班學(xué)生成績(jī)
? ? function score(name) {
? ? ? ? const scores = {
? ? ? ? ? ? chinese: 0,
? ? ? ? ? ? math: 0,
? ? ? ? ? ? coding: 0,
? ? ? ? };
? ? ? ? return {
? ? ? ? ? ? set(key, value) {
? ? ? ? ? ? ? ? scores[key] = value;
? ? ? ? ? ? },
? ? ? ? ? ? getAll() {
? ? ? ? ? ? ? ? return `${name}:${JSON.stringify(scores)}`;
? ? ? ? ? ? },
? ? ? ? };
? ? }
? ? const arr1 = ["張三瘋", "尼古拉斯趙四", "隔壁老王"]
? ? const obj = {}
? ? arr1.forEach(
? ? ? ? name => obj[name] = scrore(name)
? ? )
? ?btnSet.onclick = function(){
? ? ? ? ? ? let [name,key,value] = ip.value.split(":")
? ? ? ? ? ? obj[name].set(key,value)
? ? ? ? }
? ? ? ? btnGet.onclick = function(){
? ? ? ? ? ? const name = ip.value
? ? ? ? ? ? pInfo.innerText = obj[name].getAll()
? ? ? ? }
? ? // 11、手封MyMap實(shí)現(xiàn)一下效果
? ? class MyMap {
? ? ? ? constructor() {
? ? ? ? ? ? this.obj = {};
? ? ? ? ? ? this.size = 0;
? ? ? ? }
? ? ? ? set(key, value) {
? ? ? ? ? ? this.obj[key] = value;
? ? ? ? ? ? this.updateSize();
? ? ? ? }
? ? ? ? get(key) {
? ? ? ? ? ? return this.obj[key];
? ? ? ? }
? ? ? ? updateSize() {
? ? ? ? ? ? this.size = Object.keys(this.obj).length;
? ? ? ? }
? ? ? ? delete(key) {
? ? ? ? ? ? delete this.obj[key];
? ? ? ? ? ? this.updateSize();
? ? ? ? }
? ? ? ? clear() {
? ? ? ? ? ? this.obj = {};
? ? ? ? ? ? this.size = 0;
? ? ? ? }
? ? ? ? has(key) {
? ? ? ? ? ? return this.obj.hasOwnProperty(key);
? ? ? ? }
? ? ? ? forEach(handler) {
? ? ? ? ? ? for (let key in this.obj) {
? ? ? ? ? ? ? ? handler.apply(this, [this.obj[key], key, this]);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? keys() {
? ? ? ? ? ? return Object.keys(this.obj);
? ? ? ? }
? ? ? ? values() {
? ? ? ? ? ? return Object.keys(this.obj).map((key) => this.obj[key]);
? ? ? ? }
? ? ? ? entries() {
? ? ? ? ? ? return Object.keys(this.obj).map(
? ? ? ? ? ? ? ? (key) => ({
? ? ? ? ? ? ? ? ? ? key,
? ? ? ? ? ? ? ? ? ? value: this.obj[key]
? ? ? ? ? ? ? ? })
? ? ? ? ? ? );
? ? ? ? }
? ? }
? ? ~(function () {
? ? ? ? const map = new MyMap()
? ? ? ? map.set("name", "張三")
? ? ? ? map.set("age", 20)
? ? ? ? map.set("gender", "男")
? ? ? ? map.forEach(
? ? ? ? ? ? (value, key) => console.log(key, value)
? ? ? ? )
? ? ? ? for (let entry of map.entries()) {
? ? ? ? ? ? console.log(entry)
? ? ? ? }
? ? ? ? console.log(map.size)
? ? ? ? console.log(map.get("name"))
? ? ? ? console.log(map.get("age"))
? ? ? ? console.log(map.has("name"))
? ? ? ? console.log(map.has("myname"))
? ? ? ? map.delete("age")
? ? ? ? map.clear()
? ? ? ? console.log(map.size)
? ? })
? ? // 12上荡、全班人馬排除空座位后抽取N名幸運(yùn)觀眾
? ? function fn3() {
? ? ? ? let stus = [];
? ? ? ? for (let i = 1; i < 100; i++) {
? ? ? ? ? ? stus.push(i);
? ? ? ? }
? ? ? ? const empties = [12, 34, 56, 78];
? ? ? ? stus = stus.filter((s) => empties.indexOf(s) === -1);
? ? ? ? const pick = (arr, n) => {
? ? ? ? ? ? let luckies = [];
? ? ? ? ? ? for (let i = 0; i < n; i++) {
? ? ? ? ? ? ? ? let randomIndex = parseInt(Math.random() * arr.length);
? ? ? ? ? ? ? ? luckies = arr.splice(randomIndex, 1).concat(luckies)
? ? ? ? ? ? }
? ? ? ? ? ? return luckies;
? ? ? ? };
? ? ? ? console.log(pick(stus, 5));
? ? }
? ? // fn3();
? ? // 13趴樱、手?jǐn)]觀察者模式：實(shí)現(xiàn)彩票機(jī)周期性地發(fā)布【開(kāi)售】【開(kāi)獎(jiǎng)】事件馒闷，玩家開(kāi)售時(shí)下注，開(kāi)獎(jiǎng)時(shí)購(gòu)買(mǎi)叁征，一旦中獎(jiǎng)則彩票機(jī)停止工作纳账；
? ? function observerDemo() {
? ? ? ? class Observable {
? ? ? ? ? ? constructor(name) {
? ? ? ? ? ? ? ? this.name = name;
? ? ? ? ? ? ? ? this.observers = [];
? ? ? ? ? ? }
? ? ? ? ? ? register(ob) {
? ? ? ? ? ? ? ? this.observers.push(ob);
? ? ? ? ? ? ? ? ob.observable = this;
? ? ? ? ? ? }
? ? ? ? ? ? unregister(ob) {
? ? ? ? ? ? ? ? this.observers = this.observers.filter((o) => o !== ob);
? ? ? ? ? ? }
? ? ? ? ? ? emit(event) {
? ? ? ? ? ? ? ? this.observers.forEach((ob) => ob.onEvent(event));
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? class Observer {
? ? ? ? ? ? constructor(name) {
? ? ? ? ? ? ? ? this.name = name;
? ? ? ? ? ? }
? ? ? ? ? ? onEvent(event) {
? ? ? ? ? ? ? ? console.log(this.name, "響應(yīng)事件", event);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? class Lottery extends Observable {
? ? ? ? ? ? constructor(name) {
? ? ? ? ? ? ? ? super(name);
? ? ? ? ? ? ? ? this.timer = null;
? ? ? ? ? ? }
? ? ? ? ? ? start() {
? ? ? ? ? ? ? ? if (!this.timer) {
? ? ? ? ? ? ? ? ? ? this.timer = setInterval(() => {
? ? ? ? ? ? ? ? ? ? ? ? const code = parseInt(Math.random() * 3);
? ? ? ? ? ? ? ? ? ? ? ? console.log(this.name, "發(fā)布開(kāi)獎(jiǎng)事件", code);
? ? ? ? ? ? ? ? ? ? ? ? this.emit({
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: "開(kāi)獎(jiǎng)",
? ? ? ? ? ? ? ? ? ? ? ? ? ? code
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? this.emit({
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: "開(kāi)售"
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? }, 2000);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? stop() {
? ? ? ? ? ? ? ? if (this.timer) {
? ? ? ? ? ? ? ? ? ? clearInterval(this.timer);
? ? ? ? ? ? ? ? ? ? console.log(this.name, "已停止");
? ? ? ? ? ? ? ? ? ? this.timer = null;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? class Player extends Observer {
? ? ? ? ? ? constructor(name) {
? ? ? ? ? ? ? ? super(name);
? ? ? ? ? ? ? ? this.code = null;
? ? ? ? ? ? }
? ? ? ? ? ? buy() {
? ? ? ? ? ? ? ? this.code = parseInt(Math.random() * 3);
? ? ? ? ? ? ? ? console.log(this.name, "下注", this.code);
? ? ? ? ? ? }
? ? ? ? ? ? check(event) {
? ? ? ? ? ? ? ? const isLucky = this.code === event.code;
? ? ? ? ? ? ? ? console.log(this.name, isLucky ? "中獎(jiǎng)了" : "未中獎(jiǎng)");
? ? ? ? ? ? ? ? isLucky && this.observable.stop();
? ? ? ? ? ? }
? ? ? ? ? ? onEvent(event) {
? ? ? ? ? ? ? ? super.onEvent(event);
? ? ? ? ? ? ? ? switch (event.type) {
? ? ? ? ? ? ? ? ? ? case "開(kāi)售":
? ? ? ? ? ? ? ? ? ? ? ? this.buy();
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "開(kāi)獎(jiǎng)":
? ? ? ? ? ? ? ? ? ? ? ? this.check(event);
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? console.log("");
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? ~(function main() {
? ? ? ? ? ? const lot = new Lottery("六合彩");
? ? ? ? ? ? const tiger = new Player("打老虎");
? ? ? ? ? ? const gaojin = new Player("高進(jìn)");
? ? ? ? ? ? lot.register(tiger);
? ? ? ? ? ? lot.register(gaojin);
? ? ? ? ? ? lot.unregister(gaojin);
? ? ? ? ? ? lot.start();
? ? ? ? })();
? ? }
? ? // observerDemo();
? ? // 14、實(shí)現(xiàn)任意多個(gè)入?yún)⒌暮瘮?shù)fn的柯里化
? ? function curryDemo() {
? ? ? ? const curry = (fn) => {
? ? ? ? ? ? return function cfn(...args) {
? ? ? ? ? ? ? ? if (args.length === fn.length) {
? ? ? ? ? ? ? ? ? ? return fn.apply(null, args);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return function (...b) {
? ? ? ? ? ? ? ? ? ? args = args.concat(b);
? ? ? ? ? ? ? ? ? ? return cfn(...args);
? ? ? ? ? ? ? ? };
? ? ? ? ? ? };
? ? ? ? };
? ? ? ? const cadd = curry(add);
? ? ? ? console.log(cadd(1, 2, 3, 4));
? ? ? ? console.log(cadd(1, 2)(3)(4));
? ? }
? ? // curryDemo();
? ? // 15捺疼、實(shí)現(xiàn)任意多個(gè)函數(shù)的管道與組合
? ? function pipeDemo() {
? ? ? ? const pipe = (...fns) => (v => fns.reduce(
? ? ? ? ? ? (pv, fn, index) => fn(pv),
? ? ? ? ? ? v
? ? ? ? ))
? ? ? ? const compose = (...fns) => (v => fns.reverse().reduce(
? ? ? ? ? ? (pv, fn, index) => fn(pv),
? ? ? ? ? ? v
? ? ? ? ))
? ? ? ? const len = (n) => (n + "").length;
? ? ? ? const pow = (n) => n * n;
? ? ? ? const cubicRoot = (n) => Math.cbrt(n);
? ? ? ? console.log(compose(len, pow, cubicRoot)(1000));
? ? }
? ? // pipeDemo();
? ? // 16疏虫、函數(shù)的Promise化
? ? async function promDemo() {
? ? ? ? function promisify(fn) {
? ? ? ? ? ? return function (...args) {
? ? ? ? ? ? ? ? return new Promise(
? ? ? ? ? ? ? ? ? ? (resolve, reject) => {
? ? ? ? ? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? ? ? ? ? resolve(fn.apply(null, args))
? ? ? ? ? ? ? ? ? ? ? ? } catch (err) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? reject(err)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? )
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? const add = (a, b, c, d) => {
? ? ? ? ? ? if (Math.random() > 0.7) {
? ? ? ? ? ? ? ? throw new Error("人品槽已空，請(qǐng)盡快充100塊錢(qián)的人品")
? ? ? ? ? ? }
? ? ? ? ? ? return a + b + c + d
? ? ? ? }
? ? ? ? const pow = (a, b) => {
? ? ? ? ? ? if (Math.random() > 0.7) {
? ? ? ? ? ? ? ? throw new Error("人品槽已空啤呼，請(qǐng)盡快充100塊錢(qián)的人品")
? ? ? ? ? ? }
? ? ? ? ? ? return Math.pow(a, b)
? ? ? ? }
? ? ? ? const padd = promisify(add)
? ? ? ? const ppow = promisify(pow)
? ? ? ? // padd(1,2,3,4).then(
? ? ? ? // ? ? data => {
? ? ? ? // ? ? ? ? console.log("data=",data)
? ? ? ? // ? ? ? ? return ppow(data,2)
? ? ? ? // ? ? }
? ? ? ? // )
? ? ? ? // .then(
? ? ? ? // ? ? data => console.log("data=",data)
? ? ? ? // )
? ? ? ? // .catch(
? ? ? ? // ? ? err => console.error("err=",err)
? ? ? ? // )
? ? ? ? try {
? ? ? ? ? ? let data = await padd(1, 2, 3, 4)
? ? ? ? ? ? console.log("data=", data)
? ? ? ? ? ? data = await ppow(data, 2)
? ? ? ? ? ? console.log("data=", data)
? ? ? ? } catch (err) {
? ? ? ? ? ? console.error("err=", err)
? ? ? ? }
? ? }
? ? // promDemo()
? ? // 17卧秘、封裝MongoDB數(shù)據(jù)引擎層
? ? async function fn3() {
? ? ? ? function getCollection(dbName, collectionName) {
? ? ? ? ? ? return new Promise(
? ? ? ? ? ? ? ? (resolve, reject) => {
? ? ? ? ? ? ? ? ? ? var MongoClient = require("mongodb").MongoClient;
? ? ? ? ? ? ? ? ? ? var url = "mongodb://localhost:27017/";
? ? ? ? ? ? ? ? ? ? MongoClient.connect(url, function (err, conn) {
? ? ? ? ? ? ? ? ? ? ? ? if (err) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? resolve({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? err,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? collection: undefined,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? conn: undefined,
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? var dbo = conn.db(dbName);
? ? ? ? ? ? ? ? ? ? ? ? const collection = dbo.collection(collectionName);
? ? ? ? ? ? ? ? ? ? ? ? resolve({
? ? ? ? ? ? ? ? ? ? ? ? ? ? err: undefined,
? ? ? ? ? ? ? ? ? ? ? ? ? ? collection,
? ? ? ? ? ? ? ? ? ? ? ? ? ? conn,
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? );
? ? ? ? }
? ? ? ? async function doCreate(dbName, collectionName, dataObj) {
? ? ? ? ? ? const {
? ? ? ? ? ? ? ? err,
? ? ? ? ? ? ? ? collection,
? ? ? ? ? ? ? ? conn
? ? ? ? ? ? } = await getCollection(
? ? ? ? ? ? ? ? dbName,
? ? ? ? ? ? ? ? collectionName
? ? ? ? ? ? );
? ? ? ? ? ? if (err) {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? err,
? ? ? ? ? ? ? ? ? ? res: undefined,
? ? ? ? ? ? ? ? };
? ? ? ? ? ? }
? ? ? ? ? ? collection.insertOne(dataObj, function (err, res) {
? ? ? ? ? ? ? ? conn.close();
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? err,
? ? ? ? ? ? ? ? ? ? res,
? ? ? ? ? ? ? ? };
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? async function addUser(user) {
? ? ? ? ? ? const ret = await doCreate(dbName, collectionName, user);
? ? ? ? ? ? return ret;
? ? ? ? }
? ? }
? ? // fn3();
? ? //18、異步函數(shù)的Promise化
? ? function fn2() {
? ? ? ? function add(a, b) {
? ? ? ? ? ? return a + b;
? ? ? ? }
? ? ? ? function multiply(a, b, callback) {
? ? ? ? ? ? setTimeout(() => callback(a * b), 1000);
? ? ? ? }
? ? ? ? function promisify(fn) {
? ? ? ? ? ? return function pfn(...args) {
? ? ? ? ? ? ? ? return new Promise(
? ? ? ? ? ? ? ? ? ? (resolve, reject) => {
? ? ? ? ? ? ? ? ? ? ? ? const ret = fn.apply(null, [...args, (...a) => resolve(a)]);
? ? ? ? ? ? ? ? ? ? ? ? ret && resolve(ret);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? );
? ? ? ? ? ? };
? ? ? ? }
? ? ? ? /* 同步返回函數(shù)的Promise化 */
? ? ? ? // ? const padd = promisify(add);
? ? ? ? // ? padd(2, 3).then(
? ? ? ? // ? ? (value) => console.log("value=", value) //5
? ? ? ? // ? );
? ? ? ? const pmul = promisify(multiply);
? ? ? ? pmul(2, 3)
? ? ? ? ? ? .then((values) => {
? ? ? ? ? ? ? ? console.log("value=", values);
? ? ? ? ? ? ? ? return pmul(values[0], 4);
? ? ? ? ? ? })
? ? ? ? ? ? .then((values) => {
? ? ? ? ? ? ? ? console.log("value=", values);
? ? ? ? ? ? ? ? return pmul(values[0], 5);
? ? ? ? ? ? })
? ? ? ? ? ? .then((values) => console.log(values[0]));
? ? }
? ? // fn2();
? ? //19媳友、 手?jǐn)]數(shù)據(jù)驅(qū)動(dòng)視圖微框架
? ? function defineReactive(data, keys = []) {
? ? ? ? keys.forEach(
? ? ? ? ? ? ({
? ? ? ? ? ? ? ? name,
? ? ? ? ? ? ? ? listeners
? ? ? ? ? ? }) => {
? ? ? ? ? ? ? ? Object.defineProperty(data, name, {
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? console.log("get", name);
? ? ? ? ? ? ? ? ? ? ? ? return data[`x_${name}`];
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? set(newValue) {
? ? ? ? ? ? ? ? ? ? ? ? console.log("set", name, newValue);
? ? ? ? ? ? ? ? ? ? ? ? data[`x_${name}`] = newValue;
? ? ? ? ? ? ? ? ? ? ? ? listeners.forEach((dom) => (dom.innerText = newValue));
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? );
? ? }
? ? const data = {};
? ? defineReactive(data, [{
? ? ? ? ? ? name: "age",
? ? ? ? ? ? listeners: [hMyage, pMyage]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: "name",
? ? ? ? ? ? listeners: [hMyname, pMyname]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: "gender",
? ? ? ? ? ? listeners: [pGender]
? ? ? ? },
? ? ]);
? ? data.name = "黑哥";
? ? data.age = 18;
? ? data.gender = "男";
? ? setInterval(() => {
? ? ? ? data.name = Date.now();
? ? ? ? data.age = data.age + 1;
? ? ? ? data.gender = data.gender === "男" ? "女" : "男";
? ? }, 1000);
? ? //20斯议、數(shù)組APIreduce
? ? const arr12=[1,2,3,4]
? ? const initialValue=0
? ? const sunWithInitial=arr12.reduce((previousValue,currentValue)=>previousValue+currentValue,initialValue)
? ? console.log(sunWithInitial);
</script>
</html>
