JavaScript基础知识

boygdm
143 阅读6分钟

序号知识类目知识分类
1JAVASCRIPTJavaScript es6 es7 es8
2CSScss css3 flex box Model
3HTMLhtml html5 jsx webComponent
4VUE2/VUE3vue全家桶 ( vue-cli vue-router vuex vue-devTool axios )
5REACTReact全家桶 ( react-dom react-router axios redux/mBobx redux-thunk redux-saga antd/Material-UI/blueprintJS )
6TYPESCRIPTTypescript Typescript+Vue Typescript+React
7NODEJSNodeJs Express Koa Mysql mongDb
8（HYBRIB/NATIVE）APPMinProgram MinProgram+Vue(uniapp, mpvue) MinProgram+React(taro) ReactNative weex flutter
9WEBPACKwebpack webpack-cli webpack_vue webpack+react gulp
10DESKTOP APPElectron Vue+Electron React+electron

1、由浅入深，66条JavaScript面试知识点

1、javascript的基础。

  • 基本数据类型： String, Boolean, Number,Symbol, Null, Undefined 。
  • 引用数据类型：Array，Object，如果呀细分的话有Date，Object，Array，RegExp，Function。
  • 基本数据类型用typeof 来查看基础数据类型的类型。
  • 复杂类型（null，数组，对象）可用 Object.prototype.toString.call()方法和instance()来实现。
    • Object.prototype.toString.call(null) // [object null]
    • Object.prototype.toString.call([]) // [object Array]
    • Object.prototype.toString.call({}) // [object Object]
  • 数据类型的转换： 分为显式类型转换和隐式类型转换
    • 显式类型
      • Number:Number('12px') 类型是NaN 。
      • NaN : NaN的数据类型书Number。注意：NaN和任何东西都不相等，包括自己。
      • isNaN（）会先把数据用Number转化，转化完了之后在判断是不是NaN，如果是NaN则返回为true。否则返回为fasle isNaN('abc') 结果是true。
    • 隐式类型
      • 只有当加法运算时，其中一方是字符串类型，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串。
  • ECMA 数组方法
    • 进出栈操作（返回数组的长度）
      • 左进右出 unshift() --> pop()
      • 右进左出 push() --> shift()
    • 数组转字符串（原数组不变）
      • join() arrayObject.join(separator) separator 指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
      • toString()
    • 数组排序
      • 正序排列:实现对字符串的排序 sort() ,要实现对数值的排序需要用函数const sort = (a,b) => a-b
      • 反序排列：reverse()
    • 数组的合并
      • concat ()
      • 扩展运算符 [...a, ...b, ...rest]
      • for循环 for(var i in b){a.push(b[i])}
      • apply() a.push.apply(a,[4,5,6]);
    • 数组的分割
      • slice(index,length) 返回从原数组中指定开始下标到结束下标之间的项组成的新数组
    • 数组的复制（克隆）
      • concat() 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
      • ES6 中的扩展运算符来复制数组 var arr2 = [...arr1]
      • slice() 方法实现数组的深拷贝 var arr2 = arr.slice(0)
      • for in 循环 function copyObj(obj) {let res = {};for (var key in obj){res[key] = obj[key]}return res}
    • splice()：删除、插入和替换。
      • 删除：指定 2 个参数：要删除的第一项的位置和要删除的项数。arr.splice( 1 , 3 )
      • 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。arr.splice( 2,0,4,6 )
      • 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。arr.splice( 2,0,4,6 )
    • 类似数组的对象，Array.from()将它转为真正的数组
    • 数组元素的查找和过滤
      • indexOf() ：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
      • lastIndexOf() ： 接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
      • find() : 用于找出第一个符合条件的数组成员。
      • findIndex() : 返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
      • filter() : filter()返回的是数组，数组内是所有满足条件的元素,如果条件不满足，filter()返回的是一个空数组，而find()返回的是undefined。数组去重案列-> myArr.filter((value,index,arr)=>arr.indexOf(value)===index)
      • Array.some() 测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。数组中有至少一个元素通过回调函数的测试就会返回true；所有元素都没有通过回调函数的测试返回值才会为false。arr5.some(function(item){return item > 29})
      • include() 表示某个数组是否包含给定的值。
    • 数组实例的 flat()，flatMap()
      • flat() 数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
      • flatMap() flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
  • ECMA 字符串方法
    • toLowerCase(): 把字符串转为小写，返回新的字符串。
    • toUpperCase(): 把字符串转为大写，返回新的字符串。
    • indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置
    • lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置。
    • slice(): 返回字符串中提取的子字符串。
    • substring(): 提取字符串中介于两个指定下标之间的字符。
    • substr(): 返回从指定下标开始指定长度的的子字符串。
    • split(): 把字符串分割成字符串数组。
    • replace(): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
    • match(): 返回所有查找的关键字内容的数组。
    • includes()：返回布尔值，表示是否找到了参数字符串。
    • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

2、基本数据类型和引用类型的区别。

  • 基本数据类型在创建的时候，直接将数据储存在栈上。
  • 引用数据类型在创建的时候，现在栈上创建一个引用，而对象的具体内容都存储在堆上，然后由栈上面的引用指向堆中的对象的地址。

3、基本数据类型的引用和引用数据类型的拷贝有什么区别。

  • 对于基本数据类型来说是没有深拷贝的。
  • 引用数据类型的深拷贝方法有，

4、如何实现一个深拷贝？

  • 1、深度递归复制所有的顶层属性。
  • 2、除了递归，我们还可以借助，JSON对象和parse和stringif有。（注意： 数组的concat和slice并不是真正的深拷贝）。
  • 3、可以借助jQuery的extentd方法。 $.extend( [deep ], target, object1 [, objectN ] ) 。
  • 4、lodash的_.cloneDeep()

5、通过JSON.stringify的方式实现深拷贝，会有什么问题。

如果值是undefined，function等，在转化的时候会丢失，所以还是要慎重使用JSON.stringify来做深拷贝。

6、通过递归的方式实现拷贝，会有什么问题。

  • 循环引用和重复引用的问题。

7、数组去重的方式有哪些（手写）

  • 数组去重的第一种方式 indexOf（）方法
function unique(arr){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i])
        }
    }
    return newArr;
}
  • 数组去重的第二种方式 优化遍历数组法 （双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length，将没重复的右边值放入新数组。（检测到有重复值时终止当前循环同时进入外层循环的下一轮判断））
function unique(arr){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        for(var j = i+1; j < arr.length; j++){
            if(arr[i] == arr[j]){
                ++i;
            }
        }
        newArr.push(arr[i]);
    }
    return newArr;
}
  • 数组去重的第三种方式 Hash ( 利用对象的属性不能相同的特点进行去重 )
function unique(arr){
    var res = [];
    var obj = {};
    for(var i=0; i<arr.length; i++){
       if( !obj[arr[i]] ){
            obj[arr[i]] = 1;
            res.push(arr[i]);
        }
    } 
 return res;
}
  • 数组去重的第四种方式 （ 利用 ES6的set 方法 ）
function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  return [...new Set(arr)];
}

function unique(arr){
 return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}

8、 找出数组中最大的数（手写）

function getArrayMax(arr = []) {
  if (!arr.length) return;
  if (arr.length === 1) {
    return arr[0];
  }
  return Math.max(...arr);
}

9. 说一下事件循环的理解

  • js是单线程的语言， JavaScript 的 Event Loop ，单线程意味着，所有任务都需要排队，前一个任务结束，才会执行下一任务。所有有同步任务和异步任务。异步任务有。dom 操作。

宏任务：setTimeout(),setInterval()

微任务：new Promise(), new MutaionObserver()

宏任务优与微任务。

10. 快排是如何实现的，讲一下思路和复杂度

快排序 快排序分类

11、ECMAScript提供的全局函数有哪些。

  • parseInt() parseFloat() isNaN() encodeURL() decodeURL() encodeURLComponent() decodeURLComponent() eval()
avatar
文章
阅读
粉丝