前端踩坑

最新推荐文章于 2023-02-08 15:47:07 发布

Robin_Liew

最新推荐文章于 2023-02-08 15:47:07 发布

阅读量307

点赞数 1

分类专栏：前端文章标签： JS ES5 ES6 jQuery

本文链接：https://blog.csdn.net/liubin1991liubin/article/details/81635765

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

##JS相关

JavaScript中原型对象的彻底理解

https://blog.csdn.net/u012468376/article/details/53121081

JS的forEach和map方法的区别

forEach()和map()两个方法都是ECMA5中Array引进的新方法，主要作用是对数组的每个元素执行一次提供的函数，但是它们之间还是有区别的。jQuery也有一个方法$.each(),长得和forEach()有点像，功能也类似。但是从本质上还是有很大的区别的。

//forEach  callback: 为数组中每个元素执行的函数,该函数接收三个参数，
//参数一：当前数组中元素；参数二：索引； 参数三：当前数组。
//this：可选，执行回调时候，this的指向。
array.forEach(callback(currentValue, index, array){
    //do something
}, this)
 
//或者
array.forEach(callback(currentValue, index, array){
    //do something
})　　
 
//map:
var new_array = arr.map(callback[, thisArg])　
 
//$.each()
$(selector).each(function(index,element))  //注意参数的顺序

区别

1.forEach()返回值是undefined，不可以链式调用。
2.map()返回一个新数组，原数组不会改变。
3.没有办法终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();
4.$.each()方法规定为每个匹配元素规定运行的函数，可以返回 false 可用于及早停止循环。

例子

在使用forEach()时候，如果数组在迭代的视乎被修改，则其他元素会被跳过。因为 forEach()不会在迭代之前创建数组的副本。

var words=["one","two","three","four"];
words.forEach(function(word){
	console.log(word);
	if(word==="two"){
		words.shift();
	}
});
//one
//two
//four

["1", "2", "3"].map(parseInt);  //结果  [1, NaN, NaN]　　　

如果想得到[1, 2,3]应该这么做
function returnInt(element){
  return parseInt(element,10);
}
 
["1", "2", "3"].map(returnInt);

这主要是因为　parseInt()默认有两个参数，第二个参数是进制数。当parsrInt没有传入参数的时候，而map()中的回调函数时候，会给它传三个参数，第二个参数就是索引，明显不正确，所以返回NaN了。

JS中对数组的操作

1、数组的创建

var arrayObj = new Array();　//创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值
    要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

2、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

3、数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

4、数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

5、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

6、数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向

7、数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

8、数组元素的字符串化

arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用

js 在一个DIV前、中、后、插入新DIV

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style>
        div {
        border:solid 1px #ff0000;
        }
    </style>
    <script >
        window.onload = function () {
             
            var vtop = "js插入上面";
            var vcenter = "js中插入";
            var vbottom = "js插入下面";
            var vcurrent = document.getElementById("1");
            //上面
            var newNodeTop = document.createElement("div");
            newNodeTop.innerHTML = vtop;
            vcurrent.parentNode.insertBefore(newNodeTop, vcurrent);
            //中间
            var newNodeCenter = document.createElement("div");
            newNodeCenter.innerHTML = vcenter;
            vcurrent.appendChild(newNodeCenter);
            //下面
            var newNodeBottom = document.createElement("div");
            newNodeBottom.innerHTML = vbottom;
            vcurrent.parentNode.insertBefore(newNodeBottom, vcurrent.nextSibling)
 
        }
    </script>
</head>
<body>
    <div id="1">current DIV</div>
</body>
</html>

ES6中的Set和Map

Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

    add(value)：添加某个值，返回Set结构本身。
    delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
    has(value)：返回一个布尔值，表示该值是否为Set的成员。
    clear()：清除所有成员，没有返回值。

s.add(1).add(2).add(2);
// 注意2被加入了两次
 
s.size // 2
 
s.has(1) // true
s.has(2) // true
s.has(3) // false
 
s.delete(2);
s.has(2) // false

Set 结构的实例有四个遍历方法，可以用于遍历成员。


keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

let set = new Set(['red', 'green', 'blue']);
 
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
 
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
 
for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。这意味着，可以省略values方法，直接用for…of循环遍历 Set。

let set = new Set(['red', 'green', 'blue']);
 
for (let x of set) {
  console.log(x);
}
// red
// green
// blue

Set结构的实例的forEach方法，用于对每个成员执行某种操作，没有返回值。

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6

数组的map和filter方法也可以用于 Set

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构：{2, 4, 6}
 
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构：{2, 4}

因此使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
 
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
 
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
 
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
 
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

Map构造函数接受数组作为参数，实际上执行的是下面的算法。

const items = [
  ['name', '张三'],
  ['title', 'Author']
];
 
const map = new Map();
 
items.forEach(
  ([key, value]) => map.set(key, value)
);

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，包括0和-0，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

let map = new Map();
 
map.set(-0, 123);
map.get(+0) // 123
 
map.set(true, 1);
map.set('true', 2);
map.get(true) // 1
 
map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3
 
map.set(NaN, 123);
map.get(NaN) // 123

遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。

Map有size()属性，查看Map对象大小，set(key , value) , get(Key), delete(key) , has(key) ，clear()方法。

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。


需要特别注意的是，Map 的遍历顺序就是插入顺序。
const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
 
for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"
 
for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"
 
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
 
// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"
 
// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

Map 结构转为数组结构，比较快速的方法是使用扩展运算符（…）。


    const map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
     
    [...map.keys()]
    // [1, 2, 3]
     
    [...map.values()]
    // ['one', 'two', 'three']
     
    [...map.entries()]
    // [[1,'one'], [2, 'two'], [3, 'three']]
     
    [...map]
    // [[1,'one'], [2, 'two'], [3, 'three']]

结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）。

    const map0 = new Map()
      .set(1, 'a')
      .set(2, 'b')
      .set(3, 'c');
     
    const map1 = new Map(
      [...map0].filter(([k, v]) => k < 3)
    );
    // 产生 Map 结构 {1 => 'a', 2 => 'b'}
     
    const map2 = new Map(
      [...map0].map(([k, v]) => [k * 2, '_' + v])
        );
    // 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

数组的合并

concat(Array) 方法

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
array1.concat([item1[, item2[, . . . [, itemN]]]])

//concat()把两个或者多个数组链接在一起，但是不改变已经存在的数组
//而是返回一个链接之后的新数组
var a = [1,2,3];
a.concat([4,5]);
console.log(a);
//此处输出为 [1, 2, 3]

var a = [1,2,3];
a = a.concat([4,5]);
console.log(a);
//此处输出为 [1, 2, 3 ,4 ,5]

## jQuery相关 ### jQuery中数组与json串之间的转换 - 现代浏览器中提供了JSON.stringify()方法将数组，对象转成json。 - JSON.stringify(object) 把一个对象转换成json字符串， - JSON.parse(jsonStr) 把一个json字符串解析成对象。 ### JQuery判断某id元素是否存在（$(“#id”) 不管对象是否存在都会返回 object） - 方法一

if($("#id名")[0]){
 存在
} else {
 不存在
}

方法二

if(document.getElementById("id名")){
  存在
} else {
 不存在
}

方法三

if($("#id名").length>0){
 存在
}else{
 不存在
}

jQuery判断标签是否存在

if($("标签名").size()>0){

   存在
}

js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

js 获取元素(父节点,子节点,兄弟节点)

   var test = document.getElementById("test");
　　var parent = test.parentNode; // 父节点
　　var chils = test.childNodes; // 全部子节点
　　var first = test.firstChild; // 第一个子节点
　　var last = test.lastChild; // 最后一个子节点　
　　var previous = test.previousSibling; // 上一个兄弟节点
　　var next = test.nextSbiling; // 下一个兄弟节点

jquery 获取元素(父节点,子节点,兄弟节点)

    $("#test1").parent(); // 父节点
    $("#test1").parents(); // 全部父节点
    $("#test1").parents(".mui-content");
    $("#test").children(); // 全部子节点
    $("#test").children("#test1");
    $("#test").contents(); // 返回#test里面的所有内容，包括节点和文本
    $("#test").contents("#test1");
    $("#test1").prev();  // 上一个兄弟节点
    $("#test1").prevAll(); // 之前所有兄弟节点
    $("#test1").next(); // 下一个兄弟节点
    $("#test1").nextAll(); // 之后所有兄弟节点
    $("#test1").siblings(); // 所有兄弟节点
    $("#test1").siblings("#test2");
    $("#test").find("#test1");

元素筛选

    // 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
    $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
    $("ul li").first(); // 选取ul li中匹配的第一个元素
    $("ul li").last(); // 选取ul li中匹配的最后一个元素
    $("ul li").slice(1, 4); // 选取第2 ~ 4个元素
    $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素
    $(id).find("input").val();//id元素下第一个input标签
    $(this).children('td').eq(1).addClass('red');//某标签的第一个td字标签

jquery 判断一个元素当前状态是隐藏或显示

$("#id").is(':visible');            true 为显示 false 为隐藏

$("#id").is(":hidden");         true 为隐藏 false 为显示

jQuery实现点击页面获得当前点击元素的id或其他信息


$(document).click(function(e) { // 在页面任意位置点击而触发此事件
  $(e.target).attr("id");       // e.target表示被点击的目标  获取id
  $(e.target).addClass('bg');     // 设置背景色
})

input 内容改变的触发事件

在元素的值改变了且失去焦点时触发（两次的值一样不会触发）
缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的function() 或者调.change()方法。

JS： 

<input type="text" id="cc" onchange="function()">

JQuery:

$("#cc").change(function(){});

在input或textarea的值发生改变时触发，不需要等到元素失去焦点，是实时的。它是HTML5的事件，可用于检测文本类输入框的值。
缺陷：从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。

JS：

<input type="text" oninput="functionName()">

JQuery: 

$("#cc").on('input propertychange',functionName);

## 布局相关 ### table设置表格有滚动条 - 增加overflow-y: scroll;相关属性。

# 插件相关 ### ag-grid 使用手册：https://blog.fundodoo.com/docs/ag-grid/reference/grid-properties 简单使用：https://blog.csdn.net/div_ma/article/details/78831171

欢迎扫码关注获取更多的信息
在这里插入图片描述

Robin_Liew

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端踩坑

JS相关JavaScript中原型对象的彻底理解https://blog.csdn.net/u012468376/article/details/53121081JS的forEach和map方法的区别forEach()和map()两个方法都是ECMA5中Array引进的新方法，主要作用是对数组的每个元素执行一次提供的函数，但是它们之间还是有区别的。jQuery也有一个方法$.e...
复制链接

扫一扫

专栏目录