javascript
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。
**作用:**验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。
javascript的组成:
- ECMAScript javascript的核心语法
- BOM 浏览器对象模型
- DOM 文档对象模型
使用方式:
JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。
- 行内JS: 写在标签内部的的js代码
- 内部JS:定义在script标签内部的js代码
- 外部JS:单独的js文件,在HTML中通过script标签引入
js代码在HTML页面中的位置:
可以使用在HTML页面中的任何位置
- 推荐只用在head 标签中,便于后期维护,
- 使用在body结束之前:保证再执行js代码的时候,页面中所有的内容都加载完成之后执行,如果要在head中配合window.onload一起使用
js中的标识符
标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范
规则：由Unicode字母、_、$、数字组成、中文组成
- 不能以数字开头
- 不能是关键字和保留字
- 严格区分大小写
规范：
- 见名知意
- 驼峰命名或下划线规则
js中的变量
在js中使用var关键字定义变量
格式: var 变量名 = 赋值;
声明的同时赋值,先声明后赋值
js是动态语言,声明变量的时候,类型由赋值决定变量的数据类型
注意:
-
可以同时打印多个变量的值
-
var a=5; var b=6; console.log(a,b);
-
-
可以同时声明多个变量
-
var a=10,b=5;
-
-
变量的声明可以省略var
变量的分类:
- 全局变量: 没在函数内定义的变量就是全局变量
- 局部变量: 函数中定义的变量为局部变量
变量的作用域提升:
- 变量的作用域提升的前提是使用var关键字声明的变量,才有作用域提升的问题
- 只提升变量的声明,提升到当前作用域的最上面
- 变量不赋值,存在默认值: undefined
JS中的数据类型
JavaScript 中有6 种数据类型，其中有五种简单的数据类型：undefined、Null,布尔数值和字符串。一种复杂数据类型Object。
| 数据类型 | 说明 |
|---|---|
| 数值(Number) | 数字和小数 |
| 字符串(String) | 字符组成的文本 |
| 布尔值(Boolean) | true和false 两个特定的值 |
| undefined | 表示"未定义"或不存在,即此处目前没有任何值 |
| Null | 表示空缺,即此处应该有一个值,但目前为空 |
复合数据类型:
- 一切皆对象
- Object 对象类型 {}
- 对象中的内容都是以键值对的形式存在的
- key : value
- 多个键值对之间使用逗号进行分隔
- 最后一个键值对后面不需要添加逗号
- key属性名,满足标识符的命名规范
- key和value其实都是字符串
- key如果满足标识符的命名规范,前后引号可以省略
typeof操作符
typeof操作符是用来检测数据类型。
说明:
- typeof null 返回的是object字符串
- 函数不是数据类型,但是也可以使用typeof操作符返回字符串
typeof 操作符可以操作变量也可以操作字面量
**注意:**函数在JavaScript中是对象,不是数据类型,所以使用typeof区分function和object是有必要的
| 数据类型 | typeof操作后返回的数据类型 |
|---|---|
| undefined | undefined |
| Boolean | boolean |
| String | string |
| Number | number |
| Object{} | object |
| Object null | object |
| Object new | object |
| Function | function |
使用方式:
typeof 数据
typeof (数据)
<script>
console.log(typeof 123);//number
console.log(typeof (function f(){}));//function
console.log(typeof({}));//object
</script>
数据类型的转换
显示类型转换:
- 通过其他方式或函数,手动让数据改变其类型
- js中对象类型不参与类型转换(包括函数)
- 任意类型都可以转换以下三种类型
- String(数据)
- Number(数据)
- Boolean(数据)
隐式类型转换:
-
目的不是为了改变数据的类型,但是执行过程中会隐式改变类型
-
<script> console.log(1+true);//打印结果为2 //Boolean类型true隐式转换为number类型参与运算 </script>
-
运算符
javascript中的运算符和java语言中的运算符相似
算数运算符:
| 运算符 | 描述 | 例子y=5 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数 | x=y%2 | x=1 |
| ++ | 自增（前导加、后导加） | x=++y | x=6 |
赋值和扩展运算符:
| 运算符 | 例子x=10,y=5 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
比较运算符:
| 运算符 | 描述 | 例子x=5 |
|---|---|---|
| == | 等于 | x==8 为 false |
| === | 全等（值和类型） | x=5 为 true；x=“5” 为 false |
| != | 不等于 | x!=8 为 true |
| > | 大于 | x>8 为 false |
| < | 小于 | x<8 为 true |
| >= | 大于或等于 | x>=8 为 false |
| <= | 小于或等于 | x<=8 为 true |
逻辑运算符:
| 运算符 | 描述 | 例子x=5, y=2 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x5 || y5) 为 false |
| ! | not | !(x==y) 为 true |
三目运算符:
| 运算符 | 描述 | 例子 |
|---|---|---|
| ?: | 如果…否则… | 3>5?3:5 |
- 除了有加法运算,还可以当做字符串的连接符
= == === 之间的区别:
- = 赋值
- == 比较数据是否相同
- === 比较数据和类型是否都相等
- 先比较类型,后比值
- ! 非 取反
- !! 不变
- !!! 取反
逻辑运算符: && ||
java中逻辑运算符两边的操作数必须为boolean类型的
js中的逻辑运算符两边的操作数可以都是boolean,也可以有其他的数据参与,如果有, 结果肯定为其中一个操作数
&& 一个为false就是false
第一个操作数转为boolean,为false,结果就为第一个操作数的值,为true,结果就为第二个操作数的值
|| 一个为true就是true
第一个操作数转为boolean,为true,结果就为第一个操作数的值,为false.结果就为第二个操作数的值
块
java中一对{}自成作用域
js中块不是作用域,作用域在js只看函数function
数组:
js中的数组可以存储任意个任意类型的数据,并且长度可变
创建数组的方式:
new Array(); 构建一个空数组
var arr1=new Array();
new Array(数据值1,数据值2...); 创建的同时赋值
var arr2=new Array(1,false,'哈哈',0.5,null,undefined);
[数据值1,数据值2...] 字面值得创建方式--->推荐使用
var arr3=[1.1,2.2,'呵呵',false];
数组有序:索引顺序从0开始
根据索引操作数组,当索引为非0~n的整数,作为数组的自定义属性
数组的遍历方式:
1.普通for
2.for...in
3.foreach
console.log('--------普通for--------');
for(var i=0;i<=arr2.length-1;i++){
console.log(arr[i]);
}
console.log('--------for...in--------');
for(i in arr2){
console.log(arr2[i]);
}
console.log('--------foreach--------');
arr2.forEach(function(value,index){
console.log(""+value);
console.log(""+index);
})
数组中的常用方法
| 方法名 | 说明 |
|---|---|
| push | 增加元素到最后 |
| unshift | 添加元素到最后 |
| pop | 删除最后一列 |
| shift | 删除第一项 |
| reverse | 数组翻转 |
| join | 数组转成字符串 |
| indenOf | 数组元素索引 |
| slice | 截取(切片)数组,原数组不发生变化 |
| splice | 剪切数组,原数组变化,可以实现前后删除效果 |
| concat | 数组合并 |
slice 截取(切片)数组,原数组不发生变化
一个参数 作为起始索引,从参数索引位置开始,截取到最后,返回
两个参数 第一个参数作为起始索引,第二个参数结束索引,结束索引不包含
原数组不发生改变
splice 剪切数组,原数组变化,可以实现前后删除效果
一个参数 作为起始索引,从参数索引位置开始,截取到最后,返回,原数组为截取后剩下的
两个参数 第一个参数作为起始索引,第二个参数作为个数
3~n个参数 从第一个参数位置开始,拿第二个参数个,替换成为第三个参数及以后的数据
函数
函数定义的方式：函数声明语句、函数定义表达式、
函数声明语句:
function 函数名([参数列表]){}
//声明函数
function foo1(){
console.log('foo1');
}
//调用函数
foo1();
调用方式:
1.函数名(实参);
2.转换函数表达式,在最后添加()自执行
在函数声明的前面添加~或!或+或-
在函数声明前后添加()包裹
//函数声明转为函数表达式
~function fun1(){
console.log("我是fun1");
}();
!function fun2(){
console.log("我是fun2");
}();
+function fun3(){
console.log("我是fun3");
}();
-function fun4(){
console.log("我是fun4");
}();
(function fun5(){
console.log("我是fun5");
})();
函数定义表达式
以表达式方式定义的函数，函数的名称是可以不需要的
var 变量名 = function 函数名 ([参数列表]) {}
函数名一般省略,不可以通过函数进行调用,只能通过变量名,函数名可以在函数内部进行递归使用
变量名()
//声明函数
var foo2 = function (){
console.log('foo2');
}
//调用函数
foo2();
调用方式:
1.通过变量名调用 变量名(参数);
2.函数表达式最后添加(),直接执行这个函数,自执行
注意:在函数当中定义参数,参数要省略var关键字
这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式，因为赋值语句的等号右侧只能放表达式。
//函数表达式自执行
var foo2 = function(){
console.log('foo2');
}();
函数的作用域提升:
只有函数声明的方式才有函数作用域的提升,提升到当前作用域的最上面,函数表达式没有.
函数的参数、调用和return语句参数
函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数，定义时的参数称为形参，调用时的参数称为实参。
- 实参可以省略，那么对应形参为undefined
- 若函数形参同名（一般不会这么干），在使用时以最后一个值为准。
- 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
- 参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象。
<script>
//b. 若函数形参同名（一般不会这么干），在使用时以最后一个值为准。
function fn(a,a,a){
console.log(a);// 3
}
fn(1,2,3,4,5);
console.log();
//函数的参数可以定义默认值
function fn2(x='zhangsan',y='lisi'){
console.log(x,y);//1 2
}
fn2(1,2);
// 值传递
var num = 12;
function change(n) {
n = 30;
}
change(12);
console.log('值传递-----' + num);//值传递-----12
// 引用传递
var obj = {
name: "tom"
};
function paramter(o) {
o.name = '2';
}
paramter(obj);
console.log('引用传递-----' + obj.name);//引用传递----2
var obj2 = [1, 2, 3];
function paramter2(o) {
//o = [2, 3, 4]; //指向新数组
o[0] = 3;
}
paramter2(obj2);
console.log('引用传递-----' + obj2); // [1, 2, 3]
</script>
函数的调用方式:
- 常用调用方式：函数名([实参]);
- 存在返回值可以变量接收，若接收无返回值函数则为undefined。
间接调用模式:
javascript中函数也是对象，函数对象也可以包含方法。call()和apply()方法可以用来间接地调用函数。任何函数可以作为任何对象的方法来调用，哪怕这个函数不是那个对象的方法。两个方法都可以指定调用的实参。call()方法使用它自有的实参列表作为函数的实参，apply()方法则要求以数组的形式传入参数。
var obj = {};
function add(a, b) {
return a + b;
}
console.log(add.call(obj, 3, 2));
console.log(add.apply(obj, [3, 2]));
this
this关键字
this动态绑定对象
1.this所在的函数是否通过new调用使用的,如果是则指向当前new的对象
2.this是通过对象.函数名()使用,this指代当前调用的对象
3.this默认指代window,window指代全局对象
定义的全局变量,默认定义window对象的属性
定义全局函数,为window的功能
修改this指向:间接调用,是所有函数都有call和apply方法
call(新的对象,实参列表)
apply(新的对象,参数)
函数就是作用域,js中函数可以随意嵌套
闭包
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 并且还可以避免变量名冲突的问题。
闭包:
- 外函数嵌套函数
- 外函数返回内函数
- 内函数中使用到外函数的资源
<script>
//闭包
function fun(){
var i=1;
return function(){
i++;//内函数中使用了外函数的资源,不会释放外函数的这个资源i
console.log(i);
}
}
var f=fun();
f();//2
f();//3
f();//4
//给花浇水的例子
function haha(ml){
function flower(name){ //要浇水的花的名字
if(ml>=50){
console.log("给"+name+"浇水50ml,"+'当前还剩'+(ml-=50));
}else{
console.log("请加水");
}
}
return flower;
}
var flower=haha(200);
flower("君子兰");
flower("勿忘我");
flower("康乃馨");
flower("玫瑰花");
flower("满天星");
/*
运行结果:
给君子兰浇水50ml,当前还剩150
给勿忘我浇水50ml,当前还剩100
给康乃馨浇水50ml,当前还剩50
给玫瑰花浇水50ml,当前还剩0
请加水
*/
</script>
常用属性:
String
| 方法名 | 说明 |
|---|---|
| charAt(idx) | 返回指定位置处的字符 |
| indexOf(Chr) | 返回指定子字符串的位置，从左到右。找不到返回-1 |
| substr(m,n) | 返回给定字符串中从 m 位置开始，取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。 |
| substring(m,n) | 返回给定字符串中从 m 位置开始，到 n 位置结束，如果参数 n省略，则意味着取到字符串末尾。 |
| toLowerCase() | 将字符串中的字符全部转化成小写。 |
| toUpperCase() | 将字符串中的字符全部转化成大写。 |
| replace(s1, s2) | 替换，将s1替换为s2。 |
length:属性 通过字符串名.length 返回字符串的长度
Math
| 方法名 | 说明 |
|---|---|
| Math.random() | 生成随机数 |
| Math.ceil() | 向上取整 |
| Math.floor() | 向下取整 |
| Math.round() | 四舍五入取整 |
Date
获取日期时间
getFullYear()年, getMonth()月, getDate()日, getDay()周,
getHours()时,getMinutes()分,getSeconds()秒
设置日期时间
setYear(), setMonth(), …
toLoacaleString()
说明:
- getMonth()：得到的值：011（1月12月）
- setMonth()：设置值时0~11
- toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。
JS对象
js中的对象
{}代表对象
键值对形式的内容
键值对之间使用,进行分隔
key:value
key和value内部都是字符串
如果key符合标识符的命名规范,''可以省略
value可以为任意类型的数据
创建对象
1.字面量的创建方式 {}
2.new Object()
使用对象中的内容:
对象.属性
对象['属性名']---->万能
序列化
序列化对象,将对象转为字符串
JSON.stringify(object);
反序列化
反序列化,将一个Json字符串转换为对象
JSON.parse(jsonStr);
<script>
var obj={
name : '韩冲',
age : 18,
gender: 0,
}
{
name:null,
}
//序列化对象
console.log(JSON.stringify(obj));
//反序列化
var o =JSON.parse('{"name":"韩冲","age":18,"gender":0}');
console.log(o);
</script>
来源：CSDN
作者：weixin_45768979
链接：https://blog.csdn.net/weixin_45768979/article/details/103595411