博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端那些事之ES6
阅读量:6114 次
发布时间:2019-06-21

本文共 4585 字,大约阅读时间需要 15 分钟。

hot3.png

ES6学习

  • 参考地址:

let

  • 1.let可以声明变量
  • 2.let 不存在变量提升
//es5 var a = []; for (var i = 0; i < 10; i++) {     var c = i;     a[i] = function () {         console.log(c);     } } a[4]();//9 //es6 var b = []; for (var j = 0; j < 10; j++) {     let d = j;     b[j] = function () {         console.log(d);     } } b[4]();//4
  • 暂时性死区
    • 只要块级作用域内存在let 命令,所有声明的变量就这在区域内,不爱外部的影响。
{     console.log(a); //undefined     let a = 100;     console.log(a); // 100 } var a = 100; {     console.log(a); //undefined     let a = 100;     console.log(a); // 100 }
  • 不允许重复声明变量
{     var a = 100;     var a = 200;     console.log(a);      } console.log(a); {     var b = 100;     let b = 200; } console.log(b);//报错 {     let c = 100;     var c = 200; } console.log(c);//报错 {     let d =100;     let d = 200; } console.log(d);//报错
  • 块级作用域
//es6 function fun() {     let num = 100;     if(true) {         let num = 200;         console.log(num); //200     }     console.log(num); } fun();//100

const

  • 定义常量
const pi = 3.149526;console.log(pi); pi =3; //报错console.log(pi);
  • 块级作用域
if(true) {     const pi = 3.1415926; } console.log(pi); //报错,pi is not defined
  • 暂时性死区
if(true) {     console.log(pi); //报错,pi is not defined     const pi = 3.1415926; }
  • 不可重复声明
{     var a = 1;     const a =1;     console.log(a); //报错 }
  • const 定义对象
const obj = {};obj.name = "zhangsan";obj.age = 18;console.log(obj.name);//zhangsanconsole.log(obj.age);// 18console.log(obj);//Object {name: "zhangsan", age: 18} //错误用法 obj = {};
  • const 定义数组
const arr = [];arr.push("hello"); //["hello"]console.log(arr);arr.length = 0;console.log(arr); //[""] //错误用法 arr = ["one"];
  • const 冻结对象
const obj = Object.freeze({});obj.name = "zhangsan";obj.age = 18;console.log(obj.name);//undefiendconsole.log(obj.age);//undefiendconsole.log(obj);//obj
  • const 使用冻结对象
const obj = Object.freeze({    name: 'zhangsan',    age : 18});console.log(obj.name);//zhangsanconsole.log(obj.age);//18console.log(obj);//obj{name:'zhangsan', age:18}
  • 彻底冻结函数
var constantize = (obj)=>{        Object.freeze(obj);        Object.keys(obj).forEach((key, value)=>{            if(typeof obj[key] === 'object'){            constantize(obj[key])        }    })    }

Rest 参数的学习和扩展

  • 1.函数传参可以传多个
let sum = (...m) => {        let total = 0;        for (let i of m) {            total += i;        }        console.log(`total:${total}`); //14}sum(2,3,4,5);
  • 2....和数组结合称为函数的扩展
let arr = [1, 2];    console.log(...arr); // 1 2    let [a, b] = [4, 5];    console.log(...[a, b]); // 4 5
  • 3:数组的扩展
//es5    let arr1 = [1, 3];    let arr2 = [4, 5];    let arr3 = arr1.concat(arr2);    console.log(arr3); // 1, 3, 4, 5    //es6    let arr4 = [1, 3];    let arr5 = [4, 5];    let arr6 = [...arr4, ...arr5];    console.log(arr6); //1, 3, 4, 5    let  [c, ...d]=[1,2,3,4,5];    console.log(c);//1    console.log(d);//2,3,4,5

4:变量的扩展

let str = 'es6';    let str1 = [...str];    console.log(str1);//["e", "s", "6"]

promise对象

//promise对象返回成功回调resolve,失败回调rejectlet checkLogin = () =>{    //一定要返回Promise对象    return new Promise((resolve, reject) => {        let flag = document.cookie.indexOf('userId')>-1? true: false        if(flag = true) {            //revolve成功回调函数            resolve({                status: 0,                result: true            })        }else{            reject(`error`);        }    })}checkLogin().then((res) => {    //成功请求回来    if(res.status ==0) {        console.log(`login success`);    }}).catch((error) => {    console.log(`login faild:${error}`);})let getUserInfo = () => {    return new Promise((resolve, reject) => {        let userInfo = {            userId:101        }        resolve(userInfo)    })}//promise 提供了all方法可以同时调用多个接口和请求Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=> {    if(res1.status==0){        console.log(`all:${res1.result}`);//all:true    }    console.log(res2.userId);//101})

es6 数组去重

let arr = [1,2,3,3,4,4,9];let permissionClusterRepeat = Array.from(new Set(arr));

*es6设置数组 的交集和差集

var Array1 = [5,6,7,8,18,9,90,81]; var Array2 = [10,415,54,87,98,65,81];let a = new Set(Array1);let b = new Set(Array2); // 并集let unionSet = new Set([...a, ...b]);// set转化为数组let unionSet1 = Array.from(unionSet);console.log(unionSet1);// 交集let intersectionSet = new Set([...a].filter(x => b.has(x)));// set转化为数组let intersectionSet1 = Array.from(intersectionSet);console.log(intersectionSet1);// 差集let differenceABSet = new Set([...a].filter(x => !b.has(x)));// set转化为数组let differenceABSet1 = Array.from(differenceABSet);console.log(differenceABSet1);

动态生成指定长度的数组

Array.from({length:10}, (v,k) => k);//[0,1,2,3,4,5,6,7,8,9]

转载于:https://my.oschina.net/yongxinke/blog/1531076

你可能感兴趣的文章
Oracle中drop user和drop user cascade的区别
查看>>
【Linux】linux经常使用基本命令
查看>>
Java 内存区域和GC机制
查看>>
更新代码和工具,组织起来,提供所有博文(C++,2014.09)
查看>>
HTML模块化:使用HTML5 Boilerplate模板
查看>>
登记申请汇总
查看>>
Google最新截屏案例详解
查看>>
2015第31周一
查看>>
2015第31周日
查看>>
在使用EF开发时候,遇到 using 语句中使用的类型必须可隐式转换为“System.IDisposable“ 这个问题。...
查看>>
PHP使用DES进行加密和解密
查看>>
Oracle 如何提交手册Cluster Table事务
查看>>
BeagleBone Black第八课板:建立Eclipse编程环境
查看>>
在服务器上用Fiddler抓取HTTPS流量
查看>>
文件类似的推理 -- 超级本征值(super feature)
查看>>
【XCode7+iOS9】http网路连接请求、MKPinAnnotationView自定义图片和BitCode相关错误--备用...
查看>>
各大公司容器云的技术栈对比
查看>>
记一次eclipse无法启动的排查过程
查看>>
【转】jmeter 进行java request测试
查看>>
读书笔记--MapReduce 适用场景 及 常见应用
查看>>