前端笔记：javascript基础

发表于 分类于 本文字数： 3.1k 阅读时长 ≈ 3 分钟
javascript面试题

# javascript 笔记

# js 的数据类型

基本数据类型：Number、String、Boolean、Null、Undefined、Object、（Symbol、bigInt）
引用数据类型：Array、Function、Object
Null 只有一个值，是 null。不存在的对象。
Undefined 只有一个值，是 undefined。没有初始化。undefined 是从 null 中派生出来的。
简单理解就是：undefined 是没有定义的，null 是定义了但是为空。

Symbol 类型的对象永远不相等，即便创建的时候传入相同的值。因此，可以用解决属性名冲突的问题（适用于多少编码），做为标记。

# var，let，const 的区别

  • var 全局变量，能重复声明
  • let 局部变量，代码块内有效，不能重复声明
  • const 常量，一旦声明，常量的值就不能改变，就必须立即初始化，不能留到以后赋值

# es6 有哪些新特性

  • let const
  • 模板字符串
  • 扩展运算符
  • 解构赋值
  • 箭头函数
  • Promise、async/await
  • 数组新方法：map、filter、reduce、some、every

# 检测数组类型的方法

  • instanceof of， 例：arr instanceof Array
  • constructor , 例：arr.constructor === Array
  • Array.isArray(arr)
  • call 方法，例：Object.prototype.toString.call (arr) === ‘[object Array]’

# 数组的方法

  • 改变原数组：push、pop、shift、unshift、sort、splice、reverse
  • 不改变原属组：concat、join、map、forEach、filter、slice

# 字符串方法

1 charAt (x) 返回字符串中 x 字符的位置，下标从 0 开始
2 charCodeAt (x) 返回字符串中 x 位置处字符的 unicode 值
3 concat () 用于连接两个或多个字符串
4 fromCharcode () 将一组 Unicode 码转换为字符
5 indexOf (substr, [start]) 返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。
6 lastIndexOf (substr, [start]) 返回指定文本在字符串中最后一次出现的索引，如果未找到，则返回 - 1。
7 match (regexp) 根据正则表达式在字符串中搜索匹配项。如果没有找到匹配项，则返回 null。
8 replace (regexp/substr, replacetext) 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
9 search (regexp) 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，如果找到，返回与 regexp 相匹配的子串的起始位置，否则返回 -1。
10 slice (start, [end]) 裁取字符串的某个部分，返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符
11 split (delimiter, [limit]) split () 方法用于把一个字符串分割成字符串数组，返回一个字符串数组，返回的数组中的字串不包括 delimiter 自身。 可选的 “limit” 是一个整数，允许各位指定要返回的最大数组的元素个数。
12 substr (start, [length]) 在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串，包含从 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到该字符串的结尾的字符。
13 substring (start,stop) 用于提取字符串中介于两个指定下标之间的字符
14 toLowerCase () 把字符串转换为小写。
15 toUpperCase () 把字符串转换为大写。
16 includes () 检查字符串是否包含指定的字符串或字符。
17 endsWith () 检查字符串是否以指定的字符串或字符结束。
18 repeat () 将字符串复制指定次数。
19 valueOf () 返回一个 String 对象的原始值（primitive value），该值等同于 String.prototype.toString ()。
20 trim () 从一个字符串的两端删除空白字符。

# 匿名函数和箭头函数

  • function 后并没有给函数命名，而是把整个函数直接赋值给变量 abs，调用时通过 abs (9) 来调用此函数。
  • 箭头函数的定义用的就是一个箭头。箭头函数表面上相当于匿名函数，并且简化了函数定义。
    当箭头函数只包含一个表达式时，它连 {…} 和 return 都省掉了。

# 水平垂直居中的方法

# 定位法

  • 定位，position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
  • 定位，position: absolute; top: 50%; left: 50%; transform: translate (-50%, -50%);
  • 定位，(已知子元素宽高) width:100px;height:100px;position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px;

# flex 布局

  • diplay: flex; justify-content: center; align-items: center;

# grid 网格布局

  • diplay: grid; align-items:center;justify-content: center;

# table 表格布局

  • 设置父元素为 display:table-cell，子元素设置 display: inline-block。利用 vertical 和 text-align 可以让所有的行内块级元素水平垂直居中

# 继承的方式

  • 原型继承：不能传参
  • 组合继承： 调用了两次父类的构造函数，不共享父类引用属性
  • 寄生组合继承：
  • ES6 的 extend：子类只要继承父类，可以不写 constructor ，一旦写了，则在 constructor 中的第一句话必须是 super

# 深拷贝和浅拷贝

# 深拷贝

  • JSON.parse(JSON.stringify(obj))

Function 序列化过程会被忽略
Date 序列化成 ISO 格式的字符串
undefined, NaN, Infinity, Symbol 会在序列化后变成 null
RegExp, Map, Set 序列化成 {}
循环引用（自己引用自己）会报错

  • 递归拷贝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function deepCopy(obj) {
  // 判断是否为null或者不是对象
  if (obj && typeof obj !== 'object') {
    return obj;
  }
  // 判断是对象还是数组
  let copy = Array.isArray(obj) ? [] : {};
  // 遍历
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 递归
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

# 浅拷贝

  • let obj1 = Object.assign({}, obj)
  • 扩展运算符
1
let obj1 = { ...obj }
  • Array.prototype.slice()
  • Array.prototype.concat()