JS基本变量,常用方法,this,正则

简介: JS基本变量,常用方法,this,正则

数据类型检验

image.png

typeof

识别值类型,函数,typeof null object

字符串

charAt

image.png

substring

image.png
image.png
a可以大于b,会自动换成小的在前

substr

image.png
省略第二个参数和substring一样

image.png

slice

image.png

image.png

image.png

大写,小写

image.png

indexOf

image.png

数据类型转化

Number

NAN==NAN false
image.png
image.png

  • Number({ }) //NaN
  • Number([ ])//0

    parseInt

image.png

parseFloat

image.png

String

image.png

toString

image.png

image.png

Boolean

image.png

  • Boolean({ }) //true
  • Boolean([ ]) //true

    js

image.png

image.png
image.png

短路运算

主要是看前一个决定了结果,就返回前一个,否则就返回后一个

逻辑运算符非>与>或
image.png

image.png

image.png

运算顺序:非运算→数学运算-→关系运算→逻辑运算(&&>||)

数组方法

image.png
shift pop 返回值是删除的值

slice

image.png

image.png

splice

image.png

image.png

join split

image.png

字符串可以使用中括号

image.png

concat

image.png

reverse

image.png

indexOf includes

image.png
对于这两个方法数组里有22,搜索‘22’不会有结果因为是使用===判断的

冒泡排序

image.png

复杂数据类型

image.png

image.png

深克隆、浅克隆

利用forin 浅拷贝

image.png

深拷贝

function deepClone(o) {
   
   
  if (Array.isArray(o)) {
   
   
    let result = []
    for (const key in o) {
   
   
      result.push(deepClone(o[key]))
    }
    return result
  } else if (typeof o == 'object') {
   
   
    let result = {
   
   }
    for (const key in o) {
   
   
      result[key] = deepClone(o[key])
    }
    return result
  } else {
   
   
    return o
  }
}
const a = {
   
   
  b: '123',
  c: {
   
   
    d: 4,
    r: 5,
  },
  f: [1, 2, 3, 4, 5],
}
let copy = deepClone(a)
a.c.d = 999
a.f[0]=666
console.log(copy)
console.log(a)

上下文

函数的上下文由调用函数的方式决定

image.png

规则一

image.png
image.png

规则二

image.png

image.png

规则三

image.png

image.png

规则四立即执行函数

image.png

image.png

规则五,定时器,延时器里面那个函数的this指向

image.png

image.png

image.png

规则六

image.png
备份上下文

image.png

image.png

定时器内使用箭头函数,this是包裹箭头函数的父函数的this指向,要注意父函数是不是箭头函数

const obj = {
    num: 10,
    outf: outFun
}

function outFun() {
    console.log('outFun', this); // obj

    setTimeout(function() {
        console.log('outFun', this); // window
    });

    setTimeout(() => {
        console.log('outFun', this); // obj
    });
}
obj.outf();
const obj = {
   
   
    num: 10,
    outf: outFun
}
const outFun = () => {
   
   
    console.log('outFun', this); // window

    setTimeout(function() {
   
   
        console.log('outFun', this); // window
    });

    setTimeout(() => {
   
   
        console.log('outFun', this); // window
    });
}
obj.outf();

call applay

image.png

image.png

image.png

用new调用函数

image.png

构造函数

image.png
什么是构造函数

  • 用new调用一个函数,这个函数就被称为"构造函数”,任何函数都可以是构造函数,只需要用new调用它
  • 顾名思义,构造函数用来"构造新对象”,它内部的语句将为新对象添加若干属性和方法,完成对象的初始化
  • 构造函数必须用new关键字调用, 否则不能正常工作,正因如此,开发者约定构造函数命名时首字母要大写

    如果不用new调用构造函数

image.png
全局this window

构造函数中的this不是函数本身,this是那个秘密创建的空对象

image.png

什么是prototype

  • 任何函数都有prototype属性
  • prototype属性值是个对象,它默认拥有constructor属性指回函数

image.png

  • 构造函数的prototype是实例的原型
    image.png

    has0wnProperty / in

    has0wnProperty方法可以检查对象是否真正“自己拥有某属性或者方法既不是从原型链上的获取的属性或方法
xiaoming.hasOwnProperty('name');
// true
xiaoming . hasOwnProperty('age');
// true
xiaoming.hasOwnProperty('sex');
// true
xiaoming. hasOwnProperty('nationality');
// false

in运算符只能检查某个属性或方法是否可以被对象访问,不能检查是否是自己的属性或方法

'name' in xiaoming // true
'age' in xiaoming // true
'sex' in xiaoming // true
'nationality' in xiaoming // true

将方法写到prototype上

把方法直接添加到实例身上的缺点:每个实例和每个实例的方法函数都是内存中不同的函数,造成了内存的浪费

image.png
image.png\
返回TRUE

原型链的终点

image.png
数组

image.png

利用原型链实现继承

image.png

image.png

包装类

image.png

image.png

image.png

Math

image.png

image.png

image.png
求数组最大值 Math.max(...arr)

image.png

Data

image.png

正则

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png
image.png

相关文章
|
20天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
18天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
114 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
28 5
|
20天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
24 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
38 7
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
1月前
|
JavaScript 前端开发 开发者