前端路线--ES6（day02）
day02-01-Set对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Set 对象
// 允许存储任意类型的为一值，不是原始值还是对象的引用
// 不能添加重复的值
// +0和-0 这个是恒等的，在set对象中不能重复添加
// undefined和undefined 相等，在set对象中不能重复添加
// NaN和NaN //在set对象中NaN不能重复添加
console.log(undefined == undefined); //true
console.log(NaN == NaN); //false
// 定义一个Set对象
let oSet = new Set();
oSet.add(1) //添加一项内容
oSet.add(2) //添加一项内容
oSet.add(1) //不能添加重复的值
console.log(oSet);
console.log(oSet.size);
</script>
</body>
</html>
day02-02-Set对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Set 对象
// 允许存储任意类型的为一值，不是原始值还是对象的引用
// 不能添加重复的值
let arr = [1, 2, 3, 4, 1, 2, 3, 1, 2, 3]
let oSet = new Set(arr)
console.log(oSet); //得到一个set对象,是一个伪数组
// 将set对象转成数组
// ...剩余运算符
console.log([...oSet]);
console.log(...oSet); //取出oSet中的每一项的值
// set对象可以进行数组的合并去重
let a = [1, 2, 3, 4]
let b = [2, 3, 4, 5]
let aSet = new Set(a)
let bSet = new Set(b)
let c = [...aSet, ...bSet]
console.log([...new Set(c)]); //[1,2,3,4,5]
</script>
</body>
</html>
day02-03-扩展知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = [1, 2, 3];
let b = [4, 3, 2];
let aSet = new Set(a)
let bSet = new Set(b)
console.log(bSet);
// 需求1：取出a和b的交集
// filter()
/*
let c = new Set([...aSet].filter(function (item) {
// item指的是数组a中的元素
return bSet.has(item) //看b中是否包含有item
}))
*/
// 等价的
let c = new Set([...aSet].filter(item => bSet.has(item)))
console.log([...c]); //[2, 3]
// 需求2：取出a和b的差集
let d = new Set([...aSet].filter(item => !bSet.has(item)))
console.log(d);
console.log([...d]); //[1]
// 需求3：取出a和b的并集
console.log([...new Set([...aSet, ...bSet])]); //[1, 2, 3, 4]
</script>
</body>
</html>
day02-04-Proxy-简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Proxy
// Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。
// 它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。
// 一个Proxy分为两个部分
// target
// handler
// 定义一个目标对象
let target = {
username: "二哥",
age: 18
}
// 方法
let handler = {
// get获取
get: function (target, key) {
console.log("get方法执行了");
return target[key]
},
// set设置
set(target, key, value) { //方法在es6中可以省掉:function
// value 新值
console.log(value + 1);
target[key] = value
}
}
let proxy = new Proxy(target, handler)
console.log(proxy);
console.log(target.username); //二哥
console.log(proxy.username); //二哥 这个是调用了handler中的get方法
proxy.age = 28 //这个是调用了handler中的set方法
console.log(target);
</script>
</body>
</html>
day02-05-Reflect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上（当前某些方法会同时存在于 Object 和 Reflect 对象上），未来的新方法会只部署在 Reflect 对象上。
let obj = {
username: "二哥",
age: 18,
get say() {
return this.username + this.age
}
}
let obj2 = {
username: "好谷",
age: 28
}
let obj3 = {
username: "好谷学员",
age: 18
}
console.log(obj.username); //二哥
console.log(Reflect.get(obj, "username")); //二哥
console.log(Reflect.get(obj, "sex")); //undefined
console.log(Reflect.get(obj, "say")); //二哥18
console.log(Reflect.get(obj, "say", obj2)); //好谷28
console.log(Reflect.get(obj, "say", obj3)); //好谷学员18
</script>
</body>
</html>
day02-06-Proxy-Reflect-组合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Proxy
// Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。
// 它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。
// 一个Proxy分为两个部分
// target
// handler
// 定义一个目标对象
let target = {
username: "二哥",
age: 18
}
// 方法
let handler = {
// get获取
get(target, key) {
console.log("get方法执行了");
// return target[key]
return Reflect.get(target, key)
},
// set设置
set(target, key, value) { //方法在es6中可以省掉:function
// value 新值
console.log(value + 1);
// target[key] = value
Reflect.set(target, key, value)
}
}
let proxy = new Proxy(target, handler)
console.log(proxy.age);
proxy.age = 28 //这个是调用了handler中的set方法
console.log(target);
</script>
</body>
</html>
day02-07-字符串相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
</ul>
<script>
// 用单引号或者双引号括起来的代码就是字符串
// let str = "abcdefg二哥"
// console.log(str);
// console.dir(String)
// slice(m,n)
// console.log(str.slice(1, 2)); //b
// console.log(str.slice(1, -1)); //bcdef
// substr(m,n)
// console.log(str.substr(1, 2)); //bc
// substring(m,n)
// console.log(str.substring(1, 2)); //b
// console.log(str.split("")); //['a', 'b', 'c', 'd', 'e', 'f', 'g']
// trim() 去除字符串首尾的空格
// match() //
// search() //
// replace() //
// indexOf()
// lastIndexOf()
// str.toLowerCase() //转成小写
// str.toUpperCase() //转成大写
// console.log(encodeURI(str)); //abcdefg%E4%BA%8C%E5%93%A5 编码
// console.log(decodeURI("abcdefg%E4%BA%8C%E5%93%A5")); //abcdefg二哥
// console.log(encodeURIComponent("abcd#?!")); //对特殊字符进行编码
// console.log(decodeURIComponent("abcd%23%3F!")); //abcd#?! 解码
// ES6中新增加的
let str = "abcdefg二哥"
// - includes()：返回布尔值，判断是否找到参数字符串,查找不到返回false。
console.log(str.includes("d")); //true
console.log(str.includes("dd")); //false
// - startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
console.log(str.startsWith("abc")); //true
console.log(str.startsWith("cabc")); //false
console.log(str.startsWith("d", 3)); //true
// - endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
console.log(str.endsWith("哥")); //true
// repeat()：返回新的字符串，表示将字符串重复指定次数返回。
console.log("ge".repeat(2)); //gege
console.log("erge".repeat(0.5)); //""
console.log("erge".repeat(1.5)); //erge
// console.log("erge".repeat(-2)); 报错
// - padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
// 参数1：指的是补齐之后的长度
// 参数2：用来补全的字符串
console.log("k".padStart(2, "o")); //ok
console.log("k".padStart(2, "ho")); //hk
console.log("k".padStart(5, "ho")); //hohok
// - padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
// 参数1：指的是补齐之后的长度
// 参数2：用来补全的字符串
console.log("k".padEnd(2, "o")); //ko
let arr = [{
id: 1,
title: "标题001",
content: "内容001"
}, {
id: 2,
title: "标题002",
content: "内容002"
}, {
id: 3,
title: "标题003",
content: "内容003"
}, {
id: 4,
title: "标题004",
content: "内容004"
}]
let oList = document.querySelector("#list")
let str2 = ""
// for (let i = 0; i < arr.length; i++) {
// str2 += "" + arr[i].title + "
" + arr[i].content + "
序号：
${arr[i].id + 10}
${arr[i].title}
${arr[i].content}
`
}
oList.innerHTML = str2
</script>
</body>
</html>
day02-08-数值相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num = 10
// 用于检查一个数值是否为有限的（ finite ），即不是 Infinity
console.log(Number.isFinite(num)); //true
console.log(Number.isFinite(Infinity)); //false
console.log(Number.isFinite(-Infinity));//false
console.log(Number.isFinite(Math.PI)); //true
console.log(Math.PI); //3.141592653589793
console.log(Number.isFinite(NaN)); // false
// ** 指数运算符
// console.log(2 ** 2);
// console.log(2 ** 2 ** 2); 16
// 右结合，从右至左计算
console.log(2 ** 2 ** 3); //256
console.log(3 ** 3 ** 3); //7625597484987
</script>
</body>
</html>
day02-09-对象相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 需求
// 给定的obj和obj2这两个对象，将这两个对象组成一个新的对象
// 其中新对象包含有obj和obj2的所有属性（使用扩展运算符...）
let obj = {
username: "二哥",
age: 18
}
let obj2 = {
sex: "男"
}
// 对象的合并
console.log({ ...obj, ...obj2 });
let a = 10;
let b = 20;
console.log({ a, b }); //对象的属性简写
// 等价的
console.log({ a: a, b: b });
const obj3 = {
["he" + "llo"]() {
return "Hi";
}
}
console.log(obj3.hello()); //"Hi"
let obj4 = {
username: "好谷",
age: 28,
sex: "未知"
}
console.log({ ...obj, ...obj4 }); //如果对象有相同的属性后面的会覆盖前边的对象属性
console.log({ ...obj4, ...obj });
// Object.assign(target, source_1, ···)
// 用于将源对象的所有可枚举属性复制到目标对象中。
let target = { username: "就业力" }
Object.assign(target, obj, obj2) //将obj和obj2对象中的属性一一拷贝到target对象中
console.log(target);
</script>
</body>
</html>
day02-10-数组相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数组的定义
// 字面量形式
// let arr = [1, 2, 3, 4, 5]
// 通过new关键字定义
// let arr2 = new Array(10) //定义一个空数组指定长度为10
// 定义数组指定元素
// let arr3 = new Array(1, 2, 3, 4, 5);
// 改变原数组的方法
// push()
// pop()
// unshift()
// shift()
// sort()
// reverse()
// splice()
// slice()
// concat()
// join()
// toString()
// indefOf()
// lastIndexOf()
// 遍历数组
// for()
// for in
// for of
// forEach()
// map()
// filter()
// some()
// every()
// reduce()
// ES6新增加的
// 定义数组
// Array.of()将参数中所有值作为元素形成数组
console.log(Array.of(1, 2, 3, 4, 5)); // [1, 2, 3, 4, 5]
// Array.from()将类数组对象或可迭代对象转化为数组。
// 什么是类数组（伪数组）
// arguments
// Map对象
// Set对象
// 获取到的DOM集合
console.log(Array.from([1, 2])); //[1, 2]
let a = new Set([1, 2, 3, 4, 5])
console.log(Array.from(a)); // [1, 2, 3, 4, 5]
</script>
</body>
</html>
day02-11-数组扩展方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// - find()查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
let arr = Array.of(1, 2, 3, 4, 5, 6)
var a = arr.find(function (item) {
return item > 3
})
console.log(a); //4
// - findIndex()查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
var aIndex = arr.findIndex(function (item) {
return item > 3
})
console.log(aIndex); //3
// - fill() 将一定范围索引的数组元素内容填充为单个指定的值。
// fill()
// 参数1：用来填充的值
// 参数2：起始索引
// 参数3：结束索引，默认到数组末尾
let arr2 = Array.of(1, 2, 3, 4)
// console.log(arr2.fill(0, 1, 3)); //[1, 0, 0, 4]
// - copyWithin() 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
// 参数1：被修改的起始索引
// 参数2：被用来覆盖的数据的起始索引
// 参数3：被用来覆盖的数据的结束索引，默认到数组末尾
let arr3 = Array.of(1, 2, 3, 4)
// console.log(arr3.copyWithin(0, 2, 4)); //[3, 4, 3, 4, 5, 6]
// - entries()遍历键值对。
for (let [key, value] of arr3.entries()) {
console.log(key); //数组的索引
console.log(value); //数组的元素
}
// - keys()遍历键名。
for (let key of arr3.keys()) {
console.log(`key---${key}`); //数组的索引
}
// - values()遍历键值。
for (let value of arr3.values()) {
console.log(`value---${value}`); //数组的索引
}
// - includes()数组是否包含指定值。
console.log(arr3.includes(1)); //true
console.log(arr3.includes(11)); //false
// - flat()嵌套数组转一维数组
let arr4 = [1, 2, 3, [4, 5, 6]]
console.log(arr4.flat()); // [1, 2, 3, 4, 5, 6]
// - flatMap()先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。
var newArr = arr3.flatMap(function (item) { //了解
return item * 10
})
console.log(newArr);
// 思考题---用所学的知识实现
// 给一个数组 let arr=[1,2,[3,4,[5,6]]]
let arr5 = [1, 2, [3, 4, [5, 6]]] //将这个数组转换成一维数组
// 专有名词 数组扁平化
</script>
</body>
</html>