JavaScript入门到精通二十九（内置构造函数（Object、Array））

内置构造函数

字符串、数值、布尔等基本类型也都有专门的构造函数，这些称为包装类型

引用类型：Object, Array, RegExp, Date等

包装类型：String, Number, Boolean等

1.Object

Object是内置的构造函数，用于创建普通对象

三个常用静态方法（静态方法就是只有构造函数Object可以调用的）

Object.keys静态方法获取对象中所有属性(键)

Object.values静态方法获取对象中所有属性值

javascript 复制代码

<body>
  <script>
    const obj = {
      name:'张三',
      age:18
    }
    const arr = Object.keys(obj)
    console.log(arr);
    const values = Object.values(obj)
    console.log(values);
  </script>
</body>

返回的是一个数组

Object. assign静态方法常用于对象拷贝

经常使用的场景给对象添加属性

javascript 复制代码

<body>
  <script>
    const obj1 = {
      name:'张三',
      age:18
    }
    const obj2 = {}
    Object.assign(obj2,obj1)
    console.log('obj2拷贝后的结果:',obj2);
  </script>
</body>

javascript 复制代码

<body>
  <script>
    const obj = {
      name:'张三',
      age:18
    }
    Object.assign(obj,{sex:'男'})
    console.log(obj);
  </script>
</body>

2.Array

Array是内置的构造函数，用于创建数组

创建数组建议使用字面量创建，不用Array构造函数创建

javascript 复制代码

<body>
  <script>
    //使用字面量创建数组
    const arr1 = [1,2,3,4,5]
    console.log(arr1);
    //使用Array构造函数创建数组
    const arr2 = new Array(1,2,3,4,5)
    console.log(arr2);
  </script>
</body>

数组常见实例方法:

forEach 遍历数组不返回数组，经常用于查找遍历数组元素

filter 过滤数组返回新数组，返回的是筛选满足条件的数组元素

map 迭代数组返回新数组，返回的是处理之后的数组元素，想要使用返回的新数组

reduce 累计器 返回累计处理的结果，经常用于求和等

jion 拼接数组数组元素拼接为字符串，返回字符串

find 查找元素 返回符合测试条件的第一个数组元素值，没有则返回undefined

every 检测 数组检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返

回true，否则返回false

reduce语法：

javascript 复制代码

arr.reduce(function(上一次值，当前值){}，初始值)

没有初始值：

javascript 复制代码

<body>
  <script>
    const arr = [1,2,3,4,5]
    const total = arr.reduce(function(pre,current){
      return pre+current
    },0) // 0是初始值可以省略,current是当前值
       console.log(total);
  </script>
</body>

有初始值：

javascript 复制代码

<body>
  <script>
    const arr = [1,2,3,4,5]
    const total = arr.reduce(function(pre,current){
      return pre+current
    },100)
    console.log(total);
  </script>
</body>

箭头函数写法：

javascript 复制代码

<body>
  <script>
    const arr = [1,2,3,4,5]
    const total = arr.reduce((pre,current)=>pre+current,100)
    console.log(total);
  </script>
</body>

reduce执行过程：

1.如果没有起始值，则上一次值以数组的第一个数组元素的值

2.每一次循环，把返回值给做为下一次循环的上一次值

3.如果有起始值，则起始值做为上一次值

find语法：

javascript 复制代码

<body>
  <script>
    const arr = ['张三','李四','王五']
    const res = arr.find(function(item){
      return item === '李四'
    })
    console.log(res);
  </script>
</body>

在数组中取出满足条件的对象元素（很常用）

javascript 复制代码

<body>
  <script>
    const arr = [
      {
        name:'张三',
        age:18
      },
      {
        name:'李四',
        age:19
      }
    ]
    const res = arr.find(item=>item.name==='张三')
    console.log(res);
  </script>
</body>

every语法：

javascript 复制代码

<body>
  <script>
    const arr = [10,20,30]
    const res = arr.every(item => item >= 10)
    console.log(res); // true
  </script>
</body>

案例：

const spec = {size: '40cm*40cm', color: '黑色')

请将size和color里面的值拼接为字符串之后，写到div标签里面

javascript 复制代码

<body>
  <div></div>
  <script>
    const spec = { size: '40cm*40cm', color: '黑色' }
    const res = Object.values(spec).join('/')
    document.querySelector('div').innerHTML = res
  </script>
</body>

伪数组转换为真数组：

Array.from()

javascript 复制代码

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const lis = document.querySelectorAll('ul li')
    const list = Array.from(lis)
    list.pop()
    console.log(list);
  </script>
</body>

3.String

字符串常用方法:

1.查找类

str.indexOf(searchStr, start?)：返回下标，找不到 -1
str.lastIndexOf(searchStr, start?)：从后往前找
str.includes(searchStr, start?)：是否包含，返回布尔（ES6）
str.startsWith(searchStr, start?)：是否以 xxx 开头
str.endsWith(searchStr, length?)：是否以 xxx 结尾

2.截取字符串

slice(start, end?)：支持负数，推荐
substring(start, end?)：不支持负数，负数当 0
substr(start, length?)：已废弃，不要用

3.大小写转换

toUpperCase()：全部大写
toLowerCase()：全部小写

4.替换

replace(old, new)：只替换第一个匹配
replaceAll(old, new)：全部替换

5.分割、拼接

split(分隔符)：字符串 → 数组

concat(str1, str2...)：拼接字符串，等价 +

6.去空格

trim()：去掉首尾空格（最常用）
trimStart() / trimLeft()：去掉开头空格
trimEnd() / trimRight()：去掉结尾空格

javascript 复制代码

<body>
  <script>
    // 把字符串转换为数组
    const str1 = 'hello,张三'
    const arr1 = str1.split(',')
    console.log(arr1);
    const str2 = '2026-10-26'
    const arr2 = str2.split('-')
    console.log(arr2);
  </script>
</body>

javascript 复制代码

<body>
  <script>
    // 字符串的截取
    const str = '今天是星期一，小雨'
    const str1 = str.substring(5)
    const str2 = str.substring(0,5)
    console.log(str1);
    console.log(str2);
  </script>
</body>