1 概念类
基本数据类型:Number String Null Boolean Undefind Symbol
复杂数据类型:Object
OBject Array Boolean Number Srting Function Date RegExp Error
在构造函数中使用 ===> 构造函数本身
作为对象属性时使用 ===> 调用属性的对象
作为普通函数时使用 ===> window
call,apply,bind ===> 执行的第一个参数
同步会阻塞代码,异步不会 alert是同步 setTimeout是异步
原型: js中的对象分为两种,普通对象Object和函数对象Function
prototype就是函数对象的原型
原型对象的值实际上就是在函数创建的时候,创建了一个它的实例对象
并赋值给它的prototype
原型链:原型组成的链。对象的_proto_属性指向它的原型,它的原型
也是一个对象,也有_proto_属性,原型的_proto_又指向原型的原型,
就这样可以一直通过__proto__向上找,这就是原型链,尽头是Object
的原型。
闭包是能够读取到其他函数内部变量的函数,也可以理解成定义在一个函数内部的函数
跨域是什么:实际上就是一个网站不能执行其他网站上的网址,是由浏览器同源策略造成的,是浏览器对js施加的安全限制
所谓同源,实际上是指域名,协议,端口都相同
也就是说当,域名或者协议,或者端口不同的时候,就是跨域
2 常用
parseInt(),parseFloat(),Number() //强制
==,!! //隐式
e.preventDefault() //默认
e.stopPropagation() //冒泡
== 会自动转换类型 === 不会
null是表示一个空的对象,转为数值为0,undefind表示一个空的原始值,转为数值为NAN
undefind指本该有一个值,但却并有定义,null表示没有对象,不应该有值
创建一个xhr对象 var xhr = new XmlHttpRequest()
判断就绪状态为4时执行代码
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log(responseText);
}
}
创建请求 xhr.open('get','url',true)
发送请求 xhr.send(null)
- cookie localStorage sessionStorage
// 与服务器的交互
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
// 存储大小限制也不同,
cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
// 数据有效期不同,
sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;
localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
// 作用域不同
sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
localStorage 在所有同源窗口中都是共享的;
cookie也是在所有同源窗口中都是共享的。
//最简单去重 (用indexof查询)
function (array){
var temp = [];
for(var i=0;i<array.length;i++){
if(temp.indexOf(array[i]) == -1){
temp.push(array[i]);
}
}
return temp;
}
//原数组操作 (splice方法)
funttion (arr){
let length = arr.length;
for(var i = 0;i<length;i++){
for(var j=i+1;j<length;j++){
if(arr[i] === arr[j]){
arr.splice(j,1);
length -- ;
j --;
}
}
}
}
// 对象属性
function (arr){
let obj = {}, res = []
for(let i = 0;i < arr.length;i++){
if(!obj[arr[i]]){
obj[arr[i]] = 1;
res.push(arr[i]);
}
}
}
// es6 Set方法
let arr = [1,1,2,3]
let resultArr = [...new Set(arr)]
function(str){
var obj = {};
var maxn = -1;
var letter;
for(var i = 0; i < str.length; i++) {
if(obj[s[i]]) {
obj[s[i]]++;
} else {
obj[s[i]] = 1;
}
if(obj[s[i]] > maxn) {
maxn = obj[s[i]];
letter = s[i];
}
}
console.log(letter:maxn)
}
- ul中含有多个li元素,点击li分别弹出对应的序号
// html
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
//js
let lis = document.getElementsByTagName('li')
//dom污染
for(var i = 0, length = lis.length; i < length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
alert(this.index);
};
// 闭包
for (var i=0;i<aLi.length;i++){
(function(i){
lis[i].onclick = function(){
alert(i);
};
})(i);
}
// split
parseQueryString(url) {
var result = [];
var query = url.split("?")[1];
var queryArr = query.split("&");
queryArr.forEach(function(item){
var obj = {};
var value = item.split("=")[1];
var key = item.split("=")[0];
obj[key] = value;
result.push(obj);
});
return result
}
//正则
var reg = /[^&=?]+=[^&]*/g;
var res = url.match(reg);
// 获取具体的值
var getParamValue = function(url,key){
var regex = new RegExp(key+"=([^&]*)","i");
return url.match(regex)[1];
}
<script>
(function () {
document.addEventListener('DOMContentLoaded', function () {
var html = document.documentElement;
var windowWidth = html.clientWidth;
if(windowWidth > 640) windowWidth = 640;
if(windowWidth < 320) windowWidth = 320;
html.style.fontSize = windowWidth / 7.5 + 'px';
}, false);
})();
</script>
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
-webkit-font-smoothing: antialiased;
网友评论