简单说说ES6新特性
类似于HTML5是标准,IE，chrome是实现 例如国家定了医用口罩标准 （需要过滤XX，等等各种参数），咱们买的正规口罩是实现 目前ECMAScript除了JS还没别的实现，所以ECMAScript==JS也说得 过去 ES6发布于2015年发布,所以也可以叫es2015 去年的ES2021 是ES12 但是主要的改变是在es6,这几年的东西都增加的不多，所以把ES6以及 以后的版本统称为es6也合理，ES2022也也即将推出
◆ 1、声明变量
可以重复定义 无法限制修改，有些东西不会变化，没常量 没有块级作用域，只有函数作用域 变量提示带来的混乱
1 {
2 let a = 10;
3 var b = 1;
4 }
5 console.log(a); //出错 not defined
6 console.log(b); //1
在es5中如果要实现块级作用域，通常借助立即执行匿名函数来实现
1 (function(){
2 var a = 1;
3 }());
4 console.log(a); //出错，not defined
//let
console.log(a); //出错， not defined
let a = 1;
//var
console.log(a); //undefined
var a =1;
let a = 1;
let a = 1; //出错 let不可重复声明
var b = 1;
let b = 1; //出错 let不可重复声明
const c = 1;
let c = 1; //出错 let不可重复声明
var a = 1;
if(true){
a = 2; //出错 not defined
let a;
}
var a = 1;
if(true){
a = 2; //var允许重复声明，而且变量提升，故a=2正常赋值
var a;
}
const name = "🐻";
//name = '2' //报错
//但是也不是都不能变
const person = {
name:"🐻"
}
person.name="🐕";
console.log(person)//const实际上保证的，并不是变量的值不得改动，
而是变量指向的那个内存地址所保存的数据不得改动。
//对于简单类型的数据（数值、字符串、布尔值），
值就保存在变量指向的那个内存地址，因此等同于常量。
//但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，
保存的只是一个指向实际数据的指针，
//const只能保证这个指针是固定的（即总是指向另一个固定的地址），//至于它指向的数据结构是不是可变的，就完全不能控制了。因此，
将一个对象声明为常量必须非常小心。
//Symbol 的定义不能使用new 他使用Symbol()函数生成
let a = Symbol();
typeof a // "symbol"
//Symbol创建时可以传一个参数，表示对Symbol的描述
let s1 = Symbol('a');
let s2 = Symbol('b');
s1 // Symbol(a)
s2 // Symbol(b)
Symbol表示独一无二的值
1 let s1 = Symbol('a');
2 let s2 = Symbol('a');
3
4 //s1===s2 false;5 //既然Symbol的值都不相等
那么可以利用他的特性解决对象里同名覆盖的问题
6
7 let obj = {
8 [Symbol()]: 1
9 };
10 //或者
11 let s = Symbol();
12 let obj = {
13 [s]: 1
14 };
1 let s1 = Symbol.for('a');
2 let s2 = Symbol.for('a');
3
4 s1 === s2 // true
5
6 //两种写法区别
7 Symbol.for("a") === Symbol.for("a") // true
8
9 Symbol("a") === Symbol("a") //false
◆ 3、解构赋值（常用）
1 let [a,b,c] = [1,2,3]
2 var [a,,c]=[1,2,3];
3 console.log(a+' | '+c); //1 | 3
4 var [a,...b]=[1,2,3];
5 console.log(a+' | '+b);//1 | 2,3
6 console.log(b);//[2, 3]7 // ...将右侧多余的值以数组的形式赋值给左侧变量
rest
8
9 //设置默认值
10 var [a,b,c='default',d='default']=[1,2,3];11 console.log(a+' | '+b+' | '+c+' | '+d);
//1 | 2 | 3 | default
12
13 //找不到的会被赋值为undefined
14 var [a,b,c]=[1,2];15 console.log(a+' | '+b+' | '+c);
//1 | 2 | undefined
1 //对象的解构赋值
2
3 let obj={
4 a:1,
5 b:2
6 }
7 let {a,b}=obj;
8 console.log(a+" | "+b);//1 | 2
9
10 //重命名，把obj.a重命名为A
11 let obj={
12 a:1,
13 b:2
14 }
15 let {a:A,b}=obj;
16 console.log(A+" | "+b);//1 | 217 console.log(a);
//Uncaught ReferenceError: a is not defined
18
19 //设置默认值
20
21 let {a=1,b=2}={a:10};
22 console.log(a+" | "+b);//10 | 2
23
24 //字符串也可以解构
25
26 var [a,b,c,d,e]='nihao';
27 console.log(a);//
◆ 4、函数默认值
1 //es5写法
2 function sum(a,b){
3 b= b||0;
4 console.log(a+b)
5 }
6
7 sum(1)
8
9 //es6
10 function sum(a,b=0){
11 console.log(a+b)
12 }
13 sum(1)
14 function sum(a=2,b=0){
15 console.log(a+b)
16 }
17
18 sum()
◆ 5、箭头函数（常用）
箭头函数都是匿名函数
1 function show(num){
2 return num*num
3 }
4 var show = function(num){
5
6 return num*num
7 }
89 //如果箭头函数不需要参数或需要多个参数，
就使用一个圆括号代表参数部分。提个参数可以去掉括号
10 var show =(num)=>{
11 return num*num
12 }13 //如果只有一条return语句，可以省略大括号和return
隐式返回
14
15 var show =num=>num*num;
16
17
18
19 //箭头函数的this继承自他的父作用域20 //而且与我们原来普通函数不同，
原来的函数this是调用时动态指定的，
21 //而箭头函数是词法作用域，他里的this是定义时就指定的
而且不会随着调用方式不同而改变
22
23 //如下例子
24 var log_this = ()=>{
25
26 console.log(this)
27 }
28 var log_this = function(){
29
30 console.log(this)
31 }
32
33 var obj = {
34 hobbies:['code','run','paly game'],
35 logHobbies:log_this
36 }
37
38
39 obj.logHobbies()
40
41
42 log_this()
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
◆ 6、模板字符串（常用）
1 const name="小🐻";
2 const age = 2;
3
4 console.log('ta的名字是'+name+',它今年'+age+'了');5 console.log
('<div data-age="'+age+'">'+name+'</div>');
//这种更难受
6 console.log(`ta的名字是${name},它今年${age}了`)
7 console.log(`<div data-age="${age}">${name}
8 </div>`)
1 var arr = [{
2 name:"苹果",
3 price:11
4 },{
5 name:"香蕉",
6 price:12
7 }];
8
9
10 var template = `
11 <ul>
12 ${arr.map(v=>`
13 <li>${v.name}
14 <span>${v.price}</span>
15 </li>
16 `).join('')}
17 </ul>
18 `
19
20 console.log(template)
21
22 document.body.innerHTML = template;
◆ 7、数组
1 const a = [1, 2, 3];
2 const b = [4,5,6];
3 const c = [...a] // [1,2,3]
4 //轻松拼接两个数组
5 const d = [...a,...b] // [1,2,3,4,5,6]
6
7
8 //类数组对象变成数组
9 var list=document.getElementsByTagName('a');
10 var arr=[...list];
1 const obj1 = { a: 111, b: 222 };
2 const obj2 = { c: 333, d: 444 };
3 const merged = { ...obj1, ...obj2 };4 console.log(merged); // ->
{ a: 111, b: 222, c: 333, d: 444 }
5 //或者这样
6 const others = {third: 3, fourth: 4, fifth: 5}
7 const items = { first:1, second:1, ...others }8 items //{ first: 1, second: 2, third: 3, fourth: 4,
fifth: 5 }
9
10
11 //展开字符串
12
13 const str = 'hello'
14 const array_str_ = [...str] //
Array.from
1 //Array.from方法用于将两类对象转为真正的数组
2 var args = Array.from(arguments);3 var list = Array.from(document.querySelectAll('li'));
Array.of()
1 //这个方法的主要目的，是弥补数组构造函数Array()的不足。
因为参数个数的不同，会导致Array()的行为有差异。
2 Array() // []
3 Array(3) // [, , ,]
4 Array(3, 11, 8) // [3, 11, 8]
5
6 Array.of(3, 11, 8) // [3,11,8]
7 Array.of(3) // [3]
8 Array.of(3).length // 1
◆ 8、for of 循环
1 看一下咱们会的循环方法
2 for 无法循环对象3 for in 存在问题 他会遍历所有可遍历属性
如果为原型加了一些属性，那也会遍历出来
4 forEach 循环数组 无法终止
56 最终es6为了统一，也借鉴了c++,java,python语言引入了for of
循环 作为遍历所有数据结构的统一的方法。
7 for...of循环可以使用的范围包括数组、Set 和 Map 结构、8 某些类似数组的对象
（比如arguments对象、DOM NodeList 对象）、
9 后文的 Generator 对象，以及字符串。
10 -- 对象不能使用for of
1 for(let v of [1,2,3]) {
2 console.log(v); // 1 2 3
3 }
4 let p = document.querySelectorAll("p");
5 for (let x of p) {
6 console.log(x);
7 }
◆ 9、set
1 //ES6 提供了新的数据结构 Set。它类似于数组，
但是成员的值都是唯一的，没有重复的值。
2
3 const set = new Set([1, 2, 2, 4, 4]);
4 [...set]
5 //用Set 去重非常方便 ，数组去重面试常考题
6
7 [...new Set(arr)]
来源：
https://www.cnblogs.com/ljyn/p/15879335.html
“IT大咖说”欢迎广大技术人员投稿，投稿邮箱：aliang@itdks.com
IT大咖说 | 关于版权
由“IT大咖说（ID：itdakashuo）”原创的文章，转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信：ITDKS10（备注：投稿），茉莉小姐姐会及时与您联系！
感谢您对IT大咖说的热心支持！
相关推荐
推荐文章