js--知识点扩充

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34418883

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量77

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2319418/blog/786488

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.Promise

2.Canvas

3.jQuery函数attr()和prop()的区别

a.操作对象不同:"attr"和"prop"分别是单词"attribute"和"property"的缩写，并且它们均表示"属性"的意思。不过，在jQuery中，"attribute"和"property"却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>

在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

<!-- attr()函数针对的是该文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

在jQuery的底层实现中，函数attr()和prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */

// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145

/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */

// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

4.jQuery off()函数的应用

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。

5.Map与Set

Map是一组键值对的结构，具有极快的查找速度。 Map 通过set(xx, yy)来设置值。

var m = new Map([['tom', 89], ['jetty', 59]]);
m.get('jetty');//59
m.has('tom');

在Set中，没有重复的key. 通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

6.具有iterable类型的集合可以通过新的for ... of循环来遍历。

for ... of循环和for ... in循环有何区别？ for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}
for ... in循环将把name包括在内，但Array的length属性却不包括在内。
for ... of循环则完全修复了这些问题，它只循环集合本身的元素：
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}
然而，更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
});

function isNumber(num){
  if(typeof num !== 'Number'){
    throw 'Not a number';
  }
  console.log(num);
}

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数
var, let, const
apply与call 要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。 apply 与call的区别：apply()把参数打包成Array再传入；call()把参数按顺序传入。

var count = 0;
var old_ParseInt = parseInt;

window.parseInt = function(){
  count +=1;
//对普通函数调用，我们通常把this绑定为null。
  old_ParseInt.apply(null, arguments);
}

parseInt('23');
parseInt('33');
parseInt('43');
console.log(count);

8. 闭包

function lazy_sum(arr){
  var sum = function(){
    return arr.reduce(function(x, y){
      return x + y;
    });
  }
  return sum;
}

var f = lazy_sum([1,3,5,7,9]);
console.log(f());

function count(){
  var arr=[];
  for(var i=1; i<=3; i++){
    arr.push(function(){
      return i*i;
    });
  }
  return arr;
}

var results = count();
var f0 = results[0];
var f1 = results[1];
var f2 = results[2];

console.log(f0());//16
console.log(f1());//16
console.log(f2());//16
//测试i变成了4；

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f0 = results[0];
var f1 = results[1];
var f2 = results[2];

console.log(f0());//1
console.log(f1());//4
console.log(f2());//9

function create_counter(initial){
  var x = initial || 0;
  return {
    inc: function(){
      return x +=1;
    }
  }

}
var counter = create_counter(10);
console.log(counter.inc());
console.log(counter.inc());
console.log(counter.inc());

function make_pow(n){
  return function(x){
     return Math.pow(x, n);
  }
}
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(3));
console.log(pow3(3));

箭头函数

x => x * x 相当于：
function(x){return x*x;}

var obj = {
  birth : 1990,
  getAge: function(){
    var b  =this.birth;
    var fn = () => new Date().getFullYear() - this.birth;
    return fn();
  }
}
console.log(obj.getAge());

generator generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

转载于:https://my.oschina.net/u/2319418/blog/786488