【Javascript】JS语法总结-数组

常用数组方法

arr.push(elem) 将一个或多个元素添加到数组的末尾，并返回数组新长度
arr.pop() 从数组取出最后一个元素
arr.shift() 从数组中取出第一个元素
arr.shift(elem) 将一个或者多个元素添加到数组的开头

const array = ['a','b','c']
array.push('d');  //4   当前数组['a','b','c','d']
array.pop();  // 'd'   当前数组['a','b','c']
array.shift('a');  //'a'   当前数组['b','c']
array.unshift('a');  //3   当前数组['a','b','c']

改变原数组

•arr.splice(start, deleteCount, item) 通过删除或替换现有元素或者原地添加新的元素item来修改数组

        let nums = [1,2,3,4,5];
        let aa = nums.splice(1,1,6,7);
        console.log(aa);    // [2]
        console.log(nums);  // [1,6,7,3,4,5]

•arr.sort() ⽤原地算法对数组的元素进⾏排序，并返回数组

        let nums = [1,5,2,3,4];
        let aa = nums.sort();
        console.log(nums);  // [1,2,3,4,5]

返回新数组

•arr.slice(begin, end) 从原数组浅拷⻉索引 begin （包括该元素）到索引 end （不包括该元素）的元素

        let fruits = ["香蕉", "苹果", "鸭梨", "芒果", "西瓜"];
        let fruits2 = fruits.slice(1,3);
        console.log(fruits2);  // ['苹果', '鸭梨']

•arr.concat(a, b) 合并两个或多个数组

let num1 = [1,5,2,3,4];
        let num2 = [1,5,2,3,4];
        let num3 = [1,5,2,3,4];
        let aa = num1.concat(num2,num3);
        console.log(aa);  // [1,5,2,3,4,1,5,2,3,4,1,5,2,3,4]

•arr.forEach(cb) 遍历数组，对数组的每个元素执⾏⼀次给定的函数 cb

    <button onclick="numbers.forEach(add)">点我</button>
    <p>数组元素总和：<span id="demo"></span></p>
    <script>
        let sum = 0;
        let numbers = [25, 12, 13, 50];
        function add(item) {
            sum += item;
            demo.innerHTML = sum;
        }   //数组元素总和：100
    </script>

•arr.map(cb) 把数组每个元素印射成执⾏函数 cb 后的返回值

        let x=[];
        let numbers = [4, 9, 16, 25];
        x = numbers.map(Math.sqrt);
        console.log(x); //[2, 3, 4, 5]

数组中搜索

•arr.indexOf(elem) 找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1

let fruits = ["Banana", "Orange", "Apple", "Mango"];
let a = fruits.indexOf("Apple"); //2

•arr.lastIndexOf(elem) 找到⼀个给定元素的最后⼀个索引，如果不存在，则返回-1

•arr.includes(elem) 判断⼀个数组是否包含⼀个指定的值

let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); 
// true 
site.includes('baidu'); 
// false

•arr.find(cb) 返回数组中满⾜提供的测试函数 cb 的第⼀个元素的值

    <p id="demo"></p>
<script>
const ages = [3, 10, 18, 20];
document.getElementById("demo").innerHTML = ages.find(checkAge);
function checkAge(age) {
  return age > 18;     
}   //20

•arr.findIndex(cb) 返回数组中满⾜提供的测试函数 cb 的第⼀个元素的索引

<p id="demo"></p>
<script>
const ages = [3, 10, 18, 20];
document.getElementById("demo").innerHTML = ages.findIndex(checkAge);
function checkAge(age) {
  return age > 18;     
}   //3
</script>

•arr.filter(cb) 筛选出所有通过函数 cb 测试的元素

 <button onclick="myFunction()">点我显示大于18的数</button>
    <p id="demo"></p>
    <script>
    var ages = [32, 33, 16, 40];
    function checkAdult(age) {
        return age >= 18;
    }
    function myFunction() {
        document.getElementById("demo").innerHTML = ages.filter(checkAdult);
    }
    </script>

与字符串的转换

•str.split(substr) 以字串 substr 将字符串 str 分割成⼦字符串数组

 <script>
        let str = "How are you doing today?";
        let n = str.split(" ");
        console.log(n);  //['How', 'are', 'you', 'doing', 'today?']
    </script>

•arr.join(substr) 将⼀个数组的所有元素连接成⼀个字符串并返回这个字符串

    <script>
        let fruits = ["Banana", "Orange", "Apple", "Mango"];
        let energy = fruits.join(" and ");
        console.log(energy);  // Banana and Orange and Apple and Mango
    </script>

计算

•arr.reduce(fn) 根据数组计算单个值，函数⼀个接⼀个地应⽤于所有元素，并将其结果搬运到下⼀个调⽤

    <p>从左边开始减去数组中的数字：</p>
    <p id="demo"></p> 
    <script>
    const numbers = [175, 50, 25];
    document.getElementById("demo").innerHTML = numbers.reduce(myFunc);
    function myFunc(total, num) {
      return total - num;
    }
    </script>   //100