一.rest 剩余的
function fun(x,y,...rest) {
// ...rest 表示剩余的参数
console.log(x,y) // 1 2
console.log(...rest) // 3 4 5
}
fun(1,2,3,4,5)
// 没有形参的情况下 可以通过arguments来获取参数
function fn1() {
// arguments 可以获取调用方法时传递进来的实参
console.log(arguments)
// 函数的递归调用
console.log(arguments.callee) // 代表当前的函数
}
// fn1([3,4,5])
fn1(2,3,4)
let [a,b,c,d,e] = [1,2,3,[4,5]]
console.log(a,b,c,d,e)
二.函数的扩展
1. this指向 （给谁绑定的事件/方法 谁就是this）
1. 事件处理函数中 this -> 绑定事件的DOM元素
2. 在自定义函数中 this -> window
3. 定时器中 this -> window
4. 在自定义对象中 this -> 对象
5. 在类中 this -> 实例化的对象
普通函数 =>箭头函数
1.去掉 function 关键字
2.在()和{} 之间加 =>
箭头：
1.函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（箭头函数内部的this指向的是父作用域中的this）
for(let i=0; i<aLi.length; i++) {
aLi[i].onclick = function() {
console.log(this); // li
setTimeout(() => {
// 箭头函数里的this是父作用域中的this li
console.log(this)
}, 1000)
}
}
let obj = {
name: 'zs',
age: 18,
code: () => {
console.log(this) // window
setTimeout(()=>{
console.log(this) // window
}, 2000)
}
}
2.不可以当作构造函数（类），也就是说，不可以使用new命令，否则会抛出一个错误。
3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
如何给函数设置默认值
function fun(x,y) {
x = x || 'a'; // 设置默认值
y = y || 'b'; // 设置默认
console.log(x, y) // 1 b
}
fun(1)
function fun1(x, y=2) {
console.log(this) // window
console.log(x, y)
}
fun1(2, null) //2 null
fun1(2) //2 2
// fn.length => 没有设置默认值的参数的个数
console.log(fun1.length) // 1
// fn.name => 方法名
console.log(fun1.name) // fun1
三.字符串的扩展
1.字符串拼接的两种方法
let _id = 'container'
let str = '<div id="'+_id+'"></div>'
let str1 = `<div id="${_id}"></div>`
let _start = 10;
let _count = 5;
//https://douban.uieee.com/?start=10&count=5
let url = 'https://douban.uieee.com/?start=' + _start + '&count=' + _count';
let url1 = `https://douban.uieee.com/?start=${_start}&count=${_count}`
2.
// indexOf 查找字符串 返回首次出现的索引 没有找到返回-1
let str2 = 'hello';
console.log(str2.indexOf('l'));//2
// includes 查找字符串 如果存在 返回true 否则返回false
console.log(str2.includes('o'));//true
// ***判断当前浏览器环境是否iphone
// 判断查询的字符串是否是原字符串的开始 => boolean
console.log(str2.startsWith('hello'))//true
// 判断查询的字符串是否是原字符串的结尾 => boolean
console.log(str2.endsWith('hello'))//true
console.log(str2.padStart(5,'abc') )//在头部插入 hello 长度为5
console.log(str2.padEnd(8,'xy') )//helloxyx
console.log(str2.repeat(3));//hellohellohello
四.数组的扩展
数组的构造两种新方法
let a1 = new Array(2,3,4)//[2,3,4]
let a2 = new Array(2) // 长度为2的空数组 let a2 = [,]
// Array.of
console.log(Array.of(2)); // [2]
console.log(Array.of(2,3,4)); // [2,3,4]
let aLi = document.getElementsByTagName('li'); // 类数组
let a3 = [...aLi];
let a3 = Array.from(aLi)
console.log(aLi, a3)//类数组，数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
console.log(Array.from(arrayLike)) //Array(3)0: "a"1: "b"2: "c"length: 3__proto__: Array(0)
/* copyWithin(target, start, end) 会改变原有数组
（三个参数都表示的是数组的索引下标）
target 表示从下标为target开始替换内容
替换的内容为从start开始获取到end之前(不包含end)结束
*/
let a5 = [1,2,3,4,5,6]
console.log(a5); // [1,2,3,4,5,6]
console.log(a5.copyWithin(1,4)); // [1,5,6,4,5,6]
console.log(a5.copyWithin(1,2)); // [1,3,4,5,6,6]
console.log(a5.copyWithin(2,3,4)) // [1,2,4,4,5,6]
// 对数组进行填充，如果原数组不为空 会覆盖原数组
//传的也是三个参数 填充的数字 起始位置 结束的位置（不包含）
console.log(['a', 'b', 'c'].fill(7)) // [7,7,7]
console.log(['a', 'b', 'c'].fill(7, 1)) // ['a', 7, 7]
// includes 数组是否包含内容 => boolean
let list = [
{
name: 'wwh',
age: 18 //19
},
{
name: 'gs',
age: 19 //20
},
{
name: 'lkx',
age: 20 //21
},
{
name: 'zs',
age: 15 //16
}
]
for(let obj of list) {
console.log(obj)
}
//{name: "wwh", age: 18}
{name: "gs", age: 19}
{name: "lkx", age: 20}
{name: "zs", age: 15}
for(let [index, value] of list.entries()) {
console.log(index)
console.log(value)
}
//0
{name: "wwh", age: 18}
1
{name: "hc", age: 19}
2
{name: "lkx", age: 20}
3
{name: "zs", age: 15}
// forEach 数组的遍历 没有返回值
list.forEach((value, index) => {
value.age = value.age + 1
console.log(value) //4个object
})
console.log(list) //原数组改变 每个age+1
let list1 = list.map((p1, index) => {
if (p1.age > 20) {
return p1.name
}
})
console.log(list1) // [undefined, undefined, 'lkx', undefined]
console.log(list)// 原数组不变
let list2 = list.filter((obj, index) => {
return obj.age > 19
})
console.log(list2) //返回一个数组 内容是符合要求的值
console.log(list) //原数组不变
五.对象的扩展
1.对象的属性值是一个变量，并且变量的名称与属性名相同就可以简写属性
let name = 'gs';
let age = 21;
let person = {
// key: value
name: name,
age: age,
eat: function() {
console.log(`${this.name} is eating....`);
}
}
let p1 = {
name,
age,
eat() {
console.log(`${this.name} is eating....`);
}
}
p1.eat(); //gs is eating
2.让一个变量作为对象的属性
let xxx = 'cname';
let p2 = {
[xxx+'a']: '高深',
xxx: 'gs',
age
}
3。 Object.is() 判断是否严格相等 ===
console.log(Object.is('111', 111)) // false
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) //true
4. 对象的合并 浅拷贝
let obj3 = Object.assign(obj1, obj2) 一个变都变
console.log(Object.keys(obj3)) // => [key, key]
console.log(Object.values(obj3)) // => [value, value]
console.log(Object.entries(obj3)) // => [[key,value],[key,value]]
对象合并 深拷贝
let obj4 = Object.assign({},obj1, obj2)
5. in 返回的是boolean的值
console.log('height' in obj2)
console.log(4 in [1,2,3])
