JavaScript相关方法总结

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量53 收藏
点赞数
分类专栏： JS 文章标签： javascript
原文链接：https://blog.csdn.net/qq_52476758/article/details/121244057#comments_24911717
版权

JavaScript方法

  1. 以字符串的形式返回参数的类型
function _typeof(value) {
    return (typeof(value)).toString();
}
  1. 以Boolean的形式返回第一个参数是否属于第二个参数对象的实例
function _instanceof(left,right) {
    return Boolean(left instanceof right); 
}
  1. 以字符串的形式返回两个数字参数的拼接结果。
function _splice(left,right) {
    return left+''+right;
}
  1. 返回数字参数的阶乘。
function _factorial(number) {
    if(number<=1){
        return number;
    }else{
        return number*_factorial(number-1);
    }
}
  1. 要求返回数字参数的绝对值。
function _abs(number) {
    if(number>=0){
        return number;
    }else{
        return -number;
    }
}
  1. 要求返回底数为第一个参数，幂为第二个参数的数值。
function _pow(number,power) {
    return Math.pow(number,power);
}
  1. 返回数字参数的平方根。
function _sqrt(number) {
    return Math.sqrt(number,2);
}
  1. 返回数字参数除以2的余数。
function _remainder(value) {
    return value%2;
}
  1. 以字符串的形式返回数字参数所对应的星期。
function _getday(value) {
    return "星期"+['一','二','三','四','五','六','天'][value-1]
}
  1. 将数组参数中的数字从大到小进行排序并返回。
function _sort(array) {
    return array.sort(function(a,b){return b-a});
}
  1. 将字符串参数转换为大写字符串并返回。
function _touppercase(string) {
    return string.toUpperCase();
}
  1. 以数组的形式输出对象各个属性的键名。
function _keys(object) {
    return Object.keys(object);
}
  1. 将数字参数转换为对象的形式返回。
function _numbertoobject(number) {
    // 方法一
    // return {number};
    // 方法二
    if(typeof number=='number'){
        return new Number(number);
    }
}
  1. 将字符串参数转换为对象的形式返回。
function _stringtoobject(string) {
    // 方法一
    // return {string};
    // 方法二
    if(typeof string=='string'){
        return new String(string)
    }
}
  1. 去除参数字符串两端的空格并返回。
function _trim(string) {
    return string.trim();
}
  1. 以字符串的形式输出时间戳参数所对应的"年-月-日"
function _date(number) {
    let date=new Date(number);
    return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
}
  1. 返回数字参数的整数部分。
function _int(value) {
    return parseInt(value);
}
  1. 将参数数组反转之后返回。
function _reverse(array) {
    return array.reverse();
}
  1. 将参数数组转换为字符串输出
function _join(array) {
    return array.join('');
}
  1. 找到数组参数中的最大值并返回。
function _max(array) {
    return array.sort((a,b)=>b-a)[0];
}
  1. 以boolean的形式返回字符串参数中是否包含数字。
function _search(string) {
    // return [...string].find(c=>String(c)||c==0)?true:false;
    return [...string].find(c=>Number(c))===0?false:true;
}
  1. 将第二个参数插入第一个参数数组的头部，并且以数组的形式返回
function _unshift(array,value) {
    return array.unshift(value);
}
  1. 将第二个参数插入第一个参数数组的尾部，并且以数组的形式返回
function _push(array,value) {
    return array.push(value);
}
  1. 要求以数字的形式返回第一个参数数组中第二个参数所在的首个索引值。
    注意：如果数组中不存在目标值，则返回-1。
function _indexof(array,value) {
    return array.indexOf(value);
}
  1. 以数字的形式返回数字参数向下取整的结果。
function _floor(number) {
    return Math.floor(number);
}
  1. 要求将整数参数反转之后输出
function _reverse(number) {
    var n = number.toString(10).split('').reverse().join('')
    if(number > 0) return +n;
    return -parseInt(n)
}
  1. 以boolean的形式返回字符串首参中是否包含第二个参数。
function _search(string,value) {
    return string.indexOf(value)==-1?false:true;
}
  1. 返回它的参数伪数组对象
function getArguments (a,b,c) {
    return arguments;
}
  1. 使obj对象中fn函数返回该对象中a属性和b属性的和
var obj = {
    a: 1,
    b: 2,
    fn: function(){
        return this.a+this.b;
    }
}
  1. 根据参数数组创建li元素。
    要求：
    • li元素的个数和数组的长度一样
    • li元素的内容是数组中的每个元素
    • 将创建的所有li元素插入到ul中
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul></ul>
    </body>
    <script type="text/javascript">
        function createLi(array){
             for(let i=0; i<array.length; i++){
             let li=document.createElement('li');
             let ul=document.getElementsByTagName('ul')[0]
                li.innerHTML=array[i];
                ul.appendChild(li) 
            }
        }
    </script>
</html>
  1. 根据id获取html模块中ul标签下第二个li元素并返回。
function getLI(id){
    return document.getElementById(id);
}
  1. 将类为"box"的div元素内容修改为"欢迎来到牛客网"
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <div class='box'></div>
    </body>
    <script type="text/javascript">
        function modifyText(){
            return document.getElementsByClassName('box')[0].innerHTML='欢迎来到牛客网';
            // document.querySelector('.box').innerHTML = "欢迎来到牛客网"
            // getElementsByClassName()  这个方法可以获得页面
        }
    </script>
</html>
  1. 要求在点击li元素的时候不触发ul的事件。 注意：需要自行获取li元素。
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul>
            <li>nowcoder</li>
        </ul>
    </body>
    <script type="text/javascript">
         let li = document.getElementsByTagName('li')[0];
          li.onclick = function(e){
               if(window.event) window.event.cancelBubble = true;
               e.stopPropagation()
          }
    </script>
</html>
  1. 要求在点击id为"checkbox"的复选框时不会取消勾选状态。 注意：需要自行获取input元素
<html>    <head>        <meta charset=utf-8>    </head>    <body>        <form>            <label>牛客会陪伴大家</label>            <input id="checkbox" type="checkbox" checked />        </form>    </body>    <script type="text/javascript">        // 1        let input=document.getElementById('checkbox');        input.addEventListener('click',function(e){            e.preventDefault();        })        // 2        let input = document.getElementsByTagName("input")[0];        input.onclick = function(){            input.checked = true;        }        // 3        let input = document.getElementsByTagName("input")[0];        input.onclick = function(e){            e.preventDefault();        }    </script></html>
  1. 实现一个函数返回页面当前url
    window.location对象可不带 window 前缀书写。一些例子：
    • window.location.href 返回当前页面的 href (URL)
    • window.location.hostname 返回 web 主机的域名
    • window.location.pathname 返回当前页面的路径或文件名
    • window.location.protocol 返回使用的 web 协议（http: 或 https:）
    • window.location.assign 加载新文档
function getUrlHref (){
    return location.href;
}
  1. 实现一个盒子的关闭按钮功能。
    要求：
    • 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
    • 使类为"btn"的div元素中内容"X"垂直水平居中
    • 点击"X"按钮可以使类为"box"的div元素隐藏
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                position:relative;
                
            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                position:absolute;
                top:-10px; 
                right :-10px;
                text-align:center;
                line-height:20px;
                
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
               box.style.display='none';
                
            }
        </script>
    </body>
</html>
Yjing景
关注
专栏目录
判断是否为数组的 JavaScript 方法总结
编程三昧
08-22 2230
前言 我们在日常开发中，常常有判断某值类型需求，今天我们总结一下常见的几种用来判断是否为数组的 JavaScript 方法。 Array.isArray Array.isArray() 是ES5新增的方法，用于确定传递的值是否是一个数组，如果是数组，则返回 true，否则返回 false。 let arr = []; console.log(Array.isArray(arr)); // true 下面的函数调用都返回 true： Array.isArray([]); Array.isArray([1.
Javascript中字符串相关常用的使用方法总结
11-09
### JavaScript中字符串相关常用的使用方法总结 #### 一、引言 JavaScript作为一种广泛使用的脚本语言，被大量应用于Web开发之中。其中，字符串处理是非常重要的一个方面，涉及到数据的读取、修改、拼接等操作。...
JavaScript基础知识全总结
热门推荐
June.1
04-11 8万+
JavaScript基础 浏览器说明 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。 通俗的讲:可以显示页面的一个软件, 国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世...
Javascript知识点总结
赵宪福的博客
09-24 7884
JavaScript知识点整理 取消链接的默认行为： 得到从一个html页面到另外一个html界面传递过来的参数 方式一：var Ohref=window.location.href; alert(Ohref) //http://localhost:8080/route_list.html?cid=1 var arrhref=Ohref.split("?cid="); var cid= ar...
JavaScript实现网页截屏方法总结
前端开发博客
11-02 2982
>关注『前端开发博客』公众号，回复 加群 最近研究了下如何利用JavaScript实现网页截屏，包括在浏览器运行的JS，以及在后台运行的nodeJs的方法。主要看了以下几个： 1. PhantomJS 2. Puppeteer(chrome headless) 3. SlimerJS 4. dom-to-image 5. html2canvas 测试的网页使用了WebGL技术，所以下面的总结会和WebGL相关。 名词定义 ---- ##### headless browser 无...
JavaScript学习总结
m0_53525274的博客
07-09 839
Javascript学习总结
JavaScript 数据劫持总结
come from h5
03-26 2923
数据劫持方法 最近空余时间复习了下JavaScript；做为学习总结 ！ 1、对象内自带的set和get方法数据劫持、 //首先我们先定义一个对象 let obj = { $name: "张三", get name(){ // 获取 name 属性时触发 //console.log("想要获取name属性"); return this.$name;// 想要让 obj 在获取name 属性时，拿到的值 }, set name(newVal)
JavaScript-大小写转换方法总结
ZhanShenvsDiHuang的博客
04-22 2850
JavaScript-大小写转换方法总结
「终极收藏」前端开发必备：超全JavaScript公共方法大全
xingyu_qie的专栏
05-23 5811
在前端开发中，JavaScript是必不可少的一部分，而掌握各种常用的公共方法更是提升开发效率和代码质量的关键。本篇博客将为你详细汇总并解析最全的JavaScript公共方法，涵盖数组、对象、字符串、日期等各个方面的常用技巧。希望通过这篇文章，能为你的前端开发之路提供有力的帮助，成为你开发过程中不可或缺的参考指南。我已经将所有公共方法，按模块的形式，集成到了js-tool-big-box工具包中，大家不比担心安装后会使项目体积变大，不会的。想要使用时间日期类的公共方法，需要先在项目中导入。
JavaScript高级知识点总结
weixin_44763882的博客
08-30 2797
文章目录JavaScript总结：第一天：JS原型介绍1、JS组成的部分2、类型检测3、面向对象介绍4、面向过程和面向对象区别5、创建对象的三种方式6、this做了几件事7、显示对象结构8、构造函数和实例对象的关系9、构造函数带来的问题10、原型添加方法11、什么是原型12、构造函数和实例对象和原型对象之间的关系13、什么样子的数据需要写在原型中？16、实例对象使用的属性和方法层层搜索17、为内置对象添加方法18、把局部变量变成全局变量第二天：面向对象特点,贪吃蛇项目1、面向对象特点2、什么是原型？3、函数
JavaScript基础知识总结 18：dom基本操作
学Java，找哪吒
09-27 4907
JavaScript精品教程系列，浅显易懂
JavaScript中日期的相关操作方法总结
10-23
JavaScript是一种广泛使用的前端脚本语言，它在处理日期和时间上提供了一整套内置的Date对象和相关方法。在编程时，经常需要处理日期和时间数据，无论是为了显示给用户，还是为了计算时间差等。以下是JavaScript中...
JavaScript判断输入是否为数字类型的方法总结
11-29
这里我们将总结三种常见的方法来实现这一功能。 ### 第一种方法：`isNaN()`函数 `isNaN()`函数用于检查给定的值是否是`NaN`（非数字）。它返回一个布尔值，如果值是`NaN`，则返回`true`，否则返回`false`。但是...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 306
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1135
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 197
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 226
遍历echarst多个图表，并添加独立的缩放函数
JavaScript的第十一天
全栈学习ing
10-31 739
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 241
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
JavaScript入门教程：Vue相关基础总结
"Vue.js和JavaScript基础学习笔记" Vue.js是一种流行的前端JavaScript框架，用于构建用户界面，尤其适合单页应用程序。它强调简洁的语法和组件化开发，使得开发过程更加高效。Vue的核心库专注于视图层，易于与其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值