Javascript重点整理笔记（待补充完善）

基本数据类型

在这里插入图片描述

Symbol是新增的

在这里插入图片描述

通过throw new Error跳出循环

try {
    
     
    var array = ["first","second","third","fourth"]; 
    // 执行到第3次，结束循环 
    array.forEach(function(item,index){
    
     
        if (item == "third") {
    
     
            throw new Error("EndIterative"); 
        } alert(item);// first,sencond 
    }); 
} catch(e) {
    
     if(e.message!="EndIterative") throw e; };

position的几个属性？

官方解析：

static：对象遵循常规流。此时4个定位偏移属性不会被应用。

relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

fixed：- 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

扫描二维码关注公众号，回复： 15653863 查看本文章

sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（Css3)

知识点：前端工程师、2020

^d：匹配“以d开头”

^d+：匹配“以1或n个d开头”：dxxx、ddxxx、ddddxx

[^d]：匹配“非d的字幕”

[^d]+：匹配“1或者n个非d的字母”

在这里插入图片描述

普通函数可以修改变量名，立即执行函数不能修改变量名。不知道为啥。

普通函数：
function a(){
a = 34;
console.log(a) // 打印结果是34
}
a()

立即执行函数：
(function a(){
a = 34;
console.log(a) //打印结果是函数a
})()

在JavaScript中下面选项关于this描述正确的是（A）

在使用new实例化对象时,  this指向这个实例对象

将对象的方法赋值给变量A。执行A()时 该方法中的this指向这个对象。 eg:   var name='test' var a = {    name: 'ass',    getName: function() {    return this.name;   } } var b = a.getName; b();

在函数定义时,this指向全局变量

在浏览器下的全局范围内， this指向全局对象

在这里插入图片描述

正则表达式 ^d+[d]+ 能匹配下列哪个字符串？（C）

A 123

B 123a

C d123

D 123def

在这里插入图片描述

正则表达式

办公掌握下面这些就好了，up后面的举例偏专业，可以跳过哈哈
匹配符：
d? d出现0/1次
a＊ a可以出现0/多次
a+ a出现一次以上
a｛6｝ a出现6次
a｛2，｝ a出现2次以上
a｛2，6｝ a出现2-6次
匹配多个字符：
(ab)+ ab出现一次以上
或运算：
a (cat|dog) 匹配 a cat or a dog
a cat|dog 匹配 a cat or dog
字符类：
匹配由abc构成的数据【abc】+ abc出现一次以上 abc aabbcc
【a-zA-Z0-9】 ABCabc123
^ 排除【^0-9】匹配0-9之外的数据(包括换行符)
元字符
\d 数字字符 \d+ 匹配一个以上的数字
\D 非数字字符
\w 单词字符单词数字下划线即英文字符
\W 非单词字符
\s 空白符包含空格和换行符
\S 非空白字符
\b 单词的边界单词的开头或结尾单词与符号之前的边界
\B 非单词的边界符号与符号单词与单词的边界
. 任意字符不包含换行符
. 表示. 通过\进行了转意
^ 匹配行首 $ 匹配行尾
＊+｛｝贪婪匹配
https://www.wondershare. com
<.+> 会匹配整串因为是贪婪匹配
<.+?> 只匹配两个标签代码，➕? 设置为懒惰匹配

关于箭头函数下列说法错误的一项是：（D）

A 函数体内this的指向是定义时所在的对象，而不是使用时所在的对象

B 箭头函数内不能使用arguments对象

C 箭头函数不能使用yield命令

D 可以使用new创建一个箭头函数的实例

数组中的方法 — 不改变原数组的方法

1.concat（）把元素衔接到数组中。

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

2.every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true

3. filter（）返回满足断言函数的数组元素。

4. forEach（）为数组的每一个元素调用指定函数。

5. indexOf（）在数组中查找指定元素。如果找到的话返回该元素的索引没找到返回-1

6. join（）将数组的所有元素转化为字符串。

7.lastIndexOf（）在数组中反向查找。

8.map()从数组的元素中，计算出新的数组。

9.some（）测试是否至少有一个数组元素能让断言函数为真。

10.slice（）返回数组的一部分。

11.reduce（）从数组的元素中，计算出一个值。

参数接收一个函数函数中接收两个参数第一个是数组的值，第二个是初始值，不传的话就是0 循环调用该函数前一个的返回值是后面的第二个参数

12.reduceRight（）从右往左计算数组

如何把 7.25 四舍五入为最接近的整数（A）

```
Math.round(7.25)
```
```
Math.ceil(7.25)
```
```
Math.floor(7.25)
```
```
Math.rnd(7.25)
```

round() 方法可把一个数字舍入为最接近的整数：

ceil(x) 对数进行上舍入。
floor(x) 对 x 进行下舍入。

random() 返回 0 ~ 1 之间的随机数。

round(x) 四舍五入。

官方解析：js常见的继承方式

包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承，以及ES6新增的class继承，但不包括关联继承，D选项符合题意。

执行下列语句后，a.length的值为

 a.push(1, 2); //[1,2] 数组末尾添加 1,2
 a.shift(3, 4); //[2]shift（）会删除数组的第一个元素，里面写啥都没用
 a.concat([5, 6]); //[2]拼接数组，会返回新的数组，这里没接收返回的新数组 ，a没变
 a.splice(0, 1, 2); //[2]   删除下标为0的元素，同时替换为 2

下列表达式中结果为true的是(C,D)

A /^a[xyz]\d*/.test('^axd')

B /^a[xyz]\d*/.test('^axyz')

C /^a[xyz]\d*/.test('ax')

D /^a[xyz]\d*/.test('axyz123')

链接：https://www.nowcoder.com/questionTerminal/f25e30118d2d48f8a9fbc27142e48b9a?page=1&onlyReference=false
来源：牛客网

foo对象有att属性，那么获取att属性的值，以下哪些做法是可以的：（javascript） ADE

```
foo["att"]
```
```
foo("att")
```
```
foo{"att"}
```
```
foo.att
```
```
foo[["a","t","t"].join("")]
```

js中call()和apply()方法

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向，看个例子：

function add(a, b) {
    
    
    return a + b;
}

function sub(a, b) {
    
    
    return a - b;
}

console.log(add.call(sub, 2, 1));//3

为什么add.call(sub, 2, 1)的执行结果是3呢，因为call()方法改变了this的指向，使得sub可以调用add的方法，也就是用sub去执行add中的内容，再来看一个例子：

function People(name, age) {
    
    
    this.name = name;
    this.age = age;
}

function Student(name, age, grade) {
    
    
    People.call(this, name, age);
    this.grade = grade;
}

var student = new Student('小明', 21, '大三');
console.log(student.name + student.age + student.grade);//小明21大三

在这个例子中，我们并没有给Student的name和age赋值，但是存在这两个属性的值，这还是要归功于call()方法，它可以改变this的指向。
在这个例子里，People.call(this, name, age);中的this代表的是Student，这也就是之前说的，使得Student可以调用People中的方法，因为People中有this.name = name;等语句，这样就将name和age属性创建到了Student中。

总结一句话就是call()可以让括号里的对象来继承括号外函数的属性。

在JavaScript中，根据函数的调用方式的不同，this会指向不同的对象

call()
调用一个对象的方法，用另一个对象替换当前对象，可以继承另外一个对象的属性，它的语法是：
Function.call(obj[, param1[, param2[, [,…paramN]]]]);
obj：这个对象将代替Function类里this对象
params：一串参数列表
说明：call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为obj指定的新对象，如果没有提供obj参数，那么Global对象被用于obj。
apply()
和call()方法一样，只是参数列表不同，语法：
Function.apply(obj[, argArray]);
obj：这个对象将代替Function类里this对象
argArray：这个是数组，它将作为参数传给Function
说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个TypeError，如果没有提供argArray和obj任何一个参数，那么Global对象将用作obj。

作者：幽小鬼
链接：https://www.jianshu.com/p/625c35d84a80
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

this的四种情况：

1.以函数的形式调用时，this永远指向window（浏览器）或global（nodejs）
2.以方法的形式调用时，this就是调用方法的那个对象
3.当以构造函数的形式调用时，this就是新创建的那个对象
4.使用call（）和apply（）调用时，this是指定的那个对象

$.each

each遍历dom对象；$.each遍历数据源（数组或对象）

== and === and Object.is

在这里插入图片描述

ECMAScript 规范认为，既然 null 和 undefined 的行为很相似，并且都表示一个无效的值，那么它们所表示的内容也具有相似性，即有

undefined == null;//true

[],{}和null的typeof 都是object。

typeof可以判断的类型：number,boolean,string,function,object,undefined）；

console.log([]===[]);//false
console.log([]==[]);//false

console.log([]==='');//false
console.log(''===[]);//false
console.log(''==[]);//true
console.log([]=='');//true

console.log(''==='');//true
console.log(''=='');//true

console.log(null=='');//false
console.log(''==null);//false
console.log(''===null);//false
console.log(null==='');//false

console.log(Symbol.for('a')===Symbol.for('a'));//true
console.log(Symbol('a')===Symbol('a'));//false
console.log(Symbol.for('a')==Symbol.for('a'));//true
console.log(Symbol('a')==Symbol('a'));//false

WebStorage 和 Cookies

WebStorage由LocalStorage、SessionStorage组成
在这里插入图片描述
因为localStorage的本质是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；并且localStorage 是同步的 (会阻塞渲染)。

补充

:nth-child(n),n从1开始计数

:nth-child(odd)和:nth-child(even),从1开始计数

:nth-child(an+b),n从0开始计数

伪元素

每条选择器最多只能包含一个伪元素

伪类
每条选择器可以包含多个伪类

总结
伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。
伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

首先了解下什么是sass,什么是less

sass与less都是一种动态样式语言，对css赋予了一些动态语言特性，例如变量、继承、运算、函数等
二、它们的区别大致有以下几种：
1.编译环境不一样：
sass的安装需要Ruby环境的，是在服务端上处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中。
2.变量符不一样：
Less是@，而Scss是$
3.输出设置
Sass提供4中输出选项：nested, compact, compressed 和 expanded.
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
\5. 引用外部CSS文件
scss引用的外部文件命名必须以开头, 文件名如果以下划线开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
6.Sass和Less的工具库不同
Sass有工具库Compass
Less有UI组件库Bootstrap

链接：https://www.nowcoder.com/questionTerminal/476c244604d3491ab28cef8e2b8602b8?
来源：牛客网

Vue生命周期

不是分4阶段，8个函数嘛

beforeCreate created

beforeMount mounted

beforeUpdate updated

beforeDestroy destroyed

箭头函数

箭头函数没有自己的this，而是会继承上层作用域的this，就像其他普通的变量一样
箭头函数不支持动态改变this值，所以不可以通过.call()、.apply()、.bind()方法来重新绑定它的this值
箭头函数没有arguments对象
过度追求箭头函数的“单行代码”写法可能会降低代码可读性
箭头函数虽然表面上看是匿名的，但它可以根据前面的变量名和属性名自动推断出同名的name属性
链接：https://www.nowcoder.com/questionTerminal/476c244604d3491ab28cef8e2b8602b8?
来源：牛客网

Vue生命周期

不是分4阶段，8个函数嘛

beforeCreate created

beforeMount mounted

beforeUpdate updated

beforeDestroy destroyed

箭头函数

箭头函数没有自己的this，而是会继承上层作用域的this，就像其他普通的变量一样
箭头函数不支持动态改变this值，所以不可以通过.call()、.apply()、.bind()方法来重新绑定它的this值
箭头函数没有arguments对象
过度追求箭头函数的“单行代码”写法可能会降低代码可读性
箭头函数虽然表面上看是匿名的，但它可以根据前面的变量名和属性名自动推断出同名的name属性
箭头函数不可以被new，也不会像普通函数一样自动拥有prototype属性