ES6基础+进阶 常用知识总结
javascript ES2015
核心（ECMAScript）
语法
类型
语句
关键字
保留字
操作符
对象
文档对象模型 （DOM）
document、location、navigator、screen、history、frames
浏览器对象模型 （BOM）
浏览器提供的接口对象
DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。
数组方法
遍历 forEach
// 循环遍历每个元素， 没有返回值
arcray.forEach((element,index) => {
/// 循环遍历， 每个元素
// index 当前元素下标
});
map 重组
// 循环遍历每个元素,对其进行处理后返回给新的对象，
var endobjcar2 = arcray.map((element,index) => {
/// 循环遍历， 每个元素
// index 当前元素下标
return newElement
})
filter 筛选
// 循环遍历每个元素,对其进行比较，如果为ture，该元素会被返回，
var endobjcar2 = arcray.fitter((element,index) => {
/// 循环遍历， 每个元素
// index 当前元素下标
return Boolean
})
find 查找
// 循环遍历每个元素,对其进行比较，如果一个为ture，就结束，不在继续，该元素会被返回，
var endobjcar2 = arcray.find((element,index) => {
/// 循环遍历， 每个元素
// index 当前元素下标
return Boolean
})
every 和 some
// every 只要一个返回为false，并不继续遍历， 值为 false，
// 循环遍历每个元素,对其进行比较，
var endobjcar2 = arcray.every((element,index) => {
/// 循环遍历， 每个元素
// index 当前元素下标
return Boolean
})
// some 只要一个返回为true，并不继续遍历 则值为 true
// 循环遍历每个元素,对其进行比较，
var endobjcar2 = arcray.some((element,index) => {
/// 循环遍历， 每个元素
// index 当前元素下标
return Boolean
})
reducel
/// 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 nextIndexmap 键值对
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；
由于本人才疏学浅，故在此总结得可能不是很全面，仅做个人笔记使用，望各位海涵。本文中如有和其他文章重复之处，请及时批评指正；