js知识点

* ES6

1、变量申明

　　- var 会有变量提升的效果；

　　- let 变量， const常量，都是块级作用域；

注意：const常量，被赋值完就不可再更改；但如果是一个对象，那么对象所包含的值是可以更改的，不变的是对象的地址

    const ss = { name: 'cc' };
    // 没毛病，改变的是值，不是地址
    ss.name = 'yy'
    // 如果这样子就会报错了
    //student  = { name: 'yy' }

const funcs2 = [];
    for (let i = 0; i < 10; i++) {   //这里用var i = 0 ，下面输出10个10
        funcs2.push(function() {
            console.log(i)
        })
    }
    //不加下面这行，只打印10
    //加了之后打印，0 ~ 9
    //funcs1.forEach(func => func())

2、字符串

　　- es5中来进行多行字符串拼接。 es6直接反引号拼接·· ~下面的那个符号

    const template = `<div>
        <span>hello world</span>
    </div>`;

    var str1 = 'hahay'
    console.log(str1.includes('y')); // true
    console.log(str1.repeat(3)); //hahayhahayhahay 重复三次，按Math.floor(num)计算重复的次数
    
    var str2 =  'hello world!'
    console.log(str2.startsWith('hello')) // true
    console.log(str2.endsWith('!')) // true

3、函数

　　- 有且仅有一个参数时，括号（）可以省略；有且仅有一个表达式时，可以省略{}和return；　

var people = name => 'hello' + name;
people('xx');

4、数组

var arr = [1, 2, 3];
arr.forEach(v => console.log(v));

* 基础

1、数字类型转换

//2、其他类型转换为Number
var r1 = Number(null);      // 0, typeof ret = "number"
var r2 = Number(undefined);  //NaN
var r3 = Number(true);       // 1

//2.1、string转换为Number，【存在除了数字和小数点以外的其他字符，则转换失败，值为NaN】
var n1 = Number("12+3");    //NaN 

//2.2 parseInt(),【从第一个非空字符开始（空格、换行、tab），直到遇到第一个非数字字符为止】
var p1 = parseInt("12+3"); //12  
var p2 = parseInt("a123"); //NaN

//2.3 parseFloat() ,【遇到的第一个小数点有效，第二个小数点就无效了】
var f1 = parseFloat("12..3");  //12.3
var f2 = parseFloat("12.3+123"); //12.3


//3、其他类型转换为string类型
var s1 = "hello" +null;             //"hellonull"
var s2 = "hello" + undefined;       //"helloundefined"
var s3 = typeof true.toString();    //"string"


//4.其他类型转换bool类型

//4.1 为false的情况
var b1 = Boolean(0);
var b2 = Boolean("");
var b3 = Boolean(NaN);
var b4 = Boolean(undefined);
var b5 = Boolean(null);

//4.2绝大多数都是为true的，除了上面那几种为false的情况
var b6 = Boolean(1);
var b7 = Boolean("null");

//5、prompt("") 接收外部的数据，默认是字符串类型
var k1 = parseInt(prompt("请输入年龄"));

数字类型转换

2、函数及时调用

(function(){       //1、立即调用函数：将函数用一对()括起来
    console.log("学习");   
})();

3、数字

数字Number，包括浮点数【必须有小数点并且小数点后必有一位数字】，整数；

特殊的数字： NaN表示不是数字，与任何值都不相等；

　　　　　　 infinity 表示超出js可以表示的范围的数据，数字除以0得到的是inifinity

4、时间测试

// 启动计时器
console.time('testForEach');

// (写一些测试用代码)
(function f1(){
    var arr = [];
  for(var i=0; i<10; i++){
      arr.push(i);
  }
})();

// 停止计时，输出时间
console.timeEnd('testForEach');

5、typeof 、instanceof

　- typeof 返回值类型都是string类型，有number、string、boolean、object、function、undefined；

　- typeof(null) === "object"， typeof(undefined) === "undefined"；

　- 对象、数组、null返回值是object；

　- 函数返回function, 如typeof(eval)、typeof(Date);

- 没有定义的（不存在的变量、函数或者undefined），将返回undefined；

注：判断是否是对象时，用instanceof, 因为 typeof null 也返回object；值类型时用typeof；判断变量是否存在用typeof， typeof a == "undefined"

var a;
//判断变量是否存在
typeof a == "undefined"; 

//判断变量是否是某个对象的实例
var b = new Array();
b instanceof Array;
b instanceof Object;

6、toString() valueOf()

　　js中所有数据类型都有valueOf(）和 toString()方法，除null外；

　　- toString() ：返回object的字符串表示，【1,2,3】.toString(); 返回"1,2,3" (function(x) {return x*2;}).toString()；返回“function(x){return x*2;}”

　　- valueOf() ：返回该object自身。可以定义新的valueOf()方法，返回需要的结果。

var bbb = { 
     i: 10, 
     toString: function() { 
         console.log('toString'); 
         return this.i; 
     }, 
     valueOf: function() { 
         console.log('valueOf'); 
         return this.i; 
     } 
}; 
alert(bbb);// 10 toString  ,因为alert("")中间接受的是字符串，所以会调用toString()方法
alert(+bbb); // 10 valueOf ，整体"+bbb"调用了toString()，而bbb调用了valueOf()
alert(''+bbb); // 10 valueOf 
alert(String(bbb)); // 10 toString 
alert(Number(bbb)); // 10 valueOf 
alert(bbb == '10'); // true valueOf 
alert(bbb === '10'); // false ，全等操作符，第一步判断类型，因为类型不等，所以不会接着判断

注：valueOf偏向于运算，toString偏向于显示。

　　1、在进行强转字符串类型时优先调用toString方法，强转为数字时优先调用valueOf。

　　2、有运算符的情况下，valueOf的优先级高于toString

7、深度拷贝js对象

function clone(item) {
　　var type = typeof item,
　　　　baseTypes = ['boolean','number','string','undefined'],
　　　　result;
　　//使用typeof 可以准确判断出 boolean string number undefined
　　//null 使用全等方式进行判断
　　if(baseTypes.indexOf(type) >= 0 || item === null){
　　　　result = item;
　　}else if(Object.prototype.toString.call(item) === "[object Array]"){ // 判断是否为数组
　　　　result = [];
　　　　//循环数组，将数组内容放到新数组中
　　　　item.forEach(function (i) {
　　　　　　result.push(clone(i));
　　　　})
　　}else if(Object.prototype.toString.call(item) === "[object Object]"){ // 判断是否为对象
　　　　result = {};
　　　　//遍历对象，将对象中内容放到新对象中(未考虑对象中元素是否包含引用类型)
　　　　for(var i in item){
　　　　　　result[i] = clone(item[i]);  //递归调用
　　　　}
　　}else{
　　　　result = item;
　　}
　　　　return result;
}

　　- 简单方法

function clone(item) {
　　var jsonStr = JSON.stringify(item);
　　return JSON.parse(jsonStr);
}

* Demo

1、复制

function oCopy() {
            var clipboard = new Clipboard(document.querySelectorAll('img'), {
                text: function (trigger) {
                    var target = trigger.getAttribute('data-clipboard-target');
                    if (target && target === '#ltlnotGiveMoney') {
                        return $(target).html().replace(new RegExp(',', 'g'), "");
                    }
                }
            });

            // 复制内容到剪贴板成功后的操作
            clipboard.on('success', function (e) {
                    layer.tips('@LocalHelper.Lang("Font_fuzhichenggong")', e.trigger, {
                    tips: [2, '#78BA32'],
                    time: 1000
                });
            });
        }

复制

str.replace(new RegExp(',', 'g'), ""); replace只是替换第一个，后面的不会替换

* 调试

Pause/Resume script execution：F8 暂停/恢复脚本执行（程序执行到下一断点停止）。

Step over next function call：F10 执行到下一步的函数调用（跳到下一行）。

Step into next function call：F11 进入当前函数。

Step out of current function：shift + F11 跳出当前执行函数。

Deactive/Active all breakpoints：ctrl + F8 关闭/开启所有断点（不会取消）。

Pause on exceptions：异常情况自动断点设置。

var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals)