JS
toUpperCase()
把一个字符串全部变为大写
toLowerCase()
把一个字符串全部变为小写:
字符串
indexOf
indexOf()
会搜索指定字符串出现的位置:
var s = 'hello, world'; s.indexOf('world'); // 返回7 s.indexOf('World'); // 没有找到指定的子串,返回-1
substring
substring()
返回指定索引区间的子串:
var s = 'hello, world' s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello' s.substring(7); // 从索引7开始到结束,返回'world'
数组
数组原型方法主要有以下这些
join()
:用指定的分隔符将数组每一项拼接为字符串
push()
:向数组的末尾添加新元素
pop()
:删除数组的最后一项
shift()
:删除数组的第一项
unshift()
:向数组首位添加新元素
slice()
:按照条件查找出其中的部分元素
splice()
:对数组进行增删改
fill()
: 方法能使用特定值填充数组中的一个或多个元素
filter()
:“过滤”功能
concat()
:用于连接两个或多个数组
indexOf()
:检测当前值在数组中第一次出现的位置索引
lastIndexOf()
:检测当前值在数组中最后一次出现的位置索引
every()
:判断数组中每一项都是否满足条件
some()
:判断数组中是否存在满足条件的项
includes()
:判断一个数组是否包含一个指定的值
sort()
:对数组的元素进行排序
reverse()
:对数组进行倒序
forEach()
:ES5 及以下循环遍历数组每一项
map()
:ES6 循环遍历数组每一项
copyWithin()
:用于从数组的指定位置拷贝元素到数组的另一个指定位置中
find()
:返回匹配的值
findIndex()
:返回匹配位置的索引
toLocaleString()、toString()
:将数组转换为字符串
flat()、flatMap()
:扁平化数组
entries() 、keys() 、values()
:遍历数组
对象
要判断一个属性是否是xiaoming
自身拥有的,而不是继承得到的,可以用hasOwnProperty()
方法:
var xiaoming = { name: '小明' }; xiaoming.hasOwnProperty('name'); // true xiaoming.hasOwnProperty('toString'); // false
for ... in
for
循环的一个变体是for ... in
循环,它可以把一个对象的所有属性依次循环出来:
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 ] foo(1); // 结果: // a = 1 // b = undefined // Array []
rest参数只能写在最后,前面用...
标识,从运行结果可知,传入的参数先绑定a
、b
,多余的参数以数组形式交给变量rest
,所以,不再需要arguments
我们就获取了全部参数。
如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined
)。
apply
虽然在一个独立的函数调用中,根据是否是strict模式,this
指向undefined
或window
,不过,我们还是可以控制this
的指向的!
要指定函数的this
指向哪个对象,可以用函数本身的apply
方法,它接收两个参数,第一个参数就是需要绑定的this
变量,第二个参数是Array
,表示函数本身的参数。
用apply
修复getAge()
调用:
function getAge() { var y = new Date().getFullYear(); return y - this.birth; } var xiaoming = { name: '小明', birth: 1990, age: getAge }; xiaoming.age(); // 25 getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空
另一个与apply()
类似的方法是call()
,唯一区别是:
-
apply()
把参数打包成Array
再传入; -
call()
把参数按顺序传入。
比如调用Math.max(3, 5, 4)
,分别用apply()
和call()
实现如下:
Math.max.apply(null, [3, 5, 4]); // 5 Math.max.call(null, 3, 5, 4); // 5
对普通函数调用,我们通常把this
绑定为null
。
reduce
再看reduce的用法。Array的reduce()
把一个函数作用在这个Array
的[x1, x2, x3...]
上,这个函数必须接收两个参数,reduce()
把结果继续和序列的下一个元素做累积计算,其效果就是:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
创建一个匿名函数并立刻执行”的语法:
(function (x) { return x * x; })(3); // 9
不要使用
new Number()
、new Boolean()
、new String()
创建包装对象;用
parseInt()
或parseFloat()
来转换任意类型到number
;用
String()
来转换任意类型到string
,或者直接调用某个对象的toString()
方法;通常不必把任意类型转换为
boolean
再判断,因为可以直接写if (myVar) {...}
;
typeof
操作符可以判断出number
、boolean
、string
、function
和undefined
;判断
Array
要使用Array.isArray(arr)
;判断
null
请使用myVar === null
;判断某个全局变量是否存在用
typeof window.myVar === 'undefined'
;函数内部判断某个变量是否存在用
typeof myVar === 'undefined'
。
date
var now = new Date(); now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST) now.getFullYear(); // 2015, 年份 now.getMonth(); // 5, 月份,注意月份范围是0~11,5表示六月 now.getDate(); // 24, 表示24号 now.getDay(); // 3, 表示星期三 now.getHours(); // 19, 24小时制 now.getMinutes(); // 49, 分钟 now.getSeconds(); // 22, 秒 now.getMilliseconds(); // 875, 毫秒数 now.getTime(); // 1435146562875, 以number形式表示的时间戳
面向对象
在编写JavaScript代码时,不要直接用obj.__proto__
去改变一个对象的原型,并且,低版本的IE也无法使用__proto__
。Object.create()
方法可以传入一个原型对象,并创建一个基于该原型的新对象,但是新对象什么属性都没有,因此,我们可以编写一个函数来创建xiaoming
:
// 原型对象: var Student = { name: 'Robot', height: 1.2, run: function () { console.log(this.name + ' is running...'); } }; function createStudent(name) { // 基于Student原型创建一个新对象: var s = Object.create(Student); // 初始化新对象: s.name = name; return s; } var xiaoming = createStudent('小明'); xiaoming.run(); // 小明 is running... xiaoming.__proto__ === Student; // true
JavaScript的原型继承实现方式就是:
-
定义新的构造函数,并在内部用
call()
调用希望“继承”的构造函数,并绑定this
; -
借助中间函数
F
实现原型链继承,最好通过封装的inherits
函数完成; -
继续在新的构造函数的原型上定义新方法。
浏览器对象
window
window
对象不但充当全局作用域,而且表示浏览器窗口。
window
对象有innerWidth
和innerHeight
属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。
对应的,还有一个outerWidth
和outerHeight
属性,可以获取浏览器窗口的整个宽高。
navigator
navigator
对象表示浏览器的信息,最常用的属性包括:
-
navigator.appName:浏览器名称;
-
navigator.appVersion:浏览器版本;
-
navigator.language:浏览器设置的语言;
-
navigator.platform:操作系统类型;
-
navigator.userAgent:浏览器设定的
User-Agent
字符串。
screen
screen
对象表示屏幕的信息,常用的属性有:
-
screen.width:屏幕宽度,以像素为单位;
-
screen.height:屏幕高度,以像素为单位;
-
screen.colorDepth:返回颜色位数,如8、16、24
location
location
对象表示当前页面的URL信息。例如,一个完整的URL:
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href
获取。要获得URL各个部分的值,可以这么写:
location.protocol; // 'http' location.host; // 'www.example.com' location.port; // '8080' location.pathname; // '/path/index.html' location.search; // '?a=1&b=2' location.hash; // 'TOP'
要加载一个新页面,可以调用location.assign()
。如果要重新加载当前页面,调用location.reload()
方法非常方便。
document
document
对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document
对象就是整个DOM树的根节点。
document
的title
属性是从HTML文档中的<title>xxx</title>
读取的,但是可以动态改变:
document.cookie
读取到当前页面的Cookie:
dom
appendChild
,把一个子节点添加到父节点的最后一个子节点。例如
insertBefore(newElement, referenceElement)
;,子节点会插入到
referenceElement`之前。
要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild
把自己删掉: