模板字串和標簽模板
const getCourseList = function() { // ajax return { status: true, msg: '獲取成功', data: [{ id: 1, title: 'Vue 入門', date: 'xxxx-01-09' }, { id: 2, title: 'ES6 入門', date: 'xxxx-01-10' }, { id: 3, title: 'React入門', date: 'xxxx-01-11' }] } }; const { data: listData, status, msg } = getCourseList(); function foo(val) { return val.replace('xxxx', '2020'); } if (status) { let arr = []; listData.forEach(function({ date, title }) { arr.push( ` <li> <span>${ `課程名: ${ title }` }</span> <span>${ foo(date) }</span> </li> ` ); }); let ul = document.createElement('ul'); ul.innerHTML = arr.join(''); document.body.appendChild(ul); } else { alert(msg); }
padStart padEnd
{ let str = 'i'; // 插入在5的位置 let str1 = str.padStart(5, 'mooc'); console.log(str1); // 倒序插入在5的位置 let str2 = str.padEnd(5, 'mooc'); console.log(str2); }
repeat
{ function repeat(str, num) { return new Array(num + 1).join(str); } console.log(repeat('s', 3)); }
startsWith endsWith
{ const str = 'A promise is a promsie'; console.log(str.startsWith('B')); console.log(str.startsWith('A pro')); console.log(str.endsWith('promsie')); console.log(str.endsWith('A')); }
includes
{ const str = 'A promise is a promise'; if (~str.indexOf('promise')) { console.log('存在"promise"'); } if (str.includes('a promise')) { console.log('存在"a promise"'); } }
字串轉陣列+遍歷
let str = 'PROMISE'; // 四種方法：轉成陣列后遍歷 var oStr = Array.prototype.slice.call(str); var oStr = str.split(''); const oStr = [...str]; const [...oStr] = str; console.log(oStr); //單個字符輸出 oStr.forEach(function(word) { console.log(word); });
對全是英文的字串中的大寫字符加密 A -> 100 B -> 99
const map = {A: '100', B: '99', C: '98', D: '97', E: '96', F: '95', G: '94', H: '93', I: '92', J: '91', K: '90', L: '89', M: '88', N: '87', O: '86', P: '85', Q: '84', R: '83', S: '82', T: '81', U: '80', V: '79',W: '78',X: '77',Y: '76', Z: '75'};
const words = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
oStr.forEach(function(word, index) {
if (words.includes(word)) oStr[index] = map[word];
});
console.log(oStr.join(''));
使用for-of遍歷字串
let str = 'PROMISE'; let newStr = ''; const map = {A: '100', B: '99', C: '98', D: '97', E: '96', F: '95', G: '94', H: '93', I: '92', J: '91', K: '90', L: '89', M: '88', N: '87', O: '86', P: '85', Q: '84', R: '83', S: '82', T: '81', U: '80', V: '79',W: '78',X: '77',Y: '76', Z: '75'}; for (let word of str) { if (str.includes(word)) newStr += map[word]; } console.log(newStr);
Unicode是一項標準，包括字符集、編碼方案等
解決傳統的字符編碼方案的局限
?? \u1f436 unicode碼(點) emoji
console.log('\u1f436');
console.log('\u{1f436}');
正則擴展
uy修飾符
u. unicode
console.log(/^\ud83d/.test('\ud83d\udc36')) //\ud83d\udc36識別為\ud83d和\udc36兩個字符
console.log(/^\ud83d/u.test('\ud83d\udc36')) //\ud83d\udc36識別為一整個字符
y 粘連修飾符 sticky
const r1 = /imooc/g; const r2 = /imooc/y; const str = 'imoocimooc-imooc'; console.log(r1.exec(str)); console.log(r1.exec(str)); console.log(r1.exec(str)); console.log(r1.exec(str)); console.log('-----------------'); console.log(r2.exec(str)); console.log(r2.exec(str));//imooc后面必須緊跟imooc，不能有其他字符 console.log(r2.exec(str));
數值擴展
新的進制表示法
console.log(0o16);//十六進制 console.log(0b1111);//二進制
新的方法與安全數
掛載在Number上：Number.parseInt Number.parseFloat
console.log(window.parseInt('1.23'));
console.log(parseFloat('1.23'));
console.log(Number.parseInt(1.23));
console.log(Number.parseFloat(1.23));
Number.isNaN
console.log(Number.isNaN(NaN)); function isNaN(value) { return value !== value; }
Number.isFinite
isFinite() 函式用于檢查其引數是否是無窮大，
如果 number 是 NaN（非數字），或者是正、負無窮大的數，則回傳 false
console.log(Number.isFinite(Infinity)); console.log(Number.isFinite(2 / 0)); console.log(Number.isFinite(1234)); console.log(Number.isFinite('1234')); console.log(Number.isFinite(true)); console.log(Number.isFinite(NaN));
Number.MAX_SAFE_INTEGER Number.MIN_SAFE_INTEGER 安全數范圍
Number.isSafeInteger(); 是否在安全范圍內
console.log(Number.MAX_SAFE_INTEGER); console.log(Number.MIN_SAFE_INTEGER); console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER - 1)); console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1));
冪運算 **
let a = (2 ** 10) ** 0; console.log(a); let b = 2 ** 10 ** 0;//從后往前計算 console.log(b);
函式擴展
函式引數的默認值
function People({ name, age = 38 } = {name: 1}) { console.log(name, age); }; People({ name: 3 });
結合擴展運算子(剩余引數...)
function sum(...args) { console.log(args); } sum(1, 2, 321, 4354, 'fdafsd');
function op(type, b, ...nums) { console.log(type); console.log(nums); } op('sum', 1, 23, 454, 3, 67, 234);
reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值
function sum(...numbers) { return numbers.reduce(function(a, b) { return a + b; }, 0); } console.log(sum(1, 2, 3, 4));
箭頭函式
const add1 = (a, b) => { a += 1; return a + b; }; const add2 = function(a, b) { a += 1; return a + b; } console.log(add1(2, 2)); console.log(add2(2, 2));
函式回傳值
const pop = arr => arr.pop();//回傳去掉的數值 console.log(pop([1, 2, 3]));//3 const pop = arr => void arr.pop();//void沒有回傳值 console.log(pop([1, 2, 3]));
箭頭函式中沒有arguments，需要用到擴展函式
const log = () => { console.log(arguments); }; log(1, 2, 3);//報錯 const log = (...arguments) => { console.log(arguments); }; log(1, 2, 3);
箭頭函式沒有this，this指向自身所處環境的this
此處指向window
const xiaoming = { name: '小明', say1: function() { console.log(this); }, say2: () => { console.log(this); } } xiaoming.say1(); xiaoming.say2();
const xiaoming = { name: 'xiaoming', age: null, getAge: function() { // ...ajax模擬1s之后得到服務器的回應獲取到資料 // 箭頭函式沒有this，默認指向當前物件xiaoming setTimeout(() => { this.age = 14; console.log(this); }, 1000); } }; xiaoming.getAge();
物件擴展
簡潔表示法
const getUserInfo = (id = 1) => { const name = 'xiaoming'; const age = 10; return { name, age, say() { console.log(this.name + this.age); } }; }; const xiaoming = getUserInfo();
屬性名運算式
const key = 'age'; const xiaoming1 = { name: 'xiaoming1', key: 14 }; const xiaoming2 = { name: 'xiaoming2', [`${key}123`]: 14 };
復制物件 - 淺拷貝
const obj1 = { a: 1, b: 2, d: { aa: 1, bb: 2 } }; const obj2 = { c: 3, a: 9 }; const cObj1 = { ...obj1 }; cObj1.d.aa = 999; console.log(cObj1.d.aa);//999 console.log(obj1.d.aa);//999
合并物件（淺拷貝）
const newObj = { ...obj2, ...obj1 }; newObj.d.aa = 22; console.log(obj1);
部分新的方法和屬性Object.is
+0 -0
console.log(Object.is(+0, -0)); console.log(+0 === -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(true, false)); console.log(Object.is(true, true));
Object.assign類似于物件合并
const obj = Object.assign({a: 1}, {b: 2}, {c: 3}, {d: 4, e: 5});
const obj = { a: 1, b: { c: 2 } }; let newObj = Object.assign({a: 3}, obj);//類似物件合并,a=1會替換掉a=3 console.log(newObj.a); console.log(newObj.b.c); newObj.b.c = 100; console.log(obj.b.c);
Object.keys 所有鍵組成的數值
Object.values 所有值組成的陣列
Object.entries 所有鍵值對組成的陣列
for - of
const obj = { a: 1, b: 2, c: 3, d: 4 }; console.log(Object.keys(obj)); console.log(Object.values(obj)); console.log(Object.entries(obj)); for (let [k, v] of Object.entries(obj)) { console.log(k, v); }
__proto__
Rest 解構賦值不會拷貝繼承自原型物件的屬性
let obj1={a:1};
let obj2={b:2};
obj2.__proto__=obj1;
let obj3={...obj2};
console.log(obj2); //{b:2}
console.log(obj3); //{b:2}
Object.setPrototypeOf
修改物件的原型屬性，性能低下，不建議使用
const obj1 = {a: 1};
const obj2 = {b: 1}
const obj = Object.create(obj1);
console.log(obj.__proto__);
Object.setPrototypeOf(obj, obj2);
console.log(obj.__proto__);
Object.getPrototypeOf
獲取原型屬性
const obj1 = {a: 1};
const obj = Object.create(obj1);
console.log(obj.__proto__);
console.log(Object.getPrototypeOf(obj));
console.log(obj.__proto__ === Object.getPrototypeOf(obj));
super訪問原型物件上的屬性和方法
super中的this指向的是之類的this
非靜態方法中，指向父類的原型物件
在靜態方法中，指向父類
const obj = {name: 'xiaoming'};
const cObj = {
say() {
console.log(`My name is ${super.name}`);
}
}
Object.setPrototypeOf(cObj, obj);
cObj.say();
陣列擴展
結合擴展運算子使用
const user = ['小明', 14, ['吃飯', '打游戲'], '我沒有女朋友']; function say(name, age, hobby, desc) { console.log(`我叫${ name }, 我今年${ age } 歲, 我喜歡${ hobby.join('和') }, ${ desc }`); } say(...user);
apply
const user = ['小明', 14, ['吃飯', '打游戲'], '我沒有女朋友']; function say(name, age, hobby, desc) { console.log(`我叫${ name }, 我今年${ age } 歲, 我喜歡${ hobby.join('和') }, ${ desc }`); } say.apply(null, user);
Math.max()
Math.min()
const arr = [1, 2, 233, 3, 4, 5]; console.log(Math.max(...arr));//推薦的ES6新方法 console.log(Math.max.apply(null, arr));//老方法
陣列操作
const arr1 = [1, 2, 3, 4]; const arr2 = [4, 2, 2, 1]; const arr3 = [2.2, '123', false]; const cArr1 = [1, 2, 3, ...arr3];//陣列添加資料 const cArr2 = [...arr1];//拷貝陣列 const [...cArr3] = arr3;//拷貝陣列 const cArr4 = [...arr1, ...arr2, ...arr3];//合并陣列
生成器函式
定位點yield
function *g() { console.log(1); yield 'hi~'; console.log(2); yield 'imooc~'; } const gg = g(); gg.next();//1 setTimeout(function() { gg.next();//2 }, 1000);
Set中元素不能重復
可以將一些元素變為陣列
let set = new Set([1, 2, 2, 3]); console.log([...set]);
Array.from物件轉陣列
該類陣列物件的屬性名必須為數值型或字串型的數字
該類陣列物件的屬性名可以加引號，也可以不加引號
const obj = { 0: 1, 1: '22', 2: false, length: 2 //只取前兩個資料 }; console.log(Array.from(obj));//1 22 console.log(Array.from(obj, item => item * 2));//2 44
Array.of將引數合成陣列
console.log(Array.of(1, 2, '123', false));
Array#fill填充陣列
let arr = new Array(10).fill(0, 0, 3);//從0開始，到3結束，都用0填充 console.log(arr); console.log([1, 2, 3].fill(0));
Array.includes判斷陣列中是否存在某個值
var arr = [1, 2, 3, 4]; console.log(arr.includes(1)); console.log(arr.includes(55));
keys values entries
const arr = [1, 2, 3, 444]; console.log(arr.keys()); for (let i of arr.keys()) { console.log(i); } for (let v of arr.values()) { console.log(v); } for (let [i, v] of arr.entries()) { console.log(i, v); }
find 根據條件(回呼) 按順序遍歷陣列 當回呼回傳true時 就回傳當前遍歷到的值
const res = [1, 7, 6, 3].find((value, index, arr) => value % 2 === 0);
console.log(res);
findIndex 根據條件(回呼) 按順序遍歷陣列 當回呼回傳true時 就回傳當前遍歷到的下標
const res = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));
console.log(res);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/157945.html
標籤：JavaScript
下一篇：原生JS輪播圖