ES6基础+进阶 常用知识总结

javascript ES2015

核心（ECMAScript）
语法
类型
语句
关键字
保留字
操作符
对象
文档对象模型 （DOM）
document、location、navigator、screen、history、frames

浏览器对象模型 （BOM）
浏览器提供的接口对象

DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

数组方法

遍历 forEach

// 循环遍历每个元素， 没有返回值
array.forEach((element,index) => {
    /// 循环遍历， 每个元素
    // index 当前元素下标
});

map 重组
// 循环遍历每个元素,对其进行处理后返回给新的对象，

var endobjcar2 = array.map((element,index) => {
    /// 循环遍历， 每个元素
    // index 当前元素下标
    return newElement
}) 

filter 筛选

// 循环遍历每个元素,对其进行比较，如果为ture，该元素会被返回，
var endobjcar2 = array.fitter((element,index) => {
    /// 循环遍历， 每个元素
    // index 当前元素下标
    return Boolean
})  

find 查找

// 循环遍历每个元素,对其进行比较，如果一个为ture，就结束，不在继续，该元素会被返回，
var endobjcar2 = array.find((element,index) => {
    /// 循环遍历， 每个元素
    // index 当前元素下标
    return Boolean
}) 

every 和 some

// every 只要一个返回为false，并不继续遍历， 值为 false，
// 循环遍历每个元素,对其进行比较，
var endobjcar2 = array.every((element,index) => {
    /// 循环遍历， 每个元素
    // index 当前元素下标
    return Boolean
}) 
// some 只要一个返回为true，则值为 true，此时不会再继续遍历；
// 循环遍历每个元素,对其进行比较，
var endobjcar2 = array.some((element,index) => {
    /// 循环遍历， 每个元素
    // index 当前元素下标
    return Boolean
}) 

reduce

/// num为默认参数, item 被遍历的元素，进行迭代运算
/// num 0 为初始值,并在下次迭代作为参数传入
user = porducts.reduce((num,item)=>{
    console.log(num,item); 
    return num+item.age; // 这里下次迭代作为参数 num的值
},0)
console.log(user);
var, let 和 const
function fn(){
    var a=1;
    function fn1(){ 
        console.log(a); 
        var a; // var a=2; // let a=2; 
    }
    fn1();
}
fn();

变量

var 变量提升 ---- 无论在哪个地方声明，都会提升到当前作用域顶部

let 声明块级作用域，不会变量提升，锁在当前块中 （先声明在访问）

const 声明块级作用域，不会变量提升，声明常量，一旦声明，不可更改，而且常量必须初始化赋值。 （可以修改数组内部值和对象内部属性，新增删除键值对）

const ties = { a:1 } // {a:1}
    ties.a=2  // {a:2}
    ties.b=3 // {a:2,b:3}
    delete ties.a  // {b:3}
    ties=2 // Uncaught TypeError: Assignment to constant variable.

模板字面量

模板字面量/多行字符串

// 使用
let a = `132` // 123
let b = `12
3`
//  12
//3
let c = `12\`3`

在模板字面量插入变量的方法。（变量占位符）
我们不需要时用 +（加号）来向字符串插入变量，而是使用 ${params} 直接插入你需要添加到字符串中的位置

let t = 'HAHA'
let a = `123${t}456` // 123HAHA456

function fn(){
    return 'hello world'
}

console.log(`foo ${fn()} bar`)

模板字面量的终极用法 tag是一个方法，方法名你可以任意命名，这种写法被称作标签模板。

function tag(literals, ...substitutions) {
    //literals是数组，第一个位置是""，第二个位置是占位符之间的字符串，在本例中是[ '', 'ha', 'ha', '' ]
    //substitutions是字符串中的模板字面量，可能多个 [ 4, '-----', '-----' ]
    let result = ''
    console.log(literals)
    console.log(substitutions)
    //函数最终返回字符串
    result = literals+substitutions

    return result
}
let a = 4
let b = '-----'
let t = tag`${a}ha${b}ha${b}`
console.log(t) //,ha,ha,4,-----,-----

箭头函数

没有独立作用域，和上级（父级）共享一个作用域

不能用做构造函数

没有 prototype

//  => 前的是参数 如果没有参数用 () 代替 => 后面是表达式

let double = function(number){
    return number*2;
}

let double = (number)=>{
    return number*2;
}

let double = (number)=>number*2;  // 单条语句没有中括号时，会默认为返回参数
 
let double = number =>number*2;  // 没有中括号时，会默认为返回参数

// 解决this指针问题
// 1,函数外部赋值给一个常量 内部调用这个变量
// 2，函数 .build(this);
// 3，箭头函数，this指向 父级对象
const team ={
    members:["Henry","Elyse"],
    teamName:"es6",
    teamSummary:function(){
        const _this = this;
        return this.members.map(function(member){
            console.log(_this);  // this指向了 window 
            return `${member} 隶属于 ${_this.teamName}`;
        })
    }
} 
console.log(team.teamSummary());


const team ={
    members:["Henry","Elyse"],
    teamName:"es6",
    teamSummary:function(){
        return this.members.map(function(member){
            console.log(this);  // this指向了 window 
            return `${member} 隶属于 ${this.teamName}`;
        }.bind(this))
    }
}

console.log(team.teamSummary());

// 
const team ={
    members:["Henry","Elyse"],
    teamName:"es6",
    teamSummary:function(){
        return this.members.map((member)=>{
            console.log(this);  // this指向了 window 
            return `${member} 隶属于 ${this.teamName}`;
        })
    }
}

console.log(team.teamSummary());

增强对象字面量

// 对象用法 
var name = "jack",age = 20
var obj = {
    name:name,
    age:age,
    getName:function(){
        return this.name
    },
    getAge:function(){
        return this.age
    }
}


let name = "jack",age = 20
let obj = {
    name,
    age,
    getName(){
        return this.name
    },
    ["get"+"Age"](){
        return this.age
    }
}

Object对象的扩展

Object.keys(obj) // 返回对象key值组成的数组

Object.assign(x,y) // 合并两个对象 多个key值一样的取后面一个
函数的默认参数
在ES5中，我们给函数传参数，然后在函数体内设置默认值

function a(mun, callback){
    num = num || 6
    callback = callback ||function(data){console.log('ES5:',data)}
    callcakc(num*num)
}
a() // ES5:36, 不传参输出默认值

a(10,function(data){console.log(data){console.log(data*10)}})

ES6中，新的默认值写法

function a(num=6,callback = function(data){console.log('ES6:',data)}){
    callback(num*num)
}
a() //ES6：36,不传参输出默认值
a(10,function(data){console.log(data*10)}) // 1000，传参输出新数值

arguments ：一个类数组对象，存在函数内部，当前函数的所有参数组成了一个类数组对象

function a(num,b){
    console.log(arguments) //{"0":6,"1":10}
    console.log(arguments.length) // 2
}
a(6,10)

展开运算符

// 常规写法1

function addNumbers(number){
    return number.reduce((sum,number)=>{
        return sum+number;
    },0)
}

const number= [1,2,3,4,5];
console.log(addNumbers(number));

// es6 写法 多参

function addNumbers(...number){   
    return number.reduce((sum,number)=>{
        return sum+number;
    },0)
} 
console.log(addNumbers(1,2,3,4,5));

数组合并 concat

let colors = ['red','blue']
const colors1 = ['pick',"yellow"] 
colors = colors.concat(colors1);
console.log(colors);
// 展开预算符
let colors = ['red','blue']
const colors1 = ['pick',"yellow"]
colors = [...colors,...colors1];
console.log(colors);

解构

对象解构

// 普通写法
var expense = {
    type:"es6",
    amount:"45"
}
var type =expense.type;
var amount = expense.amount;
console.log(type,amount);

// 解构 当键名和键值相同时可以简写
var expense = {
  type: "es6",
  amount: "45"
}
const { type ,amount} = expense; 
console.log(type, amount)

// 常用方法
var saveFiled = {
    extension:"jpg",
    name:"girl",
    size:1231231
}

// es5 

// function fileSammary(file){
//     return `${file.name}.${file.extension} 的大小${file.size}`;
// }

// es6 
function fileSammary({extension,name,size}){
    return `${name}.${extension} 的大小${size}`;
}

console.log(fileSammary(saveFiled));

数组解构

const names = ['张三','李四','王五'];
console.log(names);

const [name1,name2,name3] = names;
console.log(name1,name2,name3);

const { length } = names;
console.log(length); 

数组对象

const people = [
    {name:"Henry",age:20},
    {name:"Bucky",age:18},
    {name:"Emily",age:11}
]

const [{},{age}] = people;
console.log(age);

类的定义和继承

/// es5
function Car(options){
    this.title = options.title;
}
Car.prototype.drive = function(){
    return "Vroom";
}
const car = new Car({title:"BMW"});
console.log(car);
console.log(car.drive());

// 继承

function Toyota(options){
    Car.call(this,options);
    this.color = options.color;
}

const toyota = new Toyota({title:"Fous",color:"red"});

console.log(toyota);
// es6 类
class Car{
    constructor({title}){ 
        this.title =title;
    }
    drive(){
        return "vroom";
    }
}
const car = new Car({title:"ben"})
console.log(car);
// 继承
class Toyota extends Car{ 
    constructor(options){
        super(options)
        this.color =options.color;
    }

}


const toyota = new Toyota({title:"Focus",color:"red"});

console.log(toyota);
console.log(toyota.drive());
generator 生成器
// es5
function nameIterator(name){
    let nextIndex = 0;
    return {
        next(){
            return nextIndex<name.length?{value:name[nextIndex++],done:false}:{value:undefined,done:true}
        }
    }

}

const nameArray =  ['张三','李四','王五'];

const names = nameIterator(nameArray);
console.log(names.next());
console.log(names.next());
console.log(names.next());
console.log(names.next());

// es6
function* sayNames(){
    yield "张三";
    yield "李四";
    yield "王五";
}

const name = sayNames();

console.log(name.next()); 
console.log(name.next());
console.log(name.next());
console.log(name.next());

map 键值对

const map1 = new Map();

const key1 = "some string",
    key2 = {},
    key3 = function(){};

map1.set(key1,"Value of key1")
map1.set(key2,"Value of key2")
map1.set(key3,"Value of key3")

console.log(map1);

console.log(map1.get(key1));
console.log(map1.get(key2));
console.log(map1.get(key3));

console.log(map1.size);

for (let [key,value] of map1) {
    console.log(`${key} : ${value}`);
}
console.log("------------");

map1.forEach((value,key)=>{
    console.log(`${key} : ${value}`);
})

console.log("------------");
for (let key of map1.keys()) {
    console.log(key);
} 
console.log("------------");
for (let val of map1.values()) {
    console.log(val);
} 
console.log("------------");
const arrayList = Array.from(map1);
const arrayListkeys = Array.from(map1.keys());
const arrayListvaluse = Array.from(map1.values());
console.log(arrayList);
console.log(arrayListkeys);
console.log(arrayListvaluse);

set

set 可以存储任意数据类型，并且唯一(不重复)
const set1 = new Set();

set1.add(100);
set1.add("a string");
set1.add({name:"张三"});
set1.add(false)
set1.add(100); // 不能重复添加

console.log(set1);

const set2 = new Set([1,true,"STRING"]);

console.log(set2);

console.log(set1.size);

// 是否存在对应值
console.log(set1.has(100));

console.log(set1.has({name:"张三"}));

// 删除
set1.delete(100);

Promise

Promise 结构

new Promise((resolve,reject)=>{
    // 异步函数
    $.ajax({
        url:'',
        type:'',
        success(res){
            resolve(res)
        },
        error(err){
            reject(err)
        }
    })
}).then((res)=>{
    console.log(res)
},(err)=>{
    console.log(err)
})

链式调用

var promiseFn1=new Promise((resolve,reject)=>{
    // 异步函数
    $.ajax({
        url:'',
        type:'',
        success(res){
            resolve(res)
        },
        error(err){
            reject(err)
        }
    })
})
var promiseFn2=new Promise((resolve,reject)=>{
    // 异步函数
    $.ajax({
        url:'',
        type:'',
        success(res){
            resolve(res)
        },
        error(err){
            reject(err)
        }
    })
})

promiseFn1.then(()=>{
    // 
    return promiseFn2
}).then(()=>{   
    // 
})  

fetch 数据请求

fetch("url",{
        method:"post",
        headers:{'Content-type':'application/json'},
        body:{}
    })
    .then(res=>res.json())
    .then(res=>{
        // res
    }).catch(err=>{
        // err
    })

另：更多关于异步编程的问题可参考这篇文章JS-学习ES6之- async & await；
由于本人才疏学浅，故在此总结得可能不是很全面，仅做个人笔记使用，望各位海涵。本文中如有和其他文章重复之处，请及时批评指正；