ES6学习1-变量、函数、JSON、Promise、兼容性

开发效率高、工程性

变量

var:

1.可以重复声明

var a=1;var a=2; a
// 2

2.没有块级作用域
3.不能限制

var b=1;b=2;b
// 2
let 声明变量
const 声明常量

1.禁止重复声明

const c=1;const c=2;c
// VM926:1 Uncaught SyntaxError: Identifier 'c' has already been declared

2.控制修改 (常量不可重新赋值)

const d=1;d=2;d
//VM1053:1 Uncaught TypeError: Assignment to constant variable.
let e=1;e=2;e
// 2

3.支持块级作用域


作用域

1.传统
函数级(for里面的变量i的值是最后的值)

2.ES6
块级(for里面的变量i每次都不一样)

语法块{}

if(){}
for(){}
{}

解构赋值

{a: 12, b: 5, c: 33}
[12, 5, 8]

1.左右两边一样

let {a,b,c}={a: 12, b: 5, c: 33} // json
let [a,b,c]=[12, 5, 8] // array

2.右边得是个东西


函数

1.箭头函数
function (参数){
}

(参数)=>{}
//如果,有且仅有1个参数,()也可以省
let a=(k)=>{consloe.log(k)};
let a=k=>{consloe.log(k)};
//如果,有且仅有1条return语句,{}可以省
let a=(k,m)=>{return k+m};
let a=(k,m)=>k+m;
//{}省略后仍有{}(return json)需包()
let a=(k,m)=>{return {first:k,sec:m}};
let a=(k,m)=>({first:k,sec:m});
  • 修复this
    this的指向取决于定义它的对象,如果重新定义了就会变成新的。es6箭头函数的this绑定在定义它的对象上,不会被修改,这个对象必须在class内,如果不是就会在全局window上。
2.参数展开
  • 2.1 剩余参数——必须是最后一个
    function show(a, b, ...arr){
      console.log(a, b, arr);
    }
    show(1,2,6,7,8,9,3);
    //1 2 (5) [6, 7, 8, 9, 3]
  • 2.2 展开数组——就跟把数组的东西写在那儿一样
let a=[6,7,8]; [...a]
// (3) [6, 7, 8]

系统对象

Array

  • map 映射 1对1
let course=[88,99,56,23,16,90];
let res=course.map(val=>val>=60);
console.log(course,res);
// (6) [88, 99, 56, 23, 16, 90] (6) [true, true, false, false, false, true]
  • forEach 遍历 循环一遍
let course=[88,99,56,23,16,90];
course.forEach((val,key)=>console.log(`第${key}个课程:${val}分`));//字符串模板,反单引号
第0个课程:88分
// 第1个课程:99分
// 第2个课程:56分
//第3个课程:23分
//第4个课程:16分
//第5个课程:90分
  • filter 过滤 =>后是条件
let course=[88,99,56,23,16,90];
    course.filter(item=>item>=60 && item<100);
// (3) [88, 99, 90]

reduce 减少 多对1

let arr=[1,2,3,7,8,9];
 let res=arr.reduce((tmp, item, index)=>{
    console.log(`第${index}个${tmp}+${item}`);
    return tmp+item;
 });
console.log(res);

// 第1个1+2
//第2个3+3
// 第3个6+7
//第4个13+8
// 第5个21+9
// 30
 let avarage=arr.reduce((tmp, item, index)=>{
      if(index<arr.length-1){
        return tmp+item;
      }else{
        return (tmp+item)/arr.length;
      }
    });
   console.log(avarage);
//5

String

  • 字符串模板
  • startsWith

    let url='http://www.bing.com/a';

    if(url.startsWith('http://') || url.startsWith('https://')){
      alert('是网址');
    }else{
      alert('非网址');
    }

  • endsWith

JSON

1.标准写法

{"key": "aaa", "key2": 12}
json->字符串
字符串->json

2.JSON对象

stringify:前端传到后台(json->字符串)

let json={a: 12, b: 5, c: 'blue'};
let str=JSON.stringify(json);// json->字符串 & 标准化处理
console.log(str);
// {"a":12,"b":5,"c":"blue"}

parse:后台获取到前台(字符串->json)

    let str='{"a":12,"b":5,"c":"blue"}';
    let json=JSON.parse(str);// 数据要符合标准,一般获取到都是标准的
    console.log(json);
//{a: 12, b: 5, c: "blue"}

异步处理

Promise
async/await


异步操作?
异步——多个操作可以一起进行,互不干扰
同步——操作一个个进行

//异步-依次加载三个json,<ajax相对于外部异步,三个ajax之间同步1执行成功再执行2>

$.ajax({
  url: 'data/1.json',
  dataType: 'json',
  success(data1){
    $.ajax({
      url: 'data/2.json',
      dataType: 'json',
      success(data2){
        $.ajax({
          url: 'data/3.json',
          dataType: 'json',
          success(data3){
            console.log(data1, data2, data3);
          }
        });
      }
    });
  }
});
//同步操作伪代码<三个ajax同步一个接个进行>
let data1=$.ajax('data/1.json');
let data2=$.ajax('data/2.json');
let data3=$.ajax('data/3.json');

Promise:对异步处理封装,<三个ajax之间异步>

Promise.all([
p1,
p2,
p3
]).then();

// 三个无逻辑,<三个ajax之间异步一起执行谁快谁先结束>
    Promise.all([
      $.ajax({url: 'data/1.json', dataType: 'json'}),
      $.ajax({url: 'data/2.json', dataType: 'json'}),
      $.ajax({url: 'data/3.json', dataType: 'json'}),
    ]).then(([data1, data2, data3])=>{ //参数可以直接解构赋值
      console.log(data1, data2, data3);
    }, (res)=>{
      alert('错了');
    });

async/await //有逻辑,同步方式写异步代码

async function xxx(){
let a=12;
let b=5;

let data=await promise;

...

alert(a+b);
}

let xxx=async ()=>{

}

async function show(){
      let data1=await $.ajax({url: 'data/1.json', dataType: 'json'});
      if(data1.a<10){
        let data2=await $.ajax({url: 'data/2.json', dataType: 'json'});
        alert('a');
      }else{
        let data3=await $.ajax({url: 'data/3.json', dataType: 'json'});
        alert('b');
      }
    }

    show();

兼容性

babel:

1.在线
type="text/babel"

2.编译

  • node.js
  • npm i @babel/core @babel/cli @babel/preset-env
  • 添加脚本
  • 添加.babelrc——声明preset

ES6(ECMA 2015)
ES7(ECMA 2016)
  • 求幂: **
  • Array.includes()
ES8(ECMA 2017)
  • await/async
ES9(ECMA 2018) 预览版
  • rest/spread :替代await/async
  • 异步迭代 :for循环异步化
  • Promise.finally() :所有操作结束后清理工作
  • 正则:增加一些模式
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容