JavaScript的基础知识

New924

已于 2023-02-15 15:52:52 修改

阅读量87

点赞数

分类专栏： HTML+CSS+JS 文章标签： javascript 前端 html

于 2023-02-15 15:51:01 首次发布

本文链接：https://blog.csdn.net/New924/article/details/128816593

版权

HTML+CSS+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

01：简介

JS是一个轻量级的脚本语言，不具备开发系统的能力。而是用来编写控制其它大型应用程序的脚本。

02：语句，标识符

<!-- script标签需放置在body标签中 -->
  <script>
    // 下面为一条语句，JS为一条语句为单位。num为标识符，也称为变量名。变量名不能以数字开头
    var num = 10;
  </script>

03：变量

程序或者页面需要一些数据需要在JS中创造出来称之为变量。

变量提升

 <script>
    console.log(num)  //控制台不会报错，结果为“undefined”先声明，再赋值
    var num = 10;
  </script>

04: 数据类型

ES5中有6种数据类型：数字，字符串，布尔，null，对象，undefined

ES6中新增两种。共8种

05：运算符

a: typeof运算符>判断数据类型使用(基本数据类型)

使用方法：typeof 变量名

b: 算术运算符：+，-，*， /，%，++x， --y

c: 赋值运算符：=，+=，-=，*=，%=

d: 比较运算符：一共有8种，>，<，<=，>=，==，===，!=， !==

e: 布尔运算符：取反运算符！，且运算符&&，或运算符||

f : 三目运算符：（条件）？表达式1：表达式2

06：条件语句

a: if语句

b: if...else语句 if...else if...else语句

c: switch语句

 <script>
    var num = 1
    switch (num) {
      case 1:
        break;

      case 2:
        break;

      default:

    }
  </script>

07：循环语句

<script>
    //输出1-100的整数的和   使用for
    var sum = 0
    for (var i = 1; i <= 100; i++) {  //初始化表达式， 条件， 迭代因子  中间用分号隔开
      sum += i;
    }
    
    //输出1-100的整数的和   使用while
    var i=1;
    var sum1=0;
    while(i<=100){
      sum1+=i;
      i++;
    }
    console.log(sum1);
  </script>

// 打印九九乘法表
    for (var i = 1; i <= 9; i++) {
      document.write("<br/>")
      for (var j = 1; j <= i; j++) {
        sum = i * j;
        document.write(i + "*" + j + "=" + sum + " ")
      }
    }

break:跳出循环； continue:跳出本轮循环，继续循环符合条件

08：字符串方法

a: charAt() 通过下标查找字符。如果值为负数或者大于字符串长度返回为空字符串" "

b: concat() 连接字符串。不改变原来字符串的值

c: substring(x,y)截取字符串。x表示起始位置，y表示结束位置（不包含）

d: substr(x,y)截取字符串。x表示起始位置，y表示你需要截取的字符串的长度

e: indexof()判断一个字符串在另一个字符串是否存在，存在返回位置。不存在返回-1

f: trim()去除字符串两端的空格。 ES6新增：trimEnd()和trimStart()

g: split("")分割字符串，返回一个数组

09：数组方法

a: Array.isArray(a)判断a是不是一个数组。返回true表示是数组

b: arr.push("a")数组尾部添加a元素，会改变原来的数组

c: arr.pop()删除数组的最后一个元素，会改变原来的数组

d: arr.shift()删除数组的第一个元素，会改变原来的数组

e: arr.unshift("a")数组头部添加a元素，会改变原来的数组

f: arr.join("")数组转化为字符串

g: arr.concat(arr1)合并数组

h: arr.reverse()数组反转

I：arr.indexof("a")同字符串一样，查找. 常用于数组去重！

10：函数

一段可以反复调用的代码块称之为函数

<script>

    // 函数声明 函数也有提升，同变量一样，可以先调用，再声明
    function test (x,y) {
      return x+y  //return 后面不会再执行！
    }
    //函数调用
   var num= test(10,20);

   console.log(num);


  </script>

11: 对象

对象是JS语言的核心概念。对象就是一组键值对的集合（key-value）

<script>

    // 声明对象user
    var user={
      name:lance,
      age:18
    }

  </script>

a: Math对象

1，Math.abs(-1) 返回绝对值1

2，Math.max(10,20,30)返回最大值30

3，Math.min(10,20,30)返回最小值10

4，Math.floor(10.3)取整10 Math.ceil(10.3)取整11

5，Math.random()返回一个大于等于0小于1的随机数

<script>

    // 获取10到20之间的随机整数
    function test(min,max){
      var result=Math.random()*(max-min)+min;
      result=Math.floor(result)
      console.log(result);
    }
    
    test(10,20)

</script>

b: Date对象

1，Date.now()返回一个时间戳。代表当前时间到1970年1月1日0点0分0秒的毫秒数

12：DOM概述

JS通过DOM去操作页面。DOM是JS操作界面的接口。两者没有直接的关系。作用是将网页转化成一个JS对象，从而用JS对页面进行各种操作。

DOM的最小组成为节点：

获取页面元素

<script>
      //JS获取页面元素
    var test1=document.getElementsByTagName("标签名");
    var test2=document.getElementsByClassName();
    var test3=document.getElementsByName();
    var test4=document.getElementById();
    var test5=document.querySelector("选择器");
    var test6=document.querySelectorAll("选择器");
  </script>

创建页面元素

 <script>
      //创建页面元素
      //01：创建页面标签
      var test1=document.createElement("p");
      //02: 创建文本信息
      var test2=document.createTextNode("我是文本")
      //03：把文本放到标签内
      test1.appendChild(test2)
  </script>

13：防抖

<body>
  <h3>哈哈</h3>
  <h3>哈哈</h3>
  <h3>哈哈</h3>
  <h3>哈哈</h3>
  <h3>哈哈</h3>
  <h3>哈哈</h3>
  <h3>哈哈</h3>
  <script>

    function debounce(fn,delay){
      var timer=null;
      return function(){
        if(timer){
          clearTimeout(timer)
        }
        timer=setTimeout(fn,delay)
      }
    }
    
    //滚动事件
    window.onscroll=debounce(scrollHandle,500);

    function scrollHandle(){
      var scrollTop=document.documentElement.scrollTop;
      console.log(scrollTop)
    }

  </script>
</body>

14：ES6新语法

a: 对象的结构赋值

<script>
    //对象的结构赋值
    var {name,age}={name:"测试",age:20};
    console.log(name); //输出“测试”
  </script>

b: 字符串扩展：Unicode万国码； for...of...循环；模板字符串嵌入变量

c: 扩展运算符（...）

d: 数组的新增方法：Array.from()将伪数组变为真正的数组；Array.of()将一组值转化为数组

e: 对象扩展：1，对象的简介表示法 2，属性名表达式 3，对象的扩展运算符

f: 箭头函数：简化回调函数

g: Set()数组结构：add()添加数据；delete()删除数据；has()判断数据是否存在；clear()清空数据

15：Promise对象

异步编程的一种解决方案，简单来说就是一个容器；里面保存着某个未来才会结束的事件。

16：Async函数

可以把异步操作变为同步操作

17：class的基本语法

<script>
    //ES5语法中类的写法，通过function 函数名首字母大写的形式
    function Persion(name, age) {
      this.name = name;
      this.age = age;
    }
    //通过prototype创建方法名getName
    Persion.prototype.getName=function(){
      console.log(this.name);
    }
    //new一个新的对象
    var p =new Persion("闫",20)
    //调用方法
    p.getName()




    //ES6语法中类的写法，通过class关键字
    class Persion1{
      //构造函数 实例属性
      constructor(name,age){
          this.name=name;
          this.age=age
      }
      //实例方法
      getName(){
        console.log(this.name);
      }
      //静态方法
      static sayHello(){
          console.log("你好！");
      }
    }

    //静态方法通过类名来调用
    Persion1.sayHello()

    var p=new Persion1("江",24)
    p.getName()


    //类的继承
    class Student extends Persion1{
      
    }

  </script>