JavaScript、Es6--基础总结

2020-01-02 本文已影响0人 Hozan

一、基础概念
1.原始类型：boolean、null、undefined、number、string、symbol
2.字面量：一般固定值称为字面量，如 3.14。

数字(Number)字面量有整数字面量，浮点数字面量，Infinity，NaN
字符串（String）字面量可以使用单引号或双引号
表达式字面量
数组（Array）字面量
对象（Object）字面量
函数（Function）字面量

3.JavaScript 语句标识符

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

4.变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。也就是说，变量可以先使用后声明。

注意：JavaScript 只有声明的变量会提升，初始化的不会。

5.闭包：闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
通俗的讲，在函数A里，声明了变量a，函数A内嵌了一个函数B，函数B访问了变量a，最后返回函数B，函数B就是一个闭包。
示例1：

function A(){
       var a="hello world"
        function B(){
            console.log(a);
        }
        return B;
}
var c = A();
c();//hello world

JavaScript 闭包，使得函数拥有私有变量变成可能。
示例2：

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

6.深浅拷贝：
示例：

let a={name:'hello'}
let b=a
a.name="world"
console.log(b.name) // world

上述例子中，将a拷贝到b其实是拷贝了地址，一旦对象a的name属性发生改变，对象b的name属性也会改变，为了解决以上问题，引出了浅拷贝和深拷贝。
如何实现深浅拷贝

浅拷贝：
Object.assign({}, a)
展开运算符...
深拷贝：
JSON.parse(JSON.stringify(obj))

7.立即执行函数
见闭包的示例2代码。
二、常用的方法使用示例
1.indexOf ：返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
stringObject.indexOf(searchvalue,fromindex)
2.lastIndexOf：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。如果要检索的字符串值没有出现，则该方法返回 -1。
stringObject.lastIndexOf(searchvalue,fromindex)
3.splice：从数组中添加/删除项目，然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)。
示例：

<!doctype html>
<html> 
<body> 
<script >
    let arr1 = [1,2,3,4]
    let arr2 = [1,2,3,4]
    arr1.splice(2,0,"88")
    document.write(arr1 + "<br />")
    arr2.splice(2,1,"88")
    document.write(arr2 + "<br />")
</script>
</body> 
</html>

输出结果：

1,2,88,3,4
1,2,88,4

4.slice：从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。
arrayObject.slice(start,end)

5.split：用于把一个字符串分割成字符串数组。
stringObject.split(separator,howmany)
示例：

<script >
var str="1,2,3,4,5"
document.write(str.split(",") + "<br />")
document.write(str.split(",",3))
</script>

输出结果：

1,2,3,4,5
1,2,3

6.replace：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
stringObject.replace(regexp/substr,replacement)
示例：

<script >
var str="hello world！hello，123"
document.write(str.replace(/hello/g, "你好"))
</script>

输出结果：

你好 world！你好，123

More
7.substr：在字符串中抽取从 start 下标开始的指定数目的字符。
stringObject.substr(start,length)
8.substring：用于提取字符串中介于两个指定下标之间的字符。
stringObject.substring(start,stop)
注意：与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数
9.toLocaleLowerCase();toLowerCase()转小写
10.toLocaleUpperCase();toUpperCase()转大写
11.trim：用于删除字符串的头尾空格。
string.trim()

12.map、filter、reduce

map：生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。另外 map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组

[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]

filter：生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素。

let array = [1, 2, 4, 6]
let newArray = array.filter(item => item !== 6)
console.log(newArray) // [1, 2, 4]

reduce:可以将数组中的元素通过回调函数最终转换为一个值。它接受两个参数，分别是回调函数和初始值。

const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

13.reverse：reverse() 方法用于颠倒数组中元素的顺序
arrayObject.reverse()

14、every、some、join

every:用于检测数组所有元素是否都符合指定条件。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
语法：array.every(function(currentValue,index,arr), thisValue)

var ages = [32, 33, 12, 40];
function checkAge(age) {
    return age >= 18;
}
function myFunction() {
   ages.every(checkAge);
}

some:测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
Array.some()

const array = [1, 2, 3, 4, 5];
const even = (element) => element%2===0;
console.log(array.some(even));
//true

join:用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arrayObject.join(separator)

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
</script>
//George,John,Thomas

15.Math

Math.floor() 返回小于或等于一个给定数字的最大整数

Math.floor( 45.95); // 45

Math.round()把一个数字舍入为最接近的整数

<script type="text/javascript">
document.write(Math.round(0.60) + "<br />")
document.write(Math.round(0.50) + "<br />")
document.write(Math.round(0.49) + "<br />")
document.write(Math.round(-4.40) + "<br />")
document.write(Math.round(-4.60))
</script>
//output
1
1
0
-4
-5

16.正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

JavaScript 正则表达式

三、其他
1.==和===的区别
== ，如果对比的数据类型不相同，先进行类型转换，再进行比较；
===，判断两者类型和值是否相同。
2.在条件判断时，除了 undefined， null， false， NaN， ' '， 0， -0，其他所有值都转为 true。
类型转换
3.理解this
JavaScript this 关键字
 JavaScript中this详解

JavaScript、Es6--基础总结

注意：JavaScript 只有声明的变量会提升，初始化的不会。

参考网址：

猜你喜欢

热点阅读