JS基础语法
一、语句
- JavaScript程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。
- 语句(statement)是为了完成某种任务而进行的操作,语句以分号结尾,一个分号即表示一个语句结束。多个语句可以写在一行内(不建议这么写代码),但是一行写多条语句时,语句必须以分号结尾。
- 表达式不需要分号结尾。一旦在表达式后面添加分号,则JavaScript引擎就将表达式视为语句,这样会产生一些没有任何意义的语句。
// 一条普通的语句 支持一行写多条语句 ';'分隔
var num = 2 * 3; var str = '我是字符串';
alert(num);
alert(str);
二、注释
- 注释用来代码进行解释说明,增强代码的可读性;方便调试代码。
- js当中有两种注释方式+HTML中的注释。
<script type="text/javascript" charset="utf-8">
// 这是单行注释
/**
* 这是多行注释
*/
<!-- 兼容HTML的注释 -->
alert('this is inner js code');
</script>
三、关键字
- 关键字也称保留字,是被JavaScript征用来有特殊含义的单词
arguments、break、case、catch、class、const、
continue、debugger、default、delete、do、else、
enum、eval、export、extends、false、finally、for、
function、if、implements、import、in、instanceof、
interface、let、new、null、package、private、
protected、public、return、static、super、switch、
this、throw、true、try、typeof、var、void、while、with、
yield、Infinity、NaN、undefined
四、标识符
- 标识符就是一个名字,用来给变量和函数进行命名,有特定规则和规范
- 规则:
由Unicode字母、_、$、数字组成、中文组成
a. 不能以数字开头
b. 不能是关键字和保留字
c. 严格区分大小写 - 规范:
见名知意
驼峰命名或下划线规则
五、变量
1、变量的声明
- JavaScript是一种弱类型语言,在声明变量时不需要指明数据类型,直接用var修饰符进行声明。
// 先声明再赋值
var a;
a = 10;
// 声明同时赋值
var b = 20;
2.变量的注意点
a.若只声明而没有赋值,则该变量的值为undefined。
var box;
console.log(box); // 在浏览器F12的控制台打印
b.变量要有定义才能使用,若变量未声明就使用,JavaScript会报错,告诉你变量未定义
max = 100;
console.log(max); //100
console.log(min); // 未声明就使用,报错变量未定义min is not defined
c.可以在同一条var命令中声明多个变量。
// 声明了aa, bb没有赋值 声明了cc同时赋值10
var aa, bb, cc = 10;
console.log(aa, bb, cc);
d.若使用var重新声明一个已经存在的变量,是无效的。
var box = 10
var box;
console.log(box); //10
e.若使用var重新声明一个已经存在的变量且赋值,则会覆盖掉前面的值
var box = 10
var box = 25
console.log(box); //25
f.JavaScript是一种动态类型、弱类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值。
var box = 'hello world'
console.log(box);
3、变量提升
- JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。
console.log(msg);
var msg = 'so easy';
// 变量提升,相当于下面的代码
var msg;
console.log(msg);
msg = 'so easy';
// 说明: 最后的结果是显示undefined, 表示变量msg已声明, 但还未赋值
六、数据类型
- 虽说JS是弱类型语言,变量没有类型,但数据本身是有类型的。针对不同的类型,我们可以进行不同的操作。
- JavaScript 中有6 种数据类型,其中有五种简单的数据类型:undefined、Null、布尔、数值和字符串。一种复杂数据类型Object。
- typeof操作符
- typeof操作符是用来检测数据类型。对于值或变量使用typeof操作符会返回如下字符串
- typeof操作符是用来检测数据类型。对于值或变量使用typeof操作符会返回如下字符串
七、数据类型转换 把任意类型转换成为一下三种形式:
String类型
String(数据)
在数据的前后添加一对引号
Number类型
Number(数据)
String
'' 0
" " 0
"纯数字" 纯数字
"非纯数字" NaN
Boolean
true 1
false 0
Null 0
Undefined NaN
Boolean类型
Boolean(数据)
String
'' false
" " true
"纯数字" true
"非纯数字" true
Number
0 false
1 true
其他数字 true
NaN false
Null false
Undefined false
把任意类型转换成为一下三种形式:
String类型
String(数据)
在数据的前后添加一对引号
Number类型
Number(数据)
String
'' 0
" " 0
"纯数字" 纯数字
"非纯数字" NaN
Boolean
true 1
false 0
Null 0
Undefined NaN
Boolean类型
Boolean(数据)
String
'' false
" " true
"纯数字" true
"非纯数字" true
Number
0 false
1 true
其他数字 true
NaN false
Null false
Undefined false
//String
console.log(String(123));
console.log(String(false));
console.log(String(true));
console.log(String(null));
console.log(String(undefined)); //undefined
//Number
console.log(Number('')); //0
console.log(Number(" ")); //0
console.log(Number("123")); //123
console.log(Number("123abc")); //NaN
console.log(Number(false)); //0
console.log(Number(true)); //1
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log('------------------------');
//Boolean
console.log(Boolean('')); //false
console.log(Boolean(" "));
console.log(Boolean("123"));
console.log(Boolean("123abc"));
console.log(Boolean(0)); //false
console.log(Boolean(1));
console.log(Boolean(123));
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
强制类型转换:通过方法…
自动类型转换: 不是为了进行类型转换才类型转换,二十为了进行某种操作需要满足某种类型,才会自动发生类型转换
+ - * / …
+ 左右两边有字符串的出现,字符串的连接符使用
+ 左右两边没有字符串出现时,先把数据类型转为数值型,再去参与运算
console.log(1+"true"); //1true
console.log(1+true); //2
console.log('a'+1); //a1
console.log(undefined+1); //NaN
console.log(null-1); //-1
八、=等号问题
= 赋值
== 比较值是否相等
=== 比较值和类型是否相等
如果类型就不相等,不会进一步比较值
console.log(11=='11'); //true
console.log(11==='11'); //false
console.log(false==0); //true
&&
操作数为boolean类型时-->一个为假就是假,两个都为真就是真
操作数有其他类型时-->第一个操作数如果转为boolean类型为true,结果就是第二个操作数的值
第一个操作数如果转为boolean类型为false,结果就是第一个操作数的值
console.log(true && false); //false
console.log(true && 1); //1
console.log(0 && false); //0
console.log('n' && undefined); //undefined
||
操作数为boolean类型时-->一个为真就是真,两个都为假就是假
操作数有其他类型时--> 第一个操作数如果转为boolean类型为true,,结果就是第一个操作数的值
第一个操作数如果转为boolean类型为false,,结果就是第二个操作数的值
console.log(true || 1); //true
console.log(0 || 'a'); //'a'
console.log('n' || undefined); //'n'
! 非 取反
当操作数为其他类型时候,先转为boolean类型,再进行取反
!!
布尔类型-->取反再取反,就是本身
非布尔类型->转为boolean类型
块 {}
js中的 {}不成作用域
js中的作用域只看函数
{
var ccc=100;
}
console.log(ccc); //100
九、数组
- 数组(array)是按次序排列的一组数据,每个值的位置都有编号(从 0 开始),整个数组用方括号表示。Js中定义数组的三种方式如下(也可先声明再赋值):
var arr = []; // 创建一个空数组
var arr = [值1, 值2, 值3]; // 创建一个数组并赋值
var arr = new Array(值1, 值2, 值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定长度
1、创建
// 数组的创建
var arr1 = [];
console.log(typeof arr1); // 类型是object
console.log(arr1.length); // 长度为0
var arr2 = [1, '2', 3.3, true, null];
console.log(arr2.length); // 长度为5
var arr3 = new Array(1, '2', 3.3);
console.log(arr3.length); // 长度为3
var arr4 = new Array(3);
console.log(arr4.length); // 长度为3
2、基本操作
- 数组的长度可以通过length属性来获取,并可以任意更改
获取:数组名.length
更改:数组名.length = 新长度 - 数组中的每一个元素都可以被访问和修改,甚至是不存在的元素,无所谓越界
获取:数组名[下标]
更改:数组名[下标] = 新值
var arr2 = [1, '2', 3.3, true, null];
console.log(arr2.length); // 长度为5
var arr4 = new Array(3);
console.log(arr4.length); // 长度为3
// 修改长度后,原来已有的数据会被丢失,返回undefined
arr2.length = 3
console.log(arr2.length);
console.log(arr2[3]);
// 获取一个不存在的位置,不会报错越界,会返回undefined
console.log(arr4[5]);
3、数组的遍历
数组的遍历即依次访问数组的每一个元素 ,JS提供三种遍历数组的方式:
- 普通for循环遍历
var arr = [1, '2', 3.3, true, null];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
- for in
var arr = [1, '2', 3.3, true, null];
for (var i in arr) {
console.log(arr[i]);
}
- forEach
数组名.forEach(function(element, index){
数组名[下标]是获取元素
}) // element(名称任意):元素,index(名称任意):下标
var arr = [1, '2', 3.3, true, null];
arr.forEach(function(element, idx) {
console.log(idx + "-->" + element);
};
结果如下:
//当[]中的索引从0开始的整数,当做索引使用
arr[1]='1';
//当[]中的数据是非0及以上的整数作为自定义属性使用
arr[-1]="属性1";
arr['haha']="属性2";
arr[false]="属性3";
console.log(arr);
console.log(arr['haha']);
4、 数组提供的操作方法
- Array对象为我们提供了一些方法,可以很方便地操作数组
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取(切片)数组,原数组不发生变化
splice 剪接数组,原数组变化,可以实现前后删除效果
concat 数组合并
/*
* slice 截取(切片)数组,原数组不发生变化
* 参数1 这个索引位置开始截取到最后
* 参数2个 从起始索引开始截取到结束索引,结束索引不包含
* 原数组不变
splice 剪接数组,原数组变化,可以实现前后删除效果
参数1 原数组相当于剪切 ,返回被截取的部分
参数2 参数1为起始索引,参数2为个数
参数3到多个 参数1为起始索引,参数2为个数,参数3到多个,为替换的数据
原数组改变
* */
var arr=['哈哈','呵呵',123,true,null];
console.log(arr.slice(1,3)); //呵呵 123
console.log(arr); //'哈哈','呵呵',123,true,false
// console.log(arr.splice(2)); //[123, true, null]
console.log(arr.splice(1,2)); //返回截取的数据 ["呵呵", 123] 原数组还剩下['哈哈',true,null]
console.log(arr.splice(1,2,'哈哈','呵呵')); //返回截取的数据 [true, null] 原数组还剩下['哈哈'] 然后把第三个开始的元素添加在后面
console.log(arr); // ["哈哈", "哈哈", "呵呵"]