正题

1、

 1 var length = 1;
 2 function fn() {
 3     console.log(this.length);
 4 }
 5 var obj = {
 6     length: 100,
 7     action: function (callback) {
 8         callback();
 9         arguments[0]();
10     }
11 }
12 obj.action(fn, ...[1, 2, 3, 4]);

2、

1 var a = 10;
2 function test() {
3     console.log(a);
4     a = 100;
5     console.log(this.a);
6     var a;
7     console.log(a);
8 }
9 test();

3、

1 var a = 10;
2 function f1() {
3     var b = 2 * a; 
4     var a = 20;
5     var c = a + 1;
6     console.log(b);
7     console.log(c);
8 }
9 f1();

4、

1 var a = 10;
2 function fn1() {
3     console.log(a);
4 }
5 function fn2() {
6     var a = 20;
7     fn1();
8 }
9 fn2();

5、

1 var a = b = 10; 
2 function f1() {
3     var a = b = 20;
4     var c = a + 1;
5     console.log(c);
6 }
7 f1();
8 console.log(a);
9 console.log(b);

6、

 1 const motion = () => {
 2     let speed = 100;
 3     return {
 4         run() {
 5             speed++;
 6             console.log(speed);
 7         }
 8     }
 9 };
10 const m1 = motion();
11 const m2 = motion();
12 m1.run();
13 m1.run();
14 m2.run();

7、

 1 var x = 1;
 2 function f(y) { 
 3     return this.x + y;
 4 }
 5 var obj = {
 6     x: 2
 7 }
 8 var f2 = function () {
 9     return f.apply(obj, arguments) 
10 }
11 var z = f2(3);
12 console.log(z);

8、

 1 setTimeout(() => {
 2     console.log(1)
 3 }, 100);
 4 setTimeout(() => {
 5     console.log(2)
 6 }, 0);
 7 console.log(3);
 8 let p = new Promise((resolve, reject) => {
 9     resolve(4);
10     console.log(5);
11 });
12 p.then(res => {
13     console.log(res);
14 });
15 console.log(6);

9、

 1 function f2() {
 2     console.log(1);
 3     setTimeout(() => {
 4         console.log(2);
 5     }, 100)
 6 }
 7 async function f() {
 8     console.log(3);
 9     await f2();
10     console.log(4);
11 }
12 f();
13 console.log(5);

10、

给一个数组 const arr = [3,1,7,8]和目标值n=10,请求出该数组中元素相加等于目标值的下标。
比如: arr=[1,2,3,4] n=7; 输出:[2,3]

解析

第1题解析
 1 var length = 1;
 2 function fn() {
 3     console.log(this.length);
 4 }
 5 var obj = {
 6     length: 100,
 7     action: function (callback) {
 8         callback();
 9         arguments[0]();
10     }
11 }
12 obj.action(fn, ...[1, 2, 3, 4]);
13 // 考核点:this的指向
14 // 输出结果:1 5
15 // 第一个输出1,是因为fn在全局被调用,this指向是window
16 // 第二个输出5,是因为fn被arguments调用,而arguments里有length属性,传入了五个参数,length为5,所以输出是5
View Code

第2题解析

 1 var a = 10; // 全局变量
 2 function test() {
 3     console.log(a); // 变量提升
 4     a = 100;
 5     console.log(this.a); // this指向全局的window
 6     var a;
 7     console.log(a); // 局部变量
 8 }
 9 test();
10 // 考核点:变量提升
11 // 输出结果:undefined 10 100
View Code

第3题解析

 1 var a = 10;
 2 function f1() {
 3     var b = 2 * a; // a=undefined
 4     var a = 20;
 5     var c = a + 1;
 6     console.log(b);
 7     console.log(c);
 8 }
 9 f1();
10 // 考核点:
11 // 输出结果:NaN 21
View Code

第4题解析

 1 var a = 10;
 2 function fn1() {
 3     console.log(a);
 4 }
 5 function fn2() {
 6     var a = 20;
 7     fn1();
 8 }
 9 fn2();
10 // 考核点:
11 // 输出结果:10
View Code

第5题解析

 1 var a = b = 10;    // 相当于b = 10; var a = b;
 2 function f1() {
 3     var a = b = 20; // 相当于 b=20; var a = 20;
 4     var c = a + 1;  // c = 20 + 1
 5     console.log(c);
 6 }
 7 f1();
 8 console.log(a);
 9 console.log(b);
10 // 考核点:JavaScript中变量作用域、变量声明提升和变量赋值的知识点
11 // 输出结果:21 10 20
View Code

第6题解析

 1 const motion = () => {
 2     let speed = 100;
 3     return {
 4         run() {
 5             speed++;
 6             console.log(speed);
 7         }
 8     }
 9 };
10 const m1 = motion();
11 const m2 = motion();
12 m1.run();
13 m1.run();
14 m2.run();
15 // 考核点:闭包
16 // 输出结果:101 102 101
View Code

举例:

 1 var a = 100;
 2 function f1() {
 3     a++;
 4     console.log(a);
 5 }
 6 f1(); // 101
 7 f1(); // 102
 8 
 9 function f1() {
10     var a = 100;
11     a++;
12     console.log(a);
13 }
14 f1(); // 101
15 f1(); // 101
16 
17 // 闭包保存变量的状态
18 function f1() {
19     var a = 100; // 局部变量
20     return function () {
21         a++;
22         console.log(a);
23     }
24 }
25 
26 var a1 = f1();
27 a1(); // 101
28 a1(); // 102
View Code

第7题解析

 1 var x = 1;
 2 function f(y) { // 函数申明
 3     return this.x + y; // this指向
 4 }
 5 var obj = {
 6     x: 2
 7 }
 8 var f2 = function () { // 函数表达式
 9     return f.apply(obj, arguments) // obj={ x: 2 }, arguments=3,arguments 类似于数组,代表参数集合  
10 }
11 var z = f2(3);
12 console.log(z);
13 // 考核点:call()和apply(),改变this的指向 arguments
14 // 输出结果:5
View Code

举例:

 1 f.apply(obj, 参数);
 2 
 3 var id = 10;
 4 function fn() {
 5     console.log(this.id); // 10
 6 }
 7 fn();
 8 
 9 var o1 = {
10     id: 999
11 }
12 // 如何让fn函数中this的指向o1
13 fn.apply(o1) // this.id = o1.id 相当于fn函数在o1对象中执行
14 
15 function Person(name, age) {
16     this.name = name;
17     this.age = age;
18 }
19 
20 var y1 = new Person('y1', 20);
21 var o2 = {}; //o2空对象
22 Person.apply(o2, ['o2', 18]); // apply 参数是一个数组
23 console.log(o2.name);
24 
25 var o3 = {};
26 Person.call(o3, "hsl", 18);  // call 参数是字符串
27 console.log(o3.name);
View Code

第8题解析

 1 setTimeout(() => {
 2     console.log(1)
 3 }, 100);  // 异步-宏任务
 4 setTimeout(() => {
 5     console.log(2)
 6 }, 0);  // 异步-宏任务
 7 console.log(3); // 同步
 8 let p = new Promise((resolve, reject) => {
 9     resolve(4);
10     console.log(5); // 同步
11 });
12 p.then(res => {
13     console.log(res); // 异步-微任务
14 });
15 console.log(6);  // 同步
16 // 考核点:同步、异步-微任务、异步-宏任务
17 // 微任务:Promise的then『Promise同步,但Promise中的then是异步』、async await
18 // 宏任务:setTimeout、setInterval
19 // 输出结果:3 5 6 4 2 1
View Code

第9题解析

 1 function f2() {
 2     console.log(1);
 3     setTimeout(() => {
 4         console.log(2);
 5     }, 100)
 6 }
 7 async function f() {
 8     console.log(3);
 9     await f2();
10     console.log(4);
11 }
12 f();
13 console.log(5);
14 // 考核点:async和await
15 // 输出结果:3 1 5 4 2
View Code

第10题解析

 1 /*
 2 给一个数组 const arr = [3,1,7,8]和目标值n=10,请求出该数组中元素相加等于目标值的下标。
 3 比如: arr=[1,2,3,4] n=7; 输出:[2,3]
 4 */
 5 
 6 // 方法一
 7 function arrFn(arr, n) {
 8     let newArr = [];
 9     for (let i = 0, len = arr.length; i < len; i++) {
10         for (let j = i + 1, len = arr.length; j < len; j++) {
11             if (n === arr[i] + arr[j]) {
12                 newArr.push(i, j);
13             }
14         }
15     }
16     return newArr;
17 }
18 console.log(arrFn([3, 1, 7, 8], 10));
19 
20 // 方法二
21 function twoSum(nums, target) {
22     // 1、构造哈希表
23     const map = new Map(); // 存储方式 {need, index}
24 
25     // 2、遍历数组
26     for (let i = 0; i < nums.length; i++) {
27         // 2.1 如果找到 target - nums[i] 的值
28         if (map.has(nums[i])) {
29             return [map.get(nums[i]), i]
30         } else {
31             // 2.2 如果没找到则进行设置
32             map.set(target - nums[i], i)
33         }
34     }
35 }
36 console.log(twoSum([3, 1, 7, 8], 10));
View Code

 鉴定完毕,欢迎友们一起交流学习!!

posted @ 2023-09-24 13:04 红石榴21 阅读(110) 评论(0) 推荐(0) 编辑

一、Git提交代码

1 git pull   从服务器上拉取代码
2 git status 查看文件的状态
3 git add .  添加所有文件到暂存区
4 git commit -m "提交的描述信息" 将索引内容添加到仓库中
5 git push   代码提交到服务器

二、Git切换分支

1 git branch    列出所有本地分支
2 git branch -a 列出本地和远程所有分支
3 git branch -r 列出所有远程分支
4 git branch [branch-name] 新建一个分支,停留在当前分支
5 git checkout [branch-name] 切换分支,dev
6 git push --set-upstream origin [branch-name] 关联到远程分支

三、Git版本回退

1、回退到某个版本,就选择当前版本的6位数字版本号
git reset --hard 版本号 61068ccd

2、强推送到远程分支
git push origin HEAD --force

四、Git其他常用命令

1 git fetch 抓取远程仓库更新
2 git branch -d [branch-name] 删除本地分支 
3 git push origin --delete [branch-name]  删除远程分支
4 rm -rfv node_modules/ 删除文件目录中的文件
5 git remote -v 查看远程仓库地址命令

👇想学习更多Git相关知识,点击下面链接

【狂神说Java】Git最新教程通俗易懂

https://www.bilibili.com/video/BV1FE411P7B3?p=1&vd_source=46a4c2bfc45dfa131fe23c3952933bd4

视频同步笔记:狂神聊Git

https://mp.weixin.qq.com/s/Bf7uVhGiu47uOELjmC5uXQ

鉴定完毕,欢迎友们一起交流学习!!

posted @ 2023-09-22 11:06 红石榴21 阅读(41) 评论(0) 推荐(0) 编辑

1.1  尝试新颖的CSS3特性

首先,我们来看一个具体的案例。  https://code.juejin.cn/pen/7277536985772720139
 

1.2  CSS3新特性简介和浏览器支持情况

新特性简介:

1)强大的CSS3选择器
2)抛弃图片的视觉效果
3)盒模型变化(多列布局和弹性盒模型 )
4)阴影效果
5)Web字体和web Font 图标
6)CSS3过渡与动画交互效果
7)媒体查询

什么是渐进增强和优雅降级?

1)渐进增强:指一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。相当于向上兼容,从非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要。『向上兼容,先满足大多数浏览器』
2)优雅降级:指一开始就构建站点的完整功能,然后针对浏览器测试和修复。相当于向下兼容,从复杂的现状开始,并试图减少用户体验的供给。优雅降级是从复杂的现状开始,并试图减少用户体验的供给。 『向下兼容,满足大多数用户使用的主流浏览器』
 
1.3  CSS3伪类选择器1
1)什么是伪类选择器?
伪类选择器是CSS中的一种选择器,用来选择处于特定状态的元素。
伪类选择器是CSS选择器的一种,它可以选择处于特定状态的元素,例如:链接(a:link)、已被访问的链接(a:visited)、激活的链接(a:active)、鼠标悬停链接(a:hover)、目标链接(a:target)等。
伪类选择器的语法格式为:选择器:伪类名{属性:值;}。
2)动态伪类选择器
动态伪类选择器是CSS中的一种特殊类型的选择器,它可以基于元素当前所处的状态来选取元素。
动态伪类选择器有:
  • :link:匹配所有未被访问的链接。
  • :visited:匹配所有已被访问的链接。
  • :hover:匹配鼠标指针浮动在其上的元素。
  • :active:匹配被用户激活的元素。
  • :focus:匹配获得焦点的元素。
3)UI元素状态伪类选择器

UI元素状态伪类选择器是根据元素状态来选择元素的一种CSS选择器,常见的UI元素状态伪类选择器包括以下几个:

  • E:enabled:用来指定当前元素处于可用状态时的样式。
  • E:disabled:用来指定当前元素处于不可用状态时的样式。
  • E:read-only:用来指定当元素处于只读状态时的样式。
  • E:read-write:用来指定当元素处于非只读状态时的样式。
  • E:default:用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。
  • E:indeterminate:用来指定当页面打开时,如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。
  • E::selection:用来指定当元素处于选中状态时的样式。
 
1.4  CSS3伪类选择器2结构伪类选择器
1)什么是结构伪类选择器?
结构伪类选择器是针对HTML的结构进行分类的选择器。
结构伪类选择器根据文档结构来选择元素,常用于根据父级选择器里面的子元素,能大大减少HTML元素的id属性和class属性的依赖。结构伪类选择器的特征就是位置,分为三大类,一类是e:first-child、e:last-child、e:only-child、e:nth-child(n/even/odd)等,二类是e:first-of-type、e:last-of-type、e:only-of-type、e:nth-of-type等, 三类是e:root、e:empty、e:target、e:not等。
 
1.5  CSS3伪类选择器2结构伪类选择器

CSS3伪元素是CSS3的一个新特性,它可以帮助我们创建一些特殊的样式效果。伪元素之所以被称为伪元素,是因为他们不是真正的页面元素,HTML没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的CSS样式,表面上看上去貌似是页面的某些元素来展现,实际上是CSS样式展现的行为,因此被称为伪元素。
CSS3伪元素有四种类型:

  • ::first-letter:选取元素的第一行文字。
  • ::first-line:选取元素的第一行文字。
  • ::before:在元素内部的前面插入内容。
  • ::after:在元素内部的后面插入内容。

请注意,伪元素必须与真实的选择器一起使用,例如 p::before 或 h1::first-line。使用伪元素可以帮助我们简化HTML结构,而不需要额外的HTML标签。

Demo1.5  https://code.juejin.cn/pen/7277894226740772921

 

2.1  CSS3用border-radius画圆形

Border-radius的优点:
  • 减少网站的维护工作量
  • 提高网站性能
  • 增加了视觉美观性
 
2.2  CSS3画三角形和对话框
三角形角尖相反的方向设置颜色值。若角尖朝左,则右边角设置颜色值。其他方向同理可得。
1)三角形
 
2)对话框
 
 
2.3  CSS3画菱形和平行四边形
transform适用于盒模型元素来倾斜(skew)、旋转(rotate)、缩放(transform-origin)、位移(transform-origin)
1)菱形
2)平行四边形

2.4  画五角星和六角星

Demo2.4  https://code.juejin.cn/pen/7278269246235213865

 

2.5  CSS3画五边形和六边形

Demo2.5  https://code.juejin.cn/pen/7278288845534134307

 

2.6  CSS3画心形和蛋形

Demo2.6  https://code.juejin.cn/pen/7278511265814118460

 

2.7  CSS3画太极阴阳图

Demo2.7  https://code.juejin.cn/pen/7278601329470406667

 

3.1  CSS3制作透明背景层

1)opacity: value|inherit;
属性值:
value 指定不透明度。从0.0(完全透明)到1.0(完全不透明)
inherit Opacity属性的值应该从父元素继承

2)box-shadow:3px 3px  5px  #888;   /* x偏移量 | y偏移量 | 阴影宽度 | 阴影颜色 */

Demo3.1  https://code.juejin.cn/pen/7278621775661891599

 

3.2  CSS3的颜色模式(1)

1)rgba(R,G,B,A)
R:红色值。正整数百分数
G:绿色值。正整数百分数
B:蓝色值。正整数|百分数
A:Alpha透明度。取值0~1之间

2)hsla(H,S,L,A)
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色下也可取其他数值来指定颜色。取值为:0-360
S:Saturation(饱和度)。取值为 :0.0%-100.0%
L:Lightness(亮度)。取值为 :0.0% - 100.0%
A:Alpha透明度。取值0~1之间。

Demo3.2  https://code.juejin.cn/pen/7278669706104422457

 

3.3  CSS3的颜色模式(2)-实例仿天猫商品展示效果

Demo3.3  https://code.juejin.cn/pen/7279067304699101239

 

3.4  CSS3线性渐变
linear-gradient([<point>||<angle>,]? <stop>,<stop>[,<stop>]*)
<angle>:用角度值指定渐变的方向(或角度)。
to left: 设置渐变为从右到左。相当于:270deg
to right:设置渐变从左到右。相当于:90deg
 to top:设置渐变从下到上。相当于:0deg
to bottom:设置渐变从上到下。相当于:180deg。
 
<color-stop>用于指定渐变的起止颜色:
<color>:指定颜色。
<length>:用长度值指定起止色位置。不允许负值
<percentage>:用百分比指定起止色位置。

Demo3.4  https://code.juejin.cn/pen/7279081313213087763

 

3.5  CSS3径向渐变 radial-gradient
radial-gradient([<bg-position>||<angle>,]? [<shape>||<size>,]? <color-stop>,<color-stop>[,<color-stop>]*);

Demo3.5  https://code.juejin.cn/pen/7279083160313266232

 

3.6  CSS3重复性渐变
 radial-gradient([<bg-position>||<angle>,]? [<shape>||<size>,]? <color-stop>,<color-stop>[,<color-stop>]*);

Demo3.6  https://code.juejin.cn/pen/7279236997292818491

 

3.7  CSS3盒子阴影效果box-shadow

Demo3.7  https://code.juejin.cn/pen/7279238667225268279

 

4.1  CSS3制作缓慢变长的方形(transition特效)

Transition
transition-property: 过渡属性(默认值为all),可填写其他属性例如background、width、height
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

Demo4.1  https://code.juejin.cn/pen/7279236997292818491

 

4.2、4.3  CSS3仿天猫专题过渡效果实例

Demo4.2、4.3  https://code.juejin.cn/pen/7279618834334482493

 

4.4  CSS3仿天猫类别过渡效果制作

Demo4.4  https://code.juejin.cn/pen/7279633686172008511

 

5.1、5.2  CSS3动画中的@keyframes关键帧讲解

animation复合属性讲解
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

Demo5.1、5.2  https://code.juejin.cn/pen/7279637600582697018

 

5.3  CSS3动画综合实例制作-内容加载loading动画实现

Demo5.3  https://code.juejin.cn/pen/7279639554364833833

 

5.4  CSS3 Loading动画效果实例2

Demo5.4  https://code.juejin.cn/pen/7279640723501088824

 

6.1  CSS3制作发光字,立体字,苹果字体

text-shadow:h-shadow V-shadow blur color;

Demo6.1  https://code.juejin.cn/pen/7279788933557616655

 

6.2  CSS3 用text-overflow解决文字排版问题

text-overflow:clip | ellipsis | string;

Demo6.2  https://code.juejin.cn/pen/7279790619282079804

 

6.3  CSS3 新的字体单位rem-大结局

em是根据它的父级字体大小来决定的;
rem 是根据文档中的根元素来决定的。

Demo6.3  https://code.juejin.cn/pen/7279791510601220108

鉴定完毕,欢迎友们一起交流学习!!

posted @ 2023-09-14 21:18 红石榴21 阅读(83) 评论(0) 推荐(0) 编辑
摘要: 1. ES6 1.1 let变量声明以及声明特性 声明变量 let a; let b, c, e; let f = 100, g = "红石榴21", h = []; 特性: 变量不能重复声明 let start = "许巍"; let start = "刀郎"; // 报错 块级作用域 全局、函数 阅读全文
posted @ 2023-09-10 17:34 红石榴21 阅读(176) 评论(0) 推荐(0) 编辑
摘要: 操作步骤如下: 一、安装Live Server 插件 二、点击扩展设置 三、设置live server默认打开浏览器为“chrome” 四、配置-工作区 五、在HTML文件中,右键选择"open with Live Server" 输出结果 阅读全文
posted @ 2023-09-08 19:48 红石榴21 阅读(86) 评论(0) 推荐(0) 编辑
摘要: 先举一个栗子: 效果链接:https://code.juejin.cn/pen/7226264955824930816 如果不会请移步到官网的栗子,请点击查看 狠人话不多,直接给大家上代码: 整体代码片段 <template> <div id="container" style="position: 阅读全文
posted @ 2023-03-31 17:33 红石榴21 阅读(1295) 评论(0) 推荐(0) 编辑
摘要: 1、npm install xxx -s npm install xxx -s、npm install xxx -S是npm install xxx --save的简写形式 局部安装,记录在package.js文件中dependencies对象中 dependencies:生产环境的依赖包 例如:v 阅读全文
posted @ 2023-07-17 17:44 红石榴21 阅读(422) 评论(0) 推荐(0) 编辑
摘要: 需求:Message消息提示显示时长过长 环境:"vue": "2.6.12"、"element-ui": "^2.15.6"等 解决步骤: 1、在项目中找到main.js 文件 2、引人下面两个文件 import ElementUI from 'element-ui'; import 'eleme 阅读全文
posted @ 2023-07-11 17:42 红石榴21 阅读(1085) 评论(0) 推荐(0) 编辑
摘要: 需求:循环一个数组保持请求顺序请求接口,且当前数组的值为1时,又需要异步请求另一个接口根据返回status值跳出本次循环。 解决思路:使用for循环,首先在循环中判断数组中值为1的,用async和await异步请求返回数据状态跳出循环;同时把符合条件的所有请求接口push到一个数组中去,最后Prom 阅读全文
posted @ 2023-07-11 11:39 红石榴21 阅读(19) 评论(0) 推荐(0) 编辑
摘要: 需求:1)表头的数据是动态的,有可能字段值很长且很多。解决方案自定义动态表头,字段长使用文字提示【el-tooltip组件】; 2)需要对表格data中的数据值进行枚举转成中文值,且显示不同的颜色。 效果图: 直接上代码: 1、vue代码 1 <el-table 2 :data="tableData 阅读全文
posted @ 2023-07-10 11:26 红石榴21 阅读(510) 评论(0) 推荐(0) 编辑
摘要: 需求:在后台管理系统首页列表项中,点击详情跳转到系统中指定菜单的路由要求新开窗口并需要带上参数查询。 第一种方法: 1 const { id } = item; 2 let routeUrl = this.$router.resolve({ 3 path: '/xxx', // 路由地址 4 que 阅读全文
posted @ 2023-07-10 10:38 红石榴21 阅读(6) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示