基础知识常被8：ES6中的相关语法（持续更新中）（超级详细，一笔一笔亲自打印上去的）
基础知识常被8：ES6中的相关语法（持续更新中）
-
- let，const，var的对比：
-
- let
-
- 1.使用let声明得变量不能再次声明
- 2.具有块级作用域
- 3.let没有变量提升，必须要先定义在使用
- 4.let的声明不会像var声明一样作用到window中
- const
-
- 1.const 定义常量必须给初始值
- 2.const 一但定义了就不能修改了
- 3.具有块级作用域（同let）
- 4.常量是独立的，和window对象没有关系（同let）
- 5.常量必须先定义再使用，没有提升（同let）
- 数组的解构：
-
-
- 1.模式=数组
- 2.变量多，值少
- 3.变量少，值多
- 4.按需取值
- 5. 剩余值
- 6. 复杂情况
-
- 对象的解构：
-
-
- 1. 基本的解构
- 2. 按需取值
- 3.剩余值
- 4. 有冲突，可以为变量定义其他名字
- 5. 复杂的情况
-
- 箭头函数
-
-
- 样式：
- 特点：
-
- 函数参数的默认值
- 内置对象的扩展：
-
- Array
-
- 1.拼接
- 2.将为数组转换成数组
- 3.forEach遍历
- 4.find(值)和findIndex(索引)
- 5.includes（'查找的值',[开始的位置]）
- String
-
- 1.模板字符串
- 2.includes查找字符串中是否包含了某个字符串
- 3.startWith() 查找字符串开头是否含有某个字符串
- 4.endsWith() 查找字符串结尾是否含有某个字符串
- 5.repeat() 重复一个字符串 参数为重复的次数
- 6.trim() 去掉字符串两边的空白
- Number
- 数据结构Set、Map
-
- set
- 遍历
- weakset
- map
- weakmap
- 定义对象的简洁方式
在2019年的8月的最后一天，有必要写点总结的东西，所以今天就来讲讲ES6中的那点事儿。
let，const，var的对比：
let
1.使用let声明得变量不能再次声明
let a = 5;
let a = 6;
console.log(a);
错误提示：Uncaught SyntaxError: Identifier 'a' has already been declared
2.具有块级作用域
{
let a = 5;
console.log(a);
}
console.log(a); //a is not defined
3.let没有变量提升，必须要先定义在使用
console.log(a); //undefined
var a = 5;
console.log(a); //Cannot access 'a' before initialization
let a = 5;
4.let的声明不会像var声明一样作用到window中
var abc = function(x, y) {
return x + y;
}
console.log(abc(1,2));
console.log(window) // 在这里window中已经存在abc的属性了，作用到了abc中
let abc = function(x, y) {
return x + y;
}
console.log(abc(1,2));
console.log(window) // 因为是let定义的函数，所以在window的属性中就看不见abc的这个方法了
const
1.const 定义常量必须给初始值
const a;
console.log(a);//Missing initializer in const declaration
2.const 一但定义了就不能修改了
const a = 5;
const a = 10;
console.log(a);Uncaught SyntaxError: Identifier 'a' has already been declared
3.具有块级作用域（同let）
4.常量是独立的，和window对象没有关系（同let）
5.常量必须先定义再使用，没有提升（同let）
数组的解构：
1.模式=数组
模式=数组
let [a,b,c] = ['测试1','测试2','测试3'];
console.log(a); //测试1
console.log(b); //测试2
console.log(c); //测试3
2.变量多，值少
变量多，值少
let [a,b] = ['测试1','测试2','测试3'];
console.log(a); //测试1
console.log(b); //测试2
3.变量少，值多
变量少，值多
let [a,b,c] = ['测试1','测试2']
console.log(a);//测试1
console.log(b);//测试2
console.log(c);undefined
4.按需取值
按需取值
let [a, , b] = ['测试1', '测试2', '测试3']
console.log(a);//测试1
console.log(b);//测试3
5. 剩余值
剩余值
let [a,b,...c] = ['测试1', '测试2', '测试3','测试4']
console.log(a);//测试1
console.log(b);//测试2
console.log(c);//["测试3", "测试4"]
6. 复杂情况
复杂情况
let[,,[a,b],c] = ['aa','bb',['cc','dd'],'ee']
console.log(a)//cc
console.log(b)//dd
console.log(c)//ee
对象的解构：
1. 基本的解构
基本的解构
let {id,name,age} = {id:1,name:"张三",age:18};
console.log(id)//1
console.log(name)//张三
console.log(age)//18
2. 按需取值
按需取值
let {id,name} = {id:1,name:"张三",age:18};
console.log(id)//1
console.log(name)//张三
3.剩余值
剩余值
let {id,...c} = {id:1,name:"张三",age:18};
console.log(id) //1
console.log(c)// object{
age:18,
name:"张三"，
}
4. 有冲突，可以为变量定义其他名字
有冲突，可以为变量定义其他名字
let id = 5;
let {id} = {id:1,name:"张三 ",age:18};//Identifier 'id' has already been declared
let {id:nameId} = {id:1,name:"张三 ",age:18};//Identifier 'id' has already been declared
console.log(nameId);//张三
5. 复杂的情况
复杂的情况
let {code, data} = {
code: 200,
msg: '成功',
data: [
{id:1, title: 'aaa'},
{id:2, title: 'aaa'},
{id:3, title: 'aaa'}
]
};
console.log(code);
console.log(data);
箭头函数
样式：
let fn = () =>{
}
()小括号内放入参数，{}大括号内放入函数体
特点：
- 如果箭头函数参数只有一个，则小括号可以省略
- 如果箭头函数的函数体只有一行代码，则大括号可以省略，并且默认表示返回函数体的值（自带return效果）
- 箭头函数的内部没有arguments对象
- 没有argument对象那怎么遍历呢？
- let abc = (…z) =>{
console.log(z);
}
abc(1,2,3,4,5,6);
- 箭头函数不能当作构造函数
- 箭头函数的内部没有自己的this,箭头函数的this指向外部作用域的this
函数参数的默认值
（如果某个参数有默认值，则需要把该参数放到参数列表后面）
function abc (x,y=3){
console.log(x+y);
}
内置对象的扩展：
Array
1.拼接
拼接
let arr1 = [1,2,3,4];
let arr2 = [4,5,6,7];
let arr3 = [...arr1,...arr2];
console.log(...arr3); //1,2,3,4,4,5,6,7
2.将为数组转换成数组
将为数组转换成数组
let weishuzu = {
0:"张三",
1:"李四",
2:"王五",
length:3
}
let arr = Array.from(weishuzu);
console.log(...arr)//张三，李四，王五
3.forEach遍历
forEach 遍历
ES5
[1,2,3,4,5,6,7,8,9].forEach(function(item){
console.log(item)
});
ES6
[1,2,3,4,5,6,7,8,9].forEach(item=>console.log(item));
4.find(值)和findIndex(索引)
find(值)和findIndex(索引)
let result = [1,2,3,4,5,6,7,8,9].find(function(item,index,arr){
return item>5;
});
console.log(result);
let result = [1,2,3,4,5,6,7,8,9].findIndex(function(item,index,arr){
return item>5;
});
console.log(result);
5.includes（‘查找的值’,[开始的位置]）
includes
let arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.includes(4,2));//true
console.log(arr.includes(4,9));//false
console.log(arr.includes(10));//false
console.log(arr.includes(1));//true
String
1.模板字符串
模板字符串
let a ="你好";
let b = {
name:"张三",
age:18,
};
let c = `${b.name}${a}今天是一个号好天气,我今年${b.age}岁`
console.log(c);//张三你好今天是一个号好天气,我今年18岁
2.includes查找字符串中是否包含了某个字符串
includes查找字符串中是否包含了某个字符串
let a = 'ABCDEFGHIJKLMN';
console.log(a.includes('A',0));//true 从索引为0的地方开始寻找A 返回boolean
console.log(a.includes('A',1));//false
3.startWith() 查找字符串开头是否含有某个字符串
startWith() 查找字符串开头是否含有某个字符串
let a = 'ABCDEFGHIJKLMN';
console.log(a.startsWith('A'));//true
console.log(a.startsWith('B'));//false
4.endsWith() 查找字符串结尾是否含有某个字符串
endsWith() 查找字符串结尾是否含有某个字符串
let a = 'ABCDEFGHIJKLMN';
console.log(a.endsWith('LMN'));//true
console.log(a.endsWith('kMN'));//false
5.repeat() 重复一个字符串 参数为重复的次数
repeat() 重复一个字符串 参数为重复的次数
let a = 'ABCDEFGHIJKLMN';
console.log(a.repeat(10));
6.trim() 去掉字符串两边的空白
trim() 去掉字符串两边的空白
let a = ' ABCDEFGHIJKLMN ';
console.log(a.trim());
Number
Number.parseInt()
Number.parseFloat()
console.log(Number.parseInt('123abc'));
数据结构Set、Map
set
Set
//Set的特点就是该对象里面的成员不会有重复。
// - `size`：属性，获取 `set` 中成员的个数，相当于数组中的 `length`
// - `add(value)`：添加某个值，返回 Set 结构本身。
// - `delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。
// - `has(value)`：返回一个布尔值，表示该值是否为`Set`的成员。
// - `clear()`：清除所有成员，没有返回值。
let s = new Set();
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
arr.forEach(function (item) {
s.add(item) //set的add方法
});
console.log(...s); //去重 方式1
console.log(Array.from(s)); // from是将伪数组变为数组; 去重 方式2
console.log(s.size) //获取个数
console.log(s.delete(9)); //删除数据返回boolean
console.log(...s); //输出删除之后的set
console.log(s.has(2)); //返回一个boolean，告知参数是否是set的成员
s.clear(); //清空所有的成员，没有返回值
console.log(s); //查看清空之后的set
完成字符串去重
let set = new Set('ababbc');
let str = ([...set]).join('');
console.log(str); // abc
遍历
let arr = ['add', 'delete', 'clear', 'has'];
let list = new Set(arr);
********************1.***********************
for (let key of list.keys()) {
console.log('keys', key);
}
// keys add
// keys delete
// keys clear
// keys has
**********************************************
********************2.***********************
for (let value of list.values()) {
console.log('value', value);
}
// value add
// value delete
// value clear
// value has
**********************************************
********************3.***********************
for (let [key, value] of list.entries()) {
console.log('entries', key, value);
}
// entries add add
// entries delete delete
// entries clear clear
// entries has has
**********************************************
********************4.***********************
list.forEach(function (item) {
console.log(item);
})
//add delete clear has
**********************************************
weakset
- 方法
- WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
- WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
- WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中
- 注意
- WeakSet 没有size属性和forEach方法，没有办法遍历它的成员。
- WeakSet的元素只能是对象， WeakSet中的对象是弱引用， 只是把地址拿过来， 没有clear属性， 不能遍历
- 原因：
- WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。
let weakList = new WeakSet();
let arg = {
a: '1'
};
weakList.add(arg);
weakList.add({
b: '2'
});
console.log('weakList', weakList);
//weakList WeakSet {Object {b: "2"}, Object {a: "1"}}
map
- Map中的key可以是任意数据类型：字符串、数组、对象等 要注意集合Set添加元素用add()，而集合Map添加元素用set()
*******************************1.***************************
let map = new Map();
let arr = ['123'];
map.set(arr, 456);
console.log('map', map, map.get(arr));
************************************************************
*******************************2.***************************
let map = new Map([
['a', 123],
['b', 456]
]);
console.log('map args', map);
//map args Map {"a" => 123, "b" => 456}
//size delete clear方法 与 遍历同set一样
console.log('size', map.size); //size 2
console.log('delete', map.delete('a'), map); //delete true Map {"b" => 456}
map.clear();
console.log('clear', map); //clear Map {}
************************************************************
weakmap
- 方法：
-
1.没有遍历方法clear()、keys()、values()、entries()、size属性
-
2.只有get()、set()、has()、delete()
-
- 注意：
- 同WeakSet一样接收的key值必须是对象， 没有size属性， clear方法， 也是不能遍历
let weakmap = new WeakMap();
let o = {};
weakmap.set(o, 123);
console.log(weakmap.get(o)); //123
定义对象的简洁方式
let id = 1;
let name = 'zs';
let age = 20;
// 之前定义对象的方案
// let obj = {
// // 属性: 值
// id: id,
// name: name,
// age: age,
// fn: function () {
// console.log(this.age);
// }
// };
// obj.fn();
// ES6的新方案
let obj = {
id, // 属性名id和前面的变量id名字相同，则可以省略 :id
name,
nianling: age,
// 下面的函数是上面函数的简化写法，可以省略 :function 。但是注意这里仅仅是上面函数的简化，不是箭头函数
fn () {
console.log(this.name);
}
};
obj.fn();
好了，今日就更新到这里，有时间我会持续更新ES6的最新语法的，欢迎大家前来评论！