ES6新特性

1.不一样的变量声明：const和let

ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部）let和var声明的区别。

?
1
2
3
4
5
6
var x = '全局变量';
{
  let x = '局部变量';
  console.log(x); // 局部变量
}
console.log(x); // 全局变量

let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

?
1
2
3
4
5
6
7
const a = 1
a = 0 //报错<br>//如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行：
 
const student = { name: 'cc' }
 
student.name = 'yy';// 不报错
student  = { name: 'yy' };// 报错

详细：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
var a = "God is girl";
变量域解析
1、声明阶段
声明一个变量会把当前变量得声明语句提升到当前作用域得最前面，默认值为undefied
2、执行阶段
值留在原地等待执行
var声明变量的缺点
1、存在变量预解析
2、可以重复声明
3、无法限制修改
4、没有块级作用域，只有全局作用域，函数作用域
新的声明变量得方式对var声明变量得缺点做了改正
let
不存在变量预解析  声明之前无法使用
不能重复声明
存在块级作用域
const
不存在变量预解析  声明之前无法使用
不能重复声明
定义的是常量，后续无法修改，一旦声明要立即赋值
 
*/
var a = "God is girl";
var a = "hello"
let name = "lili";
console.log(name);
//块级作用域
{
  var s = 'syuse';
  let t= 'teacher';
}
console.log(s);// syuse
// console.log(t);// is not defined
if (true) {
  //条件块
  var o  = "orange";
  const g = "grape";
}
console.log(o);
// console.log(g);
// for (var i = 0; i 5; i++) {
//     //循环块
// }
var btn = document.querySelectorAll('button');
for (let i = 0; i < btn.length; i++) {
  btn[i].onclick =function(){
    console.log(i);
  }
}

2.模板字符串

在ES6之前，通常通过“\”和“+”来构建模板：

?
1
2
3
$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

而对ES6来说，基本的字符串格式化，将表达式嵌入字符串中进行拼接，用${}来界定；ES6反引号(``)直接搞定。

?
1
2
$("body").html(`This demonstrates the output of HTML content to the page,
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

详细：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
  模板字符串：用反引号来定义
  好处：
      1、可以当作普通字符串使用
      2、不受空格回车等的影响
      3、可以嵌入变量、表达式等
      方法：${变量或者表达式}
  */
  // let a = "哈哈";
  // let b = `我是模板字符串`;
  // // document.body.innerHTML = b;
  // var s = '王祖贤';
  // console.log('我是'+s);//es5
  // console.log(`我是${s}`);//es6
  // console.log(`求和${1+1}`);
  // var oU = document.querySelectorAll('ul')[0];
  // var obj = {
  //     name:'sss',
  //     age:18,
  //     job:'coding'
  // }
  // oU.innerHTML = '<li>'+obj.name+'</li><li>'+obj.age+'</li><li>'+obj.job+'</li>';
 
  //例题
  for (let i = 0; i < 3; i++) {
      let abc = i;
      console.log(abc);
  }

3.箭头函数（Arrow Functions）

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体；箭头函数最直观的三个特点：①不需要 function 关键字来创建函数②省略 return 关键字③继承当前上下文的 this 关键字。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ES5
var add = function (a, b) {
    return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;
 
// ES5
[1,2,3].map((function(x){
    return x + 1;
}).bind(this));
     
// 使用箭头函数
[1,2,3].map(x => x + 1);

　　注：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return。

4.函数的参数默认值

?
1
2
3
4
5
6
7
8
9
10
11
12
13
// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}
 
// ES6；
function printText(text = 'default') {
    console.log(text);
}
 
printText('hello'); // hello
printText();// default

5.对象和数组解构

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];
 
// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);
 
// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

数组详细：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang='zh-CN'>
 
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>啦啦啦</title>
</head>
<style></style>
 
<body>
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
 
<script>
  // forEach map  find  findIndex  from of
  // 指令类型的循环方法
  // for 过程类型的循环
  let arr = [1, 2, 3, 4, 5, 6, 7];
  //forEach方法会改变原数组
  arr.forEach((item, index, arr) => {
      arr[index]++;
  })
  console.log(arr);
  // map方法不改变原数组 而是返回新数组
  let arr1 = arr.map((item, index, arr) => {
      return --arr[index];
  })
  console.log(arr1);
  //forEach和map是Array.prototype的方法
  // react 循环渲染页面的时候 map方法
  //from of
  // from 用来将一些伪数组对象和可遍历的对象转换为数组 Array函数的方法
  let divs = document.querySelectorAll('div');
  let divArr = Array.from(divs);
  console.log(divArr);
  //of 用来将方法函数获取到的实参拼成一个数组 也是Array的方法
  let ofArr = Array.of(1, 2, 3, 'aa', true);
  console.log(ofArr);
  // find findIndex Array.prototype的方法
  // 用法 数组.find/findIndex((item,index,arr)=>{})
  // 作用：当返回值为true的时候将当前的数组项/索引返回出来 只会返回第一个满足条件的值
  let arr3 = [1,2,3,4,5,6,7,8,9]
    let res = arr3.findIndex((item)=>{
      return item>3;
  })
  console.log(res);
  // for (let i = 0; i < 10; i++) {
  // setInterval(()=>{
  //     console.log(i);
  // },50)
  // }
  // setTimeout(()=>{
  //     console.log(this);
  // },1000)
  // js 划分作用域 es5  函数  es6
  let Arr = [1,2,3];
  let Arr1 =  Arr.map((item,index,arr)=>{
      return Arr[index]*Arr[index];
  })
  let Arrs = Arr1.join();
  console.log(Arrs);
</script>
</body>
</html>

解构赋值详细：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    /*
        什么是解构赋值；
        es6允许数组或者对象按照某种模式从数组或者对象中提取出来我们需要的值
        把他赋值给一个变量。这个过程叫做解构赋值
        模式：右边是什么左边是什么
        数组的解构赋值；数组是有次序的按照数组的顺序一一解构
        如果解构不成功，值为undefined；
        可以写默认值  变量  =  默认值
        优先取要解构数据中的值，如果没有那么取默认值，默认值不存在，那么就是undefined
    */
    const arr = ['aaa','bbb','ccc'];
    var a  = arr[0];
    var b = arr[1];
    var c = arr[2];
    //es6
    const [item1,item2,item3,item4]=arr;
    console.log(item3);
 
</script>

　　对象的解构赋值详细：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
    /*
    对象的解构赋值:
    定义的变量名和对象中的属性名要相同，没有顺序的影响，如果解析不成功值为undefined；
    */
    // let obj = {
    //     clicked:true,
    //     loading:false,
    //     disble:true,
    //     name:'Leo',
    //     num:20
    // }
    // //es5
    // // const loading = obj.loading;
    // // const name = obj.name;
    // //es6
    // const {clicked,loading,disble,name,num} = obj;
    // console.log(name);
    var obj1 = {
        num:22,
        arr:[1,2,3],
        min:{
            name:'aaa',
            age:12
        },
        fu: function (){
            console.log(1);
        }
    }
    const {num,arr,min,fu} = obj1;
    console.log(num);//22
    console.log(arr[0]);//1
    console.log(min.name);//aaa
    obj1.fu();//1
</script>

　　函数参数的解构赋值：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
  /*
  函数参数的解构赋值:
  函数调用的时候表面上传的是一个数组
  但是在传进来的那一刻会通过模式对应展开成函数的参数在函数内部函数感受到的是展开后的参数
  解构失败值为undefined
  可以给函数写默认值
  */
  // function show(arr){
  //     console.log(arr[0]);
  // }
  // function show([n1,n2,n3]){
  //     console.log(n1);
  //     console.log(n2);
  //     console.log(n3);
  // }
  // show([1,2,3]);
  function add({num1,num2}){
      console.log(num1);
      console.log(num2);
  }
  add({num1:5,num2:7});
</script>

　　解构赋值的用处：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
   /*
   1、解析json数据：
     工作中一般用于和后端调接口时
     后端把数据返回给前端，返回的数据可能是josn格式的数据，前端应该从json数据中拿需要的数据，这个过程叫解析数据。
   2、做变量交换
     let a = 1;
     let b = 2;
     [a,b]=[b,a]
     console.log(a,b);
   3、函数可以返回一组数据
   */
   function aaa(){
     //一堆逻辑
     return [1,2,3];
   }
   [a,b,c]=aaa();
   console.log(a);
   console.log(b);
   console.log(c);
 </script>

6.对象超类

ES6 允许在对象中使用 super 方法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}
  
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
  
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

7.ES6中的类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Student {
  constructor() {
    console.log("I'm a student.");
  }
  
  study() {
    console.log('study!');
  }
  
  static read() {
    console.log("Reading Now.");
  }
}
  
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

　　

posted @   代码小昕  阅读(35)  评论(0)  编辑  收藏  举报
相关博文：
·  css扩展知识3
·  HTML5知识点
·  ES6新特性
·  学习ES6知识点 -持续更新
·  ES6新特性（补充ES5与ES6的区别）
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
AI IDE Trae