文章目录
一、开始之前
1、JavaScript的简史
1)1992年Nombas开发出C-minus-minus,也叫C–,没错,就是C++的另一个兄弟。它是嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase,是一种客户端执行语言。
2)那个时候有好几个版本的Web编程语言,欧洲计算机制造协会为了统一几家语言,定义了ECMA-262规范。从此,Web 浏览器将 ECMAScript 作为 JavaScript 实现的基础。
3)Javascript 是Angularjs、Vue 等技术的基础,它是一门相当完善的编程语言,能够写前端也可以写后端,只是用作前端开发比较多
2、JavaScript的组成
尽管 ECMAScript 是一个重要的标准,但完整的JavaScript其实有三大部分组成:
- 核心(ECMAScript)
- 文档对象模型(DOM) Document object model (整合js,css,html)
- 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
顺便提一下,JavaScript的基于对象的编程语言,属于面向对象的一种特殊情况,JavaScript本身提供了很多我们可以直接使用的对象。
3、JavaScript的引入方式
1)直接引入
<script>
alert("hello JS");
</script>
2)导入js文件
<script src="test.js"></script>
4、注意:
<script>标签一般放在<body>标签内,也可以放在与<body>和<head>标签同级
JavaScript使用来注释/* */ //
使用{}来封装代码块
每个语句结束后可加‘;’号,也可不加分号
二、数据类型
1、变量
1)概念:
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景,因此在ES6中用let和const来解决这个问题。
- 直接定义:全局变量
- 带var:只有全局作用域和函数作用域概念,没有块级作用域的概念。但是会把{}内也假称为块作用域
- 带let:只有块级作用域的概念 ,由 { } 包括起来,if语句和for语句里面的{ }也属于块级作用域。
//整个for循环是父级作用域,循环体内是另一个{}块级作用域
for( let i = 0 ; i < 3 ; i++ )
{
let i = 'hello'; //用var替代let会报错提示已经定义,若没有任何关键字则每次赋值给i,最后只会输出一次abc
console.log(i); // 输出3次abc
}
2)var和let的区别:
第一,就是var是全局作用域和函数作用域概念,而let是块级作用域概念;
第二,let在变量声明之前就访问变量的话,会直接提示 ReferenceError,而不像 var 那样使用默认值 undefined;
第三, var 存在变量提升,而 let,const(后面会提及)声明的变量却不存在变量提升,所以用 let 定义的变量一定要在声明后再使用,否则会报错。
3)暂时性死区(TDZ):
var a = 99;
if(ture)
{
console.log(a); //ReferrenceError
let a = 66;
}
因为let所声明的变量会锁在它所在的作用域里,不允许访问。意思就是,它会先扫描一遍,把let声明的变量保存起来,但是不允许使用,这时候你访问a,由于此作用域中有a,就不用访问外面的a了,但是你不能在它声明之前访问它。
也就是说,var变量可以多次声明,而let不允许在相同作用域内重复声明。
<script>
if (true) {
let a;
let a; // Uncaught SyntaxError: Identifier 'a' has already been declared
}
if(true){
var d;
var d; //不会报错
}
if (true) {
var c;
let c; // Uncaught SyntaxError: Identifier 'c' has already been declared
}
if (true) {
let d;
var d; // Uncaught SyntaxError: Identifier 'd' has already been declared
}
</script>
4)const常量:
const常量与let的作用域是一样的,都是块级作用域。
const 一旦被赋值,就不能再改变,但这并不意味着使用 const 声明的变量本身不可变,只是说它不可被再次赋值,因此const 声明的变量必须经过初始化(定义时就赋值)。
//会报错,Uncaught ReferenceError: ture is not defined
// const zoroo;
// zoroo="ok";
// console.log(zoroo);
//正确定义
const zoroo="ok";
console.log(zoroo);
2、数字类型(number)
1)概念
- 最基本的数据类型;
- 不区分整型数值和浮点型数值;
- 所有数字都采用64位浮点格式存储,相当于Java和C语言中的double格式;
2)NaN表示Not a number,非数字类型
//NaN表示Not a number,非数字类型
console.log(parseInt("hello"));
console.log(parseInt("123hello"));
console.log(parseInt(3.1415926));
3、字符串类型(string)
- 是由Unicode字符、数字、标点符号组成的序列;
- JavaScript中没有字符类型
- 常用特殊字符在字符串中的表达:
字符串中部分特殊字符必须加上右划线
常用的转义字符 \n:换行 ':单引号 ":双引号 \:右划线
以上几条都是字符串类型的几个基础点,在后文介绍“字符串对象”时还有关于字符串更多的用法
4、布尔型、Null和Undefined
1)布尔型
Boolean类型仅有两个值:true和false,也代表1和0,实际运算中true=1,false=0
2)undefined型
Undefined 型只有一个值,即 undefined;
当声明的变量未初始化时,该变量的默认值是 undefined;
当函数无明确返回值时,返回的也是值 “undefined”。
3)Null型
Null型只有一个专用值 null,即它的字面量;
值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的;
尽管这两个值相等,但它们的含义不同:undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象(在讨论 typeof 运算符时,简单地介绍过这一点);
如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。
5、数据类型转换
1)概念:
JavaScript属于松散类型的程序语言,变量在声明的时候并不需要指定数据类型;
变量只有在赋值的时候才会确定数据类型;
表达式中包含不同类型数据则在计算过程中会强制进行类别转换;
- 数字 + 字符串:数字转换为字符串
- 数字 + 布尔值:true转换为1,false转换为0
- 字符串 + 布尔值:布尔值转换为字符串true或false
console.log("hello"+2);
console.log("hello"+true);
console.log(2+true);
2)强制数据类型转换
- parseInt函数: 强制转换成整数 例如
parseInt("3.1415926")=3 ; parseInt(“12a")=12 ;
- parseFloat函数: 强制转换成浮点数
parseFloat("123.456")=123.456
- eval函数:将字符串强制转换为表达式并返回结果
console.log(eval("1+1"))
结果是2;
console.log(eval("5+6"));
会默认转化成数字,结果是11
三、运算符
1、基本概念
- 加(+)、 减(-)、 乘(*) 、除(/) 、余数(% )
- -号除了可以表示减号还可以表示负号 例如:x=-y
- +号除了可以表示加法运算还可以用于字符串的连接 例如:“abc”+“def”=“abcdef”
2、 递增(++) 与递减(–)
let i=10, j=20;
console.log(i++)
console.log(++i)
console.log(j--)
console.log(--j)
结果是:
3、逻辑运算符
-
等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < )
-
大于等于(>=) 、小于等于(<=)
-
与 (&&) 、或(||) 、非(!)
let a=NaN;
console.log(a==NaN);
console.log(a!=NaN);
console.log(2==2);
console.log(2=="2");
console.log("3">"20"); //最高位的ASCII码
结果:
四、控制语句
1、if判断语句
这个与其他编程语言没有太大区别,格式如下:
v1="灰太狼";
if(v1=="慢羊羊")
{
alert("老家伙");
}
else if(v1=="灰太狼")
{
alert("狼族统治");
}
else
{
alert("新任村长")
}
2、switch选择控制
这个与C语言中的switch用法几乎是一样的,格式如下:
v2=52;
switch(v2)
{
case 13:alert("一生");break;
case 14:alert("一世");break;
case 520:alert("五二零");break;
default:alert("啥也不是");
}
3、for循环
JavaScript里的for循环也是和C语言、Java的几乎相同:
let v3;
for(v3=0;v3<10;v3++)
{
// alert("v3当前的值为:"+v3);
document.write("<br>v3当前的值为:"+v3);
}
这里的documents.write()表示将信息打印到页面内,结果如下:
4、while循环
可以说是for循环的基础版,for循环有三个参数,第一个是定义的值,第二个判断条件,第三个是每循环一次进行的值操作。
在while循环内,没有第一个和第三个参数。
var i=1;
while (i<=7)
{
document.write("<H"+i+">JavaScript</H "+i+"> ");
document.write("<br>");
i++;
}
以上代码实现的是循环输出H1到H7字体大小:
5、异常处理
- try:正常进行的部分
- catch:出现异常才会执行的部分
- finally:无论如何都会执行的部分
try
{
console.log("正常执行!");
//自行抛出一个异常
throw Error("自定义异常!");
}
catch(e)
{
console.log("出现异常!"+e);
}
finally
{
console.log("终将执行的语句!");
}
五、ECMA对象
1、对象须知
- object对象:ECMAScript 中的所有对象都由这个对象继承而来;Object 对象中的所有属性和方法都会出现在其他对象中
- 11种内置对象:Array ,String , Date, Math, Boolean, Number Function,
Global, Error, RegExp , Object - 在JavaScript可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是通过对象实现的
2、string对象
1)创建字符串的两种方式
一是直接创建字符串,而是用string对象来创建字符串
str1="Hello一号"; //字符串方式
str2=new String("Hello二号"); //字符串对象方式
console.log(typeof str1);
console.log(typeof str2);
console.log(str1.length); //统计长度的属性
2)字符串的常用方法
- 格式编排方法
str1="Hello一号";
console.log(str1.italics()); //斜体
console.log(str1.bold()); //加粗
console.log(str1.anchor()); //变成a标签
- 格式转换
var str1="helLO,JAvascript";
var str2=str1.toLowerCase(); //全部变成小写
var str3=str1.toUpperCase(); //全部变成大写
console.log(str2);
console.log(str3);
- 获取指定字符
var str1="welcome to the world of JS!栀子!";
var str2=str1.charAt(28); //获取28这个索引下的字符
var str3=str1.charCodeAt(28); //获取28这个索引下字符的编码
console.log(str2);
console.log(str3);
- 查询指定字符
var str1="welcome to the world of JS!";
var str2=str1.indexOf("o"); //查询字符o的索引位置
var str3=str1.lastIndexOf("l"); //查询字符l的索引位置
console.log(str2);
console.log(str3);
- 查询字符串
match返回匹配字符串的数组,如果没有匹配则返回null
search返回匹配字符串的首字符位置索引
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
console.log(str2[0]);
console.log(str3);
- 截取字符串
str1="Hello七号";
console.log(str1.substr(1,5)); //从1截取到4
console.log(str1.substring(1,5)); //从1截取到5
console.log(str1.slice(1,5)); //从1切片到5
console.log(str1.slice(-2,7)); //切片位置可以是负数
- 字符串替换
var str1="abcdefgh";
var str2=str1.replace("def","jjjjjj"); //用jjjjjj替换def
console.log(str2);
- 字符串分割
var str1="一,二,三,四,五,六,日";
var str2=str1.split(","); //用,号将字符串分割开
console.log(str2);
- 字符串连接
var str1="abcd";
var str2=str1.concat("efgh"); //在str1后面接上一段
console.log(str2);
3、Array对象
1)一维数组
arr1=[1314,"曾经沧海难为水",{name:"Za huw"}]; //数组内可以放任意元素
arr2=new Array(3); //大小为3的数组对象
arr3=new Array("数组object对象",true,12345); //用Array对象方式创建数组
console.log(arr1);
console.log(arr2);
console.log(arr3);
2)二维数组
cnarr1=new Array(4);
cnarr1[0]=new Array(7);
cnarr1[0][0]="Monday";
cnarr1[0][1]="Tuesday";
cnarr1[0][2]="Wednesday";
cnarr1[0][3]="Thursday";
cnarr1[0][4]="Friday";
cnarr1[0][5]="Saturday";
cnarr1[0][6]="Sunday";
console.log(cnarr1);
第一维的大小为4,索引为0的第二维大小为7
3)数组对象的方法
4)join方法
arr4=new Array("除却","巫山","不是云",11,22,33,4);
console.log(arr4.join("--"));
5)toString方法
vv=new Array(11,22,33,4);
console.log(vv.toString());
console.log(typeof vv.toString())
6)concat方法
vv2= Array(123,4,5);
ret=vv2.concat([678,9,10]);
console.log(ret);
console.log(typeof ret);
7)reverse方法
vv3=[11,22,33,44];
vv4=[5,40,6,1,7];
console.log(vv3.reverse()); //顺序颠倒
8)两种排序
不正经的:
vv4=[5,40,6,1,7];
console.log(vv4.sort());
正经的:
function so(a,b)
{
return a-b;
}
console.log(vv4.sort(so));
9)push入栈与pop出栈
这两种出入栈方式都是先进后出
arr8=[1,2,3];
arr8.push(4,5,6); //入栈,加入到最后面
console.log(arr8);
console.log(arr8.pop()); //出栈,移除最后一个6
10)unshift入栈与shift出栈
arr9=[8,9,10];
arr10=["world"];
arr9.unshift(4,5,6,7); //入栈,加入到最前面
arr10.unshift("hello,"); //入栈
arr9.shift(); //出栈,移除第一个
console.log(arr9);
console.log(arr10);
4、函数对象
1)JS函数概念
- 可以使用变量、常量或表达式作为函数调用的参数
- 函数由关键字function定义
- js的函数加载执行与python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以
2)两种定义方式
- 复杂版
obj=new Function("name","console.log(\"哈哈哈\"+name)");
obj("平底锅!");
- 常用版
function add(x,y,z)
{
return x+y+z;
}
console.log(add(1,2,3,4,5)); //数字多了不会报错,只会取前三个
console.log(add("两情若是长久时,","又岂在","朝朝暮暮。")); //字符串也能相加
3)不限参数个数的函数
function add()
{
sum=0;
for(i=0;i<arguments.length;i++)
{
sum+=arguments[i];
}
return sum;
}
console.log(add(1,2,3,4,5,6,7,8,9,10));
4)匿名函数
说白了就是没有名字的函数,也叫自执行函数;
好处就是简便;
缺点就是易读性差
(function(arv){alert(arv);})("欢迎访问!");
这里表示的就是一个没有名字的函数,执行内容在{}内,形参参数是arv;
调用函数时传入的参数是“欢迎访问”
最终结果:
一篇文章当然不太可能完全囊括所有知识点的,但是我所提供的都是常用并且学习JavaScript必须掌握的重点,学会这些知识点,一定是可以达到入门级别的,同时感谢大家的阅读。
这是本人写的第一篇文字过万的文章,也的确是花了好几个小时来测试代码,然后将知识点总结起来,最后就是在博客里码字了。从下午一直做到了凌晨,当然本人的知识也有限,如有错误请各位进步者指出,不必手下留情。