欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6新语法

程序员文章站 2022-07-16 21:54:00
...

变量的解构赋值

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

上一篇: es6中类的使用

下一篇: ES6中的类