首页 前端知识 JavaScript基础总结---重点

JavaScript基础总结---重点

2024-02-23 11:02:08 前端知识 前端哥 116 627 我要收藏

目录

    • JavaScript简介
      • 什么是JavaScript
      • 浏览器执行JS过程
      • JS的组成
      • JS的引入方式
    • 函数与作用域
      • arguments的使用
      • 全局变量与局部变量
      • 预解析
    • 对象
      • 创建对象的三种方式
        • 1.利用字面量创建对象
        • 2.利用 new Object 创建对象
        • 3.利用构造函数创建对象
      • 遍历对象属性
      • 变量、属性、函数、方法总结
      • new关键字执行过程
    • 内置对象
      • Math对象
      • Date对象
        • 获取时间的总毫秒
        • 倒计时案例
      • Array对象
        • 判断是否为数组
        • 数组排序
        • 数组索引
        • 案例数组去重
      • String对象
        • 基本包装类型
        • 字符串的不可变
        • 根据字符返回位置
        • 根据位置返回字符
        • 字符串操作方法
    • 简单类型与复杂类型
        • 不同的内存分配
        • 不同类型传参的区别

JavaScript简介

什么是JavaScript

  • JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)
  • 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行,也称为解释型语言,不需要被编译为机器码在执行,跟C++这种需要被编译的语言不一样
  • 现在也可以基于 Node.js 技术进行服务器端编程

浏览器执行JS过程

浏览器分成两部分:渲染引擎和JS 引擎

渲染引擎:用来解析HTMLCSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit

JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8

浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。

JS的组成

JavaScript的三大组成部分是:ECMAScriptDOMBOM
在这里插入图片描述

ECMAScript

ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM

DOM是文档对象模型(Document Object Model)的简称。是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

BOM

BOM 是浏览器对象模型(Browser Object Model)的简称。它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

JS的引入方式

1、行内式JS

<input type="button" value="" onclink="javascript:alert('你好')" />
  • 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如: onclink
  • 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
  • 可读性差,在 HTML 中编入 JS 大量代码时,不方便阅读
  • 特殊情况下使用

2、内嵌式JS

<script>
     alert('你好');
</script>
  • 可以将多行JS代码写到

3、外部JS

<script src="my.js"></script>
  • 利于HTML页面代码结构化,把单独JS代码独立到HTML页面之外,既美观,又方便
  • 引用外部JS文件的script标签中间不可以写代码
  • 适合于JS代码量比较大的情况

函数与作用域

arguments的使用

当我们不确定有多少个参数传递的时候,可以用 arguments来获取。在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。
arguments存放的是传递过来的实参
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点

  1. 具有 length 属性
  2. 按索引方式储存数据
  3. 不具有数组的 push , pop 等方法
    <script>
        // 当我们不确定有多少个参数传递的时候,可以用 arguments 来获取。
        //在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象。
        //所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。
        // 函数声明
        function fn() {
            console.log(arguments);  //里面存储了所有传递过来的实参
            console.log(arguments.length); // 3
            console.log(arguments[2]); // 3
        }

        // 函数调用
        fn(1,2,3);

        // 利用函数求任意个数的最大值
        function maxValue() {
            var max = arguments[0];
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(maxValue(1,2,3,4));;
    </script>

全局变量与局部变量

全局变量

  • 在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)
  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下 var 声明的变量 是全局变量
  • 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)

局部变量

  • 在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
  • 局部变量只能在该函数内部使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的形参实际上就是局部变量

区别
全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

<script>
    // 现阶段没有块级作用域{},只有全局和局部,es6才新增块级

    // 在C++不行
    // if(3 < 5) {
    //     int num = 10;
    // }
    // cout<<num;

    if(3 < 5) {
        var num = 10;
    }
    console.log(num);


    // 报错,局部变量只能在里面使用
    function sort() {
        var num2 = 22;
    }
    console.log(num2);
</script>

预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
预解析:js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面

代码执行:从上到下执行JS语句

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined,为什么在函数声明之前就可以调用函数。

<script>
    // js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面

    // 1.undefined
    console.log(num1);
    var num1 = 11;
    // var num1;
    // console.log(num1);
    // num1 = 11;

    // 2.22
    fun1();
    function fun1() {
        console.log(22);
    }

    // 函数声明       
    // fun1();
    // function函数提升到当前作用域(全局)最前面声明
    // function fun1() {
    //     console.log(22);
    // }
    
    // 3.报错
    fun2();
    var fun2 = function() {
        console.log(33);
    }
    // var fun2;
    // fun2();函数未声明就调用,报错
    // fun2 = function() {
    //     console.log(33);
    // }
</script>

对象

创建对象的三种方式

1.利用字面量创建对象

对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法
{ } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

// 1.{}字面量
var obj = {
    name: 'hai',
    sex: '男',
    fun: function() {
        alert('大家好');
    }
}
// 调用对象的方式
console.log(obj.name);
console.log(obj['name']);
obj.fun();
2.利用 new Object 创建对象

var 对象名 = new Object();

var obj2 = new Object();
obj2.name = 'hhh';
obj2.fun2 = function() {
    alert('你好');
}
console.log(obj2.name);
console.log(obj2['name']);
obj2.fun2();
3.利用构造函数创建对象

构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
使用构造函数要注意以下两点:

  1. 构造函数用于创建某一类对象,其首字母要大写
  2. 构造函数要和 new 一起使用才有意义
function Star(uname ) {//大写
    this.name = uname;
    this.fun3 = function(sang) {
        console.log(sang);
    }
}
new Star();//空对象
var jjl = new Star('周杰伦');
console.log(typeof jjl);//typeof 运算符返回数据类型
console.log(jjl.name);
jjl.fun3('稻香');

遍历对象属性

for(var k in jjl) {
    console.log(k);//返回属性
    console.log(jjl[k]);//返回属性值
}

变量、属性、函数、方法总结

变量:单独声明赋值,单独存在
属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
函数:单独存在的,通过“函数名()”的方式就可以调用
方法:对象里面的函数称为方法,方法不需要声明,使用 “对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。

new关键字执行过程

new 在执行时会做四件事:

  1. 在内存中创建一个新的空对象。var jjl = new Star('周杰伦');
  2. 让 this 指向这个新的对象。this.name = uname;
  3. 执行构造函数里面的代码,给这个新对象添加属性和方法
  4. 返回这个新对象(所以构造函数里面不需要return)

内置对象

JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等

Math对象

Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。与其他全局对象不同的是,Math 不是一个构造器。Math 的所有属性与方法都是静态的。

<script>
    console.log(Math.max(1,2,3));

    // 封装自己的数学对象
    var myMath = {
        max: function () {
            var max = arguments[0];
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
    }
    console.log(myMath.max(1,2,3,4));
    console.log('\n');
    // 取整
    console.log(Math.floor(1.2));//向下取整1
    console.log(Math.floor(1.6));//1
    console.log(Math.ceil(1.2));//向上取整2
    console.log(Math.ceil(1.6));//2
    // 四舍五入
    console.log(Math.round(1.2));//1
    console.log(Math.round(1.6));//2
    console.log(Math.round(-1.2));//-1
    console.log(Math.round(-1.5));//-1特殊,.5往大的取
    console.log('\n');
    // 随机数函数 随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1(表示一种概率)
    console.log(Math.random());
    console.log('\n');

    // 得到两个数之间的随机整数,并且包含这两个整数(因为左闭右开所以要+1)
    function myRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    console.log(myRandom(1, 10));;

</script>

Date对象

创建一个 JavaScript Date 实例,该实例呈现时间中的某个时刻。Date 对象则基于Unix Time Stamp,即自 1970 年 1 月 1 日(UTC)起经过的毫秒数。

  • Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
  • 创建一个新Date对象的唯一方法是通过new操作符
  • Date 实例用来处理日期和时间
方法名说明代码
getFullYear()获取当年dObj.getFullYear()
getMonth()获取当月(0-11)dObj.getMonth()
getDate()获取当天日期dObj.getDate()
getDay()获取星期几(周日0到周六6)dObj.getDay()
getHours()获取当前小时dObj.getHours()
getMinutes()获取当前小时dObj.getMinutes()
getSeconds()获取当前秒钟dObj.gerSeconds()
<script>
    // 日期对象Date()  是一个构造函数 必须使用new来调用我们创建的对象
    var arr = new Array();
    // 如果没有输入任何参数,则 Date 的构造器会依据系统设置的当前时间来创建一个 Date 对象。
    var date = new Date();
    console.log(date);
    // 参数常用写法1.数字 2.字符串
    // console.log(Date('2022-10-1 20:55:10'));没new实例化,不能实现
    var date1 = new Date('2022-10-1 20:55:10');
    console.log(date1);
    console.log('\n');

    var date2 = new Date();
    console.log(date2.getFullYear());
    console.log(date2.getMonth() + 1);//0~11月
    console.log(date2.getDate());
    console.log(date2.getDay());//1~6~0星期天是0
    

    // 封装一个函数返回当前的时分秒 格式 08:08:08
    function getTimer() {
        var time = new Date();
        var h = time.getHours();
        h = h < 10 ? '0' + h : h;
        var m = time.getMinutes();
        m = m < 10 ? '0' + m : m;
        var s = time.getSeconds();
        s = s < 10 ? '0' + s : s;
        return h + ':' + m + ':' + s;
    }
    console.log(getTimer());
</script>
获取时间的总毫秒
<script>
    // 获取Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数

    // 实例化Date对象
    var date = new Date();

    // 1 .通过 valueOf()  getTime() 用于获取对象的原始值
    console.log(date.valueOf());  //得到现在时间距离1970.1.1总的毫秒数
    console.log(date.getTime());

    // 2.简单的写法
    var date1 = +new Date();  // +new Date()返回的就是总的毫秒数,
    console.log(date1);

    // 3. HTML5中提供的方法 获得总的毫秒数 有兼容性问题
    console.log(Date.now());

</script>
倒计时案例
<script>
    function getTimer(time) {
        var end = +new Date(time);
        var now = +new Date();
        var countDown = end - now;
        countDown /= 1000;
        var d = parseInt(countDown / 60 /60 / 24);
        var h = parseInt(countDown / 60 /60 % 24);//取余24进位
        var m = parseInt(countDown / 60 % 60);
        var s = parseInt(countDown % 60);//取余60进位
        return d + '天' + h + '时' + m + '分' + s + '秒';
    }
    console.log(getTimer('2022-10-11 22:43:20'));;
</script>

Array对象

创建Array数组对象的两种方式

  • 字面量方式
  • new Array()
判断是否为数组

两种方法:

  1. instanceof运算符,可以判断一个对象是否属于某种类型
  2. Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
<script>
    var arr = [];
    var obj = {};
    // 1.instanceof 运算符 检测是否为数组,可以翻译为“是”
    console.log(arr instanceof Array);
    console.log(obj instanceof Array);

    // 2.Array.isArray(参数);h5新增方法  IE9以上版本支持
    console.log(Array.isArray(arr));
    console.log(Array.isArray(obj));
</script>
数组排序
方法名说明是否修改原数组
reverse()颠倒数组中元素的顺序,无参数该方法会改变原来的数组,返回新数组
sort()对数组的元素进行排序该方法会改变原来的数组,返回新数组
<script>
    var arr = [3,22,4,1];
    arr.sort()
    console.log(arr);//默认排序顺序是在将元素转换为字符串,22不生效

    // 解决  内联函数  要比较数字而非字符串,比较函数可以简单的用 a 减 b,如下的函数将会将数组升序排列 反之
    arr.sort(function(a, b) {
        return a - b;
    });
    console.log(arr);
</script>
数组索引
方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在返回索引号,如果不存在,则返回-1
lastIndexOf()在数组的最后一个索引,从后向前索引如果存在返回索引号,如果不存在,则返回-1
案例数组去重

去除数组[1,2,3,3,4,4]中重复的元素
核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。

<script>
    function unique(arr) {
        var newArray = [];
        for (var i = 0; i < arr.length; i++) {
            if (newArray.indexOf(arr[i])== -1) {//新数组不存在就加入
                newArray.push(arr[i]);
            }
        }
        return newArray;
    }
    var demo = unique([1,2,3,3,4,4]);
    console.log(demo);
</script>

String对象

基本包装类型

为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。例如字符串可以调用length方法求其长度。
把基本数据类型包装为复杂数据类型,其执行过程如下 :

// 1.生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;
字符串的不可变

字符串里面的值不可变,虽然看上去可以改变内容,本质是地址变了,内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候,常量'abc'不会被修改,依然在内存中
// 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
var str = '';
for(var i = 0; i < 1000000;  i++){
    str += i;
}
console.log(str);
// 运行出结果需要花费大量时间,因为需要不断的开辟新的空间

根据字符返回位置

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

方法名说明
indexOf(‘要查找的字符’,开始的位置)返回指定内容在元字符串中的位置,如果找不到就返回-1,开始的位置是index索引号
lastIndexOf()从后往前找,只找第一个匹配的

查找重复字符串案例
查找字符串 "aoooaaoo"中所有o出现的位置以及次数
核心算法:先找到第一个o,只要str.indexOf('o')不为-1(即还有)就继续往后找

<script>
    var str = "aoooaaoo";
    var index = str.indexOf('o');
    var num = 0;
    while (index != -1) {
        console.log(index);
        num++;
        index = str.indexOf('o', index + 1);
    }
    console.log(num);
</script>
根据位置返回字符
方法名说明使用
charAt(index)返回指定位置的字符(index字符串的索引号)str.charAt(0)
charCodeAt(index)获取指定位置处字符的ASCII码(index索引号)str.charCodeAt(0)
str[index]获取指定位置处字符HTML,IE8+支持和charAt()等效

判断一个字符串 “aeieeouuee” 中出现次数最多的字符,并统计其次数
核心算法:利用charAt(index)遍历字符串,字符储存给对象,最后遍历对象

<script>
    // 有一个对象 来判断是否有该属性 对象['属性名']
    var obj = {
        sex: '男'
    };
    if (obj['sex']) {
        console.log(true);
    } else {
        console.log(false);
    }

    // 判断一个字符串 'aeieeouuee' 中出现次数最多的字符,并统计其次数。
    // 利用charAt(index)遍历字符串,字符储存给对象,最后遍历对象
    var str = "aeieeouuee";
    var o = {};
    for (var i = 0; i < str.length; i++) {
        var chars = str.charAt(i);
        if (o[chars]) { //如果字符存在,属性值加加
            o[chars]++;
        } else {
            o[chars] = 1; 
        }
    }
    console.log(o);
    // 遍历对象
    var max = 0;
    var ch = '';
    for (var k in o) {
        if (o[k] > max) {
            max = o[k];
            ch = k;
        }
    }
    console.log(max);
    console.log('最多的字符是' + ch);
</script>
字符串操作方法
方法名方法名 说明
concat(str1,str2,str3…)用于连接两个或对各字符串。拼接字符串
substr(start,length)从 start 位置开始(索引号), length 取的个数。
slice(start,end)从 start 位置开始,截取到 end 位置 ,end 取不到 (两个都是索引号)
substring(start,end)从 start 位置开始,截取到 end 位置 ,end 取不到 (基本和 slice 相同,但是不接受负)
replace(被替换的字符,要替换为的字符串)在字符串中用一些字符替换另一些字符
split(‘分隔符’)将字符串切分为数组
<script>
    // 连接与截取
    var str = '1234';
    console.log(str.concat('456')); //1234456
    console.log(str.substr(2, 2)); //34

    // 替换
    console.log(str.replace('1', '0')); //0234
    // 替换所有e
    var str2 = 'aeeeiou';
    while (str2.indexOf('e') != -1) { //只要存在就替换
        str2 = str2.replace('e', 'E');
    }
    console.log(str2); //aEEEiou

    // 切分字符串为数组 对比 join把数组转换为字符串
    var str3 = '1,2,3,4';
    console.log(str3.split(',')); //['1', '2', '3', '4']
</script>

简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型

基本数据类型:在存储时变量中存储的是值本身,如:
string ,number,boolean,undefined,null
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用)如:
通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等

不同的内存分配

简单类型
变量的数据直接存放在变量(即栈空间中)

引用类型
栈空间里存放的是地址,真正的对象实例存放在堆空间中,栈的地址指向堆区的对象

不同类型传参的区别

知道了数据不同的内存分配,那么参数传递的变量也是不一样的,简单类型传参是把一个值复制给了形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。
而把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2508.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!