2019-05-28

Javascript使用

[if !supportLists]一、      [endif]JS的三种使用方式

[if !supportLists]1、        [endif]行内:写在html标签中的js代码中

[if !supportLists]2、        [endif]内部:写在写在<script type="text/javascript"></script>标签之间可以放在html中的任意位置,一般放在<head>标签中或<body>标签中或<body>标签后;

3、   外部:引入外部的js文件

<script type="text/javascript"

src="js文件的路径"

></script>

注:如果<script>标签中设置了src属性,name写在<script>双标签中的js代码无效;

[if !supportLists]二、      [endif]变量和注释

[if !supportLists]1、        [endif]语句(statment)是为了完成某种任务进行的操作,语句分号结尾;

[if !supportLists]2、        [endif]多个语句可以写在一行,但是不建议这么写;

[if !supportLists]3、        [endif]表达式不需要分号结尾,一旦表达式后面添加分号,则JavaScript引擎会将表达式视为语句,这样会产生一些没有任何意义的语句;

[if !supportLists]4、        [endif]所有的变量都通过“var”声明;

[if !supportLists]5、        [endif]注释://单行注释;/*多行注释*/。

[if !supportLists]三、      [endif]变量的声明

[if !supportLists]1、        [endif]js是一种弱类型语言,声明时不需要指定数据类型,直接通过var修饰符声明;

[if !supportLists]2、        [endif]先声明再赋值,或者声明并赋值;

[if !supportLists]3、        [endif]如果声明变量时不适用var修饰,则该变量是全局变量;

[if !supportLists]4、        [endif]变量的注意点:a、若是声明没有赋值,则该变量的值为undefined;

b、变量要有定义才能使用,若未声明使用,js报错,告诉你变量没有定义;

c、可以在同一条var中声明多个变量;

e、若使用var重新声明已经存在的变量,是无效的;

f、若使用var重新声明已经存在的变量且赋值,则会覆盖掉前面的值;

g、js是一种动态类型、弱类型的语言,也就是说,变量的类型没有限制。

5、变量提升

Js引擎的工作方式,先解析代码,获取所有的被声明变量,然后再一行一行地运行,结果所有的变量的声明语句都会提升到代码的头部。

[if !supportLists]四、      [endif]数据类型

Js中有6种数据类型,其中有5种简单数据类型

1、Undefined:   表示未定义或者不存在,即此处目前没有任何值;

2、Null: 表示空缺,即此处应该有一个值,但目前为空;

3、布尔值(Boolean):true和false两个特定值;

4、字符串(string):字符组成的文本;

5、数值(Number):整数和小数;

6、对象(object)(引用):各种值组成的集合

1)、对象object,{name:”zhangsan”,age:”18”}

2)、数组,(array)[1,2,3]

3)、函数,(function)function test() {}

操作符typeof

Typeof操作符用来检测数据类型。

说明:1、typeof null 返回的是 object 字符串

2、函数不是数据类型,但是也可以使用 typeof 操作符返回字符串。

3、type操作符可以操作变量,也可以操作字面量;

4、函数在js中是对象,不是数据类型,所以使用typeof区分function和object是必要的;

      Undefined

[if !supportLists]1、        [endif]undefined类型的值是undefined;

[if !supportLists]2、        [endif]undefined是一个表示“无”的原始值,表示值不存在;

[if !supportLists]3、        [endif]当声明了一个变量而没有初始化时,这个变量值就是undefined;

[if !supportLists]4、        [endif]当函数需要形参,但未传递实参时,值就是undefined;

[if !supportLists]5、        [endif]当函数没有返回值,但定义了变量接受时,值就是undefined。

Null

[if !supportLists]1、        [endif]null类型是只有一个值得数据类型,它表示空值,即该处的值为空;

[if !supportLists]2、        [endif]null表示一个空对象的引用;

[if !supportLists]3、        [endif]使用typeof操作符测试null,返回object字符串;

[if !supportLists]4、        [endif]Undefined派生自null,所有等值比较返回值是true,所有未初始化的变量,和赋值为null的变量相等。

数值型(整型和浮点型)

  1、所有数字都是以64位浮点数形式储存的,所有js中1和1.0相等;

2、1加1.0得到的还是整数,浮点数最高精度是17位小数,由于浮点数运算不精确,所有尽量不适用;

  3、对于过大和过小的数值,可以使用科学计数法来表示;

  4、超过数据范围,出现Infinity(正无穷)或者-Infinity(负无穷)

5、isFinite()函数可以确定是否超出范围;(true没有超出,false超出了)

  6、NaN表示非数值(Not a Number),是一个特殊的值;

  注意:NaN不等于任何值,包括它本身,因为它不是一个值

       NaN与任何数包括它自己的运算,得到的都是NaN

isNaN()可以用来判断一个值是否为NaN,true不是数字,false是数字;

对象

  Instanceof运算符:typeof操作符对数组和对象的显示结果都是object,那么可以利用instanceof运算符来判断一个变量是否是某个对象的实例;


[if !supportLists]五、      [endif]类型转换

[if !supportLists]1、        [endif]自动类型转换

[if !supportLists]2、        [endif]函数转换

parseInt()在转换前分析该字符串,判断位置0处的字符串,判断它是否是个有效数字,如果不是,则直接返回 NaN,不再继续,如果是则继续,直到找到非字符。

parseInt()方法的基模式,可以把二进制,八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt()方法的第二个参数指定的。

如果十进制数包含前导 0,那么最好采用基数 10,这样才不会意外地得到八进制的值。

[if !supportLists]3、        [endif]显示转换

toString()函数将内容转换为字符串形式,可以将数字以指定的进制转换成字符串,默认为十进制。

Number 还提供了 toFixed()函数将根据小数点后指定位数将数字转为字符串,四舍五入。

[if !supportLists]4、        [endif]强制转换

JS 为 Number、Boolean、String 对象提供了构造方法,用于强制转换其他类型的数据。此时操作的是整个数据,而不是部分。

[if !supportLists]六、      [endif]数组

特点:数组长度可变,数组里面的类型可以不一样,不存在下标越界。

[if !supportLists]1、        [endif]数组的定义

1、隐式创建         var变量名 = [值1,值2,...];

   2、直接实例化

   var变量名 = new Array(值1,值2,...);

   3、实例化并指定长度

   var变量名 = new Array(size);


   获取数组的长度数组.length

[if !supportLists]2、        [endif]数组的遍历

1、普通 for 循环遍历  for(var i = 0; i <数组名.length; i++) {

                               }

   注:可以拿到undefinded的值,无法获取数组中属性对应的值

2、for ... in

   for(vari in数组) {

                               //i是下标或属性名

                         }

   注:无法拿到undefinded的值,可以获取数组中属性对应的值


   3、foreach

   数组.foreach(function(element,index){

         //element:元素;index:下标

                         });

注:无法获取属性对应的值与undefinded的值


* for -- 不遍历属性

* foreach -- 不遍历属性和索引中的 undefined

* for in -- 不遍历索引中的 undefined


[if !supportLists]3、        [endif]数组提供的方法

push 添加元素到最后

unshift 添加元素到最前

pop 删除最后一项

shift 删除第一项

reverse 数组翻转

join 数组转成字符串

indexOf 数组元素索引

slice 截取(切片)数组,原数组不发生变化

splice 剪接数组,原数组变化,可以实现前后删除效果

concat 数组合并

[if !supportLists]七、      [endif]函数

函数即方法,函数也是对象。

[if !supportLists]1、        [endif]函数的定义方式

1)函数声明语句:function  函数名([形参]){  }

  调用:函数名([实参]);

           2)函数定义表达式:

                 Var变量名/函数名=function([形参]){  }

           调用:变量名([实参])/函数名([实参]);

           3)Function构造函数

                 var函数名 = new Function('参数1','参数2','函数的主体内容');

           调用:函数名([实参]);

           注:构造函数的最后一个参数是函数体。

[if !supportLists]2、        [endif]注意

js 中的函数没有重载,同名的函数,会被后面的函数覆盖。

js 中允许有不定数目的参数,后面介绍 arguments 对象。

[if !supportLists]3、        [endif]函数的参数、调用和return

1)参数: 函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数,定义时的参数称为形参,调用时的参数称为实参。

1、实参可以省略,那么对应形参为 undefined

 2、若函数形参同名(一般不会这么干):在使用时以最后一个值为准。

 3、可以给参数默认值:当参数为特殊值时,可以赋予默认值。

 4、参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象

2)函数的调用

常用的调用方式:函数名([实参]);

存在返回值可以变量接收,若接收无返回值函数则为 undefined。

函数调用模式:var fn9 =

function() {

              console.log(this);// Window对象

              return1;

         }

         varf = fn9();

         console.log(f);


方法调用模式:var obj = {

              uname:"zhangsan",

              uage:18,

              cats:["喵喵","猫猫"],

              sayHello:function(){

                    console.log(this);// obj对象

                    console.log("你好呀~");

              }

         };

         console.log(obj.sayHello);

         obj.sayHello();

间接调用:function fn10(x,y) {

                console.log(x+y);

                console.log(this);

          }

          fn10(1,2); //  Window对象


          fn10.call(); //  Window对象

注意:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

3)return语句

函数的执行可能会有返回值,需要使用 return 语句将结果返回。return 语句不是必需的

如果没有的话,该函数就不返回任何值,或者说返回 undefined。

作用:在没有返回值的方法中,用来结束方法。

有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。

[if !supportLists]八、      [endif]arguments对象和函数的方法及属性

arguments 对象可以得到函数的实参数量

函数名.name

函数名.length()得到函数的形参数量

函数名.toString()得到函数的源码

[if !supportLists]九、      [endif]函数的作用域

函数的作用域:全局(global

variable)和局部(local

variable)

1)全局变量与局部变量同名问题

2)在函数中定义变量时,若没有加 var 关键字,使用之后自动变为全局变量

3)变量作用域提升

十、闭包

      闭包的形成:

                 1、外部函数内部嵌套内部函数

                 2、内部函数中使用外部函数的环境

                 3、外部函数返回内部函数

      闭包的作用:

                 1、获取函数内部的变量

                 2、保存变量的值在内存中

                 3、避免变量名重复


十一、内置对象

      Date:

//获取

                 ◦ getFullYear()年, getMonth()月, getDate()日,

                 ◦ getHours()时,getMinutes()分,getSeconds()秒

                 //设置

                 setYear(), setMonth(), …

                 toLoacaleString()

                 说明:

                 1.getMonth():得到的值:0~11(1 月~12 月)

                 2.setMonth():设置值时 0~11

                              3.toLocaleString():可根据本地时间把 Date 对象转换为字符串,并返回结果。

十二、JS对象

          JS中一切数据皆是对象

[if !supportLists]1)        [endif]定义对象

[if !supportLists]1、        [endif]字面量形式创建对象

Var 变量名={  }//空对象

Var 变量名={键:值,······}

[if !supportLists]2、        [endif]通过new Object对象创建

Var 变量名=new Object();

[if !supportLists]3、        [endif]通过Object对象的creat方法创建对象

Var变量名=Object.create(null或对象);

[if !supportLists]2)        [endif]对象的序列化和反序列化

序列化即将 JS 对象序列化为字符串,反序列化即将字符串反序列化为 JS 对象。

调用 JSON 方法,可以将对象序列化成字符串,也可以将字符串反序列化成对象。

JSON.stringify(object)  //序列化对象,将对象转为字符串。

JSON.parse(jsonStr)//反序列化,将json字符串转换为对象。

[if !supportLists]3)        [endif]eval()

1、可借助 eval()动态函数,将参数字符串解析成 js 代码来执行,只接受原始字符串作为参数

eval(“console.log(‘你好’)”);//控制台输出你好

2、可将 json 串转为 json 对象

1)第一种解析方式:得到的 json 对象名就是 jsonObj

eval("varjsonObj = " + jsonStr);

2)第二种解析方式:对象中有多个属性

varjsonObj = eval("(" + jsonStr + ")");

由于 json 是以{ }的方式来开始以及结束的,在 eval中会被当成一个语句块来处理,故必须强制将它转换成一种表达式。加上圆括号是使 eval 函数在处理时强制将括号内的表达式转化为对象而不作为语句来执行。

3)第二种解析方式:对象中只有一个属性

eval(jsonStr);

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

推荐阅读更多精彩内容