ES6详情特性介绍及使用

一、var、let、const的区别

类比：
var = Java中的全局变量，可修改的；但var变量有默认值 undefined;
const = Java中被static和final修饰的全局变量，不可修改，无默认值，非值使用报错;
let = 方法快内访问，如何支持es6特性，尽量使用let声明;
总结：
var定义的变量，变量提升，没有块的概念，可以跨块访问。
let定义的变量，只能在块作用域里访问，不能声明同名变量。
const用来定义常量，使用时必须初始化(即必须赋值)，不能声明同名变量，只能在块作用域里访问，而且不能修改，但是在定义的对象时对象属性值可以改变。
他们都不能跨函数访问

二、模板字符串

使用${url}获取动态变量
优化了字符拼装代码

var url="xxxxxx";
// 	es6之前
let html="<div>"+
		  " <a>"+url+"</a>"+
	   "</div>";
//	es6
let eshtml=`<div>
		   <a>${url}</a>
	   </div>`;

三、字符串方法

let str = 'more,most,better';
str.includes('more');//true 内容包含判断

str.startsWith('most');//true 开头内容包含判断

str.endsWith('most');//false 结尾内容包含判断

console.log('more'.repeat(2));   //'moremore' 按照指定次数复制一个新的字符串

// 用参数字符串按给定长度从前面或后面补全字符串，返回新字符串
let arr = 'hell';
console.log(arr.padEnd(5,'o'));  //'hello'
console.log(arr.padEnd(6,'o'));  //'helloo'
console.log(arr.padEnd(6));  //'hell  ',如果没有指定将用空格代替
console.log(arr.padStart(5,'o'));  //'ohell'

四、数组、对象表达式优化

// 数组写法优化
let [a,b,c] = [1,2,3];
console.log(a,b,c);    //1,2,3
 
let [a,b,c] = [1,,3];
console.log(a,b,c);    //1,undefined,3
 
let [a,,b] = [1,2,3];
console.log(a,b);//1,3
 
let [a,..b] = [1,2,3];  //...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);//1,[2,3]

//JSON对象写法优化
let obj = { 
	name: "ren", 
	age: 12, 
	sex: "male" 
};

let { name, age, sex } = obj;
console.log(name, age, sex); //'ren' 12 'male'

let { name: myName, age: myAge, sex: mySex } = obj; //自定义变量名
console.log(myName, myAge, mySex); //'ren' 12 'male'

五、对象新增的方法

1、Map新增get/set/delete/has

let myMap = new Map([['name','ren'],['age',12]]);
console.log(myMap);  //{'name'=>'ren','age'=>12}

myMap.set('sex','male');
console.log(myMap);  //{'name'=>'ren','age'=>12,'sex'=>'male'}
console.log(myMap.size);  //3

myMap.get('name');  //'ren'
myMap.has('age');  //true
myMap.delete('age');  //true
myMap.has('age');  //false
myMap.get('age');  //undefined

2、Set不可重复的数组集合

let mySet = new Set([1,2,2,3]);//里面要传一个数组，否则会报错 可去重
console.log(mySet);  //{1,2,3}

mySet.add(4);
console.log(mySet);  //{1,2,3,4}

mySet.delete(1);  //true
mySet.has(1);  //false
console.log(mySet);  //{2,3,4}

六、数组新增方法

1、Array.from()//迭代对象转化为新的数组

包含三个参数、后两个可以没有
参数1、需要被迭代的对象；2、每次迭代回调的函数function;3、回调中this的指向
let arr = [1, 2, 3];
let obj = {
    double(n) {
        return n * 2;
    }
}
console.log(Array.from(arr, function (n){
    return this.double(n);
}, obj)); // [2, 4, 6]

2、includes()//判断数组中是否包含某个元素、布尔返回值

let arr = [1,33,44,22,6,9]
let ary = arr.includes(22)
console.log(ary)

3、map()利用原数组运算后得到新的对象

let arr = [1, 33, 44, 2, 6, 9];

let newarr3 = arr.map((v) => v > 10);    //newarr3-------[false, true, true, false, false, false]
let newarr4 = arr.map((v) => v * 2);     //newarr4-------  [2, 66, 88, 4, 12, 18]

4、filter()根据条件过滤数组，得到新的数组对象，不影响旧数组

let arr = [1, 33, 44, 2, 6, 9];

let newarr1 = arr.filter((v) => v > 10); //newarr1-------[33, 44]
let newarr2 = arr.filter((v) => v * 2);  //newarr2-------[1, 33, 44, 2, 6, 9]

5、forEach()//遍历对象没有返回值

let arr = [1,33,44,2,6,9]
let a1= []
arr.forEach((v, i)=>{
  if (v > 10) {
    a1.push(arr[i])
  } 
})
console.log(a1) [33,44]

6、find()查找第一个符合的对象并返回

let arr = [1,33,44,2,6,9]
let a2= arr.find(v => v > 10);
console.log(a2)//33

7、some()有一个符合就返回true，反之false,every()全部符合返回true
 

let arr = [1,2,3,4,6,11]

let newarr = arr.some(function(v){
  return v > 10
})
console.log(newarr) //true

let newarr2 = arr.every(function(v){
  return v > 10
})
console.log(newarr2) //false

七、object的新增方法

1、Object.is();方法用来判断两个值是否为同一个值，返回一个布尔类型的值

const obj1 = {};
const obj2 = {};
console.log(Object.is(obj1, obj2)); // false

const obj3 = {};
const value1 = obj3;
const value2 = obj4;
console.log(Object.is(value1, value2)); // true

2、Object.assign();多个对象合并为一个对象
 

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a:5 , c: 3 };
//对象合并，把后面对像合并到第一个对象，对象里相同的属性会覆盖
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}

3、Object.keys() 返回对象所有属性；Object.values() 返回对象所有属性值；Object.entries() 返回多个数组，每个数组是 key–value
 

let person = {
	name: "admin",
	age: 12,
	language: ["java", "js", "css"],
};
console.log(Object.keys(person)); //[ 'name', 'age', 'language' ]
console.log(Object.values(person)); //[ 'admin', 12, [ 'java', 'js', 'css' ] ]
console.log(Object.entries(person));    /* [["name", "admin"],["age", 12],["language", ["java", "js", "css"]],]; */

八、对象简写

let name ='admin'
let age = 20
//es6之前
// let person={ name:name,age:age}
//es6  声明对象时的属性名与引用的变量名相同就可以省略
let person={name,age}

九、对象复制

let person={
	name: "admin",
	age: 18,
	wife:"吖吖"
}
let person2={...person}
console.log(person2===person);//false
console.log(person2);//{name: 'admin', age: 18, wife: "吖吖"}

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a: 5, c: 3 };

let newObj ={...obj1,...obj2,...obj3}
console.log(newObj); // { a: 5, b: 2 , c:3}

十、函数写法

1、参数默认值
 

// es6之前
// function add(a, b) {
//     if(!a) a=0
//     if(!b) b=0
// 	return a + b;
// }

//es6
function add(a = 0, b = 0) {
return a + b;
}
let x=add(); 
let y=add(2); 
let z=add(3, 4); 
console.log(x,y,z); //x=0, y=2, z=7

2、箭头函数

let add = (a,b) => {
    return a+b;
}
let print = () => {
    console.log('hi');
}
let fn = a => a * a;
//当只有一个参数时，括号可以省略，函数体只有单行return语句时，大括号也可以省略。

3、箭头函数中的this指向为父级的对象
 

 var age = 123;
 let obj = {
     age:456,
     say:() => {
         console.log(this.age);  //this指向window
     }
 };
 obj.say();   //123

十一、模块化

1、导入
import ‘模块名称’  from  ‘路径’；
import  ‘路径’；
2、导出
let name = 'ren',age = 12;
export {name,age};
//注意：变量需要用大括号包裹，然后才能向外输出


//导出字符串
export var str = "hello";
//导出函数
export var fun = function(){
    alert("我是函数");
}
//导出对象
export const p =  {
    "id":"007",
    "name":"张三疯",
    "eat":function(){
        alert("吃");
        ff();
    }
}
//此函数没有使用export关键字导出，所以，只能在当前js文件内部使用
function ff(){
    alert("我只能在当前js被使用");
}
//导入时，需要使用{}，这是解构赋值。
import {str,fun,p} from './XXX.js';
window.onload = function(){
    document.getElementById("btn01").onclick = function(){
        console.log(str);
        fun();
        console.log(p.id);
        p.eat();
    }
}

十二、promise

//Promise为一个对象，可以通过new
//本身有4个主要的方法
//reject、resolve、then、catch
//Promise的精髓就是“状态”，通过维护状态、传递状态的方式回调函数可以被调用，比callback有简化

//以下列子是根据状态执行不同的
function getNumber(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
        }, 2000);
    });
    return p;            
}
getNumber().then(
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    function(reason, data){
        console.log('rejected');
        console.log(reason);
    }
).catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

//Promise中的all用法
//Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});
//以上runAsync1(), runAsync2(), runAsync3()为并行操作，都执行完后才会执行then中的逻辑。

Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});
//以上runAsync1(), runAsync2(), runAsync3()其中一个执行为就执行then中的方法。其他随后同步执行

十三、Proxy

/*如VUE中的双向绑定就是用Proxy实现的
Proxy用户创建代理对象，运行我们定制部分自定义行为、方法，用于对象的访问控制、数据验证、属性劫持等
Proxy属性操作介绍
get(target, propKey, receiver) ：拦截对象属性的读取
	target：目标对象。
	prop：要访问的属性名。
	receiver：代理对象本身（或者说是拦截操作所在的环境）。
*/

const target = {
	name: 'Alice',
	age: 25
};
const proxy = new Proxy(target, {
	get(target, prop) {
		console.log(`Getting ${prop}`);
		return target[prop];
	}
});
console.log(proxy.name); // 输出：Getting name，Alice


/*set(target, propKey, value, receiver) ：拦截对象属性的设置返回一个布尔值。
	target：目标对象。
	prop：要设置的属性名。
	value：要设置的值。
	receiver：代理对象本身（或者说是拦截操作所在的环境）。
	*/

const target = {
  name: 'Alice',
  age: 25
};
const proxy = new Proxy(target, {
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
});
proxy.age = 30; // 输出：Setting age to 30
console.log(proxy.age); // 输出：30

/*
	has(target, propKey) ：拦截propKey in proxy的操作，返回一个布尔值。
	作用：拦截对in操作符的操作，判断属性是否存在。
	参数：
	target：目标对象。
	prop：要判断的属性名
*/
const target = {
  name: 'Alice',
  age: 25
};

const proxy = new Proxy(target, {
  has(target, prop) {
    console.log(`Checking if ${prop} exists`);
    return prop in target;
  }
});
console.log('name' in proxy); // 输出：Checking if name exists，true
console.log('gender' in proxy); // 输出：Checking if gender exists，false

/*
deleteProperty(target, prop)
作用：拦截对delete操作符的操作，删除属性。
参数：
target：目标对象。
prop：要删除的属性名。
*/
const target = {
  name: 'Alice',
  age: 25
};
const proxy = new Proxy(target, {
  deleteProperty(target, prop) {
    console.log(`Deleting ${prop}`);
    delete target[prop];
    return true;
  }
});
delete proxy.age; // 输出：Deleting age console.log(proxy.age); // 输出：undefined

/*
apply(target, thisArg, argumentsList)
作用：拦截对代理对象的函数调用。
参数：
	target：目标对象。
	thisArg：函数调用时的this值。
	argumentsList：函数调用时的参数列表。
*/
const target = function (name) {
  console.log(`Hello, ${name}`);
};

const proxy = new Proxy(target, {
  apply(target, thisArg, argumentsList) {
    console.log('Calling function');
    return target.apply(thisArg, argumentsList);
  }
});
proxy('Alice'); // 输出：Calling function，Hello, Alice

/*
construct(target, argumentsList, newTarget)
作用：拦截对代理对象的构造函数调用。
参数：
	target：目标对象。
	argumentsList：构造函数调用时的参数列表。
	newTarget：最初被调用的构造函数。
*/
const target = function (name) {
  this.name = name;
};
const proxy = new Proxy(target, {
  construct(target, argumentsList) {
    console.log('Constructing object');
    return new target(...argumentsList);
  }
});
const obj = new proxy('Alice'); // 输出：Constructing object
console.log(obj.name); // 输出：Alice

/*
getPrototypeOf(target)
作用：拦截对代理对象原型链上属性访问操作。
参数：
target：目标对象。
*/
const target = {};
const proxy = new Proxy(target, {
getPrototypeOf(target) {
console.log('Getting prototype');
return Object.getPrototypeOf(target);
}
});

console.log(Object.getPrototypeOf(proxy)); // 输出：Getting prototype，{}

/*
setPrototypeOf(target, prototype)
作用：拦截对代理对象原型链上属性设置操作。
参数：
target：目标对象。
prototype：要设置的原型对象。
*/
const target = {}
const proxy = new Proxy(target, {
  setPrototypeOf(target, prototype) {
    console.log('Setting prototype')
    return Object.setPrototypeOf(target, prototype)
  }
})

const proto = { name: 'Alice' }
Object.setPrototypeOf(proxy, proto) // 输出：Setting prototype
console.log(proxy.name) // 输出：Alice

/*
Proxy属性操作介绍
get(target, propKey, receiver) ：拦截对象属性的读取
set(target, propKey, value, receiver) ：拦截对象属性的设置返回一个布尔值。
has(target, propKey) ：拦截propKey in proxy的操作，返回一个布尔值。
deleteProperty(target, propKey) ：拦截delete proxy[propKey]的操作，返回一个布尔值。
ownKeys(target) ：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey) ：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc) ：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target) ：拦截Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target) ：拦截Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target) ：拦截Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto) ：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args) ：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args) ：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
*/