展开运算符...
展开运算符的作用是解构数组，然后将每个数组元素作为函数参数。
function add(...arr){
console.log(a + b);
console.log(arr) // [1, 2]
}
let a = 1,b = 2
add(a, b) // 3
有了展开运算符，我们操作数组的时候，就可以不再使用apply来指定上下文环境了。
//ES5的写法
let arr = [10, 20, 50, 40, 30]
let a = Math.max.apply(null, arr)
console.log(a) // 50
//ES6的写法
let arr = [10, 20, 50, 40, 30]
let a = Math.max(...arr)
console.log(a) // 50
在所有函数参数中，只有最后一个才可以被标记为不定参数。函数被调用时，不定参数前的所有参数都正常填充，任何“额外的”参数都被放进一个数组中并赋值给不定参数。如果没有额外的参数，不定参数就是一个空数组，它永远不会是undefined。
function foo(a,...arr) {
console.log(a); // 1
console.log(arr);// [23, 4, 5]
}
foo(1,23,4,5)
function bar(a, b, ...arr) {
console.log(arr)// [] 空数组
}
bar(1, 2)
一个简单的可变参数函数containsAll给大家演示不定参数的用法。函数containsAll可以检查一个字符串中是否包含若干个子串，例如：containsAll("banana", "b", "nan")返回true，
containsAll("banana", "c", "nan")返回false。
es5写法
function containsAll(haystack) {
for (var i = 1; i < arguments.length; i++) {
var needle = arguments[i];
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
}
es6写法
function containsAll(haystack, ...needles) {
for (var needle of needles) {
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
}
默认参数的临时死区
//这是个默认参数临时死区的例子，当初始化a时，b还没有声明，所以第一个参数对b来说就是临时死区。
function add(a = b, b){
console.log(a + b)
}
add(undefined, 2) // b is not define
箭头函数
-
箭头函数没有this，函数内部的this来自于父级最近的非箭头函数，并且不能改变this的指向。
-
箭头函数没有super
-
箭头函数没有arguments
-
箭头函数没有new.target绑定。
-
不能使用new
-
没有原型
-
不支持重复的命名参数。
const foo = a => a
foo(5) //5
//多个参数可以用() 括起来，函数体内不止一个表达式的时候可以用{}
const foo = (a, b) =>{
console.log(a + b)
}
foo(1, 2)
//支持IIFE
const test = ((id) => {
return {
getId() {
console.log(id)
}
}
})(18)
test.getId() // 18
//箭头函数给数组排序
const arr = [10, 50, 30, 40, 20]
const s = arr.sort((a, b) => a - b)
console.log(s) // [10,20,30,40,50]
对象方法简写
// ES5
const obj = {
id: 1,
printId: function() {
console.log(this.id)
}
}
// ES6
const obj = {
id: 1,
printId() {
console.log(this.id)
}
}
对象属性可计算
const id = 5
const obj = {
[`my-${id}`]: id
}
console.log(obj['my-5']) // 5
es6的对象枚举顺序
如果对象中的key值为数字，将数字从小到大排序，如果对象中的Key值为字母，将字母从a-z进行排序
const state = {
id: 1,
5: 5,
name: "eryue",
3: 3
}
Object.getOwnPropertyNames(state)
//["3","5","id","name"] 枚举key
Object.assign(state, null)
//{"3":3,"5":5,"id":1,"name":"eryue"}
Object.setPrototypeOf()改变实例原型
let a = {
name() {
return 'eryue'
}
}
let b = Object.create(a)
console.log(b.name()) // eryue
//使用setPrototypeOf改变b的原型
let c = {
name() {
return "sb"
}
}
Object.setPrototypeOf(b, c)
console.log(b.name()) //sb
解构：解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。
- 对象解构
- 数组解构
- 混合解构
- 解构参数
//对象解构
let obj = {
a:1,
b:2,
name() {
return "sb"
}
}
let {a, b, c} = obj//错误
let {a, b, name} = obj//正确
//也可以使用展开运算符...
let {...arr} = obj
函数中使用解构赋值
//eg1
let props = {
a: 1,
b: 2
}
function test(value) {
console.log(value)
}
test({a=3, b=3} = props) // {a: 1, b: 2}
//eg2
let props = {
a: 1,
b: 2
}
function test(value) {
console.log(value)
}
test({a=3, b=3} = props) // {a: 1, b: 2}
//eg3 嵌套对象解构
let obj = {
a: {
b: {
c: 5
}
}
}
const {a: {b}} = obj
console.log(b.c) // 5
//数组解构
let arr = [1, 2, 3]
//解构前2个元素
const [a, b] = arr
console.log(a,b) //1 2
//解构中间的元素
const [, b,] = arr
console.log(b) // 2
//克隆数组
let arr = [1, 2, 3, 4];
let [...a] = arr;
console.log(a) //[1,2,3,4]
//嵌套数组解构
let arr = [1, [2, 3], 4];
let [a, [,b]] = arr;
console.log(a, b) // 1 3
//实际解构过程，左边的变量和右边的数组元素一一对应下标。
var a = arr[0],
_arr$ = arr[1],
b = _arr$[1];
//混合解构数组与对象
let obj = {
a: {
id: 1
},
b: [2, 3]
}
const {
a: {id},
b:[...arr]
} = obj;
console.log(id, arr) //id = 1, arr = [2, 3]
//解构参数
function Ajax(url, options) {
const {timeout = 0, jsonp = true} = options
console.log(url, timeout, jsonp)
};
Ajax('baidu.com', {
timeout: 1000,
jsonp: false
}) // "baidu.com" 1000 false