JavaScript 权威指南-学习笔记

  • JavaScript是一门高级、动静、解释型变成语言，非常适合面向对象和函数式编程格调。
  • JavaScript的变量是无类型的。
  • JavaScript和Java除了外表语法大抵类似，它与Java是齐全不同的两门变成语言。

Hello World

Node：交互式模式输入Hello World

nodeconsole.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并写入：<script src="htllo.js"></script>

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和ya.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]; // 读取元素0a[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]
本文仅供学习交换应用，如侵立删！