JavaScript学习（一）

最新推荐文章于 2023-10-07 09:38:56 发布

weixin_43702063

最新推荐文章于 2023-10-07 09:38:56 发布

阅读量258

点赞数

本文链接：https://blog.csdn.net/weixin_43702063/article/details/104234184

版权

JavaScript学习（一）

学习了javascript的基础的一部，简单的总结一下，包括：

Javascript的历史
Javascript的入门
数据类型
流程控制

一、JavaScript历史

JavaScript是一种弱脚本语言，做为开发web页面的脚本语言而出名，也被用到了很多非浏览器环境中

vaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

javaScript的标准是ECMAScript 。

2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。

开发人员一般编写代码使用的是ES6的环境，但是很多浏览器的只支持ECMAScript 5.1。

JavaScript可以说是最流行的脚本语言之一。所以后台开发人员必须精通JavaScript。

二、Javascript的入门

2.1简单的Javascript代码与两种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--script标签内次哦JavaScript代码-->
    <!--养成习惯,分号结尾-->
    <script>
        alert('helloworld');
    </script>
</head>
<body>

</body>
</html>

JavaScript代码有两种引入方式

第一种为上面代码所用的行内式

第二种为行外式

在这里插入图片描述

即在外部js文件中写好js代码，然后引入。一般使用第二种方式。

2.2 简单的定义变量与流程控制

  	<script>
        var num=1;
        if (num<2){
            alert(num);
        }
    </script>

2.3 单行注释和多行注释

<script>
        //单行注释
        /*
        * 多行注释
        * 多行注释*/
        var num=1;
        if (num<2){
            alert(num);
        }
    </script>

2.4 输入输出语句

 <script>
        //在浏览器弹出弹窗
        alert('100');
        //在控制台打印
        console.log('200');
        //在浏览器弹出输入框,用户可输入信息
        prompt("请输入密码")
    </script>

2.5 严格检查模式

因为JavaScript太过随意，且很难报错。所以一般使用严格检查模式。避免一些问题。

 <script>
     //必须写在script标签里的第一行
        'use strict'
    </script>

使用严格检查模式必须先将IDEA调整到ES6
在这里插入图片描述

三、数据类型

3.1 定义变量的格式

变量类型变量名 = 变量值 ;

<script> 
        'use strict'
        //定义局部变量
        let num=3;
        //定义全局变量,不建议使用
        var word=6;
    </script>

3.2 运算符

逻辑运算符:

&&-------二者为真则为真

|| -------有一为真即为真

! --------真即假,假即真
比较运算符

JavaScript不同于Java的是

==代表等于(类型不一样，值一样。仍旧等于)

===代表绝对等于（类型一样，值一样，才等于）

在这里插入图片描述

3.3 布尔类型

false
true

3.4 数字

JavaScript不区分浮点数和整数。统一都是number

999
999.9999
99e9
-99
NaN//not a number
infinity//无限大

特殊的：NaN不等于任何一个数。包括它自身。

只能通过 isNaN 这个方法来判断是否为NaN
在这里插入图片描述
注意：尽量避免使用浮点数进行计算。因为会有精度损失

在这里插入图片描述

3.5字符串

JavaScript中，字符串使用单引号和双引号包裹均可。

‘‘abc’’ ‘hello’
多行字符串

用esc键下的`符号。可以定义多行字符串。

在这里插入图片描述

转义字符串

'\n'--换行符
'\t'--制表符
'\''--转义字符

模板字符串

//模板字符串
let test='haha';
let testx=`${test},nihao`;
alert(testx)

字符串长度
```
alert(testx.length);
```
字符串的不可变性

字符串的大小写转换

test.toUpperCase();
test.toLowerCase();

字符串的指定字符位置
```
test.indexOf('t');
```

截取字符串

test.substring(1)//从第一个字符串截取到最后一个字符串
test.substring(1,3)//从第一个截到第三个.含头不含尾

3.6 数组

Array可以包含任意的数据类型，一个数组里面可以有多种数据类型

//数组
let arr=[1,'haha',1.3,2E3,'\n'];
alert(arr[1]);

超出数组长度，会报未定义。

 let arr=[1,'haha',1.3,2E3,'\n'];
 alert(arr[10]);

数组长度

arr.length

注意：JavaScript中，数组长度可以动态变化。给arr.length赋值。数组长度就会变化。

如果赋值过小，元素就会丢失。如果赋值过大。元素空位会补上undefined

indexOf，通过元素获得下标索引

slice，截取字符串。获得一个新的字符串。含头不含尾

 let arr=[1,'haha',1.3,2E3,'\n'];
 let arr2=arr.slice(0,2);
 alert(arr2);

push()，pop() 尾部

//push 压入到尾部
let arr=[1,'haha',1.3,2E3,'\n'];
 arr.push(3,5,6)
 alert(arr);
//pop 从尾部弹出
 let arr=[1,'haha',1.3,2E3,'\n'];
 arr.push(3,5,6)
 arr.pop();

unshift()，shift()头部

arr.shift()//从头部弹出一个元素
arr.unshift()//压入到头部

sort()排序

在这里插入图片描述

reverse()元素反转

在这里插入图片描述

caocat()拼接

concat并没有修改原来的数组,只是返回了一个新的数组

在这里插入图片描述

join连接符

在这里插入图片描述

3. 7 对象

JavaScript中对象是以键值对的形式表现的

 //对象的定义形式
        var student={
            name:"liuyang",
            age:10,
            sex:"男"    //属性之间以逗号隔开,最后一个属性不加逗号
        }

对象赋值
```
student.name="dadada";
```

使用不存在的对象属性

var student={
    name:"liuyang",
    age:10,
    sex:"男"
}
alert(student.email)
//只会报未定义,不会报错

动态的删减增添属性

//动态的增添属性
var student={
    name:"liuyang",
    age:10,
    sex:"男"
}
student.email="9613@qq.com";
alert(student.email);

//删减属性
delete student.email;

判断这个属性是否在这个对象中

'age' in student
true
//继承的属性也在对象中
'toString' in student
true

判断这个方式是否属于这个对象
```
student.hasOwnProperty('toString')
false
student.hasOwnProperty('age')
true
```
JavaScript中所有键都是字符串,需要加上’’ ''包裹。所有的值都是任意类型

3.8 Map和Set

map

var map=new Map([['黑',100],['白',200],['红',300]]);//创建map


var number = map.get('黑');   //通过key查value值.


map.set('粉',400);            //添加键值对


map.delete('黑')           //删除键值对

set

var set =new Set([1,2,2,2,3,4,5]); //创建set

set.delete(2)                 //删除值

set.add(6)                     //添加值

set.has(6)                      //判断是否含有某个元素

遍历

//遍历set
var set =new Set([1,2,2,2,3,4,5]);
for(let x of set){
    console.log(x)
}

//遍历map
var map=new Map([[1,1],[2,2],[3,3],[4,4]]);
for (let x of map){
    console.log(x)
}

//遍历集合
var number=[1,5,5,6,'hong'];
for (let x of number){
	console.log(x)
}

四、流程控制

1. if语句

var age = 3;
if (age>3){ 
    alert(">3");
}else if(age<5) {  
   alert("<5");
}else { 
    alert("不知道");
}

2. while循环

//while
while(age<100){
    age = age + 1;
    console.log(age)
}
//do while
do{
    age = age + 1;
    console.log(age)
}while(age<100)

3. for循环

for (let i = 0; i < 100 ; i++) {
    console.log(i)
}

4.for each循环

let arr=[1,3,4,5,6];
arr.forEach(function (value) {
    console.log(value)
})

weixin_43702063

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习（一）

JavaScript学习（一）学习了javascript的基础的一部，简单的总结一下，包括：Javascript的历史Javascript的入门数据类型流程控制一、JavaScript历史JavaScript是一种弱脚本语言，做为开发web页面的脚本语言而出名，也被用到了很多非浏览器环境中vaScript在1995年由Netscape公司的Brendan Eich，在网景导航者...
复制链接

扫一扫