博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript基础
阅读量:4977 次
发布时间:2019-06-12

本文共 8720 字,大约阅读时间需要 29 分钟。

定义

javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互。

  javascript是由三部分组成:ECMAScript、DOM、BOM

  • ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会)
  • DOM(Document Object Model)文档对象模型,提供访问和操作网页内容的方法和接口
  • BOM(Browser Object Model)浏览器对象模型,提供与浏览器交互的方法和接口

JavaScript引入方式

Script标签内写代码

  可以写在head中,不过推荐写在body中

引入外部的JS文件

注释方式

//   单行注释/**/ 多行注释 ;   结束符 console.log() 输出

变量

  声明变量使用 var 变量名; 的格式来进行声明,JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。

     注意:局部变量必须以 var 开头申明,如果不写 var 则为全局变量

 

 

数据类型

特殊值:

  • null     表示一个空对象指针,常用来描述"空值";
  • undefined  表示变量定义,但是没有值传入

 

数字(Number)

JavaScript中不区分整数和浮点数,所有数字均用浮点数值表示。

NaN表示非数字

转换:

  • parseInt(..)    将某值转换成整数,不成功则NaN
  • parseFloat(..) 将某值转换成浮点数,不成功则NaN

数字的方法

Number 对数字的支持
Number.MAX_VALUE 最大数值
Number.MIN_VALUE 最小数值
Number.NaN 非数字
Number.NEGATIVE_INFINITY 负无穷大
Number.POSITIVE_INFINITY 正无穷大
Number.toExponential( ) 返回四舍五入的科学计数法,加参数为保留几位
Number.toFixed( ) 小数点后面的数字四舍五入,加参数为保留几位
Number.toPrecision( ) 四舍五入,自动调用toFixed()或toExponential()
Number.toLocaleString( ) 把数字转换成本地格式的字符串
Number.toString( ) 将数字转换成字符串
Number.valueOf( ) 返回原始数值

 

 

 

 

 

 

 

 

 

字符串(String)

String.length 字符串的长度
String.trim() 移除空白
String.trimLeft() 移除左侧空白
String.trimRight() 移除右侧空白
String.concat(value, ...) 拼接
String.slice(start, end) 切片
String.split( ) 分割
String.search( ) 从头开始匹配,返回匹配成功的第一个位置(g无效)
String.match( ) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个
String.replace( ) 替换,正则中有g则替换所有,否则只替换第一个匹配项;
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号
String.charAt( ) 返回字符串中的第n个字符
String.charCodeAt( ) 返回字符串中的第n个字符的代码
String.fromCharCode( ) 从字符编码创建—个字符串
String.indexOf( ) 查找子字符串位置
String.lastIndexOf( ) 查找子字符串位置
String.localeCompare( ) 用本地特定的顺序来比较两个字符串
String.substr( ) 抽取一个子串
String.substring( ) 返回字符串的一个子串
String.toLocaleLowerCase( ) 把字符串转换小写(针对地区,在不知道程序在哪个语言环境中运行时用)
String.toLocaleUpperCase( ) 将字符串转换成大写(针对地区)
String.toLowerCase( ) 小写
String.toUpperCase( ) 大写
String.toString( ) 返回原始字符串值
String.toString() 返回原始字符串值
String.valueOf( ) 返回原始字符串值

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

布尔类型(Boolean)

  true和false  首字母小写,在python中首字母需大写

toString() 返回Boolean的字符串值('true'或'false')
toLocaleString() 返回Boolean的字符串值('true'或'false')
valueOf() 返回Boolean的原始布尔值(true或false)

 

 

 

 

 

 

数组(Array)

var a = ['a',1,2];console.log(a[0]);  // 输出"a"
Array.length 数组的大小
Array.push() 尾部添加元素
Array.pop() 删除并返回数组的最后一个元素
Array.unshift() 在数组头部插入一个元素
Array.shift( ) 在数组头部移除一个元素
Array.slice( ) 切片
Array.reverse( ) 反转
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.concat( ) 拼接
Array.sort( ) 排序
Array 对数组的内部支持
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串

 

 

 

 

 

 

 

 

 

 

 

 

 

运算符

算数运算符

+  -  *  /  %  ++(递增1)  --(递减1)

 

比较运算符

===  严格运算符 比较过程没有任何类型转换
  !==  严格运算符 ===的结果取反
  ==  相等运算符 如果两个操作值不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较
  !=  不相等运算符 ==的结果取反
  >  大于运算符  
  >=  大于等于运算符  
  <  小于运算符  
  <=  小于等于运算符  

 

 

 

 

 

 

 

逻辑运算符

!  非(两个!!表示Boolean()转型函数)

返回一个布尔值
    &&  与 两个操作都为true时返回true,否则返回false(返回值不一定是布尔值),可以多个连用(..&&..&&..)
    ||  或 两个操作都是false时返回false,否则返回true(返回值不一定是布尔值),可以多个连用(..||..||..)

 

 

 

 

 

语句

1、条件语句

JavaScript中支持两个条件语句,分别是:if 和 switch。

  if语句

//if语句 if(条件){ } else if(条件){ } else{  }

  switch语句

//switch语句,条件等于a是执行第一个case,等于第二个执行第二个case,其它执行default. switch(条件){        case 'a':            执行内容1;            break;        case 'b':            执行内容1;            break;       #switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。        default :            默认执行的内容;    }

 

2.循环语句

  JavaScript中支持四种循环语句,分别是:for、for in、while、do-while

for 循环

for (var i=0;i<10;i++) {  console.log(i);}

for in

var array1 = ["a", "b"]; for(var i in array1){    console.log(i);    console.log(array[i]);}

while

var i = 0;while (i < 10) {  console.log(i);  i++;}

do -while

//循环的代码至少执行一次,结果为1         var num = 0;        do {            num++;        }while (num>10);

函数(Function)

函数定义

// 普通函数    function func(i){        return true;    }           // 匿名函数  这里无需写函数名,定义一个变量赋值给变量    var func = function(i){        console.log(i);    }   // 自执行函数    (function(i){        console.log(i);    })('哈哈')

函数参数:

函数传参的个数可以小于实际需传参的个数,没传参的默认为undefined

参数传多默认不起作用

function func(a,b){        console.log();    }  func(1,2,3)    //结果为 1,2  func(1)        //结果为

arguments 可接收所有参数,返回一个数组

function func() {    console.log(arguments);} func(1,2,3)      //结果为 [1,2,3] func('a','b')    // 结果为 ["a","b"]

 

函数的全局变量和局部变量

局部变量

在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域与作用域链

  首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。

var a = 100;        function outer() {            function inner1(){                var a = 10;                console.log(a);  }     //10            function inner2() {                console.log(a);  }    // 100            inner1();            inner2();        }        outer(); inner1()的作用域链为 inner1--->outer      inner2()的作用域链为 inner2--->outer

闭包:

var name= "张三";function f(){    var name = "李四";    function inner(){        console.log(name);    }    return inner;}var ret = f();   //ret就是inner的闭包函数ret();

 

面向对象

创建对象

var person=new Object();  // 创建一个person对象person.name="张三";  // person对象的name属性person.age=18;  // person对象的age属性

 

JSON序列化

var str1 = '{"name": "张三", "age": 18}';var obj1 = {"name": "张三", "age": 18};// JSON字符串转换成对象var obj = JSON.parse(str1); // 对象转换成JSON字符串var str = JSON.stringify(obj1);

正则表达式

JavaScript中支持正则表达式,其主要提供了两个功能:

  • test(string)     用于检测正则是否匹配
  • exec(string)    用于获取正则匹配的内容
// 创建RegExp对象方式(逗号后面不要加空格)var reg1 = new RegExp("^(13|14|15|17|18)[0-9]{9}$");  === var reg2 = /^(13|14|15|17|18)[0-9]{9}$/;// 匹配响应的字符串var s1 = "138888888888888";//RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。reg1.test(s1);  // true

 

匹配模式:

  g:表示全局(global)模式,匹配所有字符串,不会匹配到第一项时停止

  i:表示不区分大小写(case-insensitive)模式

  m:表示多行(multiline)模式,到达一行文本末尾时还会继续查找下一行中是否存在匹配的项

var s2 = "hello world";s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换// 关于匹配模式:g和i的简单示例var s1 = "Uliusouthern";s1.replace(/u/, "哈哈哈");      // "Uli哈哈哈southern"s1.replace(/u/g, "哈哈哈");     // "Uli哈哈哈so哈哈哈thern"      全局匹配s1.replace(/u/gi, "哈哈哈");    // "哈哈哈n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写

时间对象

创建对象 //方法1:不指定参数var d1 = new Date();console.log(d1.toLocaleString());//方法2:参数为日期字符串var d2 = new Date("2004/3/20 11:12");console.log(d2.toLocaleString());
Date    操作日期和时间的对象Date.getDate( )    返回一个月中的某一天Date.getDay( )    返回一周中的某一天Date.getFullYear( )    返回Date对象的年份字段Date.getHours( )    返回Date对象的小时字段Date.getMilliseconds( )    返回Date对象的毫秒字段Date.getMinutes( )    返回Date对象的分钟字段Date.getMonth( )    返回Date对象的月份字段Date.getSeconds( )    返回Date对象的秒字段Date.getTime( )    返回Date对象的毫秒表示Date.getTimezoneOffset( )    判断与GMT的时间差Date.getUTCDate( )    返回该天是一个月的哪一天(世界时)Date.getUTCDay( )    返回该天是星期几(世界时)Date.getUTCFullYear( )    返回年份(世界时)Date.getUTCHours( )    返回Date对象的小时字段(世界时)Date.getUTCMilliseconds( )    返回Date对象的毫秒字段(世界时)Date.getUTCMinutes( )    返回Date对象的分钟字段(世界时)Date.getUTCMonth( )    返回Date对象的月份(世界时)Date.getUTCSeconds( )    返回Date对象的秒字段(世界时)Date.getYear( )    返回Date对象的年份字段(世界时)Date.parse( )    解析日期/时间字符串Date.setDate( )    设置一个月的某一天Date.setFullYear( )    设置年份,也可以设置月份和天Date.setHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段Date.setMilliseconds( )    设置Date对象的毫秒字段Date.setMinutes( )    设置Date对象的分钟字段和秒字段Date.setMonth( )    设置Date对象的月份字段和天字段Date.setSeconds( )    设置Date对象的秒字段和毫秒字段Date.setTime( )    以毫秒设置Date对象Date.setUTCDate( )    设置一个月中的某一天(世界时)Date.setUTCFullYear( )    设置年份、月份和天(世界时)Date.setUTCHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)Date.setUTCMilliseconds( )    设置Date对象的毫秒字段(世界时)Date.setUTCMinutes( )    设置Date对象的分钟字段和秒字段(世界时)Date.setUTCMonth( )    设置Date对象的月份字段和天数字段(世界时)Date.setUTCSeconds( )    设置Date对象的秒字段和毫秒字段(世界时)Date.setYear( )    设置Date对象的年份字段Date.toDateString( )    返回Date对象日期部分作为字符串Date.toGMTString( )    将Date转换为世界时字符串Date.toLocaleDateString( )    回Date对象的日期部分作为本地已格式化的字符串Date.toLocaleString( )    将Date转换为本地已格式化的字符串Date.toLocaleTimeString( )    返回Date对象的时间部分作为本地已格式化的字符串Date.toString( )    将Date转换为字符串Date.toTimeString( )    返回Date对象日期部分作为字符串Date.toUTCString( )    将Date转换为字符串(世界时)Date.UTC( )    将Date规范转换成毫秒数Date.valueOf( )    将Date转换成毫秒表示
时间对象的方法

 词法分析

JavaScript中在调用函数的那一瞬间,会先进行词法分析。

词法分析的过程:

分析阶段

当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:

  1. 函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
  2. 函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
  3. 函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。级别最高

执行阶段

函数内部无论是使用参数还是使用局部变量都到AO上找。

 

var age = 18;function foo(){  console.log(age);  var age = 22;  console.log(age);}foo();  // 问:执行foo()之后的结果是 undifined                      22

 

var age = 18;function foo(){  console.log(age);  var age = 22;  console.log(age);   function age(){    console.log("呵呵");  }  console.log(age);}foo();  // 执行后的结果是 undifined               22               22

 

转载于:https://www.cnblogs.com/liusouthern/p/8550923.html

你可能感兴趣的文章
初学者可能不知道的vue技巧
查看>>
Python HDB3 AMI 编码与解码
查看>>
jquery,fn,extend和jquery.extend
查看>>
js奇葩错误
查看>>
poj 3974 Palindrome
查看>>
等比例缩放图片
查看>>
实现笛卡尔心形线的重复循环绘制
查看>>
实验报告四
查看>>
JS学习笔记——标准对象
查看>>
南柯一梦
查看>>
生产者与消费者——厨师和消费者之间的问题
查看>>
旋转菜单
查看>>
Masonry介绍与使用实践(快速上手Autolayout)(转)
查看>>
hihoCoder #1770 : 单调数(数位dp)
查看>>
友情链接
查看>>
laravel入门-CSRF解决
查看>>
数据库 chapter 17 数据仓库与联机分析处理技术
查看>>
Hdu4547CD操作离线lca
查看>>
jquery的基本事件大全
查看>>
git打tag
查看>>