ES6

let 与块级作用域

JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

var elements = [{}, {}, {}];

for (var i=0; i < elements.length; i++) {
    elements[i].onclick = function() {
        console.log(i);
    }
}

elements[1].onclick();

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
3
3
3

通过闭包

var elements = [{}, {}, {}];

for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = (function (i) {
        return function () {
            console.log(i);
        }
    })(i)
}

elements[0].onclick();
elements[1].onclick();
elements[2].onclick();

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
0
1
2

使用let

var elements = [{}, {}, {}];

for (let i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
        console.log(i);
    }
}

elements[0].onclick();
elements[1].onclick();
elements[2].onclick();

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
0
1
2

数组的解构

const arr = [100,200,300];
const [a,b,c] = arr;
console.log(a,b,c);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
100 200 300

只定义一个变量 需要 把其它位置空出来

const arr = [100,200,300];

const [,,c] = arr;

console.log(c);
////
PS F:\拉钩前端\lagou> node .\task1\task1.js
300

使用...定义剩下的变量

只能定义在最后的位置

const arr = [100,200,300];

const [a, ...rest] = arr;

console.log(rest);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
[ 200, 300 ]
const arr = [100,200,300];

const [...rest] = arr;

console.log(rest);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
[ 100, 200, 300 ]

const arr = [100,200,300];

const [...rest,c] = arr;

console.log(rest);

////
F:\拉钩前端\lagou\task1\task1.js:15
const [...rest,c] = arr;
       ^^^^^^^

解构的时候赋初始值

const arr = [100, 200, 300];

const [a, b, c = 123, d = 'defaultValue'] = arr;

console.log(c, d);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
300 defaultValue

解构实例：解析路径

//传统写法
const path = '/foo/bar/baz';
const temp = path.split('/');
const rootdir = temp[1];
console.log(temp);
console.log(rootdir);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
[ '', 'foo', 'bar', 'baz' ]
foo

//解构写法
const path = '/foo/bar/baz';
const [,rootdir] = path.split('/');

console.log(rootdir);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
foo

对象的解构

对象是通过key，数组是通过下标

const obj = {name:'yangzhen' , age:24};

const { name , age , sex } = obj;

console.log(sex,name,age);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
undefined yangzhen 24

不使用别名

const obj = {name:'yangzhen' , age:24};

const name = 'jack';

const { name , age , sex } = obj;

console.log(sex,name,age);

////
const { name , age , sex } = obj;
        ^
SyntaxError: Identifier 'name' has already been declared

使用别名 赋初始值

const obj = {name:'yangzhen' , age:24};

const name = 'jack';

const { name:myname , age , sex = 18 } = obj;

console.log(sex,myname,age);

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
18 yangzhen 24

字符串的扩展方法


const { log } = console

const message = 'Error: foo is noe defined.'

log (
    message.startsWith('Error'),
    message.endsWith('.'),
    message.includes('is')
)

////
true true true

函数参数的默认值

原始方法(对于布尔类型)

//函数参数的默认值
function foo(enable) {
    //原始方法(对于布尔类型)
    enable = enable === undefined ? true : false
    console.log(enable)
}

foo() //// true
foo(false) //// false

原始方法(对于其它类型)

//函数参数的默认值
function foo(enable) {
    //原始方法
    enable =  enable || 0
    console.log(enable)
}

foo()  //// 0
foo(5) //// 5

ES6语法

function foo(enable = true){
    console.log(enable)
}

foo() //// true
foo(false) //// false

剩余参数

方式一：使用arguments

function foo(){
    console.log(arguments)
}

foo(1,2,3,4)
////
PS E:\lagou前端\demo> node .\part1\test1.js
[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

function foo(){
    const [a,b,c,d] = arguments
    console.log(a,b,c,d)
}

foo('a',2,3,4)

////
PS E:\lagou前端\demo> node .\part1\test1.js
a 2 3 4

方式二：使用...

...args放在最后 只能使用一次

function foo(first,...args){
    
    console.log(first)
    console.log(args)
}

foo('a',2,3,4)

////
PS E:\lagou前端\demo> node .\part1\test1.js
a
[ 2, 3, 4 ]

···展开数组

const arr = [1,2,3,4]

console.log(...arr)

////
PS E:\lagou前端\demo> node .\part1\test1.js
1 2 3 4

箭头函数与this

普通函数：this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。

箭头函数没有prototype(原型)，所以箭头函数本身没有this。箭头函数内部的this是词法作用域，由上下文确定，this指向在定义的时候继承自外层第一个普通函数的this。函数体内的this对象，就是定义时所在的对象，与使用时所在的对象无关。

const name = 'jack'

const person = {
    name: 'tom',
    sayHi: function(){
        console.log(`my name is ${this.name}`)
    }
}

person.sayHi()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is tom

const name = 'jack'

const person = {
    name: 'tom',
    sayHi: function(){
        console.log(`my name is ${name}`)
    }
}

person.sayHi()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is jack

使用箭头函数

箭头函数不会改变this的指向

const name = 'jack' //// 这个name 并不是this.name

const person = {
    name: 'tom',
    sayHi: () => {
        console.log(`my name is ${this.name}`)
    }
}

person.sayHi()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is undefined
const name = 'jack'

const person = {
    name: 'tom',
    sayHi: () => {
        console.log(`my name is ${name}`)
    }
}
console.log(this)
console.log(this.name)
person.sayHi()

////
PS E:\lagou前端\demo> node .\part1\test1.js
{}
undefined
my name is jack

传统方式_this的使用

const person = {
    name: 'tom',
    sayHi: function() {
        console.log(`my name is ${this.name}`)
    },
    sayHiAsync:function(){
        setTimeout(function () {
            console.log(`my name is ${this.name}`)
        }, 1000);
    }
}
person.sayHi()
person.sayHiAsync()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is tom
my name is undefined

const person = {
    name: 'tom',
    sayHi: function() {
        console.log(`my name is ${this.name}`)
    },
    sayHiAsync:function(){
        _this = this;
        setTimeout(function () {
            console.log(`my name is ${_this.name}`)
        }, 1000);
    }
}
person.sayHi()
person.sayHiAsync()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is tom
my name is tom

setTimeout使用箭头函数 可以避免_this

箭头函数内部的this是词法作用域，由上下文确定

const person = {
    name: 'tom',
    sayHi: () => {
        console.log(`my name is ${this.name}`)
    },
    sayHiAsync:function(){
        setTimeout(()=> {
            console.log(`my name is ${this.name}`)
        }, 1000);
    }
}
person.sayHi()
person.sayHiAsync()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is undefined
my name is tom

对象字面量增强

const bar = '345'

const obj = {
    foo: 123,
    //bar:bar
    bar,
    //method1:function(){
      //  console.log(this)
    //}
    method1(){
        console.log(this)
    },
    [Math.random()]:456 // 可以直接增加
}

//在传统方法中，对象动态的增加属性 
obj[Math.random()] = 123

console.log(obj)
obj.method1()

////

PS E:\lagou前端\demo> node .\part1\test1.js
{
  foo: 123,
  bar: '345',
  method1: [Function: method1],
  '0.8616180359346404': 123
}
{
  foo: 123,
  bar: '345',
  method1: [Function: method1],
  '0.8616180359346404': 123
}

对象扩展方法

Object.assign 将多个源对象中的属性复制到目标对象


const source1 = {
    a:123,
    b:123
}

const source2 = {
    b:789,
    d:789
}

const target = {
    a:456,
    c:456
}

const result =  Object.assign(target,source1,source2)

console.log(target)
console.log(result === target)

////
PS E:\lagou前端\demo> node .\part1\test1.js
{ a: 123, c: 456, b: 789, d: 789 }
true

案例

function func(obj){

    obj.name = 'func obj'
    console.log(obj)
}

const obj = {name: 'global obj'}

func(obj)
console.log(obj)

////
{ name: 'func obj' }
{ name: 'func obj' }
function func(obj){
    const funObj = Object.assign({},obj)
    funObj.name = 'func obj'
    console.log(funObj)
}

const obj = {name: 'global obj'}

func(obj)
console.log(obj)

////
{ name: 'func obj' }
{ name: 'global obj' }

Proxy代理对象

const person = {
    name: 'yang',
    age: 18
}
//参数1:代理对象
//参数2:代理的处理对象
const personProxy = new Proxy(person,{

    //通过get方法去监视属性访问
    //参数1:所代理的目标对象
    //参数2:外部所访问的属性名
    get(target,property){

        console.log(target,property)

        return 100
    },
    //通过set方法去完成属性设置
    set(){

    }
})

console.log(personProxy.name)

////
PS E:\lagou前端\demo> node .\part1\test1.js
{ name: 'yang', age: 18 } name
100

const person = {
    name: 'yang',
    age: 18
}
//参数1:代理对象
//参数2:代理的处理对象
const personProxy = new Proxy(person,{

    //通过get方法去监视属性访问
    //参数1:所代理的目标对象
    //参数2:外部所访问的属性名
    get(target,property){

        return property in target ? target[property] : 'default'
    },
    //通过set方法去完成属性设置
    set(){

    }
})

console.log(personProxy.name)
console.log(personProxy.xxxx)

////
PS E:\lagou前端\demo> node .\part1\test1.js
yang
default

const person = {
    name: 'yang',
    age: 18
}
//参数1:代理对象
//参数2:代理的处理对象
const personProxy = new Proxy(person,{

    //通过get方法去监视属性访问
    //参数1:所代理的目标对象
    //参数2:外部所访问的属性名
    get(target,property){

        return property in target ? target[property] : 'default'
    },
    //通过set方法去完成属性设置
    //1.所代理的目标对象
    //2.要写入的属性名
    //3.要写入的值
    set(target,property,value){
        if(property === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError(`${value} is not an int`)
            }
        }
        target[property] = value
    }
})

personProxy.age = 30
personProxy.sex = 'man'

console.log(personProxy)

////
PS E:\lagou前端\demo> node .\part1\test1.js
{ name: 'yang', age: 30, sex: 'man' }

proxy 和 Object.defineProperty()

Object.defineProperty()只能监听对象的读写

proxy还可以有更多的操作

const person = {
    name: 'yang',
    age: 18
}

const personProxy = new Proxy(person,{
    deleteProperty(target,property){
        console.log('delete',property)
        delete target[property]
    }
})

delete personProxy.age

console.log(person)

////
PS E:\lagou前端\demo> node .\part1\test1.js
delete age
{ name: 'yang' }

proxy 更好的支持数组对象的监视

const list = []

const listProxy = new Proxy(list,{
    set(target,property,value) {
        console.log('set',property,value)
        target[property] = value
        return true //表示设置成功,不写会报错
    }
})

listProxy.push(100)
listProxy.push(200)
console.log('list',list)

////
PS E:\lagou前端\demo> node .\part1\test1.js
set 0 100
set length 1
set 1 200
set length 2
list [ 100, 200 ]

Reflect 统一的对象操作API

静态类，封装了一系列对对象的底层操作

Reflet 成员方法就是Proxy处理对象的默认实现

去掉Reflect

const person = {
    name: 'yang',
    age: 18
}

const personProxy = new Proxy(person,{
    get(target,property) {
        console.log('watch logic')
       // return Reflect.get(target,property)
    }
})

console.log(personProxy.age)

////
PS E:\lagou前端\demo> node .\part1\test1.js
watch logic
undefined

添加Reflect

const person = {
    name: 'yang',
    age: 18
}

const personProxy = new Proxy(person,{
    get(target,property) {
        console.log('watch logic')
        return Reflect.get(target,property)
    }
})

console.log(personProxy.age)
////
PS E:\lagou前端\demo> node .\part1\test1.js
watch logic
18

Reflect的作用：统一的提供一套用于操作对象的API

不使用Reflect对对象的操作

const person = {
    name: 'yang',
    age: 18
}

//判断 对象是否有 属性
console.log('name' in person)
//获取对象所有的Key
console.log(Object.keys(person))
//删除对象的属性
console.log(delete person['age'])

console.log(person)

////
PS E:\lagou前端\demo> node .\part1\test1.js
true
[ 'name', 'age' ]
true
{ name: 'yang' }

使用Reflect 对对象的操作

const person = {
    name: 'yang',
    age: 18
}

//判断 对象是否有 属性
console.log(Reflect.has(person,'name'))
//获取对象所有的Key
console.log(Reflect.ownKeys(person))
//删除对象的属性
console.log(Reflect.deleteProperty(person,'age'))

console.log(person)

////
PS E:\lagou前端\demo> node .\part1\test1.js
true
[ 'name', 'age' ]
true
{ name: 'yang' }

Promise 一种更优的异步编程解决方案

解决了传统异步编程中函数嵌套过深的问题

class 关键字

传统使用prototype

function Person (name) {
    this.name = name;
}

Person.prototype.say = function () {
    console.log(`my name is ${this.name}`)
}

const p = new Person('tom')

p.say()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is tom

使用class

class Person {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log(`my name is ${this.name}`)
    }
}


const p = new Person('tom')

p.say()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is tom

静态方法

class Person {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log(`my name is ${this.name}`)
    }

    static create(name) {
        return new Person(name)
    }
}


const p = Person.create('tom')

p.say()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is tom

继承

class Person {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log(`my name is ${this.name}`)
    }

    static create(name) {
        return new Person(name)
    }
}

class Student extends Person {
    constructor(name,number) {
        super(name)
        this.number = number
    }

    hello() {
        super.say()
        console.log(`my number is ${this.number}`)
    }
}

const s = new Student('jack',100)

s.hello()

////
PS E:\lagou前端\demo> node .\part1\test1.js
my name is jack
my number is 100

Set 数据类型

const s = new Set()

//add返回的是Set 所以可以链式调用
s.add(1).add(2).add(3).add(4).add(4).add(5)

//set 元素 没有重复 所以 自动去重
console.log(s) //// Set { 1, 2, 3, 4, 5 }

//Set的遍历
s.forEach(i => {
    console.log(i) //// 1 2 3 4 5 
})

//Set的常用方法
console.log(s.size) //// 5
console.log(s.has(100)) ////false
console.log(s.delete(3)) ////true
console.log(s) //// Set { 1, 2, 4, 5 }

Set 对 数组的去重处理

Array.from() 可以将Set 转化为Array


const arr = [1,2,3,1,2,1,4,1]

//const result = Array.from(new Set(arr))

const result = [...new Set(arr)]

console.log(result)

PS E:\lagou前端\demo> node .\part1\test1.js
[ 1, 2, 3, 4 ]

Map 数据结构

普通键值对

对象的key只能是String类型，不是String类型会被自动转化为String

const obj = {}

obj[true] = 'value'
obj[123] = 'value'
obj[{ a: 1 }] = 'value'

console.log(Object.keys(obj))

////
PS E:\lagou前端\demo> node .\part1\test1.js
[ '123', 'true', '[object Object]' ]

Map 类型

const m = new Map()
const tom = { name:'tom'}
m.set(tom,90)

console.log(m)
console.log(m.get(tom))

//Map的遍历
m.forEach((value,key)=>{
    console.log(value,key)
})

////
PS E:\lagou前端\demo> node .\part1\test1.js
Map { { name: 'tom' } => 90 }
90
90 { name: 'tom' }

Symbol 新的数据类型

最主要的作用就是为对象添加独一无二的属性名

const  s = Symbol()

console.log(s)
console.log(typeof s)
console.log(Symbol() === Symbol())
//添加描述文本
//注意：即使添加同一描述文本 Symbol 也是不一样的
console.log(Symbol('foo'))

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
Symbol()
symbol
false 
Symbol(foo)

设置对象私有成员

const name = Symbol();
const person = {
    [name]:'yang',
    say(){
        console.log(this[name])
    }
}

console.log(person[Symbol()])
person.say()

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
undefined
yang

for of 循环

是一种数据统一的遍历方式

const arr = [100,200,300,400,500]

for (item of arr) {
    console.log(item) ////100 200 300 400
    if(item > 300){
        break
    }
}

//不能跳出循环
arr.forEach(item =>{
    console.log(item) ////100 200 300 400 
})

//some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
//some() 方法会依次执行数组的每个元素：
//如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
//如果没有满足条件的元素，则返回false。

//every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

//every() 方法使用指定函数检测数组中的所有元素：

//如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
//如果所有元素都满足条件，则返回 true。
const result =  arr.some((item)=>{
    return item > 300
})

console.log(result) ////true

for (i in arr) {
    console.log(arr[i]) ////100 200 300 400 500
}

Set的 for of 遍历

const s =  new Set(['foo','bar'])

for (const item of s) {
    console.log(item)
}

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
foo
bar

Map的 for of 遍历

const m = new Map()

m.set('foo','123')
m.set('bar','456')

for(const item of m ) {
    console.log(item)
}

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
[ 'foo', '123' ]
[ 'bar', '456' ]

使用数组的解构得到K V

const m = new Map()

m.set('foo','123')
m.set('bar','456')

for(const [key,value] of m ) {
    console.log(key,value)
}

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
foo 123
bar 456

实现可迭代接口 Iterable

对象是不可以直接迭代的

在对象中挂一个iterator方法，在这个方法中返回一个迭代器对象

接口约定：内部必须要有一个用于迭代的next方法

const obj = {
    store: ['foo','bar','baz'],
    [Symbol.iterator]: function() {
        let index = 0
        const self = this
        return {
            next: function() {
                const result = {
                    value:self.store[index],
                    done:index >= self.store.length
                }
                index++
                return result
            }
        }
    }
}

for (const item of obj) {
    console.log('循环',item)
}

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
循环 foo
循环 bar
循环 baz

迭代器模式

实现迭代器的目的

场景： 协同开发一个任务清单应用

//============== 我的代码 ==============
const todos= {
   life:['吃饭','睡觉','打豆豆'],
   learn:['语言','数学','英语'],
   
}

//============== 你的代码 ==============
for(const item of todos.life){
   console.log(item)
}

for(const item of todos.learn){
   console.log(item)
}

如果我需要在我的todos数据列表里添加数据时，你的代码就需要作出相应的更改，对于调用来说，代码耦合度太高

 //============== 我的代码 ==============
const todos= {
  life:['吃饭','睡觉','打豆豆'],
  learn:['语言','数学','英语'],
  work:['唱歌']
}

//============== 你的代码 ==============
for(const item of todos.life){
  console.log(item)
}

for(const item of todos.learn){
  console.log(item)
}

for(const item of todos.work){
  console.log(item)
}

如何解决：

如果我的代码能够对外统一提供一个遍历的接口

对于调用者而已，就不用去关心它内部的数据结构，也不用担心结构的改变

我们可以自己写一个方法来实现：

//============== 我的代码 ==============
const todos = {
    life: ['吃饭', '睡觉', '打豆豆'],
    learn: ['语言', '数学', '英语'],
    work: ['唱歌'],
    each: function (callback) {
        const all = [].concat(this.life, this.learn, this.work)
        for (item of all) {
            callback(item)
        }
    }
}

//============== 你的代码 ==============
todos.each(function (item) {
    console.log(item);
})

用迭代器的方法实现

//============== 我的代码 ==============
const todos = {
    life: ['吃饭', '睡觉', '打豆豆'],
    learn: ['语言', '数学', '英语'],
    work: ['唱歌'],
    [Symbol.iterator]:function() {
        //使用对象展开符 等同于 [].concat
        const all = [...this.life,...this.learn,...this.work]
        let index = 0
        return{
            next:function(){
                return{
                    value:all[index],
                    done: index++ >= all.length //true 就迭代完成了
                }
            }
        }
    }
}

//============== 你的代码 ==============
for(item of todos) {
    console.log(item)
}

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
吃饭
睡觉
打豆豆
语言
数学
英语
唱歌

迭代器的核心 就是对外提供统一遍历接口，让外部不用去担心内部的数据结构是怎么样的

这里展示的each方法只适用于这里展示的数组结构

而ES2015种的迭代器 是从语言层面去实现的迭代器模式，所以说它适用于任何数据结构，只要实现了iterable 接口，那我们就可以实现使用for…of 遍历对象

生成器函数

解决异步编程回调嵌套过深所导致的问题

function * foo(){
    console.log('test')
    return 100
}

const result = foo()
console.log(result)
console.log(result.next())

////
Object [Generator] {}
test
{ value: 100, done: true }

惰性执行

yield

function * foo(){
    console.log('111')
    yield 100
    console.log('222')
    yield 200
    console.log('333')
    yield 300
}

const generator = foo()
console.log(generator)
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

////
Object [Generator] {}
111
{ value: 100, done: false }
222
{ value: 200, done: false }
333
{ value: 300, done: false }
{ value: undefined, done: true }

Generator 应用

案例一：发号器

function * createIdMaker(){
    let id = 1
    while(true) {
        yield id++
    }
}

const idMaker = createIdMaker()
console.log(idMaker.next().value)
console.log(idMaker.next().value)
console.log(idMaker.next().value)
console.log(idMaker.next().value)

////
PS E:\lagou前端\demo> node .\part1\test1.js
1
2
3
4

案例二：使用Generator 函数实现Iterator方法

const todos = {
    life: ['吃饭', '睡觉', '打豆豆'],
    learn: ['语言', '数学', '英语'],
    work: ['唱歌'],
    [Symbol.iterator]: function* () {
        const all = [...this.life, ...this.learn, ...this.work]
        for (item of all) {
            yield item
        }
    }
}

for (const item of todos) {
    console.log(item)
}

////
PS E:\lagou前端\demo> node .\part1\test1.js
吃饭
睡觉
打豆豆
语言
数学
英语
唱歌

ES2016

Array.prototype.includes

我们先看看indexOf方法

const arr = ['foo',1,NaN,false]

console.log(arr.indexOf('foo'))
console.log(arr.indexOf(1))
console.log(arr.indexOf(NaN))
console.log(arr.indexOf(false))

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
0
1
-1
3

indexOf 无法检查出NaN

NaN是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。
注意点：NaN是唯一一个和自身不相等的值：NaN === NaN // false

includes 可以检查出NaN 返回布尔值

const arr = ['foo',1,NaN,false]

console.log(arr.includes('foo'))
console.log(arr.includes(1))
console.log(arr.includes(NaN))
console.log(arr.includes(false))

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
true
true
true
true

指数运算符

console.log(Math.pow(2,10))
console.log(2 ** 10)

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
1024
1024

ES2017

Object.values

const obj = {
    foo: 'value1',
    bar: 'balue2'
}

console.log(Object.values(obj))

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
[ 'value1', 'balue2' ]

Object.entries

数组形式返回键值对

const obj = {
    foo: 'value1',
    bar: 'balue2'
}

console.log(Object.entries(obj))

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
[ [ 'foo', 'value1' ], [ 'bar', 'balue2' ] ]

因此可以使用for of

const obj = {
    foo: 'value1',
    bar: 'balue2'
}

for (const [key, value] of Object.entries(obj)) {
    console.log(key, value)
}

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
foo value1
bar balue2

使用entries 转化 Map对象

const obj = {
    foo: 'value1',
    bar: 'balue2'
}

console.log(new Map(Object.entries(obj)))

////
PS F:\拉钩前端\lagou> node .\task1\task1.js
Map { 'foo' => 'value1', 'bar' => 'balue2' }

你可能感兴趣的:(javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他