JavaScript简单入门(一)

最新推荐文章于 2022-07-10 17:08:30 发布

tylambition

最新推荐文章于 2022-07-10 17:08:30 发布

阅读量152

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/tylambition/article/details/104288649

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、什么是JavaScript？

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

2、快速入门

2.1 引入JavaScript

内部标签
```
<script>
//...
</script>
```
外部引入

hello.js

//...

test.html

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

2.2 基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

</body>
</html>

浏览器调试操作：

在这里插入图片描述

2.3 数据类型

数值、文本、图形、音频、视频…

变量

var a=1;//不能以数字开头

number

js不区分小数和整数，Nunmber

123  //整数
123.1//浮点数123.1
1.23e3//科学计数法

字符串

‘abc’ “abc”

布尔值

true，false

逻辑运算

&& 与
|| 或
！ 非

比较运算符

=

==等于（类型不一样，值一样也会判true）

===绝对等于(类型一样，值一样，结果true)

这是js的缺陷，坚持不用==比较

须知：

NaN===NaN，这个与所有的值都不相等，包括自己
只能通过isNaN(NaN)来判断

浮点数问题：

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

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

null和undefined

null 空
undefined未定义

数组

java的数值必须是相同类型的值，js不需要这样

//保证代码可读性，尽量使用[]

var arr=[1,2,3,'hello',ture];

new Array(1,24,'hello');

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

undefined

对象

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

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

var person={
    name:"tyl",
    age:3,
    tags:['js','java']
}

取对象的值：

person.age

2.4严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    支持ES6才行
     'use strict';严格检查模式，预防JavaScript的随意性导致的一些问题
     必须写在js的第一行
     局部变量建议都使用let去定义
     -->
    <script>
        'use strict';
        //局部变量
         let i=1;
    </script>
</head>
<body>

</body>
</html>

3、数据类型

3.1 字符串

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

2、注意转义字符\

\'
\n
\t
\u#### 
Ascll字符

3、多行字符串编写

//tab上面的`
var msg=`你好
呀
呀
呀
`

4、模板字符串

let name='tyl';
let age=3;
let msg=`你好啊，${name}`

5、字符串长度

str.length

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

在这里插入图片描述

7、大小写转换

//方法
str.toUpperCase()
str.toLowerCase()

8、其他

indexOf()
substring()//[)

3.2 数组

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

var arr=[1,2,3,'hello']

1、长度

arr.length

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

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

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

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

4、push（）、pop（）、unshift（）、shift（）

push：压入到尾部
pop：弹出尾部的一个元素
unshift：压入到头部
shift：弹出头部的一个元素

5、排序sort（）

6、元素反转reverse（）

7、concat（）注意：并没有修改数组，只是会返回一个新的数组

在这里插入图片描述

8、j连接符join

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

在这里插入图片描述

9、多维数组

3.3 对象

若干键值对

var 对象名{
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}

js中的对象，{,}表示一个对象，键值对描述属性xxx：xxx，不同属性之间用逗号隔开，最后一个属性不加逗号！

1、对象赋值

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

3.4流程控制（略）

forEach循环

var age=[12,34,54,56,57,3,2,2];
age.forEach(function (value) {
    console.log(value);
})

for…in循环

var age=[12,34,54,56,57,3,2,2];
for(var num in age){
    console.log(age[num])
}

3.5 Map和Set

Map

//ES6 Map
var map=new Map([['tom',100],['tyl',200],['rose',0]]);
var score=map.get('tyl');
console.log(score);
map.set('adi',123);

Set：无序不重复的集合

var set=new Set([1,2,43,1,1,3]);//去重
set.add(2);
set.delete(1);

tylambition

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单入门(一)

1、什么是JavaScript？JavaScript是一门世界上最流行的脚本语言2、快速入门2.1 引入JavaScript内部标签<script>//...</script>外部引入hello.js//...test.html<script src="hello.js"></script>2.2 基本语法...
复制链接

扫一扫