ES6新语法

最新推荐文章于 2023-05-05 17:58:55 发布

原创最新推荐文章于 2023-05-05 17:58:55 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

nodejs 专栏收录该内容

18 篇文章

订阅专栏

博客介绍了ES6中变量、字符串和函数的相关扩展。变量有解构赋值；字符串扩展包括includes、startsWith、endsWidth方法及模板字符串；函数扩展有默认值、参数解构赋值、rest参数和扩展参数（箭头函数）等内容。

变量的解构赋值

// 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参数代替