💎前端Javascript知识点总结😎

作者：Seeker小颜

组织：SeekerCode

官网：http://seekercode.cn/

QQ群：917722581

※基本运算符

1. 短路运算符（||、&&）

let a = 4399<0 || typeof(4399+'');
let b = 4399>0 && typeof(4399+'');
console.log(a);
console.log(b);
/*    
    常用：给函数的参数定义一个默认值的时比较有用
    解释：
        1、||: 4399<0 => false；
           &&: 4399>0 => true；
        2、typeof(4399+'') => string;
        3、在这边的短路运算符的意思就是左边为false，则将进行值赋；
    函数写法：
        if(a >=5){ 
            alert("你好"); 
        } 
        以上简成： 
        a >= 5 && alert("你好"); 
*/

※Object

暂无

※Array

方法(Method)

（1）for...in

遍历index，通过index可以获得其他值

var arr = ['a', 'b', 'c', 'd', 'e'];
// 浏览器必须支持 for...in 循环
for (let index in arr) {
  console.log(arr[index]);
}

（2）for...of

遍历item，即值

var arr = ['a', 'b', 'c', 'd', 'e'];
// 浏览器必须支持 for...of 循环
for (let letter of arr) {
  console.log(letter);
}

（3）Array.every()

对数组中每一项进行给定函数，如果每一项都返回true，则返回true；

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.every(function(item,index,array){
    return item>2;
});

console.log(everyResult);   //    false

（4）Array.some()

对数组中每一项进行给定函数，如果任意一项都返回true，则返回true；

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.some(function(item,index,array){
    return item>2;
});

console.log(everyResult);   //    true

（5）Array.filter

对数组中每一项进行给定函数，返回该函数会返回true的项组成的数组；

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.filter(function(item,index,array){
    return item>2;
});

console.log(everyResult);   //    [3,4,5,4,3]

（6）Array.map

对数组中每一项进行给定函数，返回每次函数调用的结果组成的数组；

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.map(function(item,index,array){
    return item*2;
});

console.log(everyResult);   //  [2, 4, 6, 8, 10, 8, 6, 4, 2]

（7）Array.forEach

对数组中每一项进行给定函数，没有返回值，和for循环类似；

var numbers = [1,2,3,4,5,4,3,2,1];

numbers.forEach(function(item,index,array){
    if(item!=2){
        numbers.splice(index,1,2);
    }
});

console.log(numbers);   //  [2, 2, 2, 2, 2, 2, 2, 2, 2]

（8）Array.reduce/reduceRight（ES5）

ES5新增了两个归并数组的方法：reduce()和reduceRight()。这两个方法迭代数组所有项，然后构建一个最终返回的值。reduce从左到右，reduceRight从右到左。

var values = [1,2,3,4,5];

var sum = values.reduce(function(prev,cur,index,array){
    return prev + cur;
});
console.log(sum); //15

（9）栈方法（push、pop）

栈方法是指Last-In-First-Out后进先出

Array.push() //  从数组末尾添加
Array.pop()  //  从数组末尾移除

（10）队列方法(unshift()、shift())

队列方法是First-In-First-Out先进先出

Array.unshift()  //  从数组前端添加
Array.shift()    //  从数组前端移除

（11）重排序方法（reverse、sort）

Array.reverse()  //  反转数组
Array.sort()     //  排序
var values = [0,1,5,10,15];
values.reverse();  //  [15, 10, 5, 1, 0]
values.sort(function(a,b){
    return b-a;
});//  [15, 10, 5, 1, 0]

（12）操作方法(concat )

`Array.concat()`

复制或者从尾部添加–>创建新数组
先创建一个当前数组的副本，然后将接到的数组添加到末尾，返回新的数组。如果没有传参数，直接复制返回新构建的数组。

var values = [1,2,3];
var v1 = values.concat();
var v2 = values.concat(4);

console.log(values);  //[1,2,3]
console.log(v1);      //[1,2,3]
console.log(v2);      //[1,2,3,4]

`Array.slice()`

复制或截取数组–>创建新数组
截取当前数组的一部分创建一个新数组。可以接受一个或者两个参数，只有一个参数时返回指定位置到尾部的数组。两个参数时，返回指定位置到结束位置之前但不包括结束位置的数组。

var values = [1,2,3];
var v1 = values.slice();
var v2 = values.slice(1);
var v3 = values.slice(1,3);

console.log(values);  //[1,2,3]
console.log(v1);      //[1,2,3]
console.log(v2);      //[2,3]
console.log(v3);      //[2,3]

`Array.splice()`

删除、插入、替换，号称最强大的数组方法

删除

可以删除任意数量的项，需要两个参数，要删除的第一项的位置和要删除的项数。

var values = [1,2,3,4,5,6];
var v = values.splice(0,2);

console.log(values);  //[3,4,5,6]
console.log(v);       //[1,2]

※String

暂无

※Map

*注：对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

1. Map与Object的区别

图片说明

2. 方法（Method）

（1）Map.clear()

移除Map对象的所有键/值对。

（2）Map.delete(key)

如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 *false*。随后调用 Map.prototype.has(key) 将返回 false 。

（3）Map.entries()

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1.entries();

console.log(iterator1.next().value);
// expected output: ["0", "foo"]

console.log(iterator1.next().value);
// expected output: [1, "bar"]

（4）Map.forEach(value, key, map)

当前的 value
当前的 key

正在被遍历的 Map 对象

new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach((value, key, map) => {
  console.log(`m[${key}] = ${value}`);
});

// expected output: "m[foo] = 3"
// expected output: "m[bar] = [object Object]"
// expected output: "m[baz] = undefined"

（5）Map.get(key)

目标key；返回键对应的值，如果不存在，则返回undefined

（6）Map.set(key, value)

设置Map对象中key的value。返回该Map对象。

（7）Map.has(key)

目标key；不传递则返回undefined

（8）Map.keys()

返回一个新的 Iterator对象，它按插入顺序包含了Map对象中每个元素的键

（9）Map.prototype.values()

返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的值