【JS】知识点

最新推荐文章于 2024-07-11 20:55:36 发布

步萌ཽ

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量48

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_66288119/article/details/129657897

版权

文章目录

计算机编程基础
JS基础
JS语法
DOM

计算机编程基础

计算机语言有机器语言、汇编语言、高级语言
在这里插入图片描述

编译器	编译器是在代码执行之前进行编译，生成中间代码文件。
解释器	解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)。

JS基础

JavaScript 是一种运行在客户端的脚本语言
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行。
解释型语言
动态语言
基于原型的面向对象
JavaScript 的作用
表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效、服务端开发(Node.js)、桌面程序(Electron)、App(Cordova)
控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)
在这里插入图片描述

ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS语法

作用域


全局作用域	整个script标签或者是一个单独的js文件
局部作用域	在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
块级作用域(新增)	块级作用域指在代码块 `{}` 里面定义的变量，只会在当前代码块有效，如果外层作用域下想访问该变量，会报引用错误异常。使用关键字 `let` 或 `const` 定义块级作用域的变量。

作用域链: 是js的一种查找方式决定了变量和函数向上一级作用域查找的过程

预解析

分为变量预解析(变量提升) 和函数预解析(函数提升)
(1) 变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作
(2) 函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

数据类型

基本类型：String、Number、boolean、null、undefined。
引用类型：object。里面包含的 function、Array、Date。
判断数据类型：typeof 或 instanceof 或 Object.prototype.toString.call(value)

深浅拷贝

在这里插入图片描述
浅拷贝：拷贝的是基本类型的值，引用类的内存地址。
深拷贝：是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

JSON.parse(JSON.stringify(obj))
递归实现
jQuery的extend方法实现深拷贝
var newArray = $.extend(true,[],arr); // true为深拷贝，false为浅拷贝
Object.assign(obj1, obj2)
扩展运算符…
concat、slice

对象


原生对象	String Number Boolean Object Array Function Date Error RegExp(正则)
内置对象	Global Math
宿主对象	DOM BOM
全局对象	window
自定义对象	程序员自己定义的对象 var obj = {};

for(var k in obj) {
console.log("属性名:"+k);
console.log("属性值:"+obj[k]);
}
console.log(mc.hasOwnProperty("age"));//检查对象自身中是否含有该属性

原型与原型链

当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性prototype，指向该构造函数的原型对象，我们可以通过__proto__ 来访问该属性
在这里插入图片描述

原型链
当在实例化的对象中访问一个属性时，首先会在该对象内部(自身属性)寻找，如找不到，则会向其__proto__指向的原型中寻找，如仍找不到，则继续向原型中__proto__指向的上级原型中寻找，直至找到Object.prototype.__proto__为止（值为null），这种链状过程即为原型链。
原型链的作用：查找对象的属性（方法）

函数


回调函数	当一个动画执行完成后还要继续执行的函数就是回调函数作为实参传递到另一个函数中的函数就是回调函数
匿名函数	没有名字的函数匿名函数不能直接使用将函数转成表达式外层加上()
自执行函数 /立即执行函数 /IIFE	优点: 1. 不需要取名字不会造成全局变量名的占用 2. 声明的时候直接执行完成在内存中不占空间 3. 避免代码的互相影响 4. 更优美
递归函数	函数里面自己调用自己必须有函数结束的条件注意: 不去做太大数字的计算

形参和arguments的关系: 互相影响
        // 形参: 形式参数 用来接收实参传递过来的数据
        // arguments: 实参的集合

        function fn1(x, y) {
            console.log(x, y, arguments);// 10 20 [10, 20]
            // 3.1 形参改变的时候 
            x = 30;
            console.log(x, y, arguments); // 30 20 [30, 20]

            // 3.2 arguments改变的时候
            arguments[1] = 'abc';
            console.log(x, y, arguments); // 30 'abc' [30, 'abc']
        }
        fn1(10, 20); // x=10 y=20

闭包

闭包: 可以访问其他函数内部变量的函数

function outer() {
    var a = 10;
    function inner() {
        a++;
        console.log(a);
    }

    return inner;
}

var fn = outer(); // inner
console.log(fn);
fn(); // 11
fn(); // 12
fn(); // 13

组成: 函数里面套函数内部函数访问外部函数的变量将内部函数返回回来
本质: 将函数内外联系起来的桥梁

优点: 扩大局部变量的作用范围闭包中的变量类似于全局变量一直存储在内存中
缺点: 数据的缓存比较大不参与垃圾回收机制必须手动释放

防抖节流


防抖	在事件触发的时候清除原有的定时器开启一个定时器在时间结束的时候执行一次代码让代码等待一段时间之后再执行缺点: 太过于生硬
节流	只能在固定时间内执行一次事件触发的时候判断当前是否有定时器存在有(说明现在有事件函数再触发) 没有(现在没有事件函数在触发) 可以触发事件

防抖

function debounce(t, fn) {
    // 定时器的唯一标识
    var timer = null;

    // 内部函数
    function inner() {
        clearTimeout(timer);
        timer = setTimeout(fn, t);
    };

    // 返回
    return inner;
}

节流

function throttle(t, fn) {
    var timer = null;

    function inner() {
        // 判断有没有定时器
        if (!timer) {
            timer = setTimeout(function () { // 1以上数字
                fn();

                // 变成没有定时器
                clearTimeout(timer);
                // 手动把timer变成假
                timer = null;
            }, t);
        }
    };

    return inner;
}

this指向

在这里插入图片描述

call( )方法可以将实参在对象之后依次传递
app1y( )方法需要将实参封装到一个数组中统一传递
fun.call(obj,2,3);
fun.apply(obj,[2,3]);

数组

方法：

Array.isArray()用于判断一个对象是否为数组
indexOf() lastIndexOf()查找元素索引

//遍历数组
for(var i=0 ; i<arr .1ength ; i++){
    console.log(arr[i]);
}
arr.forEach((item，index ，arr)=>{
 console.log(item);
});

push( )末尾添加元素
pop()删除末尾元素
unshift( )开头添加元素
shift( )删除开头元素
slice( )截取、提取指定元素.arr.slice(1,-2) ;
splice()删除、替换指定元素,影响原数组。arr.splice(0索引,1删除的数量,“替换”，“铁扇公主”, “红孩儿”);
concat( )连接数组。将新的数组返回
join()数组转换字符串
reverse( )翻转数组。影响原数组
sort( ) 数组排序。影响原数组

arr.sort(function(a,b){ 
    return a - b;//升序排列，如果a比b大，则a-b>0，会交换，结果会是前面的数会比后面的小
    return b - a;//降序排列，如果a比b大，则不会交换，结果会是前面的数比后面的大
});

在这里插入图片描述

Date对象


获取当前时间	如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间 var d = new Date( );
获取指定时间	创建一个指定的时间对象需要在构造函数中传递一个表示时间的字符串作为参数 //日期的格式月份/日/年时:分:秒 var d2 = new Date(“12/03/2011 11:10:30”);
getDate( )	获取当天日期
getDay( )	获取当前日期对象是周几会返回一个0- 6的值 0表示周日 1表示周一
getMonth( )	获取当前时间对象的月份会返回一个0-11的值 0表示1月 1表示2月 11表示12月
getFullYear( )	获取当前日期对象的年份
getHours() getMinutes() grtSeconds()	获取当前小时获取当前分钟获取当前秒钟
getTime()	获取当前日期对象的时间戳时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分日秒到当前日期所花费的毫秒数(1秒= 1000毫秒) 计算机底层在保存时间时使用都是时间戳 var time = d2. getTime(); //console.log(time/1000/60/60/24/365);

Math对象

Math和其他的对象不同，它不是一个构造函数
它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法
比如Math.PI表示的圆周率


Math.abs ( )	可以用来计算一个数的绝对值
Math.ceil( )	可以对一个数进行向上取整，小数位有值就自动进1
Math. floor( )	可以对一个数进行向下取整，小数部分会被舍掉
Math. round( )	可以对一个数进行四舍五入取整
Math. random( )	可以用来生成一个（0- 1）之间的随机数生成一个[0- x]之间的随机数 Math. round (Math. random( )x) 生成一个[x-y]之间的随机数 Math. round(Math. random( )(y-x)+x)
Math.max( ) Math.min()	可以获取多个数中的最大值可以获取多个数中的最小值
Math.pow(x,y)	返回x的y次幂 console. log(Math. pow(12,3));
Math.sqrt()	用于对一个数进行开方运算 console. log(Math.sqrt(2));

String对象

var str = “Hello Atguigu” ;
在底层，字符串是以字符数组的形式保存的[“H”,“e”,“l”]


length长度	可以用来获取字符串的长度
charAt( )获取字符	可以返回字符串中指定位置的字符根据索引获取指定的字符 var result =str. charAt(6); var result =str[6];//更简单
charCodeAt()	获取指定位置字符的字符编码(Unicode编码)
fromCharCode( )	String. fromCharCode( ) 可以根据字符编码去获取字符 result = String. fromCharCode(72);//H result = String. fromCharCode(0x72);//16进制
concat( ) 连接	可以用来连接两个或多个字符串作用和+一样 result = str. concat(“你好”, “再见”);
indexof( ) 索引	该方法可以检索一个字符串中是否含有指定内容如果字符串中含有该内容，则会返回其第一次出现的索引如果没有找到指定的内容，则返回- 1 可以指定一个第二个参数，指定开始查找的位置
lastIndexOf( )	该方法的用法和indexOf( )一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找也可以指定开始查找的位置
slice( ) 截取	可以从字符串中截取指定的内容不会影响原字符串，而是将截取到内容返回参数: 第一个，开始位置的索引(包括开始位置) 第二个，结束位置的索引(不包括结束位置) 如果省略第二个参数，则会截取到后边所有的也可以传递一个负数作为参数，负数的话将会从后边计算
substring( )	可以用来截取一个字符串，可以slice( )类似参数: 第一个:开始截取位置的索引(包括开始位置) 第二个:结束位置的索引(不包括结束位置) 不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用0 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
substr( )	用来截取字符串参数: 1.截取开始位置的索引 2.截取的长度
split() 拆分	可以将一个字符串拆分为一个数组参数: 需要一个字符串作为参数，将会根据该字符串去拆分数组如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
toUpperCase( ) toLowerCase ( )	将一个字符串转换为大写并返回将一个字符串转换为小写并返回

字符串的不可变
当重新给str赋值的时候，常量’abc’不会被修改，依然在内存中。重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
由于字符串的不可变，在大量拼接字符串的时候会有效率问题，这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间。

正则

var变量= new RegExp("正则表达式" ,'匹配模式');
var变量= /正则表达式/匹配模式
var result=reg.test(str)//符合正则返回true，否则返回false

i 忽略大小写
g 全局匹配模式


检查一个字符串中是否含有 a	reg = /a/;
检查一个字符串中是否有a或b	使用
检查一个字符串中是否有字母	[a-z] 任意小写字母 [A-Z]任意大写字母 [A-z ]任意字母 reg=/A-Z]/
检查一个字符串中是否含有abc或adc或aec	reg =/a[bde]c/
检查一个字符串中是否含有ab以外的字符	[^] 除了是否有除了后面的字符串之外的字符 reg = /[^ab]/;
检查一个字符串中是否含有aaa	量词通过量词可以设置一个内容出现的次数 var reg = /a{3}/; 量词只对它前边的一个内容起作用 {n}正好出现n次 //ababab reg = /(ab){3}/;
{m,n}	出现m-n次，m到n次 reg/ab{1,3}c/ ;
{m,}	m次以上 reg/ab{3,}c/ ;
*	0个或多个，相当于{0,} reg = /ab*c/ ;
+	至少一个，相当于{1,} reg = /ab+c/ ;
？	0个或1个，相当于{0,1} reg = /ab?c/ ;
检查一个字符串中是否以a开头	^表示开头 $表示结尾<br>reg = /^a/; //匹配开头的a<br>reg = /a$ / ; //匹配结尾的a
要求字符串必须完全符合正则表达式	如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式<br>reg = /^a$ / ;//以a开头并且以a结束 console.log(reg. test(“a”)); reg = /^a
检查一个字符串中是否含有.点	.表示任意字符
转义字符\|在正则表达式中使用\作为转义字符 .来表示. \表示<br>var reg = /./ ; reg = /\/;
	\w 任意字母、数字、_ [A-z0-9_] \W 除了字母、数字、_ [^A-zθ-9_ ] \d 任意的数字 [0-9] \D 除了数字 [^0-9] \s 空格 \S 除了空格 \b 单词边界 \B 除了单词边界

字符串和正则相关的方法


split( ) 拆分	可以将一个字符串拆分为一个数组方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串这个方法即使不指定全局匹配，也会全都拆分 //根据任意字母来将字符串拆分 `var result = str .split(/[A-z]/);`
search( ) 搜索	可以搜索字符串中是否含有指定内容如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回- 1 只会查找第一个，即使设置全局匹配也没用它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串 //搜索字符串中是否含有abc或aec或afc r`esult = str. search(/a[bef]c/ );`
match( ) 提取	match( )会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果可以根据正则表达式，从一个字符串中将符合条件的内容提取出来默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容 `str = "1a2b3c4d5e6f7A8B9C";<br>result = str. match(/[a-z]/ig);`
replace( ) 替换	可以将字符串中指定内容替换为新的内容参数: 1.被替换的内容，可以接受一个正则表达式作为参数 2.新的内容 `result=str.replace(/a/g , "@_@");<br>result = str.replace(/[a-z]/gi ,'');`

DOM

在这里插入图片描述

步萌ཽ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JS】知识点

当在实例化的对象中访问一个属性时，首先会在该对象内部(自身属性)寻找，如找不到，则会向其__proto__指向的原型中寻找，如仍找不到，则继续向原型中__proto__指向的上级原型中寻找，直至找到Object.prototype.__proto__为止（值为null），这种链状过程即为原型链。当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性prototype，指向该构造函数的原型对象，我们可以通过__proto__ 来访问该属性。里面包含的 function、Array、Date。
复制链接

扫一扫