-
let
,const
,var
var
:沒有作用域一說,且存在作用域提升的問題
let
const
: 只能在當前作用域下,且不能被重復(fù)聲明.let
的變量可以被修改,const
的變量不能被修改,新的ES6標準中l(wèi)et完全可以替代var
const
使用注意:1.錯誤的書寫方式:const修飾的變量是不能被修改的 const name; name = 'zhangsan'; console.log(name); 2.正確的書寫方式 const name = 'zhangsan';; console.log(name); 3.數(shù)組或者字典:可以修改內(nèi)部的值 const obj = {name:'zhangsan'}; // obj: {name:'zhangsan'} obj.name = 'lisi'; console.log(obj); // {name: "lisi"}
-
結(jié)構(gòu)賦值
- 基本使用
let [name, age, sex] = ['張三', 20, '男']; console.log(name); //張三 console.log(age); //20 console.log(sex); // 男 name = '李四'; console.log(name); //李四
- 對象的結(jié)構(gòu)賦值
let {name, age, sex} = {name: '張三', age: 20, sex: '男'}; console.log(name); // 張三 console.log(age); // 20 console.log(sex); // 男
- 數(shù)組的結(jié)構(gòu)賦值:只要結(jié)構(gòu)匹配上即可
簡單數(shù)組 let [name, age, sex] = ['張三', 20, '男']; console.log(name, age, sex); // 張三 20 男 復(fù)雜數(shù)組 let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]]; console.log(arr1, arr2, arr3, arr4, arr5); // 1 2 3 4 5 空數(shù)組 let [arr] = []; console.log(arr); // undefined 特殊情況 let [a, , , c] = [1, 2, 3]; console.log(a); // 1 console.log(c); // undefined
- 基本類型的結(jié)構(gòu)賦值
字符串本身帶有結(jié)構(gòu)器 let [a, b, c, d, e] = '我是中國人'; console.log(a); // 我 console.log(b); // 是 console.log(c); // 中 console.log(d); // 國 console.log(e); // 人 Number類型不帶有結(jié)構(gòu)器,則會報錯,Uncaught TypeError: 12306 is not iterable let [a, b, c, d, e] = 12306; console.log(a); console.log(b); console.log(c); console.log(d); console.log(e);
- 基本使用
-
數(shù)據(jù)集合 (Set)
特點:
①.類似于數(shù)組,但沒有重復(fù)的元素(唯一的);
②.開發(fā)中用于去除重復(fù)數(shù)據(jù);
③.key和value都是相等的1. 創(chuàng)建一個集合
let set = new Set(['張三', '李四', '王五', '張三', '李四']); console.log(set); // {"張三", "李四", "王五"}
2. 一個屬性 (size)
集合長度 :
set.size
比如上面的集合:console.log(set.size);
長度是33. 四個方法
- add
set.add('劉德華'); console.log(set); // {"張三", "李四", "王五", "劉德華"} 并支持鏈式調(diào)用 set.add('劉德華').add('周星星'); console.log(set); // {"張三", "李四", "王五", "劉德華", "周星星"}
- delete
console.log(set.delete('張三')); // 如果返回true,則刪除成功; false,則刪除失敗 console.log(set); // {"李四", "王五"}
- has
console.log(set.has('張三')); // true console.log(set.has('張三2')); // false
- clear
set.clear(); // 他是沒有返回值的,undefined console.log(set); // Set(0) {}
- keys() 和 values()
console.log(set.keys()); // SetIterator {"張三", "李四", "王五"} console.log(set.values()); // SetIterator {"張三", "李四", "王五"}
-
數(shù)據(jù)集合 (Map)
特點:
① - 類似于對象,本質(zhì)上是鍵值對集合;
② - "鍵"不局限于字符串,各種類型的值(包括對象,數(shù)組)都可以當做鍵;
③ - 對象"字符串 - 值",Map"值 - 值",是一種更加完善的Hash結(jié)構(gòu)實現(xiàn);1. 創(chuàng)建一個Map
- key值為字符串
const map = new Map([ ['name','張三'], ['age', 18], ['sex','男'] ]); console.log(map); // Map(3) {"name" => "張三", "age" => 18, "sex" => "男"}
- key值也可以是對象或數(shù)組
let obj1 = {a: 1}, obj2 = {b: 2}; const map = new Map([ ['name', '張三'], ['age', 18], ['sex', '男'], [obj1, '今天天氣不錯'], [obj2, '適合敲代碼'], [[1, 2], '哈哈哈'] ]); console.log(map); // Map(6) {"name" => "張三", "age" => 18, "sex" => "男", {…} => "今天天氣不錯", {…} => "適合敲代碼", …}
key值也可以是對象或數(shù)組 -- 打印結(jié)果 -
去重 , 當key值是字符串時可以去重,若果是對象或者數(shù)組時,不可以去重!
let obj1 = {a: 1}, obj2 = {b: 2}; const map = new Map([ ['name', '張三'], ['age', 18], ['sex', '男'], [obj1, '今天天氣不錯'], [obj2, '適合敲代碼'], [obj2, '適合敲代碼222'], [[1, 2], '哈哈哈'], [[1, 2], '哈哈哈333333'], ['name', '李四'], ['age', 22], ['sex', '女'] ]); console.log(map);
key值是字符串,去重 -
map的方法
map的方法- set 和 get
set, 第一個參數(shù)是key
,第二個參數(shù)是value
get 通過map.set('friend', ['趙六', '李七']).set(['dog'], '小花');
key
值去get
console.log(map.get('name')); // 張三 console.log(map.get(obj1)); // 今天天氣不錯
- delete 通過
key
刪除map.delete('name');
- has 是否有某個值,通過
key
查詢console.log(map.has('name')); // 存在為true, 不存在為false
- clear 清空
map.clear(); // 清空 console.log(map); // Map(0) {}
- keys() , values() , entries()
map.keys(); // 獲取所有的key map.values(); // 獲取所有的值 map.entries(); // 獲取 key-value
- forEach 遍歷
map.forEach(function (value, index) { console.log(index + ':' + value); })
forEach 遍歷結(jié)果- map注意事項,添加多個空對象
map.set({}, '哈哈哈哈哈'); map.set({}, '呵呵呵呵呵'); console.log(map); console.log({} === {}); // false
- set 和 get
map注意事項,添加多個空對象 - key值為字符串
-
Symbol
應(yīng)用場景: ES5的對象屬性名都是字符串,容易造成屬性名稱沖突,ES6引入新的原始數(shù)據(jù)類型Symbol,表示獨一無二的值;
對象的屬性名可以有兩種類型: ①:字符換 ②:Symbol類型:獨一無二,不會與其他屬性名產(chǎn)生沖突。
定義
let str1 = Symbol();
let str2 = Symbol();
console.log(str1 === str2); / false
console.log(typeof str1); // symbol
console.log(typeof str2); // symbol
描述
let str3 = Symbol('name');
let str4 = Symbol('name');
console.log(str3); // Symbol(name)
console.log(str4); // Symbol(name)
console.log(str3 === str4); // false 不相等
使用
let obj = {};
obj.name = '張三';
obj.name = '李四';
console.log(obj); // {name: "李四"}
obj[Symbol('name')] = '張三';
obj[Symbol('name')] = '李四';
console.log(obj);
Symbol()使用打印結(jié)果
-
class
ES5 時,要實現(xiàn)面向?qū)ο笫峭ㄟ^構(gòu)造函數(shù)實現(xiàn)的
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
print() {
console.log('我叫' + this.name + ',今年' + this.age + '歲');
}
}
let person = new Person('張三', 12);
console.log(person);
person.print(); // 調(diào)用方法
ES6 是通過class
來實現(xiàn)面向?qū)ο?/p>
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
// 方法
print() {
console.log('我叫' + this.name + ',今年' + this.age + '歲');
}
}
let person = new Person('張三', 12);
console.log(person);
person.print();
class的繼承
1.創(chuàng)建小球類
// 小球類
class Ball{
/**
* 構(gòu)造器
*/
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
this.r = 40;
}
/**
* 繪制小球
*/
render(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
2.創(chuàng)建移動的小球類,并繼承自上面的小球類 (extends)
class MoveBall extends Ball{
constructor(x, y, color){
super(x, y, color); // 調(diào)用父類的屬性,并把參數(shù)傳遞給父類
/*****兒子自己的屬性*****/
// 量的變化
this.dX = _.random(-5, 5);
this.dY = _.random(-5, 5);
this.dR = _.random(1, 3);
}
// 兒子的方法
upDate(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
}
- 創(chuàng)建
MoveBall
對象
new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length-1)]);
可以參考葉建華老師的絢麗小球
代碼
- 隨機數(shù)
Math.random(-5, 5); // 產(chǎn)生的是-5到5的隨機數(shù)(包含邊界值) -
數(shù)組的擴展
- Array.from 將偽數(shù)組或可迭代對象(包括arguments,Array,Map,Set,String...)轉(zhuǎn)換成數(shù)組。
// 獲取界面上的所有l(wèi)i標簽 let allLis = document.querySelectorAll('li'); console.log(allLis); // 是個偽數(shù)組 console.log(Array.isArray(allLis)); //打印下看看是不是數(shù)組,結(jié)果為: false // 轉(zhuǎn)化為真的數(shù)組 let newArray = Array.from(allLis); console.log(newArray); console.log(Array.isArray(newArray)); // 打印結(jié)果為true 是真數(shù)組
- Array.of 零零散散的東西轉(zhuǎn)換成數(shù)組
let nums = Array.of(1, 2, 3, 4); console.log(nums); let names = Array.of('張三', '李四', '王五'); console.log(names);
- Array.from 將偽數(shù)組或可迭代對象(包括arguments,Array,Map,Set,String...)轉(zhuǎn)換成數(shù)組。
-
對象的擴展
key和value是一樣的,寫一個就夠了
①.最原始寫法
let obj = {
'name': '張三',
'age': 18
}
②.外邊傳值
let name = '張三',
age = 18;
let obj = {
'name': name,
'age': age
}
③.ES6簡寫法 key和value是一樣的,寫一個就夠了
let name = '張三',
age = 18;
let obj = {
name,
age
}
-
Object.assign() 對象合并
let obj1 = {name: '張三'};
let obj2 = {age: 18};
let obj3 = {sex: '男'};
let obj4 = {friends: '李四'};
let obj = Object.assign({}, obj1, obj2, obj3, obj4);
console.log(obj);
Object.assign() 對象合并
-
... 展開運算符 (延展運算符)
- ①. 把字符串拆分放到數(shù)組
let str = '今天天氣很好!'; let strArray = [...str]; console.log(strArray);
把字符串拆分放到數(shù)組 - ②.數(shù)據(jù)傳遞,把對象的數(shù)據(jù)展開傳遞
let student = { name: '張三', age: 18, sex: '男' } // 傳遞數(shù)據(jù)的時候,把student中的數(shù)據(jù)展開傳遞下去 <Person {...student}>
- ③.結(jié)合Set() 去重
let myArr = [1, 2, 10, '張三', 20, 2, 1]; // 使用集合去重 let set = new Set(myArr); // 把集合轉(zhuǎn)成數(shù)組,用展開運算符展開 let arr = [...set]; console.log(arr);
- ①. 把字符串拆分放到數(shù)組
結(jié)合Set() 去重 結(jié)果
-
函數(shù)設(shè)置默認值
- ES5做法
// 形參設(shè)置默認值 function sum(num1, num2) { num1 = num1 || 10; //默認值10 num2 = num2 || 10; //默認值10 console.log(num1 + num2); } sum(10, 20); // 30 sum(); // 用戶傳空,調(diào)用默認值結(jié)果為 20
- ES6做法:簡單粗暴
function sum(num1 = 10, num2 = 10) { console.log(num1 + num2); } sum(10, 20); // 30 sum(); // 用戶傳空,調(diào)用默認值結(jié)果為 20
- 多種類型參數(shù)傳遞 ...也可用于解構(gòu)賦值,
...nums
代表剩下的內(nèi)容,注意:...nums
不能放在第一個位置!!!
function sum(name, sex, ...nums) { console.log(nums); // 打印發(fā)現(xiàn) nums為一個數(shù)組 console.log(name); // 張三 console.log(sex); // 男 let result = 0; for (let value of nums) { result += value; } return result; } console.log(sum('張三', '男', 10, 20, 30, 50)); // 輸出結(jié)果為 110
-
箭頭函數(shù)
- 普通函數(shù)
let resulet = function (num1, num2) { return num1 + num2; } console.log(resulet(100, 300)); // 400
- 箭頭函數(shù)
let resulet = (num1, num2) => { return num1 + num2; } console.log(resulet(100, 300)); // 400
- 函數(shù)中this的指向問題,箭頭函數(shù)內(nèi)部會自動綁定
function demo() { setTimeout(function () { console.log(this); // 打印結(jié)果為:Window 指的是窗口 }, 1000); // 箭頭函數(shù)內(nèi)部會自動綁定 setTimeout(() => { console.log(this); // 打印結(jié)果為{},指的下面的obj對象 }, 1000); } let obj = {}; demo.call(obj);