ES6新语法

    xiaoxiao2022-07-13  156

    变量的解构赋值

    // ES6之前多变量复制 // var a = 1,b = 2,c = 3; // console.log(a, b, c) // ES6变量赋值 // var [a, b, c] = [1,2,3]; // console.log(a, b, c) // var [e, f, g] = [4,5,6] // console.log(e, f, g) // let [h,i,j] = [,666,] // undefined 666 undefined // console.log(h,i,j) // let [a=123,b,c] = [,666,] // console.log(a,b,c) // 123 666 undefined // 对象解构赋值 // let {a,b} = {a : "hello",b : "world"}; // console.log(a,b) // hello world // 对象属性别名(如果有了别名,那么原来的名字就无效了) // let {a:aa,b} = {a : "hello",b : "world"}; // console.log(aa,b) // 对象的解构赋值指定默认值 // let {a:aa="hello",b} = {b : "world"}; // console.log(aa,b) // hello world // 字符串的结构赋值(拆分:如果变量不够后面会直接省掉) // let [a,b,c,d,e] = 'hello'; // console.log(a,b,c,d,e) // h e l l o // let {length} = "hello" // console.log(length) // 5

    字符串相关扩展

    字符串相关扩展

    ​ includes(); 判断字符串中是否包含指定的字符串(有的话返回True,没有的话返回false

    ​ 参数一是匹配的字符串;参数二是第几个开始匹配)

    ​ startsWith(); 判断字符串是否以特定的字符串开始

    ​ endsWidth(); 判断字符串是否以特定的字符串结尾

    ​ 模板字符串:反引号表示模板,模板中的内容可以格式,通过${}方式填充数据

    // includes() // console.log("hello world".includes("world")) // true // console.log("hello world".includes("world",6)) // true // startsWith() let url = 'admin/index/' console.log(url.startsWith("admin")) let url1 = 'home/login/' console.log(url1.endsWith("login/")) // 模板字符串 let obj = { name : "jim", age : '12', gender : 'male' } //传统的模板(无格式) let tag = '<div><span>'+obj.name+'</span><span>'+obj.age+'</span><span>'+obj.gender+'</span></div>' console.log(tag) // ES6新的模板字符串(有格式的):反引号表示模板,模板中的内容可以格式,通过${}方式填充数据 let new_tag = ` <div> <span>${obj.name}</span> <span>${obj.age}</span> <span>${obj.gender}</span> </div>` console.log(new_tag)

    函数相关扩展

    函数扩展

    ​ 1、函数默认值

    ​ 2、参数解构赋值

    ​ 3、rest参数

    ​ 4、…扩展参数(箭头函数)

    // 默认值参数 // 传统的 // function fn(param){ // let p = param || 'hello'; // console.log(p); // } // fn(); // hello // fn("world") // world // ES6新的 // function fn(param = "hello"){ // console.log(param); // } // fn() // hello // fn("world") // world // 参数的解构赋值 // function fn(uname='jim',age=12){ // console.log(uname,age) // } // fn(); // fn("tom",17) // // 解构赋值的用法(当你参数传的是对象时,在调用是也需加入{}去调用,或者在参数部分加上={}) // function func({uname='jerry',age=10}={}){ // console.log(uname,age); // } // func() // rest参数(剩余参数) // function fn(a,b,...param){ // console.log(a); // console.log(b); // console.log(param) // } // fn(1,2,3,4,5,6) // param会接收剩余参数,以列表的形式 // function func(a,b,c,d,e){ // console.log(a+b+c+d+e) // } // let arr = [1,2,3,4,5,6] // func(...arr) // 15 // 合并数组 // let arr1 = [1,2,3] // let arr2 = [4,5,6] // let arr3 = [...arr1,...arr2]; // console.log(arr3) // 箭头函数 // function fn(){ // console.log("hello world!") // } // fn() // 常规调用方式 // // 箭头函数的简单实例(箭头后面的为函数体) // let func=() => console.log("hello world!") // func() // ***带参数的箭头函数(带一个参数) // 等效于小面的箭头函数 // function fn(v){ // return v // } // let func = v => v // let res = func(5) // console.log(res) // 带参数的箭头函数(多个参数) // let fn = (a,b) => console.log(a,b) // fn(6,7) // 带参数的箭头函数(多个参数),且函数体还有参数的(这种情况后面必须用花括号括起来) // let fn = (a,b) => {let c=1; console.log(a+b+c)} // fn(2,3) // 函数体内的箭头函数 // 传统的 // let arr = [1,2,3] // arr.forEach(function(element,index){ // console.log(element,index) // }) // 使用箭头函数 // let arr1 = [4,5,6] // arr1.forEach((element,index)=>{ // console.log(element,index); // }) // 箭头函数的注意事项 // 1、箭头函数中this取决于函数定义,而不是调用 // function foo(){ // // console.log(this.num); // 100 // setTimeout(()=>{ // // 使用call调用foo是,这里的this其实就是call的第一个参数 // console.log(this.num); // },1000) // } // foo.call({num:100}) //2、箭头函数不可以new // let foo = () => {this.num = 123}; // new foo() //报错 //3、箭头函数不可以使用arguments获取参数列表,可以使用rest参数代替
    最新回复(0)