js学习第day15

ES5及ES6

ES5新增的内容

严格模式: “use strict”

 //表示当前使用的是严格模式 在没有书写声明严格模式的时候 就是怪异模式
"use strict"
//1.变量名必须有修饰符 不写会报错
//2.this指向 在函数内不能指向window
//3.函数内部的arguments数组的形参和实参不同步
//4.不允许在非函数的代码块里声明函数
//5.禁止八进制

数组加强

indexOf() 根据对应的内容找下标 从前到后 找不到返回-1

lastlndexOf 根据对应的呢内容找到下标 从后往前 找不到返回-1

高阶函数

forEach 遍历 没有返回值

map 遍历 有返回值

some 有符合的就返回boolean

every 所有都是 就返回boolean

reduce 计算 reduceRight左右到左 reduceLeft从由左到右

filter 过滤(遍历每个结果找到返回条件的结果,返回结果)

bind方法 apply方法 call方法

var obj = {
            name: 'jack'
        }
        //属于window
        var name = '傻狗'
        function seyHello() {
            //this指向window
            console.log(this. name);
        }
        seyHello()//打印傻狗
        //bind方法 属于object方法
        //把seyHello 绑定给obj seyHello里面的this 指向对应的obj
        var bindFunction = seyHello.bind(obj)
        //bind的返回值也是一个对象
        bindFunction()//打印jack
        //绑定this指向 自动执行方法 第一个参数指定的this指向 第二个参数为函数需要的参数 它传递的参数为数组
        seyHello.apply(obj, null)
        //第一个参数指向的this指向 第二个参数为函数需要的参数 传递的参数为一个个的元素
        seyHello.call(obj, null)

ES6

修饰符

 // let关键词和const关键词是用于弥补var关键词的不足使我们的代码更加规范

        //声明的是伪全局作用域(变量提升)不满足于作用域链的规则
        var a = 10;

        //声明的是一个块作用域 let关键词在对应的区间不能重复声明
        let b = 11;
        for (var i = 0; i < 10; i++) {

        }
        for (var i = 0; i < 10; i++) {

        }
        //const 修饰为常量 常量是不可变得 不允许二次赋值 定义的时候必须要赋值 声明的也是一个快作用域 常量定义时建议全大写
        const c = 20;

String新增的方法

//String 新增内容
        var str = "abc"
        //是否包含 返回boolean类型的值
        console.log(str.includes("a"));

        //是否是开始 以及是否是结束
        //里面的字符 开始位置(默认为第一个下标为0)
        console.log(str.startsWith("a", 1));
        //里面的字符 结束位置(默认为0 就是最后一个)
        console.log(str.endsWith("a", 1));
        //平铺 repeat 传入的参数为平铺的次数 返回的是一个新的字符串
        console.log(str.repeat(3));

Array新增

//将伪数组转为数值
        //nodeList htmlCollection arguments
        var liList = document.querySelectorAll("li") //返回的是一个伪数组
        //使用Array.from 转为数组
        var array = Array.from(liList)
        array.forEach(function (v) {
            console.log(v);
        })
        //Array.of 将对应的一组数据转为数组
        var numbers = Array.of(1, 2, 3, 4)
        console.log(numbers);
        //高阶函数 以函数为参数的函数叫做高阶函数
        var arr = ["a", "b", "c", "d"]
        //find 查找 返回的是一个元素
        var str = arr.find(function (v, index, array) {
            // if(v=="a"){
            //     return v
            // }
            return v == "a"
        })
        console.log(str);
        //findIndex 查询下标
        var index = arr.findIndex(function (v, index, array) {
            return v == "a"
        })
        console.log(index);

数组增强

// for in 遍历对象
        var obj = {
            name: "傻狗",
            age: 18,
        }
        var arr = [1, 2, 3, 4]
        for (var item in obj) {
            console.log(item);//获取的key
            console.log(obj[item]);//获取的value
        }
        // for of 遍历数组
        for (var item of arr) {//遍历的是值
            console.log(item);
        }
        //对于没有迭代器的对象是不能使用for of来遍历
        //属于对象的方法 object
        //entries() 获取对象的所有的Key 包含键和值   
        for(var item of Object.entries(obj)){
            console.log(item);
        }
        //keys() 获取所有键
        for(var item of Object.keys(obj)){
            console.log(item);
        }
        //values()获取所有的赋值对象(数组)
        for(var item of Object.values(obj)){
            console.log(item);
        }

function加强

对应默认参数 (支持没有传值的时候 有一个默认值)

//后续在封装函数的时候 一定要用到的
        function sayHi(name='hello',age=18){
            console.log(name);
            console.log(age);
        }
        //如果你没有传值他会有个默认值
        sayHi()
        sayHi("傻狗",38)

箭头函数 (匿名函数) ==>

• 只有一个数可以省略 ()

• 只有一行代码 可以省略 {}

• 只有一行代码 需要返回值 可以省略 {}

• 箭头函数里面没有this

• 箭头函数没有arguments

总结: 箭头函数里面的this指向父元素的this

//后续在封装函数的时候 一定要用到的
        function sayHi(name = 'hello', age = 18) {
            console.log(name);
            console.log(age);
        }
        //如果你没有传值他会有个默认值
        sayHi()
        sayHi("傻狗", 38)

        //匿名函数
        var sayHello = function () {
            console.log("嘟嘟嘟");
        }
        //调用匿名函数对象
        sayHello()
        //es6诞生了箭头函数 简化匿名函数的声明
        var sayHello = () => {
            console.log("憨批");
        }
        //name 是形参 一个形参的情况下可以省略()
        var sayHello = name => {

        }
        //当你的函数只有语句代码 {} 也可以被省略
        var sayHello = name => console.log(name);
        sayHello("shag")
        //当你需要return数据的时候 你当前代码只有一句的情况 return也可以被省略
        var sayHello = name => name//返回了对应的name
        console.log(sayHello("shag01"));
        //箭头函数没有this 没有arguments数组 找他的父元素里面的this
        var obj = {
            name: "傻狗",
            //this 这个外面的this和对应的箭头函数里面的this是同一指向
            // say: () => (console.log(this))
            say: () => {
                setTimeout(() => {//属于window
                    console.log(this);
                })
            }
        }
        obj.say()

        document.querySelector("button").onclick = () => {
            console.log(this);
        }

扩展运算符

打开对应的数组…

console.log(...[1,2,3])

解构 (对象)

打开对应的对象(解除构造) 提取到里面的值

var obj = {
            name: "傻狗",
            age: 18
        }
        console.log(obj.name);
        console.log(obj.age);

        //es6新增了对应的解构 减少对应的obj
        var { name, age } = obj //称为解构
        //得到对应的name 去比对obj里面是否存在相同的一个属性叫name 如果没有返回undefined 有就返回对应的值
        console.log(name);
        console.log(age);
        var { message } = {
            message: "傻狗",
            message1: "大傻狗"
        }
        console.log(message);

课后练习

// 练习
// 1, 使用reduce求数组中所有元素的乘积， var arr = [2, 3, 4, 5, 6, 7]
// var arr = [2, 3, 4, 5, 6, 7]
// var sum = arr.reduce(function(pre,cur){
// return pre * cur
// })
// console.log(sum);

    var arr = [2, 3, 4, 5, 6, 7]
    var result = arr.reduce((preV, curV) => (preV * curV))
    console.log(result);
    // 2, 使用reduce求数组中的最大数, var arr = [2, 4, 6, 3, 7, 8, 5]
    // var arr = [2, 4, 6, 3, 7, 8, 5]
    // var max =arr.reduce(function(pre,cur){
    //     return pre>cur?pre:cur
    // })
    // console.log(max);
    var arr = [2, 4, 6, 3, 7, 8, 5]
    var max = arr.reduce((preV, currentV) => {
        return Math.max(preV, currentV)
    })
    console.log(max);
    // 3, 使用indexOf完成数组去重.
    var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5]
    var eq = []
    for (let i = 0; i < arr.length; i++) {
        if (eq.indexOf(arr[i]) == -1) {
            eq.push(arr[i])
        }

    }
    console.log(eq);
    // 4. 使用for - of求5!(1 * 2 * 3 * 4 * 5)
    var arr = [1 * 2 * 3 * 4 * 5];
    var sum = 1
    for (let item of arr) {
        sum *= item
    }
    console.log(sum);
    // 5, 使用for - of求1! + 2! + 3! + 4! + 5!
    var arr = [1, 2, 3, 4, 5]
    var sum = 1
    var count = 0
    for (let item of arr) {
        sum *= item
        count += sum
    }
    console.log(count);
    // 6, 使用for - of求数组的最大数和最小数
    var arr = [1, 2, 3, 4, 5]
    var max = -Infinity
    for (let v of arr) {
        max = Math.max(max, v)
    }
    console.log(max);

    var arr = [1, 2, 3, 4, 5]
    var min = Infinity
    for (let v of arr) {
        min = Math.min(min, v)
    }
    console.log(min);
    // 7, 掌握数组去重的多种方法.
    //Set自动去重
    var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5]
    let set = new Set(arr)
    arr = Array.from(set)//将set转为array类型
    console.log(arr);
    // 8, 掌握各种循环的使用
    // for(let i = 0;i<10;i++){}//基础for循环
    // for (const key in object) {}//for in 遍历对象的index为键
    // for (const iterator of object) {}//for of 遍历数组的值
    // while (condition) {}
    // do while
    // array.forEach(element => {});