ES6基本语法(二)——函数与数组

函数

函数是JavaScript中组织代码的一种方式,它可以提高代码的复用性,并使其更加模块化。

<script>标签中定义函数

你可以在HTML文件的<script>标签内定义函数,或者在JavaScript文件中定义后再引入到HTML中。

html 复制代码
<script>
function sayHello() {
  console.log('Hello!');
}
</script>
无参数的函数类型

这种函数不需要传入任何参数就可以执行。

javascript 复制代码
function greet() {
  console.log('Hello, World!');
}
greet(); // 调用函数
有输入参数的函数类型

函数可以根据传入的参数来执行特定的操作。

javascript 复制代码
function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // 输出8
有默认值的函数

当函数调用时不提供某些参数时,可以设置默认值。

javascript 复制代码
function addWithDefault(a = 0, b = 0) {
  return a + b;
}
console.log(addWithDefault(5)); // 输出5
匿名函数

匿名函数是没有名称的函数,通常用作回调或者立即执行函数。

javascript 复制代码
let anonymousFunction = function() {
  console.log('This is an anonymous function.');
};
anonymousFunction(); // 调用匿名函数
箭头函数

箭头函数是一种更简洁的定义函数的方式,它没有自己的this绑定,适合用于回调。

javascript 复制代码
let arrowFunction = (a, b) => a * b;
console.log(arrowFunction(5, 3)); // 输出15
隐式返回函数

当函数只有一个表达式时,可以直接返回该表达式的值,无需使用return关键字。

javascript 复制代码
let implicitReturn = a => a * 2;
console.log(implicitReturn(5)); // 输出10

数组

  • push:向数组的末尾添加一个或多个元素,并返回数组的新长度。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.push(4);
    console.log(arr); // 输出: [1, 2, 3, 4]
    console.log(arr.push(5, 6)); // 输出: 6
  • unshift:向数组的开头添加一个或多个元素,并返回数组的新长度。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.unshift(0);
    console.log(arr); // 输出: [0, 1, 2, 3]
    console.log(arr.unshift(-1, -2)); // 输出: 5
  • shift:移除并返回数组的第一个元素。

    javascript 复制代码
    let arr = [1, 2, 3];
    let first = arr.shift(); // 移除第一个元素并赋值给first
    console.log(arr); // 输出: [2, 3]
    console.log(first); // 输出: 1
  • pop:移除并返回数组的最后一个元素。

    javascript 复制代码
    let arr = [1, 2, 3];
    let last = arr.pop(); // 移除最后一个元素并赋值给last
    console.log(arr); // 输出: [1, 2]
    console.log(last); // 输出: 3
  • splice(start, number):从指定的索引位置开始移除number个元素,并返回这些被移除的元素组成的数组。

    javascript 复制代码
    let arr = [1, 2, 3, 4, 5];
    let removed = arr.splice(1, 2); // 从索引1开始移除2个元素
    console.log(arr); // 输出: [1, 3, 5]
    console.log(removed); // 输出: [2, 4]
  • reverse:反转数组元素的顺序。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.reverse();
    console.log(arr); // 输出: [3, 2, 1]
  • sort:对数组元素进行排序,默认情况下按照字典顺序升序排列。

    javascript 复制代码
    let arr = [3, 1, 2];
    arr.sort();
    console.log(arr); // 输出: [1, 2, 3]
  • filter:创建一个新的数组,包含原数组中满足条件的所有元素。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let evenNumbers = arr.filter(num => num % 2 === 0);
    console.log(evenNumbers); // 输出: [2, 4]
  • concat:合并两个或多个数组,并返回一个新的数组,不改变原有数组。

    javascript 复制代码
    let arr1 = [1, 2];
    let arr2 = [3, 4];
    let combined = arr1.concat(arr2);
    console.log(combined); // 输出: [1, 2, 3, 4]
  • 使用for-of循环遍历数组:这是一种现代的、更直观的方式来遍历数组。

    javascript 复制代码
    let arr = [1, 2, 3];
    for (let value of arr) {
      console.log(value); // 输出: 1, 2, 3
    }
相关推荐
y先森14 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy14 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891117 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端