js基础--运算符--内置类--其他补充

一、运算符

1.1一元运算符:只有一个运算符 + - / *

// eg:+1

let num = 1

// 二元运算 1 + 2 一个运算符两边有两个运算元 '+' 此时称之为二元运算符 

num += 1  // 相当于num = num + 1 更简单的写法是num++

num -= 1  // 同上述

 1.2三元运算符

let num1 = 66

let num2 =  55

num1 > num2 ? num1 : num2   // num1是否大于num2 如果大于就返回num1 小于就返回num2

// 等同于if语句 但是相比于if它的写法更为简单 可以看做是一种语法糖的写法 语法糖就是一种简便的写法 代码更为简洁

if (num1 > num2) {

return num1

} else {

return num2

}

二、包装类型String解释以及方法

一个奇怪的现象:

let str = 'Hello World'

console.log(str.length) // 11

 对象有方法可以调用 但是一个字符串可以调用方法,这是为什么呢?因为浏览器为了使得原始数据类型可以获取属性和调用方法,对其封装了对应的包装类型.

常见的包装类型有：String、Number、Boolean、Symbol、BigInt类型 在这里只是简单介绍String类型

// 1.可以通过 let str = new String('Hello World')来创建 但是大可不必

// 2.let str = 'Hello World'

// 为什么呢?

默认情况，当我们调用一个原始类型的属性或者方法时，会进行如下操作：
根据原始值，创建一个原始类型对应的包装类型对象；
调用对应的属性或者方法，返回一个新的值；
创建的包装类对象被销毁；
通常JavaScript引擎会进行很多的优化，它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用。

2.1常见的方法

// 1.获取字符串长度:

let str = 'Hello World'

console.log(str.length) 

// 2.截取字符串

let str = 'Hello World'

str.slice(index,length)  // 参数一:开始截取的位置 字符串索引从0开始 参数二:截取到的索引                                          位置但是接不到最后一位

// 3.includes()用来判断包含关系

str.includes('Hello')

// 4.拼接字符串

str.concat('abc', 'cba')   // Hello Worldabccba

// 5.把所有的字符转换为大写

str.toUpperCase()  // HELLO WORLD

// 6.把所有的字符转换为小写

str.toUpperCase()  // hello world

// 7. replace替换字符串

str.replace('Helllo',''Hi)  //Hi World

其他方法参考文档

三、数组(Array)对象

3.1创建数组

// 1.以字面量的方式创建

let names = ['why', 'cobe', 'james', 'sarcy' ]

// 2.以类Array的方式创建

let arr1 = new Array('why', 'cobe', 'james', 'sarcy') 

// 3.通过索引访问数组

arr1[0]  // why

// 访问数组最后一个元素

arr[arr.lenght-1]

3.2基础方法

let names = ['why', 'cobe', 'james', 'sarcy' ]

// 1.在数组尾部添加和删除元素

names.push('tom', 'bob')    

names.pop('bob')

// 2.在数组的头部添加和删除元素

names.unshift('coder')

names.shift('cdr')

// 3.把字符串分割成为数组展示

names.join('-')  // 引号里面是分隔符

// 4.把数组分割成为字符串展示

names.spilt('-')  // 引号里面是分隔符

// 5.splice在任意位置添加删除替换元素  ---会修改原有的数组

// 参数一:从什么位置开始删除

// 参数二:删除元素的个数

// 参数三:要增加的元素

// 5.1.删除元素

names.splice(1, 2)

console.log(names)

// 5.2.新增元素

names.splice(1, 0, "why", "kobe")

console.log(names)

// 5.3.替换元素

names.splice(1, 2, "why", "kobe", "james")

console.log(names)

// 6.concat将多个数组拼接在一起

let names1 = ["abc", "cba"]

let names2 = ["nba", "mba"]

let names3 = ["why", "kobe"]

let var newNames2 = names1.concat(names2, names3)

console.log(newNames2)

// 7.slice截取字符串  ---不会修改原数组

 let names = ["abc", "cba", "nba", "mba", "why", "kobe"]

 let newNames = names.slice(2, 4)

 console.log(newNames)

// 8.查找索引  indexOf

let names = ["abc", "cba", "nba", "mba"]

// 可以找到, 返回对应的索引

// 没有找到, 返回-1

console.log(names.indexOf("nbb"))

3.3高阶方法

3.3.1forEach方法:遍历数组

let names = ["abc", "cba", "nba", "mba"]

names.forEach( item => console.log(item))

3.3.2map方法:映射

let nums = [11, 20, 55, 100, 88, 32]

let newNums = nums.map( item =>  return item * item)

console.log(newNums)

3.3.3filter方法:过滤

/把数组中的偶数取出来

let arr = [11, 20, 55, 100, 88, 32]

arr.filter(item => return item%2 === 0)

3.3.4reduce方法:

// 参数一:是一个回调函数 回调函数的参数一:上一次执行回调函数函数的结果,参数二:本次要计算的元素   参数二:初始值,表示第一次回调函数执行的计算结果  ,如果没有就把数组第一项的值作为初始值

let products = [

{ name: "鼠标", price: 88, count: 3 },

{ name: "键盘", price: 200, count: 2 },

{ name: "耳机", price: 9.9, count: 10 },

 ]

let totalPrice = products.reduce((preValue, item) => {

return preValue + item.price * item.count

}, 0)

console.log(totalPrice)

3.3.5find方法

let students = [

      { id: 100, name: "why", age: 18 },

      { id: 101, name: "kobe", age: 30 },

      { id: 102, name: "james", age: 25 },

      { id: 103, name: "why", age: 22 }

    ]

let stu = students.find(item => {

      if (item.id === 101) return true

})

console.log(stu)

四、Date对象

4.1常用方法

4.1.1获取想要的时间信息

let year = date.getFullYear() // 获取年

let month = date.getMonth() + 1  // 获取月

let day = date.getDate()  // 获取星期

let hour = date.getHours()  // 获取小时

let minute = date.getMinutes()  // 获取分钟

let second = date.getSeconds()  // 获取秒

// 也可以设置时间 set同上述方法

4.1.2 Date对象转换为时间戳

// 1.当前的时间戳

let timestamp1 = Date.now()

console.log(timestamp1)

// 2.将一个date对象转成时间戳

let date = new Date()

let timestamp1 = date.getTime()

// 3.将一个date对象转换为时间戳方法二

let date2 = new Date() 

let timestamp2 = date2.valueOf()

五、其他---定时器---简单的this指向

5.1延时器

// 格式 ：setTimeout(函数,要传的毫秒数)

setTimeout(()=>{

    console.log(1);

},2000)

5.2定时器

let num = 1 

     setInterval(() => {   

     num += 1        

     console.log(num);

},1000)

两者的区别是

延时器 格式： setTimeout(函数,执行的毫秒数),等毫秒数倒计时结束后 执行这个函数,永远只执行一次

定时器 格式： setInterval(函数,执行的毫秒数)  每倒计时执行这个毫秒数 再去执行函数

5.3简单的this指向

        // console.log(this); //   this:指向的意思  默认指向全局window

        function fn() {

            console.log(this); // window

        }

        // fn() // = window.fn()

        // var a = 1

        // console.log(a == window.a);

        // 函数里的this 谁调用他就指向谁

        //     function fn (){

        //         console.log(this); // obj

        //         let obj = { }

        //     }

        //    fn()  

        let obj = {

            a:1,

            b:1,

            c:1,

            fn: function () {

                console.log(this);

            }

        }

        obj.fn() // 指向obj这个对象

        const fn1 = ()=> {

            console.log(this); // window

        }

        fn1()

        let obj2  = {

            a:1,

            b:1,

            c:1,

            fn: ()=> {

             console.log(this,'obj2'); // obj2 / window

            }

        }

        obj2.fn()

总结：默认情况下 函数的指向 指向this  一般情况下 谁调用这个函数 this就指向谁

箭头函数 如果是在对象 他指向上层作用域 的this