免x网站wordpress界面变宽
目录
00闭包
01函数进阶
02解构赋值
03通过forEach方法遍历数组
04深入对象
05内置构造函数
06原型
00闭包
<!-- 闭包 --><html><body><script>// 定义：闭包=内层函数（匿名函数）+外层函数的变量（s）// 作用：封闭数据，提供操作，外部可以访问函数内部变量function fun() {let s = 'Hello World'return function () {document.write(s)}}let f = fun()f()</script>
</body></html>01函数进阶
1>函数参数
1.动态参数
arguments是函数内置的伪数组，包含传入的所有实参（函数声明时形参列表为空）
2.剩余参数
将不定数量的剩余参数表示为数组
形参列表形如(形参列表 , ...剩余参数数组名)
3.展开运算符（...）
<!-- 展开运算符 --><html><body><script>let arr = [1, 2, 3]console.log(...arr) // 1 2 3// 不改变原数组</script>
</body></html>2>箭头函数
1.基本语法：
function(){} 等效于 () => {}
只有一个形参，小括号可省略
只有一行函数体，大括号可省略
2.箭头函数参数：
无动态参数，有剩余参数
02解构赋值
<!-- 数组解构 --><html><body><script>// 定义：将数组各值快速批量赋值给一系列变量let arr = [1, 2, 3]let [a, b, c] = arrconsole.log(a) // 1console.log(b) // 2console.log(c) // 3</script>
</body></html><!-- 对象解构 --><html><body><script>// 定义：将对象属性和方法快速批量赋值给一系列变量// 注意：新变量名和对应的属性名要相同let obj = { myname: 'Tian', age: 20 }let { myname, age } = objconsole.log(myname) // Tianconsole.log(age) // 20</script>
</body></html>03通过forEach方法遍历数组
<!-- 通过forEach方法遍历数组 --><html><body><script>let arr = ['one', 'two', 'three']arr.forEach(function (item, index) {console.log(item) // 数组元素console.log(index) //索引号})// one// 0// two// 1// three// 2</script>
</body></html>04深入对象
1>构造函数
<!-- 构造函数 --><html><body><script>function Std(uname, age) { // 约定：函数名首字母大写this.uname = unamethis.age = age}console.log(new Std('罗哲秀', 20))console.log(new Std('雷淇', 19))</script>
</body></html>2>实例成员&静态成员
实例成员：实例对象的属性和方法（实例属性和实例方法）
静态成员：构造函数的属性和方法（静态属性和静态方法）
05内置构造函数
1>Object常用静态方法
Object.keys(obj)【返回对象obj的键（数组）】
Object.values(obj)【返回对象obj的值（数组）】
Object.assign(obj1,obj2)【obj2拷贝给obj1，追加不覆盖】
2>Array常用方法
<!-- reduce方法 --><html><body><script>let arr = [1, 2, 3]// reduce的参数为回调函数和初始值let ans1 = arr.reduce((pre, cur) => pre + cur) // 箭头函数为回调函数console.log(ans1) // 6let ans2 = arr.reduce((pre, cur) => pre + cur, 60) // 60为初始值console.log(ans2) // 66</script>
</body></html><!-- find方法 --><html><body><script>// 以对象数组为例--------------------let arr1 = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]console.log(arr1.find(array => array.age === 19))// 以字符串数组为例--------------------let arr2 = ['罗哲秀', '雷淇']console.log(arr2.find(uname => uname === '雷淇'))// 箭头函数 uname => uname === '雷淇'// 等价于// function myfind(uname) {return uname === '雷淇'}</script>
</body></html><!-- every和some方法 --><html><body><script>let arr = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]// every方法--------------------// 全部的元素符合条件let flag = arr.every(array => array.age >= 18)console.log(flag) // true// some方法--------------------// 存在符合条件的元素flag = arr.some(array => array.age >= 20)console.log(flag) // true</script>
</body></html>3>String常用属性和方法
实例属性：length
实例方法：
1.split(分隔符)【将字符串分割为数组】
2.substring(indexStart[, indexEnd])【截取字符串，不包括indexEnd】
3.startsWith(Str[, pos]【检测字符串是否以Str开头，从pos开始检测，不写默认为0】
4.includes(Str[, pos])【检测字符串是否含有Str，从pos开始检测，不写默认为0】
06原型
<!-- 利用原型对象实现方法共享 --><html><body><script>// 构造函数function Stu(uname, age) {this.uname = unamethis.age = age}// 通过原型prototype，向构造函数添加方法共享Stu.prototype.say = function () {console.log(`我叫${this.uname}，今年${this.age}岁`);};//实例化，并调用共享函数 let LQ = new Stu('雷淇', 19)let QQ = new Stu('清浅', 20)LQ.say()QQ.say()</script>
</body></html><!-- 原型继承 --><html><body><script>// 父亲"人"function people() {this.hair_color = '黑'this.leg_number = '两'this.say = function () {console.log(`我有${this.hair_color}色的头发和${this.leg_number}条腿`)}}// 孩子"LQ"function LQ() {this.dance = () => console.log('跳舞')}LQ.prototype = new peoplelet lq = new LQ// 孩子"QQ"function QQ() {this.sing = () => console.log('唱歌')}QQ.prototype = new peoplelet qq = new QQ// 调用共享方法和私有方法，验证原型继承lq.say() // 我有黑色的头发和两条腿lq.dance() // 跳舞qq.say() // 我有黑色的头发和两条腿qq.sing() // 唱歌</script>
</body></html>