JavaScrpit-7.24（每周一更，持续更新）学习路上记录下的一些常用套路（js基础篇）

一、数组升序排列

let arr = [5, 2, 7, 3, 4, 1];
let result = arr.sort((a, b) => a - b);
// 自定义排序规则：升序排列 
console.log('arr =' + JSON.stringify(arr));
// 打印结果:[1,2,3,4,5,7] 
console.log('result =' + JSON.stringify(result));
// 打印结果:[1,2,3,4,5,7]

这种方法应该是升序排列中最常用最方便的了。a-b是升序排列的意思，反之b-a就是降序排列。

二、将 A 数组中某个属性的值，存储到 B 数组中（重要）

const arr1 = [ 
{ name: 'ping-changxin', age: '23' }, 
{ name: '周杰伦', age: '35' }, ]; 
const arr2 = arr1.map((item) => item.name);
// 将数组 arr1 中的 name 属性，存储到 数组 arr2 中 
const arr3 = arr1.map((item) => ({ myName: item.name, myAge: item.age, })); 
// 将数组 arr1 中的 name、age这两个属性，改一下“键”的名字，存储到 arr3中 
console.log('arr1:' + JSON.stringify(arr1)); 
//打印结果：arr1:[{"name":"ping-changxin","age":"23"},{"name":"周杰伦","age":"35"}] 
console.log('arr2:' + JSON.stringify(arr2));
 //打印结果：arr2:["ping-changxin","周杰伦"] 
console.log('arr3:' + JSON.stringify(arr3)); 
//打印结果：arr3:[{"myName":"ping-changxin","myAge":"23"},{"myName":"周杰伦","myAge":"35"}]

map就相当于拷贝，拷贝的过程中改变数组元素的值。

三、reduce()的常见用法

1.计算数组中所有元素的总和。

const arr = [2, 0, 1, 8, 6]; 
const total = arr.reduce((prev, item) => { return prev + item; });
// 数组求和 
console.log('total:' + total); 
// 打印结果：17

 

2.统计某个元素出现的次数。

function repeatCount(arr, value) { 
if (!arr || arr.length == 0) 
return 0; 
return arr.reduce((totalCount, item) => { totalCount += item == value ? 1 : 0; return totalCount; }, 0);
 }
// 定义方法：统一 value 这个元素在数组 arr 中出现的次数 
let arr1 = [1, 2, 6, 2, 6, 3, 6]; 
console.log(repeatCount(arr1, 6)); // 打印结果：3

 

3.求元素的最大值。

const arr = [2, 0, 11, 20, 6]; 
const maxValue = arr.reduce((prev, item) => {
 return prev > item ? prev : item; 
});
// 数组求最大值 console.log(maxValue); // 打印结果：20

总结：实际开发中，prev 的值往往是动态变化的，这便是 reduce()的精妙之处。以上三个都是简单的案例，如果能熟练运用reduce，那么离大佬也不远了。

四、函数作用域

在函数作用域中，也有声明提前的特性：

var a = 1; function foo() { 
console.log(a); a = 2; 
// 此处的a相当于window.a 
} 
foo();
console.log(a); //打印结果是2


function fun(e) { 
console.log(e); 
} 
// 这个函数中，因为有了形参 e，此时就相当于在函数内部的第一行代码里，写了 var e; fun(); //打印结果为 undefined fun(123);//打印结果为123

注意： 1. 函数中，使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。

2. 函数中，没有var声明的变量都是全局变量，而且并不会提前声明。

3. 定义形参就相当于在函数作用域中声明了变量。

五、构造函数

function Person(name, age, gender) { 
this.name = name;
 this.age = age;
 this.gender = gender;
 this.sayName = function () { 
alert(this.name); 
}; 
}
// 创建一个构造函数，专门用来创建Person对象 
var per = new Person('周杰伦', 18, '男'); 
var per2 = new Person('迪丽热巴', 16, '女'); 
var per3 = new Person('陈奕迅', 38, '男');

构造函数: 是一种特殊的函数，主要用来创建和初始化对象，也就是为对象的成员变量赋初始值。它与 new一起使用才有意义。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个构造函数里面。

六、用[ ]操作属性

格式：对象['属性名'] = 属性值;// 注意，括号里的属性名，必须要加引号 上面这种语法格式，举例如下：

obj['123'] = 789;

特殊的属性名，就不能采用 . 的方式来操作对象的属性。比如说，123这种属性名，如果我们直接写成obj.123 = 789来操作属性，是会报错的

重要：使用`[ ]`这种形式去操作属性，更加的灵活，因为，我们可以在`[ ]`中直接传递一个变量。

七、插入节点

常规用法：

父节点.appendChild(新的子节点); //父节点的最后插入一个新的子节点。

特别强调：

<div class="box11"> <div class="box12">平常心</div> </div> 

<div class="box21"> <div class="box22">是猛男</div> </div>

上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法box11.appendChild(box22)，最后产生的结果是：box22会跑到box11中（也就是说，box22不在box21里面了）。这是一个很神奇的事情。

八、定时器方法的封装

每间隔30ms，将盒子向右移动10px.

function animate(ele, target) {
        //要用定时器，先清除定时器
        //一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
        //我们可以把定时器本身，当成为盒子的一个属性
        clearInterval(ele.timer);
        //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
        //目标值如果大于当前值取正，目标值如果小于当前值取负
        var speed = target > ele.offsetLeft ? 10 : -10;  //speed指的是步长
        ele.timer = setInterval(function () {
            //在执行之前就获取当前值和目标值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
            //因为步长有正有负，所有转换成绝对值来比较
            if (Math.abs(val) < Math.abs(speed)) {
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        }, 30)

好好看注释，懂其中的原理。