码迷，mamicode.com
首页 > Web开发 > 详细

[JS]-06

时间：2021-06-13 09:36:08      阅读：0      评论：0      收藏：0      [点我收藏+]

标签：ceil   参数   内置对象   class   instance   UNC   自定义   等价   工资   

1、js内置对象

Math、Date、Array、String

  • JS中对象分为3种：1、自定义对象 2、内置对象 3、浏览器对象

  • 前面两种对象是/S基础内容,属于ECMAScript ;第三个浏览器对象属于我们JS独有的,我们JS APl讲解

  • 内置对象就是指IS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)

  • 内置对象最大的优点就是帮助我们快速开发

2、学会查阅MDN文档

1、搜索内置对象名.函数名() 回车

技术图片

2、更换中文简体

技术图片

3、查看该函数API的主要功能是什么

技术图片

4、在查看该函数的参数，意义，类型,返回值

技术图片

3、Math对象

Math数学对象，不是一个构造器，不需要new再使用，直接打点调用

Math.PI:

console.log(Math.PI);//3.141592653589793 //一个属性，圆周率

Math.max()

console.log(Math.max(10,20));//20

console.log(Math.max(-1, -10));//-1

console.log(Math.max(1,2, ‘andy‘));//NaN => not a number

console.log(Math.max()); //-Infinity

4、封装自己的数学对象

  • 利用对象封装自己的数学对象，里面有PI，最大值，最小值
var myMath = {
  PI:3.141592653,
  max: function() {
    var max = arguments[0];
    for(var i = 1; i<arguments.length; i++) {
      if(arguments[i] > max) {
        max = arguments[i];
      }
    }
    return max;
  },
  min: function() {
    var min = arguments[0];
    for(var i = 1; i<arguments.length; i++) {
      if(arguments[i] < min) {
        min = arguments[i];
      }
    }
    return min;
  },
}


//使用自己的对象
console.log(myMath.PI);
console.log(myMath.max(1,2,3,5));
console.log(myMath.min(10,20,30,400));

5、Math其他小方法

Math.floor() //向下取整，往小了取

console.log(Math.floor(1.1));//1

Math.ceil() //向上取整，往大了取

console.log(Math.ceil(1.1));//2

Math.round() //取整数，四舍五入

console.log(Math.round(1.4));//1
console.log(Math.round(1.5));//2

Math.abs()

console.log(Math.abs(1));
console.log(Math.abs(-5));//5
console.log(Math.abs(‘-5‘));//5 -- 隐藏转换 ‘-5‘ => -5
console.log(Math.abs(‘green‘));//NaN

Math.random() //返回0-1的小数，但不包括1 [0,1) ==> 0 <= x < 1

console.log(Math.random());//0.9929172816669138

我们想要得到两个数之间的随机整数并且包含这2个整数

function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
var num1 = getRandom(1,10);
console.log(num1);// 2,4,7,2,5,3,10

随机点名

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

var array = [‘张三‘, ‘李四‘, ‘王五‘];
var random_number = getRandom(0,array.length-1);


console.log(array[random_number]);

6、猜数字游戏

需求:

程序随机生成一个1-10之间的数字,并让用户输入一个数字1,如果大于该数字,就提示,数字大了,继续猜;
2,如果小于该数字,就提示数字小了,继续猜;
3.如果等于该数字,就提示猜对了,结束程序。

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

var guest_number = getRandom(1,10);

while(true){
  user_number = prompt(‘请输入您要猜的数字: ‘);
	user_number = parseInt(user_number);	

  
  if(user_number>guest_number){
    alert(‘您猜大了,请继续‘);
  }else if(user_number<guest_number){
    alert(‘您猜小了,请继续‘);
  }else if(user_number == guest_number){
    alert(‘恭喜您猜对了...: ‘ + user_number);
    break;
  }
}

7、Date日期对象的使用

Date() 日期对象是一个构造函数，必须使用new再调用

1、最小化使用

var date = new Date();
console.log(date);//Fri Jan 15 2021 13:06:47 GMT+0800 (中国标准时间)
//如果没有参数，返回当前系统的当前时间
//var date1 = new Date(2020,2,15);
//console.log(date1);
var date2 = new Date(‘2019-10-1 8:8:8‘);
console.log(date2);

8、格式化年月日星期

我们想要格式化2020-2-15 8:8:8 ?

方法名 说明 代码
getFullYear() 获取当年 dObj.getFullYear();
getMonth() 获取当月 dObj.getMounth();
getDate() 获取当天日期 dObj.getDate();
getDay() 获取星期几（0，6） dObj.getDay();
getHours() 获取当前小时 dObj.getHours();
getMinutes() 获取当前分钟 dObj.getMinutes();
getSeconds() 获取当前秒 dObj.getSeconds(); 
var date = new Date();
console.log(date.getFullYear());//2021
console.log(date.getMonth() + 1);//2 (0,11)
console.log(date.getDate()); //返回的: 几号
console.log(date.getDay()); //周五 周一返回1 周六返回6 周日返回0
//我们写一个 2021年 1月 15日 星期五
var year = date.getFullYear();
var month = date.getMonth()+1;
var date = date.getDate();
var array = [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘];
var day = date.getDay();


console.log(‘今天是‘ + year + ‘年‘ + month + ‘月‘ + date + ‘日‘ + array[day]);

9、格式化时分秒

8:8:8 ?

var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());

封装一个函数返回当前的时间分钟秒 => 08:08:08

function getTime() {
	var time = new Date();
  var h = time.getHours();
  h = h<10? ‘0‘+h : h;
  var m = time.getMinutes();
  m = m<10? ‘0‘+m : m;
  var s = time.getSeconds();
  s = s<10? ‘0‘+s : s;
  return h + ‘:‘ + m + ‘:‘ + s;
} 

console.log(getTime());

10、Date毫秒数（时间戳）

获取日期的总的毫秒形式

从1970年1月1日 00:00:00 开始计算时间

// 通过valueOf() 或者getTime();
var date = new Date();
console.log(date.valueOf());//1610689681603 就是我们现在时间距离1970年1月1日的毫秒值

console.log(date.getTime());//1610689713846

// 简单的写法
var date1 = +new Date();
console.log(date1);//1610689784287

//H5新增的获取毫秒
console.log(Date.now());//1610689784287

11、倒计时案例

需求：

倒计时

分析:

核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒

相减，比如05分减去25分,结果会是负数的。

技术图片 
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(‘2021-1-15 18:00:00‘));

12、数组内置类Array

创建数组两种方式

var array = [1,2,3];

var array1 = new Array();
var array1 = new Array(2);//限制数组长度为2,里面有两个空的数组元素
var array1 = new Array(2,3);//等价于 [2,3],就是 array  = [2,3];
console.log(array);
console.log(array1);

检测是否是数组两种方式

方法1

if(array instanceof Array) {
  ...
}

方法2

if(Array.isArray(array)) {
  ...
}

13、添加、删除数组元素

方法名 说明 返回值
push(...args) 末尾添加一个或者多个元素,注意修改原来的数组 并且返回新的长度
pop() 删除数组末尾元素，把数组长度-1，修改原来数组 返回他删除元素的值
unshift(...args) 向数组开头添加一个或者多个元素，注意修改原来数组 并且返回新的长度
shift() 删除数组第一个元素，数组长-1，修改原来的数组 并且返回第一个元素的值

push()

var array01 = new Array(1,2,3);
//末尾添加一
array01.push(1000);
console.log(array01);
技术图片

pop //删除末尾

var array01 = new Array(1,2,3);
//删除末尾
array01.pop();
console.log(array01);
技术图片

unshift //向数组开头添加一个或者多个元素

var array01 = new Array(1,2,3);
//向数组开头添加一个或者多个元素
array01.unshift(1000);
console.log(array01);
技术图片

shift //删除数组中第一个元素

var array01 = new Array(1,2,3);
//删除数组中第一个元素
array01.shift();
console.log(array01);
技术图片

14、筛选数组

需求:

有一个包含工资的数组1500, 1200,2000, 10,180,求把教组中工资超过2000的删除,剩余的放到新数组里面

var array = [1500, 1200,2000,2100, 10,180];
var newArray = []
for(var i = 0; i<array.length; i++) {
  if(array[i] < 2000){
    //newArray[newArray.length] = array[i];//以前这么写很麻烦, 现在就简单了
    newArray.push(array[i]);
  }
}

console.log(newArray);
技术图片

15、数组排序

技术图片

翻转数组

//翻转数组
var array01 = [1,2,3,4,5];
console.log(array01.reverse());
技术图片

数组排序(冒泡排序)

var array01 = [3,4,7,1];
array01 = array01.sort();
console.log(array01);
技术图片

16、获取数组元素索引号

技术图片 
var array = [‘red‘, ‘green‘, ‘pink‘];
console.log(array.indexOf(‘green‘));//1
console.log(array.indexOf(‘suibian‘));//-1

console.log(array.lastIndexOf());//2
技术图片

17、数组去重案例

需求:

有一个数组[‘c‘, ‘a‘, ‘2‘, ‘a‘, ‘x,, ‘a‘, ‘x‘, ‘e‘, ‘b‘ ,要求去除数组中重复的元素。

技术图片 
function unique(array) {
  var newArray = [];
  for(var i = 0; i<array.length; i++) {
		if(newArray.indexOf(array[i]) == -1) {
      newArray.push(array[i]);
    }
  }
  return newArray;
}

array_01 = [‘c‘,‘c‘,‘c‘,‘b‘,‘b‘,‘b‘];

var demo = unique(array_01);
console.log(demo);
技术图片

18、数组转换为字符串

技术图片 
//1.toString()
var array01 = [1,2,3];
console.log(array01.toString());

//2.join分割符
var array02 = [4,5,6];
console.log(array02.join(‘|‘));
技术图片

19、字符串对象

var str = ‘andy‘;
console.log(str.length);
//对象才有属性和方法 复杂数据类型才有属性和方法
//简单数据类型为什么会有length属性？
//回答: JS吧简单数据类型包装成了复杂数据类型所有可以调用str.length;

//1、简单数据包装成复杂数据
var temp = new String(‘andy‘);
//2. 把临时变量的值给str
str = temp;
//3.销毁这个临沭变量
temp = null;

为了方便操作基本数据类型, JavaScript还提供了三个特殊的引用类型:

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

20、字符串不可变

指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了，内存中新开辟了一个内存空间。

21、根据字符返回位置

技术图片 
var str = ‘改革春风吹满地‘;
console.log(str.indexOf(‘春‘,0));//2

var str = ‘改革春夏秋冬冬风满地‘;
console.log(str.lastIndexOf(‘冬‘));//3

22、字符串案例(面试)

需求:

查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

分析:

1、核心算法：先查找第一个o出现的位置

2、然后indexOf返回的结果不是-1就继续往后找

3、因为indexOf只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找

var str = ‘abcoefoxyozzopp‘;
var index = str.indexOf(‘o‘);
//console.log(index);//3

while(index !==-1){
  console.log(index);
	index = str.indexOf(‘o‘, index + 1);
}

23、根据位置返回字符

技术图片 
//1.charAt(index)
var str = ‘andy‘;
console.log(str.charAt(3));//y
//遍历所有字符
for(var i = 0; i<str.length; i++) {
  console.log(str.charAt(i));
}

charCodeAt(index)
返回相应索引号的字符ASCII值目的: 判断用户按下了那个键

//charCodeAt(index)
var str = ‘andy‘;
console.log(str.charCodeAt(0));//97

str(index) H5 //获取指定位置处字符

var str = ‘andy‘;
console.log(str[0]);
技术图片

24、字符串连接、截取方法

技术图片 
var str = ‘andy‘;
console.log(str.concat(‘red‘));//andyred

//截取nd
newStr = str.substr(1, 2);
console.log(newStr);
技术图片

25、字符串替换

//1.替换 str.replace(‘被替换的字符‘, ‘替换成的字符‘);
str = ‘andylogo‘;
str = str.replace(‘andy‘, ‘local‘);
console.log(str);//locallogo

//2.字符转换为数组split(‘分隔符")
var str2 = ‘red, blue, pink‘;
str2 = str2.split(‘,‘);
console.log(str2);
技术图片

26、JS简单和复杂数据类型

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

  • 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型： string , number , boolean, undefined , null

  • 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用) ,因此叫做引用数据类型通过new关键字创建的对象(系统对象、自定义对象),如Object, Array. Date等

1、栈(操作系统) :由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;
简单数据类型存放到栈里面

2、堆(操作系统) :存储复杂类型对刻),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。
复杂数据类型存放到堆里面

27、函数的形式参数

函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量

28、复杂类型传递

简单数据类型传递把值传递过去，复杂数据类型把地址传过去

[JS]-06

标签：ceil   参数   内置对象   class   instance   UNC   自定义   等价   工资   

原文地址：https://www.cnblogs.com/diygou/p/14876699.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！