【JavaScript】巧用思维导图轻松学习JavaScript的后续来了

巧用思维导图轻松学习JavaScript的后续来了

前期更新了JavaScript 但是内容还没有完 所以，你想要的巧用思维导图轻松学习JavaScript的后续来了，并且文章末尾提供了好物分享呦

作用域——预解析以及代码执行

1，预解析 会把js引擎里面所有的var以及function提升到当前作用域的最前面
2，代码执行 按照代码书写的顺序从上往下进行执行

变量提升和函数提升

预解析 分为 变量预解析（变量的提升）和 函数预解析（函数提升）
变量的提升：就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
函数提升：就是把所有的函数声明提升到当前作用域的最前面

eg:

var num = 10;
fun();
function fun(){
console.log(num);
var num = 20
}

1，先进行外部预解析运行代码

var num;//预解析 变量提升
function fun(){//预解析 函数提升  先外部 后局部
console.log(num);
var num = 20
}
num = 10;
fun（）；

2，在进行内部函数预解析运行代码

var num；
function fun(){//函数内部预解析
var num；
console.log(num);
 num = 20；
}
num = 10;
fun（）；

3，代码从上往下进行执行

var num; 
function fun(){
var num；
console.log(num);
 num = 20；
}
num = 10;
fun();
//所以输出结果为undefined

eg:

fn();
console.log(c);//9
console.log(b);//9
console.log(a);//错误
function f1(){
var a = b = c = 9;
console.log(a);//9
console.log(b);//9
console.log(c);//9
}

注：

var a = b = c = 9;
相当于 var a = 9   b = 9  c = 9
其中 b c 没有被声明当作全局变量，而a当作为局部变量，则返回的为错误

JavaScript的对象

对象是 无序 属性 方法
对象是由属性和方法组成
属性：事物的特征 n 大小 颜色 主要是外在特性
方法：事物的行为 v 打电话 发信息 主要是行为

利用自变量创造对象

语法：

var obj = { }//创建一个空的对象

举例：

var obj = {
     uname : '张三枫',  //语法格式：用逗号隔开
     age:18,
     sex:'男'，
     sayHi :function(){       //方法
      console.log('hi~');
     }
}

注：
1，里面的属性或者方法 我们采取键值对的方式 键 以及 属性名 ： 值 属性值
2，多个属性或者方法之间用逗号进行隔开
3，方法冒号后面跟的是一个匿名函数
4，使用对象
调用对象的属性 采用 对象名 . 属性名
eg: console.log(obj.age);
5,调用属性还有一种方法 对象名 [ ‘属性名’]
6，调用对象的方法
obj.sayHi()；不要忘记小括号

变量和属性总结：

变量和属性的相同点：他们都是用来存储数据的
变量和属性的不同点：
变量单独声明并赋值 使用的时候直接写变量名，单独存在
属性 在对象里面的不需要声明 ，使用的时候语法形式为 对象.属性

函数和方法总结：

函数和方法的相同点: 都是执行某些功能

函数：
function fn(){
}///函数 单独声明并调用
fn:function(){
}///方法///在对象里面   调用 对象.方法（）

利用 new Object 创建对象

var obj = new Object( );//创建空的对象
obj.uname = '徐文杰';
obj.age = 18;
obj.sayHi = function(){
console.log('hi~');
}

注：
1，利用等号进行赋值
2，用分号进行隔开

为什么利用构造函数创建对象？
原因：以前的两种创造对象的方式只能创造一个对象

构造函数

1，利用函数：重复相同的代码 称为构造函数
2，构造函数：里面封装的不是普通的代码 而是 对象
3，构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

语法：

function 构造函数名（形参）{
     this.属性 = 值；
     this.方法 = function（）{
        }
      new  构造函数名（实参）；
}

举例：

function Star(uname,age,sex){
  this.name = uname;
  this.age = age;
  this.sex = sex;

  }
 var idh = new Star('徐文杰'，18，'男')//调用函数返回的是对象

注：

1,构造函数名字首字母需要大写
2,构造函数不需要return 就可以返回结果
3，调用构造函数必须使用new
4，只要new Star() 调用函数就创建了一个对象
5，属性和方法前面需要加上this

区别：

对象：是一个具体的事物
构造函数：泛指的某一个大类 类似java里面的类
对象实例化:构造函数创建对象的过程就是对象实例化

new关键字的作用

1，构造函数在内存中创建一个空的对象
2，this指向创建的空对象
3，执行构造函数里面的代码 给这个空对象添加属性和方法
4，返回对象

遍历对象 for in

语法 :

for (变量 in 对象){

 }

举例：

var obj ={
  name:'徐文杰',
  age:18,
  sex:'男'
  }  

for( var k in obj){
console.log(k);// k 变量 输出的是 属性名
console.log(obj[k]);//输出变量的属性值 
}

注：

for in 里面的变量 喜欢写k 或者key

内置对象

js 中的对象分为3种：自定义对象、内置对象、浏览器对象
内置对象 指js语言自带的对象

由于对象里面的方法比较多，所以我们要学会看文档

查文档
MDN文档.
1, 先查阅方法的功能
2，参阅方法的参数和类型
3，查看返回值的意义和类型
4，通过demo进行测试

Math对象

1, Math对象 不是构造函数 不需要new 直接调用就行就行
2, 出现的不是对象 就返回的为NAN

Math.max( ) //求最大值
console.log(Math.PI);//3.1425927
console.log(Math.max(1,99,3))//99

eg：利用对象封装自己的数学对象 里面有PI以及最大值 和最小值

var myMath = {
     PI：3.1415927，
     max : function(){
    var max = argumentt[0];
for( var i = 1;i<argument.length;i++){
 if(arguments[i]<min){
  min = arguments[i];    
        }
    }
return min;
       }
    }
console.log(myMath.PI);
console.log(myMath.max(1,5,9));
console.log(myMath.min(1,5,9));

注：

Math.abs( )//绝对值
Math.floor( )//向下取整
Math.ceil( )//向上取整
Math.round()//四舍五入
特殊情况：5 特殊 它往大的取
random()//随机数 返回一个随机小数 0 =< x < 1之间

eg:想要得到两个数之间的随机整数 并且包含2个整数

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

eg:随机点名

var arr = ['张三'，'张三枫'，'徐文杰'，'李四'，'王麻子'];
console.log(arr[getRandom(0,4)]);

eg：猜数字游戏

function getRandom(min,max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
var random = getRandom(1,10);
while(true){
var num = prompt('你来猜？请输入1-10之间的一个数字')；
  if(num>random){
       alert('你猜大了')；
     }
else if(num<random){
    alert('你猜小了')；
     }
else
   alert（'你猜对了'）；
   break;//退出整个循环
  }

日期对象

日期对象（倒计时）是一个构造函数 必须是使用new进行构造

1,创建一个对象

 var arr = new Arry();//创建一个数组对象
 var obj = new Object();//创建一个对象实例

2，使用 date

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

注：

1，当里面没有参数，就返回当前时间
2，数字型 2019，10，11
字符串型‘2019-10-2 8：8：8：8 使用的比较多

var date1 = new Date(2019,10,1);
console.log(date1);//数字型返回的是11月 不是10月 
var date2 = new Date('2019-10-2 8：8：8：8');//字符串 

返回当前的日期的年份

var date = new Date();

console.log(date.getFullYear());

console.log(date.getMonth()+1);//返回的月份小一个月，需要加1才为实际的日期

console.log(date.getDay());//周一返回的是1 周六返回的是6 周日返回的是0、

eg: 今天是2020年5月1号 星期三

var date = new Date();
var year = date.getFullyear();
var mon = data.getMonth()+1;
var dates = data.getData();//号
var day = date.getDay();//星期
var arr = ['星期日'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五'，'星期六'];
var day = date.getDay();//星期
console.log('今天是：' + year + '年'+ mon +'月'+dates + '日 ' + arr[day])；

时 分 秒

var date = new Date();
console.log(date.getHours());//小时
console.log(date.getMinutes());//分
console.log(date.getSeconds());//秒

eg:要求封装一个函数返回当前的时 分 秒

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();
     m = m<10?  '0'+s : s;
     return h +':'+m+':'+'s';
 }

获取日期的总毫秒(时间戳)

Date对象基于1970年1月1日
1，通过 valueOf( ) getTime( )
var time = new Date();
console.log(date.valueOf( ));//现在时间距离1970年总的毫秒数
console.log(date.getTime());
2，简单的写法
var date1 = +new Date();// +new Date()返回到总的毫秒数  常用
3 ，H5新增的获得总的毫秒数
console.log(Date.now());

京东倒计时

来看看京东是什么样的

核心算法：
1，输入的时间减去现在的时间
2，倒计时不能拿着时分秒进行相减导致负载 采取的是时间戳进行相减
3，再把总的毫秒数转化成天以及分 秒等

换算公式：
d = parselnt(总秒数/60/60/24)//计算天数
h= parselnt(总秒数/60/60%24)//计算小时
m = parselnt(总秒数/60%60)//计算分数
s = parselnt(总秒数%60)//计算当前秒数

function conutDown(time){
var nowTime = +new Date();//获取当前的时间
var inputTime = +new Date(time);//用户输入的时间
var times =（ inputTime - nowTime）/1000;//一秒等于1000毫秒
var d = parselnt(times/60/60/24);//计算天数
 d = d<10 ?  '0' + d : d;
var h= parselnt(times/60/60%24);//计算小时
 h = h<10 ?  '0' + h : h;
var m = parselnt(times/60%60);//计算分数
 m = m<10 ?  '0' + m : m;
var s = parselnt(times%60);/计算当前秒数
 s = s<10 ?  '0' + s : s;
return d +'天'+h +'时'+m +'分'+s +'秒'； 
  }
console.log(countDown('2019-5-1 18:00'));

关于我：

如果你喜欢我的博客，请给我一个赞???? 是我写下去的动力！

我是凉心❤️姑娘！????️进我的博客！

本文地址：https://blog.csdn.net/weixin_46038869/article/details/109203017