ES6

ES6

箭头函数、this指向问题


function foo(a,b){

return a+b;

}

console.log(3,2);

//用箭头函数简写

let foo = (a,b) => a + b;

console.log(foo(13,2));

箭头函数就是用来承接一堆代码的
箭头函数更加轻量级，性能会更好

  • 箭头函数特性

    1. 不支持arguments关键字

    2. this指向生而固定

    3. 箭头函数在哪声明，this就指向哪里

    
let obj = {

    fn : () => {

        console.log(this,"外部函数指向window");

        //Window "外部函数指向window"

        let foo = () => {

            console.log(this,"内部函数指向window");

            //Window "内函数指向window"

        }

        foo();

    },

    //这里如果改成以下形式会对外部和内部函数的this指向造成影响

    //第二种

    //  fn : function(){

    //  console.log(this)

    //  //{fn: ƒ, fnn: ƒ}fn: ƒ ()fnn: ƒ ()__proto__: Object

    //  let foo = () => {

    //  console.log(this)

    //  //{fn: ƒ, fnn: ƒ}fn: ƒ ()fnn: ƒ ()__proto__: Object

//  }

//  }

    //第三种

    //  fn : function(){

    //  console.log(this)

    //  //{fn: ƒ, fnn: ƒ}fn: ƒ ()fnn: ƒ ()__proto__: Object

    //  let foo = function(){

    //  console.log(this)

    //  //Window

//  }

//  }

    fnn : function(){

        console.log(this);

    }.bind(this)

    //bind()方法创建一个新的函数，在调用时设置this关键字为提供的值。

}

obj.fn();

obj.fnn();

    分析：

    1. 第一种情况下的this指向箭头函数声明处fn : () =>{} fn是全局变量，所以this指向window，而第二个this则跟第一个this指向相同。

    2. 第二种情况下 fn : function(){} 此时没有了箭头函数，所以第一个this指向调用其所在函数的对象fn，第二个this则也指向fn。

    3. 第三种情况下第一个this指向fn，第二个this指向window。

  • 箭头函数的this指向是声明箭头函数时的this指向

  • this指向调用其所在函数的对象，而且是离谁近就是指向谁；构造函数下，this与被创建的新对象绑定；DOM事件，this指向触发事件的元素；内联事件分两种情况，bind绑定，call & apply 方法等

构造函数


function foo(){

    console.log("helllo");

}

var value = foo();  //函数

var obj = new foo();    //构造函数

console.log(value,obj)

  • 函数返回值 => return 关键字返回的内容0

  • 构造函数返回值 => 根据构造函数构造的对象foo()

  • 注意 箭头函数不能当作构造函数

some( )方法


var arr = [1,23,4,5,3,2,42];

var res = arr.some(item => >6);

console.log(res);

//true

  • some( )方法测试是否至少有一个元素通过有提供的函数实现的测试。

  • 注意 对于放在空数组的任何条件，此方法返回false。

ES6中的字符串拼接


//es6中字符串拼接用${变量名}的方式引用变量

//``里的`要用\`转义

var value = "hello world";

var html = `<ul>

                <li>${value}</li>

                <li>\`</li>

                <li>hello</li>

                <li>hello</li>

                <li>hello</li>

                <li>hello</li>

                <li>hello</li>

                <li>hello</li>

                <li>hello</li>

                <li>hello</li>

</ul>`

//ES6中``内的所有东西都被解析为字符串，相对于ES5的字符串拼接来说更为方便

模板引擎

数据驱动思想

目标：只更改数据，可以得到不同的页面渲染。
维护的内容：1.html，js，css => json数据

<script type="text/html"> 的作用是存储字符串模板


//如何获取模板字符串

//1.放在script => text / html 之中的字符串

//2.定义语法规则(artTemplate / ejs)

//2.1 JS代码放在哪里？

//2.2 输出的变量放在哪里？

//3.区分正则

//3.1 输出语句正则 => /<%=(.+?)%>/g

//3.2 JS语句的正则 => /<%([\s\S]+?)%>/g

//[\s\S] => 可以匹配 \n \r 特殊字符的写法

//4.拼接

//设：x,y x => 输出语句; y => js语句;

//4.1 echo函数 => 字符串拼接函数;

var html=  "";

function echo(arg){

    html += arg;

}

<ul>

    y

<li> x </li>

y

</ul>

//x =>    <li>`) \n echo( x ); \n echo(`</li>

// y =>            `); \n    y  \n echo ('

//5. eval => 用eval将处理好的代码进行执行、拼接字符串得到的结果

ES6中的新工具

数组、对象的扩展

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。


console.log(Array.from('foo'));

//Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));

//Array [2, 4, 6]

Object.assign ：一个向前合并对象的方法： Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象，Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。


var obj1 = {a : 1,b : 2,c : 3}

var obj2 = {d : 1,e : 2,f : 3}

            var obj3 = Object.assign(obj1,obj2);

//将obj2复制到obj1后面，obj1成为一个新的对象数组，obj2不变

            console.log(obj3 , obj1)

Object.keys(obj) ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用。


let {keys, values, entries} = Object;

let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {

  console.log(key);

  // 'a', 'b', 'c'

}

for (let value of values(obj)) {

  console.log(value);

  // 1, 2, 3

}

for (let [key, value] of entries(obj)) {

  console.log([key, value]);

  // ['a', 1], ['b', 2], ['c', 3]

}

Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。


[1, 2, [3, 4]].flat()

// [1, 2, 3, 4]

//flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。若参数为Infinity，则无论多少嵌套都会被拉伸为一维数组

[1, 2, [3, [4, 5]]].flat()

// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)

// [1, 2, 3, 4, 5]

Symbol(name) 的作用是在key值相同的情况下使用assign方法不会导致前面的被覆盖掉


var obj1={

    [Symbol("name")]:"111";

}

var obj2={

    [Symbol("name")]:"222";

}

Object.assign(obj1,obj2);

console.log(obj1);

//{Symbol(name): "111", Symbol(name): "222"}

//如果不用Symbol方法，结果输出是 {Symbol(name): "222"}

//作为字典量存在切不会导致key值重复;

const size = {

    XS : Symbol("XS"),

    S : Symbol("S")

}

let close  = {

    [size.XS] : 1

}

console.log(close);

//{Symbol(XS): 1}

console.log(close[size.XS]);

//1

Set、Map的作用


//Set自动去重

var set = new Set([1,2,3,4,5,5,6,7,8]);  // key值 和 value值一样;

console.log(set);

var set = new Set([1,2,3,4,5,5,6,7,8]);

// 增删改查;

set.add(123);

console.log(set);

//Set(9) {1, 2, 3, 4, 5, 6, 7, 8, 123}

//Set可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for(let value of set.entries()){

    console.log(value);

    //[1, 1][2, 2][3, 3][4, 4][5, 5][6, 6][7, 7][8, 8][123, 123]

}

set.delete(3);//删除key为3的元素

set.clear();//情空数组

var map = new Map();

map.set("key","value");

console.log(map.keys());

console.log(map.values());

//Map可以将key和value独立的取出
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,445评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,889评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,047评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,760评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,745评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,638评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,011评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,669评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,923评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,406评论 4赞 320
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,995评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2赞 342