• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

不懂前端的后端不是好后端。现在Github上的项目都是从前端分离出来的,有时候需要看一下前端的值传递逻辑。

1. 变量

Var是一个全局作用域,写入windows。可以先用后声明,也可以重复定义。不推荐。

console . log(a);//未定义

var a=10

var a=100

Let是块级作用域,只能在使用前定义(没有变量提升)。类似于java变量定义,建议使用。

//初始化期间不会收集变量

设a=10

console . log(a);

Const声明一个常量,必须给它一个初始值。它也是块级范围。不变值指向不变和可变的内容,比如数组和对象中的属性。

const A=' 100

console . log(A);

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

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

设[a,b,c]=arr;

console . log(a);

let person={

名称: '嚎叫':

email: '[email protected] ',

prin:函数(){

console.log(名称电子邮件);

}

}

let {姓名,电子邮件,打印}=人;

console.log(名称);

2. 模板字符串

//可以换行。

让a=`你好

World

console . log(a);

//解析变量

让b='嚎叫';

让c=`Hello $ { b }

console . log(c);

3. 简化对象写法

let name='嚎叫';

let prin=function() {

console.log('这是函数');

}

//原创

let person={

name:名称,

prin:打印,

foo: foo() {

console.log('这是foo函数');

}

}

//简化书写

let person={

姓名,

印刷,

foo() {

console.log('这是foo函数');

}

}

4. 箭头函数 =

设fn=函数(a,b) {

console.log('这是正常功能')

};

//类似java的lambda编写

设fnc=(a,b)={

console.log('这是正常功能')

}

arrow函数不能用作实例化对象的构造函数。

5. 参数默认值

默认值的必需参数放在最后。

函数sum(a,b=10) {

返回a b;

}

设rs1=sum(1,2);

设rs2=sum(1);

console . log(rs1);

console . log(rs2);

6. rest参数

该形状将被放入函数中的arguments array对象中,该对象归函数本身所有。

//E

S5 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', '[email protected]');
// 注意调用方式是属性,不是方法
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();

Link to comment
Share on other sites