我整理了些 JavaScript 知识点，有些你熟知，有些你不了解，但都能提高 JavaScript 技能。

目录

使用箭头函数简化代码

一行代码完成结构加赋值

对基础数据类型进行解构

对数组解构快速拿到最后一项值

将下标转为中文零一二三...

判断整数的不同方法

通过css检测系统的主题色从而全局修改样式

数组随机打乱顺序

随机获取一个Boolean值

把数组的第一项放到最后一项

把数组最后一项移到第一项

其它知识点汇总：

---

最近我重温了一遍 JavaScript 高级程序设计（即红宝书），发现了一些比较有趣的写法。很多东西日常开发中会经常用到，但是我们可能没有意识到还有其他不同的写法。结合一些我在工作中常用的方法，我总结了一些可能还未为大家所熟知的 JavaScript 小知识点，希望能对大家有所帮助。

使用箭头函数简化代码

在JavaScript中，箭头函数是一种简化函数语法的方式，可以让我们用更少的代码编写函数。它们有一个更简单的语法，而且在某些情况下可以让代码更易读。

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(number => number * 2);
console.log(doubleNumbers); // [2, 4, 6, 8, 10]

一行代码完成结构加赋值

我们日常经常使用结构赋值，一般都是先结构，再赋值，当然我们也可以一行就完成解构加赋值操作，看起来非常简化，当然可读性你懂得！

let people = { name: null, age: null };
let result = { name: '张三',  age: 16 };
({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"张三","age":16}###

对基础数据类型进行解构

日常中我们应该用不到这样的场景，但是实际上我们也可以对基础数据类型解构。

const {length : a} = '1234';
console.log(a) // 4

对数组解构快速拿到最后一项值

实际上我们是可以对数组解构赋值拿到length属性的，通过这个特性也可以做更多的事情。

const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3

将下标转为中文零一二三...

日常可能有的列表我们需要将对应的012345转为中文的一、二、三、四、五...，在老的项目看到还有通过自己手动定义很多行这样的写法，于是写了一个这样的方法转换。

export function transfromNumber(number){
  const  INDEX_MAP = ['零'，'一'.....]
  if(!number) return
  if(number === 10) return INDEX_MAP[number]
  return [...number.toString()].reduce( (pre, cur) => pre  + INDEX_MAP[cur] , '' )
}

判断整数的不同方法

/* 1.任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。但是对字符串不准确 */
function isInteger(obj) {
 return obj%1 === 0
}
/* 1. 添加一个是数字的判断 */
function isInteger(obj) {
 return typeof obj === 'number' && obj%1 === 0
}
/* 2. 使用Math.round、Math.ceil、Math.floor判断 整数取整后还是等于自己。利用这个特性来判断是否是整数*/
function isInteger(obj) {
 return Math.floor(obj) === obj
}
/* 3. 通过parseInt判断 某些场景不准确 */
function isInteger(obj) {
 return parseInt(obj, 10) === obj
}
/* 4. 通过位运算符*/
function isInteger(obj) {
 return (obj | 0) === obj
}
/* 5.ES6提供了Number.isInteger */

通过css检测系统的主题色从而全局修改样式

@media 的属性 prefers-color-scheme就可以知道当前的系统主题，当然使用前需要查查兼容性

@media (prefers-color-scheme: dark) { //... } 
@media (prefers-color-scheme: light) { //... }

javascript也可以轻松做到

window.addEventListener('theme-mode', event =>{ 
    if(event.mode == 'dark'){}
   if(event.mode == 'light'){} 
})
window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { 
    if (event.matches) {} // dark mode
})

数组随机打乱顺序

通过 0.5-Math.random() 得到一个随机数，再通过两次sort排序打乱的更彻底,但是这个方法实际上并不够随机，如果是企业级运用，建议使用第二种洗牌算法

shuffle(arr) {
      return arr.sort(() => 0.5 - Math.random()). sort(() => 0.5 - Math.random());
 },
function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
  }
  return arr
}

随机获取一个Boolean值

和上个原理相同，通过随机数获取，**Math.random()**的区间是0-0.99，用0.5在中间百分之五十的概率

function randomBool() {
    return 0.5 - Math.random()
}

把数组的第一项放到最后一项

function (arr){
    return arr.push(arr.shift());
}

把数组最后一项移到第一项

function(arr){
  return arr.unshift(arr.pop());
}

其它知识点汇总：

// 使用模板字符串创建动态字符串
const name = '张三';
const message = 你好，${name}！欢迎回来。;
console.log(message); // "你好，张三！欢迎回来。"

// 使用 let 和 const 声明变量
let foo = 'bar';
const baz = 'qux';

// 使用展开对象语法将一个对象的属性扩展到另一个对象中
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, d: 4 };
console.log(obj2); // {a: 1, b: 2, c: 3, d: 4}

// 使用函数参数默认值处理缺少参数或未定义参数的情况
function greet(name = '张三') {
console.log(Hello, ${name}!);
}
greet(); // Hello, 张三!
greet('李四'); // Hello, 李四!

// 使用 ES6 模块语法进行模块化编程
// 将以下代码保存到一个名为 example.js 的文件中
export function example() {
console.log('这是一个例子');
}

// 在另一个文件中导入 example.js 中的函数
import { example } from './example.js';
example(); // 这是一个例子

// 使用 Promise 处理异步代码
function fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}

// 使用 async/await 让异步代码更易读易理解
async function fetchAndLogData(url) {
try {
const data = await fetchData(url);
console.log(data);
} catch (error) {
console.error(error);
}
}

// 使用 Map 存储键值对
const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
console.log(map.get('b')); // 2

// 使用 Set 存储唯一值
const set = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(set); // Set(5) {1, 2, 3, 4, 5}

// 使用 Proxy 劫持对象行为
const obj = { a: 1, b: 2 };
const handler = {
get: function(target, name) {
console.log(获取 ${name});
return target[name];
}
};
const proxy = new Proxy(obj, handler);
proxy.a; // 获取 a

// 使用 Reflect 操作对象
const person = { name: '张三', age: 18 };
Reflect.deleteProperty(person, 'age');
console.log(person); // {name: "张三"}

// 使用 Symbol 作为对象属性的键
const id = Symbol('id');
const person = { name: '张三', [id]: 1 };
console.log(person[id]); // 1