ES6标准入门

1,let和const:

块级作用域,只能在声明的位置后面使用;

都不能重复声明;

const声明的变量不允许修改(简单类型的变量不可修改,复杂类型的可修改);

例子:

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

ES6 声明变量的六种方法

ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加letconst命令,还有两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。

2,变量的解构(数组,对象,字符串,数值和布尔值,函数参数)

1,数组的解构赋值:

let [a, b] = [1, 2];  // a=1; b=2

let [x = 1, y = 1] = [1, 2]; // x=1; y=2

2,对象的解构赋值:(变量必须与属性同名,才能取到正确的值)

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的:而对象的属性没有次序,变量必须与属性同名才能取到正确的值。

也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

3,字符串的解构赋值:

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5

3,模板字符串

`Hello, ${place}` // 'Hello,'+ place

4,字符串相关

includes()返回布尔值,表示是否找到了参数字符串。

let s = 'Hello world!';
s.includes('o') // true

matchAll()方法返回一个正则表达式在当前字符串的所有匹配。

replaceAll()匹配并替换全部

5,数值的扩展

// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

Number.isInteger()  // 用来判断一个数值是否为整数。

Math.sign()  // 方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

6,函数的扩展

1,rest参数:用于获取函数的多余参数,

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

2,箭头函数:

箭头函数没有自己的this对象;对于普通函数来说,内部的this指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的this对象,内部的this就是定义时上层作用域中的this。也就是说,箭头函数内部的this指向是固定的,相比之下,普通函数的this指向是可变的。

例子:

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

7,数组的扩展

1,扩展运算符展开数组:
使用扩展运算符(…)拷贝数组。

function add(x, y) {
  return x + y;
}

const numbers = [1, 2];
add(...numbers) // 3

替换了apply

// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
arr1.push(...arr2);

Array.from(obj)方法用于将可遍历对象转为真正的数组:

find() 数组实例的find()方法,用于找出第一个符合条件的数组成员并返回该成员;

findIndex() 返回第一个符合条件的数组成员的索引位置,如果所有成员都不符合条件,则返回-1

entries()keys()values()——用于遍历数组;

唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

includes() 返回一个布尔值,表示某个数组是否包含给定的值;

forEach,filter,every,reduce,some,map,

8,对象的扩展

对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用Object.assign方法。

Object.assign() 方法用于对象的合并,将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。(浅拷贝)
Object.assign(target, …sources) 【target:目标对象】,【souce:源对象(可多个)】

遍历对象:

1,for…in

2,Object.keys(obj) 返回键名

扩展运算符:(…)用于取出参数对象的所有可遍历属性

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的原型对象(prototype),返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

例子:

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

Object.keys(obj) 返回数组,键名

Object.values(obj)返回数组,键值

Object.entries(obj) 返回数组,键值对

9,JSON.stringify()与JSON.parse()

JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串,

JSON.parse()可以将JSON字符串转为一个对象。

10,运算符的扩展

链判断运算符:a?.b()

11,Map数据结构

const myMap = new Map()
myMap.set(key,value)
myMap.get(key)
// map长度
myMap.size
// Map 转为数组
[...myMap]
[...map.keys()]
[...map.values()]
// 数组 转为 Map
new Map([])
// 遍历map
for (let [key, value] of map) {
  console.log(key, value);
}
// 对象转为 Map
new Map(Object.entries(obj))
// Map转对象,json

12,Class

使用new调用构造函数会自动创建一个新对象,因此构造函数本身只需初始化这个新对象的状态即可。构造函数的prototype属性被用来用作新对象的原型。这意味着通过同一个构造函数创建的所有对象都继承自一个相同的对象,因此他们都是同一个类的成员。

1.类的数据类型就是函数,类本身就指向构造函数;

2.类的方法都定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

3.constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。

4,生成类的实例的写法,必须使用new命令;生成类:new Point()

// 定义一个类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
    
  toValue() {
    // ...
  }
}

typeof Point // "function"
Point === Point.prototype.constructor // true (prototype对象的constructor属性,直接指向“类”的本身)

// 上面代码中,constructor()、toString()、toValue()这三个方法,其实都是定义在Point.prototype上面。
// 因此,在类的实例上面调用方法,其实就是调用原型上的方法。
// Object.keys(Point.prototype)
// []  (类的内部所有定义的方法,都是不可枚举的)

立即执行的 Class:举例:

let person = new class {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}('张三');

person.sayName(); // "张三"

使用Object.assign()方法可以很方便地一次向类添加多个方法:举例:

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

13,导入导出

export 字段/方法b

import {b} from './'
export default function () {}
// 其他模块加载该模块时,`import`命令可以为该匿名函数指定任意名字。

import customName from './';

14.async函数

async 表示函数里有异步操作,
await 表示紧跟在后面的表达式需要等待结果。
进一步说, async 函数完全可以看作由多个异步操作包装成的一个Promise 对象,
而await命令就是内部then 命令的语法糖。

// 第一种:Promise版
方法名(){
    请求().then(res=>{
        // 请求结果
    }).catch(e=>{
        // 捕获错误信息
    })
}

// 第二种:async/await版
async 方法名(){
	await // 请求
    // 请求结果
}

你可能感兴趣的:(es6,javascript,前端)