数组/对象/字符串方法练习

最新推荐文章于 2022-10-18 16:27:39 发布
最新推荐文章于 2022-10-18 16:27:39 发布
阅读量174 收藏
点赞数
分类专栏： 面试题重点总结 2021 文章标签： 数据结构 js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingqise5193/article/details/108735283
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组方法练习</title>
</head>
<body>
  <script>
    // 数组插入删除操作
    // push：尾部添加元素，返回数组长度，改变原数组
    // pop：尾部删除元素，返回删除的元素，改变原数组
    // shift：头部删除元素，返回删除的元素，改变原数组
    // unshift：头部插入元素，返回数组长度，改变原数组
    // splice: 任意位置插入删除元素 
      // splice(index, num, a, b, ……) index位置索引，num删除元素个数, a,b 插入的元素，返回删除元素组成的数组，改变原数组

    let arr = [1,2,3,4]
    // splice实现push
    arr.splice(arr.length,0,5)
    // splice实现pop
    arr.splice(arr.length-1,1)
    // splice实现shift
    arr.splice(0,1)
    // splice实现unshift
    arr.splice(0,0,1)
    
    arr.slice() //返回一个和arr一样的数组，不改变原数组
    arr.slice(1)
    arr.slice(1,2)
  </script>

  <script>
    // 数组排序
    // reverse 改变原数组
    let c1 = [-2,-1,0,1,2]
    c1.reverse()
    // sort 返回为整数则交换位置
    c1.sort((a, b) => a - b) // 从小到大
    c1.sort((a, b) => b - a) // 从大到小
    c1.sort((a, b) => 0.5 - Math.random()) // 乱序
    let c2 = ['Ann', 'ana', 'Bob', 'John']
    c2.sort((a,b) => a.toLowerCase() - b.toLowerCase()) // 忽略字母大小写
    c2.sort() // 按ASCII值排序
  </script>

  <script>
    // 查找
    let d1 = [1,0,1,4,5]
    d1.indexOf('1') //不存在返回-1，存在返回第一个的索引
    d1.find(item => item === 1) // 不存在返回undefined，存在返回查找的值
    d1.findIndex(item => item === 1) // 不存在返回-1，存在返回索引
    d1.includes(1) //返回true or false
    d1.some(item => item === 1) // 返回true or false
  </script>

  <script>
    // 数组合并 concat不改变原数组
    let a = [1,2,3]
    let b = [4,5,6]
    // 遍历法
    b.forEach(item => {
      a.push(item)
    })
    // concat方法
    let c = a.concat(b)
    // 展开符
    let d = [...a, ...b]
  </script>

  <script>
    // 数组遍历方法,均不改变原数组
    let a1 = [1,2,3]
    // for
    for(let i = 0; i < a1.length; i++) {
      console.log(a1[i])
    }
    // for of
    for(let item of a1) {
      console.log(item)
    }
    //forEach 对数组中的每一项运行给定函数。这个方法没有返回值,不能被break
    a1.forEach((item, index, arr) => {
      // item: 当前项
      // index：当前索引
      // arr: 当前遍历的数组，即a1
      console.log(arr)
    })
    // every 对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。
    a1.every(item => item > 0)
    // some 对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。
    a1.some(item => item < 0)
    // filter 对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
    a1.filter(item => item >2)
    // map 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
    a1.map(item => item*2)
    // reduce 迭代数组的所有项，然后构建一个最终返回的值
    // 前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。
    // 第二个参数为初始值，如果没有该参数，数组为空则出错
    a1.reduce((pre, cur, index, arr) => pre+cur, 0)

    // keys/values/entries 索引/值/[索引,值] 数组
    Object.keys(a1)
    Object.values(a1)
    Object.entries(a1)
  </script>

  <script>
    // 数组求和/最大值/最小值
    let e = [1,2,3,5,9,1]
    Math.min(...e)
    Math.max(...e)
    let e2 = e.reduce((pre, cur) => pre + cur, 0)
  </script>

  <script>
    // 去重/扁平化/拷贝/填充
    let f = [1,2,3,5,9,1]
    Array.prototype.removeDuplic = function () {
			let obj = {};
      let newArr = this.filter(item => {
          if(!obj[item]) {
            obj[item] = 1
            return true
          }else{
            return false
          }
        })
      return newArr
		}
    let f1 = f.removeDuplic()
    
    let g = [[1,2,3], 7, [1,2]]
    let g1 = g.flat(Infinity) //不改变原数组
    Array.prototype.myFlat = function () {
      let a = this
      while(a.some(item => Array.isArray(item))) {
        a = [].concat(...a)
      }
      return a
    }
    let g2 = g.myFlat()

    let h = [[1,2,3], 7, [1,2]]
    let h1 = h // 浅拷贝，地址的引用
    // 深拷贝
    function myCopy(arr) {
      let temp = Array.isArray(arr) ? [] : {}
      for(let prop in arr) {
        if (arr.hasOwnProperty(prop)) {
          if(typeof arr[prop] === 'object') {
            temp[prop] = myCopy(arr[prop])
          }else{
            temp[prop] = arr[prop]
          }
        }
      }
      return temp
    }
    let h2 = myCopy(h)

    let p = new Array(5).fill(0)
  </script>

  <script>
    // 其他
    // 类数组、含iterator接口的对象(set/map)转为数组
    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    }
    let arr2 = Array.from(arrayLike)
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对象方法练习</title>
</head>
<body>
  <script>
    // 增删改查
    let obj = {}
    obj.name = 'liaof'
    obj.age = 19
    delete obj.age
    obj.name = 'panf'
  </script>

  <script>
    // 对象合并
    let a = { name: 'liaof' }
    let b = { age: '16' }
    // 遍历法
    for(let prop in b) {
      a[prop] = b[prop]
    }
    // 展开符
    let d = {...a, ...b}
    // Object.assign 浅拷贝，复制可枚举属性
    let c = Object.assign({}, a, b)
  </script>

  <script>
    // 对象遍历方法
    let a1 = { 
      name: 'liaof',
      age: 19
    }
    // in 继承和自身的属性
    for(let i in a1) {
      // 自身的属性
      if(a1.hasOwnProperty(i)){
        console.log(a1[i])
      }
    }
    // keys/values/entries 索引/值/[索引,值] 数组 自身的属性
    Object.keys(a1)
    Object.values(a1)
    Object.entries(a1)
  </script>

  <script>
    // 对象拷贝
    let b1 = { 
      name: 'liaof',
      age: {
        time: 1,
        num: 2
      }
    }
    // 浅拷贝
    let b2 = b1
    let b3 = Object.assign(b1)
    let b4 = {...b1}
    // 深拷贝
    function deepClone(obj) {
      let temp = Array.isArray(obj) ? [] : {}
      for(let i in obj) {
        if(obj.hasOwnProperty(i)) {
          if(typeof obj[i] === 'object') {
            temp[i] = deepClone(obj[i])
          }else{
            temp[i] = obj[i]
          }
        }
      }
      return temp
    }
    let b5 = deepClone(b1)
    let b6 = JSON.parse(JSON.stringify(b1))
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字符串方法练习</title>
</head>
<body>
  <script>
    // 特点：字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量
    let a = 'iamliaof'
    a = a + 'is'
    a[1]  // 访问字符串某个位置的字符,但不能通过此方式修改字符串中的某个字符
  </script>

  <script>
    // 查找
    let d1 = 'heisaboy'
    d1.indexOf('1') //不存在返回-1，存在返回第一个的索引
    d1.includes('a') //返回true or false
    d1.startsWith('he') //返回true or false
    d1.endsWith('oy') //返回true or false
  </script>

  <script>
    // 字符串遍历
    let a1 = 'heisaboy'
    // for
    for(let i = 0; i < a1.length; i++) {
      console.log(a1[i])
    }
    // for of
    for(let item of a1) {
      console.log(item)
    }
  </script>

  <script>
    // 字符串转为数组
    let e = 'sheisagirl'
    let e3 = e.split('')
  </script>

  <script>
    // 填充/去除空格
    // 如果某个字符串不够指定长度，会在头部或尾部补全
    '1'.padStart(10, '0') // "0000000001"
    '12'.padStart(10, '0') // "0000000012"
    '123456'.padEnd(10, '0') // "0000123456"

    // 返回新字符串，不改变原字符串
    const s = '  abc  '
    s.trim() // "abc"
    s.trimStart() // "abc  "
    s.trimEnd() // "  abc"

    // 字符串截取
    const s = '12345'
    s.slice()
    s.slice(1)
    s.slice(1,2)

    s.substring(1) // 和slice一样

    s.substr(1,5) // 第二个参数指长度
  </script>
</body>
</html>

 

bingqise5193
关注
专栏目录
【77】JS数组 函数 对象 算法练习题(小白思路VS更优思路)
倏存的博客
05-04 989
常见算法练习题
对象数组的使用习题
m0_49047994的博客
11-21 217
使用面向对象方法编程习题：有三个学生，每个学生有姓名、两门成绩； 计算每个学生的平均分、总分、并按总分降序输出 问题分析：学生类： 属性： private String name; private double score1; private double score2; 方法：构造函数中赋值： public Student(String name, double score1, double score2) { this.name = name; this.score1 = score1; this.sc
js数组、对象、函数基础知识点及数组类习题练习
anmodiao5169的博客
08-24 790
1、数组：数组是使用单独的变量名来存储一系列的值。 （1）定义方式：3种 ------------------空数组 var a=new Array()；var a=[ ]；var a=new Array(数组长度) -------------------有数值的组：var a=new Array("1","2","3")；var a=[1,2,3]; ----------...
方法，数组，类和对象代码题练习
weixin_45894950的博客
11-24 114
import java.util.Arrays; import java.util.Scanner; public class TestDemo { //给定一个整型数组, 将所有的偶数放在前半部分, // 将所有的奇数放在数组后半部分 public static void transform(int[] array) { int left = 0; int right = array.length - 1; while (left
简单的解析Json格式字符串练习
weixin_34124577的博客
04-11 289
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
11-27
接下来，我们讨论数组对象Array。创建数组有多种方式，包括直接初始化、使用构造函数等。 1. `concat(...items)`：合并多个数组或值，返回一个新的数组，原数组不变。例如，`[1, 2, 3].concat(4, 5)`返回`[1, 2, 3,...
js代码-日常练习数组和字符串
07-16
在JavaScript编程语言中，数组和字符串是两种非常基础且重要的数据结构。...总的来说，熟练掌握JavaScript中的数组和字符串操作是成为优秀开发者的基础，不断地练习和理解这些概念，将有助于提升编程技能。
js代码-3.23:第一次练习，选择冒泡排序，// 数组中元素出现的次数，// 一个字符串里面某个字母出现的次数，转RMB。
07-16
在JavaScript中，我们可以使用`toLocaleString()`方法，它可以将数字格式化为特定地区习惯的字符串。对于人民币，我们需要添加相应的千位分隔符和人民币符号。 ```javascript function toRMB(num) { return '￥' +...
JS练习字符串，日期，数组，自定义对象练习
最新发布
07-12
JS练习字符串，日期，数组，自定义对象练习
JSON复习
liying123466的博客
11-18 208
JSON是一种数据交换格式（1）语法 1.JSON是基于js的对象字面量中表示属性的语法，但是并不包含与js对象字面量的函数相关的部分 2.JSON的名称-值对中，名称始终用双引号包裹 3.JSON的名称-值对中，值可以是字符串，数字，布尔值，null，对象或者是数组 4.JSON中名称-值对列表被花括号包裹起来 5.在JSON中，多个名称-值对使用逗号分隔 6.JSON的媒类型是
前端中的简单编程题-数组（1）
weixin_34128411的博客
02-26 231
一边学习前端，一边通过博客的形式自己总结一些东西，当然也希望帮助一些和我一样开始学前端的小伙伴。 如果出现错误，请在评论中指出，我也好自己纠正自己的错误 author： thomaszhou 1. 判断是否是数组类型 2. 复制数组（slice和concat） 3. 类数组（NodeList）转数组（Array），函数参数arguments转数组 4. 重复n个字符 5. 创建 N x...
前端笔记之JavaScript（五）关于数组和字符串那点事
weixin_30851409的博客
04-20 116
一、数组 1.1数组概念 数组(array)是一个有序的数据集合。说白了，数组就是一组数。数组内部可以存放一个或多个单独的数据，整体组成数组。 定义数组最简单的方式：数组字面量。 数组的字面量“[]”。习惯将数组赋值给一个变量。 var arr = []; var arr = [1,2,3,4,5,6,7,888,999,666]; arr[5] = 88...
JSON_CJSON练习题
weixin_43274899的博客
10-18 714
华清远见JSON练习题
变量
Mr.魏
09-14 347
目标 变量的作用 定义变量 认识数据类型 一. 变量的作用 举例体验：我们去图书馆读书，怎么样快速找到自己想要的书籍呢？是不是管理员提前将书放到固定位置，并把这个位置进行了编号，我们只需要在图书馆中按照这个编号查找指定的位置就能找到想要的书籍。 这个编号其实就是把书籍存放的书架位置起了一个名字，方便后期查找和使用。 程序中，数据都是临时存储在内存中，为了更快速的查找或使用这个数据，通常我们把这个数据在内存中存储之后定义一个名称，这个名称就是变量。 变量就是一个存储数据的的时候当前数据所在的内存地址
JS---数组对象基础练习题
weixin_41086056的博客
02-28 3162
1.随机点名系统 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt; var is
JS数组、对象、字符串常用方法汇总
陈坚泓的博客
09-26 7316
JS数组常用方法总结前言操作数据功能快捷键插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 2018年的中秋过后,开始从事前端,2018年9月25日实习到2019年5月15日...............
数组的length属性（Array）
pan_542pan11的博客
10-04 5340
数组的length属性： 数组的项数保存在其length属性中，这个属性始终会返回0或更大的值。 数组最后一项的索引始终是length-1 const colors = ["red","blue","green"]; const names =[]; /* alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框。 */ alert(colors.length); //3 alert(names.length); //0 数组的length属性不是只读的。 const colors
HTTP
热门推荐
幼儿园老大的博客
12-09 1万+
HTTP是什么 超文本传输协议，是一个客户端和服务器间通信必须遵守的协议，可用于传输文本、图片、音频视频等。 建立在tcp/IP协议之上，依靠 IP协议实现寻址和路由、TCP 协议实现可靠数据传输、DNS 协议实现域名查找、SSL/TLS 协议实现安全通信。此外，还有一些协议依赖于 HTTP，例如 WebSocket 等。 URI URI 主要有三个基本的部分构成：协议名：即访问该资源应当使用的协议，在这里是“http”；主机名：即互联网上主机的标记，可以是域名或 IP 地址，在这里是“nginx.or
vue-router基础回顾与原理
幼儿园老大的博客
10-31 768
vue-router基础 可以参考这篇: https://www.jianshu.com/p/4c5c99abb864 这边还是提两点面试容易考的，可以从上面这篇文字找到答案： $route 和 $router 的区别 router.push() router.replace() 路由守卫 详细可以参考这篇：https://blog.csdn.net/bingqise5193/article/details/102959259 常用的守卫有 beforeEach 常用于进入页面前判断用户是否有权限
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值