ES6笔记总结

前段历险记

于 2023-01-16 15:32:52 发布

阅读量678

点赞数 1

分类专栏：前端文章标签： es6 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Jeason666666/article/details/128704999

版权

本文详细介绍了ES6中的新特性，包括Let和Const的使用，解构赋值，模板字符串，简化对象和函数的写法，箭头函数，函数参数的默认值，rest参数，扩展运算符，Symbol，迭代器，生成器，Promise，集合Set和Map，以及类Class等。通过实例展示了这些特性的应用场景，帮助开发者更好地理解和掌握ES6。

摘要由CSDN通过智能技术生成

Let 和 Const

1.let 是用来声明变量的，有四个特性

let 不能重复声明变量

存在块级作用域，块级作用域外不能正常访问（同一级）

不存在作用域提升

不影响作用域链，子作用域可以正常通过作用域链访问变量

案例实践，页面有三个 DIV，需要实现点击变色效果

<script>
  // 先拿到元素
  let items = document.getElementsByClassName('item')
  // 然后遍历，下面这个是以前的写法，let出现以后可用第二种
  // for (var i = 0;i < items.length;i++) {
  //   items[i].onclick = function() {
  //     this.style.background = 'pink'
  //   }
  // }
  for (let i = 0;i < items.length;i++) {
    items[i].onclick = function() {
      items[i].style.background = 'pink'
    }
  }
</script>

值得一提的是，在循环中使用 var 声明的变量没有块级作用域，那么循环中的变量 i 一直会是循环结束后的值，此例中为 3

2.const 是用来声明常量的，有五个特性

用 const 声明常量一定要赋初始值

常量的值不能修改

存在块级作用域

对数组对象的修改不算对常量的修改

常量名要用全大写(潜规则，代码风格)

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；

// 1、数组的解构赋值
const SEASON=["春","夏","秋","冬"];
let [a,b,c,d]=SEASON;
// 这就相当于我们声明4个变量a,b,c,d，其值分别对应"春","夏","秋","冬"
console.log(a + b + c + d); // 春夏秋冬
//2、对象的解构赋值
const BOY = {
  name : "大哥",
  age : 22,
  sex : "男",
  xiaopin : function(){
    console.log("我会唱跳！");
  }
}
let {name,age,sex,xiaopin} = BOY; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin); // 大哥22男function(){console.log("我会唱跳！");}
xiaopin(); //我会唱跳！

模板字符串--新的字符串声明方式

模板字符串（template string）是增强版的字符串，用反单引号（`）标识，特点：

字符串中可以出现换行符；

可以使用 ${xxx} 形式引用变量实现字符串拼接；

// 声明
let string = `我也是一个字符串奥！`;
console.log(string);//我也是一个字符串奥！
// 特性
// 1、字符串中可以出现换行符
let str =
    `<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
  </ul>`;
console.log(str);//支持换行符号打印
// 2、可以使用 ${xxx} 形式引用变量实现字符串的拼接
let s = "秋";
//let out = s + '是我最喜欢的季节！';以前的写法
let out = `${s}是我最喜欢的季节！`;
console.log(out);//秋是我最喜欢的季节！

简化对象和函数的写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

//完整写法
const GIRL = {
  name：name，
  age：age，
  say：function () {
    console.log("我喜欢你！")
  }
}
//简化写法
const GIRL = {
  name，
  age，
  say() {
    console.log("我喜欢你！")
  }
}

箭头函数

ES6 允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义； 1.箭头函数的特性

箭头函数的 this 指向是静态的，指向声明时作用域的 this 值

不能作为构造函数实例化对象

不能使用 arguements

箭头函数的简写

当形参有且只有一个的时候可以省略小括号;

函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果，不需要加 return；

1.箭头函数的this指向是静态的，指向声明时作用域的this值
function getname(){
  console.log(this.name)
}

let getname1 = () => {
  console.log(this.name)
}
window.name = 'code'
const point = {
  name: "bug"
}
//直接调用
getname()//code
getname1()//code 因为声明在全局作用域下，所以指向全局的this的值
//call方法调用
getname.call(point)//bug
getname1.call(point)//code 箭头函数的this指向是静态的

2.不能作为构造函数实例化对象
let person = (name, age) => {
  this.name = name,
  this.age = age
}
let me = new person('wang',23)
console.log(me)//Uncaught TypeError: person is not a constructor

3.不能使用 arguements变量
let fn = () =>{
  console.log(arguments)
}
fn(1)//Uncaught ReferenceError: arguments is not defined

4.箭头函数的简写
①当形参有且仅有一个的时候，省略小括号
let add = n => {
  return n + n
}
console.log(add(3))//6
②当函数体只有一句的时候
let pow = n => n*n;
console.log(pow(3))//9

2.箭头函数的应用案例

1.点击页面的DIV两秒后变色
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE&#

最低0.47元/天解锁文章

前段历险记

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录