18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson2-2.js:
--------------------------------------------------------------------------------
1 | for (var i = 0; i < 3; i++) {
2 | setTimeout(function () {
3 | // console.log(i)
4 | }, 1000)
5 | }
6 |
7 | // console.log(a)
8 | // let a = 9
9 | // console.log(a)
10 | // let array = Array.from({ length: 5}, function () { return 1})
11 | // console.log(array)
12 | // let array = Array.of(1, 4, 5, 2, 67)
13 | // console.log(array)
14 | // let array = Array(10).fill(1)
15 | // console.log(array.fill(9, 5, 8))
16 |
17 | let array = Array.of(1, 4, 5, 2, 67)
18 | // let find = array.filter(function (item) {
19 | // return item % 2 === 0
20 | // })
21 | let find = array.findIndex(function (item) {
22 | return item === 0
23 | })
24 | console.log(find);
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson4-1.js:
--------------------------------------------------------------------------------
1 | // async function firstAsync () {
2 | // return 27
3 | // // return Promise.resolve(28)
4 | // }
5 |
6 | // firstAsync().then(val => {
7 | // console.log(val)
8 | // })
9 |
10 | // console.log(firstAsync() instanceof Promise)
11 |
12 | // await 异步操作
13 | async function firstAsync () {
14 | let promise = new Promise((resolve, reject) => {
15 | setTimeout(function () {
16 | resolve('now it is done')
17 | }, 1000)
18 | })
19 | console.log(await promise)
20 | console.log(await Promise.resolve(48))
21 | console.log(2)
22 | return Promise.resolve(28)
23 | }
24 |
25 | firstAsync().then(val => {
26 | console.log(val)
27 | })
28 |
--------------------------------------------------------------------------------
/ES6-10/webpack-test/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 |
4 | module.exports = {
5 | entry: './index.js',
6 | output: {
7 | path: path.resolve(__dirname, 'dist'),
8 | filename: './index.min.js'
9 | },
10 | mode: 'development',
11 | // mode: 'production',
12 | module: {
13 | rules: [{
14 | test: /\.m?js$/,
15 | exclude: /(node_modules|bower_components)/,
16 | use: {
17 | loader: 'babel-loader',
18 | options: {
19 | presets: ['@babel/preset-env']
20 | }
21 | }
22 | }]
23 | },
24 | plugins: [
25 | new HtmlWebpackPlugin()
26 | ]
27 | };
--------------------------------------------------------------------------------
/fast-interview-code/questions-demo/RAF.js:
--------------------------------------------------------------------------------
1 | // 3s 把宽度从 100px 变为 640px ，即增加 540px
2 | // 60帧/s ，3s 180 帧 ，每次变化 3px
3 |
4 | const $div1 = $('#div1')
5 | let curWidth = 100
6 | const maxWidth = 640
7 |
8 | // // setTimeout
9 | // function animate() {
10 | // curWidth = curWidth + 3
11 | // $div1.css('width', curWidth)
12 | // if (curWidth < maxWidth) {
13 | // setTimeout(animate, 16.7) // 自己控制时间
14 | // }
15 | // }
16 | // animate()
17 |
18 | // RAF
19 | function animate() {
20 | curWidth = curWidth + 3
21 | $div1.css('width', curWidth)
22 | if (curWidth < maxWidth) {
23 | window.requestAnimationFrame(animate) // 时间不用自己控制
24 | }
25 | }
26 | animate()
27 |
--------------------------------------------------------------------------------
/fast-interview-code/webpack-demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-demo",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "build": "webpack --config webpack.prod.js",
9 | "dev": "webpack-dev-server"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/core": "^7.6.2",
16 | "@babel/preset-env": "^7.6.2",
17 | "babel-loader": "^8.0.6",
18 | "html-webpack-plugin": "^3.2.0",
19 | "webpack": "^4.41.0",
20 | "webpack-cli": "^3.3.9",
21 | "webpack-dev-server": "^3.8.1"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/ES6-10/.gitignore:
--------------------------------------------------------------------------------
1 | # Numerous always-ignore extensions
2 | *.bak
3 | *.patch
4 | *.diff
5 | *.err
6 |
7 | # temp file for git conflict merging
8 | *.orig
9 | *.log
10 | *.rej
11 | *.swo
12 | *.swp
13 | # *.zip
14 | *.vi
15 | *~
16 | *.sass-cache
17 | *.tmp.html
18 | *.dump
19 |
20 | # OS or Editor folders
21 | .DS_Store
22 | ._*
23 | .cache
24 | # .project
25 | # .settings
26 | .tmproj
27 | *.esproj
28 | *.sublime-project
29 | *.sublime-workspace
30 | nbproject
31 | thumbs.db
32 | *.iml
33 |
34 | # Folders to ignore
35 | .hg
36 | .svn
37 | .CVS
38 | .idea
39 | node_modules/
40 | jscoverage_lib/
41 | bower_components/
42 | # dist/
43 |
--------------------------------------------------------------------------------
/fast-interview-code/css/01-盒模型.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
盒模型
8 |
17 |
18 |
19 |
this is div1
20 |
21 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/typescript/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser', // 定义ESLint的解析器
3 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], // 定义文件继承的子规范
4 | plugins: ['prettier'], // 定义了该eslint文件所依赖的插件
5 | env: {
6 | // 指定代码的运行环境
7 | browser: true,
8 | node: true,
9 | es2021: true,
10 | },
11 | parserOptions: {
12 | // 指定ESLint可以解析JSX语法
13 | ecmaFeatures: {
14 | jsx: true,
15 | },
16 | ecmaVersion: 'latest',
17 | sourceType: 'module',
18 | },
19 | rules: {
20 | 'no-console': 'off',
21 | 'import/prefer-default-export': 'off',
22 | '@typescript-eslint/no-unused-vars': 'warn',
23 | },
24 | }
25 |
--------------------------------------------------------------------------------
/fast-interview-code/css/14-vw-wh.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
vw vh test
7 |
19 |
20 |
21 |
vw vh 测试
22 |
23 |
24 |
25 |
29 |
30 |
--------------------------------------------------------------------------------
/typescript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typescript",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "dev:ts": "nodemon src/index.ts",
7 | "dev:js": "nodemon src/index.js",
8 | "lint": "eslint ./src --fix"
9 | },
10 | "author": "",
11 | "type": "module",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "@types/node": "^18.6.5",
15 | "@typescript-eslint/eslint-plugin": "^5.33.0",
16 | "@typescript-eslint/parser": "^5.33.0",
17 | "eslint": "^8.21.0",
18 | "eslint-config-prettier": "^8.5.0",
19 | "eslint-plugin-prettier": "^4.2.1",
20 | "nodemon": "^2.0.19",
21 | "prettier": "^2.7.1",
22 | "ts-node": "^10.9.1",
23 | "typescript": "^4.7.4"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson2-6.js:
--------------------------------------------------------------------------------
1 | // const s = 'a_aa_aaa_aa_a'
2 | // const r1 = /a+/g
3 | // const r2 = /a+/y
4 | // console.log(r1.exec(s))
5 | // console.log(r2.exec(s))
6 | // console.log(r1.exec(s))
7 | // console.log(r2.exec(s))
8 |
9 | // unicode u修饰符 大于 \uffff
10 | let s = '𠮷'
11 | let s2 = '\uD842\uDF87'
12 |
13 | console.log(/^\uD842/.test(s2))
14 | console.log(/^\uD842/u.test(s2)) // 无法匹配
15 |
16 | console.log(/^.$/.test(s)) // 无法匹配
17 | console.log(/^.$/u.test(s)) // 正确匹配, 使用 "." 大于两个字节要加 u
18 |
19 | console.log(/^\u{20BB7}$/u.test(s))
20 | console.log(/^\u{61}$/u.test('a')) // 使用码点时，加 u 才能匹配 \u
21 |
22 | console.log(/𠮷{2}/u.test('𠮷𠮷')) // 加 u 才能匹配，所有中文都加 u
23 |
24 | console.log(/[a-z]/i.test('\u212A'))
25 | console.log(/[a-z]/iu.test('\u212A'))
26 |
--------------------------------------------------------------------------------
/fast-interview-code/questions-demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
JS 真题演示
8 |
9 |
16 |
17 |
18 |
JS 真题演示
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/fast-interview-code/js-base/class-demo-1.js:
--------------------------------------------------------------------------------
1 | // 类
2 | class Student {
3 | constructor(name, number) {
4 | this.name = name
5 | this.number = number
6 | // this.gender = 'male'
7 | }
8 | sayHi() {
9 | console.log(
10 | `姓名 ${this.name} ，学号 ${this.number}`
11 | )
12 | // console.log(
13 | // '姓名 ' + this.name + ' ，学号 ' + this.number
14 | // )
15 | }
16 | // study() {
17 |
18 | // }
19 | }
20 |
21 | // 通过类 new 对象/实例
22 | const xialuo = new Student('夏洛', 100)
23 | console.log(xialuo.name)
24 | console.log(xialuo.number)
25 | xialuo.sayHi()
26 |
27 | const madongmei = new Student('马冬梅', 101)
28 | console.log(madongmei.name)
29 | console.log(madongmei.number)
30 | madongmei.sayHi()
31 |
--------------------------------------------------------------------------------
/fast-interview-code/questions-demo/scope.js:
--------------------------------------------------------------------------------
1 | // // 自由变量示例 —— 内存会被释放
2 | // let a = 0
3 | // function fn1() {
4 | // let a1 = 100
5 |
6 | // function fn2() {
7 | // let a2 = 200
8 |
9 | // function fn3() {
10 | // let a3 = 300
11 | // return a + a1 + a2 + a3
12 | // }
13 | // fn3()
14 | // }
15 | // fn2()
16 | // }
17 | // fn1()
18 |
19 | // // 闭包 函数作为返回值 —— 内存不会被释放
20 | // function create() {
21 | // let a = 100
22 | // return function () {
23 | // console.log(a)
24 | // }
25 | // }
26 | // let fn = create()
27 | // let a = 200
28 | // fn() // 100
29 |
30 | function print(fn) {
31 | let a = 200
32 | fn()
33 | }
34 | let a = 100
35 | function fn() {
36 | console.log(a)
37 | }
38 | print(fn) // 100
--------------------------------------------------------------------------------
/ES6-10/vue-lesson/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // 必须配置, 固定语法
3 | devServer: {
4 | proxy: {
5 | '/user': {
6 | target: 'http://localhost:8081',
7 | pathRewrite: {
8 | '/user': '/src/mock/user.json'
9 | }
10 | },
11 | '/list': {
12 | target: 'http://localhost:8081',
13 | pathRewrite: {
14 | '/list': '/src/mock/list.json'
15 | }
16 | },
17 | '/proxy': {
18 | target: 'http://localhost:8081',
19 | pathRewrite: {
20 | '/proxy': '/src/mock/proxy.json'
21 | }
22 | },
23 | '/author': {
24 | target: 'http://localhost:8081',
25 | pathRewrite: {
26 | '/author': '/src/mock/author.json'
27 | }
28 | }
29 | }
30 | }
31 | }
--------------------------------------------------------------------------------
/fast-interview-code/css/04-bfc.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Document
8 |
19 |
20 |
21 |
22 |
23 |
某一段文字……
24 |
25 |
26 |
--------------------------------------------------------------------------------
/fast-interview-code/js-web-api/dom-2.js:
--------------------------------------------------------------------------------
1 | const div1 = document.getElementById('div1')
2 | const div2 = document.getElementById('div2')
3 |
4 | // 新建节点
5 | const newP = document.createElement('p')
6 | newP.innerHTML = 'this is newP'
7 | // 插入节点
8 | div1.appendChild(newP)
9 |
10 | // 移动节点
11 | const p1 = document.getElementById('p1')
12 | div2.appendChild(p1)
13 |
14 | // 获取父元素
15 | console.log( p1.parentNode )
16 |
17 | // 获取子元素列表
18 | const div1ChildNodes = div1.childNodes
19 | console.log( div1.childNodes )
20 | const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
21 | if (child.nodeType === 1) {
22 | return true
23 | }
24 | return false
25 | })
26 | console.log('div1ChildNodesP', div1ChildNodesP)
27 |
28 | div1.removeChild( div1ChildNodesP[0] )
29 |
--------------------------------------------------------------------------------
/ES6-10/vue-lesson/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
25 |
26 |
36 |
--------------------------------------------------------------------------------
/fast-interview-code/prod-env/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
运行环境 演示
8 |
9 |
10 |
一段文字 1
11 |
一段文字 2
12 |
一段文字 3
13 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/test0621.js:
--------------------------------------------------------------------------------
1 | const waitFor = (ms) => new Promise(r => setTimeout(r, ms));
2 |
3 | // function func() {
4 | // [1, 2, 3].forEach(async (num) => {
5 | // await waitFor(1000);
6 | // console.log(num);
7 | // });
8 | // console.log('Done');
9 | // }
10 | // async function func() {
11 | // const array = [1, 2, 3];
12 | // for (let index = 0; index < array.length; index++) {
13 | // await waitFor(1000);
14 | // console.log(index);
15 | // }
16 | // console.log('Done');
17 | // }
18 | // func()
19 |
20 | // const waitFor = (ms) => new Promise(r => setTimeout(r, ms));
21 | // [1, 2, 3].forEach(async (num) => {
22 | // await waitFor(1000);
23 | // console.log(num);
24 | // });
25 | // console.log('Done');
26 |
27 | // function waitFor(foo, ms) {
28 | // return new Promise((r, s) => setInterval(foo, ms));
29 | // }
--------------------------------------------------------------------------------
/fast-interview-code/webpack-demo/webpack.prod.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 |
4 | module.exports = {
5 | mode: 'production',
6 | entry: path.join(__dirname, 'src', 'index'),
7 | output: {
8 | filename: 'bundle.[contenthash].js',
9 | path: path.join(__dirname, 'dist')
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.js$/,
15 | loader: ['babel-loader'],
16 | include: path.join(__dirname, 'src'),
17 | exclude: /node_modules/
18 | },
19 | ]
20 | },
21 | plugins: [
22 | new HtmlWebpackPlugin({
23 | template: path.join(__dirname, 'src', 'index.html'),
24 | filename: 'index.html'
25 | })
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson2-14.js:
--------------------------------------------------------------------------------
1 | // import name, { addr as addr2, arr } from './lesson2-14-mod'
2 | // console.log(name, addr2, arr)
3 |
4 | // import name2 from './lesson2-14-mod'
5 | // console.log(name2)
6 |
7 | // 导入函数
8 | import { say, run } from './lesson2-14-mod'
9 | say('hello world')
10 | run()
11 |
12 | // 导入对象
13 | // import obj from './lesson2-14-mod'
14 | // let { data, des } = obj
15 | // console.log(data, des)
16 |
17 | // 导入类
18 | // // import { Test } from './lesson2-14-mod'
19 | // import Test from './lesson2-14-mod'
20 | // let test = new Test()
21 | // console.log(test.id)
22 |
23 | // 批量导入
24 | // import * as Mod from './lesson2-14-mod'
25 | // let test = new Mod.Test()
26 | // console.log(test.id)
27 | // let animal = new Mod.Animal()
28 | // console.log(animal.name)
29 | // let people = new Mod.default()
30 | // console.log(people.id)
31 |
--------------------------------------------------------------------------------
/fast-interview-code/myTest/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Document
8 |
9 |
10 |
11 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/fast-interview-code/prod-env/throttle.js:
--------------------------------------------------------------------------------
1 | const div1 = document.getElementById('div1')
2 |
3 | // let timer = null
4 | // div1.addEventListener('drag', function (e) {
5 | // if (timer) {
6 | // return
7 | // }
8 | // timer = setTimeout(() => {
9 | // console.log(e.offsetX, e.offsetY)
10 |
11 | // timer = null
12 | // }, 100)
13 | // })
14 |
15 | // 节流
16 | function throttle(fn, delay = 100) {
17 | let timer = null
18 |
19 | return function () {
20 | if (timer) {
21 | return
22 | }
23 | timer = setTimeout(() => {
24 | fn.apply(this, arguments)
25 | timer = null
26 | }, delay)
27 | }
28 | }
29 |
30 | div1.addEventListener('drag', throttle(function (e) {
31 | console.log(e.offsetX, e.offsetY)
32 | }))
33 |
34 | div1.addEventListener('drag', function(event) {
35 |
36 | })
37 |
--------------------------------------------------------------------------------
/fast-interview-code/prod-env/debounce.js:
--------------------------------------------------------------------------------
1 | const input1 = document.getElementById('input1')
2 |
3 | // let timer = null
4 | // input1.addEventListener('keyup', function () {
5 | // if (timer) {
6 | // clearTimeout(timer)
7 | // }
8 | // timer = setTimeout(() => {
9 | // // 模拟触发 change 事件
10 | // console.log(input1.value)
11 |
12 | // // 清空定时器
13 | // timer = null
14 | // }, 500)
15 | // })
16 |
17 | // 防抖
18 | function debounce(fn, delay = 500) {
19 | // timer 是闭包中的
20 | let timer = null
21 |
22 | return function () {
23 | if (timer) {
24 | clearTimeout(timer)
25 | }
26 | timer = setTimeout(() => {
27 | fn.apply(this, arguments)
28 | timer = null
29 | }, delay)
30 | }
31 | }
32 |
33 | input1.addEventListener('keyup', debounce(function (e) {
34 | console.log(e.target)
35 | console.log(input1.value)
36 | }, 600))
37 |
--------------------------------------------------------------------------------
/fast-interview-code/css/12-rem.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
rem 演示
8 |
18 |
19 |
20 |
21 |
rem 1
22 |
rem 1
23 |
rem 1
24 |
25 |
26 | this is div1
27 |
28 |
29 | this is div2
30 |
31 |
32 | this is div3
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/fast-interview-code/js-web-api/dom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
dom 演示
8 |
9 |
17 |
18 |
19 |
20 |
一段文字 1
21 |
一段文字 2
22 |
一段文字 3
23 |
24 |
25 |
26 |
27 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson2-7.js:
--------------------------------------------------------------------------------
1 | // const a = 20
2 | // const b = 10
3 | // const c = 'javascript'
4 |
5 | // // const str = 'my age is ' + (a + b) + ' i love' + c
6 | // const str = `my age is ${a + b} i love ${c}`
7 | // console.log(str)
8 |
9 | // const retailPrice = 20
10 | // const wholeSalePrice = 16
11 | // const type = 'retail'
12 | // let showTxt = ''
13 | // if (type === 'retail') {
14 | // showTxt = '单价是：' + retailPrice
15 | // } else {
16 | // showTxt = '批发价是：' + wholeSalePrice
17 | // }
18 | // console.log(showTxt)
19 |
20 | function Price (strings, type) {
21 | let s1 = strings[0]
22 | const retailPrice = 20
23 | const wholeSalePrice = 16
24 | let showTxt = ''
25 | if (type === 'retail') {
26 | showTxt = '单价是：' + retailPrice
27 | } else {
28 | showTxt = '批发价是：' + wholeSalePrice
29 | }
30 | return `${s1}${showTxt}`
31 | }
32 | let showTxt = Price`您此次的${'retail'}`
33 | console.log(showTxt)
34 |
35 | let s1 = `我是第一行
36 | 我是第二行`
37 | console.log(s1)
38 |
--------------------------------------------------------------------------------
/JavaScript_code/26.面向对象的拖拽.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
面对对象的拖拽
7 |
8 |
25 |
26 |
27 |
33 |
34 |
35 |
36 |
普通拖拽
37 |
限制范围的拖拽
38 |
39 |
40 |
--------------------------------------------------------------------------------
/JavaScript_code/lib/LimitDrag.js:
--------------------------------------------------------------------------------
1 | // 继承属性
2 | function LimitDrag(id) {
3 | Drag.call(this, id);
4 | }
5 | // 继承原型
6 | for (var i in Drag.prototype) {
7 | LimitDrag.prototype[i] = Drag.prototype[i];
8 | }
9 |
10 | LimitDrag.prototype.mouseMove = function(ev) {
11 | // 不断获取Event 对象，坐标才会不断更新
12 | var ev = event||ev;
13 | // console.log('可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
14 | // div位置 = 鼠标可视区新的位置 - 鼠标与div的距离
15 | var l = ev.clientX - this.disX;
16 | var t = ev.clientY - this.disY;
17 | if (l < 0) {
18 | l = 0;
19 | } else if (l > document.documentElement.clientWidth - this.oDiv.offsetWidth) {
20 | l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
21 | }
22 | if ( t < 0) {
23 | t = 0;
24 | } else if (t > document.documentElement.clientHeight - this.oDiv.offsetHeight) {
25 | t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
26 | }
27 | this.oDiv.style.top = t + 'px';
28 | this.oDiv.style.left = l + 'px';
29 | }
--------------------------------------------------------------------------------
/fast-interview-code/js-base/deepClone.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 深拷贝
3 | */
4 |
5 | const obj1 = {
6 | age: 20,
7 | name: 'xxx',
8 | address: {
9 | city: 'beijing'
10 | },
11 | arr: ['a', 'b', 'c']
12 | }
13 |
14 | const obj2 = deepClone(obj1)
15 | obj2.address.city = 'shanghai'
16 | obj2.arr[0] = 'a1'
17 | console.log(obj1.address.city)
18 | console.log(obj1.arr[0])
19 |
20 | /**
21 | * 深拷贝
22 | * @param {Object} obj 要拷贝的对象
23 | */
24 | function deepClone(obj = {}) {
25 | if (typeof obj !== 'object' || obj == null) {
26 | // obj 是 null ，或者不是对象和数组，直接返回
27 | return obj
28 | }
29 |
30 | // 初始化返回结果
31 | let result
32 | if (obj instanceof Array) {
33 | result = []
34 | } else {
35 | result = {}
36 | }
37 |
38 | for (let key in obj) {
39 | // 保证 key 不是原型的属性
40 | if (obj.hasOwnProperty(key)) {
41 | // 递归调用！！！
42 | result[key] = deepClone(obj[key])
43 | }
44 | }
45 |
46 | // 返回结果
47 | return result
48 | }
49 |
--------------------------------------------------------------------------------
/fast-interview-code/js-base/class-demo-2.js:
--------------------------------------------------------------------------------
1 | // 父类
2 | class People {
3 | constructor(name) {
4 | this.name = name
5 | }
6 | eat() {
7 | console.log(`${this.name} eat something`)
8 | }
9 | }
10 |
11 | // 子类
12 | class Student extends People {
13 | constructor(name, number) {
14 | super(name)
15 | this.number = number
16 | }
17 | sayHi() {
18 | console.log(`姓名 ${this.name} 学号 ${this.number}`)
19 | }
20 | }
21 |
22 | // 子类
23 | class Teacher extends People {
24 | constructor(name, major) {
25 | super(name)
26 | this.major = major
27 | }
28 | teach() {
29 | console.log(`${this.name} 教授 ${this.major}`)
30 | }
31 | }
32 |
33 | // 实例
34 | const xialuo = new Student('夏洛', 100)
35 | console.log(xialuo.name)
36 | console.log(xialuo.number)
37 | xialuo.sayHi()
38 | xialuo.eat()
39 |
40 | // 实例
41 | const wanglaoshi = new Teacher('王老师', '语文')
42 | console.log(wanglaoshi.name)
43 | console.log(wanglaoshi.major)
44 | wanglaoshi.teach()
45 | wanglaoshi.eat()
46 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/app.js:
--------------------------------------------------------------------------------
1 | import Koa from 'koa'
2 | import path from 'path'
3 | import BodyParser from 'koa-bodyparser'
4 | import Views from 'koa-ejs'
5 | import Static from 'koa-static'
6 | import webpackConfig from './webpack.config.babel.js'
7 | import webpack from 'webpack'
8 | import webpackDevMiddleware from 'koa-webpack-dev-middleware'
9 | import webpackHotMiddleware from 'koa-webpack-hot-middleware'
10 | import Users from './routes/user.js'
11 |
12 | const app = new Koa()
13 |
14 | Views(app, {
15 | root: path.join(__dirname, 'views'),
16 | layout: 'layout',
17 | viewExt: 'ejs',
18 | cache: false,
19 | debug: false
20 | })
21 |
22 | const compiler = webpack(webpackConfig)
23 |
24 | const wdm = webpackDevMiddleware(compiler, {
25 | noInfo: true
26 | // publicPath: config.output.publicPath
27 | })
28 | app.use(wdm)
29 | app.use(webpackHotMiddleware(compiler))
30 | app.use(Static(path.join(__dirname, 'static')))
31 | app.use(BodyParser())
32 |
33 | app.use(Users.routes()).use(Users.allowedMethods())
34 | app.listen(8080)
35 |
36 | global.console.log(`server is listen, http://localhost:8080`)
--------------------------------------------------------------------------------
/fast-interview-code/webpack-demo/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 |
4 | module.exports = {
5 | // mode 可选 development 或 production ，默认为后者
6 | // production 会默认压缩代码并进行其他优化（如 tree shaking）
7 | mode: 'development',
8 | entry: path.join(__dirname, 'src', 'index'),
9 | output: {
10 | filename: 'bundle.js',
11 | path: path.join(__dirname, 'dist')
12 | },
13 | module: {
14 | rules: [
15 | {
16 | test: /\.js$/,
17 | loader: ['babel-loader'],
18 | include: path.join(__dirname, 'src'),
19 | exclude: /node_modules/
20 | },
21 | ]
22 | },
23 | plugins: [
24 | new HtmlWebpackPlugin({
25 | template: path.join(__dirname, 'src', 'index.html'),
26 | filename: 'index.html'
27 | })
28 | ],
29 | devServer: {
30 | port: 3000,
31 | contentBase: path.join(__dirname, 'dist'), // 根目录
32 | open: true, // 自动打开浏览器
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/fast-interview-code/css/08-定位.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
absote relative 定位问题
8 |
31 |
32 |
33 |
34 |
absolute 和 relative 定位问题
35 |
36 |
37 | this is absolute
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/fast-interview-code/js-web-api/dom-1.js:
--------------------------------------------------------------------------------
1 | // const div1 = document.getElementById('div1')
2 | // console.log('div1', div1)
3 |
4 | // const divList = document.getElementsByTagName('div') // 集合
5 | // console.log('divList.length', divList.length)
6 | // console.log('divList[1]', divList[1])
7 |
8 | // const containerList = document.getElementsByClassName('container') // 集合
9 | // console.log('containerList.length', containerList.length)
10 | // console.log('containerList[1]', containerList[1])
11 |
12 | // const pList = document.querySelectorAll('p')
13 | // console.log('pList', pList)
14 |
15 | // const pList = document.querySelectorAll('p')
16 | // const p1 = pList[0]
17 |
18 | // // property 形式
19 | // p1.style.width = '100px'
20 | // console.log( p1.style.width )
21 | // p1.className = 'red'
22 | // console.log( p1.className )
23 | // console.log(p1.nodeName)
24 | // console.log(p1.nodeType) // 1
25 |
26 | // // attribute
27 | // p1.setAttribute('data-name', 'imooc')
28 | // console.log( p1.getAttribute('data-name') )
29 | // p1.setAttribute('style', 'font-size: 50px;')
30 | // console.log( p1.getAttribute('style') )
31 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson4-2.js:
--------------------------------------------------------------------------------
1 | let grade = {
2 | 'lilei': 95,
3 | 'hanmei': 97,
4 | 'lisi': 99
5 | }
6 |
7 | // Iterator方式遍历
8 | // grade[Symbol.iterator] = function () {
9 | // let All = this
10 | // let keys = Reflect.ownKeys(grade)
11 | // let values = []
12 | // console.log(All, keys, values.length, '内部数据')
13 | // return {
14 | // next () {
15 | // if (!values.length) {
16 | // if (keys.length - 1) {
17 | // values.push(All[keys[0]])
18 | // keys.shift()
19 | // // console.log(values, values.length, All[keys[0]], keys, '内部')
20 | // }
21 | // }
22 | // return {
23 | // done: !values.length,
24 | // value: values.shift()
25 | // }
26 | // }
27 | // }
28 | // }
29 | // let result = []
30 | // for (let v of grade) {
31 | // result.push(v)
32 | // }
33 | // console.log(result)
34 |
35 | // ES6方式遍历
36 | // let r = []
37 | // for (let [, v] of Object.entries(grade)) {
38 | // r.push(v)
39 | // }
40 | // console.log(r)
41 |
42 | // ES8方式
43 | console.log(Object.keys(grade))
44 | console.log(Object.values(grade))
45 | console.log(Object.entries(grade))
46 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson5-4.js:
--------------------------------------------------------------------------------
1 | // 正则后面加 s 增强点的匹配能力 \
2 | // 四字节字符则加 u, ES6中已经讲过
3 | // console.log(/foo.bar/s.test('foo\nbar'))
4 | // console.log(/foo.bar/.test('foo\nbar'))
5 |
6 | // // 是否启用 dotAll 模式
7 | // const re = /foo.bar/sgiu
8 | // console.log(re.dotAll)
9 | // // 查看修饰符
10 | // console.log(re.flags)
11 |
12 | // 命名分组捕获
13 | // // console.log('12-2019-06-07'.match(/(\d{4})-(\d{2})-(\d{2})/))
14 |
15 | // const t = '12-2019-06-07'.match(/(?
\d{4})-(?\d{2})-(?\d{2})/)
16 | // // console.log(t[1])
17 | // // console.log(t[2])
18 | // // console.log(t[3])
19 | // console.log(t)
20 | // console.log(t.groups.year, t.groups.mouth, t.groups.day)
21 |
22 | // 先行断言
23 | let test = 'hello world'
24 | console.log(test.match(/hello(?=\sworld)/))
25 | // 后行断言
26 | console.log(test.match(/(?<=hello\s)world/))
27 |
28 | // 1. 请把 `'$foo %foo foo'`字符串中前面是$符号的foo 替换成bar
29 | const re = /(?<=\$)foo/
30 | let str = '$foo %foo foo'
31 | // console.log(re.test(str))
32 | str = str.replace(re, 'bar')
33 | console.log(str)
34 |
35 | // 2. 请提取 `'$1 is worth about ￥123'`
36 | const re2 = /(?<=\$)\d/
37 | let str2 = '$1 is worth about ￥123'
38 | str2 = str2.match(re2)
39 | console.log(str2)
40 |
--------------------------------------------------------------------------------
/fast-interview-code/css/07-色子.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | flex 画骰子
8 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/JavaScript_code/28.0.cookie基础与应用.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | cookie
6 |
8 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/JavaScript_code/19.1.键盘事件仿select下拉框.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 键盘事件和仿select下拉框
7 |
8 |
17 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/fast-interview-code/js-web-api/event.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 事件 演示
8 |
15 |
16 |
17 |
18 |
19 |
29 |
30 |
31 |
a1
32 |
a2
33 |
a3
34 |
a4
35 |
36 |
40 | this is div
41 |
42 |
43 |
--------------------------------------------------------------------------------
/fast-interview-code/questions-demo/isEqual.js:
--------------------------------------------------------------------------------
1 | // 判断是否是对象或数组
2 | function isObject(obj) {
3 | return typeof obj === 'object' && obj !== null
4 | }
5 | // 全相等（深度）
6 | function isEqual(obj1, obj2) {
7 | if (!isObject(obj1) || !isObject(obj2)) {
8 | // 值类型（注意，参与 equal 的一般不会是函数）
9 | return obj1 === obj2
10 | }
11 | if (obj1 === obj2) {
12 | return true
13 | }
14 | // 两个都是对象或数组，而且不相等
15 | // 1. 先取出 obj1 和 obj2 的 keys ，比较个数
16 | const obj1Keys = Object.keys(obj1)
17 | const obj2Keys = Object.keys(obj2)
18 | if (obj1Keys.length !== obj2Keys.length) {
19 | return false
20 | }
21 | // 2. 以 obj1 为基准，和 obj2 一次递归比较
22 | for (let key in obj1) {
23 | // 比较当前 key 的 val —— 递归！！！
24 | const res = isEqual(obj1[key], obj2[key])
25 | if (!res) {
26 | return false
27 | }
28 | }
29 | // 3. 全相等
30 | return true
31 | }
32 |
33 | // 测试
34 | const obj1 = {
35 | a: 100,
36 | b: {
37 | x: 100,
38 | y: 200
39 | }
40 | }
41 | const obj2 = {
42 | a: 100,
43 | b: {
44 | x: 100,
45 | y: 200
46 | }
47 | }
48 | // console.log( obj1 === obj2 )
49 | console.log( isEqual(obj1, obj2) )
50 |
51 | const arr1 = [1, 2, 3]
52 | const arr2 = [1, 2, 3, 4]
53 |
--------------------------------------------------------------------------------
/typescript/src/nowcoder/microTask.js:
--------------------------------------------------------------------------------
1 | // 面试题目一
2 |
3 | function events() {
4 | async function async1() {
5 | console.log('async1 start') // 2
6 | await async2()
7 | console.log('async1 end') // 7
8 | }
9 |
10 | async function async2() {
11 | console.log('async2') // 3
12 | }
13 |
14 | console.log('script start') // 1
15 |
16 | setTimeout(function () {
17 | console.log('setTimeout0')
18 | }, 0) // 12
19 |
20 | setTimeout(function () {
21 | console.log('setTimeout2')
22 | }, 300) // 13
23 |
24 | setImmediate(() => console.log('setImmediate')) // 11
25 |
26 | process.nextTick(() => console.log('nextTick1')) // 9
27 |
28 | async1() // 2
29 |
30 | new Promise(function (resolve) {
31 | console.log('promise1') // 4
32 | resolve()
33 | console.log('promise2') // 5
34 | }).then(function () {
35 | console.log('promise3') // 8
36 | })
37 |
38 | process.nextTick(() => console.log('nextTick2')) // 10
39 |
40 | console.log('script end') // 6
41 | }
42 | // events()
43 |
44 | /**
45 | * script start
46 | async1 start
47 | async2
48 | promise1
49 | promise2
50 | script end
51 | async1 end
52 | promise3
53 | nextTick1
54 | nextTick2
55 | setImmediate
56 | setTimeout0
57 | setTimeout2
58 | */
59 |
--------------------------------------------------------------------------------
/fast-interview-code/js-base/promise-demo.js:
--------------------------------------------------------------------------------
1 | function loadImg(src) {
2 | const p = new Promise(
3 | (resolve, reject) => {
4 | const img = document.createElement('img')
5 | img.onload = () => {
6 | resolve(img)
7 | }
8 | img.onerror = () => {
9 | const err = new Error(`图片加载失败 ${src}`)
10 | reject(err)
11 | }
12 | img.src = src
13 | }
14 | )
15 | return p
16 | }
17 |
18 | // const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
19 | // loadImg(url).then(img => {
20 | // console.log(img.width)
21 | // return img
22 | // }).then(img => {
23 | // console.log(img.height)
24 | // }).catch(ex => console.error(ex))
25 |
26 | const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
27 | const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'
28 |
29 | loadImg(url1).then(img1 => {
30 | console.log(img1.width)
31 | return img1 // 普通对象
32 | }).then(img1 => {
33 | console.log(img1.height)
34 | return loadImg(url2) // promise 实例
35 | }).then(img2 => {
36 | console.log(img2.width)
37 | return img2
38 | }).then(img2 => {
39 | console.log(img2.height)
40 | }).catch(ex => console.error(ex))
41 |
--------------------------------------------------------------------------------
/JavaScript_code/24.基础面对对象.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 面对对象基础
6 |
8 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/fast-interview-code/js-web-api/ajax.js:
--------------------------------------------------------------------------------
1 | // const xhr = new XMLHttpRequest()
2 | // xhr.open('GET', '/data/test.json', true)
3 | // xhr.onreadystatechange = function () {
4 | // if (xhr.readyState === 4) {
5 | // if (xhr.status === 200) {
6 | // // console.log(
7 | // // JSON.parse(xhr.responseText)
8 | // // )
9 | // alert(xhr.responseText)
10 | // } else if (xhr.status === 404) {
11 | // console.log('404 not found')
12 | // }
13 | // }
14 | // }
15 | // xhr.send(null)
16 |
17 | function ajax(url) {
18 | const p = new Promise((resolve, reject) => {
19 | const xhr = new XMLHttpRequest()
20 | xhr.open('GET', url, true)
21 | xhr.onreadystatechange = function () {
22 | if (xhr.readyState === 4) {
23 | if (xhr.status === 200) {
24 | resolve(
25 | JSON.parse(xhr.responseText)
26 | )
27 | } else if (xhr.status === 404 || xhr.status === 500) {
28 | reject(new Error('404 not found'))
29 | }
30 | }
31 | }
32 | xhr.send(null)
33 | })
34 | return p
35 | }
36 |
37 | const url = '/data/test.json'
38 | ajax(url)
39 | .then(res => console.log(res))
40 | .catch(err => console.error(err))
41 |
--------------------------------------------------------------------------------
/fast-interview-code/css/06-双飞翼布局.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 双飞翼布局
8 |
38 |
39 |
40 |
41 |
42 | this is main
43 |
44 |
46 | this is left
47 |
48 |
49 | this is right
50 |
51 |
52 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "koa2-es10",
3 | "version": "1.0.0",
4 | "description": "koa2-es development kit",
5 | "main": "index.js",
6 | "scripts": {
7 | "babel": "babel-node app.js",
8 | "start": "nodemon --exec npm run babel",
9 | "webpack": "webpack -w"
10 | },
11 | "repository": "git@github.com:cucygh/es-cli.git",
12 | "keywords": [
13 | "cuc_ygh"
14 | ],
15 | "author": "cuc_ygh",
16 | "license": "Apache-2.0",
17 | "dependencies": {
18 | "axios": "^0.18.0",
19 | "koa": "2.7.0",
20 | "koa-bodyparser": "4.2.1",
21 | "koa-ejs": "4.2.0",
22 | "koa-router": "7.4.0",
23 | "koa-static": "5.0.0"
24 | },
25 | "devDependencies": {
26 | "@babel/core": "7.4.4",
27 | "@babel/node": "7.2.2",
28 | "@babel/preset-env": "7.4.4",
29 | "eslint": "5.16.0",
30 | "eslint-config-standard": "12.0.0",
31 | "eslint-plugin-import": "2.17.2",
32 | "eslint-plugin-node": "9.0.1",
33 | "eslint-plugin-promise": "4.1.1",
34 | "eslint-plugin-standard": "4.0.0",
35 | "eventsource-polyfill": "0.9.6",
36 | "koa-webpack-dev-middleware": "2.0.2",
37 | "koa-webpack-hot-middleware": "1.0.3",
38 | "koa-webpack-middleware": "1.0.7",
39 | "koa2-webpack4-dev-middleware": "1.0.1",
40 | "nodemon": "1.19.0",
41 | "webpack": "4.31.0",
42 | "webpack-cli": "3.3.2"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson2-8.js:
--------------------------------------------------------------------------------
1 | // let arr = ['hello', 'world', 'three']
2 | // let [firstName, , surName] = arr
3 | // console.log(firstName, surName)
4 |
5 | // let [firstName,, thirdName] = new Set([1, 2, 3, 4])
6 | // console.log(firstName, thirdName)
7 |
8 | // // 修改内容
9 | // let user = {
10 | // name: 's',
11 | // surname: 't'
12 | // };
13 | // [user.name, user.surname] = [1, 2]
14 | // console.log(user)
15 | // for (let [k, v] of Object.entries(user)) {
16 | // // 隐式赋值，显式索引
17 | // console.log(k, v)
18 | // }
19 |
20 | // // 防止回收
21 | // let arr = [1, 2, 3, 3, 4, 5, 6, 7]
22 | // let [firstName, curName, ...last] = arr
23 | // console.log(firstName, curName, last)
24 |
25 | // // 无数据就是 未定义
26 | // let arr = []
27 | // // 解构赋值取决于里面有没有值
28 | // let [firstName, curName, ...last] = arr
29 | // console.log(firstName, curName, last)
30 |
31 | // Object 的解构赋值
32 | let options = {
33 | title: 'menu',
34 | width: 100,
35 | height: 200
36 | }
37 | let { title: title2, width = 130, height } = options
38 | let { title, ...last } = options
39 | console.log(title, last)
40 |
41 | // 多层结构的解构赋值
42 | // let options = {
43 | // size: {
44 | // width: 100,
45 | // height: 200
46 | // },
47 | // items: ['Cake', 'Donut'],
48 | // extra: true
49 | // }
50 | // let { size: { width, height }, items: [, item2], extra } = options
51 | // console.log(width, height, item2, extra)
52 |
--------------------------------------------------------------------------------
/ES6-10/vue-lesson/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-lesson",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "axios": "^0.21.2",
12 | "core-js": "^3.4.4",
13 | "vue": "^2.6.10"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^4.1.0",
17 | "@vue/cli-plugin-eslint": "^4.1.0",
18 | "@vue/cli-service": "^4.1.0",
19 | "babel-eslint": "^10.0.3",
20 | "eslint": "^6.8.0",
21 | "eslint-config-standard": "^14.1.0",
22 | "eslint-plugin-import": "^2.20.0",
23 | "eslint-plugin-node": "^11.0.0",
24 | "eslint-plugin-promise": "^4.2.1",
25 | "eslint-plugin-standard": "^4.0.1",
26 | "eslint-plugin-vue": "^6.1.2",
27 | "vue-template-compiler": "^2.6.10"
28 | },
29 | "eslintConfig": {
30 | "root": true,
31 | "env": {
32 | "node": true
33 | },
34 | "extends": [
35 | "plugin:vue/essential",
36 | "eslint:recommended"
37 | ],
38 | "rules": {},
39 | "parserOptions": {
40 | "parser": "babel-eslint"
41 | }
42 | },
43 | "browserslist": [
44 | "> 1%",
45 | "last 2 versions"
46 | ],
47 | "description": "## Project setup ``` npm install ```",
48 | "main": ".eslintrc.js",
49 | "author": "",
50 | "license": "ISC"
51 | }
52 |
--------------------------------------------------------------------------------
/JavaScript_code/lib/move.js:
--------------------------------------------------------------------------------
1 |
2 | // 封装获取计算后元素样式函数，返回小数
3 | function getStyle(obj, name) {
4 | if (obj.currentStyle) {
5 | return obj.currentStyle[name];
6 | } else {
7 | return getComputedStyle(obj, '') [name];
8 | }
9 | }
10 | // 任意值运动框架
11 | function startMove(obj, name, iTarget ) {
12 | clearInterval(obj.timer);
13 | obj.timer = setInterval(move, 30);
14 | function move() {
15 | var current = 0;
16 | if (name === 'opacity') {
17 | // 用 parseFloat 保留小数并去掉后面 px ，从左至右提取数字，遇到不是数字跳出
18 | // Math.round() 四舍五入取整
19 | current = Math.round(parseFloat(getStyle(obj, name))*100);
20 | } else {
21 | // 用 parseInt 去掉后面 px ，从左至右提取数字，遇到不是数字跳出
22 | current = parseInt(getStyle(obj, name));
23 | }
24 | var speed = (iTarget - current)/3;
25 | if (speed < 0) {
26 | speed = Math.floor(speed);
27 | } else {
28 | speed = Math.ceil(speed);
29 | }
30 | if (iTarget === current) {
31 | clearInterval(obj.timer);
32 | } else {
33 | if (name === 'opacity') {
34 | obj.style[name] = (current + speed)/100;
35 | obj.style.filter = "alpha("+[name]+ "=" + (current + speed) + ")";
36 | } else {
37 | obj.style[name] = current + speed + 'px';
38 | }
39 | }
40 | // console.log('iTarget',iTarget,'current',current,'getStyle',getStyle(obj, name),speed)
41 | }
42 | }
--------------------------------------------------------------------------------
/JavaScript_code/22.0.事件绑定.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 事件绑定
7 |
8 |
16 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/JavaScript_code/9.1.流程控制和JSON.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 程序流程控制
6 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/fast-interview-code/css/09-水平对齐.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 水平对齐
8 |
39 |
40 |
41 |
42 | 一段文字
43 |
44 |
45 |
46 |
47 | this is block item
48 |
49 |
52 |
53 | this is absolute item
54 |
55 |
3 |
6 |
7 |
8 |
9 |
用于测试 margin top bottom 的负数情况
41 |
42 |
43 | this is item 1
44 |
45 |
46 | this is item 2
47 |
48 |
用于测试 margin left right 的负数情况
51 |
52 |
53 | this is item 3
54 |
55 |
56 | this is item 4
57 |
58 |
59 |
60 |
61 | :
62 |
63 |
64 | :
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/JavaScript_code/22.3.鼠标滚轮滚动.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 事件绑定与鼠标滚轮
7 |
8 |
16 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/JavaScript_code/21.0.阻止默认事件自定义右键菜单限定输入框.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 默认事件
7 |
8 |
17 |
52 |
53 |
54 |
55 |
56 |
57 |
123
58 | 456
59 | 789
60 | 123
61 | 456
62 | 789
63 | 123
64 | 456
65 | 789
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/JavaScript_code/28.1.登陆后cookie读取用户名.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 28.1.登陆后cookie读取用户名
6 |
8 |
44 |
45 |
46 |
51 |
52 |
--------------------------------------------------------------------------------
/fast-interview-code/css/05-圣杯布局.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 圣杯布局
8 |
54 |
55 |
56 |
57 |
58 |
this is center
59 |
this is left
60 |
this is right
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson2-14-mod.js:
--------------------------------------------------------------------------------
1 | // export const name = 'hello'
2 | // export let addr = 'beijing'
3 | // export let arr = [1, 2, 3]
4 |
5 | // const name = 'hello3'
6 | // let addr = 'Beijing'
7 | // let arr = [1, 2, 3]
8 |
9 | // export default name
10 | // export {
11 | // addr,
12 | // arr
13 | // }
14 |
15 | // 导出函数
16 | export function say(content) {
17 | console.log(content)
18 | }
19 |
20 | export function run() {
21 | console.log('I am running')
22 | }
23 |
24 | // const say = (content) => {
25 | // console.log(content)
26 | // }
27 | // const run = () => {
28 | // console.log('I am running')
29 | // }
30 | // export default say
31 | // export {
32 | // run
33 | // }
34 |
35 | // 导出对象
36 | // export default {
37 | // code: 0,
38 | // message: 'success'
39 | // }
40 |
41 | // const data = {
42 | // code: 1,
43 | // message: 'success'
44 | // }
45 | // const des = {
46 | // age: 20,
47 | // addr: 'Beijing'
48 | // }
49 |
50 | // export default {
51 | // data,
52 | // des
53 | // }
54 |
55 | // 导出类
56 | // class Test {
57 | // constructor () {
58 | // this.id = 2
59 | // }
60 | // }
61 | // export default Test
62 | // export {
63 | // Test
64 | // }
65 |
66 | // export default class Test {
67 | // constructor () {
68 | // this.id = 2
69 | // }
70 | // }
71 |
72 | // export default class {
73 | // constructor () {
74 | // this.id = 5
75 | // }
76 | // }
77 |
78 | // export class Test {
79 | // constructor () {
80 | // this.id = 2
81 | // }
82 | // }
83 |
84 | // 导出多个类,批量导入
85 | // export class Test {
86 | // constructor () {
87 | // this.id = 6
88 | // }
89 | // }
90 | // export class Animal {
91 | // constructor () {
92 | // this.name = 'dog'
93 | // }
94 | // }
95 |
96 | // export default class Peiple {
97 | // constructor () {
98 | // this.id = 123
99 | // }
100 | // }
--------------------------------------------------------------------------------
/fast-interview-code/js-异步进阶/05-微任务和宏任务.md:
--------------------------------------------------------------------------------
1 | # 宏任务和微任务
2 |
3 | ## 介绍
4 |
5 | - 宏任务：setTimeout setInterval DOM 事件
6 | - 微任务：Promise（对于前端来说）
7 | - 微任务比宏任务执行的更早
8 |
9 | ```js
10 | console.log(100)
11 | setTimeout(() => {
12 | console.log(200)
13 | })
14 | Promise.resolve().then(() => {
15 | console.log(300)
16 | })
17 | console.log(400)
18 | // 100 400 300 200
19 | ```
20 |
21 | ## event loop 和 DOM 渲染
22 |
23 | 再次回顾 event loop 的过程
24 |
25 | - 每一次 call stack 结束，都会触发 DOM 渲染（不一定非得渲染，就是给一次 DOM 渲染的机会！！！）
26 | - 然后再进行 event loop
27 |
28 | ```js
29 | const $p1 = $('一段文字
')
30 | const $p2 = $('一段文字
')
31 | const $p3 = $('一段文字
')
32 | $('#container')
33 | .append($p1)
34 | .append($p2)
35 | .append($p3)
36 |
37 | console.log('length', $('#container').children().length )
38 | alert('本次 call stack 结束，DOM 结构已更新，但尚未触发渲染')
39 | // （alert 会阻断 js 执行，也会阻断 DOM 渲染，便于查看效果）
40 | // 到此，即本次 call stack 结束后（同步任务都执行完了），浏览器会自动触发渲染，不用代码干预
41 |
42 | // 另外，按照 event loop 触发 DOM 渲染时机，setTimeout 时 alert ，就能看到 DOM 渲染后的结果了
43 | setTimeout(function () {
44 | alert('setTimeout 是在下一次 Call Stack ，就能看到 DOM 渲染出来的结果了')
45 | })
46 | ```
47 |
48 | ## 宏任务和微任务的区别
49 |
50 | - 宏任务：DOM 渲染后再触发
51 | - 微任务：DOM 渲染前会触发
52 |
53 | ```js
54 | // 修改 DOM
55 | const $p1 = $('一段文字
')
56 | const $p2 = $('一段文字
')
57 | const $p3 = $('一段文字
')
58 | $('#container')
59 | .append($p1)
60 | .append($p2)
61 | .append($p3)
62 |
63 | // // 微任务：渲染之前执行（DOM 结构已更新）
64 | // Promise.resolve().then(() => {
65 | // const length = $('#container').children().length
66 | // alert(`micro task ${length}`)
67 | // })
68 |
69 | // 宏任务：渲染之后执行（DOM 结构已更新）
70 | setTimeout(() => {
71 | const length = $('#container').children().length
72 | alert(`macro task ${length}`)
73 | })
74 | ```
75 |
76 | 再深入思考一下：为何两者会有以上区别，一个在渲染前，一个在渲染后？
77 |
78 | - 微任务：ES 语法标准之内，JS 引擎来统一处理。即，不用浏览器有任何关于，即可一次性处理完，更快更及时。
79 | - 宏任务：ES 语法没有，JS 引擎不处理，浏览器（或 nodejs）干预处理。
80 |
--------------------------------------------------------------------------------
/JavaScript_code/7.变量类型转换.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 变量类型转换
6 |
7 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/static/index.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 | a,
6 | abbr,
7 | acronym,
8 | address,
9 | applet,
10 | article,
11 | aside,
12 | audio,
13 | b,
14 | big,
15 | blockquote,
16 | body,
17 | canvas,
18 | caption,
19 | center,
20 | cite,
21 | code,
22 | dd,
23 | del,
24 | details,
25 | dfn,
26 | div,
27 | dl,
28 | dt,
29 | em,
30 | embed,
31 | fieldset,
32 | figcaption,
33 | figure,
34 | footer,
35 | form,
36 | h1,
37 | h2,
38 | h3,
39 | h4,
40 | h5,
41 | h6,
42 | header,
43 | hgroup,
44 | html,
45 | i,
46 | iframe,
47 | img,
48 | ins,
49 | kbd,
50 | label,
51 | legend,
52 | li,
53 | mark,
54 | menu,
55 | nav,
56 | object,
57 | ol,
58 | output,
59 | p,
60 | pre,
61 | q,
62 | ruby,
63 | s,
64 | samp,
65 | section,
66 | small,
67 | span,
68 | strike,
69 | strong,
70 | sub,
71 | summary,
72 | sup,
73 | table,
74 | tbody,
75 | td,
76 | tfoot,
77 | th,
78 | thead,
79 | time,
80 | tr,
81 | tt,
82 | u,
83 | ul,
84 | var,
85 | video {
86 | margin: 0;
87 | padding: 0;
88 | border: 0;
89 | font-size: 100%;
90 | font: inherit;
91 | vertical-align: baseline;
92 | }
93 | /* HTML5 display-role reset for older browsers */
94 | article,
95 | aside,
96 | details,
97 | figcaption,
98 | figure,
99 | footer,
100 | header,
101 | hgroup,
102 | menu,
103 | nav,
104 | section {
105 | display: block;
106 | }
107 |
108 | body {
109 | line-height: 1;
110 | }
111 |
112 | ol,
113 | ul {
114 | list-style: none;
115 | }
116 |
117 | blockquote,
118 | q {
119 | quotes: none;
120 | }
121 |
122 | blockquote:after,
123 | blockquote:before,
124 | q:after,
125 | q:before {
126 | content: '';
127 | content: none;
128 | }
129 |
130 | table {
131 | border-collapse: collapse;
132 | border-spacing: 0;
133 | }
134 |
135 | body,
136 | html {
137 | display: flex;
138 | flex-direction: column;
139 | align-items: center;
140 | justify-content: center;
141 | }
142 |
143 | .inner {
144 | text-align: center;
145 | }
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.tabSize": 2,
3 | "editor.wordWrap": "on",
4 | "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
5 | "eslint.validate": ["javascript", "html", "vue", "typescript"],
6 | "eslint.format.enable": true,
7 | "eslint.options": {
8 | "overrideConfig": {
9 | "env": {
10 | "browser": true,
11 | "node": true,
12 | "es2021": true
13 | },
14 | "parserOptions": {
15 | "ecmaFeatures": {
16 | "jsx": true
17 | },
18 | "ecmaVersion": "latest",
19 | "sourceType": "module"
20 | },
21 | "rules": {
22 | "no-debugger": "off"
23 | }
24 | }
25 | },
26 | "editor.formatOnSave": true,
27 | "html.format.indentHandlebars": true,
28 | "html.format.preserveNewLines": true,
29 | "editor.codeActionsOnSave": {
30 | "source.organizeImports": true,
31 | "source.fixAll": true,
32 | "source.fixAll.eslint": false
33 | },
34 | "emmet.includeLanguages": {
35 | "vue": "html",
36 | "javascript": "html"
37 | },
38 | "[vue]": {
39 | "editor.defaultFormatter": "octref.vetur"
40 | },
41 | "[html]": {
42 | "editor.defaultFormatter": "esbenp.prettier-vscode"
43 | },
44 | "editor.defaultFormatter": "esbenp.prettier-vscode",
45 | "[javascript]": {
46 | "editor.defaultFormatter": "esbenp.prettier-vscode"
47 | },
48 | "[jsonc]": {
49 | "editor.defaultFormatter": "esbenp.prettier-vscode"
50 | },
51 | "[css]": {
52 | "editor.defaultFormatter": "esbenp.prettier-vscode"
53 | },
54 | "[typescript]": {
55 | "editor.defaultFormatter": "esbenp.prettier-vscode"
56 | },
57 | "[json]": {
58 | "editor.defaultFormatter": "esbenp.prettier-vscode"
59 | },
60 | // vue backup
61 | "vetur.format.defaultFormatterOptions": {
62 | "prettier": {
63 | "semi": true,
64 | "printWidth": 120,
65 | "singleQuote": false,
66 | "trailingComma": "aways",
67 | "arrowParens": "aways"
68 | }
69 | },
70 | "vetur.format.defaultFormatter.js": "prettier-eslint",
71 | "vetur.format.defaultFormatter.html": "js-beautify-html"
72 | }
73 |
--------------------------------------------------------------------------------
/JavaScript_code/css/reset.css:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | /*
3 | Document : CSS样式初始化
4 | Created on : 2016. 8. 7,09:41:00
5 | Author :
6 | Description:
7 | CSS样式表的初始化，全局样式设置。部分样式属性请根据具体页面重置其属性
8 | 导入方式： */
9 |
10 | /* reset */
11 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0} /* 初始化标签在所有浏览器中的margin、padding值 */
12 | fieldset,img {border:0 none} /* 重置fieldset（表单分组）、图片的边框为0*/
13 | dl,ul,ol,menu,li {list-style:none} /* 重置类表前导符号为onne,menu在HTML5中有效 */
14 | blockquote, q {quotes: none} /* 重置嵌套引用的引号类型 */
15 | blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} /* 重置嵌套引用*/
16 | input,select,textarea,button {vertical-align:middle;} /* 重置表单控件垂直居中*/
17 | button {border:0 none;background-color:transparent;cursor:pointer} /* 重置表单button按钮效果 */
18 | body {background:#fff} /* 重置body 页面背景为白色 */
19 | body,th,td,input,select,textarea,button {font-size:14px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#000} /* 重置页面文字属性 */
20 | a {color:#ccc;text-decoration:none} /* 重置链接a标签 */
21 | a:active, a:hover {text-decoration:none} /* 重置链接a标签的鼠标滑动效果 */
22 | address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal} /* 重置样式标签的样式 */
23 | caption {display:none;} /* 重置表格标题为隐藏 */
24 | table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;} /* 重置table属性 */
25 | img{vertical-align:top} /* 图片在当前行内的垂直位置 */
26 |
27 | /* 页面设置 */
28 |
29 | /* 取消a标签点击后的虚线框 */
30 | a {outline: none;}
31 | a:active {star:expression(this.onFocus=this.blur());}
32 |
33 | /* 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 */
34 | /*
35 | ::selection {color: #fff;background-color: #4C6E78;}
36 | ::-moz-selection {color: #fff;background-color: #4C6E78;}
37 | */
38 |
39 | /*清除浮动*/
40 | .clear{clear: both;}
41 |
42 | /*清除浮动--推荐使用*/
43 | .clearfix:before,.clearfix:after{content: '';display: table;}
44 | .clearfix:after{clear: both;}
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson2-4.js:
--------------------------------------------------------------------------------
1 | // function fn(x, y, z) {
2 | // if (y === undefined) {
3 | // y = 3
4 | // }
5 | // if (z === undefined) {
6 | // z = 4
7 | // }
8 | // return x + y + z
9 | // }
10 | // console.log(fn(2, 10, 30))
11 |
12 | // 没有参数的往前写，否则默认没参数的为字符串类型
13 | // function fn(x, y, z = x + y) {
14 | // // ES6中废弃arguments
15 | // // console.log(Array.from(arguments))
16 | // // fn.length 可以获取到定义过的没有默认值的参数个数
17 | // console.log(fn.length)
18 |
19 | // return x + y + z
20 | // }
21 | // console.log(fn(10, 10, 10))
22 | // console.log(fn(10, 10, undefined), 4, 12)
23 |
24 | // 怎么处理不确定参数？
25 | // ES5
26 | // function sum() {
27 | // let num = 0
28 | // Array.prototype.forEach.call(arguments, function (item) {
29 | // num += item * 1
30 | // })
31 | // return num
32 | // }
33 | // console.log(sum(1, 2, 3, 4))
34 |
35 | // ES6
36 | // function sum(base, ...nums) {
37 | // // "...nums" Rest parameter 用来获取所有参数：函数执行时的参数，是数组，参数可以分别使用
38 | // let num = 0
39 | // nums.forEach(function (item) {
40 | // num += item * 1
41 | // })
42 | // return num + base * 2
43 | // }
44 | // console.log(sum(1, 2, 3, 4))
45 |
46 | // rest参数的逆运算
47 | // ES5
48 | // function sum (x = 1, y = 2, z = 3) {
49 | // return x + y + z
50 | // }
51 | // let data = [1, 2, 3]
52 | // console.log(sum.apply(this, data))
53 | // ES6
54 | // spread
55 | // console.log(sum(...data))
56 |
57 | // let hello = (name, city) => {
58 | // console.log(name, 'hello', city)
59 | // }
60 | // hello('zhangsan', 'imooc')
61 | // // 只有一个参数省略括号
62 | // let hi = name => {
63 | // console.log(name)
64 | // }
65 | // hi('zhangsan')
66 | // // 后面是表达式，省略花括号
67 | // let sum = (x, y, z) => x + y + z
68 | // console.log(sum(1, 2, 3))
69 | // // 以对象返回数据，小括号相当于表达式，花括号是对象的
70 | // let sum2 = (x, y, z) => ({
71 | // x: x,
72 | // y: y,
73 | // z: z
74 | // })
75 | // console.log(sum2(1, 2, 3))
76 | // // webpack eval 让 this 指向了空对象
77 | // // ES6 中this 指向写函数时的对象
78 | // let test = {
79 | // name: 'test',
80 | // say: () => {
81 | // console.log(this.name)
82 | // }
83 | // }
84 | // test.say()
85 |
86 | let arr = Array.of(1, 2, 3, 4)
87 | arr.forEach((item) => {
88 | console.log(item)
89 | })
90 |
--------------------------------------------------------------------------------
/JavaScript_code/2.网页换肤.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
43 |
44 |
45 |
46 |
47 | 1
48 | 2
49 | 3
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | javascript:;
58 |
59 |
60 | 4
61 |
62 |
63 |
--------------------------------------------------------------------------------
/JavaScript_code/30.0.template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
13 |
14 |
56 |
57 |
65 |
66 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/JavaScript_code/21.1.基本拖拽.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 拖拽
7 |
8 |
16 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/fast-interview-code/css/10-垂直对齐.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 垂直对齐
8 |
64 |
65 |
66 |
67 | 一段文字
68 |
69 |
70 |
71 |
72 | this is item
73 |
74 |
77 |
78 | this is item
79 |
80 |
83 |
84 | this is item
85 |
86 |
88 |
89 |
90 |
91 |
94 |
95 |
--------------------------------------------------------------------------------
/typescript/src/utilityType.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unused-vars */
2 | enum Direction {
3 | up = 'up',
4 | left = 'left',
5 | right = 'right',
6 | down = 'down',
7 | }
8 |
9 | interface Facing {
10 | front: string
11 | back: string
12 | }
13 |
14 | type Dev = {
15 | html: string
16 | css: string
17 | }
18 |
19 | type DirectionType = keyof typeof Direction
20 |
21 | // Partial
22 | const directionPartial: Partial = 'down'
23 |
24 | // Readonly
25 | const directionReadonly: Readonly = {
26 | front: '1',
27 | back: '2',
28 | }
29 | // directionReadonly.back = 3
30 |
31 | // Record
32 | const directionRecord: Record = {
33 | right: '-90',
34 | left: '90',
35 | up: '180',
36 | down: '0',
37 | }
38 |
39 | const facingRecord: Partial> = {
40 | front: 'f',
41 | }
42 |
43 | // Pick
44 | // const directionPick: Pick = {
45 | // up: '180',
46 | // }
47 | enum KeysToBePickedFrom {
48 | KEY_ONE = 'Key One',
49 | KEY_TWO = 'Key Number Two',
50 | KEY_THREE = 'Another key n. 3',
51 | LAST_KEY = 'Here is the last Key',
52 | }
53 |
54 | type PickKey = Extract
55 |
56 | type Picked_KeysOfEnum = PickKey
57 |
58 | interface KeysPickedForType {
59 | keyone: Picked_KeysOfEnum
60 | }
61 |
62 | const picks: KeysPickedForType = {
63 | keyone: 'KEY_ONE', // KEY_ONE | LAST_KEY
64 | }
65 |
66 | // Omit
67 | const directionOmit: Omit = 'up' // 无效
68 | const directionOmit2: Omit = 'down' // 无效
69 | const facingOmit: Omit = {
70 | back: 'b',
71 | }
72 | const devOmit: Omit = { css: 'css' }
73 |
74 | // Exclude
75 | type UnionType = DirectionType | Facing | Dev
76 | const directionExclude: Exclude = 'down'
77 | const unionTypeExclude: Exclude = {
78 | html: 'html',
79 | css: 'css',
80 | }
81 | // const facingExclude: Exclude = {
82 | // back: 'b',
83 | // }
84 | // const devExclude: Exclude = { css: 'css' }
85 |
86 | // Extract
87 | type DirectionExtract = Extract
88 | const directionExtract: DirectionExtract = 'up'
89 | const unionTypeExtract: Extract = {
90 | html: 'html',
91 | css: 'css',
92 | }
93 |
--------------------------------------------------------------------------------
/JavaScript_code/12.创建插入删除元素.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | DOM创建插入删除元素
6 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
70 |
71 |
--------------------------------------------------------------------------------
/ES6-10/ES2019/js/lesson6-1.js:
--------------------------------------------------------------------------------
1 | // 0xD800-0xDFFF 字符无法编码成UTF-8, 而显示错误, 现在以非编码形式转义存在
2 | // console.log((JSON.stringify('\u{D800}')))
3 |
4 | // let arr = [1, [2, 3], [4, 5, [6, 7, [8, 9]]]]
5 |
6 | // flat扁平化, 按照指定深度递归遍历数组, 合并成一个新数组
7 | // console.log(arr.flat(3))
8 |
9 | // // map 对每个元素进行遍历 arr.map(item => item * 2)
10 | // arr.flatMap()
11 | // let arr = [[1], [2], [3]]
12 | // console.log(arr.map(item => item * 2).flat())
13 | // console.log(arr.flatMap(item => item * 2))
14 |
15 | // // string 字符串
16 | // let str = ' foo '
17 | // // console.log(str.replace(/^\s+|\s+$/g, '_'))
18 | // console.log(str.trimStart())
19 | // console.log(str.trimLeft())
20 | // console.log(str.trimRight())
21 | // console.log(str.trimEnd())
22 | // console.log(str.trim())
23 |
24 | // // matchAll 匹配
25 | // let str = `"foo" and "bar" and "baz"`
26 |
27 | // // ES5
28 | // function select (reg, str) {
29 | // const matches = []
30 | // while (true) {
31 | // const match = reg.exec(str)
32 | // if (match === null) {
33 | // break
34 | // }
35 | // matches.push(match[1])
36 | // }
37 | // return matches
38 | // }
39 |
40 | // console.log(select(/"([^"]*)"/g, str))
41 | // console.log(str.match(/"([^"]*)"/g))
42 |
43 | // // ES5
44 | // function select2 (reg, str) {
45 | // const matches = []
46 | // // replace 传入函数
47 | // str.replace(reg, function (all, first) {
48 | // matches.push(first)
49 | // })
50 | // return matches
51 | // }
52 |
53 | // console.log(select2(/"([^"]*)"/g, str))
54 |
55 | // // ES10
56 | // function select3 (reg, str) {
57 | // const matches = []
58 | // for (const match of str.matchAll(reg)) {
59 | // // console.log(match)
60 | // matches.push(match[1])
61 | // }
62 | // return matches
63 | // }
64 | // console.log(select3(/"([^"]*)"/g, str))
65 |
66 | // Object Array 转换
67 | const arr = [['foo', 1], ['bar', 2]]
68 | console.log(arr[1][1])
69 |
70 | const obj = Object.fromEntries(arr)
71 | console.log(obj.bar)
72 |
73 | // 案例2
74 | const obj2 = {
75 | a: 1,
76 | b: 2,
77 | g: 3
78 | }
79 | // 对象使用数组方法: Object.entries转换成数组, 解构赋值并过滤, Object.fromEntries转换回对象
80 | let res = Object.fromEntries(
81 | Object.entries(obj).filter(([key, val]) => key.length === 3)
82 | )
83 | console.log(res)
84 |
85 | // ES5
86 | try {
87 |
88 | } catch (e) {
89 |
90 | }
91 |
92 | // ES10
93 | try {
94 |
95 | } catch {
96 |
97 | }
98 |
99 | // BigInt 处理超过 2^53 的数字
100 | // const a=11n
101 | // console.log(typeof a)
102 | // "bigint"
103 |
--------------------------------------------------------------------------------
/typescript/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // "extends": "@tsconfig/node16/tsconfig.json",
3 | "compilerOptions": {
4 | /* 基本选项 */
5 | "target": "ES6", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
6 | "module": "CommonJS", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
7 | "lib": [], // 指定要包含在编译中的库文件
8 | "allowJs": true, // 允许编译 javascript 文件
9 | "checkJs": true, // 报告 javascript 文件中的错误
10 | "jsx": "preserve", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
11 | "declaration": true, // 生成相应的 '.d.ts' 文件
12 | // "sourceMap": true, // 生成相应的 '.map' 文件
13 | // "outFile": "./", // 将输出文件合并为一个文件
14 | "outDir": "./build", // 指定输出目录
15 | "rootDir": "./", // 用来控制输出目录结构 --outDir.
16 | "removeComments": true, // 删除编译后的所有的注释
17 | "noEmit": false, // 不生成输出文件
18 | "importHelpers": false, // 从 tslib 导入辅助工具函数
19 | "isolatedModules": false, // 将每个文件作为单独的模块 （与 'ts.transpileModule' 类似）.
20 |
21 | /* 严格的类型检查选项 */
22 | "strict": true, // 启用所有严格类型检查选项
23 | "noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错
24 | "strictNullChecks": true, // 启用严格的 null 检查
25 | "noImplicitThis": true, // 当 this 表达式值为 any 类型的时候，生成一个错误
26 | "alwaysStrict": true, // 以严格模式检查每个模块，并在每个文件里加入 'use strict'
27 |
28 | /* 额外的检查 */
29 | "noUnusedLocals": false, // 有未使用的变量时，抛出错误
30 | "noUnusedParameters": false, // 有未使用的参数时，抛出错误
31 | "noImplicitReturns": true, // 并不是所有函数里的代码都有返回值时，抛出错误
32 | "noFallthroughCasesInSwitch": true, // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）
33 |
34 | /* 模块解析选项 */
35 | "moduleResolution": "node", // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
36 | "baseUrl": "./", // 用于解析非相对模块名称的基目录
37 | "paths": {}, // 模块名到基于 baseUrl 的路径映射的列表
38 | "rootDirs": [], // 根文件夹列表，其组合内容表示项目运行时的结构内容
39 | // "typeRoots": [], // 包含类型声明的文件列表
40 | // "types": [], // 需要包含的类型声明文件名列表
41 | "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。
42 |
43 | /* Source Map Options */
44 | // "sourceRoot": "./", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
45 | // "mapRoot": "./", // 指定调试器应该找到映射文件而不是生成文件的位置
46 | // "inlineSourceMap": true, // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
47 | // "inlineSources": true, // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
48 |
49 | /* 其他选项 */
50 | "experimentalDecorators": true, // 启用装饰器
51 | "emitDecoratorMetadata": true // 为装饰器提供元数据的支持
52 | },
53 | "include": ["./src/**/*.ts"],
54 | "exclude": ["./node_modules", "**/*.js"]
55 | }
56 |
--------------------------------------------------------------------------------
/JavaScript_code/3.函数传参.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 函数传参
6 |
7 |
23 |
24 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/ES6-10/vue-lesson/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
9 |
Installed CLI Plugins
10 |
14 |
Essential Links
15 |
22 |
Ecosystem
23 |
30 |
80 |
1
81 |
2
82 |
3
83 |
4
84 |
86 |
87 | - 1
88 | - 1
89 | - 1
90 |
91 |
92 | - 2
93 | - 2
94 | - 2
95 |
96 |
97 | - 3
98 | - 3
99 | - 3
100 |
101 |
102 | - 4
103 | - 4
104 | - 4
105 |
106 |
95 | asdfasdfas/sad'234
96 |
asdfasdfas/sad
97 | asdfasdfas/sad'234
98 |
3 |