NaN
Infinity
==
===
null
undefined
new Array(1, 2, 3);
变量 英文 数字 $ _
i = 10; // i现在是全局变量
s.length
字符串是不可变的
toUpperCase
toLowerCase
indexOf
substring
arr.length;
arr.indexOf(30); // 元素30没有找到,返回-1
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
var aCopy = arr.slice();
aCopy === arr; // false
arr.push('A', 'B');
arr.pop();
arr.unshift('A', 'B');
arr.shift();
arr.sort();
arr.reverse();
arr.splice(2, 3, 'Google', 'Facebook');
var added = arr.concat([1, 2, 3]);
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
delete xiaoming.age; // 删除age属性
'name' in xiaoming; // true
'toString' in xiaoming; // true 继承的
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
for (var key in o)
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
var m = new Map();
m.set('Adam', 67);
m.has('Adam'); // true
m.delete('Adam');
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
s.delete(3);
s; // Set {1, 2}
Array、Map和Set都属于iterable类型
for (var x of m)
a.forEach(function (element, index, array) {
s.forEach(function (element, sameElement, set){
m.forEach(function (value, key, map) {
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
arguments关键字
function foo(a, b, ...rest)//没有是空数组
foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用
function foo() {
for (var i=0; i<100; i++) {//局部作用域(函数内部)
//
}
i += 100; // 仍然可以引用变量i
}
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {//块级作用域的变量
sum += i;
}
i += 1; // SyntaxError
}
const PI = 3.14;//常量
PI = 3; // 某些浏览器不报错,但是无效果!
PI; // 3.14
var fn = xiaoming.age;
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined
//在函数内部定义的函数,this又指向undefined了
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var that = this; // 在方法内部一开始就捕获this
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - that.birth; // 用that而不是this
}
return getAgeFromBirth();
}
};
xiaoming.age(); // 25
//apply 指定函数的this指向哪个对象
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()把参数打包成Array再传入;
//call()把参数按顺序传入。
Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5
//高阶函数
function add(x, y, f) {
return f(x) + f(y);
}
//map
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
//reduce
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
var r = arr.filter(function (x) {
var r = arr.filter(function (element, index, self) {
arr.sort(function (x, y) {//直接对Array进行修改
//闭包
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false 调用了f()才执行
//创建一个匿名函数并立刻执行的语法
(function (x) {
return x * x;
})(3); // 9
箭头函数
用call()或者apply()调用箭头函数时,
无法对this进行绑定,即传入的第一个参数被忽略
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
generator 可以返回多次的函数
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 1;
while (n < max) {
yield a;
t = a + b;
a = b;
b = t;
n ++;
}
return a;
}
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: true}
f.next().value
for (var x of fib(5)) {
console.log(x); // 依次输出0, 1, 1, 2, 3
}
typeof
typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'
包装类
var n = new Number(123);
var b = new Boolean(true);
var s = new String('str');
typeof new Number(123); // 'object'
new Number(123) === 123; // false
函数
var n = Number('123'); // 123,相当于parseInt()或parseFloat()
typeof n; // 'number'
var b = Boolean('true'); // true
typeof b; // 'boolean'
var b2 = Boolean('false'); // true!
//'false'字符串转换结果为true!因为它是非空字符串!
var b3 = Boolean(''); // false
var s = String(123.45); // '123.45'
typeof s; // 'string'
Array.isArray(arr);
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形式表示的时间戳
var d = new Date( );
d.toLocaleString(); // '2015/6/24 下午7:49:22',本地时间(北京时区+8:00),显示的字符串与操作系统设定的格式有关
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT',UTC时间,与本地时间相差8小时
\d 匹配一个数字
\w 匹配一个字母或数字
'00\d'可以匹配'007',但无法匹配'00A';
'\d\d\d'可以匹配'010';
'\w\w'可以匹配'js';
. 可以匹配任意字符
'js.'可以匹配'jsp'、'jss'、'js!'等等
* 任意个字符(包括0个)
+ 表示至少一个字符
? 表示0个或1个字符
{n} 表示n个字符
{n,m}表示n-m个字符
\s 匹配一个空格(也包括Tab等空白符)
\s+表示至少有一个空格,例如匹配' ','\t\t'等;
A|B 匹配A或B
(J|j)ava(S|s)cript
^ 表示行的开头
^\d 表示必须以数字开头。
$ 表示行的结束
\d$ 表示必须以数字结束。
var re = /^\d{3}\-\d{3,8}$/;
re.test('010-12345'); // true
'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']
var re = /^(\d{3})-(\d{3,8})$/;
re.exec('010-12345'); // ['010-12345', '010', '12345']
var s = 'JavaScript, VBScript, JScript and ECMAScript';
var re=/[a-zA-Z]+Script/g;
// 使用全局匹配:
re.exec(s); // ['JavaScript']
re.lastIndex; // 10
re.exec(s); // ['VBScript']
re.lastIndex; // 20
JSON.stringify(xiaoming);
JSON.stringify(xiaoming, null, ' ');//缩进输出
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
function convert(key, value) {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
}
JSON.stringify(xiaoming, convert, ' ');
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('{"name":"小明","age":14}', function (key, value) {
// 把number * 2:
if (key === 'name') {
return value + '同学';
}
return value;
}); // Object {name: '小明同学', age: 14}
xiaoming.__proto__ = Student;
var s = Object.create(Student);
function Student(name) {
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!
function Student(props) {
this.name = props.name || '匿名'; // 默认值为'匿名'
this.grade = props.grade || 1; // 默认值为1
}
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
};
function createStudent(props) {
return new Student(props || {})
}
var xiaoming = createStudent({
name: '小明'
});
xiaoming.grade; // 1
function inherits(Child, Parent) {
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
function Student(props) {
this.name = props.name || 'Unnamed';
}
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
}
function PrimaryStudent(props) {
Student.call(this, props);
this.grade = props.grade || 1;
}
// 实现原型继承链:
inherits(PrimaryStudent, Student);
// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
};
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello, ' + this.name + '!');
}
}
class PrimaryStudent extends Student {
constructor(name, grade) {
super(name); // 记得用super调用父类的构造方法!
this.grade = grade;
}
myGrade() {
alert('I am at grade ' + this.grade);
}
}
window.innerWidth
window.innerHeight
navigator.appName 浏览器名称;
navigator.appVersion
navigator.language
navigator.platform
navigator.userAgent
screen.width 屏幕宽度,以像素为单位;
screen.height 屏幕高度,以像素为单位;
screen.colorDepth 返回颜色位数,如8、16、24
location.href;//http://www.example.com:8080/path/index.html?a=1&b=2#TOP
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.title
getElementById
getElementsByTagName
document.cookie; // 'v=123; remember=true; prefer=zh'
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点:
var first = test.firstElementChild;
var last = test.lastElementChild;
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码,无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>
innerText不返回隐藏元素的文本,而textContent返回所有文本
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
var
js = document.getElementById('js'),
list = document.getElementById('list');
list.appendChild(js);
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
list.insertBefore(haskell, ref);
// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
<form id="login-form" method="post" onsubmit="return checkForm()">
没有name属性的<input>的数据不会被提交
<input type="file" id="test-image-file" name="test">
fileInput.addEventListener('change', function () {
var file = fileInput.files[0];
file.name
file.size
file.lastModifiedDate
file.type !== 'image/png'
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
'use strict';
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', 'https://myrailsshop.herokuapp.com/products.json');
request.send();
alert('请求已发送,请等待响应...');
new Promise(function (resolve, reject) {
log('start new Promise...');
var timeOut = Math.random() * 2;
log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function () {
if (timeOut < 1) {
log('call resolve()...');
resolve('200 OK');
}
else {
log('call reject()...');
reject('timeout in ' + timeOut + ' seconds.');
}
}, timeOut * 1000);
}).then(function (r) {
log('Done: ' + r);
}).catch(function (reason) {
log('Failed: ' + reason);
});
var ctx = canvas.getContext('2d');
<canvas id="test-shape-canvas"...
canvas = document.getElementById('test-shape-canvas'),
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 200);
ctx.fillStyle = '#dddddd';
ctx.fillRect(10, 10, 130, 130)
var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
path.moveTo(110, 75);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);
$('#abc')
$('p')
$('.red')
$('.red.green')
$('[name=email]')
$('[type=password]')
$('[items="A B"]')
$('[name^=icon]')
$('[name$=with]');
$('[class^="icon-"]')
$('input[name=email]')
$('tr.red')
$('p,div')
$('p.red,p.green');
$('ul.lang li.lang-javascript');
$('form[name=upload] input');
$('ul.lang>li.lang-javascript');
$('ul.lang li:first-child');
$('ul.lang li:last-child');
$('ul.lang li:nth-child(2)');
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
$('input:focus')
$('input[type=radio]:checked');
input
file
checkbox
radio
enabled
disabled
$('div:visible');
$('div:hidden');
ul.find('.dy')
ul.find('#swift')
ul.find('[name=haskell]')
swf.parent()
swf.parent('div.red')
swift.next();
wift.next('[name=haskell]')
swift.prev();
swift.prev('.js');
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'
j1.html('<span style="color: red">JavaScript</span>');
j2.text('JavaScript & ECMAScript');
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性
div.hasClass('highlight'); // false, class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class
a.hide(); // 隐藏
a.show(); // 显示
// 浏览器可视窗口大小:
$(window).width(); // 800
// HTML文档大小:
$(document).height(); // 3500
// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.width(400); // 设置CSS属性 width: 400px,是否生效要看CSS是否有效
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
radio.is(':checked'); // true
ul.append('<li><span>Haskell</span></li>');
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps)
js.after('<li><span>Lua</span></li>');
li.remove();
ul.find(' li:first-child').after(lu);
ul.find(' li:nth-child(2)').after(pa);
ul.find(' li:last-child').before(ru);
a.on('click', function () {
alert('Hello!');
});
鼠标事件
click: 鼠标单击时触发;
dblclick:鼠标双击时触发;
mouseenter:鼠标进入时触发;
mouseleave:鼠标移出时触发;
mousemove:鼠标在DOM内部移动时触发;
hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上,通常是<input>和<textarea>。
keydown:键盘按下时触发;
keyup:键盘松开时触发;
keypress:按一次键后触发。
其他事件
focus:当DOM获得焦点时触发;
blur:当DOM失去焦点时触发;
change:当<input>、<select>或<textarea>的内容改变时触发;
submit:当<form>提交时触发;
ready:当页面被载入并且DOM树完成初始化后触发
$(document).ready(function () {
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
a.click(hello); // 绑定事件
a.off('click', hello);
input.change(function () {
div.hide(3000);
show
slideUp / slideDown
fadeIn / fadeOut
div.animate({
opacity: 0.25,
width: '256px',
height: '256px'
}, 3000, function () {
console.log('动画已结束');
// 恢复至初始状态:
$(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});
div..hide().
slideDown(2000)
.delay(1000)
.animate({
width: '256px',
height: '256px'
}, 2000)
.delay(1000)
.animate({
width: '128px',
height: '128px'
}, 2000);
}
var jqxhr = $.get('/path/to/resource', {
name: 'Bob Lee',
check: 1
});
var jqxhr = $.post('/path/to/resource', {
name: 'Bob Lee',
check: 1
});
var jqxhr = $.getJSON('/path/to/resource', {
name: 'Bob Lee',
check: 1
}).done(function (data) {
// data已经被解析为JSON对象了
});
$.fn.highlight = function(options) {
var opts = $.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
}
$.fn.highlight.defaults = {
color: '#d85030',
backgroundColor: '#fff8de'
}
$('test-highlight p:first-child span').height();
$('#test-highlight p:last-child span').highlight({
color: '#dd1144'
});
'use strict';
var obj = {
name: 'bob',
school: 'No.1 middle school',
address: 'xueyua road'
};
function isLowerCase(str) {
return str === str.toLowerCase();
}
var r1 = _.every(obj, function(value, key) {
return isLowerCase(value) && isLowerCase(key);
});
var r2 = _.some(obj, function(value, key) {
return isLowerCase(value) && isLowerCase(key);
});
var r3 = _.map(obj, function(value, key) {
return isLowerCase(value) && isLowerCase(key);
});
alert('every key-value are lowercase: '+r1//false
+'\nsome key-value are lowercase: '+r2//true
+'\nmap key-value are lowercase: '+r3);//true,false,true
var arr = [3, 5, 7, 9];
_.max(arr); // 9
_.min(arr); // 3
_.max({ a: 1, b: 2, c: 3 }); // 3 只作用于value
ar groups = _.groupBy(scores, function (x) {
if (x < 60) {
return 'C';
} else if (x < 80) {
return 'B';
} else {
return 'A';
}
});
alert(JSON.stringify(groups));//// 结果:
// {
// A: [81, 91, 88, 99],
// B: [75, 77, 66, 72],
// C: [20, 40, 59]
// }
_.shuffle([1, 2, 3, 4, 5, 6]); // [3, 5, 4, 6, 2, 1]
_.sample([1, 2, 3, 4, 5, 6]); // 2
_.sample([1, 2, 3, 4, 5, 6], 3); // [6, 1, 4]
var arr = [2, 4, 6, 8];
_.first(arr); // 2
_.last(arr); // 8
alert(JSON.stringify(_.flatten([1,[2],[3,[[4],[5]]]])));
// [1, 2, 3, 4, 5]
var names = ['Adam', 'Lisa', 'Bart'];
var scores = [85, 92, 59];
_.zip(names, scores);
// [['Adam', 85], ['Lisa', 92], ['Bart', 59]]
var namesAndScores = [['Adam', 85], ['Lisa', 92], ['Bart', 59]];
_.unzip(namesAndScores);
// [['Adam', 'Lisa', 'Bart'], [85, 92, 59]]
var names = ['Adam', 'Lisa', 'Bart'];
var scores = [85, 92, 59];
alert(JSON.stringify(_.object(names, scores)));
// {Adam: 85, Lisa: 92, Bart: 59}
// 从0开始小于30,步长5:
_.range(0, 30, 5); // [0, 5, 10, 15, 20, 25]
var log = _.bind(console.log, console);
log('Hello, world!');
// 输出Hello, world!
var pow2N = _.partial(Math.pow, 2);
pow2N(3); // 8
pow2N(5); // 32
var cube = _.partial(Math.pow, _, 3);
cube(3); // 27
cube(5); // 125
var factorial = _.memoize(function(n) {
function Student(name, age) {
this.name = name;
this.age = age;
}
Student.prototype.school = 'No.1 middle school';
var xiaoming = new Student('小明', 20);
alert(_.keys(xiaoming));// ['name', 'age']
alert(_.allKeys(xiaoming));// ['name', 'age', 'school']
var obj = {
name: '小明',
age: 20
};
_.values(obj); // ['小明', 20]
var a = {name: 'Bob', age: 20};
_.extend(a, {age: 15}, {age: 88, city: 'Beijing'}); // {name: 'Bob', age: 88, city: 'Beijing'}
// 变量a的内容也改变了:
a; // {name: 'Bob', age: 88, city: 'Beijing'}
var source = {
name: '小明',
age: 20,
skills: ['JavaScript', 'CSS', 'HTML']
};
var copied = _.clone(source);
alert(JSON.stringify(copied, null, ' '));//修改source.skills会影响copied.skills。
o1 === o2; // false
_.isEqual(o1, o2); // true
_.chain([1, 4, 9, 16, 25])
.map(Math.sqrt)
.filter(x => x % 2 === 1)
.value();
// [1, 3, 5]