Skip to content

js

Jump to bottom
jiang2016tao edited this page Jul 10, 2018 · 49 revisions

js编码问题

encodeURIComponent使用：http://www.w3school.com.cn/jsref/jsref_encodeURIComponent.asp
decodeURIComponent使用：http://www.w3school.com.cn/jsref/jsref_decodeURIComponent.asp
js面向对象之公有、私有、静态属性和方法详解:http://www.jb51.net/article/64278.htm
js中call()和apply()方法用法总结 参考：http://blog.csdn.net/ganyingxie123456/article/details/70855586

js复制

在项目中有时候我们需要在某个地方，对一些文本进行复制的操作。js提供document.execCommand("copy")在浏览器执行复制命令，但是在执行命令前必须要对文本进行选中，可以用select()方法。注意select()方法只对和<textarea></textarea>这两个标签有效。

$(e.target).closest("div").find("input")[0].select();
            document.execCommand("copy");

通常复制的内容是我们不想展示的，这个时候input和textarea不能设置隐藏，或者改变高度和宽度为0，这些都会影响功能。只能将其设为透明的，不想占用位置，可以设置position:ablute。（这是在项目中遇到的解决方法）

ES6

const {
  state = {}, //rootState
  plugins = [], // 插件
  strict = false //是否严格模式
   } = options

上面的js语法分析，说白了其实就是一个赋值的逻辑。在options对象中如果存在属性state的对象，那么state就是被覆盖，取后面的数据；反之如果没有那么就是前面大括号里的默认值了。其实这就是一次性定义了多个变量。这就是所谓的结构解析。

结构解析

结构解析：从数组和对象中提取值对变量进行赋值。变量和赋值的值是一一对应的。

<script>
    let [a,b]=[1,2];
    console.log(a);//1
    console.log(b);//2

    let {c=1,d=2}={c:3,d:4};
    console.log(c);//3
    console.log(d);//4

    //一一对应
    let [,,g]=[5,6,7];
    console.log(g);//7

    //这里...i会将后面的所有值当数组一样赋值给i
    let [h,...i]=[8,9,10,11];
    console.log(h);//8
    console.log(i);//9,10,11
</script>

在结构解析时，给变量赋值默认值，如果在右侧的数组和对象中有值，就会被重新赋值，否则使用默认值。但是undefined不会覆盖默认值。

//默认赋值
    let [j="jiang",k,l="test"]=[,12,undefined];
    console.log(j);//jiang
    console.log(k);//12
    console.log(l);//test

在数组解析中都是数组，可迭代的。
只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。
下面例子参考：高阶函数generator

let [m,n,o]=new Set([13,14,15]);
    console.log(m);
    console.log(n);
    console.log(o);
    //generator（生成器）是ES6标准引入的新的数据类型.可以返回多次，[高阶函数generator](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450083887673122b45a4414333ac366c3c935125e7000)
    function* fibs() {
        let a=0;
        let b=1;
        while (true){
            yield a;//这句是返回的值
            [a,b]=[b,a+b];
        }
    }
    let [p,q,w]=fibs();
    console.log(w);

对象解构：对象解构是不需要一一对应的。

let {name,age}={age:28,name:"jiang"};
    console.log(name);
    console.log(age);

当变量与对象的属性名不一致时：

 let {name:person_name,age:person_age}={age:28,name:"jiang"};
    console.log(person_name);

默认值，这与数组类似。只有对象属性为undefined的，才不会赋值默认值，其他的都会。

let {x=3,y=4}={x:undefined,y:null};
    console.log(x);//3
    console.log(y);//null

当变量与对象的属性名不一致时,赋值：

let {message:msg="hello world"}={};
    console.log(msg);

对象现有方法的赋值类似对象属性赋值变量。
字符串的解构赋值：类似将字符串分割成数组了。

let [a,b,c]="ABC";
    console.log(a);
    console.log(b);
    console.log(c);

字符串属性的解构：类似将字符串当做对象了。

let {length}="ABCD";
    console.log(length);

函数参数的解构：

function test([x,y]){
        return x+y;
    }
    console.log(test([2,3]));

函数参数带默认值：

function test2({x=1,y=0}={}) {
        return x+y;
    }
    console.log(test2());
    console.log(test2({x:4}));
    console.log(test2({y:4}))

下面是函数参数带默认值的错误实例：

function test3({x,y}={x:2,y:3}){
        return x+y;
    }
    console.log(test3());

解构的用途

交换变量的值

var a=100;
    var b=100;
    var temp=a;
    a=b;
    b=a;

上面的代码是ES5，目的是交换a和b的值。那么下面用ES6来写。

let x=100;
    let y=200;
    [x,y]=[y,x];
    console.log(x);
    console.log(y);

看看，只用[x,y]=[y,x];就解决了，是不是更简洁。

从函数返回多个值

无非就是函数返回对象或数组，在将对象或数组解构给变量。

函数参数的定义

1.参数是有序的。采用数组，在解构给变量。

function test([x,y]){}

2.参数是无序的。采用对象，再解构给变量。

function test2({x,y}){}

当然，可以将数组和对象封装好了传给函数。

提取JSon数据

通过解构将一个大的json对象拆分为多个变量或对象。

函数参数的默认值

遍历Map

<script>
    let map=new Map();
    map.set("id","12");
    map.set("name","jiang");
    //注意是数组，不要使用对象了
    for(let [key,value] of map){
        console.log(key);
        console.log(value);
    }
    for(let [key] of map){
        console.log(key);
    }
    for(let [,value] of map){
        console.log(value);
    }
</script>

输入模块的引入

就是指定引入模块的部分方法等。
其实这些都是使用了，目前的对象解构和数组解构的。
在js文件中，到处模块，如果要到处多个使用export ,使用export default默认是一个文件只导出一个。
ES6规定：var和function声明的全局变量是全局对象的属性；let、const和class声明的全局变量不是全局对象的属性。举个例子：

<script>
    var temp="test";
    console.log(window.temp);
    function testFun(){};
    console.log(window.testFun);

    let temp1="test";
    console.log(window.temp1);
    const temp2="temp2";
    console.log(window.temp2);

</script>

如上面代码后面两个都是undefined，可见在浏览器的全局变量window里没有那两个属性。在nodejs中全局变量是gload。

移动端触屏触发事件

https://www.cnblogs.com/susanws/p/5717811.html

触发屏幕和点击事件依次的顺序：touchstart,touchmove,touchend,click

让软键盘出现search按钮的使用方式

<form @keydown.enter="searchGraph()">
                            <input type="search" class="search-input" :style="'width:'+inputSearchWidth" placeholder="图形名称 / 指标ID" v-model="searchText" @focus="searchInputFocus()" @blur="searchInputBlur()"/>
                            <i class="wbk-ground-img-Search_Dft" @click="searchGraph()"></i>
                        </form>

将input的type设置为search，并且要放在form标签里面。

移动端页面 滚动结束 判断

参考https://www.cnblogs.com/zldream1106/p/mobile_scroll_end.html

数据的双向绑定

用了一些双向数据的绑定，但是没有仔细研究那些框架是如何做到进行双向绑定的。今天来学习一下如何用js简单的做双向绑定，希望对以后的学习有帮助。JavaScript实现一个双向数据绑定
通过Object.defineProperty来定义新属性或修改原有的属性。其语法如下：

Object.defineProperty(obj, prop, descriptor)

语法中，obj是需要操作的目标对象，prop是需要定义或修改的属性名字，descriptor所拥有的特性。然而，关于descriptor目前有两种形式：数据描述和存取器描述。关于存取器描述，它允许我们定义get，set等其它属性。
具体如何应用，我给大家举一个例子：

<body>
    <div id="app">
        <input type="text" id="text"/>
        <p id="show_text"></p>
    </div>
</body>
<script>
    let obj={};
    let inputDom=document.getElementById("text");
    let showDom=document.getElementById("show_text");
    Object.defineProperty(obj,"txt",{
        get:function () {
            return obj;
        },
        set:function (value) {
            showDom.innerText=value;
        }
    });
    inputDom.addEventListener("keyup",function(e){
        obj.txt=e.target.value;
    })
</script>

Clone this wiki locally