来自 Web前端 2020-04-29 17:43 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

网上澳门金莎娱乐JS常见的面试题

时间: 2019-09-07阅读: 154标签: 面试1.JS中let和const有什么用?

函数定义

在现代js中,let&const是创建变量的不同方式。 在早期的js中,咱们使用var关键字来创建变量。let&const关键字是在ES6版本中引入的,其目的是在js中创建两种不同类型的变量,一种是不可变的,另一种是可变的。

函数的声明

function functionName(parameters){
    code;
}

const:它用于创建一个不可变变量。不可变变量是指其值在程序的整个生命周期中永不改变的变量。

函数表达式

JS函数可以通过一个表达式定义,函数表达式可以存储在变量中。当存储在变量中之后,变量也可以作为一个函数使用。函数表达式实际是一个匿名函数,是执行语句,已分号结尾。

var x = function(a,b) {return a * b};
var z = x(4,3);

let:let用于创建一个可变变量,可变变量是像var这样的普通变量,可以任意次数地更改。

Function()构造函数

函数可用JS构造器来定义。Function()。实际上不必使用构造函数,JS中应避免使用new关键字。

var mayFunction = new Function("a","b","return a * b");
var x = myFunction(4,3);
  1. JS 中的主要有哪几类错误

函数提升(Hoisting)

提升(Hoisting)是JS默认将当前作用域提升到前面去的行为。
so,函数可以在声明之前调用。

JS有三类的错误:

自调用函数

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ,则会自动调用。

Y不能自调用声明的函数。

通过添加括号,来说明它是一个函数表达式:

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

加载时错误:加载web页面时出现的错误(如语法错误)称为加载时错误,它会动态生成错误。

函数是对象

函数可以作为一个值使用。

JS函数带有属性和方法。
arguments.lenth属性返回函数调用过程接收到的参数个数:
function myFunction(a, b) { return arguments.length; }

toString()方法将函数作为一个字符串返回:var text = myFunction.toString();

运行时错误:由于滥用HTML语言中的命令而导致的错误。

函数参数

JS函数对参数的值不进行任何检查。

逻辑错误:这些错误是由于对具有不同操作的函数执行了错误的逻辑而导致的

显式参数和隐式参数

函数显式参数在函数定义时列出,隐式参数在函数调用时传递给函数真正的值。

  1. 如何通过类别名获取 dom 元素

默认参数

如果函数在调用时缺少参数,参数会默认设置为undefined(undefined为FALSE)。建议最好为参数设置一个默认值。

简单方式:
function myFunction(x, y) { y = y || 0; }

在 JS 中使用document.getElementsByClassName()方法来获取具有类名的元素。

Arguments对象

JS函数有个内置的arguments对象,包含了函数调用的参数数组。

function findMax() {
    var i, max = 0;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

4.JS的作用域链是什么及其作用

函数的调用

JS函数有4种调用方式,每种方式的不同在于this的初始化。

this指向函数执行时的当前对象。

一般情况下,变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链

全局对象

当函数没有被自身的对象调用时,this的值就是全局对象。在 web 浏览器中全局对象是浏览器窗口(window 对象)。该实例返回 this 的值是 window 对象。使用window对象作为一个变量容易造成程序崩溃。

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

JS中的作用域链主要用于解析变量的值。 如果没有这个,在不同的作用域内定义了许多变量,JS很难为变量选择某个值。

函数作为方法调用

用实例创建一个对象,对象带有属性和方法。

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

5.解释JS中的MUL函数

使用构造函数调用函数

如果哈数调用前使用了new关键字,则是调用了构造函数。

function myFunction(arg1,arg2){
    this.firstName = arg1;
    this.lastName = arg2;
}
var x = myFunction("John","Doe");
x.firstName; // 返回"John"

MUL表示数的简单乘法。在这种技术中,将一个值作为参数传递给一个函数,而该函数将返回另一个函数,将第二个值传递给该函数,然后重复继续。例如:x*y*z可以表示为

作为函数方法调用函数

JS中函数是对象,他有自己的属性和方法。all(),apply()是预定义的函数方法,两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20
// myArray = [10,2];
// myFunction.apply(myObject, myArray);   // 返回 20
function mul (x) { return function (y) { return function (z) { return x * y * z; } }}

JS闭包

JS私有变量可以用到闭包。
变量声明如果不使用var关键字,那它就是一个全局变量。

自我调用函数,闭包:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

变量add指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为0。并返回函数表达式。

add变量可以作为一个函数使用。它可以访问函数上一层作用域的计数器。

这个叫做JS闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护,只能通过add方法修改。

闭包可以访问上一层作用域里变量的函数,即时上一层函数已经关闭。

6.用纯JS编写一个程序来反转字符串

HTML DOM

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

通过可编程对象模型,JavaScript获得了足够的能力来创建动态的HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

使用内置函数:内置函数reverse()直接反转字符串。

查找HTML元素

通过ID查找:var x = document.getElementById("intro");

通过标签名查找:var x = document.getElementById("main"); var y = x.getElementsByTagName("p") // 数组

通过类名查找:var x = document.getElementsByClassName("intro") // 数组

str="jQuery";str = str.split("")str = str.reverse()str = str.join("")alert(str);

改变HTML

  • 改变输出流:document.write()。绝对不要在文档加载完成后使用document.write(),会覆盖该文档。
  • 改变HTML内容:document.getElementById(id).innerHTML = new value
  • 改变HTML属性:document.getElementById(id).attribute = new value

首先将字符串拆分为数组,然后反转数组,最近将字符连接起来形成字符串。

改变CSS

document.getElementById(id).style.property = new style

使用循环:首先,计算字符串中的字符数,然后对原始字符串应用递减循环,该循环从最后一个字符开始,打印每个字符,直到count变为零。

DOM 事件

7.JS中如何将页面重定向到另一个页面?使用 location.href:window.location.href =“”使用 location.replace:window.location.replace(" ;");8. 列出JS中的一些设计模式:

对事件做出反应

如需在用户点击某个元素时执行代码,则添加JS代码:onclick = JavaScript

设计模式是软件设计中常见问题的通用可重用解决方案,以下是一些设计模式是:

HTML DOM分配事件

分配onclick事件,eg:<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>

一些事件:

  • onload,onunload
  • onchange
  • onmouseover,onmouseout
  • onmousedown,onmouseup,onclick
  • onfocus

创建模式:该模式抽象了对象实例化过程。

HTML DOM EventListener

结构型模式:这些模式处理不同的类和对象以提供新功能。

addEventListener()

element.addEventListener(event,function,userCapture)

  • event:事件类型,不要使用"on"前缀。
  • function:事件触发后调用的函数。
  • userCapture:布尔值,用于描述事件是冒泡还是捕获,默认为false,冒泡传递。可选。

addEventListener()允许向同个元素添加多个事件,且不会覆盖已存在的事件。

行为模式:也称发布-订阅模式,定义了一个被观察者和多个观察者的、一对多的对象关系。

事件冒泡,事件捕获

冒泡:内部元素的事件先被触发,再触发外部元素事件。

捕获:外部元素事件先被触发,再触发内部元素的事件。

并行设计模式:这些模式处理多线程编程范例。

removeEventListener()方法

用于移除由addEventListener()方法添加的事件句柄。

架构设计模式:这些模式用于处理架构设计。

DOM元素

  1. JS中的Array.splice()和Array.slice()方法有什么区别

创建新的HTML元素(节点)

如需向HTML DOM添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new.");
    para.appendChild(node);
    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>

话不多说,来看第一个例子:

删除已有HTML元素

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    </script>
var arr=[0,1,2,3,4,5,6,7,8,9];//设置一个数组console.log(arr.slice(2,7));//2,3,4,5,6console.log(arr.splice(2,7));//2,3,4,5,6,7,8//由此我们简单推测数量两个函数参数的意义,slice(start,end)第一个参数表示开始位置,第二个表示截取到的位置(不包含该位置)splice(start,length)第一个参数开始位置,第二个参数截取长度

JavaScript对象

JavaScript中的所有事务都是对象,并且允许自定义对象。对象只是带有属性和方法的特殊数据类型。

接着看第二个:

JavaScript类

JavaScript是面向对象的语言,但JavaScript不使用类。

在JavaScript中,不会创建类,也不会通过类来创建对象。JavaScript是基于prototype的,而不是基于类的。

var x=y=[0,1,2,3,4,5,6,7,8,9]console.log(x.slice(2,5));//2,3,4console.log(x);[0,1,2,3,4,5,6,7,8,9]原数组并未改变//接下来用同样方式测试spliceconsole.log(y.splice(2,5));//2,3,4,5,6console.log(y);//[0,1,7,8,9]显示原数组中的数值被剔除掉了

Number

属性:

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY // 服务穷大
  • POSITIVE_INFINITY // 正无穷大
  • NaN // 非数字值
  • prototype
  • constructor

方法:

  • toExponential()
  • toFixed()
  • toPrecision()
  • toString()
  • valueOf()

slice和splice虽然都是对于数组对象进行截取,但是二者还是存在明显区别,函数参数上slice和splice第一个参数都是截取开始位置,slice第二个参数是截取的结束位置(不包含),而splice第二个参数(表示这个从开始位置截取的长度),slice不会对原数组产生变化,而splice会直接剔除原数组中的截取数据!

String

属性:

  • length
  • prototype
  • constructor

方法:

  • charAt()
  • charCodeAt()
  • concat()
  • fromCharCode()
  • indexOf() // 定位字符串中某个指定的字符首次出现的位置。
  • lastIndexOf() // 在字符串末尾开始查找字符串出现的位置。
  • match() // 内容匹配,如果找到则返回这个字符。
  • replace()
  • search()
  • slice()
  • split() // 转为数组
  • substr()
  • substring()
  • toLowerCase()
  • toUpperCase()
  • valueOf()

10.如何在JS中动态添加/删除对象的属性?

Date

方法:

  • Date() // 获得当前日期
  • getFullYear() // 使用 getFullYear() 获取年份。
  • getTime() // getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
  • setFullYear() // 使用 setFullYear() 设置具体的日期。
  • toUTCString() // 使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
  • getDay() // 使用 getDay() 和数组来显示星期,而不仅仅是数字。

咱们可以使用object.property_name = value向对象添加属性,delete object.property_name用于删除属性。

Array

  • 合并多个数组 - concat()
  • 用数组的元素组成字符串 - join()
  • 删除数组的最后一个元素 - pop()
  • 数组的末尾添加新的元素 - push()
  • 将一个数组中的元素的顺序反转排序 - reverse()
  • 删除数组的第一个元素 - shift()
  • 从一个数组中选择元素 - slice()
  • 数组排序(按字母顺序升序)- sort()
  • 数字排序(按数字顺序升序)- sort()
  • 数字排序(按数字顺序降序)- sort()
  • 在数组的第2位置添加一个元素 - splice()
  • 转换数组到字符串 -toString()
  • 在数组的开头添加新元素 - unshift()

例如:

Boolean

如果布尔对象无初始值或者其值为:0,-0,null,"",false,undefined,NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

let user = new Object();// adding a propertyuser.name='Anil';user.age =25;console.log(user);delete user.age;console.log(user);

Math

Math.round(2.5);

  • round()四舍五入
  • random()0-1的随机数
  • max()多个数中的最大数
  • min()多个数中的最小数

11.解释一下什么是 promise ?

RegExp

promise是js中的一个对象,用于生成可能在将来产生结果的值。 值可以是已解析的值,也可以是说明为什么未解析该值的原因。

浏览器BOM

所有浏览器都支持window对象,它表示浏览器窗口。

promise 可以有三种状态:

pending:初始状态,既不是成功也不是失败fulfilled:意味着操作完全成功rejected:意味着操作失败

一个等待状态的promise对象能够成功后返回一个值,也能失败后带回一个错误当这两种情况发生的时候,处理函数会排队执行通过then方法会被调用

  1. 数组去重复的方法有哪些

1.使用set

function uniquearray(array) { let unique_array= Array.from(set(array)) return unique_array;}

2.使用filter

function unque_array (arr) { let unique_array = arr.filter(function(elem, index, self) { return index == self.indexOf(elem); }) return unique_array;} console.log(unique_array(array_with_duplicates));

3.使用for循环

Array dups_names = ['Ron', 'Pal', 'Fred', 'Rongo', 'Ron'];function dups_array(dups_names) { let unique = {}; names.forEach(function(i) { If (!unique[i]) { unique[i] = true; } });return Object.keys(unique);} // Ron, Pal, Fred, RongoDups_array(names);
  1. undefined,null 和 undeclared 有什么区别?

网上澳门金莎娱乐,1.null表示"没有对象",即该处不应该有值,转为数值时为0。典型用法是:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

2.undefined表示"缺少值",就是此处应该有一个值,但是还没有定义,转为数值时为NaN。典型用法是:

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)函数没有返回值时,默认返回undefined。

3.undeclared:js语法错误,没有申明直接使用,js无法找到对应的上下文。

14.列出JS基本和非基本数据类型之间的一些区别?

1.目前JS中有6种基本数据类型:Undefined、Null、Boolean、Number、Symbol和String。还有1种复杂的数据类型————Object,Object本质上是由一组无序的名值对组成的。Object、Array和Function则属于引用类型。

2.基本数据类型是不可变的,而非基本数据类型是可变的。

3.基本数据类型是不可变的,因为它们一旦创建就无法更改,但非基本数据类型刚可更改,意味着一旦创建了对象,就可以更改它。

4.将基本数据类型与其值进行比较,这意味着如果两个值具有相同的数据类型并具有相同的值,那么它们是严格相等的。

5.非基本数据类型不与值进行比较。例如,如果两个对象具有相同的属性和值,则它们严格不相等。

  1. 如何在现有函数中添加新属性

只需给现有函数赋值,就可以很容易地在现有函数中添加新属性。例如,现有一个对象person,通过下面的代码来为person添加新的属性:

person.country= “India”;

16. JS中的深拷贝与浅拷贝的区别?深拷贝递归地复制新对象中的所有值或属性,而拷贝只复制引用。在深拷贝中,新对象中的更改不会影响原始对象,而在浅拷贝中,新对象中的更改,原始对象中也会跟着改。在深拷贝中,原始对象不与新对象共享相同的属性,而在浅拷贝中,它们具有相同的属性。17. 如何在JavaScript中每x秒调用一个函数

在JS中,咱们使用函数setInterval()在每x秒内调用函数。如:

setInterval(function (){ alert("Hello"); }, 3000);
  1. 解释一下JS的展开操作符?

展开运算符在需要多个参数/变量/元素的位置展开表达式,它用三个点(...)。如:

var mid = [3, 4];var newarray = [1, 2, ...mid, 5, 6];console.log(newarray);// [1, 2, 3, 4, 5, 6]
  1. JS中的宿主对象与原生对象有何不同?

宿主对象:这些是运行环境提供的对象。这意味着它们在不同的环境下是不同的。例如,浏览器包含像windows这样的对象,但是Node.js环境提供像Node List这样的对象。

原生对象:这些是JS中的内置对象。它们也被称为全局对象,因为如果使用JS,内置对象不受是运行环境影响。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:网上澳门金莎娱乐JS常见的面试题

关键词: