VUE学习中的一些JS知识点_vue charat

目录

JS-JS事件流事件捕获及事件冒泡

 JS-JS的箭头函数

通过call、apply调用箭头函数

不绑定arguments

箭头函数不能使用new操作符

箭头函数没有prototype属性

箭头函数不能用作生成器

返回对象字面量时

JS-JS几个基础函数

1.函数：split()

2.函数：join()

3.函数:concat（）

4.函数:charAt()

5:函数:charCodeAt()

6.函数:slice()

7.函数:substring()

8.函数:substr

js中的四种for循环

 简单for 循环---循环代码块一定的次数

for-in---循环遍历对象的属性

for-in 不仅仅遍历 array 自身的属性，其还遍历 array 原型链上的所有可枚举的属性。下面我们看个例子：

for-in 并不适合用来遍历 Array 中的元素，其更适合遍历对象中的属性，这也是其被创造出来的初衷。却有一种情况例外，就是稀疏数组。考虑下面的例子：

forEach---ES5引入新循环

for-of---ES6新引入循环

那 for-of 到底可以干什么呢？

最后贴一个最近刷到的涉及forEach和for-of去别的大厂面试题：

JavaScript indexOf() 方法

定义和用法

语法

说明

提示和注释

实例

JavaScript Array filter() 方法

实例

定义和用法

语法

参数说明

技术细节

更多实例

JavaScript sort() 方法

实例

定义和用法

语法

参数 Values

返回值

技术细节

更多实例

实例

实例

实例

JS文件接口的暴露和引用

html文件和js文件如何引入文件外部的js代码？

1、html文件

2、js文件

JS-JS事件流事件捕获及事件冒泡

 JS-JS的箭头函数

引入箭头函数的作用：更简短的函数并且不绑定this

通过call、apply调用箭头函数

由于箭头函数没有自己的this指针，通过call()、apply()方法调用时，第一个参数会被忽略。（箭头函数中若用了this，这个this指向包裹箭头函数的第一个普通函数的 this。）

不绑定arguments

大多数情况下，使用剩余参数是相较于arguments对象的更好选择。

箭头函数不能使用new操作符

箭头函数不能用作构造器，和 new一起用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

箭头函数没有prototype属性

箭头函数不能用作生成器

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。

返回对象字面量时

箭头函数返回简单值时可以简写成：

let sum = ( x, y ) => x + y

but返回对象字面量时不口以这样var func = () => {foo: 1},需要用圆括号括起来

var func = () => ({foo: 1});

作者：何大必
链接：https://www.jianshu.com/p/f853d6a7b548
来源：简书

JS-JS几个基础函数

1.函数：split()

功能：使用一个指定的分隔符把一个字符串分割存储到数组

例子： str=”jpg|bmp|gif|ico|png”; arr=str.split(”|”);
//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组

2.函数：join()

功能：使用您选择的分隔符将一个数组合并为一个字符串

例子： var delimitedString=myArray.join(delimiter);
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);
var portableList=myList.join(”|”);
//结果是jpg|bmp|gif|ico|png

3.函数:concat（）

功能：将两个数组连接在一起；

例子：arr1=[1,2,3,4]
　　arr2=[5,6,7,8]
　　alert(arr1.concat(arr2))  //结果为[1,2,3,4,5,6,7,8]

4.函数:charAt()

功能：返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

例子:var str='a,g,i,d,o,v,w,d,k,p'

alert(str.charAt(2)) //结果为g

5:函数:charCodeAt()

功能：charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

例子：var str='a,g,i,d,o,v,w,d,k,p'

alert(str.charCodeAt(2)) //结果为103。即g的Unicode编码为103

6.函数:slice()

功能：arrayObject.slice(start,end)

　　start:必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

　　end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

　　返回一个新的数组，包含从start到end（不包括该元素）的arrayobject中的元素。

例子：var str='ahji3o3s4e6p8a0sdewqdasj'
　　alert(str.slice(2,5))   //结果ji3

7.函数:substring()

定义和用法 substring 方法用于提取字符串中介于两个指定下标之间的字符。

语法 stringObject.substring(start,stop)

start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。

stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回 一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。 说明 substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。 如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。 如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。 如果 start 或 end 为负数，那么它将被替换为 0。

例子:var str='ahji3o3s4e6p8a0sdewqdasj'
alert(str.substring(2,6))   //结果为ji3o3

8.函数:substr

定义和用法 substr 方法用于返回一个从指定位置开始的指定长度的子字符串。

语法 stringObject.substr(start [, length ])

参数 start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

　　 length 可选。在返回的子字符串中应包括的字符个数。 说明 如果 length 为 0 或负数，将返回一个空字符串。 如果没有指定该参数，则子字符串将延续到stringObject的最后。

举例： var str = "0123456789";

　　 alert(str.substring(0));------------"0123456789"
　　 alert(str.substring(5));------------"56789"
　　alert(str.substring(10));-----------""
　　alert(str.substring(12));-----------""
　　alert(str.substring(-5));-----------"0123456789"
　　alert(str.substring(-10));----------"0123456789"
　　alert(str.substring(-12));----------"0123456789"
　　alert(str.substring(0,5));----------"01234"
　　alert(str.substring(0,10));---------"0123456789"

js中的四种for循环

总结一下JavaScript 中的 for 循环

写在前面

最近刷题时遇到了几种不同for循环，因为没有深入了解导致做题时无法区分它们的用法，尤其是在以及在使用时的注意点。

因此本文主要对js中的四种for循环进行总结区分。

文章最后通过一个面试题加深对不同for循环的认识和使用。

遍历数组是非常常见的，在这里强调一点：

Array 在 Javascript 中是一个对象， Array 的索引是属性名。此处输出的索引值，即 “0″、 “1″、 “2″不是 Number 类型的，而是 String 类型的，因为其就是作为属性输出，而不是索引。

在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是：· for 、 for-in 、 forEach 

在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循环，是：for-of 

接下来讲讲这四种循环的写法和适用场景。

 简单for 循环---循环代码块一定的次数

先来看一下常见写法：

const arr = [1, 2, 3];
for(let i = 0; i　< arr.length; i++) {
    console.log(arr[i]);
}

如果数组长度在循环过程中不会改变，将数组长度用变量存储起来会获得更好的效率，改进后的写法：

const arr = [1, 2, 3];
for(let i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

for-in---循环遍历对象的属性

用 for-in 来遍历一遍数组的内容，代码如下：

const arr = [1, 2, 3];
let index;
for(index in arr) {
    console.log("arr[" + index + "] = " + arr[index]);
}
// 输出结果如下
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3

for-in 循环遍历的是对象的属性，而不是数组的索引。因此， for-in 遍历的对象不局限于数组，还可以遍历对象。

const person = {
    fname: "san",
    lname: "zhang",
    age: 29
};
let info;
for(info in person) {
    console.log("person[" + info + "] = " + person[info]);
}
// 输出结果如下
// person[fname] = san 
// person[lname] = zhang 
// person[age] = 29

 要注意的是，for-in 遍历属性的顺序并不确定，即输出的结果顺序与属性在对象中的顺序无关，也与属性的字母顺序无关，与其他任何顺序都无关。

前面已经强调过，Array 在 Javascript 中是一个对象， Array 的索引是属性名。此处输出的索引值，即 “0″、 “1″、 “2″不是 Number 类型的，而是 String 类型的，因为其就是作为属性输出，而不是索引。

for-in 只能遍历“可枚举的属性”， length 属于不可枚举属性，实际上， Array 对象还有许多其他不可枚举的属性。

修改一下前面遍历数组的例子：

const arr = [1, 2, 3];
arr.name = "Hello world";
let index;
for(index in arr) {
    console.log("arr[" + index + "] = " + arr[index]);
}
// 输出结果如下：
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3 
// arr[name] = Hello world

for-in 不仅仅遍历 array 自身的属性，其还遍历 array 原型链上的所有可枚举的属性。下面我们看个例子：

Array.prototype.fatherName = "Father";
const arr = [1, 2, 3];
arr.name = "Hello world";
let index;
for(index in arr) {
    console.log("arr[" + index + "] = " + arr[index]);
}

同样的，输出结果如下：

arr[0] = 1
arr[1] = 2
arr[2] = 3
arr[name] = Hello world
arr[fatherName] = Father

for-in 并不适合用来遍历 Array 中的元素，其更适合遍历对象中的属性，这也是其被创造出来的初衷。却有一种情况例外，就是稀疏数组。考虑下面的例子：

let key;
const arr = [];
arr[0] = "a";
arr[100] = "b";
arr[10000] = "c";
for(key in arr) {
    if(arr.hasOwnProperty(key)  &&    
        /^0$|^[1-9]\d*$/.test(key) &&    
        key <= 4294967294               
        ) {
        console.log("arr[" + key +  "] = " +arr[key]);
    }
}

输出结果如下：

arr1[0] = a
arr1[100] = b
arr1[10000] = c

for-in 只会遍历存在的实体，上面的例子中， for-in 遍历了3次（遍历属性分别为”0″、 “100″、 “10000″的元素，普通 for 循环则会遍历 10001 次）。所以，只要处理得当， for-in 在遍历 Array 中元素也能发挥巨大作用。

为了避免重复劳动，我们可以包装一下上面的代码：

function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && 
        /^0$|^[1-9]\d*$/.test(prop) && 
        prop <= 4294967294; // 2^32 - 2
}

使用示例如下：

for (let key in arr) {
    if (arrayHasOwnIndex(arr, key)) {
        console.log("arr[" + key + "] = " + arr[key]);
    }
}

每次迭代操作会同时搜索实例或者原型属性， for-in 循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的 1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用 for-in 循环。如果需要遍历一个数量有限的已知属性列表，使用其他循环会更快，比如下面的例子：

const obj = {
    "prop1": "value1",
    "prop2": "value2"
};

const props = ["prop1", "prop2"];
for(let i = 0; i < props.length; i++) {
    console.log(obj[props[i]]);
}
// 输出结果如下
// value1
// value2

 上面代码中，将对象的属性都存入一个数组中，相对于 for-in 查找每一个属性，该代码只关注给定的属性，节省了循环的开销和时间。

forEach---ES5引入新循环

const arr = [1, 2, 3];
arr.forEach((data) => {
    console.log(data);
});
// 输出结果如下
// 1 
// 2 
// 3

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）。 callback 函数会被依次传入三个参数：

• 数组当前项的值；
• 数组当前项的索引；
• 数组对象本身；

添加数组当前项的索引参数，注意callback 函数中的三个参数顺序是固定的，不可以调整。

const arr = [1, 2, 3];
arr.forEach((data,index,arr) => {
    console.log("arr[" + index + "] = " + data);
});
// 输出结果如下
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3

需要注意的是，forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。

const arr = [];
arr[0] = "a";
arr[3] = "b";
arr[10] = "c";
arr.name = "Hello world";
arr.forEach((data, index, array) => {
    console.log(data, index, array);
});

运行结果：

a 0 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
b 3 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
c 10 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]

这里的 index 是 Number 类型，并且也不会像 for-in 一样遍历原型链上的属性。

所以，使用 forEach 时，我们不需要专门地声明 index 和遍历的元素，因为这些都作为回调函数的参数。

另外，forEach 将会遍历数组中的所有元素，但是 ES5 定义了一些其他有用的方法，下面是一部分：

• every: 循环在第一次 return false 后返回
• some: 循环在第一次 return true 后返回
• filter: 返回一个新的数组，该数组内的元素满足回调函数
• map: 将原数组中的元素处理后再返回
• reduce: 对数组中的元素依次处理，将上次处理结果作为下次处理的输入，最后得到最终结果。

for-of---ES6新引入循环

// 输出结果如下
// a 
// b 
// c

ES6之前的 3 种 for 循环有什么缺陷：

• forEach 不能 break 和 return；
• for-in 缺点更加明显，它不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。

所以，鉴于以上种种缺陷，我们需要改进原先的 for 循环。但 ES6 不会破坏你已经写好的 JS 代码。目前，成千上万的 Web 网站依赖 for-in 循环，其中一些网站甚至将其用于数组遍历。如果想通过修正 for-in 循环增加数组遍历支持会让这一切变得更加混乱，因此，标准委员会在 ES6 中增加了一种新的循环语法来解决目前的问题，即 for-of 。

那 for-of 到底可以干什么呢？

• 跟 forEach 相比，可以正确响应 break, continue, return。
• for-of 循环不仅支持数组，还支持大多数类数组对象，例如 DOM nodelist 对象。
• for-of 循环也支持字符串遍历，它将字符串视为一系列 Unicode 字符来进行遍历。
• for-of 也支持 Map 和 Set （两者均为 ES6 中新增的类型）对象遍历。

总结一下，for-of 循环有以下几个特征：

• 这是最简洁、最直接的遍历数组元素的语法。
• 这个方法避开了 for-in 循环的所有缺陷。
• 与 forEach 不同的是，它可以正确响应 break、continue 和 return 语句。
• 其不仅可以遍历数组，还可以遍历类数组对象和其他可迭代对象。

但需要注意的是，for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用 for-in 循环（这也是它的本职工作）。

最后要说的是，ES6 引进的另一个方式也能实现遍历数组的值，那就是 Iterator。上个例子：

const arr = ['a', 'b', 'c'];
const iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

这个内容已经超出了本文范围，而且 Iterator 要讲的也有很多，大家有兴趣可自行查阅，或者我后期学习到会再整理。

最后贴一个最近刷到的涉及forEach和for-of去别的大厂面试题：

第 XX 题：输出以下代码运行结果，为什么？如果希望每隔 1s 输出一个结果，应该如何改造？注意不可改动 square 方法。

 1 const list = [1, 2, 3]
 2 const square = num => {
 3   return new Promise((resolve, reject) => {
 4     setTimeout(() => {
 5       resolve(num * num)
 6     }, 1000)
 7   })
 8 }
 9 
10 function test() {
11   list.forEach(async x=> {
12     const res = await square(x)
13     console.log(res)
14   })
15 }
16 test()

解析：forEach是不能阻塞的，默认是请求并行发起，所以是同时输出1、4、9。

法一：把 forEach 换成普通 for 循环或者 for...of... 循环

for循环

async function test() {
  for (let i = 0, len = list.length; i < len; i++) {
    const res = await square(list[i])
    console.log(res)
  }
}

for-of循环

async function test() {
  for (x of list) {
    const res = await square(x)
    console.log(res)
  }
}

法二：利用promise本身的链式调用

function test() {
  let promise = Promise.resolve()
 
  list.forEach(x => {
    promise = promise.then(() => square(x)).then((res) => {
      console.log(res)
    })
  })
}

还有别的方法但比较麻烦，此处不说。其思想主要是类似koa里面的compose思想和next思想即koa1的中间件执行思想。

JavaScript indexOf() 方法

定义和用法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法

stringObject.indexOf(searchvalue,fromindex)

说明

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

提示和注释

注释：indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

实例

在本例中，我们将在 "Hello world!" 字符串内进行不同的检索：

<script type="text/javascript">
 
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
 
</script>
 
//以上代码的输出为  0  -1  6

JavaScript Array filter() 方法

实例

返回数组 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
 
//输出结果为:
 
//32,33,40

定义和用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

技术细节

更多实例

<!-- 实例
返回数组 ages 中所有元素都大于输入框指定数值的元素: -->
 
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
 
<p>所有大于指定数组的元素有？ <span id="demo"></span></p>
 
<script>
var ages = [32, 33, 12, 40];
 
function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
</script>

JavaScript sort() 方法

实例

数组排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
 
//fruits 输出结果：
 
//Apple,Banana,Mango,Orange

定义和用法

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序，你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。

注意： 这种方法会改变原始数组！。

语法

array.sort(sortfunction)

参数 Values

返回值

技术细节

更多实例

实例

//数字排序（数字和升序）：
 
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
 
//fruits输出结果：
 
//1,5,10,25,40,100

实例

//数字排序（数字和降序）：
 
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
 
//fruits输出结果：
 
//100,40,25,10,5,1

实例

//数字排序 (字母和降序):
 
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
 
//fruits输出结果：
 
//Orange,Mango,Banana,Apple

JS文件接口的暴露和引用

html文件和js文件如何引入文件外部的js代码？

1、html文件

<script src='/test.js'></script>
 <!-- scr 填入要引入js路径 -->

2、js文件

js文件间的引用，和其他编程语言一样，首先被将被引用的文件，会对自身要暴露出来的接口进行声明，然后要引入外部js文件的一方，进行引入。以下为个人总结的js文件间相互引用的常用方法

• a、module.exports require用法
  module.exports 对源文件的接口进行暴露声明
  使用require(src) 进行引用（src 参数为路径）

/*********test.js********/
var test = {
  name: '11111';
  func1: function(){
    console.log('test');
  }  
}
 
function func2() {
    alert('Hi moring');
}
 
module.exports = test;//exports 设为test
module.exports.func2 = func2;//为exports添加func2
 
/*************main.js**************/
//引入模块
var Test = require('/test')
//调用对应函数
Test.func1();
Test.func2();

• b、export 与 import 用法
  export 分为两种用法：
  1、一种直接在变量或者函数定义时直接声明，在前面添加一个export 关键字。
  2、另外一种则是在变量或者函数定义后再进行声明，需要注意的是这种用法export后面的内容必须适应 "{}" 对内容进行包含，并且可以是用关键字 as 进行取别名。
  import 进行引用时也可分为两种：
  1、import {} from '/test' 在{} 中引入需要引用的接口，文件名可以省略后缀.js
  2、import * as Test from '/test' 直接引入整个外部文件的暴露接口，并取别名为Test，调用引用接口时，则直接使用 Test. 的方式调用。

/*********test.js********/
//定义时直接声明
export var office = 'word'
export function jump () {
    alert('jump')
}
//定义后声明
var a = 'aaaaa'
export{a as d} //别名外部引用变量名为d
var b = 'bbbbb'
function fly () {
    alert('fly')
}
export{b,fly} //{}不能少，即使只有一个变量
 
 
/*************main.js**************/
//引入模块
import {office,jump,d,b,fly} from './test'
//调用接口
jump()
 
//或者使用以下方式直接引入对应文件所以对外暴露的接口
import * as Test from './test'
//调用接口
Test.jump()

• c、export default 和 import
  export default 就是直接声明后面的内容都将可以暴露
  import Test from './test' 这样的方式本质上是import {* as Test} from './test')，所以调用方式同上

/*********test.js********/
export default {
    name: 'Jack',
    sex: 'male',
    run: function(){
        alert(this.name + ' run fast')
    }
}
 
/*************main.js**************/
//引入模块(本质为 import {* as Test} from './test')
import Test from './test'
//调用对应函数
Test.run();
//使用变量
console.log(Test.name + Test.sex)

• d、import()
  使用import()函数运行时注入, 可以达到懒加载的效果，对大项目的优化，很有帮助

/**********test.js*************/
export function jump () {
    alert('jump')
}
 
/*************main.js**************/
import('../moduleTest2').then(Test => {
            Test.jump();
        })
        .catch(error => {
 
        })