目录
一、函数
1.1 基本概念
- js函数:被js封装成Function对象
- let 与 var
- let:
- 作用域:只在 let 命令所在的代码块(即大括号包裹的多行代码)内有效
- var:
- 作用域:不会超出函数体范围,但在如if、while的大括号范围外仍然有效
- 全局变量:全局处声明的变量的this指向window,且无法delete删除
- let:
- let 与 const
- 相同:都是ES6新增,二者都是块级作用域
- 区别:const声明的常量必须初始化,常量不能再赋值、修改、声明
1.2 ES6前写法
- 代码示例
// 命名函数语句 // 浏览器终端调用test2(),var声明的变量会提到函数顶声明,this指向调用者, var test2 = function() { alert("this is the test2"); return "OK" }; // 匿名函数:常用于回调函数中,创建即调用,一次性,可传入变量,(123,456)可选 (function(a,b){ console.log("a="+a); console.log("b="+b); })(123,456);
1.3 ES6写法
- 代码示例
// 定义外部函数 function test1() { // 涉及到this,常用此方法定义函数,因为箭头函数默认会将this绑定到外层对象上 } // 函数体为单语句:无参传入,返回值undefined,调用test3() const test3 = () => alert("this is the test3"); // 函数体为单语句:单参传入,传入res变量,return res.name,调用test4(stu) const test4 = res => res.name; // 函数题为多语句:多参传入,调用test5('duke', 18) const test5 = (name, age) => { // 数字加字符串:会先转换成字符串,然后拼接 alert("age: " + age); // ES6可以${}取到变量值,组合进字符串 return `name is ${name}` }; // 函数带默认参数:默认参数必须在最后 const test6 = (name, age = 18) => {...}; // 匿名函数:常用于回调函数中,创建的时候即调用,一次性 ((params) => console.log(`this is the argvs: ${params}`));
二、对象方法
2.1 对象
- js对象:
2.2 写法
- 代码示例
// 对象内的方法 let stu = { name: "duke", age: 18, detail: () => { return "duke detail"; } } // 对象调用方法,输出"duke detail" console.log(stu.detail()) // 新增属性 stu.height = 176 // 删除新增属性、删除原有属性,多次删除同一个不报错 delete stu.height delete stu.name // 返回undefined console.log(stu.height)
2.3 this关键字
- this指针:解析器调用函数时都会向其传递一个隐含参数this,this指向一个对象,this会根据函数调用方式的不同灵活的指向不同的对象
- 代码解释
const fun = () => console.log(this); let stu = { name: "duke", age: 18, // 此处不用箭头函数,因为箭头函数默认会将this绑定到外层对象上 detail: function() { console.log(this) } } // 调用fun()返回 object:window // 调用stu.detail()返回 object: stu
- 强制this指向
function fun(a, b) { return this; } let stu = { name: "duke" } // 函数也是对象,有方法 // call方法:第一个参数为强制this指向的,后面为传入的参数 let res = fun.call(stu, 10, 2); // apply方法:第一个参数为强制this指向的,后面数组为封装的传入参数 // let res = fun.apply(stu, [10, 2]) // 返回:object: stu console.log(res) // 返回:object:window console.log(fun())
三、数组对象
3.1 声明
- 常规操作
// 创建并初始化数组:可以增删改数组元素,但不可用直接给arr重新赋值 const arr = []; // 任何类型 const arr = [1, "good", {name: "duke"}, true] // 以下三者等价 const arr1 = [undefined, null] const arr1 = [,null] const arr1 = [,null,] //尾部逗号length不会增加 // arr2[2]()执行函数 const arr2 = [() => alert("help")] // 打印数据元素个数 console.log(arr.length) // 清空数组方法 arr.length = 0;
3.2 解构
- 解构:解构赋值语法可以将数组中的值或对象的属性取出,赋值给其他变量
- 写法
// 输出:a=10,b=20 let [a, b] = [10, 20]; // 输出:a=10,b=20, rest=[30,40,50] let [a, b, ...rest] = [10, 20, 30, 40, 50]; // 输出:a=20,b=40 let [, a, , b] = [10, 20, 30, 40, 50]; // 输出:a='duke', b=18,只要对应即可获取对应值 let [{name:a}, b] = [{name:'duke'}, 18]
3.3 方法
- 简单方法
方法 描述 shift() 删除数组第一个元素并返回, arr.shift()
,修改原数组pop() 删除数组最后一个元素并返回,修改原数组 unshift() 向数组首位添加>=1个元素,并返回数据长度 ,修改原数组 push() 向数组末尾添加>=1个元素,并返回数组长度, arr.push("a","b")
修改原数组reverse() 反转数组中元素顺序,修改原数组 slice() 数组切片,前两个 arr.slice(0,2)
,后两个arr.splice(-2)
splice() 删元素: let res = arr.splice(0,2)
,从第0个开始删2个,res为前两个,arr现为删掉前两个的新数组
替换元素:let res = arr.splice(1,1,"牛魔王")
插入元素:`let res = arr.splice(1,0,“玉帝”,“二郎神”)
以上均修改原数组concat() 连接两个或更多数组,返回结果 let arr3 = arr.concat(arr2)
join() 把所有元素放入一个字符串,元素通过指定分隔符分隔,默认为逗号 toString() 把数组转换为字符串,并返回结果 IndexOf() 通过值找索引, let b = a.indexOf(2)
,返回第一个匹配的索引值,未找到返回-1,lastIndexOf
返回最后一个匹配的索引值 - 宏方法(
a=[1,2,3]
)方法 描述 sort() 对数组元素进行排序,修改原数组,可加回调函数 a.sort((before,after) => {return before - after;})
before为相邻的前一个元素,回调函数返回值大于0交换位置,a=[1,2,3]
filter() let b = a.filter(item=>item!==1)
原数组不变,符合规则的元素保留成新数组b=[1]
map() let b = a.map(item=>item*item)
原数组不变,匿名函数处理每一个数组元素生成新数组b=[1,4,9]
every() let b = a.every(val=>val<=3)
原数组不变,若a数组每个元素均满足匿名函数,则b为true,此处b=true
some() let b = a.every(val=>val<=1)
原数组不变,若a数组有任一元素满足匿名函数,则b为true,此处b=true
reduce() let b = a.reduce((before, after)=>{return before+after})
原数组不变,化简数组,前两个元素进匿名函数,结果与第三个元素进匿名函数,以此类推,此处为求和b=6
- 遍历数组
const arr = ["唐僧", "孙悟空", "猪八戒", "沙和尚"]; // 第三个为正在遍历的数组,obj为arr,不常用 // forEach后跟一个回调函数,数组每个子项都会传入回调函数中进行处理 arr.forEach((value, index) => { console.log(`序号:${index},值:${value}`) }) // 遍历数组 for (let index in arr){ console.log(arr[index]) }
四、字符串对象
4.1 常规操作
-
字符串:字符串在底层是以字符数组来储存的
-
写法:
let w = "abcdefg;"
-
常用方法
写法 释义 w.length 返回字符串长度,无括号 w[3] 返回索引所在的字符 w+w 拼接字符串 w.indexOf(“b”) 返回1,返回检索字符第一次出现的索引,未找到返回-1 ,第二个参数指定检索开始位置 w.slice(2,3) 字符串切片,前两个 w.slice(0,2)
,后两个w.splice(-2)
w.split() 拆分成数组,括号内可指定分隔符,拆分后丢弃分隔符 w.toUpperCase() 大写格式化 w.toLowerCase() 小写格式化 以上方法都不修改原字符串
4.2 正则表达式
4.2.1 基本写法
- 写法:
let res = new RegExp("正则表达式", “匹配模式”)
- 示例
// 定义规则:此处表示开头为字符a,忽略大小写i(找到所有匹配g,多行匹配m) // 简写:let reg = /a/i let reg = new RegExp("a", "i"); // 待校验字符串 let str = "abc"; // 校验方法test,成功返回true console.log(reg.test(str))
4.2.2 规则
-
正则通配符
格式 描述 格式 描述 ^ 匹配字符串开头 $ 匹配字符串末尾 . 任意字符,除了换行符 a? 0、1个a a+ 1~无穷大个a a* 0~无穷大个a [amk] 匹配 ‘a’,‘m’或’k’ ,[0-2]为0、1、2 [^amk] 匹配非 ‘a’,‘m’,’k’的字符 [0-1]{3} 精确匹配n个表达式,000、111 [0-1]{2,3} 匹配00、11、000、111 -
分组匹配
格式 描述 (表达式) 分组匹配,与 ?、*、+
一块用(表达式1)|(表达式2) 表达式的或语句 ([a-z])([a-z])\2\1 匹配:abba、cddc、mnnm这样的,数字代表组序号 -
扩展正则通配符
格式 描述 \d 匹配任意数字,等价[0-9], \D
:匹配非\d\w 匹配包括下划线的任何单词字符,等价: [A-Za-z0-9_]
和_
,\S
:匹配非\w\s 匹配任意空白字符, \S
:匹配非\s
4.2.3 常规方法
- 列表
写法 释义 str.search(/a[bef]c/) 返回第一个与之匹配的子串的起始位置,找不到返回-1 str.math(/[A-z]/g) 将字符串中的字母均提取放到数组返回(g:全部匹配,无此参数返回第一个匹配详细信息) str.replace(/[A-z]/g, “3”) 将字符串中的字母均替换放到数组返回(g:全部匹配,无此参数仅匹配第一个) str.split(/[a-z]/i) 以正则为分隔符拆分字符串,返回拆分后字符数组,g匹配模式默认存在
五、类对象
- 代码示例
class Person { // 构造器 constructor(name, gender, age) { this.name = name; this.gender = gender; this.age = age; } // 类方法 getName() { return `name is: ${this.name}`; } } // 创建实例duke const duke = new Person("duke", true, 18); // 返回:name is: duke console.log(duke.getName()); // 返回:duke console.log(duke.name); // 创建实例jane const jane = new Person("jane", false, 20); // 返回:name is: jane console.log(jane.getName()); // 返回:jane console.log(jane.name)
六、时间、数学、JSON
6.1 时间对象
-
创建
- 自定义:
let d = new Date("02/28/2021 22:38:35");
- 当前时间:
let d = new Date();
- 自定义:
-
常用时间对象方法
写法 释义 d.getDate() 返回Date对象日期中的日,1~31 d.getDay() 返回周几,0~6 d.getMonth() 返回月份 d.getFullYear() 类似的,getHours/getMinutes/getSeconds d.getTime() 时间戳,返回1970-1-1至今毫秒数, Date.now()
执行时的时间戳 -
循环器
// 第一个为回调函数,第二个为间隔毫秒 // 计时器的调用者是window,计时器里面用this的话指向是window // 功能:每隔一段时间就执行一次,首次调用不执行 let timer = setInterval(() => { console.log("interval"); }, 3000); // 清除计时器:注意设置句柄timer,否则会失去控制权 clearInterval(timer)
-
延时器
// 第一个为回调函数,第二个为间隔毫秒 // 计时器的调用者是window,计时器里面用this的话指向是window // 功能:间隔一段时间仅执行一次,首次调用不执行 let timer = setTimeout(() => { console.log("timeout"); }, 3000); // 清除计时器:注意设置句柄timer,句柄仅用于中止延时器 clearTimeout(timer)
-
计时器
// 设置time显示的前缀名 console.time("模块1测试") // 被测试语句 // 结束上面设置的计时器 console.timeEnd("模块1测试")
输出:
模块1测试: 27.656005859375 ms
6.2 数学工具类
-
调用方法:
let res = Math.PI;
,res为3.1415926 -
常用方法
写法 释义 Math.abs(n) 对n取绝对值 Math.ceil(n) 对n向上取整 Math.floor(n) 对n向下取整 Math.round(n) 四舍五入 Math.random() 随机生成0~1随机数,不包含0、1, Math.round(Math.random()*(y-x)+x)
表示从x~y之间的随机数Math.max(a,b,c) 返回最大值,min同理 Math.pow(x,y) 返回x的y次幂 Math.sqrt(n) 返回开方
6.3 json对象
- json键值对:键必须为字符串(带双引号),值根据数据类型如下
- 常规写法
// 这是字符串 { "name":"张三" } // 这是整型、也可浮点型 { "age":30 } // 这是布尔类型 { "log_in":true } // 这是空 { "married":null } // 这是数组 { "detail": [ "张三", 30, true, null ]}
注:以上每行都是一个jsont对象
- json对象写法
// json对象复合写法:大括号内看做为一个json对象 { "name":"张三", "age":30, "log_in":true, "married":null } // json对象数组:中括号内为多个json对象 [ { "name":"张三", "age":30, "log_in":true, "married":null }, { "name":"张三", "age":30, "log_in":true, "married":null } ]
转换方法
* json字符串----->js对象:let obj = JSON.parse(str);
,js读取json对象数组,如obj[0].name
* js对象----->json字符串:let str= JSON.stringify(obj);