【ES6】新增语法

南山啊

已于 2022-05-12 19:36:05 修改

阅读量1.5k

点赞数 2

文章标签： javascript 前端 typescript

于 2022-05-12 19:11:52 首次发布

本文链接：https://blog.csdn.net/weixin_49487698/article/details/124737718

版权

一、定义变量

var–> let：定义变量

const：定义常量
在这里插入图片描述

note：

var的预解析：在声明var之前输出，是undefined，而在声明let、const之前输出，直接报错

var不局限于某一个块，可声明多次，let、const只能在相对应的块中使用，只可声明一次

二、箭头函数

：对原来函数表达式的简写（省略function）

note：1、当箭头函数只有一个形参时，可以不写（）

2、当箭头函数只有一句话时，可以不写{}，并且返回值是 { } 里面的内容

3、普通函数有arguments，箭头函数没有

4、箭头函数this是window

var obj = {
fn : function(){console.log(this)},
fn2: ()=>{ console.log(this) }
}

obj.fn() //因为fn函数被obj调用，所以this是obj
obj.fn2() //因为是箭头函数，内部没有this，所以this是window

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7YyYPsT-1652353826130)(C:\Users\z’y’y\AppData\Local\Temp\WeChat Files\df02f77327d3474faa502fa2c18b355.png)]

三、ES6的解构赋值

1、快速从对象或数组中获取成员

2、两种：数组的解构赋值

对象的解构赋值

let [a,b] = ['hello','world']   //数组解构赋值

var obj = {name:'jack',age:18}
var {name：myname} = obj    //等价于   let name = obj.name
console.log(myname)        //对象解构 'jack'

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CTIaDxbB-1652353826131)(C:\Users\z’y’y\AppData\Local\Temp\WeChat Files\87df4f142c0bee976bcf92f5c2dbe74.png)]

四、模板字符串

1、区别：

1、可以换行书写，并保留换行

2、可以解析变量

var age = 18
var s1 = `我今年${age}岁`   //字符串解析

五、展开运算符

1、…可以展开【】和 { } 中的内容

var arr = [1,2,3]
console.log[...arr]  //等价于 console.log(1,2,3)

2、给函数传递参数

var arr = [1,2,3]
var max = Math.max(1,2,3)
//用...
var max = Math.max(...arr)

3、展开对象（相同成员要注意覆盖问题）

var obj = {name:'jack',age:18}
var obj2 = {
gender:'男'，
...obj
}
//展开也要放在合适的位置

4、Array的扩展方法Array.from()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arrayLike = {
            "0": 1,
            "1": 2,
            "length": 2
        }
        let newAry = Array.from(arrayLike, item => item * 2);
        console.log(newAry);
    </script>
</body>

</html>

5、Array的扩展方法Array.find()

//会得到数组成员和索引
ary.find((item,index) => item.id ==2)

6、Array的扩展方法Array.findIndex()

//找出第一个符合条件的数组成员的位置,无返回-1
let index = ary.findIndex((value,index) => value>9 );
console.log(index)

7、Array的扩展方法Array.include()

//返回布尔值
let flag = ary.include(2)

六、类语法

1、构造函数，实例对象

//创建一个实例对象
function Person (name,age){
    //当有参数传进来时，this.name=name说明函数里面的name可以等于传入的参数
    this.name = name,
    this.age = age
}

//在Person原型上添加一个方法
//原型上的方法，目的就是为了给实例用
Person.prototype.sayhi = function(){
    console.log('hi')
}

var p1 = new Person('jack',18)
console.log(p1)
p1.sayhi()

//可以不和new连用单独使用构造函数，但如果创建一个实例对像，必须有new
Person('rose',16)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-URy6SGa9-1652353826131)(C:\Users\z’y’y\AppData\Local\Temp\WeChat Files\10dcbc30937e2aa60777182f90014e3.png)]

2、类的书写

//类书写不和new连用会报错
class Person{
    constructor(name,age){
        this.name = name,
        this.age = age
    }
    //方法可以直接在后面书写
    sayhi(){
        console.log('hi')
    }
    //使用静态属性和方法, 要加static
    static a = 100,
    static go(){
        console.log('running')
    }
}
var p1 = new Person('rose',16)

七、String的扩展方法

startsWith():表示参数字符串是否在原字符串的头部，返回布尔值

endsWith():表示参数字符串是否在原字符串的尾部，返回布尔值

repeat():表示将原字符串重复n次，返回一个新字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let str = 'hello world!'
        let flag1 = str.startsWith('hello')   //true
        let flag2 = str.endsWith('!')        //true
        let str1 = str.repeat(2)
        console.log(str1);     //hello world!hello world!
    </script>
</body>

</html>

南山啊

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【ES6】新增语法

一、定义变量var–> let：定义变量 const：定义常量note：var的预解析：在声明var之前输出，是undefined，而在声明let、const之前输出，直接报错var不局限于某一个块，可声明多次，let、const只能在相对应的块中使用，只可声明一次二、箭头函数：对原来函数表达式的简写（省略function）note：1、当箭头函数只有一个形参时，可以不写（） 2、当箭头函数只有一句话时，可以不写{}，并且返回值是 { } 里面的内容 3、普通函数
复制链接

扫一扫