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;
      }
    }
  }
}