学习笔记

Appearance

Return to top

数组

数组高级API

数组遍历

js

let arr = [1,3,5,6,78,9]
// 1. 使用基本的for循环

for(let i = 0 ;i < arr.length; i++){
    console.log(arr[i])
}

// 2. 利用for in 循环遍历
// 在企业开发中不建议使用for in 循环来遍历数组
// 因为对象中的属性是无序的，因为for in 循环遍历的是无序的对象的
for(let key  in arr){
    console.log(arr[key])
}

// 3. 如果想遍历数组，可以使用 for of

for(let value of arr){
    console.log(value)
}

// 4. forEach，会自动调用传入的函数，每次调用都会将当前遍历的元素和当前遍历到的索引和当前被遍历的数组传递给这个函数

arr.forEach((currentValue,currentIndex,currentArray)=>{
    console.log(currentValue,currentIndex,currentArray)
})

// 5. 手写forEach

Array.prototype.myForEach = function(fn){
    let(i = 0;i<this.length;i++){
        fn(this[i],i,this);
    }
}

arr.myForEach(currentValue,currentIndex,currentArray){
    console.log(currentValue,currentIndex,currentArray)
}

数组查找

js

// 从左往右边查找，找到返回索引找不到返回-1
let index1 = arr.indexOf(4)

// 从右往左边查找，找到返回索引，找不到返回-1
let index2 = arr.lastIndexOf(6)

// 从左边往右边查找，找到返回true找不到返回false
let res = arr.includes(6)

// 数组的findIndex方法,找到返回索引，找不到返回-1,定制版的indexOf

let index3 = arr.findIndex(function(currentValue,currentIndex,currentArray){
    console.log(currentValue,currentIndex,currentArray)
    if(currentValue === 6){
        return true
    }
})

// 数组的find,返回找到的元素,找到返回找到的元素，找不到返回undefined

let val = arr.find(function(currentValue,currentIndex,currentArray){
    if(currentValue === 6){
        return true
    }
})

数组的过滤与映射

js

// 数组的过滤 将满足需求的元素，添加到一个新的数组中
let arr1 = arr.filter(function(currentValue,currentIndex,currentArray){
    if(currentValue%2 === 0){
        return true
    }
})

// 数组的映射 将满足条件的元素，添加到一个新的数组中，与上面的区别是，map会先创建一个与当前要遍历的对象相同长度的数组，并且全部赋值为undefined，如果数据符合条件会将数据赋值给新数组的对应的位置
let arr2 = arr.map(function(currentValue,currentIndex,currentArray){
    if(currentValue%2 === 0){
        return true
    }
})

删除数组元素的注意点

遍历的同时删除数组中的所有元素

js

let arr = [1,2,4,5,6,78]

let len = arr.length

// 因为长度会变化，所以需要定义一个变量接收值

// 因为从后面往前面删除不会移动数组
for (let i = len - 1; i >= 0; i--){
    arr.splice(i,1)
}

// 通过delete删除数组中的元素不会对数组length属性发生变化

for(let i = 0 ; i<arr.length;i++){
    delete arr[i]
}

数组排序

js

let arr = ['s','b','a']


// 升序排序
arr.sort()
// 降序排序
/**
*   如果返回小于0 a会被排列到b之前
    如果等于0 a和b的位置不变
    如果大于0 b会被排列到a之前
    如果元素是字符串类型，比较的是字符串的Unicode编码
*/
arr.sort(function(a,b){
    if(a > b){
        return -1
    }else if(a<b){
        return 1
    }else{
        return 0
    }
})

console.log(arr)

let arr1 = [3,4,6,81,2]
//升序
arr1.sort()
// 降序
arr1.sort(function(a,b){
    // 如果数组中的元素是数值类型，如果需要升序排序，那么就返回a-b，
    // 如果需要降序排序，直接b-a
    return b-a
})

// 按照字符串的长度大小排序
let arr2 = ['12121','3434','4343','12','2']

// 升序
arr2.sort(function(str1,str2){
    return str1.length - str2.length
})
// 降序
arr2.sort(function(str1,str2){
    return str2.length - str1.length
})

// 按照年龄来排序
let arr3 = [
    {name:'zs',age:19},
    {name:'ls',age:20},
    {name:'ww',age:10}
]
// 升序
arr3.sort(function(item1,item2){
    return item1.age - item2.age
})

// 降序
arr3.sort(function(item1,item2){
    return item2.age - item1.age
})

字符串常用方法

在JS中字符串可以看做是一个特殊的数组，所以大部分数组的属性/方法字符串都可以使用

js

let str = "abcda"

// 获取字符串的长度
console.log(str.length)

// 获取字符串中的某个字符

// 这种方式只有高级浏览器才会支持
console.log(str[1])

// 这种没浏览器的兼容性问题
let ch = str.charAt(1)
console.log(ch)

// 字符串查找 indexOf / lastIndexOf / includes

console.log(str.indexOf('a')) // 0

console.log(str.lastIndexOf('a')) // 4

console.log(str.includes('c')) // true

// 字符串的拼接

let str1 = '14131'

let str2 = str + str1 // 推荐使用

// 截取子字符串

// 数组的方式
let subStr = str.slice(1,3) // 从索引为1开始截取到索引为3的位置结束，但不包括3

// 字符串中的截取方式

let subStr = str.substring(1,3) // 和slice方法一样

let subStr1 = str.substr(1,3) // 从索引为1 的位置开始截取，截取的数量是三个
js

// 1. 字符串切割

let str = "121213213"

let arr = str.split('')

// 2. 判断字符串是否以指定的字符串开头
let str1 = "www.baidu.com"
str1.startsWith("www") // 如果是以www开头就返回true,如果不是就返回false

// 3. 判断是否以指定字符串结尾

str1.endsWith('com') // 如果是以com结尾就返回true，如果不是就返回false

// 4. 模板字符串 ES6

let str11 = `www.baidu.com${str}`

基本数据类型和基本包装类型

基本数据类型

  • 有哪些基本数据类型

字符串类型 / 数值类型 / 布尔类型 / 空类型 / 未定义类型

  • 如何创建的基本类型的数据

通过字面量创建的基本数据类型的数据都是常量

  • 常量的注意点和特点

常量是不能被修改的

每次修改或者拼接都是生成一个新的，会在内存中开辟一个新的内存空间

基本类型是没有属性和方法的

基本包装类型

以前之所以能访问基本数据类型的方法和属性，是因为在程序运行的时候系统会自动将基本数据类型包装成了对象类型

包装类型 String() / Number() / Boolean()

js

// 程序运行前定义的字符串

let str = "sss" // 被包装成 let str = new String(str)

// 才能使用方法
str.split('')

JS中的三大对象

本地对象 / 内置对象 / 宿主对象

什么是宿主？

宿主就是指JS运行环境，js可以在浏览器中运行，也可以在服务器上运行（nodeJs）

本地对象

与宿主无关，无论在浏览器还是服务器中都有的对象

就是在ECMAScript标准中定义的类(构造函数)

在使用过程中需要我们手动new创建

例如：Boolean、Number、String、Array、Function、Object、Date、RegExp

内置对象

与宿主无关，无论在浏览器还是在服务器中都有的对象

ECMAScript已经帮我们创建好的对象

在使用过程中无需我们手动new创建

例如：Global、Math、JSON

宿主对象

对于嵌入到网页中的JS来说，其宿主对象就是浏览器，所以宿主对象就是浏览器提供的对象

包含：window和document

所以的DOM和BOM对象都属于宿主对象

Math对象

js

// 向下取整
Math.floor(12.11) // 12

// 向上取整
Math.ceil(12.15) // 13

// 四舍五入
Math.round(12.15555,2) // 第一个参数是需要四舍五入的值，第二个参数传入保留几位小数 12.16 

// 绝对值
Math.abs(-1) // 1

// 取随机数 // 生成的都是 0 - 1 之间的数值[0,1)
Math.random()

Released under the MIT License.

Copyright © 2022-present Yanyu