JavaScript进阶（七）

最新推荐文章于 2023-09-03 21:40:43 发布

AVIC_501

最新推荐文章于 2023-09-03 21:40:43 发布

阅读量529

点赞数

本文链接：https://blog.csdn.net/Li5306/article/details/119826880

版权

JavaScript+ 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、不定参

定参：函数的参数固定。（一般不超过4个）

        不定参：函数的参数是不固定。（理论可以有无数个）
        不定参的函数如何封装。
        列如:console.log(1, 2, 3, 4...);

arguments是一个数组.(argments[不定参])
arguments存储着所有的实参.

console.log(arguments);

 // 实参的个数
    console.log(arguments.length)

    myLog(1, 2, 3);
    myLog('我', '你', '它', '她', '他');

    function myLog() {

      // arguments不需要声明,默认就存在.
      // 注意: 函数外面无法使用arguments

      // 循环arguments,访问所有的实参.
      for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
      }
    }

    // 报错,函数外面无法使用arguments
    // alert(arguments);

// 不管是不是不定参函数,都可以使用arguments.
    function fn () {
      return arguments[0] * arguments[1]
    }

    let num1 = fn (1, 2);
    let num2 = fn (5, 4);

二、ES6的不定参

arguments => ES5的不定参 (名字固定) (伪数组)
rest参数 => ES6的不定参 (名字任意设置) (数组)

<script>

    myLog(1, 2, 3);
    myLog('我', '你', '它', '她', '他');

    function myLog (...args) {
      // 实参列表
      // console.log('args', args);
      // 实参个数
      // console.log('length', args.length);

      for (let i = 0; i < args.length; i++) {
        console.log(args[i]);
      }
    }

  </script>

三、封装不定参

<script>

    // arguments
    // ...args

    // 封装一个fn函数, 实现把所有实参求和后返回.

    let num1 = fn (1, 231, 34, 124, 67, 867, 897890, 7890);
    let num2 = fn (3, 2311, 342, 1242);

    function fn () {
      // 结果
      let num = 0;
      // 循环把所有的实参都加到num上
      for (let i = 0; i < arguments.length; i++) {
        num += arguments[i]
      }
      // 把结果返回到函数外面
      return num
    }
    
  </script>

四、封装一次就够

相同的逻辑 => 封装一个函数就够了.
函数的作用 => 函数表示一个功能,这个功能可以重复使用.
同一个函数可以调用多次.(使用多次).

<script>

    let num1 = fn1 (1, 231, 34, 124, 67, 867, 897890, 7890);
    let num2 = fn2 (3, 2311, 342, 1242);!

    function fn1 () {
      // 结果
      let num = 0;
      // 循环把所有的实参都加到num上
      for (let i = 0; i < arguments.length; i++) {
        num += arguments[i]
      }
      // 把结果返回到函数外面
      return num
    }

    function fn2 () {
      // 结果
      let num = 0;
      // 循环把所有的实参都加到num上
      for (let i = 0; i < arguments.length; i++) {
        num += arguments[i]
      }
      // 把结果返回到函数外面
      return num
    }
    
  </script>

五、返回的变量不应该再函数外面

arguments

...args

封装一个fn函数, 实现把所有实参求和后返回.

返回的num, 应该是每次调用的时候都初识为0,因此不能写在函数外面.

<script>

    let num = 0;

    let x = fn (1, 2, 3); // x === 6
    let y = fn (1, 2, 3, 4);// y === 10

    function fn () {     
      // 循环把所有的实参都加到num上
      for (let i = 0; i < arguments.length; i++) {
        num += arguments[i]
      }
      // 把结果返回到函数外面
      return num
    } 

  </script>

以上函数的执行分析步骤。

x = fn (1, 2, 3);
x = num => (1 + 2 + 3); num === 6
y = fn (1, 2, 3, 4);
y = num (6 + 1 + 2 + 3 + 4); num === 16

六、return会终止函数执行

<script>

    // return 执行后,整个函数会强制结束.

    let num1 = fn (1, 2, 3, 4);// 1

    function fn () {
      // 结果
      let num = 0;
      // 循环把所有的实参都加到num上
      for (let i = 0; i < arguments.length; i++) {
        num += arguments[i];
      }
      // 把结果返回到函数外面
      return num
    }
    
  </script>

七、可选参和必填参

必填参 => 必填的参数
可选参 => 可以填也可以不填的参数

// querySelectorAll唯一的参数是必填参数,不填报错.
let oDiv = document.querySelectorAll('div');

// alert的唯一参数是可选参数.
   alert();

函数的参数应该是必填的还是可选的?

没有一定的.只取决于写函数的人如何定义.

// 默认情况下，所有的参数都是可选的。
     function fn (x) {
       console.log(x);
     }

     fn();

// 通过一些逻辑判断来设置一个必填参数.
    function fn (x) {
      // 如果没有给x传递实参。
      if (x === undefined) {
        let err = new Error('你要传递x参数,x参数是必填的');
        console.error(err);
      } else {
        console.log(x);
      }
    }

    fn();

八、参数的默认值

对于可选参, 如果希望在不传递实参时,可选参等于一个默认值,怎么做?

    function fn (x) {
     // 如果x没有值,就把它变成10.
      if (x === undefined) {
        x = 10;
      }
      console.log(x);
    }

    fn();
    fn(100);

ES6默认参数的写法.

如果没有传递参数,x默认是10.

如果传递成参数,x的值就以传递的参数为准.

    function fn (x = 10) {
      console.log(x);
    }

    fn();
    fn(100);

九、JS内置对象

内置对象 => js本身就有的对象.(例如: window,document);

    常用的内置对象.

数学
日期对象
字符串对象
数组对象 (最常用)
正则对象 (很难)

    学习内置对象,需要关注这个内置对象有什么属性,有什么方法.

    如何学习属性 => 知道这个属性有什么用就可以了.

    如何学习对象的方法 =>

这个方法有什么用.
参数是什么,有多少个,那些是可选的,那些是必填的,数据类型是什么.(参数的细节)
这个方法返回什么.
语法.方法的书写形式.

    对象:

属性
方法

十、数学对象

// 数学对象 => 处理一些数学问题.求幂,求绝对值问题,求随机数问题,求四舍五入问题

console.log(Math);

// 圆周率π

console.log(Math.PI);

// s是面积.10是圆的半径
    let s = fn(10);

    function fn (r) {
      return Math.PI * r * r
    }
    
    // 求绝对值。
    let n = Math.abs(-10);

十一、数学方法

<script>

    // 向下取整
    let num1 = Math.floor(1.9);
    console.log(num1);

    // 向上取整
    let num2 = Math.ceil(1.9);
    console.log(num2);

    // 四舍五入
    let num3 = Math.round(1.9);
    console.log(num3);

    // 求幂 => 求xxx的几次放. 平方 => 2次幂, 立方 => 3次幂
    let num4 = Math.pow(2, 2);

    // 求2的平方根. 2的10次方幂是1024 则1024的10次方根就是2
    let num5 = Math.sqrt(2);

    // 求27的立方根.
    let num6 = Math.cbrt(27);

    // 找最大值
    let max = Math.max(1,3246,534,56,56,767,8,689,8,9890,9823);

    // 数组内有多个数组,如何找到arr中最大的数.
    let arr = [1,3246,534,56,56,767,8,689,8,9890,9823];

    // ES6的暂开运算符可以把数组的所有元素作为实参放入函数中.
    let max1 = Math.max(...arr);
    // ES5的写法.
    let max2 = Math.max.apply(Math, arr);
    // ES5从一个数组中找最小的数
    let min2 = Math.min.apply(Math, arr);

    // 找最小值
    let min = Math.min(1,3246,534,56,56,767,8,689,8,9890,9823);
  </script>

十二、随机数

<script>

    // 返回0-1之间的随机小数。(可以随机到0,不能随机到1);
    let num = Math.random();

    // 0 - 10的随机数 (可以随到0,但是随机不到10)
    let num1 = Math.random() * 10;

    // 把随机数取整,因为向下取整,因此最大只能取到9
    let num2 = Math.floor(num1);

    // 2-8的随机整数
    // 先取0-6的随机整数,然后再+2.

    // 取0-7之间的随机数
    let num3 = Math.random() * 7;

    // 向下取整后加2.
    let num4 = Math.floor(Math.random() * 7) + 2;

    // 封装一个获取任意两个整数之间的随机整数的函数.

    // 获取4-100之间的随机整数
    let num5 = getRandom(0, 255);

    // 封装。
    function getRandom(a, b) {
      return Math.floor(Math.random() * (b - a) + 1) + a
    }

  </script>

十三、数组方法

let arr = [11, 22, 33];

     arr[3] = 44;
    // 在最后面插入一个元素。
    // 把数组的第四个元素变成arr.push(55)的返回值
     arr.push(55);
     arr.push(44);

    // 在数组的最前面插入一个0.
     arr.unshift(0);

    // 删除最后面的元素
     arr.pop();

    // 删除最前面的元素
     arr.shift();

splice => 任意位置加,任意位置删

splice(要删除的元素的下标(要插入的元素的下标), 要删除的元素个数, 要替换的元素的值 )

   // 任意位置添加元素,任意位置删除元素.
     arr.splice(1, 0,'小陈');

    // 删除第二个元素
     arr.splice(1, 1);

    // 用splice实现push的写法
    arr.splice(3, 0, 44);

十四、数组方法查找元素

let arr = [1,1,2,3,4,5,6,7];

    // 这个数组中有没有元素10

    // arr.includes(10) => 返回布尔值，如果arr中包含10，就返回true，否则返回false
    if (arr.includes(10)) {
      alert('有')
    } else {
      alert('没有')
    }

let arr = [1,1,2,3,4,5,6,7];

    
    // arr.indexOf(10) => 返回查找元素的下标。如果没有指定元素，返回-1
    if (arr.indexOf(10) !== -1) {
      alert('有');
    } else {
      alert('没有');
    }

 let arr = [1,1,2,3,4,5,6,7];

    // 假设没有10e
     let flag = false;

    for (let i = 0;i < arr.length; i++) {
      if (arr[i] === 10) {
        flag = true;
        break;
      }
    }

    if (flag) {
      alert('有')
    } else {
      alert('没有')
    }

十五、数组的其他方法

    let arr1 = [1, 2, 3, 100];
    let arr2 = [4, 5, 6];

// 利用es6的展开运算符进行拼接
    let arr3 = [...arr1, ...arr2];

// 123在前
    let arr3 = arr1.concat(arr2);

// 456在后
    let arr3 = arr2.concat(arr1);

// 所有元素倒序
    arr1.reverse();

// 把数组转换成字符串.
    let arr = ['我', '喜欢', '你'];

    let str = '';
    for (let i = 0; i < arr.length; i++) {
      str += arr[i];
    }

// 把数组里面的元素拼接成字符串.
    let str = arr.join('');

// 没参数,默认用,连接各个元素
    let str = arr.join();

// 指定用 - 连接各个元素
    let str = arr.join('-');

// 把arr1中的1和2提取出来,再和arr2进行拼接.(不会修改原数组)
    // 第一个参数是开始下标, 第二个参数是结束位置的下标.(包头不包尾)
    let arr3 = arr1.slice(0,2).concat(arr2);

// 把arr1中的2和3提取出来.在拼接.
    let arr3 = arr1.slice(1,3).concat(arr2);

// 把第二个元素和第二个元素之后的所有元素都提取出来,再拼接.
    let arr3 = arr1.slice(1).concat(arr2);

十六、字符串方法

字符串类型不是object类型.但是字符串可以拥有一些方法.
很多时候可以把字符串当成数组处理. => 字符串可以使用length和下标

    let str = '爱上了得到';


// 如何判断一个字符串内有多少个字符?
    console.log(str.length);

    let str = '爱上了得到';

    // 如何知道字符串的第二个字符是什么?
    console.log(str[1]);

    let str = '爱上了得到';

    // 如何知道字符串内有没有'钱'这个字符串
    if (str.includes('钱')) {
      alert('有')
    } else {
      alert('没有')
    }

    let str = '爱上了得到'
    // 如何知道字符串内有没有'钱'这个字符串
    if (str.indexOf('钱') !== -1) {
      alert('有');
    } else {
      alert('没有');
    }

    let str = '爱上了得到';

// 提取字符串。参数和数组的slice方法一样。
    let msg = str.slice(0, 3);

    let str = '爱上了得到';
    // 参数是负数,需要转换成正的再截取.
    // 负数需要和字符串的length相加.
    // -1 获取的是最后一个字符.
    let msg = str.slice(-1); // 到

    let str = '爱上了得到';

// 参数和数组的slice方法一样。
    let msg = str.substring(1, 3);

    let str = '爱上了得到';

    // 第一个参数表示开始下标, 第二个参数表示截取的字符个数.
    let msg = str.substr(1, 4);

十七、字符串方法

字符串的所有方法都不会修改字符串本身。都需要重新赋值，原字符串才会变。

字符串变大、变小

    let str = 'abc';
    // 变大写.
    str = str.toUpperCase();
    // 变小写.
    str = str.toLowerCase();

字符串其中一个边大写

    str = 'ab' + 'C';

    // 只有C变大写
    str = 'ab' + 'c'.toUpperCase();

// 截取最后一个字符之前的所有字符 + 最后一个字符的大写。
    str = str.slice(0,-1) + str.slice(-1).toUpperCase();

    str = 'a' + 'B' + 'c';
    str = str.slice(0, 1) + str[1].toUpperCase() + str.slice(2);

    // 封装一个函数, 把指定的字符串的最后一个字符变大写.

十八、字符串的转数组

    let str = '你爱我';

    // 转换为数组.
    // split() => 参数表示不要放进数组的字符串.
    let arr = str.split('');

    // 数组倒序
    arr.reverse();

    // 在把倒序后的字符串赋值给str.
    str = arr.join('');

    str.split('') => 每个字符串作为单独的元素放入数组
    str.split('-') => 把-删掉后的其他字符放入数组.
    str.split() => 整个字符作为唯一的元素放入数组.

AVIC_501

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript进阶（七）

一、不定参定参：函数的参数固定。（一般不超过4个）不定参：函数的参数是不固定。（理论可以有无数个）不定参的函数如何封装。列如:console.log(1,2,3,4...);arguments是一个数组.(argments[不定参]) arguments存储着所有的实参.console.log(arguments); // 实参的个数 console.log(arguments.length) ...
复制链接

扫一扫