我的javascript学习测试

简介: 我的javascript学习测试

一. 数组


  • push()


当push方法中传入的是一个数组/数组变量时,这该数组会直接插到原数组内,而并不会转换成一个个元素,然后再插入


let arr = [1,2,3]
    arr.push([7,8,9])
    let arr1 = [4,5,6]
    arr.push(arr1)
    console.log(arr)



  • unshift()


当使用该方法插入元素时,当我们从前端插入多个元素,是按着传入的顺序插入的,而不是写在前面的元素先插入。而且当插入一个数组或数组变量的时候,也是直接插入,不会转换


let arr = [1,2,3]
    arr.unshift([0],'zh', 'hy')
    console.log(arr)



  • concat()


当传入的是一个数组/数组变量时,这该数组会转换成一个个元素,组成新数组


let arr = [1,2,3]
    let arr1 = ['中国', '骄傲']
    let arr2 = arr.concat(['zh', 'hy'])
    console.log(arr2)



  • indexOf()


数组传入变量,则会将变量的值放入数组,但是我们利用indexOf()方法查找时却找不到,但是我们传入变量时,则会找到


let a = {name: 'zh'}
    let b = 9
    let c = [6,7]
    let arr1 = [a,b,c, {name: 'hy'}, ['中国']]
    console.log(arr1)
    // 这里查找的是基本数据类型,所以可以查到
    console.log(arr1.indexOf(9))//1
    //当查找引用类型的时候,则只能查找变量,因为变量保存的是引用地址,而非值
    console.log(arr1.indexOf(a))//0
    console.log(arr1.indexOf(c))//2
    console.log(arr1.indexOf({name: 'zh'}))//-1
    console.log(arr1.indexOf(6))//-1
    // 虽然直接访问数组里的引用类型的元素,但是在给位置存的仍然是地址,因此查找不到
    console.log(arr1.indexOf({name: 'hy'}))//-1
    console.log(arr1.indexOf(['中国']))//-1




  • every()


这个方法只有当该方法的参一的回调函数的返回值都返回true时,它才返回true,否则返回false


let arr = [1,2,3,4,5,6,7]
    let resTrue = arr.every(() => true)
    let resFalse = arr.every((item) => item > 1)
    console.log(resTrue,resFalse)//true  false


  • reduce()


该方法的参一回调函数就收4个参数: 前一个值(prev)当前值(cur)项的索引(index)数组对象,参二是:prev的初始化值。如果加上参二,则prev的值就是我们加上的值,如果没有加,则prev初始化的值就是数组的第一项


//加了初始化值0
    let arr = [1,2,3,4,5,6,7]
    arr.reduce((pre, cur) => {
      console.log(pre)
      return pre + cur
    },0)
    //没加初始化值
    let arr = [1,2,3,4,5,6,7]
    arr.reduce((pre, cur) => {
      console.log(pre)
      return pre + cur
    })



二. 正则(RegExp)


  • RegExP的实例属性source


返回的是正则匹配的字面量的字符串形式,而非构造函数中字符串模板


let reg1 = /\[bc\]at/i
    let reg2 = new RegExp('\\[bc\\]at','i')
    console.log(reg1.source)
    console.log(reg2.source)



  • RegExp的实例方法exec()


它只接受一个参数,即要应用模式的字符串,返回值:如果没有匹配到,则返回null,反之,返回一个数组,并且额外包含两个特有的属性indexinput,前者表示配到的字符串开始的下标值,后者表示应用正则表达式的字符串。而数组中,第一项是匹配到的字符串,剩下的都是与模式中的捕获组(就是用()括起来的正则部分)匹配的字符串。


利用这个方法来多次匹配同一个字符串时,使用全局匹配和不适用全局匹配有很大差异


没有全局匹配标志时,多次匹配同一个字符串,每一次都会从头开始匹配,而不会接着上一次匹配


let str = "cat, bat, fat, dat"
    // 非全局匹配
    let reg = /.at/
    let res1 = reg.exec(str)
    console.log(res1[0])//cat
    console.log(res1.index)//0
    console.log(res1.input)//"cat, bat, fat, dat"
    //这个属性的意思是开始匹配下一项时的位置
    console.log(reg.lastIndex)//0
    console.log(res1)
    console.log('-----------------------------------')
    let res2 = reg.exec(str)
    console.log(res2[0])//cat
    console.log(res2.index)//0
    console.log(res2.input)//"cat, bat, fat, dat"
    console.log(reg.lastIndex)//0
    console.log(res2)



有全局匹配标志时,多次匹配同一个字符串,每一次调用该方法匹配都会接着在上一次匹配到的字符串后继续匹配,而不会从第一个字符开始匹配


let reg = /.at/g
    let res1 = reg.exec(str)
    console.log(res1[0])//cat
    console.log(res1.index)//0
    console.log(res1.input)//"cat, bat, fat, dat"
    //这个属性的意思是开始匹配下一项时的位置
    console.log(reg.lastIndex)//3
    console.log(res1)
    console.log('-----------------------------------')
    let res2 = reg.exec(str)
    console.log(res2[0])//bat
    console.log(res2.index)//5
    console.log(res2.input)//"cat, bat, fat, dat"
    console.log(reg.lastIndex)//8
    console.log(res2)



三. 函数


  • 如果同时使用函数声明和函数表达式(当变量名和函数不同名时),那么我们调用的时候只能用表达式变量调用函数


let sum = function add(x1, x2) {
      return x1 + x2
    }
    console.log(sum(1,2))
    console.log(add(1,2))



  • arguments的callee属性,该属性是一个指针,指向拥有这个arguments对象的函数,所以可以将他利用在递归函数上,来减少递归函数与函数名的耦合度


下面我们来看一下阶乘函数的递归算法


function factorial(num) {
      if(num <= 1) {
        return 1
      }else {
      //未与函数名联系起来
        return num * arguments.callee(num - 1)
      }
    }
    //将函数的引用复制给一个变量保存
    let trueFactorial = factorial
    factorial = function (num) {
      return num
    }
    console.log(trueFactorial(5))
    console.log(factorial(5))//5


注意: 在将原方法重写时,一定要用函数表达式,不能用函数声明,因为函数声明式定义函数,他会把声明提升,但是函数表达式不会。而且arguments.callee属性在严格模式下会报错



  • 函数对象的属性caller


这个属性保存着调用当前函数的函数的引用(注意:是调用当前函数的函数)即一层嵌套函数


function outer() {
      inner()
    }
    //这里显示的是inner函数,而非outer
    function inner() {
      foo()
      function foo() {
        console.log(foo.caller)
      }
    }
    outer()


注意: es5还定义了arguments.caller属性,在严格模式下访问它会导致错误,而在非严格模式下始终为undefined,定义它是为了区分它与函数的caller属性



  • 函数的length属性


获取函数形参的个数


  • 在严格模式下,未指定环境对象而直接调用函数,则this指向的是undefined


四. 字符串


  • slice(),substr(),substring()方法的区别


这三个方法均可接受两个参数,第一个参数都是开始截取的位置,而slice(),substring()方法的第二个参数是截取的结束位置,substr()方法则是截取字符串的个数


let str = "hello world"
    // slice方法
    let res1 = str.slice(1, 6)
    console.log(res1)
    // substring方法
    let res2 = str.substring(1, 6)
    console.log(res2)
    //substr方法
    let res3 = str.substr(1, 6)
    console.log(res3)



当传递的参数是负数的情况下,slice()方法将传入的负值与字符串长度相加来确定其位置。substr()方法只有第一个参数是与串长相加来确定位置,而第二个参入的负数转为0。substring()方法会把所有的负数都转为0,并且转化后如果第二个参数小于第一个参数,那么它将会自动交换下标位置。


let str = "hello world"
   let res1 = str.slice(3,-4)
   console.log(res1)//lo w
   //substr方法
   let res2 = str.substr(3,-4)
   console.log(res2)//""
   // substring方法
   let res3 = str.substring(3,-4)
   console.log(res3)//hel



*match()


该方法接收一个参数,该参数可以是字符串也可以是字符串,返回值和调用正则的exec()方法一样。


let str = "hello world"
    let res = str.match('o')
    console.log(res)



  • charAt(), charCodeAt(), String.fromCharCode()
    charAt()是一个实例方法,当传入下标时,返回对应位置的字符串
    charCodeAt()是一个实例方法,当传入下标时,返回对应位置的字符串的字符编码String.fromCharCode()是一个静态方法,它可以接受任意个字符编码,返回对应字符编码的字符串


let str = "hello world"
    // charAt方法
    console.log(str.charAt(2))
    //charCodeAt方法
    console.log(str.charCodeAt(2))
    // fromCharCode方法
    console.log(String.fromCharCode(73,32,108,111,118,101,32,121,111,117))



五. 单体内置对象


  • Global对象


这个对象就很奇怪,不管你从那种角度上看,这个对象多是不存在的。其实,不属于任何其他对象的属性和方法,最终都是他的属性和方法(isNaN(), isFinite(), parseInt(), parseFloat()....)


  • URI编码方法


 该方法可以对URI(通用资源标识符)进行编码,以便发送给浏览器。有效的URI中不能包含某些特殊的字符,例如空格。则该方法用特殊的UTF-8编码替换掉这些特殊字符。  


  • encodeURI()   主要用于整个URI,因为它不会对本身属于URI的特殊字符进行编码  
  • encodeURIComponent()     主要用于编码URI中某一段,因为他会对URI中任何非标准字符进行编码。  


  • decodeURI()用于对encodeURI编码的字符解码  


  • decodeURIComponent()能够解码任何特殊字符的编码


// 编码
    let uri1 = 'https://www.bai du.com'
    console.log(encodeURI(uri1))
    console.log(encodeURIComponent(uri1))
    //解码
    let uri2 = 'https%3A%2F%2Fwww.bai%20du.com'
    console.log(decodeURI(uri2))
    console.log(decodeURIComponent(uri2))


一般来说,我们使用encodeURIComponent()方法更多,因为在实践中更常见的是查询字符串参数而不是对基础URI进行编码



六. Math对象


Math的属性Math.E: 自然对数的底数


  • Marh.LN10:10的自然对数

  • Math.Ln2:2的自然对数

  • Math.LOG2E:以2为底e的对数

  • Math.LOG10E:以10为底e的对数

  • Math.PI:π的值

  • Math.SQRT1_2:1/2的平方根

  • Math.SQRT2:2的平方根

  • 确定数组中最大值,最小值的简单方法


    • 利用三点运算符
    • 利用apply调用max,min函数


    let arr = [3,87,26,0,44,23]
        let max1 = Math.max.apply(this,arr)
        let max2 = Math.max(...arr)
        console.log(max1,max2)



    七. 创建对象



    • 工厂函数模式:解决了创建对象像是对象问题,但是没有解决对象识别问题(即怎么知道一个对象的类型)。


    • 构造函数模式:创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型。


    任何函数,只要通过new操作符来调用,那他就可以作为构造函数。反之,任何函数,如果不通过new操作符来调用,那他和普通函数是一样的。


    function Foo(name) {
          this.name = name
          this.show = function() {
            return console.log(this.name)
          }
        }
        // 当做构造函数使用
        let foo = new Foo('zh')
        foo.show()
        // 作为普通函数调用
        Foo('zh')
        show()
        //在另一个对象的作用域中调用
        let obj = {}
        Foo.call(obj,'zh')
        obj.show()



    构造函数的主要问题在于,来此调用同一个构造函数来创建实例,每个方法都要在每个实例中重新创建一遍,浪费内存空间。


    原型模式:创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型。(即将所有共享的属性和方法都写在构造函数的原型上)


    • isPrototypeOf()判断实例内部属性[[Prototype]] (即__proto__)是否指向该原型对象


    function Bar(name) {
          this.name = name
        }
        let bar = new Bar('zh')
        let res = Bar.prototype.isPrototypeOf(bar)
        console.log(res)//true,表示bar 内部属性是指向Bar.prototype原型对象的


    • 实例只能访问原型中的值,但是不能修改原型中的值,如果实例添加了一个与原型中属性同名的属性,那么添加的这个属性只会阻止我们访问原型中的那个属性,但是不会修改那个属性。


    function Bar() {
        }
        Bar.prototype.name = 'zh'
        let bar1 = new Bar()
        let bar2 = new Bar()
        bar1.name = 'hy'
        console.log(bar1.name)//hy
        //bar2访问name属性并没有被修改                                               
        console.log(bar2.name)//zh


    • hasOwnProperty() 用来检测一个属性是属于实例本身还是存在于原型中。当被检测属性来自于实例时,返回true


    function Bar() {
        }
        Bar.prototype.name = 'zh'
        let bar1 = new Bar()
        let bar2 = new Bar()
        bar1.name = 'hy'
        let res1 = bar1.hasOwnProperty('name')
        let res2 = bar2.hasOwnProperty('name')
        console.log(res1)//true
        console.log(res2)//false


    • in操作符


    单独使用in时,只要对象能有访问到检测属性(不管是原型中的还是实例自己的),它都返回true


    //封装一个检测属性是否属于原型的函数
        function hasPrototypeProperty(obj, key) {
          return !obj.hasOwnProperty(key) && (key in obj)
        }
        //测试
        function Bar() {
        }
        Bar.prototype.name = 'zh'
        console.log(Object.getOwnPropertyDescriptor(Bar.prototype,'name'))
        let bar1 = new Bar()
        let bar2 = new Bar()
        bar1.name = 'hy'
        res1 = hasPrototypeProperty(bar1, 'name')
        res2 = hasPrototypeProperty(bar2, 'name')
        console.log(res1)//false
        console.log(res2)//true


    原型模式存在的问题


    • 不能向构造函数传参。导致每个实例的默认属性值都一样


    • 原型中的所有属性和方法都是共享的,这种共享对于函数和基本类型都很好(如果实例中定义了与原型中同名的属性和方法,则它们会屏蔽原型上的方法和属性)。但是对于应用类型值,则不是我们想要的结果。当改变一个实例中的应用类型属性值时(即改变原型中的属性值),其他属性访问该属性时,值也会变化。


    function Person() {
        }
        Person.prototype = {
          constructor: Person,
          name: 'zh',
          age: 20,
          height: 175,
          weight: 50,
          friends: ['jcl', 'hcy'],
          show() {
            return `我叫${this.name},今年${this.age},体重${this.weight}斤,身高${this.height}cm`
          }
        }
        let p1 = new Person()
        let p2 = new Person()
        p1.name = 'hy'
        //通过p1改变数组frieds,则p2访问该数组时,也被改变
        p1.friends.push('zjh')
        p1.show = function() {
          return '111'
        }
        console.log(p1.show())
        console.log(p2.name)
        console.log(p2.friends)
        console.log(p2.show())



    • 构造函数模式和原型模式组合


    构造函数中用于定义实例的属性,原型上用于定义共有的属性和方法


    • 动态原型模式


    通过在构造函数中使用if判断来表明是否创建该属性或方法。


    • 寄生构造函数模式


    在构造函数中初始化一个对象,并给对象添加属性和方法,然后返回该对象。


    • 稳妥构造函数模式


    稳妥对象:没有公共属性,而且其方法中不能引用this的对象。所以它提供了安全的环境。


    它类似于寄生构造函数模式,区别在于:创建新对象的实例方法不能应用this,不能使用new操作符调用构造函数。


    function Person(name, age, job) {
          let obj = new Object()
          obj.show = function() {
            console.log(name)
          }
          return obj
        }
        let p = Person('zh', 20, 'student')
        p.show()//只有调用show方法才可以访问其数据成员


    注意:使用稳妥构造函数模式,寄生构造函数模式创建的实例对象与构造函数之间没有任何关系。所以不能依赖instanceof来判断对象的类型。


    相关文章
    |
    1月前
    |
    安全 关系型数据库 测试技术
    学习Python Web开发的安全测试需要具备哪些知识?
    学习Python Web开发的安全测试需要具备哪些知识?
    34 4
    |
    2天前
    |
    数据采集 人工智能 自然语言处理
    Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
    Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
    53 1
    Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
    |
    1月前
    |
    Web App开发 JavaScript 前端开发
    如何学习JavaScript?
    如何学习JavaScript?
    48 5
    |
    1月前
    |
    JavaScript 前端开发 索引
    JavaScript学习第二章--字符串
    本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
    30 2
    |
    1月前
    |
    存储 JavaScript 前端开发
    JavaScript学习第一章
    本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
    54 1
    |
    1月前
    |
    机器学习/深度学习 自然语言处理 前端开发
    前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
    本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
    136 1
    |
    2月前
    |
    自然语言处理 机器人 Python
    ChatGPT使用学习:ChatPaper安装到测试详细教程(一文包会)
    ChatPaper是一个基于文本生成技术的智能研究论文工具,能够根据用户输入进行智能回复和互动。它支持快速下载、阅读论文,并通过分析论文的关键信息帮助用户判断是否需要深入了解。用户可以通过命令行或网页界面操作,进行论文搜索、下载、总结等。
    71 1
    ChatGPT使用学习:ChatPaper安装到测试详细教程(一文包会)
    |
    1月前
    |
    前端开发 JavaScript 安全
    学习如何为 React 组件编写测试:
    学习如何为 React 组件编写测试:
    43 2
    |
    1月前
    |
    编解码 安全 Linux
    网络空间安全之一个WH的超前沿全栈技术深入学习之路(10-2):保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali——Liinux-Debian:就怕你学成黑客啦!)作者——LJS
    保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali以及常见的报错及对应解决方案、常用Kali功能简便化以及详解如何具体实现
    |
    1月前
    |
    人工智能 安全 Linux
    网络空间安全之一个WH的超前沿全栈技术深入学习之路(4-2):渗透测试行业术语扫盲完结:就怕你学成黑客啦!)作者——LJS
    网络空间安全之一个WH的超前沿全栈技术深入学习之路(4-2):渗透测试行业术语扫盲完结:就怕你学成黑客啦!)作者——LJS