前端踩坑

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


<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 DIVdiv>
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: 

"text" id="cc" onchange="function()">

JQuery:

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

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

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

你可能感兴趣的:(前端,JS,ES5,ES6,jQuery)