首页 / JAVASCRIPT / DAY58-前端入门-javascript（五）JS常用类

DAY58-前端入门-javascript（五）JS常用类

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了DAY58-前端入门-javascript（五）JS常用类，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8934字，纯文字阅读大概需要13分钟。

内容图文

JS常用类

一、Number

1、常用数字

整数：10
小数：3.14
科学计数法：1e5 | 1e-5
正负无穷：Infinity | -Infinity

2、常用进制

二进制：0b1010
八进制：012
十进制：10
十六进制：0xA

3、NaN

非数字类型，通过isNaN()进行判断

4、常用常量

//最大值：MAX_VALUE(1.7976931348623157e+308)
console.log(Number.MAX_VALUE);
//最小值：MIN_VALUE(5e-324)
console.log(Number.MIN_VALUE);
//正负无穷：NEGATIVE_INFINITY | POSITIVE_INFINITY(Infinity | -Infinity)
console.log(Number.NEGATIVE_INFINITY,Number.POSITIVE_INFINITY);

//注
console.log(999999999999998);//999999999999998
console.log(9999999999999989);//9999999999999988  数值太大会出错
console.log(3.1 + 3.2);//6.300000000000001

5、常用实例方法

toExponential(n):先科学计数，在确定精度，n为小数精度

//13.14 => 1.314e+1 =>1.31e+1
console.log(13.14.toExponential(2));

//13.15 => 1.315e+1 =>1.32e+1 默认四舍五入
console.log(13.15.toExponential(2));  

//13.145 => 1.3145e+1 =>1.31e+1 五舍六入  13.145bug数字
console.log(13.145.toExponential(2));

toFixed(n):先确定精度，在普通计数，n为小数精度

//3.1  四舍五入保留一位小数
console.log(3.14.toFixed(1));

toPrecision(n):先确定精度，再计数，n为位数精度

console.log(13.14.toPrecision(1)); //1e+1  n小于整数位数时，以科学记数法
console.log(13.14.toPrecision(2)); //13    n大于等于整数位数时，以普通记数法
console.log(13.14.toPrecision(3)); //13.1
console.log(156.14.toPrecision(1)); //2e+2 四舍五入

toString(n)：转换为指定进制，n为进制

var num=10;
console.log(num.toString(2));
console.log(10..toString(2));

二、时间

1、创建并获取时间

var date = new Date();

2、时间戳

date.getTime();

3、获取时间

年：date.getFullYear()
月：date.getMonth() + 1 //月份从0开始
日：date.getDate()
星期：date.getDay()
小时：date.getHours()
分钟：date.getMinutes()
秒：date.getSeconds()
毫秒：date.getMilliseconds()

4、常见格式时间

getUTCFullYear()
getUTCDate()
getUTCHours()

案例：电子表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子表</title>
    <style>
        div{
            width: 120px;
            height: 40px;
            font:normal 22px/40px 'STSong';
            margin: 50px auto;
            text-align: center;
            color: brown;
            border:3px solid black;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div>13:25:30</div>
</body>
<script type="text/javascript">
    var div = document.querySelector('div');
    function getNeedDate() {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return [hour,minute,second]
    }
    var n_date = getNeedDate();
    div.innerText = n_date[0] + ':' + n_date[1] + ':' + n_date[2];
    

    setInterval(
        function () {
            n_date = getNeedDate();
            
            for (var i = 0; i < n_date.length; i++) {
                n_date[i] = n_date[i] < 10?'0'+n_date[i]:n_date[i];
            }
            div.innerText = n_date[0] + ':' + n_date[1] + ':' + n_date[2];
        },300
    )
</script>
</html>

三、字符串

1、常用字符串

'string' | "string" | 'my name is "zero"' | "I'm boy" | "I \"love\" you"

2、常用属性

length：字符串长度

3、常用方法

chartAt(n)：指定索引字符，同[n]
concat(str)：将目标字符串拼接到指定字符串之后
indexOf(str)：指定字符串第一次出现的位置
lastIndexOf(str)：指定字符串最一次出现的位置
replace(re, str)：将正则匹配到的字符串替换为指定字符串
substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后)
substring(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后)
slice(n, m)：同substring(n, m)
split(re)：以指定正则将字符串拆分为数组
toUpperCase()：转换为大写
toLowerCase()：转换为小写
trim()：去除首尾空白字符

chartAt(n)：指定索引字符，同[n]

str = "abc123hello123GOOD123嘿嘿";
console.log(str.charAt(1));//b
console.log(str[1]);//b

concat(str)：将目标字符串拼接到指定字符串之后

var newStr = str.concat(123);
console.log(str,'\n', newStr);
/*
abc123hello123GOOD123嘿嘿 
abc123hello123GOOD123嘿嘿123
*/

indexOf(str)：指定字符串第一次出现的位置

console.log(str.indexOf("123"));  // 3

replace(re, str)：将正则匹配到的字符串替换为指定字符串

newStr = str.replace("hello", "world");
console.log(str, newStr);
//abc123hello123GOOD123嘿嘿 abc123world123GOOD123嘿嘿

substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后)

// 索引3开始,截取3个字符长度
newStr = str.substr(3, 3);
console.log(newStr);//123

slice(n, m)：同substring(n, m)

// 索引3开始,6结束(不包含6) [3, 6)
newStr = str.slice(3, 6);
console.log(newStr);//123

split(re,n)：以指定正则将字符串拆分为数组,n可选为截取后得到的数组最大长度

var arr = str.split("123", 2);
console.log(arr);// ["abc", "hello"]

trim()：去除首尾空白字符

str = "   123  abc   "
console.log(str.trim());//123  abc

四、数组

1、常见数组

[1, 2, 3] | ['1', '2', '3'] | [1, '2', true]

2、常用属性

length：数组元素个数

3、常用基础方法

var arr = [1, 2, 3]
// concat(arr)：将目标数组拼接到指定数组之后
console.log([1, 2, 3].concat(["4", "5", "6"]));  // 结果是新数组

// indexOf(ele)：指定元素第一次出现的位置
// lastIndexOf(ele)：指定元素最一次出现的位置
console.log(arr.indexOf(1));  // 0

// reverse()：反转数组
console.log(arr.reverse());  // 反转的到新数组

// includes(ele, n)：从索引n开始往后，元素ele是否在数组中，做全等匹配，索引从头开始n可以省略(in只做值匹配)
arr = ["1", "2"];
console.log(1 in arr);//false
console.log(arr.includes(1, 1)); //true 只匹配数字1,从索引1开始


// fill(ele)：以指定元素填充整个数组
arr.fill(null);
console.log(arr);  // 操作原数组,一般用来清空数组中的数据(不操作长度)

// slice(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后)
arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3));  // [1, 3)

// join(str)：以指定字符串连接成字符串
var str = arr.join("@");
console.log(str);

4、增删改方法

var arr = [1,2,3,4,5]
// 增删改操作方法: 操作的都是原数组
// push() 尾加 | unshift() 头加
// pop() 尾删 | shift() 头删
arr.push(6)//[1, 2, 3, 4, 5, 6]
console.log(arr);//由于增删改操作的时原数组，所以都是[1, 2, 3, 4, 5]
arr.unshift(0);//[0, 1, 2, 3, 4, 5, 6]
console.log(arr);//由于增删改操作的时原数组，所以都是[1, 2, 3, 4, 5]
// 一次操作一个元素
arr.pop();
arr.shift();
console.log(arr);//[1, 2, 3, 4, 5]

splice(begin, length, ...eles)：完成增删改
// begin开始索引
// length长度
// 新元素们(可以省略)
// 从头加
arr.splice(0, 0, 0);  
// 从索引0前方开始操作,操作原数组0个长度,结果多了个元素0
console.log(arr);
// 0, 1, 2, 3, 4, 5

// 从尾加
arr.splice(arr.length, 0, 6);
console.log(arr);
// 0, 1, 2, 3, 4, 5, 6

// 从头删
arr.splice(0, 1) // 从索引0开始,操作原数组一位,替换的新值省略代表删除
console.log(arr);
// 1, 2, 3, 4, 5, 6

// 从尾删
arr.splice(arr.length - 1, 1)
console.log(arr);
// 1, 2, 3, 4, 5

// 替换
arr.splice(2, 1, "3", [0, 0], "3");  // 从索引2开始,用"3", [0, 0], "3"替换掉1位
console.log(arr);

// 1, 2, "3", [0, 0], "3", 4, 5

5、回调函数方法

过滤器: filter

// filter(function(value, index){ return true | false})
// 参数: 值, 索引, 所属数组
// 返回值: true | false

// 过滤器返回值: 过滤后得到的新数组

// 过滤掉不满足条件的数据
// 合为满足条件的数据

// 过滤器回调函数的执行次数 = 被过滤数组的元素个数
// 需要回调的函数
var arr = [4, 6, 2, 1, 5, 3];
var getResult = function (v, i) {
    if (v < 5) {
        return true;
    }
}
var newArr = arr.filter(getResult);

console.log(arr);
console.log(newArr);

全部满足: every

// every(function(value, index){ return 条件表达式; })
// 参数: 值, 索引, 所属数组
// 返回值: 值得条件表达式

// 过滤器返回值: true | false

// true:所有元素都满足条件
// false:有一个不满足条件即可
var arr = [4, 6, 2, 1, 5, 3];
var res = arr.every(function(v) {
    return v > 3;
});
console.log(res);

部分满足: some

//some(function(value, index){ return 条件表达式; })
var arr = [4, 6, 2, 1, 5, 3];
res = arr.some(function(v) {
        return v > 3;
    });
console.log(res);

累积: reduce

// reduce(function(prev,value,index){ return prev * value; })
var arr = [4, 6, 2, 1, 5, 3];
res = arr.reduce(function(prev,value,index){ 
        return prev * value;
})
console.log(res); // 0*4*2*1*3*5

排序: sort

newArr = arr.sort(function(o, n) {
    // return o > n;  // 升序, 没有回调函数
    return o < n;  // 降序
})
console.log(newArr);

五、Math

1、常用常量

E：返回算术常量 e，即自然对数的底数（约等于2.718）
LN2：返回 2 的自然对数（约等于0.693）
LN10：返回 10 的自然对数（约等于2.302）
LOG2E：返回以 2 为底的 e 的对数（约等于 1.4426950408889634）
LOG10E：返回以 10 为底的 e 的对数（约等于0.434）
PI：返回圆周率（约等于3.14159）

2、常用方法

abs(x)：返回 x 的绝对值
ceil(x)：向上取整
floor(x)：向下取整
max(...n)：求最大值
min(...n)：求最小值
pow(x,y)：返回 x 的 y 次幂
random()：返回 0 ~ 1 之间的随机数
round(x)：四舍五入

六、正则

正则的两种写法

构造函数

var re = new RegExp('\\w');
var res = re.test("abc");
console.log(res);

字面量

re = /\w/;
res = re.test("abc");//test方法的返回时是布尔值TRUE或FALSE
console.log(res);

res = re.exec("abc");//exec方法的返回时是一个数组
console.log(res);

修饰符

i: 不区分大小写
g: 全文匹配(多匹配)
m: 多行匹配

字符串的match方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

str = "ABCABC";

re = /a/; // null => test
var arr = str.match(re);
console.log(arr);

re = /a/i; // 非多文匹配类似于exec
var arr = str.match(re);
console.log(arr);

re = /a/ig;  // 所有满足结构的结果数组
var arr = str.match(re);
console.log(arr);


str = "abc123x9y8z7\n123";
re = /^\d/m;
arr = str.match(re);
console.log(arr);

内容总结

以上是互联网集市为您收集整理的DAY58-前端入门-javascript（五）JS常用类全部内容，希望文章能够帮你解决DAY58-前端入门-javascript（五）JS常用类所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/850731.html

来源：【匿名】

【上一篇】javaScript阻止浏览器F5刷新【下一篇】javascript 怎么调用php方法

更多 ►

【DAY58-前端入门-javascript（五）JS常用类】教程文章相关的互联网学习教程文章

JavaScript结构三层——思想快速入门【图】

本文版权归博客园和作者吴双本人所有，转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛，我们共同进步。今天讨论的是什么如果你的工作中需要写JavaScript，而你的JavaScript代码又与业务相关。我想无非就是一下三类功能：1.请求后台数据2.渲染后台数据，拼接Html3.事件操作当然你如果封装JS底层的控件，不在我们今天的讨论范围。你也许写过单文件上千行的JS,你也许维护过几千行的JS，每次重新看起来，或者增...

Javascript开发技巧(JS入门、运算符、分支结构、循环结构)

一、Js简介和入门 <!DOCTYPE html><html> <head><meta charset="UTF-8"><title>JavaScript简介</title><!-- [使用JS的三种方式]1、HTML标签中内嵌JS（不提倡使用）：<button onclick="javascript:alert(‘小碧池！你真点啊！‘)">有本事点我呀！！！</button> 2、HTML页面中直接使用JS:<script type="text/javascript">//JS代码</script> 3、引用外部JS文件:<script language="JavaScript" src="JS文件路径"></script> [注意事项]...

JavaScript入门培训材料（Copy至此以作备份）

JavaScript简明学习教程2014年5月31日目录一、说明... 2二、准备知识... 2（一）HTML. 2（二）DOM.. 3三、JavaScript简介... 3四、JavaScript的运行... 4五、基本语法... 4（一）变量... 41、变量的声明... 52、变量的类型及类型转换... 63、变量的作用域... 7（二）基本数据类型... 91、数值类型... 92、字符串类型... 93、布尔类型... 94、undefined和null 10（三）复合类型... 101、Array：数组... 102、Object：对象... 113、F...

DAY57-前端入门-javascript（四）面向对象【代码】

面向对象一、属性与方法//创建一个对象 var obj = {}; | var obj = new Object(); // 属性 obj[‘name‘] = ‘大毛‘; | obj.name = ‘大毛‘; // 方法 obj.func = function () {//body.... } // 删除属性与方法 delete obj.prop delete obj.func关于之前的变量污染的问题，可以通过对象来解决// 学习目的:对象的(临时)属性可以帮助存储临时数据,因为临时数据的生命周期往往很短.需要提示临时数据的生命周期 // 临时数据会随属性的...

4.JavaScript入门及进阶【代码】

课程介绍介绍javascript的页面引入方式、javascript变量、javascript函数的使用以及条件语句的基本使用，javascript获取元素及操作元素属性。JavaScript介绍JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。前端三大块1、HTML：页面结构2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果3、JavaScript：页面行为：部...

JavaScript入门【代码】

********JavaScript概述************ECMAScript和JavaScript的关系****1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是...

编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器（四）结语

四则运算编译器，虽然说功能很简单，只能编译四则运算表达式。但是编译原理前端部分几乎都有涉及，词法分析，语法分析，还有代码生成。再复杂的编译器、再简单的编译器，功能上是差不多的，只是复杂的编译器实现上会更困难。这个系列的文章是为了帮助你入门，在这个基础上再去看编译原理相关书籍，不至于打瞌睡。如果你对编译原理很有兴趣，并且想更深一步的学习，在这里强烈推荐你看一本书——我心目中的神书——《计算机系统要素...

JavaScript快速入门（一）——JavaScript概览【代码】

JavaScript是什么？JavaScript的诞生在1995年前后，当时世界上的主流带宽为28.8Kbps，现在世界平均下载带宽为21.9Mbps（数据来源于http://www.netindex.com）。当时的网民，每提交一次表单，都需要等待很久才能收到服务器的回应，甚至很可能等了几分钟收到的却是说缺少了某一项。为了改善用户体验，嵌入浏览器客户端的能实现简单表单判断的脚本诞生了，这就是JavaScript。JavaScript最早是工作于Netscape （网景公司）的 Brendan E...

javaScript Promise 入门【代码】【图】

Promise是JavaScript的异步编程模式，为繁重的异步回调带来了福音。一直以来,JavaScript处理异步都是以callback的方式，假设需要进行一个异步队列，执行起来如下：animate (ball1, 100, function () {animate (ball2, 200, function () {animate (ball3, 300, function () {animate (ball3, 150, function () {animate (ball2, 150, function () {animate (ball1, 150, function () {// do something})})})})})这就是所谓的回调金字...

JavaScript 入门书籍推荐及学习笔记总结 -- 《JavaScript权威指南》

简介关于 JavaScript 的入门学习教程，网上通常会推荐以下书籍：《JavaScript权威指南》（其中涵盖语言核心部分和浏览器客户端编程，比较系统和全面，个人比较推荐，电子版下载（中文版），英文版）《JavaScript高级程序设计》（作为参考书与《JavaScript权威指南》一起参考阅读还不错，电子版下载）《JavaScript DOM编程艺术》（主要讲 DOM 这块，其中有很多编程实践和案例可用于参考学习，电子版下载）《JavaScript语言精粹》（只...

JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)【代码】

多态（Polymorphism）按字面的意思就是“多种状态”，同样的行为（方法）在不同对象上有不同的状态。　　在OOP中很多地方都要用到多态的特性，比如同样是点击鼠标右键，点击快捷方式、点击桌面空白处、点击任务栏等弹出的菜单都是不同的。方法重写（override）:　　即子类定义一个与父类名字相同的方法，以此覆盖父类方法，以此来实现不同的功能。 1function Animal(){}2var AnimalP = Animal.prototype;3 AnimalP.eat = funct...

js从入门到精通(2.2-3.2)【代码】

2.2 变量和常量2.2.1 常量在程序运行中保持不变的数据2.2.2 变量命名字母或者下划线开头，中间可以是数字、字母或者下划线不能包含空格加号减号不能使用关键字严格区分大小写声明赋值只是声明变量，并未对其赋值，则默认为undefined。var可以多次声明同一个变量，如果该变量已经有一个初始值，那么此时相当于重新赋值。作用域全局变量和局部变量全局声明在方法外部生存周期全局变量在主程序定义，一直到程序结束，局部变量...

JS入门熟知

JS是面向对象的语言封装继承多态聚集（对象中具有引用其他对象的能力）JS使用中绝大多数情况不需要进行面向对象的设计,很多情况是使用已经设计好,准备好的对象,基于对象的语言.JS的使用（引入）jsp、html中直接在script标签中书写在script标签中引入注意: script 标签位置任意. 但是位置越靠前,执行越早.(重要)js 外部文件推荐扩展名是.js.但是其实任何后缀名都可以.使用script标签引入外部文件,那么该script标签中就不要书写js代码...

JavaScript 入门教程二在HTML中使用 JavaScript

一、使用 <script> 元素的方式有两种：直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件。二、使用内嵌方式，一般写法为：　　<script type="text/javascript">　　　　/* code */</script>三、引用外部 JavaScript 文件的一般写法为：　　<script type="text/javascript" src=""></script> （注意不应在 <script>和</script> 标签中间再添加额外的 JavaScript 代码。如果包含，会被忽略。）四、内嵌与外部引用的方...

JSF入门【代码】

1. 简介JSF技术是Sun公司在2004年发布的用于开发Web应用的框架。当前版本是2.2，由JSR344规范定义。它是Java EE 7推荐的Web标准框架。Mojarra(https://javaserverfaces.java.net/)是Oracle官方采用的JSF的参考实现，其他的参考实现还有Apache基金的MyFaces(http://http://myfaces.apache.org/)。受到Sturts、Tapestry等开源框架的影响，JSF是采用了MVC架构。受到Swing组件模型的启发，JSF使得开发人员从组件、事件、模型的角度开发...

首页 / JAVASCRIPT / DAY58-前端入门-javascript（五）JS常用类

DAY58-前端入门-javascript（五）JS常用类

内容导读

内容图文

JS常用类

一、Number

1、常用数字

2、常用进制

3、NaN

4、常用常量

5、常用实例方法

二、时间

1、创建并获取时间

2、时间戳

3、获取时间

4、常见格式时间

案例：电子表

三、字符串

1、常用字符串

2、常用属性

3、常用方法

四、数组

1、常见数组

2、常用属性

3、常用基础方法

4、增删改方法

5、回调函数方法

五、Math

1、常用常量

2、常用方法

六、正则

正则的两种写法

修饰符

字符串的match方法

内容总结

内容备注

内容手机端

【DAY58-前端入门-javascript（五）JS常用类】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程