ES6的语法

最新推荐文章于 2025-06-01 14:38:30 发布

余生94ww

最新推荐文章于 2025-06-01 14:38:30 发布

阅读量182

点赞数

文章标签：前端 javascript java

本文链接：https://blog.youkuaiyun.com/ww_Filling_it/article/details/125490193

版权

var arr2 = [...arr1]; 深拷贝
构造函数调用的方法静态方法
实例对象调用的方法实例方法
null的 typeof is object
全称：ECMAScript6
1.let
- 用于变量声明
- let声明的变量不能重复声明
- let声明的变量不能变量提升
- 块状作用域 eg.点击li弹出第n个
- 使用let声明的变量不属于顶层对象
2.const
- 用于声明常量
- 声明常量用大写不是规则，是一种默契
- 常量不能修改
- 块状作用域
- 使用const声明的常量也不属于顶层对象
3.变量的解构（解析解构）赋值
- 数组的解构赋值
- 对象的解构赋值
- 特殊对象的解构赋值
  - 字符串做数组
  - 字符串做对象
  - Math的应用
- 实际应用
  - 交换2个变量的值
  - 提取json中的数据
  - 用于函数参数的默认值
4.for...of
- for(let val of xxx){console.log(val)}
- 用于遍历
  - 数组
  - 字符串
  - 元素列表
  - 类数组对象
  - es6新增Map Set
- 比较
  - for of 纯数组与类数组均可遍历
  - for in 用于数组和对象，获取的是key
  - forEach 用于纯数组
5.新增字符串操作
- 模板字符串
  - 反引号的用法
  - 定义比较长，复杂的字符串
  - 可以插入变量
  - 可以插入函数
- repeat()
  - console.log("abc".repeat(10)); 重复10遍
- 字符串补全长度
  - 略
- 包含某个子字符串
  - 之前 indexOf 正则
  - str.includes()
  - str.startsWifth()
  - str.endsWidth()
6.函数新特性
- 函数参数默认值具有默认值的参数要写到后面
- rest参数
  - function fn(...args){}
  - 可替代arguments
  - arguments是一个类数组对象，reset是纯数组对象
- 箭头函数 =>
  - let fn = val => val; 等同于 let fn = function(val){return val;}
  - 实现两个数的和 let sum = (num1,num2) => num1+mun2; console.log(sum(1,5));
  - 若要执行多条语句需要加花括号
  - 作用
    - 简化回调函数的写法 eg arr.sort((a,b) => a-b)
    - 箭头函数中的this是函数声明时所在的函数
7.数组新特性
- 扩展运算符
  - 相当于rest方法的逆运算，把数组转换为用逗号隔开的参数列表
  - 应用
    - 复制数组
    - 合并数组
    - 用于解构赋值
    - 用于字符串
    - 适用于所有的类数组集合（实现了遍历器接口的数据类型）
- Array结构函数新增方法
  - Array.from() 将类数组对象转换为纯数组
  - Array.of(a,b,c)
    - 将参数列表返回一个数组
    - 相当于创建数组
    - Array.of(3) != new Array(3)
- 数组对象新增方法
  - find(callback)
    - 返回数组中第一个满足条件的元素
  - findIndex(callback)
    - 返回数组中第一个满足条件的元素的索引
  - entries()
    - 帮助数组遍历每一个key值与value值
  - keys()
    - 帮助数组遍历所有的key值
  - includes()
    - 检索数组是否包含某个值，返回布尔值
  - 补充
    - Array.isArray(arr) true false
    - filter(callback)
      - 过滤数组单元，将满足条件的元素过滤
      - callback ==> function(value,index){}
      - 自动将每一个元素放入callback中进行处理，如果返回值为true，将元素放入新数组中，否则不操作
      - 形参value，代表数组中的每一个值
      - 形参index，代表数组中每一个值的下标
    - map(callback)
      - 对数组进行遍历，将计算后的值返回新数组
      - callback同上，不返回布尔值，返回具体值
    - some(callback)
      - 对数组进行遍历，只要有一个满足条件，则返回true，并终止遍历，否则返回false
    - every(callback)
      - 对数组进行遍历，如果有一个不满足条件，则返回false，并终止遍历，否则返回true
    - forEach(callback)
      - 遍历数组
      - 无返回值
    - reduce(function(preValue,nowValue,index,arrSelf) {return preValue+nowValue})
      - 累加数组单元
      - preValue 上一个值
      - nowValue 当前值
      - index 当前值下标
      - arrSelf 当前数组
8.对象的新增特性
- 属性及方法的简洁表示(key名与value名相同)
- Obiect.is()相当于全等但是有区别
  - Object.is(1,2)
  - Object.is(NaN,NaN)
  - Object.is(0,-0)
- Object.assign(obj1,obj2,obj3)合并对象
  - 所有对象都会合并到obj1，如果是相同的属性，后边的对象的属性值会对前面的进行覆盖
- Object.keys(obj)
  - 将obj的key值返回一个纯数组
- Object.values(obj)
  - 将obj的value值返回一个纯数组
- Object.entries(obj)
  - 返回一个二维数组，每一个小数组都是一对[key,value]
9.SET数据结构
- 类似于数组，但是成员唯一，没有索引
- var set = new Set(x) x:数组，类数组，字符串
- 实现数组去重
- 获取set的长度不是length而是size
- 方法
  - add(x)
  - delete(x) x不是索引，而是set中具体的值
  - has(x) 验证是否存在，返回布尔值
  - clear() 不需要参数，清除所有成员
- 可以使用for of与forEach对set进行遍历
- set.value() == set.keys() set.entries()
10.WeakSet
- 与set类似，成员唯一，成员必须是对象，其中的对象都是弱引用
- 语法：let west = new WeakSet({},{})
- 不能遍历，也没有size属性
- 方法
  - add()
  - delete()
  - has()
11.Map
- 与对象类似，键值对组成的集合，键的类型可以是任意类型，构造函数的参数可以是一个二维数组
- 语法: let map = new Map([["name","cege"],["age","18"],["height","186"]]);
- 属性 size获取长度
- 方法
  - get(key)获取对应的value值
  - set(key,value) 添加/修改键值对
  - has()
  - clear()
- 使用for of/forEach/values()/keys()/entries()遍历
12.WeakMap
- 类似于Map，键必须是对象，键所指向的对象是弱引用
- 不可遍历
- 方法
  - add()
  - set()
  - has()
  - clear()
13.Promise
- 基础
  - js是单线程的语言，所以很多操作都是异步操作，而异步操作多由回调函数完成，这里边就会引出一个现象“回调地狱”即回调函数中有回调函数，这种现象会导致代码的可读性降低，为了解决这个问题我们选择使用Promise
  - 作用：防止出现回调地狱，提高代码的可读性，像同步操作那样去执行异步操作
  - 必须接受一个函数作为参数，两个参数名不是自定义的，是必须这么写的
- 原理
  - 一个Promise对象就代表一个异步操作，通过状态去管理异步操作
  - 状态
    - pending 执行中
    - fulfilled 完成，也是执行了resolve()
    - rejected 失败，reject()执行
  - 常见写法(放在function中使用)
14.class
- 特点
  - 必须包含constructor
  - 属性添加到contructor中
  - class的本质仍然是构造函数
  - this指向class的实例
- 静态方法
  - 使用构造函数(class)调用
- 继承
- 继承原生js的构造函数
- Object.getPrototypeOf(x) 获取x的父类
15.模块化module（！！！）
- 模块化：
  - 表现形式：js中引入其他的js文件
  - 作用：简化html结构，增加代码的独立性与复用性