学习JavaScript

最新推荐文章于 2024-09-14 17:16:17 发布

blockchain beginner

最新推荐文章于 2024-09-14 17:16:17 发布

阅读量338

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.youkuaiyun.com/qq_45783437/article/details/126693391

版权

JavaScript在网页中起什么作用？

答：JS是一门动态语言在网页中有交互的作用，即使网页产生动态效果。

JS有哪些书写方式？

答：

1. 行内式（不推荐不便于维护）

<input type="button" value="我是一个按钮" onclink="javascript:alert('Hello World')" />

2. 行外式（写在js文件中，使用script的src属性导入）

<script src="外部式写法.js"></script>

3. 内部式

<script>
    alert('hello!')
</script>

JavaScript的基础语法有哪些？

1. 注释

单行注释

//我是单行注释哦

多行注释

/*
    我是多行注释~
*/

2. 标识符

标识符，就是指给变量、函数、属性或函数的参数起名字。

标识符可以是按照下列格式规则组合起来的一或多个字符：

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字和保留字符。

3.变量

变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

如何声明变量？

//声明一个变量并赋值
var height = 180;

变量命名有哪些规则？

由字母(A-Z,a-z)，数字(0-9)，下划线(_)，美元符号($)组成
严格区分大小写。 var app; 和 var App; 是两个变量
不能以数字开头。
不能是关键字，保留字。例如：var,for,while
遵循驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

4. 数据类型

4.1值类型：储存于栈内存中

4.1.1数字型 Number

var height = 180;  //整数型
var height = 180.1 //小数型

4.1.2字符串型 String

字符串型可以是单双引号内的任意文本

var txt = '我是一个字~'
var txt = "我也是一个字~";

4.1.3 布尔型 Boolean

布尔值有两个：true和false

特殊：当布尔值和数字相加时，true代表1，false代表2.

4.1.4未定义 undefined

这个变量从根本上就没有定义
隐藏式空值

4.1.5空值 null

这个值虽然定义了，但它并未指向任何内存中的对象
声明式空值

问：null和undefined的区别？

null 和 undefined 都代表空，主要区别在于 undefined 表示尚未初始化的变量的值，而 null 表示该变量有意缺少对象指向。

引用一张神奇的图片

null和undefined在JS中有什么不同的表现形式？

typeof

typeof null  // 'object'
typeof undefined  // 'undefined'

== and ===

null == undefined  // true
null === undefined  // false
!!null === !!undefined  // true

4.2 复杂数据类型：储存在栈+堆内存

4.2.1对象 Object

对象是引用数据类型，是保存复杂数据类型的容器，它是多个属性(数据)和方法(功能)的集合

4.2.1.1对象的种类

内建对象：由ES标准中定义的对象，在任何的ES的实现中都可以使用
宿主对象：由js的运行环境提供的对象，目前来讲主要由浏览器提供的对象
自定义对象：由开发人员自己创建的对象

4.2.2数组 Array

数组是JS中的一个数据容器。它是引用类型之一，可以用来装多个数据,并且数组的长度可以动态的调整。

4.2.2.1数组的两种创建方式

字面量：var 数组名 = [组员1,组员2,组员3,.....]；
构造函数：var 数组名 = new Array[组员1,组员2,组员3,....];

4.2.3正则 RegExp （难！）

正则也叫规则，其用处是让计算机能够理解人类的规则

如何使用正则表达式

① 验证

验证是正则表达式最直接的应用，比如表单验证。

在说验证之前，先要说清楚匹配是什么概念。

所谓匹配，就是看目标字符串里是否有满足匹配的子串。因此，“匹配”的本质就是“查找”。

有没有匹配，是不是匹配上，判断是否的操作，即称为“验证”。

例如，判断一个字符串中是否有字母QAQ

使用test（）方法

//1.调用构造函数，创建正则对象
let ssg = new RegExp(/QAQ/);

//2.使用text方法对字符串进行验证
console.log( ssg.test('abc123'));

// ==>false

4.2.4日期 Date

Date()构造函数是javascript的核心语言部分，用来创建表示时间和日期的对象

实操案例：日历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <style>
        *{
            margin: 0; padding: 0;
        }
        ul{list-style: none;}

        .d1{
            width: 580px;
            height: 420px;
            margin: 50px auto;
            color: aliceblue;
            background: rgb(91, 69, 69);
        }

        .p1{
            height: 60px;
            /* 设置行高 */
            line-height: 60px;
            /* padding-left: 16px; */
            text-align: center;
        }
        .weeks,.calendar{
            /* 设置一个弹性盒子 */
            display: flex;
            flex-wrap: wrap;
            width: 500px; height: 50px;
            line-height: 50px;
            margin:0 auto;
        }
        .weeks span,.calendar li{
            width: 65px; height: 50px;
            text-align: center;
            /* 把鼠标指针变成手的形状 */
            cursor: pointer;
            /* display: inline-block; */
            /* float: left; */
            /* background: #000; */
        }
        .cday{
            border: 1px solid red;
        }
        li:hover.active{
            background: rgb(243, 9, 9);
        }
    </style>
</head>
<body>
    <div class="d1">
        <p class="p1">
            <span class="nian"></span>年
            <span class="yue"></span>月
        </p>
        <p class="weeks">
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
            <span>日</span>
        </p>
        <ul class="calendar"></ul>
    </div>
    <script>
        // 获取元素
        let nian = document.querySelector('.nian');
        let yue = document.querySelector('.yue');
        let calendar = document.querySelector('.calendar');
        let days = '';
        // let day = ' ';
        // 获取当前时间
        let years = new Date();
        let y = years.getFullYear();
        let m = years.getMonth()+1;
        // 让 cday 等于今天
        let cday = years.getDate();
        // console.log(m);
        nian.innerHTML = y;
        yue.innerHTML = m ;
        // 获取每个月的第一天是周几
        let week = new Date(y,m,-1).getDay();
        // console.log(week);
        // 获取每个月有多少天
        let day = new Date(y,m,0).getDate();
        // console.log(day);
        // 让本月的第一天对应正确的星期数
        for (let i = 1; i < week ; i++) {
            days += `<li></li>`;
        }
        // 添加本月的日期
        for(let i = 1; i <= day; i++){
            if (i === cday) {
                days += `<li class="cday">${i}</li>`;
            }else{
                days += `<li class="active ">${i}</li>`;
            }
            // console.log(days);
            calendar.innerHTML = days;
        }
    </script>
</body>
</html>

JS 中的堆栈是什么？

栈(stack):由操作系统自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
堆(heap)：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表

堆栈的区别和优缺点有哪些？

1. 栈：基础变量的值是存储在栈中，而引用变量存储在栈中的是指向堆中的数组或者对象的地址，这就是为何修改引用类型总会影响到其他指向这个地址的引用变量。（线性结构，后进先出）

优点：
（1）栈中的内容是操作系统自动创建、自动回收，占据固定大小的空间，因此内存可以及时得到回收，相对于堆来说，更加容易管理内存空间。
（2）相比于堆来说存取速度会快，并且栈内存中的数据是可以共享的，例如同时声明了var a = 1和var b =1，会先处理a，然后在栈中查找有没有值为1的地址，如果没有就开辟一个值为1的地址，然后a指向这个地址，当处理b时，因为值为1的地址已经开辟好了，所以b也会同样指向同一个地址。
缺点：
相比于堆来说的缺点是，存在栈中的数据大小与生存期必须是确定的，缺乏灵活性。

2、堆：堆内存中的对象不会随方法的结束而销毁，就算方法结束了，这个对象也可能会被其他引用变量所引用(参数传递)。创建对象是为了反复利用（因为对象的创建成本通常较大），这个对象将被保存到运行时数据区（也就是堆内存）。只有当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。

优点：
（1）堆是操作系统动态分配的大小不定的内存，因此方便存储和开辟内存空间。
（2）堆中保存的对象不会自动释放，一般由程序员分配释放，也可由垃圾回收机制回收，因此生存周期比较灵活。
缺点：
相比于栈来说的缺点是，存在堆中的数据大小与生存期是不确定的，比较混乱，杂乱无章。

附：微微老师的PPT

问：ES6有哪些新特性？

1.let & const
let，作用与var类似，用于声明变量
特性：

let 不能重复声明变量，var 可以重复声明变量；
块级作用域，es5中存在全局作用域、函数作用域、eval作用域；es6中引入了块级作用域，let声明的变量在块级作用域{}内有效
let声明的变量不存在var的变量提升问题

const,用于声明常量

注意事项：

一定要赋初始值
一般常量使用大写(属于编程规范)
常量值不能修改
存在块级作用域
对于数组和对象的元素修改，不算做对常量的修改，不会报错(因为引用数据类型保存的是内存地址，所以声明数组和对象时可以使用const声明，以此保证其保存的内存地址不变)

2.解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

① 数组的结构

        //创建一个数组      
        const demo = ['1', '2', '3']

        let [t1, t2, t3] = demo

        console.log('t1-----', t1) // 1
        console.log('t2-----', t2) // 2
        console.log('t3-----', t3) // 3

② 对象的结构

        const information = {
            name: 'lzt',
            age: '22',
            tell: function(){
                console.log(`I am handsome boy`)
            }
        }

        let {name, age, tell} = information

        console.log(name) // 'lzt'
        console.log(age) // '22'
        console.log(tell) // f(){...}
        tell() // I am handsome boy

3.模板字符串

特性：` `(反引号)内容中可以直接出现换行符，’ '和" "中则不可以，出现会报错,并且可以直接进行变量拼接。

4.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法（在属性名和变量名相同的情况下），这样的书写更加简洁。

<script>
			
      let name ='lzt'
      let age = 22
      //es6之前
      // let person={
      //     name:name,
      //     age:age
      // }

      //es6  声明对象时的属性名与引用的变量名相同就可以省略
      let person={
          name,
          age
      }
</script>