备战前端技能比武基础知识复习

最新推荐文章于 2025-03-09 15:02:30 发布

原创最新推荐文章于 2025-03-09 15:02:30 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

技术储备专栏收录该内容

8 篇文章

订阅专栏

本文深入讲解了前端开发中的关键知识点，包括JavaScript函数定义、ES6特性、CSS过渡效果及HTML5存储等，并提供了Promise封装Ajax操作的具体实现。

前言

这个社会是一个很残酷的社会，如果不尝试去检讨自己并付诸行动是没有办法的，都需要努力，加油。

一、JS ES TS

1.函数的三种定义方式：

1.自定义函数：
function name(){}
2.匿名函数：
var fn = function(){}
3.构造函数：
var f = new function(){}

2.正则里的 $

^是正则表达式匹配字符串开始位置

$是正则表达式匹配字符串结束位置

3.关于ES6解构表达式

let [a = 1, b] = [];

默认值生效的条件为undefined 此处a了个默认值1 所以答案为1 undefined

let [a,b, c,d, e] = "hello";

const [a, b, c, d, e] = ‘hello’; a // “h” b // “e” c // “l” d // “l” e // “o”
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = ‘hello’; len // 5

4.ES6箭头函数

5.给JS对象添加属性和方法

给JS对象添加属性和方法

6.脚本

<script>放在<head>和放到<body>底部的区别是什么
放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。
放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。
例外情况：脚本中没有访问<body>元素的情况下，两种加载方式效果一致。

7.请使用Promise封装Ajax操作

原始的Ajax操作如下：

var onSuccess = function(result){}; //成功的回调
var onFail = function(error){}; //失败的回调
var req = new XMLHttpRequest();
req.open("POST", "www.baidu.com", true);
req.onload = function(){
  if(req.readyState === 4 && req.status === 200){
    onSuccess(req.response);
  } else {
    onFail(req.statusText);
  }
}
req.onerror = function(){
  onFail(Error("网络异常"));
}

参考

const ajax = url => {
    return new Promise((resolve, reject) => {
        let req = new XMLHttpRequest();
        req.open("POST", url, true);
        req.onload = () => {
          if(req.readyState === 4 && req.status === 200){
            resolve(req.response);
          } else {
            reject(req.statusText);
          }
        }
        req.onerror = () => {
          reject(Error("网络异常"));
        }
    })
}