文末
js前端的重头戏，值得花大部分时间学习。
推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
这是288页的前端面试题
开源分享：docs.qq.com/doc/DSmRnRG…
this.size = size;
}
photo() {
console.log("我可以拍照！");
}
game() {
console.log("我可以玩游戏！");
}
}
const chuizi = new SmartPhone("小米", 1999, "黑色", "5.15inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();
class中的getter和setter设置
// class中的getter和setter设置
class Phone {
get price() { //当price这个属性被读取，会执行这个函数
console.log("价格属性被读取了！");
// 返回值
return 123;
}
set price(value) {//当price这个属性被修改，会执行这个函数
console.log("价格属性被修改了！");
}
}
// 实例化对象
let s = new Phone();
console.log(s.price); // 返回值
s.price = 2999;
Number.EPSILON：
Number.EPSILON 是 JavaScript 表示的最小精度；
EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16；
二进制和八进制：
ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示；
Number.isFinite() 与 Number.isNaN() ：
Number.isFinite() 用来检查一个数值是否为有限的；
Number.isNaN() 用来检查一个值是否为 NaN；
Number.parseInt() 与 Number.parseFloat()：
ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变；
Math.trunc：
用于去除一个数的小数部分，返回整数部分；
Number.isInteger：
Number.isInteger() 用来判断一个数值是否为整数；
// 数值扩展
// 0. Number.EPSILON 是 JavaScript 表示的最小精度
// EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
function equal(a, b) {
return Math.abs(a - b) < Number.EPSILON;
}
console.log("0、Number.EPSILON 是 JavaScript 表示的最小精度");
// 箭头函数简化写法
equal = (a, b) => Math.abs(a - b) < Number.EPSILON;
console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3); // false
console.log(equal(0.1 + 0.2, 0.3)); // true
// 1. 二进制和八进制
console.log("1、二进制和八进制");
let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;
console.log(x);
// 2. Number.isFinite 检测一个数值是否为有限数
console.log("2、Number.isFinite 检测一个数值是否为有限数");
console.log(Number.isFinite(100));
console.log(Number.isFinite(100 / 0));
console.log(Number.isFinite(Infinity));
// 3. Number.isNaN 检测一个数值是否为 NaN
console.log("3. Number.isNaN 检测一个数值是否为 NaN");
console.log(Number.isNaN(123));
// 4. Number.parseInt Number.parseFloat字符串转整数
console.log("4. Number.parseInt Number.parseFloat字符串转整数");
console.log(Number.parseInt('5211314love'));
console.log(Number.parseFloat('3.1415926神奇'));
// 5. Number.isInteger 判断一个数是否为整数
console.log("5. Number.isInteger 判断一个数是否为整数");
console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));
// 6. Math.trunc 将数字的小数部分抹掉
console.log("6. Math.trunc 将数字的小数部分抹掉 ");
console.log(Math.trunc(3.5));
// 7. Math.sign 判断一个数到底为正数 负数 还是零
console.log("7. Math.sign 判断一个数到底为正数 负数 还是零");
console.log(Math.sign(100));//1
console.log(Math.sign(0));//0
console.log(Math.sign(-20000));//-1
ES6 新增了一些 Object 对象的方法：
-
Object.is比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）； -
Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；
-
proto、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型；
// 对象扩展
// 1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；
console.log(Object.is(120, 120)); // ===
// 注意下面的区别
console.log(Object.is(NaN, NaN));
console.log(NaN === NaN);
// NaN与任何数值做===比较都是false，跟他自己也如此！
// 2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；
const config1 = {
host: "localhost",
port: 3306,
name: "root",
pass: "root",
test: "test" // 唯一存在
}
const config2 = {
host: "zibo.com",
port: 300300600,
name: "root4444",
pass: "root4444",
test2: "test2"
}
// 如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的
console.log(Object.assign(config1, config2));
// 3. proto、setPrototypeOf、 getPrototypeOf 可以直接设置对象的原型；
const school = {
name: "尚硅谷"
}
const cities = {
xiaoqu: ['北京', '上海', '深圳']
}
// 并不建议这么做
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school));
console.log(school);
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来；
模块化的优势有以下几点：
-
防止命名冲突；
-
代码复用；
-
高维护性；
ES6 之前的模块化规范有：
-
CommonJS => NodeJS、Browserify；
-
AMD => requireJS；
-
CMD => seaJS；
ES6 模块化语法
模块功能主要由两个命令构成：export 和 import；
-
export 命令用于规定模块的对外接口（导出模块）；
-
import 命令用于输入其他模块提供的功能（导入模块）；
ES6导出模块语法汇总
m.js（逐个导出）
export let school = "尚硅谷";
export function teach(){
console.log("我们可以教你开发技术！");
}
n.js（统一导出）
// 统一暴露（导出）
let school = "尚硅谷";
function findJob(){
console.log("我们可以帮你找到好工作！");
}
export {school,findJob}
o.js（默认导出）
export default{
school : "尚硅谷",
change : function(){
console.log("我们可以帮你改变人生！");
}
}
ES6导入模块语法汇总
使用模块化的另一种方式
将js语法整合到一个文件app.js：
// 通用方式
// 引入m.js模块内容
import * as m from "./m.js";
console.log(m);
console.log(m.school);
m.teach();
使用模块化的另一种方式.html：
使用模块化的另一种方式Babel 是一个 JavaScript 编译器；Babel 能够将新的ES规范语法转换成ES5的语法；
因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；
步骤
第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；
第二步：初始化项目
npm init -y
第三步：安装
npm i babel-cli babel-preset-env browserify
第四步：使用babel转换
npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env
第五步：打包
npx browserify dist/js/app.js -o dist/bundle.js
第六步：在使用时引入bundle.js
第一步：安装jquery
npm i jquery
第二步：在app.js使用jquery
//入口文件
//修改背景颜色为粉色
import = require("jquery");
$('body').css('background','pink');
Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值；
判断数组中是否包含某元素，语法：arr.includes(元素值)；
js
// includes
let arr = [1,2,3,4,5];
console.log(arr.includes(1));//和indexOf类似，区别在于indexOf返回下标，其返回布尔
在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同；
幂运算的简化写法，例如： 2 的 10 次方：2**10；
// 指数操作符
console.log(Math.pow(2,10))
console.log(2**10);
概述
-
async 和 await 两种语法结合可以让异步代码看起来像同步代码一样；
-
简化异步函数的写法；
async 函数
-
async 函数的返回值为
promise对象； -
promise 对象的结果由
async 函数执行的返回值决定；
// async函数：异步函数
async function fn() {
// return 123; // 返回普通数据
// 若报错，则返回的Promise对象也是错误的
// throw new Error("出错啦！");
// 若返回的是Promise对象，那么返回的结果就是Promise对象的结果
return new Promise((resolve, reject) => {
// resolve("成功啦！");
reject("失败啦！");
})
}
const result = fn();
// console.log(result); // 返回的结果是一个Promise对象
// 调用then方法
result.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
});
await 表达式
-
await 必须写在 async 函数中；
-
await 右侧的表达式一般为 promise 对象；
-
await 返回的是 promise 成功的值；
-
await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理；
// async函数 + await表达式：异步函数
// 创建Prmise对象
const p = new Promise((resolve,reject)=>{
resolve("成功啦！");
})
async function fn(){
// await 返回的是 promise 成功的值
let result = await p;
console.log(result); // 成功啦！
}
fn();
async 和 await 读取文件案例
// 导入模块
const fs = require("fs");
// 读取
function readText() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/text.txt", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readTest1() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/test1.txt", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readTest2() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/test2.txt", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
//声明一个 async 函数
async function main() {
//获取为学内容
let t0 = await readText();
//获取插秧诗内容
let t1 = await readTest1();
// 获取观书有感
let t2 = await readTest2();
console.log(t0.toString());
console.log(t1.toString());
console.log(t2.toString());
}
main();
async 和 await 结合发送ajax请求
// async 和 await 结合发送ajax请求
function sendAjax(url) {
return new Promise((resolve, reject) => {
// 1、创建对象
const x = new XMLHttpRequest();
// 2、初始化
x.open("GET", url);
// 3、发送
x.send();
// 4、事件绑定
x.onreadystatechange = function () {
if (x.readyState == 4) {
if (x.status >= 200 && x.status <= 299) {
// 成功
resolve(x.response);
} else {
// 失败
最后
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
