javascript的參考文檔:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
新增類型
Set
和其他語言的一樣,Set是唯一結構的,無序的集合.沒有索引,可以用來給數組去重.Set默認不做類型轉換.雖然NaN在js中不想等,但Set內部認為他們是相同的.這個應該很好理解.而且同樣沒有索引的概念,這個因該也沒什么異議吧?
方法
add(value)：添加一個值，返回Set結構本身
delete(value)：刪除某個值炼邀，返回布爾值
has(value)：返回布爾值秀存，表示是否是成員
clear()：清除所有成員瑞驱，無返回值
keys()：返回鍵名的遍歷器
values()：返回鍵值的遍歷器
entries()：返回鍵值對的遍歷器
forEach()：使用回調函數遍歷每個成員
keys,values,entries三個方法其實返回的值是一樣的.
Map
Map應該是一種接近python中的dict的數據結構,和以前不同,這次是一個直接的鍵值對的構造了.而且key的選擇和python一樣寬容.(我估計動態(tài)語言都是這么寬松,只要可以hash的估計都能做key)注意map對象的定義方法,不能直接加參數,而是map = new Map(); 然后map.set(key,val)的方法來設定,注意,這個對象的實例看起來和js原來的字典很像,但并不是一種東西.有一些明顯的差別:
- 使用JSON.stringify()返回的是{}
- 有一個size屬性可以知道對象的長度.js的字典對象沒這個方法也沒類似的方法.
目前看來,這個類型還很簡單,倒是map方法很成熟.
Proxy
代理對象.
這個新的類型用處很多,建議之間看參考文檔.https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
新特性
箭頭函數
就是匿名函數,類似python中的lambda表達式,和lambda表達式不同的是,使用{}的情況下,箭頭函數支持多行代碼.需要注意的是,箭頭函數的this一般指向的是window是不是當前運行函數的對象.
f= x=>x*2+1
f(2)
5
f=(x,y)=>console.log(`${x}+${y}=${x+y}`)
f(2,3)
2+3=5
f=(x,y)=>{console.log(`${x}+${y}=${x+y}`);console.log(`${x}x${y}=${x*y}`);}
f(3,4)
3+4=7
3x4=12
class關鍵字
對類的支持.
class Person {
constructor(name, age) {
// 構造器
this.name = name;
this.age = age;
}
say_hello() {
console.log(`my name is ${this.name},I am ${this.age} years old.`);
}
}
let tom = new Person("Tom", 12);
tom.say_hello();
輸出:my name is Tom,I am 12 years old.
用字面量定義一個對象
human = {
name: "jack",
age: 12,
say_hello() {
console.log(`my name is ${this.name},I am ${this.age} years old.`);
}
};
human.say_hello();
輸出:my name is jack,I am 12 years old.
原型構造方法.
student = {
__proto__: human, // 以human為原型,類似類構造器的繼承某個父類
name: "Smith"
}
student.say_hello();
輸出:my name is Smith,I am 12 years old.
字符串模板
student.say_hello();
let a = "jack",
b = "tom";
console.log(`${a} and $`); // 注意是反引號
輸出:jack and tom
解構
對數組或者字典對象中的元素進行解析賦值.
/*對數組解構賦值*/
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);
/*
注意不能對集合解構賦值,像下面這樣會報錯的
let (m, n, j) = (11, 22, 33);
*/
/*對字典解構賦值*/
let {
"name": name
} = {
"name": "jack"
};
console.log(name);
函數的參數新方法
指定默認值,不定參數和展開序列的魔法函數
/*參數默認值*/
function f1(name = "jack") {
console.log(name);
}
f1();
/*混合帶默認值和不帶默認值的參數*/
function f11(name = "jack", age = 10, sex) {
console.log(name, age, sex);
}
f11(undefined, undefined, "男");
輸出:jack 10 男
/*不定參數,類似python的*args,使用三個點表示*/
function f2(...args) {
console.log(args); // 輸出 ["name", "age", "sex"]
console.log(...args); // 輸出 name age sex
}
f2("name", "age", "sex");
/*類似python的賦值參數的情況*/
let arg_list = [1, 2, 3, 4];
f2(..arg_list);
擴展運算符之...
類似python的*展開數組.請看實際代碼
/**傳遞參數,解包數組***/
let l1 = ["jack", 12, "male"];
f = (...args) => console.log(...args); // 不定參數格式
f(...l1); // 相當與f("jack", 12, "male")
let l2 = [2, 4, 9, 31, 12, 3, 81, 33];
console.log(Math.max(...l2)); // 求最大值
console.log(Math.min(...l2)); // 求最小值
l2.push(...[1, 1, 5, 1.7]); // 連接數組
console.log(l2);
let l3 = [...l1, ...l2]; // 合并數組
console.log(l3);
console.log(..."world"); // 展開字符串
新函數和新方法
call和apply
這個不是新的,但是要注意一下.
call(obj/func, arg1, arg2,.....) 改變函數執(zhí)行時的上下文(this對象)
第一個參數是一個函數(或者對象的函數)
第二個到...n個是func的函數.
class Person {
constructor(name, age) {
// 構造器
this.name = name;
this.age = age;
}
say_hello() {
console.log(`my name is ${this.name},I am ${this.age} years old.`);
}
explain_array(arg1, arg2, arg3) {
console.log(arguments); // 內置參數
console.log(`arg1=${arg1}; arg2=${arg2}; arg3=${arg3}`);
}
}
/*call的演示*/
let p1 = new Person("張三", 12);
let p2 = new Object();
p2.name = "李四";
p2.age = 22;
p1.say_hello.call(p2);
輸出:my name is 李四,I am 22 years old.
/*
實際上是用p2替換了p1(改變了函數執(zhí)行時的this對象);
p2對象并沒有say_hello這個方法.
*/
/*
*apply的演示,還有apply和call的對比,兩則只是傳遞參數的方法的差別:
* call是順序傳遞.apply需要一個數組.
*/
let p3 = new Object();
p3.name = "王五";
p3.age = 33;
p1.explain_array("a", "b", "c");
p1.explain_array.call(p3, "a", "b", "c");
p1.explain_array.apply(p3, ["a", "b", "c"]);
lastIndexOf
查找索引
lastIndexOf(key, from)
key需要查找的對象.
form從那個索引開始向前查找.
return 返回第一次查找到key的值對應的索引
和indexOf相反的方法,反序查找一個對象.返回從索引或者-1,注意.無論lastIndexOf還是indexOf,索引都是從數組的頭部開始計算的.下面距離說明:
[1,2,3,4,4.5,5,1,7].lastIndexOf(1,3);
返回的是0, 因為數組第三元素3之前之有0這個索引的值等于1,
[1,2,1,3,4,4.5,5,1,7].lastIndexOf(1,3)
返回的是2, 因為數組第三元素3之前之有2這個索引的值等于1,
forEach方法
循環(huán)數組
forEach(func, new_this)
func 回調函數,不一定有返回值.
new_this可以用這個參數重新定義this指向.
其中.回調函數func有三個參數.
function(value, index, array){}
value是當前循環(huán)的值,
index是當前索引.
array是數組對象本身.
["a","b","c"].forEach(function(value,index,array){console.log(`No.${index} value=${value} in ${array}`);});
No.0 value=a in a,b,c
No.1 value=b in a,b,c
No.2 value=c in a,b,c
for...in和for...of
循環(huán)數組,
這兩個方法放一起是為了比較,in循環(huán)的是索引,of循環(huán)的是元素.
另外,for...of可以循環(huán)字符串,Set,Map和以前的字典對象(其實是Object對象).
// for...of 解析Map對象.注意,只有Map才可以使用解構（destructuring）來將鍵值對拆解為兩個獨立的變量
for(let [k,v] of map){console.log(`${k}:${v}`);}
name:jack
age:12
// for...of 解析 dict對象.
for(let k of Object.keys(d)){console.log(`${k}=${d[k]}`);}
name=tom
age=14
// for...of解析數組.
for(let i of l){console.log(i);}
jack
tom
John
//for...in解析數組
for(let i in l){console.log(i);}
0
1
2
map
映射,這個方法和python的map基本上是同一個意思.
array.map(func,newthis)
func 回調函數,必須有返回值,
newthis 如果你要固定this對象,請使用這個參數.
其中.回調函數func有三個參數.
function(value, index, array){}
value是當前循環(huán)的值,
index是當前索引.
array是數組對象本身.
l = ["jack", "tom", "John"];
l.map(function(a,b,c){console.log(`${a}||$俭厚||${c}`);})
jack||0||jack,tom,John
tom||1||jack,tom,John
John||2||jack,tom,John
filter
過濾器,同上,這個方法和python的filter基本上是同一個意思.(話說javascript和python越來越像了,不,好像動態(tài)語言都越來越像了,大家都在進步嘛,呵呵)
array.filter(func,newthis)
func 過濾函數,必須返回布爾值,
newthis 如果你要固定this對象,請使用這個參數.
其中.回調函數func有三個參數.
function(value, index, array){}
value是當前循環(huán)的值,
index是當前索引.
array是數組對象本身.
// 返回數組中的偶數
l = [1,2,3];
l.filter(function(item){if(item%2===0){return 1;}else{return 0;}});
[2]
every
判斷函數,序列中每一個都滿足判斷條件就返回真值.
array.every(func)
func 判斷函數,必須返回布爾值,
其中.回調函數func有三個參數.
function(value, index, array){}
value是當前循環(huán)的值,
index是當前索引.
array是數組對象本身.
// 判斷數組元素是否都是數字?
l = [1,2,3,4];
l.every(function(item){return !isNaN(item);})
true
some
判斷函數,序列中只要一個都滿足判斷條件就返回真值.
array.some(func)
func 判斷函數,必須返回布爾值,
其中.回調函數func有三個參數.
function(value, index, array){}
value是當前循環(huán)的值,
index是當前索引.
array是數組對象本身.
// 判斷數組元素是否都是數字?
l = [1,"a",3,4];
l.some(function(item){return !isNaN(item);})
false
reduce
化簡函數, 從左到右依次處理序列中的元素,并返回結果
array.reduce(func),從0索引開始,依次把元素相加,結果再作為下一個迭代的第一個參數.為了便于理解,我們這樣定義一下加法:
加數1+加數2=結果.
func有三個參數.
function(value1, value2, index){}
value1是當前迭代中的加數1,也是上一次迭代的返回值.
value2是當前迭代中的加數2,
index是當前迭代中加數2的索引.
return 函數處理的結果.
很顯然,這個函數是用來做累加計算的.
// 累加計算
l = [11, 22, 33, 44, 55, 66]
l.reduce(function(a,b,c){console.log(`加數1=${a}, 加數1=$账月, 索引=${c}`); return (a+b) + 1000;});
加數1=11, 加數1=22, 索引=1
加數1=1033, 加數1=33, 索引=2
加數1=2066, 加數1=44, 索引=3
加數1=3110, 加數1=55, 索引=4
加數1=4165, 加數1=66, 索引=5
5231 // 最終的處理結果.
reduceRight
化簡函數, 從右到左依次處理序列中的元素,并返回結果,這基本就是reduce的反函數.
array.reduceRight(func),從0索引開始,依次把元素相加,結果再作為下一個迭代的第一個參數.為了便于理解,我們這樣定義一下加法:
加數1+加數2=結果.
func有三個參數.
function(value1, value2, index){}
value1是當前迭代中的加數1,也是上一次迭代的返回值.
value2是當前迭代中的加數2,
index是當前迭代中加數2的索引.
return 函數處理的結果.
同reduce,這個函數是用來做累加計算的.
// 累加
l = [11, 22, 33, 44, 55, 66]
l.reduceRight(function(a,b,c){console.log(`加數1=${a}, 加數1=$蟆沫, 索引=${c}`); return (a+b) + 1000;});
加數1=66, 加數1=55, 索引=4
加數1=1121, 加數1=44, 索引=3
加數1=2165, 加數1=33, 索引=2
加數1=3198, 加數1=22, 索引=1
加數1=4220, 加數1=11, 索引=0
5231 // 最終的處理結果.
箭頭函數
是一種簡化的匿名函數的書寫方式,并且在一開始就會鎖定內部的this對象,下面會做一些箭頭函數的演示來說明問題:
