js數組精講和排序算法

js數組精講和排序算法 mdn :)

---

數組和length

/**
 * @title 數組和length 
 */
//define array
const arr = [];
const arr1= new Array();

// length 有縮短數組的做用 
consr arr = [1,2,3]
arr.length = 2;

console.log(arr)
// [1,2]

// 解構賦值
const [a, ...b, c] = [1,2,3,4,5]

concat

/**
 * @function concat
 * @notice concat 操做的參數是數組，那麼添加的是數組中的元素，而不是數組
 */
let concat_demo1 = () => {
  let a = ['js','css','html'];
  let b = ['c','c++'];
  let d = ['java','python'];
  // concat 能夠同時合併多個數組 ,返回值是合併的數組
  let c = a.concat(b, d);
  c.concat('c#')
  console.log(c)
  b[0] = 99;
  console.log(b)
  console.log(c)
}

let concat_demo2 = () => {
  let tom = [
    {
      name: 'tom',
      age: 21
    }
  ];
  let mary = [
    {
      name: 'mary',
      age: 33
    },
  ];
  let c = tom.concat(mary);
  console.log(c)
  // concat 操做結果是淺拷貝
  tom[0].name = 'tommy'
  console.log(c)
}

自行實現concat

// 手動實現concat 
  Array.prototype.concat1 = function (...args) {
    const res = []
    args.forEach((item ,index, arr)=> {
      if(Array.isArray(item)){
        res.push(...item)
      }else {
        res.push(item)
      }
    })

    return [...this, ...res]
  };

join

/**
 * @function join
 * @desc 把數組每一項用一個符號連接
 */
const join_demo1 = () => {
  const arr = ['吃','喝', '睡', '笑']
  const res = arr.join("&")
  console.log(res)
}
// 手動實現一個join方法

pop

/**
 * @function pop
 * @desc 出棧 刪除數組的最後一個元素，並返回
 * @return
 */
const pop_demo = () => {
  const arr = ['小花','小麗','小紅','小明']
  const res= arr.pop()
  console.log(arr)
  console.log(res)
}
// 手動實現一個pop方法

push

/**
 * @function push
 * @desc 入棧 往數組裏從後加幾個元素
 * @return 返回結果數組的長度
 */

const push_demo = () => {
  const arr = ['大黃']
  arr.push('小黑')
  arr.push('旺財','大金', '老王')
  console.log( arr.push(9))
}

push_demo()

// 手動實現一個push方法

reverse

/**
 * @function reverse
 * @desc  反轉原數組，不會生成信得數組
 * @return
 */
const arrr = [1,2,3,4]
console.log(arrr.reverse())

shift

/**
 * @function shift
 * @desc 出隊 刪除數組第一個值，並返回
 */
const shift_demo = () => {
  const arr = ['產品經理','前端開發','後端開發'，'設計師']
  console.log(arr.shift())
}


// 手動實現shift

unshift

/**
 * @function unshift
 * @desc 入隊 方法可向數組的開頭添加一個或更多元素，並返回新的長度
 */
const unshift_demo = () => {
  const arr = ['產品經理','前端開發','後端開發'，'設計師']
  console.log(arr.unshift('測試'))
  arr.unshift('項目經理', '數據')
}

unshift_demo()
// 手動實現unshift

slice

/**
 * @function slice 切片
 * @desc 原數組返回 子數組 不會
 */
const slice_demo = () => {
  const arr =  ['蘋果', '小米' , '三星' ,'華爲']
  const arr1 = arr.slice(0, 2)
  const arr2 = arr.slice(0 ,-1)
  //最後一個元素
  const arr3 = arr.slice(-1);
  const arr4 = arr.slice(0)

  console.log(arr1)
  console.log(arr2)
  console.log(arr3)
  console.log(arr4)
}

splice

/**
 * @function splice
 * @desc 刪除，增長數組
 */

const splice_demo = () => {
  const arr = ['蘋果', '香蕉' , '榴蓮' ,'葡萄'];
  const item = arr.splice(1, 1);
  console.log(item)
  console.log(arr)
  arr.splice(0,0, '橘子', '荔枝', '哈密瓜')
  console.log(arr)
}
// 手動實現splice

includes

/**
 * @function includes
 */

const includes_demo =  () => {
  const arr = [NaN, NaN, 1, 2]

  // indexOf()返回的是數值，而includes()返回的是布爾值
  // indexOf() 不能判斷NaN，返回爲-1 ，includes()則能夠判斷
  console.log(arr.includes(NaN))
  console.log(arr.indexOf(NaN))
}

includes_demo()

forEach,map, filter, some, every, reduce

/**
 * @function  forEach,map, filter, some reduce
 */

const loop_demo = () => {
   const arr = [11,2,23,4,25];

   // forEach 是普通循環
  arr.forEach((item,index,arr) => {
    // console.log(item,index,arr)
  })

  // map 是映射，把原數組，映射爲新的數組
  const arr2 = arr.map((item,index,arr) => {
    return item *2;
  })

  // filter 是過濾數組知足提交的
  const arr3 = arr.filter((item,index,arr) => {
    return item > 10
  })
  
  // every 表示是否每一個元素都知足條件
  const arr5 = arr.every(item => item > 10)
  console.log(arr5)

  // some 返回數組中 任意一個知足條件就返回true
  const arr4 = arr.some((item,index,arr) => {
    return item > 10
  })

  const list = ['tom', 'lisa', 'tina']
  // reduce 累加器，把上一次的結果再處理一次
  const res = list.reduce((prev, item,index) => {
    prev[item] = index;
    return prev;
  }, {})
  console.log(res)
}

const arr1 = [
  [11,22],
  [77,99],
  [88,66]
]

const res = arr1.reduce((prev ,item, index, arr) => (prev['x'+ (index+1)] = item[0], prev['y'+ (index+1)] = item[1], prev) , {})

console.log(res)


loop_demo()

數組排序1 - 默認排序

const list = [3, 999,22, 1, 223, 99, 8, 7, 6, 0];

// 默認排序方法
list.sort(function (a, b) {
  return a - b
})

數組排序2 - 選擇排序

// 選擇排序，每次選擇最小的
function getMin(arr) {
  const _index = 0;
  const min = arr[0];
  arr.forEach((item, index) => {
    if (item < min) {
      min = item;
      _index = index;
    }
  })
  return _index;
}

function chooseSort(arr) {
  let res = [];
  while (arr.length) {
    res = [...res, ...arr.splice(getMin(arr), 1)]
  }
  return res;
}

數組排序3 - 冒泡排序

// 冒泡排序 若是前一個比後邊的大，交換位置
function bubbleSort(list) {
  const {length} = list;
  for (let a = 0; a < length -1; a++) {
    for(let b = 0; b < length -1-a; b++){
      if (list[b] > list[b + 1]) {
        const temp = list[b];
        list[b] = list[b +1]
        list[b +1] = temp;
      }
    }
  }
}