JavaScript 学习(简单入个门, 个人笔记)基础的那种哦!!! 上篇

最新推荐文章于 2024-06-13 14:23:28 发布

weifc-wei

最新推荐文章于 2024-06-13 14:23:28 发布

阅读量111

点赞数

分类专栏： html + css + js 文章标签：字符串 js javascript css java

本文链接：https://blog.csdn.net/m0_45867846/article/details/110920358

版权

html + css + js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 什么是 JavaScript

2. 快速入门

2.1 引入JavaSciprt

内部标签

<!-- script标签内, 写JavaScript代码 -->
    <script>
        alert('hello, world');
	</script>

外部引入
abs.js

	<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/qj.js"></script>

<!--    不用显示定义type, 也默认就是 JavaScript-->
    <script type="text/javascript"></script>

</head>
<body>



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

2.2基本语法入门

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

    <script>
        // 1. 定义变量 变量类型 变量名 = 变量值;
        const num = 1;
        const zzz = 2;
        const name = "weifengcheng";
        alert(name);
        //2. 条件控制
        if (2 > 1) {
            alert("true");
        }

        // console.log(name) 在浏览器的打印变量 System.out.println()
    </script>

</head>
<body>

</body>
</html>

浏览器必备调试须知;
在这里插入图片描述

2.3 数据类型

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

变量

var 1a = 1 //不可以, 以数字开头. 就可以
var 王者荣耀 = "青铜";

number
js不区分小数和整数, Num

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

字符串

'abc' "abc"

'\n'

布尔值

略

逻辑运算

&&
||
!

比较运算符 !!! 重要

=
== 等于(类型不一样, 值一样, 也会判断为true)
=== 绝对等于(类型一样, 值一样, 结果为true)

这是一个JS的缺陷, 坚持不要使用 == 比较
须知:

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

浮点数

<script>
        console.log((1/3) === (1-2/3))
    </script>

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

<script>
        console.log((1/3) === (1-2/3))
        console.log(Math.abs(1/3-(1-2/3)) < 0.00001)
        //Math.abs(1/3-(1-2/3))
    </script>

结果: falst true

null 和undefined

null 空
undefined 未定义

数组
java的数值
一些列相同类型的对象~,

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

区数组下标: 如果越界了, 就会

undefined

对象
对象是大括号, 数组是中括号~~
, 每个属性之间使用逗号隔开, 最后一个不需要添加

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

取对象的值

person.name
>"weifc"
person.age
>3

2.4 严格检查格式

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

    <!--
    前提, IDEA 需要设置ES6 语法
      局部变量建议都使用 ler 去定义~
      必须写在JavaScript 的第一行!
      局部变量建议使用 let 去定义~
    -->
    <script>
        'use strict'; //尽量加上, 严格检查模式, 预防javascript的随意性导致产生一些问题.

        //全局变量,
        let i = 1;
        //ES6 let


    </script>

</head>
<body>

</body>
</html>

3. 数据类型

3.1 字符串

正常字符串我们使用单引号, 或者双引号包裹
注意转义字符\

\'
\n
\t
\u4e2d \u### Unicode字符
\x41	 AsCll字符

3. 多行字符串编写

// tab 上面 esc 键下面
var msg = `hello java
        js
        c++`

4. 模板字符串

let name = "weifc";

        let msg = '你好啊, ${name}';
        console.log(msg);

5. 字符串长度

str.length

6. 字符串的可变性, 不可变
在这里插入图片描述

== 7.大小写转换 ==

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

student.indexOf('t')

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

3.2 数组

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

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

长度

arr.length

注意: 加入给arr.length 赋值, 数组大小就会发生变化~, 如果赋值过小, 元素就会丢失

indexOf , 通过元素获得下标索引
arr.indexOf(2)

字符串的"1" 和数字的 1 不同的
在这里插入图片描述

slice() 截取Array的一部分, 返回一个新数组,

类似于String 中的 substring

4. push, pop

1. push: 压入到尾部
2. pop: 弹出尾部的第一个元素

在这里插入图片描述
5.unshift, shift() 头部

3. unshift: 压入到头部部
4. shift: 弹出头部部的第一个元素

在这里插入图片描述
6.排序sort()

7元素反转

8. concat()

注意: concat() 并每一个修改数组, 只是会返回一个新的数组

9连接符join
打印拼接数组, 使用特定的字符串连接
在这里插入图片描述

多维数组
在这里插入图片描述

== 数组: 存储数据(如何存, 如何取方法都可以自己定义) ==

3.3 对象

若干个建值对

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

//定义了一个person对象, 它有四个属性!
<script>
        'use struct';
        var person = {
            name: "weifc",
            age: 19,
            email: "2418060010@qq.com",
            score: 0
        }
    </script>

Js 中对象, {…} 表示一个对象, 键值对描述属性 XXXX: XXXX, 多个属性之间使用逗号隔开, 最后一个属性不加逗号!

javaScript 中的所有的键都是字符串, 值是任意对象!

1.对象赋值
在这里插入图片描述
2.使用一个不存在的对象属性, 不会报错
只会 undefined

3.动态的删减属性
在这里插入图片描述
java c++ 是不行的
4.那也可以动态添加

5.判断属性值是否在这个对象中! XXX in XXX!

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

6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty
在这里插入图片描述

3.4流程控制

if 判断

<script>
        'use struct';
        var age = 3;
        if (age > 3) {
            alert("age > 3");
        } else {
            alert("other");
        }
    </script>

while循环

<script>
        'use struct';
        var age = 3;
        while (age < 100) {
            age = age + 1;
            console.log(age);
        }
    </script>

for循环

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

///
var age = [12, 13, 14, 15];
        for (let i = 0; i < age.length; i++) {
            console.log(age[i]);
        }
///
var age = [12, 13, 14, 15];
        // for (let i = 0; i < age.length; i++) {
        //     console.log(age[i]);
        // }
        //函数
        age.forEach(function (value) {
            console.log(value);
        })

for…in

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

        }

感觉没啥用

3.5 Map 和 Set

ES6 新特性
Map:

<script>

        'use strict'
        new Map();
        new Set();

        // ES6
        // 学生的成绩, 学生的名字
        // var names = ["tom", "jack", "weifc"];
        // var scores = [100, 90, 80];

        let map = new Map([['tom', 100],['jack', 90],['weifc', 80]]);
        let name = map.get('tom'); //通过key获取value
        map.set('admin', 1234);
        console.log(name);

    </script>

Set: 无序不重复的集合

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

3.6 iterator

作业: 使用iterator 来遍历迭代我们Map, Set !
通过for of / for in 下标
遍历数组

<script>
        'use strict';
        var arr = [3, 4, 5];
        for (var x of arr) {
            console.log(x);
        }
    </script>

遍历map

let map = new Map([["tom", 100], ["jack", 90], ["weifc", 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);
        }

漏动

let arr = [3, 4, 5];
        //arr.name = "213"; 早期的漏动~
        for (let x in arr) {
            console.log(x);
        }

weifc-wei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 学习(简单入个门, 个人笔记)基础的那种哦!!! 上篇

1. 什么是 JavaScript2. 快速入门2.1 引入JavaSciprt内部标签 <script> alert('hello, world'); </script>外部引入abs.js <script src="abc.js></script>测试代码<!DOCTYPE html><html lang
复制链接

扫一扫