一.函数的参数
1.默认值
//当不传y的时候默认为world
function foo(x,y){
y = y || 'world'
console(x+y)
}
foo('hello')//helloworld
//但是这种方式不严谨,当y传0时呢?我们期待的是hello0
foo('hello',0)//结果是helloworld
//es6中我们可以这样处理
function foo(x,y = 'world'){
y = y || 'world'
console(x+y)
}
默认参数的位置:
function foo(x,z,y=5) {
console.log(x,y,z);
}
foo(1,2,3);//1,3,2
1.2.与解构配合使用
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined
1.3.length属性:没有指定默认值的参数的个数
1.4作用域
let x = 1;
function foo(x,y=x){
console.log(x,y);
}
foo(2)//2 2
--------------------------
let x = 1;
function foo(y=x){
let x = 2;
console.log(x,y);
}
foo()//2 1
1.5name属性
函数的name属性，返回该函数的函数名。
function foo() {}
foo.name // "foo"
这个属性早就被浏览器广泛支持，但是直到 ES6，才将其写入了标准。
需要注意的是，ES6 对这个属性的行为做出了一些修改。
如果将一个匿名函数赋值给一个变量，
ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。
var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"
上面代码中，变量f等于一个匿名函数，
ES5 和 ES6 的name属性返回的值不一样。
如果将一个具名函数赋值给一个变量，
则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。
const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz"
Function构造函数返回的函数实例，name属性的值为anonymous。
(new Function).name // "anonymous"
bind返回的函数，name属性值会加上bound前缀。
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "
二:扩展运算符和rest参数
2.1扩展运算符:把数组或者类数组展开成逗号隔开的值
//展开数组
let arr1 = [1, 2, 3]
console.log(...arr1);
let arr2 = [4, 5, 6]
//合并数组
//Array.prototype.push.apply(arr1,arr2)//es5写法
arr1.push(...arr2)
console.log(arr1);
2.2 rest参数,把逗号隔开的值合并成一个数组
代替arguments
// arguments变量的写法
function sortNumbers() {
return Array.from(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
sortNumbers(1,7,3,,6,4,5)//(7) [1, 3, 4, 5, 6, 7, 9]
let [x,y] = [1,2,3]
console.log(x)//1
console.log(y)//2,3
三.箭头函数
箭头函数.png
3.1箭头函数的用法
let foo1 = function (x, y) {
return x + y;
}
let foo2 = (x, y) => {
return x + y;
}
//当代码体只有一句执行代码时
let foo3 = (x, y) => x + y;
3.2this指向问题:箭头函数不指向当前的调用者
//我们希望里面的this指向btn
let oBtn = document.querySelector('#btn')
console.log(oBtn);
oBtn.addEventListener('click', function (e) {
setTimeout(function () {
console.log(this);//window
}, 1000)
})
-------------------------------------
//我们可以通过bind改变this指向
let oBtn = document.querySelector('#btn')
console.log(oBtn);
oBtn.addEventListener('click', function (e) {
setTimeout(function () {
console.log(this);//window
}.bind(this), 1000)
})
非箭头函数.png
let oBtn = document.querySelector('#btn')
console.log(oBtn);
oBtn.addEventListener('click', function (e) {
setTimeout(function () {
console.log(this);
}, 1000)
})
箭头函数.png
3.3 不可以当做构造函数,不可以使用arguments,与实际值不符
箭头函数中可用rest参数代替arguments
四:对象的拓展
4.1属性名与属性值一致时可以省略
let name = "123"
let age = "456"
let obj = {
name,age
};
console.log(obj);//{name: '123', age: '456'}
属性名为变量时:
let name = "123"
let age = "456"
let s = 'school'
let obj = {
name, age,
[s]:"789"
};
console.log(obj);//{name: '123', age: '456', school: '789'}
4.2Object.is(a,b)判断两个值是都严格相等(基本上相当于a===b)
4.3Object.assign(a,b)合并对象,属性冲突时,后边的属性会覆盖前面的属性
4.4in 判断对象中是否包含某个属性
数组可以判断在指定位置索引上是否有值
4.5对象遍历
①for in
for (const key in obj) {
console.log(key);
console.log(obj[key]);
}
②Object.keys()
Object.getOwnPropertyNames()与Object.keys()用法类似,Object.getOwnPropertyNames返回的是对象所有自己的属性，而Object.keys(obj)则返回的是所有可枚举属性，也就是属性下的enumerable: false
Object.keys(obj).forEach((item) => {
console.log(item);
console.log(obj[item]);
})
③类似的方法:
Object.values(obj).forEach((item)=>{
console.log(item);
})//123 456 789
Object.entries(obj).forEach((item)=>{
console.log(item[0]);//key
console.log(item[1]);//value
})
网友评论