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

相关文章
|
4天前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
13 1
|
16天前
|
JavaScript 前端开发
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
10 1
|
24天前
|
JavaScript 前端开发
获取JavaScript时间戳函数的5种方法
获取JavaScript时间戳函数的5种方法
18 0
|
24天前
|
JavaScript 前端开发
js数字(Number)方法汇总
js数字(Number)方法汇总
9 0
|
24天前
|
存储 JavaScript 前端开发
|
19天前
|
XML 存储 JavaScript
深入理解JS语法与变量
深入理解JS语法与变量
31 1
|
19天前
|
JavaScript 前端开发
【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!
在JavaScript开发中,经常需要对数组、对象等数据结构进行遍历操作。为了提高开发效率,JavaScript提供了多种灵活的遍历方法。本文将介绍JavaScript中常用的数据结构遍历方法,助你更好地操作数据。
|
24天前
|
JavaScript 前端开发 索引
js遍历数组和对象的常用方法有哪些?
js遍历数组和对象的常用方法有哪些?
11 0
|
24天前
|
JavaScript
js中有关字符串的方法
js中有关字符串的方法
7 0
|
26天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程方法及应用
在传统的 JavaScript 开发中,对于异步操作的处理一直是一个挑战。本文将介绍 JavaScript 中常用的异步编程方法,包括回调函数、Promise 对象、async/await 等,并结合实际案例展示它们的应用,帮助开发者更好地理解和应用异步编程技术。
7 0

相关产品

  • 云迁移中心