美文网首页
快来一起学习es6吧

快来一起学习es6吧

作者: 不忘初心_d | 来源:发表于2019-05-10 14:34 被阅读0次

     没事的时候学习一下吧。欢迎加我技术交流QQ群 :811956471

    该笔记会持续更新..........

    特别注意:JavaScript 引擎会将  "{} "理解成一个代码块,千万不要将大括号写在行首;

    有时候不得不写在首行,变通的做法是 :({})

    一  . let 和 const 命令:


     let 总结:不存在变量提升,不允许重复声明,相同作用域不存在变量覆盖,具有块级作用域特性,只在let命令所在的代码块内有效。

                      let 声明的变量不属于window

                      eg:function f1() {let n = 5;if (true) {let n = 10;}console.log(n); // 5}

      const总结:const声明一个只读的常量。一旦声明,常量的值就不能改变,旦声明变量,就必须立即初始化,不能留到以后赋值。

    二、变量的解构赋值


      (一)数组的解构赋值 

        1. 可以这样给变量赋值:let [a, b, c] = [1, 2, 3]; console.log(a)//1

        2.    ... 运算符  let [a,...b] = [1, 2, 3];console.log(a)//1;console.log(b)//[2,3]

        3.  可以给默认值:let [a=1,b]=[,2]      console.log(a)//1  console.log(b)//2    

        4.默认值可以是一个表达式、可以是引用解构赋值的其他变量

      (给默认值需要注意:如果有默认值且赋值是 null、undefined时:则赋值无效,还是默认值;原因:ES6 内部使用严格相等运算符(===),判断一个位        置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效)

    (二)对象的解构赋值 

        1.  let{foo,bar}={foo:'aaa',bar:'bbb'};  foo // "aaa"   ;  bar // "bbb"  //对象的属性没有次序,变量必须与属性同名,才能取到正确的值

        2.如果变量名和属性名不一致:let { first: f, last: l } = { first: 'hello', last: 'world' }; console.log(f) //hello console.log(l)//world

        3.对象解构实际是简写:let{foo:baz}={foo:'aaa',bar:'bbb'};console.log(foo) //undefined console.log(baz) //aaa  ; foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。

    (三)字符串的解构赋值 

    1.let [a,b,...c]="hellow"   ;   console.log(a) //h ;   console.log(b) //e ; console.log(c) //剩余的

    2. 可以将length属性解构赋值:let {length:lng}="hellow" //console.log(lng)  // 6

    (四)解构赋值的其他用途

    1.交换变量的值:let x=1;let y=2;  [x,y]=[y,x]

    2.从函数返回多个值:

    (1)返回一个数组: function re_fn(){ return [1,2,3] } let [a,b,c]=re_fn(); console.log(a)

    (1)返回一个对象: function re_fn(){ return {a:1,b:2,c:3} } let {a,b,c}=re_fn(); console.log(a)

    三、字符串的扩展


    (一)字符串的遍历器接口

    1. for....of  语法:for (let str of 'abc') { console.log(str) //  a b  c } ;

    2.模板字符串语法:之接动态创建html 只能用 + 配合引号去使用 ,现在:`模板${变量}内容`  支持换行  模板字符串中嵌入变量,需要将变量名写在${}之中;这个变量可以是一个函数

    四、字符串新增方法


    1、includes(), startsWith(), endsWith()

    includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

    let str ="hellow";

    console.log( str.includes("p") )// false  str中是否包含 p字符串

    console.log( str.startsWith("h") )// true  str中是否是h开头的

    console.log( str.endsWith("w") )// true  str中是否是h结尾的

    //以上方法 都支持第二个参数:即 查找匹配的位置

    //endsWith的行为与其他两个方法有所不同,其他查找下标从0开始 ,endsWith从1开始

    console.log( str.startsWith("o",4) ) //表示从第5位开始搜索

    console.log( str.endsWith("o",5) ) //表示从第5位开始搜索  

        2、repeat   将一个字符串重复N 次

    'x'.repeat(3) // "xxx"    ;     'hello'.repeat(2) // "hellohello"     ;    'na'.repeat(0) // ""

    3、padStart(),padEnd()   

    字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全

    console.log(str.padStart(4,"abc") )//astr

    console.log(str.padStart(10,"abc") )//abcabcastr

    console.log(str.padEnd(4,"abc") )//stra

    4、trimStart(),trimEnd()

    trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串

    五、数值的扩展


    1、Number.isNaN()

    用来检查一个值是否为NaN。 如果参数类型不是NaN,Number.isNaN一律返回false。

    注意:console.log(Number.isNaN("asds"))//新方法 false  ;console.log(isNaN("asds"))// 传统方法 true,个人理解:Number.isNaN 在判断的时候 属于绝对判断 即 ===关系  而 isNaN方法是 ==关系  存在隐式转换number后再判断类型的一个过程

    2、Number.isInteger() 用来判断一个数值是否为整数。

    注意: console.log(Number.isInteger(3.0000000000000002) )// true    数的精度达到了小数点后16个位,导致最后的那个2被丢弃。也就是说小数点15后以后的会自动舍弃掉;对数据精度的要求较高,不建议使用Number.isInteger()判断一个数值是否为整数。

    3、Math.trunc方法用于去除一个数的小数部分,返回整数部分。 同:parseInt

    六、箭头函数


    注意:箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。只有多去使用才能发现它的好处哦

    下面是几个基础例子: 原文地址

    var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ];

    elements.map(function(element) { return element.length; }); // 返回数组:[8, 6, 7, 9]

    // 上面的普通函数可以改写成如下的箭头函数 elements.map((element) => { return element.length; }); // [8, 6, 7, 9]

    // 当箭头函数只有一个参数时,可以省略参数的圆括号 elements.map(element => { return element.length; }); // [8, 6, 7, 9]

    // 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号 elements.map(element => element.length); // [8, 6, 7, 9]

    // 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构 // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名, // 可以替换成任意合法的变量名 elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

    七、数组的扩展


    (一)、扩展运算符   ...

     1、序列化数组: console.log(...[1,2,3])   // 1 2 3   

    2、用于函数调用:

     function add(x, y) {return x + y;}const numbers = [4, 38];console.log(add(...numbers)) // 42

    3.代替 apply方法:

    (1).将数组转为函数的参数:

    // ES5 的写法function f(x, y, z) { // ...}

    var args = [0, 1, 2];

    f.apply(null, args);

    // ES6的写法

    function f(x, y, z) { // ...}let args = [0, 1, 2];f(...args);

    (2).应用Math.max方法,简化求出一个数组最大元素的写法:

    es5 方法: console.log(Math.max.apply(null, [14, 3, 77]))  //  77

    es6方法:console.log(Math.max(14, 3, 77))  //77 ;或者:Math.max(...[14, 3, 77])

    (3).将一个数组添加到另一个数组的末尾:

     let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];     arr1.push(...arr2);

    4.扩展运算符在数组中的运用:

    (1)复制数组:const a1 = [1, 2];    const a2 = [...a1];

    (2)合并数组:onst arr1 = ['a', 'b'];const arr2 = ['c'];   [...arr1, ...arr2]   //["a", "b", "c"]

    (二)、Array.from()   将一个类数组对象或者可遍历对象转换成一个真正的数组、将字符串转换成数组

      1、 要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

    (1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

    (2)该类数组对象的属性名必须为数值型或字符串型的数字

    let array = { 0: 'name', 1: 'age', 2: 'sex', 3: ['user1','user2','user3'], 'length': 4}

    let arr = Array.from(array )console.log(arr) // ['name','age','sex',['user1','user2','user3']]

    如果对象名不是数字类型:

    let array = { 'name': 'name', 'age': 'age', 'sex': 'sex', 'length': 4}

    let arr = Array.from(array )console.log(arr) // [ undefined, undefined, undefined ]

    2.将字符串转换为数组:

    let str = 'world!';       console.log(Array.from(str))               //       ["w", "o", "r", "l", "d", "!"]

    (三)、Array.of()  用于将一组值,转换为数组

    console.log(Array.of(3, 11, 8)) // [3, 11, 8]  ;   console.log(Array.of(3, 8).length) // 2

    (四)、 find() 和 findIndex()

    (1)、find:let arr = [1, 4, -5, 10] let eq= arr.find((n) =>n>0) console.log(eq)  //1 

    该方法用于从数组第一位开始查找符合回调函数条件的成员,未找到时返回undefined

    回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:被查找的数组

    (2)、findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

    (五) fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去

    ['a', 'b', 'c'].fill(7)   //  [7, 7, 7]              new Array(3).fill(7)   // [7, 7, 7]

    可以接受三个参数:

    ['a', 'b', 'c','e','d'].fill("要填充的内容","填充开始位置下标从0开始","填充结束位置下标从1开始")

    感觉有点像:splice(2,1,'aa'); 第几处开始 替换个数 替换内容

    (六)数组实例的 entries(),keys() 和 values() 只能用于  for( item of  数组.方法){}

    eg: let arr = ["a", "b", "c"];

    1.entries()方法循环数组的每个键值对

    for (let item of arr.entries()) { console.log(item)//[0, "a"] [1, "b"] [2, "c"] }

    2.keys()方法循环数组的每个键

    for (let item of arr.keys()) { console.log(item)//0,1,2 }

    3.values()方法循环数组的每个值  也是默认情况

    for (let item of arr.values()) { console.log(item)//a,b,c }

    (七)数组实例的 includes() 返回布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似   判断是否包含给定值时 是绝对等于关系,即值的类型必须一样才返回true

    eg:  let arr = ["a", "b", "c",0];

    console.log(arr.includes(88)) //false

    console.log(arr.includes("0")) //false

    console.log(arr.includes(0)) //true    类型必须一样才返回true

    console.log(arr.includes("a")) //true

    注意:该方法还有第二个参数:arr.includes("a",开始查找的位置--从0开始)

    (八)数组实例的 flat(),flatMap() 

    (1)flat() 方法将多维数组变成一维数组 ,flat(参数) ,该参数表示展开数组层级数量 默认1

    (2)flatMap()  eg:  [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]

    八、对象的扩展


    (一)对象的简洁表达

    (1)、属性的简写

    const foo='bar';

    const baz={foo}; console.log(baz)// {foo: "bar"}      等同于const baz={foo:foo};

    (2)、对象内部函数的简写(省略  :function 这部分)

    const o={method(){return"Hello!";}};      同 :const o={method:function(){return"Hello!";}};

    用于函数的返回值:

    let birth = '2000/01/01';

    const Person = {

    name: '张三',

    birth,

    hello() {

    return "我的名字是", this.name

    }

    };

    console.log(Person.hello())//张三

    (二)属性表达式

    let obj={};

    let b="B";

    obj['a' + b] = 123;

    console.log(obj)

    es6 支持属性名是一个表达式,动态参数值

    九、对象新增方法


    1、Object.is()   比较两个值是否相等:类似于  ===  绝对等于的关系;

    2、合并对象:如果合并对象中有属性名相同的、则后者会覆盖前者

    let obj1 = { a: "a" } ;    let obj2 = { b: "B", a: "A" } console.log(Object.assign(obj1,obj2))//Object {a: "A", b: "B"}

    3、遍历对象方法:Object.keys(),Object.values(),Object.entries()   用法同数组方法

    (1)、Object.keys(),遍历对象的键名,返回一个数组:

     var obja = { foo: 'bar', baz: 42 }; 

     console.log("keys:", Object.keys(obja))            //keys: (2) ["foo", "baz"]

    (2)、Object.values(),遍历对象的键值,返回一个数组:

    var obja = { foo: 'bar', baz: 42 };   

    console.log("values:", Object.values(obja))//values: (2) ["bar", 42]

    注意:如果键名是数值,遍历后的键值是按照 键名从小到大的顺序排列

    var obja = { "3": 'bar', "5": 42, "1": 410 };

    console.log("values:", Object.values(obja)) // [410, "bar", 42]

    (3)、Object.entries(),遍历对象的键值对,返回一个数组:

    var obja = { foo: 'bar', baz: 42 };   

    console.log("entries:", Object.entries(obja)) //entries: 0: (2) ["foo", "bar"] 1: (2) ["baz", 42]

    (4)、还可以用 for...of..语法进行遍历对象

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

    遍历键名:for (let key of Object.keys(obj)) { console.log(key); // 'a', 'b', 'c' }

    遍历键值:for (let values of Object.values(obj)) { console.log(values); // 1, 2, 3 }

    遍历键值对:for (let entries of Object.entries(obj)) { console.log(entries); // ['a', 1], ['b', 2], ['c', 3] } 

    (5)、Object.fromEntries()   Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象

    let arr1 = ['foo', 'bar']; let arr2 = ['baz', 42];

    let arr = Object.fromEntries([ arr1, arr2 ])            console.log(arr)//{foo: "bar", baz: 42}

    十、Set 和 Map 数据结构   

    (一)Set

    注意:set 是一种全新的数据结构  类似数组缺不是数组  可用Array.from 转换成数组;Set 结构的键名就是键值(两者是同一个值)

    const items = new Set([1, 2, 3, 4, 5]); 

    const array = Array.from(items); console.log(array) 

    1、可以用来数组去重:返回一个对象和一个数组

    let arr=[1,1,2,3,4,3]              let s=new Set(arr)                   console.log(s)//1, 2, 3, 4

    2、用于对字符串的去重:返回一个对象和一个数组

    let srt="aabacadd"     let s=new Set(srt)      console.log(Array.from(s))//["a", "b", "c","d"]

    3、add(value):添加某个值,返回 Set 结构本身;   delete(value):删除某个值,返回一个布尔值,表示删除是否成功。has(value):返回一个布尔值,表示该值是否为Set的成员。clear():清除所有成员,没有返回值。

    let srt = "aabc";                         let s = new Set(srt);

    console.log(s.add("a"). add("d") )//"a", "b", "c" , "d"

    console.log(s.add("d"))//"a", "b", "c", "d"

    console.log(s.has("m"))//false

    console.log(s.has("a"))//true

    console.log(s.delete("a"))//true

    console.log(s.clear())//undefined

    4、可以用   keys(),values(),entries() 进行遍历 

    由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致

    5、可以用 forEach()遍历

    let set = new Set([1, 4, 9]);

    set.forEach((value, key) => console.log(key + ' : ' + value)) // 1 : 1 4 : 4 9 : 9

    6、Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)

    let a = new Set([1, 2, 3]);                    let b = new Set([4, 3, 2]); 

    // 并集

    let union = new Set([...a, ...b]);console.log(union)

    // 交集

    let intersect = new Set([...a].filter(x => b.has(x)));console.log(intersect)

    // 差集

    let difference = new Set([...a].filter(x => !b.has(x)));  console.log(difference)

    (一)Map:解决传统对象中只能用字符串作为键名的问题;转换数组可用:...和Array.from(),可以转换成数组、对象、json

    set(key, value) 添加 ;  get(key)获取;has(key);判断里面是否有某值,返回布尔值;size:返回数据长度;delete() 删除某个值;lear方法清除所有成员,没有返回值


    const m = new Map();             const o = { p: 'Hello World' };

    首先定义一个 m为Mpa()对象类型和一个传统的o对象,接着:

    m.set(o, 'content')

    console.log(m) //    key: {p: "Hello World"} value: "content"

    也可以set进去一个数组:

    const m = new Map(); const o = [ ['name', '张三'], ['title', 'Author'] ] m.set(o) console.log(m)

    1.前面会覆盖后面:键名不可以重复,值可以重复

    const map = new Map();

    map.set(1,'aaa').set(2,'bbb').set(2,'ccc');

    console.log(map)  //0: {1 => "aaa"}   1: {2 => "ccc"}

    相关文章

      网友评论

          本文标题:快来一起学习es6吧

          本文链接:https://www.haomeiwen.com/subject/afraoqtx.html