从入门到入土

吴小沫
208 阅读11分钟

1.css3有哪些新特性?

bor-radius 圆角边框

1. 如何实现元素的圆角样式：
  1. 我们可以通过 CSS border-radius 属性，实现任一元素的“圆角”样式。圆角边框属性**border-radius**是CSS3新增的属性，在圆角边框属性出现之前，我们想要实现圆角边框都是用圆角图片做背景实现的， 然而现在有了圆角属性就很方便了，可以设置任一样式的圆角；
2. 使用圆角属性细节：
  1. 圆角边框属性 ：border-radius：可以为元素添加圆角边框，他的属性值设置和外边距、内边距的设置方式一样，可以是一个值也可以是二、三、四个值；语法是从左上方开始顺时针依次设置，如果哪一个角没有设置就看他的对角；
3.格式
  1.border-radius:数字+px;
  2.border-radius:50%;//百分比最大50%
  1. 四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
  2. 三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：
  3. 两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
  4. 一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）
4.案例

正圆

<div class="box"></div>
 .box{
        width: 200px;
        height: 200px;
        background-color: aqua;
        border-radius: 50%;
    }

正圆.png 胶囊

<div class="box"></div>
 .box{
      width: 150px;
        height:60px;
        background-color: pink;
        border-radius: 60px;
        margin:200px auto ;
    }

胶囊.png

  • background-size:背景图片大小

  • transition:过渡 过渡的属性 完成时间(s) 运动曲线 延迟时间

  • transition 包含以下四个属性：

  • transition-property 过渡属性。如果希望所有的属性都发⽣过渡，就使⽤all

  • transition-duration 过渡的持续时间，单位是s或者ms

  • transition-timing-function 运动曲线。属性值取值：

  • ease 慢速开始，然后变快，然后慢速结束的过渡效果（默认 cubic-bezier(0.25,0.1,0.25,1)）

  • linear 线性，以相同速度开始至结束的过渡效果（cubic-bezier(0,0,1,1)）

  • ease-in 以慢速开始的过渡效果（cubic-bezier(0.42,0,1,1)）

  • ease-out 慢速结束的过渡效果（cubic-bezier(0,0,0.58,1)）

  • ease-in-out 以慢速开始和结束的过渡效果（cubic-bezier(0.42,0,0.58,1)）

  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值，<https://cubic-bezier.com/>

  • transition-delay 默认是0，单位为s，过渡延迟。多⻓时间后再执⾏这个过渡动画。

  • transition-duration 这个属性需要首先设置，否则时长为 0，就不会产生过渡效果。
  • transform:转换(位移 旋转 缩放)
  • 移动— translate 旋转— rotate 缩放—scale

  • animation:动画

  • linear-gradient:线性渐变

  • box-sizing:css3 盒子模型

2.Git的核心概念有哪些？

git核心概念图

git核心概念图.png 工作区（Working Directory）

1.工作区就是我们工作的区域，我们的每一个项目目录就是一个工作区。

工作区.png

暂缓区(Postponed Zone)

进入到该文件夹之后，使用命令 git init命令，则会创建版本库，即产生一个 .git隐藏文件夹

init.png

暂存区.png 工作区有一个隐藏目录.git，这个不算工作区，而是Git的版本库。

Git的版本库里存了很多东西，其中最重要的就是称为stage（或者叫index）的暂存区，暂存区有时候也称之为索引区。还有Git为我们自动创建的第一个分支master，以及指向master的一个指针叫HEAD。

使用指令git commit -m""提交到本地仓库

原文链接

总结：
  1. 工作区 workSpace 通过 git add 提交到暂存区
  2. 暂存区 index 通过 git commit -m "" 提交到本地仓库
  3. 本地仓库 Local warehouse 通过 git push 提交到远程仓库
  4. 远程仓库 Remote warehouse

3 . git中分支的操作有哪些

  1. git branch 查看本地分支
  2. git branch -a 查看所有分支
  3. git branch 分支名 创建本地分支
  4. git branch -D 分支名 删除本地分支
  5. git checkout 分支名 切换分支
  6. git push origin master 分支名 创建远程分支
  7. git push origin :分支名 删除远程分支
  8. git merge 分支名 合并分支

4. 标准盒模型与怪异盒模型的区别

  • 标准盒模型的宽高 = content 内容
  • 怪异盒模型的宽高 = content 内容 + padding内边距 +border 边框

5. event loop 事件循环如何理解

在理解事件循环之前需要知道js的同步异步，以及宏任务微任务。

⾸先， JavaScript 是⼀⻔单线程的语⾔，意味着同⼀时间内只能做⼀件事，但是这并不意味着单线程就是阻塞，⽽实现单线程⾮阻塞的⽅法就是事件循环（event loop） 在 JavaScript 中，所有的任务都可以分为：

1. 同步异步

  • 同步任务：⽴即执⾏的任务，同步任务⼀般会直接进⼊到主线程中执⾏
  • 异步任务：异步执⾏的任务，⽐如 ajax ⽹络请求， setTimeout 定时函数等 碰到异步任务会进入任务队列进行等待 异步执行的时机是同步代码执行完了 异步任务准备好（比如计时器到时间了 ajax 请求成功了）才会执行异步任务 2. 宏任务微任务 异步任务 又分为宏任务微任务
  • 宏任务 计时器 ajax 请求
  • 微任务 promise.then()

JS异步执行的机制为，先执行主线程上的同步任务，同步任务执行完之后，读取任务队列，哪些任务准备完毕就结束等待状态，进入执行栈，开始执行。这个过程会循环反复，叫做事件循环（EventLoop） JS还有一种异步执行机制，就是遇到宏任务，先将宏任务放入任务队列，再将微任务放入微任务队列，但是，这两个队列不是一个队列。当你往外拿的时候先从微任务队列里拿这个回调函数，然后再从宏任务的队列里拿宏任务的回调函数，也就是宏任务是先进后出,微任务后进先出。

宏任务.png

执行结果 1 7 6 8 2 4 3 5 9 11 10 12

6. 数组的方法有哪些（写出es5的方法），什么意思

  • concat( )：数组合并。concat() 方法不会更改现有数组。它总是返回一个新数组
  • join( )：数组转字符串。
  • pop( )：删除最后一个元素。
  • push( )：数组向后添加。
  • unshift( )：数组向前添加。
  • reverse( )：数组翻转。
  • shift( )：删除第一个元素。
  • slice( )：数组元素的截取，返回一个新数组，新数组是截取的元素，可以为负值。
  • sort( )：对数组元素进行排序；
  • splice( )：删除元素，并向数组添加新元素；
  • toString( )：数组转字符串；
  • toLocaleString( )：将数组转换为本地数组。
  • forEach( )：数组进行遍历；
  • map( )：没有return时，对数组的遍历。有return时，返回一个新数组，该新数组的元素是经过过滤(逻辑处理)过的函数。
  • filter( )：筛选。
  • every( )：当数组中每一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
  • some( )：当数组中有一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
  • reduce( )：回调函数中有4个参数。prev（之前计算过的值），next（之前计算过的下一个的值），index，arr。把数组列表计算成一个单一值。

7. 扩展运算符与rest剩余参数是什么意思，应用场景

ES6的扩展运算符（ spread ）是三个点（...），展开元素会“展开”数组变成多个元素。 rest运算符也是三个点（...），剩余元素会收集多个元素后“压缩”成一个单一的元素，rest参数用于获取函数的多余参数。rest运算符的功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。

rest参数可理解为剩余的参数，所以必须在最后一位定义，如果定义在中间会报错。

function fn(username,...rest) {
  // console.log(username,age,rest)
  console.log(username,rest)
}
fn("张三", 21, "男", "北大");

rest运算符应用场景

rest运算符主要是处理不定数量参数，rest参数使得收集参数变得非常简单。它是类数组对象arguments一个合理的替代品。

合并数组

 let arr1 = ["北京", "上海"];
 let arr2 = ["广州", "深圳"];

 arr1.push(...arr2);
 console.log(arr1)

扩展运算符应用场景

可以替代语法繁琐的apply方法。当需要拿一个数组的元素作为函数调用的参数时（即 数组实参），扩展运算符是一个不错的选择。

8. es6新增数据结构Set Map 代表什么意思？利用其中一种实现数组去重？

Set 是无重复值的有序列表。根据 Object.is()方法来判断其中的值不相等，以保证无重复。 Set 会自动移除重复的值，因此你可以使用它来过滤数组中的重复值并返回结果。 Set并不是数组的子类型，所以你无法随机访问其中的值。但你可以使用has() 方法来判断某个值是否存在于 Set 中，或通过 size 属性来查看其中有多少个值。 Set 类型还拥有forEach()方法，用于处理每个值

Map 是有序的键值对，其中的键允许是任何类型。与 Set 相似，通过调用 Object.is()方法来判断重复的键，这意味着能将数值 5 与字符串 "5" 作为两个相对独立的键。使用set() 方法能将任何类型的值关联到某个键上，并且该值此后能用 get() 方法提取出来。Map 也拥有一个 size 属性与一个 forEach() 方法，让项目访问更容易。

set概念图 set.png map概念图

map.png

9. 说一下你理解的Promise? 用promise封装一个网络请求，核心代码？

promise 是ES6新增的异步编程解决方案，可以用于解决回调地狱问题，能够进行链式调用。 promise 的核心是回调函数。他有三种状态，分别是 进行中（pending），已完成（fulfilled），已失败（rejected） 。 promise 构造函数有两个参数，分别是 resolve 和 reject。 resolve 将 promise 状态由 pending 变为 fulfilled， reject 将 promise 状态由 pending 变为 rejected promise 状态一旦改变就不会再变。

基础用法：

  <script>
        let pro = new Promise((resolve, reject) => {
            resolve('成功了')//状态由pending变为fulfiled
            reject('失败了')//状态由pending变为rejected
        })
        pro.then((res) => {//成功回调
            console.log(res);
        },(err)=>{//失败回调
            console.log(err);
        })
    </script>

promise构造出的实例存在以下方法：

  • (1) .then（） 成功时回调函数
  • (2) .catch（） 失败时回调函数
  • (3) .finally（） 不管promise对象最后结果如何都会执行
<script>
        let pro = new Promise((resolve, reject) => {
            resolve('成功了')//状态由pending变为fulfiled
            reject('失败了')//状态由pending变为rejected
        })
        pro.then((res) => { //成功回调
            console.log('成功回调', res)
        }).catch((err) => { //失败回调
            console.log('失败回调', err)
        }).finally(() => {
            console.log('不管成功与失败都会执行');
        })
    </script>

promise 封装 axios 原理

 function axios(url, method, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    method: method,
                    data: data,
                    success: function (res) {
                        resolve(res)
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            })
        }
        axios('data/data.json').then(res => {
            console.log(res);
        })

10. 说一下es6的导入导出如何使用

export和export default 导出

export 与import是es6中新增模块功能最主要的两个命令：
1.export与export default均可用于导出常量、变量、函数、文件、模块等；
2.在一个文件或模块中，export、import可以有多个，但export default仅有一个；
3.通过export方式导出，在导入（import）时要加花括号{ }，export default则不需要话跨好{ }。

//先是 export 
import {axiosfetch} from './util';  //需要加花括号，可以一次导入多个也可以一次导入一个，但都要加括号
//如果是两个方法
import {axiosfetch,post} from './util'; 
//再是 export default 
import axiosfetch from './util';  //不需要加花括号，只能一个一个导入

部分导出

    
    export function helloWorld(){
      conselo.log("Hello World");
     }

export不限导出的变量数，可以一直写，在同一个js文件中可以有多个。

全部导出

export default http

export default只输出一次，在同一个js文件中只能有一个。

import导入

import在引入文件路径时，引入一个依赖包，不需要相对路径。如：import app from ‘app’;，但引入一个自己写的js文件，是需要相对路径的。如：import app from ‘./app.js’;。

引入第三方

//axios导入
import axios from 'axios'
// 引入element
import ElementUI from 'element-ui';

导入css文件

import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
import 'iview/dist/styles/iview.css';

组件导入

import name1 from './name1';
import name2 from './name2';
import App from './app.vue';
components:{
  name1,
  name2,
  App,
},
avatar
文章
阅读
粉丝