JavaScript快速入门通俗易懂

最新推荐文章于 2023-12-26 16:47:39 发布

耳冉鹅

最新推荐文章于 2023-12-26 16:47:39 发布

阅读量624

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_45366447/article/details/113556057

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、概述

JavaScript是一门脚本语言
命名是为了当时蹭Java语言的热度

二、快速入门

1、引入JavaScript

内部引入

<!-- script标签内 写JavaScript代码-->
    <script>
        alert("hello World!!")
    </script>

外部引入

<!--外部引入-->
<!--script标签必须成对出现-->
    <script src="js/a.js"></script>

在这里插入图片描述

2、基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- JavaScript 严格区分大小写-->
<script>
    // 定义变量 ：  变量类型 变量名 = 变量值；
    var num = 1;
    alert("num = " + num);
    // 条件控制
    var score = 59;
    if (score>60) {
        alert("Happy Ending");
    } else {
        alert("Hollyshit");
    }
    
    // console.log(score) 在浏览器的控制台打印变量 == System.out.println(score);


</script>

</body>
</html>

浏览器调试 ----> F12

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OJweZWjF-1612247706986)(image/image-20210201151720124.png)]

3、数据类型

数值，文本，图像，音频，视频…

变量不能以数字命名

number js不区分小数和整数

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

字符串

“abc”，‘abc’

布尔值

true ，false

逻辑运算

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

比较运算符

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

这是JS的缺陷之一，坚持不要使用 == 来比较

须知：

NaN === NaN ，这个与所有的数据都不相等，包括自己

只能通过isNaN(NaN)来判断这个数是不是NaN

浮点数问题：

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

尽量避免使用浮点数进行运算，会有精度损失

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

null、undefined
- null 空
- undefined 未定义
数组

Java的数组必须是相同类型的对象，JS则不必

如果数组越界了，则会显示undefined

var arr = [1, 2, 3, 4, null, 'hello', true];

在这里插入图片描述

对象

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

每个属性之间使用逗号分开

// Person person = new Person(1,2,3);
var person = {
    name: "abc",
    age: 3,
    tags: ["html","css","JavaScript"]
}

取对象的值：

在这里插入图片描述

4、严格检查模式

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

    <script>
        // 'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
        // 必须写在JavaScript的第一行！
        // 局部变量建议都使用let来定义
        'use strict';
        // 全局变量
        i = 1;
        let i =1;
        // ES6  let代替var
        // var i =2;

    </script>

</head>
<body>

</body>
</html>

三、数据类型

1、字符串

正常字符使用''或""来包裹
注意转义字符 \

\n 换行

\t 一个tab距离

\u4e2d Unicode字符

\x41 ASCII字符

多行字符串编写 ``(Tab与Esc之间的按键)

var msg =
            `hello
            world
            你好`

模板字符串

let name = "耳冉";
let age = 18;
let msg2 =`早哇 ${name}`

字符串长度以及可单独获取某一元素

在这里插入图片描述

字符串的不可变性

在这里插入图片描述

大小写转换

注意，这里是调用方法，而不是student的属性

console.log(student.toUpperCase())

console.log(student.toLowerCase())

获取下标

console.log(student.indexOf(‘u’))

2

substring 相当于[) 左闭右开

console.log(student.substring(1,3))

tu

在这里插入图片描述

2、数组

Array可以包含任意数据类型

var arr = [1,2,"1","2",null,true,'a'];  // 通过下标取值、赋值

长度 arr.length

注：在给arr.length赋值时，数组大小会发生变化，若赋值小于数组长度，则多余元素就会丢失

通过元素获得下标索引 arr.indexOf(num)
slice() 截取Array的一部分，返回一个新的数组类似于substring
push()、pop() 尾部

在这里插入图片描述

unshift()、shift() 头部

在这里插入图片描述

sort() 排序

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

reverse() 元素反转

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

concat() 拼接

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

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

join() 连接符

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

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

多维数组

arr = [[1,2],[3,4],["5","6"]]
(3) [Array(2), Array(2), Array(2)]
arr[1][1]
4

3、对象

若干个键值对

var 对象名 = {
    属性名： 属性值，
    属性名： 属性值，
    属性名： 属性值
}

Js中对象，{…}表示一个对象，键值对描述属性

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

对象赋值

person.age
18
person.age = 21
21
person.age
21

动态的删减属性

person
{name: "Java", age: 21, email: "401446424@qq.com", score: 0}
delete person.score
true
person
{name: "Java", age: 21, email: "401446424@qq.com"}

动态添加

person
{name: "Java", age: 21, email: "401446424@qq.com"}
person.add = "Hello"
"Hello"
person
{name: "Java", age: 21, email: "401446424@qq.com", add: "Hello"}

判断属性值是否在对象中

'age' in person
true
'toString' in person
false

判断一个属性是否是这个对象自身拥有的 hasOwnProperty（）

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

4、流程控制

判断 if if-else if-else
循环 while（避免死循环） do-while for
forEach循环

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

for… in

for (var num in arr) {
    console.log(arr[num]);
}

for… of

for (var num of arr) {
    console.log(num);
}

5、Map和Set

Map: get、set、delete

let map = new Map([['tom',100],['Jack',90],['John',80]]);
// 通过get获得value
let name = map.get('tom');
console.log(name);

map
Map(3) {"tom" => 100, "Jack" => 90, "John" => 80}
map.set('admin',70)
Map(4) {"tom" => 100, "Jack" => 90, "John" => 80, "admin" => 70}
map.delete('John')
true
map
Map(3) {"tom" => 100, "Jack" => 90, "admin" => 70}

Set：无序不重复的集合(与Java相同)

耳冉鹅

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript快速入门通俗易懂

一、概述JavaScript是一门脚本语言命名是为了当时蹭Java语言的热度二、快速入门1、引入JavaScript内部引入 <script> alert("hello World!!") </script>外部引入 <script src="js
复制链接

扫一扫