JS入门
1,undefined,NaN,Null,infinity
1) undefined 是undefined 类型
var a; //声明变量后不赋值
typeof 类型判断方法
console.log(typeof(a)) //undefined
2) NaN 是 number 型 表示不是一个数字
var a=123;
var b="abc";
a-b 得到NaN
console.log(typeof(a-b)) number
3) Null 面向对象的概念 表示该对象为空
4)infinity 是number 类型 表示无穷大 除数为0可得
2,js精度问题
js在运算时会存在精度问题:
1)可以先乘以100 1000 ....先化成整数在100 1000
2)number.toFixed(参数) 设置保留小数位数 1.528.toFixed(2) =1.53
3,Math 对象常用几个函数
1)天花板函数 ceil Math.ceil(1.23)=2 向上返回最小的整数
2)地板函数 floor Math.floor(1.23)=1 向下返回最小的整数
3)随机数
Math.random() 返回0-1 的随机数
Math.floor(Math.random()*10) 返回0-9 的随机数
4) Math.max() Math.min() 返回最大最小的值
5)Math.abs(x)返回一个绝对值
6)Math.round(x) 四舍五入
4,数据类型转换
1)隐式转换 变量在运算过程中发生的类型转换
!! console.log(!!"abc")
2)显示(强制)转换:
转字符串:a,(String)变量 b,变量.toString()
转数字型:a,Number(变量) b,parseInt(变量) c,parseFloat(变量)
转布尔型:Boolean(变量)
几种转换为false的 undefined NaN Null 0 false ""
5,逻辑运算符的短路操作:当操作数不是bool值时
1)隐式转换
2)从左往右
3) 哪个操作数可以决定结果,就返回这个原操作数
"100"&&0;//true&&false
6,数组检测方式
var arr=[]
1)Array.isArray(arr) 有兼容性问题
2)arr instanceof Array 推荐使用
3) Object.prototype.toString.Call(arr) 可检测任意类型
7,函数的arguments 和 es6 rest 用法
1)arguments只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数 类似数组
2)rest参数只能写在最后,前面用...标识
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
8,函数变量提升:
先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部
'use strict';
function foo() {
var x = 'Hello, ' + y;
alert(x);
var y = 'Bob';
}
foo();
虽然是strict模式,但语句var x = 'Hello, ' + y;并不报错,原因是变量y在稍后申明了。
但是alert显示Hello, undefined,说明变量y的值为undefined。
这正是因为JavaScript引擎自动提升了变量y的声明,但不会提升变量y的赋值。
............................................................................................
变量提升后代码:
function foo() {
var y; // 提升变量y的申明
var x = 'Hello, ' + y;
alert(x);
y = 'Bob';
}
注意:函数内变量的怪异声明模式
function fun(){
num=10 //没写var 就相当于全局变量
}
fun()
console.log(num) //10
9,this 指向问题

1 'use strict';
2 var obj={
3 name:"test",
4 printName:function(){
5 console.log(this.name)
6 }
7 }
8 obj.printName(); //显示 test this 指的就是obj
9
10 var obj={
11 name:"test",
12 printName:function(){
13 function showName (){
14 console.log(this.name)
15 }
16 return showName()
17 }
18 }
19 obj.printName(); //this 指向 undefined (在非严格模式下指向Windows)
20
21 解决方法: var obj={
22 name:"test",
23 printName:function(){
24 var self=this //在函数外捕获this
25 function showName (){
26 console.log(self.name)
27 }
28 return showName()
29 }
30 }

10,sort 排序的坑
1)Array的sort()方法默认把所有元素先转换为String再排序,如果直接排序数字你就踩坑了
2)默认根据ASCII码进行排序
3)sort 是一个高阶函数,sort(function(){
//写具体的实现逻辑
})
// 升序
sort(function(a,b){
return a-b
})
//降序
sort(function(a,b){
return b-a
})
11,获取样式
getComputedStyle(el,null).width ie 不支持
document.getElementById("btn").currentStyle.width ie提供的
function getStyle(tag, attr) { return tag.currentStyle ? tag.currentStyle[attr] : getComputedStyle(tag,null)[attr]; }
12,拼接字符串的问题
在ie7以下存在性能问题,可用数组替换
ie7以上不存在该问题
13,数组的几个方法
1)arr.slice(start,end) 拷贝数组中的一段数据,返回拷贝的数组
2)splice(start,length) 返回截取数组的部分元素,修改原数组
splice 的参数超过2个会将剩下的参数添加到被截取的数组位置上
arr.splice(1,2,"a","b")
14,清空数组:
1)arr.length=0
2)arr=[] //推荐使用
3)arr.splice(0,arr.length)
15,避免事件被覆盖的方法(ie9 以下不支持)
标签.addEventListener(enventType,fn,flase) false默认冒泡 true 捕获
function fun(){
alert("你好")
}
eg:btn.addEventListener("click",fun)
移除事件监听(参数必须一致)
btn.removeEventListener("click",fun)
ie-6-10(enventType 加on)
标签.attachEvent(enventType,fn)
标签.detachEvent(enventType,fn)
16,事件冒泡,和事件捕获
事件冒泡:从里向外执行,遇到相同的事件及执行
事件捕获:执行顺序与冒泡相反(不推荐使用,因为ie使用attachEvent 没有第三个参数)
阻止事件冒泡
e.stopPropagation()
ie 中阻止事件传播 cancelBubble=true
17,事件的对象作用:记录当前事件触发时的一些信息
btn.onclick=function(event){}
event.target真正触发事件的元素
event.type="click"
event.clinetX/clinetY
ie 低版本不兼容
var tar=e.target||e.srcElement
18,Json 串的2方法
1)object-->string JSON.stringify()
2) string--> obj JSON.parse()
JS入门的更多相关文章
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- JS入门之ActiveXObject对象(转载)
JS入门之ActiveXObject对象 此对象提供自动化对象的接口. function ActiveXObject(ProgID : String [, location : String] ...
- Node.js 入门手册:那些最流行的 Web 开发框架
这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 让我们一起学习《Node.js入门》一书吧!
Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...
- web前端开发分享-css,js入门篇(转)
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
- Node.js入门实例程序
在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...
- Underscore.js(1.7.0) 中文文档 Underscore.js 入门
原文地址:http://www.css88.com/doc/underscore/ Underscore.js 入门 http://www.tuicool.com/articles/jQ3IfeR
随机推荐
- 线性数据结构之栈——Stack
Linear data structures linear structures can be thought of as having two ends, whose items are order ...
- bootstrap-fileinput 简单使用
bootstrap-fileinput 是一款图片/文件上传 bootstrap 插件,简单示例代码: <!DOCTYPE html> <html> <head> ...
- 9、委托、事件、Lambda
开始 关于委托,肯定是要有问题的. 第一个问题,委托用来干什么? 看.net中的表述:在.net平台下,委托类型用来定义和相应应用程序中的回调.(回调?处理内存中两个实体双向通信的一种技术.) 第 ...
- 创建APPID&&部署服务端教程
创建APPID&&部署服务端 一.创建APPID 1.打开https://console.developers.google.com ,左击顶部Project,然后左击创建项目 2.输 ...
- 免费高效实用的.NET操作Excel组件NPOI(.NET组件介绍之六)
很多的软件项目几乎都包含着对文档的操作,前面已经介绍过两款操作文档的组件,现在介绍一款文档操作的组件NPOI. NPOI可以生成没有安装在您的服务器上的Microsoft Office套件的Excel ...
- [原] KVM 虚拟化原理探究(5)— 网络IO虚拟化
KVM 虚拟化原理探究(5)- 网络IO虚拟化 标签(空格分隔): KVM IO 虚拟化简介 前面的文章介绍了KVM的启动过程,CPU虚拟化,内存虚拟化原理.作为一个完整的风诺依曼计算机系统,必然有输 ...
- TYPESDK手游聚合SDK服务端设计思路与架构之一:应用场景分析
TYPESDK 服务端设计思路与架构之一:应用场景分析 作为一个渠道SDK统一接入框架,TYPESDK从一开始,所面对的需求场景就是多款游戏,通过一个统一的SDK服务端,能够同时接入几十个甚至几百个各 ...
- 微信小程序服务范围重大更新
12.29日,小程序服务范围做了重大更新,增对富媒体和工具类型的小程序,增加了很多细分领域 富媒体:增加资讯,FM电台,有声读物等,媒体平台可上小程序了 工具:信息查询,网络代理,健康,企业管理等 , ...
- nexus 社区版3.0.2部署、访问
下载nexus社区办(oss): https://www.sonatype.com/download-oss-sonatype 目前最新版本 nexus-3.0.2-02-win64.zip nex ...
- Create a bridge using a tagged vlan (8021.q) interface
SOLUTION VERIFIED April 27 2013 KB26727 Environment Red Hat Enterprise Linux 5 Red Hat Enterprise Li ...