当前位置: 首页 > news >正文

JavaScript 知识梳理基础篇(二)

本文已收录于专栏
⭐️ 《JavaScript》⭐️

此专栏适用于已经入门JavaScript的同学做复习回顾使用,因为讲解具有跳跃性不推荐零基础的新手学习~

学习指南:

  • 内置对象
    • Math
    • Date
    • Arry
    • String
    • 基本包装类型
  • 完结散花
  • 参考文献

内置对象

Math

Math.abs 绝对值

Math.abs(-1)  	--> 1
Math.abs('-1')  --> 1
Math.abs('one') --> NaN

Math.floor 地板 下取整

Math.cell 天花板 向上取整

Math.round 四舍五入

Math.floor(1.9) // 1

Math.ceil(1.1) // 2

Math.round(1.9) // 2

注意:Math.round( ) 其他数字都是四舍五入,但是 .5 特殊 ,它往大了取。

Math.round(-1.1); 结果是 -1

Math.round(-1.5); 结果是 -1

Math.random随机数方法

random()方法可以随机返回一个小数,其取值范围是[0,1] 左闭右开 0<= x <1;

得到一个两数之间的随机整数,包括第一个数,不包括第二个数。

得到两个数之间的随机整数,左闭右闭。

 function getRandom(min,max){

	return Math.floor(Math.random() * (max - min + 1) + min);

}

getRandom(1,10) //得到1 ~10 之间的一个整数

Date

日期对象,可以用来处理日期和时间,得到时分秒。

Date 是个构造函数,必须使用 new 来调用创建我们的日期对象。

如果没有参数,返回系统当前时间。

var date = new Date();
console.log(date);
Wed May 01 2019 10:20:56 GMT+800 (中国标准时间)

带参数常见写法:

数字型: 2019,10,01

var date = new Date(2019,10,1);
console.log(date);
Wed Nov 01 2019 00:00:00 GMT+800(中国标准时间)
返回的是 11

字符串型:’2019-10-1 8:8:8‘

var date = new Date(2019-10-1);
console.log(date);
Wed Oct 01 2019 08:08:08 GMT+800(中国标准时间)

日期格式化

获取当前日期的年份:getFullyear()

var date = new Date();

console.log(date.getFullyear())// 打印当前的年份 2022

获取当前日期的月份:getMonth()

注意:返回值是 0 ~ 11,所以需要加 1 才能与真实月份对应上。

var date = new Date();
console.log(date.getMonth())// 因为返回值 是 从 0 ~ 11 ,所以返回的少一个月。实际是九月返回值则是 8。 
console.log(date.getMonth() + 1)// 加一即可 返回当前月份 9  

获取当前日期是几号:getDate()

var date = new Date();
console.log(date.getDate()) // 返回当前是几号 

获取当前日期是周几:getDay()

注意:返回值是 0 ~ 6 ,周日是 0,周一 ~ 周六 对应着 1 ~ 6

var date = new Day();
console.log(date.getDay()) // 返回当前是几号 

返回当前的时分秒:getHours()、getMinutes()、getSeconds()

function getTime(){
	var time = new Date();
	var h = time.getHours();
	h = h < 10 ? '0' + h :h; // 小于 10 ,补上前导0
	var m = time.getMinutes();
    var s = time.getSeconds();
    return h + ':'+m +':' + s;
}
console.log(getTime());

获取当前时间距离 1970年1月1号 总的毫秒数(时间戳)

因为用32位来表示时间的最大间隔是68年,而最早出现的UNIX操作系统考虑到计算机产生的年代和应用的时限综合取了1970年1月1日作为UNIX TIME的纪元时间(开始时间)

每时每刻的时间戳都是独一无二,永不重复的。

通常可以用来做倒计时的效果。

①通过 valueOf()getTime()

var date = new Date();
console.log(date.ValueOf());// 返回当前时间 距离 1970.1.1 总的毫秒数。
console.log(date.getTime());

②简单写法:+new Date()返回的就是总的毫秒数

var date = +new Date()
console.log(Date.now());

③H5 新增的 获取总的毫秒数

console.log(Date.now());
function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000;
    var d = parseInt(times / 60 / 60 / 24);
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60);
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60);
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m +'分' + s + '秒';
}
console.log(countDown('2022-10-1 18:00:00'));

Arry

方式一

let = new Arry(1,2,3)

方式二

let arr2 = [1,2,3];

访问

arr2[0] = 10;

alert(arr2);

JS 数组是变长变类型的。

var arr3 = [1,2,3];

arr3[10] =10;

alert(arr3[9]) undefine

length 数组个数

length可以随着数组元素个数的增加而增长。

  for(let i = 0 ; i < array.length ;i ++)

  {

     if(array[i]>10)
    //新数组索引号应该从0开始,依次递增
   ans[ans.length]=array[i];
  }

  alert(ans);
```js

push:添加元素

```js
var arr5 = [1,2,3];

arr5.push(10alert(arr5);

splice:删除元素

arr5.splice(0,1)//从0开始删,删1个。

判断是否为数组

instanceof 运算符,可以判断一个对象是否属于某种类型。

Arry.isArray()用来判断一个对象是否为数组,isArray 是HTML5 中提供的方法。

var arr = [1,23];
var obj = {};
console.log(arr instanceof Array) //true;
console.log(obj instanceof Array) //false;
console.log(Array.isArry(arr)); //true;

添加数组元素

方法名说明返回值
push(参数1…)末尾添加一个或多个元素,注意修改原数组并返回新的长度
pop()删除数组最后一个元素返回它删除的元素的值
unshift(参数1…)向数组的开头添加一个或更多元素,注意修改原数组并返回新的长度
shift()删除数组的第一个元素,数组长度减1,无参数,修改原数组并返回第一个元素

push()在数组的末尾添加一个或者多个元素

返回值:变化之后的数组长度

var arr = [1,2,3];
arr.push(4,5);
console.log(arr); 新增后的数组 1 2 3 4 5

console.log(arr.push(i)); 直接打印push后的数组,返回的是数组的个数

unshift() 在数组的开头,添加一个或者多个元素。

返回值:变化之后的数组长度

arr.unshift('red');

console.log(arr);

pop()删除数组的最后一个元素,一个只能删除一个元素。

返回值:删除的元素

arr.pop();

shift删除数组的第一个元素,一个只能删除一个元素。

返回值:删除的元素

arr.shift()

数组排序

方法名说明是否修改原数组
reverse()颠倒数组中元素的顺序,无参数该方法会改变原来的数组,返回新数组
sort()对数组的元素进行排序该方法会改变原来的数组,返回新数组

resverse 反转数组

var arr = [1,2,3,4,5];

arr.reverse();

console.log(arr); 

sort 数组排序

var arr = [1,4,2,5,3]

arr.sort()

console.log(arr); //1 2 3 4 5

sort 在处理双位数时默认会先比较 最高位,把最高位的放在一起 一次排列。

即 sort 的排序规则是按字典序排列的。

var arr = [1,123,2,234,3,345];

arr.sort()

console.log(arr); 

输出的结果是:

1, 123, 2, 234, 3, 345

为了保证 sort 是按升序或者降序来排序的。

可以采用下面这种写法来修改sort的排序规则:

升序写法:

arr.sort(function(a,b)){
	return a - b; 
}

降序写法:

arr.sort(function(a,b)){
	return b - a; 
}

获取元素下标

indexOf (数组元素) ,作用就是返回数字元素的索引号

它只能返回从前面开始找第一个满足条件的索引号。

若数组里面没有符合条件的元素,则返回的是 -1

var arr = ['red','green','blue','pink'];

console.log(arr.indexOf('blue'));  // 3

console.log(arr.indexof('bleak')); // -1

lastindexOf(数组元素),从前面开始查找

var arr = ['red','green','blue','pink' blue];

console.log(arr.indexOf('blue'));  // 3 从前面开始找

console.log(arr.lastindexof('blue')); // 5 从后面开始找

数组转化为字符串

方法名说明返回值
toString()把数组转换成字符串,逗号分隔每一项返回一个字符串
join(‘分隔符’)方法用于把数组中的所有元素转换为一个字符串返回一个字符串
// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不写默认用逗号分割
console.log(arr1.join('-')); //  green-blue-red
console.log(arr1.join('&')); // green&blue&red

String

基本包装类型

为了方便操作基本数据类型,JS 提供了三个特殊的引用类型:String 、 Number 和 Boolean

基本包装类型还是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

var str = 'andy';
console.log(str.length);

基本数据类型是没有属性和方法的。

而对象才有属性和方法,但上面代码却可以执行,这是因为 JS 会将基本数据类型包装为复杂数据类型,其执行过程如下:

//1.生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
//将我们声明的字符变量赋值
str = temp;
//销毁临时变量
temp = null;

字符串的不可变

意思是里面的值不可变。

当新的字符串覆盖旧的字符串时,其实变量只是改变了指向。

旧的字符串还储存在原先的那块内存,只不过现在变量指向的是新的字符串新的内存地址了。

var str = 'abc';
str = 'hello';

var str ='';

for(var i = 0; i < 10000; i ++){
	str += i;
}
console.log(str);

根据字符返回位置

字符串所有的方法,都不会修改字符串本身,操作完成会返回一个新的字符串。

方法名说明
indexOf(‘要查找的字符’,开始的位置)返回指定内容在元字符串中的位置,如果找不到就返回-1,开始的位置是index索引号
lastIndexOf()从后往前找,只找第一个匹配的
 // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
        var str = '改革春风吹满地,春天来了';
        console.log(str.indexOf('春')); //默认从0开始查找 ,结果为2
        console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找,结果是8

根据位置返回字符

方法名说明使用
charAt(index)返回指定位置的字符(index字符串的索引号)str.charAt(0)
charCodeAt(index)获取指定位置处字符的ASCII码(index索引号)str.charCodeAt(0)
str[index]获取指定位置处字符HTML,IE8+支持和charAt()等效
<script>
    // 有一个对象 来判断是否有该属性 对象['属性名']
    var o = {
        age: 18
    }
    if (o['sex']) {
        console.log('里面有该属性');

    } else {
        console.log('没有该属性');

    }

    //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。
    // o.a = 1
    // o.b = 1
    // o.c = 1
    // o.o = 4
    // 核心算法:利用 charAt() 遍历这个字符串
    // 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1
    // 遍历对象,得到最大值和该字符
    var str = 'abcoefoxyozzopp';
    var o = {};
    for (var i = 0; i < str.length; i++) {
        var chars = str.charAt(i); // chars 是 字符串的每一个字符
        if (o[chars]) { // o[chars] 得到的是属性值
            o[chars]++;
        } else {
            o[chars] = 1;
        }
    }
    console.log(o);
    // 2. 遍历对象
    var max = 0;
    var ch = '';
    for (var k in o) {
        // k 得到是 属性名
        // o[k] 得到的是属性值
        if (o[k] > max) {
            max = o[k];
            ch = k;
        }
    }
    console.log(max);
    console.log('最多的字符是' + ch);
</script>

字符串操作方法

方法名说明
concat(str1,str2,str3…)concat() 方法用于连接两个或对各字符串。拼接字符串
substr(start,length)从 start 位置开始(索引号), length 取的个数。
slice(start,end)从 start 位置开始,截取到 end 位置 ,end 取不到 (两个都是索引号)
substring(start,end)从 start 位置开始,截取到 end 位置 ,end 取不到 (基本和 slice 相同,但是不接受负)

replace()方法

用于在字符串中用一些字符替换另一些字符。

其使用格式:replace(被替换的,要替换的);

<script>
    // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
    var str = 'andyandy';
    console.log(str.replace('a', 'b'));
    // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
    var str1 = 'abcoefoxyozzopp';
    while (str1.indexOf('o') !== -1) {
        str1 = str1.replace('o', '*');
    }
    console.log(str1);
</script>

split()方法

用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。

var str = 'a,b,c,d';
console.log(str.split(','));
返回的是一个数组 ['a', 'b', 'c', 'd']

前面我们学过的split 正好与 join作用相反,

其作用是将 数组转换为字符串。

 	var str2 = 'red, pink, blue';
    console.log(str2.split(','));
    var str3 = 'red&pink&blue';
    console.log(str3.split('&'));

大小写转换

  • toUpperCase() 转换大写
  • toLowerCase() 转换小写

基本包装类型

简单类型也被叫做基本数据类型或者值类型,复杂类型又被叫做引用类型。

  • 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型。
    • string number boolean undefined null。
  • 引用类型:复杂数据类型,在存储时变量中的存储的仅仅是地址,也就是引用。
    • 通过new 关键字创建的对象 ,系统对象,自定义对象, 如 Object 、Array 、Date。

为了方便操作基本数据类型,JS 提供了三个特殊的引用类型:String 、 Number 和 Boolean

基本包装类型还是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

var str = 'andy';
console.log(str.length);

基本数据类型是没有属性和方法的。

而对象才有属性和方法,但上面代码却可以执行,这是因为 JS 会将基本数据类型包装为复杂数据类型,其执行过程如下:

完结散花

ok以上就是对 JavaScript 知识梳理基础篇 的全部讲解啦,很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我,我后期再补充完善。

参考文献

pink老师入门视频教程

相关文章:

  • 【web-代码审计】(14.4)ASP.NET
  • 一、Maven-单一架构案例(创建工程,引入依赖,搭建环境:持久化层,)
  • vue-cli 初始----安装运行Vue项目
  • 华尔街日报请求分析
  • Ubuntu18.04安装深度学习环境(Anaconda、显卡驱动、CUDA、Tensorflow-GPU等)
  • Linux关于yum和vim入门的一些问题
  • 网络请求(四)—Socket
  • Python中的模块
  • JavaEE、Spring
  • setTimeout和setInterval区别,以及定时器的传参功能
  • 【数学分析笔记04】数列与数列极限
  • 1、设计模式的简介
  • .NET LINQ 通常分 Syntax Query 和Syntax Method
  • deepstream--nvinfer
  • python+vue+elementui企业会议管理系统django
  • 实现windows 窗体的自己画,网上摘抄的,学习了
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • Consul Config 使用Git做版本控制的实现
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • Java程序员幽默爆笑锦集
  • MaxCompute访问TableStore(OTS) 数据
  • Mybatis初体验
  • Python socket服务器端、客户端传送信息
  • Redis 懒删除(lazy free)简史
  • SpringBoot 实战 (三) | 配置文件详解
  • Vue ES6 Jade Scss Webpack Gulp
  • 从PHP迁移至Golang - 基础篇
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 动态魔术使用DBMS_SQL
  • 对象管理器(defineProperty)学习笔记
  • 对象引论
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 蓝海存储开关机注意事项总结
  • 通信类
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • 树莓派用上kodexplorer也能玩成私有网盘
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • #pragma data_seg 共享数据区(转)
  • #在 README.md 中生成项目目录结构
  • (06)Hive——正则表达式
  • (1)虚拟机的安装与使用,linux系统安装
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (顺序)容器的好伴侣 --- 容器适配器
  • (提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战
  • (一)WLAN定义和基本架构转
  • (原創) 如何動態建立二維陣列(多維陣列)? (.NET) (C#)
  • (转)创业家杂志:UCWEB天使第一步
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .NET 3.0 Framework已经被添加到WindowUpdate
  • .NET 5.0正式发布,有什么功能特性(翻译)
  • .NET3.5下用Lambda简化跨线程访问窗体控件,避免繁复的delegate,Invoke(转)
  • .NetCore Flurl.Http 升级到4.0后 https 无法建立SSL连接