js 入门级常见问题

写在前面:以下是个人总结的关于js常见的入门级的问题一些总结。

js是有 ECMAScript Dom Bom 三部分组成。

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()

时间: 2024-10-11 06:29:30

js 入门级常见问题的相关文章

chart.js使用常见问题

Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 在使用过程中新手可能会遇到很多问题导致图标无法显示.下面我们来看一下在使用过程中可能会遇到的问题. 刚开始用chart.js的新手可能最先使用的就是chart.js的中文文档,根据中文文档所写的操作步骤完成操作. 首先,下载chart.js文件,通常我们从github下载. 初次使用,我们通常会直接点击图片右下角的clone or download直接下载zip文件,然后在解压后的文件中找到chart.js文件,之后引

JS中常见问题

1 //s金额 n保留几位小数 默认保留两位小数 2 function formatMoney(s, n) { 3 n = n > 0 && n <= 20 ? n : 2; 4 s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; 5 var l = s.split(".")[0].split(""

js工作常见问题收集

1. viewport <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串'device-width' // device-width 设备宽度 // height 设置viewport高度,

Node.js 面试问题及答案(2017 版)

阅读原文 两年前,我们发布了我们的第一篇关于 Node.js 面试的文章 Node.js 面试常见问题和答案,近两年,JavaScript 和 Node.js 生态系统有了很多更新和发展,因此,是该更新这些面试问题和答案的时候了. 免责声明(重要) 仅仅通过面试问题去评价一个面试者,从来都不是一个好的选择.但是这些问题可以让你大体了解面试者在 Node.js 开发上的经验. 当然,这些问题并不能全面反映一个人的思维方式和开发习惯. 我相信,开发中遇到的问题,更能反映面试者的知识水平 - 所以,我

JS高级前端开发群加群说明

JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这样的成绩或这样一个结果也是情理之中,一方面来说,提倡的各种交流沟通方法大部分是正确有效或被大家认可的,另外一方面说,这么多人聚在一起,跟大伙的参与分享是分不开的,尤其是各群的管理,是我们的灵魂精神的支柱.另外在国内行业前进的道路上,尽自己的绵薄之力帮助他人,引领氛围,进而影响行业,也是略感欣慰.有时候精

前端效果

近期项目中用到的一些自己写的或者整理而成的前端效果干货 目录 一.jQuery 上下滚动抽奖效果 二.JQ地址级联划动选择器-中国省市区 三.JQ地址级联划动选择器-日期 四.JQ地址级联划动选择器-日期时间 五.jQuery + animation.css滑动解锁 六.jQuery.countdown jQuery倒计时插件 七.Simple Switch 简单的jQuery Switch开关插件 八.jQuery下拉刷新 九.Three.js全景小游戏,找小黄豆 十.Egret小游戏,手势控

近期项目中用到的一些自己写的或者整理而成的前端效果干货

目录 一.jQuery 上下滚动抽奖效果 二.JQ地址级联划动选择器-中国省市区 三.JQ地址级联划动选择器-日期 四.JQ地址级联划动选择器-日期时间 五.jQuery + animation.css滑动解锁 六.jQuery.countdown jQuery倒计时插件 七.Simple Switch 简单的jQuery Switch开关插件 八.jQuery下拉刷新 九.Three.js全景小游戏,找小黄豆 十.Egret小游戏,手势控制弹球球 十一.jQuery + animate.css

2019数据可视化图表资源专题来了,哪一款才是您的最佳选择

想要做出高大上的数据可视化图表,但又不知道怎么入手?别担心,今天小编为大家整合了目前比较火热的图表工具,让您在短短10分钟内也能制作出高水平的数据可视化图表.不管你是小白,还是资深用户,这些图表工具将会让您工作起来更加心应手.赶快来看看吧! 图表推荐 这些图表工具,您不能不知道! AnyChart 灵活的高度可定制的跨浏览器.跨平台JavaScript (HTML5) 图表控件. Highcharts 纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的.交互式图表 Light

document.body的一些用法以及js中的常见问题

document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth    (包括边线的宽); 网页可见区域高: document.body.offsetHeight   (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: documen