js的数组不支持字符串索引，对象不支持数字key,为了解决这些问题，引入了Map和Set
类型
Map
有点类似于php的数组
var m = new Map([‘a’=>1,’b’=>2,’c’=>3,4=>4]);
m.get(‘a’)
var m = new Map();
m.set('a',1);
m.set(4,4);
m.set('t',function(){return 'test';})
m.has('a');
m.get('a');
m.delete('a');
Set
一组不重复数据的集合
var s = new Set();
var s = new Set([1,2,3]);
var s = new Set([1,2,3,3,"3"]); //1,2,3,"3"
s.add(4);
s.delete(4);
浏览器
浏览器对象
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 屏幕高度
location
location对象表示当前页面的url信息
如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.reload 重载页面
location.assign 加载新页面
location.assign('/discuss');
document
document对象表示当前页面，由于html在浏览器中以dom形式表示树形结构，document对象就是整个dom树的根节点
document的title属性是从html文档中的<title>读取的，但是可以动态改变
document.getElementById() 按id获取一个dom节点
document.getElementByTagName() 按tag获取一组dom节点
document.cookie 当前页面cookie信息
history
不建议使用了
操作DOM
获取DOM节点
方法一
#获取一个DOM节点
document.getElementById();
#获取指定tag名的一组DOM节点
document.getElementByTagName();
#获取指定class名的一组DOM节点
document.getElementByClassName();
var test = document.getElementById('test');
var trs = document.getElementById('test-table').getElementsByTagName('tr');
方法二(感觉更好一点)
querySelector()
queryselectorAll()
var q1 = document.querySelector('#q1');
var ps = q1.querySelectorAll('div.highlighted > p');
更新DOM
#修改节点的内容
innerHTML 包含html
textContent 不包含html
innerText 不包含html且不返回隐藏元素的内容
#修改节点的css
style 对应DOM节点的所有css
var p = document.getElementByID();
p.innerHTML = '<span>red</span>';
p.innerText = '<script>alert("hi")</script>'
p.textContent = '';
p.style.color = '#cccccc';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
插入DOM
appendChild
insertBefore
#插入节点A至节点B最后
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);
#创建节点A并插入至节点B最后
var list = document.getElementById('list');
var haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
#将节点A插入到节点B指定位置
var list = document.getElementById('list');
var ref = document.getElementById('python');
var haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell,ref); //将haskell插入至ref之前
删除DOM
获取节点及父节点，调用removeChild删除节点
var self = document.getElementById('to-be-removed');
var parent = self.parentElement;
var removed = parent.removeChild(self);
操作表单
表单值
text/password/hidden/select值是value
radio/checkbox值是true/false
var input = document.getElmentById('email');
input.value
提交表单
<form id = "myform" onsubmit="return checkform();">
<input type="text" name="username" id="username" />
<input type="password" name="passwrod" id="password" />
<button value="submit" >submit</button>
</form>
var checkform = function(){
debugger;
var username = getElementById('username');
var password = getElementById('password');
if(!/^[a-zA-Z0-9]{3,10}$.test(username.value)){
alert('用户名必须3-10位数字字母组成');
return false;
}
return true;
}
操作文件
跨域
flash
同源域名下搭建代理服务器
jsonp
CORS
promise
promise将执行代码和处理结果的代码分离开来
调用resolve表示成功，触发then函数中接收的函数
调用reject表示失败，触发catch函数中欧接收的函数
then和catch返回promise对象，所以可以级联操作
规定了异步操作结果处理的执行顺序
promise.then 调用
promise.catch 调用promise的rejected句柄病返回这个promise对象
promise.all(iterable) iterable参数里所有的promise对象都成功才会触发成功，一旦有一个iterable里面的promise对象失败则立即触发失败
promise.rare(iterable) iterable参数里任意一个子promise被成功或失败后，立即调用promise的成功返回值或失败系那个IQ那个作为参数调用父promise绑定的相应句柄，病返回该promise对象
promise有以下状态
pending 初始状态，既不是fulfilled也不是rejected
fulfilled 成功的操作
rejected 失败的操作
pending状态的promise既可以转化为fulfilled状态又可以转换为rejected状态。当状态发生转换时，promise.then/reject所绑定的方法就会被调用。(当绑定方法时，如果promise对象已经处于fulfilled或rejected状态，那么相应的方法将被立刻调用，所以在异步操作的完成情况和它的绑定方法之间不存在竞争关系)
promise.prototype.then和promise.prototype.catch方法返回promise对象，所以可以被链式调用
<html>
<!--参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise-->
<!--参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then-->
<head>
</head>
<body>
<button id="btn">click me</button>
<log id="log"></log>
</body>
<script>
var count = 0;
var createP = function(text){
var e = document.createElement('p');
e.innerHTML = text;
return e;
}
var testPromise = function(){
count = ++count;
log.appendChild(createP(count+'）开始(同步代码)<br />'));
var p1 = new Promise(function(resolve,reject){
log.appendChild(createP(count+"）开始异步代码<br />"));
setTimeout(function(){
if(count<4){
resolve(count);
}else{
reject(count);
}
},2000);
});
p1.then(function(val){
log.appendChild(createP(val+"）完成~结束异步代码<br />"));
return val+1;
}).then(function(val){ //以新的resolve的形式执行，接收上一个promise在resolve时返回的结果(val+1) 只有在上一个then接收的函数执行成功的情况下才会执行这个then接收的参数
log.appendChild(createP(val+"）完成~结束异步代码<br />"));
}).catch(function(val){
log.appendChild(createP(val+"）发生错误！结束异步代码<br />"))
});
log.appendChild(createP(count+"）建立了promise(同步结束)<br />"))
}
var btn = document.getElementById('btn');
var log = document.getElementById('log');
btn.addEventListener("click",testPromise);
</script>
</html>
/* 1.1
var promise = new Promise(function(resolve,reject){
var random = Math.random()*10;
if(random>5){
resolve(random);
}else{
reject(random);
}
});
promise.then(function(msg){
document.write(msg);
},function(msg){
document.write(msg);
});
*/
/* 1.2
window.onload = function(){
function doSomething(){
return new Promise(function(resolve,reject){
setTimeout(function(){
var random = Math.random()*10;
resolve(random);
},1000);
});
}
doSomething().then(function(msg){
document.write(msg);
},function(msg){s
document.write(msg);
});
*/
/*
let promise = new Promise((resolve,reject)=>{
console.log('Promise.');
resolve();
});
promise.then(()=>{
console.log('Resolved');
});
console.log('Hi!');
结果:
Hi!
Resolved
分析
then指定的回调函数将在当前脚本所有同步任务执行完成后才会执行，所以"Resolve"最后输出
then/catch调用函数这一过程是异步的，会等到同步过程执行完再执行
*/
/*
var p1 = new Promise(function (resolve, reject) {
console.log("p1");
// setTimeout(() => reject(new Error('fail')), 3000)
setTimeout(function(){
resolve("p1");
},1000);
})
var p2 = new Promise(function (resolve, reject) {
console.log("p2");
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => {
console.log("success");
console.log(result)
})
.catch(error => {
console.log("error");
console.log(error)
})
*/
var p = new Promise(function(resolve,reject){
reject(new Error('pebkac'));
});
p.then(
function(str){
alert('I am saved!');
},
function(error){
console.error('出错了', error);
alert('Bad computer!');
}
).then(
undefined,
function(error){ }
).then(function(str){
alert('I am saved!');
});
underscore
Collections
map/mapObject/filter
every/some
max/min
groupBy
shuffle/sample
Array
first/last
flatten
zip/unzip
var names = [‘a’,’b’,’c’];
var scores = [1,2,3];
_.zip(names,scores); //[[‘a’,1],[‘b’,2],[‘c’,3]]
var nameAndScores = [['a',1],['b',2],['c',3]];
_.unzip(nameAndScores); //[['a','c','c'],[1,2,3]]
object
var names = ['a','b','c'];
var scores = [1,2,3];
_.object(names,scores); //{a:1,b:2,c:3}
range
_.range(5); //[0,1,2,3,4] 从0开始小于5
_.range(1,5) //[1,2,3,4] 从1开始小于4
_.range(1,10,3) //[1,4,7] 从1开始步长为3小于10
Functions
坑
1.js中数组有序，对象无序
在控制台中
|
|