版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
call apply bind
的区别- 数组去重
http
状态码css
弹性布局position
属性有哪些值,分别有什么含义const
和let
的区别,可以改变const
定义对象某个属性吗this
的理解, 如何改变this
的指向let
和var
的区别,let
的产生背景var
的变量提升底层原理是什么- 箭头函数,箭头函数的特点
1. call apply bind
的区别?
相同点: 都可以改变函数调用的this指向
不同点:
call
和apply
的用法几乎相同,唯一不同就是参数不同。call
只能一个一个参数传入,apply参数是一个数组。bind
的传参方式和call
相同,但是改变调用函数的指向并返回一个新的函数,之后再调用这个函数时候this
就指向bind
绑定的第一个参数
call
语法
fun.call(thisArg,arg1,arg2,...)
thisArg
是fun
函数运行时指定的this
值(在非严格模式下,指定为null
或undefined
时会自动指向全局对象)arg1,arg2,...
是指定的参数列表
apply
语法
fun.apply(thisArg, [argsArray])
thisArg
是fun
函数运行时指定的this
值(在非严格模式下,指定为null
或undefined
时会自动指向全局对象)argsArray
是一个数组或类数组对象,数组中的元素将作为单独的参数传给fun
函数,如果argsArray
为null
或undefined
时表示不需要传入任何参数。
示例:
数组没有max
方法,可以使用Math
对象上的max
方法
const arr = [1,2,3,4,5,6];
const max = Math.max.apply(null,arr); // 6
bind
语法
fun.bind(thisArg,arg1,arg2,...)
thisArg
当绑定函数被调用时,该参数会作为原函数运行时的this
指向。当使用new 操作符调用绑定函数时,该参数无效。arg1, arg2, ...
当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
// 如果你某个函数绑定新的this指向并且固定先传入几个变量可以在绑定的时候就传入,之后调用新函数传入的参数都会排在之后
const obj = {}
function test(...args) {
console.log(args);
}
const newFn = test.bind(obj, 1,2);
newFn(3,4); // [1,2,3,4]
使用场景
- 当一个函数需要改变
this
指向时 - 且参数较少时可以使用
call
- 如果参数较多,可以将参数整理到一个数组,使用
apply
- 如果想生成一个新函数长期绑定某个对象时,可以使用
bind
2. 数组去重
- 方法一:
这是个没有什么技术含量的方法(使用了ES6Set
数据结构)!
let arr = [1,1,1,1,2,3,4,5,5,6];
arr = [...new Set(arr)]; // [1,2,3,4,5,6]
- 方法二:
for
循环嵌套for
循环
function unique(arr){
for(let i = 0; i<arr.length; i++) {
for(let j = i+1; j < arr.length; j++) {
if(arr[i] === arr[j]){
arr.splice(j,1); // 去除重复的这个
j--;
}
}
}
return arr;
}
- 方法三
使用indexOf
方法,或数组的includes
方法function unique(arr) { let arr1 = []; for(let i=0; i<arr.length; i++) { if(arr1.indexOf(arr[i]) === -1) { // !arr1.includes(arr[i]) arr1.push(arr[i]); // 如果arr1中不存在该元素则push进arr1 } } return arr1; }
- 方法四
利用sort
排序后,相邻元素进行对比
function unique(arr) {
arr.sort( (a,b) => a-b);
for(let i=0; i< arr.length-1; i++){
if(arr[i] === arr[i+1]) {
arr.splice(i+1,1);
}
}
return arr;
}
…
当然不只这几种方法。。欢迎评论补充
3. http状态码(点击跳转)
4. CSS弹性布局(点击跳转)
5.position属性有哪些值,分别有什么含义
position
属性规定元素的定位类型
属性值 | 描述 |
---|---|
absolute | 生成绝对定位的元素。相对于除了static定位以外的第一个父元素定位 |
fixed | 生成绝对定位的元素,相对于浏览器窗口定位 |
relative | 生成相对定位元素,相对于自己原来的位置定位 |
static | 默认值。没有定位,元素出现在正常流中(忽略 top, bottom, left, right 或者 z-index 声明) |
inherit | 继承父元素position的值 |
6. const和let的区别,可以改变const定义对象某个属性吗
const
与let
都只在声明的块级作用域内有效let
声明的变量可以改变,值和类型都可以改变,且可以先声明,后赋值。const
声明一个常量,值不可以改变,且一旦声明就得赋值。- 对于
const
声明一个引用类型的变量(如:数组,对象),变量名不指向数据,而是指向引用类型数据所在的地址(即变量保存的是指向这个引用类型的指针),因此可以改变const
定义对象的某个属性值。
7. this的理解, 如何改变this的指向
this
值函数运行时所在的环境(即调用的对象)- 可以理解为谁调用函数,
this
就指向谁 - 可以上述序号1的
call,apply,bind
方法改变this
指向
8. let和var的区别,let的产生背景?
- let声明变量会形成块级作用域,var不能
- let声明变量只能先声明后使用(暂时性死区),即let不存在变量提升
示例:
{
let a =1;
}
console.log(a); // a is not defined
9. var的变量提升底层原理是什么
JS引擎的工作方式:
- 先解析代码,获取所有声明的变量
- 然后再运行
也就是分为预处理和执行两个阶段
变量提升的定义: 所有的变量声明语句会被提升到声明变量所在作用域的头部
定义与赋值分离
示例:
console.log(a); // 报错 a is not defined
console.log(b); // undefined
var b = 1;
上面的代码相当于:
var b;
console.log(b); // undefined
b = 1;
10. 箭头函数,箭头函数的特点
- 相比普通函数更简洁的语法
- 本身没有
this
,捕获其所在上下文(作用域)的this
值,作为自己的 this 值 - 不能使用
new
- 不绑定
arguments
,用rest
参数...
解决 - 使用
call()
和apply()
调用 - 箭头函数没有原型属性
- 不能简单返回对象字面量
- 箭头函数不能当做
Generator
函数,不能使用yield
关键字