ES6 - 新增内容【某些部分未修改完成！】
解构赋值
let obj = {
a: 1,
b: 2
}
// console.log(obj);
// let a = obj.a;
// let b = obj.b;
// console.log(a, b);
// ES6中的写法！
// 对象的解构赋值要求变量名和对象的属性名必须保持一致！
let {a, b} = obj;
console.log(a, b);
数组解构
let arr = ["a", "b", "c"];
let [e, f] = arr;
console.log(e, f);
let a = 0;
let b = 1;
// 怎么快速交换a和b的值!
[a, b] = [b,a];
console.log(a, b)
字符串的解构赋值
/ 字符串的构解赋值和数组解构是差不多的！
let str = 'lvhang';
let [a, b] = str;
console.log(a, b)
展开运算符
let arr = [1, 2, 3, 4];
let arr2 = ["a", "b", ...arr, "c", "d"];
console.log(arr2)
console.log(arr2.length); // 8
// 展开运算符 顾名思义，就是把数组中的元素，一个一个展开出来， 成为单个的元素！
// 剩余参数 [就是展开运算符 + 解构赋值的妙用！]
let [a, b, ...c] = arr;
console.log(a, b, c);
对象展开
let obj = {
a: 1,
b: 2
};
let obj2 = {
...obj,
c: 3,
d: 4
};
console.log(obj2)
let {a, b, ...c} = obj2;
console.log(a, b, c);
// 可以用obj的解构来避免浅拷贝！
let obj3 = {...obj};
obj3.a = 1000;
console.log(obj, obj3)
Set
// set本身就是一个函数
// 用来构建对象
// 专业说法： 就是一个构造函数. 用来构建某一类型的对象 - 【构建的对象的过程我们把它叫做】对象的实例化
// Set的参数可以是数组或者是类数组
let arr = [1, 1, 2, 2, "a", 3, 4];
let s = new Set(arr);
console.log(s)
// 它可以帮助我们对传进去的数组进行去重!
arr = [...s]; // 这是展开运算符
console.log(arr)
// size属性 他返回他最后保留的元素的个数[也就是数组去重之后的个数]
// 数值的个数 ====> 相当于 length
console.log(s.size)
// s.clear(); // 清空所有值 返回值是undefined
// console.log(s)
// s.delete("a"); // 删除某一项 返回一个布尔值 成功true 失败 false
// console.log(s)
// 添加
s.add(6);
// s.has(); 查看是否包含某一项
console.log(s.has("a")) // true
console.log(s.has(6)) // true
console.log(s)
/**
*
set.clear(;l/清空所有值
set.delete(val)删除某一项参数:
val要删除的值返回值:
true ll false是否删除成功(没有这个值才会出现删除不成功)
set.has(val)是否包含某一项
参数:
val要查找的值返回值:
truell false是否包含这个值
set.add(val)添加一项
参数:
val要添加的项
返回值:
set对象本身
*
*/
Map
let arr = [
// 这儿必须用迭代器的写法！
// 也就是你必须以这种方式来进行传值！
["a", 1],
["b", 2],
["c", 3]
];
let m = new Map(arr);
console.log(m)
// clear 清空所有值!
// m.clear();
// delete(key) 删除某一项
// 参数： 数据的key值
// 返回值：true ll false是否删除成功(没有这个值才会出现删除不成功)
// console.log(m.delete("a")); // true
// get(key) 获取某一项的值！
console.log(m.get("b")); // 2
console.log(m);
// has(key) 是否包含某一项！
// 有， 就返回true， 无， 则返回false
console.log(m.has("c")); // true
// set(key, value) 设置一个值！同时也可进行修改！
// 返回添加后的Map对象！
console.log(m.set("d", 'lvhang'));
箭头函数【省略！】
数组新增方法
Array.from()
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// // 数组 构造函数下面的方法！
/*
Array.from(类数组) 把一个类数组转换成真正的数组
类数组： 有下标， 有length
返回值： 转换之后的新数组！
他是构造函数下面的一个方法，不是数组哈！
*/
let lis = document.querySelectorAll("#list li");
console.log(lis);
console.log(typeof lis);
console.log(lis instanceof Array); // false 说明是类数组！
console.log(Array.isArray(lis)); // false
// 把类数组转换成数组！
lis = Array.from(lis);
console.log(lis);
console.log(lis instanceof Array); // true
</script>
</body>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let lis = document.querySelectorAll("#list li");
let arr = [];
// 第二个参数可以接收一个函数，也就是map函数!
// 替换 根据返回值生成一个新数组！
// 第三个参数就是this指向！
// 这儿就需要注意了， 箭头函数的this指向的是他声明时所在的作用域！
// 所以 修改this指向最好不要用箭头函数!
// lis = Array.from(lis, function(item, index) {
// console.log(index, item, this)
// return index;
// }, arr);
// 当然，还有一种更加简单的方法把类数组转换成数组，就是使用扩展运算符！
let lisn = [...lis]
console.log(lisn);
</script>
</body>
Array.of()
{
// 返回一个由参数组成的数组
console.log(Array.of(1, 2, 3, 4, "A"))
}
Array.isArray()
let arr = [];
let o = {};
// Array .isArray(要检测的数据) 检测某个数据是否是数组！
console.log(Array.isArray(arr), Array.isArray(o)); // true false
数组本身增加的方法！
find 方法
let arr = ["a", "b", "c", "d"];
console.log(arr.indexOf("a")); // 返回元素在数组中的索引！没有就返回-1
// find 就是查找数组元素中的满足要求的第一个元素的值！如果有就返回这个值，没有找到就返回undefined
// 找到元素之后就立即终止循环！
let val = arr.find((value, index, arr) => {
if (value >= "a") {
return true, index;
}
})
// 简写方式
// val = arr.find(value => value >= "b");
console.log(val); // c
findIndex
{
let arr = ["a", "b", "c", "d"];
// let val = arr.findIndex(value => {
// if (value > "c") {
// return true;
// }
// })
//就是查找符合条件的数组元素，然后返回其索引！
let val = arr.findIndex(value => value >= "c")
console.log(val);
}
数组扁平化 flat | flatMap
{
// 把二维数组转化成一维数组【就是数组扁平化】
let arr = [
["小明", "18"],
["小刚", "18"],
[
[1,
[3, 4]
]
]
]
// 可以指定数组扁平化的层数
// 如果不知道层数的话，那就直接写Infinity
console.log(arr.flat(3));
console.log(arr.flat(Infinity));
}
// flatMap()
// 他只能扁平化一层的数据！
let arr2 = [
["小明", "18"],
["小刚", "18"]
];
// 传入回调函数
let newArr = arr2.flatMap((value, index) => {
console.log(value, index)
// 我只想要数组的第一位
value = value.filter((value, index) => {
return index == 0
})
return value;
})
console.log(newArr);
fill 填充元素
let arr = [1, 2, 3, 4];
// 第一个是我们要填充进去的数据！
// 下面的操作会把原来的数组中的元素全部替换成'lvhang'
// 但是不会修改原来数组的长度！
// arr.fill('lvhang');
// console.log(arr);
// 第二个元素是 从哪个位置开始替换!
// 第三个参数是在哪儿停止！
// 包含开始， 不包括结束！
arr.fill('lvhang', 0, 1);
console.log(arr)
includes
let arr = [1, 2, 3, 4];
// 判断数组中是否包含一个指定的值！
// 第二个参数就是从指定的位置开始查询！
console.log(arr.includes(1)) // true
console.log(arr.includes(1, 3)) // false
字符串新增方法
// includes 和数组的一样！
// startsWith 判断字符是以那个字符开始的！
// endsWith 判断字符是以那个字符结束的！
// 第二个参数是从字符串的那个位置开始匹配！
let str = "我和吕成鑫";
console.log(str.startsWith('我')) // true
console.log(str.startsWith('我', 0)) // true
console.log(str.startsWith('我', 1)) // false
console.log(str.endsWith('吕成鑫')) // true
console.log(str.endsWith('吕成鑫')) // true
console.log(str.endsWith('吕', 3)) // true
// repeat()
let str2 = "a";
let res = str2.repeat(30);
// res 的长度1就等于 字符串元素的个数乘以重复的次数！
console.log(res); // 30个a
console.log(res.length); // 30
模板字符串
<body>
<p><strong></strong> 就要<strong></strong> 岁了， 终于升入了 <strong></strong> </p>
<script>
{
let p = document.querySelector("p");
let xiaoming = `小明`;
let age = `18`;
let school = `初中`;
// 原始做法
// p.innerHTML = ' <p><strong>' + xiaoming + '</strong> 就要<strong>' + age + '</strong> 岁了， 终于升入了 <strong>' + school + '</strong> </p>';
// 模板字符串
p.innerHTML = ` <p><strong>${xiaoming}</strong> 就要<strong>${age}</strong> 岁了， 终于升入了 <strong>${school}</strong> </p>`;
}
// ${} 插值表达式
// 可以放函数
// 三元表达式
</script>
</body>
对象新增方法
{
let a = 0;
let b = 1;
// let obj = {
// a: a,
// b: b
// }
// 简洁表示法
let obj = {
a,
b,
// c: function () {
// console.log(a)
// }
// 函数简洁表示法
c() {
console.log("a")
}
}
console.log(obj)
// 属性名表达式
// 需求：让我们自定义的name成为对象的属性名！
let name = '小明';
let obj2 = {
c() {
console.log("a");
},
// ES6新增方法
[name]: 111
}
// 原始做法
// obj2[name] = 111;
console.log(obj2)
// 对象合并！
let obj3 = {
a: 1,
b: 2
};
let obj4 = {
// 第一种方法就是剩余参数啦！
// ...obj3,
c: 3,
d: 4
};
// 需求： 把obj3合并到obj4中！
// 第二种方法就是Object.assign() 新增的！
// 把后面的对象合并到前面的对象！
Object.assign(obj4, obj3);
var res2 = Object.assign({}, obj3, obj4);
console.log(obj4);
console.log(res2);
// is 方法
// 三等和is的某些！区别！
console.log(Object.is(1, "1")); // false 不会进行类型转换！
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true
console.log(NaN === NaN); // false
}
本文来自博客园，作者：{lvhanghmm}，转载请注明原文链接：https://www.cnblogs.com/lvhanghmm/p/14923862.html
浙公网安备 33010602011771号