前端笔记:JavaScript

Array对象

Array即我们所说的数组,js中的数组对象不像java中那么严谨,Array是长度自动变化的数组。我们可以这样创建一个数组:

var arr = [1,2,3];//直接创建
//使用构造器创建
var arr1 = new arr();
var arr2 = new arr(4);//只写一个数字则表示初始化数组长度
var arr3 = new arr(1,2,3);

Array的三个属性:constructor、property、length。
Array常用的方法:

  • pop():删除数组的末尾元素,返回删除元素。
  • push():向数组末尾添加元素,返回数组length。
  • unshift():删除数组的头部元素,返回删除元素。
  • shift():向数组头部添加元素,返回数组length。
  • slice():slice是片的意思,所以slice方法是截取数组的一部分并返回。比如arr.slice(1,3)就是截取arr数组的角标为1~2的元素,不包含3。无参数默认为(0,length)。
  • join(str):将数组转换为字符串,并以str为分隔符将数组每个元素分开,返回该字符串,不会改变原数组。
  • reverse():翻转数组。
  • toString() || toLocalString():转为字符串。
  • sort():数组排序,默认使用Ascall码排序,也可以使用自定义函数进行排序,如从小到大排序:
function sortby(a,b){
    return a-b;
}
var arr = new arr(3,2,7);
arr.sort(sortby);
Boolean对象

Boolean值只要ture或false。

var b1 = new Boolean(value);//返回具有value的Boolean值的对象
var b2 = Boolean(value);//返回value的Boolean值
Date对象

Date对象是用来处理日期和时间的对象,初始化时会将当前时间作为初始化值。
常用方法如下:

  • Date():返回当前日期时间,如Sat Sep 29 2018 16:22:30 GMT+0800
    然后就是获取和设置年月日分秒等的方法:
var date = new Date();//自动将当前时间作为初始化值
var year = date.getFullYear();//年份
var month = date.getMonth()+1;//月份(0~11),所以真实月份+1
var day = date.getDate();//月的天数(1~31)
var week = date.getDay();//周的天数(0~6),0是周天
var hour = date.getHours();//时
var minutes = date.getMinutes();//分
var seconds = date.getSeconds();//秒
var milliseconds = date.getMilliseconds();//毫秒
var time = date.getTime();//返回 1970 年 1 月 1 日至今的毫秒数。
var s1 = date.toString();//返回日期字符串
var s2 = date.toTimeString();//返回时间部分字符串
var s3 = date.toDateString();//返回日期部分字符串
//字符串本地化
var s4 = date.toLocaleString();
var s5 = date.toLocaleTimeString();
var s6 = date.toLocaleDateString();
Math对象

Math对象不像Array和Date一样的类,没有构造函数,所以不用创建直接调用其方法即可。
常用属性:Math.PI、Math.E。
常用方法:

  • abs(x):绝对值
  • sin(x)、cos(x)、tan(x)
  • asin(x)、acons(x)、atan(x)
  • atan2(y,x):返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
  • ceil(x):上舍入。(不是四舍五入,只要小数位不是0就上1)
  • floor(x):下舍入。(直接去掉小数位取整)
  • round(x):四舍五入
  • exp(x):返回e的指数
  • log(x):返回自然对数(e为底)
  • max(x,y)、min(x,y)
  • random():返回0~1随机数
  • sqrt(x):返回数的平方根
  • pow(x,y):返回x的y次方
Mumber对象

Number()和new 一起使用时,作为构造函数调用,返回Number对象,不和new使用时当做Number方法调用,并将参数转化为数字并返回,如果无法转化为数字,则返回NaN。
方法:

  • toString() || toLocaleString()
  • toFixed(index):将数字转为为指定位数的字符串(四舍五入)
  • toPrecision(index):将数字精确到指定位数(整数+小数)。如果无参数执行toString()方法。
  • toExponential():将数字转化为指数计数法。
String对象

当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。
String.length可返回字符串长度。
常用方法:

  • anchor(str):返回锚点为str,内容为字符串的a标签字符串。比如:var txt = "你好";
    var a = txt.anchor("hello");那么a就是<a name="hello">你好</a>。的字符串。
  • 有很多样式类的方法,比如big()、small(),其实就是用返回对应标签包裹的字符串,这里不再赘述。
  • charAt(index):返回指定位置的字符。
  • concat():同Array对象的concat一样,起到合并作用。
  • String.fromCharCode(code1,code2...):将传入的Unicode值转换为字节,最后拼成字符串。
  • indexOf(searchStr,fromIndex):搜索字符串中是否包含字符串searchStr,找到返回第一次匹配的角标,否则返回-1。
  • lastIndexOf(searchValue,fromIndex):从后往前匹配。
  • match(str || RegExp):该方法也是匹配字符串,如果匹配到返回str自身,否则返回null。另外,该方法还支持匹配正则表达式。
  • replace(str/RegExp,newstr):替换字符串。
  • slice(start,end):如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度。如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start 之前,不复制任何元素到新数组中。
  • substr(start,length):也是获取区域字符串,但第二个参数是获取字符串的长度不是角标。
  • substring(start,stop):和slice超级像,但start和stop为负或NaN时直接换为0处理。
  • split(str):与Array的join(str)方法对应。
  • toLowerCase()||toLocaleLowerCase()、toUpperCase()||toLocaleUpperCase()。
RegExp对象

js中的正则表达式对象,是处理字符串模式匹配的强大工具。
我们有两种方法来使用:

 var patt  = new RegExp(pattern,attributes);//方式一:使用构造函数,其中pattern是字符串或是正则表达式;attributes是修饰符,如果使用了正则表达式就可以不用attributes参数,因为正则表达式可以携带修饰符。
 var patt1 = /pattern/attributes//方式二:直接写法,这个patt1就是正则表达式。

修饰符
g:全局匹配(默认是匹配到字符串就停止,而全局匹配是直到所有元素都匹配完)
i:不区分大小写
m:支持多行匹配

var str = "hello JAVAscript javascriPT";
var patt1 = /JaVascript/i;//这样匹配到的是不区分大小写,返回数组,但只包含第一次匹配到的字符串:[JAVAscript ]
var patt2 = /JAVAscript/ig;//多了g修饰符,所以结果是[JAVAscript ,javascriPT]

方括号
匹配某个集合内的字符:


元字符
包含特殊含义的字符:

我们记住常用的几个就好了:
.:注意,没有反斜杠。
\w:word的意思,匹配单词字符。注意,和.的区别在于汉字、标点符号等都不是单词字符,但是是字符。单词字符等同于:[a-zA-Z_0-9]。数字+字母+_
\d:digital的缩写,匹配数字字符。
\s:space的缩写,匹配空白字符。
\b:boundary的缩写,匹配单词边界。比如:

var str = "boundary";
var patt1 = /\bbou/;//匹配单词中以bou开头的字符,有则返回bou
var patt2 = /ry\b/;//匹配以ry结尾的单词的字符,有则返回ry

\B:匹配单词的非边界字符。(不是很好理解)

var str="Visit W3School "; 
var patt1=/.\B/ig;//V,i,s,i,W,3,S,c,h,o,o, 
var patt2=/\B./ig;//i,s,i,t,3,S,c,h,o,o,l 

虽然不好理解,但我们可以找到一些规律(其实就是和\b反过来),比如patt1是排除以.结尾的字符,等同于匹配除了单词结尾的字符以外的其他字符。这里面比较难的点在于空格,单独或连续的空格都算作一个单词,连续的很好判断开头和结尾,但是单个空格有所区别,主要有两点:空格在字符串中间,即空格前后还有内容,那么这个空格既是单词开头也是单词结尾,也就是说中间出现单空格那么这个空格永远算作边界字符;另一个点在于单空格在字符串的两端(" hello"或"hello ")这种情况,那么在字符串前端的空格只作为边界头,在字符串后端的只作为边界尾。可以自行实验一下。
\n:换行符。
其他的一些注意大小写的区别即可。
量词
关于字符串数量匹配的一些用法。


这些规则中注意(str1|str2|str3)的特别之处。
属性

适配方法
注意search()方法,返回值是匹配到的下标,且不支持全局匹配。

Function全局函数

常用方法:


注意parseFloat()和parseInt()方法是强制转换,所以类似”34sasdas“的这种字符串也可以转化为34。


Event对象

下面是Browser相关对象

Window对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
常用属性:
closed:窗口是否关闭。
defaultStatus:读写状态栏默认文本
status:读写状态栏文本,与默认文本不一样。
outerHeight/outerWidth:读取窗口外部宽高,即包含了菜单栏,滚动条这些。
innerHeight/innerWidth:读取窗口内部宽高(内容区域)。
这些值属性都返回一个数字,因为单位默认是像素。
然后window对象自带一些对象的引用作为其属性:document history location navigator self localStorage sessionStorage。
还有关于坐标的属性信息:
pageXOffset/pageYOffset:页面相对于窗口的坐标
screenX,screenY:窗口相对于屏幕的坐标。
常用方法:
三个提示框:
alert()
confirm():确认返回true,取消返回false。
confirm():可提供用户输入信息的提示框,返回用户输入字符串。
时间控件:
setTimeout和setInterval:设置
clearTimeout和clearInterval:清除
前者是设置固定时间后执行某函数或代码,后者是每隔多长时间执行一次。都有三个参数(function/code,time,param1,param2)传递的参数可供执行的function函数使用。
focus():将键盘焦点给予一个窗口。
blur():将键盘焦点从顶部窗口移开。
print():打印当前窗口内容。
stop():停止页面加载。
open(URL,name,space,replace):

打开一个新窗口:以上参数都为可选参数,URL即窗口的url地址,name有以下参数可选:



space参数是一个逗号分隔的项目列表,可以初始化新窗口的一些属性,常用的项有:height/width设置宽高、left:左侧位置,top:顶部位置(仅限ie)、location是否显示地址字段,默认显示,其余大多都是默认yes属性,不需要的手动改为false.
replace参数表示规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。(即是否更新历史浏览记录)

var win = window.open("http://www.cnblogs.com/fzz9/","_blank","height=500,wodth=500,left=100,top=100",true);
//返回值是新窗口这个对象。

resizeTo() || resizeBy()
重新调整窗口的大小,默认单位为像素。resizeTo(w,h)是为窗口设置规定的宽高,而resizeBy(indexW,indexH)是在原窗口的宽高上增加或减少相应的像素(负数即为减)
moveTo() || moveBy()
scrollTo() || scrollBy()
Navigator对象
Navigator对象包含有关浏览器的相关信息。
属性:
userAgent:返回客户机发送给服务器时user-agent的头部值。包含了浏览器的基本信息:如使用window版firefox返回值是:Mozilla/5.0 (Windows NT 6.3; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0。
而这其中具体的值我们也可以通过其他属性来获得:appCodeName浏览器代码名(Mozilla),appName浏览器名(Netspace),appVersion浏览器版本号(5.0(Windows)),platform:平台信息(Win32)。cookieEnabled是否启用了cookie。
目前方法只有两个:javaEnabled和taintEnabled分别为是否在浏览器中启用了java和是否启用了数据污点。(true|false)
Screen对象
包含客户端显示屏的相关信息。
width/height:显示器的宽高,这两个的值其实就是屏幕的分辨率。
availHeight/availWidth:显示器的可用宽高,比如windows系统的任务栏就不计入其中。(其实有时候并不准确,也计入其中了)。
目前暂未提供相关方法。
History对象
包含了当前窗口访问过的URL的历史记录列表。
length属性可返回历史记录地址列表的数量。
三个方法:back()后退,forward()前进,go(number/url)打开列表中的地址,一般使用number参数,正数表示前进number页,负数表是后退number页。
Location对象
Location对象包含当前URL的相关信息。
我们写一个比较完成的URL:

var url = "https://www.nihao.com:8080/lookme/sing#love?name=tom&age=18";
//假设这个就是当前地址的URL
location.href;//读写当前URL
location.protocol;//url的协议即https:
location.host;//主机名+端口号:www.nihao.com:8080
location.hostname;//主机名www.nihao.com
location.pathname;//路径名:/lookme/sing
location.hash;//url锚点值:love
location.search;//查询值,其实就是参数信息,更具体来说就是rul地址?后面的部分。

方法:
assign(url) || replace(rul):打开指定连接URl替换当前页面,和使用location.href=url;一样的效果。assign方法和replace的不同在于,前者可以go(-1)而后者不行。(来自网络,未验证)
reload()方法重载当前页面。
localStorage和sessionStorage
这两个对象是H5新增的Web存储的对象,localStorage对象存储时间不限,而sessionStorage对象是会话对象,即关闭当前会话就会清空存储。
两者都是以键值对存储信息的,length属性可以返回当前存储对象的键值对数量。
方法:


以下是两者作用域的一些区别:

最后一部分就是DOM 对象
document对象
DOM结点:html文档可以解析为DOM结点:html文档就是一个文档结点,所有的元素都是元素结点,所有属性都是属性结点,文本被插入到html元素中是文本结点text-nodes,注释是注释结点。
而document对象就是html文档的根结点,通过document对象我们就能对html进行操作。注意,我们获取到了某个元素,这个元素也能使用自带的一些属性和方法,即html自带的而非js提供的属性和方法。
常用属性和方法:
document.querySelector() || document.querySelectorAll()
document.addEventListener() || document.removeEventListener()
document.write() || document.writeln()
document.getElementById() || getElementsByClass || getElementsByTagName || getElemntsByName
document.createElement() || createAttribute() || createTextNode
在 W3C DOM核心,文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的,应该避免使用,以这里不再列举。
元素对象常用属性和方法:
有很多关于属性的方法,我们可以使用getAttribute、setAttribute、removeAttribute来操作。

  • cloneNode()克隆某个元素.
  • firstChild 、lastChild
  • focus() hasFocus()
  • hasAttribute() || hasAttributes()
  • hasChildNodes():文本结点也算其子节点
  • element.id elemnet.innerHTML element.style
  • insertBefore(newNode,targetNode) appendChild()
  • nodeType:返回节点类型,元素节点返回1,属性节点返回2,文本节点3,注释节点返回8。
    事件对象
    onmouseenter和onmouseover两者都是鼠标进入元素时触发,但不同点在于onmouseenter事件不冒泡而onmouseover事件冒泡,所以当鼠标进入子元素时前者不再触发而后者仍然会触发事件。同样的,和这两个事件相对的事件分别为onmouseleave和onmouseout.
    onkeydown和onkeyup相对,onkeypress是键盘按下并放开触发。
    onpageshow和onpagehide(不是很好用)相对,分别表示页面被访问和跳转到其他页面时触发,一般绑定到框架或body标签上。onscroll是页面滚动时触发,onresize表示尺寸变化时触发。
    还有表单事件、剪切板事件、拖动事件、多媒体事件、动画事件等事件此处不再一一赘述,可参考:
    http://www.runoob.com/jsref/dom-obj-event.html
    console对象
    log() || info():打印信息到控制台
    clear()清空
    table(array||object,[colTitle]):表格形式显示数据
    time() || timeedn() 结合使用,可以用来计算某个操作的执行时间。
    trace()方法用于显示当前执行的代码在堆栈中的调用路径
    CSSStyleDeclaration对象
js知识点(随机)
  • XMLHttpRequest对象(Ajax核心对象)


  • 函数定义方式:


  • console.log('Value is ' + (val != '0') ? 'define' : 'undefine');中val已经定义可能为任意值,那么输出结果可能为?

  • 跨域
    https://www.cnblogs.com/2050/p/3191744.html
  • 闭包
  • js中的数字占8字节
  • null == undefined返回true;null === undefined返回false;false == null返回false.
  • var a=b=3 相当于 var a = 3;b = 3;b是全局的

  • var i = 4399<0 || typeof(4399+"");之后i值为。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,072评论 0 3
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 释怀了,在下一秒又想不通了,怨恨了,每天都在这样不停的循环中,大道理都懂可小情绪却难自控!我不得不承认,自己也曾有...
    罗金萍阅读 158评论 0 0
  • 雨路山今一壶酒, 灼辣微怡是人悦。 呵歌其过再求爷, 说词无酷煽情出。 冷遇感暖乌泥去, 夜行挂神画星题。 201...
    春城怡景阅读 240评论 0 8