JS基础语法

最新推荐文章于 2023-07-04 17:00:50 发布

重复的昵称

最新推荐文章于 2023-07-04 17:00:50 发布

阅读量330

点赞数

本文链接：https://blog.csdn.net/syf_519/article/details/102509422

版权

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操作符会返回如下字符串

七、数据类型转换

把任意类型转换成为一下三种形式:

        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); // ["哈哈", "哈哈", "呵呵"]

重复的昵称

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础语法

JS基础语法一、语句JavaScript程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。语句（statement）是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句结束。多个语句可以写在一行内（不建议这么写代码），但是一行写多条语句时，语句必须以分号结尾。表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎就...
复制链接

扫一扫