Web前端 Javascript笔记（1）数组

结构 ：html构建

样式：css控制

行为：JavaScript实现

什么是JavaScript？

JavaScript是一种跨平台的脚本语言，平台，即运行环境，一般指操作系统。

------------------------------------------------------------------------------------------------------------------------------------------------

JS语法基础知识

<script>标签

属性：

type = 'text/javascript'

src属性， 引入外部的JS代码

（1）且一个文档中可以有多个<script>标签，执行的顺序是依次由上而下执行

（2）一个script标签只能引入，或者在标签内部写代码

JS中的输出方法：

(1). alert()                     弹窗

(2). document.write()      在当前页面上输出内容

(3). console.log()       在控制台输出内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
 
    <script>
        alert("this is ok")
    </script>
 
    <script>
        document.write("hello world")
    </script>
 
    <script>
        console.log("output on console")
        /*可以用来调试，不会将内容输出到浏览器，不印象用户使用*/
    </script>
 
</head>
<body>
 
</body>
</html>

JS中的常量和变量：

1. 常量：值不可以改变的叫做常量

 数据类型：

 基本数据类型：

 a. 数字

 b. 布尔值

 c. 字符串

复合数据类型：

 数组，列表，字典等

特殊数据类型：

null 空    undefined     NaN 非数

2. 变量：值可以被修改的变量

   申明变量的关键字：var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    
    <script>
        var number = 100;   /*申明 初始化*/
        alert(number);
        
        var num;
        alert(num);     /*此时的num是undefined*/
    </script>
</head>
<body>
 
</body>
</html>

变量弱引用：

Javascript是弱引用语言，变量的数据类型在负值的时候才能确定，JS中的变量是弱引用类型的变量。

<script>
        var number = 100;   /*申明 初始化*/
        alert(number);
        number = "hello";
        alert(number);     /*此时的num是undefined*/
</script>

变量命名规则（太基础跳过）

运算符（太基础跳过）

强制数据类型转换：

1. Number()：将其他数据类型强制转换为数字

2. Boolean()：将其他数据类型强制转换为布尔值

3. parseInt()：取整，也可以截取字符串中的数字且结果为整数，还可以将其他的进制转换为十进制。

4. parseFloat()：截取字符串中的浮点数

<script>
        var str = "110011";
        alert(parseInt(str, 2));        /*将二进制转换为十进制*/
        alert(parseInt("3.123"));       /*3*/
        alert(parseInt("3.12sfx"))     /*3*/
        alert(parseFloat("3.12sfx"))     /*3.12*/
</script>

流程控制（三大结构，太基础跳过）

循环：

<script>
        for (let i=0; i<10; i++)
        {
            document.write("this is " + i)
        }
</script>
<script>
        let i = 0;
        while (i<10)
        {
            document.write("This is " + i);
            i++;
        }
</script>

JS中的函数

语法：function 声明

有无参数，有无返回值

<script>
        print_info("chcoo")
        changeInfo("helo")
        alert(changeInfo("hello"))
        function print_info(msg) {
            for(let i=0; i<10; i++)
            {
                document.write(msg + "<br>");
            }
        }
 
        function changeInfo(msg) {
            if(msg === "hello")
            {
                document.write(msg + "world");
            }
            else
            {
                document.write("Other info");
            }
            return "done already";
        }

arguments:

在封装函数的时候，函数内部会自动生成一个arguments对象，arguments对象用于存储传入函数中的参数，例如arguments.length用于存储参数的个数。arguments[i]表示第 i-1 个参数。

<script>
        alert(changeInfo("hello"))
 
        function changeInfo(msg) {
            if(msg === "hello")
            {
                document.write(msg + "world");
            }
            else
            {
                document.write("Other info");
            }
            alert(arguments.length);
            return "done already";
        }
</script>

javascript中的数组：

数组的声明方式：

1. 通过new运算符创建数组

2. 省略new运算符创建数组

3. 直接通过常量赋值

var arr1 = new Array(10, 20, 30);
var arr2 = Array(10, 20, 30);
var arr3 = [10, 20, 30];
 
var arr4 = new Array(10);     /*长度为10的空数组*/
 
/*数组遍历*/
for (let i=0; i<arr1.length; i++)
{
    document.write(arr3[i] + '<br>');
}
 
/*随机数*/
for(let i=0; i<10; i++)
{
    arr4[i] = Math.random();
}
        
for (let i=0; i<arr4.length; i++)   /*这里使用let声明的是局部变量*/
{
    document.write(arr4[i] + "<br>");
}

关于数组的方法：

栈结构：

1. push    向数组末尾添加元素，返回值为添加后数组的长度

2.pop      在数组末尾删除一个元素，返回值为弹出的数组

队列结构：
1. shift   从队列前端弹出一个元素, 返回值为弹出的元素

2. unshift   从数组的头部插入元素，返回值为数组的长度

数组拼接：
1 . concat()

<script>
        var arr1 = [1,2,3];
        var arr2 = [4,5,6];
        var newArr = arr1.concat(arr2, 5, 6);
        alert(newArr)
</script>

数组切片：

.slice(start, end), 切片的区间是[start, end)，切片区间内的数组，返回值为切片后的数组

.splice( start, length, var1, var2)： 从start位置开始，截取length个元素，并从start位置开始，插入后面的数据， 返回值是截取掉的元素。

<script>
        var arr1 = [1,2,3];
        var arr2 = [4,5,6];
        var newArr = arr1.concat(arr2, 5, 6);
        var sliceArr = newArr.slice(2, 4);
        newArr.splice(1, 1, "h");
        alert(newArr)
        alert(sliceArr)
</script>

.join()方法，将数组中的元素按照传入的字符拼接成字符串，并返回拼接后的字符串。

.reverse()  ，数组逆序，不生成副本

.sort(),   对数组进行排序，不生成副本

[注]： 数组按照数值排序需要传入参数才可以，sort()方法默认不是按照数值大小进行排序的。

<script>
        var arr1 = [1,3,6,4,2];
        arr1.sort(function (value1, value2) {
            return value1 - value2;
        });
        alert(arr1);
</script>
<script>
        var arr = new Array(30);   //长度为30的数组
        for (let i=0; i<30; i++)
        {
            arr[i] = (i+1) * 2;
        }
        alert(arr);
        //求平均数
        var average = [];   // 空数组
        for (let i=0; i<6; i++)
        {
            let newArr = arr.slice(i*5, i*6+5);  // 也可以使用splice，但是splice方法会修改原数组
            let sum = 0;
            for (let j=0; j<5; j++)
            {
                sum += newArr[j];
            }
            average[i] = sum / 5;
        }
        alert(average);
</script>

数组引用：
1. 基本数据类型在赋值和传值的时候不会引用

2. 但是数组在赋值的时候会引用，即复合数据类型是一种引用数据类型。若要实现deepcopy，可以使用concat()方法。

变量的声明提升和省略var：

     预编译，在代码开始运行前，会为所有需要分配内存的变量和函数分配内存。在当前作用域声明的变量以及函数会提升到整个代码的最前面去运行。

     省略var声明变量，变量会被强制声明为全局变量，这是一种不规范，不严格的写法，但是由于JavaScript的限制较为宽松，所以不算是错的，但是不推荐这种写法。

二维数组：

<script>
        var arr1 = [1,2,3];
        var arr2 = [11,22,arr1];
        alert(arr2[2][1]);
</script>

javascript中的ECMA5严格模式：

1. 严格模式： 

  严格模式使得JavaScript的语法更加严格。严格模式的目的是为了：

a.消除JavaScript语法的不合理，不严谨之处

b. 消除代码运行的一些不安全之处，保证代码安全运行。

c. 提高编译器效率，增加运行速度。 

在需要使用严格模式的作用域下：利用 ”user strict“即可，不推荐将严格模式写在全局。

<script>
        "use strict";    // 进入严格模式
        var arr1 = [1,2,3];
        var arr2 = [11,22,arr1];
        alert(arr2[2][1]);
 </script>

严格模式下的保留字：
implements, interface, let, package, private, protected, public, static, yield

ECMA5新增的数组方法：

.indexOf(item, start):  在数组中从start位置开始，查找元素item第一次出现的下标，start可以省略，默认值是0

.forEach()数组遍历的方法：

<script>
        "use strict";    // 进入严格模式
        var arr1 = [1,2,3,4,5];
        arr1.forEach(function (item, index, arr) {
            document.write(item + "," + index + "," + arr + "<br>");
        });        // forEach会自动生成三个参数
</script>

.map() ： 将某种对元素的操作映射到数组中：

<script>
        "use strict";    // 进入严格模式
        var arr1 = [1,2,3,4,5];
        var newArr = arr1.map(function (item, index, arr) {
            return item * 2;
        });
        alert(newArr);
</script>

.filter(): 对数组中的元素进行过滤，返回值是符合条件的元素组成的数组

<script>
        "use strict";    // 进入严格模式
        var arr1 = [1,2,3,4,5];
        var newArr = arr1.filter(function (item, index, arr) {
            return item > 2;
        });
        alert(newArr);
</script>

.some() 在数组中查找是否有符合条件的元素，返回值是布尔值

<script>
        "use strict";    // 进入严格模式
        var arr1 = [1,2,3,4,5];
        var res = arr1.some(function (item, index, arr) {
            return item > 2;
        });
        alert(res);
</script>

.erery(): 判断数组中每个元素是否都满足条件。

<script>
        "use strict";    // 进入严格模式
        var arr1 = [1,2,3,4,5];
        var res = arr1.every(function (item, index, arr) {
            return item > 2;
        });
        alert(res);
</script>

----------------------------------------------------------------------------------------------------------------------------

posted @   Alpha205  阅读(107)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae