002-数组&字符串常用方法

Array.isArray

💡 Tips：判断是否为数组，返回布尔值，数组为true，其余为false

Array.isArray([]); // true
Array.isArray({}); // false
Array.isArray(''); // false

arr.push、arr.pop、arr.unshift、arr.shift

💡 Tips：对数组的首尾进行增删，push尾增，pop尾删，unshift首增，shift首删，会改变原数组

var arr = ['b', 'c'];
arr.push('d'); // arr = ['b', 'c', 'd']

var arr = ['b', 'c'];
arr.pop(); // arr = ['b']

var arr = ['b', 'c'];
arr.unshift('a'); // arr = ['a', 'b', 'c']

var arr = ['b', 'c'];
arr.shift(); // arr = ['c']

arr.reverse

💡 Tips：数组翻转，会改变原数组

var arr = [1, 12, 8];
arr.reverse(); // arr = [8, 12, 1]

arr.sort

💡 Tips：数组排序，参数为排序规则函数，返回值大于0，输出a，小于0，输出b，会改变原数组

var arr = [1, 12, 8];
arr.sort((a, b) => a - b); // arr = [1, 8, 12]

str.indexOf、arr.indexOf

💡 Tips：判断 a 在 str 或 arr 中的索引，不存在则返回 -1

var flag = '123affaf'.indexOf('a'); // flag = 3
var flag = '123affaf'.indexOf('g'); // flag = -1
var flag = [1,3,4,'a','f'].indexOf('f'); // flag = 4
var flag = [1,3,4,'a','f'].indexOf('g'); // flag = -1

join、split

💡 Tips：join 用于数组转字符串，split 用于字符串转数组

const str = [1, 2].join(''); // str = '12'
const arr = '12'.split(''); //arr = ['1', '2']

JSON.stringify、JSON.parse

💡 Tips：JSON.stringify 用于对象转json字符串，JSON.parse 用于json字符串转对象

const objStr = JSON.stringify({ a: 1, b: 2 });  // objStr = '{"a":1,"b":2}'
const obj = JSON.parse(objStr); // obj = {a: 1, b: 2}

str.slice、arr.slice

💡 Tips：字符串 或 数组的截取方法，返回新值，不改变原字符串 或 数组

var str = '01234'.slice(0, 3); // str = 012 - 从第0位开始截取，截止不包含第3位
var str = '01234'.slice(-1); // str = 4 - 截取最后一位

var arr = [0, 1, 2, 3, 4].slice(0, 4); // arr = [0, 1, 2, 3] - 从第0位开始截取，截止不包含第4位
var arr = [0, 1, 2, 3, 4].slice(-1); // arr = [4] - 截取最后一位

arr.splice

💡 Tips：数组的截取、插入，会改变原数组

var arr = ['a', 'b', 'c', 'd'];
arr.splice(2, 1); // arr = ['a', 'b', 'd'] - 从第2位元素删除1个

var arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 0, 'hello'); // arr = ['a', 'hello', 'b', 'c', 'd'] - 从第1位元素删除0个，并插入 hello

Array.from

💡 Tips：伪数组转真数组，伪数组无法使用真数组的方法，例如 foreach 等，所以需要转为真数组

var lis = document.getElementsByTagName('li');
Array.from(lis).forEach(item => {
  console.log(item);
})

arr.concat、Object.assign

💡 Tips：数组及对象的合并，concat 返回新数组，不改变原数组，Object.assign 给原对象合并属性

var newArr = [1, 2, 3].concat(['a', 'b']); // newArr = [1, 2, 3, 'a', 'b']

var obj = { name: 'zhangsan', age: 18 };
Object.assign(obj, { name: 'lisi', sex: '1' }); // obj = {name: 'lisi', age: 18, sex: '1'}

str.charAt、str.charCodeAt

💡 Tips：charAt 返回指定位置的字符，charCodeAt 返回指定位置的字符的 Unicode 编码

var char = 'abc'.charAt(1); // char = 'b'
var unicodeNumber = 'a'.charCodeAt(); // unicodeNumber = 97

str.subString

💡 Tips：字符串的截取，不改变原字符串

var str = 'hello world';
var subStr1 = str.substring(3); // subStr1 = 'lo world'
var subStr2 = str.substring(3, 7); // subStr1 = 'lo w' - 从第3位开始截取，截止不包含第7位

str.toLocaleUpperCase、str.toLocaleLowerCase

💡 Tips：字符串大小写转换，不改变原字符串

var str = 'Hello World';
var upperStr = str.toLocaleUpperCase(); // upperStr = 'HELLO WORLD'
var lowerStr = str.toLocaleLowerCase(); // lowerStr = 'hello world'

str.trim

💡 Tips：字符串去除前后空格，不改变原字符串

var str = '  Hello World  ';
var trimStr = str.trim(); // trimStr = 'Hello World'

str.startsWith、str.endsWith

💡 Tips：判断字符串是以 xxx 开头，或 以 xxx 结尾

var str = 'abcd';
var flag = str.startsWith('ab');  // flag = true
var flag = str.endsWith('c');  // flag = false

str.includes、arr.includes

💡 Tips：判断字符串 或 数组 是否包含 xxx

var flag = 'abcd'.includes('a'); // flag = true
var flag = ['1', '2', '3'].includes('1'); // flag = true
var flag = ['1', '2', '3'].includes(1); // flag = false

arr.forEach

💡 Tips：数组循环遍历，无返回值，改变原数组

var arr = [
  { name: 'zhangsan', age: 18 },
  { name: 'lisi', age: 20 },
  { name: 'wangwu', age: 18 },
];

arr.forEach(item => {
  console.log(item.name);
});

arr.map

💡 Tips：数组循环遍历，不改变原数组，返回新数组

var arr = [
  { name: 'zhangsan', age: 18 },
  { name: 'lisi', age: 20 },
  { name: 'wangwu', age: 18 },
];

const nameArr = arr.map(item => item.name); // nameArr = ['zhangsan', 'lisi', 'wangwu']

arr.filter

💡 Tips：数组过滤查找，不改变原数组，返回新数组

var arr = [
  { name: 'zhangsan', age: 18 },
  { name: 'lisi', age: 20 },
  { name: 'wangwu', age: 18 },
];

const filterArr = arr.filter(item => item.age === 18); 
// filterArr = [{ name: 'zhangsan', age: 18 },{ name: 'wangwu', age: 18 }]

arr.find、arr.findIndex

💡 Tips：查找数组中符合条件的第一个元素 或 索引

var arr = [
  { name: 'zhangsan', age: 18 },
  { name: 'lisi', age: 20 },
  { name: 'wangwu', age: 18 },
];

const findObj = arr.find(item => item.age === 18); // findObj = {name: 'zhangsan', age: 18}
const indexNumber = arr.findIndex(item => item.age === 18); // indexNumber = 0

arr.reduce

💡 Tips：可用于数组求和、数组每个元素出现的次数统计 等

var names = ['a', 'b', 'c', 'b', 'a', 'c', 'a'];
const result = names.reduce((res, val) => {
  if (!res[val]) {
    res[val] = 1;
  } else {
    res[val] = res[val] + 1;
  }
  return res;
}, {}); // result = {a: 3, b: 2, c: 2}

Object.keys、Object.values

💡 Tips：获取对象的键 或 值组成的数组

const obj = {
  name: 'zhangsan',
  age: 18,
  sex: '1',
};
const keysArr = Object.keys(obj); // keysArr = ['name', 'age', 'sex']
const valueArr = Object.values(obj); // valueArr = ['zhangsan', 18, '1']

for in 遍历

💡 Tips：可遍历对象及其原型的所有属性及方法，可通过 hasOwnProperty 排除原型属性，typeof 排除方法

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.job = 'software engineer';
Person.prototype.say = function () {};

let xiaoming = new Person('xiaoming', 10);
xiaoming.like = 'apple';
xiaoming.run = function () {};

let keyArr = [];
for (var key in xiaoming) {
  keyArr.push(key);
}
console.log(keyArr); // ['name', 'age', 'like', 'run', 'job', 'say']

let key2Arr = [];
for (var key in xiaoming) {
  if (xiaoming.hasOwnProperty(key) && typeof xiaoming[key] !== 'function') {
    key2Arr.push(key);
  }
}
console.log(key2Arr); // ['name', 'age', 'like']

数组去重

1. array.from 与 set 结合去重
2. filter 与 indexOf 去重
3. reduce 与 includes 去重

let myArr = [1, 3, 4, 5, 6, 3, 7, 4];

// array.from 与 set 结合去重
let myArr1 = Array.from(new Set(myArr));

// filter 与 indexOf 去重
let myArr2 = myArr.filter((value, index, arr) => arr.indexOf(value) === index);

// reduce 与 includes 去重
const myArr3 = myArr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

数组排序

1. 冒泡排序 – 比较相邻两个数据，前数据大于后数据，则交换顺序，一轮之后，会将最大值排到最后；依次循环直到排序完成
2. 选择排序 – 从第一项开始查找，找最小值，然后跟第一项交换位置，后续依次类推

// 冒泡排序 -- 比较相邻两个数据，前数据大于后数据，则交换顺序，一轮之后，会将最大值排到最后；依次循环直到排序完成
function bubbleSort(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    let k = arr.length - 1 - i;
    let pos = -1;
    for (let j = 0; j < k; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
        pos = j;
      }
    }

    // 拿到最后一个交换顺序的元素索引，缩减循环次数
    k = pos;

    // 如果当前轮排序没有触发顺序改变，则证明已经排好了，跳出循环
    if (pos === -1) {
      break;
    }
    console.log(`第 ${i} 轮 排序结果：${arr}`);
  }

  return arr;
}

// 选择排序 -- 从第一项开始查找，找最小值，然后跟第一项交换位置，后续依次类推
function selectSort(arr) {
  let minNum;
  for (let i = 0; i < arr.length; i++) {
    minNum = i;
    for (let k = i; k < arr.length; k++) {
      if (arr[minNum] > arr[k]) {
        minNum = k;
      }
    }
    if (minNum !== i) {
      [arr[i], arr[minNum]] = [arr[minNum], arr[i]];
    }
  }
  return arr;
}

let bubblearr = [1, 2, 3, 4, 6, 5, 2, 3, 7, 8, 9];
console.log(bubbleSort(bubblearr));
console.log(selectSort(bubblearr));