<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
/******************* es6 中模板字符串的使用 *****************************/
//es6 使用``(windows鍵盤英文輸入法下tab鍵上面那個鍵)來定義一個字符串。
let str = '中國';
const message = `我的祖國是 ${str}` //我的祖國是 中國
console.log(message)
function fn1() {
return 'i am fn1'
}
var fn2 = function () {
return 'i am fn2'
}
console.log(`${fn1()} xxx ${fn2()}`) //i am fn1 xxx i am fn2
//換行
let str2 = `我的祖國
是中國，
現住地
深圳`
console.log(str2)
let str3 = "我的祖國\n"
+ "是中國\n"
+ "現住地\n"
+ "深圳\n"
console.log(str3)
//日期轉換成 yyyy-MM-dd hh:mm:ss
let dt = new Date().toLocaleString('cn', { hour12: false });
console.log(dt);
//數組轉字符串
let arr = [1, true, "hello"];
console.log(arr.toString())
const bruce = { name: '張三' }
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
//call 第一個參數爲想要綁定的值 剩下的參數爲調用函數傳遞的參數
update.call(bruce, 1949, 'dsadsad')
console.log(bruce); //{name: "張三", birthYear: 1949, occupation: "dsadsad"}
//apply 第一個參數爲想要綁定的值 剩下的參數爲調用函數傳遞的參數(數組方式)
update.apply(bruce, [1949, 'dsadsad'])
console.log(bruce); //{name: "張三", birthYear: 1949, occupation: "dsadsad"}
const arr1 = [2, 3, -5, -11, 9];
console.log(Math.min.apply(null, arr1)); // -11
console.log(Math.max.apply(null, arr1)); //9
//查找數據
let peoples = [
{ id: 1000, name: '張三', age: 21 },
{ id: 1001, name: '李四', age: 18 },
{ id: 1002, name: '王五', age: 20 },
{ id: 1003, name: '趙六', age: 21 },
]
console.log(peoples.find(p => p.id === 1002)); //{id: 1002, name: "王五", age: 20}
console.log(peoples.find(p => p.id === 5000)); //undefined
console.log(peoples.findIndex(p => p.id === 1002)); //2
console.log(peoples.findIndex(p => p.id === 5000)); //-1
let arr2 = [1, 2, 3].map(function (item) {
return `<li>${item}</li>` //['<li>1</li>','<li>2</li>','<li>3</li>']
})
console.log(arr2.join('')) //<li>1</li><li>2</li><li>3</li>
console.log("---------------------------------------------------")
//some找到第一個符合條件的元素後，就會停止查找，返回true
console.log(peoples.some(p => p.age === 21)); //true
//every集合中的所有元素都符合條件，才返回true，發現第一個不符合條件後，則停止查找，返回false
console.log(peoples.every(p => p.age === 21)); //true
/******************** map 和filter 功能 **************************/
console.log(peoples.map(p => p.name)) //["張三", "李四", "王五", "趙六"]
console.log(peoples.map(p => p.age + 10)) //[ 31, 28, 30, 31 ]
peoples.map(function (item, index, arr) {
console.log('value值爲：', item); //10 20 30
console.log('index值爲：', index); //0 1 2
})
//符合條件的所有元素
console.log(peoples.filter(p => p.age === 18)); //[{ id: 1001, name: "李四", age: 18 }]
console.log("---------------------------------------------------")
const users = peoples.map(item => ({
userId: item.id,
userName: item.name,
userAge: item.age,
})
);
console.log(users)
//reduce 計算數組元素相加後的總和
/*
arr.reduce(callback,[initialValue])
callback （執行數組中每個值的函數，包含四個參數）
previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
currentValue （數組中當前被處理的元素）
index （當前元素在數組中的索引）
array （調用 reduce 的數組）
initialValue （作爲第一次調用 callback 的第一個參數。初始值）
*/
var items = [10, 120, 1000];
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
console.log(items.reduce(reducer, 0)); //1130
console.log(items.reduce((a, x) => a += x)); //1130
console.log(items.reduce((a, x) => a += x, 0)); //1130
console.log(items.reduce((a, x) => a += x, 10)); //1140
//求平均值
console.log(items.reduce((a, b) => a + b) / items.length); //376.6666666666667
//求上面peoples集合平均年齡
var pItems = peoples.map(p => p.age);
console.log(pItems.reduce((a, b) => a + b) / pItems.length); //20
//循環集合數據
for (let item of peoples) {
console.log(item)
}
console.log("---------------------------------------------------")
Object.keys(peoples).forEach(p => console.log(peoples[p]))
//console.log(peoples.filter(p => p.age.match(/^2/)));
//js類的使用
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
add() {
return this.x + this.y
}
}
var point = new Point(1, 2);
console.log(point)
console.log(point.add())
console.log("---------------------------------------------------")
//map存儲鍵值對
let userMaps = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
[1, 'one'],
[3, 'three'],
]);
console.log(userMaps)
//try...catch....finally
try {
foo.bar()
} catch (e) {
console.log(e.message)
} finally {
console.log('出錯與否最後都要執行')
}
//正則表達式
const input = "i am going to shenzhen";
const reg = /\w{3,}/ig //i忽略大小寫 g全局搜索
console.log(reg.test(input)) //匹配包含三個或三個以上字母的 true
console.log(input.match(/\w{3,}/ig)) //匹配包含三個或三個以上字母的 ["going", "shenzhen"]
console.log(input.replace(/\w{3,}/ig, '***')) //i am *** to ***
</script>
</head>
<body>
</body>
</html>
