js数组

声明数组

1
2
3
4
5
6
7
8
<script>
  var arry = [1, 2, 3, 'zhangsan']
  console.log(arry);
  
  // 这里有个坑，如果数组名被重新赋值，那边数组的元素将会丢失。
  var arry = 'lisi'
  console.log(arry);     // lisi
</script>

遍历数组内容

1
2
3
4
5
6
7
8
<script>
  // 声明一个数组
  var arry = [1, 2, 3, 'zhangsan']
  // 通过for遍历数组中的内容
  for (let i = 0; i < arry.length; i++) {
    console.log('第' + i + '个内容是：' + arry[i]);
  }
</script>

新增&修改数组内容

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  // 声明一个数组
  var arry = ['red', 'bule', 'zhangsan']

  // 修改arry中 red 为 green
  arry[0] = 'green'
  console.log(arry);  // ['green', 'bule', 'zhangsan']

  // arry数组中新增一个元素为lisi
  arry[3] = 'lisi'
  console.log(arry);    // ['green', 'bule', 'zhangsan', 'lisi']
</script>

数组内添加元素

1
2
3
4
5
6
7
8
9
10
11
<script>
  var arry = [1, 2, 3, 'zhangsan']
  // push() 会在数组的末尾添加一个或多个数组的元素。
  // push添加元素之后会返回新数组的长度。
  console.log(arry.push('lisi')); // 数组长度返回 5
  console.log(arry);

  // unshifit() 会在数组的开头 添加一个或多个数组元素。
  console.log(arry.unshift('wangwu'));
  console.log(arry);
</script>

数组内删除元素

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  var arry = [1, 2, 3, 'zhangsan']
  // pop() 会删除数组内最后一个元素，一次只能删除一个元素，不需要传递参数
  // 返回值是删除了什么元素，就返回元素内容。
  console.log(arry.pop());
  console.log(arry);

  // shift() 会删除数组内第一个元素，一次只能删除一个元素，不需要传递参数
  // 返回值是删除了什么元素，就返回元素内容。
  console.log(arry.shift());
  console.log(arry);
</script>

数组的翻转

1
2
3
4
<script>
  var arry = [1, 2, 3, 'zhangsan']
  console.log(arry.reverse());
</script>

数组排序

1
2
3
4
5
6
7
<script>
  var arry = [3, 42, 71, 1]
  console.log(arry.sort(function (a, b) {
    return a - b;     // 升序排序
    return b - a;     // 降序排序
  }));
</script>

数组的索引

1
2
3
4
5
6
7
8
9
10
<script>
  var arry = [3, 42, 71, 1]

  // 从前往后查询71这个元素在arry数组中哪个索引号，只返回第一个71的索引号
  // 找不到元素时返回 -1
  console.log(arry.indexOf(71));

  // 从后往前查询71这个元素在arry数组中哪个索引号，只返回第一个71的索引号
  console.log(arry.lastIndexOf(71));
</script>

数组转换成字符串

1
2
3
4
5
6
7
8
9
<script>
  // 方法1 直接转换，结果为,逗号分割
  var arry1 = [3, 1, 71, 1]
  console.log(arry1.toString());

  // 方法2 ,可以指定分隔符，默认为逗号
  var arry2 = [3, 1, 71, 1]
  console.log(arry2.join('#')); // 3#1#71#1
</script>

数组小案例

第一种：筛选数组中大于10的值，把符合的值保存到一个新的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  // 筛选数组中大于10的值，把符合的值保存到一个新的数组
  var array = [20, 9, 7, 13, 28, 15, 5, 7, 1];
  var newArray = [];
  var j = 0

  for (let i = 0; i < array.length; i++) {
    if (array[i] > 10) {
      newArray[j] = array[i]
      j++
    }
  }
  console.log(newArray);
</script>

第二种：筛选数组中大于10的值，把符合的值保存到一个新的数组

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  // 筛选数组中大于10的值，把符号的值保存到一个新的数组
  var array = [20, 9, 7, 13, 28, 15, 5, 7, 1];
  var newArray = [];

  for (let i = 0; i < array.length; i++) {
    if (array[i] > 10) {
      newArray[newArray.length] = array[i]
    }
  }
  console.log(newArray);
</script>

翻转数组

1
2
3
4
5
6
7
8
9
10
<script>
  // 将数组 [1, 7, 6, 5, 9]的内容翻转后存放到新数组中。
  var array = [1, 7, 6, 5, 9];
  var newArray = [];

  for (let i = array.length - 1; i >= 0; i--) {
    newArray[newArray.length] = array[i]
  }
  console.log(newArray);		// [9, 5, 6, 7, 1]
</script>

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  // 筛选数组中大于10的值，把符号的值保存到一个新的数组
  var array = [1, 7, 6, 5, 9];
  for (i = 0; i <= array.length - 1; i++) {   // 外层循环管趟数
    for (var j = 0; j <= array.length - i - 1; j++) { // 里面循环管每趟的交换次数
      // 内部交换2个变量的值，前一个和后面一个数组元素比较。
      if (array[j] > array[j + 1]) {
        var tmp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = tmp
      }
    }
  }
  console.log(array);
</script>

数组元素去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  // 定义数组去重函数
  function unique(arry) {
    var newArry = [];
    for (var i = 0; i < arry.length; i++) {
      if (newArry.indexOf(arry[i]) === -1) {
        newArry.push(arry[i])
      }
    }
    return newArry
  }

  var arry1 = [3, 1, 71, 1]
  console.log(unique(arry1));
</script>

js函数

函数就是封装了一段可以被重复执行调用的代码块，目的：就是让大量代码重复使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
// 函数的使用分为两步：声明 和 调用
// 1、声明函数
// function 函数名称() {
//   // 函数体功能
// }

function sayHi() {
  console.log('hello~~~');
}
// 1、function声明函数的关键字，全部要小写
// 2、函数是做某件事情，函数名一般是动词，sayHi
// 3、函数不调用时自己是不会执行的

// 2、调用函数
// 函数名 ()
sayHi()
</script>

函数的参数

声明一个求和函数并调用

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  // 声明一个求两个数之所有数之和的函数
  function getSum(start, end) {
    var sum = 0
    for (var i = start; i <= end; i++) {
      sum += i;
    }
    console.log(sum);
  }

  getSum(1,5)  // 调用函数并传参
</script>

函数形参和实参个数不匹配问题

参数个数 说明
实参个数等于形参个数 输出正确结果
实参个数多于形参个数 只取到形参的个数
实参个数小于形参个数 多的形参定义为undefined，结果为NaN

小结

  • 函数可以带参数也可以不带参数
  • 声明函数时，函数括号里面的是形参，形参的默认值为undefined
  • 调用函数的时候，函数名括号里面的是实参

函数的返回值

函数返回值语法格式

1
2
3
4
5
6
 <script>
	// 函数返回值语法格式
   function 函数名() {
     return 需要返回的结果;
   }
</script>

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  // 声明一个求两个数之和的函数
  function getSum(start, end) {
    // 返回sum结果
    return start + end;
  }

  // 调用
  // 1、函数只是实现某种功能，最终的结果需要返回给函数的调用者，通过return实现。
  // 2、只要遇到return，就把后面的结果返回为函数的调用者， 函数名() = return 后面的结果。
  result = getSum(1, 5)  // 调用函数并传参
  console.log(result);
</script>

小结

  • 在return 后面的代码是不会被执行的
  • 当return写了要返回多个值时，返回的结果是最后一个值（想返回多个值可以用数组|对象来实现）。
  • 一个函数如果有return 则返回的是return 后面的值，如果没有return 则返回undefined
  • return不仅能返回return后的值，同时还可以退出循环（例如for while）

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取，在JavaScript中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

1
2
3
4
5
6
7
8
9
10
11
<script>
  // arguments 的使用只有函数才有arguments对象，而且是每个函数都内置好了这个arguments
  function fn() {
    console.log(arguments)  // arguments里面存储了所有传递过来的实参    arguments = [1,2,3,4]
    console.log(arguments.length);  // 4
    console.log(arguments[1]);  // 2
  }

  // 调用函数传参
  fn(1,2,3,4)
</script>

案例演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  // 利用函数求任意个数的最大值
  function getMax() {
    var max = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
      if (arguments[i] > max) {
        max = arguments[i];
      }
    }
    return max;
  }
  result = getMax(1, 2, 3, 4)
  console.log(result);
</script>

函数的案例

利用函数翻转任意数组

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  function reverse(arr) {
    var newArr = []
    for (var i = arr.length - 1; i >= 0; i--) {
      newArr[newArr.length] = arr[i];
    }
    return newArr
  }

  result = reverse([1,2,3,4])
  console.log(result);  // [4, 3, 2, 1]
</script>

判断闰年

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  function isRunYear(year) {
    var flag = false
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      flag = true;
    }
    return flag;
  }

  result = isRunYear(2001)
  console.log(result);
</script>