JavaScript 的组成
基本用法
<button onclick="alert('you clicked hered!!!')">click here</button>
<script type="text/javascript" charset="utf-8">
alert('this is inner js code')
</script>
<!-- 在需要使⽤js的html⻚⾯中引⼊ -->
<script src="js/hello.js" type="text/javascript" charset="utf-8">
...
</script>
JavaScript基础语法
语句和注释
标识符和关键字
标识符就是⼀个名字,⽤来给变量和函数进⾏命名,有特定规则和规范
规则:
变量
//先声明,再赋值
var a;
a = 10;
console.log(a);
//声明并赋值
var b = 11;
console.log(b);
//若只声明而没有赋值,则该变量的值为undefined。
var c;
console.log(c);//undefined
//变量要有定义才能使用,若变量未声明就使用,JavaScript会报错,告诉你变量未定义。
//console.log(d);//d is not defined
//可以同时声明多个变量
var q,w,e = 100;
console.log(q,w,e);
var q;
var w;
var e = 100;
//若使用var重新声明一个已经存在的变量,是无效的。
var a;
console.log(a);//10
//若使用var重新声明一个已经存在的变量且赋值,则会覆盖掉前面的值
var a = 99;
console.log(a);
//JavaScript是一种动态类型、弱类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值。
var num1 = 1;
var num2 = 'abc';
var num3 = true;
var num4 = 2.3;
var num5 = [1,2,3,4];
var obj = {
name:'zhangsan',
age:10
};
console.log(num1,num2,num3,num4,num5,obj)
//变量提升
console.log(abc);//undefined
var abc = 999;
//不用var声明的变量是全局变量
lbw = "卢本伟";
console.log(lbw);
数据类型
undefined
undefined类型的值是undefined。
undefined 是一个表示"无"的原始值,表示值不存在。
出现undefined的常见情况:
1.当声明了一个变量而没有初始化时,这个变量的值就是undefined
2.调用函数时,该函数有形参,但未提供实参,则该参数为undefined。
3.函数没有返回值时,默认返回 undefined。
null
null类型是只有一个值的数据类型,即特殊的值null。它表示空值,即该处的值现在为空,它表示一个空对象引用。
使用Null类型值时注意以下几点:
1)使用typeof操作符测试null返回object字符串。
2)undefined派生自null,所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。
布尔类型
布尔类型有两个值:true、false。常用来做判断和循环的条件
数值型
数值型包含两种数值:整型和浮点型。
1)所有数字(整型和浮点型)都是以 64 位浮点数形式储存。所以,JS中1 与 1.0 相等,而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是17位小数,由于浮点数运算时可能不精确,尽量不要使用浮点数做判断。
2)在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。
字符串
使用 ' ' 或 " "引起来,如:'hello',"good"。
使用加号 '+' 进行字符串的拼接,如:console.log('hello' + ' everybody');
对象
对象是一组数据和功能的集合。
说明:
{}:表示使用对象字面量方式定义的对象。空的大括号表示定义包含默认属性和方法的对象。
函数转换
函数转换 数据必须是字符串
parseInt()
在转换之前,首先会分析该字符串,判断位置为0处的字符,判断它是否是个有效数字,
如果不是,则直接返回NaN,不再继续,如果是则继续,直到找到非字符
parseFloat()
该方法与 parseInt() 方法的处理方式相似,从位置 0 开始查看每个字符,直到找到第一个非有效的字符为止,
然后把该字 符之前的字符串转换成数字。不过,对于这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点,第二个小数点将被看作无效的,parseFloat()方法会把这个小数点之前的字符串转换成数字。
显示转换
几乎每个数对象都提供了toString()函数将内容转换为字符串形式,其中Number提供的toString()函数可以将数字转换为字符串。
Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串,四舍五入
数组
创建数组方式
1.隐式创建
2.直接实例化
3.创建并赋予长度
属性
设置长度 数组名.length = 值;
获取长度 数组名.length
取值/设置值
数组名[索引] 取值
数组名[索引] = 值 设置值
<script type="text/javascript">
//隐式创建
var arr = [1,"abc",true];
console.log(arr);
//直接实例化
var arr2 = new Array(1,2,3,4);
console.log(arr2);
//创建并赋予长度
var arr3 = new Array(5);
console.log(arr3);
//设置长度
arr.length = 5;
console.log(arr);
//获取长度
console.log(arr2.length);
//设置值
arr2[0] = 99;
arr2[5] = 999;
console.log(arr2);
//取值
console.log(arr2[1]);
arr2['name'] = 'zhangsan';
console.log(arr2);
console.log(arr2.name);
console.log("===========for==============");
//普通for遍历 可以遍历出 正常数据和空数据
for(var i = 0; i < arr2.length; i++){
console.log(arr2[i]);
}
console.log("========for..in=========");
//for..in 可以遍历出 正常数据和属性
for(var num in arr2){
console.log(num);
}
console.log("========forEach=========");
//forEach 方法的形参 ele:数据 index:索引 可以遍历出 正常数据
arr2.forEach(function(ele,index){
console.log(ele,index);
});
var arr = ['1','a',5,'3'];
console.log(arr);//1,a,5,3
//后追加
arr.push(10);
console.log(arr);//1,a,5,3,10
//前追加
arr.unshift('b');
console.log(arr);
//后删除
arr.pop();
console.log(arr);
//前删除
arr.shift();
console.log(arr);
//反转
arr.reverse();
console.log(arr);
//以某个字符分隔数据
console.log(arr.join('='));
console.log(arr);
//返回字符在数组中的索引
console.log(arr.indexOf('a'));
//截取
console.log(arr.slice(2,5));
console.log(arr);
//替换
arr.splice(1,1,'一','二');
console.log(arr);
var arr1 = [0,'100'];
//拼接
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));
</script>
函数
函数的声明
函数声明语句 作用域提升
function 函数名(参数列表){
......
}
调用:函数名(参数);
函数定义表达式
var 函数名 = function(参数列表){
......
}
调用:函数名(参数);
Function构造函数
var 函数名 = new Function('参数1','参数2','执行语句');
注意:
1. js中的函数没有重载,同名的函数,会被后面的函数覆盖。
2. js中允许有不定数目的参数,后面介绍arguments对象
函数的参数、调用和return语句
参数
- 实参可以省略,那么对应形参为undefined
- 若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
- 可以给参数默认值:当参数为特殊值时,可以赋予默认值。
- 参数为值传递,传递副本 ;引用传递时传递地址,操作的是同一个对象。
函数的调用
1. 常用调用方
2.函数调用模式
3.方法调用模式
return
函数的执行可能会有返回值,需要使用return语句将结果返回。return 语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回 undefined。
作用:
1. 在没有返回值的方法中,用来结束方法。
2. 有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。
函数的作用域
函数作用域:全局 (global variable) 和 局部 (local variable)
1.全局变量与局部变量同名问题
2.在函数中定义变量时,若没有加var关键字,使用之后自动变为全局变量
<script type="text/javascript">
// 函数声明语句
function fun1(){
console.log("abc");
}
//调用
fun1();
//函数定义表达式
var fun2 = function(){
console.log("函数定义表达式");
}
//调用
fun2();
//Function构造函数
var fun3 = new Function('a','b','console.log(a + b)');
fun3(1,2);
//js中的函数没有重载,同名的函数,会被后面的函数覆盖。
function fun4(a,b){
console.log("方法2");
console.log(a,b);
}
function fun4(a){
console.log("方法1");
console.log(a);
}
fun4(1,2);
//参数
//实参可以省略,那么对应形参为undefined
function fun5(a){
console.log(a);
}
fun5();
//若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
function fun6(b,b,b){
console.log(b);
}
fun6(1,2,3);
//可以给参数默认值:当参数为特殊值时,可以赋予默认值。
function fun7(ab){
// ab = (ab == undefined)? "默认值" : ab;
ab = ab||"默认值"
console.log(ab);
}
fun7(100);
console.log("==========");
//参数为值传递,传递副本 ;引用传递时传递地址,操作的是同一个对象。
var num = [1,2,3];
function fun8(num){
num[0] = 99;
}
fun8(num);
console.log(num);
//方法调用模式
var obj = {
fun:function(){
console.log("对象中的方法");
},
name:'张三',
arr:[1,2,3,4]
};
obj.fun();
console.log(obj.name)
//js中变量作用域问题
if(true){
var nums = 100;
}
console.log(nums);
function funn(){
numm = 88;
}
funn();
console.log(numm);
</script>
json创建
创建
1.字面量形式创建对象
2.通过new Object对象创建
3.通过Object对象的create方法创建对象。
设置值/取值
设置值 对象名.属性 = 值 如果属性存在,值覆盖,如果属性不存,新建属性
取值 对象名.属性
对象的序列化和反序列化
序列化即将JS对象序列化为字符串,反序列化即将字符串反序列化为JS对象。JS中通过调用JSON方法,
可以将对象序列化成字符串,也可以将字符串反序列化成对象 。
this
this是JavaScript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。