javaScript
1.javaScript:是一种单线程的可以运行在浏览器或服务端的弱类型脚本语言
- 单线程:
- 进程:完成一项任务所经历的过程
- 线程:线程进进程范围要小,一个进程可以包括多个线程
- 弱类型:变量的类型由赋值的类型决定
- 脚本语言:不会提前编译,是在运行时边解释边执行的语言
2.javaScript发展史
- javaScript是1995年诞生的
- javaScript于1997发布javaScript1.0标准版本(TC29委员会-ECMA262)
- javaScript于1998发布javaScript2.0标准版本
- javaScript于1999发布javaScript3.0标准版本
- 。。。。。
- javaScript于2005针对javaScript4.0的讨论,比较激烈,不欢而散
- javaScript于2009发布javaScript5.0标准版本
- javaScript于2011发布EcmaScript5.1标准版本
- javaScript于2015发布EcmaScript2015(也称ES6)标准版本
- javaScript于2016发布EcmaScript2016(ES7)标准版本
- …往后每年6月份都会发布一个新ES版本
3.javaScript和ECMAScript关系
javaScript包括三部分:ECMAScript(核心),DOM,BOM
ES6
1.let和const:
let和var的区别:
(1)看是否有变量提升
var有变量提升,let没有
(2)看是否有块级作用域
(3)看是否能够重复定义
2.解构赋值
import {mapAction,mapGetters} from 'vuex'
//数组解构赋值
let arr=['hello','vue.js','React','微信小程序']
let [one,two,three]=arr;
// console.log(one)
// console.log(three)
//对象解构
let obj={
name:'alice',
age:20,
info:{
xueli:'本科',
address:'中国'
}
}
let { name, info:aa }=obj
// console.log(name);
console.log('aa:',aa.address);
3.set和map:即数组和对象的升级版本
set:数组的升级版本
add:添加唯一值
delete:删除某一个值
clear:删除所有
forEach:遍历set对象
注:可以用set来实现数组去重,
var arr=[3, 4, 5, 5, 2, 2, 4, 6, 562, 2]
例如:[...new Set(arr)]
map:对象的升级版本
let m1=new Map() 创建map对象
m1.set(key,value)设置key的值
m1.get(key)获取key对应的值
m1.keys()获取key所组成的对象
m1.values()获取value组成的对象
m1.entries()获取key,values组成的对象
m1.forEach()遍历map对象
4.模块化
ES6的模块化:ES module
导出: export default {}
导入: import {},aa from ‘暴露的对象’
node里的模块化:commonJS
导出 modules.exports={}
导入 require(‘导入你的模块’)
5.class类
第一点:ES5中是用函数来模拟一个类,ES6中class来实现一个类
类与对象的关系:一个类可以创建出多个对象(对象也称为实例)
6.扩展运算符(…)
有2个作用:
展开操作:
//展开数组
var arr1=[5,3,2,4] //...arr1最终变成 5,3,2,4
var arr2=['hello','vue.js']
var result=[...arr1,...arr2]
//展开对象
var obj1={
name:'alice',
age:20,
address:'北京'
}
var obj2={
xueli:'本科',
hobby:'爬山'
}
var resultOjb={ ...obj1,...obj2 }
rest操作:
//rest操作
function sum(msg,...arg) {
console.log('msg:',msg);
console.log('arg:',arg);
for(var i=0,result=0;i<arg.length;i++) {
result+=arg[i]
}
console.log(result);
}
var arr3=[1,6,7]
sum('恭喜啊',...arr3)
8.箭头函数:
格式:(参数1,参数2,…参数n)=>{ //代码块 }
面试经常问:普通函数和箭头函数区别
1.this指向不同:箭头函数没有自己的this,它的this指父级函数所在的this
2.箭头函数不能实例化:new ()=>{ } 报错
3.箭头函数没有arguments
9.模板字符串:
//js定义字符串的形式有3种:单引号(' '),双引号(" "),反引号(` `)
let str1='hello';
let str2="vue.js"
let str3=`我爱中国的${str2}`
10.数组和字符串新增的api方法:
字符串:
str.includes(‘’) 检测字符是否有某个字符串,如果有返回true,否则false
str.startsWith(‘’) 检测字符是否在字符串开始,如果是返回true,否则false
str.endsWith(‘’)检测字符是否在字符串结尾,如果是返回true,否则false
数组:
Array.from:可以将类对象转换成真正的数组
何为类数组:也称伪数组,看着像数组,但不具备数组的api方法,但伪数组有length属性,可以像真实数组那样通过下标来访问
真实数组 = Array.from(伪数组)
Array.of
find
findIndex
flat:数组扁平化
如何将数组降维(五种办法):
1)数组字符串化
let arr = [[222, 333, 444], [55, 66, 77], {a: 1} ]
arr += '';
arr = arr.split(',');
console.log(arr); // ["222", "333", "444", "55", "66", "77", "[object Object]"]
所有的元素会转换为字符串,且元素为对象类型会被转换为 “[object Object]” ,对于同一种类型数字或字符串还是可以的。
(2)递归
function reduceDimension(arr){
let ret = [];
let toArr = function(arr){
arr.forEach(function(item){
item instanceof Array ? toArr(item) : ret.push(item);
});
}
toArr(arr);
return ret;
}
3、Array.prototype.flat()
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]
4、
// 不使用递归,使用 stack 无限反嵌套多层嵌套数组
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
const stack = [...input];
const res = [];
while (stack.length) {
// 使用 pop 从 stack 中取出并移除值
const next = stack.pop();
if (Array.isArray(next)) {
// 使用 push 送回内层数组中的元素,不会改动原始输入 original input
stack.push(...next);
} else {
res.push(next);
}
}
// 使用 reverse 恢复原数组的顺序
return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
5、
// 使用 reduce、concat 和递归无限反嵌套多层嵌套的数组
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flattenDeep(arr1) {
return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]