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

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

作用域——预解析以及代码执行
JavaScript的对象
内置对象
Math对象
日期对象
京东倒计时

前期更新了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('你猜小了')；}
elsealert（'你猜对了'）；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'));

关于我：

如果你喜欢我的博客，请给我一个赞

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

个人知识体系思维导图_“知识体系”打得好，学霸孩子跑不了，巧用“思维导图”来帮忙...
文章纯属原创,版权归本作者所有,欢迎个人转发分享. 相信很多妈妈都会看见孩子学习学不进去的苦恼,孩子看着很用功,每天按时完成作业.做练习题,但是成绩就是一直上不去,还会出现成绩不升反降的情况.这成了许 ...
9张思维导图学懂Javascript
话说,好记性不如烂笔头,而学习的道路就是一个不断的总结归纳的过程,今天给出的Javascript学习的思维导图内容,其实,我在2016年的时候,就已经跟大家分享过了,但是发现最近又有小伙伴来问要那个P ...
思维导图超级学习力提升宝典
思维导图超级学习力提升宝典如何维护保养大脑影响大脑健康的生活方式大脑所需要的的事物判断自己的好奇,想象,冒险, 提高阅读速度阅读的三个不良习惯怎么吃透数学练习题不同考试答题方法客观题考 ...
《富爸爸，穷爸爸》思维导图和学习笔记
<富爸爸,穷爸爸>思维导图和学习笔记前言本来想梳理数据分析师的技术栈,不过有段时间没写技术博客了,容易卡文,所以写点其他的.碰巧看了一本书<富爸爸,穷爸爸>,里面的内容挺有 ...
k8s学习-思维导图与学习笔记
目录前言 k8s思维导图推荐书籍网站课程了解与安装基础资源调度服务发布配置管理进阶持久化存储高级调度高级 RBAC NetworkPolicy CKA 安全前言博主准备 ...
JavaScript W3School教程思维导图
JavaScript W3School教程思维导图
什么是思维导图？思维导图高效学习法
什么是思维导图?思维导图高效学习法思维导图是一张将思维形象化的方法,他简单却很有效,是一种实用性的工具,他运用图文并茂的技巧,把各级主题的关系相互隶属与相关的层级图表现出来,把主题关键词与图像.颜色 ...
【JavaScript】巧用思维导图来轻松学习JavaScript
js的入门到真实项目的实践 js的历史由来 js书写的位置 js的基本语句 js的变量以及变量命名规范数据类型 (面试) 运算符循环数组函数作用域预解析完结前面更新了h5的相关知识,接 ...
JavaScript基础详细思维导图（纯分享，不加水的那种）
JavaScript比较基础重要知识的思维导图分享给大家,希望能给大家提供帮助,用到的工具是xmind 思维导图是小M.自己学习后总结出来的,比较适合新手,比较推荐UU们自己构造一个属于自己的思维导图 ...