全栈-H2203A 周考笔试题总结

DeepLemon
108 阅读7分钟

一.简答题：

  • 1.CSS3有哪些新属性？
  • 2.git的核心概念有哪些？
  • 3.git中与分支相关的操作有哪些？
  • 4.标准盒模型和怪异和模型有什么区别？
  • 5.event loop 事件循环如何理解？
  • 6.数组方法有哪些？
  • 7.扩展运算符与rest 剩余参数什么意思，应用场景？
  • 8.es6新增数据结构Set，Map 代表什么意思？利用期中一种实现数组去重？
  • 9.说下你理解的Promise？用Promise封装一个网络请求，核心代码？
  • 10.说一下es6的导入导出如何使用

1.css3新增特性：

  1. css3边框如 border-radius，box-shadow等；
  2. css3 背景如 background-size，background-origin 等
  3. css3 2D 3D 转换如 transform等
  4. css3 动画如 animation 等
  5. box-sizing ：border-box /content-box

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

图例展示：

image.png

3.git中与分支相关的操作有哪些？

本地仓库

mkdir mytest      #make directory  创建目录
cd mytest         #change directory  切换目录
cd ..				#回到上一目录
git init          #初始化git，生成文件夹.git(隐藏文件夹)，类似npm init初始化项目    
touch README.md   #创建文件

git add README.md   #提交暂存区
git commit -m "first commit"   #提交本地仓库
git remote add origin https://gitee.com/huitailang2021/mytest.git    #指定origin的地址



git push -u origin "master"   #提交远程仓库

远程仓库

- 推送到远程分支（创建远程分支dev）：`git push origin master:dev`
- 查看所有分支：`git branch -a`
- 删除远程分支：`git push origin :dev` （推送一个空分支到远程分支，相当于删除远程分支）
- 删除远程分支：`git push origin --delete dev`

4.标准盒模型和怪异和模型有什么区别？

  • 盒模型其实就是浏览器把一个个标签都看一个矩形盒子，那每个盒子（即标签）都会有内容
    (width,height)，边框(border)，以及内容和边框中间的缝隙（即内间距padding），还有盒子与盒子
    之间的外间距（即margin）,用图表示为：

image.png

  • 当然盒模型包括两种：IE盒模型和w3c标准盒模型
IE盒模型总宽度即就是width宽度=border+padding+内容宽度
标砖盒模型总宽度=border+padding+width

那如何在IE盒模型宽度和标准盒模型总宽度之间切换呢，可以通过box-sizing:border-box或设置成
content-box来切换

  • box-sizing：content-box //w3c盒模型

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

event loop 就是对任务执行顺序做了详细的规范

  • js是单线程 脚本语言 是弱类型语言
  • 分为同步任务和异步任务两种
  • 异步任务分为 微任务和宏任务两种
  • 微任务：promise.then() promise.catch() pracess.nextTick
  • 宏任务：setTimeOut setInterval xhr 先执行微任务再执行宏任务

6.数组方法有哪些？

(-)字符串常用方法

  • length 获取字符串的长度
  • charAt 返回某个下标上的字符
  • charCodeAt 与charAt类似，它返回的是uniCode 16位整数
  • indexOf 找下标 有的话返回位置下标 没有返回-1
  • lastIndexOf 从右向左找下标
  • includes 判断是否包含某一项 返回布尔值
  • search 用正则表达式找指定字符 找到返回首次匹配成功的字符 没找到返回-1
  • concat 合并数组 返回一个新数组
  • trim 删除字符串左右的空格
  • split 字符串转数组
  • substr（开始的位置，截取的长度）
  • slice(start,end) 从start开始截，截取到end个，不包含end
  • .str.substring 和slice方法功能相同,都是提取一个字符串，并返回提取到的字符串
  • replace(替换谁，替换的值)
  • toLowerCase 没有参数，把调用该方法的字符串值转为小写，并返回
  • oUpperCase 没有参数，把调用该方法的字符串值转为大写，并返回
  • parsent() 取整
var x = parseInt("10px")
console.log(x)	//  x = 10
  • parseFloat 解析不同的字符串
document.write(parseFloat("10"))   
document.write(parseFloat("10.00")) 
document.write(parseFloat("10.33")) 
document.write(parseFloat("34 45 66")) 
document.write(parseFloat(" 60 ")) 
打印出来分别是  10  10  10.33  34  60
  • repeat 返回一个新字符串，把原字符串重复n次
const main = () => {
  let s = '哈'
  console.log(s.repeat(3))  //哈哈哈
}
main();

(2)数组常用方法

  • concat 合并数组 返回新数组
  • join 数组变成字符串
  • shift 头部删除 返回 删除的元素
  • unshift 头部添加 返回数组长度 原数组改变
  • pop 末尾删除 返回删除的元素 原数组改变
  • push 末尾添加 返回数组长度 原数组改变
  • sort 排序 原数组改变
  • reverse 翻转数组
  • slice(start,end) 从start开始截，截取到end个，不包含end
  • splice 可以删除 替换 添加 （注意：替换时第二个参数是0）
两个参数是删除：splice(从哪里开始,删除的个数), 原数组会发生改变 返回删除的内容

三个参数是替换:splice(从哪开始，0，添加的内容)
  • indexOf 找下标 有的话返回位置下标 没有返回-1
  • lastIndexOf 从右向左找下标
  • includes 判断是否包含某一项 返回布尔值
  • forEach 循环遍历操作原数组 没有返回值
  • find 查找目标元素,找到就返回该元素,找不到返回undefined
  • findIndex 也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
  • map 循环 返回一个新的数组 原数组不变
  • filter 过滤 返回一个新数组

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

  • 扩展运算符：把数组或类数组展开成用逗号分隔的值
  1. 将数组展开成用逗号隔开的值：image.png
  2. 将两个数组合并成一个数组：image.png
  3. 扩展一个字符串： image.png
  • rest参数：把逗号隔开的值组成一个数组
  1. 不定参数的函数求和：image.png
  • 通过…来接收参数，把逗号隔开的值组合成一个数组：image.png
  1. 获取剩余的参数：image.png
  2. 用于解构赋值：image.png
  • 总结...有两种含义，这两种操作相当于是互逆操作：
  1. 若把…放在等号左边或者放在形参上面，那么它就是rest参数
  2. …若在等号的右边或者放在实参上，则是扩展运算符

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

set

 <script>
        //Set Map  weakSet()   weakMap() 
      //Set()  Set本身是一个构造函数，用来生成 Set 数据结构 
        let s = new Set()
        console.log(s);
        let arr = [1,2,2,3,4,5,5,6]
        arr.forEach(x => s.add(x));
        console.log(s);//
        // add() 方法就是Set原型上的方法，可以往Set里面去添加内容 ,就相当于数组中的push()方法
        s.add(99)
        console.log(s);
        console.log(s.size);//Set结构的长度  相当于数组中length
        s.delete(99)
        console.log(s);///delete()方法就是Set()删除方法 参数就是你要删除后的元素
        console.log(s.has(1));//判断Set结构有没有该元素，如果有就返回true 没有就返回false

        console.log(s.values());
       
        let set = new Set(['red','pink','blue','orange'])
        console.log(set.keys());//返回的键名的遍历器
        console.log(set.values());//返回的键值的遍历器
        console.log(set.entries());//返回的键值对的遍历器

        // forEach()  Set结构可以使用forEach  遍历每一个set成员
        // for(let item of set.keys()){
        //     console.log(item);
        // }
        set.forEach(item=>{
            console.log(item);
        })

        // Set结构  如果存放对象 没有去重功能

        let  ss = new Set()
        console.log(ss);
        ss.add({"name":'zs'})
        ss.add({"age":18})

        console.log(ss);
        let x = NaN
        let y = NaN
        console.log(x===y); //在js中NAN不等于NAN

        ss.add(x)
      
        ss.add(y)
        console.log(ss);///在Set结构里面，NAN===NAN
        console.log(ss.keys());
        console.log(ss.values());
        console.log(ss.entries());
    </script>

map

<script>
    // let o = {
    //     name:'zs'
    // }
// Map 和WeakMap
// Map 他属于Map数据结构 他实际上也是一个构造函数

// JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
let map = new Map()

let obj = {
    name:'zs'
}
let obj1 = {
    name:'李四'
}
// set()  是map结构原型上的方法  可以往map里面去添加内容 第一个参数是 键名  第二个参数是建值

map.set(obj,obj1)
console.log(map);
// get()方法    获取map里面的建值
console.log(map.get(obj));

let arr = [['name','刘德华'],['hubby','唱歌']]
arr.forEach((item,index)=>{
    map.set(item,index)
})

map.set(true,'我是布尔值')

map.set(()=>{},'我是函数的值')
console.log(map.size);
map.clear()
console.log(map);

// Map结构 不仅能使用字符串当做键名 还可以使用 数组，对象，函数，布尔值，。。。。。当做键名 
// set()  get() size 长度属性  has（）  delete 删除  entries 键值对的遍历器   keys键名的遍历器 values建值的遍历器 forEach（） 循环遍历    clear 方法清除所有的成员

console.log(map.keys());

// WeakMap  WeakMap结构与Map结构类似，也是用于生成键值对的集合。
 
// WeakMap 只能接受对象作为他的键名  如果设置其他类型的数据当做键名，直接报错
let wm = new WeakMap()
// wm.set('name','hhhh') //报错  只能接受对象作为键名
wm.set({},'zs')
console.log(wm); //没有size属性 forEach方法 不能循环遍历 没有keys values entries.... 没有clear方法
</script>

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

  • 1.1promise的概念 Promise 是es6提供的一种异步解决方案 promise 本身是一个同步的，是一个容器用来存放异步的代码

  • 1.2promise 用来干什么的 用来对原生ajax的封装 对axios的二次封装 uni.request 的封装 发送网络请求的

  • 1.3promise 接收一个回调函数当做参数，回调函数里有两个参数分别是 resolve 和 reject， 当请求成功的时候就需要用reslove的方法将成功的结构返回出去，用.then()的方法来接收 当请求失败的时候就需要用reject 的方法将失败的结果返回出去 ，用.catch()的方法来接收

  • 1.4promise有三种状态 分别是 正在进行中pending 已经成功的 fulfilled 已经失败的rejected promise的状态一旦是正在进行中，就不能随意的去更改状态 ，pending正在进行的状态是不可逆的

  • 1.5我们所学的那些是本身就是promise对象？那些不是promise对象 juqery中的ajax 本身就是promise对象 还有axios 本身也是一个promise对象 原生的ajax 和uni.request() 本身就不是promise对象 如果想要写成链式写法就需要自己封装一个promise

  • 1.6promise提供了一些常用的方法比如 all race finally 等的方法 Promise中的 all 和race都是将多个请求合并成一个请求但是还是有区别的 race将多个请求合并成一个请求，谁先请求成功就返回谁 finally 方法无论promise处于什么状态都会执行的方法 图例：

image.png

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

模块化的两种语法：

  • es6的 import 引入 export default 导出
  • common.js语法 require（）引入 module.exports导出
  • 专5的时候用的是commonjs语法
  • 我们现在vue用的是es6的import 的导入 export default 导出
avatar
文章
阅读
粉丝