一、JavaScript语言回顾和ES6简介

使用var定义变量

//js变量
var a = 1;        //整形
var b = "str";    //字符串类型
var c = 1.1;        //浮点型
var d = true;        //bool型
var e = {"name": "万大帅哥", "salay": 200000};    //对象类型
var f = [1, 2, 3];    //数组
console.log(e);
console.log(f);

数组的遍历

//数组的遍历
for (var i = 0; i < 3; i++) {
    console.log(f[i]);
}

方法的定义

var fun1 = function (p1, p2) {
    console.log(p1);
    console.log(p2);
};
function fun2(p1, p2) {
    console.log(p1);
    console.log(p2);
}
var fun3 = (p1, p2) => {
    console.log(p1);
    console.log(p2);
}

对象的定义和使用

//对象
var myObject = function (p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
    function method2() {
        console.log("method2");
    }
};
//原型链上定义方法
myObject.prototype.method1 = function () {
    console.log("method1");
};
let myObject1 = new myObject(1, 2);
let myObject2 = new myObject(3, 4);
console.log(myObject1.p1);
console.log(myObject1.p2);
console.log(myObject1.method1 === myObject2.method1);
console.log(myObject1.method2 === myObject2.method2);
myObject1.method1()

ES6简介
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

二、 let和const

** let关键字

• 定义的变量
• 不会赋值到window对象上
• 并不会变量提升
• 不能重复定义,解决环境污染的问题

const关键字
定义常量，一旦赋值就不能修改，其他全部同let关键字**

var a = 1;
let b = 1
console.log(a);
console.log(window.a);
console.log(window.b);

function fun1() {
    let a = 1;
    var c = 5;
    console.log(a);

}
fun1();
console.log(c);

三、 解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取
总结：创建了一些新的语法，方便我们取值和赋值

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

对象的解析赋值

let { bar,foo  } = { foo: 'aaa', bar: 'bbb' };
console.log(foo);

默认值：

let { bar="" ,foo="" , balabala="" } = { foo: 'aaa', bar: 'bbb' };
console.log(foo);

//函数参数的默认值
function fun1({param1 = "aaa", param2 = "bbb"}) {
    console.log(param1, param2);
}

fun1({});

剩余参数

let {aa, bb, ...rest} = {aa: 10, bb: 20, cc: 30, dd: 40};
console.log(typeof rest);

四、symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

//唯一值
let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"

// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk");
sy === sy1;       // false

// 让属性名不一致
let syObject = {};
let syn1 = Symbol("kk");
let syn2 = Symbol("kk");
syObject[syn1] = 123;
syObject[syn2] = 234;
console.log(syObject);

//对象的属性遍历
// for (o in syObject) {
//     console.log(o);
//     console.log(syObject[o]);
// }

五、 proxy

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

//proxy, 可以对原有的对象进行代理和增强

let target = {
    name: 'Tom',
    age: 24
}
let handler = {
    get: function(abc, key) {
        console.log('getting '+key);
        return abc[key]; // 不是target.key
    },
    set: function(target, key, value) {
        console.log('setting '+key);
        target[key] = value;    //
    }
}
let proxy = new Proxy(target, handler)
proxy.name     // 实际执行 handler.get
proxy.age     // 实际执行 handler.get
proxy.name = "装三" // 实际执行 handler.set
proxy.age = 25 // 实际执行 handler.set
console.log(target);
console.log(proxy);


//案例：属性之前有下划线_的代表私有属性，不允许直接getset
let myTarget = {
    name: 'Tom',
    _age: 24
}
let myProxy = {
    get(target, key){
        if (key.startsWith("_")) {
            throw new Error("这是一个私有属性，不允许直接读取");
        } else {
            return target[key];
        }
    },
    set(target, key, value) {
        if (key.startsWith("_")) {
            throw new Error("这是一个私有属性，不允许直接修改");
        } else {
            target[key] = value;
        }

    }
}
let proxy_myTarget = new Proxy(myTarget, myProxy);

proxy_myTarget._age;

六、数值类型number的扩展

//     二进制表前缀 0b 或 0B 
console.log(0b11 === 3); // true
console.log(0B11 === 3); // true


//常量
Number.EPSILON

用于检查一个数值是否为有限的（ finite ），即不是 Infinity

console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true

// NaN 不是有限的
console.log( Number.isFinite(NaN)); // false

console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false

// Number.isFinate 没有隐式的 Number() 类型转换，所有非数值都返回 false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false
Number.isNaN()
用于检查一个值是否为 NaN 。
console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('true'/0)); // true

// 在全局的 isNaN() 中，以下皆返回 true，因为在判断前会将非数值向数值转换
// 而 Number.isNaN() 不存在隐式的 Number() 类型转换，非 NaN 全部返回 false
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("true");     // false

用于将给定字符串转化为指定进制的整数。

// 不指定进制时默认为 10 进制
Number.parseInt('12.34'); // 12
Number.parseInt(12.34);   // 12

// 指定进制
Number.parseInt('0011',2); // 3

// 与全局的 parseInt() 函数是同一个函数
Number.parseInt === parseInt; // true
Number.parseFloat()
用于把一个字符串解析成浮点数。
Number.parseFloat('123.45')    // 123.45
Number.parseFloat('123.45abc') // 123.45

// 无法被解析成浮点数，则返回 NaN
Number.parseFloat('abc') // NaN

// 与全局的 parseFloat() 方法是同一个方法
Number.parseFloat === parseFloat // true
Number.isInteger()
用于判断给定的参数是否为整数。
Number.isInteger(value)
Number.isInteger(0); // true
// JavaScript 内部，整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值
Number.isInteger(1);   // true
Number.isInteger(1.0); // true

Number.isInteger(1.1);     // false
Number.isInteger(Math.PI); // false

// NaN 和正负 Infinity 不是整数
Number.isInteger(NaN);       // false
Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false

Number.isInteger("10");  // false
Number.isInteger(true);  // false
Number.isInteger(false); // false
Number.isInteger([1]);   // false

// 数值的精度超过 53 个二进制位时，由于第 54 位及后面的位被丢弃，会产生误判
Number.isInteger(1.0000000000000001) // true

// 一个数值的绝对值小于 Number.MIN_VALUE（5E-324），即小于 JavaScript 能够分辨
// 的最小值，会被自动转为 0，也会产生误判
Number.isInteger(5E-324); // false
Number.isInteger(5E-325); // true
Number.isSafeInteger()
用于判断数值是否在安全范围内。
Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1); // false
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false

Math 对象的扩展
用于计算一个数的立方根

Math.cbrt(1);  // 1
Math.cbrt(0);  // 0
Math.cbrt(-1); // -1
// 会对非数值进行转换
Math.cbrt('1'); // 1

// 非数值且无法转换为数值时返回 NaN
Math.cbrt('hhh'); // NaN

// 大多数情况下，结果与 a * b 相同 
Math.imul(1, 2);   // 2

// 用于正确返回大数乘法结果中的低位数值
Math.imul(0x7fffffff, 0x7fffffff); // 1

用于计算所有参数的平方和的平方根。

Math.hypot(3, 4); // 5

// 非数值会先被转换为数值后进行计算
Math.hypot(1, 2, '3'); // 3.741657386773941
Math.hypot(true);      // 1
Math.hypot(false);     // 0

// 空值会被转换为 0
Math.hypot();   // 0
Math.hypot([]); // 0

// 参数为 Infinity 或 -Infinity 返回 Infinity
Math.hypot(Infinity); // Infinity
Math.hypot(-Infinity); // Infinity

// 参数中存在无法转换为数值的参数时返回 NaN
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot({});          // NaN

七、对象的扩展

属性简写

const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同于
const person = {age: age, name: name}

方法名简写

const person = {
  sayHi(){
    console.log("Hi");
  }
}
person.sayHi();  //"Hi"
//等同于
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
person.sayHi();//"Hi"

拓展运算符

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}

八、数组的拓展

数组创建Array.of()和Array.from()

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]

// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]

// 参数为空时返回空数组
console.log(Array.of()); // []

// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]

// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

类数组对象

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(); // ['1', '2', 3]

// 没有 length 属性,则返回空数组
let array = Array.from({
  0: '1',
  1: '2',
  2: 3,
});
console.log(array); // []

// 元素属性名不为数值且无法转换为数值，返回长度为 length 元素值为 undefined 的数组  
let array1 = Array.from({
  a: 1,
  b: 2,
  length: 2
});
console.log(array1); // [undefined, undefined]

扩展的方法

//1. 查找
let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3

// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined

//2. 填充
let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

//3.遍历
for(let [key, value] of ['a', 'b'].entries()){
    console.log(key, value);
}
// 0 "a"
// 1 "b"

// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]

// 数组含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]

// 4、包含
//参数1：包含的指定值
[1, 2, 3].includes(1);    // true

// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false

// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true

九、模块化

//导入一个模块
import {abc} from "./module1.js"

...

//导出一个模块
export default module2

十、Promis

//解决回调地狱的问题
let flag = true;
let myPromise = new Promise(function(recive, reject){
    if (flag) {
        recive();
    } else {
        reject();
    }
})
myPromise.then(
    function(){ console.log("recive");},
    function(){ console.log("reject");}
);