更新時間:2022-05-09 09:33:54 來源:動力節點 瀏覽1175次
JavaScript權威指南分為四部分,第一部分:JS核心;第二部分:客戶端JS;第三部分:JS核心參考和第一部分相呼應,是JS核心的重點歸納和講解,也是第一部分的總結和升華部分,所以建議看完第一部分之后可以直接去看第三部分;第四部分:客戶端JS參考,和第三方的模式一樣,也是第二部分的總結、提煉、講解已經升華。
按照數據類型劃分:
原始類型:Number、String、Boolean、Null、Undefined、Symbol(ES6加入,它的實例唯一,且不可改變,不能使用關鍵“new”聲明);
對象類型:Object
擴展:普通的js對象是“命名值”的無序集合,js同樣定義了一種特殊對象——數組(array),表示帶編號的有序集合。
ES6新出了鍵控集合:Set和Map,Set集合值唯一,不會重復;Map存儲的為鍵值對。
JS還定義了另一種特殊對象——函數。如果函數用new來初始化一個新建對象,我們稱為構造函數(constructor),每個構造函數定義一類對象,除了數組(array)類和函數(Function)類之外,還有日期(Date)類、正則(RegExp)類、錯誤(Error)類都是js的核心類。
算術運算符除了+、-、*、/、%(求余運算符,求整數后的余數)、還有更復雜的運算通過定義Math對象的函數和常量來實現
Math.abs(-10); // => 10:絕對值
Math.ceil(0.6); // => 1.0:向上取整數
Math.floor(0.6); // => 向下取整數
Math.round(0.6); // =>:1.0:四舍五入
Math.random(); // => 0-1隨機數
Math.max(1, 3, 5); // => 返回最高值
Math.min(1, -3, 50); // => 返回最低值
Math.pow(2, 3); // => 8:2的3次方
Math.PI; // => π:圓周率
Math.sin(3); // => 3的正弦值
Math.sqrt(30); // => 平方根
Math.tan(100); // => 正切
Math.acos(10); // => 反余弦值
Math.cos(100); // => 余弦值
Math.exp(100); // => e的100次冪
string的slice()用法,提取字符串的一部分,返回一個新字符,不改變原來字符串(和array.slice用法一致)。
var str1 = "hello world";
str1.slice(1, 4); // "ell":截取下標1到下標4,不包含最后一位
str1.slice(1); //"ello world":截取下標1以后的所有字符
str1.slice(-3); //"rld":截取后三位
undefined、null、0、-0、""、NaN 這6個可以轉換成false的值,稱作“假值”。
var exp1 = undefined;
if (exp1) {
console.log("真");
} else {
console.log("假");
}
//output:假
Number轉換成字符串的場景提供了三種方法:
toFixed() => 根據小數點后指定位數將數字轉化成字符串,會進行四舍五入;
toExponential() => 使用指數計數法將數字轉換為字符串;
toPrecision() => 根據指定的有效字位數將數字轉換成字符串;
var n = 123456.78;
n.toFixed(0); //output:123457
n.toFixed(1); //ouput:123456.8
n.toFixed(5); //output:123456.78000
n.toExponential(1); //output:1.2e+5
n.toPrecision(4); //output:1.2346e+5
n.toPrecision(7); //output:123456.8
n.toPrecision(10); //output:123456.7800
parseInt()可以接收第二個可選參數,這個參數指定了數字轉換的基數,有效的取值范圍是2-36.
parseInt("11", 5); //6 => 1*5+1
parseInt("ff", 16); //255 => 15*16+15
parseInt("077", 10); //77 => 70*10+7
js聲明變量使用var和不用var的區別,大部分我們使用的時候都是一樣的,例如:
var str1 = "hello";
str2 = "world!";
console.log("%s %s", str1, str2);
//output:hello world!
而在使用delete屬性時,使用var的變量是不允許刪除的,例如:
var str1 = "hello";
str2 = "world!";
this.str3 = "!!!";
delete str1; //false
delete str2; //true
delete str3; //true
總結:使用var的變量,可以理解為全局變量,全局變量屬性是不可編輯的,而不使用var的可以看做是聲明了一個全局屬性,等同于this.xxx=yyy,屬性是可以編輯的,所以是可以delete的。
先來看代碼執行的結果(也是一道經典的js面試題):
var scope = "global";
function f() {
console.log(scope);
var scope = "local";
console.log(scope);
}
f();
console.log(scope);
//output: undefined、local、global
這是什么原因造成的?為什么不是global/local/global呢?因為es5沒有塊級作用域,局部變量被提升到最前了聲明了,js解析器的機制造成的,上面的代碼類似于下面這段代碼:
var scope = "global";
function f() {
var scope; //只聲明變量,變量前置
console.log(scope);
scope = "local";
console.log(scope);
}
f();
console.log(scope);
//output: undefined、local、global
所以通常來說,在作用域里面變量聲明的代碼要放在代碼的最頂部,這是一個非常不錯的編程習慣,也可以避免一些不必要的問題。
如果我告訴你typeof(new Date()+1)和typeof(new Date-1)的值不同你信嗎?
下面來看具體代碼:
var now = new Date();
typeof (now + 1); //output:string
typeof (now - 1); //output:number
now == now.toString(); //output:true
那上面的問題是怎么造成的,typeof(now+1)不應該是number類型嗎?
原因分析:
“+” 有兩種含義,一個是字符串連接,一個是加法。
類型轉換的時候,默認先調用valueOf,然后才調用toString,而Date類型除外,所以對于new Date()的時候優先,調用的是toString(),而“+”操作是把他當成了字符串連接而不是數字相加。
“-”的時候,只有減法的含義,也就是說優先調用valuleOf,所以結果為number類
繼承機制:js是通過原型鏈實現繼承的。簡單實現如下:
function Animal(name) {
this.name = name || 'Animal';
this.sleep = function () {
console.log(this.name + '正在睡覺!');
}
}
Animal.prototype.eat = function (food) {
console.log(this.name + '正在吃:' + food);
};
function Cat() {
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
(1)slice和splice區別
雖然都是截取數組然而slice和splice的區別很大,接下來具體來看。
先說slice
slice定義:方法返回一個從開始到結束(不包括結束)選擇的數組的一部分淺拷貝到一個新數組對象。原始數組不會被修改。
var array = ["apple", "banana", "cherry", "dates", "fig"];
array.slice(1, 4); //["banana", "cherry", "dates"]
array.slice(1); //["banana", "cherry", "dates", "fig"]
array.slice(-2); //["dates", "fig"]
console.log(array); //["apple", "banana", "cherry", "dates", "fig"]
Array.prototype.slice(x,y); 第一位參數為截取開始下標,截取的時候包含此下標,第二位參數缺省參數,如果不填寫,標識截取到數組的最后一位,如果填寫了,標識截取到下標的位置,截取元素不包含最后一位,截取不改變原來數組。
splice部分
splice定義:方法通過刪除現有元素和/或添加新元素來更改一個數組的內容。
代碼1:
//方法通過刪除現有元素和/或添加新元素來更改一個數組的內容。
var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2, 2); //從下標2開始截取,截取2個
console.log(array); //["apple", "banana", "fig"]
代碼2:
var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2); //從下標2開始截取,截取到最后
console.log(array); //["apple", "banana"]
代碼3:
var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2, 2, "plum", "orange"); //截取下標2到后面2個元素替換成"plum", "orange"
console.log(array); //["apple", "banana", "plum", "orange", "fig"]
小技巧:可以使用var newArray = array.splice();實現數組復制。
(2)length的另一種用法
var array = ["apple", "banana", "cherry", "dates", "fig"];
array.length = 3; //["apple", "banana", "cherry"]
array.length = 0; //[] => 刪除所有元素
(3)reduce()
定義:方法對累加器和數組中的每個元素(從左到右)應用一個函數,將其減少為單個值。
var array = [10, 5, 20, 15];
var sum = array.reduce(function (x, y) { return x + y }, 0); //求和
var product = array.reduce(function (x, y) { return x * y }, 0); //求積
var max = array.reduce(function (x, y) { return (x > y) ? x : y }); //求最大值
(4)every()和some()
定義:數組的邏輯判斷,對每一個元素進行判斷,返回true或者false.
every()每一個元素都要滿足條件才會返回true,some()其中一項滿足條件即會為true.
function fun(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(fun); // false
[12, 5, 8, 1, 4].some(fun); // true
[12, 5, 8, 1, 4].every(fun); // false
[12, 15, 18, 11, 14].every(fun); // true
(5)map()
定義:將調用數組的每一個元素傳遞給指定的函數,并返回一個新的數組,不會改變老數組。
var array = [1, 4, 9, 16];
var map = array.map(x => x * 2); //[2, 8, 18, 32]
(6)Arguments.callee
定義:當前正在執行的函數.
在匿名函數中使用Arguments.callee引用自身,以便實現遞歸。代碼如下:
var fun = function (x) {
console.log(x);
if (x < 1) {
return 1;
}
return x + arguments.callee(x - 1);
}
fun(3); //7 => 3+2+1+1
(7)sort()排序規則的理解
sort()是可以介紹一個匿名函數作為排序規則的,例如:
var array = [3, 9, 3, 12, 5, 8, 1, 4];
array.sort(function (a, b) { return a - b; }); //[1, 3, 3, 4, 5, 8, 9, 12]
理解:a-b得到一個值,而這個正常的值將按照數字的正常規則進行排序,也就是 負數=>0=>正數,所以理解a-b不能單純的理解他為一個boolean值,而是根據a-b給數組一個排序規則,如果需要倒敘的話就用b-a.
定義: 高階函數就是操作函數的函數,它接受一個或多個作為參數,并返回一個新函數。
function sum(x, y, f) {
return f(x) + f(y);
}
console.log(sum(-5, 6, Math.abs));
[...] 方塊內任意字符
[^...] 非方塊內任意字符
w [a-zA-Z0-9]
W [^a-zA-Z0-9]
d [0-9]
D [^0-9]
let [x, y] = [1, 2];
[x, y] = [x + 1, y + 1];
[x, y] = [y, x];
console.log(x, y); // 3 2
“閉包”這個詞剛開始開的時候就頭皮發麻,感覺很“高大上”難以理解,其實掌握之后,發現也挺好用的,下面介紹一下我對于閉包的理解。
定義:閉包就是可以訪問一個函數局部(私有)變量的方法。
var Cat = function () {
var name = "cat";
var age = 2;
this.getName = function () {
return name;
}
this.getAge = function () {
return age;
}
}
var cat = new Cat();
console.log(cat.name); //undefined
console.log(cat.age); //undefined
console.log(cat.getName()); //cat
console.log(cat.getAge()); //2
如上代碼:利用閉包可以給用特權的方法訪問私有屬性,保證了私有變量不被修改和污染,當然根據實際需求可以設置通過方法修改私有屬性也是可行的。如果大家想了解更多相關知識,不妨來關注一下動力節點的JavaScript教程,里面有更豐富的知識等著大家去學習,希望對大家能夠有所幫助哦。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習