ES6新增方法

作者: 图恩分类: 编程开发阅读: 521发布时间： 2022-02-19 06:31:53

ES6发布于2015年，增加了重要的新特性（包括类和模块语法）。这些新特性把javaScript从一门脚本语言转变成一门适合大规模软件工程的严肃、通用的语言。
主要介绍：es6新增的变量声明方式，es6新增的数组方法,字符串模板,箭头函数 =>,解构赋值，class类，for of循环和新增的字符串方法

一、ES6新增的变量声明方式：

let 关键字用来声明变量（类似于旧javaScript中的var声明）但是使用let声明的变量有以下几个特点 ↓
1、不存在变量声明提升
2、存在块级作用域
3、存在暂时性死区
4、不允许重复声明
for(作用域A){作用域B} 循环的应用；

块级作用域：什么是块级作用域呢，任何一对花括号（这个：{ }），在花括号内里面使用let定义所有变量在花括号外部都是不可见的，这个我们称之为块级作用域。

const关键字用来声明常量，其使用规则除了声明之后不能修改之外，其他特征和let一样 ↓

const声明必须初始化，而let不用
const定义常量的值不能再通过赋值修改，也不能再次声明

        //错误写法：
        const color ;
        color = 'red';
        //正确写法
        const color = 'red';

const的本质：const定义的变量并非是常量，并非不可变。不允许被改变的是地址，不是变量，使用const定义对象或者是数组时，其实是可变。

        const cars = ["book", "cat", "watch"];//创建常量数组
        cars[0] = 'hello'
        console.log(cars)

const.png

但是：我们不能对常量数值进行赋值，会报错

        const cars = ["book", "cat", "watch"];//创建常量数组
        cars = ["a", "b", "c"];

二、ES6新增的数组方法

indexof(val，index) 参数1是我们要寻找的项，参数2是我们起始寻找项的索引号

Array.indexof(要查找的数组元素,起始位置)；默认查找的是数组元素第一次在数组中出现的位置

let arr = ['a' ,'b', 'c', 'd'];
arr.indexof('c',1);
//这里要查找c，从下标为1的元素开始查找

forEach(function(val，index){ })对数组进行循环遍历，这个方法没有返回值

Array.forEach(function(参数1，参数2){ })参数1表示数组元素，参数2表示数组元素下标（索引）

let arr = ['a' ,'b', 'c', 'd'];
arr.forEach(function(val,index){
        console.log(val,index)    
})

filter(callback)功能上遍历和过滤，返回符合条件的元素，filter在循环的时候会判定一下是true还是false，是true才会返回。

Array.filter(function(参数1,参数2){ })参数1主要是数组元素，参数2是数组下标，
过滤用于在数据里面筛选需要的数据的返回一个新的数组

let arr = ['20', '30', '40', '50', '60']
        let res = arr.filter(function (val, index) {
            return val > 30            
        })
        console.log(res)
// => 返回大于30的数组元素 到 新数组到res

map(callback)map可以改变当前循环的值，返回一个新的被改变过值之后的数组map需return），一般用来处理需要修改某一个数组的值。映射

Array.map(function(数组元素，数组下标){}) 映射读取数据，会把需要的数据给咱们放到一个新的数组里面

let info = [{
                name: '张三',
                age: 18,
                email: '127788@qq.com'
            },{
                name: '李思思',
                age: 20,
                email: '66898@qq.com'
            },{
                name: '二狗子',
                age: 40,
                email: '1999788@qq.com'
            }]
        let res = info.map(function(item){
            //把需要的数据挨个取出来放进一个新数组里面给咱们返回
            return item.name
        })
        console.log(res)

some()数组中有一个数组元素满足条件，就返回true

Array.some(function(数组元素,数组下标));有一个元素满足条件，剩下的就不会执行

let arr = ['20', '30', '40', '50', '60'];
let res = arr.some(function(val,index){
      return val >= 40  //true，40满足条件，剩下的不会执行
      return val > 60  //false,没有大于60的数组元素
})
console.log(res)

every()数组中所有数组元素满足条件，就返回true

Array.every(function(数组元素,数组下标));
方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果有一个不符合就返回false

let arr = ['20', '30', '40', '50', '60'];
        let res = arr.every(function (val, index) {
            // return val > 30  //false,不是所有数组元素都满足条件
            return val >= 20  //true，数组所有元素都满足条件
        })
        console.log(res)

reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

Array.reduce(function(参数1,参数2){}),参数1是第一个数组元素，参数2是剩下的数组元素

let arr = [20, 30, 40, 50, 60];
        let res = arr.reduce(function (firstItem, item) {
            // console.log(firstItem)
            console.log(item)  //剩下的数组元素
            return firstItem + item
        })
        console.log(res)  //数组元素的和 200

reduceRight()同上 ↑ reduce()，区别是从右到左

Array.reduceRight(function(参数1,参数2){}),参数1是数组最后一个数组元素，参数2是剩下的数组元素

let arr = [20, 30, 40, 50, 60];
        let res = arr.reduceRight(function (lastItem, item) {
            // console.log(lastItem)
            console.log(item)
            return lastItem+ item
        })
        console.log(res)

三、ES6新增的字符串模板

当我们需要输出一段话的时候
旧的写法：

let arr = ["小明", 30, 40, 50, 60];
        let point = arr[0]+"有" + 20 + "元" 
        console.log(point) //小明有20元

模板字符串的写法

let arr = ["小明", 30, 40, 50, 60];
        let point =`${arr[0]}有20元`
        console.log(point)

可能仅仅这样你还不能认识到他好用的地方,
1、模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：
2、通过使用模板字面量，您可以在字符串中同时使用单引号和双引号
3、模板字面量允许多行字符串
4、模板字面量提供了一种将变量和表达式插入字符串的简单方法。 ${...}
5、模板字面量允许字符串中的表达式： ${arr[2] * 10}$ {arr[1] * arr[1]}
6、HTML模板，可以识别标签

我们在页面中输出一个表格，里面字符串带表达式，等等

let arr = [20, 30, 40, 50, 60];
        let tab = `
            <table>
                <tr>
                    <td>"${arr[0]}"</td>
                    <td>'${arr[1] * arr[1]}'</td>
                    <td>${arr[2] * 10}</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
        </table>
        `
      document.write(tab)

四、箭头函数 =>

箭头函数是函数以往写法的一种简写形式，只能以赋值形式存在，箭头函数如果只有一个参数的情况下，可以直接写参数省略括号使用

使用箭头函数： var test = (x) =>x+2;

var fn = (a) =>{
             return a + 20
        }
            var res = fn(10)
        console.log(res)

箭头函数本身上面是没有this，它的this可以去上一层去找，正是因为箭头函数没有this绑定，所有箭头函数不能用于构造函数。
缺点1：箭头函数是不能new的，它的设计初衷就跟构造函数不太一样
缺点2：箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=>({id:3, val=20})

也是有好处的，需要：想让定时器或者延时器里面的this指向的也是对象，怎么办呢？
箭头函数本身上面是没有this，它的this可以去上一层去找

var obj = {
            left : 200,
            move : function(){
                setTimeout(function(){
                    console.log(this)   //这里this指向window，因为有延时器
                },1000)
            }
        }
        obj.move()

箭头函数 ↓

var obj = {
            left : 200,
            move : function(){
                setTimeout(() =>
                    console.log(this)   //箭头函数是没有this的，这里this 指向上一层
                ,1000)
            }
        }
        obj.move()

五、解构赋值

可以一次性赋值多个，而且解构比之前的写法上要清晰明了
它比之前的赋值方法更为灵活
变量解构
数组解构
对象解构

    let a = 20
        let b = 10
        let c = 30
let [a, b, c] = [20, 10, 30]    //可以写成这个，结果一样
        console.log(a, b, c)

可以嵌套

let [a, b, c] = [10, '嘿嘿', [10, 20, 30]]
        console.log(a, b, c)

let [a, [[b], c]] = [1, [[2], 3]];

对象解构

let obj = {
            a: 1,
            b: 2
        }
        console.log(obj.a, obj.b)   //老方法
        //注意点：解构的属性名和对象里面的属性名要一直
        let {a, b} = obj
        console.log(a, b)

六、class类

类是现实世界在计算机中的反映，它将数据和对这些数据的操作封装在一起（并没有开空间),主要是为了更好的实现面向对象编程,是ES6中新增的语法.
1、在类中声明方法的时候，千万不要给该方法加上function关键字
2、方法之间不要用逗号分隔，否则会报错
3、按照规范类名首字母应该大写

        class Factory{
            //构造器，指向是就是构造函数，在这个里面写的代码就像在构造函数内部写的代码一样
            constructor(name, water){
                this.name = name
                this.water = water
            }
            //class类内部直接写方法，默认会把方法给咱们放在原型上
            juicing(){
                console.log(this.name + '汁')
            }
        }
        let apple = new Factory('苹果', 200)
        let peach = new Factory('桃子', 500)
        console.log(apple.juicing == peach.juicing) //true

七、for of循环

for of遍历（遍历的是值，不是索引）
for of可以遍历字符串、数组也可以，但是只能取值
遍历数组（主要）

var s = "abc";
        for (let b of s) {
            console.log(b);  // "a"  "b"  "c"
        }

八、新增的字符串方法

repeat()重复功能（）参数表示重复多少遍

var str = '<p>hello</p>'
        var res = str.repeat(50)
        document.write(res) //参数重复了五十遍，相当于打印了五十次

includes()判定字符串中是否存在某个字符串

var str = '梦什么时候都可以做！学习的时间非常少的！'
        var res = str.includes('！')
        console.log(res)    //结果为true，存在！这个字符串

startsWith() endsWith() 也是判定字符串中是否存在某个字符串

var str = 'hello'
        //判断字符串里面字符是不是以那个字符开头的
        var res = str.startsWith('h') //以h开头，true
        var res = str.startsWith('e') //以e开头，false
        //判断字符串里面字符是不是以那个字符结尾的
        var res = str.endsWith('l') //以l结尾，false
        var res = str.endsWith('o') //以o结尾，true
        console.log(res)

padStart()用于头部补全 padEnd()用于尾部补全。

trimStart()和trimEnd()
trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

ES6新增的方法就介绍到这里了，谢谢大家！

本文章由javascript技术分享原创和收集