JavaScript 简介

97次阅读

共计 2189 个字符,预计需要花费 6 分钟才能阅读完成。

JavaScript 简介

一般来说,完整的 JavaScript 包括以下几个部分:

ECMAScript,描述了该语言的语法和基本对象;
文档对象模型(DOM),描述处理网页内容的方法和接口;
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

本文(系列)主要探讨 ECMAScript 的特性和应用,因为平时交流习惯用 JavaScript,后面都用 JavaScript 代替,实际上 JavaScript 是 ECMAScript 标准的实现和扩展。

JavaScript 是一门多范式的动态语言,包含类型、运算符、标准的内置对象和方法。关于 JavaScript 的设计思路,阮一峰老师是这么总结的:

借鉴 C 语言的基本语法;
借鉴 Java 语言的数据类型和内存管理;
借鉴 Scheme 语言,将函数提升到 ” 第一等公民 ”(first class)的地位;
借鉴 Self 语言,使用基于原型(prototype)的继承机制。

综合各家所长,发展出了一门多范式的动态语言:

多范式:支持命令式编程(流程控制语句)、支持函数式编程(函数是一等公民)、支持面向对象编程(原型扩展);

动态:

弱类型,使用 var 声明变量;
对象属性任意扩展;
解释执行语言,代码不进行预编译(浏览器端)。

JavaScript 发展历程

1995 年创建——Brendan Eich(Netscape 工程师);
1996 年首次发布——在 Netscape 2 上,当时被称为 LiveScript,因为和 sun 合作,搭上 Java 这个编程语言“热词”,重命名为“JavaScript”;
1997 年设立标准——ECMA 以 JavaScript 语言为基础制定了 ECMAScript 标准规范 ECMA-262;
1999 年发布第 3 版;
2009 年发布第 5 版(ES5);
2015 年发布第 6 版(ES6/ES2015);
2016 年发布第 7 版(ES7/ES2016);
2017 年发布第 7 版(ES8/ES2017);
2018 年发布第 7 版(ES9/ES2018)。

多了个年份的叫法,不查资料都搞不清哪来这么多标准。更多请查阅 ecma-262 或者维基百科 -ECMAScript。是不是有点奇怪,为啥没有 ES4 呢,因为 ES4 夭折了~~ 据说是 BE 大佬步子迈太大,组织上没同意,想简单了解的童鞋可以看下知乎上尤大的回答
JavaScript 语言特性
弱类型
JavaScript 使用 var、let、const 关键字来进行变量声明,除了 const 声明一个只读常量外,其他两种方式并不确定变量的类型:
var a=1
a={
name:’jack’
}
a=’lucy’
在 Java 强类型语言中必须这么写:
int a;
String b;
优点:
可以写出非常简洁的代码。
缺点:

写法随意,在没有良好编程规范的情况下写出来的可能是个雷区;

无法预检查。例如下面的函数,期望是数值,传入数值型字符串不会报错,返回的不是预期值从而导致 bug:
function add(a,b){
return a+b;
}
// 期望,return 3
add(1,2)
//bug,return ’12’
add(‘1′,2)

弱类型的缺点容易导致 bug,降低开发效率。开发建议:

变量声明表意清楚唯一;
写好 JSDoc 文档,函数的参数要求、返回值;
使用 TypeScript 等严格超集 阮一峰——强类型 JavaScript 的解决方案。

对象属性任意扩展
强类型语言 对象结构在声明时已经确定好,添加字段需要修改声明,JavaScript 的对象声明简单,扩展容易,写起来更轻松自由。
var cat={};
cat.name=’mimi’;
cat.age=1;
优点:
写起来方便;
var list=[];
$.ajax({

onSuccess(res){
list=res.data;
}
})
缺点:
不方便管理,使用不安全。
开发建议:

关键字段在声明时定义清楚;
不随意增删对象属性。

支持面向对象编程
JavaScript 中一切都是对象。
// ‘1’
1[‘toString’]()
而且对象的继承实现简单:

Javascript 面向对象编程(一):封装
Javascript 面向对象编程(二):构造函数的继承
Javascript 面向对象编程(三):非构造函数的继承

开发建议:
方式有很多种、使用 prototype 模式或者其他浅显易懂的方式来实现:
function Cat(name,color){
this.name = name;
this.color = color;
}

Cat.prototype.type = “ 猫科动物 ”;
Cat.prototype.eat = function(){alert(“ 吃老鼠 ”)};
支持函数式编程
安利一个系列 JavaScript 函数式编程(一)——佯真愚
总结

JavaScript 写法没有那么多的约束,入门简单;
JavaScript 灵活支持多种开发范式,能够适应多种开发要求。

软件开发是给工程性的活动,需要遵循原则,保障代码易用性,可阅读性。合理的利用 JavaScript 的特性,通过约束和规范高效的进行软件开发。
参考链接
MDN:A re-introduction to JavaScript (JS tutorial) 阮一峰老师:Javascript 诞生记云栖社区:《JavaScript 核心概念及实践》——1.2 JavaScript 语言特性维基百科:JavaScript、ECMAScript

正文完
 0

Javascript 简介

97次阅读

共计 7725 个字符,预计需要花费 20 分钟才能阅读完成。

Javascript 简介
JavaScript 是一种运行在浏览器中的解释型的编程语言:将文本格式的字符代码发送给浏览器由浏览器解释运行。
JavaScript 组成

核心(ECMAScript),定义 javascript 的语法标准
浏览器对象模型(BOM)Browse Object Model:提供与浏览器交互的方法和接

口(API)
文档对象模型(DOM)Document Object Model:提供访问和操作网页 HTML 内
容的方法和接口
注意:接口 API 指的是编程接口,英文全称是 Application ProgrammingInterface
在 HTML 中嵌入 JavaScript 脚本
JavaScript 代码可以直接嵌在网页的任何地方,必需使用 <script> 标签将 JavaScript 嵌入到 HTML 文档,才能被浏览器解释和执行。
JavaScript 脚本嵌入到 HTML 文档中方法:
1. 通过 <script> 标签嵌入
<head>
<script type=”text/javascript”>
document.write(“ 这是通过 script 标签嵌入的代码 ”);
</script>
</head>
2. 引入外部脚本;
可以在同一个页面中引入多个.js 文件,浏览器按照顺序依次执行
<head>
<script src=”js/demo1.js”></script>
<script src=”js/demo2.js”></script>
</head>
script 标签的 src 表示要引入的外部文件,type 表示脚本语言的类型(现代浏览器默认 type=”text/javascript”),所以 script 标签可以不写 type
语法基础
注释
注释是给开发人员看到,JavaScript 引擎会自动忽略。行注释:
// 这是一行注释
块注释: 块注释是用 /…/ 把多行字符包裹起来,把一大“块”视为一个注释
/*
块注释
块注释
*/
文档注释:
/*
* 文档注释
* 文档注释
*/
标识符和命名规范
标识符就是一个名字。在 javascript 中,标识符常用于定义变量名和函数名等。
命名规范:1. 在 javascript 中,标识符由字母, 下划线_和美元符 $,数字组成 2. 标识符不能以数字开头 3. 标识符区分大小写:age 和 Age 是不同的标识符,不建议代码里出现用大小写区分不同的标识符 4. 变量名或者函数名的标识符不能使用关键字或保留字。5. 命名尽量遵守驼峰原则:personInfo,personName,personAge,
关键字:
break case catch continue default delete do else finally
for function if in instanceof new return switch this
throw try typeof var void while with

保留字:
abstract enum int short boolean export interface
static byte extends long super char final native
synchronized class float package throws const goto
private transient debugger implements protected
volatile double import public

语句
语句指的是程序执行行为的单元,每个语句以分号 ’;’ 结束。语句结束的分号可以不写,浏览器解析会自动添加,但建议都加上。
下面是一个完整的赋值语句:
var x = 1;

var y = 1; var sum= 2; // 不建议一行写多个语句!,不美观
语句块
块由左花括号开始,由右花括号结束 {…}。块的作用是使语句序列一起执行。语句块是一组语句的集合。例如下面 {…} 中的所有语句组成语句块。
var x=10;
var y=20;
var sum=0;
{x=x+5;
y=y+10;
sum=x+y;
}
声明
用关键字 var(variable)声明一个变量或常量(用于存储数据的容器)
例如:var x; // 声明一个变量, 变量名为 x
var x,y; // 可以一次声明多个变量,变量名用逗号分隔;
常量
常量名习惯用大写字母表示常量的值不会通过再赋值改变,也不会再次声明, 通常在初始化的时候被赋值。
var SEX=’ 男 ’;
变量
变量就是可以改变的量,变量的值会通过再赋值改变,也可以再次声明和赋值。
例如:
// 先声明,后赋值
var x;
x=1;

// 声明的同时进行赋值
var x=2;

// 同时声明多个变量用逗号(,)分开
var x,y,s;
x=1;
y=2;
s=3;
// 同时声明和赋值多个变量,用逗号(,)分开
var x=1,y=2,s=3;
表达式
表达式是 javascript 中的一个短语,表达式指的是可用于计算的式子,即可能产生一个值的式子。变量名也是一种简单的表达式,它的值就是赋值给变量的值。复杂的表达式由简单表达式和运算符组成。
例如:
var x=15; // 表达式 x 的值是 15
var y=20; // 表达式的值是 20
var sum=x+y; // 表达式 x + y 的值的 35
数据类型
编程语言最基本的特性就是能够支持多种数据类型
数据类型分类
Number:数字(整数 int,浮点数 float)
String:字符串
Boolean: 布尔类型
特殊数据类型 Null、Undefined
Object:对象
Array:数组对象
Function:函数对象
typeof 操作符返回数据类型:
typeof 操作符:
用来检测变量的数据类型, 对于值或变量使用 typeof 操作符会返回
如下字符串:
1.Undefined 数据类型的值为:
var a; console.log(typeof a); //undefined 未定义
2.Boolean 数据类型的值为:
var a=true; console.log(typeof a); //boolean 布尔值
3.String 数据类型的值为:
var a=’hello world’; console.log(typeof a); //string 字符串
4.Number 数据类型的值为:
var a=1314; console.log(typeof a); //number 数字
5.Object 数据类型的值为:
var a=null; console.log(typeof a); //object null
var b={}; console.log(typeof b); //object 对象
6.Function 数据类型的值为:
var a=function () {}; console.log(typeof a); //function 函数
Number
Number 数字类型包含两种数值:整型和浮点型合法的数字类型 Number 类型:整型:
var b = 100;
console.log(b);
console.log(typeof b);
浮点类型: 就是该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字
var b = 3.8;
var b = 0.8;
var b = .8; // 有效,但不推荐此写法
由于保存浮点数值需要的内存空间比整型数值大两倍,因此 ECMAScript 会自动将可以 转换为整型的浮点数值转成为整型。
var a = 8. ; console.log(a); // 小数点后面没有值,转换为 8
var b = 12.0 ; console.log(b); // 小数点后面是 0,转成为 12
对于那些过大或过小的数值,可以用科学技术法来表示(e 表示法)。用 e 表示 该数值的前面 10 的指数次幂。
var box = 4.12e9 ; // 即 4120000000
var box = 0.000000124; // 即 1.24e-7
浮点数值的范围在:Number.MIN_VALUE ~ Number.MAX_VALUE 之间, 如果 数值超过了 JavaScript 的 Number 所能表示的最大值或最小值,那么就先出现 Infinity(正无穷)或 -Infinity(负无穷)。
var num=12/0 // Infinity
var num=-12/0 // -Infinity
NaN, 即非数值 (Not a Number) 是一个特殊的值 , 当无法计算结果时用 NaN 表示
var b = 0/0 ; //NaN
ECMAScript 提供了 isNaN()函数,用来判断这个值到底是不是 NaN。如果是返回 true,如果不是返回 false
console.log(isNaN(NaN)); //true
console.log(isNaN(25)); //false,25 是一个数值
console.log(isNaN(’25’)); //false,’25’ 是一个字符串数值,可以转成数值
console.log(isNaN(‘Lee’)); //true,’Lee’ 不能转换为数值
console.log(isNaN(true)); //false true 可以转成成 1
数值的转换
1.parseInt() 是把 string 类型或 number 类型的数据转换为整型
parseInt(“10.898797”); // 返回 10
parseInt(10.898797); // 返回 10

2.parseFloat() 是把 string 类型或 number 类型的数据转换为浮点型(小数)
parseFloat(“10.898797”); // 返回 10.898797
parseFloat(“10.898797″); // 返回 10.898797

3.Number.toFixed(x) 把数字转换为字符串,返回数据小数点后有 x 位数字
var num = 5.56789;
var n=num.toFixed(2); //”5.57″ 四舍五入

4.Number.toPrecision(x) 把数字转换为字符串, 返回数据长度为 x
var num = 13.3714;
var n=num.toPrecision(3); //”13.4″ 四舍五入

5.Math.round 四舍五入
Math.round(3.15) //3
Math.round(3.65) //4

6.Math.ceil 向上取整
Math.ceil(3.15) //4
Math.ceil(3.65) //4

7.Math.floor 向下取整
Math.floor(3.15) //3
Math.floor(3.65) //3

String
String 字符串类型, 表示一串字符, 可以由双引号(” “)和单引号(’ ‘)表示。
var str=”hello” ;
var str=’world’ ;
请注意,” 或 ”” 本身只是一种表示方式,不是字符串的一部分,因此,字符串 ’hello’ 只有 h,e,l,l,o 这 5 个字符。
Boolean
Boolean 布尔类型只有两个值:true(真)和 false(假)。而 true 一般等于 1,false 一般等于 0。JavaScript 是区分大小写的,True 和 False 或者其他都不是 Boolean 类型的值。
var flag=true;
console.log(typeof flag); //boolean
可以使用转型函数 Boolean(), 将一个值转换为其对应的 Boolean 值
var a = ‘Hello World!’;
var b = Boolean(a);
console.log(typeof b);
Boolean 类型的转换规则: (牢记)
String: 非空字符串为 true 空字符串为 false
Number: 非 0 数值为 true 0 或者 NaN 为 false
Object: 对象不为 null 则为 true null 为 false
Undefined : undefined 为 false
Undefined
Undefined 类型的值只有一个,就是 undefined。当一个变量被声明,但未被赋值时,它的值就是 undefined, 代表未定义。
var num;
console.log(typeof num); //undefined
// 注意: 我们在定义变量的时候,尽可能的不要只声明,不赋值, 而是声明的同 时初始化一个值。
Null
Null 类型的值只有一个,就是 null。null 表示一个空的对象。typeof 操作符检测 null 会返回 object。
var b = null; console.log(typeof b); //object
undefined 是派生自 null 的,因此 ECMA-­262 规定对它们的相等性测试返回 true, 表示值相等。
console.log(undefined == null); //true
但是两者的数据类型是不一样的
var b ; var car = null;
console.log(typeof b== typeof car) //false
如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为 null 而不是其他值。
var obj=null;
obj={}
对象
JavaScript 自定义对象对象是用花括号分隔, 由一组由键 (属性名)- 值(属性值) 组成的无序集合,属性由逗号分隔,例如:
var obj = {
name: ‘jack’,
age: 18
};
JavaScript 对象的键 (属性名) 和值 (属性值) 组成。属性名是一个有效的变量名,可以通过. 操作符来访问属性。如果属性名包含特殊字符,就必须用 ” 或者 ”” 括起来,访问这个属性也无法使用. 操作符,必须用 [‘xxx’] 或者 [“xxx”] 来访问。
属性值可以是任意的数据类型。
访问对象属性的两种方式
var name=obj.name;
var age=obj[‘age’];
数组
数组:多个数据元素按一定顺序排列的集合数组用 [] 表示,元素之间用 ’,’ 分隔
var array=[1, 1.5,’Hello’, null, true]; // 数组可以包括任意数据类型。
访问数组
通过下标索引来获取和设置数组某个特定的元素。访问数组的元素可以通过索引来访问,索引的起始值为 0:
console.log(array[0]) ;
console.log(array[1]) ;
函数
函数定义方法: 函数由关键字 ’function’,和函数名 ’functionname’, 和括号以及花括号组成:
function functionname (参数 1, 参数 2) {
// 这里写函数执行的代码
}

function:关键字 function 来声明函数。
functionname:函数名称
(参数 1, 参数 2):(可选)括号内列出函数的参数,多个参数以 ’,’ 分隔
{…}: 花括号之间的代码是函数体,由若干语句组成。
函数的实例和调用:
function add(x,y){
var sum=x+y;
return sum;
}

// var result=add(2,3);
// alert(result);
alert(add(2,3));

注意:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数

函数体语句执行到 return 时,函数就执行完毕,并将结果返回。
如果没有 return 语句,函数执行完毕后也会返回结果,只是结果为 undefined。
JavaScript 是弱类型的语言,拥有动态类型,同一个变量可以赋予不同类型的值。变量的类型在赋值时才能确定
var b;
b=20;
b = “ 张三 ”;
b={};
b=[];
b=function(){};
console.log(typeof b);
运算符

算术运算符
+ 加法 x=2+3 5
– 减法 x=5-3 2

/ 除法 x=5/2 2.5 % 求余 x=5 %2 1 ++ 自增 var x=3; x++; console.log(x) — 自减 var x=3; x–; console.log(x)
前自加:var x=5; var num1=++x; // 相当于 x =x+1; var num1=x; console.log(‘num1=’+num1+’ x=’+x); //num1=6 x=6
后自加: var x=5; var num2=x++; // 相当于 var num2=x; x=x+1; console.log(‘num2=’+num2+’ x=’+x); //num2=5 x=6
前自减:var x=5; var num3=–x; // 相当于 x=x-1; var num3=x; console.log(‘num3=’+num3+’ x=’+x); //num3=4 x=4
后自减 var x=5; var num4=x–; // 相当于 var num4=x; x=x-1; console.log(‘num4=’+num4+’ x=’+x); //num4=5 x=4

– 字符串 ’+’ 遇到字符串,用来连接字符串
// 两个都是字符串, 直接连接两个字符串 var result1=’hello’+’world’; console.log(result1); //helloworldconsole.log(typeof result1);
// 如果其中有一个是字符串, 另一个是其他类型, 则会先将其他的类型强制转换成字符, 然后再连接 var result2=’hello’+2; console.log(result2); //hello2console.log(typeof result2);

#### 二进制, 八进制, 十进制, 十六进制(扩展)
进制:
在计算机处理器内部只认识二进制, 在内存存储的数据其实就是大量的开关, 每个开关,可以存储一个 1 或 0,称为一位(1bit),每八位称为 1 字节(1byte)

1byte = 8 位 1KB = 1024byte 1MB = 1024KB1GB = 1024MB1TB = 1024GB..1PB, 1EB1 位 : 是二进制的 0 或者 1

例如: 十进制的 23 在内存中存储的是二进制 10111 23 -­> 10111
00000000 00000000 00000000 00010111(内存中存储的 23)

** 进制:**
二进制: 0, 1 (0~1)八进制: 0, 1, 2, 3, 4, 5, 6, 7 (0~7)十进制: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 (0~9)十六进制: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (0~15)

> 常用值: 2 的次方 2^2 = 4
2^3 = 8
2^4 = 16
2^5 = 32
2^6 = 64
2^7 = 128
2^8 = 256
2^9 = 512
2^10 = 1024
2^11 = 2048

** 进制转换:**
2 进制 :101011
转 10 进制: (从右往左)1*2^0 + 1*2^1 + 0*2^2 + 1*2^3 +0*2^4 + 1*2^5 = 1+2+0+8+0+32 = 43
转 8 进制: (从右往左 3 个一组 101 011): 1*2^0+0+1*2^2 1*2^0+1*2^1+0 = 53
转 16 进制: (从右往左 4 个一组 0010 1011): 1*2^1 1*2^0+1*2^1+0+1*2^3 = 2B

10 进制: 43
转 2 进制: 32+8+2+1 = 101011
转 8 进制: 40+3 = 53
转 16 进制: 32+11 = 2B

** 其他的方法:**
![‘ 转 2 进制 ’](img/j1.jpg ‘ 转 2 进制 ’)
![‘ 转 8 进制 ’](img/j3.jpg ‘ 转 8 进制 ’)
![‘ 转 16 进制 ’](img/j2.jpg ‘ 转 16 进制 ’)

8 进制: 53
转 10 进制: 3*8^0+5*8^1 = 43

16 进制: 2B
转 10 进制: 11*16^0+2*16^1 = 32+11 = 43

8 进制和 16 进制转非 10 进制, 可以先转换成 10 进制, 再由 10 进制转
8 进制的 53 转 16 进制:
8 进制转 10 进制: 3*8^0+5*8^1 = 43
43 转 16 进制: 32+11 = 2B

正文完
 0