前端小知识点扫盲笔记记录9

最新推荐文章于 2024-07-18 17:32:29 发布

前端歌谣

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量34

点赞数

文章标签：前端笔记 javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/130723356

版权

前言

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结

如何截取字符串

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>substr</title>
</head>

<body>
  <script>

    //start 是一个字符的索引。首字符的索引为 0，最后一个字符的索引为 字符串的长度减去1
    var str = "abcdefghij";
    //substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。
    console.log("(1,2): " + str.substr(1, 2)); // (1,2): bc
    //负数表示strLength + start 10
    console.log("(-3,2): " + str.substr(-3, 2)); // (-3,2): hi
    console.log("(-3): " + str.substr(-3)); // (-3): hij
    console.log("(1): " + str.substr(1)); // (1): bcdefghij
    console.log("(-20, 2): " + str.substr(-20, 2)); // (-20, 2): ab
    console.log("(20, 2): " + str.substr(20, 2)); // (20, 2):截取为空
  </script>
</body>

</html>

如何用javascript获取所有的checkbox值220422

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>js</title>
    </head>

    <script language="javascript">
        function aa() {
            var r = document.getElementsByName('r')

            for (var i = 0; i < r.length; i++) {
                if (r[i].checked) {
                    console.log(r[i].value + ',' + r[i].nextSibling.nodeValue)
                }
            }
        }
    </script>

    <body>
        <form name="form1" method="post" action="">
            <input type="checkbox" name="r" value="1" />a<br />
            <input type="checkbox" name="r" value="2" />b<br />
            <input type="checkbox" name="r" value="3" />c<br />
            <input type="checkbox" name="r" value="4" />d<br />
            <input type="checkbox" name="r" value="5" />e<br />
            <input type="checkbox" name="r" value="6" />f<br />
            <input type="checkbox" name="r" value="7" />g<br />
            <input type="checkbox" name="r" value="8" />h<br />
            <input type="checkbox" name="r" value="9" />i<br />
            <input type="checkbox" name="r" value="10" />j<br />
            <br />
            <input type="button" onclick="aa()" value="button" />
        </form>
    </body>
</html>

如果ul下面有1000个li

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    window.onload = function(){
      var ul=document.getElementById("ul")
     ul.onclick = function(e){
      e=window.event?window.event:e;
      var who=e.target?e.target:e.srcElement;
      console.log(who.innerHtml)
     }
    }
  </script>
</body>
</html>

字符串反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        function myreserve(arr){
            // var arr=new Array();
            for(var i=0;i<arr.length/2;i++){
                var temp=arr[i]
                arr[i]=arr[arr.length-i-1]
                arr[arr.length-i-1]=temp
            }
            return arr
        }
        console.log(myreserve(["1","2","3","4","5"]))
        //[5,4,3,2,1]
    </script>
</body>
</html>

宏任务和微任务

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>宏任务和微任务</title>
</head>

<body>
  <script>
    console.log(100)
    setTimeout(() => {
      console.log(200)
    })
    Promise.resolve().then(() => {
      console.log(300)
    })
    console.log(400)
    // 答案为： 100 400 300 200
    // setTimeout是个宏任务，而pormise是个微任务，微任务要比宏任务执行的要早
  </script>
</body>

</html>

实现一个删除字符串前后空格的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //去除前后空格
    String.prototype.deletePlace=function(){
      var str=this
      while(str[0]===" "){
        str.substring(1)
      }
      while(str[str.length-1]===" "){
        str.substring(0,str.length-1)
      }
      return str
    }


  </script>
</body>
</html>

寄生式继承

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>寄生式继承</title>
    </head>
    <body>
        <script>
            function object(obj) {
                function F() {}
                F.prototype = obj
                return new F()
            }

            function createAnother(original) {
                var clone = object(original) // 通过调用 object() 函数创建一个新对象
                clone.sayHi = function () {
                    // 以某种方式来增强对象
                    console.log('我是歌谣')
                }
                return clone // 返回这个对象
            }

            var person = {
                name: 'Nicholas',
                friends: ['Shelby', 'Court', 'Van'],
            }
            //调用方法
            var anotherPerson = createAnother(person)
            anotherPerson.sayHi() //"我是歌谣"
            //原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。无法传递参数
        </script>
    </body>
</html>

寄生组合式继承

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>寄生组合式继承</title>
    </head>
    <body>


        <script>
            function inheritPrototype(Son, Father) {
                var prototype = Object.create(Father.prototype) // 创建对象，创建父类原型的一个副本
                prototype.constructor = Son // 增强对象，弥补因重写原型而失去的默认的constructor 属性
                Son.prototype = prototype // 指定对象，将新创建的对象赋值给子类的原型
            }
0
            // 父类初始化实例属性和原型属性
            function Father(name) {
                this.name = name
                this.colors = ['red', 'blue', 'green']
            }
            Father.prototype.sayName = function () {
                console.log(this.name)
            }

            // 借用构造函数传递增强子类实例属性(支持传参和避免篡改)
            function Son(name, age) {
                Father.call(this, name)
                this.age = age
            }

            // 将父类原型指向子类
            inheritPrototype(Son, Father)

            // 新增子类原型属性
            Son.prototype.sayAge = function () {
                console.log(this.age)
            }
            var instance1 = new Son('xyc', 23)
            var instance2 = new Son('lxy', 23)

            instance1.colors.push('2') // ["red", "blue", "green", "2"]
            console.log(instance1)
            instance1.colors.push('3') // ["red", "blue", "green", "3"]
            console.log(instance1)
        </script>
    </body>
</html>

总结

我是歌谣最好的种树是十年前其次是现在加油歌谣

前端歌谣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小知识点扫盲笔记记录9

前言我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结如何截取字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati...
复制链接

扫一扫