首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js中一些常用的基本方法

JavaScript 是一种广泛使用的脚本语言,特别是在网页开发中。以下是一些常用的基本方法和它们的应用场景:

1. alert()

  • 基础概念:用于显示一个带有消息的警告框。
  • 应用场景:调试时快速查看变量的值。
代码语言:txt
复制
alert("Hello, World!");

2. console.log()

  • 基础概念:将信息输出到浏览器的控制台。
  • 应用场景:调试和记录程序运行时的状态。
代码语言:txt
复制
console.log("This is a log message.");

3. parseInt()parseFloat()

  • 基础概念:将字符串转换为整数或浮点数。
  • 应用场景:处理用户输入或外部数据时进行类型转换。
代码语言:txt
复制
let intVal = parseInt("123"); // 123
let floatVal = parseFloat("123.45"); // 123.45

4. isNaN()

  • 基础概念:检查一个值是否是非数字。
  • 应用场景:验证用户输入是否为有效数字。
代码语言:txt
复制
console.log(isNaN("Hello")); // true
console.log(isNaN(123)); // false

5. Math 对象的方法

  • 基础概念:提供了一系列进行数学运算的方法和属性。
  • 应用场景:进行各种数学计算。
代码语言:txt
复制
console.log(Math.sqrt(16)); // 4
console.log(Math.random()); // 随机数

6. String 对象的方法

  • 基础概念:提供了处理字符串的各种方法。
  • 应用场景:字符串的格式化、查找、替换等。
代码语言:txt
复制
let str = "Hello, World!";
console.log(str.toUpperCase()); // HELLO, WORLD!
console.log(str.includes("World")); // true

7. Array 对象的方法

  • 基础概念:提供了操作数组的各种方法。
  • 应用场景:数组的排序、过滤、映射等。
代码语言:txt
复制
let arr = [1, 2, 3, 4, 5];
console.log(arr.map(x => x * 2)); // [2, 4, 6, 8, 10]
console.log(arr.filter(x => x > 2)); // [3, 4, 5]

8. setTimeout()setInterval()

  • 基础概念:用于定时执行代码。
  • 应用场景:实现动画效果或定时任务。
代码语言:txt
复制
// 2秒后执行一次
setTimeout(() => {
    console.log("This runs after 2 seconds.");
}, 2000);

// 每秒执行一次
let intervalId = setInterval(() => {
    console.log("This runs every second.");
}, 1000);

9. 事件处理

  • 基础概念:允许脚本响应用户操作和浏览器事件。
  • 应用场景:增强用户交互体验。
代码语言:txt
复制
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button was clicked!");
});

10. 异步编程(Promises 和 async/await)

  • 基础概念:处理异步操作,避免回调地狱。
  • 应用场景:网络请求、文件读写等需要等待的操作。
代码语言:txt
复制
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched!"), 1000);
    });
}

async function getData() {
    try {
        let data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

这些方法和概念构成了JavaScript编程的基础,掌握它们对于进行有效的前端开发至关重要。在实际应用中,根据具体需求选择合适的方法可以提高代码的效率和可维护性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • js常用方法和一些封装(3) -- dom相关

    js一个非常重要的作用就是对dom进行操作,所谓的dom,可以理解为html代码里的一个个节点。比如,body标签元素就是一个dom。本文对js的dom操作进行一些总结。...按照惯例,先上一个刚写好的小例子,代码在最后给出: ? 1.gif 现在,来看看js对dom的一些操作吧。...首先,给出一个html模板,接下来开始用js来做一些有趣的事情吧,css样式的绘制就不细说了,先上代码: css *{margin: 0;padding: 0;} .parent { width...1.最简单的dom方法封装 在本系列中,假设我们不考虑用jQuery。 现在给第三个盒子添加一个id。...Paste_Image.png 接下来就要遍历这些孩子节点啦,children 的数据类型是object。 然而,在js中我们可以遍历数组,却无法直接遍历object,咋办呢?

    1.6K101

    JS数组常用的方法

    JS 数组常用的方法(个人感觉) 1. forEach() 循环,无法在中间停止 2. some() 循环,找到符合条件的之后,可以通过 return true 退出循环 3. every() 测试数组中的所有元素是否都能通过某个指定函数的测试...amount, item) => (amount += item.price * item.count), 0); console.log(amount); //返回70 6. map() map()方法把调用它的数组的每一个元素分别传给指定的函数...12. indexOf()、lastIndexOf() let a = [1, 2, 3, 4, 2, 1]; console.log(a.indexOf(2)); // 返回1, 数组a中第一个是...; console.log(a.split(",")); 16. sort() sort()方法对数组元素按字母顺序对数组元素排序 let arr = [1, 2, 11, 23, 22, 111,...回调函数的格式是 (a, b) => { // a, b是数组中任意两个数 return xxx; }; 当返回值大于 0 时,a 排在 b 的后面; 当返回值小于 0 时,a 排在 b 的前面

    4.2K20

    js常用方法总结

    let obj = {} for (let i = 0; i < arr.length; i++) { // 把每一次循环得到的当前项,作为对象的属性名和属性值存储进去 let item =...,遇到会转换为字符串) 如果数组中存在数字10和字符串’10’,则也会认为是重复的 数组中的值如果是undefined可能也会出现问题 indexOf检测方式 let newAry = [] for (...document.getElementById getElementById方法的上下文只能是document [context].getElementsByTagName、[context].getElementsByClassName...获取的结果是HTMLCollection元素集合(类数组:数字作为索引,length代表长度) 想操作某一项需要通过索引获取后再操作 document.getElementsByName 操作表单元素...获取到的只有元素节点集合 设置DOM元素自定义属性 [元素].xxx = xxx / 元素[xxx] = xxx 获取:[元素].xxx 删除:delete [元素].xxx 原理:操作堆内存 [元素]

    3.4K40

    JS 数组的常用方法归纳

    如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。       ...若 a 大于 b,则返回一个大于 0 的值。        7.splice() 向/从数组中添加/删除项目,然后返回被删除的项目。  该方法会改变原始数组。...splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改 splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素...不改变原数组的方法 concat() 连接两个或多个数组,不改变现有数组,返回新数组,添加的是数组中的元素 join(",") 把数组中的所有元素放入一个字符串,通过‘,’分隔符进行分隔,返回字符串 slice...(start,end) 从已有的数组中返回选定的元素,从start开始选取, (若是负数,从尾部开始算起的位置:-2指倒数第二个元素)到end(不包括该元素),该方法不修改数组,返回一个字数组 map(

    2.3K30

    js常用的数组方法

    1.创建数组的基本方法:       1.1 空数组  var obj=new Array();                  1.2 指定长度数组  var obj=new Array(size)...特性 如果是负数,则用数组长度加上该值确定位置 起始位置实为数组的实际下标 结束位置的实际下标为结束数值减1   3.join():用于把数组中的所有元素放入一个字符串; 4.4数组排序: 1....reverse():用与颠倒数组中的顺序。   ...2.sort():用于对数组中的元素进行排序。     2.1:即使数组中的每一项都是数组,sort方法比较的也是字符串。     2.2:sort()方法可以接受一个比较函数作为参数。...5.ECMAScript 5方法:   5.1位置方法:  indexOf():从数组的开头(位置)开始查找;     lastindeOf():从数组的结束位置开始查找; 5.2:迭代方法:

    1.9K20

    js常用方法和一些封装 -- 时间相关(附案例详解)

    Date(date.replace(/-/ig,"/").replace("T"," ")); }else{ return date; } } 勘误:_center()方法中...本文介绍一些时间操作相关的方法,经过思考,从这一篇开始,主要围绕一个例子开始讲,先通过案例来讲解一下基本的操作。然后上干货 -- 也就是各种封装好的方法,都是可以直接使用的。... 接下来,我们给他添加一些基本的样式吧: color: #FFF2F4; height: 60px; width: 500px;...我们用js的方式来实现: //让元素居中的方法 function _center(dom){ dom.style.position = 'absolute'; dom.style.top...Paste_Image.png 我们希望拿到hh:mm:ss格式的时间数据,而js原生态的date对象没有format方法,所以先通过下面的代码扩展一下: Date.prototype.format =

    1.8K81

    js常用方法和一些封装(2) -- 随机数生成

    任何编程语言,随机数都是必不可少的,我在开发过程中,尤其在自己做一些小玩意的时候,就经常使用随机数,后来发现每次使用都懒得写,直接去网上搜一个,拿过来就用了。...先上小案例的截图: ? 1.gif 这个例子是先画上一堆div,然后给每一个div绑定一个变颜色的事件,当然,颜色是随机生成的。...随机数字 /** * 获取 0 ~ num 的随机数(闭区间) */ function randomNum(num){ return Math.floor(Math.random()*(num...return Math.floor(Math.random()*(end-start+1))+start; }; 随机颜色 /** * 获取随机颜色(不支持IE678) 因为rgba是IE9+才支持的...document.createElement("div"); js小巧而灵活,是不是觉得很有趣呢? 本章结束 ... 剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。

    2.9K100
    领券