JS一些原理和方法

天将降大任于我

已于 2022-09-08 14:48:46 修改

阅读量145

点赞数

分类专栏： js学习文章标签： javascript 前端 vue.js

于 2022-07-31 17:10:04 首次发布

本文链接：https://blog.csdn.net/smznbhh/article/details/126086693

版权

js学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

学习Vue时遇到的一些方法和知识点。

一、JS深度拷贝

1.深度拷贝和浅度拷贝的区别

对象和数组是通过指针去指向内存地址区来确定其位置。

对于浅拷贝只是复制了其指针，指向了同一块内存区域，在操作新数组或者对象时必然会影响到原数组或对象，也就是说改变新数组时，原数组也会进行改变。

而深度拷贝是完全复制了原数组或对象，也在内存区申请了新空间，改变新数组或对象不会影响到原数组。

2.如何进行深度拷贝

首先是浅度拷贝，浅度拷贝我理解的就是简单的进行赋值

代码如下（示例）：

let arr1=[1,2,3,4,5];
let arr2=arr1;

对于深度拷贝可以用ES5或者ES6的语法规则来，当然ES6比较简单快捷，对于单层和多层嵌套的数组或对象ES5和ES6也有不一样的语法。

ES5代码如下（示例）：

//ES5单层嵌套
let arr1=[1,2,3,4,5];
let arr2= ary1.concat();

//ES5多层嵌套
let arr1=[1,2,3,4,5];
 JSON.parse(JSON.stringify(ary1));

ES6代码如下（示例）：

//ES6单层嵌套
let arr1=[1,2,3,4,5];
let arr2= [...ary1];
//或者
let [...arr2]=arr1;

//ES6多层嵌套
let arr1=[1,2,3,4,5];
var arr2 = arr1.constructor === Array ? [] : {};  
        for (var i in arr1) {
             arr2[i] = deepCopy(arr1[i]);
        }

二、sort() 排序方法的使用

提示：sort()方法会改变原数组或对象
sort在没有传入参数时是根据各个字符的Unicode位来进行排序的

代码如下（示例）：

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
// 输出: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
// 输出: Array [1, 100000, 21, 30, 4]

sort可以传入一个排序函数或者两个参数，显而易见排序函数中有两个参数也就是可以直接传的两个参数

代码如下（示例）：
提示：为字符串时不排序

arr=[1,30,4,21,100000];
arr.sort((p1,p2)=>{
//升序
reture p1-p2;
// 输出: Array [1, 4, 21, 30, 100000]

//降序
reture p2-p1;
//输出: Array [100000, 30, 21, 4, 1]
})

三、判断数据类型

ES5数据类型共有6个：数值、字符串、布尔、对象、null、undefind

ES6又新加了symbol、bigInt
symbol（基本数据类型）是指独一无二的值，通过Symbol()生成的值都是唯一的，用来最为对象属性的标识符。

bigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示，数据必须加后缀n。

null被称为空对象指针：初始化对象时最好将其初始化为null。

undefined:变量没有初始化、函数参数没提供、对象中属性没赋值、函数没有返回值，这些都为undefind

1、判断基本数据类型

typeof x 。
x.constructor
Object.prototype.toString.call(x)

四、比较运算

<=、=、>=、==、!= 、! = =、 ===
在比较运算符中==和===存在比较差异，==只比较值是否一样，而===则是值和类型同时比较；同理!=和!==一样。

五、跳出循环

break: 跳出整个大循环
continue：只跳出本次循环，开始下一次循环

六、字符串方法

在字符串中如果要显示单引号或者双引号，需要转义在引号前加‘ \ ’用来转义。

charAt（）

用来返回字符串中某个位置的字符，允许为负或者比字符串索引大，但返回一个空字符。

concat ( )

用来连接两个字符串，返回一个新字符串，不改变原字符串，可接受多个参数，如果参数不为字符串，则该方法会先将其转换为字符串。
用+来也可以代替该方法，字符串拼接。

substring（）

用来从原字符串取出子字符串并返回，不改变原字符串，它的第一个参数表示开始位置，第二个参数表示结束位置（结果不包含）。
只传一个参数则会返回该位置到结束的字符串
第一个参数比第二个参数，则会自动交换位置
如果为负，则会从0开始

substr（）

与substring（）作用一样，但是参数不同
第一个参数为起始位置，第二个参数为长度
省略第二个参数则会从开始位置直到结束
如果第一个参数为负则会从倒数计算字符位置，第二个参数是负数，将会被自动转为0，返回空字符串

indexOf（）

用来确定一个字符串在另一个字符串中出现的位置，返回结果为匹配开始的位置。
也可以传入第二个参数，表示从该位置开始匹配

在ES6中新增：
（1）includes()：返回布尔值，判断是否找到参数字符串。
（2）startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
（3）endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
都支持第二个参数，表示从这个位置开始。

trim（）

用来去除字符串两端的空格，返回一个新字符串，不改变原字符串
去除的包括制表符（\t、\v）、换行符（\n）和回车符（\r）

ES6扩展方法trimEnd()和trimStart()方法，分别是去掉尾部和头部

split（）

利用规则来将字符串分割开，返回一个结果数组
如果参数为空字符串，则会分割每一个字符
不传参数则返回整个字符串，不做分割
第二个参数则是返回结果的个数

ES6其它新增字符串方法

repeat（）

用来将字符串重复指定次数返回，不改变原字符串
参数为正整数，则返回指定次数
参数为非负小数，则向下取整
如果参数是0~-1之间的数，则取整，为0
如果参数是NaN，则为0次
如果参数为负数或者Infinity，则报错
如果为字符串，则会先转换为数字

字符串补全

padStart（）:返回新字符串，表示用参数字符串从头补全原字符串。
padEnd（）:返回新字符串，表示用参数字符串从后边补全原字符串

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

七、数组方法

数组静态方法Array.isArray()

用来弥补typeof判断数组返回object的缺陷，该方法会返回布尔值表示参数是否为数组。

push()和pop()方法

push用来在数组末端添加一个或多个元素，会改变原数组
pop用来删除数组最后一个元素并返回，会改变原数组

shift（)和unshift()方法

shift用来删除数组第一个元素，并返回该元素，会改变原数组
unshift用来在数组头部添加元素，并返回添加元素的长度

join（）方法

用来以参数作为分割符，将所有数组成员连接为一个字符串并返回，如果不提供，默认为逗号。如果数组的成员为Null或undefind或空位，会被转层空字符串。

concat（）方法

用来多个数组合并，将新数组的成员，添加到原数组的后部，返回一个新数组，原数组不变。
参数除了数组外，还有可以传入其它类型的参数，并将其添加到原数组后边。

reverse（）方法

用来颠倒数组元素，返回改变的数组，原数组会改变

indexOf（）方法

用来返回给定元素在数组中第一次出现的位置，不存在返回-1
第二个参数表示开始查找的位置

变量提升（hoisting）

在JS引擎工作时，先解析代码，获取所有被声明的变量，然后顺序执行，所有的变量声明语句，都会被提升到代码的头部。

函数提升

JS引擎会将函数名视同变量一样，采用function声明函数时，整个函数会像变量一样提升到头部。

Math对象

Math.abs()

用来返回参数值的绝对值

Math.max()和Math.min()

返回参数中最大值或最小值
参数为空时，返回-Infinity或Infinity

Math.floor（）和Math.ceil（）

返回参数向下取整或者向上取整的值

Math.random()

返回一个0~1的随机数

某个范围的随机整数：

function f(min,max) {
    let result=Math.random()*(max-min)+min;
    result=Math.floor(result);
    return result;
  }

Date对象

JS原生的时间库

Date.now()

返回当前事件距离四件零点（1970年1月1日00：00：00 UTC）的毫秒数，相当于Unix时间戳乘以1000

时间戳

是指格林威治时间（1970年1月1日00：00：00 ）北京时间（1970年1月1日08：00：00 ）起到现在总秒数。

Date提供的get方法

cost d=new Date('January 6,2022');

getTime()：返回实例距离1970年1月1日的毫秒数
getDate()：返回实例对象对应每个月的几号
getDay()：返回星期几，从0开始
getYear()：返回距离1900的年数
getFullYear()：返回四位的年份
getMonth：返回月份，从0开始
getHours：返回小时
getMillisecinds：返回毫秒
getMinutes：返回分钟
getSeconds()：返回秒