JavaScript 标识符
名称可包含字母、数字、下划线和美元符号 名字不能以数字开头 名称对大小写敏感 不能用保留字
数据类型引用 object date array funtion
基本类型 null undefined string number boolean symbol
NaN 的数据类型是数值
数组的数据类型是对象
日期的数据类型是对象
null 的数据类型是对象
未定义变量的数据类型是 undefined
尚未赋值的变量的数据类型也是 undefined
取幂运算符
(**)
es6新加的,x ** y 产生的结果与 Math.pow(x,y) 相同
常见的 HTML 事件
事件 描述
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载
尽量避免使用on开头的事件,就是说少用html里面的事件 onload除外
字符串方法:
1、.length 字符串长度
2、.indexOf(“字符串”,索引) 方法返回字符串中指定文本首次出现的索引(位置)未找到返回-1
3、lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引,未找到返回-1
4、search() 方法搜索特定值的字符串,并返回匹配的位置。
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值(正则表达式)。
5、slice(start,end) 提取字符串的某个部分并在新字符串中返回被提取的部分,如果某个参数为负,则从字符串的结尾开始计数。如果省略第二个参数,则该方法将裁剪字符串的剩余部分
6、substring() 类似于 slice()。 不同之处在于 substring() 无法接受负的索引。
7、substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。如果省略第二个参数,则该 substr() 将裁剪字符串的剩余部分。如果首个参数为负,则从字符串的结尾计算位置。
8、replace() 方法用另一个值替换在字符串中指定的值
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "fxq");
replace() 方法不会改变调用它的字符串。它返回的是新字符串。只替换首个匹配, 对大小写敏感,但可以加正则改变,这里面正则不带引号。
9、toUpperCase() 把字符串转换为大写
10、toLowerCase() 把字符串转换为小写
11、concat() 连接两个或多个字符串,concat() 方法可用于代替加运算符。
12、trim() 方法删除字符串两端的空白符
13、 charAt() 方法返回字符串中指定下标(位置)的字符串,用得少
所有字符串方法都会返回新字符串。它们不会修改原始字符串。
split() 方法用于把一个字符串分割成字符串数组。
可以通过 split() 将字符串转换为数组
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔
数值
数字中字符串数值+会转为字符串,减乘除会转为数字
NaN 属于 JavaScript 保留词,指示某个数不是合法数。
非数字除法会得到NAN,字符串是数字倒不会
var x = 100 / "Apple"; // x 将是 NaN
var x = 100 / "Apple";
isNaN(x); // 返回 true,因为 x 不是数
var x = NaN;
var y = "5";
var z = x + y; // z 将是 NaN5
NaN 是数,typeof NaN 返回 number
Infinity 是最大数:typeOf Infinity 返回 number。
数值方法
1、isNaN() 来确定某个值是否是数
2、toString() 以字符串返回数值。 显示转换
3、valueOf() 以数值返回数值,如果无法转换数字,则返回 NaN。
4、parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字
5、parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字
Array 数组 []
数组用于在单一变量中存储多个值。
数组名 instanceof Array 检测数组方法
Array.isArray() 判断是否是数组
数组方法
pop() 方法从数组中删除最后一个元素,pop() 方法返回“被弹出”的值
push()向数组添加新元素的最佳方法是使用 push() 方法
用lenght添加字符串
fruits[fruits.length] = "Kiwi";
slice() 方法创建新数组。它不会从源数组中删除任何元素
concat() 方法不会更改现有数组。它总是返回一个新数组。
join() 方法也可将所有数组元素结合为一个字符串。
相比于toString()只能逗号分隔join(“*”)可以自定义分隔符
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引
shift() 方法返回被“位移出”的字符串
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素
delete delete fruits[0]; // 把 fruits 中的首个元素改为 undefined 会在数组留下未定义的空洞。
请使用 pop() 或 shift() 取而代之
splice() 不会出现新数组 删除和拼接
添加的不会创建新数组,删除的会
fruits.splice(1);删除第一个
slice() 方法用数组的某个片段切出新数组。
删除都是返回被删的元素
splice相当于删除多个,返回的也是删除的元素
sort() 方法是最强大的数组方法之一。 不过,如果数字按照字符串来排序,则 "25" 大于 "100",因为 "2" 大于 "1"。
sort() 方法在对数值排序时会产生不正确的结果。
手写排序
reverse() 方法反转数组中的元素
points.sort(function(a, b){return b - a}); 用比值函数实现排序
Math.max()来查找数组中的最高值
Math.min()来查找数组中的最低值
forEach、map、filter用法和区别
forEach(value,index,array) 方法为每个数组元素调用一次函数(回调函数);
map 接受函数做参数,接受的函数对数组中的值做相同的操作,return操作的结果可以隐式转换。
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
filter 接受函数 给限制条件来筛选,函数操作返回值或者不返回;
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
其他方法
reduce() 接受函数,函数里面可以做计算操作+-*/ 总数(初始值/先前返回的值)
项目值,项目索引,数组本身
every() 方法检查所有数组值是否通过测试,接受函数
some() 方法检查某些数组值是否通过了测试
indexOf() 方法在数组中搜索元素值并返回其位置
find() 方法返回通过测试函数的第一个数组元素的值 接受函数
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
date方法
toUTCString() 方法将日期转换为 UTC 字符串(一种日期显示标准)。
toDateString() 方法将日期转换为更易读的格式
getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数
getFullYear() 方法以四位数字形式返回日期年份
getMonth() 以数字(0-11)返回日期的月份
getDate() 方法以数字(1-31)返回日期的日
getHours() 方法以数字(0-23)返回日期的小时数
getMinutes() 方法以数字(0-59)返回日期的分钟数
getSeconds() 方法以数字(0-59)返回日期的秒数
getMilliseconds() 方法以数字(0-999)返回日期的毫秒数
getDay() 方法以数字(0-6)返回日期的星期名(weekday)
**set也有一套相同的方法()set里面参数式时间 **
类型 实例
ISO 日期 "2018-02-19" (国际标准)
短日期 "02/19/2018" 或者 "2018/02/19"
长日期 "Feb 19 2018" 或者 "19 Feb 2019"
完整日期 "Monday February 25 2015"
数学方法
Math.PI;
Math.round(x)
Math.pow(x, y)
Math.sqrt(x)
Math.abs(x)
Math.ceil(x)的返回值是 x 上舍入最接近的整数
Math.floor()
Math.sin()
Math.cos()
Math.min() 和 Math.max()
Math.random() 返回介于 0(包括) 与 1(不包括) 之间的随机数
Math.floor(Math.random() * 100);组合 // 返回 0 至 99 之间的数
对象不能与对象比较
alert()警告
write()html输出
innerHTML写入html元素 (直接用点就可以)
console.log 写入浏览器控制台
try-catch
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何
error 对象提供两个有用的属性:name 和 message
EvalError 已在 eval() 函数中发生的错误
RangeError 已发生超出数字范围的错误
ReferenceError 已发生非法引用
SyntaxError 已发生语法错误
TypeError 已发生类型错误
URIError 在 encodeURI() 中已发生的错误
作用域
局部变量会在函数完成时被删除。
全局变量会在您关闭页面是被删除。
严格模式
通过在脚本或函数的开头添加 "use strict"; 来声明严格模式。
"use strict" 指令只能在脚本或函数的开头被识别
<script>
"use strict";
全局声明
</script>
严格模式使我们更容易编写“安全的” JavaScript。
严格模式把之前可接受的“坏语法”转变为真实的错误。
可以使用 let 关键词声明拥有块作用域的变量。
在块 {} 内声明的变量无法从块外访问:
同一个作用域中let声明x后,就不允许再声明x了
在声明 let 变量之前就使用它会导致 ReferenceError。
变量从块的开头一直处于“暂时死区”,直到声明为止
debugger 关键词会停止 JavaScript 的执行,并调用(如果有)调试函数
JavaScript 代码约定
JavaScript 代码约定
驼峰式大小写所有名称以字母开头。
运算符周围的空格
代码缩进
请始终以分号结束单条语句
行长度小于 80
使用小写文件名
请避免全局变量、new、===、eval()
请不要声明数值、字符串或布尔对象
请勿使用 new Object()
请使用 {} 来代替 new Object()
请使用 "" 来代替 new String()
请使用 0 来代替 new Number()
请使用 false 来代替 new Boolean()
请使用 [] 来代替 new Array()
请使用 /()/ 来代替 new RegExp()
请使用 function (){}来代替 new Function()
用字符串减去字符串,不会产生错误而是返回 NaN
eval() 函数用于将文本作为代码来允许。在几乎所有情况下,都没有必要使用它。
因为允许任意代码运行,它同时也意味着安全问题。
减少循环中的活动
var i;
var l = arr.length;
for (i = 0; i < l; i++)
减少 DOM 访问
缩减 DOM 规模
避免不必要的变量
延迟 JavaScript 加载 放在最后
一个选项是在 script 标签中使用 defer="true"。defer 属性规定了脚本应该在页面完成解析后执行
请避免使用 with 关键词。
BOM
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口
screen.width
screen.height
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮
DOM
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
createElement()
createTextNode
appendChild()
insertBefore() 最前添加
replaceChild()
removeChild()
querySelectorAll()
节点删除自己的方法
this.parentNode.removeChild(this)
addEventListener() 方法为指定元素指定事件处理程序。 可以添加多个事件会依次执行。
removeEventListener() 可以删除
每个节点都有nodeValue 和nodeName nodeType
JSON.parse()
JSON.stringify()
各种模式 工厂模式 数组去重
深拷贝和浅拷贝代码手写 手写各种代码
明天
虚拟DOM
后天面试题
null和undefined的区别?new操作符具体干了什么呢?
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
1.11、你都使用哪些工具来测试代码的性能?
单元测试
post请求和get请求的区别
浏览器模型,渲染原理,js解析过程,js运行机制
JSPerf, Dromaeo
箭头函数(Arrow Function)
iief立即调用函数 作用 用法
this call 、apply、bind
正则
json
.trim去掉多余空格
JSON.parse()
JSON.stringify()
字面量 河四种方法状态
属性 Getter 和 Setter
Object.defineProperty()
value: "EN",
writable : true,
enumerable : false,
configurable : true
跨域处理
offsetLeft,clientTop 这里还漏了。 还有各种循环map 之类的还有区别
post请求和get请求的区别
e.pageX,e.pageY,定位是相当于文档的位置,文档左上角为(0,0)
e.clientX,e.clientY 相对于浏览器窗口的可见区域,不包括工具栏和滚动条,有滚动条,滚动条隐藏部分不进入计算
e.screenX,e.screeY 返回的是相对于屏幕的坐标,浏览器上面的工具栏
e.offsetx
this关键字
数组方法
哪些方法返回新的数组
正则常用的方法
显示隐方转换
个循环比较
http相关,web安全相关,
前端mvvm框架的理解 和生命周期的理解
constructor 属性返回所有 JavaScript 变量的构造器函数。