練習2主要是通過date對象獲得角度,setInterval對象更新角度值!
練習3主要學習到了 input
的新類型 range 可以理解為滑動條,并且滑動的位置可以用 $("#id").val()得到,type如果取color的時候可以調用系統調色板!模糊屬性
filter:blur(10px)
可以達到模糊效果!
練習5主要學習使用toggleClass屬性,該屬性可以切換!
flex布局屬性:flex:1 0 auto;這三個屬性分別代表flex-grow(即默認的比例),flex-shrink(縮放的比例,空間不足時縮放,0的話代表不縮放),flex-basis
屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto
,即項目的本來大小。
for in 循環用于遍歷可枚舉對象(enumberable)屬性
var arr=[1,2,3];
arr.foo="test";
Array.isArray(arr);//true
for(i in arr){
console.log(i) // 0,1,2,foo
console.log(arr[i]);
}
for(i of arr){
console.log(i); //1,2,3
}
for in 用來遍歷對象屬性
for of 用來遍歷數據
注意其他兩種結構Set
和Map
Set對象可以理解為有鍵無值,或者值鍵統一,它類似于數組,但是成員的值都是唯一的,沒有重復的值。
* 類似數組!類似數組!類似數組*
Set可以去重,比如var items=new Set(1,2,2,4,4)
=> 它返回 1,2,4
擁有的方法包括 add(),delete(),has()
items.add(3).add(3) 只會添加一次
和對象寫法不同的是:
testObj={"width":100,"height":80 } ;
if(testObj["width"])
{
//do sth
}
Set對象一般這么寫
var properties = new Set();
properties.add("width");
properties.add("height");
if (properties.has(someName)) {
// do something
}
數組簡單去重
function dedupe(array) {
return Array.from(new Set(array));
}
也可以寫作
function dedupe2 (array){
return [...new Set(array)] // ...相當于for of?
}
感覺[...set]通常用來把對象轉化為數組 ...
神操作這樣用 [...arr1,arr2]好像就是拼合數組啊,就相當于把arr1和arr2的方括號給扔掉了!
Set對象用for of可以遍歷,然后只有值。此外Set方法還可以快速求出集合的交集或者并集。
求交集:
注意[...a].filter返回的是a里面的東西,b.has(x)
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let intersect = new Set([...a].filter(x => b.has(x)));
求并集,這個比較簡單。BJ=new Set([...a,...b])
Map結構,Object 結構提供了“字符串—值”的對應,Map 結構提供了“值—值”的對應,是一種更完善的 Hash 結構實現
let map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
map和數組互相轉化
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]