es6学习

es6学习网站：https://es6.ruanyifeng.com/#docs/object-methods

1.fill替换数组的某一块区域

例子1：数组中把3和4替换成8，

<script>
        let arr = [1, 2, 3, 4, 5]
        console.log(arr.fill(8, 2, 4))
    </script>

 

 2和4是索引（下标），从2开始到4结束

 

2.查找，filter和find

也可以用箭头函数来写

var ar = [1,2,3,5,1,6,7]
let z = ar.filter(item=>item>2)
console.log(z)// [3, 5, 6, 7]

 

...

<script>
        //过滤出3，filter满足条件所有值
        let arr = [1, 2, 3, 4, 5]
        let z = arr.filter(function(item){
            return item === 3
        })
        console.log(z) //[3]
    </script>
<script>
        //查找数字3，find满足条件第一个值
        let arr = [1, 2, 3, 4, 5]
        let z = arr.find(function(item){
            return item === 3
        })
        console.log(find) //3
    </script>
<script>
        //查找下标findIndex
        let arr = [1, 2, 3, 4, 5]
        let z = arr.findIndex(function(item){
            return item === 3
        })
        console.log(z) //2
    </script>

 

3.es6函数传参

<script>
        //es6写法参数默认值，有默认值的往后靠，没有默认值的往前写
        function f(x, y=7, z=42) {
            return x+y+z; //返回值
        }
        //调用的时候，y取默认值，只想改z，y可以直接写undefind默认还是7
        console.log(f(1,undefined,43)) //51
    </script>
<script>
        //es6写法参数默认值，有默认值的往后靠，没有默认值的往前写
        function f(x, y=7, z=x+y) {
            console.log(f.length);//取没有带默认值的参数个数 ，打印出来是1
            return x*10+z; //返回值
        }
        //调用的时候，y取默认值，只想改z，y可以直接写undefind默认还是7
        console.log(f(1,undefined,2)) //12
    </script>

 数组参数求和

<!-- 参数求和 -->
    <script>
        //...代表多个元素
        function sum(...nums) {
            let num = 0;
            nums.forEach(function (item) {
                num += item * 1 //乘以1代表字符串转换为数字
            })
            return num
        }
        console.log(sum(1, 2, 3)); //6
    </script>
第一个参数乘以2，参数求和
<!-- 第一个参数乘以2，参数求和 -->
    <script>
        //把第一个参数放在base变量中，剩余放在nums里
        function sum(base, ...nums) {
            let num = 0;
            nums.forEach(function (item) {
                num += item * 1 //乘以1代表字符串转换为数字
            })
            return base * 2 + num
        }
        console.log(sum(1, 2, 3)); //7
    </script>

 相反，知道具体参数情况下，求和方法

<!-- 知道具体参数情况下，求和方法 -->
    <script>
        function sum(x = 1, y = 2, z = 3) {
            return x + y + z;
        }
        let data = [4, 5, 6]
        console.log(sum(...data)); //15
    </script>

 ES6处理字符串逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>es6中字符串处理逻辑定义一个函数，返回想要的结果</title>
</head>
<body>

    <script>
        //第一种普通写法
        // const yuanjia = 20
        // const pifajia = 16
        // const type="retail"
        // let showTxt = ""
        // if(type === "retail"){
        //     showTxt = "您此次的购买单价是：" + yuanjia
        // }else{
        //     showTxt = "您此次的购买批发价是" + pifajia
        // }
        // console.log(showTxt);//您此次的购买单价是：20

        // 第二种写法定义一个函数,变量通过函数来返回的
        // type是模板给的
        function Price (strings,type){
            let s1 = strings[0];//代表“您此次的”
            const yuanjia = 20
            const pifajia = 16
            let showTxt = ""
            if(type === "retail"){
                showTxt = "购买单价是：" + yuanjia
            }else{
                showTxt = "购买批发价是" + pifajia
            }
            return `${s1}${showTxt}`

        }
        let showTxt = Price`您此次的${'retail'}`//您此次的是Price函数的常量，${'retail'}是Price函数的变量
        console.log(showTxt)//您此次的购买单价是：20
        
    </script>
    
</body>
</html>

 

 

posted @ 2020-03-14 17:45  前端HL  阅读(278)  评论(0)    收藏  举报