【前端知识点总结】JavaScript 基础六

最新推荐文章于 2024-11-02 19:19:35 发布

疆子

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量131

点赞数 1

分类专栏：前端知识点总结文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/jiang_ziY/article/details/123130144

版权

前端知识点总结专栏收录该内容

31 篇文章 11 订阅

订阅专栏

复杂数据类型

3.对象类型

1.对象的作用:

一个变量存储多个数据

数组:有序存储 ( 下标0开始递增 ) 数据
对象:无序存储 ( 属性名和属性值一一对应,键值对 ) 数据
基本数据类型、数组和对象存储数据的优缺点

使用基本数据类型：需要使用多个变量
- 弊端： 代码冗余
- 好处： 代码阅读性高

      let name = 'ikun'
      let sex = '男'
      let age = 32

使用复杂数据类型：一个变量存储多个数据
- 弊端： 阅读性不高
- 好处： 一个变量存储多个数据

      let arr = ['ikun', '男', 32]

使用对象：一个变量存储多个数据 + 阅读性高

2.对象的语法

声明对象

语法 :
- 没有方法的对象: let 对象名 = { 属性名1:属性值1,属性2:属性值2......}
- 有方法的对象: let 对象名={ 属性名1:属性值1,方法名:函数....}
- 提示：如果对象中的属性值是函数对象，我们一般称之为对象方法

对象取值

语法 :
- 点语法(常用) : 对象名.属性名(对象里面是函数的话 对象名.方法名() 调用对象方法)
- 字符串语法 : 对象名['属性名'] , 调用对象方法 对象名['方法名']()
特点 :
- 属性名存在,获取属性值
- 属性名不存在,获取 undefined

      let person = {
        name: '张三',
        sex:'男',
        age: 32,
        hobby: ['吃饭', '睡觉', '打豆豆'],
        sayHi: function () {
          console.log('大家好，我是张三')
        }
      }

      console.log(person)
      //1.点语法获取属性值：  对象名.属性名
      /* 对象的属性是什么类型，取出来就可以使用这个类型对应的语法 */
      console.log( person.name )//'张三'
      console.log( person.age )//32
      console.log( person.hobby )//['吃饭', '睡觉', '打豆豆']
      console.log( person.hobby[0] )//吃饭
      
      person.sayHi()//调用对象方法

      //2.字符串语法    对象名['属性名']
      console.log( person['name'] )//'张三'
      console.log( person['hobby'][0] )//'吃饭'
      person['sayHi']()// '大家好，我是张三'
      
      //3. 属性名不存在，则获取undefined
      console.log(person.aaa)

对象赋值

语法 :
- 点语法(常用) : 对象名.属性名 = 值 (对象里面是函数的话 对象名.方法名()=值 调用对象方法)
- 字符串语法 : 对象名['属性名'] = 值 , 调用对象方法 对象名['方法名']() = 值
特点 :
- 属性名存在,修改属性值
- 属性名不存在,动态新增属性

      //1 属性名存在
      person.name = '坤坤'
      //2 属性名不存在
      person.hobby = '学习'
      console.log(person)

3.点语法和字符串语法区别

点语法和字符串语法在使用的时候没有区别，但是字符串语法支持变量的取值

      let age = 'sex'
      console.log(person.age) //32
      //这里'age'是字符串
      console.log(person['age']) //32
      //这里age是变量：这行代码不是取age字符串属性的值， 而是取age变量中存储的字符串属性值
      //person['sex']
      console.log(person[age]) //男

4.对象遍历

for-in循环
- for( let key in 对象名 ) { 对象名 [ key ] }
- 注意: 对象的遍历,用字符串取值

      for (let key in person) {
        console.log(key) //key是变量,存储属性名字符串  'name'  'age' 'sex' 'hobby'
        console.log(person.key) //undefined
        console.log(person['key']) //undefined
        console.log(person[key]) // 正确语法
      }

5.环境对象 this

谁调用这个函数, this 就指向谁 (和’我’ 一样谁说是谁)

6.内置对象常用方法介绍

1. Math 数学对象

Math.round() 四舍五入
Math.ceil() 向上取整
Math.floor() 向下取整
Math.PI π 3.1415926
Math.max(1,2,3)返回最大值3
Math.min(1,2,3)返回最小值1
Math.pow(x,y) 求x的y次方
Math.random() 随机数 0-1之间

2. Date 日期对象

获取实时时间 : let date = newDate()
- 获取年份 : date.getFullYear()
- 获取月份 : date.getMonth() 1-12月对应 0-11下标
- 获取日子 : date.getDate()
- 获取星期 : date.getDay() 星期天-星期六对应 0-6下标
- 获取小时 : date.getHours()
- 获取分钟 : date.getMinutes()
- 获取秒钟 : date.getSeconds()
转中文日期 : newDate().toLocaleString

      //2.转换日期格式
      console.log(date.toLocaleString()) //2021/11/11 下午3:55:00
      console.log(date.toLocaleDateString()) //日期  2021/11/11
      console.log(date.toLocaleTimeString()) //时间  下午3:55:50

创建自定义时间 : let myDate = newDate( yyyy-mm-dd hh: mm: ss)
获取时间戳 : 1970-今的毫秒 Date.now()

      //获取时间戳   1970年到现在的总毫秒数 (用于兼容时区)
      console.log(Date.now())//1636617725229
      console.log(new Date().getTime())//1636617725229

3. Array 数组对象

let arr = [ 10, 20, 30 ] = new Array( 10,20,30 )

join('|') 把数组每一个元素拼接成字符串
- ( ) 里面的参数就是分隔符

      console.log(arr.join('|')) //'10|20|30|40|50'
      console.log(arr.join()) //'10,20,30,40,50'
      console.log(arr.join('')) //'1020304050'

reveser( ) : 翻转数组 [ 10,20,30] [ 30,20,10 ]
数组排序 sort( )
- 数组名.sort( function( a,b) { return a-b //从小到大})
- 数组名.sort( function( a,b) { return b-a //从小到大})
- 如上参数为函数时称之为回调
数组去重 indexof( )
indexof( ) 方法,检测数据在不在数组中,存在返回下标 , 不存在返回 -1

      let arr2 = [20, 30, 60, 70, 80, 20, 30]
      console.log(arr2)
      //(1)先声明一个空数组存储去重后的数组
      let newArr = []
      //(2)遍历数组
      for (let i = 0; i < arr2.length; i++) {
        //检查arr的元素在不在newArr中  
        if (newArr.indexOf( arr2[i] ) == -1) {//-1表示不在newArr中
          newArr.push( arr2[i] )
        }
      }

4. String 字符串对象

字符串和数组有点类似，有长度也可以通过下标来获取单个字符

长度 变量名.lenght 和数组一样使用

      let str = '前端爱你么么哒!'

      console.log(str.length) //8

indexof( ) 检查字符串在不在字符中

      //在：返回首字符下标  不在： -1
      console.log(str.indexOf('前端')) //4
      console.log(str.indexOf('后端')) //-1

replace 替换字符
- 语法: 变量名.replace( '旧字符' , '新字符')
- 如果删除某个字符串只需替换为空字符串即可

      // 替换
      console.log(str.replace('前端', '后端')) //后端爱你么么哒!
      // 删除
      console.log(str.replace('前端', '')) //爱你么么哒!

切割字符串 split( ) 得到一个数组
- 语法 : 字符串.split('分隔符') 以指定分隔符将字符串隔成几个部分，放入数组中

      let str1 = 'https://juejin.cn'
      let res1 = str1.split('//') //['https:', 'juejin.cn']
      console.log(res1)
      let res2 = str1.split('.')
      console.log(res2) //['https://juejin', 'cn']

substr( ) 截取字符串 变量名.substr( 起始下标, 数量)

console.log(str.substr(2, 3)) //'爱你么' 从2下标开始往后截取3个字

转换大小写

toLocaleUpperCase() 转换大写
toLocaleLowerCase() 转换小写

      console.log( 'sdfgshjSJGFJKskfhs'.toLocaleUpperCase() )//大写  SDFGSHJSJGFJKSKFHS
      console.log( 'sdfgshjSJGFJKskfhs'.toLocaleLowerCase() )//小写  sdfgshjsjgfjkskfhs