title: javascript 基础语法
tags: [语法]
categories:jJavaScript
1. JavaScript概念
-
JavaScript是一种基于对象和时间驱动并具有相对安全并广泛用于客户的网页开发的脚步语言,同时也是一种广泛用于客户端Web开发的脚本语言。
-
JavaScript的核心部分包括两个部分:
基本的语法结构(比如操作符、控制结构、语句) 和 标准库 (就是一系列具有各种功能的对象,比如Array、Date、Math等)
2. JavaScript的实现
完整的JavaScript由三个部分组成:
- JavaSript的核心(ECMAScript);
- 文档对象模型(DOM, Document Object Model);
- 浏览器对象模型(BOM, Browser Object Model);
3. JavaScript 的特点
- 可以用任何文本编辑工具编写
- 无需编译,由JavaScript引擎解释执行
- 弱类型语言
- 基于对象和原型
4. JavaScript运行环境
-
浏览器控制台(console)
-
将js脚步嵌入在HTML页面执行
-
html元素事件
<button οnclick="console.log("hello world)">打印</button> //不推荐在事件属性中书写JS
-
script元素
<script> document.write('<b>你好</b>'); console.log('脚本执行完成'); </script>
-
外部脚本文件
• 将JavaScript代码写入一个单独的文件,并保存为后缀名为js的文件 • 为纯文本文件 • 文件中,不需要包含<script>标签,直接书写js代码 • 在<head>中添加<script>标签 • 设置<script>标签的“src”属性,以指定js文件的url
-
5.语法规范
语句----会被JavaScript引擎解释执行的代码
• 由表达式、关键字、运算符组成;
• 大小写敏感;
• 使用分号或者换行结束
注释不会被JavaScript引擎解释执行的代码单行注释://
多行注释:/* */
1. 变量
CMAScript的变量是松散类型的,所谓松散类型就是可以用来保存任何类型 的数据。定义变量时要使用var操作符(var是一个关键字),后跟变量名(即一 个标识符)。
当声明一个变量时,就创建了一个新的对象。
什么是变量 ? 变量是存储信息的容器。
例如: x = 1;
y = 3;
sum = x + y;
在JavaScript中,这些字母被成为变量
变量的使用:
1. 变量可以先声明再赋值
var a;
a = 1;
2. 可以对变量中的值进行修改获取变量的值
var a = "1234";
var b = a;
3. 重新设置变量的值 var age = 1;
age = 2;
2. 标识符命名 命名规范
-
不能使用关键字和保留字
-
可以包含字母、数字、下划线、美元符号
-
不能以数字开头
-
常用于表示函数、变量等名称
-
名称最好有明确的含义
-
可以采用 小驼峰命名法
3.保留字
保留字在某种意义上是为将来的关键字而保留的单词, 因此保留字也不能被用作变量名或函数名。
注意:如果将保留字用作变量名或函数名,那么除非将 来的浏览器实现了该保留字, 否则很可能收不到任何错误 消息。当浏览器将其实现后, 该单词将被看做关键字,如 此将出现关键字错误
6. 基本数据类型
ECMAScript中有5种基本数据类型: undefined null number string boolean
typeof 用于检测类型
// typeof 检测undefined 返回 'undefined'
// 检测null 返回 'object'
// 检测数字和NaN 返回 'number'
// 检测字符串 返回 'string'
// 检测布尔值 返回 'boolean'
// 检测对象 返回 'object'
// 检测函数 返回 'fuction'
// var msg;
// console.log(msg); // undefined
// console.log(typeof msg); // typeof 用于检测数据类型
// var a = null;
// console.log(a); //null
// console.log(typeof a); // typeof检测null会返回object null是一个空对象指针
// var num = 123.3;
// console.log(typeof num); // number
// console.log(3 * "5a"); //NaN Not a Number
// console.log(isNaN('abc'));
// console.log(typeof NaN); //number
// var str = 'abcdefg';
// console.log(typeof str); //string
// console.log("\"\""); // \叫做转义符
// console.log("你好\n世界")
// document.write("<h1>你好\r\n世界</h1>");
// var bool = true;
// // console.log(bool + 3);
// console.log(typeof bool); // boolean
// var boolean1 = true;
// console.log(typeof boolean1);
// 类和构造函数的首字母会大写
// 构造函数
// var boolean2 = new Boolean(true);
// console.log(boolean2);
// console.log(typeof boolean2);
// var num = new Number(31);
// console.log(typeof num);
// console.log(num + 10);
var str = new String('abc');
console.log(typeof str);
1. Undefined
Undefined类型只有一个值,即特殊的undefined。在使用var声明变量但未对其加以初始化时(未赋值),这个变量的值就是undefined。
var message;
alert(message == undefined); //true
2. Null
• Null类型是第二个只有一个值的数据类型,这个特殊的值是null。
• null值表示一个变量以后可能会指向某个对象,但目前什么都没有指向
• var car = null;
• alert(typeof car); //“object”
• 从逻辑角度来看,null值表示一个空对象指针,而这也正是使用typeof操作 符检测null值时会返回“object”的原因。
• alert(null == undefined); //true
2. Boolean
• Null类型是第二个只有一个值的数据类型,这个特殊的值是null。
• null值表示一个变量以后可能会指向某个对象,但目前什么都没有指向
• var car = null;
• alert(typeof car); //“object”
• 从逻辑角度来看,null值表示一个空对象指针,而这也正是使用typeof操作 符检测null值时会返回“object”的原因。
• alert(null == undefined); //true
3. Number 类型
• JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
• var x1=34.00; //使用小数点来写
• var x2=34; //不使用小数点来写
• NaN(Not a Number)是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数未返回数字的情况。
• isNaN() 函数
这个函数接受一个参数,该参数可以是任何类型,而函数会帮我们确定这个参数是否“不是数字”。并返回一个Boolean值。
4. String 类型
• 字符串是存储字符的变量,字符串可以是引号中的任意文本。
• 可以使用单引号或双引号
• var name = "zhangsan"; //申明并直接赋值
5. Boolean 类型
• 布尔类型
• 仅有两个值:true 和 false
• 也代表 1 和 0
• 实际运算中 true == 1,false == 0
6.Object 类型
ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行
new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例 并为其添加属性和(或)方法,就可以创建自定义对象:
var o = new Object();
o.name = "zhangsan";
o.age = 18;
7.基本包装类型(扩展)
为了便于操作基本类型值,ECMAScript 还提供了 3 个特殊的引用类型:
Boolean、Number 和String。基本包装类型具有与各自的基本类型相应的特
殊行为。实际上,每当读取一个基本类型值得时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。
7. 运算符
运算符分为
• 算数运算 + - * / ++ --
• 关系运算> < >= <= == === != !==
• 逻辑运算 && || !
• 赋值运算 = += -= *= /= =
• 字符链接 +
• 条件(三目)运算 ? :
1. 算数运算符
var num = 10;
num++; // num=num+1
num--; // num=num-1
// console.log(10 % 3);
// console.log(7 % 4);
// console.log(3 + 8 * 6 + 7); //58
// var a = 8;
// a++; // a = a + 1;
// // 当在使用一元运算符运算时
// // ++(--)在前先+1(-1)再使用 ++(--)在后先使用再+1(-1)
// console.log(a + a++ + a - ++a - a + a--); //20 17 16 18 15 11 -1 19
// // 9 + 9 + 10 - 11 - 11 + 11
// // 10 11 10
// var i = 6;
// console.log(++i + i++ - ++i + i - i-- + ++i); //14 15 16
// 7 + 7 - 9 + 9 - 9 + 9
var k = 5;
console.log(k + ++k - --k + k++ - k + ++k); //12
2. 关系运算符
• 关系运算用于判断数据之间的大小关系
• 关系表达式的值为boolean类型(true或false)
3.相等操作符
确定两个变量是否相等是编程中的一个非常重要的操作。在比较字符串、数值和布尔值的相等性时,问题还是比较简单。但在涉及到对象的比较时, 问题就变得复杂了。最早的ECMAScript中的相等和不等操作符会在执行比较之前,现将对象转换成相似的类型。后来,有人提出这种类型转换道理是否合理的质疑。最后,ECMAScript的解决方案就是提供两组操作符
相等和不相等 —— 先转换再比较
• ECMAScript中的相等操作符由两个等号(==)表示,如果两个操作数相等, 则返回true。
• 而不相等操作符由叹号后跟等于号(!=)表示,如果两个操作数不相等, 则返回true。
• 这两个操作符都会先转换操作数(通常称为强行转型),然后再比较它们 的相等性。
在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则:
● 如果有一个操作数是布尔值,则在比较相等性之前将其转换为数值
false转换为0,而true转换为1;
● 如果一个操作数是字符串,另外一个操作数是数值,在比较相等性之前先将字符串转换为数值;、
全等和不全等 —— 仅比较而不转换
• 除了在比较之前不转换操作数之外,全等和不全等操作符与相等和不相
• 等操作符没有什么区别。全等操作符由3个等于号(===)表示,它只在两
• 个操作数未经转换就相等的情况下返回true。
• var b1 = (“55”== 55); //true,应为转换后相等
• var b2 = (“55” === 55); //false,应为不同的数据类型不相等
• 全不等操作符由一个叹号后跟两个等号(!==)表示,它在两个操作数未经
• 转换就不相等的情况下返回true。
• var b1 = (“55” != 55)//false,转换后相等
• var b2 = (“55”!== 55)//true,应为不同数据类型不相等
4. 布尔操作符
1. 逻辑非(!)
逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值。无论这个值是什么数据类型,这个操作符 都会返回一个布尔值。逻辑非操作符首先会将它的操作数据转换为一个布尔值,然后再对其求反。也就是说,逻辑非操作符遵循下列规则:
2. 逻辑与(&&)
逻辑与操作符由两个和号(&&)表示,有两个操作数。
var t = true && false;
//false
3. 逻辑或(||)
逻辑或操作符由两个竖线符号(||)表示,有两个操作数。
vart = true || false; //true
5.短路逻辑(扩展)
• 短路求值(Short-circuit evaluation,又称最小化求值),是一种逻辑运算符的求值策略。只有当第一个运算数的值无法确定逻辑运算的结果时,才对第二个运算数进行求值。例如,当AND的第一个运算数的值为false时,其结果 必定为false;当OR的第一个运算数为true时,最后结果必定为true,在这种 情况下,就不需要知道第二个运算数的具体值。
• 在JavaScript中
• AND的一个运算数的值为true时,返回第二个运算数
• OR的第一个运算数的值为true时,返回第一个运算数
6.运算
1. 赋值运算
• 使用“=”进行赋值运算
• var add = 100;
• 赋值表达式
+= -= *= /= = %
2. 字符链接运算
• 使用“+”进行字符串链接
• 作用于两个数字时,表示算数运算
• 作用与字符串时,表示字符串拼接运算
3. 三目运算(条件)运算
• 三目运算符(?:)--需要对三个表达式进行运算
• 表达式1?表达式2:表达式3
• 其中表达式1的值是boolean类型,表达式的含义:
若表达式1为true,则整个表达式的值为表达式2的值; 若表达式1为false,则整个表达式的值为表达式3的值;
var age = 20;
var msg = age > 18 ? "成年人" : "未成年";
4. 数据类型转换
• 隐式转换
• 变量在声明时不需要指定数据类型
• 变量由赋值操作确定数据类型
• 不同类型数据在计算过程中会自动进行转换
5.数据转换函数
• Number()
把一个string解析为number,如果包含非法字符,则返回NaN
• parseFloat()
解析出一个string或number的浮点数部分,如果没有可转换的部分,则返回NaN
• parseInt()
解析出一个string或number的整数部分,如果没有可转换的部分,则返回NaN
• toString()
转换成字符串,所有数据类型均可转换为string类型
• Boolean()
将操作数转换成布尔值