Javascript笔记 - 数组常用方法

标签：myFunction 元素 Apple Javascript 笔记 数组 fruits var

数组

目录

• 数组
• 1. 数组基础
• 2. 常用数组方法
  • 输出：toString()
  • 增删：push()、pop()、shift()、unshift()
  • 提取：splice()、concat()、slice()
• 3. 数组排序
  • sort()
  • reverse()
• 4. 数组迭代
  • 遍历：forEach()、map()
  • 筛选：filter()、every()、some()
  • 计算：reduce()
  • 搜索：indexOf()、find()

1. 数组基础

• JS中数组在细节上与Java的有许多不同，比起数组更像是数组列表或链表

  数组也是一个对象，用于储存一些值并使用数字来作为索引操作元素

  由于JS为弱类型语言，数组中可以同时存储多种类型的数值

• 定义数组

  var arr_name = []; //空数组
  var arr_name1 = [1,'abc',true]; //显式初始化数组,一个数组中可以同时储存多种类型的变量
  

• 操作数组

  //向数组中添加元素
  arr[0] = 10;
  arr[1] = 20;
  
  //调用数组元素
  //调用超出索引范围的元素/未定义的元素并不会报错，只会显示undefined
  console.log(arr[0]);
  

• 数组扩容

  //只要通过数组下标赋值，那么数组就会根据最大的下标值自动地扩容
  //扩容后未定义的元素用undefined初始化
  arr_name[2] = "abc";
  alert(arr_name.length);	
  

2. 常用数组方法

输出：toString()

• 把数组转换为数组值（逗号分隔）的字符串

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.toString(); 
  

  join()方法也可以，而且还可以指定分隔符

  var fruits = ["Banana", "Orange","Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.join(" * "); 
  //Banana * Orange * Apple * Mango
  

增删：push()、pop()、shift()、unshift()

push()

• 在数组末尾添加新元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)
  

pop()

• 从数组中删除最后一个元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
  

shift()

• 删除首个数组元素，并把所有其他元素“位移”到更低的索引

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
  

unshift()

• 在数组开头添加新元素，并“反向位移”旧元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"
  

提取：splice()、concat()、slice()

splice()

• 可用于向数组添加新项

  第一个参数定义了应添加新元素的位置；第二个参数定义应删除多少元素；其余参数定义要添加的新元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2, 2, "Lemon", "Kiwi");
  

  通过特定的参数设定，也能够使用该方法移除元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(0, 2);        // 删除 fruits 中的第一,二个元素
  

concat()

• 通过合并现有数组来创建一个新数组

  var myGirls = ["Cecilie", "Lone"];
  var myBoys = ["Emil", "Tobias", "Linus"];
  var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
  

slice()

• 在不改变原数组的情况下，用数组的某个片段切出新数组

  var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  var citrus = fruits.slice(1); 
  

3. 数组排序

sort()

• 以字母顺序对数组进行排序

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.sort();            // 对 fruits 中的元素进行排序
  

  默认情况下，sort函数会按照字符串顺序对值进行排序，但如果数字按照字符串来排序，就会出现问题（比如"25" 大于 "100"，因为 "2" 大于 "1"），此时就需要一个比值函数来修正问题。比值函数可以随意修改，可以自定义对数组的排序方式

  var points = [40, 100, 1, 5, 25, 10];
  points.sort(function(a, b){return a - b}); 
  

reverse()

• 反转数组中的元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.reverse();         // 反转元素顺序
  

4. 数组迭代

遍历：forEach()、map()

forEach()

• forEach()方法对数组的每个元素执行一次提供的函数

  forEach方法中的function回调一般有三个参数，这三个参数如果不使用可以省略：

  • 项目值
  • 项目索引
  • 数组本身

  var txt = "";
  var numbers = [45, 4, 9, 16, 25];
  numbers.forEach(myFunction);	//45 4 9 16 25
  
  function myFunction(value, index, array) {
    txt = txt + value + " "; 
  }
  

map()

• map()方法与forEach()方法类似，区别在于：

  • map方法不会对没有值的数组元素执行函数
  • 方法会在不更改原始数组的情况下返回新数组；而forEach只会返回undefined
  • map速度比forEach快

  //注意这里返回的是数组，而forEach返回的是单个值
  var numbers1 = [45, 4, 9, 16, 25];
  var numbers2 = numbers1.map(myFunction); //[90,8,18,32,50]
  
  function myFunction(value, index, array) {
    return value * 2;
  }
  

筛选：filter()、every()、some()

filter()

• filter() 方法创建一个包含通过测试的数组元素的新数组

  var numbers = [45, 4, 9, 16, 25];
  var over18 = numbers.filter(myFunction);	//45,25
  
  function myFunction(value) {
    return value > 18;
  }
  

every()

• every() 方法检查所有数组值是否通过测试

  var numbers = [45, 4, 9, 16, 25];
  var allOver18 = numbers.every(myFunction);	//false
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

some()

• some() 方法检查某些数组值是否通过了测试

  var numbers = [45, 4, 9, 16, 25];
  var someOver18 = numbers.some(myFunction);	//true
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

计算：reduce()

• reduce() 方法在每个数组元素上运行函数，最终计算后获取单个值。该方法不会改变原数组

• reduce()方法在数组中从左到右工作，如需从右到左请使用reduceRight()

• reduce方法中的function回调一般有四个参数，这四个参数如果不使用可以省略：

  • 总数（初始值）
  • 当前元素
  • 当前元素的索引
  • 数组本身

  var numbers1 = [45, 4, 9, 16, 25];
  var sum = numbers1.reduce(myFunction);	//99
  
  function myFunction(total, currentValue, currentIndex, array) {
    return total + currentValue;
  }
  

• reduce方法本身也可以接受一个初始值

  var numbers1 = [45, 4, 9, 16, 25];
  var sum = numbers1.reduce(myFunction, 100);
  
  function myFunction(total, value) {
    return total + value;
  }
  

• 更多reduce方法的应用

  //合并二维数组
  var twoArr = [['a','b'],['c','d'],['e','f']];
  var oneArr = twoArr.reduce(function(total,currentValue){
    // console.log(total)
    return total.concat(currentValue);
  })
  console.log(oneArr);//["a", "b", "c", "d", "e", "f"]
  

  //统计一个数组中有多少个不重复的单词
  var arr = ["apple","orange","apple","orange","pear","orange"]; 
  function getWordCnt(){ 
    return arr.reduce(function(prev,next){ 
      prev[next] = (prev[next] + 1) || 1; 
      return prev; 
    },{}); 
  } 
  console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
  

搜索：indexOf()、find()

indexOf()

• indexOf() 方法在数组中搜索元素值并返回其位置

  如果未找到项目，Array.indexOf() 返回 -1

  reduce方法本身也可以接受一个初始值start，表示从哪里开始搜索

  如果需要从数组末尾开始搜索，请使用Array.lastIndexOf()

  var fruits = ["Apple", "Orange", "Apple", "Mango"];
  var a = fruits.indexOf("Apple",1);
  

find()

• find() 方法返回通过测试函数的第一个数组元素的值

  类似的方法有Array.findIndex()，返回通过测试函数的第一个数组元素的索引

  var numbers = [4, 9, 16, 25, 29];
  var first = numbers.find(myFunction);
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

标签：myFunction,元素,Apple,Javascript,笔记,数组,fruits,var
From： https://www.cnblogs.com/Solitary-Rhyme/p/16849312.html