雨落辰潇-文档站

Appearance

函数新增特性 ​

新增的函数参数默认值的设置方式 ​

js
function 函数名(参数1，参数2=默认值) {
    
}

rest 参数 ​

什么是 rest 参数：

rest 参数（形式为 ...变量名），用于在函数中获取(多余)实参，用数组的形式保存下来。

js
1. rest 参数（形式为 ...变量名），用于在函数中获取(多余)实参，用来代替 arguments 对象。
2. rest 参数必须放在其他形参的后面
js
// ...args
function fn01(...args) {
    console.log(args);  // [100,200,250,'高小乐', true]
}
fn01(100,200,250,'高小乐', true);

function fn02(name, age, ...data) {
    console.log(name);
    console.log(age);
    console.log('rest参数：', data);  // ['司马姥姥', '欧阳姥姥', '爱新觉罗姥姥']
}

fn02('高小乐', 101, '司马姥姥', '欧阳姥姥', '爱新觉罗姥姥');



//arguments
1. arguments 是系统创建的变量，只能在函数中使用，函数内的变量，每一个函数中的argument都不一样。
2. arguments 的值是一个伪数组，由调用函数时所传递的实参组成
3. 可以使用 arguments 实现可变参数数量的函数，可用于获取所有可变数量的参数
// 创建函数 该函数计算所有参数的和
function sum() {
    // 定义变量 记录和
    var res = 0;
    // 遍历所有的参数
    for (var i = 0; i < arguments.length; i ++) {
        res += arguments[i];
    }
    // 返回计算结果
    return res;
}
sum(1,2,3,4,5,6,7,8);


//...rest
// 定义函数 计算所有参数的和
function sum(...nums) {
    return nums.reduce(function(prev, item) {
        return prev + item;
    });
}

console.log(sum(10,20,30,40,50,60));
console.log(sum(10,20,30));

rest 参数与 arguments 的区别：

js
1. rest 参数得到是纯数组，arguments 获取的是伪数组
2. rest 参数的变量是自定义的，arguments 的名字是系统创建的
3. rest 参数获取没有形参与之对应的实参（剩下的实参）， arguments 获取所有的实参

箭头函数 ​

箭头函数是一种声明函数的语法！

① 箭头函数的语法 ​

js
// 1 使用箭头函数声明没有参数的函数
const fn01 = () => {};
var f = v => v;
//等同于
var f = function(v) {
  return v;
};

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

// 2 使用箭头函数声明有参数的函数
const fn02 = (name, age) => {
    console.log(`我叫${name}，年龄${age}岁！`);
};

// 3 如果箭头函数的参数只有一个，可以省略小括号
const fn03 = num => {
    console.log(num * 2 + 100);
};

// 4 如果箭头函数的函数体只有一条语句，且是返回语句，可以省略大括号和return

const fn04 = (n1,n2) => {
   return n1 * n2;
}
等同于
const fn04 = (n1,n2) => n1 * n2;

// 5 大括号小括号都省略

const fn05 = (item) => {
	return item * item;
}
等同于
const fn05 = item => item * item;

② 箭头函数的特点 ​

js
1. 箭头函数中没有 arguments，可以使用 rest 参数
2. 箭头函数中没有 this，会使用上层作用域的 this，也无法通过 call和apply指定this。
3. 箭头函数不能用作构造函数，不能被 new
4. 箭头函数不能用作生成器函数

数组的方法

js
concat()		将多个数组连接成一个，返回连接好的数组，参数是数组，可以是任意个
slice()			截取数组中一部分返回新数组，指定开始位置和结束位置
join()			将数组中所有的元素合并成一个字符串并返回，参数指定分隔符，默认是逗号
indexOf()		返回指定元素在数组第一次出现的位置，不存在返回-1
lastIndexOf()   返回指定元素在数组最后一次出现的位置，不存在返回-1
forEach()		遍历数组，没有返回值
filter()		返回由满足复合条件的元素组成的新数组，如果回调函数返回true，加入，否则，不加入。
map()			返回由满足回调函数的返回值组成的新数组，新数组长度与原数组一致
every()			只有每个回调函数都返回true，every方法才返回true，否则every方法返回true
some()			只有有一个回调函数返回true，some方法就返回true		
reduce()		用于累计运算，最后一次回调函数的返回值作为reduce方法的返回值
reduceRight()	reduce()从左到右遍历，reduceRight从右到左遍历


push()			在数组的后面添加元素，返回添加元素后数组的长度
unshift()		在数组的前面添加元素，返回添加元素后数组的长度
pop()			删除最后一个元素，返回被删除的元素
shift()			删除第一元素，返回被删除的元素
splice()		替换指定位置（索引和长度）指定数量元素，返回数组，数组中被删除掉的元素
sort()			数组排序，返回排好序的数组
reverse()		翻转数组，返回翻转好的数组

案例

js
// 使用箭头函数声明函数
const func = (name, age, ...args) => {
    console.log(`${name}的年龄是${age}`);
    // console.log(arguments);
    console.log(args);
}
// 调用
func('小乐', 89, '司马姥姥', '欧阳姥姥');
// 不能实例化
// new func('小乐', 89); //报错
console.log('');


// ------------------------------------------------------
// 箭头函数内没有自己的this，如果使用this，沿着作用域链找
// 创建对象
const user = {
    name: '小乐',
    getInfo: () => {
        console.log(this);
    }
}
user.getInfo();    //这里的this会指向window


const btn = document.querySelector('#btn');
btn.onclick = () => {
    console.log(this); //这里的this会指向window
};


const liBoxs = document.querySelectorAll('#news li');
liBoxs.forEach(function(liBox) {
    // liBox.onclick = function() {
    //     console.log(this);  // this指向所点击的 li
    // };

    liBox.onclick = () => {
        console.log(this); // this指向上层作用域 forEach的回调函数，forEach还是有window调用。
    };
});


const obj = {
    getInfo: function() {
        const fn = () => {
            console.log(this);
        }
        fn();
    }
}
obj.getInfo(); // this指向obj

const obj1 = {
    getInfo: () => {
        const fn = () => {
            console.log(this);
        }
        fn();
    }
}
obj1.getInfo(); // this指向window
obj1.getInfo.call([1,2,3]); // this指向window，因为箭头函数本身就没有this
js
// 定义数组
const users = [
    {name: '刘备', age:45, address:'上海'},
    {name: '关羽', age:43, address:'苏州'},
    {name: '张飞', age:41, address:'无锡'},
    {name: '诸葛亮', age:44, address:'杭州'},
    {name: '向华强', age:36, address:'宁波'},
    {name: '曹操', age:54, address:'南京'}
];
console.log(users);
console.log('');


// 数组排序 按照年龄从小到大
users.sort((next,prev) => next.age - prev.age);
console.log(users);
console.log('');


// 取出40岁以上的人员，组成新数组
console.log(users.filter(item => item.age >= 40));
console.log('');


// 提取所有用户的姓名，组成新数组
console.log(users.map(item => item.name));

函数参数尾逗号（ES2017） ​

js
function clownsEverywhere(param1,param2,) { 
}
clownsEverywhere('foo','bar',);

标签模板 ​

函数调用和模板字符串结合使用，称为标签模板

js
func``;   			 // 相当于 func([])
func`Hello World`;   // 相当于 func(['Hello World'])

const a = 100,b=200;
func`Hello ${a}World${b}`;  // 相当于 func(['Hello ', 'World', ''], 100, 200)
//变量相当于分隔符，把字符串分成了三分，第一份"Hello ",第二份"World"，第三份"空"。
//然后把变量提取出来。

函数使用模版字符串
    模版字符串没有参数：
    	模版字符串的内容作为函数中的一个数组形式的参数。
	模版字符串有参数：
    	模版字符串作为函数中的第一个数组形式的参数，(字符串被变量分割，变成几份，每一份是数组中的元素)；变量作为函数中的参数。

​

Copyright © 2024 雨落辰潇