Javascript中的location对象
window.location === document.location // true
location的属性列表
修改location的属性会导致页面刷新并产生新的历史记录
window.location = “URL” 和 location.href=”URL”效果一样,都会调用location.assign(URL)
location.replace(URL)不会产生新的历史记录,而且会禁用后退
location.reload(true): 重新加载页面,参数可以选择是否从服务器加载(而不是从缓存加载)
Javascript中的window对象
window对象的两个作用:
表示浏览器的一个实例
ECMAscript中的Global对象 直接定义Global变量与在window上定义Global变量的区别是:直接定义的Global变量的[[configurable]]特性为false,也就是说,它不能用delete删除
窗口关系及框架
如果html中包含框架(frame),那么每个框架都有自己的window对象,它们从上到下,从左到右,依次存放于window.frames数组中。可以通过window.frames[index]或者window.frames[frame_name]来获取frame的window对象
window.name为frame的name
top对象表示最外层html的window对象
parent对象表示上层frame的window对象
self表示frame自身的window对象
窗口位置
window.screenLeft window.screenTop 或者firefox中的window.screenX window.screenY表示窗口左上角的位置 va ...
Javascript中的函数表达式
函数声明 有提升 而函数表达式没有,因此不应该通过if…else来声明函数
if (condition) {
function sayHi() {}
} else {
function sayHi() {}
}
在递归函数中使用arguments.callee可以避免因函数名改变产生的错误。
function factorial(num) {
if (num <= 1) {
return 1;
} else {
return num * arguments.callee(num - 1);
}
}
闭包是指函数中定义的函数,闭包的作用域链中包含父函数的执行环境(变量对象),所以即使父函数退出,如果闭包仍然被引用,那么父函数的变量对象就一直存在于内存中。所以,过度的使用闭包会导致内存占用过多
闭包的另外一个副作用是闭包只能取得父函数中变量的最后一个值,例如: function createFunctions() {
...
Javascript中的对象
属性的类型1.1 数据类属性数据类属性的属性——特性为:
[[Configurable]]: 默认为true。表示能否通过delete删除属性,能否修改属性的特性。
[[Enumerable]]: 默认为true。表示在用for-in迭代对象时,能否迭代出该属性。
[[Writable]]: 默认为true。表示能否修改属性的值。
[[Value]]: 默认为undefined。保存属性的值。
1.2 访问器类属性访问器类属性的特性为:
[[Configurable]]: 默认为true。表示能否通过delete删除属性,能否修改属性的特性。
[[Enumerable]]: 默认为true。表示在用for-in迭代对象时,能否迭代出该属性。
[[Get]]: 默认为undefined。读取属性时调用的函数。
[[Set]]: 默认为undefined。写入属性时调用的函数。
使用访问器类型的属性的常用方法是写入该属性时往往会导致其他属性也跟着变化。
1.3 对特性的操作方法:Object.defineProperty(Object, prop ...
Javascript中的单体内置对象
Global
encodeURI() encodeURIComponent(): 用utf-8编码替换URI中的无效字符,区别在于encodeURI并不对属于URI的特殊字符进行编码,如:// #?等
eval(“var msg=’hello world’”); alert(msg);
Global对象的属性:
undefined
NaN
Infinity
Object
Array
Function
Boolean
String
Number
Date
RegExp
Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
可通过window对象来访问global对象的变量和函数
var global = function(){return this;}();
Math
Math对象的属性:
Math.E
Math.LN10
Math.LN2
Math.LOG2E
Math.LOG10E
M ...
Javascript中的基本包装类型
当读取一个基本类型(Boolean、String、Number)的值时,后台对创建一个对应的基本包装类型,从而让我们可以调用一些方法来操作这些数据。 基本包装类型与引用类型的区别:
生存期。自动创建的包装类型只存在于一行代码存在的瞬间。不能在运行时为基本类型添加属性和方法。
Number类型常用的方法
toString()
toFixed(2) //小数点后两位
toExponential()
toPrecision(3)
String类型常用的属性和方法
length: 返回字符串的长度
charAt(2) charCodeAt(2): 返回字符串中第三个字符/编码
concat(“xxx”) 或者 + “xxx”: 字符串拼接
slice(start, end) subString(start, end) subStr(start, number): 字符串切片 当start为负值时,slice和subStr会把它与字符串长度相加得到新的start;而subString则会将其转化为0 当end/number为负值时,slice会把它与字符 ...
Javascript中的函数
函数的定义
var foo = fucntion(a, b) {}; //函数表达式
function foo(a, b) {}; //函数声明
var foo = new Function(“a”, “b”, “return false”); //不推荐
对于函数声明,可以在声明之前调用该函数;而对于函数表达式,不可以在表达式之前调用该函数。
函数的属性
this: 引用的是函数执行的环境对象,全局作用域中的this引用的是window对象
arguments: 保存函数参数的数组
arguments.callee: 指向该函数的指针
caller: 函数的调用者
length: 函数希望接收到的命名参数的个数
函数的方法
call(obj, arg1, arg2…) //设置函数的运行环境(改变this的值)
apply(obj, [arg1, arg2]) //设置函数的运行环境(改变this的值)
bind(obj) //绑定函数的运行环境
Javascript中的正则表达式
RegExp类型的创建 var expression = /pattern/flags; 或者 var expression = new RegExp(“pattern”, “flags”);
g :全局匹配
i :忽略大小写
m :多行模式
RegExp实例的属性
global: true or false, 表示标志位’g’是否被设置
ignoreCase: true or false
multiline: true or false
lastIndex: 下一次搜索开始的字符位置
source: pattern的字符串表示
RegExp实例的方法
exec(“target_string”)
ret.index: 匹配到的字符串的起始位置
ret.input: “target_string”
ret[0]: 匹配到的字符串
ret[1 - n]: 匹配组1-n匹配到的字符串
test(“target_string”)
true: 匹配到字符串
false: 没有匹配到字符串
exec和tes ...
Javascript中的Date
Date类型的创建
var date = new Date() //获取当前时间
var date = new Date(ms) //根据Unix时间戳来创建Date对象
var date = new Date(Date.parse(“string”)) //string为日期时间组成的字符串,符合要求的字符串格式包括:
“m/d/y”
“January 12, 2004”
“Tue May 25 2004 00:00:00 GMT-0700”
YYYY-MM-DDTHH:mm:ss.sssZ”
var date = new Date(Date.UTC()) // Date.UTC的参数为年、月、日、小时、分钟、秒、毫秒
Date类型的操作 var date = new Date();
Date.now() 或者+new Date()获取当前的时间戳, “+”操作符可获取Date对象的时间戳
date.toDateString(); // “Thu May 17 2018”
date.toTimeString(); // “14 ...
[转]A Complete Guide to Flexbox
BackgroundThe Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A fle ...