ES6 记录

2022-05-03 12:34:38 阅读：134 来源： 互联网

标签：function ES6 console log 记录 let foo name

不懂前端的后端不是好后端，现在 Github 上的项目是前后端分离的，有时需要看前端传值逻辑

1. 变量

var 是全局作用域，往windows里面写入，可先使用后声明，也可重复定义不建议使用

console.log(a);		// undefined
var a = 10;
var a = 100;

let 是块级作用域，只能先定义后使用（没有变量提升），类似于 java 的变量定义，建议使用

// 在初始化时不会收集变量
let a = 10;
console.log(a);

const 声明常量，一定要赋予初始值，也是块级作用域，不可变值指向可不变，内容可变，比如数组和对象内的属性

const A = '100';
console.log(A);

变量的解构赋值，按照一定模式从数组和对象中取值并对变量赋值

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

let [a, b, c] = arr;
console.log(a);



let person = {
    name: 'Howl',
    email: 'xxx@163.com',
    prin: function() {
        console.log(name + email);
    }
}

let {name, email, prin} = person;
console.log(name);

2. 模板字符串

// 可以换行
let a = `Hello
          World`;
console.log(a);



// 解析变量
let b = 'Howl';
let c = `Hello ${b}`;
console.log(c);

3. 简化对象写法

let name = 'Howl';
let prin = function() {
    console.log('this is a function');
}


// 原始写法
let person = {
    name: name,
    prin: prin,
    foo: foo() {
    	console.log('this is foo function');
	}
}

// 简化写法
let person = {
    name,
    prin,
    foo() {
    	console.log('this is foo function');
	}
}

4. 箭头函数 =>

let fn = function(a,b) {
    console.log('this is normal function')
};


// 类似于 java 的 lambda 写法
let fnc = (a,b) => {
    console.log('this is normal function')
}


// 箭头函数不能作为构造器实例化对象

5. 参数默认值

需要默认值的形参放最后面

 function sum(a, b = 10) {
     return a + b;
 }

let rs1 = sum(1, 2);
let rs2 = sum(1);
console.log(rs1);
console.log(rs2);

6. rest参数

形参会放入函数内的 arguments 数组对象里，这个对象是函数内部自有的

// ES5
function foo() {
    console.log(arguments);
}

// ES6
function fooo(...args) {
    console.log(args);
}

foo();
fooo();

7. 迭代器

Iterator （for ... of）

let arr = ['a', 'b', 'c', 'd'];

// 键名 0,1,2,3
for (let value in arr) {
    console.log(value);
}

// 键值 a,b,c,d
for (let value of arr) {
    console.log(value);
}

8. 生成器

生成器其实是个特殊的函数，能够异步编程（JS 是单线程的），不像以前 ajax 的回调使用

// 函数声明的时候加个 `*` 符号
// yield 将函数内部分段，iterator 分段遍历
// next 也可以传参，是作为 yield 的返回值
// 用于解决回调地狱
 function* gen(arg) {
     console.log(arg);
     console.log('111');

     let one = yield 'one';
     console.log(one);

     console.log('222');
     let two = yield 'two';
     console.log(two);

     console.log('333');
 }

let iterator = gen('AAA');
iterator.next();
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));

9. Promise

let p = new Promise(function(resolve, reject) {
    // 这里进行异步逻辑操作，用 setTimeout 模拟
    // 若成功则调用 resolve 函数
    // 失败则调用 reject 函数

    setTimeout(function() {
        // resolve('调用成功');
        reject('调用失败');
    });
});

// 异步操作之后
// 成功则走 value 函数
// 失败则走 reson 函数
// then 方法返回的也是一个 promise 对象
let result = p.then(function(value) {
    console.log(value);
}, function(reson) {
    console.log(reson);
})

10. 集合

和 Java 的集合类似，ES6 提供了两种集合，Map 和 Set

let set = new Set();
let map = new Map();

set.add('a');
set.delete('b')
set.has('a');
set.clear();
map.set();
map.get();
map.delete();
map.entries();

for (const iterator of set) {
    console.log(iterator);
}



// 去重
let arr = [1, 2, 3, 4, 5];
let distinct = [...new Set(arr)];

11. Class 类

ES6 的 Class 类是一个语法糖，新写法只是让对象原型的写法更加清晰、更像面向对象

class Person {
    // 构造函数固定写法
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    toString() {
        console.log(name + ' ' + email);
    }

    get getter() {
        return this.name;
    }
    set setter(name) {
        this.name = name;
    }

}


let person = new Person('Howl', 'xxx@163.com');

// 注意调用方式是属性，不是方法
person.setter = 'Howlet';
let newName = person.getter;

console.log(newName);

12. 数值扩展

// Number.EPSILON 能表示的最小精度
function equalFloat(a, b) {
    if (Math.abs(a - b) < Number.EPSILON) {
        return true;
    }
    return false;
}

console.log(equalFloat(0.1 + 0.2, 0.3))



// 进制
let b = 0b101;
let o = 0o777;
let d = 100;
let x = 0xff;

13. 模块化

ES6 之前社区自己推出了模块化规范：

CommonJS ———— Node.js（默认使用 npm 包管理工具）
AMD ———— requireJS
CMD ———— seaJS

// 其他 js 文件导出接口
export let name = 'Howl';

export function foo() {
    console.log('Howlet');
}

export {name, foo}

// 需要的地方引用
import * as min from "min.js";

import {name as Hname, foo} from "min.js";

// 引用 npm 包
import $ from 'jquery';

14. async、await

二者结合的语法让异步代码像同步一样

// async 返回 promise 对象
// await 接收 promise 对象返回成功的值，报错需 try catch 捕获

let promise = new Promise((resolve, reject) => {
    resolve("成功的返回值");
});

async function foo() {

    try {
        let rs = await promise;
    } catch (error) {
        console.log(error);
    }
    return rs;
}

foo();

标签：function,ES6,console,log,记录,let,foo,name
来源： https://www.cnblogs.com/Howlet/p/16218081.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9