零基础入门前端可以快速掌握的 javascript 基础

谁践踏了优雅 2022-11-15 14:05 252阅读 0赞

## 前言 ##

这段时间复习了 js 的基础，梳理了一下自己的整个知识掌握情况。 实现并非最优解，欢迎朋友们讨论和指正，大家一起进步呀。

## js 基础 ##

包括：防抖、节流、闭包、柯里化、new、bind、apply、call、this、作用域、数据类型、常用数组&字符串&正则方法、排序、去重、拍平数组、深拷贝、跨域解决方案

**1.防抖**

**2.节流**

**3.闭包**

function count() {
      let count = 0;
      return function () {
        count++;
        console.log(count);
      };
    }

**4.柯里化**

**5.new 操作符**

**6.手写 bind**

Function.prototype.bind_y = function (obj) {
      let that = this;
      return function (...args) {
        that.apply(obj, args);
      };
    };

**7.手写 apply**

Function.prototype.apply_y = function (obj) {
      return function (...args) {
        this.bind(obj)(args);
      };
    };

**8.手写 call**

Function.prototype.call_y = function (obj) {
      return function (...args) {
        this.bind(obj)(...args);
      };
    };

**9.this**

// 普通函数中，this指向调用函数的对象，在调用时绑定
    var name = "y";
    var cat = { name: "miao" };
    function a() {
      console.log(this.name);
    }
    a(); // y
    a.apply(cat); // miao
    
    // 箭头函数中，this继承自父函数，在声明时绑定
    var name = "y";
    var cat = { name: "miao" };
    var a = () => {
      console.log(this.name);
    };
    a(); // y
    a.apply(cat); // y

**10.作用域**

// 变量声明提升
    console.log(a); // 1
    console.log(b); // Uncaught ReferenceError: b is not defined
    console.log(c); // Uncaught ReferenceError: c is not defined
    var a = 1;
    let b = 2;
    const c = 3;
    
    // 函数声明提升
    console.log(y); // ƒ y(){console.log("nice to meet you!")}
    function y() {
      console.log("nice to meet you!");
    }

**11.数据类型 基本类型存于栈内存，引用类型存于堆内存，从存取频率上可理解。**

*  基本类型

Number、 Boolean、String、Undefined、Null、BigInt、Symbol

*  引用类型

Object、Array、Function、Date、RegExp

typeof 方法可以判断基本类型和函数；instanceof 方法可以判断引用类型；Object.prototype.toString.call()方法可以精确判断所有数据类型。

**12.常用数组&字符串& 正则方法**

// 字符串方法
    "abc".split("");
    "abc".indexOf("a");
    "abc".charAt(0);
    "abc".replace("a", 1);
    "abc".match("a");
    "abc".matchAll("a");
    
    // 数组方法
    [1, 2, 3].join("");
    [1, 2, 3].indexOf(1);
    [1, 2, 3].findIndex((item) => item > 1);
    [(1, 2, 3)][0];
    [1, 2, 3].reduce((acc, item, index, arr) => {
      return acc + item;
    });
    [1, 2, 3].map((item, index) => {});
    [1, 2, 3].forEach((item, index) => {});
    [1, [2, 3]].flat(2);
    [1, 2, 3].fill("a");
    [1, 2, 3].includes(1);
    
    // 正则方法
    /[a-z]/.test("abc");
    /([a-z])(?!\1)([a-z])/.exec("aac");

**13.排序**

//  sort
    [1, 3, 5, 2, 4, 6].sort((a, b) => {
      return a - b;
    });
    
    // 快速排序
    function quickSort(arr) {
      if (arr.length < 2) return arr;
      let left = [];
      let right = [];
      let flag = arr.splice(arr.length - 1, 1)[0];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > flag) {
          right.push(arr[i]);
        } else {
          left.push(arr[i]);
        }
      }
      return quickSort(left).concat(flag, quickSort(right));
    }
    
    // 冒泡排序
    function bubbleSort(arr) {
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i] > arr[j]) {
            [arr[i], arr[j]] = [arr[j], arr[i]];
          }
        }
      }
      return arr;
    }
    
    // 选择排序 
    function selectSort(arr) {
      let min = 0;
      for (let i = 0; i < arr.length - 1; i++) {
        min = i;
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[j] < arr[min]) {
            min = j;
          }
        }
        [arr[i], arr[min]] = [arr[min], arr[i]];
      }
      return arr;
    }

**14.去重**

// new Set
    new Set([1, 2, 1, 2]);
    
    // 遍历
    function uniq(arr) {
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1);
            i--;
          }
        }
      }
      return arr;
    }

**15.拍平数组**

// flat
    [1, [1, [3, 4]]].flat(3);
    
    // 递归
    function flat_y(arr) {
      let res = [];
      for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
          res = res.concat(flat_y(arr[i]));
        } else {
          res.push(arr[i]);
        }
      }
      return res;
    }

**16.深拷贝**

**17.跨域解决方案**

域名协议端口都相同才叫做同源

*  jsonp

借助script标签实现跨域

ps: 已经过时了为什么还要考

*  webpack-dev-server proxy

proxy: {
        '/api': {
            target: 'http://127.0.0.1:7001/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/api'
            }
        }
    }

*  cors

Access-Control-Allow-Origin: http://www.test.com
    Access-Control-Allow-Credentials: true
    Access-Control-Expose-Headers: FooBar
    Content-Type: text/html; charset=utf-8

*  node server请求转发

知识点还不完善，可以作为复习目录，后面会继续完善和更新，欢迎点赞和关注呀。

**下面分享一份我整理的前端校招面试题，分了HTML、css、JavaScript、React、Vue、浏览器、服务端与网络、算法等等，共280页PDF。**

![b04ffb511a2334fd2d769557ef468daa.png][]

![3dbbb98241800377c15cd9f45ebe9b2b.png][]

#### 完整版面试题资料免费分享，只需你点赞支持，[动动手指点击此处就可免费领取了][Link 1]。 ####

[b04ffb511a2334fd2d769557ef468daa.png]: /images/20221022/b3e77f3be4144f449f08a8c03cc93b5a.png
[3dbbb98241800377c15cd9f45ebe9b2b.png]: /images/20221022/59c06584cd304fbfb751cff2a5262e4a.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=SBb7oFqq