es6 基础用法

103 阅读6分钟
对象

Object.is(a,b) 判断相等

Object.assign (a,b) 对象的合并 重名b覆盖a 不重名加一个

Object.setPrototypeOf 设置原型对象

Object.getPrototypeOf 获取原型对象

Object.keys(a) 获取对象的键

Object.values(a) 获取对象的值

Object.entries(a) 对象转二维数组

Object.getOwnPropertyDescriptors(a)对象属性的描述

str.trimStart() 去除开头空格

str.trimEnd() 去除结尾空格

string.propotype.matchAll 返回正则批量返回结果

数组

array.forEach(item,index) 遍历每一项,不能return

array.map(item,index,arr) 遍历每一项,return,返回一个新数组

array.filter(item,index) 筛选数组中符合条件的项,遍历每一项,返回一个新数组

array.some(item,index) 是否有满足条件的元素,遍历每一项,返回一个布尔值( 1、不会对空数组检测 2、不会改变原始数组 )

array.every(item,index) 是否全部满足条件的元素,遍历每一项,返回一个布尔值( 1、不会对空数组检测 2、不会改变原始数组 )

array.find(item,index) 查找到第一个符合的,找到之后就会直接返回

array.findIndex(item,index) 查找到第一个符合的下标都不符合返回-1,找到之后就会直接返回

array.reduce(tmp, item, index) 迭代,返回 tmp结果 tmp要给默认值

let arr = [12, 33, 66, 99]
let result = arr.reduce((tmp, item, index) => {
    tmp.push({
    item: item,
     index: index
    })
    return tmp;
}, [])
console.log(result);

array.fill(value,start,end) 填充,将value替换到start-end的位置

array.flat(deep) 数组扁平,多维数组转成低位数组 deep 深度

array.flatMap 数组扁平 方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组

Array.from() 把类数组(获取一组元素、arguments)对象转成数组,(有length这个东西的,就可以转)

Array.includes(value) 是否包含某个值,返回布尔值

let

1.变量不能重复声明

2.块级作用域

3.不存在变量提升

4.不影响作用域链

const

1.一定要赋初始值

2.大写

3.值不能改

4.块级作用域

5.对于数组和对象的原始修改,不算做对常量的修改,不报错

解构赋值

let[1,2,3,4] = arr;

let {name,age} = person;

模板字符串 ``

名称:{name}

简化对象写法

允许大括号里直接写变量和函数,作为对象的属性和方法

let name = 'aa'

const person = { name };

函数参数默认值

允许给函数参数赋值默认值

1.形参初始值,具有默认值的参数一般放后面

function ass(a , b , c='ddd'){}

2.与解构赋值结合

function connect ({host,username,password,port='aa'}){}

rest参数

用来获取函数的实参,用来代替arguments,参数必须放到参数最后

将函数的所有剩余参数收集到一个数组中的剩余参数

function date(...args){ console.log(args) }

扩展运算符

...

应用

1. 浅拷贝数组和对象 [...arr]

2.  合并数组、连接数组 [...a,...b]

3. 数组去重 `Set()` 结合使用  [...new Set(arr)]

4.  转换类数组 [...document.querySelectorAll("div")]

5.  解构赋值 {item,..objectAll}
箭头函数(=>{})

1.this是静态的,始终指向函数声明时所在的作用域下的this的值

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

3.不能使用arguments变量

4.简写

省略小括号,当只有一个参数时 ( n => {})

省略花括号,代码只有一行时return必须省略 n => n*1

5.场景

适用:与this无关的回调,定时器,数组的方法回调

不适用:与this有关的回调,事件回调,对象的方法

数值扩展

Number.EPSILON 最小精度

let b = 0b1010//二进制

let b = 0o77//八进制

NUmber.isFinite 是否有限数

Number.isNan 数值是否是NaN

Number.parsetInt Number.parseFloat

Number.isInterger//是否是整数

Math.trunc 去除小数部分

Math.sign 判断一个数是正数(1) 负数(-1) 0(0)

symbol

1.symbol的值是唯一的,用来解决命名冲突的问题

2.symbol值不能与其他数据进行运算

3.symbol定义的对象属性不能使用for...in循环遍历,但是可以使用reflect.ownKeys来获取对象的所有键名

let s = symbol('aa')
​
let s1 = symbol('aa')
​
s===s1 //false
​
let b= symbol.for('aa');
​
let b1 = symbol.for('aa');b === b1 //true

向对象中添加方法

let game = {};
​
let methods = {
​
•   up: Symbol(),
​
•    down: Symbol(),
​
}
​
game[methods.up] = function(){}
​
let game = {
​
•   name:'aaa',
​
[Symbol('say')]: function(){},
​
}
​
Symbol内置值
迭代器

symbol.iterator

生成器

是一个特殊的函数,

function * gen(){
​
•   yield 'aa';
​
}
​
let iterator= gen();
​
iterator.next();
​
​
​
function one(){
​
•   setTiemout(()=>{
​
•       iterator.next();
​
•   },1000)
​
}
​
function two(){
​
•   setTiemout(()=>{
​
•       iterator.next();
​
•   },1000)
​
}
​
funtion * gen(){
​
•   yield one();
​
•   yield two();
​
}
​
let iterator= gen();
​
iterator.next();
​
​
promise
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("成功的值");
          reject("失败的值");
      });
    })
      .then((res) => {
        console.log(res); //成功的值
      })
      .catch((err) => {
       
        console.log(err);//失败的值
      })
      .finally(() => {
        console.log("end"); //end--成功失败都触发
      });
async await
return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("结果");
        }, 1000);
      });
    };
​
    const getData = async () => {
      const res = await promiseFun();
      console.log(res);//结果
    };
    getData();
set

它类似于数组,但是Set数据中的元素都是唯一的,没有重复值的; Set构造函数参数:初始化参数的时候,参数必须是实现iterator接口的数据类型,否则会抛出异常

s.size()

s.add()

s.delete()

s.has()

s.clear();

 应用场景     数组去重
var arr = [1, 2, 3, undefined,undefined,null,null, NaN, 1, 2, 3, NaN],
    set = new Set(arr);
console.log([...set]); 
数组去重后,过滤返回新的数组
let set = new Set([1,2,3,4,5,6,7,1,2,3]);
let set2 = new Set([...set].filter(x => (x%2) == 0));
循环递归调用
​
const s1 = new Set([1])
s1.forEach(item => {s1.delete(1);s1.add(1);console.log('end')})
会一直循环调用forEach里面代码,不断打印end
map

传统的对象属性键名为字符串,并能够真真正正的实现属性键 — 属性值的对应;ES6Map数据结构实现的出现,实现对象键名与键值一 一对应的关系;

let obj = new map();

obj.set('name','aa')

obj.get('name')

obj .size

obj .add()

obj .delete()

obj .has()

s.clear();

Map.prototype上的clear()、has()、size、delete()方法与Set.prototype上相同;唯一不同的是,Set是不存在键名的,键值与键名相同,所以没有get和set的方法,只有add方法;而Map具有键名和键值,所以对应set和get方法;

运算符
可选链操作符 ?.
let a = undefined
let b = a ?.name
// b = a.name 程序会报错崩溃,因为undefined是不允许.运算的
// b = undefined
// 会先去判断b是否是undefined/null, 再去判断是否有name值,如果判断失败直接返回undefined
// 而不会程序报错
空值合并运算符 ??

空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数

let a = undefined ?? 'default name'
// a = 'default name'
逻辑或赋值 ||=

概念: 逻辑或正义(x ||= y)只是在x为falsy(虚值)时赋值 虚值: false, undefined, null, NaN, ‘’, 0

let a = ''
a ||= 'hello word'
console(a) 
a ||= '你好'
// 'hello word'
// 'hello word'
逻辑与赋值 &&=

概念: 逻辑与赋值 ( x &&= y) 仅在 x 是 truthy(真值)时对其赋值 truthy: 除虚值以外的所有值 (见逻辑或赋值)

let a = 1
let b = 0
a &&= 2
b &&= 3
// a=2,b=0
逻辑空属性 ??=

概念: 逻辑空赋值运算符 (x ??= y) 仅在 x 是 nullish (null 或 undefined) 时对其赋值

let a = {
    name: '小明'
}
a.name ??= '小红'
a.age ??= 25
​
console.log(a.name)
console.log(a.age)
// 小明 25
class
私有属性
constructor(a,b){
​
•   this.a = a;//公有属性
​
•   this.#b = b;//私有属性
​
}
模块化

防止命名冲突

代码复用

高维护性

export导出

export default {}//默认暴露

import导入

import * as m1 from "/aa.js"

import {a,b} from "/aa.js"

import {default as m3} from "/aa.js"//默认暴露引入

import m3 from "/aa.js"//只针对默认暴露引入

import('aa.js').then((index)=>{//动态引入 import

})