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

前言

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

如何截取字符串

<!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>

总结

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

posted @   前端导师歌谣  阅读(5)  评论(0)  编辑  收藏  举报  
相关博文：
·  前端小知识点扫盲笔记记录8
·  前端小知识点扫盲笔记记录5
·  【面试题】 JavaScript 字符串截取方法有哪些？
·  javascript学习系列(25):数组中的substr
·  javascript学习系列(25):数组中的substr
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示