JavaScript 权威指南-学习笔记(一)
本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删! |
JavaScript 权威指南-学习笔记
- JavaScript是一门高级、动态、解释型变成语言,非常适合面向对象和函数式编程风格。
- JavaScript的变量是无类型的。
- JavaScript和Java除了表面语法大致相似,它与Java是完全不同的两门变成语言。
Hello World
Node:交互式模式输出Hello World
node
console.log("Hello World")
Node:非交互式环境输出Hello World
1.新建hello.js文件
2.文件写入:console.log(“Hello World”)
3.使用node 执行hello.js文件
浏览器JavaScript控制台输出
1.新建hello.js文件并写入:console.log(“Hello World”)
2.新建hello.html并写入:
3.在浏览器打开hello.html:file:///F:/javascript/%E7%BB%83%E4%B9%A0DEMO/hello.html
F12打开开发者工具窗口,就可以在控制台看到输出信息。
声明-关键词
- const:声明常量(不可被修改,重新赋值会抛出TypeError)
- let:声明变量(在同一作用域中重新声明相同变量会导致语法错误)推荐使用此方法声明变量
- var:声明变量(使用var声明的变量作用域为包含函数,而非包含块,这可能会导致隐含的错误,推荐使用let)
- funtion:定义函数
- class:定义类
对象
创建对象
直接创建对象
let empty = {}; //没有属性的对象 let point = {x:0, y:0}; //包含两个属性的对象
使用new创建对象
let a = new Object(); //创建一个空对象,与{}相同 let b = new Array(); //创建一个空数组,与[]相同 let c = new Date(); //创建一个表示当前时间的日期对象 let d = new Map(); //创建一个映射对象,用于存储键值对
使用Object.create()创建对象
Object.create()用于创建一个新对象,使用其第一个参数作为新对象的原型:
let a = object.create({x: 1, y: 2}); // a继承属性x和y a.x + a.y // =>3
读取对象属性
要获取一个对象的值,可以使用(.)或([])操作符
let point = {x:0, y:0}; //包含两个属性的对象
let a = point.x // 获取point的x属性值
let b = point["y"] // 获取point的y属性值
写入对象属性
要创建或设置属性,与查询属性一样,可以使用(.)或([]),只是要把他们放到赋值表达式的左边
let point = {x:0, y:0}; //包含两个属性的对象
point.a = 0;
point["b"] = 0;
删除对象属性
- delete操作符用于从对象中移除属性
- delete并不操作属性的值,而是操作属性本身
- delete操作符只删除自身属性,不删除继承属性
检查对象属性
in
let o = {x: 1}; "x" in o // =>true: o有自身属性"x" "y" in o // =>false: o没有属性"y" "toString" in o // =>true: o继承了toString的属性
hasOwnProperty().
对象hasOwnProperty()方法用于测试对象是否有给定名字的属性,对继承的属性返回false
let o = {x: 1}; o.hasOwnProperty("x"); // =>true: o有自身属性"x" o.hasOwnProperty("y") // =>false: o没有属性"y" o.hasOwnProperty("toString") // =>false: toString是继承属性
object.assign():从一个对象向另一个对象复制属性
数组
创建数组
直接创建
let empty = []; // 没有元素的数组 let primes = [1, 2, 3, 4, 5]; // 有5个数值元素的数组 let misc = [1.1, true, "a",]; // 3种不同类型的元素,最后还有一个逗号
Array()创建数组
不传参调用
let a = new Array(); // 创建一个空数组
创建一个数组,并指定长度
let a = new Array(10); // 创建一个指定长度的数组
创建两个或更多个数组元素,或传入一个非数值元素
let a = new Array(5, 4, 3, 2,1, "testing, testing"); // 创建一个指定长度的数组
Array.of()创建一个带元素的数组
Array.of() // =>[]; 返回没有参数的空数组 Array.of(10) // =>[10]; 创建只有一个数值元素的数组 Array.of(1,2,3) // =>[1,2,3];
Array.from()通过字符串创建一个数组
var myArr = Array.from("RUNOOB"); // =>[ 'R', 'U', 'N', 'O', 'O', 'B' ]
读写数组
使用 [] 操作符访问数组元素
let a = ["world"]; // 先创建包含一个元素的数组 let value = a[0]; // 读取元素0 a[1] = 3.14; // 写入元素1
超出索引会返回undefined,不会报错
添加和删除数组元素
数组添加元素
let a = []; //创建一个空数组 a[0] = "zero"; //添加一个元素 a.push("one"); //在末尾添加一个值
flat()和flatMap()打平数组
flat()打平一级嵌套
[1, [2, 3]].flat() //=>[1, 2, 3] [1, [2, [3]]]].flat() //=>[1, 2, [3]]
flat() 传参打平多层级嵌套
let a = [1,[2,[3,4]]]; a.flat(1) //=> [1,2,[3,4]] a.flat(2) //=> [1,2,3,4]
数组转换为字符串
join()
let a = [1, 2, 3]; a.join() //=>"1,2,3" a.join(" ") //=>"1 2 3" a.join("") //=>"123" let b = new Array(10); //长度为10但没有元素的数组 b.join("-") //=>"---------":包含9个连字符的字符串
toString()
[1,2,3].toString() //=>"1,2,3" ["a", "b", "c"].toString() //=>"a,b,c" [1, [2, "c"]].toString() //=>"1,2,c"
如果想把数组的文本内容保存起来以备后用,可以使用JSON.stringify()
数组迭代
1.数组循环var officers = [s{ id: 20, name: 'Captain' },{ id: 24, name: 'General' },{ id: 56, name: 'Admiral' },{ id: 88, name: 'Commander' }];2.for循环,使用率最高,也是最基本的一种遍历方式var officersIds = [];for(var i=0,len=officers.length;i<len; i++){officersIds.push(officers[i].id);}console.log(officersIds); // [20,24,56,88]3.forEach循环forEach中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)var officersIds = [];officers.forEach(function (officer,index,array) {console.log(index); //0,1,2,3,console.log(officer); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(officer.id);});console.log(officersIds); //[20,24,56,88]4.for in循环for...in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历JSONvar officersIds = [];for(var key in officers){console.log(key); // 0 1 2 3 返回数组索引console.log(officers[key]); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(officers[key].id);}console.log(officersIds); //[20,24,56,88]5.for of循环可循环数组和对象,推荐用于遍历数组。for...of提供了三个新方法:key()是对键名的遍历;value()是对键值的遍历;entries()是对键值对的遍历;let arr = ['科大讯飞', '政法BG', '前端开发'];for (let item of arr) { console.log(item); // 科大讯飞 政法BG 前端开发}// 输出数组索引for (let item of arr.keys()) { console.log(item); // 0 1 2}// 输出内容和索引for (let [item, val] of arr.entries()) { console.log(item + ':' + val); // 0:科大讯飞 1:政法BG 2:前端开发}var officersIds = [];for (var item of officers) {console.log(item); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(item.id);}console.log(officersIds); // [20,24,56,88]// 输出数组索引for(var item of officers.keys()){console.log(item); // 0 1 2 3}// 输出内容和索引for (let [item, val] of officers.entries()) {console.log(item) // 0 1 2 3 输出数组索引console.log(val);//{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}console.log(item + ':' + val);}6.map循环map() 会返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。map 不修改调用它的原数组本身。map()中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)var arr = [{name:'a',age:'18'},{name:'b',age:'19'},{name:'c',age:'20'}];arr.map(function(item,index) {if(item.name == 'b') {console.log(index) // 1}})7.filterfilter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。array.filter(function(currentValue,index,arr){}, thisValue)var designer = peoples.filter(function (people) {return people.job === "designer";});组合使用var totalScore = peoples.filter(function (person) {return person.isForceUser;}).map(function (choose) {return choose.mathScore + choose.englishScore;}).reduce(function (total, score) {return total + score;}, 0);Array.from()var divs = document.querySelectorAll('div.pane'); var text = Array.from(divs, (d) => d.textContent); console.log("div text:", text);// Old, ES5 way to get array from argumentsfunction() { var args = [].slice.call(arguments);//...}// Using ES6 Array.fromfunction() { var args = Array.from(arguments);//..}var filled = Array.from([1,,2,,3], (n) => n || 0); console.log("filled:", filled); // => [1,0,2,0,3]
本文仅供学习交流使用,如侵立删! |
JavaScript 权威指南-学习笔记(一)相关推荐
- Javascript权威指南学习笔记一:数据类型
决定从最基础的开始学JavaScript,最近看了<<Javascript权威指南>>第3章,记些笔记备忘. 本章一个重点是类型.按我的理解应该如下表所示: 复合类型中,关联数 ...
- javascript权威指南 学习笔记之变量作用域
最近一直在看<javascript权威指南 第五版>,变量作用域这一章,看得真的有点累.不过,收获还是多多. 不知道,大家对语言中变量的"声明"与"定义&qu ...
- javascript权威指南学习笔记
一.数据类型: js中,所有的数字都是浮点型的. isNaN()/isFinite() //检测数据类型 Infinity //无穷大 Number.MAX_VAL ...
- javascript权威指南--学习笔记
-一.JavaScript基本数据类型 1.数字--Number类 2.字符串--String类 3.布尔--Boolean类 4.函数Function 5.对象Object 6.数组Array 7. ...
- 《JavaScript权威指南》笔记(一)
2019独角兽企业重金招聘Python工程师标准>>> <JavaScript权威指南>真是名符其实的好书!真遗憾初学JavaScript时没有立即读这本书,甚为遗憾.不 ...
- 《JavaScript权威指南》笔记(四)
2019独角兽企业重金招聘Python工程师标准>>> 第四篇笔记的内容主要涉及:javascript中的各种语句. 1. switch语句: (1)其中的case表达式采用===匹 ...
- Hadoop权威指南学习笔记三
HDFS简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考.有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my ...
- Hadoop权威指南学习笔记一
Hadoop简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出.一起学习一起进步. 转载请注明:http://blog.csdn.net/ ...
- ZeroC Ice权威指南-学习笔记1——hello world
前言 ZeroC Ice是一款很好的RPC框架,性能极好.但是参考文档不足是其一大问题,这也影响了它的传播.<ZeroC Ice权威指南>是唯一的中文教材,但写的不尽如人意,作为入门教材, ...
最新文章
- 参悟JavaScript
- 利用certutil.exe实现在批处理(bat)中嵌入可执行文件或者各种媒体、图片之类二进制文件的简单方法!...
- 主机和虚拟机ping不通的原因
- 创建Maven项目时,GroupId和Artifact Id填写
- 牛客假日团队赛6 D	迷路的牛 (思维)
- web上传大文件的配置
- Java EE调度程序
- excel表格从某个标志计算机,让Excel也玩多标签 多个图表一个窗口 -电脑资料
- C# 参考之方法参数关键字:params、ref及out
- 前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
- python有关迭代器和生成器的面试题_python面试题之生成器迭代器
- 入职后发现公司有这5种情况,别留恋,果断离职
- java多线程写数据到数据库6_java多线程向数据库写入数据
- 如何提高意志力如何坚持每天学习
- 主控芯片成功案例:搭载北京君正X1000芯片,收款计算合二为一
- 小龙教你轻轻松松配置好JAVA的JDK文件(环境变量,用JDK 7为例),大家都能学会的啦
- thinkphp php5.1,ThinkPHP5.1完全开发手册
- Python 分批次处理数据示例
- Uncaught TypeError: Cannot read property ‘length‘ of null解决经验贴
- MySQL忘记密码如何重置
热门文章
- GetListToJson
- haproxy,lvs keepalived || heartbeat,nginx对比
- 一个可以检测网络内主机类型的脚本
- 在什么场景下该使用JMX,如何使用,会带来什么好处,这种场景下有哪些替代方案?...
- 给自定义控件(Web Control)添加事件的几种方法。前两种方法可以不实现IPostBackEventHandler...
- java 集合差运算_用一个参数的JAVA程序实现集合的交并差运算
- 汇编 - ORG指令详解
- event对象获取方法总结在google浏览器下测试
- 数组最大最小值比较次数优化
- Protocol Buffer基本语法