Javascript-数组与字符串

_Koreyoshi
59 阅读10分钟
数组
  • 数组是一个数据的集合
  • 把数据放在一个盒子里面，按照顺序排好
[1,2,3,'hello',true,false
  • 这就是一个数组，存储着一些数据的集合
数据类型分类

image.png

创建一个数组

  • 数组就是[ ]
  • 在[ ]存储各种数据，按照顺序依次排好
字面量创建一个数组

image.png

内置构造函数创建数组

image.png

数组的基本操作
length
  • 可读可写
  • 用处：清空数组
arrl.length=0
console.log(arr1)

索引：从0开始

var arr2 = ["a","b","c"]

console.log(arr2[0])

取出第零个为a，若取出第3个则为 undefined

冒泡排序

image.png 循环次数：长度减一

选择排序

image.png

从第0个开始以为是最小的然后进行标记，走一遍for循环之后发现在他之后有更小的就交换位置

数组的常用方法
  • push 后面追加元素 返回值 删除的元素
  • unshift 前面追加元素 返回值 长度
  • shift 前面删除元素 返回值 删除的这个元素
  • splice 改变数组长度

    • 删除

image.png arr.splice(1,1)第一个参数表示从第几个开始，第二个表示删除几个元素

效果如下

image.png 数组常用方法：

  1. concat:拼接

  2. join:把数组转换成字符串

<script>
    var arr = [1，2，3，4，5]
    document.write(arr.join("|"))
</script>

image.png 呈现效果如下

image.png 3. slice:截取字符串，不影响原数组

image.png

  • 两个参数：一个开始一个结束
  • 一个参数：从第二个开始（下标）到最后
  • 不传参数：相当于复制
  • 可以传负数
  1. indexOf：返回所查找的索引值
  • 返回-1：找不到
  • 可以查到变量在索引的位置
  1. lastiindexOf 倒着往前找
数组去重
  1. 方法一

image.png 2. 方法二：利用对象 把里面的内容当成k值

image.png 3. 方法三 new Set image.png image.png foreach 遍历
使用回调函数

map 映射 不影响原数组

filter 过滤

image.png return中成立返回arr2中

every 每一个

每一个都符合条件即为true，有一个不符合则为false

some

只要有一个满足条件就是true

find

reduce叠加

image.png pre 是上一次return计算完的结果，item会自己往下取（1-2-3-4-5）

字符串

创建字符串

  • 字面量
  • 构造函数

image.png

索引：下标

字符串常用方法

image.png

charAt 是找到字符串中指定索引位置的内容返回

  var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charAt(10)
  
  console.log(index) //
  • 这个字符串根本没有索引 10 的位置
  • 所以就会返回一个空字符串

charCodeAt

  • charCodeAt(索引) 就是返回对应索引位置的 unicode编码
 var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charCodeAt(0)
  
  console.log(index) // 74

因为 J 在 unicode 对照表里面存储的是 74，所以就会返回 74

indexOf

  • indexOf 就是按照字符找到对应的索引
  var str = 'Jack'
  
  // 使用 indexOf 找到对应的索引
  var index = str.indexOf('J')
  
  console.log(index) // 0

因为字符 J 在字符串 Jack 中的索引位置是 0 -所以会返回 0

substring

  • substring 是用来截取字符串使用的

  • 语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引

    var str = 'hello'
//         01234

// 使用 substring 截取字符串
var newStr = str.substring(1, 3)

console.log(newStr) // el

    从索引 1 开始，到索引 3 截止，包含前面的索引不包含后面的索引 所以返回的是 el

substr

  • substr 也是用来截取字符串的

  • 语法：substr(从哪个索引开始，截取多少个)

     var str = 'hello'
//         01234

// 使用 substr 截取字符串
var newStr = str.substr(1, 3)

console.log(newStr) // ell

    这个方法和 substring 不一样的是，第二个参数是截取多少个 。从索引 1 开始，截取 3 个，所以得到的是 ell

toLowerCase 和 toUpperCase

  • 这两个方法分别使用用来给字符串转成 小写字母 和 大写字母
 var str = hello
 
 // 使用 toUpperCase 转换成大写
 var upper = str.toUpperCase()
 
 console.log(upper) // HELLO
 
 // 使用 toLowerCase 转换成小写
 var lower = upper.toLowerCase()
 
 console.log(lower) // hello
Number toFixed（）

小数点后保留两位，返回值为字符

Math
  • Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 数字
random

  • Math.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数

  • 每次执行生成的数字都不一样，但是一定是 0 ~ 1 之间的

  • 生成的数字包含 0 ，但是不包含 1

    var num = Math.random()
console.log(num) // 得到一个随机数
replace

替换，只能替换第一个，否则依靠正则表达式

round

  • Math.round() 是将一个小数 四舍五入 变成一个整数

    var num = 10.1
console.log(Math.round(num)) // 10

var num2 = 10.6
console.log(Math.round(num2)) // 11
abs

  • Math.abs() 是返回一个数字的 绝对值

    var num = -10
console.log(math.abs(num)) // 10
ceil

  • Math.ceil() 是将一个小数 向上取整 得到的整数

    var num = 10.1
console.log(Math.ceil(num)) // 11

var num2 = 10.9
console.log(Math.ceil(num2)) // 11
floor

  • Math.floor() 是将一个小数 向下取整 的到的整数

    var num = 10.1
console.log(Math.floor(num)) // 10

var num2 = 10.9
console.log(Math.floor(num2)) // 10
max

  • Math.max() 得到的是你传入的几个数字之中 最大 的那个数字

    console.log(Math.max(1, 2, 3, 4, 5)) // 5
min

  • Math.min() 得到的是你传入的几个数字之中 最小 的那个数字

    console.log(Math.min(1, 2, 3, 4, 5)) // 1
PI

  • Math.PI 得到的是 π 的值，也就是 3.1415936...

    console.log(Math.PI) // 3.141592653589793
    • 因为计算机的计算精度问题，只能得到小数点后 15 位
    • 使用 Math.PI 的时候，是不需要加 () 的

Date

  • js 提供的内置构造函数，专门用来获取时间的
new Date()

  • new Date() 在不传递参数的情况下是默认返回当前时间

    var time = new Date()
console.log(time) // 当前时间 Fri Mar 01 2019 13:11:23 GMT+0800 (中国标准时间)

  • new Date() 在传入参数的时候，可以获取到一个你传递进去的时间

    var time = new Date('2019-03-03 13:11:11')
console.log(time) // Sun Mar 03 2019 13:11:11 GMT+0800 (中国标准时间)

new Date() 传递的参数有多种情况

  1. 传递两个数字，第一个表示年，第二个表示月份

    var time = new Date(2019, 00) // 月份从 0 开始计数，0 表示 1月，11 表示 12月
console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)

  2. 传递三个数字，前两个不变，第三个表示该月份的第几天，从 1 到 31

    var time = new Date(2019, 00, 05) 
console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中国标准时间)

  3. 传递四个数字，前三个不变，第四个表示当天的几点，从 0 到 23

    var time = new Date(2019, 00, 05, 22) 
console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中国标准时间)

  4. 传递五个数字，前四个不变，第五个表示的是该小时的多少分钟，从 0 到 59

    var time = new Date(2019, 00, 05, 22, 33) 
console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中国标准时间)

  5. 传递六个数字，前五个不变，第六个表示该分钟的多少秒，从 0 到 59

    var time = new Date(2019, 00, 05, 22, 33, 55) 
console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中国标准时间)

  6. 传入字符串的形式

    console.log(new Date('2019')) 
// Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02')) 
// Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03')) 
// Sun Feb 03 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:')) 
// Sun Feb 03 2019 13:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:')) 
// Sun Feb 03 2019 13:13:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:13')) 
// Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)

getFullYear

  • getFullYear() 方式是得到指定字符串中的哪一年

    var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getFullYear()) // 2019

getMonth

  • getMonth() 方法是得到指定字符串中的哪一个月份

    var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMonth()) // 3
    • 这里要有一个注意的地方
    • 月份是从 0 开始数的
    • 0 表示 1月，1 表示 2月，依此类推

getDate

  • getDate() 方法是得到指定字符串中的哪一天

    var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getDate()) // 3

getHours

  • getHours() 方法是得到指定字符串中的哪小时

    var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getHours()) // 8

getMinutes

  • getMinutes() 方法是得到指定字符串中的哪分钟

    var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMinutes()) // 0

getSeconds

  • getSeconds() 方法是得到指定字符串中的哪秒钟

    var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getSeconds()) // 22

getDay

  • getDay() 方法是得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）

    var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getDay()) // 1

getTime

  • getTime() 方法是得到执行时间到 格林威治时间 的毫秒数

    var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getTime()) // 1554681622000
定时器
  • 在js里面，有两种定时器，倒计时定时器 和 间隔定时器
倒计时定时器

  • 倒计时多少时间以后执行函数

  • 语法： setTimeout(要执行的函数，多长时间以后执行)

  • 会在你设定的时间以后，执行函数

    var timerId = setTimeout(function () {
  console.log('我执行了')
}, 1000)
console.log(timerId) // 1
    • 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
    • 所以会在页面打开 1 秒钟以后执行函数
    • 只执行一次，就不在执行了
    • 返回值是，当前这个定时器是页面中的第几个定时器
间隔定时器

  • 每间隔多少时间就执行一次函数

  • 语法： setInterval(要执行的函数，间隔多少时间)

    var timerId = setInterval(function () {
  console.log('我执行了')
}, 1000)
    • 时间和刚才一样，是按照毫秒进行计算的
    • 每间隔 1 秒钟执行一次函数
    • 只要不关闭，会一直执行
    • 返回值是，当前这个定时器是页面中的第几个定时器
定时器的返回值

  • 设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

  • 只要有一个定时器，那么就是一个数字

    var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2
关闭定时器

  • 我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器

  • 这个 timerId 就是用来关闭定时器的数字

  • 我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

    var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)
    • 关闭以后，定时器就不会在执行了
    var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
coearInterval(timerId2)
    • 关闭以后定时器就不会在执行了

  • 原则上是

    • clearTimeout 关闭 setTimeout
    • clearInterval 关闭 setInterval

  • 但是其实是可以通用的，他们可以混着使用

    var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
// 关闭倒计时定时器
clearInterval(timerId)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器
clearTimeout(timerId2)
avatar
文章
阅读
粉丝