<!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>