JavaScript入门学习

最新推荐文章于 2024-01-30 11:03:02 发布

想吃不胖

最新推荐文章于 2024-01-30 11:03:02 发布

阅读量108

点赞数

文章标签： javascript html5 java

本文链接：https://blog.csdn.net/qq_44719987/article/details/120844575

版权

本文详细介绍了JavaScript的基本概念，包括其历史、快速入门方法、数据类型、流程控制以及Map和Set。讲解了如何引入JavaScript，展示了基本语法，如变量、条件控制、数据类型（数值、字符串、布尔值等）以及数组和对象的操作。此外，还涉及到了对象属性的增删查改以及流程控制结构，如if判断、循环。最后提到了ES6中的Map和Set数据结构及其使用方法。

摘要由CSDN通过智能技术生成

一、什么是JavaScript

（一）概述

JavaScript是一门世界上最流行的脚本语言

Java,JavaScript

一个合格的后端人员，必须要精通JavaScript语言

（二）历史

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本

但是大部分浏览器还只停留在支持es5代码上！

开发环境---线上环境，版本不一致

二、快速入门

（一）引入JavaScript

1.内部标签

<script>
    //......
</script>

2.外部引入

abs.js

text.html

<script src="abc.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--script标签内，写JavaScript代码-->
    <script>
        alert('hello,world');
    </script>
<!--外部引入-->
<!--注意：script标签必须成对出现-->
    <script src="js"></script>
<!--不用显示定义type,也默认就是JavaScript-->
    <script type="text/javascript">
    </script>
</head>
<body>

<!--这里也可以存放-->
</body>
</html>

（二）基本语法入门

 <script>
    //1.定义变量   变量类型  变量名 = 变量值；
    var score=70;
    //alert(num);
    //2.条件控制
    if(score>60&&score<70){
         alert("60~70");
       }else if(score>70&&score<80){
          alert("70~80")
       }else{
          alert("other")
       }
       //console.log(score)在浏览器的控制台打印变量！
  </script>

（三）数据类型

数值，文本，图形，音频，视频.......

1.变量

2.number

js不区分小数和整数，Number

123  //整数123
123.1  //浮点数123.1
1.123e3  //科学计数法
-99   //复数
NaN  //not a number
Infinity  //表示无限大

3.字符串

'abc' "abc"

4.布尔值

true , false

5.逻辑运算

&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真

6.比较运算符

= 
== 等于(类型不一样，值一样，判断为true）
=== 绝对等于（类型一样，值一样，结果true）

这是一个js的缺陷，坚持不要使用==比较

注意：

1、NaN==NaN,这个与所有的数值都不相等，包括自己

2、只能通过isNaN(NaN)来判断这个数是否是NaN

7.浮点数问题：

console.log((1/3)===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

 Math.abs(1/3-(1-2/3))<0.00000001

8.null和undefined

null 空

undfined 未定义

9.数组

Java的数组必须是一些列相同类型的对象，JS中不需要这样

 //保证代码的可读性，尽量使用[]
        var arr=[1,2,3,4,5,'hello',null,true]
        new Array(1,12,3,4,4,5,'hello');

取数组下标：如果越界了，就会

undefined

10.对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

 //Person person=new Person(1,2,3,4,5);
        var person={
          name:"zhongguo",
          age:3;
          tags:['js','java','web','...']
          }

11.取对象的值

person.name
> "zhongguo"
person.age
> 3

三、数据类型

（一）字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符 \

3、多行字符串编写

 //tab 上面 esc键下面
        var msg=
        hello
        world
        你好ya
        你好

4、模板字符串

//tab 上面 esc键下面
 let name="zhongguo";
 let age=3;

 let msg=你好呀，${name}

5、字符串长度

str.length

6、字符串的可变性，不可变

console.log(student[0])
s
undefined
student[0]=1
1
console.log(student)
student
undefined

7、大小写转换

//注意，这是方法，不是属性了
student.toUpperCase()
student.toLowerCase()

8、student.indexOf('t')

9、substring

[)
student.substring(i)   //从第一个字符截取到最后一个字符串
student.substring(1,3)   //[1,3)

（二）数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6]  //通过下标取值和赋值
arr[0]
arr[0]=1

1、长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化。如果赋值过小，元素就会丢失

2、indexOf ,通过元素获得下标索引

arr.indexOf(2)
1

字符串的“1”和数字1是不同的

3、slice()截取Array的一部分，返回一个新数组，类似于String中的substring

4、push() , pop()

push: 压入到尾部
pop: 弹出尾部的一个元素

5、unshift(), shift() 头部

unshift: 压入到头部
shift: 弹出头部的一个元素

6、排序 sort()

(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]

7、元素反转reverse()

(3)["B","C","A"]
arr.reverse()
(3)["c","B","A"]

8、concat()

(3)["B","C","A"]
arr.concat(1,2,3)
(6)["C","B","A",1,2,3]
arr
(3)["C","B","A"]

注意：concat() 并没有修改数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串连接

(3)["C","B","A"]
arr.join('-')
"C-B-A"

10、多维数组

arr=[[1,2],[3,4],["5","6"]];
arr[1][1]
4

数组：存储数据（如何存，如何取，方法都可以自己实现）

（三）对象

若干个键对值

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
//定义了一个person对象，它有四个属性
var person={
    name:"kele",
    age:3,
    email:"24736743@qq.com",
    score:0
}

js中对象，{......}表示一个对象，键值对描述属性xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有的键都是字符串，值是任意对象！

1、对象赋值

person.name="kele"
"kele"
person.name
"kele"

2、使用一个不存在的对象属性，不会报错！undefined

person.haha
undefined

3、动态的删减属性，通过delete删除对象的属性

delete person.name
true
person

4、动态的添加，直接给新的属性添加值即可

person.haha="haha"
"haha"
person

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

'age' in person
true
//继承
'toString' in person
true

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

（四）流程控制

1、if 判断

var age=3;
if(age>3){
    alert("haha");
}else if(age<5){
    alert("kuwa");
}else{
    alert("kuwa");
}

2、while循环，避免死循环

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

3、for 循环

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

4、forEach循环

var age=[12,3,12,3,12,3,12,34,123];

//函数
age.forEach(function(value){
    consolg.log(value)
})

5、for...in

//for(var index in object){}
for(var num in age){
   if(age.hasOwnProperty(num)){
      console.log("存在")
      console.log(age[num])
      }
}

（五）Map和Set

Map

//es6 Map
//学生的成绩，学生的名字
//var names=["tom","jack"]
//var scores=[100,90,80]
var map=new Map([['tom'，100],['jack;90],['haha',80]]);
var name=map.get('tom');   //通过key获得value
map.set('admit',123456);  //新增或修改
map.delete("tom");  //删除

Set:无序不重复的集合

set.add(2); //添加
set.delete(1);  //删除
console.log(set.has(3));  //是否包含某个元素

（六）iterator

使用iterator来遍历迭代我们Map ,Set

遍历数组

//通过for of/ for in 下标
var arr=[3,4,5]
for(var x of arr){
   console.log(x)
}

遍历map

var set=new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
    console.log(x)
}

遍历set

var set=new Set([5,6,7]);
for(let x of set){
    console.log(x)
}

想吃不胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫