前端开发_1.js学习总结

目录

• 前言
• 一、理论知识介绍
  • JavaScript 输出
  • JavaScript 语法
• js小技巧
• js 进步本

前言

---

推荐

1. 基础html,css ,js的五十个小项目
2. 菜鸟教程JavaScript 参考手册
3. 现代 JavaScript 教程*（极力推荐）
4. axios中文文档|axios中文网
5. 腾讯云
6. https://www.imooc.com/learn/10 //训练js很好
7. https://chinese.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ //加一
8. https://es6.ruanyifeng.com/#docs/destructuring //ECMAScript 6 入门 阮一峰
9. http://speakingjs.com/ //在线书籍js
10. https://www.runoob.com/w3cnote/deconstruction-assignment.html
11. https://blog.csdn.net/qq_38490457/article/details/109257751?
12. Object.defineProperty方法

一、理论知识介绍

JavaScript 输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

JavaScript 语法

• 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
• 引用数据类型：对象(Object)、数组(Array)、函数(Function)。
• 不包含任何值的数据类型：null ，undefined
• typeof "john"判断字符串的类型
• debugger； 关键字 相当于设置断点
  常见的HTML事件
• 原生具备 iterator 接口的数据(可用 for of 遍历)

js小技巧

1. 数组去重、插值语法、从后向前获取数组元素、好用得比较方法
const a=[1,2,3,4,2];
const arr =[...new Set([...a])];console.log(arr);
console.log(`${a.slice(-1)},${a.slice(-2)}`);//模板字符串//[4]//[3, 4]
Object.is();

2. 用操作符 “||” 来设置默认值
let a;console.log(a) // undefined
a = a || 'default value'console.log(a) // default value
a = a || 'new value'console.log(a) // default value
a = 11console.log(a) // 11

3. 短路条件句 
if (condition) {//如果你想在某个条件逻辑值为true时，执行某个函数
  dosomething()
}
condition && dosomething();//等价于

4. JavaScript 的逗号操作符
var x = (1,2,0.1);console.log(typeof x);   
for(var i=0, j=0; i<5; i++, j++, j++){
  console.log("i:"+i+", j:"+j);
}

function a(){console.log('a'); return 'a';}
function b(){console.log('b'); return 'b';}
function c(){console.log('c'); return 'c';}

5. 生成器
//生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同
function * gen(){
 yield '一只没有耳朵';
 yield '一只没有尾巴';
 return '真奇怪'; }
let iterator = gen();console.log(iterator.next());
console.log(iterator.next());console.log(iterator.next());

6. 事件
<button id="button">Alt+Shift+Click on me!</button>

<script>
  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('Hooray!');
    }
  };
</script>

7. 简单的axios请求
//http://www.axios-js.com/zh-cn/docs/
//使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

let url = "http://api.pingcc.cn/fiction/search/title/全职高手/1/10";     
axios
   .get(url)
   .then(function (response) {
     console.log(response);console.log(response.data.data);
   })
   .catch(function (error) {
     console.log(error);
   });
8. 简单的Fetch请求
let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let url1='http://api.pingcc.cn/fiction/search/title/全职高手/1/10';
async function show(url) {
    let response = await fetch(url);
    let commits = await response.json(); // 读取 response body，并将其解析为 JSON 格式
    return commits;
}
//console.log(show());
//show(url).then(a => { console.log(a);console.log(a[0].author.id); });
show(url1).then(a => { console.log(a);console.log(a.data[0]);});
9.简单的原始ajax请求
<p id="demo">11</p>
<script>
  //XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。
  var xhr = new XMLHttpRequest();
  xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML = xhr.responseText;
  };
  xhr.onerror = function () {
    document.getElementById("demo").innerHTML = "请求出错";
  };
  // 发送异步 GET 请求
  xhr.open("GET", "http://api.pingcc.cn/fiction/search/title/全职高手/1/10", true);
  xhr.send();
</script>

10.JSON 字符串转换为 JavaScript 对象
var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);#将字符串转换为 JavaScript 对象:
#JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

11. a标签的href属性
<a href="javascript:void(0)">一个死链接</a>
<a href="javascript:void(alert('hello'))">点我</a>
<a href="#test">定位到指定位置!</a>

12. 解构赋值
//数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr; 4
//对象的解构赋值
const lin = {
 name: '林志颖',
 tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;
//复杂解构
let wangfei = {
 name: '王菲',
 age: 18,
 songs: ['红豆', '流年', '暧昧', '传奇'],
 history: [
 {name: '窦唯'},
 {name: '李亚鹏'},
 {name: '谢霆锋'}
 ]
};
let {songs: [one, two, three], history: [first, second, third]} = 
wangfei;

13.Set集合的简单使用
let s = new Set();//创建一个空集合
let s1 = new Set([1,2,3,1,2,3]);
console.log(s1.size);//返回集合的元素个数
console.log(s1.add(4));//添加新元素
console.log(s1.delete(1));//删除元素
console.log(s1.has(2));//检测是否存在某个值
console.log(s1.clear());//清空集合

14.Map的简单使用
let m = new Map();//创建一个空 map
let m2 = new Map([//创建一个非空 map
 ['name','aaa'],
 ['age','12']
]);
console.log(m2.size);//获取映射元素的个数
console.log(m2.set('age', 6));//添加映射值
console.log(m2.get('age'));//获取映射值
console.log(m2.has('age'));//检测是否有该映射
console.log(m2.clear());//清除

15.简单的promise
let promise = new Promise(function (resolve, reject) {
        // setTimeout(() => resolve("ok"), 3000);
        console.log("aaaaaaaa");
        setTimeout(() => reject(new Error("错误")), 1000);
      });
      promise.finally(()=>console.log("finally"));
      // promise.then(res=>console.log(res));
      // promise.then(alert);
      promise.catch(alert);
16.加载文件script脚本
function loadscript(src){
  let script=document.createElement("script");
  script.src=src;
  document.head.append(script);
}
loadscript("test.js");

17. at() string Array charAt(1)
const value=['a','b','c'].at(0);
const str="zhouyi".at(0);
var str = "Hello,World!";
console.log(str.charAt(1));
console.log(`${value},${str}是一个`);

18. forEach() 元素,索引，原数组
var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.forEach(function (value, index, obj) {
    console.log(value + " #### " + index + " #### " + obj);
});

19.激活的元素的tabindex?
setInterval(() => {
    alert(document.activeElement.tabIndex);
}, 5000);

20.JS实现输入框默认获得焦点且文本全选中状态
var input = document.querySelector('#test')  //获取dom对象
var value = input.value  //获取input的值
input.focus()  //获得焦点
input.setSelectionRange(0, value.length)  //设置选中全部文本
input.select();//全选
input.selectionStart = 0; //选中区域左边界
input.selectionEnd = input.value.length; //选中区域右边界

21.获取得到焦点事件处理
var a = document.getElementById('Reset1');
a.onblur = function () {
            b.focus();
}
a.onfocus = function () {
            a.value="bbb"
}

22. 立即执行函数
(function () {
    alert("我是一个匿名函数");
})();


23. this指向
以函数形式调用时，this永远都是window
以方法的形式调用时，this是调用方法的对象
以构造函数的形式调用时，this是新创建的那个对象
使用call和apply调用时，this是传入的那个指定对象

24. arguments参数
function fun(a, b) {
    console.log(arguments[0]);// 通过下标获取第一个参数
    console.log(arguments[1]);// 通过下标获取第二个参数
    console.log(arguments.length);    // 获取实参的个数
    console.log(arguments.callee);    // 看看它的函数对象
    console.log(arguments.callee == fun);
}
fun("Hello", "World");

25. 窗口事件
onblur	当窗口失去焦点时运行脚本。
onfocus	当窗口获得焦点时运行脚本。
onload	当文档加载之后运行脚本。
onresize	当调整窗口大小时运行脚本。
onstorage	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。
window.onblur = function () {
        console.log("窗口失去焦点");
    };
window.onfocus = function () {
        console.log("窗口获取焦点");
    };
window.onload = function () {
        console.log("Hello,World");
    };
window.onresize = function () {
        console.log("窗口大小正在改变");
    };

js 进步本

1 js Array对象的属性和方法
https://www.runoob.com/jsref/jsref-obj-array.html
2 js Math对象的属性和方法
https://www.runoob.com/jsref/jsref-obj-math.html
3 js Date对象的属性和方法
https://www.runoob.com/jsref/jsref-obj-date.html
4 js String对象的属性和方法
https://www.runoob.com/jsref/jsref-obj-string.html
5 js Error对象的属性
https://www.runoob.com/jsref/jsref-obj-error.html
6 js Oject对象的属性和方法
https://cloud.tencent.com/developer/section/1191900
7 Set对象属性和方法
https://cloud.tencent.com/developer/section/1192061
8 Reflect是一个内置的对象方法
https://cloud.tencent.com/developer/section/1192029
9 Symbol
https://cloud.tencent.com/developer/section/1192204

10 Promise 对象的属性和方法
https://cloud.tencent.com/developer/section/1192006
11 Proxy 对象的属性和方法
https://cloud.tencent.com/developer/section/1192014

12 window对象的属性和方法
https://www.runoob.com/jsref/obj-window.html
13 History对象的属性和方法
https://www.runoob.com/jsref/obj-history.html
14 Location对象的属性和方法
https://www.runoob.com/jsref/obj-location.html

15 Document对象属性和方法
https://www.runoob.com/jsref/dom-obj-document.html
16 元素对象属性和方法
https://www.runoob.com/jsref/dom-obj-all.html
17 DOM 事件、属性
https://www.runoob.com/jsref/dom-obj-event.html
18 Console 对象
https://www.runoob.com/jsref/obj-console.html