ES6学习笔记

let与const

let声明变量相当于var声明变量。

let注意事项：
  • 没有作用域，不存在变量提升。在代码块内，只要let定义变量,在这之前使用都是报错。先定义再使用。（暂存性死区）
  • 同一个作用域里面不能重复定义变量
  • for循环，for循环里面是父级作用域，里面又一个作用域
for(let i = 0;i<3;i++){
  let i = "aaa";
  console.log(i);//3遍aaa
}

const声明常量，定义好了不能改变。

  • const和let特性一样的。
  • const定义完变量，必须有值，不能后赋值，不能修改。
const a;
a = 5;//报错
  • const 声明对象，对象里面的属性可以修改的，因为是引用值。如果使用了Object.freeze(obj)就不能修改了。
const arr = [1,2,3];
arr.push(4);
console.log(arr);[1,2,3,4]

const obj = Object.freeze([1,2,3]);
obj.push(4);
console.log(obj);//报错

解构赋值

按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。类似如下的声明变量并赋值

let [a,b,c] = [1,5,8];
console.log(a,b,c)//1,5,8

let {name,age,sex} = {name:'es6',age:15,sex:'male'}
console.log(name,age,sex)//'es6',15,'male'

let json = {name:'es6',age:15,sex};
 let {name,sex,age} = json;
console.log(name,sex,age)//'es6','male',15

//如果有些没值，可以给默认值
let [a,b,c='暂无值'] = [1,2];
console.log(a,b,c)//1,2,暂无值

//交换两个变量的值
let a = 5;
let b = 2;
[a,b] = [b,a];
console.log(a,b)//2,5
注意
  • 左右两边，结构格式要保持一致
  • 解构时候可以给默认值，注意null和undefined的区别

字符串模板

`${变量名}`这就是字符串模板的符号，优点是可以随意换行。

let json={name:'es5',age:15}
let str = `我叫${json.name},我的年龄是${json.age}`
console.log(str)//我叫es6,我的年龄是15
字符串查找

str.includes(查找内容)查找字符串
str.startsWith(检查内容)字符串是否以检查内容开头
str.endsWith(检查内容)字符串是否以检查内容结尾
str.repeat(次数)字符串重复次数

//ES5查找字符串
let str = 'apple banana';
if(str.indexOf('apple') != -1){
console.log('存在')
}esle{console.log('不存在')}

//ES6查找字符串
let str = 'apple banana';
console.log(str.includes('apple'))//true

函数的改变

  • 函数可以直接给默认值
function show(a=1,b=2){return a+b}
console.log(show()) //3
console.log(show(2)) //4
console.log(show(5,4)) //9
  • 函数参数默认已经定义了，不能再使用let、const声明
function show(a=8){
  let a = 10;//错误
  console.log(a)//报错
}
show();
  • 箭头函数
() => {
  语句;
  return
}

注意：

  • this问题，定义函数所在的对象，不再是运行时所在的对象
  • 箭头函数里面没有arguments，用...来获取
  • 箭头函数不能当构造函数
  • ES2017规定了函数参数尾部逗号是可以存在了

扩展运算符，rest运算符 ... 

//展开数组
let arr = [1,2,3];
console.log(...arr);//1  2  3
//合并数组
function show(...a){
  console.log(a);//[1,2,3,4,5]
}
show(1,2,3,4,5)
//剩余数组
function fun(a,b,...c){
  console.log(a,b);//1,2
  console.log(c);//[3,4,5]
}
fun(1,2,3,4,5)
//复制数组
let arr = [1,2,3];
let arr1 = [...arr];

数组

ES5新增的一些循环：

  • 1、for循环
  • 2、while循环
  • 3、arr.forEach()代替普通的for循环
  • 4、arr.map()非常有用，做数据交互，映射。正常情况下，需要配合return返回一个新数组，如果没有return就相当于forEach一样。平时用到map，基本就是要有返回值。重新整理数据结构
let arr = [
{name:'张三',age:20,sex:'male'},
{name:'李四',age:25,sex:'female'},
{name:'王麻子',age:22,sex:'male'},
]
let newArr = arr.map((item,index,arr) => {
  let json = {};
  json.n = item.name;
  json.a = item.age;
  json.s = item.sex;
 return json;
})
consloe.log(newArry);//处理过后的json数据
  • 5、arr.filter()过滤，过滤一些不合格的元素，如果回调函数返回的是一个true，就留下来
let arr = [
{name:'张三',age:20,sex:'male'},
{name:'李四',age:25,sex:'female'},
{name:'王麻子',age:22,sex:'male'},
]
let newArr = arr.filter((item,index) => {
  return item.sex == 'male';
})
  • 6、arr.some()类似查找，数组里面某一个符合条件返回true。
  • 7、arr.every()数组里面所有元素都符合条件才返回true。

以上3到7的函数接收两个参数，一个回调函数和this的指向forEach(fun,this指向)，回调函数里面接收三个参数fun(value,index,arr){}

  • 8、arr.reduce() 从左往右求数组的和，阶乘
  • 9、arr.reduceRight()从右往左求数组的和，阶乘
let arr = [1,2,3]

以上8和9的方法里面的回调函数接收4个参数fun(prev,cur,index,arr){} 类似于递归。

ES6循环for...of

arr.keys()数组的下标
arr.entries()数组的某一项

let arr = [1,2,3,4,5];
for(let val of arr){
  console.log(val)//1 2 3 4 5
}
for(let index of arr.keys()){
  console.log(index)//0 1 2 3 4
}
for(let item of arr.entries()){
  console.log(item)//0:1,1:2,2:3,3:4,4:5
}
for(let [key,val] of arr.entries()){
  console.log(key,val)//0,1  1,2 ...
}
Array.from() 把类数组对象转成数组，生成一个新数组。Array.of()把一组值转成数组。
function show(){
  let arg = Array.from(arguments);
  console.log(arg);
}
show(1,2,3,4,5,6);
arr.find() 查找，找出第一个符合条件的数组成员就返回当前数组值，如果没找到返回undefined。
arr.findIndex()找的是位置，没找到返回-1。
arr.fill(填充的东西，开始位置，结束位置)填充

对象简洁语法及对象新增

let name = 'es6';
let age = 15;
let json ={
  name, //name:name
  age, //age:age
  show(){//这里一定注意不要写箭头函数，不然this有问题
    return this.name;
  }
/*show:function(){
  return this.name;
  }*/
}
console.log(json.show());//'es6'

Object.is(a,b)用来比较两个对象是否相等，解决了NaN不相等的问题
Object.assign(目标对象，source1,source2...)用来合并对象,复制一个对象

let json = {a:1};
let json1 = {b:2};
let json2 = {c:3};
let newObj = Object.assign({},json,json1,json2);
console.log(newObj)//{a:1,b:2,c:3}
ES2017新增的
  • Object.keys()
  • Object.entries()
  • Object.values()

Promise

作用：解决异步回调问题。传统方式，大部分用回调函数，事件。

new Promise(function(resolve,reject){
  //resolve 成功调用
  //reject 失败调用
})

let a = 10;
let promise=new Promise(function(resolve,reject){
  if(a == 10){resolve('成功')}else{reject('失败')}
})
promise.then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

Promise.resolve('aa'):将现有的东西，转成一个Promise对象，resolve状态，成功的状态。
Promise.reject('aaa'):将现有的东西，转成一个Promise对象，reject状态，失败的状态。
Promise.all()打包prosmise对象扔到一个数组里面，最后返回的还是一个promise对象，必须确保所有的Promise对象都是resolve状态。

let p1 = Promise.resolve('a');
let p2 = Promise.resolve('b');
let p3 = Promise.resolve('c');
Promise.all([p1,p2,p3]).then(res =>{
  let [res1,res2,res3] = res;
  console.log(res1,res2,res3);
})

let status = 1;
let login = (resolve,reject) => {
  setTimeout(() => {
    if(status == 1){
        resolve({data:'登录成功',msg:'111',token:444})
          }else{
              reject('失败了');
      }
    },2000);
 }
 let info = (resolve,reject) => {
    setTimeout(() => {
        if(status == 1){
            resolve({data:'获取信息成功',msg:'111',token:444})
          }else{
              reject('失败了');
            }
    },1000);
 };
new Promise(login).then(res => {
    console.log('登录成功');
    return new Promise(info);
}).then(res => {
    console.log('获取信息成功');
    console.log(res);
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容