ECMAScript(ES):JS的核心语法

Lannisters
1,070 阅读7分钟

ECMAScript(ES):JS的核心语法 DOM：让JS操作页面中的HTML元素 BOM：就是提供API让JS可以操作浏览器，比如关闭浏览器

#JS是什么 JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

  • 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本，等等。
  • 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
  • 第三方框架和库 —— 用来快速构建网站和应用。 1.变量和数据类型

var(ES3) function(ES3)创建函数（函数名也是变量，只不过存储的值是函数类型的而已） let(ES6) const(ES6) import(ES6) 基于ES6的模块规模导出需要的信息 class(ES6) 基于ES6创建类

/*
*语法：
* var [] = 值
* let [] = 值
* const [] = 值
*/

省略var定义的是全局变量. 可以使用一条语句定义多个变量，用逗号隔开即可： var message = "hi", found = false, age = 29;

  • 命名规范 var studentInfo _stidentInfo下划线在前的是公共变量 $studentInfo一般存储的是JQ元素

2.数据类型

  • 基本数据类型（值类型）
    • 数字number
    • 字符串string
    • 布尔
    • null
    • undefined
  • 引用数据类型
    • 对象object
      • 普通对象
      • 数组对象
      • 正则对象
      • 日期对象
      • 。。。
    • 函数function
  • ES6中新增加的一个特殊的类型:Symbol，唯一的值 var n = 13； //=>0 -13 13.2都是 数字类型中有一个特殊的值NaN(not a number)代表不是一个有效的数字，但是属于number类型的)

var s = '' or "" "{}"所有与用单引号或者双引号抱起来的都是字符串，里面的内容是当前字符串中的字符（一个字符串由零到多个字符组成）

[引用数据类型] var o = {name: '嘀嘀嘀' , age: 9}; // 普通的对象：由大括号包裹起来，里面包含多组属性名和属性值（包含多组键值对) {}空对象

var ary = [12,23,34,55]; // 中括号包裹起来，包含零到多项内容，这种是数组对象, []空数组

var reg = /-?(\d| ([1-9]\d+))(.\d+)?/g; // 由元字符组成一个完整的正则 //没有空正则，否则就是单行注释了

[symbol] 创建出来的是一个唯一的值 var a = Symbol('JS'); var b = Symbol('JS'); 但这两个是不相等的 a == b 是false的， 可能使用场景：const a = Symbol('FLAG'); 用来创建一个唯一且不能修改的值

JS代码如何被运行以及运行后如何输出结果

如何被运行

  • 把代码运行在浏览器中（浏览器内核来渲染解析）
  • 基于NODE来运行（NODE和浏览器一样也是一个基于V8引擎渲染和解析JS的工具）

获得结果

  • alert 基于alert输出的结果都会转换为字符串：把值通过toString这个方法转换为字符串，然后再输出 alert(1+1); =>'2' alert(true); =>'true' alert([12,23]); =>'12,23' alert({name: 'xxx'}); =>'[Object Object]' 对象toString后的结果为什么是这个

  • confirm:在alert的基础上多了确定和取消按钮

  • prompt:在confirm的基础上增加输入框

  • console.log:在浏览器控制台输出日志

    • Elements:当前页面中的元素和样式在这里都可以看到，还可以调节样式修改结构等
    • Console: 控制台，可以在JS代码中通过.log输出到这里，也可以在这里直接编写JS代码
    • Sources: 当前网站的源文件都在这里
    • 后面有详细讲解

  • console.dir: 比log输出的更加详细一些（尤其是输出对象数据值的时候)

  • console.table: 把一个JSON数据按照表格的方式输出

  • ...自己扩展更多console输出方法

3.数据类型的详细剖析 1.number数字类型 NaN: not a number 但是他是数字类型的 isNaN: 检测当前值是否不是有效数字，返回true代表不是有效数字，返回false代表是有效数字

//语法：isNaN([value])
var num = 12;
isNaN(num); //检测num变量存储的值是否为非有效数字

isNaN('13'); //false
isNaN('汉字'); //true
isNaN(true);   //false
isNaN(false);  //false
isNaN(null);  //false
isNaN(undefined); //true
isNaN({age:9});  //true
isNaN([12,23]); //true
isNaN(/^$/); //正则是true
isNaN(function(){});  //true

!!!重要：isNaN检测的机制
1.首先验证当前要检测的值是否为数字类型的，如果不是，浏览器会默认把值转换为数字类型

把非数字类型的值转换为数字
- 把其它基本类型转换为数字：直接使用Number这个方法转换的

[字符串转数字]
Number('13') ->13
Number('13') ->NaN 如果当前字符串中出现任意非有效数字字符，结果为NaN
Number('13.5') ->13.5

[布尔转数字]
Number(true) ->1
Number(false) ->0

[其它]
Number(null) ->0
Number(undefined) ->NaN 

- 把引用数据类型值转换为数字：先把引用值调取toString转换为字符串，然后再把字符串调取Number转换为数字

[对象]
({}).toString() ->'[Object Object]' ->NaN

[数组]
[12,23].toString() ->'12,23' ->NaN
[12].toString() ->'12'  ->12

[正则]
/^$/.toString() ->'/^$/' ->NaN

Number('') ->0
[].toString() ->''  => isNaN([]): false

2.当前检测的值已经是数字类型，是有效数字返回false，不是返回true(数字类型中只有NaN不是有效数字，其余都是有效数字)

parseInt / parseFloat 等同于Number,也是为了把其它类型的值转换为数字类型，和Number的区别在于字符串分析上 parseInt:把一个字符串中的整数部分解析出来，parseFloat是把一个字符串中整数和浮点数部分都解析出来 parseInt('13.5px') =>13 parseInt('width:13.5px') =>NaN 从字符串最左边开始查找有效数字字符并且转换为数字，但是一旦遇到一个非有效数字，查找结束

NaN的比较

NaN == NaN: false   // NaN和谁都不相等，包括自己， NaN表示不是一个有效数字，可能是任意非有效数字
所以不能用来判断是否是NaN因为条件永远不成立，应该用isNaN

2.Undefined类型 在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined var message; alert(message == undefined); //true 字面值undefined的主要目的是用于比较，是为了正式区分空对象指针(null)与未经初始化的变量。 var message; alert(typeof messsage); //"undefined" alert(typeof age); //"undefined" 未经初始化的变量只能执行typeof的操作 显示地初始化变量仍然是明智的选择,这样如果是"undefined"就只说明是有变量没有声明

3.Null类型 Null类型是第二个只有一个值得数据类型，这个特殊得值是null。null表示一个空对象指针，用于显示地初始化变量，这样只要检查null值就可以知道相应地变量是否已经保存了一个对象地引用： if(car != null){ } 实际上，undefined值派生自null值，因此： alert(null == undefined); // true 尽管他们有这样地关系，但用途完全不同。 4.布尔类型 只有两个值:true/false
如何把其它数据类型转换为布尔类型？

  • Boolean
  • !
  • !!
Boolean(1)  =>true
Boolean(0)  =>true
Boolean(NaN)  => false

!'我爱喝奶茶'   =>先把其它数据类型转换为布尔类型，然后取反
!!null  =>取两次反，等价于没取反，也就剩下转换为布尔类型了，一般项目中常用这个

规律：**在JS中只有0/NaN/空字符串/null/undefined这五个值转换为布尔类型为false，其余都为true**

null&&undefined 都代表空，null:空对象指针，undefined:未定义 null：一般都是意料之中的没有，一般是人为手动的先赋值为null，后面的程序中我们会再赋值 undefined：一般都不是认为手动控制的，大部分都是浏览器自主为空

var num; //此时变量的值就是浏览器给分配的

#引用数据类型

##object对象数据类型

普通对象

  • 由大括号包裹起来
  • 由零到多组属性名和属性值（键值对）组成
var obj = {
    name: '我爱喝奶茶',
    age: 9
};

[获取]
obj.name
obj['name']  

[增/改]
var obj1 = {name: 'xxx'}
var obj2 = {name: 'xxx'}  //JS对象中属性名是不允许重复的，是唯一的。改就是直接赋值完事了

[删]
彻底删除,对象中不存在这个属性了
delete obj['age'] or delete obj.age

假删除：并没有移除这个属性，只是让当前属性的值为空
obj.sex = null;

思考题：

var obj = {
    name: '我爱喝奶茶',
    age: 9
};
var name = "zhufeng";

obj.name
obj["name"]
obj[name]
那这里的"name"和name的区别是什么？
"name"是一个字符串值，name是一个变量  =>obj["zhufeng"]  没有这个属性，属性值是undefined

一个对象中的属性名不仅仅是字符串格式的，还有可能是数字格式的,如果是这两个以外的其它格式，浏览器先转换为字符串

var obj = {
    name: "我爱喝奶茶",
    0: 100
};
obj[0] =>100
obj['0'] =>100
obj.0  //错误

obj[{}] = 300; //先把({}).toString()后的结果作为对象的属性名存储进来  obj['[object Object]'] = 300

obj[{}]  =>获取的时候也是先把对象转换为字符串'[object Object]', 然后获取之前存储的300

var ary = [12,23];
0: 12
1: 13
length: 2
属性名可以为数字，把数字属性名称为当前对象的索引,数组也是对象，遵循对象的规则
ary[0]
ary['0']
ary.0不行
ary.length =>2
ary.['length']  =>2

数组和对象的关系：数组是对象的一种，对象有的数组也有，数组是特殊的对象，属性名是数字。

#JS中的判断操作语句 1.if/else if/ else

var num = 12;
if(num>10)
{
    num++;
}else if(num>=0 && num<=10)
{
    num--;
}else
{
    num+=2;
}
console.log(num);
只要有一个条件成立，后面不管是否还有成立的条件，都不再判断执行了

关于条件可以怎么写？ 不管再条件判断中写什么，最后总要把其计算出true/falsel来判断条件是否成立

##typeof 在JS中用来检测数据类型的方式之一,还有：

  • instanceof
  • constructor
  • Object.prototype.toString.call()
typeof 12
typeof []
typeof {}
typeof '我爱喝奶茶'
返回值：返回一个字符串，其中包含着数据类型，如："number", "string","boolean","undefined"
typeof null =>"object" 因为null代表空对象指针（没有指向任何的内存空间）

BAT面试题：
var num = parseInt('width:33.5px');
if(num == 35.5)
{
    alert(0);
}else if(num==35)
{
    alert(1);
}else if(num == NaN)
{
    alert(2);
}else if(typeof num == 'number')
{
    alert(3);  //alert输出的都是字符串格式的'3'
}else
{
    alert(4);
}

typeof操作符的操作数可以是变量，也可以是数值字面量。typeof是一个操作符而不是函数，尽管圆括号可以使用但不必须。 ##三元运算符

语法：条件？成立做的事：不成立做的事；

var num = 12;
if(num>10)
{
    num++;
}else
{
    num--;
}
//改写成三元运算符
num>10?num++:num--;
如果某一部分不需要做任何处理，使用null/undefined/void 0 占位即可，但什么都不写会报错

'10' == 10 //如果等号左右两边的类型不一样，首先会转换为一样的数据类型，然后再进行比较 '10' === 10 绝对比较，数据类型和值都一样才相等

#循环语句 1.for循环 continue 跳出当前循环，循环体中后面代码不再执行，执行下轮循环 break: 结束整个循环，后面的代码不再执行

avatar
文章
阅读
粉丝