JS笔试遇到的知识点（1）

JavaScript学习, 牛客网题目 本文总阅读量次

四种touch事件

1
2
3
4
touchstart:     //手指放到屏幕上时触发
touchmove:      //手指在屏幕上滑动式触发
touchend:    //手指离开屏幕时触发
touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

跨域

关于跨域

javascript中实现跨域的方式总结

第一种方式：jsonp请求
jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.
第二种方式：document.domain
这种方式用在主域名相同子域名不同的跨域访问中
第三种方式：window.name
window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
第四种方式：window.postMessage
window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。
第五种方式：CORS
CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。
第六种方式：Web Sockets
web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

Math 对象

Math 对象用于执行数学任务。
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math.round(）方法 返回最接近的整数

Math.round(）函数返回一个数字四舍五入后最接近的整数
如果参数的小数部分大于0.5，四舍五入到相邻的绝对值更大的整数
如果参数的小数部分小于0.5，四舍五入到相邻的绝对值更小的整数
如果参数的小数部分等于0.5，四舍五入到相邻的在正无穷（+∞）方向上的整数。

例：

1
2
3
4
x=Math.round(2019.49) ;      //2019
x=Math.round(2019.5);         //2020
x=Math.round(-2019.5);        //-2019
x=Math.round(-2019.51);      //-2020

Math.abs() 方法 返回数的绝对值

  • 定义：abs() 方法可返回数的绝对值。
  • 语法：Math.abs(x)
  • 参数：必需。必须是一个数值。

基本（原始）、复杂与全局数据类型

  • 基本数据类型（原始值）（记忆：NNUSB=>纳尼USB）
    Number，Null，Undefined，String，Boolean。
    es6添加了一种新的原始数据类型：Symbol。所以现在 js的原始数据类型有6种。
  • 复杂数据类型（对象值）：Object，Array，Function，RegExp，Date，Error
  • 全局数据类型：Math

原始值和引用值

ECMAScript中，变量可以存放两种类型的值，即原始值和引用值。
原始值是存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。(基本（原始）数据类型的值)
引用值是存储在堆中的对象，也就是说，存储在变量处的值是一个指针，指向存储对象的内存处。（比如对象、数组）

RegExp正则表达式

JavaScript RegExp 对象有3个方法：test()、exec()、compile()
**test()**：检测一个字符串是否匹配某个正则表达式，如果匹配成功，则返回true，否则返回false；
**exec()**：检索字符串中与正则表达式匹配的值，返回一个数组，存放匹配的结果；如果未找到，返回null；
compile():可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。
注：match是支持正则表达式的String对象的方法.

Array 对象方法

concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素 .
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行 升序/降序排序(请注意，数组在原数组上进行排序，不生成副本。)，参数决定排序的顺序（参数为空则按照字符编码的顺序进行排序，参数也可为比较函数）。
splice() 删除元素，并向数组添加新元素。**(删除，插入，替换；得到的数组都是被删去的）**
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
valueOf() 返回数组对象的原始值

不会更改原有数组的方法

concat()连接两个或更多的数组，得到新数组。
map()循环数组

会更改原有数组的方法

splice()【删除，插入，替换；得到的数组都是被删去的】
sort()【数组在原数组上进行排序，不生成副本。】

++前后之区别

前置自增：++在前，先+1，再取值，表达式的值即为自增后的值
后置自增：++在后，先取值，再+1，表达式的值即为自增前的值

对象={属性：值}

1
var car = {type="porsche",color="white"}

Number类的toFixed（）与toPrecision（）

  • 两个方法返回的数字都是字符串形式。

toFixed（）

把数字四舍五入转换为由参数指定小数位数的数字。（不采用科学记数法）

toPrecision（）

  • 规定Number对象的值超出参数指定的有效数字的位数时将其有效长度格式化为参数指定的长度。
  • 当参数规定的有效数字的位数能包住Number对象时
  • 注意：参数规定的有效数字的位数是从数字第一个不为0的数(包括整数部分和小数部分)开始计算的位数。
  • Number对象的值 > 参数指定的有效数字的位数 时，采用定点记数法（使用小数点）【比如参数为5时，312=312.00;参数为2时，要求有效位数2位，0.8=0.80】
  • Number对象的值 <= 参数指定的有效数字的位数 时，采用科学记数法。【比如参数为2时，1234.1234 = 12.341234*10^2 = 12.341234e10+2】

AngularJS1数据绑定的占位符

AngularJS1中页面中用于数据绑定的占位符是{{ }}

jquery获取当前窗口的宽度值

在jquery中，如果想要获取当前窗口的宽度值,使用width()

在jquery中:

  • width() 方法设置或返回元素的宽度（不包括内边距padding、边框border或外边距margin）。
  • height() 方法设置或返回元素的高度（不包括内边距padding、边框border或外边距margin）。
  • innerWidth() 方法返回元素的宽度（包括内边距padding）。
  • innerHeight() 方法返回元素的高度（包括内边距padding）。
  • outerWidth() 方法返回元素的宽度（包括内边距padding和边框border）。
  • outerHeight() 方法返回元素的高度（包括内边距padding和边框border）。
  • outerWidth(true) 方法返回元素的宽度（包括内边距padding、边框border和外边距margin）。
  • outerHeight(true) 方法返回元素的高度（包括内边距padding、边框border和外边距margin）。
1
2
3
4
5
6
7
8
alert($(window).height()); //浏览器当前窗口可视区域高度 
alert($(document).height()); //浏览器当前窗口文档的高度 
alert($(document.body).height());//浏览器当前窗口文档body的高度 
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 
alert($(window).width()); //浏览器当前窗口可视区域宽度 
alert($(document).width());//浏览器当前窗口文档对象宽度 
alert($(document.body).width());//浏览器当前窗口文档body的宽度 
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

注意：
区分jquery的innerheight（）与window的innerheight属性。
window.innerheight 返回浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
window.outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。

变量与函数提升

  • 变量声明会被提升，赋值语句不提升。使用 函数声明 时函数也会被提升，但使用 函数表达式 时不存在提升。（注意：函数表达式就是带等号的。函数在ES5中是整个函数被提升，在ES6中是只提升函数的声明（也就是只提升函数名），函数内容（变量初始化的值）是不会被提升的，他们将被留在原来的位置。）
  • 变量声明、函数声明都会被提升到作用域顶处，且 函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖。
  • 补充：当出现多个同名变量与同名函数时，调用该变量名时的优先级为：变量声明< 函数声明 < 变量赋值（具体参考20191215第7题、20200205第4题）

闭包

  • 闭包内变量执行后不会被清除，要到整个闭包被清除的时候才会清除，比如局部变量要等到函数执行完之后。
  • 自调用函数（立即执行函数）理论上是一个闭包。闭包可以访问其他函数内部变量的函数，而立即执行函数传参，相当于父级变量；闭包需要手动执行，不能自主释放内存；而立即执行函数相当于做了一次函数执行，最后释放内存。逻辑上立即执行函数可以理解为：声明闭包函数-执行-释放内存

<link>与<script>

  • <link> 和href配合 加载css，hypertext reference超文本引用，页面加载到href时不会停下来。
  • <script>和src配合 加载script文件，source资源，页面会停下来等待资源加载完毕（并执行完），所以一般js放在body的最下面。

数组长度不包括数组的方法（函数）

  1. 首先要明确：数组也是对象
  2. 对象不能用length返回其拥有的属性数量
1
2
3
4
5
var arr = 0; 
arr[0] = 0; 
arr[1] = 1; 
arr.foo = 'C'; 
console.loa(arr.lenath);//2

这里要理解所谓‘数组’其实是array类型对象的一个特殊作用，就是：我们可以对它进行一种模式的数据存储，但除此之外，它依然是一个对象

  • var arr = [‘1’，‘2’] //这本质上是一系列操作：得到一个数组对象；调用了它的数组方法存入了一些数据，arr.length根据存入数据的数目被修改
  • arr.length，对arr对象的length属性进行一个访问
  • arr.foo = 'hello' 对arr对象创建一个属性，所以.foo 跟.length地位是并列的：就是arr的一个属性**，同时arr的数组方法跟这些属性是毫不相关的。
JavaScript学习, 牛客网题目