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
關鍵字